/* ===========================================================
   Kardio-Examen — Design system
   =========================================================== */
:root{
  --bg:#0b1020;
  --bg-2:#101933;
  --panel:#152042;
  --panel-2:#1b285a;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#e7ecff;
  --text-dim:#9fb0d4;
  --text-mute:#7286ad;
  --brand:#ff5577;
  --brand-2:#ff8aa1;
  --accent:#5eead4;
  --warn:#fbbf24;
  --bad:#f87171;
  --good:#34d399;
  --radius:14px;
  --radius-sm:10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --maxw: 980px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(94,234,212,.07), transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, rgba(255,85,119,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ============ Topbar ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:rgba(11,16,32,.78);
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:baseline; gap:10px}
.logo{font-size:22px; color:var(--brand)}
.brand-name{font-weight:700; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--text-mute); letter-spacing:.4px; text-transform:uppercase}
.nav{display:flex; gap:6px; flex-wrap:wrap}
.nav-btn{
  background:transparent; color:var(--text-dim);
  border:1px solid transparent;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  font-size:14px; font-weight:500;
  transition:all .15s;
}
.nav-btn:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-btn.active{
  color:var(--text);
  background:linear-gradient(180deg, rgba(255,85,119,.15), rgba(255,85,119,.05));
  border-color:rgba(255,85,119,.35);
}

/* ============ Layout ============ */
main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px 18px 80px;
}
.screen{display:none}
.screen.active{display:block; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* ============ Hero ============ */
.hero{margin:8px 0 18px}
.hero h1{
  margin:0 0 6px;
  font-size:32px;
  font-weight:700;
  letter-spacing:-.3px;
}
.lede{color:var(--text-dim); margin:0; max-width:62ch}
.lede em{color:var(--brand-2); font-style:normal}

/* ============ Cards ============ */
.card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.card h2{margin:0; font-size:20px}
.card h3{margin:18px 0 10px; font-size:15px; color:var(--text-dim); letter-spacing:.3px; text-transform:uppercase}

.streak{
  background:rgba(251,191,36,.12);
  color:#fde68a;
  border:1px solid rgba(251,191,36,.25);
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600;
}

/* ============ Form fields ============ */
.grid-3{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom:16px;
}
.field{display:flex; flex-direction:column; gap:6px}
.field-label{font-size:12px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.5px}
select{
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%239fb0d4' d='M6 8 0 0h12z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:10px;
  padding-right:36px;
}
select:focus{outline:2px solid var(--brand); outline-offset:1px}

/* ============ Buttons ============ */
.btn{
  appearance:none; border:0;
  background:rgba(255,255,255,.08); color:var(--text);
  padding:11px 18px; border-radius:var(--radius-sm);
  font-weight:600; font-size:14px;
  font-family:inherit; cursor:pointer;
  transition: transform .05s, background .15s, opacity .15s;
}
.btn:hover{background:rgba(255,255,255,.13)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{
  background:linear-gradient(180deg, #ff5577, #e8466b);
  color:#fff;
  box-shadow:0 6px 20px rgba(255,85,119,.35);
}
.btn.primary:hover{background:linear-gradient(180deg, #ff6c89, #e8466b)}
.btn.ghost{background:transparent; border:1px solid var(--line-2)}
.btn.danger{background:rgba(248,113,113,.15); color:#fecaca; border:1px solid rgba(248,113,113,.35)}
.btn.danger:hover{background:rgba(248,113,113,.25)}
.btn.big{padding:14px 22px; font-size:15px; width:100%; margin-top:6px}
.btn.small{padding:8px 14px; font-size:13px}

.hint{color:var(--text-mute); font-size:13px; margin-top:10px}
.warn{
  background:rgba(251,191,36,.08);
  border-left:3px solid var(--warn);
  padding:10px 14px; border-radius:6px;
  color:#fde68a; font-size:14px;
}

/* ============ KPI row ============ */
.kpi-row{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin:14px 0;
}
.kpi{
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  padding:14px; border-radius:var(--radius-sm);
}
.kpi-num{font-size:28px; font-weight:700; line-height:1.1; color:var(--brand-2)}
.kpi-label{font-size:12px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.4px; margin-top:4px}

/* ============ Session ============ */
.session-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px;
  padding:10px 14px;
  background:rgba(0,0,0,.2); border:1px solid var(--line);
  border-radius:var(--radius-sm);
  position:sticky; top:64px; z-index:10;
  backdrop-filter: blur(6px);
}
.session-progress{font-size:14px; color:var(--text-dim); font-variant-numeric: tabular-nums}
.timer{
  font-size:22px; font-weight:700; color:var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing:.5px;
}
.timer.warn{color:var(--warn)}
.timer.over{color:var(--bad)}

.qwrap{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}
.meta{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.badge{
  background:rgba(94,234,212,.12);
  color:#a7f3d0;
  border:1px solid rgba(94,234,212,.25);
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600;
}
.ref{font-size:12px; color:var(--text-mute)}

.image-zone{margin:8px 0 16px}
.image-zone:empty{display:none}
.image-zone .ecg-wrap, .image-zone .svg-wrap{
  background:#0a1226;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px;
}
.image-zone svg{width:100%; height:auto; display:block}
.image-zone .caption{
  font-size:13px; color:var(--text-dim); margin-top:8px; text-align:center;
}

.stem{
  font-size:16px; line-height:1.65;
  color:var(--text);
  margin-bottom:18px;
  white-space:pre-line;
}

.options{display:flex; flex-direction:column; gap:8px}
.opt{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 14px;
  background:rgba(0,0,0,.18);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition: background .12s, border-color .12s, transform .04s;
  text-align:left;
}
.opt:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.22)}
.opt .opt-key{
  width:28px; height:28px; flex:0 0 28px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.opt .opt-text{font-size:14.5px; line-height:1.5}
.opt.selected{border-color:var(--brand); background:rgba(255,85,119,.10)}
.opt.selected .opt-key{background:var(--brand); color:#fff}
.opt.correct{border-color:var(--good); background:rgba(52,211,153,.10)}
.opt.correct .opt-key{background:var(--good); color:#04221a}
.opt.wrong{border-color:var(--bad); background:rgba(248,113,113,.10)}
.opt.wrong .opt-key{background:var(--bad); color:#2d0707}
.opt.locked{cursor:default}
.opt.locked:hover{transform:none}

.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}

/* ============ Explanation ============ */
.explanation{
  margin-top:18px;
  padding:18px;
  background:linear-gradient(180deg, rgba(94,234,212,.06), rgba(94,234,212,.02));
  border:1px solid rgba(94,234,212,.25);
  border-radius:var(--radius-sm);
  animation: slide .25s ease;
}
@keyframes slide{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
.exp-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; flex-wrap:wrap; gap:8px;
}
.exp-result{font-weight:700; font-size:16px}
.exp-result.ok{color:var(--good)}
.exp-result.no{color:var(--bad)}
.exp-key{font-size:14px; color:var(--text-dim)}
.exp-key strong{color:var(--accent)}
.exp-body{font-size:14.5px; line-height:1.65; white-space:pre-line}
.exp-body strong{color:var(--brand-2)}
.exp-body ul{margin:8px 0 8px 22px; padding:0}
.exp-body li{margin:4px 0}
.exp-ref{
  margin-top:12px; padding-top:10px;
  border-top:1px dashed rgba(255,255,255,.12);
  font-size:13px; color:var(--text-mute);
}

/* ============ Summary ============ */
.session-log{
  list-style:none; margin:0; padding:0;
  max-height:260px; overflow:auto;
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.session-log li{
  padding:10px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.session-log li:last-child{border-bottom:0}
.session-log .ok{color:var(--good)}
.session-log .no{color:var(--bad)}

/* ============ Stats ============ */
#topic-table{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.topic-row{
  display:grid; grid-template-columns: 1fr auto 90px; align-items:center; gap:12px;
  padding:10px 12px; background:rgba(0,0,0,.18); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:14px;
}
.topic-row .pct{
  font-variant-numeric: tabular-nums; font-weight:600;
}
.topic-row .bar{
  height:8px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden;
}
.topic-row .bar > div{
  height:100%; background:linear-gradient(90deg, var(--brand), var(--accent));
}

.bar-chart{
  display:grid; grid-template-columns: repeat(14, 1fr); gap:4px; align-items:end;
  height:120px; padding:8px 0;
}
.bar-chart .bar{
  background:linear-gradient(180deg, var(--accent), #0e7c66);
  border-radius:4px 4px 0 0;
  min-height:3px;
  position:relative;
}
.bar-chart .bar[data-zero="1"]{background:rgba(255,255,255,.06)}
.bar-chart .bar:hover::after{
  content: attr(data-tip);
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  background:#000; color:#fff; padding:4px 8px; border-radius:4px;
  font-size:11px; white-space:nowrap; margin-bottom:4px;
}

/* ============ Wrong list ============ */
.wrong-list{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.wrong-card{
  background:rgba(0,0,0,.18); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px;
}
.wrong-card .wq-meta{display:flex; gap:10px; align-items:center; font-size:12px; color:var(--text-mute); margin-bottom:6px}
.wrong-card .wq-stem{font-size:14px; margin-bottom:8px}
.wrong-card details summary{cursor:pointer; color:var(--accent); font-size:13px}
.wrong-card details[open] summary{margin-bottom:8px}

.ver{margin-top:14px; color:var(--text-mute); font-size:12px}

/* ============ Responsive ============ */
@media (max-width: 640px){
  .topbar{padding:12px 14px; gap:8px; flex-wrap:wrap}
  .brand-sub{display:none}
  .nav-btn{padding:6px 11px; font-size:13px}
  .hero h1{font-size:24px}
  .card{padding:16px}
  .qwrap{padding:16px}
  .timer{font-size:18px}
  .kpi-num{font-size:22px}
}