/* Atlas Absensi: sistem rupa bersama (app.html, hrd.html, kiosk.html).
 * Token merek Atlas Property: navy gelap + emas, DM Serif Display (judul), Plus Jakarta Sans (isi), JetBrains Mono (angka).
 * Gerak: 200/300/450 ms, kurva reveal (.22,1,.36,1); utamanya transform + opacity
 * (pengecualian: clip-path pada centang, stroke-dashoffset pada .ring-timer, warna garis tepi kartu, kilau tombol utama).
 *
 * INDEKS KELAS (kontrak; jangan ganti nama)
 *
 * Tata letak
 *   .app            kolom tunggal HP (maks 30rem, tengah, aman-notch, ruang untuk .tabbar dan .cta)
 *   .shell          HRD: .sidebar tetap + .main di >= 1024px; di bawahnya sidebar hilang dan .tabbar dipakai
 *   .main           isi utama di dalam .shell
 *   .stack .row     tumpukan vertikal / baris; --gap lewat .gap-1 .. .gap-5; .wrap .between .end .center
 *   .grow           flex:1, min-width:0
 *   .cta            pembungkus tombol utama yang menempel di bawah (di atas .tabbar)
 *   .page-head      baris judul halaman: judul kiri, aksi kanan
 *   .hide-mobile    hilang di < 768px      .hide-desktop   hilang di >= 768px
 *   .bg-space       kanvas latar Atlas: gradien navy, kisi emas, partikel emas (tetap, seluruh layar, di belakang segalanya)
 *   body.no-tabbar  halaman tanpa tabbar (kiosk, layar hasil): --tabbar-h jadi 0
 *
 * Tipe
 *   .display        DM Serif Display (judul dan angka besar); .display-lg 2.5rem; .display-xl kiosk (clamp)
 *   h1 h2 h3 h4 / .h1 .h2 .h3   skala UI aplikasi (DM Serif Display)
 *   .eyebrow        label kapital kecil      .muted   teks redam      .sm .xs   ukuran kecil
 *   .num            angka JetBrains Mono tabular     .text-gradient   gradien emas (satu angka utama per layar)
 *
 * Tombol
 *   .btn + .btn-primary | .btn-ghost | .btn-danger ; .btn-lg (56px) .btn-sm .btn-block
 *   .btn[aria-busy="true"]  spinner sebaris, klik diblok     .btn:disabled  tetap terbaca
 *   .icon-btn       tombol ikon bulat 44x44 (beri aria-label)
 *
 * Formulir
 *   .field > label + .input (juga select.input, textarea.input) + .hint + .error ; .field.invalid
 *   .input-group    input + .icon-btn di ujung kanan (tampil/sembunyi sandi)
 *   .otp            enam kotak digit: <div class="otp"> 6 x <input class="input"> </div>
 *
 * Permukaan
 *   .card (+ .card-flush)   satu tingkat kaca, jangan ditumpuk di dalam .card lain
 *   .banner + .banner-info|warn|err|ok   isi: .banner-icon .banner-body (.banner-title) .banner-action
 *   .empty          .empty-icon .empty-title .empty-text + aksi
 *   .skeleton       blok pemuatan
 *
 * Status
 *   .pill + .pill-ok|warn|err|leave|neutral|info   selalu ikon + teks
 *   .badge          gelembung hitungan
 *   .check-row[data-state="idle|busy|ok|fail"]   .check-ring (.ck-ok .ck-fail) .check-body (.check-title .check-desc) .check-action
 *   .avatar (+ .avatar-sm .avatar-lg)
 *   .result-mark[data-tone="ok|err|warn"]   tanda besar layar hasil (cincin + centang, ledakan sekali)
 *   .ring-timer     cincin hitung mundur: <svg class="ring-timer" viewBox="0 0 100 100"> + circle.track + circle.bar[pathLength="1"] r=46; atur style --p (0..1) tiap detik
 *   .spinner        putaran kecil
 *
 * Data
 *   .stats > .stat  (.stat-label .stat-num .stat-sub); button.stat[aria-pressed] bisa ditekan; [data-tone]
 *   .list > .list-item  (.list-lead .list-main (.list-title .list-sub) .list-trail)
 *   .table          jadi kartu bertumpuk < 768px, pakai data-label di tiap sel; .cell-main = sel judul; .table-wrap
 *   .segmented      grup tab/radio; terpilih = aria-selected | aria-pressed | aria-checked | .is-active
 *   .chip           penyaring; aria-pressed
 *
 * Navigasi
 *   .tabbar         tetap di bawah; anak a|button dengan .tab-ico (+ .badge) dan label; aktif = aria-current="page"
 *   .sidebar        .sidebar-brand .sidebar-nav .sidebar-foot ; .nav-item (aria-current="page") + .badge
 *
 * Lapisan
 *   .sheet-backdrop > .sheet (.sheet-head .sheet-title .sheet-body .sheet-foot) ; .sheet-lg
 *   .toast-region > .toast + .toast-ok|err|info
 *
 * Gerak
 *   .enter          masuk (pudar + naik)     [data-stagger] > *   anak masuk berurutan (total <= 400 ms)
 *   keyframes: enter spin check-draw pop burst sheet-in/out dialog-in/out fade-in/out toast-in/out shimmer
 *
 * Ikon: <svg class="icon"><use href="/icons.svg#i-nama"/></svg> atau UI.icon('nama'); .icon-sm .icon-lg .icon-xl
 */

@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --accent: #A68A56;
  --accent-ink: #E6D2A7;
  --accent-2: #004B8E;
  --accent-3: #E6D2A7;
  --bg: #040D1C;
  --bg-deep: #050C1A;
  --bg-soft: #0A1930;
  --navy: #002244;
  --ok: #34D399;
  --warn: #FBBF24;
  --err: #EF4444;
  /* varian terang untuk TEKS di atas permukaan gelap (merah dan biru Atlas polos tak lolos 4.5:1 di navy-soft) */
  --accent-2-ink: #8CC4F5;
  --err-ink: #F87171;

  /* teks: lebih terang dari theme.css (0.55/0.45) agar lolos 4.5:1 di atas navy-soft */
  --text: rgba(255,255,255,0.82);
  --text-desc: rgba(255,255,255,0.72);
  --text-muted: rgba(255,255,255,0.64);
  --text-faint: rgba(255,255,255,0.56);

  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-input: rgba(255,255,255,0.40);
  --glass-strong: rgba(255,255,255,0.08);
  --surface: rgba(10,25,48,0.72);
  --gold-line: rgba(166,138,86,0.55);
  --gold-glow: 0 0 0 3px rgba(166,138,86,0.22);
  --grad-brand: linear-gradient(135deg, #E6D2A7 0%, #A68A56 50%, #E6D2A7 100%);

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  --r-sm: 0.5rem; --r-md: 0.875rem; --r-lg: 1.25rem; --r-xl: 1.5rem; --r-pill: 9999px;

  --dur-1: 200ms; --dur-2: 300ms; --dur-3: 450ms;
  --dur-1x: 140ms; --dur-2x: 210ms; --dur-3x: 315ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --tabbar-h: 3.75rem;

  font-variant-ligatures: none;
  font-synthesis: none;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
body.no-tabbar { --tabbar-h: 0px; }

/* nada per jenis; dipakai pill, banner, toast, stat, result-mark */
.pill-ok, .banner-ok, .toast-ok, [data-tone="ok"] {
  --tone: #34D399; --tone-bg: rgba(52,211,153,0.14); --tone-line: rgba(52,211,153,0.40); --tone-ink: #34D399;
}
.pill-warn, .banner-warn, [data-tone="warn"] {
  --tone: #FBBF24; --tone-bg: rgba(251,191,36,0.14); --tone-line: rgba(251,191,36,0.40); --tone-ink: #FBBF24;
}
.pill-err, .banner-err, .toast-err, [data-tone="err"] {
  --tone: #EF4444; --tone-bg: rgba(239,68,68,0.16); --tone-line: rgba(239,68,68,0.45); --tone-ink: #F87171;
}
.pill-leave, [data-tone="leave"] {
  --tone: #2F7FC8; --tone-bg: rgba(0,75,142,0.32); --tone-line: rgba(76,150,220,0.50); --tone-ink: #8CC4F5;
}
.pill-info, .banner-info, .toast-info, [data-tone="info"] {
  --tone: #A68A56; --tone-bg: rgba(166,138,86,0.14); --tone-line: rgba(166,138,86,0.42); --tone-ink: #E6D2A7;
}
.pill-neutral, [data-tone="neutral"] {
  --tone: rgba(255,255,255,0.5); --tone-bg: rgba(255,255,255,0.08); --tone-line: rgba(255,255,255,0.20); --tone-ink: rgba(255,255,255,0.82);
}

/* ---------- dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html.scroll-lock { overflow: hidden; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
p { margin: 0; }
a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; box-shadow: var(--gold-glow); }
::selection { background: rgba(166,138,86,0.40); }
html { scrollbar-color: #A68A56 #050C1A; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #050C1A; }
::-webkit-scrollbar-thumb { background: #A68A56; border-radius: 9999px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- tipe ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
h1, .h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; color: #fff; font-size: 1.75rem; line-height: 1.15; margin: 0; }
h2, .h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; color: #fff; font-size: 1.375rem; line-height: 1.2; margin: 0; }
h3, .h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.005em; color: #fff; font-size: 1.125rem; line-height: 1.25; margin: 0; }
h4 { font-size: 0.9375rem; line-height: 1.3; }
.display-lg { font-size: 2.5rem; line-height: 1.05; }
.display-xl { font-size: clamp(2.75rem, 9vw, 6rem); line-height: 1; }
.eyebrow {
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.muted { color: var(--text-muted); }
.sm { font-size: 0.8125rem; }
.xs { font-size: 0.75rem; }
.num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.text-gradient { display: inline-block; width: fit-content; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icon {
  display: inline-block; width: 1.25em; height: 1.25em; flex: none; fill: currentColor; vertical-align: -0.25em;
}
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }

/* ---------- tata letak ---------- */
.bg-space { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-4);
  width: 100%; max-width: 30rem; margin-inline: auto;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--sp-4) + var(--safe-t)) calc(var(--sp-4) + var(--safe-r))
           calc(var(--tabbar-h) + var(--sp-5) + var(--safe-b)) calc(var(--sp-4) + var(--safe-l));
}
.shell { position: relative; z-index: 1; }
.main {
  position: relative; z-index: 1; min-width: 0;
  padding: calc(var(--sp-4) + var(--safe-t)) calc(var(--sp-4) + var(--safe-r))
           calc(var(--tabbar-h) + var(--sp-5) + var(--safe-b)) calc(var(--sp-4) + var(--safe-l));
}
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-4)); }
.row { display: flex; align-items: center; gap: var(--gap, var(--sp-3)); }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.center { justify-content: center; text-align: center; }
.grow { flex: 1 1 0; min-width: 0; }
.gap-1 { --gap: var(--sp-1); } .gap-2 { --gap: var(--sp-2); } .gap-3 { --gap: var(--sp-3); }
.gap-4 { --gap: var(--sp-4); } .gap-5 { --gap: var(--sp-5); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.page-head > :first-child { min-width: 0; }
.cta {
  position: sticky; z-index: 20; margin-top: auto; padding-top: var(--sp-3);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-3));
}
.cta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -1.25rem calc(-1 * var(--sp-4)) calc(-1 * var(--sp-3));
  background: linear-gradient(to top, rgba(4,13,28,0.94) 45%, rgba(4,13,28,0));
}
body.no-tabbar .cta { bottom: calc(var(--safe-b) + var(--sp-3)); }

@media (max-width: 767.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }

/* ---------- tombol ---------- */
.btn, .icon-btn, .chip, .nav-item, .tabbar > a, .tabbar > button, .segmented > *,
a.list-item, button.list-item, button.stat {
  position: relative; isolation: isolate;
}
/* hover/tekan lewat lapisan putih: hanya opacity yang beranimasi */
.btn::before, .icon-btn::before, .chip::before, .nav-item::before, .tabbar > a::before, .tabbar > button::before,
.segmented > *::before, a.list-item::before, button.list-item::before, button.stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .btn:hover::before, .icon-btn:hover::before, .chip:hover::before, .nav-item:hover::before,
  .tabbar > a:hover::before, .tabbar > button:hover::before, .segmented > *:hover::before,
  a.list-item:hover::before, button.list-item:hover::before, button.stat:hover::before { opacity: 0.08; }
}
.btn:active::before, .icon-btn:active::before, .chip:active::before, .nav-item:active::before,
.tabbar > a:active::before, .tabbar > button:active::before, .segmented > *:active::before,
a.list-item:active::before, button.list-item:active::before, button.stat:active::before { opacity: 0.14; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.625rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  background: transparent; color: #fff; cursor: pointer; user-select: none;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%) no-repeat -160% 0 / 60% 100%, var(--grad-brand);
  color: var(--navy); box-shadow: 0 6px 18px -6px rgba(166,138,86,0.55);
  animation: sheen 4.2s var(--ease) 1.2s infinite;
}
.btn-ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.28); color: #fff; }
.btn-danger { background: var(--err); color: var(--bg-deep); }
@media (hover: hover) { .btn-primary:hover { box-shadow: 0 10px 26px -6px rgba(166,138,86,0.75); } }
.btn-lg { min-height: 3.5rem; padding: 0.75rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--bg-soft); animation: none; border-color: var(--border-strong); color: rgba(255,255,255,0.64);
  box-shadow: none; cursor: not-allowed;
}
.btn:disabled:active { transform: none; }
.btn:disabled::before { display: none; }
.btn[aria-busy="true"] { pointer-events: none; cursor: progress; }
.btn[aria-busy="true"]::after, .spinner {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn[aria-busy="true"]::after { order: -1; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; min-width: 2.75rem; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 1.25rem; cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn:disabled { color: rgba(255,255,255,0.56); cursor: not-allowed; }

/* ---------- formulir ---------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.field > label, .field > .label { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.field .hint { font-size: 0.8125rem; color: var(--text-muted); }
.field .error {
  display: none; align-items: flex-start; gap: 0.375rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--err-ink);
}
.field .error .icon { margin-top: 0.1rem; }
.field.invalid .error { display: flex; }
.field.invalid .input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.input {
  display: block; width: 100%; min-height: 3rem; padding: 0.75rem 1rem;
  border: 1px solid var(--border-input); border-radius: var(--r-md);
  background-color: rgba(5,12,26,0.6); color: #fff;
  font-size: 1rem; line-height: 1.4; caret-color: var(--accent);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: rgba(255,255,255,0.56); opacity: 1; }
.input:focus { border-color: var(--accent); box-shadow: var(--gold-glow); outline: none; }
.input:disabled, .input[readonly] { background-color: rgba(255,255,255,0.05); color: rgba(255,255,255,0.68); }
textarea.input { min-height: 6rem; resize: vertical; }
select.input {
  padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23FFFFFF' d='m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
}
select.input option { background: var(--bg-soft); color: #fff; }
input[type="date"].input, input[type="time"].input { min-height: 3rem; }
.input-group { position: relative; display: flex; }
.input-group .input { padding-right: 3.25rem; }
.input-group .icon-btn { position: absolute; top: 50%; right: 0.25rem; margin-top: -1.375rem; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.otp .input {
  min-height: 3.5rem; padding: 0; text-align: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- permukaan ---------- */
.card {
  padding: var(--sp-5) 1.25rem; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
@media (hover: hover) { .card:hover { border-color: var(--gold-line); box-shadow: 0 14px 36px -16px rgba(0,0,0,0.7); } }
.card:focus-within { border-color: var(--gold-line); }
.card-flush { padding: 0; overflow: hidden; }
.banner {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; border: 1px solid var(--tone-line); border-radius: var(--r-md);
  background: var(--tone-bg); color: rgba(255,255,255,0.92);
}
.banner-icon { flex: none; margin-top: 0.1rem; color: var(--tone-ink); font-size: 1.25rem; }
.banner-body { flex: 1 1 12rem; min-width: 0; }
.banner-title { font-weight: 700; color: #fff; }
.banner-action { flex: none; margin-left: auto; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; }
.empty-icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.5rem; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 1.5rem;
}
.empty-title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; color: #fff; font-size: 1.25rem; }
.empty-text { max-width: 22rem; color: var(--text-muted); }
.empty .btn { margin-top: 0.5rem; }
.skeleton {
  position: relative; display: block; overflow: hidden; min-height: 1rem;
  border-radius: var(--r-sm); background: rgba(255,255,255,0.07);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.09), rgba(255,255,255,0));
  animation: shimmer 1.4s var(--ease) infinite;
}

/* ---------- status ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%;
  min-height: 1.75rem; padding: 0.25rem 0.75rem 0.25rem 0.625rem;
  border: 1px solid var(--tone-line); border-radius: var(--r-pill);
  background: var(--tone-bg); color: var(--tone-ink);
  font-size: 0.75rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.pill .icon { width: 0.95rem; height: 0.95rem; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: var(--r-pill);
  background: var(--warn); color: var(--bg-deep);
  font-size: 0.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
}
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.6875rem; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.125rem; }

.check-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem;
  min-height: 4rem; padding: 0.875rem 0;
}
.check-row + .check-row { border-top: 1px solid var(--border); }
.check-ring { position: relative; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; }
.check-ring::before, .check-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.check-ring::before { border: 2px solid rgba(255,255,255,0.40); transition: opacity var(--dur-1) var(--ease); }
.check-ring::after { border: 2px solid transparent; border-top-color: var(--accent-3); opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.check-ring .ck {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--bg-deep); opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.check-ring .ck-ok { background: var(--ok); }
.check-ring .ck-fail { background: var(--err); }
.check-ring .ck .icon { width: 1.25rem; height: 1.25rem; }
.check-row[data-state="busy"] .check-ring::before { opacity: 0.35; }
.check-row[data-state="busy"] .check-ring::after { opacity: 1; animation: spin 0.8s linear infinite; }
.check-row[data-state="ok"] .check-ring::before, .check-row[data-state="fail"] .check-ring::before { opacity: 0; }
.check-row[data-state="ok"] .ck-ok, .check-row[data-state="fail"] .ck-fail { opacity: 1; transform: none; }
.check-row[data-state="ok"] .ck-ok .icon { animation: check-draw var(--dur-2) var(--ease) 120ms backwards; }
.check-row[data-state="fail"] .ck-fail .icon { animation: pop var(--dur-2) var(--ease) 120ms backwards; }
.check-title { font-weight: 700; color: #fff; line-height: 1.3; }
.check-desc { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--text-muted); }
.check-row[data-state="fail"] .check-desc { color: var(--err-ink); }
.check-action { display: flex; gap: 0.5rem; }
.check-action:empty { display: none; }

.result-mark {
  position: relative; display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%;
  background: var(--tone); color: var(--bg-deep); font-size: 3rem;
  animation: pop var(--dur-3) var(--ease) backwards;
}
.result-mark::before, .result-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tone);
  opacity: 0; animation: burst var(--dur-3) var(--ease) 150ms backwards;
}
.result-mark::after { animation-delay: 270ms; }
.result-mark .icon { width: 3rem; height: 3rem; animation: check-draw var(--dur-3) var(--ease) 200ms backwards; }
.ring-timer { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.ring-timer circle { fill: none; stroke-width: 6; }
.ring-timer .track { stroke: rgba(255,255,255,0.12); }
.ring-timer .bar { stroke: var(--accent-3); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); transition: stroke-dashoffset 1s linear; }

/* ---------- data ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: inherit; font: inherit; text-align: left;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
@media (hover: hover) { .stat:hover { border-color: var(--gold-line); } button.stat:hover { transform: translateY(-2px); } }
.stat-label {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.stat-label .icon { color: var(--tone-ink, currentColor); }
.stat-num { font-family: var(--font-mono); font-weight: 500; font-size: 1.875rem; line-height: 1.15; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.8125rem; color: var(--text-muted); }
button.stat { width: 100%; cursor: pointer; transition: transform var(--dur-1) var(--ease); }
button.stat:active { transform: scale(0.98); }
button.stat[aria-pressed="true"] {
  border-color: var(--accent); background: rgba(166,138,86,0.14); box-shadow: inset 0 0 0 1px var(--accent);
}

.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.5rem; padding: 0.75rem 0;
  border: 0; border-top: 1px solid var(--border); background: none;
  color: inherit; font: inherit; text-align: left; text-decoration: none;
}
.list-item:first-child { border-top: 0; }
a.list-item, button.list-item { padding-inline: 0.5rem; margin-inline: -0.5rem; width: calc(100% + 1rem); border-radius: var(--r-sm); cursor: pointer; }
.list-lead { flex: none; display: flex; align-items: center; }
.list-main { flex: 1 1 0; min-width: 0; }
.list-title { font-weight: 700; color: #fff; line-height: 1.3; overflow-wrap: anywhere; }
.list-sub { font-size: 0.8125rem; color: var(--text-muted); overflow-wrap: anywhere; }
.list-trail { flex: none; display: flex; align-items: center; gap: 0.5rem; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-strong);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.table td { padding: 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.table .num { text-align: right; }
.table .cell-main { font-weight: 700; color: #fff; }
@media (max-width: 767.98px) {
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr {
    margin-bottom: var(--sp-3); padding: 0.5rem 0.875rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  }
  .table td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border: 0; text-align: right; }
  .table td[data-label]::before {
    content: attr(data-label); flex: none; text-align: left;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  }
  .table td.cell-main { display: block; padding-top: 0.25rem; text-align: left; font-size: 1rem; }
  .card .table tr { margin: 0; padding: 0.5rem 0; background: none; border: 0; border-radius: 0; }
  .card .table tr + tr { border-top: 1px solid var(--border); }
}

.segmented {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem; max-width: 100%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: var(--r-pill);
}
.segmented.block { display: flex; width: 100%; }
.segmented > * {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0.375rem 1rem; border: 1px solid transparent; border-radius: var(--r-pill);
  background: none; color: var(--text-desc); font-size: 0.875rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.segmented > [aria-selected="true"], .segmented > [aria-pressed="true"], .segmented > [aria-checked="true"], .segmented > .is-active {
  background: rgba(166,138,86,0.26); border-color: var(--gold-line); color: #fff; font-weight: 800;
}
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.25rem; padding: 0.25rem 0.875rem;
  background: transparent; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--r-pill);
  color: var(--text); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.chip::after { content: ""; position: absolute; inset: -0.25rem; }
.chip[aria-pressed="true"] { background: rgba(166,138,86,0.22); border-color: var(--accent); color: #fff; font-weight: 800; }

/* ---------- navigasi ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; max-width: 30rem; margin-inline: auto; padding-bottom: var(--safe-b);
  background: var(--bg-deep); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.shell .tabbar { max-width: 40rem; }
.tabbar > a, .tabbar > button {
  flex: 1 1 0; min-width: 0; min-height: 3.5rem; padding: 0.375rem 0.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  border: 0; background: none; color: var(--text-desc); text-decoration: none;
  font-size: 0.75rem; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.tab-ico {
  position: relative; display: grid; place-items: center; width: 3.25rem; height: 1.75rem;
  border-radius: var(--r-pill); font-size: 1.5rem;
}
.tab-ico .icon { width: 1.5rem; height: 1.5rem; }
.tab-ico .badge { position: absolute; top: -0.375rem; right: 0; }
.tabbar > [aria-current="page"], .tabbar > [aria-selected="true"], .tabbar > .is-active { color: #fff; font-weight: 800; }
.tabbar > [aria-current="page"] .tab-ico, .tabbar > [aria-selected="true"] .tab-ico, .tabbar > .is-active .tab-ico {
  background: rgba(166,138,86,0.26); box-shadow: inset 0 0 0 1px var(--gold-line);
}

.sidebar { display: none; }
.sidebar-brand { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem 0.875rem 1.25rem; font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.005em; color: #fff; }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.sidebar-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.nav-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border: 1px solid transparent; border-radius: var(--r-md); background: none;
  color: var(--text); font-size: 0.9375rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.nav-item .badge { margin-left: auto; }
.nav-item[aria-current="page"] { background: rgba(166,138,86,0.2); border-color: var(--gold-line); color: #fff; font-weight: 800; }
@media (min-width: 1024px) {
  .sidebar {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: 16rem;
    padding: calc(var(--sp-5) + var(--safe-t)) var(--sp-4) var(--sp-5); overflow-y: auto;
    background: rgba(5,12,26,0.94); border-right: 1px solid var(--border);
  }
  .shell > .main {
    margin-left: 16rem; padding: var(--sp-6) max(2.5rem, calc((100vw - 16rem - 72rem) / 2)) var(--sp-7);
  }
  .shell .tabbar, .shell ~ .tabbar { display: none; }
}

/* ---------- lapisan ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: calc(100 + var(--layer, 0));
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(2,8,18,0.78); animation: fade-in var(--dur-2) var(--ease) backwards;
}
.sheet-backdrop.is-closing { animation: fade-out var(--dur-2x) var(--ease) forwards; pointer-events: none; }
.sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 32rem; max-height: 90vh; max-height: 90dvh;
  background: var(--bg-soft); border: 1px solid var(--border-strong); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -20px 50px -12px rgba(0,0,0,0.6);
  overflow: hidden; outline: none; animation: sheet-in var(--dur-3) var(--ease) backwards;
}
.sheet-lg { max-width: 44rem; }
.is-closing .sheet { animation: sheet-out var(--dur-3x) var(--ease) forwards; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.75rem 0.25rem 1.25rem; min-height: 3.5rem; }
.sheet-title { min-width: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 1.25rem 1.25rem; }
.sheet-foot {
  display: flex; gap: 0.75rem; justify-content: flex-end; padding: 0.875rem 1.25rem calc(0.875rem + var(--safe-b));
  border-top: 1px solid var(--border); background: var(--bg-soft);
}
.sheet-foot .btn { flex: 1 1 0; }
@media (min-width: 768px) {
  .sheet-backdrop { align-items: center; padding: var(--sp-5); }
  .sheet { max-height: min(46rem, calc(100vh - 3rem)); border-bottom: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); animation-name: dialog-in; }
  .is-closing .sheet { animation-name: dialog-out; }
  .sheet-foot .btn { flex: 0 0 auto; min-width: 7rem; }
}
.toast-region {
  position: fixed; left: 0; right: 0; z-index: 400; bottom: calc(var(--tabbar-h) + var(--safe-b) + var(--sp-3));
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-inline: var(--sp-4); pointer-events: none;
}
@media (min-width: 1024px) { .toast-region { bottom: var(--sp-5); } }
/* lembar terbuka di HP: toast pindah ke atas supaya tidak menutupi isian dan tombol */
@media (max-width: 767.98px) { html.scroll-lock .toast-region { bottom: auto; top: calc(var(--safe-t) + var(--sp-3)); } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 0.625rem; max-width: min(26rem, 100%);
  padding: 0.75rem 1rem; border: 1px solid var(--tone-line); border-radius: var(--r-md);
  background: var(--bg-soft); color: #fff; font-size: 0.875rem; font-weight: 600;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,0.7); animation: toast-in var(--dur-2) var(--ease) backwards;
}
.toast .icon { color: var(--tone-ink); font-size: 1.25rem; }
.toast.is-leaving { animation: toast-out var(--dur-1x) var(--ease) forwards; }

/* ---------- gerak ---------- */
.enter { animation: enter 650ms var(--ease) backwards; }
[data-stagger] > * { animation: enter 650ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
[data-stagger] > :nth-child(2) { --i: 1; } [data-stagger] > :nth-child(3) { --i: 2; } [data-stagger] > :nth-child(4) { --i: 3; }
[data-stagger] > :nth-child(5) { --i: 4; } [data-stagger] > :nth-child(6) { --i: 5; } [data-stagger] > :nth-child(7) { --i: 6; }
[data-stagger] > :nth-child(n+8) { --i: 7; }

@keyframes enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes sheen { 0%, 55% { background-position: -160% 0, 0 0; } 100% { background-position: 260% 0, 0 0; } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes check-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes burst { from { opacity: 0.55; transform: scale(0.8); } to { opacity: 0; transform: scale(1.75); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }