:root{
  --bg:#070f22;
  --bg2:#0b1730;
  --card:rgba(16,30,58,.86);
  --line:rgba(80,140,220,.28);
  --text:#eaf2ff;
  --dim:#93a9c9;
  --cyan:#28d7ff;
  --violet:#8b5cf6;
  --gold:#ffc857;
  --green:#37e08b;
  --red:#ff5c72;
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(1200px 700px at 80% -10%,rgba(40,215,255,.14),transparent 60%),
             radial-gradient(900px 600px at 0% 110%,rgba(139,92,246,.16),transparent 60%),
             linear-gradient(180deg,#070f22,#0a1730 60%,#070d1c);}
.bg .lines{position:absolute;inset:-40% -10%;opacity:.16;
  background-image:linear-gradient(rgba(90,160,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,160,255,.5) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(600px) rotateX(58deg);
  animation:drift 26s linear infinite;}
@keyframes drift{from{background-position:0 0,0 0}to{background-position:0 640px,640px 0}}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.4}
.g1{background:#1d6cff;top:-160px;left:-160px}
.g2{background:#8b5cf6;bottom:-200px;right:-120px}

.screen{position:relative;z-index:1;display:none;min-height:100vh;padding:28px 18px 48px}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:screenIn .38s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card{width:100%;max-width:860px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 32px;backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) rotateX(6deg)}to{opacity:1;transform:none}}

.brand{text-align:center;margin-bottom:26px}
.brand .logo{font-size:34px;color:var(--cyan);line-height:1;
  text-shadow:0 0 18px rgba(40,215,255,.7);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.brand h1{margin:10px 0 8px;font-size:30px;line-height:1.2;letter-spacing:.4px}
.brand h1 span{color:var(--cyan)}
.brand .sub{margin:0;color:var(--dim);font-size:14.5px;line-height:1.5}

.grid-3,.grid-2{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr);margin-top:14px}
label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.7px}
input,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(8,18,38,.85);color:var(--text);font-size:15px;outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(40,215,255,.16);background:rgba(8,20,44,.95)}
input::placeholder{color:#5d7799}

.level-pick{margin-top:20px}
.level-label{display:block;font-size:12.5px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);cursor:pointer;
  font-size:13.5px;color:var(--dim);background:rgba(12,24,48,.7);
  transition:transform .16s,color .16s,border-color .16s,background .16s}
.chip:hover{transform:translateY(-1px);color:var(--text);border-color:var(--cyan)}
.chip.on{color:#04121f;background:linear-gradient(135deg,var(--cyan),#4f9dff);
  border-color:transparent;font-weight:600;box-shadow:0 6px 18px rgba(40,215,255,.3)}
.hint{margin:10px 0 0;font-size:13px;color:var(--dim);min-height:18px}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{border:none;border-radius:12px;padding:14px 26px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:transform .14s,box-shadow .18s,background .18s,opacity .18s}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{color:#04121f;background:linear-gradient(135deg,var(--cyan),#64b5ff);
  box-shadow:0 10px 26px rgba(40,215,255,.28)}
.btn-primary:hover{box-shadow:0 14px 32px rgba(40,215,255,.42)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-ghost{color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.11)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-danger{color:#fff;background:linear-gradient(135deg,#ff5c72,#d63450)}
.tiny{margin:16px 0 0;font-size:12px;color:#6d87aa;line-height:1.5}

/* ---------------- тест ---------------- */
#screen-test{padding:0;justify-content:flex-start}
.hud{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;
  width:100%;padding:14px 22px;background:rgba(7,15,34,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.hud-left{display:flex;align-items:center;gap:12px;min-width:0}
.chip-rank{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:1.2px;
  color:#04121f;background:linear-gradient(135deg,var(--gold),#ffdf9a)}
.hud-name{color:var(--dim);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.hud-mid{flex:1;display:flex;align-items:center;gap:14px;min-width:120px}
.progress{flex:1;height:8px;border-radius:999px;background:rgba(120,170,255,.16);overflow:hidden}
.progress-bar{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.counter{font-size:13px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-right{display:flex;align-items:center;gap:12px}
.timer{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--cyan);
  padding:6px 12px;border-radius:10px;background:rgba(40,215,255,.1);border:1px solid rgba(40,215,255,.25)}
.timer.warn{color:var(--gold);border-color:rgba(255,200,87,.4);background:rgba(255,200,87,.1)}
.timer.danger{color:var(--red);border-color:rgba(255,92,114,.5);background:rgba(255,92,114,.12);
  animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}

.stage{width:100%;display:flex;justify-content:center;padding:34px 18px 60px}
.q-card{width:100%;max-width:820px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 30px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
.q-card.anim{animation:qIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes qIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.q-card.anim-out{animation:qOut .2s ease both}
@keyframes qOut{to{opacity:0;transform:translateY(-18px) scale(.99)}}
.q-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.topic{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);
  background:rgba(40,215,255,.1);border:1px solid rgba(40,215,255,.25);
  padding:5px 11px;border-radius:999px}
.stars{font-size:13px;letter-spacing:3px;color:var(--gold)}
.q-text{margin:6px 0 22px;font-size:21px;line-height:1.45;font-weight:600}
.options{display:flex;flex-direction:column;gap:11px}
.opt{position:relative;display:flex;align-items:flex-start;gap:13px;padding:15px 17px;
  border-radius:14px;border:1px solid rgba(120,170,255,.22);background:rgba(10,22,46,.8);
  cursor:pointer;font-size:15.5px;line-height:1.4;
  transition:transform .14s,border-color .16s,background .16s,box-shadow .16s}
.opt:hover{transform:translateX(3px);border-color:rgba(40,215,255,.55);background:rgba(14,32,62,.9)}
.opt .mark{flex:0 0 24px;height:24px;border-radius:8px;border:2px solid rgba(140,180,240,.5);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:transparent;
  transition:background .16s,border-color .16s,color .16s}
.opt.on{border-color:var(--cyan);background:rgba(40,215,255,.12);box-shadow:0 0 0 1px rgba(40,215,255,.35) inset}
.opt.on .mark{background:var(--cyan);border-color:var(--cyan);color:#04121f}
.opt.lock{cursor:default;transform:none}
.opt.correct{border-color:var(--green)!important;background:rgba(55,224,139,.14)!important;
  animation:flashGreen .5s ease}
.opt.wrong{border-color:var(--red)!important;background:rgba(255,92,114,.13)!important;
  animation:shake .36s ease}
.opt.correct .mark{background:var(--green);border-color:var(--green);color:#04121f}
.opt.wrong .mark{background:var(--red);border-color:var(--red);color:#fff}
@keyframes flashGreen{0%{box-shadow:0 0 0 0 rgba(55,224,139,.5)}100%{box-shadow:0 0 0 14px rgba(55,224,139,0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.feedback{margin-top:16px;padding:0 16px;border-radius:12px;font-size:14px;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s,padding .3s}
.feedback.show{max-height:300px;opacity:1;padding:14px 16px}
.feedback.ok{background:rgba(55,224,139,.1);border:1px solid rgba(55,224,139,.35)}
.feedback.no{background:rgba(255,92,114,.1);border:1px solid rgba(255,92,114,.35)}
.feedback b{display:block;margin-bottom:4px}
.q-actions{display:flex;justify-content:flex-end;margin-top:20px}

/* ---------------- результат ---------------- */
.card-result{max-width:720px;text-align:center}
.result-badge{display:inline-block;padding:8px 18px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:2px;color:#04121f;background:linear-gradient(135deg,var(--gold),#ffdf9a);
  margin-bottom:14px}
.card-result h1{margin:0 0 6px;font-size:26px}
.result-name{margin:0;color:var(--dim);font-size:14px}
.score-ring{width:184px;height:184px;margin:26px auto 18px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,rgba(40,215,255,.18),transparent 70%);
  border:2px solid rgba(40,215,255,.4);box-shadow:0 0 40px rgba(40,215,255,.18) inset;
  animation:ringIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes ringIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.score-value{font-size:46px;font-weight:800;color:var(--cyan);line-height:1}
.score-label{margin-top:6px;font-size:13px;color:var(--dim)}
.result-place{font-size:19px;font-weight:700;color:var(--gold);margin:6px 0}
.result-comment{color:var(--dim);font-size:14.5px;line-height:1.6;margin:8px auto 0;max-width:560px}
.card-result .actions{justify-content:center}

/* ---------------- модалки / тост ---------------- */
.modal-root{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
  background:rgba(4,9,20,.72);padding:20px}
.modal-root.open{display:flex;animation:fadeIn .2s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:520px;background:#0e1c36;border:1px solid var(--line);border-radius:18px;
  padding:26px;box-shadow:0 30px 70px rgba(0,0,0,.6);animation:cardIn .3s ease both}
.modal h3{margin:0 0 10px;font-size:20px}
.modal p{margin:0 0 18px;color:var(--dim);font-size:14.5px;line-height:1.55}
.modal .actions{margin-top:0}
.sheet{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;margin-bottom:14px}
.sheet-row{padding:10px 12px;border-radius:10px;border:1px solid var(--line);font-size:13.5px}
.sheet-row.ok{border-color:rgba(55,224,139,.35);background:rgba(55,224,139,.07)}
.sheet-row.no{border-color:rgba(255,92,114,.35);background:rgba(255,92,114,.07)}
.sheet-q{margin-bottom:6px;line-height:1.45}
.sheet-a{color:var(--dim);font-size:12.5px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:60;
  padding:13px 22px;border-radius:12px;background:#12294a;border:1px solid var(--line);
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#3a1420;border-color:rgba(255,92,114,.5)}

/* ---------------- карточки возрастных категорий ---------------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cat{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;border:1px solid var(--line);border-radius:16px;padding:14px 10px 12px;
  text-align:center;background:rgba(12,24,48,.66);color:var(--text);font-family:inherit;
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
.cat:hover{transform:translateY(-3px);border-color:rgba(40,215,255,.55);
  box-shadow:0 12px 26px rgba(0,0,0,.28)}
.cat .cat-emoji{font-size:24px;line-height:1.15;filter:drop-shadow(0 4px 10px rgba(40,215,255,.25))}
.cat .cat-age{font-weight:700;font-size:14px;margin-top:5px}
.cat .cat-name{font-size:11.5px;color:var(--dim);letter-spacing:.2px}
.cat.selected{background:linear-gradient(160deg,rgba(40,215,255,.22),rgba(139,92,246,.24));
  border-color:var(--cyan);box-shadow:0 10px 26px rgba(40,215,255,.22)}
.cat.selected::after{content:"✓";position:absolute;top:7px;right:10px;font-size:12px;
  font-weight:900;color:var(--cyan)}

/* ---------------- переключатель темы ---------------- */
.theme-toggle{position:fixed;top:14px;right:16px;z-index:70;width:42px;height:42px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);
  font-size:18px;cursor:pointer;backdrop-filter:blur(8px);
  transition:transform .15s,background .15s}
.theme-toggle:hover{transform:translateY(-2px)}
body.in-test .theme-toggle{display:none}
.login-theme{position:absolute}

/* ---------------- светлая тема ---------------- */
html[data-theme="light"]{
  --bg:#eef3fb;
  --bg2:#f7faff;
  --card:rgba(255,255,255,.95);
  --line:rgba(30,70,140,.22);
  --text:#0e1b31;
  --dim:#54678a;
  --cyan:#0b7fc0;
  --violet:#6b46e0;
  --gold:#a8760c;
  --green:#0f8f4c;
  --red:#c62f47;
}
html[data-theme="light"] body{background:var(--bg)}
html[data-theme="light"] .bg{
  background:radial-gradient(1200px 700px at 80% -10%,rgba(11,127,192,.12),transparent 60%),
             radial-gradient(900px 600px at 0% 110%,rgba(107,70,224,.10),transparent 60%),
             linear-gradient(180deg,#eef3fb,#f7faff 60%,#e8effa)}
html[data-theme="light"] .bg .lines{opacity:.45;
  background-image:linear-gradient(rgba(40,90,170,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(40,90,170,.16) 1px,transparent 1px)}
html[data-theme="light"] .glow{opacity:.16}
html[data-theme="light"] .theme-toggle{background:#fff}
html[data-theme="light"] .card,
html[data-theme="light"] .q-card{box-shadow:0 18px 44px rgba(20,50,100,.14)}
html[data-theme="light"] input,
html[data-theme="light"] select{background:#fff;color:var(--text);border-color:var(--line)}
html[data-theme="light"] input:focus{background:#fff}
html[data-theme="light"] input::placeholder{color:#8fa2bf}
html[data-theme="light"] .hud{background:rgba(255,255,255,.92)}
html[data-theme="light"] .progress{background:rgba(30,70,140,.14)}
html[data-theme="light"] .opt{background:#fff;border-color:rgba(30,70,140,.2)}
html[data-theme="light"] .opt:hover{background:#f1f7ff}
html[data-theme="light"] .opt.on{background:rgba(11,127,192,.12)}
html[data-theme="light"] .opt.correct{background:rgba(15,143,76,.13)!important}
html[data-theme="light"] .opt.wrong{background:rgba(198,47,71,.11)!important}
html[data-theme="light"] .opt .mark{border-color:rgba(30,70,140,.35)}
html[data-theme="light"] .cat{background:#fff}
html[data-theme="light"] .modal{background:#fff}
html[data-theme="light"] .toast{background:#fff}
html[data-theme="light"] .btn-ghost{background:rgba(15,40,80,.06)}
html[data-theme="light"] .btn-ghost:hover{background:rgba(15,40,80,.12)}
html[data-theme="light"] .btn-primary{color:#fff}
html[data-theme="light"] .chip-rank{color:#3d2a00}
html[data-theme="light"] .score-ring{
  background:radial-gradient(circle at 50% 30%,rgba(11,127,192,.12),transparent 70%)}
html[data-theme="light"] .sheet-row.ok{background:rgba(15,143,76,.07)}
html[data-theme="light"] .sheet-row.no{background:rgba(198,47,71,.07)}


@media (max-width:760px){
  .card{padding:22px 18px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .brand h1{font-size:23px}
  .hud{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .hud-mid{order:3;width:100%;flex-basis:100%}
  .hud-name{max-width:120px}
  .q-text{font-size:18px}
  .stage{padding:20px 12px 40px}
  .q-card{padding:20px 16px}
  .cats{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}