:root{
  --navy:#0A1633; --navy-2:#0F2148; --navy-3:#152C5B;
  --gold:#D4AF37; --gold-2:#F3E5AB; --gold-3:#AA820A;
  --cream:#FDFBF7; --ink:#141B2D; --muted:#6B7893;
  --ok:#12A150; --bad:#D92D20; --warn:#E8A33D;
  --r:18px; --r-sm:12px;
  --shadow:0 10px 30px -12px rgba(10,22,51,.28);
  --shadow-lg:0 26px 60px -20px rgba(10,22,51,.42);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Cairo',system-ui,-apple-system,sans-serif;
  background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(212,175,55,.16) .8px,transparent .8px);
  background-size:26px 26px; opacity:.7;
}
.page{position:relative; z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:800}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.font-amiri{font-family:'Amiri',serif}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(10,22,51,.97),rgba(10,22,51,.9));
  backdrop-filter:blur(10px);border-bottom:2px solid var(--gold);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.logo-badge{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:linear-gradient(145deg,var(--gold),#8B6B12);
  display:grid;place-items:center;color:var(--navy);font-weight:900;font-size:18px;
  border:2px solid #fff6;box-shadow:0 6px 16px -6px #D4AF3788;
}
.logo-txt{line-height:1.15}
.logo-txt b{display:block;font-size:15px;font-weight:800;color:#fff}
.logo-txt span{display:block;font-size:11px;color:var(--gold-2);opacity:.9}
.nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav a{
  color:#DCE4F5;font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:10px;
  transition:.18s;
}
.nav a:hover{background:#ffffff14;color:var(--gold-2)}
.nav a.on{background:var(--gold);color:var(--navy)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:14px;border:0;cursor:pointer;
  font-weight:800;font-size:15px;transition:transform .15s,box-shadow .2s,background .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-gold{background:linear-gradient(160deg,#F5DF8A,var(--gold) 45%,#B78F1E);color:#231A00;box-shadow:0 10px 24px -12px #D4AF37aa}
.btn-gold:hover{filter:brightness(1.05)}
.btn-navy{background:linear-gradient(160deg,var(--navy-3),var(--navy));color:#fff;box-shadow:0 10px 24px -14px #0A1633cc}
.btn-ghost{background:#ffffff;color:var(--navy);border:1.5px solid #E3E8F2}
.btn-ghost:hover{border-color:var(--gold);background:#FFFDF5}
.btn-ok{background:linear-gradient(160deg,#19B45F,var(--ok));color:#fff}
.btn-bad{background:linear-gradient(160deg,#E5483C,var(--bad));color:#fff}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:11px}
.btn-block{width:100%}

/* ---------- cards ---------- */
.card{
  background:#fff;border:1px solid #EAEDF5;border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card-pad{padding:20px}
.gold-line{border:1.5px solid rgba(212,175,55,.5);box-shadow:0 10px 34px -18px rgba(212,175,55,.7)}
.sect-title{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sect-title .bar{width:6px;height:26px;border-radius:99px;background:linear-gradient(180deg,var(--gold),#8B6B12)}
.sect-title h2{font-size:19px}
.sect-title p{margin:2px 0 0;font-size:12.5px;color:var(--muted);font-weight:600}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px;color:#25304A}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px;font-weight:600}
input[type=text],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid #DFE5F0;border-radius:13px;
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:#FCFDFF;
  transition:.16s; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(212,175,55,.14)}
textarea{min-height:96px;resize:vertical}
.row{display:grid;gap:14px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){.row-2,.row-3{grid-template-columns:1fr}}

/* ---------- alerts ---------- */
.alert{padding:13px 15px;border-radius:13px;font-size:13.5px;font-weight:700;display:flex;gap:9px;align-items:flex-start;margin-bottom:14px}
.alert-ok{background:#E9F9F0;color:#0B6B37;border:1px solid #B9EBCD}
.alert-bad{background:#FEF0EF;color:#8E1F17;border:1px solid #FAC9C5}
.alert-warn{background:#FFF7E8;color:#7A4E06;border:1px solid #F5DFAF}
.alert-info{background:#EFF5FF;color:#173E7A;border:1px solid #CBDCFA}

/* ---------- landing hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;transform:scale(1.04)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,51,.96) 0%,rgba(10,22,51,.82) 45%,rgba(10,22,51,.55) 100%)}
.hero-in{position:relative;z-index:2;padding:52px 0 46px;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;padding:34px 0 34px}}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  background:#D4AF3722;border:1px solid #D4AF3755;color:var(--gold-2);font-size:12.5px;font-weight:800;margin-bottom:16px;
}
.hero h1{font-size:clamp(26px,4.4vw,44px);line-height:1.24;letter-spacing:-.3px}
.hero h1 .gold{color:var(--gold);text-shadow:0 4px 30px rgba(212,175,55,.35)}
.hero-sub{margin:14px 0 0;font-size:15.5px;color:#C7D2E8;font-weight:600;line-height:1.85;max-width:520px}
.hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap;border-top:1px solid #ffffff1f;padding-top:20px}
.hero-stats b{display:block;font-size:24px;color:var(--gold);font-weight:900}
.hero-stats span{font-size:11.5px;color:#A8B7D4;font-weight:700}
.hero-art{position:relative}
.hero-art img{width:100%;border-radius:22px;border:2px solid #D4AF3766;box-shadow:var(--shadow-lg);display:block}
@media(max-width:900px){.hero-art{order:-1;max-width:420px;margin:0 auto}}

/* ---------- feature grid ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.feat{background:#fff;border:1px solid #EBEEF6;border-radius:16px;padding:18px;transition:.2s;box-shadow:0 6px 20px -16px #0A163355}
.feat:hover{transform:translateY(-3px);border-color:#D4AF3766;box-shadow:var(--shadow)}
.feat .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:18px;margin-bottom:12px;background:linear-gradient(150deg,#FFF7DC,#F5E6AC);color:#8A6A0B}
.feat h3{font-size:15px;margin-bottom:5px}
.feat p{margin:0;font-size:12.5px;color:var(--muted);font-weight:600;line-height:1.7}

/* ---------- stage rail ---------- */
.stago{display:flex;align-items:center;gap:0;overflow-x:auto;padding:6px 0 14px}
.stago-item{display:flex;align-items:center;gap:0;flex:none}
.stago-dot{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:12px;background:#fff;border:2px solid #E1E7F2;color:#9AA6BD;flex:none;
}
.stago-dot.done{background:linear-gradient(150deg,#F5DF8A,var(--gold));border-color:#B78F1E;color:#231A00}
.stago-dot.now{background:var(--navy);border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 5px #D4AF3733}
.stago-line{width:46px;height:3px;background:#E1E7F2;flex:none}
.stago-line.done{background:linear-gradient(90deg,var(--gold),#B78F1E)}

/* ---------- quiz ---------- */
.quiz-shell{
  min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,#14305F 0%,#0A1633 55%,#060E22 100%);
  color:#fff;padding:0 0 40px;
}
.quiz-top{
  position:sticky;top:0;z-index:40;background:rgba(6,14,34,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid #ffffff14;padding:10px 0;
}
.quiz-top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:800;background:#ffffff12;border:1px solid #ffffff1f;color:#D7E0F2}
.pill .num{color:var(--gold);font-size:15px;font-weight:900}
.timer{font-variant-numeric:tabular-nums;font-weight:900;font-size:20px;letter-spacing:.5px}
.timer.warn{color:#FFB020;animation:pulse .9s infinite}
.timer.crit{color:#FF6B60;animation:pulse .55s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.progress{height:9px;border-radius:99px;background:#ffffff1a;overflow:hidden}
.progress > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#F3E5AB);transition:width .35s}

.q-card{
  background:linear-gradient(165deg,#11224A,#0B1730);border:1px solid #ffffff1c;border-radius:22px;
  padding:24px;box-shadow:0 24px 60px -30px #000;
}
.q-text{font-size:clamp(17px,2.4vw,23px);font-weight:800;line-height:1.75;margin:0 0 20px}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:right;
  padding:15px 17px;border-radius:15px;margin-bottom:11px;cursor:pointer;
  background:#ffffff0d;border:1.5px solid #ffffff1f;color:#EAF0FB;font-size:15px;font-weight:700;
  transition:.16s;font-family:inherit;
}
.opt:hover:not(:disabled){background:#ffffff17;border-color:#D4AF3788;transform:translateX(-3px)}
.opt .k{
  width:31px;height:31px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:#ffffff1a;font-weight:900;font-size:13px;color:var(--gold-2);
}
.opt.ok{background:#12A15026;border-color:#12A150;color:#C6F5DA}
.opt.ok .k{background:#12A150;color:#fff}
.opt.bad{background:#D92D2026;border-color:#D92D20;color:#FFD5D1}
.opt.bad .k{background:#D92D20;color:#fff}
.opt:disabled{cursor:default}

/* cards phase */
.cardpicks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.cardpicks{grid-template-columns:1fr}}
.pickcard{
  position:relative;border-radius:18px;overflow:hidden;cursor:pointer;border:0;padding:0;
  background:#0B1730;transition:.2s;box-shadow:0 16px 34px -20px #000;
}
.pickcard:hover{transform:translateY(-5px) scale(1.015)}
.pickcard img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.pickcard .pc-meta{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(0deg,#000000DD,#00000000);text-align:center}
.pickcard .pc-meta b{display:block;font-size:16px;color:#fff}
.pickcard .pc-meta span{font-size:12px;color:#FFD98A;font-weight:800}
.pickcard:disabled{opacity:.45;cursor:not-allowed}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border-radius:14px;border:1px solid #E9EDF6;background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:600px}
table.tbl th{
  background:#F7F9FE;color:#3C4A66;font-weight:800;font-size:12px;text-align:right;
  padding:11px 12px;border-bottom:1.5px solid #E9EDF6;white-space:nowrap;
}
table.tbl td{padding:11px 12px;border-bottom:1px solid #F1F4FA;font-weight:600;color:#2A3550}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#FCFDFF}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:800}
.tag-ok{background:#E7F8EE;color:#0B6B37}
.tag-bad{background:#FEEFEE;color:#96231A}
.tag-warn{background:#FFF6E5;color:#7A4E06}
.tag-info{background:#EDF3FF;color:#1B4A8F}
.tag-mute{background:#F1F3F8;color:#5D6B85}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:1.5px;color:#8A6A0B;background:#FFF8E2;padding:2px 8px;border-radius:7px;font-size:12px}

/* ---------- admin ---------- */
.admin-shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:#F4F6FB}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}}
.side{background:linear-gradient(180deg,#0A1633,#0D1D40);color:#C6D2E8;padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
@media(max-width:900px){.side{height:auto;position:static}}
.side-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px;border-bottom:1px solid #ffffff14;margin-bottom:12px}
.side-brand b{color:#fff;font-size:13.5px;display:block}
.side-brand span{color:var(--gold-2);font-size:10.5px}
.side nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  font-size:13.5px;font-weight:700;color:#B8C6DE;margin-bottom:3px;transition:.15s;cursor:pointer;
}
.side nav a:hover{background:#ffffff0f;color:#fff}
.side nav a.on{background:linear-gradient(100deg,var(--gold),#C9A227);color:#221A00;font-weight:800}
.side nav a i{width:18px;text-align:center;font-size:13px}
.admin-main{padding:20px;min-width:0}
@media(max-width:600px){.admin-main{padding:12px}}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.admin-head h1{font-size:21px}
.admin-head p{margin:3px 0 0;font-size:12.5px;color:var(--muted);font-weight:600}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:13px}
.stat{background:#fff;border:1px solid #E9EDF6;border-radius:15px;padding:15px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),#F3E5AB)}
.stat b{display:block;font-size:26px;font-weight:900;color:var(--navy);line-height:1.2}
.stat span{font-size:11.5px;color:var(--muted);font-weight:700}
.stat .ic{position:absolute;left:12px;top:12px;font-size:17px;color:#D4AF3799}
.tabbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabbar button{
  padding:8px 14px;border-radius:11px;border:1.5px solid #E4E9F3;background:#fff;
  font-size:12.5px;font-weight:800;color:#4A5876;cursor:pointer;transition:.15s;
}
.tabbar button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.hide{display:none!important}

/* ---------- registration steps ---------- */
.step-rail{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px;flex-wrap:nowrap}
.step{display:flex;align-items:center;gap:7px;flex:none}
.step .n{
  width:29px;height:29px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#fff;border:2px solid #DFE5F0;color:#9AA6BD;font-size:12.5px;font-weight:900;
}
.step b{font-size:12px;font-weight:800;color:#9AA6BD;white-space:nowrap}
.step.on .n{background:linear-gradient(150deg,#F5DF8A,var(--gold));border-color:#B78F1E;color:#231A00}
.step.on b{color:var(--navy)}
.step.done .n{background:#12A150;border-color:#0B6B37;color:#fff}
.step.done b{color:#0B6B37}
.step-line{width:38px;height:2.5px;background:#E4E9F3;flex:none;margin:0 6px;border-radius:99px}
.step-line.done{background:#12A150}
@media(max-width:560px){
  .step b{display:none}
  .step-line{width:26px;margin:0 4px}
}

/* ---------- placement test ---------- */
.pt-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-radius:15px;background:linear-gradient(160deg,#0A1633,#152C5B);color:#fff;margin-bottom:14px;
}
.pt-head .pt-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pt-timer{font-variant-numeric:tabular-nums;font-weight:900;font-size:20px;color:var(--gold)}
.pt-timer.warn{color:#FFB020}
.pt-timer.crit{color:#FF6B60;animation:pulse .6s infinite}
.pt-dots{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
.pt-dot{
  width:23px;height:23px;border-radius:7px;display:grid;place-items:center;
  font-size:10.5px;font-weight:900;background:#F1F4FA;color:#7B89A3;border:1px solid #E4E9F3;
}
.pt-dot.cur{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.pt-dot.ok{background:#12A150;color:#fff;border-color:#0B6B37}
.pt-dot.bad{background:#D92D20;color:#fff;border-color:#96231A}

.pt-q{font-size:17.5px;font-weight:800;line-height:1.8;margin:0 0 16px;color:var(--ink)}
.pt-opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:right;
  padding:13px 15px;border-radius:13px;margin-bottom:10px;cursor:pointer;
  background:#FCFDFF;border:1.5px solid #E1E7F2;color:var(--ink);font-size:14.5px;font-weight:700;
  transition:.16s;font-family:inherit;
}
.pt-opt:hover:not(:disabled){background:#FFFDF5;border-color:#D4AF3788;transform:translateX(-2px)}
.pt-opt .k{
  width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:#F1F4FA;font-weight:900;font-size:12px;color:#6B7893;
}
.pt-opt.ok{background:#E9F9F0;border-color:#12A150;color:#0B6B37}
.pt-opt.ok .k{background:#12A150;color:#fff}
.pt-opt.bad{background:#FEF0EF;border-color:#D92D20;color:#96231A}
.pt-opt.bad .k{background:#D92D20;color:#fff}
.pt-opt:disabled{cursor:default;opacity:.95}
.pt-opt.reveal{background:#E9F9F0;border-color:#12A150;color:#0B6B37;box-shadow:0 0 0 3px #12A15022}
.pt-opt.reveal .k{background:#12A150;color:#fff}

.pt-fb{
  display:none;align-items:flex-start;gap:9px;padding:12px 14px;border-radius:12px;
  font-size:13px;font-weight:700;line-height:1.8;margin-top:4px;
  animation:up .22s;
}
.pt-fb.show{display:flex}
.pt-fb.ok{background:#E9F9F0;color:#0B6B37;border:1px solid #B9EBCD}
.pt-fb.bad{background:#FEF0EF;color:#96231A;border:1px solid #FAC9C5}

/* result dial */
.pt-dial{
  width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  border:7px solid #EDF0F7;position:relative;
}
.pt-dial b{font-size:31px;font-weight:900;color:var(--navy);line-height:1}
.pt-dial span{font-size:11px;font-weight:800;color:var(--muted);margin-top:2px}
.pt-dial.pass{border-color:#12A150;background:#F3FCF7}
.pt-dial.pass b{color:#0B6B37}
.pt-dial.fail{border-color:#E8A33D;background:#FFFBF2}
.pt-dial.fail b{color:#8A5A06}

/* shake for wrong answer */
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.shake{animation:shake .42s}

/* ---------- admin students: categories ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px;margin-bottom:14px}
.cat{
  background:#fff;border:1.5px solid #E9EDF6;border-radius:14px;padding:13px 14px;
  cursor:pointer;transition:.17s;position:relative;overflow:hidden;
}
.cat:hover{transform:translateY(-2px);box-shadow:0 10px 24px -18px #0A163355;border-color:#D4AF3766}
.cat.on{border-color:var(--gold);background:#FFFDF5;box-shadow:0 0 0 3px #D4AF3722}
.cat .cat-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cat .cat-ic{
  width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:12.5px;flex:none;
}
.cat b{display:block;font-size:22px;font-weight:900;color:var(--navy);line-height:1.15;margin-top:7px}
.cat span{font-size:11.5px;color:var(--muted);font-weight:700}
.score-badge{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;
  font-size:11px;font-weight:900;background:#FFF6E5;color:#8A5A06;
}
.score-badge.hi{background:#E9F9F0;color:#0B6B37}
.score-badge.lo{background:#FEF0EF;color:#96231A}
.score-badge.none{background:#F1F3F8;color:#7B89A3}
.center-min{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:32px 16px}
.authbox{width:100%;max-width:420px}
.mono{font-family:ui-monospace,monospace}
.spinner{width:16px;height:16px;border:2.5px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.toast-host{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#0A1633;color:#fff;padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow-lg);border:1px solid #D4AF3744;animation:up .25s}
.toast.bad{background:#8E1F17;border-color:#D92D2055}
.toast.ok{background:#0B6B37;border-color:#12A15055}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9998}
.big-code{
  font-family:ui-monospace,monospace;font-size:clamp(26px,7vw,42px);font-weight:900;letter-spacing:8px;
  color:var(--navy);background:linear-gradient(180deg,#FFF9E6,#F7ECC6);border:2px dashed var(--gold);
  border-radius:16px;padding:14px 10px;text-align:center;direction:ltr;
}
.sec-divider{height:1px;background:linear-gradient(90deg,transparent,#D4AF3755,transparent);margin:26px 0}
.small{font-size:12px;color:var(--muted);font-weight:600;line-height:1.7}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed #EDF0F7;font-size:13px;font-weight:700}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted);font-weight:600}
.badge-stage{background:var(--navy);color:var(--gold);padding:4px 12px;border-radius:99px;font-size:11.5px;font-weight:800;display:inline-block}

/* bracket */
.bracket-scroll{overflow-x:auto;padding-bottom:14px}
.bracket{display:flex;gap:26px;min-width:max-content;align-items:flex-start}
.bcol{min-width:190px}
.bcol h4{font-size:12px;color:var(--muted);margin-bottom:10px;text-align:center;font-weight:800}
.bmatch{background:#fff;border:1.5px solid #E6EAF4;border-radius:12px;padding:9px 11px;margin-bottom:12px;box-shadow:0 6px 18px -16px #0A163355}
.bmatch .p{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;padding:3px 0;color:#2C3853}
.bmatch .p.win{color:#0B6B37;font-weight:900}
.bmatch .p .sc{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px}
.bmatch .p.win .sc{color:#0B6B37}
.bmatch .p.tbd{color:#AEB8CB;font-style:italic}

@media print{
  .topbar,.nav,.btn,.side{display:none!important}
  body{background:#fff}
}