@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg-page:#F3F6FC;
  --bg-card:#FFFFFF;
  --bg-card-alt:#F7F9FD;
  --bg-hover:#EEF3FC;
  --border:#E2E8F5;
  --border-soft:#EAEFF8;
  --text-primary:#161E33;
  --text-secondary:#5B6786;
  --text-muted:#98A3BE;
  --accent:#2F6FED;
  --accent-soft:rgba(47,111,237,.09);
  --good:#1BAA6C;
  --good-bg:#E8F8F1;
  --good-border:#BFEBD8;
  --bad:#E0393E;
  --bad-bg:#FDECEC;
  --bad-border:#F6C7C8;
  --warn:#B8790C;
  --warn-bg:#FFF6E4;
  --warn-border:#F3DBA0;

  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow-sm:0 1px 2px rgba(22,30,51,.04);
  --shadow-card:0 1px 3px rgba(22,30,51,.05), 0 1px 2px rgba(22,30,51,.04);
  --shadow-pop:0 20px 45px -15px rgba(22,30,51,.18);
  --radius:14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D3DCEF;border-radius:6px;}

/* ---------- layout shells ---------- */
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px 80px;}
.topbar{width:100%;max-width:640px;display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.topbar img{height:26px;}
.topbar .title{font-size:13px;color:var(--text-muted);font-weight:600;}

.card{
  width:100%;max-width:560px;background:var(--bg-card);
  border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:32px;
}
.card.wide{max-width:900px;}

.eyebrow{
  font-family:var(--font-mono);font-size:11px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:700;
}
h1.page-title{font-size:22px;margin:0 0 8px;letter-spacing:-.01em;}
p.page-sub{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0 0 26px;}

/* ---------- form fields ---------- */
.field{margin-bottom:20px;}
.field label.field-label{display:block;font-size:13px;font-weight:700;margin-bottom:9px;color:var(--text-primary);}
.text-input{
  width:100%;padding:11px 13px;border-radius:10px;background:var(--bg-card-alt);
  border:1px solid var(--border);color:var(--text-primary);font-size:14.5px;
  font-family:inherit;outline:none;
}
.text-input:focus{border-color:var(--accent);background:#fff;}

.pill-group{display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  padding:9px 16px;border-radius:100px;border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text-secondary);font-size:13.5px;font-weight:600;
  cursor:pointer;user-select:none;transition:all .12s;
}
.pill:hover{border-color:var(--accent);color:var(--text-primary);}
.pill.selected{background:var(--accent);border-color:var(--accent);color:#fff;}
.pill input{display:none;}

.checkbox-group{display:flex;flex-wrap:wrap;gap:8px;}
.checkbox-pill{
  padding:8px 14px;border-radius:10px;border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;
  cursor:pointer;user-select:none;transition:all .12s;display:flex;align-items:center;gap:7px;
}
.checkbox-pill:hover{border-color:var(--accent);}
.checkbox-pill.selected{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.checkbox-pill input{display:none;}
.checkbox-pill .box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;}
.checkbox-pill.selected .box{background:var(--accent);border-color:var(--accent);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:11px;border:none;font-weight:700;font-size:14.5px;
  transition:filter .12s, transform .08s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-secondary{background:var(--bg-card-alt);color:var(--text-primary);border:1px solid var(--border);}
.btn-secondary:hover{border-color:var(--accent);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:9px;}

/* ---------- instruction list ---------- */
.step-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:10px;}
.step-list li{
  display:flex;gap:12px;padding:13px 15px;border-radius:11px;
  background:var(--bg-card-alt);border:1px solid var(--border-soft);font-size:13.5px;color:var(--text-secondary);line-height:1.55;
}
.step-list .ico{
  width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-mono);font-size:11px;font-weight:700;
}

/* ---------- exam ---------- */
.exam-header{
  width:100%;max-width:720px;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;gap:16px;flex-wrap:wrap;
}
.progress-wrap{flex:1;min-width:160px;}
.progress-track{height:8px;border-radius:100px;background:var(--border-soft);overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);border-radius:100px;transition:width .2s;}
.progress-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);margin-top:6px;}

.audio-box{
  display:flex;align-items:center;gap:12px;background:var(--bg-card-alt);
  border:1px solid var(--border-soft);border-radius:12px;padding:14px;margin-bottom:26px;
}
.audio-box audio{width:100%;height:38px;}

.q-block{margin-bottom:22px;}
.q-block .q-label{font-size:13px;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.q-block .q-label .help-btn{
  width:16px;height:16px;border-radius:50%;background:var(--border);color:var(--text-muted);
  font-size:10px;display:inline-flex;align-items:center;justify-content:center;cursor:help;font-weight:700;
}
.help-tip{
  display:none;font-size:12px;color:var(--text-secondary);background:var(--bg-card-alt);
  border:1px solid var(--border-soft);border-radius:9px;padding:9px 11px;margin-top:8px;line-height:1.5;
}
.q-block.show-help .help-tip{display:block;}

.exam-nav{display:flex;justify-content:space-between;gap:12px;margin-top:6px;}

/* ---------- result ---------- */
.result-hero{text-align:center;padding:12px 0 6px;}
.result-icon{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:28px;
}
.result-icon.pass{background:var(--good-bg);color:var(--good);}
.result-icon.fail{background:var(--bad-bg);color:var(--bad);}
.result-hero h1{font-size:21px;margin:0 0 8px;}
.result-hero p{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0 0 22px;}
.result-stats{display:flex;gap:10px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.stat-pill{
  background:var(--bg-card-alt);border:1px solid var(--border-soft);border-radius:11px;
  padding:12px 18px;text-align:center;min-width:90px;
}
.stat-pill b{display:block;font-size:20px;font-family:var(--font-mono);}
.stat-pill span{font-size:11px;color:var(--text-muted);}
.result-links{display:flex;flex-direction:column;gap:10px;}
.result-links a.btn{width:100%;}

/* ---------- admin shared ---------- */
.admin-shell{max-width:1100px;margin:0 auto;padding:32px 24px 80px;}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.admin-nav{display:flex;gap:6px;}
.admin-nav a{
  padding:8px 14px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-secondary);
}
.admin-nav a.active,.admin-nav a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none;}

.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px;}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:13px;padding:18px 20px;box-shadow:var(--shadow-sm);
}
.stat-card .num{font-family:var(--font-mono);font-size:26px;font-weight:700;}
.stat-card .lbl{font-size:12.5px;color:var(--text-muted);margin-top:4px;}

.tbl-wrap{border:1px solid var(--border-soft);border-radius:13px;overflow:hidden;background:var(--bg-card);box-shadow:var(--shadow-sm);}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700;padding:11px 14px;background:var(--bg-card-alt);border-bottom:1px solid var(--border-soft);}
td{padding:11px 14px;border-bottom:1px solid var(--border-soft);color:var(--text-secondary);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--bg-hover);}
td.strong{color:var(--text-primary);font-weight:600;}

.badge{display:inline-flex;align-items:center;padding:3.5px 10px;border-radius:100px;font-size:11.5px;font-weight:700;}
.badge.pass{background:var(--good-bg);color:var(--good);}
.badge.fail{background:var(--bad-bg);color:var(--bad);}
.badge.on{background:var(--good-bg);color:var(--good);}
.badge.off{background:var(--bg-card-alt);color:var(--text-muted);}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap;}
.upload-box{
  border:1.5px dashed var(--border);border-radius:13px;padding:22px;text-align:center;
  background:var(--bg-card-alt);margin-bottom:18px;
}
.upload-box input[type=file]{margin-top:10px;}
.upload-box .hint{font-size:12px;color:var(--text-muted);margin-top:6px;}

.empty-state{text-align:center;padding:50px 20px;color:var(--text-muted);font-size:13.5px;}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--text-primary);color:#fff;padding:11px 18px;border-radius:10px;
  font-size:13px;font-weight:600;box-shadow:var(--shadow-pop);z-index:50;display:none;
}
.toast.show{display:block;}
.toast.error{background:var(--bad);}
.toast.success{background:var(--good);}

/* compare table diff */
td.diff-wrong{background:var(--bad-bg);color:var(--bad);font-weight:700;border-radius:6px;}
td.diff-ok{color:var(--good);}

@media (max-width:640px){
  .card{padding:22px;}
  .admin-shell{padding:20px 14px 60px;}
  .exam-header{max-width:100%;}
}