:root{--b:#1d4ed8;--bd:#1e3a8a;--bl:#eff6ff;--bb:#bfdbfe;--t:#0f172a;--m:#64748b;--l:#e2e8f0;--ok:#15803d;--er:#b91c1c}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;color:var(--t);background:#f8fafc;line-height:1.5}
header{background:var(--b);color:#fff;padding:12px 20px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}header strong{font-size:20px;margin-right:auto}header a{color:#fff;text-decoration:none}
main{max-width:860px;margin:0 auto;padding:20px}
.card{background:#fff;border:1px solid var(--l);border-radius:10px;padding:16px;margin-bottom:14px}
label{display:block;font-weight:600;margin:10px 0 4px;font-size:14px}
input,select{width:100%;padding:9px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}
button,.btn{display:inline-block;background:var(--b);color:#fff;border:0;border-radius:6px;padding:9px 16px;font:inherit;cursor:pointer;text-decoration:none}
.row{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.row>div{flex:1;min-width:180px}
.alert{padding:10px 12px;border-radius:8px;margin-bottom:12px;font-size:14px}.err{background:#fef2f2;border:1px solid #fecaca;color:var(--er)}
.static{font-size:12px;opacity:.8}.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tag{background:var(--bl);color:var(--bd);border:1px solid var(--bb);border-radius:99px;padding:1px 9px;font-size:12px}
.meta{color:var(--m);font-size:13px}h3{margin:0 0 4px}a{color:var(--b)}
/* Tema claymorphism (konsisten di semua halaman) */
:root{--b:#1d4ed8;--bd:#1e3a8a;--bl:#e3edff;--bb:#b9ceff;--m:#475569;--l:#d3e0fb;--cl:#f3f7ff;--sh:rgba(29,78,216,.22);--ins:rgba(29,78,216,.14);--clay:8px 8px 18px var(--sh),-6px -6px 14px rgba(255,255,255,.9),inset 4px 4px 8px rgba(255,255,255,.75),inset -4px -4px 8px var(--ins);--clay-s:5px 5px 11px var(--sh),-4px -4px 9px rgba(255,255,255,.9),inset 2px 2px 5px rgba(255,255,255,.7),inset -2px -2px 5px var(--ins);--pit:inset 4px 4px 9px rgba(29,78,216,.2),inset -4px -4px 9px rgba(255,255,255,.95);--grad:linear-gradient(145deg,#2f63e8,#1d4ed8)}
body{background:linear-gradient(160deg,#dce9ff,#f4f8ff 55%,#e1ecff) fixed;min-height:100vh}
header{background:var(--grad);border-radius:0 0 28px 28px;box-shadow:0 10px 22px var(--sh),inset 0 4px 8px rgba(255,255,255,.35),inset 0 -4px 8px rgba(0,0,40,.25)}
.card,.stats div,.note{background:var(--cl);border:0;border-radius:26px;box-shadow:var(--clay)}
.card.q{box-shadow:var(--clay),inset 6px 0 0 var(--b)}
.alert{border:0;border-radius:20px;box-shadow:var(--clay-s)}
.score{background:linear-gradient(145deg,#e6efff,#cddfff)}
button,.btn{background:var(--grad);color:#fff;border:0;border-radius:18px;box-shadow:6px 6px 14px rgba(29,78,216,.35),-4px -4px 10px rgba(255,255,255,.85),inset 3px 3px 6px rgba(255,255,255,.35),inset -3px -3px 6px rgba(0,0,50,.28);transition:box-shadow .12s,transform .12s,filter .12s}
button:hover,.btn:hover{filter:brightness(1.06)}
.btn2,.g{background:var(--cl);color:var(--b);border:0;box-shadow:var(--clay-s)}
.danger,td button{background:linear-gradient(145deg,#dc4a4a,#b91c1c);color:#fff}
.del{background:#fff3f3;color:#b91c1c;border:0;box-shadow:var(--clay-s)}
.del:disabled{opacity:1}
button:active,.btn:active{transform:translateY(1px);filter:none;box-shadow:inset 4px 4px 9px rgba(0,0,50,.32),inset -3px -3px 6px rgba(255,255,255,.3)}
.btn2:active,.g:active,.del:active{box-shadow:inset 4px 4px 9px rgba(29,78,216,.28),inset -3px -3px 6px rgba(255,255,255,.9)}
button:disabled,.off{background:#cfd9ea;color:#475569;box-shadow:var(--pit);cursor:not-allowed;filter:none;transform:none}
input:not([type=radio]):not([type=checkbox]),select,textarea{background:#eef4ff;border:0;border-radius:16px;box-shadow:var(--pit);color:var(--t);padding:11px 14px}
input[type=radio],input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px!important;height:22px!important;flex:none;margin:0;padding:0;border:0;background:#eef4ff;box-shadow:var(--pit);cursor:pointer;display:inline-block;vertical-align:middle}
input[type=radio]{border-radius:50%}input[type=checkbox]{border-radius:8px}
input[type=radio]:checked{background:radial-gradient(circle,#fff 0 28%,transparent 31%),var(--grad);box-shadow:3px 3px 7px rgba(29,78,216,.35),inset 2px 2px 4px rgba(255,255,255,.35)}
input[type=checkbox]:checked{background:var(--grad);box-shadow:3px 3px 7px rgba(29,78,216,.35),inset 2px 2px 4px rgba(255,255,255,.35)}
input[type=checkbox]:checked::after{content:"";display:block;width:6px;height:11px;margin:3px 0 0 7px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
:focus-visible{outline:3px solid #b45309;outline-offset:3px}
input:not([type=radio]):not([type=checkbox]):focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
.choice,label.radio{background:var(--cl);border:0;border-radius:20px;box-shadow:var(--clay-s)}
label.radio{padding:12px 14px}
.choice:hover{background:#e8f0ff;border:0}
.choice:has(input:checked){background:#dbe8ff;box-shadow:var(--pit)}
.choice:active{box-shadow:var(--pit)}
.tag{background:var(--grad);color:#fff;border:0;padding:2px 12px;box-shadow:3px 3px 7px rgba(29,78,216,.3),inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -2px 4px rgba(0,0,50,.2)}
.timer{background:var(--cl);color:var(--bd);box-shadow:var(--clay-s)}
.nums .num{border:0;border-radius:16px;background:var(--cl);color:var(--b);box-shadow:var(--clay-s);filter:none}
.nums .num.done{background:#d4e3ff;color:var(--bd);box-shadow:var(--pit)}
.nums .num.cur{background:var(--grad);color:#fff;box-shadow:4px 4px 10px rgba(29,78,216,.4),inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -2px 4px rgba(0,0,50,.25)}
.nums .num:active{box-shadow:var(--pit)}
th{background:transparent;color:var(--bd)}
td,th{border-bottom:1px solid rgba(29,78,216,.12)}
tr.me td{background:#dbe8ff}tr.me td:first-child{border-radius:14px 0 0 14px}tr.me td:last-child{border-radius:0 14px 14px 0}
pre{border-radius:22px;box-shadow:inset 4px 4px 10px rgba(0,0,0,.45),inset -2px -2px 6px rgba(255,255,255,.08),4px 4px 12px var(--sh)}
.img{border:0;background:#e3edff;box-shadow:var(--pit);border-radius:20px}.img svg{border-radius:16px}
.code{border:0;border-radius:20px;box-shadow:var(--pit);background:#e3edff}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Tema v2: Biru Laut + Krem Persik (token identik di semua halaman) */
:root{--b:#1d4ed8;--bd:#1e3a8a;--lk:#1e40af;--t:#0f172a;--m:#334155;--page1:#b9cff6;--page2:#d4e2fb;--card:#fffaf0;--cl:#fffaf0;--field:#eef3ff;--fb:#5f7fcf;--bl:#dbe7ff;--bb:#8aa3de;--l:#c9d6f2;--peach:#ffd9b8;--peach-l:#fff1de;--peach-d:#7c2d12;--peach-b:#c2410c;--mint:#d6f3e4;--mint-d:#14532d;--rose:#fde2e2;--rose-d:#7f1d1d;--er:#b91c1c;--ok:#14532d;--grad:linear-gradient(145deg,#2f63e8,#1d4ed8);--clay:9px 11px 22px rgba(30,58,138,.38),-6px -6px 14px rgba(255,255,255,.8),inset 4px 4px 8px #fff,inset -5px -5px 10px rgba(194,140,90,.2);--clay-s:5px 6px 12px rgba(30,58,138,.35),-3px -3px 8px rgba(255,255,255,.8),inset 2px 2px 4px #fff,inset -3px -3px 6px rgba(194,140,90,.2);--pit:inset 3px 3px 7px rgba(30,64,175,.3),inset -3px -3px 6px rgba(255,255,255,.95)}
body{color:var(--t);background:radial-gradient(circle at 92% 4%,rgba(255,200,160,.7),transparent 38%),linear-gradient(160deg,var(--page1),var(--page2)) fixed;min-height:100vh}
a{color:var(--lk)}
.static{opacity:1;font-style:italic}
header{background:linear-gradient(160deg,#1e40af,#1d4ed8);color:#fff}
header :focus-visible{outline-color:#fff}
.card,.stats div,.note{background:var(--card);border:2px solid rgba(255,255,255,.95);border-radius:26px;box-shadow:var(--clay)}
.note{background:var(--peach-l);color:var(--t)}
.stats b{color:var(--lk)}
.score{background:linear-gradient(145deg,var(--peach-l),var(--peach))}
.alert{border:2px solid transparent;border-radius:20px;box-shadow:var(--clay-s)}
.err{background:var(--rose);color:var(--rose-d);border-color:#e29a9a}
.suc{background:var(--mint);color:var(--mint-d);border-color:#7fcaa0}
.info{background:var(--peach-l);color:var(--peach-d);border-color:#eab07e}
button,.btn{background:var(--grad);color:#fff;border:0;border-radius:18px;box-shadow:5px 6px 12px rgba(30,58,138,.45),-3px -3px 8px rgba(255,255,255,.7),inset 3px 3px 6px rgba(255,255,255,.35),inset -3px -3px 6px rgba(0,0,60,.3)}
.btn2,.g{background:var(--peach);color:var(--bd);border:2px solid var(--b);box-shadow:var(--clay-s)}
.danger,td button{background:linear-gradient(145deg,#c62828,#b91c1c);color:#fff;border:0}
.del{background:var(--rose);color:var(--rose-d);border:2px solid var(--er);box-shadow:var(--clay-s)}
button:active,.btn:active{box-shadow:inset 4px 4px 9px rgba(0,0,60,.4),inset -3px -3px 6px rgba(255,255,255,.3)}
.btn2:active,.g:active,.del:active{box-shadow:inset 4px 4px 9px rgba(30,64,175,.35),inset -3px -3px 6px rgba(255,255,255,.9)}
button:disabled,.off{background:#cfd9ea;color:#475569;border:2px dashed #94a3b8;box-shadow:var(--pit)}
input:not([type=radio]):not([type=checkbox]),select,textarea{background:var(--field);border:2px solid var(--fb);border-radius:16px;box-shadow:var(--pit);color:var(--t);padding:10px 14px}
::placeholder{color:#475569;opacity:1}
input[type=radio],input[type=checkbox]{background:#fff;border:2px solid #4a69bd;box-shadow:var(--pit)}
input[type=radio]:checked{background:radial-gradient(circle,#fff 0 28%,transparent 31%),var(--grad);border-color:var(--b)}
input[type=checkbox]:checked{background:var(--grad);border-color:var(--b)}
input[type=checkbox]:checked::after{margin:1px 0 0 5px}
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:1px!important;height:1px!important}
.choice,label.radio{background:#fff;border:2px solid var(--fb);border-radius:20px;box-shadow:var(--clay-s)}
.choice:hover{background:var(--peach-l);border:2px solid var(--b)}
.choice:has(input:checked){background:var(--bl);border-color:var(--b);box-shadow:var(--pit)}
.tag{background:var(--grad);color:#fff;border:0}
.timer{background:var(--peach-l);color:var(--bd);box-shadow:var(--clay-s)}
.nums .num{border:2px solid var(--fb);background:#fff;color:var(--lk);box-shadow:var(--clay-s)}
.nums .num.done{background:var(--peach);color:var(--peach-d);border-color:var(--peach-b);box-shadow:var(--pit)}
.nums .num.cur{background:var(--grad);color:#fff;border-color:var(--b)}
th{color:var(--bd)}
td,th{border-bottom:1px solid rgba(30,64,175,.22)}
tr.me td{background:var(--peach)}
.img{background:var(--field);border:2px dashed var(--fb)}
.code{background:var(--peach);color:var(--bd);border:2px solid var(--b)}
header.side{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 20px}
header.side .logo{font-size:22px;margin-right:auto}
header.side .qt{font-weight:600;margin-right:auto}
header.compact .logo{margin-right:0}
header.side .burger{cursor:pointer;background:var(--peach-l);color:var(--bd);font-weight:700;border-radius:16px;padding:7px 16px;box-shadow:var(--clay-s)}
.navtoggle:focus-visible ~ .burger{outline:3px solid #fff;outline-offset:3px}
header.side nav{display:none;flex-basis:100%;flex-direction:column;gap:6px;padding-top:6px}
.navtoggle:checked ~ nav{display:flex}
header.side nav a{display:block;color:#fff;text-decoration:none;font-weight:600;padding:11px 16px;border-radius:18px}
header.side nav a:hover{background:rgba(0,0,40,.28)}
header.side nav a[aria-current=page]{background:var(--peach-l);color:var(--bd);box-shadow:var(--clay-s)}
header.side .who{color:var(--bl);font-size:13px;padding:6px 16px}
@media (min-width:900px){
body:has(header.side:not(.compact)){padding-left:250px}
header.side:not(.compact){position:fixed;top:0;bottom:0;left:0;width:250px;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:18px;padding:26px 16px;border-radius:0 32px 32px 0;overflow-y:auto;z-index:5;background:linear-gradient(170deg,#1e3a8a,#1d4ed8 70%,#2f63e8)}
header.side:not(.compact) .burger{display:none}
header.side:not(.compact) nav{display:flex;flex-basis:auto}
header.side:not(.compact) .logo{margin:0 0 8px 8px;font-size:26px}
}
header.side nav form{margin:0}header.side nav button.logout{display:block;width:100%;margin:0;text-align:left;background:none;border:0;box-shadow:none;color:#fff;font:inherit;font-weight:600;padding:11px 16px;border-radius:18px;cursor:pointer}header.side nav button.logout:hover{background:rgba(0,0,40,.28);filter:none}