/*
  NotaKu "Neo Dark" — gaya UI 3D lembut bergaya referensi:
  latar navy dalam, kartu gelap berbayangan lembut, tombol pil gradasi
  amber/oranye/koral, aksen teal & ungu yang menyala.

  - Dimuat paling akhir (setelah theme.css) sehingga menimpa palet lama.
  - Hanya berlaku di layar. Struk (.receipt), preview Bluetooth, dan cetak
    sengaja TIDAK diubah: tetap putih/hitam seperti sebelumnya.
  - Tidak ada perubahan fungsi / JavaScript logika.
*/
@media screen {
  :root {
    color-scheme:dark;

    /* Palet utama */
    --ink:#f2f0ff;
    --ink-soft:#c3c8ec;
    --muted:#8f98c9;
    --surface:#1f2859;
    --surface-dim:#161d47;
    --surface-alt:#2a3470;
    --outline:rgba(255,255,255,.09);
    --primary:#ff8a3d;
    --primary-container:rgba(255,138,61,.16);
    --accent:#ffc247;
    --danger:#ff6b7f;
    --status-lunas:#3fe0a5;
    --status-partial:#ffc247;
    --status-unpaid:#ff6f86;
    --status-overpaid:#6cc6ff;

    /* Bahan 3D */
    --nv-bg:#121840;
    --nv-card:linear-gradient(155deg,#2a3475 0%,#1d2658 55%,#182050 100%);
    --nv-line:rgba(255,255,255,.08);
    --nv-shadow:0 16px 30px -10px rgba(4,6,28,.75), 0 2px 6px rgba(4,6,28,.35), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.25);
    --nv-inset:inset 3px 3px 8px rgba(3,5,24,.55), inset -2px -2px 6px rgba(255,255,255,.04);
    --g-amber:linear-gradient(180deg,#ffd75a 0%,#ffb12e 55%,#ff9a28 100%);
    --g-orange:linear-gradient(180deg,#ffa24a 0%,#ff7a2f 100%);
    --g-coral:linear-gradient(180deg,#ff8f87 0%,#ff5a72 100%);
    --g-teal:linear-gradient(180deg,#4df0cc 0%,#17b79b 100%);
    --g-violet:linear-gradient(180deg,#b79bff 0%,#7b4df0 100%);
    --g-sky:linear-gradient(180deg,#7fd6ff 0%,#3a8fe8 100%);
    --btn-shadow:0 10px 20px -6px rgba(255,138,45,.55), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(150,70,0,.28);
    --navy-text:#1a2150;
  }

  /* ---------- Latar ---------- */
  html { background:var(--nv-bg); }
  body { background:var(--nv-bg); color:var(--ink); }
  body::before {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(60vmax 45vmax at 85% -8%, rgba(31,214,176,.32), transparent 65%),
      radial-gradient(55vmax 45vmax at -10% 30%, rgba(58,110,232,.22), transparent 65%),
      radial-gradient(60vmax 50vmax at 70% 108%, rgba(138,92,245,.38), transparent 65%),
      radial-gradient(40vmax 30vmax at 10% 100%, rgba(255,140,60,.12), transparent 65%);
  }
  #app { background:transparent; box-shadow:none; }
  ::selection { background:#ffb23e; color:var(--navy-text); }
  ::placeholder { color:var(--muted); opacity:.85; }
  select option { background:#1d2657; color:#f2f0ff; }

  /* ---------- Topbar ---------- */
  #topbar {
    background:linear-gradient(180deg,#2a3475 0%,#1b2354 100%);
    color:#fff; border-bottom:0;
    border-radius:0 0 28px 28px;
    box-shadow:0 14px 30px -8px rgba(4,6,28,.75), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.06);
  }
  #topbar h1 { color:#fff; letter-spacing:-.4px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
  .icon-btn { border-radius:12px; transition:background .12s ease; }
  .icon-btn:active { background:rgba(255,255,255,.14); }

  /* ---------- Navigasi bawah (melayang) ---------- */
  #bottomnav {
    background:linear-gradient(180deg,#2d3878 0%,#1b2354 100%);
    border:1px solid var(--nv-line);
    box-shadow:0 16px 34px -6px rgba(4,6,28,.85), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3);
  }
  .nav-btn { color:#9aa3d6; transition:background .15s ease, box-shadow .15s ease; }
  .nav-btn.active {
    color:var(--navy-text);
    background:var(--g-amber);
    box-shadow:0 8px 18px -4px rgba(255,160,40,.6), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 5px rgba(150,70,0,.25);
  }
  .nav-btn[data-route="sale/new"] { color:#ffd36b; }
  @media(max-width:799px) {
    #bottomnav {
      margin:0 12px calc(env(safe-area-inset-bottom,0px) + 10px);
      bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
      padding:8px 6px;
      border-radius:28px;
    }
    .nav-btn[data-route="sale/new"] svg {
      color:var(--navy-text); background:var(--g-amber);
      border:4px solid #1d2559; border-radius:50%;
      box-shadow:0 12px 22px -4px rgba(255,150,40,.7), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 6px rgba(150,70,0,.3);
    }
    .nav-btn[data-route="sale/new"].active { color:#ffd36b; background:transparent; box-shadow:none; }
    .nav-btn[data-route="sale/new"].active svg { background:linear-gradient(180deg,#ffe27a,#ffab2e); }
  }
  @media(min-width:800px) {
    #topbar { margin:12px 12px 0; top:12px; border-radius:24px; }
    #bottomnav {
      top:88px; min-height:calc(100vh - 100px); max-height:calc(100vh - 100px);
      margin:12px 0 12px 12px; border-radius:26px;
    }
    .nav-section-label--desktop { color:#8f98c9; }
    .nav-divider--desktop { background:var(--nv-line); }
  }

  /* ---------- Drawer, overlay, popup ---------- */
  .drawer { background:linear-gradient(180deg,#2a3475,#161d47); color:#f2f0ff; box-shadow:14px 0 40px rgba(4,6,28,.7); border-radius:0 28px 28px 0; }
  .drawer-title { color:#fff; }
  .drawer-item { color:#d6daf5; }
  .drawer-item:active { background:rgba(255,255,255,.08); }
  .drawer-sep { background:var(--nv-line); }
  .drawer-overlay, .sheet-backdrop, .dialog-backdrop { background:rgba(6,9,30,.62); }
  .sheet, .dialog {
    background:linear-gradient(180deg,#273172 0%,#1a2252 100%);
    color:var(--ink);
    border:1px solid var(--nv-line);
    box-shadow:0 -14px 40px rgba(4,6,28,.6), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .sheet { border-radius:28px 28px 0 0; border-bottom:0; }
  .dialog { border-radius:26px; box-shadow:0 24px 60px rgba(4,6,28,.75), inset 0 1px 0 rgba(255,255,255,.12); }
  .sheet-handle { background:rgba(255,255,255,.22); }
  .dialog-actions .cancel { color:var(--ink-soft); }
  .dialog-actions .confirm:not(.dangerous) { background:var(--g-amber); color:var(--navy-text); box-shadow:var(--btn-shadow); }
  .dialog-actions .confirm.dangerous { background:var(--g-coral); color:#fff; }
  .dialog-actions button { border-radius:14px; }
  #toast { background:linear-gradient(180deg,#323d85,#222b66); color:#fff; border:1px solid var(--nv-line); border-radius:16px; box-shadow:0 14px 30px rgba(4,6,28,.7), inset 0 1px 0 rgba(255,255,255,.14); }
  #loadingOverlay { background:rgba(14,19,50,.93); }
  .loading-mark { color:#ffc247; }

  /* ---------- Tombol 3D ---------- */
  .btn { border-radius:16px; letter-spacing:.1px; }
  .btn:not(.secondary):not(.danger):not(.ghost), .fab, .dialog-actions .confirm:not(.dangerous) {
    background:var(--g-amber); color:var(--navy-text);
  }
  .btn:not(.secondary):not(.danger):not(.ghost) { border:0; box-shadow:var(--btn-shadow); text-shadow:0 1px 0 rgba(255,255,255,.35); transition:transform .1s ease, box-shadow .12s ease; }
  .btn:not(.secondary):not(.danger):not(.ghost):active, .fab:active { transform:translateY(2px) scale(.985); box-shadow:0 3px 8px -2px rgba(255,138,45,.45), inset 0 3px 6px rgba(150,70,0,.35); opacity:1; }
  .btn.secondary { background:linear-gradient(180deg,#2c3678,#1f2859); color:var(--ink); border:1px solid var(--nv-line); box-shadow:var(--nv-shadow); }
  .btn.danger { background:rgba(255,107,127,.10); color:#ff8e9d; border:1px solid rgba(255,107,127,.38); }
  .btn.ghost { background:transparent; color:var(--ink-soft); border:1px dashed rgba(255,255,255,.22); }
  .fab { right:max(18px,calc((100vw - 1100px)/2 + 24px)); box-shadow:0 16px 28px -6px rgba(255,138,45,.7), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -4px 7px rgba(150,70,0,.3); border:0; }

  /* ---------- Kartu & daftar ---------- */
  [data-page="home"] #notaList,
  [data-page="customers"] .list,
  [data-page="expenses"] .list,
  [data-page="expenses"] .expense-page .expense-list,
  [data-page="dashboard"] .dashboard-orders,
  [data-page="dashboard"] .dashboard-attention,
  [data-page="dashboard"] .business-chart,
  .business-chart,
  [data-page="reports"] .reports-product-card,
  [data-page="reports"] .reports-year-card,
  [data-page="reports"] .reports-layout-25,
  [data-page="reports"] .reports-layout-5,
  [data-page="reports"] .reports-layout-9,
  [data-page="reports"] .reports-layout-20,
  #pageRoot[data-page="settings"][data-section="hub"] .settings-hub,
  #pageRoot[data-page="settings"][data-section="printer"] .settings-printer-section,
  #pageRoot[data-page="settings"][data-section="qris"] .settings-content,
  #pageRoot[data-page="settings"][data-section="store"] .settings-privacy,
  #pageRoot[data-page="settings"]:is([data-section="backup"], [data-section="autobackup"]) .settings-section-bottom,
  :is([data-page="sale-new"], [data-page="sale-edit"]) .sale-form-card,
  :is([data-page="sale-new"], [data-page="sale-edit"]) .sale-suggestions,
  [data-page="sale-detail"] .sale-detail-share-options {
    background:var(--nv-card);
    border:1px solid var(--nv-line);
    border-radius:24px;
    box-shadow:var(--nv-shadow);
  }
  [data-page="customers"] .customer-card,
  [data-page="products"] #pList .row {
    background:var(--nv-card);
    border:1px solid var(--nv-line);
    border-radius:20px;
    box-shadow:var(--nv-shadow);
  }
  .row:active, .settings-tile:active, [data-page="customers"] .customer-card:active { background:rgba(255,255,255,.06); }
  .row { color:var(--ink); }
  .settings-tile { background:transparent; }
  .field { background:transparent; }
  .total-box { background:linear-gradient(155deg,rgba(31,214,176,.20),rgba(31,214,176,.08)); border:1px solid rgba(31,214,176,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); border-radius:20px; }
  .info-card { background:linear-gradient(155deg,rgba(255,138,61,.18),rgba(255,138,61,.07)); border:1px solid rgba(255,138,61,.30); border-radius:18px; }
  .info-card .info-title { color:#ffc247; }
  .receipt-alert { background:linear-gradient(155deg,rgba(255,138,61,.18),rgba(255,138,61,.07)); border:1px solid rgba(255,138,61,.3); }
  .receipt-alert-action { border-color:#ffc247; color:#ffc247; }

  /* Bar checkout */
  .sale-checkout,
  :is([data-page="sale-new"], [data-page="sale-edit"]) .sale-checkout {
    background:linear-gradient(180deg,#273172,#171e4b) !important;
    border-top:1px solid var(--nv-line);
    border-radius:26px 26px 0 0;
    box-shadow:0 -14px 34px rgba(4,6,28,.6), inset 0 1px 0 rgba(255,255,255,.12);
  }

  /* Variabel kartu form nota */
  :is([data-page="sale-new"], [data-page="sale-edit"]) {
    --sale-card-bg:#222c68;
    --sale-soft-bg:#161d47;
    --sale-shadow:0 14px 28px -10px rgba(4,6,28,.75);
  }

  /* Bar aksi di popup */
  [data-page="products"].product-form-sheet .product-sheet-actions,
  [data-page="expenses"].expense-form-sheet .expense-sheet-actions,
  [data-page="customers"].customer-form-sheet .customer-sheet-actions,
  :is([data-page="sale-new"], [data-page="sale-edit"]).sale-adjustments-sheet .sale-sheet-actions,
  :is([data-page="sale-new"], [data-page="sale-edit"]):is(.sale-item-edit-sheet, .sale-item-new-sheet) .sale-sheet-actions,
  [data-page="sale-detail"] .sale-detail-sheet-footer {
    background:#1c2455;
    border-top:1px solid var(--nv-line);
  }
  [data-page="products"].product-form-sheet .product-form-fields,
  [data-page="expenses"].expense-form-sheet .expense-form-fields,
  [data-page="customers"].customer-form-sheet .customer-form-fields,
  [data-page="sale-detail"] .sale-detail-sheet-field {
    background:rgba(255,255,255,.04); border:1px solid var(--nv-line); border-radius:18px;
  }

  /* ---------- Input (cekung) & chip ---------- */
  .search-input,
  [data-page="products"] .products-search,
  [data-page="customers"] .customers-search {
    background:#121843; border:1px solid rgba(255,255,255,.05); border-radius:16px; box-shadow:var(--nv-inset); color:var(--ink);
  }
  .search-input:focus, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline:2px solid rgba(255,178,62,.65); outline-offset:3px; border-radius:6px;
  }
  .search-input:focus { border-radius:16px; outline-offset:0; }
  [data-page="customers"] .customers-search input, [data-page="products"] .products-search input { color:var(--ink); }
  [data-page="customers"].customer-form-sheet :is(input,textarea),
  [data-page="home"] .home-layout-3,
  [data-page="home"] .row .avatar {
    background:#121843; border-color:rgba(255,255,255,.07); color:var(--ink); box-shadow:var(--nv-inset);
  }
  [data-page="home"] .row .avatar { color:#ffc247; }
  .chip { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:var(--ink-soft); border-radius:999px; }
  .chip.active, [data-page="reports"] .reports-layout-1 .chip.active {
    background:var(--g-amber); border-color:transparent; color:var(--navy-text); font-weight:700;
    box-shadow:0 8px 16px -4px rgba(255,160,40,.55), inset 0 1px 0 rgba(255,255,255,.6);
  }
  [data-page="reports"] .reports-view-tabs { background:#121843; border-radius:16px; box-shadow:var(--nv-inset); border-color:rgba(255,255,255,.05); }
  [data-page="reports"] .reports-view-tabs button.active { background:var(--g-amber); color:var(--navy-text); border-radius:12px; box-shadow:0 6px 14px -3px rgba(255,160,40,.55), inset 0 1px 0 rgba(255,255,255,.6); }

  /* ---------- Kartu berwarna (gradasi vibrant) ---------- */
  .summary-card {
    background:linear-gradient(135deg,#7b4df0 0%,#c13fd8 55%,#ff5fa2 100%);
    border-radius:24px; border:1px solid rgba(255,255,255,.22);
    box-shadow:0 22px 38px -12px rgba(160,60,230,.6), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .summary-label { color:rgba(255,255,255,.85); }
  [data-page="dashboard"] .dashboard-hero {
    background:linear-gradient(150deg,#14d1ad 0%,#1f78c4 38%,#4a35c0 72%,#8038e0 100%);
    border:1px solid rgba(255,255,255,.2); border-radius:28px;
    box-shadow:0 26px 44px -14px rgba(40,200,190,.5), 0 8px 18px rgba(4,6,28,.5), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.12);
  }
  [data-page="dashboard"] .dashboard-label { color:rgba(255,255,255,.9); }
  [data-page="expenses"] .expense-summary {
    background:linear-gradient(135deg,#ff9a3c 0%,#ff6a5c 55%,#ff4f7e 100%);
    border-radius:24px; border:1px solid rgba(255,255,255,.25);
    box-shadow:0 22px 36px -12px rgba(255,100,80,.55), inset 0 1px 0 rgba(255,255,255,.45);
    text-shadow:0 1px 2px rgba(120,20,30,.3);
  }
  [data-page="reports"] .reports-layout-15 {
    background:linear-gradient(135deg,#7b4df0 0%,#c13fd8 55%,#ff5fa2 100%);
    border-radius:24px; border:1px solid rgba(255,255,255,.22);
    box-shadow:0 22px 38px -12px rgba(160,60,230,.6), inset 0 1px 0 rgba(255,255,255,.4);
  }

  /* Tombol "Nota baru" & filter */
  [data-page="dashboard"] .dashboard-primary-action {
    background:var(--g-amber); color:var(--navy-text); border-radius:999px; padding:8px 16px 8px 12px;
    box-shadow:var(--btn-shadow); text-shadow:0 1px 0 rgba(255,255,255,.35);
  }
  [data-page="home"] .home-dashboard-filter { background:rgba(255,138,61,.12); border-color:rgba(255,138,61,.32); color:#ffc247; border-radius:14px; }
  [data-page="home"] .home-dashboard-filter button { background:var(--g-amber); color:var(--navy-text); border-radius:999px; padding:5px 10px; }
  [data-page="home"] .row-status { background:rgba(255,255,255,.08); }

  /* Akses cepat: kartu navy + ikon gradasi */
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(1),
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(2),
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(3),
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(4) {
    background:var(--nv-card); border:1px solid var(--nv-line); border-radius:20px; color:var(--ink-soft);
    box-shadow:var(--nv-shadow);
  }
  [data-page="dashboard"] .dashboard-shortcut-icon,
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(1) .dashboard-shortcut-icon { background:var(--g-amber); color:var(--navy-text); border-radius:14px; box-shadow:0 8px 14px -4px rgba(255,160,40,.6), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 5px rgba(150,70,0,.25); }
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(2) .dashboard-shortcut-icon { background:var(--g-coral); color:#fff; box-shadow:0 8px 14px -4px rgba(255,90,114,.6), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(120,10,40,.25); }
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(3) .dashboard-shortcut-icon { background:var(--g-violet); color:#fff; box-shadow:0 8px 14px -4px rgba(123,77,240,.65), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 5px rgba(40,10,120,.3); }
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(4) .dashboard-shortcut-icon { background:var(--g-teal); color:var(--navy-text); box-shadow:0 8px 14px -4px rgba(23,183,155,.6), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,80,70,.25); }

  /* Perlu perhatian */
  [data-page="dashboard"] .dashboard-attention::after { border-color:rgba(255,255,255,.04); }
  [data-page="dashboard"] .dashboard-attention-list { border-top-color:var(--nv-line); }
  [data-page="dashboard"] .dashboard-attention-item:nth-child(2) { border-left-color:var(--nv-line); }
  @media(max-width:390px) { [data-page="dashboard"] .dashboard-attention-item:nth-child(2) { border-top-color:var(--nv-line); } }
  [data-page="dashboard"] .dashboard-attention-icon { background:rgba(255,90,114,.14); color:#ff8796; border:0; border-radius:8px; box-shadow:none; }
  [data-page="dashboard"] .dashboard-attention-item--unpaid .dashboard-attention-icon { background:rgba(255,194,71,.16); color:#ffc247; }
  [data-page="dashboard"] .dashboard-attention-action strong { color:#ffc247; }

  /* ---------- Avatar, ikon, foto, lencana ---------- */
  .avatar { background:var(--g-amber); color:var(--navy-text); box-shadow:0 7px 12px -4px rgba(255,160,40,.5), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(150,70,0,.22); }
  [data-page="customers"] .customer-card .avatar,
  [data-page="dashboard"] .dashboard-orders .avatar { background:var(--g-amber); color:var(--navy-text); }
  [data-page="customers"] .customer-card:nth-child(3n+2) .avatar { background:var(--g-coral); color:#fff; box-shadow:0 7px 12px -4px rgba(255,90,114,.5), inset 0 1px 0 rgba(255,255,255,.5); }
  [data-page="customers"] .customer-card:nth-child(3n+3) .avatar { background:var(--g-violet); color:#fff; box-shadow:0 7px 12px -4px rgba(123,77,240,.55), inset 0 1px 0 rgba(255,255,255,.5); }
  [data-page="products"] .product-photo { background:var(--g-amber); color:var(--navy-text); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 7px 12px -4px rgba(255,160,40,.45); }
  [data-page="products"] .row:nth-child(3n+2) .product-photo { background:var(--g-teal); color:var(--navy-text); }
  [data-page="products"] .row:nth-child(3n+3) .product-photo { background:var(--g-violet); color:#fff; }
  .settings-tile .icon-box { box-shadow:0 7px 12px -4px rgba(4,6,28,.6), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.18); }
  .settings-tile:nth-child(4n+1) .icon-box { background:var(--g-teal); color:var(--navy-text); }
  .settings-tile:nth-child(4n+2) .icon-box { background:var(--g-amber); color:var(--navy-text); }
  .settings-tile:nth-child(4n+3) .icon-box { background:var(--g-violet); color:#fff; }
  .settings-tile:nth-child(4n) .icon-box { background:var(--g-sky); color:var(--navy-text); }

  .payment-badge { background:rgba(255,194,71,.16); color:#ffc247; border:1px solid rgba(255,194,71,.38); border-radius:999px; padding:3px 9px; }
  .payment-badge[data-status="PAID"] { background:rgba(63,224,165,.15); color:#3fe0a5; border-color:rgba(63,224,165,.38); }
  .payment-badge[data-status="UNPAID"] { background:rgba(255,111,134,.15); color:#ff8ea0; border-color:rgba(255,111,134,.4); }
  .payment-badge[data-status="OVERPAID"] { background:rgba(108,198,255,.15); color:#6cc6ff; border-color:rgba(108,198,255,.38); }

  /* ---------- Laporan: kartu metrik berwarna ---------- */
  [data-page="reports"] .reports-metric--revenue,
  [data-page="reports"] .reports-overall-metric--received { background:linear-gradient(155deg,rgba(255,138,61,.24),rgba(255,138,61,.08)); border-color:rgba(255,138,61,.38); }
  [data-page="reports"] .reports-metric--transactions { background:linear-gradient(155deg,rgba(31,214,176,.24),rgba(31,214,176,.08)); border-color:rgba(31,214,176,.38); }
  [data-page="reports"] .reports-metric--expenses,
  [data-page="reports"] .reports-overall-metric--expenses { background:linear-gradient(155deg,rgba(255,90,114,.24),rgba(255,90,114,.08)); border-color:rgba(255,90,114,.38); }
  [data-page="reports"] .reports-metric--net,
  [data-page="reports"] .reports-overall-metric--net { background:linear-gradient(155deg,rgba(138,92,245,.30),rgba(138,92,245,.10)); border-color:rgba(138,92,245,.42); }
  [data-page="reports"] .reports-metric--receivable,
  [data-page="reports"] .reports-overall-metric--receivable { background:linear-gradient(155deg,rgba(255,194,71,.22),rgba(255,194,71,.07)); border-color:rgba(255,194,71,.36); }
  [data-page="reports"] .reports-metric--transactions .reports-layout-7,
  [data-page="reports"] .reports-overall-metric--received .reports-layout-22 { color:#4df0cc; }
  [data-page="reports"] .reports-metric--expenses .reports-layout-8,
  [data-page="reports"] .reports-overall-metric--expenses .reports-layout-23 { color:#ff8f9f; }
  [data-page="reports"] .reports-metric--net .reports-layout-7,
  [data-page="reports"] .reports-overall-metric--net .reports-layout-24 { color:#c3aeff; }

  /* ---------- Detail nota & pengaturan ---------- */
  [data-page="sale-detail"] .sale-detail-receipt-wrap { background:rgba(8,11,36,.55); border-radius:22px; box-shadow:var(--nv-inset); }
  [data-page="sale-detail"] .sale-detail-payment-row { background:linear-gradient(180deg,rgba(42,52,117,.46),rgba(18,24,64,.50)); border:1px solid rgba(255,255,255,.07); border-radius:999px; box-shadow:inset 4px 5px 10px rgba(3,5,24,.34), inset -3px -4px 9px rgba(255,255,255,.035), 0 -7px 16px -14px rgba(255,138,61,.58); }
  [data-page="sale-detail"] .sale-detail-payment-icon { background:rgba(255,194,71,.075); color:color-mix(in srgb,#ffc247 52%,var(--muted)); border-radius:999px; box-shadow:inset 2px 2px 5px rgba(3,5,24,.24), inset -2px -2px 5px rgba(255,255,255,.035); }
  [data-page="sale-detail"] .sale-detail-payment-trailing strong { color:color-mix(in srgb,#ffc247 46%,var(--ink-soft)); }
  [data-page="settings"] .settings-logo-control output { background:var(--g-amber); color:var(--navy-text); }
  [data-page="settings"] #logoMaxWidth::-webkit-slider-thumb { background:#ffb23e; }
  [data-page="settings"] #logoMaxWidth::-moz-range-thumb { background:#ffb23e; }
  [data-page="settings"] #logoMaxWidth::-webkit-slider-runnable-track, [data-page="settings"] #logoMaxWidth::-moz-range-track { background:rgba(255,255,255,.14); }

  /* ---------- Grafik ---------- */
  .business-bars { background:repeating-linear-gradient(to top,transparent 0,transparent 76px,rgba(255,255,255,.08) 77px,rgba(255,255,255,.08) 78px); }
  .business-day-label { background:transparent; }
  .business-day[aria-pressed="true"] { background:rgba(255,138,61,.18); border-radius:8px; }
  .business-column-3d > i { box-shadow:inset 1px 0 rgba(255,255,255,.3), 0 0 10px color-mix(in srgb,var(--column-color) 55%,transparent); }
  .business-donut > div { background:#1d2658; box-shadow:var(--nv-inset); }
  .business-chart-detail { color:#ffc247; }

  /* ---------- Struk tetap putih (tidak diubah) ---------- */
  .receipt, .bluetooth-native-preview { color-scheme:light; }
  .receipt {
    --ink:#14151a; --ink-soft:#44474a; --muted:#8a8d91; --outline:#e1e2de;
    --accent:#c6512e; --status-lunas:#2f6b4f; --primary:#791e38; --surface:#fff; --surface-dim:#f5f5f3;
    background:#fff; color:#14151a;
  }
  .print-preview-wrap { background:rgba(8,11,36,.55); border-radius:18px; box-shadow:var(--nv-inset); }
  html[data-theme="dark"] #app #bottomnav { --nav-bar:var(--nv-card); --nav-ink:rgba(242,240,255,.86); --nav-shadow:drop-shadow(0 -10px 18px rgba(4,6,28,.55)); }
  html[data-theme="dark"] #app #bottomnav .nav-shape,
  html[data-theme="dark"] #app #bottomnav .nav-bg { border-radius:30px 30px 0 0; }
  html[data-theme="dark"] #app #bottomnav .nav-bg { border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 2px 4px rgba(255,255,255,.08),inset 0 -4px 8px rgba(0,0,0,.24); }
  /* Pilihan tema di Setting */
  [data-page="settings"] .settings-theme { background:var(--nv-card); border:1px solid var(--nv-line); border-radius:22px; box-shadow:var(--nv-shadow); }
  [data-page="settings"] .theme-switch { background:#121843; box-shadow:var(--nv-inset); border-radius:16px; }
  [data-page="settings"] .theme-switch button.active { background:var(--g-amber); color:var(--navy-text); border-radius:12px; box-shadow:0 6px 14px -3px rgba(255,160,40,.55), inset 0 1px 0 rgba(255,255,255,.6); }

  /* ---------- Backup: low-contrast neo rhythm ---------- */
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section {
    background:linear-gradient(155deg,#29346f 0%,#202a5d 100%);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 10px 22px -12px rgba(4,6,28,.72), inset 0 1px 0 rgba(255,255,255,.09);
  }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--download { background:linear-gradient(155deg,#303b78 0%,#263165 100%); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--auto { background:linear-gradient(155deg,#263f6d 0%,#20345d 100%); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--restore,
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--import { background:linear-gradient(155deg,#29336b 0%,#222b5d 100%); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--download .settings-button {
    background:linear-gradient(180deg,#e7b95b 0%,#d99e3e 100%);
    color:#22294f;
    box-shadow:0 7px 14px -8px rgba(255,160,40,.45), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -2px 4px rgba(150,70,0,.18);
  }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--restore .settings-button,
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--import .settings-button {
    background:rgba(255,255,255,.07); color:var(--ink-soft); border-color:rgba(255,255,255,.12);
    box-shadow:0 4px 10px -8px rgba(4,6,28,.7), inset 0 1px 0 rgba(255,255,255,.08);
  }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--auto .icon-box { background:rgba(31,214,176,.16); color:#72e5ca; box-shadow:0 4px 9px -7px rgba(31,214,176,.35), inset 0 1px 0 rgba(255,255,255,.10); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--restore,
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--import { margin-left:8px; margin-right:8px; }
  @media(max-width:390px) {
    #pageRoot[data-page="settings"][data-section="backup"] .backup-section--restore,
    #pageRoot[data-page="settings"][data-section="backup"] .backup-section--import { margin-left:4px; margin-right:4px; }
  }
}