:root{
  --teal:#0d9488; --teal-d:#0f766e; --teal-l:#14b8a6;
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --ok:#16a34a; --ok-bg:#dcfce7; --ok-line:#86efac;
  --bad:#dc2626; --bad-bg:#fee2e2; --bad-line:#fca5a5;
  --bg:#f1f5f9; --card:#ffffff;
  --shadow:0 10px 40px -12px rgba(15,23,42,.18);
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  min-height:100dvh; position:relative; overflow-x:hidden;
}
.bg-decor{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 85% -10%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(50vw 50vw at -10% 110%, rgba(13,148,136,.16), transparent 60%);
}

.screen{display:none; position:relative; z-index:1; min-height:100dvh; flex-direction:column}
.screen.active{display:flex}

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid rgba(226,232,240,.8);
}

/* ===== Кнопки ===== */
.btn{
  font:inherit; font-weight:600; cursor:pointer; border:none; border-radius:14px;
  padding:14px 22px; transition:transform .08s ease, box-shadow .2s, background .2s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--teal-l),var(--teal-d)); color:#fff; box-shadow:0 8px 20px -8px rgba(13,148,136,.6)}
.btn-primary:hover{box-shadow:0 12px 26px -8px rgba(13,148,136,.7)}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn-lg{padding:17px 28px; font-size:1.05rem; width:100%; border-radius:16px}
.btn-ghost{background:#fff; color:var(--teal-d); border:1.5px solid var(--teal-l)}
.btn-text{background:transparent; color:var(--muted); padding:10px}
.btn-text:hover{color:var(--teal-d)}

/* ===== Старт ===== */
#screen-start{align-items:center; justify-content:center; padding:24px}
.start-card{max-width:520px; width:100%; padding:40px 34px; text-align:center}
.logo{font-size:54px; line-height:1; filter:drop-shadow(0 6px 10px rgba(13,148,136,.25))}
.start-card h1{font-size:2rem; font-weight:800; margin:14px 0 6px; letter-spacing:-.02em}
.subtitle{color:var(--muted); font-size:1.02rem; margin-bottom:24px}
.stats-row{display:flex; gap:14px; margin-bottom:24px}
.stat{flex:1; background:linear-gradient(135deg,#f0fdfa,#ecfeff); border:1px solid #cffafe; border-radius:16px; padding:16px 10px}
.stat-num{display:block; font-size:1.9rem; font-weight:800; color:var(--teal-d); line-height:1}
.stat-label{font-size:.82rem; color:var(--muted); margin-top:4px; display:block}
.howto{list-style:none; text-align:left; margin:0 0 26px; display:flex; flex-direction:column; gap:12px}
.howto li{display:flex; align-items:center; gap:12px; font-size:.98rem; color:#334155}
.howto li span{flex:none; width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff; font-weight:700; display:grid; place-items:center; font-size:.9rem}
.howto b{color:var(--ink)}
.resume-box{background:#fffbeb; border:1px solid #fde68a; border-radius:14px; padding:14px; margin-bottom:18px; font-size:.92rem; color:#92400e}
.resume-actions{display:flex; gap:8px; margin-top:10px; justify-content:center}
.resume-actions .btn{padding:9px 16px; font-size:.9rem}
.loaderr{color:var(--bad); margin-top:14px; font-size:.9rem}
.footer{text-align:center; color:var(--muted); font-size:.82rem; padding:18px}

/* ===== Экзамен ===== */
#screen-exam{background:transparent}
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:rgba(241,245,249,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.progress-wrap{flex:1}
.progress-bar{height:8px; background:#e2e8f0; border-radius:99px; overflow:hidden}
.progress-fill{height:100%; width:0; background:linear-gradient(90deg,var(--teal-l),var(--teal-d)); border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.progress-meta{display:flex; justify-content:space-between; align-items:center; margin-top:7px; font-size:.85rem; color:var(--muted); font-weight:500}
.score-pill{display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--line); padding:3px 10px; border-radius:99px}
.score-pill .dot{width:8px; height:8px; border-radius:50%; display:inline-block}
.score-pill .dot.ok{background:var(--ok)} .score-pill .dot.bad{background:var(--bad)}
.score-pill .sep{color:var(--line)}
.score-pill b{font-variant-numeric:tabular-nums}
.btn-quit{flex:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:1.05rem; cursor:pointer; transition:.2s}
.btn-quit:hover{color:var(--bad); border-color:var(--bad-line); background:var(--bad-bg)}

.exam-main{flex:1; display:flex; justify-content:center; padding:22px 18px; width:100%}
.q-card{max-width:760px; width:100%; padding:30px 28px; align-self:flex-start; animation:slideIn .32s ease}
@keyframes slideIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.q-num{font-size:.8rem; font-weight:700; color:var(--teal-d); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px}
.q-text{font-size:1.28rem; font-weight:700; line-height:1.4; letter-spacing:-.01em; margin-bottom:24px; color:var(--ink)}
.options{display:flex; flex-direction:column; gap:12px}
.option{
  display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%;
  background:#fff; border:2px solid var(--line); border-radius:15px; padding:15px 17px;
  font:inherit; font-size:1.02rem; color:#1e293b; cursor:pointer;
  transition:border-color .18s, background .18s, transform .08s; position:relative;
}
.option:hover:not(:disabled){border-color:var(--teal-l); background:#f0fdfa}
.option:active:not(:disabled){transform:scale(.995)}
.option:disabled{cursor:default}
.option .mark{
  flex:none; width:28px; height:28px; border-radius:9px; border:2px solid var(--line);
  display:grid; place-items:center; font-weight:700; font-size:.9rem; color:var(--muted);
  background:#f8fafc; transition:.18s;
}
.option .otext{flex:1; padding-top:2px}
.option.correct{border-color:var(--ok-line); background:var(--ok-bg)}
.option.correct .mark{background:var(--ok); border-color:var(--ok); color:#fff}
.option.wrong{border-color:var(--bad-line); background:var(--bad-bg)}
.option.wrong .mark{background:var(--bad); border-color:var(--bad); color:#fff}
.option.correct .otext{color:#14532d} .option.wrong .otext{color:#7f1d1d}

.exam-foot{
  position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); max-width:760px; margin:0 auto; width:100%;
  border-radius:18px 18px 0 0;
}
.verdict{flex:1; font-weight:700; font-size:1rem; opacity:0; transition:opacity .2s}
.verdict.show{opacity:1}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}
.exam-foot .btn-primary{flex:none; min-width:140px}

/* ===== Результат ===== */
#screen-result{align-items:center; justify-content:center; padding:24px; gap:18px}
.result-card{max-width:480px; width:100%; padding:38px 30px; text-align:center}
.result-emoji{font-size:56px; line-height:1}
.result-card h1{font-size:1.6rem; font-weight:800; margin:10px 0 18px}
.result-score{font-size:1.05rem; color:var(--muted); margin-bottom:18px}
.result-score #result-correct{font-size:3.4rem; font-weight:800; color:var(--teal-d); display:block; line-height:1; letter-spacing:-.03em}
.result-score .of{display:block; margin-top:2px}
.result-ring-wrap{position:relative; width:150px; height:150px; margin:0 auto 22px}
.result-ring{width:150px; height:150px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:#e2e8f0; stroke-width:10}
.ring-fg{fill:none; stroke:url(#g); stroke-width:10; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); stroke:var(--teal)}
.ring-pct{position:absolute; inset:0; display:grid; place-items:center; font-size:1.7rem; font-weight:800; color:var(--ink)}
.result-breakdown{display:flex; gap:14px; margin-bottom:24px}
.rb{flex:1; border-radius:14px; padding:14px; border:1px solid}
.rb b{display:block; font-size:1.8rem; font-weight:800; line-height:1}
.rb span{font-size:.84rem; color:var(--muted)}
.rb.ok{background:var(--ok-bg); border-color:var(--ok-line)} .rb.ok b{color:var(--ok)}
.rb.bad{background:var(--bad-bg); border-color:var(--bad-line)} .rb.bad b{color:var(--bad)}
.result-card .btn-text{margin-top:6px}

.review{max-width:760px; width:100%; display:flex; flex-direction:column; gap:12px; padding-bottom:30px}
.rev-item{background:#fff; border:1px solid var(--line); border-left:4px solid var(--bad); border-radius:12px; padding:16px 18px}
.rev-q{font-weight:700; margin-bottom:10px; font-size:.98rem}
.rev-a{font-size:.92rem; margin:3px 0; padding-left:18px; position:relative}
.rev-a.user{color:var(--bad)} .rev-a.user::before{content:'✕'; position:absolute; left:0}
.rev-a.right{color:var(--ok)} .rev-a.right::before{content:'✓'; position:absolute; left:0}

.hidden{display:none !important}

@media(max-width:560px){
  .start-card{padding:30px 22px}
  .start-card h1{font-size:1.6rem}
  .q-card{padding:22px 18px}
  .q-text{font-size:1.14rem}
  .option{font-size:.98rem; padding:13px 14px}
  .exam-foot .btn-primary{min-width:120px}
}