/* Hepifun - tokens.css (Sekar, v2)
   Monokrom + SATU aksen hijau lime diredam "Hepi Lime" (#9AD84A). Dipakai hemat: tombol utama, saldo token, fokus, status aktif.
   Status hanya gagal/peringatan, redup. Lihat DESIGN.md untuk aturan pemakaian dan tabel kontras.
   Tema: [data-theme="dark|light"] di <html>; tanpa atribut mengikuti prefers-color-scheme (default gelap).
   Font: tumpukan font sistem (tanpa unduhan). Opsional self-host: Inter Variable (woff2) -> lihat DESIGN.md. */

:root {
  /* Tipografi */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 26px;
  --lh-tight: 1.25; --lh-base: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  /* Spasi (basis 4px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* Ukuran tetap */
  --tap: 44px;            /* target sentuh minimum */
  --header-h: 48px;
  --bottombar-h: 56px;
  --sidebar-w: 216px;
  --content-max: 1120px;
  --composer-bar-h: 64px; /* bar kirim lengket di HP */

  /* Gerak */
  --dur: 120ms; --ease: ease-out;
}

/* ---------- DARK (default) ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  /* Netral 10 tingkat: 0 paling gelap -> 9 paling terang */
  --n0: #0e0e0f; --n1: #151516; --n2: #1c1c1e; --n3: #262628; --n4: #333336;
  --n5: #46464a; --n6: #6c6c72; --n7: #8a8a90; --n8: #b0b0b5; --n9: #ededee;

  --bg: var(--n0);          /* kanvas */
  --surface: var(--n1);     /* kartu, sidebar */
  --raised: var(--n2);      /* input, modal, hover */
  --sunken: #0a0a0b;        /* area bersarang, thumbnail kosong */
  --border: #2a2a2d;
  --border-strong: #3d3d41;
  --text: var(--n9);        /* 16:1 */
  --text-muted: #a6a6ac;    /* 7.6:1 */
  --text-faint: var(--n7);  /* 5.4:1 pada bg, 4.9:1 pada raised */
  --on-primary: #0b1500;    /* tinta di atas lime: 11:1 */
  --primary: #9ad84a;       /* tombol utama = lime (satu per layar) */
  --primary-hover: #ade25f;
  --primary-border: #9ad84a;
  --accent: #9ad84a;        /* 11,3:1 pada bg - teks/ikon/fokus/penanda aktif */
  --accent-fill: #9ad84a;   /* permukaan lime (tombol, badge saldo) */
  --on-accent: #0b1500;
  --accent-soft: rgba(154,216,74,.12);  /* latar lembut: badge saldo, item aktif */
  --accent-line: rgba(154,216,74,.35);
  --danger: #d9948e;        /* gagal, 7:1 */
  --danger-bg: #2a1a19;
  --warn: #cdb078;          /* peringatan anggaran >= 80% */
  --warn-bg: #272014;
  --overlay: rgba(0,0,0,.6);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.5);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  color-scheme: light;
  --n0: #fafafa; --n1: #ffffff; --n2: #f2f2f3; --n3: #e8e8ea; --n4: #d9d9dc;
  --n5: #c2c2c7; --n6: #9c9ca2; --n7: #67676d; --n8: #3e3e43; --n9: #141415;

  --bg: var(--n0);
  --surface: var(--n1);
  --raised: var(--n2);
  --sunken: #ececee;
  --border: #e3e3e6;
  --border-strong: #c9c9ce;
  --text: var(--n9);        /* 17:1 */
  --text-muted: #55555b;    /* 7.4:1 */
  --text-faint: var(--n7);  /* 5.2:1 pada putih, 4.9:1 pada raised */
  --on-primary: #0b1500;
  --primary: #9ad84a;       /* isi tombol tetap lime; tepi 4:1 agar batas terlihat di atas putih */
  --primary-hover: #86c23a;
  --primary-border: #4f8f12;
  --accent: #3b7a0a;        /* 5,3:1 pada putih (4,7 pada raised) - teks/ikon/fokus */
  --accent-fill: #9ad84a;
  --on-accent: #0b1500;
  --accent-soft: #eaf5d8;
  --accent-line: rgba(59,122,10,.35);
  --danger: #9b3b34;        /* 6.8:1 */
  --danger-bg: #f8ecea;
  --warn: #7a5a12;          /* 6.4:1 */
  --warn-bg: #f6efdc;
  --overlay: rgba(20,20,21,.4);
  --shadow-pop: 0 4px 16px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --n0: #fafafa; --n1: #ffffff; --n2: #f2f2f3; --n3: #e8e8ea; --n4: #d9d9dc;
    --n5: #c2c2c7; --n6: #9c9ca2; --n7: #67676d; --n8: #3e3e43; --n9: #141415;
    --bg: #fafafa; --surface: #ffffff; --raised: #f2f2f3; --sunken: #ececee;
    --border: #e3e3e6; --border-strong: #c9c9ce;
    --text: #141415; --text-muted: #55555b; --text-faint: #67676d;
    --on-primary: #0b1500; --primary: #9ad84a; --primary-hover: #86c23a; --primary-border: #4f8f12;
    --accent: #3b7a0a; --accent-fill: #9ad84a; --on-accent: #0b1500; --accent-soft: #eaf5d8; --accent-line: rgba(59,122,10,.35);
    --danger: #9b3b34; --danger-bg: #f8ecea; --warn: #7a5a12; --warn-bg: #f6efdc;
    --overlay: rgba(20,20,21,.4); --shadow-pop: 0 4px 16px rgba(0,0,0,.12);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fw-regular) var(--fs-md)/var(--lh-base) var(--font-sans); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,p,figure,ul,ol { margin: 0; padding: 0; }
ul,ol { list-style: none; }
img,video,svg { display: block; max-width: 100%; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--border-strong); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Utilitas ---------- */
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--text-muted); } .faint { color: var(--text-faint); }
.usd { color: var(--text-faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tombol ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; transition: background var(--dur) var(--ease); }
.btn:hover { background: var(--raised); }
.btn-primary { background: var(--primary); border-color: var(--primary-border); color: var(--on-primary); font-weight: var(--fw-semibold); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { border-color: transparent; }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-icon { width: var(--tap); padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.hint { font-size: var(--fs-xs); color: var(--text-faint); }
.error-text { font-size: var(--fs-xs); color: var(--danger); }
.input, .select, .textarea { width: 100%; min-height: var(--tap); padding: 0 var(--sp-3); background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); }
.textarea { padding: var(--sp-3); min-height: 140px; resize: vertical; line-height: var(--lh-base); }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Segmented control */
.seg { display: inline-flex; padding: 2px; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-md); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg > button { min-height: 38px; padding: 0 var(--sp-3); border-radius: 6px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.seg.full { display: flex; } .seg.full > button { flex: 1; }

/* Slider */
.slider { width: 100%; height: var(--tap); background: transparent; appearance: none; }
.slider::-webkit-slider-runnable-track { height: 4px; background: var(--border-strong); border-radius: 2px; }
.slider::-moz-range-track { height: 4px; background: var(--border-strong); border-radius: 2px; }
.slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--text); border: 2px solid var(--bg); }
.slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 2px solid var(--bg); }

/* Switch */
.switch { position: relative; width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--border-strong); flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); transition: transform var(--dur); }
.switch[aria-checked="true"] { background: var(--text); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ---------- Chip label (Image 1, Video 1, Audio 1) ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--raised); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--text-faint); }
.chip-bad { border-color: var(--warn); color: var(--warn); }       /* label tidak ada di slot */
.chip-inline { min-height: 0; padding: 0 6px; border-radius: var(--r-sm); font-size: .92em; } /* di dalam teks prompt */

/* ---------- Slot upload ---------- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.slot { position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: var(--sunken); border: 1px solid var(--border); overflow: hidden; touch-action: none; }
.slot.empty { border-style: dashed; border-color: var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
.slot.dragover { border-color: var(--accent); }
.slot.dragging { opacity: .6; box-shadow: var(--shadow-pop); }
.slot .slot-label { position: absolute; left: 4px; bottom: 4px; }
.slot .slot-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--overlay); color: #fff; }
.slot .slot-grip { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; color: #fff; background: var(--overlay); border-radius: var(--r-sm); cursor: grab; }

/* ---------- Status pill ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-wait::before { background: transparent; border: 1px solid currentColor; }
.pill-run { color: var(--text); } .pill-run::before { animation: pulse 1.4s ease-in-out infinite; }
.pill-done { color: var(--text); }
.pill-fail { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.pill-cancel { color: var(--text-faint); } .pill-cancel::before { border-radius: 0; height: 1px; width: 6px; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- Kartu & kartu video ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); }
.vcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.vcard-thumb { position: relative; aspect-ratio: 16/9; background: var(--sunken); }
.vcard-thumb .dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: var(--r-sm); background: var(--overlay); color: #fff; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.vcard-thumb .fav { position: absolute; top: 6px; right: 6px; }
.vcard-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.vcard-title { font-size: var(--fs-sm); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.grid-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .grid-cards { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Progress tipis (anggaran) ---------- */
.meter { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--v, 0%); background: var(--text-muted); }
.meter.warn > i { background: var(--warn); }
.meter.over > i { background: var(--danger); }

/* ---------- Komponen biaya ---------- */
.costbar { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); padding: 6px var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.costbar .seg-cost { display: flex; flex-direction: column; line-height: 1.2; }
.costbar .seg-cost small { font-size: 11px; color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase; }
.costbar .seg-cost b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.costbar .budget { margin-left: auto; min-width: 160px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.costbar .budget .meter { height: 3px; }
.costbar-compact { display: none; }   /* versi HP: dua baris ringkas */
@media (max-width: 719px) {
  .costbar-full { display: none; }
  .costbar-compact { display: block; padding: 6px var(--sp-4) 0; background: var(--surface); border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
  .costbar-compact .line { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); min-height: 24px; }
  .costbar-compact .meter { margin: 6px calc(-1 * var(--sp-4)) 0; border-radius: 0; height: 2px; }
}
.estimate { display: flex; flex-direction: column; line-height: 1.25; font-variant-numeric: tabular-nums; min-width: 0; }
.estimate b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.estimate span { font-size: var(--fs-xs); color: var(--text-muted); }
.estimate.over b { color: var(--danger); }

/* Bar kirim lengket */
.sendbar { position: sticky; bottom: var(--bottombar-h); z-index: 20; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--composer-bar-h); padding: var(--sp-2) var(--sp-4); background: var(--surface); border-top: 1px solid var(--border-strong); }
.sendbar .btn-primary { margin-left: auto; min-width: 120px; }
@media (min-width: 900px) { .sendbar { bottom: 0; } }

/* Tabel */
.table { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.table th { text-align: left; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.table td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.table .r { text-align: right; }
.table tfoot td { font-weight: var(--fw-semibold); border-bottom: 0; border-top: 1px solid var(--border-strong); }
.table-wrap { overflow-x: auto; }

/* Mini bar chart */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding-top: var(--sp-2); border-bottom: 1px solid var(--border-strong); }
.bars > i { flex: 1; min-width: 3px; height: var(--h, 4%); background: var(--n6); border-radius: 2px 2px 0 0; }
.bars > i.today { background: var(--text); }
.bars > i:hover { background: var(--text-muted); }
.bars-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------- Toast & modal ---------- */
.toast-region { position: fixed; z-index: 100; left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--bottombar-h) + var(--composer-bar-h) + var(--sp-3)); display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
@media (min-width: 900px) { .toast-region { left: auto; right: var(--sp-6); bottom: var(--sp-6); width: 360px; } }
.toast { pointer-events: auto; display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.toast-warn { border-color: var(--warn); } .toast-error { border-color: var(--danger); }
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; }
.modal { width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--sp-5); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 720px) { .modal-backdrop { align-items: center; } .modal { border-radius: var(--r-lg); } }
.modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* ---------- Shell: sidebar desktop, bottom bar HP ---------- */
.app { min-height: 100vh; }
.nav { display: flex; }
.nav a { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.nav a[aria-current="page"] { color: var(--text); }
.nav svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav .badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--text); color: var(--on-primary); font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--bottombar-h); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .nav a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; font-size: 11px; position: relative; }
  .nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--accent); }
  .nav .badge { position: absolute; top: 4px; left: 55%; margin: 0; }
  .nav .more { display: none; }       /* Karakter, Template, Pengaturan masuk menu "Lainnya" */
  .nav .brand { display: none; }
  .main { padding-bottom: calc(var(--bottombar-h) + var(--sp-4)); }
}
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
  .nav { flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; padding: var(--sp-4) var(--sp-3); background: var(--surface); border-right: 1px solid var(--border); }
  .nav a { min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-md); }
  .nav a:hover { background: var(--raised); }
  .nav a[aria-current="page"] { background: var(--raised); box-shadow: inset 2px 0 0 var(--accent); }
  .nav .brand { padding: var(--sp-2) var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); letter-spacing: .02em; }
  .nav .sep { flex: 1; }
}
.page { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 900px) { .page { padding: var(--sp-6); } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cols { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .cols-2 { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); } }
.section { display: flex; flex-direction: column; gap: var(--sp-3); }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* =====================================================================
   Komponen baru Hepifun (v2)
   ===================================================================== */

/* Badge saldo token: satu-satunya "lencana" lime di header */
.balance { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: var(--r-pill); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance svg { width: 16px; height: 16px; flex: none; }
.balance b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.balance small { font-size: var(--fs-xs); color: var(--text-muted); }
.balance .topup { height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--primary); border: 1px solid var(--primary-border); color: var(--on-primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; }
.balance .topup:hover { background: var(--primary-hover); }
.balance.low { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }   /* saldo < perkiraan job */
@media (max-width: 479px) { .balance small { display: none; } .balance { padding-left: 10px; gap: 6px; } }

/* Kartu paket topup */
.plans { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: left; color: var(--text); }
.plan:hover { border-color: var(--border-strong); }
.plan[aria-pressed="true"], .plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan .p-name { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.plan .p-tokens { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan .p-tokens small { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-regular); }
.plan .p-price { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.plan .p-note { font-size: var(--fs-xs); color: var(--text-faint); }
.plan .p-tag { position: absolute; top: -10px; left: var(--sp-4); height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-fill); color: var(--on-accent); font-size: 11px; font-weight: var(--fw-semibold); line-height: 20px; }
.plan .p-bonus { color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* Form auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); }
.auth { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
@media (max-width: 479px) { .auth { padding: var(--sp-5) var(--sp-4); border: 0; background: transparent; } }
.auth h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.btn-google { width: 100%; background: var(--raised); border-color: var(--border-strong); }
.or { display: flex; align-items: center; gap: var(--sp-3); color: var(--text-faint); font-size: var(--fs-xs); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.link:hover { text-decoration-color: var(--accent); }
.pw-meter { display: flex; gap: 4px; } .pw-meter i { flex: 1; height: 3px; border-radius: 2px; background: var(--border-strong); } .pw-meter i.on { background: var(--accent); }

/* Toast: varian sukses (aksen lime hanya sebagai garis kiri + ikon) */
.toast-ok { border-left: 3px solid var(--accent); }
.toast .t-ico { flex: none; width: 18px; height: 18px; color: var(--accent); }
.toast-warn .t-ico { color: var(--warn); } .toast-error .t-ico { color: var(--danger); }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-4); text-align: center; color: var(--text-muted); }
.empty .e-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); color: var(--text-faint); margin-bottom: var(--sp-2); }
.empty h3 { font-size: var(--fs-lg); color: var(--text); font-weight: var(--fw-semibold); }
.empty p { max-width: 36ch; font-size: var(--fs-sm); }

/* Pill status tambahan */
.pill-ok { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pill-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }

/* Tabel admin: padat, header lengket; di HP (<720px) baris menjadi kartu (td[data-label]) */
.atable { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.atable th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.atable tbody tr:hover { background: var(--raised); }
.atable td { vertical-align: middle; }
.atable .r { text-align: right; }
.atable .id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 719px) {
  .atable thead { display: none; }
  .atable, .atable tbody, .atable tr, .atable td { display: block; width: 100%; }
  .atable tr { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-2); background: var(--surface); }
  .atable td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; border: 0; text-align: right; }
  .atable td::before { content: attr(data-label); color: var(--text-faint); font-size: var(--fs-xs); text-align: left; }
  .atable .r { text-align: right; }
}

/* KPI */
.kpis { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); min-width: 0; }
.kpi small { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.kpi b { font-size: var(--fs-xl); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi span { font-size: var(--fs-xs); color: var(--text-muted); }