/* ============================================================
   Undanganku — sistem tema (editorial gold) terang & gelap.
   Default = GELAP (identitas brand). Nama variabel lama (--ink,
   --gold, --line, dst) dipertahankan agar seluruh CSS lama ikut
   beradaptasi otomatis; warna hard-code diganti token semantik.
   ============================================================ */
:root {
  /* —— MODE GELAP (default) —— */
  --bg: #14110d;
  --bg-2: #100e0a;
  --surface: #1b1712;       /* kartu / panel */
  --surface-2: #221d17;     /* permukaan terangkat: toolbar, th, chip */
  --elev: #251f18;          /* hover surface */
  --ink: #efe9dd;           /* teks utama (cream) */
  --ink-soft: rgba(239,233,221,.64);
  --ink-mute: rgba(239,233,221,.42);
  --line: rgba(231,222,205,.13);
  --line-2: rgba(231,222,205,.24);
  --gold: #c8a96a;
  --gold-2: #d8bd86;        /* hover lebih terang di gelap */
  --gold-soft: rgba(200,169,106,.18);
  --on-gold: #1b150d;       /* teks di atas emas (luxe: gelap di atas emas) */
  --danger: #e2938c;
  --ok-bg: rgba(39,199,122,.15);
  --ok-fg: #74d6a3;
  --warn-bg: rgba(200,169,106,.16);
  --warn-fg: #e6c98c;
  --err-bg: rgba(226,147,140,.14);
  --shadow: 0 16px 44px rgba(0,0,0,.5);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.34);
  color-scheme: dark;
}
html[data-theme="light"] {
  /* —— MODE TERANG (ivory–emas) —— */
  --bg: #fbf8f1;
  --bg-2: #f4eede;
  --surface: #ffffff;
  --surface-2: #faf3e2;
  --elev: #fbf6ea;
  --ink: #3a200f;
  --ink-soft: #6b4a2c;
  --ink-mute: #9a8a72;
  --line: #ece0c4;
  --line-2: #e0cfa6;
  --gold: #b8860b;
  --gold-2: #9a6f08;
  --gold-soft: #f3e6c8;
  --on-gold: #ffffff;       /* teks putih di atas emas pekat (terang) */
  --danger: #a04040;
  --ok-bg: #e7f6ea;
  --ok-fg: #2f7a2f;
  --warn-bg: #fff3d6;
  --warn-fg: #946b00;
  --err-bg: #fdecea;
  --shadow: 0 16px 44px rgba(58,32,15,.12);
  --shadow-sm: 0 6px 18px rgba(58,32,15,.08);
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Transisi halus saat berpindah tema (terbatas pada permukaan, hindari jank). */
body, .topbar, .ed-top, .auth-card, .inv-card, .ds-stat, .invoice-item, .theme-pick-card,
.empty, .ob-step, .btn-sm, .is-cell, .stat-card, .admin-card, .admin-table, .admin-table td,
details.sec, .device-bar button, .ed-tab, .theme-toggle {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: .005em; line-height: 1.15; }
a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 22px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.brand { flex: none; font-family: 'Cinzel', serif; font-size: 19px; font-weight: 600; color: var(--gold); letter-spacing: .12em; }
.brand:hover { text-decoration: none; }
/* Menu navigasi di TENGAH toolbar */
.topnav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.topnav > a, .topnav .nav-logout button { color: var(--ink-soft); font-size: 14px; padding: 7px 13px; border-radius: 9px; transition: color .15s ease, background .15s ease; }
.topnav > a:hover, .topnav .nav-logout button:hover { color: var(--gold); background: var(--gold-soft); text-decoration: none; }
.topnav > a.active { color: var(--ink); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.nav-logout { margin: 0; display: inline-flex; }
.nav-logout button { background: none; border: 0; cursor: pointer; font: inherit; }
/* Kelompok KANAN: toggle (selalu tampil) + chip akun (paling kanan) + burger (HP) */
.topbar-right { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.tb-user { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 500; padding: 4px 12px 4px 4px; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .15s ease, background .15s ease; }
.tb-user:hover { border-color: var(--gold); background: var(--gold-soft); text-decoration: none; }
.tb-ava { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; flex: none; }
.tb-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-login { color: var(--ink-soft); font-size: 14px; }
.tb-login:hover { color: var(--gold); text-decoration: none; }

/* Nav responsif: di HP toolbar berubah jadi tombol burger → menu dropdown penuh-lebar
   yang nyaman di-tap (sebelumnya semua link berdesakan & terpotong di layar sempit). */
.nav-burger { display: none; }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 38px; padding: 9px 10px; cursor: pointer; border-radius: 11px;
    border: 1px solid var(--line-2); background: var(--surface); flex: none;
  }
  .nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink-soft); transition: transform .26s ease, opacity .2s ease; }
  /* Toggle tema & chip akun TETAP terlihat di HP (di luar dropdown → mudah diakses). */
  .topbar-right { gap: 9px; }
  .tb-name { display: none; }   /* hemat ruang; avatar tetap (klik → akun) */
  /* Menu jadi dropdown penuh-lebar saat burger ditekan. */
  .topbar .topnav {
    display: none; order: 3; width: 100%; flex: 1 1 100%; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 2px; margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--line);
  }
  .topbar .nav-toggle:checked ~ .topnav { display: flex; }
  .topnav > a, .topnav .nav-logout, .topnav .nav-logout button {
    width: 100%; padding: 12px; border-radius: 11px; font-size: 15px; text-align: left;
  }
  .topnav > a.active { background: var(--gold-soft); }
  .topnav .nav-logout button { color: var(--danger); }
  .nav-toggle:checked ~ .topbar-right .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .topbar-right .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .topbar-right .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Toggle tema (dipakai di semua layout, termasuk landing/legal via .lp) */
.theme-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle .ti { width: 18px; height: 18px; }
html[data-theme="dark"] .theme-toggle .ti-moon { display: none; }
html[data-theme="light"] .theme-toggle .ti-sun { display: none; }

/* Buttons */
.btn {
  display: inline-block; background: var(--gold); color: var(--on-gold) !important;
  padding: 9px 17px; border-radius: 10px; border: 1px solid var(--gold); font-size: 14px;
  font-weight: 500; cursor: pointer; font-family: inherit; letter-spacing: .01em;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--gold-2); border-color: var(--gold-2); text-decoration: none; box-shadow: var(--shadow-sm); }
.btn.full { width: 100%; padding: 12px; font-size: 15px; }
.btn.secondary { background: transparent; color: var(--gold) !important; border: 1px solid var(--gold); }
.btn.secondary:hover { background: var(--gold-soft); box-shadow: none; }
button.link { background: none; border: 0; color: var(--gold-2); cursor: pointer; font: inherit; padding: 0; }
button.link:hover { text-decoration: underline; }

/* Auth extras (OTP, Google, pemisah, hint) */
.otp-input { letter-spacing: 10px; text-align: center; font-size: 24px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, monospace; padding-left: 10px !important; }
.pw-hint { font-size: 12px; color: var(--ink-soft); margin: -8px 0 12px; line-height: 1.4; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.row-between .check { margin-bottom: 0; }
.small-link { font-size: 13px; }
.or-sep { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13px; margin: 18px 0; }
.or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink) !important; font-weight: 500; font-size: 14px; cursor: pointer; }
.btn-google:hover { background: var(--elev); text-decoration: none; border-color: var(--gold); }

/* Layout */
.container { max-width: 920px; margin: 0 auto; padding: 36px 20px 80px; }

/* Auth card */
.auth-card {
  max-width: 420px; margin: 24px auto; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 16px; padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.auth-card h1 { margin: 0 0 18px; font-size: 30px; }
.auth-card label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text],
.auth-card select {
  width: 100%; margin-top: 5px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--line-2); border-radius: 10px; font-family: inherit;
  color: var(--ink); background: var(--bg-2);
}
/* Select mengikuti tema (token surface/ink/gold) + chevron emas custom (lintas-browser). */
.auth-card select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a98841' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
.auth-card select optgroup { color: var(--ink); font-weight: 700; }
.auth-card select option { color: var(--ink); background: var(--surface); font-weight: 400; }
.auth-card input:focus,
.auth-card select:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); }
.auth-card label.check { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.auth-card label.check input { margin-top: 0; }
.muted { color: var(--ink-soft); font-size: 14px; margin-top: 16px; text-align: center; }

/* Alerts */
.alert {
  background: var(--err-bg); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger);
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px;
}
.alert ul { margin: 0; padding-left: 18px; }
.flash {
  background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok-fg) 40%, transparent); color: var(--ok-fg);
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px;
}

/* ===== busy.js — toast "sedang diproses" (kanan-bawah) + tombol terkunci =====
   Untuk aksi berat (sinkron Midtrans / cabut akses / checkout) yang sering diklik
   berulang: tampil notifikasi proses agar pengguna menunggu & tak menembak request
   ganda. Snackbar gelap hangat + aksen emas (konsisten di mode terang/gelap). */
.busy-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 4000;
  display: flex; align-items: center; gap: 11px;
  max-width: min(360px, calc(100vw - 32px));
  background: #23201c; color: #f4eee3;
  border: 1px solid rgba(212, 180, 120, .38); border-radius: 12px;
  padding: 12px 16px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.busy-toast.is-in { opacity: 1; transform: translateY(0) scale(1); }
.busy-toast-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid rgba(244, 238, 227, .28); border-top-color: #d9b25a;
  animation: busy-spin .7s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
/* Tombol yang sedang sibuk (dikunci busy.js): redup + kursor progress + tak bisa diklik
   lagi (TANPA atribut disabled agar submit form pertama tetap jalan). */
.is-busy { opacity: .7; cursor: progress !important; pointer-events: none; }
@media (max-width: 560px) { .busy-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* Dashboard — header + ringkasan */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dash-head h1 { margin: 0; font-size: 34px; font-weight: 600; }
.dash-sub { margin: 5px 0 0; color: var(--ink-soft); font-size: 14px; }
.dash-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.ds-stat { background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 10px; text-align: center; }
.ds-num { display: block; font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--gold); line-height: 1; }
.ds-lbl { display: block; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); margin-top: 6px; text-transform: uppercase; }

/* Kartu undangan */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.inv-card {
  background: linear-gradient(162deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--bg-2)));
  border: 1px solid var(--line-2); border-radius: 16px; padding: 20px 20px 18px 24px;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .3s ease;
}
/* Strip status (kiri) + halo lembut yang muncul saat hover. */
.inv-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); }
.inv-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 25%, transparent); }
.inv-card.status-active::before { background: linear-gradient(180deg, #5bbd5b, #2f7a2f); }
.inv-card.status-draft::before { background: linear-gradient(180deg, #f0c44d, #946b00); }
.inv-card.status-expired::before { background: #c7a8a8; }
.inv-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -22px rgba(0,0,0,.6); border-color: var(--gold); }
.inv-card:hover::after { opacity: 1; }
.inv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.inv-card-top h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: .01em; }
/* Chip nama TEMA yang dipakai undangan (info tema di tiap kartu). */
.inv-theme { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; padding: 4px 11px 4px 9px; }
.inv-theme svg { width: 13px; height: 13px; flex: none; }
.inv-slug { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; word-break: break-all; transition: color .15s ease; }
.inv-slug:hover { color: var(--gold); text-decoration: none; }
.inv-slug.muted-slug { color: var(--ink-mute); }
.inv-meta { font-size: 12px; color: var(--ink-soft); margin-top: 13px; display: flex; align-items: center; gap: 6px; }
.inv-stats { display: flex; gap: 10px; margin-top: 14px; }
.is-cell { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 8px 9px; text-align: center; transition: border-color .18s ease; }
.inv-card:hover .is-cell { border-color: var(--line-2); }
.is-cell strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 27px; font-weight: 600; color: var(--gold); line-height: 1; }
.is-cell span { display: block; font-family: 'Cinzel', serif; font-size: 9px; color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; }
.inv-draft-note { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn-fg) 32%, transparent); border-radius: 10px; padding: 9px 12px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: 'Cinzel', serif; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; padding: 5px 11px; border-radius: 999px;
}
.pill.draft { background: var(--warn-bg); color: var(--warn-fg); }
.pill.active { background: var(--ok-bg); color: var(--ok-fg); }
.pill.expired { background: var(--err-bg); color: var(--danger); }
/* Titik status (hanya kartu dashboard; pill admin/tabel tak terpengaruh). Aktif = berdenyut "live". */
.inv-card-top .pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.inv-card-top .pill.active::before { animation: pillpulse 1.8s ease-in-out infinite; }
@keyframes pillpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
body.reduce-motion .inv-card-top .pill.active::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .inv-card-top .pill.active::before { animation: none; } }

/* Aksi cepat (tombol kecil) */
.card-actions { margin-top: 15px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.btn-sm {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--ink-soft); cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); text-decoration: none; }
.btn-sm.primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-sm.primary:hover { background: var(--gold-2); color: var(--on-gold); }
.btn-sm.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-sm.danger:hover { background: var(--err-bg); border-color: var(--danger); color: var(--danger); }
.btn-sm.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok-fg) 45%, transparent); color: var(--ok-fg); }
.del-form { margin: 0 0 0 auto; }

/* Empty / onboarding */
.empty {
  text-align: center; padding: 50px 20px; color: var(--ink-soft);
  background: var(--surface); border: 1px dashed var(--gold); border-radius: 16px;
}
.empty.onboard { padding: 44px 24px; }
.onboard-ico { font-size: 54px; line-height: 1; }
.empty.onboard h2 { margin: 14px 0 8px; font-size: 30px; color: var(--ink); }
.empty.onboard p { max-width: 460px; margin: 0 auto; }
.onboard-steps { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0 22px; }
.ob-step { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--ink); }
.ob-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 600; }
.btn.btn-lg { padding: 13px 26px; font-size: 16px; border-radius: 12px; }
.onboard-foot { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; }

/* Halaman Invoice (daftar pembelian) */
.invoice-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .3s ease;
}
.invoice-item:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.invoice-item .ii-main { flex: 1 1 260px; min-width: 0; }
.ii-top { display: flex; align-items: center; gap: 10px; }
.ii-title { font-size: 20px; color: var(--ink); font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.ii-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; font-size: 12.5px; color: var(--ink-soft); }
.ii-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ii-amount { font-weight: 600; color: var(--gold); font-size: 18px; }
@media (max-width: 460px) {
  .invoice-item { align-items: stretch; }
  .ii-side { justify-content: space-between; width: 100%; }
}

/* Pemilih tema */
.cat-title { font-family: 'Cormorant Garamond', serif; font-size: 24px; margin: 26px 0 12px; color: var(--ink); }
/* Kartu pemilih tema — gaya editorial LaMica (selaras halaman landing): foto cover
   4:3 (zoom saat hover), nama serif, harga Cinzel emas, baris berpembatas, badge emerald.
   Sudut KAKU (kartu + tombol, seperti landing), grid 3 kolom (container dilebarkan).
   Pakai token app → adaptif terang & gelap. */
.container:has(.theme-pick-grid) { max-width: 1160px; }
.theme-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .theme-pick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .theme-pick-grid { grid-template-columns: 1fr; } }
.theme-pick-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.theme-pick-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.28); }
.tp-img { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.tp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .5s ease; filter: saturate(.92) brightness(.92); }
.theme-pick-card:hover .tp-img img { transform: scale(1.05); filter: none; }
.tp-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tp-name { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px; line-height: 1.12; color: var(--ink); }
.tp-desc { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.tp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tp-price { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .04em; color: var(--gold); }
.tp-price .tp-was { color: var(--ink-mute); text-decoration: line-through; font-size: 12px; letter-spacing: 0; margin-right: 2px; }
.tp-demo { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; transition: color .2s ease; }
.tp-demo:hover { color: var(--gold); }
.theme-pick-card .btn.full { margin-top: 16px; border-radius: 0; }
/* Badge diskon per-tema (pemilih tema) — hijau emerald LaMica, kontras baik terang & gelap */
.tp-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #146F4A; color: #fff; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); }

/* Halaman legal (token app — ikut terang/gelap) */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; }
.legal h1 { font-size: 42px; font-weight: 600; margin: 0 0 4px; }
.legal h2 { font-size: 23px; font-weight: 600; margin-top: 30px; color: var(--ink); }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.75; }
.legal a { color: var(--gold); }
.legal .updated { color: var(--gold); font-size: 12px; font-family: 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; }
.legal .disclaimer { background: var(--warn-bg); border: 1px dashed var(--gold); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: var(--ink-soft); }
.legal-foot { border-top: 1px solid var(--line); margin-top: 16px; }
.legal-foot .lf-inner { max-width: 760px; margin: 0 auto; padding: 22px 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.legal-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.legal-foot a { color: var(--ink-soft); }
.legal-foot a:hover { color: var(--gold); }

/* ===== Responsif: Tablet & HP ===== */
@media (max-width: 768px) {
  .topbar { padding: 12px 16px; }
  .container { padding: 24px 16px 64px; }
  .dash-head { flex-wrap: wrap; gap: 12px; }
  .dash-head h1 { font-size: 28px; }
  .auth-card { margin: 16px auto; padding: 24px 20px; }
}
@media (max-width: 460px) {
  .topbar { padding: 10px 14px; }
  .brand { font-size: 17px; }
  .btn { padding: 8px 13px; font-size: 13px; }
  .container { padding: 20px 14px 56px; }
  .dash-head { align-items: stretch; flex-direction: column; }
  .dash-head h1 { font-size: 26px; }
  .dash-head .btn { width: 100%; text-align: center; }
  .dash-summary { grid-template-columns: repeat(2, 1fr); }
  .inv-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 16px; border-radius: 14px; }
  .auth-card h1 { font-size: 26px; }
}

/* Ikon garis inline (komponen <x-icon>) — ikut warna teks (currentColor) → adaptif palet & mode. */
.ic { display: inline-block; vertical-align: -0.16em; flex: none; }
.btn .ic, .btn-sm .ic { vertical-align: -0.15em; margin-right: 5px; }