:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1a2233; --muted:#6b7688;
  --pri:#1f6feb; --pri-d:#1858c4; --ok:#1a9e57; --warn:#e08a1e; --bad:#d8393b;
  --line:#e4e8f0; --radius:14px;
  --chip-row:#eef2f8; --chip-opt:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.45;
  -webkit-tap-highlight-color:transparent;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.center{text-align:center}
.err{color:var(--bad); font-size:.85rem; margin:.4rem 0 0; min-height:1em}
a{color:var(--pri)}

.screen{min-height:100vh; display:flex; padding:16px}
.center.screen,.screen.center{align-items:center; justify-content:center}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:12px; box-shadow:0 1px 3px rgba(20,30,60,.05);
}
.auth-card{max-width:380px; width:100%}
.brand{font-size:1.5rem; margin:.2rem 0}

label{display:block; font-weight:600; font-size:.85rem; margin:.7rem 0 .3rem}
input,select,textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:1rem; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri); border-color:var(--pri)}
textarea{font-family:inherit}

.btn{
  border:none; border-radius:10px; padding:11px 16px; font-size:.95rem; font-weight:600;
  cursor:pointer; background:#eef1f7; color:var(--ink); transition:.12s;
}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--pri); color:#fff}
.btn.primary:active{background:var(--pri-d)}
.btn.ghost{background:transparent; border:1px solid var(--line)}
.btn.block{width:100%; display:block; margin-top:12px}
.btn.big{padding:16px; font-size:1.05rem}
.btn.small{padding:7px 12px; font-size:.82rem}

.row{display:flex; gap:10px; align-items:center; margin-top:12px}
.row .btn{flex:1}
.row.between{justify-content:space-between; align-items:center}
.col{flex:1}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:8px;
  padding:12px 14px; background:#fff; border-bottom:1px solid var(--line);
  padding-top:calc(12px + env(safe-area-inset-top));
}
.logo{font-weight:700}
.spacer{flex:1}

/* tabs */
.tab{padding-bottom:84px; max-width:640px; margin:0 auto}
.tabbar{
  position:fixed; bottom:0; left:0; right:0; display:flex; background:#fff;
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.tabbtn{
  flex:1; border:none; background:none; padding:10px 4px 12px; font-size:1.3rem;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
}
.tabbtn span{font-size:.68rem; font-weight:600}
.tabbtn.active{color:var(--pri)}

/* scan */
.cap-area{margin-top:8px}
.cap-area .btn.block+.btn.block{margin-top:8px}
.preview{width:100%; border-radius:10px; border:1px solid var(--line); margin-top:10px; display:block}

/* live camera */
.cam-wrap{position:relative; margin-top:12px; border-radius:14px; overflow:hidden; background:#000; aspect-ratio:3/4}
.cam-wrap video{width:100%; height:100%; object-fit:cover; display:block}
.cam-frame{position:absolute; inset:7% 4%; border:3px dashed rgba(255,255,255,.75); border-radius:12px; pointer-events:none; transition:.15s}
.cam-frame.ok{border-style:solid; border-color:#38d17a; box-shadow:0 0 0 3px rgba(56,209,122,.25) inset}
.cam-banner{position:absolute; left:0; right:0; top:0; padding:9px 12px; background:rgba(0,0,0,.55);
  color:#fff; font-size:.85rem; font-weight:600; text-align:center; backdrop-filter:blur(2px)}
.cam-controls{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px}
.cam-controls .toggle{display:flex; align-items:center; gap:6px; font-weight:600; font-size:.85rem; margin:0; white-space:nowrap}
.cam-controls .toggle input{width:auto}
.shutter{width:66px; height:66px; border-radius:50%; border:5px solid var(--pri); background:#fff;
  cursor:pointer; flex:none; transition:.1s; box-shadow:0 2px 8px rgba(0,0,0,.2)}
.shutter:active{transform:scale(.9)}
.shutter:disabled{opacity:.5}

.score-head{font-size:2.6rem; font-weight:800; text-align:center; line-height:1}
.score-sub{text-align:center; color:var(--muted); margin-top:6px}
.flag{color:var(--warn); font-size:.85rem; text-align:center; min-height:1em}
.score-head.good{color:var(--ok)} .score-head.mid{color:var(--warn)} .score-head.low{color:var(--bad)}

/* key list */
.list{margin-top:8px}
.key-item{
  border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:10px;
  display:flex; align-items:center; gap:10px;
}
.key-item .k-main{flex:1; min-width:0}
.key-item h3{margin:0 0 2px; font-size:1rem}
.badge{background:#eef1f7; border-radius:20px; padding:2px 10px; font-size:.72rem; color:var(--muted)}

/* answer grid */
.answer-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; margin-top:12px}
.q-row{display:flex; align-items:center; gap:5px; background:var(--chip-row); border:1px solid var(--line); border-radius:12px; padding:7px 8px}
.q-no{width:24px; flex:none; font-weight:800; font-size:.8rem; color:var(--muted); text-align:center}
.opt{
  flex:1; min-width:0; border:1px solid var(--line); background:var(--chip-opt);
  color:var(--ink);              /* WAJIB: button gak mewarisi color, kalau kosong jadi gelap di dark mode */
  border-radius:9px; padding:8px 0; font-weight:800; font-size:.92rem; cursor:pointer; transition:.12s;
}
.opt:hover{border-color:var(--pri); color:var(--pri)}
.opt:active{transform:scale(.93)}
.opt.sel{background:var(--pri); color:#fff; border-color:var(--pri); box-shadow:0 2px 8px rgba(31,111,235,.4)}

.paste,.scoring{margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:8px 12px}
.paste summary,.scoring summary{cursor:pointer; font-weight:600; font-size:.9rem}
.scoring label{font-weight:500; display:block; margin-top:8px}
.inline-num{width:64px; display:inline-block; padding:4px 6px}

/* table */
.table-wrap{overflow-x:auto; margin-top:10px}
table{width:100%; border-collapse:collapse; font-size:.85rem}
th,td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
th{color:var(--muted); font-size:.75rem; text-transform:uppercase}
.mini{font-size:.75rem; color:var(--pri); cursor:pointer; background:none; border:none; padding:0}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center;
  justify-content:center; padding:16px; z-index:50}
.modal img{max-width:100%; max-height:100%; border-radius:8px}

@media (prefers-color-scheme:dark){
  :root{--bg:#0f1420; --card:#161c2b; --ink:#e6ebf5; --muted:#9aa7bd; --line:#28324a;
        --chip-row:#10182a; --chip-opt:#1e2942}
  input,select,textarea{background:#0f1420; color:var(--ink)}
  .btn{background:#232c40; color:var(--ink)}
  .topbar,.tabbar{background:#161c2b}
  .badge{background:#232c40}
}