@font-face{font-family:Inter;src:url('/assets/fonts/Inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{font-synthesis:none}
/* JGKG-117 (AC-T13-10): utility classes replacing inline styles on
   setup_password pages — CSP style-src 'self' forbids unsafe-inline. */
.form-hint{font-size:13px}
.form-note{font-size:12px}
/* JGKG-136: banner flash layouts/app (partials/flash) selama ini tampil
   sebagai teks melayang tanpa gaya. Warna literal (bukan var) karena
   shell.css dimuat sebelum CSS per-halaman yang mendefinisikan token.
   .flash[role="alert"] = flash error (flash.edge memberi role=alert).
   Posisi pojok kanan-atas: versi tengah-menumpuk menutupi <h1> halaman. */
.flash{position:fixed;top:14px;right:16px;z-index:70;max-width:min(420px,calc(100vw - 32px));background:#141414;border:1px solid rgba(52,211,153,.4);color:#6ee7b7;border-radius:8px;padding:10px 16px;font-size:14px;line-height:1.5;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.flash[role="alert"]{border-color:rgba(248,113,113,.45);color:#fca5a5;background:rgba(20,20,20,.97)}
/* ===== JGKG-169: sidebar drawer mobile (satu tempat untuk SEMUA halaman
   ber-sidebar .app/.side). >1100px = tidak ada perubahan desktop sama sekali;
   seluruh aturan di bawah berada dalam media query. Catatan spesifikasi:
   head.edge memuat shell.css SEBELUM CSS per-halaman, jadi aturan yang bisa
   bertabrakan dengan page CSS memakai prefiks `body` (0,1,1 > 0,1,0).
   Token warna pakai var() dengan fallback literal karena shell.css dimuat
   sebelum CSS per-halaman yang mendefinisikan :root. -- */
.nav-toggle{display:none}
.nav-backdrop{display:none}
@media (max-width:1100px){
  body .nav-toggle{display:inline-flex;align-items:center;justify-content:center;position:fixed;top:10px;left:10px;z-index:91;width:40px;height:40px;padding:0;border:1px solid var(--border-2,#323232);border-radius:10px;background:var(--surface,#141414);color:var(--text,#f5f5f5);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  body .nav-toggle:hover{background:var(--surface-2,#1b1b1b)}
  body .nav-toggle:focus-visible{outline:2px solid var(--text,#f5f5f5);outline-offset:2px}
  body .nav-backdrop{display:block;position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
  body[data-nav-open="true"] .nav-backdrop{opacity:1;visibility:visible}
  body .side{position:fixed;top:0;left:0;z-index:90;height:100dvh;min-height:100vh;width:min(300px,86vw);overflow-y:auto;background:var(--surface,#141414);border-right:1px solid var(--border,#262626);box-shadow:14px 0 40px rgba(0,0,0,.5);transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility .2s ease}
  body[data-nav-open="true"]{overflow:hidden}
  /* visibility 0s saat MEMBUKA: step diskret transisi .2s baru efektif di
     50% (~100ms) sehingga focus() same-tick gagal — aturan state buka
     membuat visible instan, transisi base tetap menganimasikan slide-out. */
  body[data-nav-open="true"] .side{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
  /* header judul + aksi harus wrap; tombol aksi tidak溢出 di layar sempit */
  body .topbar,body .head{flex-wrap:wrap}
  body .topbar .btn,body .head .btn{flex:none;white-space:normal}
  body .head__main{min-width:0;flex:1 1 260px}
  body .head__sync,body .head__actions{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
  /* padding .main menyusut; baris pertama menyisakan ruang tombol hamburger
     (toggle fixed 10–50px horizontal, 10–50px vertikal) */
  body .main{padding:16px 16px 40px}
  body .main > .topbar:first-child,body .main > .head:first-child{padding-top:42px;padding-left:44px}
  /* tabel: scroll-x cukup di dalam wrapper — kolom tidak memaksa layout hancur.
     min-width:0 di .main/.twrap MEMATIKAN grid chain: tanpa ini intrinsic
     width tabel (min-width 920px) merambat naik lewat wrapper overflow:auto
     dan melebarkan kolom grid -> page horizontal scroll (JGKG-169). */
  body .main{min-width:0}
  body .twrap{max-width:100%;min-width:0}
  body .twrap table{min-width:0}
  body .twrap th,body .twrap td{padding-left:10px;padding-right:10px}
  body .pager{flex-wrap:wrap;row-gap:10px}
  body .pager .sp{margin-left:0;width:100%;justify-content:flex-end}
  /* /chat (main.main.chat-page, .chat-page{padding:0} di chat.css):
     full-bleed SENGAJA — jangan beri padding .main. Sisakan ruang hamburger
     lewat padding atas .chat-conversation sendiri. */
  body .main.chat-page{padding:0}
  body .chat-conversation{padding-top:52px}
}
@media (max-width:1100px) and (prefers-reduced-motion:reduce){
  .side,.nav-backdrop{transition:none}
}