/* ================= TypeX — Premium Design System ================= */
/* Fonts are bundled locally in assets/fonts/ (no internet connection needed) */
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/sora-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/sora-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Sora'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/sora-latin-800-normal.woff2') format('woff2'); }

:root{
  --primary: #4f46e5;
  --primary2: #7c3aed;
  --accent: #f59e0b;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --text: #1c1d2e;
  --text-muted: #6b7086;
  --border: #e6e7f0;
  --success: #16a34a;
  --danger: #dc2626;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20,20,50,.06), 0 1px 1px rgba(20,20,50,.04);
  --shadow-md: 0 10px 30px -10px rgba(30,20,90,.18);
  --shadow-lg: 0 25px 60px -15px rgba(30,20,90,.28);
  --grad: linear-gradient(135deg, var(--primary), var(--primary2));
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-heading: 'Sora', sans-serif;
}

[data-dark="1"]{
  --bg: #0f1020;
  --surface: #171833;
  --surface-2: #1f2140;
  --text: #eef0ff;
  --text-muted: #a2a4c8;
  --border: #2b2d55;
  --shadow-md: 0 10px 30px -10px rgba(0,0,0,.5);
  --shadow-lg: 0 25px 60px -15px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ overflow-x:hidden; width:100%; }
body{ overflow-x:hidden; width:100%; }
body{
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent),
    radial-gradient(1000px 500px at -10% 10%, color-mix(in srgb, var(--primary2) 8%, transparent), transparent),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-heading); letter-spacing:-.02em; margin:0 0 .4em}
a{color:var(--primary); text-decoration:none}
p{line-height:1.65; color:var(--text-muted)}
img{max-width:100%}

.container{max-width:1180px; margin:0 auto; padding:0 24px}
.section{padding:64px 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:12px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
.btn-ghost{ background:var(--surface-2); color:var(--text); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-sm{ padding:8px 14px; font-size:13px; border-radius:9px; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.navbar .container{ position:relative; display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; font-size:19px; color:var(--text); flex-shrink:0; }
.brand .logo-badge{ width:38px; height:38px; border-radius:11px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px; letter-spacing:0.3px; box-shadow:var(--shadow-sm);}

/* nav-collapse holds nav-links + nav-cta; on desktop it's just a flex row,
   on mobile it becomes a toggleable dropdown panel driven by .nav-toggle */
.nav-collapse{ display:flex; align-items:center; gap:14px; }
.nav-links{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.nav-links a.nav-link, .nav-links .nav-link-btn{ color:var(--text-muted); font-weight:600; font-size:13.5px; padding:8px 11px; border-radius:9px; white-space:nowrap; }
.nav-links a.nav-link:hover, .nav-links a.nav-link.active{ color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }
.nav-link-strong{ color:var(--primary) !important; background:color-mix(in srgb, var(--primary) 10%, transparent); }
.nav-cta{ display:flex; gap:8px; align-items:center; flex-shrink:0; }
@media (max-width:1180px){ .nav-links a.nav-link, .nav-links .nav-link-btn{ padding:8px 9px; font-size:13px; } }

/* ---------- Nav dropdown groups (Practice / Compete / Resources) ---------- */
.nav-item{ position:relative; }
.nav-link-btn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; font-family:var(--font-body); cursor:pointer;
}
.nav-link-btn .chevron{ transition:transform .18s ease; color:var(--text-muted); flex-shrink:0; }
.nav-item.open .nav-link-btn{ color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }
.nav-item.open .nav-link-btn .chevron{ transform:rotate(180deg); color:var(--primary); }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }

.nav-dropdown{
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:calc(100% + 8px); left:0; min-width:200px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-md); padding:6px; z-index:60;
}
.nav-item.open .nav-dropdown{ display:flex; }
.nav-dropdown a{ color:var(--text-muted); font-weight:600; font-size:13.5px; padding:9px 12px; border-radius:8px; white-space:nowrap; }
.nav-dropdown a:hover{ color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }

/* ---------- Center the nav links between brand and cta (desktop only) ---------- */
@media (min-width:901px){
  .navbar .container{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; }
  .brand{ grid-column:1; justify-self:start; }
  .nav-collapse{ display:contents; }
  .nav-links{ grid-column:2; justify-self:center; }
  .nav-cta{ grid-column:3; justify-self:end; }
}

/* ---------- Live-update toasts (admin sidebar polling) ---------- */
.txp-toast-stack{
  position:fixed; top:18px; right:18px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.txp-toast{
  pointer-events:auto; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-md); padding:11px 14px; min-width:230px; max-width:320px;
  font-size:13.5px; font-weight:600; color:var(--text);
  opacity:0; transform:translateX(16px); transition:opacity .22s ease, transform .22s ease;
}
.txp-toast.show{ opacity:1; transform:translateX(0); }
.txp-toast-ico{ font-size:17px; flex-shrink:0; }
.txp-toast-txt{ line-height:1.35; }

.txp-reconnect-pill{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--surface); border:1px solid var(--border); border-radius:99px;
  box-shadow:var(--shadow-md); padding:8px 16px; font-size:12.5px; font-weight:700;
  color:var(--text-muted); z-index:9999; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.txp-reconnect-pill.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px; height:40px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle-bar{
  display:block;
  width:20px; height:2px;
  border-radius:2px;
  background:var(--text);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle.open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav-collapse{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:var(--surface);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:var(--shadow-md);
    padding:10px 16px 18px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:max-height .28s ease, opacity .2s ease;
  }
  .nav-collapse.open{
    max-height:80vh;
    overflow-y:auto;
    opacity:1;
    pointer-events:auto;
  }
  .nav-links{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-links a.nav-link{ padding:12px 10px; border-radius:8px; }
  .nav-link-btn{ width:100%; justify-content:space-between; padding:12px 10px; border-radius:8px; }
  .nav-dropdown{
    position:static; display:none; box-shadow:none; border:none; background:transparent;
    padding:2px 0 4px 14px; margin:0;
  }
  .nav-item.open .nav-dropdown{ display:flex; }
  .nav-dropdown a{ padding:10px; }
  .nav-cta{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:8px;
    padding-top:14px;
    border-top:1px solid var(--border);
  }
  .nav-cta .btn{ width:100%; text-align:center; }
}

/* ---------- Hero ---------- */
.hero{ padding:80px 0 60px; text-align:center; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:99px; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); font-weight:700; font-size:13px; margin-bottom:22px; }
.hero h1{ font-size:52px; max-width:820px; margin:0 auto 18px; }
.hero h1 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ max-width:600px; margin:0 auto 34px; font-size:17px; }
p.lead{ font-size:17px; color:var(--text-muted); }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Hero Logo Intro ---------- */
/* Stage is sized to the outermost orbit so rings never need to overlap: each
   orbit sits on its own radius with a gap bigger than a badge's diameter,
   so the four icons can never collide no matter where they are in their spin. */
.hero-logo-stage{
  position:relative;
  width:430px; height:430px;
  max-width:100%;
  margin:0 auto 30px;
  display:flex; align-items:center; justify-content:center;
  perspective:1000px;
}
.hero-logo-stage .orbit-glow{
  position:absolute;
  width:170px; height:170px;
  border-radius:50%;
  background:var(--grad);
  filter:blur(32px);
  opacity:0.45;
  animation:pulse-glow 3.2s ease-in-out infinite;
}
/* orbit tracks: each is its own circle, its own radius, its own speed/direction */
.hero-logo-stage .orbit{
  position:absolute; top:50%; left:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px dashed color-mix(in srgb, var(--primary) 28%, transparent);
}
.hero-logo-stage .orbit.o1{ width:156px; height:156px; animation:spin-cw-orbit  8s  linear infinite; }
.hero-logo-stage .orbit.o2{ width:236px; height:236px; animation:spin-ccw-orbit 12s linear infinite; border-style:solid; border-color:color-mix(in srgb, var(--primary2) 22%, transparent); }
.hero-logo-stage .orbit.o3{ width:316px; height:316px; animation:spin-cw-orbit  17s linear infinite; }
.hero-logo-stage .orbit.o4{ width:396px; height:396px; animation:spin-ccw-orbit 23s linear infinite; border-style:solid; border-color:color-mix(in srgb, var(--primary2) 16%, transparent); }
.hero-logo-stage .orbit .badge{
  position:absolute;
  top:-17px; left:50%; margin-left:-17px;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
/* badges spin back the opposite way of their track, at the same speed,
   so the icon itself always stays upright while it travels around the circle */
.hero-logo-stage .orbit.o1 .badge{ animation:spin-ccw 8s  linear infinite; }
.hero-logo-stage .orbit.o2 .badge{ animation:spin-cw  12s linear infinite; }
.hero-logo-stage .orbit.o3 .badge{ animation:spin-ccw 17s linear infinite; }
.hero-logo-stage .orbit.o4 .badge{ animation:spin-cw  23s linear infinite; }

.hero-logo-stage .logo-float{
  position:relative;
}
.hero-logo-stage .logo-core{
  position:relative;
  width:130px; height:130px;
  display:flex; align-items:center; justify-content:center;
}
.hero-logo-stage .logo-core img{
  width:94%; height:94%;
  object-fit:contain;
}
@keyframes spin-cw-orbit{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spin-ccw-orbit{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes spin-cw{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes spin-ccw{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@keyframes spin-y{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
@keyframes float-logo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes pulse-glow{ 0%,100%{ opacity:0.35; transform:scale(1); } 50%{ opacity:0.6; transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce){
  .hero-logo-stage *{ animation:none !important; }
}
@media (max-width:700px){
  .hero-logo-stage{ transform:scale(0.62); transform-origin:center center; margin:-82px auto -112px; }
}
@media (max-width:420px){
  .hero-logo-stage{ transform:scale(0.46); margin:-116px auto -146px; }
}


/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:26px; }
.card-pad-sm{ padding:16px; }
.card-hover{ transition:.2s ease; }
.card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--primary) 30%, var(--border)); }

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- Product Cards (Master Course / Scheduled Tests) ----------
   Each card's identity comes from the script it teaches — the head banner
   carries a large watermark of that script's own letterform (Aa / अ / ਅ)
   rather than a generic icon, so English/Hindi/Punjabi read apart at a
   glance the same way they do on the keyboard itself. */
.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:.25s cubic-bezier(.2,.8,.2,1);
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--pc1) 35%, var(--border)); }

.pcard-head{ position:relative; padding:22px 22px 18px; background:linear-gradient(135deg, var(--pc1), var(--pc2)); color:#fff; overflow:hidden; }
.pcard-glyph{
  position:absolute; right:-8px; top:-22px; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-heading); font-weight:800; font-size:108px; line-height:1; color:rgba(255,255,255,.16);
}
.pcard-head-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.pcard-lang{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.22); padding:4px 10px; border-radius:99px; backdrop-filter:blur(4px); }
.pcard-live{ font-size:11.5px; font-weight:800; letter-spacing:.03em; background:rgba(255,255,255,.95); color:#dc2626; padding:4px 10px 4px 8px; border-radius:99px; display:inline-flex; align-items:center; gap:5px; }
.pcard-live::before{ content:''; width:6px; height:6px; border-radius:50%; background:#dc2626; animation:pcard-pulse 1.4s infinite; flex-shrink:0; }
@keyframes pcard-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.pcard-title{ position:relative; z-index:1; margin:0; font-size:19px; line-height:1.28; color:#fff; }

.pcard-body{ position:relative; padding:18px 22px 4px; flex:1; display:flex; flex-direction:column; }
.pcard-desc{ font-size:13.5px; margin:0 0 14px; color:var(--text-muted); line-height:1.6; }
.pcard-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.pcard-meta-item{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--text); background:var(--surface-2); padding:5px 10px; border-radius:9px; }

.pcard-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px 22px; margin-top:auto; }
.pcard-price{ font-family:var(--font-heading); font-weight:800; font-size:22px; color:var(--text); line-height:1; }
.pcard-free{ font-size:15px; font-weight:800; color:var(--success); }
.pcard-payform{ position:relative; margin:0 22px 22px; padding-top:16px; border-top:1px dashed var(--border); }
.pcard-status{ display:block; text-align:center; padding:10px; border-radius:10px; font-weight:700; font-size:13px; }
.pcard-cta-row{ padding:0 22px 22px; }

/* Per-script accent themes — kept inside the site's existing indigo/violet
   family for English (the default brand gradient), then a warm marigold for
   Hindi and a teal-emerald for Punjabi so the three never get mistaken for
   each other in a crowded grid. */
.pcard--english{ --pc1:#4f46e5; --pc2:#7c3aed; }
.pcard--hindi{ --pc1:#f59e0b; --pc2:#ea580c; }
.pcard--punjabi{ --pc1:#0d9488; --pc2:#059669; }
.pcard--combined{ --pc1:#7c3aed; --pc2:#db2777; }
.pcard--neutral{ --pc1:var(--primary); --pc2:var(--primary2); }
.pcard--combined .pcard-glyph{ font-size:52px; right:14px; top:10px; letter-spacing:-1px; }

@media (max-width:600px){ .pcard-glyph{ font-size:86px; top:-16px; } }


.feature-icon{ width:46px; height:46px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; margin-bottom:14px; }

/* ---------- Certificate verification banner (homepage) ---------- */
.verify-cta-card{
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  background:
    radial-gradient(600px 200px at 100% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent),
    var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:32px 34px; box-shadow:var(--shadow-sm);
}
.verify-cta-card .verify-cta-icon{ width:52px; height:52px; border-radius:14px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; box-shadow:var(--shadow-sm); }
.verify-cta-card h2{ margin:0 0 4px; font-size:21px; }
.verify-cta-card p{ margin:0; max-width:440px; font-size:13.5px; }
.verify-cta-text{ display:flex; align-items:flex-start; gap:16px; }
.verify-cta-form{ display:flex; gap:10px; flex-wrap:wrap; }
.verify-cta-form input[type=text]{ min-width:210px; }
@media (max-width:760px){
  .verify-cta-card{ flex-direction:column; align-items:stretch; text-align:center; padding:26px; }
  .verify-cta-text{ flex-direction:column; align-items:center; text-align:center; }
  .verify-cta-form{ justify-content:center; }
}

/* ---------- Practice-type mode cards ---------- */
.mode-card-group{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.lang-card-group{ grid-template-columns:repeat(auto-fit, minmax(140px, max-content)); }
@media (max-width:900px){ .mode-card-group{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .mode-card-group{ grid-template-columns:1fr; } .lang-card-group{ grid-template-columns:repeat(auto-fit, minmax(100px, max-content)); } }
.mode-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:20px; text-decoration:none; color:var(--text); transition:.2s ease;
}
.mode-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--primary) 30%, var(--border)); }
.mode-card.active{
  border-color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, var(--surface));
  box-shadow:var(--shadow-md);
}
.mode-card.locked-card{ opacity:.65; border-style:dashed; }
.mode-card.locked-card:hover{ opacity:1; }
.mode-card-icon{ font-size:26px; line-height:1; }
.mode-card-title{ font-weight:700; font-size:16px; }
.mode-card-sub{ font-size:13px; color:var(--text-muted); }

.lang-card-group{ grid-template-columns:repeat(auto-fit, minmax(120px, max-content)); justify-content:start; }
.lang-card{ flex-direction:row; align-items:center; gap:10px; padding:14px 20px; }
.lang-card .mode-card-icon{ font-size:20px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--surface-2); }
.lang-card.active .mode-card-icon{ background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary); }
.lang-card .mode-card-title{ font-size:15px; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px; font-size:12px; font-weight:700; }
.badge-primary{ background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary); }
.badge-success{ background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success); }
.badge-danger{ background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); }
.badge-accent{ background:color-mix(in srgb, var(--accent) 20%, transparent); color:#8a5a05; }

/* ---------- Announcement ticker/banner ---------- */
.announce-bar{ background:var(--grad); color:#fff; }
.announce-bar .container{ display:flex; align-items:center; gap:14px; padding:10px 24px; font-size:14px; font-weight:600; overflow:hidden; }
.announce-bar .tag{ background:rgba(255,255,255,.22); padding:3px 10px; border-radius:99px; font-size:11.5px; flex-shrink:0; }
.announce-list{ display:flex; flex-direction:column; gap:14px; }
.announce-item{ display:flex; gap:14px; padding:16px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); }

/* ---------- Forms ---------- */
label{ display:block; font-weight:600; font-size:13.5px; margin-bottom:6px; color:var(--text); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], select, textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:14.5px; transition:.15s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.form-group{ margin-bottom:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-hint{ font-size:12.5px; color:var(--text-muted); margin-top:4px; }
.auth-card{ max-width:440px; margin:60px auto; }

/* ---------- Table ---------- */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); font-size:13.5px; }
th{ color:var(--text-muted); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
tr:hover td{ background:var(--surface-2); }

/* ---------- Dashboard shell ---------- */
.dash-shell{ display:flex; min-height:calc(100vh - 72px); }
.dash-sidebar{ width:212px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); padding:14px 10px; transition:width .18s ease; position:relative; }
.dash-sidebar a{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; color:var(--text-muted); font-weight:600; font-size:13px; margin-bottom:1px; white-space:nowrap; overflow:hidden; }
.dash-sidebar a:hover{ background:var(--surface-2); color:var(--text); }
.dash-sidebar a.active{ background:var(--grad); color:#fff; }
.dash-sidebar a .ico{ flex-shrink:0; font-size:14px; width:18px; text-align:center; }
.dash-sidebar a .lbl{ overflow:hidden; text-overflow:ellipsis; }
.sidebar-badge{ margin-left:auto; flex-shrink:0; background:var(--danger,#e5484d); color:#fff; font-size:10.5px; font-weight:800; line-height:1; padding:3px 6px; border-radius:99px; min-width:8px; text-align:center; }
.dash-sidebar a.active .sidebar-badge{ background:#fff; color:var(--grad-start, #6d28d9); }
.dash-shell.sidebar-collapsed .sidebar-badge{ position:absolute; top:4px; right:4px; margin-left:0; }
.dash-main{ flex:1; padding:22px 26px; max-width:100%; overflow-x:auto; }

/* Sidebar group headings — small uppercase labels that break the long link
   list into scannable clusters instead of one dense wall of items. */
.sidebar-group-title{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); opacity:.65; padding:14px 10px 4px; }
.sidebar-group-title:first-child{ padding-top:4px; }

/* Collapse toggle — sits at the top of the sidebar, shrinks it down to an
   icon-only rail so a dense admin menu can be tucked away on demand. */
.sidebar-toggle-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:8px 10px; margin-bottom:8px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
  color:var(--text-muted); font-weight:700; font-size:12px; cursor:pointer;
}
.sidebar-toggle-btn:hover{ color:var(--text); }
.sidebar-toggle-btn .ico{ font-size:14px; transition:transform .18s ease; }

.dash-shell.sidebar-collapsed .dash-sidebar{ width:56px; }
.dash-shell.sidebar-collapsed .dash-sidebar .lbl,
.dash-shell.sidebar-collapsed .sidebar-group-title,
.dash-shell.sidebar-collapsed .sidebar-toggle-btn .txt{ display:none; }
.dash-shell.sidebar-collapsed .dash-sidebar a{ justify-content:center; padding:9px; }
.dash-shell.sidebar-collapsed .sidebar-toggle-btn .ico{ transform:rotate(180deg); }

@media (max-width:860px){
  .dash-shell{ flex-direction:column; }
  .dash-shell.sidebar-collapsed .dash-sidebar{ width:100%; }
  .dash-sidebar{ width:100%; display:flex; align-items:center; overflow-x:auto; gap:4px; border-right:none; border-bottom:1px solid var(--border); padding:10px; }
  .sidebar-toggle-btn{ display:none; }
  .sidebar-group-title{ display:none; }
  .dash-main{ padding:18px; }
}

.stat-card{ padding:15px 16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); }
.stat-card .num{ font-family:var(--font-heading); font-size:23px; font-weight:800; }
.stat-card .lbl{ color:var(--text-muted); font-size:12px; font-weight:600; }

/* ---------- Compact management table (admin quick actions etc.) ---------- */
.manage-table td{ vertical-align:middle; }
.manage-table .mt-icon{ font-size:17px; margin-right:8px; }
.manage-table .mt-title{ font-weight:700; font-size:13.5px; }
.manage-table .mt-desc{ font-size:12.5px; color:var(--text-muted); }
.manage-table td.mt-action{ text-align:right; white-space:nowrap; }

/* ---------- Theme swatches ---------- */
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
.theme-swatch{ position:relative; border-radius:14px; padding:16px; cursor:pointer; border:2px solid var(--border); background:var(--surface); transition:.15s; }
.theme-swatch:hover{ transform:translateY(-2px); }
.theme-swatch.selected{ border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.theme-swatch .preview{ height:44px; border-radius:9px; margin-bottom:10px; }
.theme-swatch .check{ position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; display:none; align-items:center; justify-content:center; font-size:12px; }
.theme-swatch.selected .check{ display:flex; }

/* ---------- Typing test ---------- */
.typing-stage{background: linear-gradient(180deg, var(--surface), var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);}
.typing-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.meta-pill{ background:white; padding:8px 16px; border-radius:10px; font-weight:700; font-size:16.5px; display:flex; gap:6px; align-items:center; }
.field-label{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:14px 0 6px; }
.field-label:first-child{ margin-top:0; }
.text-display{
  font-family:'Bookman Old Style','Courier New',monospace; font-size:20px; line-height:1.9;
  padding:18px; border-radius:12px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1.5px solid var(--border);
  height:220px; overflow-y:auto;
  white-space:normal; word-wrap:break-word; overflow-wrap:break-word;
  letter-spacing:.2px; user-select:none;
}
.text-display .ch{ position:relative; }
.text-display .ch.correct{ color:var(--success); }
.text-display .ch.wrong{ color:#fff; background:var(--danger); border-radius:2px; }
.text-display .ch.current{ background:color-mix(in srgb, var(--primary) 30%, transparent); border-radius:2px; }
.type-input{
  margin-top:0;
  width:100%;
  height: 200px;
  box-sizing:border-box;
  font-family: 'Bookman Old Style','Courier New',monospace;
  font-size: 20px;
  line-height:1.9;
  padding:18px;
  border-radius:12px;
  resize:none;
  overflow-y:hidden;
}
.backspace-toggle{ margin-top:12px; }
.backspace-toggle.active{ background:var(--danger); color:#fff; border-color:var(--danger); }

/* ---------- PSSSB-style chunked test page ---------- */
.chunk-reference{
  font-family:'Bookman Old Style','Courier New',monospace;
  font-size:20px;
  line-height:1.9;
  padding:18px;
  border-radius:12px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1.5px solid var(--border);
  height: 200px;
  overflow-y:auto;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:break-word;
  color:var(--text);
}
.toggle-btn{
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:9px; padding:9px 16px; cursor:pointer; font-weight:600; font-size:13.5px;
}
.toggle-btn.active{ background:var(--danger); color:#fff; border-color:var(--danger); }
#autoScrollToggle.active{ background:var(--grad); color:#fff; border-color:transparent; }

.results-table{ width:100%; border-collapse:collapse; }
.results-table td{ padding:11px 14px; border-bottom:1px solid var(--border); font-size:14px; }
.results-table td:first-child{ color:var(--text-muted); font-weight:600; width:45%; }
.results-table td:last-child{ font-weight:700; }

.error-block{ margin-bottom:18px; padding:16px; border-radius:12px; background:var(--surface); border:1px solid var(--border); }
.error-block-title{ font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:10px; }
.error-block-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .error-block-grid{ grid-template-columns:1fr; } }
.given-text, .typed-text{
  font-family:'Bookman old style',monospace; font-size:14.5px; line-height:1.8;
  padding:12px; border-radius:9px; background:var(--surface-2); white-space:pre-wrap; word-wrap:break-word;
}
.correct{ color:var(--success); }
.wrong{ color:#fff; background:var(--danger); padding:1px 4px; border-radius:3px; font-weight:600; }
.given{ color:var(--primary); }
.space-symbol{ color:#fff; background:var(--primary2); font-weight:900; padding:0 4px; margin:0 1px; border-radius:3px; }
[data-error-type="skip"]{ text-decoration:line-through; text-decoration-color:var(--danger); text-decoration-thickness:2px; }

/* ---------- Speed Words (continuous word-stream) mode ---------- */
.ws-word{ display:inline-block; padding:2px 6px; margin:2px; border-radius:6px; }
.ws-word.current{ background:var(--primary); color:#fff; }
.ws-word.correct{ background:transparent; }
.ws-word.wrong{ border-radius:6px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--border); padding:40px 0; margin-top:40px; }
footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--text-muted); font-size:13.5px; }

/* ---------- Leaderboard ---------- */
.rank-row{ display:flex; align-items:center; gap:16px; padding:16px; border-radius:12px; background:var(--surface); border:1px solid var(--border); margin-bottom:10px; }
.rank-badge{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-heading); flex-shrink:0; }
.rank-1{ background:linear-gradient(135deg,#ffd25c,#f5a524); color:#4a2f00; }
.rank-2{ background:linear-gradient(135deg,#e2e8f0,#b8c0cc); color:#333; }
.rank-3{ background:linear-gradient(135deg,#e0a374,#c47a45); color:#3b2100; }
.rank-other{ background:var(--surface-2); color:var(--text-muted); }

.alert{ padding:14px 18px; border-radius:12px; margin-bottom:16px; font-weight:600; font-size:14px; }
.alert-success{ background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); }
.alert-error{ background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }
.alert-info{ background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); }

.pagehead{ margin-bottom:18px; }

/* ---------- About & Features: scroll-reveal animations ---------- */
html{ scroll-behavior:smooth; }
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
}
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.10s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.17s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.31s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.38s; }
.stat-card .num{ transition:color .3s ease; }
.jump-nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:24px; }
.jump-nav a{
  font-size:13.5px; font-weight:600; color:var(--text-muted); padding:8px 16px;
  border:1.5px solid var(--border); border-radius:99px; transition:.2s ease;
}
.jump-nav a:hover{ color:var(--primary); border-color:var(--primary); transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .reveal-stagger > *{ transition:none !important; opacity:1 !important; transform:none !important; }
  .jump-nav a{ transition:none; }
  .jump-nav a:hover{ transform:none; }
}
.pagehead h1{ font-size:30px; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--text-muted); }

/* 🦑 Squid Game easter egg — type "squid" anywhere on the page */
.squid-egg-overlay{
  position:fixed; inset:0; background:rgba(10,10,20,.94); z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:24px; overflow:hidden;
  animation:squidFadeIn .3s ease;
}
@keyframes squidFadeIn{ from{opacity:0} to{opacity:1} }

.squid-egg-doll{ font-size:72px; margin-bottom:14px; animation:squidSpin 2.4s linear infinite; }
@keyframes squidSpin{ 0%,80%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }

.squid-egg-light{
  font-family:var(--font-heading); font-weight:900; font-size:clamp(24px,5vw,44px);
  letter-spacing:.04em; padding:14px 30px; border-radius:16px; margin-bottom:16px;
  transition:background .2s, color .2s, box-shadow .2s;
}
.squid-egg-light.red{ background:#dc2626; color:#fff; box-shadow:0 0 60px rgba(220,38,38,.6); }
.squid-egg-light.green{ background:#16a34a; color:#fff; box-shadow:0 0 60px rgba(22,163,74,.6); }

.squid-egg-msg{ max-width:460px; font-size:14.5px; line-height:1.6; color:#d8d9ea; }
.squid-egg-close{ margin-top:22px; background:#fff; }

.squid-egg-confetti{ position:absolute; top:-8%; font-size:20px; animation:squidFall linear forwards; pointer-events:none; }
@keyframes squidFall{ to{ transform:translateY(115vh) rotate(360deg); opacity:.15; } }

.squid-perfect-badge{
  display:inline-block; margin-top:10px; padding:6px 14px; border-radius:999px;
  background:linear-gradient(135deg,#ffd25c,#f5a524); color:#4a2f00; font-weight:800; font-size:13px;
}

/* ---------- Squid Game: inline event edit row ---------- */
.edit-event-row{ display:none; }
.edit-event-row.is-open{ display:table-row; }

/* ---------- Brand logo image ---------- */
.brand .logo-img{ height:52px; width:auto; display:block; }

/* ---------- Ad slots (Google AdSense-ready placeholders) ---------- */
.ad-slot{ display:flex; align-items:center; justify-content:center; margin:22px 0; overflow:hidden; }
.ad-slot ins.adsbygoogle{ display:block; width:100%; }
.ad-slot-placeholder{
  width:100%; min-height:90px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--border); border-radius:12px; color:var(--text-muted);
  font-size:12px; letter-spacing:.03em; text-transform:uppercase; background:var(--surface-2);
}

/* ---------- Content protection ----------
   Disallow text selection sitewide, but always allow it inside real
   form fields (inputs, textareas, contenteditable, and anything the
   typing test explicitly marks as an input capture area). This pairs
   with assets/js/protect.js which blocks copy/cut/paste/drag events. */
body{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, [contenteditable="true"], [data-allow-input], [data-allow-input] *{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
img{ -webkit-user-drag:none; user-drag:none; pointer-events:auto; }

/* ---------- AI Assistant floating widget ---------- */
.ai-widget{ position:fixed; z-index:300; right:20px; bottom:20px; }
.ai-fab{
  width:60px; height:60px;
  border-radius:50%;
  border:none;
  background:var(--grad);
  color:#fff;
  font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transition:transform .18s ease;
}
.ai-fab:hover{ transform:scale(1.06); }
.ai-widget.open .ai-fab{ transform:scale(0.9); opacity:0.85; }

.ai-panel{
  position:fixed;
  right:20px; bottom:92px;
  width:360px; max-width:calc(100vw - 32px);
  height:min(560px, 72vh);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateY(16px) scale(0.97);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .18s ease;
}
.ai-panel.open{ transform:none; opacity:1; pointer-events:auto; }

.ai-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:var(--grad);
  color:#fff;
  flex-shrink:0;
}
.ai-panel-title{ display:flex; align-items:center; gap:10px; }
.ai-panel-avatar{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0;
}
.ai-panel-title strong{ font-size:14.5px; display:block; }
.ai-panel-sub{ font-size:12px; opacity:.85; }
.ai-close{
  background:rgba(255,255,255,.18); border:none; color:#fff;
  width:28px; height:28px; border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.ai-messages{
  flex:1; overflow-y:auto;
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.ai-msg{
  max-width:82%;
  padding:10px 13px;
  border-radius:14px;
  font-size:14px; line-height:1.5;
  word-wrap:break-word;
}
.ai-msg.user{
  align-self:flex-end;
  background:var(--grad);
  color:#fff;
  border-bottom-right-radius:4px;
}
.ai-msg.assistant{
  align-self:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  border-bottom-left-radius:4px;
}

.ai-typing{
  align-self:flex-start;
  margin:0 16px 10px;
  display:flex; gap:4px;
  padding:10px 13px;
  border-radius:14px;
  background:var(--surface);
  border:1px solid var(--border);
  width:fit-content;
}
.ai-typing span{
  width:6px; height:6px; border-radius:50%;
  background:var(--text-muted);
  animation:ai-bounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2){ animation-delay:.15s; }
.ai-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ai-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.ai-input-row{
  display:flex; align-items:flex-end; gap:8px;
  padding:12px;
  border-top:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
.ai-input-row textarea{
  flex:1; resize:none;
  max-height:120px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  font-family:inherit; font-size:14px;
  line-height:1.4;
}
.ai-send{
  width:38px; height:38px; border-radius:50%;
  border:none; background:var(--grad); color:#fff;
  font-size:15px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}

@media (max-width:640px){
  .ai-widget{ right:16px; bottom:16px; }
  .ai-panel{
    right:0; bottom:0; left:0; top:0;
    width:100%; height:100%; max-width:100%;
    border-radius:0;
  }
  .ai-panel-header{ padding-top:calc(14px + env(safe-area-inset-top)); }
  .ai-input-row{ padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){
  .ai-panel, .ai-fab, .ai-typing span{ transition:none !important; animation:none !important; }
}

/* ---------- Squid Game homepage spotlight ---------- */
.squid-spotlight{
  position:relative;
  padding-top:44px; padding-bottom:44px;
  background:linear-gradient(180deg, color-mix(in srgb, #ff2d55 6%, transparent), transparent 60%);
  border-radius:var(--radius);
}
.squid-spotlight-card{ position:relative; border:1.5px solid var(--border); }
.squid-spotlight-card:hover{ border-color:color-mix(in srgb, #ff2d55 40%, var(--border)); }
.squid-live-dot{ animation:pulse-dot 1.4s ease-in-out infinite; }
@keyframes pulse-dot{
  0%,100%{ opacity:1; }
  50%{ opacity:0.45; }
}

/* ---------- Live test results page ---------- */
#liveStatusBadge{ animation:pulse-dot 1.4s ease-in-out infinite; }

/* ---------- Live results: new-leader confetti burst ---------- */
.live-confetti-bit{ position:fixed !important; z-index:10000; top:-8%; }

/* ---------- Squid Game: elimination / survival full-screen reveal ---------- */
.squid-reveal-overlay{
  position:fixed; inset:0; z-index:9998;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:24px; overflow:hidden;
  animation:squidFadeIn .3s ease;
}
.squid-reveal-overlay.pass{ background:rgba(6,30,14,.96); }
.squid-reveal-overlay.fail{ background:rgba(35,6,10,.96); }
.squid-reveal-icon{ font-size:80px; margin-bottom:10px; animation:squidSpin 2.4s linear infinite; }
.squid-reveal-title{ font-family:var(--font-heading); font-weight:900; font-size:clamp(28px,5vw,48px); margin-bottom:10px; }
.squid-reveal-overlay.pass .squid-reveal-title{ color:#4ade80; }
.squid-reveal-overlay.fail .squid-reveal-title{ color:#f87171; }
.squid-reveal-msg{ max-width:480px; font-size:15px; line-height:1.6; color:#d8d9ea; margin-bottom:22px; }

/* ---------- Squid Game: survivor ticker ---------- */
.squid-survivor-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }

/* ---------- Candidate achievements ---------- */
.achievement-badge{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:13.5px; font-weight:600; margin:0 8px 8px 0; }