/*
Theme Name: Daily Quiz
Theme URI: https://dailyquiz.ir
Author: Daily Quiz Team
Description: قالب کامل پلتفرم آزمون و کوییز آنلاین «دیلی کوییز» — راست‌چین، شمسی، AJAX، سازگار با هاست اشتراکی. UI منطبق بر طراحی Ice Glassmorphism.
Version: 3.68.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: daily-quiz
*/

/* =========================================================================
   FONTS
   ========================================================================= */
/* Fonts are self-hosted: see assets/css/fonts.css (enqueued before this file). */

/* =========================================================================
   DESIGN TOKENS  (ported from the React/Tailwind v4 "ice" theme)
   ========================================================================= */
:root {
  --font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --c-slate-900: #0f172a;
  --c-slate-800: #1e293b;
  --c-slate-700: #334155;
  --c-slate-600: #475569;
  --c-slate-500: #64748b;
  --c-slate-400: #94a3b8;
  --c-slate-300: #cbd5e1;
  --c-slate-200: #e2e8f0;
  --c-slate-100: #f1f5f9;

  --c-blue-700: #1d4ed8;
  --c-blue-600: #2563eb;
  --c-blue-500: #3b82f6;
  --c-blue-200: #bfdbfe;
  --c-blue-100: #dbeafe;
  --c-blue-50:  #eff6ff;

  --c-sky-600: #0284c7;
  --c-sky-500: #0ea5e9;
  --c-sky-400: #38bdf8;
  --c-sky-100: #e0f2fe;

  --c-indigo-600: #4f46e5;
  --c-indigo-100: #e0e7ff;
  --c-amber-600: #d97706;
  --c-amber-100: #fef3c7;
  --c-amber-50:  #fffbeb;
  --c-amber-200: #fde68a;
  --c-amber-700: #b45309;
  --c-green-600: #16a34a;
  --c-green-100: #dcfce7;
  --c-rose-600:  #e11d48;
  --c-rose-100:  #ffe4e6;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl:28px;

  /* v8 design system tokens */
  --dq-radius-btn: 8px;
  --dq-radius-card: 12px;
  --dq-radius-modal: 16px;
  --dq-space-1: 4px;  --dq-space-2: 8px;  --dq-space-3: 12px;
  --dq-space-4: 16px; --dq-space-6: 24px; --dq-space-8: 32px;
  --dq-shadow-card: 0 2px 8px rgba(15,23,42,.06);
  --dq-shadow-card-lg: 0 4px 20px rgba(15,23,42,.08);
  --dq-shadow-modal: 0 20px 60px rgba(15,23,42,.3);
  --dq-success: #16a34a; --dq-success-d: #15803d;
  --dq-danger:  #dc2626; --dq-danger-d:  #b91c1c;
  --dq-warning: #f59e0b; --dq-warning-text: #1e293b;
  --dq-disabled-bg: #e9ecef; --dq-disabled-text: #6c757d;
  --dq-card-border: #eef1f4;

  --max-w: 80rem; /* max-w-7xl */
}

/* =========================================================================
   BASE
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-slate-700);
  background: linear-gradient(135deg, #f0f7ff 0%, #e2eeff 100%);
  background-attachment: fixed;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  direction: rtl;
  max-width: 100%;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4,h5 { margin: 0; }
.font-mono { font-family: var(--font-mono); }

/* Applied to <html> while any fixed drawer/overlay (site menu, panel menu,
   notification/profile dropdowns) is open, so the page behind it cannot
   scroll and show through the translucent overlay/backdrop. */
html.dq-scroll-lock, html.dq-scroll-lock body { overflow: hidden; height: 100%; }

/* Decorative ambient ice blobs */
.dq-blob { position: fixed; border-radius: 9999px; filter: blur(80px); z-index: 0; pointer-events: none; opacity: .5; }
.dq-blob.b1 { top: -120px; left: -80px; width: 360px; height: 360px; background: #bfdbfe; }
.dq-blob.b2 { bottom: -140px; right: -100px; width: 420px; height: 420px; background: #c7d2fe; }
.dq-blob.b3 { top: 40%; right: 30%; width: 280px; height: 280px; background: #e0f2fe; opacity: .35; }

/* =========================================================================
   GLASS UTILITIES  (1:1 with index.css of the React app)
   ========================================================================= */
.glass-panel {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(194, 212, 235, 0.25);
}
.glass-panel-hover:hover {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 40px 0 rgba(194, 212, 235, 0.4);
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-navbar {
  background: rgba(246, 249, 252, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.02);
}
.glass-sidebar {
  background: rgba(246, 249, 252, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}
.ice-gradient { background: linear-gradient(135deg, #f0f7ff 0%, #e2eeff 100%); }
.text-gradient-ice {
  background: linear-gradient(135deg, #0f172a 30%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.1); }
::-webkit-scrollbar-thumb { background: rgba(147,197,253,.4); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(147,197,253,.6); }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.dq-container { max-width: var(--max-w); margin: 0 auto; padding-inline: 1rem; position: relative; z-index: 1; }
@media (min-width: 768px){ .dq-container { padding-inline: 2rem; } }
.dq-main { padding-block: 2rem 3rem; }
.dq-stack > * + * { margin-top: 1.5rem; }
.dq-stack-lg > * + * { margin-top: 2rem; }

/* =========================================================================
   HEADER
   ========================================================================= */
.dq-header { position: sticky; top: 0; width: 100%; z-index: 50; padding: .9rem 1rem; }
@media (min-width: 768px){ .dq-header { padding: .9rem 2rem; } }
.dq-header-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dq-brand { display: flex; align-items: center; gap: .55rem; }
.dq-logo {
  height: 36px; width: 36px; border-radius: 10px;
  background: linear-gradient(45deg, var(--c-blue-500), var(--c-sky-400));
  padding: 1.5px;
}
.dq-logo > span {
  height: 100%; width: 100%; border-radius: 8px; background: var(--c-slate-900);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-mono); font-weight: 900; font-size: .72rem;
}
.dq-brand h1, .dq-brand-name { font-size: 1.25rem; font-weight: 900; color: var(--c-slate-800); letter-spacing: -.02em; }

.dq-nav { display: none; align-items: center; gap: 1.4rem; font-size: .875rem; font-weight: 500; color: var(--c-slate-600); }
@media (min-width: 900px){ .dq-nav { display: flex; } }
.dq-nav a { position: relative; padding-block: .25rem; transition: color .2s; }
.dq-nav a::after { content:""; position: absolute; bottom: 0; right: 0; height: 2px; width: 0; background: var(--c-blue-500); transition: width .3s; }
.dq-nav a:hover { color: var(--c-blue-600); }
.dq-nav a:hover::after, .dq-nav a.is-active::after { width: 100%; }
.dq-nav a.is-active { color: var(--c-blue-600); font-weight: 800; }

.dq-header-actions { display: flex; align-items: center; gap: .55rem; }

.dq-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; width: 40px; border-radius: 12px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.9);
  color: var(--c-slate-700); transition: all .2s; position: relative;
}
.dq-icon-btn:hover { background: rgba(255,255,255,.85); }
.dq-icon-btn:active { transform: scale(.95); }

.dq-btn-premium {
  display: inline-flex; align-items: center; gap: .35rem; height: 40px; padding: 0 .9rem;
  border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap;
  color: #7c2d12; background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #ea9a3e 100%);
  box-shadow: 0 6px 16px -6px rgba(245,158,11,.55); transition: transform .2s, box-shadow .2s;
}
.dq-btn-premium:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -6px rgba(245,158,11,.6); color: #7c2d12; }
.dq-btn-premium:active { transform: translateY(0) scale(.97); }
.dq-btn-premium svg { flex: none; }

@media (max-width: 899px) {
  .dq-header-auth-btn {
    height: 40px; padding: 0 .9rem; font-size: .78rem; gap: .3rem; border-radius: 12px;
  }
  .dq-header-auth-btn svg { width: 14px; height: 14px; }
}
.dq-hamburger { display: inline-flex; }
@media (min-width: 900px){ .dq-hamburger { display: none; } }
.dq-desktop-only { display: none; }
@media (min-width: 900px){ .dq-desktop-only { display: flex; } }
.dq-mobile-only { display: flex; }
@media (min-width: 900px){ .dq-mobile-only { display: none; } }

.dq-bell-badge {
  position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9999px; background: var(--c-rose-600); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}

/* Notification dropdown */
.dq-bell-wrap { position: relative; }
.dq-bell-dropdown {
  position: absolute; top: 52px; left: 0; width: 320px; max-width: 86vw;
  border-radius: var(--radius-lg); overflow: hidden; z-index: 60; display: none;
}
.dq-bell-dropdown.open { display: block; animation: dq-pop .18s ease; }
@keyframes dq-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dq-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes dq-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes dq-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dq-bell-head { padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,.05); }
.dq-bell-head b { font-size: .85rem; color: var(--c-slate-800); }
.dq-bell-head button { font-size: .72rem; color: var(--c-blue-600); background: none; border: none; }
.dq-bell-list { max-height: 340px; overflow-y: auto; }
.dq-bell-item { display: flex; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(0,0,0,.04); transition: background .15s; }
.dq-bell-item:hover { background: rgba(255,255,255,.5); }
.dq-bell-item.unread { background: rgba(219,234,254,.4); }
.dq-bell-item .dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--c-blue-500); margin-top: 6px; flex: none; }
.dq-bell-item .meta b { font-size: .8rem; color: var(--c-slate-800); display: block; }
.dq-bell-item .meta p { font-size: .72rem; color: var(--c-slate-500); margin: 2px 0 0; }
.dq-bell-empty { padding: 2rem 1rem; text-align: center; color: var(--c-slate-400); font-size: .8rem; }

/* =========================================================================
   BUTTONS / BADGES / PILLS
   ========================================================================= */
.dq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: 10px 24px; border-radius: var(--dq-radius-btn); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; transition: filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; white-space: nowrap;
  cursor: pointer; background: #ffffff; color: #1e293b; text-decoration: none; line-height: 1.4;
  border-color: rgba(148,163,184,.4);
}
.dq-btn:hover { filter: brightness(.97); }
.dq-btn-dark { background: var(--c-slate-900); color: #ffffff; border-color: var(--c-slate-900); }
.dq-btn-dark:hover { background: var(--c-slate-900); color: #ffffff !important; filter: brightness(1.35); box-shadow: 0 6px 16px -8px rgba(15,23,42,.5); }
/* Primary */
.dq-btn-primary { background: var(--c-blue-600); color: #ffffff; border-color: var(--c-blue-600); }
.dq-btn-primary:hover { color: #ffffff !important; filter: brightness(.9); box-shadow: 0 6px 16px -8px rgba(37,99,235,.55); }
.dq-btn-primary:active { filter: brightness(.82); }
/* Secondary (outline that fills primary on hover) */
.dq-btn-ghost { background: #ffffff; color: var(--c-blue-600) !important; border: 1px solid var(--c-blue-600); }
.dq-btn-ghost:hover { background: var(--c-blue-600); color: #ffffff !important; filter: none; }
/* Success / Danger / Warning */
.dq-btn-success { background: var(--dq-success); color: #fff !important; border-color: var(--dq-success); }
.dq-btn-success:hover { color: #fff !important; filter: brightness(.92); }
.dq-btn-danger, .dq-btn.dq-danger { background: var(--dq-danger); color: #fff !important; border-color: var(--dq-danger); }
.dq-btn-danger:hover, .dq-btn.dq-danger:hover { color: #fff !important; filter: brightness(.92); }
.dq-btn-warning, .dq-btn-amber { background: var(--dq-warning); color: var(--dq-warning-text) !important; border-color: var(--dq-warning); }
.dq-btn-warning:hover, .dq-btn-amber:hover { color: var(--dq-warning-text) !important; filter: brightness(.94); }
.dq-btn-block { width: 100%; }
.dq-btn-lg { padding: 14px 28px; font-size: 16px; }
.dq-btn:disabled, .dq-btn[disabled] { background: var(--dq-disabled-bg); color: var(--dq-disabled-text) !important; border-color: var(--dq-disabled-bg); cursor: not-allowed; filter: none; box-shadow: none; }

.dq-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 9999px; font-size: .65rem; font-weight: 800; }
.dq-badge-blue { background: var(--c-blue-100); color: var(--c-blue-700); }
.dq-badge-sky { background: var(--c-sky-100); color: var(--c-sky-600); }
.dq-badge-amber { background: var(--c-amber-100); color: var(--c-amber-700); }
.dq-badge-green { background: var(--c-green-100); color: var(--c-green-600); }
.dq-badge-rose { background: var(--c-rose-100); color: var(--c-rose-600); }

.dq-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 9999px;
  background: linear-gradient(90deg, rgba(219,234,254,.9), rgba(224,242,254,.9));
  border: 1px solid rgba(147,197,253,.5); box-shadow: 0 6px 18px -10px rgba(37,99,235,.35);
  color: var(--c-blue-700); font-size: .75rem; font-weight: 800; letter-spacing: -.01em;
}

/* =========================================================================
   HERO
   ========================================================================= */
.dq-hero { text-align: center; max-width: 50rem; margin: 0 auto; position: relative; }
.dq-hero h2 { font-size: clamp(2rem, 5.4vw, 3.35rem); font-weight: 900; color: var(--c-slate-800); line-height: 1.22; margin-top: 1.1rem; letter-spacing: -.02em; }
.dq-hero p { font-size: 1rem; color: var(--c-slate-600); line-height: 2.1; margin-top: 1.1rem; text-align: justify; max-width: 42rem; margin-left: auto; margin-right: auto; }
@media (min-width:768px){ .dq-hero p { text-align: center; } }
.dq-hero strong { color: var(--c-slate-800); font-weight: 800; }

/* Trust / stats bar under the hero */
.dq-stats-bar {
  display: grid; grid-template-columns: repeat(2,1fr); gap: .9rem; max-width: 44rem; margin: 2rem auto 0;
}
@media (min-width: 640px){ .dq-stats-bar { grid-template-columns: repeat(4,1fr); } }
.dq-stat-pill {
  text-align: center; padding: 1rem .6rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 12px 30px -22px rgba(15,23,42,.35);
}
.dq-stat-pill b { display: block; font-size: 1.35rem; font-weight: 900; font-family: var(--font-mono); color: var(--c-blue-700); }
.dq-stat-pill span { display: block; font-size: .72rem; color: var(--c-slate-500); margin-top: .25rem; font-weight: 700; }

/* Bento feature grid */
.dq-bento { display: grid; grid-template-columns: 1fr; gap: 1.1rem; padding-top: 2rem; }
@media (min-width: 640px){ .dq-bento { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .dq-bento { grid-template-columns: repeat(4,1fr); } }
.dq-feature {
  padding: 1.4rem 1.25rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.5); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 16px 34px -28px rgba(15,23,42,.4);
  transition: transform .25s, box-shadow .25s, background .25s;
}
.dq-feature:hover { background: rgba(255,255,255,.85); transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(15,23,42,.28); }
.dq-feature-ico {
  height: 44px; width: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  margin-bottom: .8rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.dq-feature-ico.blue { background: linear-gradient(135deg, var(--c-blue-100), #dbeafe); color: var(--c-blue-600); }
.dq-feature-ico.indigo { background: linear-gradient(135deg, var(--c-indigo-100), #e0e7ff); color: var(--c-indigo-600); }
.dq-feature-ico.sky { background: linear-gradient(135deg, var(--c-sky-100), #e0f2fe); color: var(--c-sky-600); }
.dq-feature-ico.amber { background: linear-gradient(135deg, var(--c-amber-100), #fef3c7); color: var(--c-amber-600); }
.dq-feature h4 { font-size: .92rem; font-weight: 800; color: var(--c-slate-800); margin-bottom: .4rem; }
.dq-feature p { font-size: .79rem; color: var(--c-slate-500); line-height: 1.75; margin: 0; }

/* =========================================================================
   SECTION CARD  (the big glass tool boxes)
   ========================================================================= */
.dq-section-card {
  padding: 20px 24px; border-radius: var(--dq-radius-card);
  background: rgba(255,255,255,.82); border: 1px solid var(--dq-card-border);
  backdrop-filter: blur(12px); box-shadow: var(--dq-shadow-card);
}
@media (min-width: 768px){ .dq-section-card { padding: 24px; } }
@media (max-width: 767px){ .dq-section-card { padding: 16px; } }
.dq-section-head { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(226,232,240,.6); margin-bottom: 1.25rem; }
@media (min-width: 768px){ .dq-section-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.dq-section-head .left { display: flex; align-items: flex-start; gap: 1rem; }
.dq-tool-ico {
  height: 48px; width: 48px; border-radius: 16px; flex: none;
  background: linear-gradient(45deg, var(--c-blue-500), var(--c-sky-400)); padding: 1.5px;
  box-shadow: 0 6px 18px rgba(37,99,235,.12);
}
.dq-tool-ico > span { height: 100%; width: 100%; border-radius: 14px; background: var(--c-slate-900); display: flex; align-items: center; justify-content: center; color: var(--c-sky-400); }
.dq-section-head h3 { font-size: 1.2rem; font-weight: 800; color: var(--c-slate-800); }
.dq-section-head p { font-size: .78rem; color: var(--c-slate-500); margin: .35rem 0 0; line-height: 1.7; }

.dq-note { font-size: .85rem; color: var(--c-slate-600); background: rgba(255,255,255,.5); padding: 1rem; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.4); line-height: 1.9; }
.dq-note strong { color: var(--c-slate-800); }
.dq-subhead { font-size: .72rem; font-weight: 800; color: var(--c-slate-500); letter-spacing: .04em; margin: 1.25rem 0 1rem; display: flex; align-items: center; gap: .4rem; }

/* =========================================================================
   QUIZ / EXAM CARD GRID
   ========================================================================= */
.dq-card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px){ .dq-card-grid.cols-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .dq-card-grid.cols-3 { grid-template-columns: repeat(3,1fr); } }

.dq-quiz-card {
  padding: 1rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.4);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: all .25s; box-shadow: 0 2px 10px rgba(194,212,235,.12);
}
.dq-quiz-card:hover { background: rgba(255,255,255,.85); transform: translateY(-2px); }
a.dq-quiz-card { text-decoration: none; color: inherit; }
.dq-quiz-card .row { display: flex; justify-content: space-between; align-items: center; }
.dq-quiz-card .cat { font-size: .65rem; }
.dq-quiz-card .diff { font-size: .68rem; color: var(--c-slate-400); font-family: var(--font-mono); }
.dq-quiz-card h5 { font-size: .9rem; font-weight: 800; color: var(--c-slate-800); margin: .5rem 0 .35rem; transition: color .2s; }
.dq-quiz-card:hover h5 { color: var(--c-blue-600); }
.dq-quiz-card .desc { font-size: .76rem; color: var(--c-slate-500); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dq-quiz-card .foot { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid rgba(241,245,249,.6); font-size: .72rem; color: var(--c-slate-400); }
.dq-quiz-card .foot .stats { display: flex; gap: .8rem; }
.dq-quiz-card .foot .stats span { display: inline-flex; align-items: center; gap: .25rem; }

/* =========================================================================
   REGISTRATION CTA + BLOG CAROUSEL
   ========================================================================= */
.dq-cta-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 900px){ .dq-cta-grid { grid-template-columns: 7fr 5fr; } }
.dq-cta-bullets { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; }
.dq-cta-bullets li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--c-slate-600); }
.dq-cta-bullets .chk { height: 20px; width: 20px; border-radius: 9999px; background: var(--c-green-100); color: var(--c-green-600); display: flex; align-items: center; justify-content: center; flex: none; }

.dq-mini-form { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-xl); padding: 1.5rem; }
.dq-input {
  width: 100%; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--c-slate-200);
  background: rgba(255,255,255,.7); font-family: inherit; font-size: .9rem; color: var(--c-slate-800);
}
.dq-input:focus { outline: none; border-color: var(--c-blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
select.dq-input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-inline-end: 2.5rem; cursor: pointer; color: var(--c-slate-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .85rem center;
  background-size: 15px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
select.dq-input::-ms-expand { display: none; }
select.dq-input:disabled { cursor: not-allowed; opacity: .6; }
select.dq-input option { color: #0f172a; background: #fff; }
.dq-label { display: block; font-size: .78rem; font-weight: 700; color: var(--c-slate-600); margin-bottom: .4rem; }
.dq-field + .dq-field { margin-top: .9rem; }
.dq-grid-2 .dq-field { margin-top: 0 !important; }
/* Grid items default to min-width:auto, so a field with long intrinsic content
   (e.g. a <select> with a long option) can force its column wider and squish
   the sibling column. min-width:0 lets both columns share space evenly. */
.dq-grid-2 > * { min-width: 0; }
.dq-field { min-width: 0; }

.dq-blog-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px){ .dq-blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .dq-blog-grid { grid-template-columns: repeat(4,1fr); } }
.dq-blog-card { border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.5); transition: all .25s; }
.dq-blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(194,212,235,.3); }
.dq-blog-thumb { aspect-ratio: 16/10; overflow: hidden; }
.dq-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.dq-blog-card:hover .dq-blog-thumb img { transform: scale(1.06); }
.dq-blog-body { padding: 1rem; }
.dq-blog-body h4 { font-size: .88rem; font-weight: 800; color: var(--c-slate-800); line-height: 1.6; }
.dq-blog-meta { display: flex; justify-content: space-between; font-size: .68rem; color: var(--c-slate-400); margin-top: .75rem; }

/* =========================================================================
   SIDEBAR (panel + public)
   ========================================================================= */
.dq-layout { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px){ .dq-layout { flex-direction: row; } .dq-layout .dq-content { flex: 1; min-width: 0; } .dq-layout .dq-aside { width: 320px; flex: none; } }
.dq-aside-card { border-radius: var(--radius-xl); padding: 1.25rem; }
.dq-aside-card h4 { font-size: .9rem; font-weight: 800; color: var(--c-slate-800); margin-bottom: .85rem; }

.dq-rank-row { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid rgba(226,232,240,.5); font-size: .82rem; }
.dq-rank-row .num { height: 26px; width: 26px; border-radius: 9999px; background: var(--c-slate-100); color: var(--c-slate-600); font-weight: 800; font-size: .75rem; display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-mono); }
.dq-rank-row .num.gold { background: #fde68a; color: #92400e; }
.dq-rank-row .num.silver { background: #e2e8f0; color: #475569; }
.dq-rank-row .num.bronze { background: #fed7aa; color: #9a3412; }
.dq-rank-row .name { flex: 1; color: var(--c-slate-700); font-weight: 600; }
.dq-rank-row .score { font-family: var(--font-mono); color: var(--c-blue-600); font-weight: 700; }

/* Tabs */
.dq-tabs { display: flex; flex-wrap: wrap; gap: .35rem; padding: .25rem; border-radius: 12px; background: rgba(255,255,255,.5); margin-bottom: 1rem; }
.dq-tabs button, .dq-tabs > a { flex: 1 1 auto; text-align: center; padding: .5rem; border-radius: 10px; border: none; background: transparent; font-weight: 700; font-size: .78rem; color: var(--c-slate-500); transition: all .2s; cursor: pointer; text-decoration: none; }
.dq-tabs button.is-active, .dq-tabs > a.is-active { background: var(--c-slate-900); color: #fff; }
.dq-tabs > a:hover { color: var(--c-slate-800); }
/* The active tab must always keep white text, even while hovered/tapped —
   otherwise dark hover text lands on the dark active background and becomes unreadable. */
.dq-tabs button.is-active:hover, .dq-tabs > a.is-active:hover { color: #fff; }

/* Mobile drawer */
.dq-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); backdrop-filter: blur(2px); z-index: 70; }
.dq-drawer-overlay.open { display: block; animation: dq-fade-in .2s ease forwards; }
.dq-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 280px; max-width: 84vw; z-index: 80; padding: 1.25rem; overflow-y: auto; background: #fff; }
.dq-drawer.open { display: block; animation: dq-slide-in-right .25s cubic-bezier(.16,1,.3,1) forwards; }
.dq-drawer a { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 12px; color: var(--c-slate-700); font-weight: 600; font-size: .9rem; }
.dq-drawer a:hover, .dq-drawer a.is-active { background: rgba(219,234,254,.6); color: var(--c-blue-700); }
.dq-drawer-profile { background: rgba(37,99,235,.06); margin-bottom: .5rem; }
.dq-drawer-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.dq-drawer-profile span { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dq-drawer-profile b { font-size: .88rem; color: var(--c-slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-drawer-profile em { font-size: .72rem; font-style: normal; color: var(--c-slate-500); }
.dq-drawer-notif { justify-content: flex-start; }
.dq-drawer-sep { height: 1px; background: rgba(15,23,42,.08); margin: .6rem 0; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.dq-footer { margin-top: 3rem; padding: 2.5rem 0 2rem; }
.dq-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px){ .dq-footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } }
.dq-footer h5 { font-size: .9rem; font-weight: 800; color: var(--c-slate-800); margin-bottom: 1rem; }
.dq-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.dq-footer a { font-size: .82rem; color: var(--c-slate-500); transition: color .2s; }
.dq-footer a:hover { color: var(--c-blue-600); }
.dq-footer-bottom { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(226,232,240,.6); font-size: .78rem; color: var(--c-slate-400); }

/* =========================================================================
   ADS
   ========================================================================= */
.dq-ad { border-radius: var(--radius-lg); overflow: hidden; border: 1px dashed rgba(148,163,184,.4); background: rgba(255,255,255,.35); text-align: center; }
.dq-ad img { width: 100%; }
.dq-ad-label { font-size: .68rem; color: var(--c-slate-400); padding: .6rem; }

/* =========================================================================
   ANIMATION HELPERS
   ========================================================================= */
@keyframes dq-spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: dq-spin-slow 6s linear infinite; }
@keyframes dq-pulse { 50% { opacity: .55; } }
.animate-pulse { animation: dq-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes dq-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dq-reveal { animation: dq-fade-up .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Utility helpers used in templates */
.dq-flex { display: flex; }
.dq-between { justify-content: space-between; }
.dq-center { align-items: center; }
.dq-gap { gap: .75rem; }
.dq-grow { flex: 1; }
.text-blue { color: var(--c-blue-600); }
.text-muted { color: var(--c-slate-500); }
.fw-800 { font-weight: 800; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.hide-mobile { display: none; }
@media (min-width: 768px){ .hide-mobile { display: initial; } }

/* =========================================================
   Page templates: dashboard / leaderboard / API docs
   ========================================================= */

/* Stat cards (dashboard) */
.dq-stat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
@media (min-width: 768px){ .dq-stat-grid { grid-template-columns: repeat(4,1fr); } }
.dq-stat-card {
  background: rgba(255,255,255,.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem; box-shadow: 0 4px 18px -10px rgba(37,99,235,.25);
  display: flex; flex-direction: column; gap: .35rem;
}
.dq-stat-card .ico { height: 38px; width: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: .25rem; }
.dq-stat-card .ico.blue { background: var(--c-blue-100); color: var(--c-blue-600); }
.dq-stat-card .ico.amber { background: var(--c-amber-100); color: var(--c-amber-600); }
.dq-stat-card .ico.rose { background: var(--c-rose-100); color: var(--c-rose-600); }
.dq-stat-card .ico.indigo { background: var(--c-indigo-100); color: var(--c-indigo-600); }
.dq-stat-card .label { font-size: .72rem; color: var(--c-slate-500); font-weight: 700; }
.dq-stat-card .value { font-size: 1.5rem; font-weight: 900; color: var(--c-slate-800); font-family: var(--font-mono); line-height: 1; }

/* Dashboard profile head */
.dq-profile-head { display: flex; align-items: center; gap: 1rem; }
.dq-avatar { height: 56px; width: 56px; border-radius: 9999px; background: linear-gradient(135deg, var(--c-blue-600), var(--c-sky-400)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.25rem; flex:none; }

/* Simple data table */
.dq-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dq-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .8rem; }
.dq-table th { text-align: right; padding: .65rem .75rem; color: var(--c-slate-500); font-weight: 800; font-size: .72rem; border-bottom: 1px solid rgba(226,232,240,.7); }
.dq-table td { padding: .7rem .75rem; border-bottom: 1px solid rgba(241,245,249,.8); color: var(--c-slate-700); }
.dq-table tr.is-me { background: rgba(219,234,254,.4); }
.dq-table td.mono { font-family: var(--font-mono); color: var(--c-blue-600); font-weight: 700; }

/* Notifications — card list (replaces the old raw <table>, which broke on mobile) */
.dq-notif-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.dq-notif-list { display: grid; gap: .7rem; margin-top: 1rem; }
.dq-notif-card {
  background: rgba(255,255,255,.6); border: 1px solid rgba(226,232,240,.7); border-radius: var(--radius-lg);
  padding: .9rem 1.05rem; box-shadow: 0 10px 26px -22px rgba(15,23,42,.3);
}
.dq-notif-card.unread { background: rgba(219,234,254,.35); border-color: rgba(191,219,254,.7); }
.dq-notif-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.dq-notif-title { font-size: .88rem; color: var(--c-slate-800); }
.dq-notif-msg { font-size: .82rem; color: var(--c-slate-600); line-height: 1.8; margin: .4rem 0 0; }
.dq-notif-date { display: block; font-size: .7rem; color: var(--c-slate-400); margin-top: .5rem; font-family: var(--font-mono); }

/* Leaderboard podium (full leaderboard pages) */
.dq-podium { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; align-items: end; margin-bottom: 1.5rem; }
.dq-podium .seat { border-radius: var(--radius-lg); padding: 1.1rem .75rem; text-align: center; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(10px); }
.dq-podium .seat .medal { font-size: 1.6rem; }
.dq-podium .seat .pname { font-weight: 800; color: var(--c-slate-800); font-size: .82rem; margin-top: .3rem; }
.dq-podium .seat .pxp { font-family: var(--font-mono); color: var(--c-blue-600); font-weight: 800; font-size: .8rem; }
.dq-podium .seat.first { background: linear-gradient(160deg, #fffbeb, #fef3c7); border-color: #fde68a; transform: translateY(-8px); }
.dq-podium .seat.second { background: linear-gradient(160deg, #f8fafc, #e2e8f0); border-color: #e2e8f0; }
.dq-podium .seat.third { background: linear-gradient(160deg, #fff7ed, #fed7aa); border-color: #fed7aa; }

/* API docs console */
.dq-api-hero { background: var(--c-slate-900); border: 1px solid #1e293b; border-radius: var(--radius-xl); padding: 1.5rem; color: #cbd5e1; }
.dq-api-hero .tag { font-size: .68rem; font-family: var(--font-mono); background: rgba(59,130,246,.18); color: #93c5fd; padding: .25rem .65rem; border-radius: 6px; display: inline-block; }
.dq-api-hero h3 { font-size: clamp(1.25rem,3vw,1.75rem); font-weight: 900; color: #fff; margin: .7rem 0 .5rem; }
.dq-api-hero p { font-size: .8rem; color: #94a3b8; line-height: 1.9; max-width: 640px; }
.dq-api-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem; min-width: 0; }
.dq-api-grid > * { min-width: 0; }
@media (min-width: 1024px){ .dq-api-grid { grid-template-columns: 1fr 1.6fr; } }
.dq-endpoint { width: 100%; text-align: right; padding: .9rem 1rem; background: rgba(255,255,255,.6); border: 1px solid rgba(226,232,240,.9); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background .15s; margin-bottom: .7rem; }
.dq-endpoint:hover { background: #fff; }
.dq-endpoint.is-active { border-color: var(--c-blue-600); background: #fff; }
.dq-endpoint .verb { font-size: .6rem; font-weight: 800; font-family: var(--font-mono); padding: .12rem .45rem; border-radius: 5px; }
.dq-endpoint .verb.get { background: #eff6ff; color: #1d4ed8; }
.dq-endpoint .verb.post { background: #ecfdf5; color: #047857; }
.dq-endpoint .route { font-family: var(--font-mono); font-size: .76rem; font-weight: 800; color: var(--c-slate-800); }
.dq-endpoint .desc { font-size: .68rem; color: var(--c-slate-500); margin-top: .25rem; }
.dq-console { background: var(--c-slate-900); border: 1px solid #1e293b; border-radius: var(--radius-lg); padding: 1rem; position: relative; min-height: 280px; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.dq-console .run { position: absolute; top: .75rem; left: .75rem; font-size: .64rem; font-weight: 700; color: #cbd5e1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }
.dq-console .run:hover { background: rgba(255,255,255,.16); color: #fff; }
.dq-console pre { direction: ltr; text-align: left; font-family: var(--font-mono); font-size: .72rem; color: #a5b4fc; white-space: pre-wrap; word-break: break-word; overflow: auto; max-width: 100%; padding-top: 1.75rem; margin: 0; box-sizing: border-box; }
.dq-console-route { font-family: var(--font-mono); font-size: .68rem; color: var(--c-indigo-600); background: var(--c-indigo-100); padding: .12rem .5rem; border-radius: 5px; font-weight: 700; }
.dq-api-hero code { max-width: 100%; overflow-wrap: anywhere; white-space: normal !important; }
@media (max-width: 640px) {
  .dq-api-grid .dq-flex.dq-between { flex-wrap: wrap; gap: .5rem; }
  .dq-endpoint .route { overflow-wrap: anywhere; }
}

/* Login-required prompt */
.dq-login-gate { text-align: center; padding: 3rem 1.5rem; }
.dq-login-gate .gate-ico { height: 64px; width: 64px; border-radius: 9999px; background: var(--c-blue-100); color: var(--c-blue-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }

/* ============================================================
 * PHASE 2 — auth, user panel, quiz player, online match
 * ========================================================== */

/* ---- shared bits ---- */
.dq-note { font-size: .82rem; color: var(--c-slate-600); margin-top: .5rem; min-height: 1em; }
.dq-note-error { color: var(--c-rose-600); }
.dq-link-btn { background: none; border: none; color: var(--c-blue-600); font-size: .8rem; font-weight: 700; cursor: pointer; padding: 0; }
.dq-link-btn:disabled { color: var(--c-slate-500); cursor: default; }
.dq-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dq-spinner { width: 38px; height: 38px; border: 3px solid rgba(37,99,235,.2); border-top-color: var(--c-blue-600); border-radius: 50%; animation: dq-spin .8s linear infinite; }
@keyframes dq-spin { to { transform: rotate(360deg); } }
.dq-mini-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: 0; background: none; border: none; }
.dq-mini-form .dq-input { flex: 1; min-width: 200px; }

/* ---- auth + complete profile ---- */
.dq-auth-wrap { display: flex; justify-content: center; align-items: flex-start; padding: 2.5rem 1rem 4rem; }
.dq-auth-card { width: 100%; max-width: 420px; padding: 2rem 1.75rem; border-radius: var(--radius-2xl); }
.dq-auth-brand { text-align: center; margin-bottom: 1.25rem; }
.dq-auth-brand .dq-logo { margin: 0 auto .6rem; display: inline-flex; }
.dq-auth-brand h2 { font-size: 1.4rem; font-weight: 800; }
.dq-auth-brand p { color: var(--c-slate-600); font-size: .85rem; margin-top: .35rem; }
.dq-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dq-role-opt { display: block; border: 2px solid rgba(148,163,184,.3); border-radius: var(--radius-lg); padding: .7rem .8rem; cursor: pointer; transition: all .18s; }
.dq-role-opt input { display: none; }
.dq-role-opt b { display: block; font-size: .86rem; }
.dq-role-opt span { display: block; font-size: .7rem; color: var(--c-slate-500); margin-top: .2rem; line-height: 1.5; }
.dq-role-opt.is-active { border-color: var(--c-blue-600); background: var(--c-blue-100); }

/* ---- header profile dropdown ---- */
.dq-profile-wrap { position: relative; }
.dq-profile-chip { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; padding: .25rem .6rem .25rem .35rem; cursor: pointer; font-weight: 700; font-size: .8rem; color: var(--c-slate-800); }
.dq-profile-pic { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.dq-profile-menu { position: absolute; top: calc(100% + 10px); left: 0; width: 230px; padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .18s; z-index: 60; background: #ffffff; border: 1px solid rgba(148,163,184,.25); box-shadow: 0 20px 45px -20px rgba(15,23,42,.45); backdrop-filter: none; }
.dq-profile-wallet { display: flex; gap: .4rem; padding: .1rem .4rem .6rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(148,163,184,.2); }
.dq-profile-wallet span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; font-size: .76rem; font-weight: 800; border-radius: 9px; padding: .35rem 0; }
.dq-profile-wallet .rose { background: var(--c-rose-100); color: var(--c-rose-600); }
.dq-profile-wallet .amber { background: var(--c-amber-100); color: var(--c-amber-600); }
.dq-profile-wallet .blue { background: var(--c-blue-100); color: var(--c-blue-700); }
.dq-profile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.dq-profile-menu-head { display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem .75rem; border-bottom: 1px solid rgba(148,163,184,.2); margin-bottom: .4rem; }
.dq-profile-menu-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dq-profile-menu-head b { display: block; font-size: .85rem; }
.dq-profile-menu-head span { font-size: .7rem; color: var(--c-slate-500); }
.dq-profile-menu a { display: block; padding: .55rem .65rem; border-radius: 9px; font-size: .82rem; color: var(--c-slate-700); text-decoration: none; transition: background .15s; }
.dq-profile-menu a:hover { background: var(--c-blue-100); }
.dq-profile-menu .dq-logout { color: var(--c-rose-600); margin-top: .25rem; border-top: 1px solid rgba(148,163,184,.2); border-radius: 0 0 8px 8px; }

/* ---- user panel layout ---- */
.dq-panel-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.25rem; align-items: start; }
.dq-panel-sidebar { position: sticky; top: 90px; padding: 1.1rem; border-radius: var(--radius-2xl); }
.dq-panel-user { display: flex; gap: .7rem; align-items: center; padding-bottom: 1rem; margin-bottom: .75rem; border-bottom: 1px solid rgba(148,163,184,.2); }
.dq-panel-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.dq-panel-user b { display: block; font-size: .9rem; margin-bottom: .3rem; }
.dq-panel-menu { display: flex; flex-direction: column; gap: .15rem; }
.dq-panel-menu a { display: flex; align-items: center; gap: .65rem; padding: .65rem .7rem; border-radius: 11px; font-size: .85rem; font-weight: 600; color: var(--c-slate-700); text-decoration: none; transition: all .15s; }
.dq-panel-menu a .ico { font-size: 1rem; }
.dq-panel-menu a:hover { background: rgba(37,99,235,.08); }
.dq-panel-menu a.is-active { background: var(--c-slate-900); color: #fff; }
.dq-panel-menu .dq-panel-logout { color: var(--c-rose-600); margin-top: .35rem; }
.dq-panel-content { min-height: 60vh; }
.dq-panel-loading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 0; color: var(--c-slate-500); }
.dq-panel-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 1rem; }

/* ---- quiz player ---- */
.dq-quiz-intro h2 { font-size: 1.6rem; font-weight: 800; margin: .5rem 0; }
.dq-quiz-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; font-size: .82rem; color: var(--c-slate-600); }
.dq-quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dq-quiz-dots { display: flex; gap: .35rem; flex-wrap: wrap; }
.dq-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(148,163,184,.4); transition: all .2s; }
.dq-dot.active { background: var(--c-blue-600); transform: scale(1.25); }
.dq-dot.done { background: var(--c-green-600); }
.dq-quiz-wallet { display: flex; gap: .75rem; font-weight: 700; font-size: .85rem; }
.dq-quiz-counter { color: var(--c-slate-500); font-size: .8rem; margin: 1rem 0 .4rem; }
.dq-quiz-q { font-size: 1.15rem; font-weight: 700; line-height: 1.9; margin-bottom: 1.1rem; }
.dq-quiz-options { display: grid; gap: .6rem; }
.dq-quiz-opt { position: relative; overflow: hidden; text-align: right; padding: .85rem 1rem; border-radius: var(--radius-lg); border: 2px solid rgba(148,163,184,.3); background: rgba(255,255,255,.6); font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.dq-quiz-opt:hover:not(:disabled) { border-color: var(--c-blue-500); }
.dq-quiz-opt.selected { border-color: var(--c-blue-600); background: var(--c-blue-100); }
.dq-quiz-opt.removed { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.dq-quiz-opt .vote-bar { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: rgba(37,99,235,.12); z-index: 0; }
.dq-quiz-opt .vote-pct { position: relative; z-index: 1; float: left; font-family: var(--font-mono); color: var(--c-blue-600); font-size: .78rem; }
.dq-ability-box { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; margin-top: 1.1rem; }
.dq-ability-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem;
  min-width: 0; padding: .6rem .3rem .5rem; border-radius: 16px; border: 1px solid rgba(148,163,184,.3);
  background: rgba(255,255,255,.7); font-family: inherit; cursor: pointer; transition: all .15s; text-align: center;
}
.dq-ability-btn:hover:not(:disabled) { border-color: var(--c-amber-600); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(15,23,42,.15); }
.dq-ability-btn:disabled { opacity: .5; cursor: default; }
.dq-ab-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(245,158,11,.12); color: var(--c-amber-600); }
.dq-ab-ico svg, .dq-ab-ico.dq-ico { width: 16px; height: 16px; }
.dq-ab-label { font-size: .66rem; font-weight: 700; line-height: 1.3; color: var(--c-slate-700); word-break: break-word; max-width: 100%; }
.dq-ability-btn .cost { display: inline-flex; align-items: center; gap: .2rem; font-size: .64rem; color: var(--c-amber-700); font-family: var(--font-mono); font-weight: 800; }
.dq-ability-out { margin-top: .8rem; }
.dq-ai-hint { background: var(--c-indigo-100); border-radius: var(--radius-lg); padding: .75rem 1rem; font-size: .85rem; line-height: 1.9; }
.dq-iq-banner { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(99,102,241,.08)); border: 1px solid rgba(191,219,254,.6); border-radius: 18px; padding: 1rem 1.2rem; margin: 1rem 0; }
.dq-iq-banner .ico { flex: none; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--c-blue-600), var(--c-sky-400)); color: #fff; display: flex; align-items: center; justify-content: center; }
.dq-iq-banner b { display: block; font-size: 1.6rem; font-weight: 900; font-family: var(--font-mono); color: var(--c-slate-900); }
.dq-iq-banner span { font-size: .74rem; color: var(--c-slate-500); }

.dq-result-grid { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 1.5rem 0; }
.dq-chart-glow { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; flex: none; }
.dq-chart-glow::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.10), rgba(37,99,235,0) 70%);
}
#dq-result-chart { width: 180px !important; height: 180px !important; max-width: 180px; max-height: 180px; flex: none; }
.dq-result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.dq-result-stat { display: flex; align-items: center; gap: .65rem; background: rgba(255,255,255,.7); border: 1px solid rgba(226,232,240,.7); border-radius: 16px; padding: .65rem .8rem; min-width: 140px; }
.dq-result-stat .ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(37,99,235,.1); color: var(--c-blue-600); }
.dq-result-stat .ico .dq-ico { width: 16px; height: 16px; }
.dq-result-stat .txt { min-width: 0; }
.dq-result-stat span { display: block; font-size: .7rem; color: var(--c-slate-500); }
.dq-result-stat b { font-size: 1.05rem; font-weight: 800; }
.dq-review { display: flex; flex-direction: column; gap: .9rem; margin-top: .75rem; }
.dq-rev-q { background: rgba(255,255,255,.6); border: 1px solid rgba(226,232,240,.6); border-radius: 18px; padding: 1rem 1.1rem; }
.dq-rev-q-head { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.dq-rev-q-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-slate-900); color: #fff; font-size: .7rem; font-weight: 800; font-family: var(--font-mono); display: flex; align-items: center; justify-content: center; margin-top: .1rem; }
.dq-rev-q b { display: block; line-height: 1.8; font-weight: 700; }
.dq-rev-opt { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 12px; font-size: .82rem; margin-bottom: .35rem; background: rgba(148,163,184,.08); }
.dq-rev-opt-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--c-slate-300); display: flex; align-items: center; justify-content: center; color: transparent; }
.dq-rev-opt-mark .dq-ico { width: 12px; height: 12px; }
.dq-rev-opt-txt { flex: 1; }
.dq-rev-opt.correct { background: var(--c-green-100); color: var(--c-green-600); font-weight: 700; }
.dq-rev-opt.correct .dq-rev-opt-mark { background: var(--c-green-600); border-color: var(--c-green-600); color: #fff; }
.dq-rev-opt.wrong { background: var(--c-rose-100); color: var(--c-rose-600); font-weight: 700; }
.dq-rev-opt.wrong .dq-rev-opt-mark { background: var(--c-rose-600); border-color: var(--c-rose-600); color: #fff; }

/* ---- online match arena ---- */
.dq-match-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.dq-match-player { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; }
.dq-match-player img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.8); }
.dq-match-player b { font-size: .85rem; }
.dq-match-score { font-size: 1.4rem; font-weight: 900; font-family: var(--font-mono); }
.dq-match-player.you .dq-match-score { color: var(--c-blue-600); }
.dq-match-player.opp .dq-match-score { color: var(--c-rose-600); }
.dq-match-vs { display: flex; flex-direction: column; align-items: center; }
.dq-match-vs span { font-size: 1.7rem; font-weight: 900; font-family: var(--font-mono); color: var(--c-amber-600); }
.dq-match-vs small { font-size: .65rem; color: var(--c-slate-500); }

/* Lobby CTA: side-by-side on wide screens, cleanly stacked (never partially wrapped) on narrow ones. */
.dq-match-cta { display: flex; gap: .75rem; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }
.dq-match-cta .dq-btn { flex: 1 1 220px; max-width: 320px; justify-content: center; }
@media (max-width: 560px) {
  .dq-match-cta { flex-direction: column; align-items: stretch; }
  .dq-match-cta .dq-btn { max-width: 100%; width: 100%; }
}

/* Friendly question-count picker on the quiz start screen. */
.dq-count-picker { margin-top: 1.1rem; }
.dq-count-picker-label { font-size: .78rem; font-weight: 700; color: var(--c-slate-600); margin-bottom: .5rem; }
.dq-count-opts { display: flex; gap: .5rem; flex-wrap: wrap; }
.dq-count-opt {
  padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.7); font-size: .8rem; font-weight: 800; font-family: var(--font-mono); cursor: pointer; transition: all .15s;
}
.dq-count-opt:hover { border-color: var(--c-blue-400); }
.dq-count-opt.is-active { border-color: var(--c-blue-600); background: var(--c-blue-600); color: #fff; }

/* ---- responsive ---- */
@media (max-width: 880px) {
  .dq-panel-layout { grid-template-columns: 1fr; }
  .dq-panel-sidebar { position: static; }
  .dq-panel-menu { flex-direction: row; flex-wrap: wrap; }
  .dq-panel-menu a { flex: 1 1 auto; }
  .dq-grid-2 { grid-template-columns: 1fr; }
  .dq-role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .dq-auth-wrap { padding: 1.25rem .75rem 3rem; }
  .dq-auth-card { padding: 1.5rem 1.1rem; max-width: 100%; }

  /* Compact quiz player so a normal MCQ question fits one mobile screen without scrolling. */
  .dq-quiz-card { padding: 14px !important; border-radius: 18px; }
  .dq-quiz-intro h2 { font-size: 1.25rem; margin: .35rem 0; }
  .dq-quiz-meta { gap: .7rem; font-size: .74rem; margin-top: .6rem; }
  .dq-quiz-top { gap: .5rem; }
  .dq-quiz-wallet { font-size: .76rem; gap: .5rem; }
  .dq-quiz-counter { margin: .6rem 0 .35rem; font-size: .72rem; }
  .dq-quiz-q { font-size: .96rem; line-height: 1.55; margin-bottom: .7rem; }
  .dq-quiz-options { gap: .4rem; }
  .dq-quiz-opt { padding: .6rem .7rem; font-size: .82rem; gap: .55rem; }
  .dq-quiz-opt .dq-opt-letter { width: 22px; height: 22px; font-size: .68rem; }
  .dq-ability-wrap { margin-top: .7rem; padding: .7rem; }
  .dq-ability-head { font-size: .7rem; margin-bottom: .5rem; }
  .dq-ability-box { gap: .4rem; }
  .dq-ability-btn { padding: .5rem .2rem .4rem; border-radius: 12px; gap: .2rem; }
  .dq-ab-ico { width: 24px; height: 24px; }
  .dq-ab-ico svg, .dq-ab-ico.dq-ico { width: 13px; height: 13px; }
  .dq-ab-label { font-size: .58rem; }
  .dq-ability-btn .cost { font-size: .58rem; }
  #dq-quiz-next { padding: .7rem 1rem; font-size: .84rem; margin-top: .8rem; }

  /* Compact match arena head. */
  .dq-match-head { gap: .4rem; }
  .dq-match-player img { width: 42px; height: 42px; }
  .dq-match-player b { font-size: .72rem; }
  .dq-match-score { font-size: 1.05rem; }
  .dq-match-vs span { font-size: 1.25rem; }
}

/* ---- icon system (SVG replacing emoji) ---- */
.dq-ico { display: inline-block; vertical-align: -.15em; flex: none; }
.dq-ico-img { object-fit: contain; border-radius: 4px; }
.dq-badge .dq-ico { width: 1em; height: 1em; vertical-align: -.18em; }
.dq-stat-card .ico.indigo { background: var(--c-indigo-100); color: var(--c-indigo-600); }
.dq-stat-card .ico .dq-ico, .dq-feature-ico .dq-ico { width: 60%; height: 60%; }
.dq-panel-menu a .ico { display: inline-flex; }
.dq-big-ico { display: flex; justify-content: center; margin-bottom: .5rem; }
.dq-big-ico .dq-ico { width: 54px; height: 54px; }
.dq-big-ico .dq-ico { color: var(--c-amber-600); }
.dq-lock-ico { display: flex; justify-content: center; color: var(--c-slate-500); margin-bottom: .25rem; }
.dq-quiz-wallet .dq-ico, .dq-ability-btn .dq-ico, .cost .dq-ico { width: 1em; height: 1em; vertical-align: -.15em; }
.dq-rev-opt-mark svg { display: block; }

/* ---- blog page ---- */
.dq-section-head .dq-title { font-size: 1.4rem; font-weight: 800; color: var(--c-slate-900); margin: 0; display: flex; align-items: center; gap: .5rem; }
.dq-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; }
.dq-blog-card { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.dq-blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-blue-100); }
.dq-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dq-blog-thumb-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--c-blue-600); }
.dq-blog-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.dq-blog-meta { display: flex; align-items: center; gap: .6rem; font-size: .7rem; color: var(--c-slate-500); }
.dq-blog-meta .dq-ico { vertical-align: -.15em; }
.dq-blog-body h3 { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.dq-blog-body h3 a { color: var(--c-slate-900); }
.dq-blog-body h3 a:hover { color: var(--c-blue-600); }
.dq-blog-body p { margin: 0; color: var(--c-slate-600); font-size: .84rem; line-height: 1.9; }
.dq-blog-more { margin-top: auto; color: var(--c-blue-600); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.dq-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 1.5rem; flex-wrap: wrap; }
.dq-pagination .page-numbers { padding: .4rem .85rem; border-radius: 12px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.6); color: var(--c-slate-700); font-weight: 800; text-decoration: none; font-size: .8rem; }
.dq-pagination .page-numbers.current { background: var(--c-blue-600); color: #fff; }

/* ---- question bank (panel) ---- */
.dq-qb-cats { display: flex; flex-wrap: wrap; gap: .45rem; }
.dq-qb-cat { padding: .4rem .9rem; border-radius: 999px; border: 1.5px solid var(--c-slate-200); background: rgba(255,255,255,.7); font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.dq-qb-cat:hover { border-color: var(--c-blue-400); }
.dq-qb-cat.is-active { border-color: var(--c-blue-600); background: var(--c-blue-600); color: #fff; }
.dq-qb-results { display: grid; gap: .75rem; }
.dq-qb-item { padding: 1rem 1.1rem; }
.dq-qb-item b { font-size: .92rem; color: var(--c-slate-800); }
.dq-qb-item .dq-rev-opt { font-size: .82rem; }

/* ---- my school / classes ---- */
.dq-id-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dq-id-label { display: block; font-size: .72rem; color: var(--c-slate-500); margin-bottom: .25rem; }
.dq-id-code { font-size: 1.6rem; font-weight: 800; letter-spacing: .12em; color: var(--c-blue-700); }
.dq-class-card h5 { font-size: .82rem; font-weight: 800; color: var(--c-slate-700); display: flex; align-items: center; gap: .35rem; }
.dq-ann-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.dq-ann-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: rgba(255,255,255,.55); border-radius: 12px; padding: .5rem .8rem; font-size: .82rem; }
.dq-ann-list li time { color: var(--c-slate-500); font-size: .68rem; white-space: nowrap; }
.dq-btn-sm { padding: .3rem .6rem; font-size: .72rem; }
.dq-stream-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; margin: .5rem 0; background: #000; }
.dq-stream-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- single post ---- */
.dq-post-hero { padding: 1.75rem; }
.dq-post-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: var(--c-blue-600); margin-bottom: 1rem; }
.dq-post-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--c-slate-500); margin-bottom: .75rem; }
.dq-post-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.dq-post-title { font-size: 1.9rem; font-weight: 800; line-height: 1.6; color: var(--c-slate-900); margin: 0; }
.dq-post-feature { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 20px 45px -25px rgba(15,23,42,.4); }
.dq-post-feature img { width: 100%; height: auto; display: block; }
.dq-post-content { line-height: 2.1; color: var(--c-slate-700); font-size: 1rem; }
.dq-post-content h2 { font-size: 1.35rem; font-weight: 800; margin: 1.6rem 0 .8rem; color: var(--c-slate-900); }
.dq-post-content h3 { font-size: 1.15rem; font-weight: 800; margin: 1.3rem 0 .6rem; color: var(--c-slate-800); }
.dq-post-content p { margin: 0 0 1.1rem; }
.dq-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 1rem 0; }
.dq-post-content a { color: var(--c-blue-600); text-decoration: underline; }
.dq-post-content blockquote { border-right: 4px solid var(--c-blue-500); background: rgba(37,99,235,.06); margin: 1.2rem 0; padding: .8rem 1.1rem; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; color: var(--c-slate-700); }
.dq-post-content ul, .dq-post-content ol { padding-right: 1.4rem; margin: 0 0 1.1rem; }
.dq-post-content li { margin-bottom: .5rem; }
.dq-post-content pre { background: var(--c-slate-900); color: #e2e8f0; border-radius: var(--radius-lg); padding: 1rem; overflow: auto; direction: ltr; text-align: left; font-family: var(--font-mono); font-size: .82rem; }
.dq-post-content code { font-family: var(--font-mono); background: rgba(148,163,184,.18); padding: .1rem .35rem; border-radius: 6px; font-size: .85em; }
.dq-post-tags { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(148,163,184,.25); font-size: .8rem; color: var(--c-slate-500); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.dq-post-tags a { color: var(--c-blue-600); }
.dq-post-author { display: flex; align-items: center; gap: 1rem; }
.dq-post-author-avatar img { border-radius: 50%; display: block; }
.dq-post-pages { margin-top: 1rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.dq-post-pages a, .dq-post-pages > span { padding: .3rem .7rem; border-radius: 10px; background: rgba(255,255,255,.6); font-weight: 700; font-size: .8rem; }

/* ---- wallet cards (dashboard) ---- */
.dq-wallet-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-top: 1rem; }
.dq-wallet-card { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: var(--radius-xl); background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.7); }
.dq-wallet-card .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.dq-wallet-card .dq-collectible-icon { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(15,23,42,.20)); }

/* ---- premium store + avatar collection ---- */
.dq-store-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 1.65rem;margin:0 0 1.25rem;border:1px solid rgba(129,174,255,.28);border-radius:24px;color:#f8fbff;background:radial-gradient(circle at 88% 25%,rgba(59,218,255,.28),transparent 23%),linear-gradient(128deg,#081331,#172b66 60%,#3b35a9);box-shadow:0 18px 38px -26px rgba(15,33,99,.75)}.dq-store-hero:after{content:'';position:absolute;z-index:-1;width:230px;height:230px;left:-65px;bottom:-150px;border:1px solid rgba(120,221,255,.24);border-radius:50%;box-shadow:0 0 0 38px rgba(120,221,255,.04),0 0 0 76px rgba(120,221,255,.035)}.dq-store-kicker{display:inline-flex;align-items:center;gap:.35rem;color:#75eafb;font-size:.65rem;font-weight:900;letter-spacing:.11em}.dq-store-hero h4{margin:.45rem 0 .3rem;color:#fff;font-size:1.28rem}.dq-store-hero p{margin:0;color:#b9cef7;font-size:.78rem}.dq-store-hero-gem{display:grid;place-items:center;width:72px;height:72px;flex:none;border:1px solid rgba(255,255,255,.28);border-radius:23px;color:#6cecff;background:rgba(255,255,255,.1);box-shadow:inset 0 1px rgba(255,255,255,.35),0 10px 25px rgba(0,10,50,.25);transform:rotate(8deg)}
.dq-store-shelf{margin:1.2rem 0;padding:1.2rem;border:1px solid rgba(148,163,184,.16);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(241,247,255,.88));box-shadow:0 20px 42px -36px rgba(25,49,102,.55)}.dq-store-shelf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 .1rem 1rem}.dq-store-shelf-head span{color:#3b74db;font-size:.62rem;font-weight:950;letter-spacing:.12em}.dq-store-shelf-head h4{margin:.25rem 0;color:#0d1c3c;font-size:1.15rem}.dq-store-shelf-head p{margin:0;color:#71809a;font-size:.75rem}.dq-store-shelf-head>b{display:grid;place-items:center;min-width:48px;min-height:48px;border-radius:16px;color:#fff;font-size:.78rem;background:linear-gradient(135deg,#2469ef,#7353e9);box-shadow:0 10px 20px -12px #2563eb}
.dq-avatar-shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:.8rem}.dq-avatar-shop-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:244px;padding:.6rem;border:1px solid rgba(120,144,190,.16);border-radius:20px;background:#fff;box-shadow:0 12px 25px -22px rgba(16,32,76,.5);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.dq-avatar-shop-card:before{content:'';position:absolute;z-index:0;inset:0 0 auto;height:90px;background:linear-gradient(135deg,#e8f2ff,#efeaff);border-radius:0 0 50% 50%}.dq-avatar-shop-card>*{position:relative;z-index:1}.dq-avatar-shop-card:hover{transform:translateY(-5px);border-color:rgba(67,111,237,.48);box-shadow:0 20px 32px -20px rgba(41,69,151,.35)}.dq-avatar-shop-card>img{display:block;width:86px;height:86px;object-fit:cover;align-self:center;margin:.85rem 0 .5rem;border:4px solid #fff;border-radius:26px;background:#dce7ff;box-shadow:0 9px 18px rgba(22,45,111,.17)}.dq-avatar-rarity{position:absolute;top:.55rem;right:.55rem;padding:.2rem .43rem;border-radius:7px;color:#fff;font-size:.55rem;font-weight:900;background:#6b54e9}.dq-avatar-shop-card h5{margin:.15rem 0;color:#102043;font-size:.82rem}.dq-avatar-shop-card p{min-height:2.6em;margin:.25rem 0 .55rem;color:#77849b;font-size:.62rem;line-height:1.6}.dq-avatar-shop-card>div{display:flex;align-items:center;justify-content:space-between;gap:.35rem;margin-top:auto}.dq-avatar-shop-card strong{color:#1c3979;font-size:.65rem}.dq-avatar-shop-card .dq-store-buy{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#266af2,#704bdf);box-shadow:0 7px 12px -8px #284cb5;transition:transform .2s ease}.dq-avatar-shop-card .dq-store-buy:hover{transform:scale(1.09)}.dq-store-resources .dq-store-pkg{border-radius:18px;transition:transform .2s ease}.dq-store-resources .dq-store-pkg:hover{transform:translateY(-3px)}
/* Academic listing receives the same considered card language. */
.dq-subject-grid .dq-subject-card{position:relative;overflow:hidden;border:1px solid rgba(102,126,184,.14);border-radius:19px;background:linear-gradient(145deg,#fff,#f4f8ff);box-shadow:0 14px 25px -24px rgba(20,43,104,.6);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.dq-subject-grid .dq-subject-card:after{content:'';position:absolute;width:70px;height:70px;left:-28px;bottom:-38px;border-radius:50%;background:rgba(67,112,237,.09)}.dq-subject-grid .dq-subject-card:hover,.dq-subject-grid .dq-subject-card.is-active{transform:translateY(-4px);border-color:#5a84ec;box-shadow:0 19px 30px -23px rgba(34,69,160,.5)}.dq-subject-grid .dq-subject-icon{background:linear-gradient(135deg,#e8f2ff,#e5e7ff);color:#315dde;box-shadow:inset 0 1px rgba(255,255,255,.85)}
@media(max-width:600px){.dq-store-hero{padding:1.2rem;border-radius:20px}.dq-store-hero h4{font-size:1.05rem}.dq-store-hero-gem{width:56px;height:56px;border-radius:18px}.dq-avatar-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.dq-avatar-shop-card{min-height:226px;border-radius:17px}.dq-avatar-shop-card>img{width:74px;height:74px;border-radius:22px}.dq-store-shelf{padding:.85rem;border-radius:21px}}
.dq-avatar-shop-card.is-free .dq-avatar-rarity{background:#11a777}.dq-avatar-shop-card.is-free .dq-store-buy{background:linear-gradient(135deg,#10b981,#36c995)}.dq-avatar-shop-card.is-free strong{color:#079669}
/* ---- collectible quiz cards ---- */
.dq-card-collection{margin:1.5rem 0;padding:1.25rem;border:1px solid rgba(105,99,220,.22);border-radius:28px;background:radial-gradient(circle at 90% 8%,rgba(88,214,255,.15),transparent 25%),linear-gradient(145deg,#0b1330,#1c1c62);box-shadow:0 24px 46px -30px #111a65}.dq-card-collection .dq-store-shelf-head h4{color:#fff}.dq-card-collection .dq-store-shelf-head p{color:#abb9dd}.dq-card-collection .dq-store-shelf-head span{color:#75ebfa}.dq-quiz-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.1rem}.dq-quiz-collectible-card{position:relative;overflow:hidden;min-height:365px;border:1px solid rgba(161,220,255,.32);border-radius:22px;background:linear-gradient(160deg,#162654,#0b1235);box-shadow:0 17px 28px -18px rgba(0,0,0,.72);transition:transform .25s ease,box-shadow .25s ease}.dq-quiz-collectible-card:hover{z-index:1;transform:translateY(-7px) scale(1.025);box-shadow:0 28px 35px -20px #000}.dq-quiz-collectible-card:before{content:'';position:absolute;z-index:1;inset:7px;border:1px solid rgba(255,255,255,.15);border-radius:17px;pointer-events:none}.dq-qcard-art{position:relative;display:grid;place-items:center;height:235px;overflow:hidden;background:radial-gradient(circle at 50% 20%,#3979dd,#172b64 65%)}.dq-qcard-art:after{content:'';position:absolute;inset:auto -20% -55px;height:110px;border-radius:50%;background:#0b1235}.dq-qcard-art img{position:relative;z-index:1;width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 17px 16px rgba(0,0,0,.42));transition:transform .3s ease}.dq-quiz-collectible-card:hover .dq-qcard-art img{transform:scale(1.1)}.dq-qcard-art span{position:absolute;z-index:2;top:10px;right:10px;padding:.27rem .48rem;border:1px solid rgba(255,255,255,.4);border-radius:8px;color:#fff;background:rgba(10,20,59,.7);font-size:.58rem;font-weight:900;backdrop-filter:blur(7px)}.dq-qcard-body{position:relative;z-index:2;padding:.55rem .9rem .85rem}.dq-qcard-body small{color:#6cefff;font-size:.52rem;font-weight:900;letter-spacing:.11em}.dq-qcard-body h5{margin:.3rem 0;color:#fff;font-size:.98rem}.dq-qcard-body p{min-height:2.9em;margin:0;color:#aebddd;font-size:.64rem;line-height:1.55}.dq-qcard-footer{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(181,215,255,.13)}.dq-qcard-footer b{color:#ffd971;font-size:.64rem}.dq-qcard-footer button{padding:.38rem .55rem;border:0;border-radius:9px;cursor:pointer;color:#071430;font-size:.63rem;font-weight:900;background:linear-gradient(135deg,#6bf0f5,#6c8cff)}.dq-quiz-collectible-card.rarity-1{border-color:rgba(189,126,255,.45)}.dq-quiz-collectible-card.rarity-1 .dq-qcard-art{background:radial-gradient(circle at 50% 15%,#a057e7,#292064 65%)}.dq-quiz-collectible-card.rarity-2{border-color:rgba(255,205,102,.5)}.dq-quiz-collectible-card.rarity-2 .dq-qcard-art{background:radial-gradient(circle at 50% 15%,#d99b3c,#56335f 65%)}.dq-quiz-collectible-card.is-free .dq-qcard-footer b{color:#65f1bc}.dq-quiz-collectible-card.is-free .dq-qcard-footer button{background:linear-gradient(135deg,#3ce4af,#6ddaaa)}
@media(max-width:600px){.dq-card-collection{padding:.85rem;border-radius:22px}.dq-quiz-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.dq-quiz-collectible-card{min-height:300px}.dq-qcard-art{height:180px}.dq-qcard-body{padding:.45rem .6rem .65rem}.dq-qcard-body h5{font-size:.77rem}.dq-qcard-body p{font-size:.57rem}.dq-qcard-footer b,.dq-qcard-footer button{font-size:.56rem}}
.dq-wallet-card .v { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1; }
.dq-wallet-card .l { display: block; font-size: .72rem; color: var(--c-slate-500); margin-top: .2rem; }
.dq-wallet-card.rose .ic { background: var(--c-rose-100); color: var(--c-rose-600); }
.dq-wallet-card.amber .ic { background: var(--c-amber-100); color: var(--c-amber-600); }
.dq-wallet-card.blue .ic { background: var(--c-blue-100); color: var(--c-blue-700); }
.dq-wallet-card.slate .ic { background: var(--c-slate-100); color: var(--c-slate-700); }
.dq-progress { height: 10px; border-radius: 999px; background: rgba(148,163,184,.25); overflow: hidden; }
.dq-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-blue-500), var(--c-sky-400)); transition: width .4s; }
.dq-exam-tag { background: var(--c-indigo-100); color: var(--c-indigo-600); padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }

/* ---- academic route banner ---- */
.dq-study-route-banner{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);align-items:center;gap:1rem;min-height:290px;padding:2.25rem 2.4rem;margin:0 0 1.4rem;border:1px solid rgba(255,255,255,.34);border-radius:30px;color:#fff;background:linear-gradient(125deg,#071a43 0%,#123e8b 48%,#2465df 100%);box-shadow:0 25px 55px -35px rgba(25,75,177,.8)}
.dq-study-route-grid{position:absolute;z-index:-1;inset:0;opacity:.2;background-image:linear-gradient(rgba(182,230,255,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(182,230,255,.34) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,#000,transparent 90%)}
.dq-study-route-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(3px);pointer-events:none}.dq-study-route-glow-one{width:330px;height:330px;left:-130px;bottom:-210px;background:rgba(44,225,242,.35)}.dq-study-route-glow-two{width:260px;height:260px;right:0;top:-155px;background:rgba(152,111,255,.45)}
.dq-study-route-kicker{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.85rem;color:#a8efff;font-size:.74rem;font-weight:900;letter-spacing:.04em}.dq-study-route-kicker i{width:8px;height:8px;border-radius:50%;background:#51e7b9;box-shadow:0 0 0 6px rgba(81,231,185,.13),0 0 20px #51e7b9;animation:dqStudyPulse 2s infinite}
.dq-study-route-copy{position:relative;z-index:1}.dq-study-route-copy h2{margin:0;color:#fff;font-size:clamp(1.75rem,3vw,2.55rem);line-height:1.2;font-weight:950;letter-spacing:-.045em}.dq-study-route-copy h2 em{font-style:normal;background:linear-gradient(90deg,#67effb,#a8a4ff);background-clip:text;-webkit-background-clip:text;color:transparent}.dq-study-route-copy p{max-width:510px;margin:.8rem 0 1rem;color:#d4e5ff;font-size:.92rem;line-height:2}
.dq-study-route-points{display:flex;flex-wrap:wrap;gap:.55rem}.dq-study-route-points span{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .62rem;border:1px solid rgba(204,239,255,.2);border-radius:10px;background:rgba(255,255,255,.09);color:#e9f6ff;font-size:.71rem;font-weight:800;backdrop-filter:blur(8px)}.dq-study-route-points svg{color:#72f5d1}
.dq-study-route-orbit{position:relative;width:210px;height:210px;justify-self:center;animation:dqStudyFloat 5s ease-in-out infinite}.dq-study-route-ring{position:absolute;border:1px solid rgba(178,235,255,.35);border-radius:50%}.dq-study-route-ring-a{inset:12px;transform:rotateX(66deg) rotateZ(-18deg)}.dq-study-route-ring-b{inset:0;opacity:.65;transform:rotateX(68deg) rotateZ(47deg)}.dq-study-route-core{position:absolute;inset:60px;display:grid;place-content:center;text-align:center;gap:.15rem;border:1px solid rgba(255,255,255,.43);border-radius:28px;background:linear-gradient(145deg,rgba(138,240,255,.92),rgba(84,100,255,.92));box-shadow:0 18px 40px rgba(2,13,58,.4),inset 0 1px rgba(255,255,255,.65);transform:rotate(-8deg)}.dq-study-route-core span{display:grid;place-items:center;color:#fff}.dq-study-route-core b{font-size:.68rem;color:#effdff}.dq-study-route-node{position:absolute;width:12px;height:12px;border:2px solid #dffffe;border-radius:50%;background:#46eac7;box-shadow:0 0 0 7px rgba(70,234,199,.12),0 0 16px #46eac7}.dq-study-route-node.n1{top:24px;right:33px}.dq-study-route-node.n2{bottom:29px;left:19px;background:#b6a4ff;box-shadow:0 0 0 7px rgba(182,164,255,.12),0 0 16px #b6a4ff}.dq-study-route-node.n3{top:88px;left:0;background:#7cd9ff;box-shadow:0 0 0 7px rgba(124,217,255,.12),0 0 16px #7cd9ff}
@keyframes dqStudyFloat{50%{transform:translateY(-9px) rotate(2deg)}}@keyframes dqStudyPulse{50%{transform:scale(.76);opacity:.65}}
@media (max-width:640px){.dq-study-route-banner{grid-template-columns:1fr;min-height:0;padding:1.5rem 1.25rem 1.1rem;border-radius:24px}.dq-study-route-copy h2{font-size:1.7rem}.dq-study-route-copy p{font-size:.82rem;line-height:1.9}.dq-study-route-orbit{width:138px;height:138px;margin:-.15rem auto -1rem}.dq-study-route-core{inset:39px;border-radius:19px}.dq-study-route-core span svg{width:23px;height:23px}.dq-study-route-ring-a{inset:8px}.dq-study-route-node{transform:scale(.7)}}

/* ---- auth method toggle ---- */
.dq-auth-method { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .9rem; font-size: .8rem; }
.dq-auth-method .dq-link-btn { background: none; border: none; cursor: pointer; color: var(--c-slate-500); font-weight: 700; font-size: .8rem; }
.dq-auth-method .dq-link-btn.is-active { color: var(--c-blue-600); text-decoration: underline; }

/* ---- avatar picker ---- */
.dq-avatar-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.dq-avatar-opt { padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; background: none; line-height: 0; }
.dq-avatar-opt img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.dq-avatar-opt.is-active { border-color: var(--c-blue-500); }
.dq-avatar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:.7rem; padding:.75rem; border:1px solid rgba(97,116,174,.12); border-radius:18px; background:linear-gradient(135deg,rgba(238,247,255,.9),rgba(246,243,255,.85)); }
.dq-avatar-opt { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:2px solid transparent; border-radius:17px; background:#172347; box-shadow:0 8px 16px rgba(33,49,101,.13); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.dq-avatar-opt:hover { transform:translateY(-3px) scale(1.03); border-color:rgba(68,208,233,.8); }
.dq-avatar-opt img { width:100%; height:100%; border-radius:15px; transition:transform .25s ease; }.dq-avatar-opt:hover img{transform:scale(1.08)}
.dq-avatar-opt.is-active { border-color:#3cdbef; box-shadow:0 0 0 3px rgba(60,219,239,.18),0 10px 20px rgba(42,116,248,.22); }.dq-avatar-opt.is-active::after{content:'✓';position:absolute;left:4px;bottom:4px;display:grid;width:19px;height:19px;place-items:center;border-radius:7px;color:#061a37;background:#65f0c3;font-size:.72rem;font-weight:950;line-height:1}
.dq-store-pkg:has(img) { overflow:hidden; }.dq-store-pkg > img { width:82px!important;height:82px!important;border:3px solid #fff!important;border-radius:23px!important;box-shadow:0 12px 24px rgba(43,63,137,.18); }

/* ---- created exams list + popups ---- */
.dq-exam-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.dq-exam-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; flex-wrap: wrap; }
.dq-exam-row-main h4 { margin: 0 0 .35rem; font-size: 1rem; }
.dq-exam-row-meta { display: flex; align-items: center; gap: .6rem; font-size: .74rem; color: var(--c-slate-500); flex-wrap: wrap; }
.dq-exam-row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.dq-btn.dq-danger { color: var(--c-rose-600); }
.dq-popup { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dq-popup-card { position: relative; background: #fff; width: 100%; max-width: 460px; padding: 1.5rem; border-radius: var(--radius-2xl); max-height: 88vh; overflow: auto; }
.dq-popup-card h4 { margin: 0 0 .5rem; }
.dq-popup-close { position: absolute; top: .6rem; left: .8rem; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--c-slate-500); }
.dq-share-link { display: flex; gap: .4rem; align-items: center; }
.dq-share-link input { direction: ltr; font-size: .78rem; }

/* ---- exam builder: bank import ---- */
.dq-bank-box h5 { font-size: .82rem; font-weight: 800; display: flex; align-items: center; gap: .35rem; }
.dq-bank-results { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; max-height: 230px; overflow: auto; }
.dq-bank-pick { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: rgba(255,255,255,.6); border-radius: 10px; padding: .45rem .65rem; font-size: .82rem; }

/* ---- match result chart + versus box ---- */
#dq-match-chart { width: 180px !important; height: 180px !important; flex: none; }
.dq-versus-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--c-indigo-600), var(--c-blue-600)); color: #fff; box-shadow: 0 20px 45px -25px rgba(37,99,235,.8); }
.dq-versus-text { display: flex; align-items: center; gap: 1rem; }
.dq-versus-ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.dq-versus-box h3 { margin: 0; font-size: 1.15rem; }
.dq-versus-box p { margin: .25rem 0 0; font-size: .82rem; opacity: .9; }
.dq-versus-box .dq-btn-dark { background: #fff !important; color: var(--c-blue-700) !important; border-color: #fff; }
.dq-versus-box .dq-btn-dark:hover { filter: brightness(.95); }

/* ---- blog comments ---- */
.dq-comments { margin-top: 1.5rem; }
.dq-comments-title { display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; font-weight: 800; margin: 1.5rem 0 1rem; }
.dq-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.dq-comment-list .children { list-style: none; margin: 1rem 0 0; padding-right: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.dq-comment { padding: 1rem 1.2rem; }
.dq-comment-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.dq-comment-avatar { border-radius: 50%; }
.dq-comment-head b { display: block; font-size: .9rem; }
.dq-comment-date { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; color: var(--c-slate-500); }
.dq-comment-body { font-size: .9rem; line-height: 1.9; color: var(--c-slate-700); }
.dq-comment-actions { margin-top: .5rem; font-size: .78rem; }
.dq-comment-actions a { color: var(--c-blue-600); font-weight: 700; }
.dq-comment-form { margin-top: 1rem; }
.dq-comment-form input[type="text"], .dq-comment-form input[type="email"], .dq-comment-form input[type="url"], .dq-comment-form textarea { width: 100%; padding: .7rem .9rem; border-radius: var(--radius-lg); border: 1px solid rgba(148,163,184,.35); background: rgba(255,255,255,.7); font-family: inherit; margin-bottom: .6rem; }
.dq-comment-form .form-submit { margin-top: .5rem; }

/* ---- footer credit ---- */
.dq-footer-credit a { color: var(--c-blue-600); font-weight: 700; }
.dq-footer-bottom { text-align: center; }

/* ---- festivals ---- */
.dq-festival-box { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.75rem 2rem; border-radius: var(--radius-2xl); box-shadow: 0 25px 50px -25px rgba(15,23,42,.6); position: relative; overflow: hidden; }
.dq-festival-box-text h3 { margin: .5rem 0 .4rem; font-size: 1.4rem; }
.dq-festival-box-text p { margin: 0 0 .6rem; opacity: .92; font-size: .9rem; max-width: 42rem; }
.dq-festival-tag { display: inline-block; padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #fff; }
.dq-festival-count { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; opacity: .9; }
.dq-festival-hero { border-radius: var(--radius-2xl); overflow: hidden; position: relative; padding: 0; }
.dq-festival-banner { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.dq-festival-hero-body { padding: 2rem; }
.dq-festival-hero-body h1 { font-size: 2rem; margin: .6rem 0; }
.dq-festival-hero-body p { opacity: .92; max-width: 50rem; line-height: 2; }
.dq-festival-date { margin-top: 1rem; font-weight: 700; opacity: .85; }

/* ---- question delete button in builders ---- */
.dq-q-num { font-size: .72rem; font-weight: 800; color: var(--c-slate-500); }
.dq-q-del { background: var(--c-rose-100); color: var(--c-rose-600); border: none; width: 24px; height: 24px; border-radius: 7px; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.dq-q-del:hover { background: var(--c-rose-600); color: #fff; }

/* ---- AI tools output ---- */
.dq-ai-out { margin-top: 1rem; }
.dq-ai-out .dq-ai-hint, .dq-ai-hint { background: rgba(219,234,254,.5); border: 1px solid var(--c-blue-100); border-radius: var(--radius-lg); padding: 1rem; font-size: .9rem; line-height: 2; }

/* ---- blog placeholder thumb ---- */
.dq-blog-thumb-ph { width: 100%; height: 100%; min-height: 140px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-blue-100), var(--c-sky-100)); color: var(--c-blue-600); }
.dq-blog-card a { text-decoration: none; color: inherit; display: block; }

/* ---- rewards & cups ---- */
.dq-reward-card, .dq-cup-card { padding: 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.dq-reward-card img, .dq-reward-ph { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; display: flex; align-items: center; justify-content: center; }
.dq-reward-ph { background: var(--c-amber-100); color: var(--c-amber-600); }
.dq-reward-card h5, .dq-cup-card h5 { margin: .2rem 0; font-size: .95rem; }
.dq-reward-card p, .dq-cup-card p { font-size: .78rem; margin: 0; }
.dq-reward-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: .6rem; }
.dq-cup-medal { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dq-cup-card.earned .dq-cup-medal { background: var(--c-amber-100); color: var(--c-amber-600); }
.dq-cup-card.locked { opacity: .65; }
.dq-cup-card.locked .dq-cup-medal { background: var(--c-slate-100); color: var(--c-slate-500); }
.dq-cup-card .dq-progress { width: 100%; }
.dq-cup-card { position:relative; overflow:hidden; min-height:215px; padding:1.15rem!important; border:1px solid rgba(119,137,185,.16)!important; transition:transform .23s ease,box-shadow .23s ease; }.dq-cup-card::before{content:"";position:absolute;width:120px;height:120px;top:-70px;right:-60px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 67%);opacity:.8}.dq-cup-card:hover{transform:translateY(-5px);box-shadow:0 20px 36px rgba(30,45,106,.16)!important}.dq-cup-medal{position:relative;width:68px;height:68px;border:2px solid rgba(255,255,255,.8);border-radius:23px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 11px 18px rgba(42,56,123,.18)}.dq-cup-bronze.earned .dq-cup-medal{color:#fff;background:linear-gradient(145deg,#c56d3f,#743118)}.dq-cup-silver.earned .dq-cup-medal{color:#17355c;background:linear-gradient(145deg,#fff,#aebbd3)}.dq-cup-gold.earned .dq-cup-medal{color:#6b3d00;background:linear-gradient(145deg,#fff2a1,#dd9300)}.dq-cup-legendary.earned .dq-cup-medal{color:#fff;background:linear-gradient(145deg,#ae75ff,#255ced 58%,#21d8db);box-shadow:0 0 0 5px rgba(98,111,255,.12),0 13px 28px rgba(75,80,229,.32)}.dq-cup-card.earned h5{color:#172445;font-weight:900}.dq-cup-card.locked{filter:grayscale(.75);opacity:.72}.dq-cup-card.locked .dq-cup-medal{color:#9aa5b9;background:linear-gradient(145deg,#f5f7fb,#d8dfea)}
.dq-cup-medal img{width:100%;height:100%;object-fit:cover;border-radius:20px;filter:drop-shadow(0 5px 8px rgba(17,30,78,.2))}.dq-cup-card.locked .dq-cup-medal img{filter:grayscale(1) brightness(.72);opacity:.65}

/* ---- quiz card theme (3D flip) ---- */
.dq-quiz-flip { perspective: 1600px; }
.dq-quiz-flip-inner { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,.2,.2,1); transform: rotateY(180deg); }
.dq-quiz-flip-inner.flipped { transform: rotateY(0deg); }
.dq-quiz-flip-front, .dq-quiz-flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dq-quiz-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; min-height: 320px; border-radius: var(--radius-2xl); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(12px); }
.dq-quiz-flip-back img { max-width: 45%; max-height: 160px; }
.dq-quiz-flip-back .dq-flip-mark { font-size: 3rem; font-weight: 900; color: var(--c-blue-600); opacity: .3; letter-spacing: 2px; }
.dq-quiz-flip-front { position: relative; }

/* ---- question image + essay ---- */
.dq-quiz-img { margin: .5rem 0 1rem; text-align: center; }
.dq-quiz-img img { max-width: 80%; max-height: 280px; object-fit: contain; border-radius: 14px; display: inline-block; }
.dq-essay { width: 100%; resize: vertical; min-height: 120px; }
.dq-essay-answer { background: rgba(241,245,249,.8); border-radius: 10px; padding: .7rem; font-size: .85rem; line-height: 1.9; white-space: pre-wrap; }
.dq-q-imgrow { font-size: .8rem; }

/* ---- leaderboard pagination ---- */
.dq-pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1rem; }
.dq-pagination a { min-width: 34px; text-align: center; padding: .35rem .5rem; border-radius: 9px; background: rgba(255,255,255,.6); border: 1px solid rgba(148,163,184,.3); font-size: .82rem; font-weight: 700; color: var(--c-slate-700); }
.dq-pagination a.is-active { background: var(--c-blue-600); color: #fff; border-color: var(--c-blue-600); }

/* ---- referral tiers ---- */
.dq-ref-tiers { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.dq-ref-tier { background: rgba(255,255,255,.5); border: 1px solid rgba(148,163,184,.25); border-radius: 12px; padding: .7rem .85rem; font-size: .88rem; }
.dq-ref-tier.done { background: rgba(220,252,231,.55); border-color: rgba(22,163,74,.3); }

/* ---- form builder ---- */
.dq-fb-palette { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .8rem 0; }
@media (max-width: 560px) {
  .dq-fb-palette { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .dq-fb-palette > span.text-muted { grid-column: 1 / -1; }
  .dq-fb-palette .fb-add { width: 100%; margin: 0; }
}
.dq-fb-fields { display: flex; flex-direction: column; gap: .6rem; min-height: 30px; }
.dq-fb-field { padding: .8rem; }
.fb-handle { cursor: grab; font-weight: 800; color: var(--c-slate-500); user-select: none; }
.dq-fb-field.sortable-ghost { opacity: .4; }

/* ---- public profile + skills ---- */
.dq-profile-head { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.dq-profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.8); box-shadow: 0 10px 25px -12px rgba(15,23,42,.4); }
.dq-profile-meta h2 { margin: 0 0 .4rem; }
.dq-profile-counts { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .7rem; font-size: .85rem; color: var(--c-slate-600); }
.dq-profile-counts b { color: var(--c-slate-900); }
.dq-skill-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: .7rem; margin-top: .6rem; }
.dq-skill-item { background: rgba(255,255,255,.5); border: 1px solid rgba(148,163,184,.2); border-radius: 12px; padding: .7rem .85rem; font-size: .86rem; }
.dq-badge-green { background: rgba(220,252,231,.8); color: #16a34a; }
.dq-badge-rose { background: rgba(255,228,230,.8); color: #e11d48; }
.dq-badge-amber { background: rgba(254,243,199,.8); color: #d97706; }

/* ---- modal (challenge popup) ---- */
.dq-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; backdrop-filter: blur(3px); }
.dq-modal { background: rgba(255,255,255,.98); border-radius: var(--radius-xl); padding: 1.4rem; width: 100%; max-width: 420px; box-shadow: 0 30px 60px -20px rgba(15,23,42,.5); }

/* ---- match opponent profile link ---- */
.dq-match-name-link { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.dq-match-name-link:hover { opacity: .8; }

/* ---- leaderboard UI ---- */
.dq-lb-name { color: var(--c-slate-900); font-weight: 700; text-decoration: none; }
.dq-lb-name:hover { color: var(--c-blue-600); text-decoration: underline; }
.dq-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 8px; font-weight: 800; font-size: .8rem; background: rgba(241,245,249,.9); }
.dq-rank.top1 { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; }
.dq-rank.top2 { background: linear-gradient(135deg,#cbd5e1,#94a3b8); color: #fff; }
.dq-rank.top3 { background: linear-gradient(135deg,#d6a36a,#b45309); color: #fff; }
.dq-podium { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; margin: .5rem 0 1.5rem; flex-wrap: wrap; }
.dq-podium-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; background: rgba(255,255,255,.6); border: 1px solid rgba(148,163,184,.25); border-radius: 16px; padding: 1rem 1.2rem; width: 150px; }
.dq-podium-item img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 20px -10px rgba(15,23,42,.4); }
.dq-podium-item.rank-1 { transform: translateY(-14px); border-color: #f59e0b; }
.dq-podium-item.rank-1 img { width: 80px; height: 80px; border-color: #fbbf24; }
.dq-podium-medal { font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; gap: .25rem; color: var(--c-amber-600); }
.dq-podium-item.rank-2 .dq-podium-medal { color: #64748b; }
.dq-podium-item.rank-3 .dq-podium-medal { color: #b45309; }
.dq-podium-name { font-weight: 800; font-size: .85rem; color: var(--c-slate-900); text-decoration: none; text-align: center; }
.dq-podium-name:hover { color: var(--c-blue-600); }
.dq-podium-val { font-size: .78rem; color: var(--c-slate-600); font-weight: 700; }

/* ---- geo location prompt ---- */
.dq-geo-prompt { position: relative; background: linear-gradient(135deg, rgba(219,234,254,.7), rgba(224,242,254,.6)); border: 1px solid rgba(59,130,246,.25); border-radius: var(--radius-lg); padding: 1rem 1.2rem; margin-bottom: 1.25rem; }
.dq-geo-prompt .dq-geo-body strong { display: block; margin-bottom: .3rem; }
.dq-geo-prompt p { margin: .2rem 0 .6rem; font-size: .85rem; color: var(--c-slate-600); }
.dq-geo-close { position: absolute; top: .5rem; left: .6rem; background: transparent; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--c-slate-500); }
.dq-link-btn { background: transparent; border: none; color: var(--c-blue-600); font-weight: 700; cursor: pointer; font-size: .82rem; }

/* ---- toast notifications ---- */
.dq-toast-host { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.dq-toast { background: rgba(15,23,42,.95); color: #fff; padding: .7rem 1.2rem; border-radius: 12px; font-size: .85rem; font-weight: 700; box-shadow: 0 12px 30px -10px rgba(15,23,42,.5); opacity: 0; transform: translateY(-12px); transition: opacity .25s, transform .25s; max-width: 90vw; }
.dq-toast.show { opacity: 1; transform: translateY(0); }
.dq-toast-warn { background: linear-gradient(135deg,#d97706,#b45309); }
.dq-toast-success { background: linear-gradient(135deg,#16a34a,#15803d); }
.dq-toast-info { background: rgba(15,23,42,.95); }

/* ---- header submenu dropdown ---- */
.dq-nav-has-sub { position: relative; display: inline-flex; align-items: center; }
.dq-nav-caret { font-size: .7rem; opacity: .7; }
.dq-nav-sub { position: absolute; top: 100%; right: 0; min-width: 180px; background: rgba(255,255,255,.98); border: 1px solid rgba(148,163,184,.25); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(15,23,42,.4); padding: .4rem; display: none; flex-direction: column; gap: .15rem; z-index: 60; }
.dq-nav-has-sub:hover .dq-nav-sub { display: flex; }
.dq-nav-sub a { padding: .5rem .7rem; border-radius: 8px; font-size: .82rem; white-space: nowrap; }
.dq-nav-sub a:hover { background: rgba(241,245,249,.9); }

/* ===== Quiz page UI — aligned with React reference (v7 #11) ===== */
.dq-quiz-card { background: #ffffff; border: 1px solid rgba(226,232,240,.9); border-radius: 24px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.dq-quiz-wallet { display: flex; gap: .5rem; font-weight: 800; font-size: .8rem; }
.dq-wpill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid transparent; }
.dq-wpill-heart { background: rgba(255,228,230,.7); color: #e11d48; border-color: rgba(244,63,94,.2); }
.dq-wpill-coin { background: rgba(254,243,199,.7); color: #d97706; border-color: rgba(217,119,6,.2); }
.dq-quiz-counter { margin: 1.1rem 0 .55rem; }
.dq-counter-pill { display: inline-block; background: rgba(241,245,249,.95); color: var(--c-slate-600); font-size: .74rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; }
.dq-counter-essay { background: rgba(224,231,255,.85); color: var(--c-indigo-600); margin-right: .3rem; }
.dq-quiz-q { font-size: 1.18rem; font-weight: 800; line-height: 2; margin-bottom: 1.2rem; color: var(--c-slate-900); }
.dq-quiz-opt { display: flex; align-items: center; gap: .7rem; border-radius: 16px; border: 2px solid rgba(148,163,184,.28); background: #fff; font-weight: 700; color: var(--c-slate-800); transition: border-color .15s, background .15s, transform .1s; }
.dq-quiz-opt:hover:not(:disabled) { border-color: var(--c-blue-500); transform: translateY(-1px); }
.dq-quiz-opt .dq-opt-letter { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(241,245,249,.95); color: var(--c-slate-600); font-size: .78rem; font-weight: 800; font-family: var(--font-mono); }
.dq-quiz-opt .dq-opt-text { flex: 1; position: relative; z-index: 1; }
.dq-quiz-opt.selected { border-color: var(--c-blue-600); background: rgba(219,234,254,.5); }
.dq-quiz-opt.selected .dq-opt-letter { background: var(--c-blue-600); color: #fff; }
.dq-quiz-opt.correct { border-color: #16a34a; background: rgba(220,252,231,.55); }
.dq-quiz-opt.correct .dq-opt-letter { background: #16a34a; color: #fff; }
.dq-quiz-opt.wrong { border-color: #e11d48; background: rgba(255,228,230,.55); }
.dq-quiz-opt.wrong .dq-opt-letter { background: #e11d48; color: #fff; }
.dq-ability-wrap { margin-top: 1.2rem; background: rgba(248,250,252,.8); border: 1px solid rgba(148,163,184,.25); border-radius: 16px; padding: 1rem; }
.dq-ability-head { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 800; color: var(--c-slate-700); margin-bottom: .7rem; }
.dq-ability-box { margin-top: 0; }
.dq-ability-btn { background: #fff; font-weight: 800; }
.dq-ability-btn:hover:not(:disabled) { transform: translateY(-1px); }
.dq-dot { width: 10px; height: 10px; }
.dq-dot.active { transform: scale(1.3); }
@keyframes dqReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.dq-quiz-card.dq-reveal { animation: dqReveal .35s ease both; }

/* ---- result card (reference-aligned) ---- */
.dq-result-hero { background: linear-gradient(120deg,#0f172a,#1e293b); color: #fff; border-radius: 24px; padding: 2rem 1.5rem; text-align: center; box-shadow: 0 20px 45px -20px rgba(15,23,42,.6); }
.dq-result-trophy { width: 56px; height: 56px; margin: 0 auto .6rem; display: flex; align-items: center; justify-content: center; color: #fbbf24; }
.dq-result-trophy svg { width: 48px; height: 48px; }
.dq-result-hero h2 { margin: 0 0 .4rem; font-size: 1.4rem; }
.dq-result-hero p { color: #cbd5e1; font-size: .82rem; margin: 0; }
.dq-result-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin-top: 1rem; }
@media (min-width:640px){ .dq-result-cards { grid-template-columns: repeat(4,1fr); } }
.dq-stat-card2 { background: #fff; border: 1px solid rgba(226,232,240,.9); border-radius: 18px; padding: 1rem; transition: transform .15s, box-shadow .15s; }
.dq-stat-card2:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(15,23,42,.25); }
.dq-stat-card2 .dq-stat-top { display: flex; align-items: center; gap: .55rem; font-size: .74rem; color: var(--c-slate-500); font-weight: 700; margin-bottom: .6rem; }
.dq-stat-card2 .ico-badge { flex: none; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(100,116,139,.12); color: var(--c-slate-600); }
.dq-stat-card2 .ico-badge svg { width: 15px; height: 15px; }
.dq-stat-card2 .lbl { flex: 1; }
.dq-stat-card2 b { font-size: 1.6rem; font-weight: 900; }
.dq-stat-card2.tone-green { background: rgba(220,252,231,.4); border-color: rgba(22,163,74,.2); }
.dq-stat-card2.tone-green b { color: #16a34a; }
.dq-stat-card2.tone-green .ico-badge { background: rgba(22,163,74,.15); color: #16a34a; }
.dq-stat-card2.tone-rose { background: rgba(255,228,230,.4); border-color: rgba(225,29,72,.2); }
.dq-stat-card2.tone-rose b { color: #e11d48; }
.dq-stat-card2.tone-rose .ico-badge { background: rgba(225,29,72,.15); color: #e11d48; }
.dq-stat-card2.tone-blue b { color: var(--c-blue-600); }
.dq-stat-card2.tone-blue .ico-badge { background: rgba(37,99,235,.12); color: var(--c-blue-600); }
.dq-stat-card2.tone-slate b { color: var(--c-slate-900); }

/* ===== v8 — standardized box system ===== */
.dq-card { background: #fff; border: 1px solid var(--dq-card-border); border-radius: var(--dq-radius-card); box-shadow: var(--dq-shadow-card); padding: 20px 24px; }
.dq-card-lg { box-shadow: var(--dq-shadow-card-lg); }
@media (max-width:767px){ .dq-card { padding: 16px; } }
.dq-box-highlight { background: rgba(37,99,235,.08); border-right: 4px solid var(--c-blue-600); border-radius: 8px; padding: 14px 18px; }
.dq-box-dark { background: #1f2937; color: #fff; border-radius: var(--dq-radius-card); padding: 18px 22px; }
.dq-box-dark a { color: #93c5fd; }
.dq-box-outline { background: transparent; border: 2px solid #e2e8f0; border-radius: var(--dq-radius-card); padding: 16px 20px; }
.dq-aside-card { background: #fff; border: 1px solid var(--dq-card-border); border-radius: var(--dq-radius-card); box-shadow: var(--dq-shadow-card); padding: 18px; }

/* ===== v8 — Find User modal redesign ===== */
.dq-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; animation: dqOverlayIn .2s ease; }
@keyframes dqOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.dq-modal { background: #fff; border-radius: var(--dq-radius-modal); width: 500px; max-width: 100%; max-height: 80vh; overflow: auto; box-shadow: var(--dq-shadow-modal); padding: 24px; animation: dqModalIn .3s cubic-bezier(.2,.8,.2,1); }
@keyframes dqModalIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.dq-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dq-modal-head h4 { margin: 0; font-size: 20px; font-weight: 600; }
.dq-modal-close { background: none; border: none; font-size: 24px; line-height: 1; color: #6c757d; cursor: pointer; padding: 4px; transition: color .2s; }
.dq-modal-close:hover { color: var(--dq-danger); }
.dq-search-field { position: relative; margin-bottom: 8px; }
.dq-search-field .dq-search-ico { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.dq-search-field input { width: 100%; height: 48px; border-radius: 10px; border: 1px solid #dee2e6; padding: 0 44px 0 14px; font-size: 15px; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
.dq-search-field input:focus { outline: none; border-color: var(--c-blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.dq-find-result { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid #f1f3f5; border-radius: 8px; transition: background .15s; }
.dq-find-result:hover { background: #f8f9fa; }
.dq-find-result img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.dq-find-result .dq-fr-meta { flex: 1; min-width: 0; }
.dq-find-result .dq-fr-name { font-size: 16px; font-weight: 500; color: var(--c-slate-900); text-decoration: none; }
.dq-find-result .dq-fr-name:hover { color: var(--c-blue-600); }
.dq-find-result .dq-fr-role { font-size: 12px; color: #6c757d; }
.dq-find-state { text-align: center; padding: 28px 12px; color: #6c757d; font-size: 14px; }
.dq-spinner { width: 34px; height: 34px; border: 3px solid rgba(148,163,184,.3); border-top-color: var(--c-blue-600); border-radius: 50%; animation: dqSpin .8s linear infinite; margin: 0 auto; }
@keyframes dqSpin { to { transform: rotate(360deg); } }

/* ===== v8 — public profile redesign ===== */
.dq-profile2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width:880px){ .dq-profile2 { grid-template-columns: 7fr 3fr; align-items: start; } }
.dq-sec-title { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.dq-profile-cover { background: linear-gradient(120deg, var(--c-blue-600), var(--c-indigo-600, #4f46e5)); border-radius: var(--dq-radius-card); min-height: 180px; display: flex; align-items: flex-end; padding: 18px; box-shadow: var(--dq-shadow-card-lg); }
.dq-profile-cover-inner { display: flex; align-items: flex-end; gap: 16px; width: 100%; flex-wrap: wrap; }
.dq-profile-avatar2 { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 8px 24px -10px rgba(15,23,42,.5); background: #fff; }
.dq-profile-id { flex: 1; min-width: 160px; color: #fff; padding-bottom: 6px; }
.dq-profile-id h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: #fff; }
.dq-profile-role { font-size: 14px; color: rgba(255,255,255,.85); }
.dq-profile-actions { display: flex; gap: 8px; padding-bottom: 6px; flex-wrap: wrap; }
.dq-profile-actions .dq-btn-ghost { background: rgba(255,255,255,.95); }
.dq-profile-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 16px; }
@media (min-width:560px){ .dq-profile-stats { grid-template-columns: repeat(4,1fr); } }
.dq-pstat { background: #fff; border: 1px solid var(--dq-card-border); border-radius: 12px; box-shadow: var(--dq-shadow-card); padding: 16px; text-align: center; }
.dq-pstat b { display: block; font-size: 24px; font-weight: 700; color: var(--c-blue-600); }
.dq-pstat b a { color: inherit; text-decoration: none; }
.dq-pstat span { font-size: 13px; color: #6c757d; }
.dq-skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dq-skill-tag { border-radius: 20px; padding: 4px 14px; font-size: 13px; font-weight: 600; color: #fff; }
.dq-skill-tag.tag-green { background: #28a745; }
.dq-skill-tag.tag-red { background: #dc3545; }
.dq-skill-tag.tag-amber { background: #f59e0b; color: #1e293b; }
.dq-activity-list { display: flex; flex-direction: column; }
.dq-activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f3f5; font-size: 14px; }
.dq-activity-item:last-child { border-bottom: none; }
.dq-act-ico { color: var(--c-blue-600); flex: none; }
.dq-act-title { flex: 1; font-weight: 500; }
.dq-act-type { font-size: 12px; color: #6c757d; background: #f1f5f9; padding: 2px 10px; border-radius: 999px; }
.dq-act-date { font-size: 12px; color: #94a3b8; }
.dq-info-list { list-style: none; margin: 0; padding: 0; }
.dq-info-list li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #f1f3f5; font-size: 14px; }
.dq-info-list li:last-child { border-bottom: none; }
.dq-info-list li span { color: #6c757d; flex: 1; }
.dq-info-list li b { font-weight: 600; }
.dq-follow-stats { display: flex; gap: 12px; text-align: center; }
.dq-follow-stats > div { flex: 1; background: rgba(37,99,235,.06); border-radius: 12px; padding: 12px; }
.dq-follow-stats b { display: block; font-size: 22px; font-weight: 700; color: var(--c-blue-600); }
.dq-follow-stats span { font-size: 12px; color: #6c757d; }

/* ===== v8 — leaderboard redesign ===== */
.dq-lb-card { border-radius: var(--dq-radius-modal); padding: 24px; }
.dq-lb-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dq-lb-title { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.dq-lb-sub { color: #6c757d; font-size: 14px; margin: 0; }
.dq-lb-search input { min-width: 200px; }
.dq-lb-tabs { display: flex; gap: 4px; border-bottom: 2px solid #f1f3f5; margin: 18px 0; }
.dq-lb-tabs a { padding: 10px 18px; font-size: 15px; font-weight: 600; color: #6c757d; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; }
.dq-lb-tabs a:hover { color: var(--c-blue-600); }
.dq-lb-tabs a.is-active { color: var(--c-blue-600); border-bottom-color: var(--c-blue-600); }
.dq-myrank-card { display: flex; align-items: center; gap: 16px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.2); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; flex-wrap: wrap; }
.dq-myrank-badge { text-align: center; font-size: 12px; color: #6c757d; }
.dq-myrank-badge b { display: block; font-size: 26px; font-weight: 800; color: var(--c-blue-600); }
.dq-myrank-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.dq-myrank-stats span { display: block; font-size: 12px; color: #6c757d; }
.dq-myrank-stats b { font-size: 18px; font-weight: 700; }
.dq-lb-tablewrap { overflow-x: auto; }
.dq-lb-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.dq-lb-table thead th { text-align: right; font-size: 12px; color: #6c757d; font-weight: 600; padding: 0 12px 6px; }
.dq-lb-table tbody tr { background: #fff; }
.dq-lb-table tbody tr:nth-child(even) { background: #f8f9fa; }
.dq-lb-table tbody td { padding: 12px; font-size: 14px; vertical-align: middle; }
.dq-lb-table tbody td:first-child { border-radius: 0 10px 10px 0; }
.dq-lb-table tbody td:last-child { border-radius: 10px 0 0 10px; }
.dq-lb-table tr.is-me { background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(37,99,235,.3); }
.dq-lb-user { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--c-slate-900); font-weight: 600; }
.dq-lb-user img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.dq-lb-user:hover span { color: var(--c-blue-600); }
.dq-me-badge { background: var(--c-blue-600); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.dq-rank-num { display: inline-flex; min-width: 26px; height: 26px; align-items: center; justify-content: center; font-weight: 700; }
.dq-medal { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; }
.dq-medal.medal-1 { background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.dq-medal.medal-2 { background: linear-gradient(135deg,#cbd5e1,#94a3b8); }
.dq-medal.medal-3 { background: linear-gradient(135deg,#d6a36a,#b45309); }

/* ===== v9 — konkur module ===== */
.dq-konkur-chat { padding: 0; overflow: hidden; }
.dq-kn-chat-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 440px; }
@media (max-width:680px){ .dq-kn-chat-layout { grid-template-columns: 1fr; } }
.dq-kn-chat-side { border-left: 1px solid #f1f3f5; padding: 12px; background: #f8fafc; }
@media (max-width:680px){ .dq-kn-chat-side { border-left: none; border-bottom: 1px solid #f1f3f5; } }
.dq-kn-chat-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.dq-kn-chat-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; background: #fff; border: 1px solid #eef1f4; }
.dq-kn-chat-item span { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-kn-chat-item:hover { background: #eef2ff; }
.dq-kn-chat-del { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 16px; }
.dq-kn-chat-main { display: flex; flex-direction: column; }
.dq-kn-messages { flex: 1; padding: 16px; overflow-y: auto; max-height: 380px; display: flex; flex-direction: column; gap: 10px; }
.dq-kn-msg { display: flex; }
.dq-kn-msg.me { justify-content: flex-start; }
.dq-kn-msg.bot { justify-content: flex-end; }
.dq-kn-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: var(--dq-kn-font, 14px); line-height: 1.9; }
.dq-kn-msg.me .dq-kn-bubble { background: var(--dq-kn-color, var(--c-blue-600)); color: #fff; border-bottom-right-radius: 4px; }
.dq-kn-msg.bot .dq-kn-bubble { background: var(--dq-kn-color2, #f1f5f9); color: #1e293b; border-bottom-left-radius: 4px; }
.dq-kn-msg.bot { align-items: flex-end; gap: 8px; }
.dq-kn-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.dq-kn-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #f1f3f5; }
.dq-kn-input input { flex: 1; }
.dq-sample-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid #eef1f4; border-radius: 12px; margin-bottom: 10px; background: #fff; }
.dq-sample-meta { flex: 1; min-width: 0; }
.dq-sample-meta b { font-size: 15px; }
.dq-sample-meta p { margin: 4px 0 0; font-size: 13px; color: #6c757d; }
.dq-sample-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.dq-sample-tags span { background: #f1f5f9; color: #475569; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.dq-countdown { font-family: var(--font-mono); font-size: 13px; color: var(--c-amber-700); font-weight: 700; }

/* ---- user-panel ad zones ---- */
.dq-panel-main { min-width: 0; }
.dq-panel-ad { margin-bottom: 1rem; }
.dq-panel-ad-bottom { margin-top: 1rem; margin-bottom: 0; }
.dq-panel-ad:empty, .dq-panel-ad:has(.dq-ad:empty) { display: none; }
.dq-panel-ad .dq-ad:empty { display: none; }

/* ---- mobile panel menu (in-page toggle + left drawer) ---- */
.dq-panel-menu-toggle { display: none; }
.dq-panel-hdr-toggle { display: none; }
.dq-panel-drawer-overlay { display: none; }
.dq-header-drawer-overlay { display: none; }
@media (max-width: 767px) {
  .dq-panel-menu-toggle {
    display: flex; align-items: center; gap: .7rem;
    width: 100%; padding: .8rem 1rem; margin-bottom: 14px; cursor: pointer;
    background: rgba(255,255,255,.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: var(--c-slate-800); border: 1px solid rgba(255,255,255,.9); border-radius: 18px;
    font-family: inherit; font-weight: 800; font-size: .85rem; box-shadow: 0 10px 26px -18px rgba(15,23,42,.35);
    transition: box-shadow .15s, transform .15s;
  }
  .dq-panel-menu-toggle:active { transform: scale(.98); }
  .dq-panel-menu-toggle .ico-wrap {
    flex: none; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-blue-600), var(--c-sky-400)); color: #fff;
  }
  .dq-panel-menu-toggle span:not(.ico-wrap) { flex: 1; text-align: right; }
  .dq-panel-menu-toggle .chev { flex: none; color: var(--c-slate-400); transition: transform .2s; }
  .dq-panel-menu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .dq-panel-drawer-overlay {
    display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45);
    backdrop-filter: blur(2px); z-index: 9990; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .dq-panel-drawer-overlay.open { opacity: 1; visibility: visible; }
  .dq-panel-sidebar {
    display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 84vw;
    z-index: 9999; overflow: hidden; border-radius: 0; margin: 0; padding: 0;
    background: #fff; opacity: 1; visibility: visible; transform: none;
    flex-direction: column;
  }
  .dq-panel-sidebar.is-open { display: flex; animation: dq-slide-in-left .25s cubic-bezier(.16,1,.3,1) forwards; }
  /* Sticky header: avatar + name never scroll out of view. */
  .dq-panel-sidebar .dq-panel-user { flex: none; padding: 1.1rem 1.1rem .9rem; margin: 0; }
  /* Nav list is the only part that scrolls. */
  .dq-panel-sidebar .dq-panel-menu { flex: 1 1 auto; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; gap: .2rem; padding: 0 1.1rem; min-height: 0; }
  .dq-panel-sidebar .dq-panel-menu a { flex: none; width: 100%; box-sizing: border-box; }
  /* Sticky footer: logout is always reachable, never lost below the fold. */
  .dq-panel-sidebar .dq-panel-logout {
    flex: none; margin: 0; padding: .9rem 1.1rem; border-top: 1px solid rgba(148,163,184,.2);
    background: #fff;
  }
}

/* =========================================================================
   HOME — premium sections (categories, why-us, gallery, leaderboard,
   team, testimonials, FAQ, contact). Apple/Stripe-style: white surfaces,
   soft layered shadows, generous rhythm, indigo/blue accents.
   ========================================================================= */
.dq-home-band { padding: 3.5rem 0; }
.dq-home-band.soft { background: #f8fafc; border-radius: 32px; }
.dq-home-head { text-align: center; max-width: 38rem; margin: 0 auto 2.5rem; }
.dq-home-head .dq-eyebrow { margin-bottom: .9rem; }
.dq-home-head h3 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 900; color: var(--c-slate-900); letter-spacing: -.02em; }
.dq-home-head p { color: var(--c-slate-500); margin-top: .6rem; font-size: .92rem; line-height: 1.9; }

/* Category grid */
.dq-cat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; }
@media (min-width: 768px){ .dq-cat-grid { grid-template-columns: repeat(4,1fr); } }
.dq-cat-card {
  background: #fff; border: 1px solid var(--c-slate-100); border-radius: 24px; padding: 1.75rem 1.4rem;
  text-align: center; box-shadow: 0 20px 45px -32px rgba(15,23,42,.25); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.dq-cat-card:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -25px rgba(37,99,235,.22); border-color: var(--c-blue-100); }
.dq-cat-ico { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.dq-cat-card h5 { font-size: .95rem; font-weight: 800; color: var(--c-slate-800); }
.dq-cat-card span { display: block; font-size: .76rem; color: var(--c-slate-400); margin-top: .35rem; }

/* Why-us split layout */
.dq-whyus-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px){ .dq-whyus-grid { grid-template-columns: 5fr 7fr; } }
.dq-whyus-visual {
  background: linear-gradient(155deg, #eff6ff 0%, #eef2ff 100%); border-radius: 28px; padding: 2.2rem;
  min-height: 280px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.dq-whyus-visual .big-num { font-family: var(--font-mono); font-weight: 900; font-size: clamp(3rem,9vw,5rem); color: var(--c-blue-700); line-height: 1; }
.dq-whyus-visual .big-num-label { font-size: .85rem; color: var(--c-slate-500); margin-top: .5rem; font-weight: 700; }
.dq-whyus-list { display: grid; gap: 1.4rem; }
.dq-whyus-item { display: flex; gap: 1rem; align-items: flex-start; }
.dq-whyus-item .ico { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--c-blue-50, #eff6ff); color: var(--c-blue-600); display: flex; align-items: center; justify-content: center; }
.dq-whyus-item h5 { font-size: .95rem; font-weight: 800; color: var(--c-slate-800); }
.dq-whyus-item p { font-size: .82rem; color: var(--c-slate-500); margin-top: .3rem; line-height: 1.8; }

/* Featured quizzes gallery */
.dq-gallery-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px){ .dq-gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .dq-gallery-grid { grid-template-columns: repeat(3,1fr); } }
.dq-gallery-card {
  position: relative; border-radius: 24px; overflow: hidden; height: 220px; display: flex; align-items: flex-end;
  box-shadow: 0 20px 45px -30px rgba(15,23,42,.35); transition: transform .3s, box-shadow .3s;
}
.dq-gallery-card:hover { transform: translateY(-5px); box-shadow: 0 28px 55px -25px rgba(15,23,42,.35); }
.dq-gallery-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s; }
.dq-gallery-card:hover .bg { transform: scale(1.06); }
.dq-gallery-card .shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,23,42,.88) 0%, rgba(15,23,42,.15) 55%, transparent 100%); }
.dq-gallery-card .body { position: relative; padding: 1.1rem 1.2rem; color: #fff; width: 100%; }
.dq-gallery-card .body span.tag { background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: .68rem; padding: .2rem .6rem; border-radius: 999px; font-weight: 700; }
.dq-gallery-card .body h5 { margin-top: .55rem; font-size: .98rem; font-weight: 800; }
.dq-gallery-card .body .meta { display: flex; gap: .8rem; margin-top: .4rem; font-size: .72rem; opacity: .85; }

/* Leaderboard podium */
.dq-podium-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; margin-bottom: 2rem; max-width: 40rem; margin-inline: auto; }
.dq-podium-slot { flex: 1; text-align: center; }
.dq-podium-slot .avatar-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto .6rem; }
.dq-podium-slot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 20px -6px rgba(15,23,42,.3); }
.dq-podium-slot .medal { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; font-family: var(--font-mono); color: #fff; border: 2px solid #fff; }
.dq-podium-slot.rank-1 .medal { background: #eab308; }
.dq-podium-slot.rank-2 .medal { background: #94a3b8; }
.dq-podium-slot.rank-3 .medal { background: #c2703d; }
.dq-podium-slot .name { font-size: .82rem; font-weight: 800; color: var(--c-slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dq-podium-slot .score { font-size: .72rem; color: var(--c-slate-500); font-family: var(--font-mono); margin-top: 2px; }
.dq-podium-bar { border-radius: 18px 18px 0 0; margin-top: .8rem; display: flex; align-items: flex-start; justify-content: center; padding-top: .5rem; font-family: var(--font-mono); font-weight: 900; color: #fff; }
.dq-podium-slot.rank-1 .dq-podium-bar { height: 96px; background: linear-gradient(180deg,#fbbf24,#eab308); }
.dq-podium-slot.rank-2 .dq-podium-bar { height: 72px; background: linear-gradient(180deg,#cbd5e1,#94a3b8); }
.dq-podium-slot.rank-3 .dq-podium-bar { height: 56px; background: linear-gradient(180deg,#e0a374,#c2703d); }
.dq-lb-rest { display: grid; gap: .6rem; max-width: 40rem; margin: 0 auto; }
.dq-lb-row { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--c-slate-100); border-radius: 16px; padding: .7rem 1rem; }
.dq-lb-row .rank { font-family: var(--font-mono); font-weight: 800; color: var(--c-slate-400); width: 1.4rem; text-align: center; }
.dq-lb-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.dq-lb-row .name { flex: 1; font-size: .85rem; font-weight: 700; color: var(--c-slate-800); }
.dq-lb-row .score { font-family: var(--font-mono); font-weight: 800; color: var(--c-blue-700); font-size: .85rem; }

/* Team */
.dq-team-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
@media (min-width: 768px){ .dq-team-grid { grid-template-columns: repeat(4,1fr); } }
.dq-team-card { background: #fff; border: 1px solid var(--c-slate-100); border-radius: 24px; padding: 1.6rem 1.2rem; text-align: center; box-shadow: 0 18px 40px -32px rgba(15,23,42,.25); }
.dq-team-card img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin: 0 auto .9rem; box-shadow: 0 10px 22px -10px rgba(15,23,42,.3); }
.dq-team-card h5 { font-size: .92rem; font-weight: 800; color: var(--c-slate-800); }
.dq-team-card span { display: block; font-size: .74rem; color: var(--c-blue-600); font-weight: 700; margin-top: .2rem; }
.dq-team-card p { font-size: .76rem; color: var(--c-slate-400); margin-top: .55rem; line-height: 1.7; }

/* Testimonials */
.dq-testi-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px){ .dq-testi-grid { grid-template-columns: repeat(3,1fr); } }
.dq-testi-card { background: #fff; border: 1px solid var(--c-slate-100); border-radius: 24px; padding: 1.6rem; box-shadow: 0 18px 40px -32px rgba(15,23,42,.25); }
.dq-testi-stars { color: #f59e0b; display: flex; gap: 2px; margin-bottom: .8rem; }
.dq-testi-card p.quote { font-size: .86rem; color: var(--c-slate-600); line-height: 1.9; }
.dq-testi-who { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; }
.dq-testi-who img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.dq-testi-who b { font-size: .82rem; color: var(--c-slate-800); display: block; }
.dq-testi-who span { font-size: .72rem; color: var(--c-slate-400); }

/* FAQ accordion */
.dq-faq-list { max-width: 44rem; margin: 0 auto; display: grid; }
.dq-faq-item { border-bottom: 1px solid var(--c-slate-100); }
.dq-faq-q { width: 100%; background: none; border: none; padding: 1.2rem .3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right; font-family: inherit; cursor: pointer; }
.dq-faq-q span.txt { font-size: .92rem; font-weight: 700; color: var(--c-slate-800); }
.dq-faq-q .plus { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-slate-50, #f8fafc); display: flex; align-items: center; justify-content: center; color: var(--c-slate-500); transition: transform .25s, background .25s, color .25s; }
.dq-faq-item.open .dq-faq-q .plus { transform: rotate(45deg); background: var(--c-blue-600); color: #fff; }
.dq-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.dq-faq-a p { font-size: .84rem; color: var(--c-slate-500); line-height: 1.9; padding: 0 .3rem 1.2rem; }

/* Contact */
.dq-contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px){ .dq-contact-grid { grid-template-columns: 5fr 7fr; } }
.dq-contact-info { display: grid; gap: 1.2rem; align-content: start; }
.dq-contact-info .item { display: flex; gap: .8rem; align-items: flex-start; }
.dq-contact-info .ico { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--c-blue-50,#eff6ff); color: var(--c-blue-600); display: flex; align-items: center; justify-content: center; }
.dq-contact-info b { font-size: .85rem; color: var(--c-slate-800); display: block; }
.dq-contact-info span { font-size: .78rem; color: var(--c-slate-500); }
.dq-contact-form { background: #fff; border: 1px solid var(--c-slate-100); border-radius: 28px; padding: 1.8rem; box-shadow: 0 20px 50px -32px rgba(15,23,42,.3); }
.dq-contact-form .dq-input, .dq-contact-form textarea.dq-input { border-radius: 16px; }
.dq-contact-form .dq-input:focus { box-shadow: 0 0 0 4px rgba(37,99,235,.12); }

/* =========================================================================
   Live province stats (home page) — minimal counters + ranked bars, no map
   ========================================================================= */
.dq-live-stats-grid { display: flex; flex-wrap: wrap; gap: .9rem; align-items: stretch; }
.dq-live-stat {
  flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  background: #fff; border: 1px solid var(--c-slate-100); border-radius: 20px; padding: 1.1rem 1.2rem;
  box-shadow: 0 16px 34px -28px rgba(15,23,42,.3); transition: transform .15s, box-shadow .15s;
}
.dq-live-stat:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(15,23,42,.3); }
.dq-live-stat .ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-blue-600), var(--c-sky-400)); color: #fff; }
.dq-live-stat b { font-size: 1.5rem; font-weight: 900; font-family: var(--font-mono); color: var(--c-slate-900); }
.dq-live-stat .lbl { font-size: .76rem; color: var(--c-slate-500); font-weight: 700; }
.dq-live-updated { flex: 1 1 100%; display: flex; align-items: center; gap: .35rem; justify-content: flex-end; font-size: .68rem; color: var(--c-slate-400); margin-top: -.3rem; }
.dq-live-provinces { margin-top: 1.4rem; display: grid; gap: .6rem; }
.dq-live-prov-row { display: flex; align-items: center; gap: .8rem; }
.dq-live-prov-row .name { flex: none; width: 8.5rem; font-size: .82rem; font-weight: 700; color: var(--c-slate-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-live-prov-row .track { flex: 1; height: 8px; border-radius: 999px; background: rgba(148,163,184,.15); overflow: hidden; }
.dq-live-prov-row .fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-sky-400), var(--c-blue-600)); transition: width .5s ease; }
.dq-live-prov-row .cnt { flex: none; width: 4.5rem; text-align: left; font-size: .74rem; color: var(--c-slate-400); font-family: var(--font-mono); }
@media (max-width: 480px) {
  .dq-live-stat { flex: 1 1 46%; padding: .9rem 1rem; }
  .dq-live-prov-row .name { width: 6rem; }
}

/* =========================================================================
   Personality test
   ========================================================================= */
.dq-pt-progress { height: 6px; border-radius: 999px; background: rgba(148,163,184,.2); overflow: hidden; }
.dq-pt-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-sky-400), var(--c-blue-600)); transition: width .3s ease; }
.dq-pt-opts { display: grid; gap: .7rem; }
.dq-pt-opt {
  padding: .85rem 1.1rem; border-radius: 14px; border: 1.5px solid var(--c-slate-200); background: rgba(255,255,255,.7);
  font-family: inherit; font-size: .9rem; font-weight: 700; text-align: right; cursor: pointer; transition: all .15s;
}
.dq-pt-opt:hover { border-color: var(--c-blue-500); background: rgba(37,99,235,.06); transform: translateY(-1px); }

/* =========================================================================
   Word-guess mini-game
   ========================================================================= */
.dq-wg-board { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0 auto 1.2rem; }
.dq-wg-row { display: flex; gap: .5rem; }
.dq-wg-cell {
  width: 52px; height: 52px; border: 2px solid var(--c-slate-200); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800;
  color: var(--c-slate-800); transition: transform .15s, background .2s, border-color .2s;
}
.dq-wg-cell.filled { border-color: var(--c-slate-400); transform: scale(1.03); }
.dq-wg-cell.correct { background: #16a34a; border-color: #16a34a; color: #fff; }
.dq-wg-cell.present { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.dq-wg-cell.absent { background: var(--c-slate-300); border-color: var(--c-slate-300); color: #fff; }
.dq-wg-keyboard { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.dq-wg-krow { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }
.dq-wg-key {
  min-width: 30px; height: 40px; padding: 0 .5rem; border-radius: 8px; border: none;
  background: rgba(148,163,184,.18); font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .2s;
}
.dq-wg-key.wide { min-width: 56px; font-size: .72rem; }
.dq-wg-key:hover { background: rgba(148,163,184,.32); }
.dq-wg-key.correct { background: #16a34a; color: #fff; }
.dq-wg-key.present { background: #f59e0b; color: #fff; }
.dq-wg-key.absent { background: var(--c-slate-300); color: #fff; }
@media (max-width: 420px) {
  .dq-wg-cell { width: 44px; height: 44px; font-size: 1.2rem; }
  .dq-wg-key { min-width: 24px; height: 36px; font-size: .78rem; }
}

/* =========================================================================
   Friends / social panel additions
   ========================================================================= */
.dq-myid-box { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(99,102,241,.06)); border: 1px solid rgba(191,219,254,.6); border-radius: 16px; padding: .85rem 1.1rem; margin: 1rem 0 1.2rem; }
.dq-myid-box .lbl { font-size: .76rem; color: var(--c-slate-500); font-weight: 700; }
.dq-myid-box code { font-family: var(--font-mono); font-size: .95rem; font-weight: 800; color: var(--c-blue-700); direction: ltr; }
.dq-find-result { display: flex; align-items: center; gap: .7rem; padding: .6rem .3rem; border-bottom: 1px solid var(--c-slate-100); }
.dq-find-result img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.dq-find-result .dq-fr-actions { display: flex; gap: .4rem; flex: none; }
.dq-username-input { display: flex; align-items: center; background: rgba(255,255,255,.7); border: 1px solid var(--c-slate-200); border-radius: 12px; overflow: hidden; }
.dq-username-input span { padding: 0 .3rem 0 .7rem; color: var(--c-slate-400); font-family: var(--font-mono); font-weight: 800; }
.dq-username-input input.dq-input { border: none; background: none; direction: ltr; text-align: left; padding-inline-start: 0; }
.dq-username-input input.dq-input:focus { box-shadow: none; }
.dq-hint { display: block; font-size: .7rem; color: var(--c-slate-400); margin-top: .35rem; }

/* =========================================================================
   3.12 — Daily Quiz signature UI
   A focused, high-contrast game identity for home, quiz cards and user panel.
   ========================================================================= */
:root {
  --dq-ink: #111827;
  --dq-brand: var(--c-blue-600);
  --dq-brand-deep: #3730a3;
  --dq-brand-soft: #eef2ff;
  --dq-cyan: #06b6d4;
  --dq-lime: #a3e635;
  --dq-surface: rgba(255,255,255,.92);
  --dq-border: rgba(148,163,184,.2);
  --dq-shadow-soft: 0 18px 50px -32px rgba(30,41,59,.36);
  --dq-shadow-float: 0 28px 70px -32px rgba(30,41,59,.42);
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 34px;
}

body {
  background:
    radial-gradient(circle at 8% 8%, rgba(99,102,241,.12), transparent 25rem),
    radial-gradient(circle at 92% 40%, rgba(6,182,212,.1), transparent 28rem),
    linear-gradient(180deg, #f8faff 0%, #f3f6ff 48%, #f8fafc 100%);
  color: #475569;
}
body, button, input, textarea, select { font-feature-settings: "ss01", "ss02"; }
.font-mono, .mono, [class*="score"], [class*="value"], [class*="count"] {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
::selection { background: rgba(79,70,229,.18); color: var(--dq-ink); }
.dq-blob { filter: blur(110px); opacity: .38; }
.dq-blob.b1 { background: #c7d2fe; }
.dq-blob.b2 { background: #a5f3fc; }
.dq-main { padding-block: 2.25rem 4.5rem; }
.dq-stack-lg > * + * { margin-top: clamp(3.5rem, 8vw, 7rem); }

/* Header and brand */
.glass-navbar {
  background: rgba(248,250,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 30px -24px rgba(15,23,42,.35);
}
.dq-header { padding-block: .75rem; }
.dq-header-inner {
  min-height: 52px;
  padding: .25rem .3rem;
}
.dq-brand { gap: .7rem; }
.dq-logo {
  position: relative; width: 43px; height: 43px; padding: 0; border-radius: 14px;
  background: linear-gradient(145deg, #4f46e5 0%, #2563eb 55%, #06b6d4 100%);
  box-shadow: 0 9px 24px -10px rgba(37,99,235,.7), inset 0 1px 0 rgba(255,255,255,.3);
}
.dq-logo::after { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.2); border-radius:10px; pointer-events:none; }
.dq-logo > span { background: transparent; border-radius: inherit; font-family: var(--font-sans); font-size: .78rem; letter-spacing: -.04em; }
.dq-brand h1, .dq-brand-name { font-size: 1.18rem; letter-spacing: -.045em; }
.dq-nav { gap: .35rem; padding: .3rem; border-radius: 16px; background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.86); }
.dq-nav > a, .dq-nav-has-sub > a { padding: .58rem .75rem; border-radius: 11px; }
.dq-nav a::after { display: none; }
.dq-nav a:hover, .dq-nav a.is-active { background: #fff; color: var(--dq-brand); box-shadow: 0 6px 20px -16px rgba(15,23,42,.5); }
.dq-icon-btn { border-radius: 13px; border-color: rgba(148,163,184,.18); background: rgba(255,255,255,.8); }
.dq-icon-btn:hover { color: var(--dq-brand); border-color: rgba(79,70,229,.25); }

/* Buttons and controls */
.dq-btn { min-height: 42px; border-radius: 13px; font-weight: 800; letter-spacing: -.015em; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.dq-btn:focus-visible, .dq-icon-btn:focus-visible, .dq-nav a:focus-visible, .dq-panel-menu a:focus-visible { outline: 3px solid rgba(6,182,212,.3); outline-offset: 3px; }
.dq-btn-primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--dq-brand-deep), var(--dq-brand) 58%, #0ea5e9);
  box-shadow: 0 16px 30px -16px rgba(37,99,235,.75), inset 0 1px 0 rgba(255,255,255,.24);
}
.dq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 38px -17px rgba(37,99,235,.78); }
.dq-btn-dark { background: var(--dq-ink); border-color: var(--dq-ink); box-shadow: 0 14px 25px -18px rgba(15,23,42,.8); }
.dq-btn-dark:hover { background: #312e81; border-color: #312e81; transform: translateY(-1px); }
.dq-btn-ghost { background: rgba(255,255,255,.85); border-color: rgba(148,163,184,.23); color: #334155; }
.dq-btn-ghost:hover { background: #fff; color: var(--dq-brand); border-color: rgba(79,70,229,.24); }
.dq-input { min-height: 46px; border-radius: 13px; border-color: rgba(148,163,184,.3); background: rgba(255,255,255,.9); box-shadow: inset 0 1px 2px rgba(15,23,42,.03); }
.dq-input:hover { border-color: rgba(79,70,229,.3); }
.dq-input:focus { border-color: var(--dq-brand); box-shadow: 0 0 0 4px rgba(79,70,229,.1); }

/* Signature home hero */
.dq-home-hero { position: relative; }
.dq-home-hero::before {
  content:""; position:absolute; z-index:-1; inset:-2.2rem -2rem 2rem; border-radius: 44px;
  background: linear-gradient(140deg, rgba(255,255,255,.78), rgba(238,242,255,.52));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--dq-shadow-soft);
}
.dq-hero-shell { display:grid; grid-template-columns: minmax(0,1fr); gap: 2.6rem; align-items:center; padding: clamp(1rem,3vw,2.2rem) 0 .5rem; }
.dq-hero { max-width: 42rem; margin: 0; text-align: right; }
.dq-eyebrow {
  display: inline-flex; align-items:center; gap:.5rem; padding:.42rem .72rem; border-radius:999px;
  background: rgba(238,242,255,.9); border:1px solid rgba(99,102,241,.15); color:#4338ca; font-size:.72rem; font-weight:800;
}
.dq-eyebrow-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.13); animation:dqPulseDot 2s ease infinite; }
@keyframes dqPulseDot { 50% { box-shadow:0 0 0 7px rgba(34,197,94,0); } }
.dq-hero h2 { max-width: 11.5em; font-size: clamp(2.35rem,6vw,4.25rem); line-height: 1.18; letter-spacing: -.055em; margin-top:1.2rem; color:#111827; }
.dq-hero h2 strong, .dq-hero h2 em { color:var(--dq-brand); font-style:normal; }
.dq-hero p { max-width: 37rem; margin:1.2rem 0 0; text-align:right; line-height:2.05; color:#64748b; font-size:clamp(.95rem,1.4vw,1.08rem); }
.dq-hero-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:1.65rem; }
.dq-hero-actions .dq-btn { min-height:52px; padding-inline:1.2rem; }
.dq-btn-hero-secondary { background:transparent; border:0; color:#334155; padding-inline:.8rem !important; }
.dq-btn-hero-secondary:hover { color:var(--dq-brand); background:rgba(255,255,255,.58); }
.dq-hero-trust { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; font-size:.73rem; color:#64748b; }
.dq-hero-trust b { color:#334155; }
.dq-trust-avatars { display:flex; direction:ltr; }
.dq-trust-avatars i { width:29px; height:29px; margin-left:-7px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; color:#fff; font-size:.62rem; font-style:normal; font-weight:900; background:linear-gradient(135deg,#4f46e5,#06b6d4); }
.dq-trust-avatars i:nth-child(2){background:linear-gradient(135deg,#f97316,#ef4444)}
.dq-trust-avatars i:nth-child(3){background:linear-gradient(135deg,#14b8a6,#22c55e)}
.dq-trust-avatars i:last-child{background:#111827}

.dq-hero-arena {
  position:relative; isolation:isolate; min-width:0; padding:1.15rem; border-radius:30px; color:#e2e8f0;
  background:linear-gradient(155deg,#111827 0%,#172554 48%,#312e81 100%);
  border:1px solid rgba(255,255,255,.15); box-shadow:0 38px 70px -34px rgba(30,41,59,.85), inset 0 1px 0 rgba(255,255,255,.1);
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
}
.dq-arena-glow { position:absolute; z-index:-1; width:13rem; height:13rem; top:0; left:0; border-radius:50%; background:rgba(6,182,212,.23); filter:blur(45px); }
.dq-arena-top, .dq-duel-score, .dq-question-meta { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.dq-live-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11); color:#fff; font-size:.66rem; font-weight:800; }
.dq-live-pill i { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.13); }
.dq-arena-round { font-size:.67rem; color:#94a3b8; }
.dq-duel-score { margin:1.05rem 0; }
.dq-player { display:flex; align-items:center; gap:.5rem; min-width:0; }
.dq-player-avatar { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#06b6d4,#2563eb); font-weight:900; box-shadow:0 10px 20px -12px #06b6d4; }
.dq-player-avatar.rival { background:linear-gradient(135deg,#f97316,#ec4899); }
.dq-player span:last-child { display:flex; flex-direction:column; }
.dq-player b { color:#fff; font-size:.75rem; }
.dq-player small { color:#94a3b8; font-size:.57rem; white-space:nowrap; }
.dq-score-board { display:flex; align-items:center; gap:.38rem; direction:ltr; padding:.45rem .55rem; border-radius:12px; background:rgba(15,23,42,.48); border:1px solid rgba(255,255,255,.08); }
.dq-score-board strong { color:#fff; font-size:.85rem; }
.dq-score-board span { color:#64748b; }
.dq-question-card { padding:1rem; border-radius:20px; background:rgba(255,255,255,.96); color:#334155; box-shadow:0 18px 40px -26px rgba(0,0,0,.8); }
.dq-question-meta { font-size:.62rem; color:#64748b; }
.dq-question-meta span { display:inline-flex; align-items:center; gap:.3rem; color:#4f46e5; font-weight:800; }
.dq-question-meta b { color:#f97316; }
.dq-question-card h3 { margin:1rem 0; color:#0f172a; text-align:center; font-size:clamp(.82rem,1.7vw,.98rem); line-height:1.8; }
.dq-answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.dq-answer-grid span { display:flex; align-items:center; justify-content:space-between; min-height:38px; padding:.5rem .65rem; border-radius:11px; background:#f8fafc; border:1px solid #e2e8f0; font-size:.66rem; font-weight:700; }
.dq-answer-grid .is-selected { color:#166534; border-color:#86efac; background:#f0fdf4; }
.dq-arena-progress { height:4px; margin-top:1rem; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.1); }
.dq-arena-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a3e635,#22c55e); box-shadow:0 0 12px #22c55e; }
.dq-arena-float { position:absolute; display:flex; align-items:center; gap:.35rem; padding:.5rem .65rem; border-radius:12px; color:#334155; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.8); box-shadow:0 16px 30px -18px rgba(15,23,42,.6); font-size:.62rem; font-weight:700; }
.dq-arena-float b { color:#111827; }
.dq-float-win { right:-1.6rem; bottom:3.1rem; color:#ca8a04; }
.dq-float-rank { left:-1.7rem; top:5rem; color:#4f46e5; }

.dq-stats-bar { max-width:none; margin-top:2.7rem; padding:.7rem; gap:.25rem; border-radius:22px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.92); box-shadow:var(--dq-shadow-soft); }
.dq-stat-pill { display:flex; align-items:center; justify-content:center; gap:.7rem; min-width:0; text-align:right; padding:.75rem .4rem; border:0; border-radius:15px; background:transparent; box-shadow:none; backdrop-filter:none; }
.dq-stat-pill + .dq-stat-pill { border-right:1px solid rgba(148,163,184,.18); }
.dq-stat-pill > span:last-child { min-width:0; }
.dq-stat-icon { width:36px; height:36px; flex:none; display:grid !important; place-items:center; border-radius:11px; color:#4f46e5 !important; background:#eef2ff; }
.dq-stat-pill b { font-family:var(--font-sans); font-size:1.05rem; color:#111827; line-height:1.1; }
.dq-stat-pill small { display:block; margin-top:.25rem; color:#64748b; font-size:.65rem; font-weight:600; white-space:nowrap; }

/* Home sections and game cards */
.dq-home-band { padding-block:clamp(2.6rem,6vw,4.5rem); }
.dq-home-band.soft { padding-inline:clamp(1rem,4vw,3.5rem) !important; border:1px solid rgba(148,163,184,.14); background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,242,255,.72)); box-shadow:var(--dq-shadow-soft); }
.dq-home-head { max-width:42rem; margin-bottom:2.7rem; }
.dq-home-head h3 { font-size:clamp(1.6rem,3.5vw,2.35rem); letter-spacing:-.045em; color:#111827; }
.dq-home-head p { font-size:.92rem; line-height:2; }
.dq-bento { gap:.85rem; }
.dq-feature, .dq-cat-card, .dq-team-card, .dq-testi-card { border-color:var(--dq-border); background:var(--dq-surface); box-shadow:var(--dq-shadow-soft); }
.dq-feature { position:relative; overflow:hidden; padding:1.4rem; }
.dq-feature::after { content:""; position:absolute; width:5rem; height:5rem; left:-2rem; bottom:-2rem; border-radius:50%; background:rgba(99,102,241,.07); }
.dq-feature:hover, .dq-cat-card:hover { transform:translateY(-5px); box-shadow:var(--dq-shadow-float); }
.dq-feature-ico { border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 18px -14px currentColor; }
.dq-cat-card { border-radius:20px; padding:1.3rem 1rem; }
.dq-cat-card h5 { color:#1e293b; font-size:.88rem; }
.dq-section-card { border-radius:26px; padding:clamp(1.1rem,2.6vw,1.8rem); border-color:var(--dq-border); background:var(--dq-surface); box-shadow:var(--dq-shadow-soft); }
.dq-section-head { border-bottom-color:rgba(148,163,184,.16); }
.dq-tool-ico { width:52px; height:52px; border-radius:17px; padding:0; background:linear-gradient(145deg,#312e81,#2563eb 60%,#06b6d4); box-shadow:0 14px 24px -14px rgba(37,99,235,.8); }
.dq-tool-ico > span { border-radius:inherit; background:transparent; color:#fff; }
.dq-note { border-color:rgba(99,102,241,.13); background:#f8faff; }
.dq-card-grid { gap:1rem; }
.dq-quiz-card { position:relative; isolation:isolate; overflow:hidden; min-height:190px; padding:1.15rem; border-radius:21px; border-color:rgba(148,163,184,.2); background:#fff; box-shadow:0 12px 30px -24px rgba(15,23,42,.45); }
.dq-quiz-card::before { content:""; position:absolute; z-index:-1; top:0; right:0; width:100%; height:4px; background:linear-gradient(90deg,#06b6d4,#2563eb,#4f46e5); }
.dq-quiz-card::after { content:"?"; position:absolute; z-index:-1; left:.5rem; top:-1.7rem; color:rgba(79,70,229,.045); font-size:8rem; font-weight:900; line-height:1; transform:rotate(-10deg); }
.dq-quiz-card:hover { background:#fff; border-color:rgba(79,70,229,.24); transform:translateY(-5px); box-shadow:0 24px 45px -27px rgba(37,99,235,.45); }
.dq-quiz-card h5 { font-size:1rem; color:#111827; line-height:1.75; }
.dq-quiz-card .desc { font-size:.78rem; }
.dq-quiz-card .foot { border-top-color:rgba(148,163,184,.14); }
.dq-badge { border-radius:8px; font-weight:800; }
.dq-gallery-card { min-height:245px; border-radius:24px; border:1px solid rgba(255,255,255,.55); box-shadow:0 22px 45px -28px rgba(15,23,42,.6); }
.dq-gallery-card .bg { transition:transform .55s cubic-bezier(.16,1,.3,1); }
.dq-gallery-card:hover .bg { transform:scale(1.06); }
.dq-gallery-card .shade { background:linear-gradient(180deg,rgba(15,23,42,.02),rgba(15,23,42,.88)); }
.dq-gallery-card .body { padding:1.25rem; }
.dq-gallery-card h5 { font-size:1.05rem; line-height:1.75; }

/* User panel — distinctive workspace */
.dq-panel-layout { gap:1.25rem; align-items:start; }
.dq-panel-sidebar { overflow:hidden; border:1px solid rgba(148,163,184,.17); border-radius:26px; background:linear-gradient(180deg,#111827 0%,#172554 56%,#312e81 100%); box-shadow:0 25px 60px -34px rgba(15,23,42,.8); }
.dq-panel-user { position:relative; margin:0; padding:1.35rem; border-bottom:1px solid rgba(255,255,255,.09); background:radial-gradient(circle at 85% 0,rgba(6,182,212,.22),transparent 9rem); }
.dq-panel-user::after { content:"پنل شخصی دیلی کوییز"; display:block; position:absolute; bottom:.55rem; right:4.7rem; color:#64748b; font-size:.58rem; }
.dq-panel-user b { color:#fff; }
.dq-panel-avatar { width:50px; height:50px; border:2px solid rgba(255,255,255,.72); box-shadow:0 10px 24px -13px #06b6d4; }
.dq-panel-sidebar .dq-badge { color:#c7d2fe; background:rgba(99,102,241,.22); border-color:rgba(129,140,248,.22); }
.dq-panel-menu { padding:.8rem; gap:.22rem; }
.dq-panel-menu a { min-height:43px; padding:.65rem .75rem; border-radius:12px; color:#aab7ce; font-size:.78rem; }
.dq-panel-menu a .ico { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#94a3b8; background:rgba(255,255,255,.055); }
.dq-panel-menu a:hover { color:#fff; background:rgba(255,255,255,.07); }
.dq-panel-menu a:hover .ico { color:#67e8f9; background:rgba(6,182,212,.1); }
.dq-panel-menu a.is-active { color:#fff; background:linear-gradient(135deg,rgba(79,70,229,.95),rgba(37,99,235,.9)); box-shadow:0 12px 25px -15px rgba(37,99,235,.95),inset 0 1px 0 rgba(255,255,255,.18); }
.dq-panel-menu a.is-active .ico { color:#fff; background:rgba(255,255,255,.13); }
.dq-panel-sidebar .dq-panel-logout { margin:.2rem .8rem .9rem; padding:.7rem .8rem; border-radius:12px; color:#fda4af; background:rgba(244,63,94,.07); }
.dq-panel-content { position:relative; min-width:0; padding:clamp(1rem,2.5vw,1.5rem); border:1px solid rgba(148,163,184,.16); border-radius:26px; background:rgba(255,255,255,.76); box-shadow:var(--dq-shadow-soft); }
.dq-panel-title { display:flex; align-items:center; min-height:44px; margin-bottom:1.2rem; color:#111827; font-size:1.35rem; letter-spacing:-.035em; }
.dq-panel-title::before { content:""; width:5px; height:24px; margin-left:.65rem; border-radius:5px; background:linear-gradient(#06b6d4,#4f46e5); box-shadow:0 6px 16px -5px #4f46e5; }
.dq-stat-grid { gap:.8rem; }
.dq-stat-card { position:relative; overflow:hidden; min-height:128px; padding:1.1rem; border:1px solid rgba(148,163,184,.16); border-radius:19px; background:#fff; box-shadow:0 12px 30px -25px rgba(15,23,42,.45); }
.dq-stat-card::after { content:""; position:absolute; width:70px; height:70px; left:-30px; bottom:-30px; border-radius:50%; background:rgba(99,102,241,.06); }
.dq-stat-card .ico { border-radius:11px; }
.dq-stat-card .label { color:#64748b; font-size:.71rem; }
.dq-stat-card .value { color:#111827; font-size:1.45rem; letter-spacing:-.025em; }
.dq-wallet-cards { gap:.7rem; }
.dq-wallet-card { border:1px solid rgba(148,163,184,.16); border-radius:17px; background:#fff; box-shadow:0 12px 28px -25px rgba(15,23,42,.48); }
.dq-aside-card.glass-panel, .dq-reward-card.glass-panel, .dq-cup-card.glass-panel { border:1px solid rgba(148,163,184,.17); background:rgba(255,255,255,.9); box-shadow:var(--dq-shadow-soft); border-radius:20px; }
.dq-table { border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid rgba(148,163,184,.16); border-radius:15px; }
.dq-table th { background:#f8faff; color:#475569; }
.dq-table tr:last-child td { border-bottom:0; }

/* Responsive refinements */
@media (min-width: 960px) {
  .dq-hero-shell { grid-template-columns:minmax(0,.96fr) minmax(420px,1.04fr); gap:clamp(2.5rem,5vw,5.2rem); }
  .dq-panel-layout { grid-template-columns:245px minmax(0,1fr); }
  .dq-panel-sidebar { position:sticky; top:88px; max-height:calc(100vh - 108px); }
}
@media (max-width: 959px) {
  .dq-hero { max-width:46rem; margin-inline:auto; text-align:center; }
  .dq-hero h2 { margin-inline:auto; }
  .dq-hero p { margin-inline:auto; text-align:center; }
  .dq-hero-actions, .dq-hero-trust { justify-content:center; }
  .dq-hero-arena { width:min(100%,560px); margin-inline:auto; transform:none; }
}
@media (max-width: 767px) {
  .dq-main { padding-block:1.2rem 3rem; }
  .dq-stack-lg > * + * { margin-top:3.8rem; }
  .dq-home-hero::before { inset:-1rem -.35rem 1rem; border-radius:28px; }
  .dq-hero-shell { gap:2rem; }
  .dq-hero h2 { font-size:clamp(2rem,10vw,3rem); }
  .dq-hero-actions { display:grid; grid-template-columns:1fr; width:100%; }
  .dq-hero-actions .dq-btn { width:100%; }
  .dq-hero-trust { align-items:flex-start; text-align:right; }
  .dq-hero-arena { padding:.85rem; border-radius:23px; }
  .dq-float-win { right:-.35rem; bottom:-1.3rem; }
  .dq-float-rank { left:-.35rem; top:-1.15rem; }
  .dq-player small { display:none; }
  .dq-player-avatar { width:33px; height:33px; border-radius:11px; }
  .dq-score-board { padding:.35rem .45rem; }
  .dq-question-card { padding:.8rem; border-radius:16px; }
  .dq-stats-bar { grid-template-columns:1fr 1fr; padding:.4rem; gap:0; }
  .dq-stat-pill { justify-content:flex-start; padding:.75rem .55rem; }
  .dq-stat-pill + .dq-stat-pill { border-right:0; }
  .dq-stat-pill:nth-child(even) { border-right:1px solid rgba(148,163,184,.18); }
  .dq-stat-pill:nth-child(n+3) { border-top:1px solid rgba(148,163,184,.18); }
  .dq-home-band { padding-block:2.5rem; }
  .dq-home-band.soft { border-radius:24px; padding-inline:1rem !important; }
  .dq-section-head .left { align-items:center; }
  .dq-section-head h3 { font-size:1rem; }
  .dq-section-head p { font-size:.74rem; }
  .dq-gallery-card { min-height:210px; }
  .dq-panel-menu-toggle { border:1px solid rgba(99,102,241,.18); background:linear-gradient(135deg,#fff,#f3f5ff); box-shadow:var(--dq-shadow-soft); }
  .dq-panel-content { padding:1rem; border-radius:20px; }
  .dq-panel-sidebar { border-radius:0 24px 24px 0; }
  .dq-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dq-stat-card { min-height:118px; padding:.9rem; }
  .dq-stat-card .value { font-size:1.2rem; }
}
@media (max-width: 420px) {
  .dq-header { padding-inline:.65rem; }
  .dq-brand h1, .dq-brand-name { font-size:1rem; }
  .dq-logo, .dq-icon-btn { width:44px; height:44px; }
  .dq-logo { border-radius:13px; }
  .dq-header-auth-btn { padding-inline:.7rem; }
  .dq-hero-trust { font-size:.67rem; }
  .dq-answer-grid span { font-size:.61rem; padding:.45rem; }
  .dq-stat-icon { width:31px; height:31px; }
  .dq-stat-pill b { font-size:.88rem; }
  .dq-stat-pill small { font-size:.58rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================================
   3.30 — ARENA EDITION
   Structural redesign: game-first cards, bold home worlds and command panel.
   ========================================================================= */
:root {
  --dq-night: #080d1c;
  --dq-night-2: #101936;
  --dq-violet: #7657ff;
  --dq-electric: #239dff;
  --dq-mint: #4ee4b1;
  --dq-sun: #ffd45c;
  --dq-hot: #ff5f82;
}
body {
  background-color:#f5f7fb;
  background-image:
    linear-gradient(rgba(32,45,82,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,45,82,.025) 1px,transparent 1px),
    radial-gradient(circle at 90% 8%,rgba(118,87,255,.12),transparent 24rem),
    radial-gradient(circle at 5% 32%,rgba(35,157,255,.08),transparent 28rem);
  background-size:34px 34px,34px 34px,auto,auto;
}
.dq-container { --max-w:84rem; }
.dq-stack-lg > * + * { margin-top:clamp(4.5rem,9vw,8rem); }

/* Hero becomes a complete branded world instead of a white content box. */
.dq-home-hero { padding:clamp(1rem,3vw,2rem); color:#fff; }
.dq-home-hero::before {
  inset:-1.5rem -1rem -2rem; border:0; border-radius:42px;
  background:
    linear-gradient(115deg,rgba(118,87,255,.17),transparent 40%),
    radial-gradient(circle at 18% 70%,rgba(35,157,255,.2),transparent 25rem),
    linear-gradient(145deg,#080d1c 0%,#111a38 58%,#171545 100%);
  box-shadow:0 45px 100px -48px rgba(8,13,28,.9),inset 0 1px 0 rgba(255,255,255,.08);
}
.dq-home-hero::after { content:""; position:absolute; z-index:-1; inset:-1.5rem -1rem -2rem; border-radius:42px; opacity:.2; background-image:radial-gradient(rgba(255,255,255,.3) .75px,transparent .75px); background-size:20px 20px; mask-image:linear-gradient(90deg,#000,transparent 66%); pointer-events:none; }
.dq-home-hero .dq-hero h2 { color:#fff; text-shadow:0 12px 34px rgba(0,0,0,.2); }
.dq-home-hero .dq-hero h2 strong { color:#6ee7ff; background:linear-gradient(90deg,#6ee7ff,#a99bff); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.dq-home-hero .dq-hero p { color:#aebbd4; }
.dq-home-hero .dq-eyebrow { color:#c8c1ff; background:rgba(118,87,255,.12); border-color:rgba(166,147,255,.23); }
.dq-home-hero .dq-btn-primary { background:linear-gradient(110deg,#7657ff,#239dff); box-shadow:0 20px 38px -18px rgba(35,157,255,.9); }
.dq-home-hero .dq-btn-hero-secondary { color:#dce5f6; border:1px solid rgba(255,255,255,.1); }
.dq-home-hero .dq-btn-hero-secondary:hover { color:#fff; background:rgba(255,255,255,.08); }
.dq-home-hero .dq-hero-trust { color:#8999b8; }
.dq-home-hero .dq-hero-trust b { color:#fff; }
.dq-home-hero .dq-hero-arena { background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.035)); border-color:rgba(255,255,255,.14); box-shadow:0 35px 80px -35px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.13); backdrop-filter:blur(18px); }
.dq-home-hero .dq-question-card { background:#fff; }
.dq-home-hero .dq-stats-bar { background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); box-shadow:none; }
.dq-home-hero .dq-stat-pill + .dq-stat-pill,.dq-home-hero .dq-stat-pill:nth-child(even),.dq-home-hero .dq-stat-pill:nth-child(n+3){border-color:rgba(255,255,255,.09)}
.dq-home-hero .dq-stat-pill b { color:#fff; }
.dq-home-hero .dq-stat-pill small { color:#8494b4; }
.dq-home-hero .dq-stat-icon { color:#8ee8ff !important; background:rgba(35,157,255,.12); border:1px solid rgba(92,202,255,.12); }
.dq-home-hero .dq-feature { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.08); box-shadow:none; }
.dq-home-hero .dq-feature:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); }
.dq-home-hero .dq-feature h4 { color:#fff; }
.dq-home-hero .dq-feature p { color:#8999b8; }

/* Category worlds */
.dq-cat-grid { gap:1rem; }
.dq-cat-card { position:relative; isolation:isolate; min-height:245px; padding:1.4rem; overflow:hidden; text-align:right; color:#fff; background:linear-gradient(145deg,#10172c,#182349); border:0; box-shadow:0 25px 50px -35px rgba(8,13,28,.85); }
.dq-cat-card:nth-child(2){background:linear-gradient(145deg,#131c39,#163b51)}
.dq-cat-card:nth-child(3){background:linear-gradient(145deg,#25163b,#40215b)}
.dq-cat-card:nth-child(4){background:linear-gradient(145deg,#312213,#553817)}
.dq-cat-card::before { content:""; position:absolute; z-index:-1; width:160px; height:160px; left:-55px; bottom:-55px; border-radius:50%; background:currentColor; opacity:.08; filter:blur(1px); }
.dq-cat-card::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 45%); }
.dq-cat-card .dq-cat-index { position:absolute; top:1rem; left:1rem; color:rgba(255,255,255,.28); font-size:2.8rem; font-weight:900; line-height:1; }
.dq-cat-card .dq-cat-ico { width:54px; height:54px; margin:0 0 2.4rem; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); box-shadow:none; }
.dq-cat-card h5 { color:#fff; font-size:1.15rem; }
.dq-cat-card > span:not(.dq-cat-index) { display:block; min-height:44px; margin-top:.35rem; color:#aab7d0; font-size:.75rem; line-height:1.8; }
.dq-cat-card em { display:flex; align-items:center; justify-content:space-between; margin-top:1.2rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.09); color:#fff; font-size:.68rem; font-style:normal; font-weight:800; }
.dq-cat-card:hover { transform:translateY(-8px) rotate(-.4deg); box-shadow:0 35px 65px -35px rgba(8,13,28,.9); }

/* Editorial headers */
.dq-section-number { display:block; margin-bottom:.8rem; color:#7657ff; direction:ltr; text-align:right; font-size:.65rem; font-weight:900; letter-spacing:.18em; }
.dq-listing-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin:2rem 0 1.25rem; }
.dq-listing-intro h2 { color:#10162a; font-size:clamp(1.45rem,3vw,2.2rem); letter-spacing:-.045em; }
.dq-listing-intro p { margin:.35rem 0 0; color:#77839a; font-size:.83rem; }

/* Daily games showcase */
.dq-games-showcase { position:relative; padding:clamp(1.2rem,4vw,3rem); border-radius:34px; background:#fff; border:1px solid rgba(119,131,154,.14); box-shadow:0 38px 85px -58px rgba(16,22,42,.5); }
.dq-games-showcase::after { content:"DQ / TODAY"; position:absolute; top:1.7rem; left:2rem; color:rgba(16,22,42,.035); font-size:clamp(3rem,8vw,7rem); font-weight:900; letter-spacing:-.08em; pointer-events:none; }
.dq-showcase-head { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:2rem; margin-bottom:2rem; }
.dq-showcase-head h2 { margin-top:.8rem; color:#10162a; font-size:clamp(1.8rem,4vw,3rem); line-height:1.35; letter-spacing:-.055em; }
.dq-showcase-head h2 strong { color:#5b40e8; }
.dq-showcase-head p { max-width:42rem; margin:.7rem 0 0; color:#77839a; line-height:1.95; }
.dq-showcase-score { display:flex; align-items:center; gap:.8rem; min-width:235px; padding:.9rem; border-radius:18px; color:#fff; background:linear-gradient(130deg,#101936,#29205a); box-shadow:0 18px 38px -24px #101936; }
.dq-showcase-score .ring { width:45px; height:45px; flex:none; display:grid; place-items:center; border-radius:14px; color:#ffe27e; background:rgba(255,212,92,.1); border:1px solid rgba(255,212,92,.18); }
.dq-showcase-score div { display:flex; flex-direction:column; }
.dq-showcase-score b { color:#aab7d0; font-size:.62rem; }
.dq-showcase-score strong { margin:.12rem 0; font-size:.85rem; }
.dq-showcase-score small { color:#71809e; font-size:.55rem; }
.dq-showcase-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid #edf0f6; color:#8792a7; font-size:.73rem; }
.dq-showcase-foot a { display:flex; align-items:center; gap:.4rem; color:#4f36df; font-weight:900; }

/* Signature game card — actual component, not an old generic box. */
.dq-game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.dq-game-card { --cover-a:#5c3cff; --cover-b:#249cff; position:relative; min-width:0; overflow:hidden; border:1px solid #e8ebf2; border-radius:24px; background:#fff; box-shadow:0 18px 40px -32px rgba(16,22,42,.55); transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s; }
.dq-game-card:hover { transform:translateY(-8px); border-color:rgba(118,87,255,.3); box-shadow:0 34px 60px -34px rgba(48,40,120,.48); }
.dq-game-tone-1{--cover-a:#5c3cff;--cover-b:#239dff}.dq-game-tone-2{--cover-a:#007c83;--cover-b:#4ee4b1}.dq-game-tone-3{--cover-a:#e64c78;--cover-b:#ff9a55}.dq-game-tone-4{--cover-a:#4534ba;--cover-b:#a85df4}.dq-game-tone-5{--cover-a:#0e568e;--cover-b:#19bfd1}.dq-game-tone-6{--cover-a:#9a5d08;--cover-b:#ffd45c}
.dq-game-card.is-academic { --cover-a:#123a58; --cover-b:#167f86; }
.dq-game-cover { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; height:178px; padding:1rem; overflow:hidden; color:#fff; background-image:linear-gradient(145deg,var(--cover-a),var(--cover-b)); background-size:cover; background-position:center; }
.dq-game-cover::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(8,13,28,.02),rgba(8,13,28,.26)); }
.dq-game-orb { position:absolute; z-index:-1; display:block; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.dq-game-orb.orb-a { width:135px; height:135px; left:-35px; top:-45px; box-shadow:inset 0 0 45px rgba(255,255,255,.08); }
.dq-game-orb.orb-b { width:75px; height:75px; right:-24px; bottom:20px; background:rgba(255,255,255,.07); }
.dq-game-cover-top,.dq-game-cover-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dq-game-live,.dq-game-level { display:inline-flex; align-items:center; gap:.35rem; min-height:27px; padding:.28rem .52rem; border-radius:9px; color:#fff; background:rgba(8,13,28,.19); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); font-size:.58rem; font-weight:800; }
.dq-game-live i { width:6px; height:6px; border-radius:50%; background:#7cffbf; box-shadow:0 0 0 4px rgba(124,255,191,.12); }
.dq-game-level { background:rgba(255,255,255,.12); }
.dq-game-symbol { position:absolute; inset:50% auto auto 50%; width:70px; height:70px; display:grid; place-items:center; border-radius:24px; color:#fff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 35px -20px rgba(8,13,28,.6),inset 0 1px 0 rgba(255,255,255,.2); transform:translate(-50%,-47%) rotate(-4deg); backdrop-filter:blur(10px); }
.dq-game-card:hover .dq-game-symbol { transform:translate(-50%,-52%) rotate(3deg) scale(1.04); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.dq-game-cover-foot { font-size:.64rem; font-weight:800; }
.dq-game-cover-foot > span:first-child { display:flex; align-items:center; gap:.35rem; }
.dq-game-arrow { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.15); }
.dq-game-body { padding:1rem; }
.dq-game-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dq-game-kicker { color:#6b54e8; font-size:.61rem; font-weight:900; }
.dq-game-players { display:flex; align-items:center; gap:.25rem; color:#8a96aa; font-size:.58rem; }
.dq-game-card h3 { margin:.45rem 0 .3rem; color:#11182c; font-size:.98rem; line-height:1.7; letter-spacing:-.025em; }
.dq-game-card h3 a:hover { color:#5b40e8; }
.dq-game-card p { min-height:42px; margin:0; color:#7b879c; font-size:.69rem; line-height:1.85; }
.dq-game-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:.85rem 0; padding:.65rem 0; border-block:1px solid #eef0f5; }
.dq-game-specs span { display:flex; align-items:center; justify-content:center; gap:.25rem; min-width:0; color:#7a879b; font-size:.57rem; white-space:nowrap; }
.dq-game-specs span + span { border-right:1px solid #eef0f5; }
.dq-game-specs svg { color:#7657ff; flex:none; }
.dq-game-specs b { color:#172038; }
.dq-game-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem; }
.dq-game-actions .dq-btn { min-height:42px; }
.dq-game-start { justify-content:space-between; padding-inline:.8rem; color:#fff; background:#101936; border-color:#101936; }
.dq-game-start:hover { color:#fff; background:linear-gradient(110deg,#5b40e8,#239dff); border-color:transparent; }
.dq-game-duel { gap:.35rem; padding-inline:.65rem; color:#5843c5; background:#f1efff; border-color:#e4dfff; }
.dq-game-duel:hover { color:#fff; background:#7657ff; border-color:#7657ff; }
.dq-game-duel span { font-size:.62rem; }
.dq-creator-studio .dq-game-card.is-compact { display:grid; grid-template-columns:126px minmax(0,1fr); border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:#fff; box-shadow:none; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-cover { height:100%; min-height:174px; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-cover-top,.dq-creator-studio .dq-game-card.is-compact .dq-game-cover-foot { display:none; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-symbol { width:58px; height:58px; border-radius:19px; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-body { padding:.85rem; }
.dq-creator-studio .dq-game-card.is-compact h3,.dq-creator-studio .dq-game-card.is-compact h3 a { color:#fff; }
.dq-creator-studio .dq-game-card.is-compact p { min-height:0; color:#9ca9c3; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-specs { margin:.55rem 0; border-color:rgba(255,255,255,.08); }
.dq-creator-studio .dq-game-card.is-compact .dq-game-specs span { color:#8f9db7; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-specs span+span { border-color:rgba(255,255,255,.08); }
.dq-creator-studio .dq-game-card.is-compact .dq-game-specs b { color:#fff; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-heading { display:none; }
.dq-creator-studio .dq-game-card.is-compact .dq-game-start { min-height:36px; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1); }
.dq-listing-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Creator studio */
.dq-creator-studio { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); overflow:hidden; border-radius:36px; color:#fff; background:linear-gradient(140deg,#090f20,#151d3c 62%,#25184e); box-shadow:0 42px 90px -48px rgba(8,13,28,.95); }
.dq-creator-copy { position:relative; padding:clamp(1.6rem,4vw,3.2rem); background:radial-gradient(circle at 20% 15%,rgba(118,87,255,.25),transparent 14rem); }
.dq-creator-copy .dq-section-number { color:#8ee8ff; }
.dq-creator-icon { width:60px; height:60px; display:grid; place-items:center; margin:1.3rem 0; border-radius:19px; color:#fff; background:linear-gradient(135deg,#7657ff,#239dff); box-shadow:0 20px 40px -18px rgba(35,157,255,.85); }
.dq-creator-copy h2 { color:#fff; font-size:clamp(1.8rem,4vw,3rem); line-height:1.35; letter-spacing:-.055em; }
.dq-creator-copy h2 strong { color:#76e9ff; }
.dq-creator-copy p { margin:.85rem 0; color:#9eacc6; font-size:.82rem; line-height:2; }
.dq-creator-copy ul { display:grid; gap:.55rem; margin:1.15rem 0 1.4rem; padding:0; list-style:none; }
.dq-creator-copy li { display:flex; align-items:center; gap:.5rem; color:#c2cce0; font-size:.72rem; }
.dq-creator-copy li svg { color:#4ee4b1; }
.dq-creator-cta { justify-content:space-between; color:#0a1122; background:#fff; border-color:#fff; }
.dq-creator-cta:hover { color:#fff; background:#7657ff; border-color:#7657ff; }
.dq-creator-feed { padding:clamp(1rem,3vw,2rem); background:rgba(255,255,255,.025); border-right:1px solid rgba(255,255,255,.08); }
.dq-creator-feed-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; color:#fff; font-size:.7rem; font-weight:800; }
.dq-creator-feed-head span { display:flex; align-items:center; gap:.45rem; }
.dq-creator-feed-head i { width:7px; height:7px; border-radius:50%; background:#4ee4b1; box-shadow:0 0 0 5px rgba(78,228,177,.1); }
.dq-creator-feed-head small { color:#63718d; direction:ltr; letter-spacing:.12em; }
.dq-game-grid.is-studio { grid-template-columns:1fr; }

/* Arcade and school selection */
.dq-arcade-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.dq-arcade-card { position:relative; isolation:isolate; min-height:210px; padding:1.15rem; overflow:hidden; border-radius:23px; color:#fff; background:linear-gradient(145deg,#4f35d9,#8a63ff); box-shadow:0 24px 46px -32px currentColor; transition:transform .3s,box-shadow .3s; }
.dq-arcade-card::after { content:""; position:absolute; z-index:-1; width:140px; height:140px; left:-45px; bottom:-55px; border-radius:50%; border:25px solid rgba(255,255,255,.07); }
.dq-arcade-card.arcade-mind{background:linear-gradient(145deg,#db4475,#ff8a72)}.dq-arcade-card.arcade-iq{background:linear-gradient(145deg,#07677c,#1ec7c0)}.dq-arcade-card.arcade-team{background:linear-gradient(145deg,#16386a,#228bd9)}
.dq-arcade-card:hover { transform:translateY(-7px); box-shadow:0 34px 60px -32px currentColor; }
.dq-arcade-icon { width:50px; height:50px; display:grid; place-items:center; margin-bottom:1.8rem; border-radius:15px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16); }
.dq-arcade-tag { position:absolute; top:1rem; left:1rem; padding:.3rem .5rem; border-radius:8px; background:rgba(8,13,28,.17); font-size:.58rem; font-weight:800; }
.dq-arcade-card strong { display:block; font-size:1rem; }
.dq-arcade-card p { min-height:42px; margin:.3rem 0 .8rem; color:rgba(255,255,255,.72); font-size:.68rem; line-height:1.8; }
.dq-arcade-card em { display:flex; align-items:center; justify-content:space-between; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.13); color:#fff; font-size:.64rem; font-style:normal; font-weight:900; }
.dq-subject-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.dq-subject-card { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; gap:.1rem .7rem; min-height:88px; padding:.85rem; border:1px solid #e7eaf1; border-radius:18px; background:#fff; box-shadow:0 14px 30px -27px rgba(16,22,42,.5); }
.dq-subject-card:hover,.dq-subject-card.is-active { color:#fff; background:linear-gradient(130deg,#101936,#5040b9); border-color:transparent; transform:translateY(-3px); }
.dq-subject-icon { grid-row:1/3; width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#5e46dc; background:#f0edff; }
.dq-subject-card:hover .dq-subject-icon,.dq-subject-card.is-active .dq-subject-icon { color:#fff; background:rgba(255,255,255,.1); }
.dq-subject-card strong { color:#172038; font-size:.78rem; }
.dq-subject-card:hover strong,.dq-subject-card.is-active strong { color:#fff; }
.dq-subject-card em { color:#8b96aa; font-size:.58rem; font-style:normal; }
.dq-subject-card:hover em,.dq-subject-card.is-active em { color:#aebbd4; }

/* Remaining home sections get an editorial, not template-like, finish. */
.dq-gallery-grid { gap:1rem; }
.dq-gallery-card { min-height:300px; border-radius:26px; }
.dq-gallery-card:nth-child(1),.dq-gallery-card:nth-child(4){grid-column:span 2}
.dq-gallery-card .body { padding:1.5rem; }
.dq-gallery-card h5 { max-width:20rem; font-size:1.2rem; }
.dq-whyus-visual { overflow:hidden; background:linear-gradient(145deg,#101936,#39266f); box-shadow:0 35px 60px -38px #101936; }
.dq-whyus-visual::after { content:"✓"; position:absolute; left:-1rem; bottom:-5rem; color:rgba(255,255,255,.06); font-size:20rem; font-weight:900; }
.dq-team-card { padding:0 0 1rem; overflow:hidden; border-radius:24px; }
.dq-team-card img { width:100%; height:190px; border-radius:0; }
.dq-team-card h5,.dq-team-card span,.dq-team-card p { margin-inline:1rem; }
.dq-testi-card { position:relative; padding:1.4rem; border-radius:23px; }
.dq-testi-card::before { content:"“"; position:absolute; left:1rem; top:.2rem; color:rgba(118,87,255,.12); font-size:5rem; font-weight:900; line-height:1; }
.dq-faq-item { border:1px solid #e7eaf1; border-radius:17px; background:#fff; }
.dq-faq-item.open { border-color:rgba(118,87,255,.3); box-shadow:0 18px 35px -30px rgba(91,64,232,.55); }
.dq-footer .glass-panel { color:#aebbd4; background:linear-gradient(145deg,#080d1c,#111936); border-color:rgba(255,255,255,.08); box-shadow:0 35px 80px -45px #080d1c; }
.dq-footer h1,.dq-footer h5,.dq-footer .dq-brand-name { color:#fff; }
.dq-footer .text-muted,.dq-footer-bottom { color:#7f8da8; }
.dq-footer a:hover { color:#8ee8ff; }

/* User panel command center */
.dq-dashboard-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; margin-bottom:1.4rem; padding:clamp(1.3rem,3vw,2.1rem); overflow:hidden; border-radius:25px; color:#fff; background:linear-gradient(125deg,#0a1021,#18244b 62%,#39226b); box-shadow:0 28px 55px -36px rgba(8,13,28,.9); }
.dq-dashboard-hero::before { content:""; position:absolute; z-index:-1; width:270px; height:270px; right:-70px; bottom:-150px; border:40px solid rgba(35,157,255,.08); border-radius:50%; }
.dq-dashboard-overline { display:flex; align-items:center; gap:.45rem; color:#9daccc; font-size:.62rem; font-weight:800; }
.dq-dashboard-overline i { width:7px; height:7px; border-radius:50%; background:#4ee4b1; box-shadow:0 0 0 5px rgba(78,228,177,.1); }
.dq-dashboard-copy h2 { margin:.6rem 0; color:#fff; font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.5; letter-spacing:-.045em; }
.dq-dashboard-copy h2 strong { color:#76e9ff; }
.dq-dashboard-copy p { margin:0; color:#96a5c1; font-size:.74rem; }
.dq-dashboard-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.dq-dashboard-play { color:#0a1021; background:#fff; border-color:#fff; }
.dq-dashboard-play:hover { color:#fff; background:#7657ff; border-color:#7657ff; }
.dq-dashboard-link { display:flex; align-items:center; gap:.35rem; color:#bdc8dd; font-size:.68rem; font-weight:800; }
.dq-dashboard-rank { min-width:205px; padding:1rem; border-radius:20px; text-align:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.dq-rank-crown { width:46px; height:46px; display:grid; place-items:center; margin:0 auto .45rem; border-radius:14px; color:#ffe17a; background:rgba(255,212,92,.1); }
.dq-dashboard-rank > span:not(.dq-rank-crown) { display:block; color:#8e9db9; font-size:.59rem; }
.dq-dashboard-rank > strong { display:block; margin:.1rem 0 .55rem; color:#fff; font-size:1.65rem; }
.dq-dashboard-rank > div { display:flex; justify-content:center; gap:.45rem; }
.dq-dashboard-rank > div span { display:flex; align-items:center; gap:.2rem; padding:.3rem .42rem; border-radius:8px; color:#b8c4da; background:rgba(255,255,255,.06); font-size:.52rem; }
.dq-panel-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.dq-panel-section-head span { color:#7657ff; font-size:.59rem; font-weight:900; }
.dq-panel-section-head h3 { color:#11182c; font-size:1.15rem; }
.dq-panel-section-head small { color:#98a2b4; font-size:.58rem; }
.dq-panel-content .dq-stat-card { min-height:138px; border-radius:20px; }
.dq-panel-content .dq-stat-card .value { margin-top:auto; }

@media (max-width:1100px) {
  .dq-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dq-arcade-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dq-gallery-card:nth-child(1),.dq-gallery-card:nth-child(4){grid-column:span 1}
}
@media (max-width:900px) {
  .dq-creator-studio { grid-template-columns:1fr; }
  .dq-creator-feed { border-right:0; border-top:1px solid rgba(255,255,255,.08); }
  .dq-game-grid.is-studio { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dq-creator-studio .dq-game-card.is-compact { display:block; }
  .dq-creator-studio .dq-game-card.is-compact .dq-game-cover { min-height:150px; }
  .dq-dashboard-hero { grid-template-columns:1fr; }
  .dq-dashboard-rank { display:none; }
}
@media (max-width:767px) {
  .dq-home-hero { padding:.65rem; }
  .dq-home-hero::before,.dq-home-hero::after { inset:-.6rem -.2rem -1rem; border-radius:28px; }
  .dq-home-hero .dq-bento { grid-template-columns:1fr 1fr; }
  .dq-home-hero .dq-feature { padding:1rem; }
  .dq-home-hero .dq-feature p { display:none; }
  .dq-cat-grid { grid-template-columns:1fr 1fr; }
  .dq-cat-card { min-height:205px; padding:1rem; }
  .dq-cat-card .dq-cat-index { font-size:2rem; }
  .dq-cat-card .dq-cat-ico { margin-bottom:1.8rem; }
  .dq-cat-card > span:not(.dq-cat-index) { min-height:0; }
  .dq-cat-card em { font-size:.58rem; }
  .dq-showcase-head { grid-template-columns:1fr; }
  .dq-showcase-score { min-width:0; }
  .dq-game-grid,.dq-listing-game-grid { grid-template-columns:1fr; }
  .dq-game-card { display:grid; grid-template-columns:120px minmax(0,1fr); border-radius:20px; }
  .dq-game-cover { height:100%; min-height:215px; padding:.7rem; }
  .dq-game-cover-top { flex-direction:column; align-items:flex-start; }
  .dq-game-cover-foot > span:first-child { display:none; }
  .dq-game-symbol { width:58px; height:58px; border-radius:19px; }
  .dq-game-body { padding:.8rem; }
  .dq-game-card p { min-height:0; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .dq-game-specs { grid-template-columns:1fr 1fr; }
  .dq-game-specs span:last-child { display:none; }
  .dq-game-specs span:nth-child(2) { border-right:1px solid #eef0f5; }
  .dq-game-duel span { display:none; }
  .dq-creator-studio .dq-game-card.is-compact { display:grid; grid-template-columns:110px minmax(0,1fr); }
  .dq-game-grid.is-studio { grid-template-columns:1fr; }
  .dq-arcade-grid { grid-template-columns:1fr 1fr; }
  .dq-arcade-card { min-height:190px; padding:1rem; }
  .dq-subject-grid { grid-template-columns:1fr 1fr; }
  .dq-listing-intro { display:block; }
  .dq-dashboard-hero { padding:1.2rem; }
  .dq-dashboard-copy h2 { font-size:1.35rem; }
  .dq-panel-section-head small { display:none; }
}
@media (max-width:420px) {
  .dq-cat-grid { grid-template-columns:1fr; }
  .dq-cat-card { min-height:190px; }
  .dq-home-hero .dq-bento { grid-template-columns:1fr 1fr; }
  .dq-game-card { grid-template-columns:105px minmax(0,1fr); }
  .dq-game-cover { min-height:225px; }
  .dq-game-live { display:none; }
  .dq-game-card h3 { font-size:.83rem; }
  .dq-game-actions { grid-template-columns:minmax(0,1fr) 42px; }
  .dq-game-duel { padding:0; }
  .dq-arcade-grid { grid-template-columns:1fr; }
  .dq-subject-grid { grid-template-columns:1fr; }
  .dq-dashboard-actions { align-items:stretch; flex-direction:column; }
  .dq-dashboard-actions .dq-btn { width:100%; }
}

/* =========================================================================
   3.31 — QUIZ FOCUS MODE
   A compact game surface with clear progress, answers and power-ups.
   ========================================================================= */
.dq-quiz-page {
  --dq-quiz-ink:#111a33;
  --dq-quiz-muted:#71809c;
  --dq-quiz-line:#e7ebf3;
  --dq-quiz-blue:#3867f4;
  --dq-quiz-cyan:#19b8d2;
}
.dq-quiz-page .dq-main { padding-block:1.1rem 3rem; }
.dq-quiz-stage { width:min(100%,860px); margin-inline:auto; }
.dq-quiz-stage .dq-quiz-card {
  min-height:0; padding:clamp(1rem,2vw,1.35rem); border:1px solid rgba(193,204,224,.7);
  border-radius:26px; background:rgba(255,255,255,.96); box-shadow:0 24px 70px -45px rgba(30,64,175,.5);
  transform:none; overflow:hidden;
}
.dq-quiz-focus-card { position:relative; isolation:isolate; }
.dq-quiz-stage .dq-quiz-card:hover { transform:none; border-color:rgba(193,204,224,.7); box-shadow:0 24px 70px -45px rgba(30,64,175,.5); }
.dq-quiz-stage .dq-quiz-card::before {
  height:5px; background:linear-gradient(90deg,var(--dq-quiz-cyan),var(--dq-quiz-blue) 58%,#8057e9);
}
.dq-quiz-stage .dq-quiz-card::after { content:""; width:190px; height:190px; left:-95px; top:-100px; border-radius:50%; background:rgba(56,103,244,.035); }
.dq-quiz-top { display:grid; grid-template-columns:minmax(190px,1fr) auto; align-items:center; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--dq-quiz-line); }
.dq-quiz-progress-wrap { min-width:0; }
.dq-quiz-progress-meta { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.42rem; color:var(--dq-quiz-muted); font-size:.69rem; font-weight:800; }
.dq-quiz-progress-meta b { color:var(--dq-quiz-blue); font-family:var(--font-mono); font-size:.68rem; }
.dq-quiz-progress { position:relative; height:7px; overflow:hidden; border-radius:999px; background:#edf1f7; }
.dq-quiz-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--dq-quiz-cyan),var(--dq-quiz-blue),#8057e9); box-shadow:0 0 14px rgba(56,103,244,.34); transition:width .35s ease; }
.dq-quiz-wallet { gap:.4rem; white-space:nowrap; }
.dq-wpill,.dq-exam-tag { min-height:34px; padding:.35rem .72rem; border-radius:11px; font-size:.74rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.dq-question-block { position:relative; margin:.9rem 0 .8rem; padding:.7rem .9rem .75rem; border-radius:17px; background:linear-gradient(135deg,#f8faff,#f4f7ff); border:1px solid #edf0f7; }
.dq-question-block::before { content:""; position:absolute; right:0; top:.65rem; bottom:.65rem; width:4px; border-radius:999px; background:linear-gradient(var(--dq-quiz-cyan),var(--dq-quiz-blue)); }
.dq-question-kicker { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.28rem; color:var(--dq-quiz-blue); font-size:.64rem; font-weight:900; }
.dq-question-kicker em { color:#8b97aa; font-size:.59rem; font-style:normal; font-weight:700; }
.dq-quiz-q { margin:0; color:var(--dq-quiz-ink); font-size:clamp(1rem,2vw,1.16rem); font-weight:900; line-height:1.75; letter-spacing:-.025em; }
.dq-quiz-options { gap:.5rem; }
.dq-quiz-opt {
  display:grid; grid-template-columns:30px minmax(0,1fr) 23px; align-items:center; gap:.7rem;
  min-height:54px; padding:.62rem .72rem; text-align:right; border:1px solid #dfe5ef; border-radius:15px;
  color:#26334c; background:#fff; box-shadow:0 8px 22px -22px rgba(15,23,42,.65); font-size:.84rem; font-weight:750; line-height:1.65;
}
.dq-quiz-opt:hover:not(:disabled) { border-color:#9cb3fb; background:#f8faff; transform:translateY(-1px); }
.dq-quiz-opt .dq-opt-letter { width:30px; height:30px; border-radius:10px; background:#f1f4f9; color:#63718a; font-size:.72rem; }
.dq-opt-check { display:grid; width:21px; height:21px; place-items:center; border:1px solid #dce3ee; border-radius:50%; color:transparent; transition:.18s ease; }
.dq-opt-check .dq-ico { width:12px; height:12px; }
.dq-quiz-opt.selected { border-color:var(--dq-quiz-blue); background:linear-gradient(135deg,#f0f5ff,#f7f5ff); box-shadow:0 10px 26px -20px rgba(56,103,244,.7),inset 3px 0 0 var(--dq-quiz-blue); }
.dq-quiz-opt.selected .dq-opt-letter { color:#fff; background:linear-gradient(135deg,var(--dq-quiz-blue),#7657ff); }
.dq-quiz-opt.selected .dq-opt-check { color:#fff; border-color:var(--dq-quiz-blue); background:var(--dq-quiz-blue); }
.dq-ability-wrap { margin-top:.75rem; padding:.65rem; border:1px solid #e6eaf2; border-radius:15px; background:#f8fafc; }
.dq-ability-head { display:flex; align-items:center; gap:.38rem; margin-bottom:.5rem; color:#44516a; font-size:.69rem; }
.dq-ability-head > .dq-ico { color:var(--dq-quiz-blue); }
.dq-ability-head small { margin-right:auto; color:#98a3b6; font-size:.57rem; font-weight:700; }
.dq-ability-box { gap:.42rem; }
.dq-ability-btn { min-height:58px; display:grid; grid-template-columns:27px minmax(0,1fr); grid-template-rows:auto auto; column-gap:.4rem; row-gap:.05rem; align-items:center; padding:.42rem .48rem; text-align:right; border-color:#e3e8f1; border-radius:12px; }
.dq-ab-ico { grid-row:1 / 3; width:27px; height:27px; border-radius:9px; color:#c87909; background:#fff5dd; }
.dq-ab-ico svg,.dq-ab-ico.dq-ico { width:14px; height:14px; }
.dq-ab-label { align-self:end; font-size:.61rem; line-height:1.25; }
.dq-ability-btn .cost { align-self:start; font-size:.55rem; }
.dq-ability-out { margin-top:.55rem; }
.dq-ai-hint { padding:.65rem .8rem; border-radius:12px; font-size:.76rem; line-height:1.7; }
#dq-quiz-next { min-height:48px; margin-top:.75rem; border-radius:14px; background:linear-gradient(135deg,#111a33,#1d2c55); box-shadow:0 12px 28px -18px rgba(17,26,51,.8); font-size:.82rem; }
.dq-quiz-img { margin:.45rem 0 .7rem; }
.dq-quiz-img img { max-height:210px; border-radius:12px; }

@media (min-width:760px) {
  .dq-quiz-options { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .dq-quiz-page .dq-header { padding:.48rem .65rem; }
  .dq-quiz-page .dq-header-inner { gap:.45rem; }
  .dq-quiz-page .dq-logo,.dq-quiz-page .dq-icon-btn { width:40px; height:40px; border-radius:12px; }
  .dq-quiz-page .dq-brand { gap:.45rem; }
  .dq-quiz-page .dq-brand-name { font-size:.96rem; white-space:nowrap; }
  .dq-quiz-page .dq-btn-premium.dq-mobile-only { display:none; }
  .dq-quiz-page .dq-main { padding-block:.65rem 2rem; }
  .dq-quiz-stage .dq-quiz-card { padding:.78rem !important; border-radius:20px; }
  .dq-quiz-top { grid-template-columns:minmax(0,1fr) auto; gap:.65rem; padding-bottom:.65rem; }
  .dq-quiz-progress-meta { margin-bottom:.32rem; font-size:.62rem; }
  .dq-quiz-progress-meta b { font-size:.6rem; }
  .dq-quiz-progress { height:6px; }
  .dq-quiz-wallet { gap:.28rem; }
  .dq-wpill,.dq-exam-tag { min-height:30px; padding:.28rem .5rem; border-radius:10px; font-size:.66rem; }
  .dq-question-block { margin:.65rem 0 .58rem; padding:.58rem .72rem .62rem; border-radius:14px; }
  .dq-question-kicker { margin-bottom:.2rem; font-size:.58rem; }
  .dq-question-kicker em { font-size:.53rem; }
  .dq-quiz-q { font-size:.95rem; line-height:1.68; }
  .dq-quiz-options { gap:.38rem; }
  .dq-quiz-opt { grid-template-columns:27px minmax(0,1fr) 19px; min-height:48px; padding:.48rem .55rem; gap:.5rem; border-radius:12px; font-size:.76rem; line-height:1.55; }
  .dq-quiz-opt .dq-opt-letter { width:27px; height:27px; border-radius:8px; font-size:.65rem; }
  .dq-opt-check { width:18px; height:18px; }
  .dq-ability-wrap { margin-top:.55rem; padding:.5rem; border-radius:13px; }
  .dq-ability-head { margin-bottom:.38rem; font-size:.62rem; }
  .dq-ability-head small { display:none; }
  .dq-ability-box { gap:.3rem; }
  .dq-ability-btn { min-height:52px; grid-template-columns:23px minmax(0,1fr); column-gap:.3rem; padding:.34rem .3rem; border-radius:10px; }
  .dq-ab-ico { width:23px; height:23px; border-radius:7px; }
  .dq-ab-ico svg,.dq-ab-ico.dq-ico { width:12px; height:12px; }
  .dq-ab-label { font-size:.52rem; }
  .dq-ability-btn .cost { font-size:.49rem; }
  #dq-quiz-next { min-height:44px; margin-top:.58rem; padding:.6rem .8rem; font-size:.76rem; }
}
@media (max-width:360px) {
  .dq-quiz-page .dq-brand-name { display:none; }
  .dq-quiz-opt { grid-template-columns:26px minmax(0,1fr); }
  .dq-opt-check { display:none; }
  .dq-ab-label { font-size:.49rem; }
}

/* =========================================================================
   3.32 — ARCADE LISTING CARDS
   Isolated public-game cards; dark studio styles no longer leak into lists.
   ========================================================================= */
.dq-quizzes-page .dq-listing-game-grid { gap:.85rem; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-card,
.dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact {
  color:#172038; background:#fff; border-color:#e4e9f2;
  box-shadow:0 18px 42px -32px rgba(21,31,55,.48);
}
.dq-quizzes-page .dq-listing-game-grid .dq-game-card h3,
.dq-quizzes-page .dq-listing-game-grid .dq-game-card h3 a { color:#11182c; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-card p { color:#718097; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-specs { border-color:#edf0f5; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-specs span { color:#78869b; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-specs span + span { border-color:#edf0f5; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-specs b { color:#172038; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-start { color:#fff; background:#101936; border-color:#101936; }
.dq-quizzes-page .dq-listing-game-grid .dq-game-heading { display:flex; }
.dq-quizzes-page .dq-tabs { scrollbar-width:none; }
.dq-quizzes-page .dq-tabs::-webkit-scrollbar { display:none; }

@media (max-width:767px) {
  .dq-quizzes-page .dq-main { padding-top:.7rem; }
  .dq-quizzes-page .dq-layout { gap:1rem; }
  .dq-quizzes-page .dq-tabs { margin-inline:-.25rem; padding:.15rem .25rem .35rem; overflow-x:auto; flex-wrap:nowrap; scroll-snap-type:x proximity; }
  .dq-quizzes-page .dq-tabs a { flex:none; scroll-snap-align:start; white-space:nowrap; }
  .dq-quizzes-page .dq-listing-game-grid { gap:.9rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact {
    position:relative; display:block; overflow:hidden; border-radius:21px;
    background:#fff; box-shadow:0 18px 40px -30px rgba(15,23,42,.55);
  }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card::before,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card::after {
    content:""; position:absolute; z-index:3; top:109px; width:18px; height:18px; border-radius:50%; background:#f5f7fb;
  }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card::before { right:-9px; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card::after { left:-9px; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-cover,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact .dq-game-cover {
    height:118px; min-height:118px; padding:.72rem .8rem; border-radius:0;
  }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-cover::before { content:"DQ / PLAY"; position:absolute; left:.8rem; top:50%; color:rgba(255,255,255,.13); font-size:1.4rem; font-weight:950; letter-spacing:-.06em; transform:translateY(-50%); }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-cover-top,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact .dq-game-cover-top { display:flex; flex-direction:row; align-items:center; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-cover-foot,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact .dq-game-cover-foot { display:flex; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-cover-foot > span:first-child { display:flex; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-symbol,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact .dq-game-symbol { width:52px; height:52px; border-radius:17px; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-live { display:flex; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-body,
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card.is-compact .dq-game-body { padding:.72rem .8rem .78rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-kicker { font-size:.58rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-players { font-size:.54rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card h3 { margin:.32rem 0 .18rem; font-size:.9rem; line-height:1.55; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card p { min-height:0; font-size:.65rem; line-height:1.7; -webkit-line-clamp:2; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-specs { grid-template-columns:repeat(3,1fr); margin:.55rem 0; padding:.5rem 0; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-specs span { font-size:.53rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-specs span:last-child { display:flex; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-specs span:nth-child(2) { border-right:1px solid #edf0f5; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-actions { grid-template-columns:minmax(0,1fr) 44px; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-actions .dq-btn { min-height:40px; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-duel { padding:0; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-duel span { display:none; }
}

@media (max-width:420px) {
  .dq-quizzes-page .dq-listing-game-grid .dq-game-live { font-size:.53rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-card h3 { font-size:.86rem; }
  .dq-quizzes-page .dq-listing-game-grid .dq-game-specs span { font-size:.5rem; }
}

/* Quiz Focus V2 — a standalone dark game console, not a generic white card. */
.dq-quiz-stage .dq-quiz-focus-card {
  color:#fff; border-color:rgba(108,129,201,.3);
  background:
    radial-gradient(circle at 10% 5%,rgba(35,157,255,.18),transparent 16rem),
    radial-gradient(circle at 95% 90%,rgba(118,87,255,.18),transparent 18rem),
    linear-gradient(145deg,#091126,#101a38 58%,#171442);
  box-shadow:0 34px 80px -42px rgba(8,13,28,.9),inset 0 1px 0 rgba(255,255,255,.08);
}
.dq-quiz-stage .dq-quiz-focus-card:hover { border-color:rgba(108,129,201,.3); box-shadow:0 34px 80px -42px rgba(8,13,28,.9),inset 0 1px 0 rgba(255,255,255,.08); }
.dq-quiz-focus-card::after { background:rgba(35,157,255,.055) !important; }
.dq-quiz-focus-card .dq-quiz-top { border-bottom-color:rgba(255,255,255,.1); }
.dq-quiz-focus-card .dq-quiz-progress-meta { color:#a9b7d3; }
.dq-quiz-focus-card .dq-quiz-progress-meta b { color:#78d9ff; }
.dq-quiz-focus-card .dq-quiz-progress { background:rgba(255,255,255,.1); }
.dq-quiz-focus-card .dq-wpill { border-color:rgba(255,255,255,.12); box-shadow:none; }
.dq-quiz-focus-card .dq-wpill-heart { color:#ff9eb2; background:rgba(255,95,130,.12); }
.dq-quiz-focus-card .dq-wpill-coin { color:#ffe08a; background:rgba(255,212,92,.12); }
.dq-quiz-focus-card .dq-question-block { border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.045); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.dq-quiz-focus-card .dq-question-kicker { color:#73ddff; }
.dq-quiz-focus-card .dq-question-kicker em { color:#8292b2; }
.dq-quiz-focus-card .dq-quiz-q { color:#fff; text-shadow:0 8px 28px rgba(0,0,0,.22); }
.dq-quiz-focus-card .dq-quiz-opt { border-color:rgba(220,228,242,.92); background:rgba(255,255,255,.97); box-shadow:0 12px 28px -23px rgba(0,0,0,.9); }
.dq-quiz-focus-card .dq-quiz-opt:hover:not(:disabled) { border-color:#8ab5ff; background:#fff; }
.dq-quiz-focus-card .dq-quiz-opt.selected { border-color:#64a8ff; background:linear-gradient(135deg,#edf6ff,#f3f0ff); box-shadow:0 0 0 3px rgba(86,145,255,.16),0 14px 28px -22px #000; }
.dq-quiz-focus-card .dq-ability-wrap { border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.045); }
.dq-quiz-focus-card .dq-ability-head { color:#d5def0; }
.dq-quiz-focus-card .dq-ability-head small { color:#7484a5; }
.dq-quiz-focus-card .dq-ability-btn { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.96); }
.dq-quiz-focus-card #dq-quiz-next { color:#071226; border-color:transparent; background:linear-gradient(100deg,#63e6ff,#5da0ff 56%,#9a7aff); box-shadow:0 16px 34px -18px rgba(93,160,255,.9); font-weight:950; }
.dq-quiz-focus-card #dq-quiz-next:hover { color:#071226; filter:brightness(1.05); }

/* =========================================================================
   3.33 — LEADERBOARD ARENA
   Spacious desktop table; native ranking cards on mobile.
   ========================================================================= */
.dq-leaderboard-page .dq-stack { width:min(100%,1060px); margin-inline:auto; }
.dq-leaderboard-page .dq-lb-card { padding:clamp(.9rem,2.6vw,1.5rem); overflow:hidden; border:1px solid #e2e8f2; border-radius:28px; background:rgba(255,255,255,.92); box-shadow:0 30px 75px -48px rgba(15,23,42,.58); }
.dq-leaderboard-page .dq-lb-header { align-items:center; padding:1.15rem 1.25rem; border-radius:20px; color:#fff; background:radial-gradient(circle at 10% 10%,rgba(35,157,255,.2),transparent 14rem),linear-gradient(135deg,#091126,#152047 65%,#251a58); }
.dq-lb-eyebrow { display:block; margin-bottom:.35rem; color:#78d9ff; font-family:var(--font-mono); font-size:.57rem; font-weight:900; letter-spacing:.13em; direction:ltr; text-align:right; }
.dq-leaderboard-page .dq-lb-title { color:#fff; font-size:clamp(1.25rem,3vw,1.65rem); font-weight:950; letter-spacing:-.04em; }
.dq-leaderboard-page .dq-lb-title svg { color:#ffd45c; }
.dq-leaderboard-page .dq-lb-sub { color:#9eabc6; font-size:.72rem; line-height:1.8; }
.dq-leaderboard-page .dq-lb-search { width:min(100%,260px); }
.dq-leaderboard-page .dq-lb-search input { width:100%; min-width:0; border-color:rgba(255,255,255,.13); color:#fff; background:rgba(255,255,255,.08); }
.dq-leaderboard-page .dq-lb-search input::placeholder { color:#91a0bd; }
.dq-leaderboard-page .dq-lb-search input:focus { border-color:#66c7ff; box-shadow:0 0 0 4px rgba(102,199,255,.1); }
.dq-lb-scope-chip { flex:none; padding:.45rem .8rem; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:#bfeaff; background:rgba(255,255,255,.07); font-size:.64rem; font-weight:900; }
.dq-leaderboard-page .dq-lb-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:1rem 0; padding:.3rem; border:0; border-radius:15px; background:#f1f4f9; }
.dq-leaderboard-page .dq-lb-tabs a { display:flex; min-height:40px; align-items:center; justify-content:center; margin:0; padding:.5rem .7rem; border:0; border-radius:11px; color:#6d7a91; font-size:.72rem; font-weight:850; }
.dq-leaderboard-page .dq-lb-tabs a.is-active { color:#fff; background:linear-gradient(135deg,#3867f4,#7657ff); box-shadow:0 10px 22px -14px rgba(56,103,244,.8); }
.dq-leaderboard-page .dq-myrank-card { display:grid; grid-template-columns:100px minmax(0,1fr); gap:.8rem; padding:.7rem; border-color:#dce6ff; border-radius:17px; background:linear-gradient(135deg,#f1f6ff,#f7f4ff); }
.dq-leaderboard-page .dq-myrank-badge { display:grid; min-height:74px; place-items:center; padding:.4rem; border-radius:13px; color:#73809a; background:#fff; }
.dq-leaderboard-page .dq-myrank-badge b { font-size:1.6rem; }
.dq-leaderboard-page .dq-myrank-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.dq-leaderboard-page .dq-myrank-stats > div { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:.5rem .7rem; border-right:1px solid #dfe6f4; }
.dq-leaderboard-page .dq-myrank-stats > div:first-child { border-right:0; }
.dq-leaderboard-page .dq-lb-tablewrap { overflow:visible; }
.dq-leaderboard-page .dq-lb-table { border-collapse:separate; border-spacing:0 .45rem; }
.dq-leaderboard-page .dq-lb-table thead th { padding:.2rem .75rem .35rem; color:#8793a7; font-size:.62rem; font-weight:850; }
.dq-leaderboard-page .dq-lb-table tbody tr { background:#fff; box-shadow:0 8px 24px -24px rgba(15,23,42,.75); }
.dq-leaderboard-page .dq-lb-table tbody tr:nth-child(even) { background:#f8faff; }
.dq-leaderboard-page .dq-lb-table tbody td { padding:.72rem .75rem; border-block:1px solid #edf0f5; color:#455168; font-size:.74rem; }
.dq-leaderboard-page .dq-lb-table tbody td:first-child { border-right:1px solid #edf0f5; }
.dq-leaderboard-page .dq-lb-table tbody td:last-child { border-left:1px solid #edf0f5; }
.dq-leaderboard-page .dq-lb-table tbody tr.is-top { background:linear-gradient(90deg,#fffdf5,#fff); }
.dq-leaderboard-page .dq-lb-table tbody tr.rank-1 td { border-block-color:#f4df9b; }
.dq-leaderboard-page .dq-lb-table tr.is-me { background:#eef4ff !important; }
.dq-leaderboard-page .dq-lb-user { min-width:0; font-size:.76rem; }
.dq-leaderboard-page .dq-lb-user img { width:38px; height:38px; border:2px solid #fff; box-shadow:0 6px 14px -9px rgba(15,23,42,.65); }
.dq-leaderboard-page .dq-lb-user span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dq-lb-location-cell { display:flex; align-items:center; gap:.3rem; }
.dq-lb-location-cell svg { color:#7c8aa2; }
.dq-lb-score-cell b { color:#315fe7; font-family:var(--font-mono); font-size:.82rem; }
.dq-lb-plays-cell b { color:#526078; font-family:var(--font-mono); }
.dq-lb-academic-table .dq-lb-score-cell b { color:#078c91; }
.dq-leaderboard-page .dq-pagination { flex-wrap:wrap; }
.dq-leaderboard-page .dq-mini-form { display:grid; grid-template-columns:1fr 1fr auto; gap:.5rem; }

@media (max-width:640px) {
  .dq-leaderboard-page .dq-main { padding-top:.7rem; }
  .dq-leaderboard-page .dq-stack { gap:1rem; }
  .dq-leaderboard-page .dq-lb-card { padding:.65rem; border-radius:21px; }
  .dq-leaderboard-page .dq-lb-header { display:block; padding:.9rem; border-radius:16px; }
  .dq-leaderboard-page .dq-lb-title { margin-bottom:.18rem; font-size:1.18rem; }
  .dq-leaderboard-page .dq-lb-sub { font-size:.64rem; }
  .dq-leaderboard-page .dq-lb-search { width:100%; margin-top:.7rem; }
  .dq-leaderboard-page .dq-lb-search input { min-height:41px; }
  .dq-lb-scope-chip { display:inline-flex; margin-top:.65rem; }
  .dq-leaderboard-page .dq-lb-tabs { margin:.7rem 0; }
  .dq-leaderboard-page .dq-lb-tabs a { min-height:37px; padding:.4rem .3rem; font-size:.65rem; }
  .dq-leaderboard-page .dq-myrank-card { grid-template-columns:72px minmax(0,1fr); margin-bottom:.7rem; padding:.45rem; }
  .dq-leaderboard-page .dq-myrank-badge { min-height:64px; font-size:.58rem; }
  .dq-leaderboard-page .dq-myrank-badge b { font-size:1.25rem; }
  .dq-leaderboard-page .dq-myrank-stats { gap:.15rem; }
  .dq-leaderboard-page .dq-myrank-stats > div { padding:.3rem .38rem; }
  .dq-leaderboard-page .dq-myrank-stats span { font-size:.53rem; }
  .dq-leaderboard-page .dq-myrank-stats b { font-size:.82rem; }
  .dq-leaderboard-page .dq-lb-tablewrap { overflow:visible; }
  .dq-leaderboard-page .dq-lb-table { display:block; width:100%; border-spacing:0; }
  .dq-leaderboard-page .dq-lb-table thead { display:none; }
  .dq-leaderboard-page .dq-lb-table tbody { display:grid; gap:.52rem; }
  .dq-leaderboard-page .dq-lb-table tbody tr,
  .dq-leaderboard-page .dq-lb-table tbody tr:nth-child(even) {
    display:grid; grid-template-columns:48px minmax(0,1fr) minmax(76px,.72fr);
    grid-template-areas:"rank user user" "rank location location" "rank score plays";
    overflow:hidden; border:1px solid #e4e9f2; border-radius:16px; background:#fff;
    box-shadow:0 12px 28px -25px rgba(15,23,42,.7);
  }
  .dq-leaderboard-page .dq-lb-table tbody tr.is-top { background:linear-gradient(135deg,#fffdf5,#fff); }
  .dq-leaderboard-page .dq-lb-table tbody tr.is-me { box-shadow:inset 0 0 0 1px #87a9ff,0 12px 28px -25px rgba(15,23,42,.7); }
  .dq-leaderboard-page .dq-lb-table tbody td { min-width:0; padding:.45rem .55rem; border:0; border-radius:0; font-size:.66rem; }
  .dq-leaderboard-page .dq-lb-table tbody td::before { content:attr(data-label); color:#98a2b3; font-size:.5rem; font-weight:750; }
  .dq-leaderboard-page .dq-lb-rank-cell { grid-area:rank; display:grid; place-items:center; padding:.4rem !important; border-left:1px dashed #e5e9f1 !important; background:#f5f7fb; }
  .dq-leaderboard-page .dq-lb-rank-cell::before,.dq-leaderboard-page .dq-lb-user-cell::before { display:none; }
  .dq-leaderboard-page .dq-lb-user-cell { grid-area:user; display:flex; align-items:center; gap:.35rem; padding-bottom:.25rem !important; }
  .dq-leaderboard-page .dq-lb-user { flex:1; font-size:.7rem; }
  .dq-leaderboard-page .dq-lb-user img { width:34px; height:34px; }
  .dq-leaderboard-page .dq-me-badge { flex:none; padding:.12rem .42rem; font-size:.5rem; }
  .dq-leaderboard-page .dq-lb-location-cell { grid-area:location; padding-top:0 !important; color:#6d7b91; }
  .dq-leaderboard-page .dq-lb-location-cell::before { margin-left:.28rem; }
  .dq-leaderboard-page .dq-lb-location-cell svg { width:11px; height:11px; }
  .dq-leaderboard-page .dq-lb-score-cell,.dq-leaderboard-page .dq-lb-plays-cell { display:flex; align-items:center; justify-content:space-between; gap:.35rem; margin:.15rem .4rem .4rem; padding:.38rem .45rem !important; border-radius:9px !important; background:#f5f7fb; }
  .dq-leaderboard-page .dq-lb-score-cell { grid-area:score; }
  .dq-leaderboard-page .dq-lb-plays-cell { grid-area:plays; margin-right:0; }
  .dq-leaderboard-page .dq-lb-score-cell b,.dq-leaderboard-page .dq-lb-plays-cell b { font-size:.7rem; }
  .dq-leaderboard-page .dq-medal { width:28px; height:28px; }
  .dq-leaderboard-page .dq-rank-num { min-width:28px; height:28px; border-radius:9px; color:#59667c; background:#fff; }
  .dq-leaderboard-page .dq-mini-form { grid-template-columns:1fr; }
  .dq-leaderboard-page .dq-mini-form .dq-btn { width:100%; }
}

/* =========================================================================
   3.42 — DAILY QUIZ NEXT: unified product design language
   ========================================================================= */
:root { --dq-ink:#11203a; --dq-muted:#6d7b90; --dq-surface:#fff; --dq-line:#e6edf6; --dq-brand:#3f5ce8; --dq-cyan:#18b8cc; --dq-accent:#f3b63f; --dq-radius-ui:18px; --dq-shadow-ui:0 16px 40px -28px rgba(19,42,79,.38); --dq-shadow-float:0 24px 56px -30px rgba(18,40,76,.45); }
body { color:var(--dq-ink); background:#f5f8fc; }
.dq-section-card,.dq-card,.dq-feature,.dq-stat-card,.dq-quiz-card,.dq-panel-card,.dq-dashboard-card,.dq-chart-card { border-color:var(--dq-line)!important; border-radius:var(--dq-radius-ui)!important; box-shadow:var(--dq-shadow-ui); }
.dq-btn,.dq-btn-primary,.dq-btn-secondary,.dq-btn-outline { border-radius:12px; font-weight:850; letter-spacing:-.015em; }
.dq-ico,.dq-icon-wrap,.dq-stat-icon,.dq-feature-ico { border-radius:12px; }
.dq-page-head h1,.dq-section-title h2,.dq-section-title h3,.dq-dashboard-title,.dq-panel-heading { color:var(--dq-ink); font-weight:950; letter-spacing:-.04em; }
.dq-chart-card canvas,.dq-chart-wrap canvas { border-radius:14px; }
.dq-notif-head { align-items:center; padding-bottom:.85rem; border-bottom:1px solid var(--dq-line); }.dq-notif-head .dq-panel-title{position:relative;padding-right:.8rem;font-size:clamp(1.35rem,3vw,2rem)!important}.dq-notif-head .dq-panel-title::before{content:"";position:absolute;right:0;top:.12em;width:4px;height:1.12em;border-radius:99px;background:linear-gradient(#16bfd3,#4f5de8)}.dq-notif-head .dq-btn{padding:.55rem .75rem;border:1px solid #dbe5f2;background:#f8fbff;color:#3159bd}.dq-notif-list{gap:.65rem}.dq-notif-card{position:relative;padding:1rem 1.05rem 1rem 1rem!important;border:1px solid var(--dq-line)!important;border-radius:16px!important;background:var(--dq-surface)!important;box-shadow:0 12px 28px -24px rgba(20,45,85,.42)!important;overflow:hidden}.dq-notif-card::before{content:"";position:absolute;right:0;top:16%;bottom:16%;width:3px;border-radius:99px;background:#d7e1ef}.dq-notif-card.unread{border-color:#c7dcff!important;background:linear-gradient(135deg,#fff,#f3f8ff)!important}.dq-notif-card.unread::before{background:linear-gradient(#1bbcd1,#4662e9)}.dq-notif-title{font-size:.9rem!important;color:var(--dq-ink)!important;font-weight:900}.dq-notif-msg{font-size:.74rem!important;color:var(--dq-muted)!important;line-height:2!important}.dq-notif-date{font-family:var(--font-sans)!important;font-size:.6rem!important;color:#9aa8bb!important}
.dq-section-card:has(#pg-chart),.dq-section-card:has(#dq-analytics-chart){background:linear-gradient(145deg,#fff,#f7faff)!important}.dq-section-card select.dq-input{height:48px;border-color:#dbe5f1;border-radius:13px;background:#fff;color:var(--dq-ink);font-weight:750}.dq-section-card canvas{max-height:270px}.dq-panel-main .dq-section-card{box-shadow:0 18px 42px -34px rgba(24,47,87,.42)}

/* The home hero becomes an event calendar rather than a static question demo. */
.dq-home-hero .dq-hero-arena { min-height:428px; padding:0; overflow:hidden; background:#0d1a31!important; border:1px solid rgba(143,178,232,.24)!important; }
.dq-home-hero .dq-hero-arena > :not(.dq-event-showcase) { display:none!important; }
.dq-event-showcase { position:relative; z-index:2; display:flex; min-height:428px; flex-direction:column; padding:1rem; color:#f7fbff; background:radial-gradient(circle at 18% 0,rgba(42,213,216,.18),transparent 32%),linear-gradient(145deg,#101e3a,#151b47 58%,#15275b); }
.dq-event-showcase::before { content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,#000,transparent); }
.dq-event-showcase-head,.dq-event-foot { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.62rem;font-weight:800;color:#d7e5f9; }.dq-event-showcase-head a{display:inline-flex;align-items:center;gap:.25rem;color:#85e4ee;font-size:.55rem}.dq-event-live-dot{width:7px;height:7px;border-radius:50%;background:#57e3ad;box-shadow:0 0 0 5px rgba(87,227,173,.12)}
.dq-event-featured { position:relative; z-index:1; display:flex; min-height:112px; align-items:flex-end; gap:.65rem; margin:.9rem 0; padding:1rem; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:linear-gradient(90deg,rgba(6,15,39,.84),rgba(7,21,51,.22)),url('assets/images/event-calendar-triptych.png') center/cover; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.dq-event-date { align-self:flex-start; padding:.32rem .5rem; border-radius:9px; color:#132142; background:#ffd166; font-size:.53rem; font-weight:950; }.dq-event-featured small{color:#78e4ec;font-size:.52rem;font-weight:800}.dq-event-featured h3{max-width:330px;margin:.18rem 0;color:#fff;font-size:1rem;line-height:1.65;font-weight:950}.dq-event-featured p{margin:0;color:#c5d4e9;font-size:.54rem;line-height:1.8}
.dq-event-rail { position:relative;z-index:1;display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.25rem;scroll-snap-type:x mandatory;scrollbar-width:none; }.dq-event-rail::-webkit-scrollbar{display:none}.dq-event-card{position:relative;display:flex;flex:0 0 min(78%,250px);min-height:146px;flex-direction:column;justify-content:flex-end;gap:.22rem;overflow:hidden;padding:.8rem;border:1px solid rgba(255,255,255,.16);border-radius:15px;color:#fff;background-color:#21345d;background-size:cover;background-position:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.13);scroll-snap-align:start;transition:transform .22s ease,border-color .22s ease,filter .22s ease}.dq-event-card:hover,.dq-event-card.is-current{color:#fff;transform:translateY(-2px);border-color:rgba(110,235,236,.75);filter:saturate(1.12)}.dq-event-card span{align-self:flex-start;padding:.2rem .36rem;border-radius:7px;color:#bcefff;background:rgba(8,33,64,.56);font-size:.48rem;font-weight:800}.dq-event-card b{font-size:.7rem;line-height:1.7;font-weight:950}.dq-event-card small{color:#d1dfef;font-size:.49rem;line-height:1.65}.dq-event-foot{margin-top:auto;padding-top:.8rem;color:#a8bad4;font-size:.52rem}.dq-event-foot span{display:flex;align-items:center;gap:.28rem}.dq-event-foot strong{color:#ffd166;font-size:.55rem}
@media (max-width:760px){.dq-home-hero .dq-hero-arena,.dq-event-showcase{min-height:410px}.dq-event-showcase{padding:.8rem}.dq-event-featured{min-height:104px;margin:.65rem 0;padding:.75rem}.dq-event-featured h3{font-size:.86rem}.dq-event-rail{gap:.38rem}.dq-event-card{min-height:154px;padding:.55rem;border-radius:13px}.dq-event-card b{font-size:.57rem}.dq-event-card small{font-size:.44rem}.dq-event-showcase-head{font-size:.57rem}}

/* =========================================================================
   3.34 — SIGNATURE BRAND MARK
   Production logo lockup shared by header, drawer, auth, maintenance and footer.
   ========================================================================= */
.dq-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 48px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
.dq-logo::after { display: none; }
.dq-logo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 9px rgba(35, 72, 210, .18));
  transform: translateZ(0);
  transition: transform .22s ease, filter .22s ease;
}
a.dq-logo:hover > img {
  transform: translateY(-2px) scale(1.035);
  filter: drop-shadow(0 10px 12px rgba(35, 72, 210, .24));
}
a.dq-logo:focus-visible {
  outline: 3px solid rgba(16, 184, 212, .28);
  outline-offset: 3px;
  border-radius: 12px;
}
.dq-auth-brand .dq-logo {
  width: 64px;
  height: 70px;
  margin-inline: auto;
}
.dq-footer .dq-logo { width: 50px; height: 54px; }
@media (max-width: 420px) {
  .dq-logo { width: 42px; height: 45px; }
  .dq-auth-brand .dq-logo { width: 58px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .dq-logo > img { transition: none; }
}

/* =========================================================================
   3.35 — FULL-WIDTH IRAN ARENA + PROVINCE ACTIVITY ATLAS
   A locally rendered, data-driven map and a calmer Persian type hierarchy.
   ========================================================================= */
:root {
  --dq-home-max: 90rem;
  --dq-home-gutter: clamp(1rem, 4vw, 4.5rem);
  --dq-fa-number: "Vazirmatn", Tahoma, sans-serif;
}
body.dq-homepage {
  min-width: 0;
  overflow-x: clip;
  font-size: 16px;
  line-height: 1.8;
  background: #f7f8fc;
}
.dq-homepage,
.dq-homepage button,
.dq-homepage input,
.dq-homepage textarea,
.dq-homepage select {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "tnum";
}
.dq-homepage [data-k],
.dq-homepage .dq-stat-pill b,
.dq-homepage .dq-focus-numbers b,
.dq-homepage .dq-atlas-counters b,
.dq-homepage .dq-ranking-no,
.dq-homepage .dq-ranking-count {
  font-family: var(--dq-fa-number);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.dq-homepage .dq-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.dq-homepage .dq-stack-lg { width: 100%; }
.dq-homepage .dq-stack-lg > * + * { margin-top: 0; }
.dq-homepage .dq-stack-lg { display:flex; flex-direction:column; align-items:stretch; }
/* The activity atlas is the pivot of the home page; exploration follows it. */
.dq-homepage #iran-activity { order:50; }
.dq-homepage #register-box-section { order:60; }
.dq-homepage #top-designers { order:65; }
.dq-homepage #blog { order:70; }
.dq-homepage #contact { order:80; }
.dq-homepage #team { display:none; }
.dq-homepage .dq-main > .dq-stack-lg > section:not(.dq-home-hero):not(.dq-home-fullbleed) {
  width: min(calc(100% - 2 * var(--dq-home-gutter)), var(--dq-home-max));
  margin-inline: auto;
  padding-block: clamp(3.75rem, 7vw, 7rem);
}
.dq-homepage .dq-main > .dq-stack-lg > section.soft {
  width: min(calc(100% - 2 * var(--dq-home-gutter)), var(--dq-home-max));
  margin-block: 2rem;
}

/* Live question-designer ranking. */
.dq-designers-band { position:relative; overflow:hidden; padding:clamp(2rem,5vw,4rem)!important; border:1px solid rgba(74,92,168,.14); border-radius:32px; background:linear-gradient(135deg,#f8fbff 0%,#f4f2ff 55%,#edfbff 100%); box-shadow:0 20px 55px rgba(36,54,105,.09); }
.dq-designers-band::before { content:""; position:absolute; width:330px; height:330px; left:-170px; top:-200px; border-radius:50%; background:radial-gradient(circle,rgba(53,100,255,.14),transparent 68%); pointer-events:none; }
.dq-designers-head,.dq-designer-grid { position:relative; z-index:1; }
.dq-designers-head { max-width:650px; }
.dq-designers-head h3 { color:#111a36; }
.dq-designer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.dq-designer-column { overflow:hidden; border:1px solid rgba(81,98,168,.15); border-radius:22px; background:rgba(255,255,255,.82); box-shadow:0 10px 28px rgba(45,59,122,.07); }
.dq-designer-column-head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem; border-bottom:1px solid rgba(87,104,168,.12); }
.dq-designer-column-head strong { display:block; color:#17213f; font-size:.98rem; font-weight:900; }
.dq-designer-column-head small { display:block; margin-top:.18rem; color:#78839b; font-size:.75rem; }
.dq-designer-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#2e8bff,#5650e9); box-shadow:0 8px 16px rgba(54,87,229,.22); }
.dq-designer-academic .dq-designer-icon { background:linear-gradient(135deg,#8255ef,#b14ee9); }
.dq-designer-list { padding:.45rem .7rem .7rem; }
.dq-designer-row { display:flex; align-items:center; gap:.65rem; min-height:65px; padding:.58rem .28rem; border-bottom:1px solid rgba(87,104,168,.10); }
.dq-designer-row:last-child { border-bottom:0; }
.dq-designer-rank { width:24px; color:#5b6680; text-align:center; font-family:var(--dq-fa-number); font-size:.82rem; font-weight:900; }
.dq-designer-row img { flex:0 0 38px; width:38px; height:38px; border:2px solid #fff; border-radius:13px; object-fit:cover; box-shadow:0 5px 12px rgba(25,39,87,.13); }
.dq-designer-person { min-width:0; flex:1; }
.dq-designer-person b { display:block; overflow:hidden; color:#26304b; font-size:.88rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.dq-designer-person span { display:block; margin-top:.18rem; color:#7f899d; font-family:var(--dq-fa-number); font-size:.7rem; }
.dq-designer-empty { padding:1.2rem .55rem; color:#7e8799; font-size:.8rem; line-height:1.9; text-align:center; }
@media (max-width:680px) { .dq-designers-band { padding:1.35rem!important; border-radius:25px; } .dq-designer-grid { grid-template-columns:1fr; gap:.75rem; margin-top:1.35rem; } .dq-designer-row { min-height:59px; } }

/* Edge-to-edge hero with a restrained, locally recognizable visual voice. */
.dq-homepage .dq-home-hero {
  width: 100%;
  padding: clamp(2.2rem, 5vw, 5rem) var(--dq-home-gutter) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 18%, rgba(36, 205, 213, .16), transparent 27rem),
    radial-gradient(circle at 16% 78%, rgba(116, 82, 255, .18), transparent 32rem),
    linear-gradient(128deg, #070c1c 0%, #111a36 55%, #16154b 100%);
}
.dq-homepage .dq-home-hero::before,
.dq-homepage .dq-home-hero::after {
  inset: 0;
  border-radius: 0;
}
.dq-homepage .dq-home-hero::before {
  border: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 42px 42px;
  box-shadow: none;
}
.dq-homepage .dq-home-hero::after {
  opacity: .3;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 75%, transparent);
}
.dq-homepage .dq-home-hero > .dq-hero-shell,
.dq-homepage .dq-home-hero > .dq-stats-bar,
.dq-homepage .dq-home-hero > .dq-bento {
  width: min(100%, var(--dq-home-max));
  margin-inline: auto;
}
.dq-homepage .dq-home-hero .dq-hero-shell { padding-top: 0; }
.dq-homepage .dq-home-hero .dq-hero h2 {
  max-width: 10.8em;
  font-size: clamp(2.45rem, 5.6vw, 5rem);
  line-height: 1.22;
  letter-spacing: -.055em;
}
.dq-homepage .dq-home-hero .dq-hero p {
  max-width: 39rem;
  font-size: clamp(.98rem, 1.35vw, 1.12rem);
  line-height: 2.05;
}
.dq-homepage .dq-home-hero .dq-stats-bar { margin-top: clamp(2rem, 4vw, 3.4rem); }

/* Iran atlas */
.dq-iran-atlas {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  color: #e9eefb;
  background:
    radial-gradient(circle at 88% 20%, rgba(38, 209, 194, .13), transparent 29rem),
    radial-gradient(circle at 10% 92%, rgba(120, 87, 255, .18), transparent 31rem),
    linear-gradient(140deg, #080d1d 0%, #111936 56%, #151541 100%);
}
.dq-iran-atlas::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .19;
  background-image: radial-gradient(rgba(255,255,255,.45) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(110deg, #000, transparent 72%);
}
.dq-atlas-inner {
  width: min(100%, var(--dq-home-max));
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 7.5rem) var(--dq-home-gutter) clamp(3rem, 6vw, 5rem);
}
.dq-atlas-orbit {
  position: absolute;
  z-index: -1;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 50%;
  pointer-events: none;
}
.dq-orbit-one { top: -13rem; right: -10rem; box-shadow: 0 0 0 4rem rgba(255,255,255,.013), 0 0 0 9rem rgba(255,255,255,.01); }
.dq-orbit-two { bottom: -19rem; left: -8rem; }
.dq-atlas-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.dq-atlas-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #6de7df;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .01em;
}
.dq-atlas-kicker i,
.dq-map-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #45e7a8;
  box-shadow: 0 0 0 5px rgba(69,231,168,.1), 0 0 18px rgba(69,231,168,.55);
}
.dq-atlas-head h3 {
  max-width: 12em;
  margin-top: .75rem;
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  line-height: 1.32;
  letter-spacing: -.05em;
}
.dq-atlas-head p {
  margin: 0;
  color: #99a7c2;
  font-size: clamp(.88rem, 1.2vw, 1rem);
  line-height: 2.05;
}
.dq-atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(20rem, .82fr);
  align-items: stretch;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.dq-map-panel,
.dq-atlas-insights {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 34px 75px -42px rgba(0,0,0,.75);
  backdrop-filter: blur(16px);
}
.dq-map-panel {
  padding: clamp(.9rem, 2.5vw, 1.6rem);
  border-radius: 30px;
}
.dq-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  margin-bottom: .5rem;
}
.dq-map-status,
.dq-map-hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #8f9db8;
  font-size: .67rem;
}
.dq-map-status b { color: #dbe5f7; font-size: .7rem; }
.dq-map-hint svg { color: #72e3dc; }
.dq-map-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 31rem;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px),
    radial-gradient(circle at 52% 46%, rgba(65,217,209,.11), transparent 22rem),
    rgba(5,10,26,.35);
  background-size: 28px 28px, 28px 28px, auto, auto;
}
.dq-map-copy {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,.055);
  pointer-events: none;
}
.dq-map-copy span { direction: ltr; font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 900; line-height: .8; letter-spacing: -.08em; }
.dq-map-copy small { margin-top: 1rem; color: rgba(255,255,255,.2); font-size: .6rem; font-weight: 700; letter-spacing: 0; }
.dq-iran-map {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 35rem);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.32));
}
.dq-iran-province {
  fill: #1b2848;
  stroke: #596984;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .22s ease, stroke .22s ease, filter .22s ease, transform .22s ease;
}
.dq-iran-province.level-0 { fill: #1a2745; }
.dq-iran-province.level-1 { fill: #18536a; }
.dq-iran-province.level-2 { fill: #177c87; }
.dq-iran-province.level-3 { fill: #16a39c; }
.dq-iran-province.level-4 { fill: #31c8ad; }
.dq-iran-province.level-5 { fill: #6fe2bd; }
.dq-iran-province:hover,
.dq-iran-province:focus-visible,
.dq-iran-province.is-active {
  position: relative;
  z-index: 4;
  fill: #8cf0c9;
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px rgba(93,231,197,.65));
  transform: translateY(-3px) scale(1.018);
}
.dq-map-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .36rem;
  margin-top: 1rem;
  color: #71809d;
  font-size: .6rem;
}
.dq-map-legend i { width: 18px; height: 8px; border-radius: 3px; background: #1a2745; }
.dq-map-legend i.level-1 { background: #18536a; }
.dq-map-legend i.level-2 { background: #177c87; }
.dq-map-legend i.level-3 { background: #16a39c; }
.dq-map-legend i.level-4 { background: #31c8ad; }
.dq-map-legend i.level-5 { background: #6fe2bd; }
.dq-atlas-insights {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(.9rem, 2.2vw, 1.35rem);
  border-radius: 30px;
}
.dq-province-focus {
  position: relative;
  overflow: hidden;
  padding: 1.2rem;
  border: 1px solid rgba(110,231,220,.17);
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(37,191,184,.13), rgba(118,87,255,.11));
}
.dq-province-focus::after {
  content: "";
  position: absolute;
  left: -3rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.dq-focus-top { display: flex; align-items: center; gap: .7rem; }
.dq-focus-pin {
  width: 43px;
  height: 43px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #78eadf;
  background: rgba(31,206,191,.1);
  border: 1px solid rgba(100,231,216,.16);
}
.dq-focus-top > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dq-focus-top small { color: #7e8da9; font-size: .58rem; }
.dq-focus-top strong { overflow: hidden; color: #fff; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.dq-focus-top em {
  padding: .35rem .55rem;
  border-radius: 9px;
  color: #d5d0ff;
  background: rgba(118,87,255,.13);
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
}
.dq-focus-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1rem; }
.dq-focus-numbers > div {
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(5,10,26,.25);
}
.dq-focus-numbers b { display: block; color: #fff; font-size: 1.45rem; line-height: 1.2; }
.dq-focus-numbers span { color: #8290aa; font-size: .58rem; }
.dq-atlas-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.dq-atlas-counters > div {
  min-width: 0;
  padding: .75rem .55rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  text-align: center;
  background: rgba(255,255,255,.035);
}
.dq-atlas-counters span { display: grid; width: 27px; height: 27px; margin: 0 auto .4rem; place-items: center; border-radius: 9px; color: #75e2d9; background: rgba(41,202,190,.09); }
.dq-atlas-counters b { display: block; overflow: hidden; color: #fff; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.dq-atlas-counters small { display: block; margin-top: .16rem; color: #74829d; font-size: .52rem; white-space: nowrap; }
.dq-province-ranking {
  flex: 1;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 19px;
  background: rgba(4,9,23,.25);
}
.dq-ranking-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .6rem; }
.dq-ranking-head h4 { color: #fff; font-size: .83rem; }
.dq-ranking-head > span { display: inline-flex; align-items: center; gap: .3rem; color: #6e7d99; font-size: .54rem; }
.dq-ranking-list { display: grid; gap: .24rem; }
.dq-ranking-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 45px;
  padding: .45rem .35rem;
  border: 0;
  border-radius: 11px;
  color: inherit;
  text-align: right;
  background: transparent;
  transition: background .18s ease, transform .18s ease;
}
.dq-ranking-row:hover,
.dq-ranking-row:focus-visible,
.dq-ranking-row.is-active { background: rgba(255,255,255,.06); transform: translateX(-2px); outline: none; }
.dq-ranking-no { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #6fe2bd; background: rgba(53,206,181,.09); font-size: .6rem; font-weight: 850; }
.dq-ranking-main { min-width: 0; }
.dq-ranking-main b { display: block; overflow: hidden; color: #dfe7f7; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.dq-ranking-main i { display: block; height: 3px; margin-top: .36rem; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.06); }
.dq-ranking-main em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7657ff, #38d6c5); }
.dq-ranking-count { display: inline-flex; align-items: baseline; gap: .2rem; color: #fff; font-size: .68rem; font-style: normal; font-weight: 800; }
.dq-ranking-count strong { font: inherit; }
.dq-ranking-count small { color: #687792; font-size: .48rem; }
.dq-map-source { margin: 1.2rem 0 0; color: #5d6b85; font-size: .57rem; text-align: center; }

/* Editorial rhythm for the remaining home sections. */
.dq-homepage .dq-home-head h3,
.dq-homepage .dq-section-head h3,
.dq-homepage .dq-showcase-head h2 {
  line-height: 1.45;
  letter-spacing: -.035em;
}
.dq-homepage .dq-home-head p,
.dq-homepage .dq-section-head p { line-height: 2; }

@media (max-width: 1080px) {
  .dq-atlas-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .dq-map-stage { min-height: 28rem; }
}
@media (max-width: 900px) {
  .dq-atlas-head { grid-template-columns: 1fr; gap: 1rem; }
  .dq-atlas-head p { max-width: 40rem; }
  .dq-atlas-layout { grid-template-columns: 1fr; }
  .dq-map-stage { min-height: 31rem; }
  .dq-atlas-insights { display: grid; grid-template-columns: 1fr 1fr; }
  .dq-province-ranking { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  body.dq-homepage { font-size: 15px; }
  :root { --dq-home-gutter: 1rem; }
  .dq-homepage .dq-main > .dq-stack-lg > section:not(.dq-home-hero):not(.dq-home-fullbleed),
  .dq-homepage .dq-main > .dq-stack-lg > section.soft { width: calc(100% - 2rem); }
  .dq-homepage .dq-home-hero { padding-block: 2rem 3rem; }
  .dq-homepage .dq-home-hero .dq-hero h2 { font-size: clamp(2.15rem, 10.5vw, 3.2rem); line-height: 1.28; }
  .dq-homepage .dq-home-hero .dq-hero p { font-size: .92rem; }
  .dq-atlas-inner { padding-block: 3.5rem 2.5rem; }
  .dq-atlas-head { margin-bottom: 1.7rem; }
  .dq-atlas-head h3 { font-size: clamp(1.85rem, 9vw, 2.7rem); }
  .dq-atlas-head p { font-size: .81rem; }
  .dq-map-panel,
  .dq-atlas-insights { border-radius: 22px; }
  .dq-map-panel { padding: .65rem; }
  .dq-map-toolbar { padding-inline: .25rem; }
  .dq-map-hint { display: none; }
  .dq-map-stage { min-height: 25rem; border-radius: 17px; }
  .dq-iran-map { width: min(100%, 26rem); }
  .dq-map-copy { right: .7rem; bottom: .75rem; }
  .dq-map-copy span { font-size: 3.8rem; }
  .dq-map-copy small { display: none; }
  .dq-map-legend { gap: .25rem; }
  .dq-map-legend i { width: 14px; }
  .dq-atlas-insights { display: flex; }
  .dq-focus-top em { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dq-focus-numbers b { font-size: 1.25rem; }
  .dq-atlas-counters > div { padding-inline: .3rem; }
  .dq-atlas-counters small { font-size: .48rem; }
}
@media (max-width: 400px) {
  .dq-map-stage { min-height: 22rem; }
  .dq-focus-top em { display: none; }
  .dq-map-legend > span { font-size: .5rem; }
  .dq-atlas-counters svg { width: 14px; height: 14px; }
  .dq-atlas-counters b { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dq-iran-province,
  .dq-ranking-row { transition: none; }
}

/* =========================================================================
   3.36 — MOBILE SHELL FIXES, GEOGRAPHIC WATERS & COMMAND DASHBOARD
   ========================================================================= */

/* Seas are part of the atlas, not decorative HTML floating over the map. */
.dq-iran-waters { pointer-events: none; }
.dq-iran-waters .dq-water {
  fill: url(#dq-water-gradient);
  stroke: rgba(105, 220, 238, .34);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.dq-water-caspian { fill: #123c5d !important; }
.dq-water-persian { fill: #0e4667 !important; }
.dq-water-oman { fill: #0b3858 !important; }
.dq-water-label {
  fill: rgba(170, 233, 244, .82);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0;
  paint-order: stroke;
}
.dq-water-label-caspian { font-size: 16px; }
.dq-water-label-oman { font-size: 15px; }

/* User-panel drawer must escape the main stacking context and fully cover the
   site header. This also removes the blank admin-toolbar strip on app pages. */
.dq-panel-drawer-close { display: none; }
body.dq-user-panel-page #wpadminbar { display: none !important; }
html:has(body.dq-user-panel-page) { margin-top: 0; }
@keyframes dq-panel-slide-in-rtl {
  from { opacity: .35; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 767px) {
  html.dq-panel-menu-open .dq-main { z-index: 100; }
  html.dq-panel-menu-open .dq-header { z-index: 40; }
  html.dq-panel-menu-open #wpadminbar { display: none !important; }
  .dq-panel-drawer-overlay {
    z-index: 9990;
    background: rgba(4, 9, 24, .66);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .dq-panel-sidebar {
    top: 0;
    right: 0;
    left: auto;
    width: min(340px, 87vw);
    max-width: none;
    border: 0;
    border-radius: 28px 0 0 28px;
    box-shadow: -30px 0 70px -38px rgba(0,0,0,.92);
  }
  .dq-panel-sidebar.is-open { animation: dq-panel-slide-in-rtl .28s cubic-bezier(.16,1,.3,1) both; }
  .dq-panel-drawer-close {
    position: absolute;
    z-index: 3;
    top: 15px;
    left: 15px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    color: #cbd6eb;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  }
  .dq-panel-drawer-close:active { transform: scale(.96); }
  .dq-panel-sidebar .dq-panel-user {
    min-height: 92px;
    padding: 1.1rem 1.1rem 1rem 4.1rem;
    background:
      radial-gradient(circle at 88% 0, rgba(54,211,219,.2), transparent 8rem),
      rgba(255,255,255,.025);
  }
  .dq-panel-sidebar .dq-panel-menu { padding: .7rem .8rem; }
  .dq-panel-sidebar .dq-panel-menu a {
    min-height: 50px;
    padding: .52rem .65rem;
    border-radius: 14px;
    font-size: .78rem;
  }
  .dq-panel-sidebar .dq-panel-menu a .ico { width: 34px; height: 34px; }
  .dq-panel-sidebar .dq-panel-logout {
    margin: .35rem .8rem .8rem;
    padding: .8rem;
    border: 1px solid rgba(251,113,133,.13);
    border-radius: 14px;
    color: #fda4af;
    background: rgba(244,63,94,.08);
  }
}

/* Dashboard data is presented as an arena HUD instead of generic white tiles. */
.dq-panel-content .dq-stat-grid {
  gap: .75rem;
  counter-reset: dashboard-stat;
}
.dq-panel-content .dq-stat-card {
  --stat-accent: #3b82f6;
  --stat-accent-2: #22d3ee;
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 132px;
  padding: 1rem;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(78, 104, 163, .15);
  border-radius: 21px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,255,.92));
  box-shadow: 0 18px 42px -31px rgba(25, 42, 86, .5), inset 0 1px 0 #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.dq-panel-content .dq-stat-card:nth-child(2) { --stat-accent: #7259ef; --stat-accent-2: #a78bfa; }
.dq-panel-content .dq-stat-card:nth-child(3) { --stat-accent: #e39a18; --stat-accent-2: #facc15; }
.dq-panel-content .dq-stat-card:nth-child(4) { --stat-accent: #e63d6e; --stat-accent-2: #fb7185; }
.dq-panel-content .dq-stat-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -50px;
  left: -45px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--stat-accent) 16%, transparent), transparent 68%);
}
.dq-panel-content .dq-stat-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  height: 3px;
  border-radius: 99px 0 0 0;
  background: linear-gradient(90deg, transparent, var(--stat-accent), var(--stat-accent-2));
}
.dq-panel-content .dq-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--stat-accent) 38%, transparent);
}
.dq-panel-content .dq-stat-card .ico {
  width: 46px;
  height: 46px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--stat-accent), var(--stat-accent-2)) !important;
  box-shadow: 0 12px 24px -14px var(--stat-accent), inset 0 1px 0 rgba(255,255,255,.35);
}
.dq-panel-content .dq-stat-card .ico svg { width: 22px; height: 22px; }
.dq-panel-content .dq-stat-card .label {
  display: block;
  margin-top: .8rem;
  color: #6d7a91;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.7;
}
.dq-panel-content .dq-stat-card .value {
  display: block;
  margin-top: .28rem;
  color: #10192c;
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 900;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.dq-panel-content .dq-wallet-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .85rem;
}
.dq-panel-content .dq-wallet-card {
  --wallet-a: #273a73;
  --wallet-b: #182446;
  position: relative;
  isolation: isolate;
  min-height: 88px;
  padding: .8rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--wallet-a), var(--wallet-b));
  box-shadow: 0 18px 36px -27px var(--wallet-a), inset 0 1px 0 rgba(255,255,255,.1);
}

/* =========================================================================
   3.37 — AUTHENTIC ATLAS, QUIZ LAUNCH DECK & UNIFIED MOBILE NAVIGATION
   ========================================================================= */

/* Geographic context follows Iran's real coastline. Nothing here is a closed
   approximation of a sea, and active provinces never detach from the map. */
.dq-iran-province:hover,
.dq-iran-province:focus-visible,
.dq-iran-province.is-active {
  transform: none;
  stroke-width: 2.15;
  filter: drop-shadow(0 0 9px rgba(93,231,197,.48));
}
.dq-iran-waters { pointer-events:none; }
.dq-iran-waters .dq-water-guide {
  fill:none;
  stroke:rgba(91,216,235,.52);
  stroke-width:2;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(58,198,226,.28));
}
.dq-water-guide-caspian { stroke-dasharray:8 7; }
.dq-water-guide-persian,
.dq-water-guide-oman { stroke-dasharray:12 8; }
.dq-water-label {
  fill:#89dceb;
  stroke:#0d1b32;
  stroke-width:3px;
  font-family:var(--font-sans);
  font-size:18px;
  font-weight:800;
  paint-order:stroke fill;
}
.dq-water-label-caspian { font-size:16px; }
.dq-water-label-oman { font-size:15px; }

/* Start screen: a compact launch deck with two clearly different game modes. */
.dq-quiz-stage .dq-quiz-launch-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(1.2rem,3vw,2rem);
  border:1px solid rgba(151,168,205,.24);
  border-radius:30px;
  background:
    radial-gradient(circle at 100% 0,rgba(56,103,244,.09),transparent 21rem),
    radial-gradient(circle at 0 100%,rgba(25,184,210,.08),transparent 18rem),
    rgba(255,255,255,.96);
  box-shadow:0 35px 90px -55px rgba(29,56,117,.6),inset 0 1px 0 #fff;
}
.dq-quiz-launch-card::before {
  content:"";
  position:absolute;
  top:0;
  right:clamp(1.2rem,4vw,3rem);
  left:clamp(1.2rem,4vw,3rem);
  height:4px;
  border-radius:0 0 9px 9px;
  background:linear-gradient(90deg,#20c7d6,#3867f4 55%,#7958ee);
}
.dq-launch-heading { max-width:690px; }
.dq-launch-heading .dq-badge { padding:.38rem .7rem; border-radius:10px; }
.dq-quiz-launch-card .dq-launch-heading h2 {
  margin:.75rem 0 .4rem;
  color:#121d35;
  font-size:clamp(1.45rem,3.5vw,2.25rem);
  font-weight:950;
  line-height:1.45;
  letter-spacing:-.045em;
}
.dq-quiz-launch-card .dq-launch-heading p {
  max-width:680px;
  margin:0;
  color:#66758e;
  font-size:.84rem;
  line-height:2;
}
.dq-quiz-launch-card .dq-quiz-meta {
  gap:.45rem;
  margin-top:1rem;
}
.dq-quiz-launch-card .dq-quiz-meta > span {
  display:inline-flex;
  min-height:34px;
  padding:.35rem .65rem;
  align-items:center;
  gap:.32rem;
  border:1px solid #e7ebf3;
  border-radius:11px;
  color:#5e6d85;
  background:rgba(248,250,253,.88);
  font-size:.69rem;
  font-weight:750;
}
.dq-quiz-launch-card .dq-quiz-meta svg { color:#3867f4; }
.dq-launch-modes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
  margin-top:1.25rem;
}
.dq-launch-mode {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 32px;
  min-width:0;
  min-height:138px;
  padding:1rem;
  overflow:hidden;
  align-items:center;
  gap:.8rem;
  border:1px solid transparent;
  border-radius:21px;
  font-family:inherit;
  text-align:right;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.dq-launch-mode::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:150px;
  height:150px;
  left:-78px;
  bottom:-95px;
  border:24px solid currentColor;
  border-radius:50%;
  opacity:.055;
}
.dq-launch-mode:hover { transform:translateY(-3px); }
.dq-launch-mode-solo {
  color:#fff;
  border-color:rgba(129,160,234,.22);
  background:
    radial-gradient(circle at 90% 5%,rgba(38,199,224,.18),transparent 10rem),
    linear-gradient(140deg,#091326,#152449 65%,#20205d);
  box-shadow:0 24px 46px -31px rgba(8,19,41,.95),inset 0 1px 0 rgba(255,255,255,.09);
}
.dq-launch-mode-solo:hover { box-shadow:0 29px 52px -28px rgba(8,19,41,.92),inset 0 1px 0 rgba(255,255,255,.1); }
.dq-launch-mode-duel {
  color:#243350;
  border-color:#dbe2f1;
  background:linear-gradient(145deg,#fff,#f5f7ff 60%,#eff4ff);
  box-shadow:0 20px 43px -34px rgba(42,64,111,.62),inset 0 1px 0 #fff;
}
.dq-launch-mode-duel:hover { border-color:#b9c8ef; box-shadow:0 25px 48px -30px rgba(56,103,244,.38); }
.dq-launch-mode-icon {
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:16px;
  flex:none;
}
.dq-launch-mode-solo .dq-launch-mode-icon { color:#76e7ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); }
.dq-launch-mode-duel .dq-launch-mode-icon { color:#5c55e9; background:#e9eaff; border:1px solid #dcdfff; }
.dq-launch-mode-copy { display:flex; min-width:0; flex-direction:column; }
.dq-launch-mode-copy small { color:inherit; opacity:.62; font-size:.58rem; font-weight:850; }
.dq-launch-mode-copy strong { margin:.16rem 0; color:inherit; font-size:1rem; font-weight:950; line-height:1.55; }
.dq-launch-mode-copy em { overflow:hidden; color:inherit; opacity:.64; font-size:.61rem; font-style:normal; font-weight:650; line-height:1.7; }
.dq-launch-mode-arrow { display:grid; width:30px; height:30px; place-items:center; border-radius:10px; color:inherit; background:rgba(255,255,255,.08); }
.dq-launch-mode-duel .dq-launch-mode-arrow { background:#fff; box-shadow:0 8px 18px -13px rgba(31,49,86,.6); }
.dq-launch-mode:focus-visible { outline:3px solid rgba(56,103,244,.3); outline-offset:3px; }
.dq-launch-mode:disabled { cursor:wait; opacity:.76; transform:none; }
.dq-launch-mode.is-loading { display:flex; justify-content:center; gap:.65rem; }
.dq-launch-loader { width:18px; height:18px; border:2px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; animation:dq-spin .7s linear infinite; }
#dq-quiz-start-msg:empty { display:none; }

/* Empty live-region messages do not occupy a ghost button-sized rectangle. */
.dq-geo-body { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .7rem; }
.dq-geo-body > strong,
.dq-geo-body > p { flex-basis:100%; }
.dq-geo-status:empty { display:none; }
.dq-geo-status:not(:empty) {
  display:inline-flex;
  padding:.45rem .65rem;
  align-items:center;
  border-radius:10px;
  color:#475569;
  background:rgba(255,255,255,.68);
  font-size:.7rem;
  font-weight:700;
}

/* Footer identity stays legible on the midnight surface. */
.dq-footer-brand { margin-bottom:1rem; gap:.72rem; }
.dq-footer .dq-footer-logo {
  display:grid;
  width:56px;
  height:56px;
  padding:5px;
  place-items:center;
  border:1px solid rgba(135,220,255,.18);
  border-radius:18px;
  background:radial-gradient(circle at 50% 20%,rgba(76,198,255,.18),rgba(255,255,255,.045));
  box-shadow:0 15px 30px -19px rgba(33,182,255,.7),inset 0 1px 0 rgba(255,255,255,.1);
}
.dq-footer .dq-footer-logo img { width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 6px 11px rgba(0,85,255,.25)); }
.dq-footer .dq-footer-brand .dq-brand-name {
  color:#f8fbff;
  font-size:1.15rem;
  font-weight:950;
  text-shadow:0 7px 20px rgba(0,0,0,.24);
}
.dq-footer .dq-footer-brand .dq-brand-name > span { color:#72dcff; }

/* The panel page owns one mobile menu trigger: the header hamburger. */
@media (max-width:767px) {
  body.dq-user-panel-page .dq-panel-menu-toggle { display:none; }
  body.dq-user-panel-page .dq-panel-header-toggle {
    color:#fff;
    border-color:transparent;
    background:linear-gradient(145deg,#3867f4,#6356e9);
    box-shadow:0 12px 25px -16px rgba(56,103,244,.9);
  }
  body.dq-user-panel-page .dq-panel-header-toggle[aria-expanded="true"] { background:#101a35; }
  .dq-launch-modes { grid-template-columns:1fr; gap:.65rem; }
  .dq-launch-mode { min-height:112px; grid-template-columns:42px minmax(0,1fr) 28px; padding:.8rem; gap:.62rem; border-radius:18px; }
  .dq-launch-mode-icon { width:42px; height:42px; border-radius:13px; }
  .dq-launch-mode-copy strong { font-size:.9rem; }
  .dq-launch-mode-copy em { font-size:.57rem; }
  .dq-launch-mode-arrow { width:28px; height:28px; }
  .dq-quiz-stage .dq-quiz-launch-card { padding:1rem; border-radius:24px; }
  .dq-quiz-launch-card .dq-launch-heading h2 { margin-top:.6rem; font-size:1.45rem; }
  .dq-quiz-launch-card .dq-launch-heading p { font-size:.76rem; line-height:1.9; }
  .dq-quiz-launch-card .dq-quiz-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dq-quiz-launch-card .dq-quiz-meta > span { min-width:0; padding:.33rem .38rem; justify-content:center; white-space:nowrap; font-size:.57rem; }
  .dq-geo-prompt { padding:1rem; }
  .dq-geo-body { align-items:stretch; }
  .dq-geo-body .dq-btn { width:100%; justify-content:center; }
}

@media (max-width:380px) {
  .dq-quiz-launch-card .dq-quiz-meta { grid-template-columns:1fr 1fr; }
  .dq-quiz-launch-card .dq-quiz-meta > span:last-child { grid-column:1 / -1; }
  .dq-launch-mode { grid-template-columns:40px minmax(0,1fr); }
  .dq-launch-mode-arrow { display:none; }
}
.dq-panel-content .dq-wallet-card.rose { --wallet-a: #b42959; --wallet-b: #541b43; }
.dq-panel-content .dq-wallet-card.amber { --wallet-a: #bd7610; --wallet-b: #593816; }
.dq-panel-content .dq-wallet-card.blue { --wallet-a: #176fbb; --wallet-b: #193c79; }
.dq-panel-content .dq-wallet-card.slate { --wallet-a: #40516e; --wallet-b: #1d293b; }
.dq-panel-content .dq-wallet-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -28px;
  bottom: -42px;
  width: 95px;
  height: 95px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(255,255,255,.025);
}
.dq-panel-content .dq-wallet-card .ic {
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.dq-panel-content .dq-wallet-card .v { color: #fff; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.dq-panel-content .dq-wallet-card .l { color: rgba(231,238,250,.7); font-size: .6rem; }
.dq-panel-content .dq-redeem-card {
  position: relative;
  overflow: hidden;
  padding: 1.2rem;
  border: 1px solid rgba(118,87,255,.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 100%, rgba(35,157,255,.13), transparent 16rem),
    linear-gradient(145deg, #fff, #f5f4ff);
  box-shadow: 0 22px 50px -36px rgba(68,48,170,.55);
}
.dq-panel-content .dq-redeem-card h4 { display: flex; align-items: center; gap: .45rem; color: #151b30; }
.dq-panel-content .dq-redeem-card h4 svg { color: #6c4ce7; }
.dq-panel-content .dq-redeem-card .dq-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #e7e9f1; }
.dq-panel-content .dq-redeem-card .dq-progress span { background: linear-gradient(90deg, #7657ff, #239dff, #2fd3c2); box-shadow: 0 0 14px rgba(35,157,255,.38); }

@media (max-width: 900px) {
  .dq-panel-content .dq-wallet-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dq-panel-content { padding: .85rem; border-radius: 21px; }
  .dq-panel-content .dq-stat-grid { gap: .58rem; }
  .dq-panel-content .dq-stat-card { min-height: 122px; padding: .82rem; border-radius: 18px; }
  .dq-panel-content .dq-stat-card .ico { width: 41px; height: 41px; border-radius: 13px; }
  .dq-panel-content .dq-stat-card .label { margin-top: .65rem; font-size: .64rem; }
  .dq-panel-content .dq-stat-card .value { font-size: 1.2rem !important; }
  .dq-panel-content .dq-wallet-card { min-height: 82px; border-radius: 16px; }
  .dq-panel-content .dq-redeem-card { padding: 1rem; border-radius: 19px; }
  .dq-panel-content .dq-redeem-card > .dq-flex:first-child { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 390px) {
  .dq-panel-content .dq-stat-card { min-height: 116px; }
  .dq-panel-content .dq-wallet-card { gap: .48rem; padding: .7rem; }
  .dq-panel-content .dq-wallet-card .ic { width: 34px; height: 34px; }
}

/* =========================================================================
   3.38 — TRUE-COAST ATLAS
   Accurate province/island geometry over surrounding-country land masks.
   Water is now the real negative space between coastlines.
   ========================================================================= */
.dq-iran-map {
  overflow:hidden;
  border-radius:24px;
  background:#082a43;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.28));
}
.dq-atlas-water { fill:url(#dq-atlas-water); }
.dq-atlas-water-grid { fill:url(#dq-atlas-water-grid); }
.dq-map-context-country {
  fill:#0d1729;
  stroke:#2c3d59;
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.dq-map-iran-base {
  fill:#203352;
  stroke:#91a3bf;
  stroke-width:2.2;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.24));
}
.dq-iran-province.level-0 { fill:#2e466f; }
.dq-iran-map-features { filter:drop-shadow(0 12px 18px rgba(1,8,22,.22)); }
.dq-iran-province {
  stroke:#71809b;
  stroke-width:1.35;
  stroke-linejoin:round;
}
.dq-iran-province:hover,
.dq-iran-province:focus-visible,
.dq-iran-province.is-active {
  transform:none;
  stroke:#eaffff;
  stroke-width:2.15;
  filter:drop-shadow(0 0 9px rgba(93,231,197,.48));
}
.dq-iran-water-labels { pointer-events:none; }
.dq-iran-water-labels .dq-water-label rect {
  fill:rgba(5,31,51,.78);
  stroke:rgba(122,224,239,.28);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.2));
}
.dq-iran-water-labels .dq-water-label text {
  fill:#b8eef5;
  stroke:none;
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:800;
  letter-spacing:0;
}
.dq-water-label-caspian,
.dq-water-label-persian,
.dq-water-label-oman { font-size:inherit; }

@media (max-width:560px) {
  .dq-iran-map { border-radius:18px; }
  .dq-iran-water-labels .dq-water-label text { font-size:15px; }
  .dq-map-context-country { stroke-width:1; }
  .dq-iran-province { stroke-width:1.15; }
}

/* =========================================================================
   3.39 — QUIZ ARENA + READABLE IRAN ATLAS
   ========================================================================= */

/* Province boundaries remain clearly visible even when activity is zero. */
.dq-map-iran-base { fill:#182c4c; stroke:#d6e4f5; stroke-width:2.4; }
.dq-iran-map-features { filter:drop-shadow(0 10px 16px rgba(0,0,0,.22)); }
.dq-iran-province {
  cursor:pointer;
  stroke:#dbeafe;
  stroke-width:2.05;
  stroke-opacity:.82;
  paint-order:stroke fill;
  transition:fill .2s ease,stroke .2s ease,filter .2s ease;
}
.dq-iran-province.level-0 { fill:#42618d; }
.dq-iran-province.level-0:nth-child(3n+1) { fill:#39577f; }
.dq-iran-province.level-0:nth-child(3n+2) { fill:#476b99; }
.dq-iran-province.level-0:nth-child(3n) { fill:#345173; }
.dq-iran-province.level-1 { fill:#15758b; }
.dq-iran-province.level-2 { fill:#159a9a; }
.dq-iran-province.level-3 { fill:#20b99f; }
.dq-iran-province.level-4 { fill:#47d2ae; }
.dq-iran-province.level-5 { fill:#83efc5; }
.dq-iran-province:hover,
.dq-iran-province:focus-visible,
.dq-iran-province.is-active { fill:#ffd166; stroke:#fff9dc; stroke-width:3; filter:drop-shadow(0 0 12px rgba(255,209,102,.55)); }

/* Premium random-battle card on /quizzes. */
.dq-random-battle-card {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) minmax(210px,270px);
  align-items:center;
  gap:1.35rem;
  min-height:236px;
  overflow:hidden;
  padding:1.55rem;
  border:1px solid rgba(128,158,255,.24);
  border-radius:32px;
  color:#fff;
  background:radial-gradient(circle at 15% 15%,rgba(69,214,255,.16),transparent 32%),linear-gradient(125deg,#071425 0%,#101d3a 50%,#282062 100%);
  box-shadow:0 32px 70px -38px rgba(7,20,51,.92),inset 0 1px 0 rgba(255,255,255,.1);
}
.dq-random-battle-card::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.dq-random-battle-glow { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.dq-random-battle-glow i { position:absolute; border:1px solid rgba(111,224,255,.15); border-radius:50%; animation:dq-battle-orbit 7s ease-in-out infinite alternate; }
.dq-random-battle-glow i:nth-child(1){ width:330px;height:330px;left:-150px;top:-145px; }
.dq-random-battle-glow i:nth-child(2){ width:220px;height:220px;right:21%;bottom:-165px;animation-delay:-2s; }
.dq-random-battle-glow i:nth-child(3){ width:90px;height:90px;right:11%;top:-46px;animation-delay:-4s; }
@keyframes dq-battle-orbit { to { transform:translate3d(12px,8px,0) scale(1.05); opacity:.62; } }
.dq-random-battle-mark { position:relative; display:grid; width:98px;height:128px; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:29px; color:#9af1ff; background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.045)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 35px -25px #000; }
.dq-random-battle-mark::after { content:"VS"; position:absolute; left:-10px;bottom:15px; color:rgba(255,255,255,.18); font:900 1.5rem/1 var(--font-sans); }
.dq-random-battle-mark small { position:absolute; top:10px;right:10px; padding:.22rem .38rem; border-radius:7px; color:#04271d; background:#47e2aa; font-size:.48rem;font-weight:950;letter-spacing:.05em; }
.dq-random-battle-kicker { display:inline-flex;align-items:center;gap:.42rem;color:#a6b8d8;font-size:.62rem;font-weight:800; }
.dq-random-battle-kicker i { width:7px;height:7px;border-radius:50%;background:#3ce6a7;box-shadow:0 0 0 5px rgba(60,230,167,.1),0 0 16px #3ce6a7; }
.dq-random-battle-copy h2 { margin:.55rem 0 .38rem;color:#fff;font-size:clamp(1.45rem,2.4vw,2.3rem);font-weight:950;line-height:1.5;letter-spacing:-.045em; }
.dq-random-battle-copy h2 em { color:#79e6ff;font-style:normal; }
.dq-random-battle-copy p { margin:0;color:#9eacc3;font-size:.73rem;line-height:1.95; }
.dq-random-battle-specs { display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem; }
.dq-random-battle-specs span { display:inline-flex;align-items:center;gap:.34rem;padding:.34rem .55rem;border:1px solid rgba(255,255,255,.09);border-radius:9px;color:#c7d4ea;background:rgba(255,255,255,.045);font-size:.57rem;font-weight:750; }
.dq-random-battle-specs b { color:#fff;font-size:.72rem; }
.dq-random-battle-action { display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:center;gap:.62rem;min-height:92px;padding:.8rem;border:1px solid rgba(255,255,255,.16);border-radius:22px;color:#061329;background:linear-gradient(135deg,#69e6ff,#6f7cff);box-shadow:0 24px 38px -24px rgba(69,185,255,.72);transition:transform .25s ease,filter .25s ease; }
.dq-random-battle-action:hover { color:#061329;transform:translateY(-3px);filter:saturate(1.08) brightness(1.04); }
.dq-random-battle-action>span { display:grid;width:42px;height:42px;place-items:center;border-radius:14px;background:rgba(255,255,255,.35); }
.dq-random-battle-action b,.dq-random-battle-action small { grid-column:2; }
.dq-random-battle-action b { align-self:end;font-size:.76rem;font-weight:950; }
.dq-random-battle-action small { align-self:start;color:rgba(6,19,41,.64);font-size:.53rem;font-weight:750; }
.dq-random-battle-action>.dq-ico { grid-column:3;grid-row:1 / span 2; }

/* Solo 10-question promise. */
.dq-fixed-round-note { display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;padding:.72rem .82rem;border:1px solid #dce5f1;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#f1f6ff); }
.dq-fixed-round-icon { display:grid;flex:0 0 39px;width:39px;height:39px;place-items:center;border-radius:12px;color:#275fe4;background:#dfeaff; }
.dq-fixed-round-note>span:last-child { display:flex;min-width:0;flex-direction:column; }
.dq-fixed-round-note strong { color:#17233b;font-size:.72rem;font-weight:900; }
.dq-fixed-round-note small { margin-top:.08rem;color:#748197;font-size:.58rem;line-height:1.7; }

/* Online duel lobby. */
.dq-duel-lobby { position:relative;isolation:isolate;overflow:hidden;padding:0;border:1px solid #dfe6f3;border-radius:34px;background:#fff;box-shadow:0 34px 80px -48px rgba(21,40,86,.5); }
.dq-duel-hero { position:relative;overflow:hidden;padding:2.5rem 2rem 2rem;text-align:center;color:#fff;background:radial-gradient(circle at 50% -25%,rgba(67,217,255,.3),transparent 36%),linear-gradient(145deg,#081629,#111f42 58%,#2b246d); }
.dq-duel-hero::after { content:"";position:absolute;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:34px 34px; }
.dq-duel-orbit i { position:absolute;border:1px solid rgba(129,234,255,.13);border-radius:50%; }
.dq-duel-orbit i:nth-child(1){width:420px;height:420px;right:-230px;top:-240px}.dq-duel-orbit i:nth-child(2){width:260px;height:260px;left:-150px;bottom:-170px}.dq-duel-orbit i:nth-child(3){width:110px;height:110px;left:12%;top:-65px}
.dq-duel-kicker { display:inline-flex;align-items:center;gap:.45rem;color:#aebdd4;font-size:.62rem;font-weight:850; }
.dq-duel-kicker i { width:7px;height:7px;border-radius:50%;background:#3ce6a7;box-shadow:0 0 0 5px rgba(60,230,167,.1); }
.dq-duel-emblem { display:grid;width:72px;height:72px;margin:1rem auto .65rem;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:23px;color:#89efff;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 40px -25px #000; }
.dq-duel-hero h1 { margin:0;color:#fff;font-size:clamp(1.65rem,3vw,2.65rem);font-weight:950;letter-spacing:-.05em; }
.dq-duel-hero>p { max-width:650px;margin:.55rem auto 0;color:#a9b7ce;font-size:.72rem;line-height:2; }
.dq-duel-rules { display:flex;max-width:520px;margin:1.2rem auto;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.045); }
.dq-duel-rules span { display:flex;flex:1;align-items:center;justify-content:center;gap:.36rem;padding:.65rem; }
.dq-duel-rules span+span { border-right:1px solid rgba(255,255,255,.09); }
.dq-duel-rules b { color:#7cecff;font-size:1.05rem;font-weight:950; }.dq-duel-rules small{color:#c2cce0;font-size:.57rem;font-weight:750}
.dq-duel-actions { max-width:600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 165px;gap:.65rem; }
.dq-duel-primary,.dq-duel-secondary { border:0;cursor:pointer;font-family:inherit; }
.dq-duel-primary { display:grid;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:.55rem;min-height:70px;padding:.65rem .75rem;border-radius:18px;color:#07172b;background:linear-gradient(135deg,#6de8ff,#7781ff);box-shadow:0 20px 34px -22px #57bfff; }
.dq-duel-primary>span { display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:rgba(255,255,255,.36); }.dq-duel-primary b,.dq-duel-primary small{grid-column:2;text-align:right}.dq-duel-primary b{align-self:end;font-size:.72rem;font-weight:950}.dq-duel-primary small{align-self:start;color:rgba(7,23,43,.6);font-size:.5rem}.dq-duel-primary>.dq-ico{grid-column:3;grid-row:1/span 2}
.dq-duel-secondary { display:flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid rgba(255,255,255,.14);border-radius:18px;color:#e6edfb;background:rgba(255,255,255,.065);font-size:.66rem;font-weight:900; }
.dq-duel-primary:hover,.dq-duel-secondary:hover { transform:translateY(-2px);filter:brightness(1.06); }
.dq-duel-primary:disabled,.dq-duel-secondary:disabled { opacity:.58;cursor:wait;transform:none; }
.dq-match-waiting > div:not(.dq-match-radar-state) { display:none; }
.dq-match-radar-state { position:relative; overflow:hidden; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.2rem 1.25rem; text-align:center; border-radius:28px; color:#edf8ff; background:radial-gradient(circle at 50% 42%,rgba(29,191,232,.20),transparent 30%),radial-gradient(circle at 20% 0,rgba(99,102,241,.16),transparent 28%),linear-gradient(145deg,#07142a,#0b1d42 55%,#181b5c); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.dq-match-radar-state::before { content:""; position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:linear-gradient(rgba(178,231,255,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(178,231,255,.32) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(circle at 50% 44%,#000,transparent 72%); }
.dq-match-radar { position:relative; z-index:1; width:190px; height:190px; margin-bottom:1.45rem; border:1px solid rgba(115,235,255,.46); border-radius:50%; background:radial-gradient(circle,rgba(75,222,255,.18) 0 2%,transparent 2.5% 100%); box-shadow:0 0 0 18px rgba(86,206,255,.035),0 0 55px rgba(39,197,255,.25),inset 0 0 32px rgba(29,196,255,.14); }
.dq-radar-ring { position:absolute; inset:16%; border:1px solid rgba(115,235,255,.31); border-radius:50%; }.dq-radar-ring.ring-two{inset:32%}.dq-radar-ring.ring-three{inset:0;border-color:rgba(115,235,255,.22)}
.dq-radar-sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,rgba(75,231,255,.47),rgba(75,231,255,.07) 19deg,transparent 62deg); animation:dq-radar-sweep 2.7s linear infinite; transform-origin:50% 50%; mask-image:radial-gradient(circle,transparent 0 2px,#000 3px); }
.dq-radar-sweep::after { content:""; position:absolute; top:50%; left:50%; width:49%; height:1px; transform:rotate(0deg); transform-origin:left center; background:linear-gradient(90deg,rgba(112,241,255,.85),transparent); }
.dq-match-radar span { position:absolute; z-index:2; top:50%; left:50%; display:grid; width:54px; height:54px; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(209,252,255,.6); border-radius:18px; color:#bff8ff; background:linear-gradient(145deg,rgba(78,223,255,.35),rgba(67,88,255,.33)); box-shadow:0 0 22px rgba(91,238,255,.38); }
.dq-radar-blip { position:absolute; z-index:3; width:8px; height:8px; border-radius:50%; background:#80ffbd; box-shadow:0 0 0 5px rgba(128,255,189,.11),0 0 15px #80ffbd; animation:dq-radar-blip 1.8s ease-in-out infinite; }.dq-radar-blip.blip-one{top:26%;right:22%}.dq-radar-blip.blip-two{bottom:23%;left:19%;animation-delay:.72s}
.dq-radar-copy,.dq-radar-meta { position:relative; z-index:1; }.dq-radar-copy>span{display:inline-flex;align-items:center;gap:.42rem;color:#9ecae4;font-size:.64rem;font-weight:800}.dq-radar-copy>span i{width:7px;height:7px;border-radius:50%;background:#54f0ac;box-shadow:0 0 0 5px rgba(84,240,172,.12)}.dq-radar-copy h2{margin:.65rem 0 .35rem;color:#fff;font-size:clamp(1.45rem,4vw,2.1rem);font-weight:950}.dq-radar-copy p{margin:0;color:#afc2d7;font-size:.78rem}.dq-radar-meta{display:flex;gap:.85rem;align-items:center;justify-content:center;margin-top:1.65rem;padding:.55rem .8rem;border:1px solid rgba(167,231,255,.14);border-radius:13px;background:rgba(255,255,255,.05);color:#b4c7dd;font-size:.58rem}.dq-radar-meta span{color:#74eaff;font-weight:850}.dq-radar-meta svg{vertical-align:middle}
@keyframes dq-radar-sweep { to { transform:rotate(360deg); } } @keyframes dq-radar-blip { 0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)} }

/* Event carousel: prominent uploaded banners, with explicit manual controls. */
.dq-event-featured { min-height:235px; transition:opacity .28s ease,background-image .28s ease; }.dq-event-controls{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:.6rem;margin:-.2rem 0 .75rem}.dq-event-controls button{display:grid;width:30px;height:30px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;color:#dff8ff;background:rgba(255,255,255,.08)}.dq-event-controls button[data-event-next]{transform:rotate(180deg)}.dq-event-controls button:hover{background:rgba(83,224,255,.22)}.dq-event-dots{display:flex;gap:.35rem}.dq-event-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(206,230,248,.32);transition:all .2s ease}.dq-event-dot.is-current{width:21px;border-radius:8px;background:#74eaff;box-shadow:0 0 12px rgba(116,234,255,.55)}
@media (max-width:760px){.dq-match-radar-state{min-height:390px;border-radius:22px}.dq-match-radar{width:164px;height:164px}.dq-radar-meta{flex-direction:column;gap:.25rem}.dq-event-featured{min-height:210px}.dq-event-rail{display:none!important}.dq-event-controls{margin-top:.6rem}}
@media (max-width:640px){.dq-quiz-topic-fields{grid-template-columns:1fr!important}}
.dq-duel-flow { display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:1.05rem 1.2rem; }
.dq-duel-flow>div { position:relative;display:grid;grid-template-columns:34px 26px minmax(0,1fr);align-items:center;gap:.45rem;padding:.75rem; }
.dq-duel-flow>div+div { border-right:1px solid #e8edf5; }.dq-duel-flow>div>span{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;color:#52637c;background:#f0f4fa;font-size:.59rem;font-weight:900}.dq-duel-flow svg{color:#5869ea}.dq-duel-flow b,.dq-duel-flow small{grid-column:3}.dq-duel-flow b{align-self:end;color:#1a2740;font-size:.65rem}.dq-duel-flow small{align-self:start;color:#8792a5;font-size:.5rem;line-height:1.55}

/* Five-round topic chooser. */
.dq-topic-select { overflow:hidden;padding:1.25rem!important;border-radius:28px!important; }
.dq-round-track { display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin-bottom:1.25rem;direction:rtl; }
.dq-round-track span { position:relative;display:flex;min-width:0;align-items:center;gap:.38rem;padding:.45rem;border:1px solid #e6ebf3;border-radius:13px;color:#8792a5;background:#f8fafc; }
.dq-round-track b { display:grid;flex:0 0 25px;width:25px;height:25px;place-items:center;border-radius:8px;color:#728098;background:#e9eef5;font-size:.57rem; }.dq-round-track small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.5rem;font-weight:750}.dq-round-track .is-done{border-color:#c9f0e1;color:#20765d;background:#eefbf6}.dq-round-track .is-done b{color:#087453;background:#c9f0e1}.dq-round-track .is-current{border-color:#bfc8ff;color:#3543b9;background:#f0f1ff;box-shadow:0 10px 22px -17px #5966ff}.dq-round-track .is-current b{color:#fff;background:#5966e9}
.dq-topic-select-head { max-width:650px;margin:0 auto 1.1rem;text-align:center; }.dq-topic-select-badge{display:inline-flex;padding:.28rem .55rem;border-radius:8px;color:#4f55cc;background:#ebecff;font-size:.55rem;font-weight:900}.dq-topic-select-head h2{margin:.5rem 0 .25rem;color:#142038;font-size:1.35rem;font-weight:950}.dq-topic-select-head p{margin:0;color:#7c889c;font-size:.66rem;line-height:1.9}
.dq-topic-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem; }
.dq-topic-card { --topic:#5d62e8;position:relative;display:flex;min-width:0;min-height:154px;flex-direction:column;align-items:flex-start;justify-content:space-between;overflow:hidden;padding:.8rem;border:1px solid color-mix(in srgb,var(--topic) 22%,#e7ebf3);border-radius:20px;text-align:right;color:#16223a;background:linear-gradient(155deg,color-mix(in srgb,var(--topic) 9%,#fff),#fff 62%);font-family:inherit;cursor:pointer;box-shadow:0 17px 28px -25px color-mix(in srgb,var(--topic) 58%,transparent);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.dq-topic-card::after { content:"";position:absolute;width:90px;height:90px;left:-45px;bottom:-48px;border:13px solid color-mix(in srgb,var(--topic) 10%,transparent);border-radius:50%; }.dq-topic-card.tone-2{--topic:#0ea5a5}.dq-topic-card.tone-3{--topic:#e28b24}.dq-topic-card.tone-4{--topic:#e34c86}.dq-topic-card.tone-5{--topic:#286ee8}.dq-topic-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--topic) 50%,#fff);box-shadow:0 24px 38px -27px var(--topic)}.dq-topic-card:disabled{cursor:default}.dq-topic-card-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:var(--topic);background:color-mix(in srgb,var(--topic) 12%,#fff)}.dq-topic-card>span:nth-child(2){display:flex;min-width:0;flex-direction:column}.dq-topic-card small{color:#929caf;font-size:.48rem;font-weight:750}.dq-topic-card strong{overflow:hidden;margin:.15rem 0;color:#1b2840;font-size:.72rem;font-weight:950;white-space:nowrap;text-overflow:ellipsis}.dq-topic-card em{color:var(--topic);font-size:.5rem;font-style:normal;font-weight:850}.dq-topic-card>i{position:absolute;left:.7rem;top:.75rem;color:var(--topic);opacity:.72}.dq-topic-card.is-loading{opacity:.7;animation:dq-topic-pulse .8s ease infinite alternate}@keyframes dq-topic-pulse{to{filter:brightness(.93);transform:scale(.985)}}
.dq-topic-wait { display:flex;align-items:center;justify-content:center;gap:.65rem;margin:1.15rem auto 0;color:#637087;font-size:.64rem; }.dq-topic-wait .dq-spinner{width:22px;height:22px}.dq-topic-msg{text-align:center}

/* 3.41 — every province remains discoverable, even without live activity. */
.dq-province-directory { margin-top:.85rem;padding:.8rem;border:1px solid rgba(142,173,211,.26);border-radius:18px;background:linear-gradient(145deg,rgba(17,44,76,.88),rgba(11,29,54,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.dq-province-directory-head { display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;margin:0 .15rem .65rem;color:#f2f7ff; }
.dq-province-directory-head strong { font-size:.72rem;font-weight:900; }.dq-province-directory-head small{color:#9eb2ce;font-size:.52rem;font-weight:700}
.dq-province-directory-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.38rem; }
.dq-province-chip { display:flex;min-width:0;align-items:center;gap:.32rem;padding:.42rem .45rem;border:1px solid rgba(171,195,226,.15);border-radius:9px;color:#cbd9ed;background:rgba(255,255,255,.035);font:700 .54rem var(--font-sans);text-align:right;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.dq-province-chip i { flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#5f789d;box-shadow:0 0 0 3px rgba(95,120,157,.12); }.dq-province-chip span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dq-province-chip:hover,.dq-province-chip:focus-visible{color:#fff;border-color:rgba(110,229,211,.58);background:rgba(44,192,177,.15);transform:translateY(-1px);outline:0}.dq-province-chip.is-active{color:#fff;border-color:#ffd166;background:linear-gradient(135deg,rgba(255,209,102,.22),rgba(55,194,179,.16))}.dq-province-chip.is-active i{background:#ffd166;box-shadow:0 0 0 3px rgba(255,209,102,.16),0 0 12px rgba(255,209,102,.7)}

@media (max-width:700px) { .dq-province-directory { padding:.65rem;border-radius:15px; }.dq-province-directory-head{align-items:flex-start;flex-direction:column;gap:.15rem;margin-bottom:.5rem}.dq-province-directory-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}.dq-province-chip{padding:.4rem;font-size:.51rem} }
@media (max-width:390px) { .dq-province-directory-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.dq-round-summary { display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin-bottom:.65rem;padding:.55rem .75rem;border:1px solid #dce4f0;border-radius:14px;color:#6d7890;background:#f8faff;font-size:.58rem;font-weight:750; }.dq-round-summary strong{overflow:hidden;padding:.3rem .55rem;border-radius:9px;color:#414bd0;background:#e9ebff;font-size:.65rem;white-space:nowrap;text-overflow:ellipsis}.dq-round-summary b{color:#17223a;font-size:.72rem}.dq-match-question-card{border-radius:27px!important}.dq-match-progress{height:5px;margin:.65rem 0;border-radius:99px;background:#e9eef5;overflow:hidden}.dq-match-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5e63e8,#2bbbe2);transition:width .3s ease}

@media (max-width:900px) {
  .dq-random-battle-card { grid-template-columns:92px minmax(0,1fr); }
  .dq-random-battle-mark { width:82px;height:112px; }
  .dq-random-battle-action { grid-column:1 / -1;min-height:74px; }
  .dq-topic-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dq-topic-card:nth-child(4),.dq-topic-card:nth-child(5){min-height:130px}
}
@media (max-width:640px) {
  .dq-random-battle-card { display:flex;min-height:0;flex-direction:column;align-items:stretch;padding:1rem;border-radius:24px; }
  .dq-random-battle-mark { width:64px;height:64px;align-self:flex-start;border-radius:18px; }.dq-random-battle-mark small{top:6px;right:6px}.dq-random-battle-mark::after{display:none}
  .dq-random-battle-copy h2 { font-size:1.28rem;line-height:1.55; }.dq-random-battle-copy p{font-size:.65rem}.dq-random-battle-specs{gap:.32rem}.dq-random-battle-specs span{font-size:.51rem}
  .dq-random-battle-action { min-height:72px;border-radius:18px; }
  .dq-duel-lobby { border-radius:25px!important; }.dq-duel-hero{padding:1.5rem .8rem 1.1rem}.dq-duel-hero h1{font-size:1.42rem}.dq-duel-hero>p{font-size:.64rem}.dq-duel-rules{margin:.9rem 0;border-radius:15px}.dq-duel-rules span{flex-direction:column;gap:.06rem;padding:.5rem .25rem}.dq-duel-rules span+span{border-right:1px solid rgba(255,255,255,.09)}.dq-duel-rules small{font-size:.48rem}.dq-duel-actions{grid-template-columns:1fr}.dq-duel-secondary{min-height:52px}.dq-duel-flow{grid-template-columns:1fr;padding:.6rem}.dq-duel-flow>div+div{border-right:0;border-top:1px solid #edf1f6}
  .dq-round-track { gap:.22rem;margin-bottom:.9rem }.dq-round-track span{justify-content:center;padding:.3rem}.dq-round-track b{flex-basis:27px;width:27px;height:27px}.dq-round-track small{display:none}
  .dq-topic-select { padding:.75rem!important;border-radius:21px!important }.dq-topic-select-head h2{font-size:1.08rem}.dq-topic-select-head p{font-size:.6rem}
  .dq-topic-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:.48rem }.dq-topic-card{min-height:128px;padding:.65rem;border-radius:17px}.dq-topic-card:last-child{grid-column:1/-1;min-height:104px}.dq-topic-card strong{font-size:.66rem}.dq-topic-card-icon{width:34px;height:34px;border-radius:10px}
  .dq-round-summary { font-size:.5rem }.dq-round-summary strong{max-width:42%;font-size:.58rem}
}

/* =========================================================================
   No blue tap / focus highlight anywhere on the site (owner request, 3.68).
   ========================================================================= */
html, body, *, *::before, *::after { -webkit-tap-highlight-color: transparent; }
a:focus, a:focus-visible, button:focus, button:focus-visible,
[role="button"]:focus, [role="button"]:focus-visible, summary:focus, summary:focus-visible,
input[type="button"]:focus, input[type="submit"]:focus, [tabindex]:focus, [tabindex]:focus-visible,
.dq-btn:focus-visible, .dq-icon-btn:focus-visible, .dq-nav a:focus-visible, .dq-panel-menu a:focus-visible,
a.dq-logo:focus-visible, .dq-launch-mode:focus-visible, .dq-iran-province:focus-visible, .dq-ranking-row:focus-visible {
	outline: none !important;
	box-shadow: none;
}