/* ============================================================
   SIMPLE TYPING – PROFESSIONAL MASTER STYLESHEET v3.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand / Accent  (default = arcade teal) */
  --p:      #14b8a6;
  --p-d:    #0f766e;
  --p-l:    #2dd4bf;
  --p-rgb:  20,184,166;

  /* Secondary accent */
  --acc:    #38bdf8;
  --acc2:   #a3e635;

  /* Backgrounds */
  --bg:     #0f1419;
  --bg2:    #1a202c;
  --bg3:    #2d3748;
  --bg4:    #4a5568;
  --card:   #1a202c;

  /* Borders */
  --bdr:    rgba(255,255,255,.07);
  --bdr2:   rgba(255,255,255,.12);

  /* Text */
  --txt:    #e8ecf4;
  --txt2:   #8b95a8;
  --txt3:   #56647a;
  --white:  #ffffff;

  /* Status */
  --ok:     #34d399;
  --err:    #f87171;
  --warn:   #fbbf24;

  /* Fonts */
  --fh: 'Inter', sans-serif;
  --fb: 'Inter', sans-serif;
  --fm: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Noto Sans', sans-serif;

  /* Radii */
  --r:  16px;
  --r2: 10px;
  --r3: 8px;

  /* Shadows */
  --sh:   0 4px 24px rgba(0,0,0,.45);
  --sh2:  0 1px 4px rgba(0,0,0,.3);
  --glow: 0 0 30px rgba(var(--p-rgb),.25);

  /* Transition */
  --tr: all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Accent Overrides ───────────────────────────────────── */
html[data-accent="gray"]   {--p:#14b8a6;--p-d:#0f766e;--p-l:#2dd4bf;--p-rgb:20,184,166;--acc:#38bdf8;--acc2:#a3e635}
html[data-accent="orange"] {--p:#f97316;--p-d:#ea580c;--p-l:#fb923c;--p-rgb:249,115,22;--acc:#22d3ee}
html[data-accent="green"]  {--p:#22c55e;--p-d:#15803d;--p-l:#86efac;--p-rgb:34,197,94;--acc:#38bdf8}
html[data-accent="blue"]   {--p:#38bdf8;--p-d:#0284c7;--p-l:#7dd3fc;--p-rgb:56,189,248;--acc:#22c55e}
html[data-accent="red"]    {--p:#ef4444;--p-d:#dc2626;--p-l:#f87171;--p-rgb:239,68,68;--acc:#f59e0b}
html[data-accent="violet"] {--p:#8b5cf6;--p-d:#7c3aed;--p-l:#a78bfa;--p-rgb:139,92,246;--acc:#22c55e}
html[data-accent="yellow"] {--p:#eab308;--p-d:#ca8a04;--p-l:#facc15;--p-rgb:234,179,8;--acc:#06b6d4}
html[data-accent="cyan"]   {--p:#06b6d4;--p-d:#0891b2;--p-l:#22d3ee;--p-rgb:6,182,212;--acc:#84cc16}
html[data-accent="lime"]   {--p:#84cc16;--p-d:#65a30d;--p-l:#bef264;--p-rgb:132,204,22;--acc:#f59e0b}
html[data-accent="amber"]  {--p:#f59e0b;--p-d:#d97706;--p-l:#fbbf24;--p-rgb:245,158,11;--acc:#ec4899}
html[data-accent="pink"]   {--p:#ec4899;--p-d:#db2777;--p-l:#f9a8d4;--p-rgb:236,72,153;--acc:#64748b}
html[data-accent="slate"]  {--p:#64748b;--p-d:#475569;--p-l:#94a3b8;--p-rgb:100,116,139;--acc:#7c2d12}
html[data-accent="brown"]  {--p:#7c2d12;--p-d:#5b1f0d;--p-l:#a16207;--p-rgb:124,45,18;--acc:#1e293b}
html[data-accent="dark"]   {--p:#1e293b;--p-d:#0f172a;--p-l:#334155;--p-rgb:30,41,59;--acc:#0f172a}
html[data-accent="darker"] {--p:#0f172a;--p-d:#020617;--p-l:#1e293b;--p-rgb:15,23,42;--acc:#334155}
html[data-accent="neutral"] {--p:#737373;--p-d:#525252;--p-l:#a3a3a3;--p-rgb:115,115,115;--acc:#475569}
html[data-accent="stone"]  {--p:#78716c;--p-d:#57534e;--p-l:#a8a29e;--p-rgb:120,113,108;--acc:#581c87}
html[data-accent="purple"] {--p:#9333ea;--p-d:#7c2d12;--p-l:#c084fc;--p-rgb:147,51,234;--acc:#be123c}
html[data-accent="rose"]   {--p:#be123c;--p-d:#9f1239;--p-l:#fb7185;--p-rgb:190,18,60;--acc:#0d9488}
html[data-accent="teal"]   {--p:#0d9488;--p-d:#0f766e;--p-l:#14b8a6;--p-rgb:13,148,136;--acc:#14b8a6}

/* ── Font Override ──────────────────────────────────────── */
html[data-font="default"] {--fm:'Noto Sans',sans-serif}
html[data-font="noto"] {--fm:'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Noto Sans', sans-serif}

/* ── Light Theme ────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:    #f8fafc;
  --bg2:   #ffffff;
  --bg3:   #f1f5f9;
  --bg4:   #e2e8f0;
  --card:  #ffffff;
  --bdr:   rgba(15,23,42,.08);
  --bdr2:  rgba(15,23,42,.14);
  --txt:   #1e293b;
  --txt2:  #475569;
  --txt3:  #64748b;
  --white: #1e293b;
  --sh:    0 4px 24px rgba(15,23,42,.08);
}

/* ── Light Theme Body ───────────────────────────────────── */
html[data-theme="light"] body {
  background: 
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.02) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg) 0%, #ffffff 50%, var(--bg) 100%);
}

/* ── Reset ──────────────────────────────────────────────── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);
  background: 
    radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(168, 85, 247, 0.03) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg) 0%, #1e2530 50%, var(--bg) 100%);
  color:var(--txt);
  line-height:1.7;
  font-size:1.05rem;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}
main{flex:1}
a{color:var(--p);text-decoration:none;transition:var(--tr)}
a:hover{color:var(--p-l)}
img{max-width:100%;display:block}
ul{list-style:none}
input,textarea,select,button{font-family:inherit;outline:none}
button{cursor:pointer}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--p);border-radius:4px}

/* ── Selection ──────────────────────────────────────────── */
::selection{background:rgba(var(--p-rgb),.3);color:var(--white)}

/* ============================================================
   LAYOUT
   ============================================================ */
.container   {max-width:1240px;margin:0 auto;padding:0 24px}
.container-sm{max-width:860px; margin:0 auto;padding:0 24px}
.container-xs{max-width:520px; margin:0 auto;padding:0 24px}
.container-xl{max-width:1360px;margin:0 auto;padding:0 24px}

/* ── Grid ───────────────────────────────────────────────── */
.g  {display:grid;gap:20px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g-5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* ============================================================
   HEADER  — Professional Minimal
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(13,15,20,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="light"] .site-header{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(15,23,42,.08),0 2px 12px rgba(15,23,42,.06);
}

.hdr-inner{
  max-width:1240px;margin:0 auto;
  height:64px;display:flex;align-items:center;gap:12px;
  padding:0 24px;
}

/* Logo */
.logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fh);font-weight:700;font-size:1.2rem;
  color:var(--txt);letter-spacing:-.4px;flex-shrink:0;
  transition:opacity .2s;
}
.logo:hover{color:var(--txt);opacity:.85}
.logo-svg{
  width:36px;height:36px;flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(var(--p-rgb),.35));
}
.logo-text strong{color:var(--txt);font-weight:800}
.logo-text em{color:var(--p);font-style:normal;font-weight:700}

/* Nav */
.hdr-nav{
  display:flex;align-items:center;gap:1px;
  flex:1;padding:0 16px;
  overflow:hidden;
}
.hdr-nav a{
  position:relative;
  color:var(--txt2);
  padding:7px 12px;
  border-radius:var(--r3);
  font-size:.92rem;font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:color .15s,background .15s;
}
.hdr-nav a:hover{
  color:var(--txt);
  background:rgba(255,255,255,.06);
}
html[data-theme="light"] .hdr-nav a:hover{background:rgba(15,23,42,.06)}
.hdr-nav a.on{
  color:var(--txt);
  font-weight:600;
  background:transparent;
}
.hdr-nav a.on::after{
  content:'';
  position:absolute;bottom:-1px;left:12px;right:12px;
  height:2px;
  background:var(--p);
  border-radius:2px 2px 0 0;
}

/* Right side buttons */
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{
  width:36px;height:36px;
  border-radius:var(--r3);
  background:transparent;
  border:1px solid var(--bdr);
  color:var(--txt2);
  font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);cursor:pointer;
}
.icon-btn:hover{border-color:var(--bdr2);color:var(--txt);background:rgba(255,255,255,.06)}
.settings-btn{border-color:var(--bdr)}

/* Hamburger */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;padding:6px;background:none;border:none;width:36px;height:36px}
.burger span{width:20px;height:2px;background:var(--txt2);border-radius:2px;transition:var(--tr);display:block}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ── Mobile Nav ─────────────────────────────────────────── */
.mob-nav{
  display:none;position:fixed;inset:0;z-index:998;
  background:var(--bg);
  flex-direction:column;
  padding:72px 20px 28px;
  overflow-y:auto;
  border-right:none;
}
.mob-nav.open{display:flex}
.mob-nav a{
  display:flex;align-items:center;gap:12px;
  color:var(--txt);
  padding:13px 4px;
  border-bottom:1px solid var(--bdr);
  font-size:.98rem;font-family:var(--fh);font-weight:500;
}
.mob-nav a:first-of-type{border-top:1px solid var(--bdr)}
.mob-nav a:last-child{border-bottom:none}
.mob-nav a:hover{color:var(--p)}
.mob-close{
  position:fixed;top:16px;right:20px;
  background:var(--bg3);border:1px solid var(--bdr);
  color:var(--txt2);width:36px;height:36px;border-radius:var(--r3);
  font-size:1rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:999;transition:var(--tr);
}
.mob-close:hover{background:var(--bg4);color:var(--txt)}

/* ── Settings Drawer ────────────────────────────────────── */
.settings-btn{border:1px solid var(--bdr)}
.settings-drawer{
  position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
  display:none;padding:20px;
  justify-content:flex-end;
  align-items:flex-start;
}
.settings-drawer.open{display:flex}
.settings-card{
  width:min(100%,320px);
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--sh);
  display:grid;gap:20px;
  margin-top:72px;
}
.settings-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.settings-head strong{display:block;font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--txt)}
.settings-head span{display:block;color:var(--txt2);font-size:.82rem;margin-top:3px;line-height:1.5}
.settings-group{display:grid;gap:10px}
.settings-label{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt3)}
.settings-options{display:flex;gap:8px;flex-wrap:wrap}
.settings-pill{
  background:var(--bg3);border:1px solid var(--bdr);
  color:var(--txt2);padding:8px 16px;border-radius:999px;
  font-size:.82rem;font-weight:600;transition:var(--tr);
}
.settings-pill:hover{border-color:var(--bdr2);color:var(--txt)}
.settings-pill.on{
  background:rgba(var(--p-rgb),.14);
  border-color:rgba(var(--p-rgb),.4);
  color:var(--txt);
}
.accent-picker{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.accent-picker button{
  width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  background:var(--sw);padding:0;transition:var(--tr);
}
.accent-picker button:hover{transform:scale(1.18);border-color:rgba(255,255,255,.5)}
.accent-picker button.on{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.15),0 0 0 5px var(--sw);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:var(--r3);
  font-size:.875rem;font-weight:600;
  transition:var(--tr);border:none;cursor:pointer;
  letter-spacing:.01em;
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--bdr2);
  color:var(--txt2);
}
.btn-ghost:hover{border-color:var(--p);color:var(--p);background:rgba(var(--p-rgb),.06)}
.btn-pri{
  background:var(--p);
  color:#fff;
  box-shadow:0 2px 12px rgba(var(--p-rgb),.3);
}
.btn-pri:hover{background:var(--p-d);transform:translateY(-1px);box-shadow:0 4px 18px rgba(var(--p-rgb),.4)}
.btn-sm{padding:6px 14px;font-size:.8rem;border-radius:7px}
.btn-lg{padding:11px 26px;font-size:.95rem;border-radius:var(--r2)}
.btn-acc{
  background:var(--acc);color:#fff;
  box-shadow:0 2px 12px rgba(129,140,248,.3);
}
.btn-acc:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-full{
  width:100%;padding:13px;background:var(--p);color:#fff;
  border:none;border-radius:var(--r2);font-size:.95rem;font-weight:700;
  cursor:pointer;transition:var(--tr);letter-spacing:.02em;
}
.btn-full:hover{background:var(--p-d);transform:translateY(-1px)}
.contact-submit-btn{
  justify-self:start;
  width:auto;
  min-width:148px;
  padding:8px 18px;
  justify-content:center;
}

/* ============================================================
   HERO  — Professional
   ============================================================ */
.hero{
  padding:90px 24px 72px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--p-rgb),.12) 0%, transparent 60%),
    var(--bg);
  text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--p-rgb),.4),transparent);
}
.hero-content{position:relative;z-index:1;animation:fadeLift .7s ease}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(var(--p-rgb),.1);
  border:1px solid rgba(var(--p-rgb),.22);
  color:var(--p);padding:5px 16px;border-radius:50px;
  font-size:.78rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  margin-bottom:20px;
}
.hero h1{
  font-family:var(--fh);
  font-size:clamp(2rem,5.5vw,3.8rem);
  font-weight:800;line-height:1.1;
  color:var(--white);
  margin-bottom:18px;letter-spacing:-1.5px;
}
.hero h1 .hl{
  background:linear-gradient(135deg,var(--p),var(--p-l));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero p{font-size:1.15rem;color:var(--txt2);max-width:580px;margin:0 auto 32px;line-height:1.85}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;
  border:1px solid var(--bdr);border-radius:var(--r2);overflow:hidden;
  max-width:720px;margin:0 auto;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(10px);
}
.hero-stat{
  padding:18px 28px;text-align:center;flex:1;min-width:120px;
  border-right:1px solid var(--bdr);
}
.hero-stat:last-child{border-right:none}
.hero-stat strong{
  display:block;font-family:var(--fh);
  font-size:1.6rem;font-weight:800;color:var(--p);
}
.hero-stat span{font-size:.73rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.8px;margin-top:2px;display:block}
.hero-note{margin-top:16px;color:var(--txt3);font-size:.82rem}

/* ============================================================
   SECTION
   ============================================================ */
.sec{padding:72px 0}
.sec-alt{background:var(--bg2)}
.sec-head{text-align:center;margin-bottom:48px}
.sec-tag{
  display:inline-block;color:var(--p);
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;margin-bottom:10px;
}
.sec-head h2{
  font-family:var(--fh);font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:800;color:var(--white);letter-spacing:-.5px;margin-bottom:10px;
}
.sec-head p{color:var(--txt2);font-size:.95rem;max-width:520px;margin:0 auto}

/* ── Card ───────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--r);padding:24px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover{
  border-color:rgba(var(--p-rgb),.3);
  transform:translateY(-3px);
  box-shadow:var(--sh);
}
.card-ico{
  width:44px;height:44px;border-radius:10px;
  background:rgba(var(--p-rgb),.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;margin-bottom:14px;
}
.card h3{font-family:var(--fh);font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:8px}
.card p{color:var(--txt2);font-size:.96rem;line-height:1.75}

/* ── Exam Card ──────────────────────────────────────────── */
.exam-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:20px;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden;
}
.exam-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--p-color,var(--p));opacity:.8;
}
.exam-card:hover{
  border-color:rgba(var(--p-rgb),.35);
  transform:translateY(-3px);box-shadow:var(--sh);
}
.exam-card-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.exam-ico{font-size:1.7rem;line-height:1;flex-shrink:0;margin-top:2px}
.exam-card h3{font-family:var(--fh);font-size:.95rem;font-weight:700;color:var(--white);margin-bottom:2px}
.exam-meta{font-size:.73rem;color:var(--txt2)}
.exam-stats{display:flex;gap:8px;flex-wrap:wrap}
.exam-stat-pill{
  background:var(--bg3);border:1px solid var(--bdr);
  border-radius:50px;padding:3px 9px;
  font-size:.7rem;color:var(--txt2);
}

/* ── Exams Listing Page ─────────────────────────────────── */
.exams-hero{
  background:
    linear-gradient(135deg,rgba(var(--p-rgb),.16),transparent 36%),
    linear-gradient(0deg,rgba(56,189,248,.08),transparent 44%),
    var(--bg2);
  border-bottom:1px solid var(--bdr);
  padding:46px 0 24px;
}
.exams-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;
  align-items:end;margin-bottom:22px;
}
.exams-hero h1{
  font-family:var(--fh);font-size:clamp(2rem,5vw,3.6rem);
  line-height:1.05;font-weight:800;color:var(--white);
  max-width:860px;margin:0 0 14px;letter-spacing:0;
}
.exams-hero p{
  color:var(--txt2);font-size:1rem;max-width:690px;margin-bottom:22px;
}
.exams-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.exams-hero-panel{
  background:rgba(255,255,255,.035);border:1px solid var(--bdr);
  border-radius:var(--r3);padding:20px;display:grid;gap:8px;
}
.exams-hero-panel strong{
  font-family:var(--fh);font-size:2.3rem;line-height:1;color:var(--white);
}
.exams-hero-panel span{font-size:.92rem;color:var(--txt2);line-height:1.55}
.exam-login-note{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  background:rgba(var(--p-rgb),.08);border:1px solid rgba(var(--p-rgb),.24);
  border-radius:var(--r3);padding:16px 18px;margin-bottom:30px;
}
.exam-login-note strong{color:var(--white)}
.exam-login-note span{color:var(--txt2);font-size:.92rem;flex:1}
.exam-category-stack{display:grid;gap:40px}
.exam-category-head{
  display:flex;align-items:end;justify-content:space-between;gap:16px;
  margin-bottom:16px;border-bottom:1px solid var(--bdr);padding-bottom:12px;
}
.exam-category-head span{
  color:var(--p);font-size:.75rem;text-transform:uppercase;
  letter-spacing:1.5px;font-weight:800;
}
.exam-category-head h2{
  font-family:var(--fh);font-size:1.35rem;color:var(--white);
  letter-spacing:0;
}
.exam-list-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
}
.exam-list-card{
  --exam-color:var(--p);
  position:relative;display:grid;gap:14px;min-height:232px;
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r3);
  color:inherit;padding:20px;overflow:hidden;transition:var(--tr);
}
.exam-list-card:hover{
  color:inherit;border-color:color-mix(in srgb,var(--exam-color) 45%,transparent);
  transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.22);
}
.exam-list-accent{
  position:absolute;inset:0 auto 0 0;width:4px;background:var(--exam-color);
}
.exam-list-top{display:flex;gap:12px;align-items:flex-start}
.exam-list-icon{
  width:48px;height:48px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--exam-color) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--exam-color) 34%,transparent);
  color:var(--white);font-size:.82rem;font-weight:800;font-family:var(--fh);
}
.exam-list-card h3{
  font-family:var(--fh);font-size:1.05rem;line-height:1.3;color:var(--white);
  margin:1px 0 4px;letter-spacing:0;
}
.exam-list-card .exam-list-top p{
  margin:0;color:var(--txt3);font-size:.76rem;text-transform:uppercase;
  letter-spacing:1px;font-weight:700;
}
.exam-list-desc{
  color:var(--txt2);font-size:.9rem;line-height:1.65;margin:0;
}
.exam-list-card .exam-stats{margin-top:auto}
.exam-table-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r3);
  overflow:auto;
}
.exam-table-card table{width:100%;border-collapse:collapse;min-width:620px}
.exam-table-card th{
  background:var(--bg3);color:var(--txt2);font-size:.78rem;text-align:left;
  padding:13px 16px;border-bottom:1px solid var(--bdr);text-transform:uppercase;
  letter-spacing:1px;
}
.exam-table-card td{
  padding:14px 16px;border-bottom:1px solid var(--bdr);color:var(--txt);
  font-size:.9rem;
}
.exam-table-card td:not(:first-child){text-align:center;font-weight:700}
.exam-table-card td strong{display:block;color:var(--white);line-height:1.25}
.exam-table-card td span{display:block;color:var(--txt3);font-size:.75rem;margin-top:3px}

/* ============================================================
   PAGE BANNER
   ============================================================ */
.page-banner{
  background:var(--bg2);border-bottom:1px solid var(--bdr);padding:32px 0;
}
.page-banner h1{
  font-family:var(--fh);font-size:clamp(1.3rem,2.5vw,1.8rem);
  font-weight:800;color:var(--white);margin-bottom:6px;letter-spacing:-.4px;
}
.breadcrumb{display:flex;gap:6px;align-items:center;color:var(--txt2);font-size:.8rem;flex-wrap:wrap}
.breadcrumb a{color:var(--txt2)}
.breadcrumb a:hover{color:var(--p)}
.breadcrumb .sep{color:var(--txt3)}

/* ============================================================
   TYPING ENGINE
   ============================================================ */
.typing-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at top left,rgba(var(--p-rgb),.11),transparent 32%),radial-gradient(circle at top right,rgba(56,189,248,.1),transparent 28%),var(--bg)}
.typing-page.fullscreen-mode{position:fixed;inset:0;z-index:1000;overflow:hidden}

.tp-topbar{
  background:var(--bg2);border-bottom:1px solid var(--bdr);
  padding:0 20px;height:54px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-shrink:0;
}
.tp-exam-title{font-family:var(--fh);font-size:.95rem;font-weight:700;color:var(--white)}
.tp-exam-sub{font-size:.72rem;color:var(--txt2)}
.tp-actions{display:flex;align-items:center;gap:8px}

.tp-ribbon{
  background:linear-gradient(180deg,rgba(19,23,32,.96),rgba(10,15,26,.96));border-bottom:1px solid var(--bdr);
  padding:10px 20px;display:grid;grid-template-columns:repeat(5,minmax(64px,max-content)) minmax(120px,1fr);align-items:center;gap:14px;flex-shrink:0;
}
.tp-stat{display:flex;flex-direction:column;align-items:center;min-width:68px}
.tp-stat .v{font-family:var(--fm);font-size:1.7rem;font-weight:700;color:var(--p);line-height:1}
.tp-stat .l{font-size:.62rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-top:3px}
.tp-timer-bar{height:5px;background:var(--bg4);border-radius:999px;overflow:hidden;min-width:100px}
.tp-timer-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--acc));border-radius:2px;transition:width .5s linear}
.tp-timer-fill.danger{background:linear-gradient(90deg,var(--err),#ff6b6b)}

.tp-modes{
  background:var(--bg2);border-bottom:1px solid var(--bdr);
  padding:10px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;
}
.mode-tabs,.time-tabs{display:flex;gap:3px;background:var(--bg3);border-radius:8px;padding:3px}
.mode-tab,.time-tab{
  padding:5px 13px;border-radius:6px;font-size:.8rem;font-weight:600;
  color:var(--txt2);cursor:pointer;transition:var(--tr);border:none;background:none;
}
.mode-tab.on,.time-tab.on{background:var(--p);color:#fff}
.lang-tabs{display:flex;gap:3px;background:var(--bg3);border-radius:8px;padding:3px;margin-left:auto}
.lang-tab{padding:5px 11px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--txt2);cursor:pointer;transition:var(--tr);border:none;background:none}
.lang-tab.on{background:var(--acc);color:#fff}
.sep-dot{color:var(--txt3);font-size:1.2rem}

.tp-chapters{
  background:var(--bg2);border-bottom:1px solid var(--bdr);
  padding:10px 20px;display:flex;align-items:center;gap:8px;overflow-x:auto;flex-shrink:0;
}
.tp-chapters::-webkit-scrollbar{height:2px}
.ch-pill{
  padding:5px 13px;border-radius:50px;font-size:.78rem;font-weight:600;
  border:1px solid var(--bdr);background:var(--bg3);color:var(--txt2);
  cursor:pointer;transition:var(--tr);white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:5px;
}
.ch-pill:hover{border-color:var(--p);color:var(--p)}
.ch-pill.on{background:var(--p);border-color:var(--p);color:#fff}
.ch-pill.done{border-color:var(--ok);color:var(--ok);background:rgba(52,211,153,.08)}
.ch-pill .ck{font-size:.82rem}

.tp-main{flex:1;padding:20px;display:flex;gap:20px;overflow:hidden}
.tp-center{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.tp-sidebar-ad{width:300px;flex-shrink:0}

.text-display{
  background:var(--bg2);border:1.5px solid var(--bdr);border-radius:var(--r);
  padding:24px 28px;cursor:text;transition:border-color .2s;position:relative;
  min-height:180px;max-height:280px;overflow:auto;
  overscroll-behavior:contain;
}
.text-display.active{border-color:rgba(var(--p-rgb),.5);box-shadow:0 0 0 3px rgba(var(--p-rgb),.08)}
.text-display.inactive::after{
  content:'Click here or press any key to start';
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--txt2);font-size:.9rem;background:rgba(13,15,20,.75);border-radius:15px;pointer-events:none;
}
.word-display{font-family:var(--fm);font-size:1.15rem;line-height:2.1;letter-spacing:.4px;user-select:none}
.word-display .c{transition:color .08s}
.word-display .c.ok {color:var(--ok)}
.word-display .c.bad{color:var(--err);text-decoration:underline;text-underline-offset:3px}
.word-display .c.cur{background:var(--p);color:#fff;border-radius:3px;animation:caret 1s ease-in-out infinite}
@keyframes caret{0%,100%{box-shadow:0 0 0 2px var(--p)}50%{box-shadow:0 0 0 2px transparent}}
.word-display .sp.cur{background:rgba(var(--p-rgb),.45);border-radius:2px}
.word-display .w{display:inline}
.word-display .w.w-bad .c:not(.ok){color:var(--err)}
#hidden-inp{position:fixed;opacity:0;width:1px;height:1px;left:50%;bottom:0;pointer-events:none;resize:none}

.tp-bottom{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:0 0 10px}
.tp-hint{color:var(--txt3);font-size:.78rem;text-align:center}
.tp-hint kbd{background:var(--bg4);border:1px solid var(--bdr2);border-radius:4px;padding:1px 6px;font-size:.73rem;color:var(--txt2)}

.result-overlay{
  display:none;position:absolute;inset:0;
  background:rgba(10,12,16,.97);backdrop-filter:blur(12px);
  border-radius:var(--r);z-index:50;
  align-items:center;justify-content:center;flex-direction:column;
  gap:20px;text-align:center;padding:30px;
}
.result-overlay.show{display:flex}
.result-big{font-family:var(--fh);font-size:5rem;font-weight:800;color:var(--p);line-height:1;letter-spacing:-3px}
.result-label{color:var(--txt2);font-size:.82rem;text-transform:uppercase;letter-spacing:1.5px;margin-top:-12px}
.result-grid{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.result-item strong{display:block;font-family:var(--fh);font-size:1.8rem;font-weight:800;color:var(--white)}
.result-item span{font-size:.72rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.8px}
.result-msg{font-size:.95rem;color:var(--txt);max-width:380px;line-height:1.6}
.result-msg.great{color:var(--ok)}
.result-msg.ok{color:var(--warn)}
.result-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.word-mode .word-display .w{display:inline-block;padding:0 2px;border-radius:4px;margin:1px}
.word-mode .word-display .w.w-done.w-ok{color:var(--ok)}
.word-mode .word-display .w.w-done.w-bad{color:var(--err)}
.word-mode .word-display .w.w-cur{background:rgba(var(--p-rgb),.1);border:1px solid rgba(var(--p-rgb),.3)}

/* ============================================================
   CHAPTER PROGRESS
   ============================================================ */
.ch-progress-bar{width:100%;background:var(--bg3);height:5px;border-radius:3px;overflow:hidden;margin:6px 0}
.ch-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--acc));border-radius:3px;transition:width .5s}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.lb-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--bdr)}
.lb-table th{background:var(--bg3);padding:12px 16px;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--txt2);border-bottom:1px solid var(--bdr)}
.lb-table td{padding:12px 16px;border-bottom:1px solid var(--bdr);font-size:.9rem}
.lb-table tr:last-child td{border-bottom:none}
.lb-table tr:hover td{background:rgba(var(--p-rgb),.04)}
.rank{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}
.r1{background:rgba(251,191,36,.12);color:#fbbf24}
.r2{background:rgba(203,213,225,.12);color:#cbd5e1}
.r3{background:rgba(217,119,6,.12);color:#d97706}
.rn{background:var(--bg4);color:var(--txt2)}

/* ============================================================
   FORMS & AUTH
   ============================================================ */
.auth-page{
  min-height:90vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(var(--p-rgb),.07),transparent);
}
.auth-box{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);
  padding:36px 32px;width:100%;max-width:420px;box-shadow:var(--sh);
}
.auth-box h2{font-family:var(--fh);font-size:1.6rem;font-weight:800;color:var(--white);margin-bottom:4px;letter-spacing:-.5px}
.auth-box .sub{color:var(--txt2);font-size:.87rem;margin-bottom:24px}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:.8rem;font-weight:600;color:var(--txt2);margin-bottom:7px}
.fg input,.fg textarea,.fg select{
  width:100%;background:var(--bg3);border:1.5px solid var(--bdr);
  color:var(--txt);padding:10px 14px;border-radius:var(--r3);font-size:.92rem;transition:var(--tr);
}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(var(--p-rgb),.1)}
.fg textarea{min-height:110px;resize:vertical}
.form-div{text-align:center;color:var(--txt3);font-size:.8rem;margin:14px 0;position:relative}
.form-div::before,.form-div::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--bdr)}
.form-div::before{left:0}
.form-div::after{right:0}
.form-link{text-align:center;font-size:.86rem;color:var(--txt2);margin-top:16px}
.alert{padding:10px 14px;border-radius:var(--r3);margin-bottom:14px;font-size:.86rem;display:flex;align-items:flex-start;gap:8px}
.alert-err {background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:var(--err)}
.alert-ok  {background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.25);color:var(--ok)}
.alert-warn{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.25);color:var(--warn)}
.pass-toggle{position:relative}
.pass-toggle input{padding-right:44px}
.pass-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--txt2);cursor:pointer;font-size:1rem;user-select:none}

/* ============================================================
   PROFILE
   ============================================================ */
.profile-hero{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:36px 0}
.ava{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--p),var(--acc));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:1.6rem;font-weight:800;color:#fff;flex-shrink:0;
}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.s-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;text-align:center}
.s-card .bv{font-family:var(--fm);font-size:1.9rem;font-weight:700;color:var(--p)}
.s-card .bl{font-size:.7rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:50px;font-size:.7rem;font-weight:700}
.badge-ok  {background:rgba(52,211,153,.1);color:var(--ok)}
.badge-err {background:rgba(248,113,113,.1);color:var(--err)}
.badge-warn{background:rgba(251,191,36,.1); color:var(--warn)}
.badge-p   {background:rgba(var(--p-rgb),.1);color:var(--p)}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.blog-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;transition:var(--tr)}
.blog-card:hover{border-color:rgba(var(--p-rgb),.3);transform:translateY(-3px);box-shadow:var(--sh)}
.blog-thumb{height:156px;background:linear-gradient(135deg,var(--bg3),var(--bg4));display:flex;align-items:center;justify-content:center;font-size:2.8rem;position:relative;overflow:hidden}
.blog-thumb .cat-badge{position:absolute;top:12px;left:12px;background:var(--p);color:#fff;padding:3px 10px;border-radius:50px;font-size:.68rem;font-weight:700}
.blog-body{padding:18px}
.blog-body h3{font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:7px;line-height:1.4}
.blog-body p{color:var(--txt2);font-size:.95rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-meta{display:flex;gap:12px;align-items:center;margin-top:12px;font-size:.74rem;color:var(--txt2)}
.blog-meta span{display:flex;align-items:center;gap:4px}
.blog-article{max-width:780px;margin:0 auto}
.blog-article h1{font-family:var(--fh);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;color:var(--white);letter-spacing:-.5px;line-height:1.2;margin-bottom:14px}
.blog-article .art-meta{display:flex;gap:14px;color:var(--txt2);font-size:.83rem;flex-wrap:wrap;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--bdr)}
.blog-content{color:var(--txt);font-size:1.08rem;line-height:1.95}
.blog-content h2{font-family:var(--fh);font-size:1.35rem;font-weight:700;color:var(--white);margin:30px 0 12px;letter-spacing:-.3px}
.blog-content h3{font-family:var(--fh);font-size:1.1rem;font-weight:700;color:var(--p-l);margin:22px 0 9px}
.blog-content p{margin-bottom:16px}
.blog-content ul,.blog-content ol{margin:12px 0 16px 20px}
.blog-content li{margin-bottom:7px}
.blog-content strong{color:var(--white)}
.blog-content .highlight-box{background:rgba(var(--p-rgb),.07);border-left:3px solid var(--p);padding:14px 18px;border-radius:0 var(--r3) var(--r3) 0;margin:18px 0}
.blog-content .tip-box{background:rgba(129,140,248,.06);border-left:3px solid var(--acc);padding:14px 18px;border-radius:0 var(--r3) var(--r3) 0;margin:18px 0}
.blog-content table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.88rem}
.blog-content th{background:var(--bg3);padding:9px 14px;text-align:left;color:var(--txt2);font-weight:600;border-bottom:1px solid var(--bdr)}
.blog-content td{padding:9px 14px;border-bottom:1px solid var(--bdr)}
.blog-content tr:hover td{background:rgba(var(--p-rgb),.03)}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.adm-body{background:#060a10}
.adm-layout{display:flex;min-height:100vh}
.adm-sb{width:240px;background:var(--bg2);border-right:1px solid var(--bdr);position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:200;transition:transform .3s}
.adm-sb-logo{padding:16px 20px;border-bottom:1px solid var(--bdr);font-family:var(--fh);font-size:1.1rem;font-weight:800;color:var(--white)}
.adm-sb-logo em{color:var(--p);font-style:normal}
.adm-nav{flex:1;padding:10px 8px;overflow-y:auto}
.adm-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r3);color:var(--txt2);font-size:.85rem;font-weight:500;margin-bottom:2px;transition:var(--tr)}
.adm-nav a:hover,.adm-nav a.on{background:var(--bg4);color:var(--white)}
.adm-nav a.on{color:var(--p);background:rgba(var(--p-rgb),.08)}
.adm-nav .sec-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--txt3);padding:14px 12px 5px;font-weight:600}
.adm-main{flex:1;margin-left:240px;display:flex;flex-direction:column}
.adm-topbar{background:var(--bg2);border-bottom:1px solid var(--bdr);padding:0 24px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.adm-topbar h2{font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--white)}
.adm-content{padding:24px;flex:1}
.adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.adm-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:20px;display:flex;align-items:center;gap:14px}
.adm-card-ico{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.adm-card-ico.o{background:rgba(249,115,22,.12)}
.adm-card-ico.c{background:rgba(129,140,248,.12)}
.adm-card-ico.v{background:rgba(167,139,250,.12)}
.adm-card-ico.y{background:rgba(251,191,36,.12)}
.adm-card .n{font-family:var(--fh);font-size:1.8rem;font-weight:800;color:var(--white);line-height:1}
.adm-card .t{font-size:.75rem;color:var(--txt2);margin-top:3px}
.adm-tbl-wrap{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden}
.adm-tbl-hd{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--bdr)}
.adm-tbl-hd h3{font-family:var(--fh);font-size:.95rem;font-weight:700;color:var(--white)}
.adm-tbl{width:100%;border-collapse:collapse}
.adm-tbl th{padding:9px 16px;text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--txt2);background:var(--bg3);border-bottom:1px solid var(--bdr)}
.adm-tbl td{padding:10px 16px;font-size:.86rem;border-bottom:1px solid var(--bdr);color:var(--txt)}
.adm-tbl tr:last-child td{border-bottom:none}
.adm-tbl tr:hover td{background:rgba(var(--p-rgb),.03)}

/* ============================================================
   FOOTER  — Professional
   ============================================================ */
.site-footer{
  background:var(--bg2);border-top:1px solid var(--bdr);padding:56px 0 24px;
}
.footer-grid{
  max-width:1240px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
.footer-brand .logo{margin-bottom:12px}
.footer-brand p{color:var(--txt2);font-size:.86rem;line-height:1.75;margin-top:0;max-width:260px}
.footer-col h4{
  font-family:var(--fh);font-size:.85rem;font-weight:700;
  color:var(--white);margin-bottom:14px;letter-spacing:.2px;
  text-transform:uppercase;letter-spacing:.8px;font-size:.73rem;
}
.footer-col a{display:block;color:var(--txt2);font-size:.84rem;margin-bottom:9px;transition:var(--tr)}
.footer-col a:hover{color:var(--p);padding-left:4px}
.social-row{display:flex;gap:8px;margin-top:16px}
.soc{
  width:32px;height:32px;border-radius:var(--r3);
  background:var(--bg3);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
  color:var(--txt2);font-size:.9rem;transition:var(--tr);
}
.soc:hover{background:var(--p);border-color:var(--p);color:#fff}
.footer-bottom{
  max-width:1240px;margin:0 auto;padding:20px 24px 0;
  border-top:1px solid var(--bdr);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--txt3);
}

/* ============================================================
   UTILITY
   ============================================================ */
.tc{text-align:center}
.flex{display:flex}
.aic{align-items:center}
.gap8{gap:8px}
.gap12{gap:12px}
.gap16{gap:16px}
.mt8 {margin-top:8px}
.mt16{margin-top:16px}
.mt24{margin-top:24px}
.mt32{margin-top:32px}
.mb16{margin-bottom:16px}
.mb24{margin-bottom:24px}
.w100{width:100%}
.hidden{display:none!important}
.muted{color:var(--txt2)}
.white{color:var(--white)}
.orange{color:var(--p)}
.font-mono{font-family:var(--fm)}
.font-head{font-family:var(--fh)}

/* ── Ad slots ───────────────────────────────────────────── */
.ad-slot{display:none!important}
.ad-banner{width:100%;min-height:90px;margin:20px 0}
.ad-rect{min-height:250px;margin:20px 0}
.ad-sidebar{min-height:600px;position:sticky;top:80px}

/* ── Tabs ───────────────────────────────────────────────── */
.tab-nav{display:flex;gap:2px;border-bottom:1px solid var(--bdr);margin-bottom:24px}
.tab-btn{
  padding:9px 16px;background:none;border:none;
  color:var(--txt2);font-size:.88rem;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--tr);
}
.tab-btn.on{color:var(--p);border-bottom-color:var(--p)}
.tab-switcher{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tab-btn.pill{background:var(--bg3);border:1px solid var(--bdr);color:var(--txt2);padding:9px 16px;border-radius:999px;cursor:pointer;transition:var(--tr);border-bottom:none;margin-bottom:0}
.tab-btn.pill.on{background:var(--p);border-color:var(--p);color:#fff}
.tab-content{display:none}
.tab-content.on{display:block}

.support-chat-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.support-chat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--bdr);background:var(--bg2)}
.support-chat-head h3{font-family:var(--fh);font-size:1.08rem;color:var(--white);margin:0 0 4px}
.support-chat-head p{margin:0;color:var(--txt2);font-size:.86rem}
.support-admin-head{justify-content:flex-start;background:linear-gradient(135deg,rgba(var(--p-rgb),.12),rgba(255,255,255,.025))}
.support-selected-info{min-width:0;flex:1}
.support-selected-info h3{font-size:1.2rem;margin-bottom:5px}
.support-selected-info p{display:flex;gap:8px;flex-wrap:wrap;align-items:center;line-height:1.5}
.support-selected-info strong{color:var(--txt);font-weight:800}
.support-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.9px;color:var(--p);font-weight:900;margin-bottom:3px}
.support-state{align-self:flex-start;margin-left:auto;text-transform:capitalize}
.support-messages{height:500px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.support-msg{display:flex}
.support-msg.mine{justify-content:flex-end}
.support-msg.theirs{justify-content:flex-start}
.support-bubble{max-width:min(680px,82%);border:1px solid var(--bdr);border-radius:8px;padding:11px 13px;background:var(--bg3)}
.support-msg.theirs .support-bubble{border-left:3px solid var(--warn)}
.support-msg.mine .support-bubble{background:rgba(var(--p-rgb),.13);border-color:rgba(var(--p-rgb),.28);border-right:3px solid var(--p)}
.support-meta{display:flex;justify-content:space-between;gap:14px;font-size:.72rem;color:var(--txt3);margin-bottom:6px}
.support-meta span{font-weight:900;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.support-meta em{font-style:normal}
.support-text{font-size:.92rem;line-height:1.45;color:var(--txt)}
.support-bubble img{display:block;max-width:260px;max-height:220px;object-fit:contain;border-radius:8px;margin-top:8px;border:1px solid var(--bdr)}
.support-form{padding:14px;border-top:1px solid var(--bdr);background:var(--bg2)}
.support-form textarea{width:100%;resize:vertical;min-height:82px;margin-bottom:10px}
.support-form-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.support-file{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;color:var(--txt2);font-size:.86rem;background:var(--bg3)}
.support-file:hover{color:var(--p);border-color:var(--p)}
.support-file input{display:none}
.support-admin-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;align-items:start}
.support-thread-list{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;position:sticky;top:18px;max-height:calc(100vh - 120px);overflow-y:auto}
.support-inbox-head{padding:16px 16px;border-bottom:1px solid var(--bdr);background:var(--bg2)}
.support-inbox-head h3{font-family:var(--fh);font-size:1rem;color:var(--white);margin:0 0 4px}
.support-inbox-head span{color:var(--txt2);font-size:.78rem}
.support-thread{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 14px;border-top:1px solid var(--bdr);color:var(--txt);position:relative}
.support-thread:hover,.support-thread.on{background:rgba(var(--p-rgb),.08)}
.support-thread.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--p)}
.support-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--p-rgb),.15);border:1px solid rgba(var(--p-rgb),.3);color:var(--p);font-weight:900;font-size:.95rem;flex:0 0 auto}
.support-avatar.empty{background:var(--bg3);border-color:var(--bdr);color:var(--txt2)}
.support-avatar.large{width:54px;height:54px;font-size:1.15rem}
.support-thread-main{min-width:0}
.support-thread-main strong,.support-thread-main span,.support-thread-main small{display:block;line-height:1.35}
.support-thread-main strong{font-size:.92rem;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-name-count{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;border-radius:50%;background:var(--p);color:#fff;font-size:.7rem;font-weight:900;vertical-align:middle}
.support-thread-main span{font-size:.76rem;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-thread-main small{font-size:.78rem;color:var(--txt3);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-thread-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:72px}
.support-thread-side em{font-style:normal;text-transform:capitalize}
.support-thread-side small{font-size:.68rem;color:var(--txt3);white-space:nowrap}
.support-thread-side b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--bg3);border:1px solid var(--bdr);font-size:.72rem;color:var(--txt2)}
.support-thread-section{padding:10px 14px;border-top:1px solid var(--bdr);background:var(--bg2);font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:var(--txt3);font-weight:800}
.support-admin-chat{min-width:0}
@media(max-width:900px){
  .support-admin-grid{grid-template-columns:1fr}
  .support-messages{height:360px}
}

/* ── Admin forms ─────────────────────────────────────────── */
.adm-form-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:20px}
.adm-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.adm-passage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.adm-form-card select,.adm-form-card input,.adm-form-card textarea{width:100%;background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--r3);color:var(--txt);padding:9px}
.adm-set-list{display:grid;gap:12px;margin-top:18px}
.adm-set-item{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:16px}
.adm-set-item h4{font-family:var(--fh);font-size:1rem;color:var(--white);margin-bottom:4px}
.adm-set-item p{color:var(--txt2);font-size:.83rem}
.adm-set-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adm-set-meta span{background:var(--bg3);border:1px solid var(--bdr);border-radius:999px;padding:4px 10px;font-size:.73rem;color:var(--txt2)}
.adm-analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.adm-pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ============================================================
   EXAM PAGE
   ============================================================ */
.exam-rule-box{background:rgba(255,255,255,.02);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.rule-label{display:inline-block;color:var(--acc);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-right:8px}
.tag-pill{background:rgba(129,140,248,.1);color:var(--acc);padding:5px 12px;border-radius:999px;font-size:.8rem;font-weight:700}
.rule-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--txt2);font-size:.9rem}
.level-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.level-btn{background:var(--bg3);border:1px solid var(--bdr);color:var(--txt2);padding:9px 16px;border-radius:999px;font-weight:700;transition:var(--tr);cursor:pointer}
.level-btn.on{background:var(--bg2);border-color:var(--p);color:var(--white)}
.passage-groups{display:grid;gap:14px}
.group-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:18px}
.group-card.group-locked{opacity:.8}
.group-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;padding:10px;border-radius:var(--r3);transition:var(--tr)}
.group-head:hover{background:rgba(255,255,255,.03);border-radius:var(--r3)}
.group-head strong{font-family:var(--fh);font-size:.95rem;color:var(--white)}
.group-head small{color:var(--txt2)}
.group-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.group-status span{background:var(--bg3);color:var(--txt2);padding:5px 10px;border-radius:999px;font-size:.76rem}
.group-ok{color:var(--ok)}
.group-note{color:var(--txt2)}
.group-body{display:grid;gap:8px}
.passage-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:var(--r3);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);gap:10px}
.passage-row.passage-locked{opacity:.4}
.passage-row.passage-done{border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.06)}
.passage-label{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.passage-label span:first-child{background:rgba(129,140,248,.08);color:var(--acc);padding:4px 9px;border-radius:999px;font-size:.75rem;font-weight:700}
.passage-label span:last-child{color:var(--txt);font-size:.9rem}
.lock-icon{font-size:1rem;color:var(--txt3)}
.exam-level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.exam-level-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r3);padding:18px;color:var(--txt);display:grid;gap:7px;min-height:136px}
.exam-level-card:hover,.exam-level-card.on{border-color:var(--p);background:rgba(var(--p-rgb),.07);transform:translateY(-1px)}
.exam-level-card span{font-size:.72rem;color:var(--acc);text-transform:uppercase;letter-spacing:1px;font-weight:800}
.exam-level-card strong{font-family:var(--fh);font-size:1.25rem;color:var(--white)}
.exam-level-card small{color:var(--txt2);font-size:.83rem}
.exam-level-card em{font-style:normal;color:var(--txt2);font-size:.8rem;line-height:1.45}
.empty-state-box{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:28px;text-align:center}
.empty-state-box h3{font-family:var(--fh);font-size:1.3rem;color:var(--white);margin-bottom:8px}
.empty-state-box p{color:var(--txt2)}
.custom-test-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;margin-bottom:22px;display:grid;gap:14px}
.custom-test-head h3{font-family:var(--fh);font-size:1.2rem;color:var(--white);margin-top:4px}
.custom-test-head p{color:var(--txt2);font-size:.88rem}
.custom-test-card textarea{width:100%;min-height:130px;resize:vertical;border:1px solid var(--bdr2);border-radius:var(--r3);background:var(--bg3);color:var(--txt);padding:14px;font-family:var(--fb);font-size:.95rem;line-height:1.65}
.custom-test-card textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(var(--p-rgb),.1)}
.custom-test-actions{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.custom-test-actions label{display:grid;gap:5px;color:var(--txt2);font-size:.76rem;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.custom-test-actions select{height:36px;border-radius:var(--r3);border:1px solid var(--bdr2);background:var(--bg3);color:var(--txt);padding:0 12px}

/* ============================================================
   FULLSCREEN EXAM / GAME
   ============================================================ */
.exam-fullpage,.game-fullpage{min-height:100vh;color:var(--white);margin:0}
.exam-play-top,.game-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;position:sticky;top:0;z-index:20;background:rgba(10,12,18,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--bdr)}
.play-metrics,.game-top-stats{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.play-metrics div,.game-top-stats div{display:flex;flex-direction:column;align-items:flex-start}
.small-label{font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.exam-play-stage,.game-area{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;min-height:calc(100vh - 170px);overflow:hidden}
.exam-play-stage .word-grid,.game-area .game-canvas{position:absolute;inset:0;background-image:linear-gradient(0deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;opacity:.4}
.active-word,.game-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-family:var(--fh);font-size:clamp(3rem,8vw,6rem);color:var(--white);text-transform:capitalize;letter-spacing:.02em;line-height:1;max-width:90%;text-align:center}
.game-word.hit{box-shadow:0 0 0 4px rgba(52,211,153,.18),0 18px 60px rgba(52,211,153,.16);border-color:rgba(52,211,153,.5)!important}
.game-word.miss{box-shadow:0 0 0 4px rgba(248,113,113,.16),0 18px 60px rgba(248,113,113,.14);border-color:rgba(248,113,113,.5)!important}
.move-gravity-fall{animation:gravityFall 3.5s linear infinite}
.move-sine-wave{animation:sineWave 4s ease-in-out infinite}
.move-spiral-spin{animation:spiralSpin 4.5s linear infinite}
.move-chaos-jump{animation:chaosJump 1.2s steps(2,end) infinite}
.move-wall-bounce{animation:wallBounce 3.2s ease-in-out infinite}
.move-planet-orbit{animation:planetOrbit 4s linear infinite}
@keyframes gravityFall{0%{top:12%;opacity:.35}100%{top:82%;opacity:1}}
@keyframes sineWave{0%,100%{transform:translate(-50%,-50%) translateX(-160px)}50%{transform:translate(-50%,-50%) translateX(160px) translateY(-50px)}}
@keyframes spiralSpin{0%{transform:translate(-50%,-50%) rotate(0deg) scale(.9)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.12)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(.9)}}
@keyframes chaosJump{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(180deg)}}
@keyframes wallBounce{0%,100%{transform:translate(-50%,-50%) translate(-180px,-80px)}50%{transform:translate(-50%,-50%) translate(180px,80px)}}
@keyframes planetOrbit{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(150px) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg) translateX(150px) rotate(-360deg)}}
.game-instructions{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:var(--txt2);font-size:.95rem;background:rgba(10,12,18,.8);padding:10px 18px;border-radius:999px;border:1px solid var(--bdr);z-index:3}
.exam-play-footer,.game-footer{position:sticky;bottom:0;left:0;right:0;background:rgba(10,12,18,.96);border-top:1px solid var(--bdr);backdrop-filter:blur(16px);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.play-actions{display:flex;gap:10px;flex-wrap:wrap}
.hidden-input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;resize:none}
.game-input-wrap{display:grid;gap:6px;min-width:min(520px,100%);flex:1}
.game-input-wrap label{font-size:.7rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.game-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.game-type-input{width:100%;height:52px;border-radius:8px;border:1px solid var(--bdr2);background:rgba(255,255,255,.05);color:#fff;font-size:1rem;font-weight:600;padding:0 16px}
.game-type-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(var(--p-rgb),.14)}
.game-type-input::placeholder{color:rgba(255,255,255,.3)}
.game-send-btn{height:52px;min-width:92px;justify-content:center}
.game-toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
  .game-settings{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.game-score-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:20px;margin-bottom:20px}
.game-score-summary div{display:grid;gap:4px;text-align:center}
.game-score-summary strong{font-family:var(--fh);font-size:1.6rem;color:var(--p)}
.game-score-summary span{color:var(--txt2);font-size:.75rem;text-transform:uppercase;letter-spacing:1px}
.game-score-list{display:grid;gap:10px}
.score-row{display:grid;grid-template-columns:54px 120px 1fr;gap:12px;align-items:center;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r3);padding:12px 16px}
.score-row span{color:var(--txt2);font-weight:700}
.score-row strong{color:var(--p);font-family:var(--fh)}
.score-row em{color:var(--txt2);font-style:normal;font-size:.88rem}

/* ============================================================
   PARAGRAPH TEST
   ============================================================ */
.paragraph-test-page{background:var(--bg);overflow-x:hidden}
.para-top{position:sticky;top:0}
.para-title{display:flex;align-items:center;gap:14px}
.para-title div{display:grid;gap:2px}
.para-title span{font-size:.72rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.para-title strong{font-family:var(--fh);font-size:1.1rem;color:#fff}
.para-shell{--para-font-size:1.05rem;--para-input-font-size:1rem;--para-line-height:1.9;max-width:1180px;margin:0 auto;padding:20px 20px 32px;display:grid;gap:16px}
.para-timer{height:4px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden}
.para-timer div{height:100%;width:100%;background:linear-gradient(90deg,var(--p),var(--acc));transition:width .25s}
.para-card,.para-input-panel,.para-result{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh)}
.para-card{padding:20px}
.para-card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.para-card-title{display:grid;gap:4px;min-width:0}
.para-card-head strong{color:#fff;font-family:var(--fh)}
.para-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.para-tools span{min-width:46px;text-align:center;color:var(--txt2);font-size:.78rem;font-weight:800}
.para-tool-btn{height:36px;min-width:40px;border-radius:8px;border:1px solid var(--bdr2);background:var(--bg3);color:var(--txt);font-weight:900;cursor:pointer;transition:var(--tr)}
.para-tool-btn:hover{border-color:var(--p);color:var(--p)}
.para-display{height:clamp(260px,38vh,410px);overflow:auto;padding:18px;background:rgba(255,255,255,.025);border:1px solid var(--bdr);border-radius:var(--r3);font-family:var(--fm);font-size:var(--para-font-size);line-height:var(--para-line-height);color:var(--txt2);cursor:text;white-space:normal;overflow-wrap:break-word;word-break:normal;scrollbar-gutter:stable}
.pchar{display:inline;border-radius:4px;padding:1px 0;transition:background .08s,color .08s;white-space:pre-wrap}
.pchar.ok {color:var(--ok);background:rgba(52,211,153,.07)}
.pchar.bad{color:var(--err);background:rgba(248,113,113,.12);text-decoration:underline;text-underline-offset:3px}
.pchar.cur{background:var(--p);color:#fff;box-shadow:0 0 0 2px rgba(var(--p-rgb),.18)}
.para-input-panel{padding:18px;display:grid;gap:10px}
.para-input-panel label{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--txt2);font-weight:700}
.para-input-panel textarea{width:100%;min-height:148px;resize:vertical;border-radius:var(--r3);border:1px solid var(--bdr2);background:rgba(255,255,255,.04);color:#fff;font-family:var(--fm);font-size:var(--para-input-font-size);line-height:1.75;padding:14px}
.para-input-panel textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(var(--p-rgb),.12)}
.hindi-text,.hindi-text *{font-family:'Mangal','Nirmala UI','Kalimati','Noto Sans Devanagari','Arial Unicode MS',sans-serif!important;font-weight:400}
.para-actions{display:flex;gap:10px;flex-wrap:wrap}
.para-result{padding:24px;text-align:center}
.para-result .result-grid{max-width:720px;margin:18px auto}

/* ============================================================
   TYPING TUTOR
   ============================================================ */
.tutor-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;padding:20px 22px;margin-bottom:24px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh2)}
.lang-toggle{display:flex;gap:8px}
.lang-btn{background:var(--bg3);border:1px solid var(--bdr);color:var(--txt2);padding:9px 16px;border-radius:999px;cursor:pointer;transition:var(--tr)}
.lang-btn.on{background:var(--p);border-color:var(--p);color:#fff}
.tutor-actions{display:flex;gap:8px}
.tutor-stats{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tutor-stats div{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r2);padding:9px 14px;text-align:center;min-width:88px}
.tutor-layout{display:grid;grid-template-columns:260px 1fr;gap:18px}
.lesson-sidebar{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh2)}
.sidebar-title{color:var(--acc);font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.lesson-card{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--r2);padding:13px 15px;text-align:left;color:var(--txt);display:flex;flex-direction:column;align-items:flex-start;gap:5px;cursor:pointer;transition:var(--tr)}
.lesson-card:hover{border-color:var(--p);transform:translateY(-1px)}
.lesson-card span{font-size:.72rem;color:var(--txt2);text-transform:uppercase}
.lesson-card strong{font-size:.95rem}
.lesson-card small{color:var(--txt2);font-size:.76rem}
.lesson-card.on{border-color:var(--p);background:rgba(var(--p-rgb),.08);box-shadow:0 8px 24px rgba(var(--p-rgb),.1)}
.tutor-stage{display:flex;flex-direction:column;gap:18px}
.tutor-box{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:26px;min-height:180px;display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;box-shadow:var(--sh2);position:relative}
.tutor-text{font-family:var(--fh);font-size:clamp(1.8rem,4vw,3rem);color:var(--white);line-height:1.35;text-align:left;word-break:break-word}
.tutor-text.hindi-text,.tutor-text.lang-hi{font-family:'Mangal','Nirmala UI','Kalimati','Noto Sans Devanagari',sans-serif!important;letter-spacing:0;word-spacing:.08em;font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.65}
.keyboard-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;box-shadow:var(--sh2)}
.keyboard-row{color:var(--txt2);font-size:.83rem;margin-bottom:12px}
.keyboard-keys{background:rgba(255,255,255,.025);border:1px solid var(--bdr);border-radius:var(--r2);padding:22px;min-height:140px;display:grid;gap:8px}
.kbd-line{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.kbd-line span{min-width:40px;padding:8px 9px;border:1px solid var(--bdr2);background:rgba(255,255,255,.04);border-radius:7px;text-align:center;font-family:var(--fm);font-size:.76rem;color:var(--txt)}
.kbd-line .space-key{min-width:300px}
.tutor-controls{display:flex;gap:12px;flex-wrap:wrap}
.tutor-shell .sec{padding-top:30px}
.learning-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:16px}
.plan-step{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r3);padding:13px;display:grid;gap:5px}
.plan-step.on{border-color:var(--p);box-shadow:0 0 0 1px rgba(var(--p-rgb),.15)}
.plan-step span{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--p);font-weight:700}
.plan-step strong{font-size:.88rem;color:var(--txt)}
.plan-step small{color:var(--txt2);line-height:1.45;font-size:.8rem}
.tutor-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(129,140,248,.06);border:1px solid rgba(129,140,248,.2);border-radius:var(--r3);padding:11px 14px;margin-bottom:16px}
.tutor-note strong{color:var(--acc)}
.tutor-note span{color:var(--txt2);font-size:.88rem}
.lesson-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;color:var(--txt2);font-size:.83rem}
.lesson-meta strong{color:var(--acc);font-family:var(--fm);font-size:.76rem}
.t-char{display:inline-block;min-width:.3em;border-radius:4px;padding:0 1px;color:var(--txt2)}
.t-char.ok {color:var(--white);background:rgba(52,211,153,.1)}
.t-char.bad{color:var(--err);background:rgba(248,113,113,.12)}
.t-char.cur{background:var(--p);color:#fff;box-shadow:0 4px 16px rgba(var(--p-rgb),.28)}

/* Game specific */
.game-head-panel{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:28px 24px;box-shadow:var(--sh2)}
  .game-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:22px;text-align:center}
.game-card-ico{background:linear-gradient(135deg,rgba(var(--p-rgb),.15),rgba(129,140,248,.15));box-shadow:0 8px 20px rgba(var(--p-rgb),.08)}
.game-play-page{background:radial-gradient(circle at 18% 16%,rgba(var(--p-rgb),.16),transparent 30%),radial-gradient(circle at 86% 24%,rgba(20,184,166,.12),transparent 28%),linear-gradient(135deg,#0b1117 0%,#151922 52%,#0a1017 100%)}
.game-play-page .game-topbar{background:rgba(7,12,18,.82);border-bottom:1px solid rgba(255,255,255,.08)}
.game-play-page .game-top-stats div{min-width:78px;padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.045)}
.game-play-page .game-top-stats strong{font-size:1.15rem;color:#fff}
.game-play-page .game-area{min-height:calc(100vh - 200px);background:radial-gradient(circle at center,rgba(var(--p-rgb),.08),transparent 42%)}
.game-play-page .game-canvas:after{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.game-time-track{position:absolute;top:18px;left:24px;right:24px;height:7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);overflow:hidden;z-index:4}
.game-time-track div{height:100%;width:100%;background:linear-gradient(90deg,var(--p),#22d3ee);transition:width .25s linear}
.game-current-card{position:absolute;top:42px;left:24px;z-index:4;display:grid;gap:5px;min-width:220px;padding:14px 16px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(7,12,18,.74);backdrop-filter:blur(16px);box-shadow:0 14px 40px rgba(0,0,0,.22)}
.game-current-card span{font-size:.68rem;color:var(--txt3);text-transform:uppercase;letter-spacing:1px;font-weight:800}
.game-current-card strong{font-family:var(--fh);font-size:1.15rem;color:#fff;line-height:1.1}
.game-current-card small{color:var(--txt2);font-size:.8rem;line-height:1.35}
.game-play-page .game-word{padding:18px 28px;border-radius:8px;background:rgba(7,12,18,.66);border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 70px rgba(0,0,0,.3);backdrop-filter:blur(10px)}
.game-play-page .game-word.hindi-text{font-family:'Mangal','Nirmala UI','Kalimati','Noto Sans Devanagari',sans-serif!important;font-size:clamp(2.2rem,6vw,4.5rem);text-transform:none}
.game-play-page .game-footer{background:rgba(7,12,18,.9);border-top:1px solid rgba(255,255,255,.08)}
.game-finish-panel{position:absolute;inset:18px;z-index:8;display:none;align-items:center;justify-content:center;text-align:center;background:rgba(7,16,31,.86);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);backdrop-filter:blur(16px);padding:24px}
.game-finish-panel.show{display:flex}
.game-finish-card{display:grid;gap:16px;max-width:620px;width:100%}
.game-finish-card h2{font-size:clamp(1.8rem,5vw,3.2rem);line-height:1.1;color:#fff}
.game-finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.game-finish-grid div{background:rgba(255,255,255,.06);border:1px solid var(--bdr);border-radius:var(--r3);padding:14px}
.game-finish-grid strong{display:block;font-size:1.7rem;color:var(--p);line-height:1}
.game-finish-grid span{font-size:.68rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px}
.game-finish-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}

/* ── Tooltip ─────────────────────────────────────────────── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--bdr2);color:var(--txt);font-size:.73rem;padding:4px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:99}
[data-tip]:hover::after{opacity:1}

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200%;animation:shimmer 1.5s infinite;border-radius:6px}

/* ── Lang / IME ──────────────────────────────────────────── */
[lang="hi"],.lang-hi{font-family:var(--fm)}
[data-ime-ready="true"]{ime-mode:active}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes shimmer  {0%{background-position:200%}100%{background-position:-200%}}
@keyframes floatOrb {0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}
@keyframes fadeLift {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp   {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes countUp  {from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes slideInL {from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInR {from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes marquee  {from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Scroll Animations ───────────────────────────────────── */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}
.delay-5{transition-delay:.5s}

/* ── Marquee ─────────────────────────────────────────────── */
.marquee-wrap{overflow:hidden;white-space:nowrap;position:relative}
.marquee-track{display:inline-flex;gap:60px;animation:marquee 30s linear infinite;padding-right:60px}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--txt2)}
.marquee-item strong{color:var(--p);font-family:var(--fh);font-size:1.2rem}

/* ── Step Cards ──────────────────────────────────────────── */
.step-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.step-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:28px;text-align:center;flex:1;min-width:220px;max-width:300px;position:relative;overflow:hidden}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--p);color:#fff;font-family:var(--fh);font-size:1.1rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 14px rgba(var(--p-rgb),.35)}
.step-card h3{font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--white);margin-bottom:8px}
.step-card p{color:var(--txt2);font-size:.9rem;line-height:1.65}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media(max-width:1100px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .tp-sidebar-ad{display:none}
  .exams-hero-grid{grid-template-columns:1fr}
  .exams-hero-panel{max-width:420px}
}

/* ============================================================
   RESPONSIVE — Mobile  768px
   ============================================================ */
@media(max-width:768px){
  /* Header */
  .hdr-nav{display:none}
  .hdr-right .btn-ghost{display:none}
  .burger{display:flex}
  .hdr-inner{padding:0 16px}

  /* Hero */
  .hero{padding:60px 16px 44px}
  .hero h1{letter-spacing:-.8px}
  .hero-stats{flex-direction:column;max-width:100%}
  .hero-stat{border-right:none;border-bottom:1px solid var(--bdr)}
  .hero-stat:last-child{border-bottom:none}

  /* Sections */
  .sec{padding:48px 0}
  .container,.container-sm,.container-xs,.container-xl,.footer-grid{padding:0 16px}

  /* Exams */
  .exams-hero{padding:34px 0 20px}
  .exams-hero-grid{gap:20px}
  .exams-hero h1{font-size:2rem;line-height:1.12}
  .exams-hero-actions,.exam-login-note{align-items:stretch;flex-direction:column}
  .exam-login-note .btn{justify-content:center}
  .exam-category-head{align-items:flex-start;flex-direction:column;gap:4px}
  .exam-list-grid{grid-template-columns:1fr}

  /* Footer */
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}

  /* Settings */
  .settings-card{margin-top:60px;width:min(100%,300px)}

  /* Admin */
  .adm-sb{transform:translateX(-100%)}
  .adm-sb.open{transform:translateX(0)}
  .adm-main{margin-left:0}
  .adm-content{padding:12px}
  .adm-form-grid,.adm-passage-grid{grid-template-columns:1fr}
  .adm-cards{grid-template-columns:1fr 1fr}
  .adm-analytics-grid{grid-template-columns:1fr}

  /* Auth */
  .auth-box{padding:24px 18px}

  /* Typing */
  .tp-main{flex-direction:column;padding:12px}
  .tp-topbar{padding:0 12px}
  .tp-ribbon{grid-template-columns:repeat(5,1fr);padding:8px 12px;gap:8px}
  .tp-timer-bar{grid-column:1/-1;min-width:0}
  .tp-stat .v{font-size:1.4rem}
  .tp-modes{padding:8px 12px;gap:6px}

  /* Blog */
  .blog-grid{grid-template-columns:1fr}

  /* Game */
  .game-score-summary{grid-template-columns:1fr}
  .score-row{grid-template-columns:1fr;gap:4px}

  /* Tutor */
  .tutor-layout{grid-template-columns:1fr}

  /* Exam */
  .exam-play-footer,.game-footer{flex-direction:column;align-items:flex-start}
  .exam-level-grid{grid-template-columns:1fr}
  .para-card-head,.para-title{align-items:flex-start;flex-direction:column}
  .para-tools{width:100%;justify-content:flex-start}
  .para-display{height:clamp(240px,36vh,360px);padding:14px}
  .para-input-panel textarea{min-height:128px}
  .exam-play-top,.game-topbar{align-items:stretch;flex-direction:column;padding:12px 14px;gap:12px}
  .play-metrics,.game-top-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}
  .game-top-stats{grid-template-columns:repeat(4,1fr)}
  .play-metrics div,.game-top-stats div{background:rgba(255,255,255,.045);border:1px solid var(--bdr);border-radius:var(--r3);padding:8px;min-width:0}
  .play-metrics strong,.game-top-stats strong{font-size:.95rem;line-height:1.1}
  .small-label{font-size:.58rem;letter-spacing:.6px}
  .game-area{min-height:calc(100vh - 260px);padding:28px 12px}
  .game-time-track{top:10px;left:12px;right:12px}
  .game-current-card{position:relative;top:auto;left:auto;width:100%;min-width:0;margin-top:14px;align-self:stretch}
  .game-input-row{grid-template-columns:1fr}
  .game-send-btn{width:100%}
  .game-instructions{width:calc(100% - 24px);bottom:12px;text-align:center;border-radius:var(--r3);font-size:.8rem}
  .game-finish-panel{inset:10px}
  .game-finish-grid{grid-template-columns:1fr}

  /* Result */
  .result-big{font-size:3.2rem}
}

/* ============================================================
   RESPONSIVE — Small Mobile  480px
   ============================================================ */
@media(max-width:480px){
  .hero h1{font-size:1.75rem;letter-spacing:-.6px}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center}

  .adm-cards{grid-template-columns:1fr}
  .para-shell{--para-font-size:.98rem;--para-input-font-size:.96rem;padding:10px 10px 20px}
  .para-card,.para-input-panel{padding:14px}
  .para-tools .btn{width:100%;justify-content:center}
  .stat-grid{grid-template-columns:1fr 1fr}

  .text-display{padding:16px}
  .word-display{font-size:.98rem}
  .tp-stat{min-width:52px}
  .tp-stat .v{font-size:1.15rem}
  .tp-stat .l{font-size:.54rem;letter-spacing:.5px}
  .play-metrics{grid-template-columns:repeat(3,1fr)}
  .game-top-stats{grid-template-columns:repeat(2,1fr)}
  .para-shell{padding:12px 12px 24px}

  .exam-level-grid{grid-template-columns:1fr 1fr}
  .custom-test-actions{align-items:stretch;flex-direction:column}
  .exams-hero h1{font-size:1.75rem}
  .exams-hero-panel strong{font-size:1.8rem}
  .exam-list-card{min-height:auto}

  .footer-grid{gap:24px}
  .g-3,.g-4{grid-template-columns:1fr}
  .g-5{grid-template-columns:1fr 1fr}
  .game-hub-grid .game-card{padding:18px}
  .game-hub-grid .game-settings{flex-direction:column;align-items:stretch}
  .game-hub-grid .game-settings .btn{justify-content:center}
}

/* ============================================================
   DESIGN REFRESH 2026
   A brighter, cleaner product UI layer without changing page logic.
   ============================================================ */
:root{
  --bg:#081015;
  --bg2:#0e171d;
  --bg3:#15232b;
  --bg4:#20323c;
  --card:rgba(15,27,34,.86);
  --bdr:rgba(180,205,215,.12);
  --bdr2:rgba(180,205,215,.2);
  --txt:#eef7f8;
  --txt2:#a3b6bf;
  --txt3:#6f838d;
  --white:#ffffff;
  --acc:#f59e0b;
  --acc2:#84cc16;
  --r:14px;
  --r2:10px;
  --sh:0 18px 48px rgba(0,0,0,.34);
}

html[data-theme="light"]{
  --bg:#f5f7f8;
  --bg2:#ffffff;
  --bg3:#edf3f5;
  --bg4:#dfe9ed;
  --card:rgba(255,255,255,.92);
  --bdr:rgba(15,40,50,.12);
  --bdr2:rgba(15,40,50,.2);
  --txt:#102129;
  --txt2:#536872;
  --txt3:#7b8e96;
  --white:#102129;
  --sh:0 18px 42px rgba(12,31,40,.1);
}

body{
  background:
    linear-gradient(180deg,rgba(var(--p-rgb),.12),transparent 360px),
    linear-gradient(90deg,rgba(245,158,11,.06),transparent 42%,rgba(132,204,22,.055)),
    var(--bg);
  font-size:1rem;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.65),transparent 65%);
}

html[data-theme="light"] body::before{background-image:linear-gradient(rgba(15,40,50,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,40,50,.045) 1px,transparent 1px)}

.site-header{
  background:rgba(8,16,21,.76);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}

html[data-theme="light"] .site-header{background:rgba(255,255,255,.82)}

.hdr-inner{height:70px}
.logo{font-size:1.26rem}
.logo-mark,.logo-svg{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--p),var(--acc));
  box-shadow:0 10px 24px rgba(var(--p-rgb),.28);
}
.logo-mark{display:flex;align-items:center;justify-content:center;color:#fff}

.hdr-nav{
  background:rgba(255,255,255,.045);
  border:1px solid var(--bdr);
  border-radius:999px;
  padding:4px;
  margin-left:8px;
}

html[data-theme="light"] .hdr-nav{background:rgba(15,40,50,.045)}

.hdr-nav a{
  border-radius:999px;
  padding:8px 13px;
  font-size:.86rem;
}

.hdr-nav a.on{
  background:rgba(var(--p-rgb),.16);
  color:var(--white);
}

.hdr-nav a.on::after{display:none}

.btn{
  min-height:38px;
  justify-content:center;
  border-radius:10px;
  font-weight:750;
}

.btn-pri{
  background:linear-gradient(135deg,var(--p),var(--p-d));
  box-shadow:0 12px 26px rgba(var(--p-rgb),.25);
}

.btn-pri:hover{filter:saturate(1.08) brightness(1.04)}

.btn-acc{
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  box-shadow:0 12px 26px rgba(245,158,11,.22);
}

.btn-ghost{
  background:rgba(255,255,255,.045);
  color:var(--txt);
  border-color:var(--bdr2);
}

html[data-theme="light"] .btn-ghost{background:#fff}

.card,.exam-card,.group-card,.custom-test-card,.exam-level-card,.adm-tbl-wrap,.auth-box,.blog-card,.step-card,.exam-list-card,.exam-table-card,.s-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    var(--card);
  border:1px solid var(--bdr);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}

html[data-theme="light"] .card,
html[data-theme="light"] .exam-card,
html[data-theme="light"] .group-card,
html[data-theme="light"] .custom-test-card,
html[data-theme="light"] .exam-level-card,
html[data-theme="light"] .adm-tbl-wrap,
html[data-theme="light"] .auth-box,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .exam-list-card,
html[data-theme="light"] .exam-table-card,
html[data-theme="light"] .s-card{
  background:#fff;
}

.card:hover,.exam-card:hover,.exam-level-card:hover,.exam-list-card:hover,.blog-card:hover,.step-card:hover{
  transform:translateY(-5px);
  border-color:rgba(var(--p-rgb),.34);
  box-shadow:var(--sh);
}

.hero{
  padding:84px 24px 58px;
  text-align:left;
  background:
    linear-gradient(135deg,rgba(var(--p-rgb),.18),transparent 34%),
    linear-gradient(315deg,rgba(245,158,11,.12),transparent 40%),
    transparent;
  border-bottom:1px solid var(--bdr);
}

.hero::after{background:linear-gradient(90deg,transparent,var(--p),#f59e0b,transparent);opacity:.5}
.hero-content{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,500px);gap:34px;align-items:center}
.hero-copy{max-width:720px}
.hero-content > .hero-copy:only-child{max-width:820px}
.hero-eyebrow{
  background:rgba(255,255,255,.07);
  border-color:var(--bdr2);
  color:var(--acc2);
  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(2.3rem,6vw,5rem);
  letter-spacing:0;
  line-height:1.02;
  max-width:760px;
}

.hero p{
  margin:0 0 28px;
  max-width:640px;
  font-size:1.05rem;
  line-height:1.8;
}

.hero-btns{justify-content:flex-start;margin-bottom:0}
.hero-visual{position:relative}
.typing-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)),
    rgba(9,18,24,.86);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 28px 70px rgba(0,0,0,.34);
  overflow:hidden;
  transform:rotate(1deg);
}

html[data-theme="light"] .typing-panel{background:#fff;box-shadow:0 28px 70px rgba(14,38,47,.14)}

.typing-panel-top{
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  border-bottom:1px solid var(--bdr);
  color:var(--txt2);
  font-size:.82rem;
}

.typing-panel-top span{width:10px;height:10px;border-radius:999px;background:#ef4444}
.typing-panel-top span:nth-child(2){background:#f59e0b}
.typing-panel-top span:nth-child(3){background:#22c55e}
.typing-panel-top strong{margin-left:auto;color:var(--txt);font-size:.78rem;text-transform:uppercase;letter-spacing:1px}

.typing-line{
  margin:14px 18px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--bdr);
  color:var(--txt);
  font-size:.95rem;
}

html[data-theme="light"] .typing-line{background:var(--bg3)}
.typing-line.good{border-color:rgba(52,211,153,.28);color:#c9fff0}
html[data-theme="light"] .typing-line.good{color:#0f766e}
.typing-line.active{position:relative;border-color:rgba(var(--p-rgb),.45);box-shadow:0 0 0 3px rgba(var(--p-rgb),.08)}
.typing-line.active::after{content:'';display:inline-block;width:2px;height:1.1em;background:var(--p);margin-left:4px;vertical-align:-2px;animation:fadeIn .9s infinite alternate}
.typing-line.muted-line{color:var(--txt3)}

.typing-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--bdr);
  margin-top:16px;
}

.typing-metrics div{background:rgba(255,255,255,.045);padding:18px;text-align:center}
html[data-theme="light"] .typing-metrics div{background:#fff}
.typing-metrics strong{display:block;font-family:var(--fh);font-size:1.7rem;color:var(--p)}
.typing-metrics span{font-size:.68rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px}

.hero-stats{
  grid-column:1/-1;
  margin-top:30px;
  max-width:none;
  border-radius:16px;
  background:rgba(255,255,255,.045);
}

html[data-theme="light"] .hero-stats{background:#fff}
.hero-stat{padding:16px 22px}
.hero-stat strong{font-size:1.55rem}

.sec{padding:76px 0}
.sec-alt{background:rgba(255,255,255,.025);border-block:1px solid var(--bdr)}
html[data-theme="light"] .sec-alt{background:#edf3f5}
.sec-head{margin-bottom:34px}
.sec-tag{color:var(--acc);letter-spacing:1.5px}
.sec-head h2{letter-spacing:0}

.exam-stat-pill,.tag-pill,.badge,.group-status span,.adm-set-meta span{
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--bdr);
  color:var(--txt);
}

html[data-theme="light"] .exam-stat-pill,
html[data-theme="light"] .tag-pill,
html[data-theme="light"] .badge,
html[data-theme="light"] .group-status span,
html[data-theme="light"] .adm-set-meta span{background:var(--bg3)}

.page-banner,.exams-hero,.profile-hero{
  background:
    linear-gradient(135deg,rgba(var(--p-rgb),.18),transparent 38%),
    linear-gradient(315deg,rgba(245,158,11,.09),transparent 42%),
    var(--bg2)!important;
  border-bottom:1px solid var(--bdr);
}

.page-banner h1,.exams-hero h1{letter-spacing:0}

.exam-list-card{
  border-radius:16px;
  overflow:hidden;
}

.exam-list-accent{height:5px;background:linear-gradient(90deg,var(--exam-color),rgba(var(--p-rgb),.7))}
.exam-list-icon{
  background:color-mix(in srgb,var(--exam-color) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--exam-color) 35%,transparent);
}

input,textarea,select,.game-type-input,.custom-test-card textarea,.adm-form-card select,.adm-form-card input,.adm-form-card textarea{
  border-radius:10px;
  border-color:var(--bdr2);
  background:rgba(255,255,255,.055);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .game-type-input,
html[data-theme="light"] .custom-test-card textarea,
html[data-theme="light"] .adm-form-card select,
html[data-theme="light"] .adm-form-card input,
html[data-theme="light"] .adm-form-card textarea{background:#fff}

input:focus,textarea:focus,select:focus{
  border-color:rgba(var(--p-rgb),.55)!important;
  box-shadow:0 0 0 4px rgba(var(--p-rgb),.11)!important;
}

.adm-body{background:var(--bg)}
.adm-sb{background:rgba(9,18,24,.94);backdrop-filter:blur(16px)}
html[data-theme="light"] .adm-sb{background:#fff}
.adm-topbar{background:rgba(9,18,24,.78);backdrop-filter:blur(16px)}
html[data-theme="light"] .adm-topbar{background:rgba(255,255,255,.86)}

.adm-tbl th{background:rgba(255,255,255,.055)}
html[data-theme="light"] .adm-tbl th{background:var(--bg3)}

@media(max-width:900px){
  .hero-content{grid-template-columns:1fr}
  .hero{padding-top:58px;text-align:left}
  .hero-visual{max-width:560px}
  .hero-stats{margin-top:20px}
}

@media(max-width:768px){
  .hdr-inner{height:62px}
  .hdr-nav{display:none}
  .hero{padding:44px 16px 34px}
  .hero h1{font-size:2.25rem}
  .hero-btns .btn{flex:1;min-width:150px}
  .typing-panel{transform:none}
  .hero-stats{display:grid;grid-template-columns:repeat(2,1fr)}
  .hero-stat{border-right:0;border-bottom:1px solid var(--bdr)}
  .hero-stat:nth-last-child(1){grid-column:1/-1}
}

@media(max-width:480px){
  .hero h1{font-size:2rem}
  .hero p{font-size:.96rem}
  .hero-btns{display:grid;grid-template-columns:1fr}
  .typing-line{font-size:.82rem;margin:10px 12px;padding:11px}
  .typing-metrics strong{font-size:1.25rem}
  .hero-stats{grid-template-columns:1fr}
}

/* ============================================================
   USER DROPDOWN MENU
   ============================================================ */
.user-dropdown{position:relative;display:inline-block}
.dropdown-trigger{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--bdr2);
  color:var(--txt);
  padding:6px 12px;
  border-radius:var(--r3);
  font-size:.875rem;font-weight:600;
  cursor:pointer;transition:var(--tr);
}
.dropdown-trigger:hover{background:rgba(255,255,255,.08);border-color:var(--p)}
.dropdown-arrow{font-size:.6rem;color:var(--txt2)}
.dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--r);min-width:180px;
  box-shadow:var(--sh);
  display:none;flex-direction:column;
  z-index:200;
}
.user-dropdown.active .dropdown-menu{display:flex}
.dropdown-menu a,.dropdown-item{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;color:var(--txt);
  font-size:.875rem;font-weight:500;
  cursor:pointer;transition:var(--tr);
  border:none;background:none;text-align:left;
}
.dropdown-menu a:hover,.dropdown-item:hover{background:rgba(255,255,255,.06);color:var(--p)}
.dropdown-divider{height:1px;background:var(--bdr);margin:4px 0}
.logout-link{color:var(--err)}
.logout-link:hover{background:rgba(248,113,113,.08);color:var(--err)}