:root{
  --bg:#0f1216;
  --panel:#171b21;
  --panel-2:#1e2430;
  --border:#2a313d;
  --text:#e8ebef;
  --text-dim:#9aa4b2;
  --accent:#3d8bfd;
  --accent-dim:#2a5fa8;
  --green:#2ecc71;
  --green-bg:rgba(46,204,113,.14);
  --red:#ff5c5c;
  --red-bg:rgba(255,92,92,.14);
  --white-stat:#c7cdd6;
  --radius:14px;
  --maxw:860px;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
  min-height:100vh;
}

a{color:var(--accent);text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:20px 16px 80px;}

header.top{
  position:sticky;top:0;z-index:20;
  background:rgba(15,18,22,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
header.top .bar{
  max-width:var(--maxw);margin:0 auto;padding:14px 16px;
  display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;
}
header.top h1{font-size:17px;margin:0;font-weight:600;}
header.top .sub{font-size:13px;color:var(--text-dim);}
.back-btn{
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  padding:8px 14px;border-radius:10px;font-size:14px;cursor:pointer;
}
.back-btn:hover{border-color:var(--accent-dim);}

.search-box{position:relative;flex:1 1 200px;min-width:160px;max-width:280px;}
.search-box input{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:13.5px;outline:none;
}
.search-box input:focus{border-color:var(--accent-dim);}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  max-height:360px;overflow-y:auto;z-index:30;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.search-results .sr-item{
  padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--border);
}
.search-results .sr-item:last-child{border-bottom:none;}
.search-results .sr-item:hover{background:var(--panel-2);}
.search-results .sr-loc{font-size:11px;color:var(--accent);margin-bottom:2px;}
.search-results .sr-text{font-size:13px;color:var(--text);}
.search-results .sr-empty{padding:14px 12px;font-size:13px;color:var(--text-dim);}
@media (max-width:600px){
  .search-box{flex:1 1 100%;max-width:none;order:3;}
}

/* index / section list */
.hero{padding:8px 0 20px;}
.hero p{color:var(--text-dim);margin:6px 0 0;}
.stats-row{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap;}
.stat-box{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:10px 16px;font-size:13px;color:var(--text-dim);min-width:84px;
}
.stat-box b{font-size:18px;display:block;color:var(--text);}
.stat-box.blue b{color:var(--accent);}
.stat-box.green b{color:var(--green);}
.stat-box.red b{color:var(--red);}
.stat-box.white b{color:var(--white-stat);}
.stat-box.errors-btn{cursor:pointer;border-color:var(--red);background:var(--red-bg);}
.stat-box.errors-btn:hover{filter:brightness(1.15);}

.all-btn{
  display:block;width:100%;text-align:left;
  background:linear-gradient(135deg,var(--accent-dim),var(--accent));
  color:#fff;border:none;border-radius:var(--radius);
  padding:18px 20px;margin:18px 0 12px;cursor:pointer;font-size:16px;font-weight:600;
}
.all-btn small{display:block;font-weight:400;opacity:.85;font-size:13px;margin-top:4px;}

.exam-btn{
  display:block;width:100%;text-align:left;
  background:linear-gradient(135deg,#8a3fd1,#b34fe0);
  color:#fff;border:none;border-radius:var(--radius);
  padding:18px 20px;margin:0 0 26px;cursor:pointer;font-size:16px;font-weight:600;
}
.exam-btn small{display:block;font-weight:400;opacity:.9;font-size:13px;margin-top:4px;}

.toggle-row{
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:12px 16px;margin-top:16px;
}
.toggle-label b{font-size:14px;display:block;}
.toggle-label small{font-size:12px;color:var(--text-dim);display:block;margin-top:2px;}
.toggle-switch{position:relative;width:44px;height:26px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}
.toggle-slider{
  position:absolute;inset:0;background:var(--panel-2);border:1px solid var(--border);
  border-radius:20px;cursor:pointer;transition:background .15s;
}
.toggle-slider::before{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .15s;
}
.toggle-switch input:checked + .toggle-slider{background:var(--accent);border-color:var(--accent);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);}

.section-list{display:flex;flex-direction:column;gap:8px;}
.section-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;
}
.section-item:hover{border-color:var(--accent-dim);background:var(--panel-2);}
.section-item .num{
  color:var(--accent);font-weight:700;font-size:14px;min-width:34px;
}
.section-item .name{flex:1;font-size:14.5px;}
.section-item .count{color:var(--text-dim);font-size:13px;white-space:nowrap;}
.section-item .prog{font-size:12px;color:var(--green);white-space:nowrap;}

.reset-link{
  display:inline-block;margin-top:22px;font-size:13px;color:var(--text-dim);
  cursor:pointer;border-bottom:1px dashed var(--text-dim);
}
.reset-link:hover{color:var(--red);border-color:var(--red);}

/* quiz view */
.progressbar{
  height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden;margin-bottom:22px;
}
.progressbar > div{height:100%;background:var(--accent);transition:width .2s;}

.q-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;margin-bottom:20px;
}
.q-head{display:flex;gap:10px;align-items:baseline;margin-bottom:10px;flex-wrap:wrap;}
.q-num{color:var(--accent);font-weight:700;font-size:14px;white-space:nowrap;}
.q-sec{color:var(--text-dim);font-size:12px;}
.q-text{font-size:16.5px;font-weight:600;margin:0 0 14px;}
.q-images{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.q-images img{
  max-width:100%;border-radius:10px;border:1px solid var(--border);display:block;
}

.options{display:flex;flex-direction:column;gap:8px;}
.opt{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid var(--border);border-radius:11px;padding:12px 14px;
  cursor:pointer;background:var(--panel-2);transition:border-color .12s,background .12s;
}
.opt:hover{border-color:var(--accent-dim);}
.opt .otext{font-size:15px;}
.opt.locked{cursor:default;}
.opt.correct{background:var(--green-bg);border-color:var(--green);}
.opt.wrong{background:var(--red-bg);border-color:var(--red);}
.opt .mark{margin-left:auto;font-size:13px;font-weight:700;white-space:nowrap;padding-left:8px;}
.opt.correct .mark{color:var(--green);}
.opt.wrong .mark{color:var(--red);}

.unresolved-note{
  margin-top:10px;font-size:13px;color:var(--text-dim);
  background:var(--panel-2);border:1px dashed var(--border);border-radius:10px;padding:10px 12px;
}

.retry-row{margin-top:14px;display:flex;justify-content:flex-end;}
.retry-btn{
  padding:9px 16px;border-radius:10px;border:1px solid var(--accent-dim);
  background:var(--panel-2);color:var(--accent);font-size:13.5px;cursor:pointer;font-weight:600;
}
.retry-btn:hover{border-color:var(--accent);background:var(--panel);}

.attempt-note{font-size:12px;color:var(--text-dim);margin-top:8px;}

.nav-buttons{
  display:flex;justify-content:space-between;gap:10px;margin-top:6px;
}
.nav-buttons button{
  flex:1;padding:13px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);font-size:15px;cursor:pointer;
}
.nav-buttons button:disabled{opacity:.4;cursor:default;}
.nav-buttons button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

.finish-card{
  text-align:center;padding:40px 20px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);
}
.finish-card .score{font-size:44px;font-weight:800;margin:10px 0;}
.finish-card .score.good{color:var(--green);}
.finish-card .score.bad{color:var(--red);}
.finish-card p{color:var(--text-dim);}
.finish-card .actions{display:flex;gap:10px;margin-top:22px;justify-content:center;flex-wrap:wrap;}
.finish-card button{
  padding:12px 20px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);cursor:pointer;font-size:14.5px;
}
.finish-card button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

.mistakes-head{margin-bottom:16px;}

/* ads */
.ad-slot{
  min-height:75px;margin:14px 0;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;
}
.ad-slot.inline{margin:18px 0 0;}
.ad-slot ins.adsbygoogle{width:100%;}
.mistakes-head h2{margin:0 0 4px;font-size:20px;}
.mistakes-head p{color:var(--text-dim);margin:0;font-size:14px;}
.empty-note{
  text-align:center;padding:50px 20px;color:var(--text-dim);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
}

.hidden{display:none !important;}

footer.foot{
  text-align:center;color:var(--text-dim);font-size:12px;padding:24px 0 6px;line-height:1.7;
}

/* modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-box{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;
  max-width:380px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.modal-box h3{margin:0 0 10px;font-size:17px;color:var(--text);}
.modal-box p{color:var(--text-dim);font-size:14px;margin:0 0 20px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}
.modal-actions button{
  padding:10px 18px;border-radius:10px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);cursor:pointer;font-size:14px;
}
.modal-actions button.danger{background:var(--red);border-color:var(--red);color:#fff;font-weight:600;}

@media (max-width:480px){
  :root{font-size:15px;}
  .wrap{padding:14px 10px 70px;}
  .q-card{padding:14px;}
  .stat-box{padding:8px 12px;min-width:70px;}
}