:root{
  --bg:#E9EDF7;--surface:#FFFFFF;--surface2:#F2F4FB;--ink:#0E1433;--muted:#56607F;--line:#D3DAEE;--edge:#C4CDE6;
  --brand:#2447E0;--brand-ink:#FFFFFF;--signal:#FFC21A;--signal-ink:#1A1400;
  --ok:#0F7B4B;--ok-bg:#DDF1E7;--err:#B3261E;--err-bg:#FBE4E2;
  --font:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0A0F22;--surface:#121936;--surface2:#19224A;--ink:#ECEFFB;--muted:#9AA5CC;--line:#28325F;--edge:#080C1C;
    --brand:#8AA0FF;--brand-ink:#0A0F22;--ok:#5FD3A0;--ok-bg:#12352A;--err:#FF8A84;--err-bg:#3A1614;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}
h1,h2,h3,p{margin:0}
a{color:var(--brand);font-weight:600}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px}

/* tombol dan form */
.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:10px;font-weight:600;box-shadow:0 2px 0 var(--edge);text-decoration:none;color:var(--ink)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--edge)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.btn.lg{padding:12px 20px;font-size:16px;border-radius:12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.f{display:block}
.f>span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.f input,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.f input:focus,textarea:focus{outline:none;border-color:var(--brand)}
textarea{resize:vertical;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:14px}
.inline{display:inline}
.sub{color:var(--muted)}
.note{padding:12px 14px;border-radius:10px;font-weight:600;margin-bottom:12px}
.note.ok{background:var(--ok-bg);color:var(--ok)}
.note.err{background:var(--err-bg);color:var(--err)}
.mark{width:32px;height:32px;border-radius:9px;background:#FFC21A;color:#1A1400;display:inline-grid;place-items:center;font-weight:800;flex:none}

/* halaman masuk dan daftar */
.auth{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.auth-art{background:#2447E0;color:#fff;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.auth-art h1{font-size:clamp(40px,5.6vw,76px);line-height:.98;font-weight:800;letter-spacing:-.025em;max-width:10ch}
.auth-art p{max-width:38ch;font-size:17px;margin-top:16px;opacity:.94}
.stackart{display:grid;gap:9px;max-width:380px}
.b{border-radius:12px;padding:12px 16px;color:#0E1433;background:#fff;box-shadow:0 4px 0 rgba(6,16,80,.4);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:8px;animation:drop .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.14s)}
.b.y{background:#FFC21A;padding:24px 16px}
.b small{font-weight:600;opacity:.7;font-size:13px}
.b i{flex:1;height:26px;border-radius:6px;background:#C9D4FF}
@keyframes drop{from{opacity:0;transform:translateY(-40px) rotate(-2deg)}}
.auth-form{display:grid;place-items:center;padding:32px 20px;background:var(--surface)}
.form-box{width:100%;max-width:400px;display:grid;gap:16px}
.form-box h2{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.form-box form{display:grid;gap:14px}

/* halaman setelah login */
.top{display:flex;align-items:center;gap:20px;padding:14px clamp(16px,4vw,40px);background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:6px}
.nav a{padding:6px 12px;border-radius:999px;color:var(--muted);text-decoration:none}
.nav a:hover{background:var(--surface2);color:var(--ink)}
.who{margin-left:auto;color:var(--muted);font-weight:600}
.wrap{max-width:1040px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px) 64px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head h2{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.025em;line-height:1}
.sec-t{font-size:20px;font-weight:800;margin:32px 0 14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 3px 0 var(--edge);display:grid;gap:2px;min-width:0}
.stat .k{color:var(--muted);font-size:13px;font-weight:600}
.stat b{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{border:2px dashed var(--line);border-radius:18px;padding:36px 20px;text-align:center;display:grid;gap:8px;justify-items:center}
.empty h3{font-size:22px;font-weight:800}
.empty p{color:var(--muted);max-width:52ch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 3px 0 var(--edge);margin-bottom:18px;display:grid;gap:12px}
.panel h3{font-size:18px}
.grid-form{grid-template-columns:repeat(3,1fr) auto;align-items:end}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:0}

@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-art{min-height:auto}
  .stats{grid-template-columns:1fr}
  .grid-form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.b{animation:none}}