/*
  NotaKu "Glass" — kaca buram biru muda bergaya referensi (DentaCare):
  latar gradasi biru lembut, kartu kaca putih tembus pandang berbayangan halus,
  tombol pil gradasi biru-cyan, tab/chip terpilih berwarna teal.

  - Hanya aktif saat tema "Glass" dipilih (link #themeGlass diatur js/theme.js).
  - Hanya berlaku di layar. Struk (.receipt), preview Bluetooth, dan cetak
    sengaja TIDAK diubah.
  - Tidak ada perubahan fungsi / JavaScript logika.
*/
@media screen {
  :root {
    color-scheme:light;

    /* Palet */
    --ink:#12324f;
    --ink-soft:#35597a;
    --muted:#678ba8;
    --surface:#eef6fd;
    --surface-dim:#dcebf8;
    --surface-alt:#cde2f4;
    --outline:rgba(110,160,205,.32);
    --primary:#0f8fb4;
    --primary-container:rgba(31,170,205,.16);
    --accent:#1c7fb5;
    --danger:#d0475f;
    --status-lunas:#138a6a;
    --status-partial:#b9840c;
    --status-unpaid:#d0475f;
    --status-overpaid:#2f6fbf;

    /* Bahan kaca */
    --gl-card:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.30));
    --gl-card-strong:linear-gradient(180deg,rgba(255,255,255,.90),rgba(226,241,252,.88));
    --gl-line:rgba(255,255,255,.78);
    --gl-blur:blur(18px) saturate(150%);
    --gl-blur-strong:blur(26px) saturate(160%);
    --gl-shadow:0 14px 30px -10px rgba(35,85,135,.34), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
    --gl-inset:inset 0 2px 6px rgba(60,110,160,.18), inset 0 1px 0 rgba(255,255,255,.6);
    --gl-tile:linear-gradient(145deg,rgba(255,255,255,.95),rgba(204,233,250,.62));
    --gl-btn:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),linear-gradient(90deg,#1b6fb4 0%,#25a5d4 55%,#38cfe0 100%);
    --gl-btn-shadow:0 12px 22px -8px rgba(24,125,190,.65), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 4px rgba(10,70,130,.25);
    --gl-hero:linear-gradient(150deg,#1f6db3 0%,#2a8dd0 52%,#3db3dc 100%);
    --gl-hero-shadow:0 24px 40px -14px rgba(25,105,175,.6), inset 0 1px 0 rgba(255,255,255,.5);
  }

  /* ---------- Latar ---------- */
  html { background:#a9cdee; }
  body { background:transparent; color:var(--ink); }
  body::before {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(50vmax 36vmax at 85% 4%, rgba(255,255,255,.75), transparent 62%),
      radial-gradient(46vmax 40vmax at 8% 38%, rgba(120,205,235,.50), transparent 64%),
      radial-gradient(60vmax 46vmax at 78% 100%, rgba(40,110,185,.42), transparent 64%),
      linear-gradient(170deg,#d9ebf9 0%,#b0d1ef 46%,#86b4e0 100%);
  }
  #app { background:transparent; box-shadow:none; }
  ::selection { background:#38cfe0; color:#0b2a44; }
  ::placeholder { color:var(--muted); opacity:.9; }

  /* ---------- Topbar & navigasi ---------- */
  #topbar {
    background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(226,241,252,.50));
    -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong);
    color:var(--ink); border-bottom:1px solid var(--gl-line);
    border-radius:0 0 28px 28px;
    box-shadow:0 12px 28px -10px rgba(35,85,135,.35), inset 0 1px 0 rgba(255,255,255,.95);
  }
  #topbar h1, #topbar .icon-btn { color:var(--ink); }
  #topbar .icon-btn:active { background:rgba(31,150,205,.16); }

  #bottomnav {
    background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(226,241,252,.50));
    -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong);
    border:1px solid var(--gl-line);
    box-shadow:0 18px 34px -10px rgba(35,85,135,.45), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4);
  }
  .nav-btn { color:var(--muted); transition:background .15s ease, box-shadow .15s ease; }
  .nav-btn.active {
    color:var(--primary);
    background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(190,228,246,.75));
    box-shadow:0 8px 16px -6px rgba(30,120,180,.45), inset 0 1px 0 #fff, inset 0 -2px 4px rgba(90,150,200,.18);
  }
  .nav-btn[data-route="sale/new"] { color:var(--primary); }
  @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:#fff; background:var(--gl-btn);
      border:4px solid rgba(255,255,255,.9); border-radius:50%;
      box-shadow:0 14px 22px -6px rgba(24,125,190,.7), inset 0 1px 0 rgba(255,255,255,.6);
    }
    .nav-btn[data-route="sale/new"].active { color:var(--primary); background:transparent; box-shadow:none; }
    .nav-btn[data-route="sale/new"].active svg { background:var(--gl-btn); }
  }
  @media(min-width:800px) {
    #topbar { margin:12px 12px 0; top:12px; border-radius:24px; border:1px solid var(--gl-line); }
    #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:var(--muted); }
    .nav-divider--desktop { background:var(--outline); }
  }

  /* ---------- Drawer, overlay, popup ---------- */
  .drawer {
    background:linear-gradient(160deg,rgba(255,255,255,.90),rgba(214,234,250,.88));
    -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong);
    color:var(--ink); border-right:1px solid var(--gl-line); border-radius:0 28px 28px 0;
    box-shadow:14px 0 40px rgba(35,85,135,.35);
  }
  .drawer-title { color:var(--ink); }
  .drawer-item { color:var(--ink-soft); }
  .drawer-item:active { background:rgba(31,150,205,.14); }
  .drawer-sep { background:var(--outline); }
  .drawer-overlay, .sheet-backdrop, .dialog-backdrop {
    background:rgba(30,75,120,.34);
    -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  }
  .sheet, .dialog {
    background:var(--gl-card-strong);
    -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong);
    color:var(--ink); border:1px solid var(--gl-line);
    box-shadow:0 -14px 40px rgba(35,85,135,.30), inset 0 1px 0 #fff;
  }
  .sheet { border-radius:28px 28px 0 0; border-bottom:0; }
  .dialog { border-radius:26px; box-shadow:0 24px 56px rgba(35,85,135,.40), inset 0 1px 0 #fff; }
  .sheet-handle { background:rgba(80,130,180,.35); }
  .dialog-actions .cancel { color:var(--ink-soft); }
  .dialog-actions .confirm:not(.dangerous) { background:var(--gl-btn); color:#fff; box-shadow:var(--gl-btn-shadow); }
  .dialog-actions .confirm.dangerous { background:linear-gradient(180deg,#ee7b8e,#d0475f); color:#fff; }
  .dialog-actions button { border-radius:14px; }
  #toast {
    background:linear-gradient(180deg,rgba(40,105,165,.94),rgba(24,78,135,.94)); color:#fff;
    border:1px solid rgba(255,255,255,.35); border-radius:16px;
    -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
    box-shadow:0 14px 28px rgba(25,75,130,.45), inset 0 1px 0 rgba(255,255,255,.3);
  }
  #loadingOverlay { background:rgba(214,233,248,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  .loading-mark { color:var(--primary); }

  /* ---------- Tombol ---------- */
  .btn { border-radius:999px; letter-spacing:.1px; }
  .btn:not(.secondary):not(.danger):not(.ghost), .fab, .dialog-actions .confirm:not(.dangerous) {
    background:var(--gl-btn); color:#fff;
  }
  .btn:not(.secondary):not(.danger):not(.ghost) {
    border:1px solid rgba(255,255,255,.45); box-shadow:var(--gl-btn-shadow);
    text-shadow:0 1px 2px rgba(10,60,110,.35); transition:transform .1s ease, box-shadow .12s ease;
  }
  .btn:not(.secondary):not(.danger):not(.ghost):active, .fab:active {
    transform:translateY(2px) scale(.985); opacity:1;
    box-shadow:0 4px 10px -3px rgba(24,125,190,.5), inset 0 3px 6px rgba(10,70,130,.35);
  }
  .btn.secondary {
    background:var(--gl-card); color:var(--ink); border:1px solid var(--gl-line);
    -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur); box-shadow:var(--gl-shadow);
  }
  .btn.danger { background:rgba(255,255,255,.55); color:#c23a52; border:1px solid rgba(208,71,95,.45); }
  .btn.ghost { background:rgba(255,255,255,.25); color:var(--ink-soft); border:1px dashed rgba(70,120,170,.45); }
  .fab { border:2px solid rgba(255,255,255,.85); box-shadow:0 16px 28px -8px rgba(24,125,190,.7), inset 0 1px 0 rgba(255,255,255,.6); }

  /* ---------- Kartu kaca ---------- */
  [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,
  [data-page="sale-detail"] .sale-detail-share-options,
  [data-page="settings"] .settings-theme {
    background:var(--gl-card);
    -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
    border:1px solid var(--gl-line);
    border-radius:24px;
    box-shadow:var(--gl-shadow);
  }
  :is([data-page="sale-new"], [data-page="sale-edit"]) .sale-suggestions {
    background:rgba(244,250,255,.97); border:1px solid var(--gl-line); border-radius:18px; box-shadow:var(--gl-shadow);
  }
  [data-page="customers"] .customer-card,
  [data-page="products"] #pList .row {
    background:var(--gl-card); border:1px solid var(--gl-line); border-radius:20px; box-shadow:var(--gl-shadow);
  }
  .row:active, .settings-tile:active, [data-page="customers"] .customer-card:active { background:rgba(255,255,255,.55); }
  .row { color:var(--ink); }
  .settings-tile, .field { background:transparent; }
  .total-box { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(130,215,225,.35)); border:1px solid var(--gl-line); box-shadow:var(--gl-shadow); border-radius:20px; }
  .info-card { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(150,210,240,.35)); border:1px solid var(--gl-line); border-radius:18px; box-shadow:var(--gl-shadow); }
  .receipt-alert { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(150,210,240,.35)); border:1px solid var(--gl-line); }
  .receipt-alert-action { border-color:var(--primary); color:var(--primary); }

  .sale-checkout,
  :is([data-page="sale-new"], [data-page="sale-edit"]) .sale-checkout {
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(222,239,251,.90)) !important;
    -webkit-backdrop-filter:var(--gl-blur-strong); backdrop-filter:var(--gl-blur-strong);
    border-top:1px solid var(--gl-line); border-radius:26px 26px 0 0;
    box-shadow:0 -14px 34px rgba(35,85,135,.28), inset 0 1px 0 #fff;
  }
  :is([data-page="sale-new"], [data-page="sale-edit"]) {
    --sale-card-bg:#eef6fd;
    --sale-soft-bg:#dcebf8;
    --sale-shadow:0 14px 28px -12px rgba(35,85,135,.35);
  }
  [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:rgba(238,247,254,.94); border-top:1px solid var(--gl-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,.5); border:1px solid var(--gl-line); border-radius:18px;
  }

  /* ---------- Input & chip ---------- */
  .search-input,
  [data-page="products"] .products-search,
  [data-page="customers"] .customers-search {
    background:rgba(255,255,255,.58); border:1px solid var(--gl-line); border-radius:999px; box-shadow:var(--gl-inset); color:var(--ink);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .search-input:focus { outline:2px solid rgba(40,170,215,.6); outline-offset:0; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline:2px solid rgba(40,170,215,.6); outline-offset:3px; border-radius:6px; }
  [data-page="customers"].customer-form-sheet :is(input,textarea),
  [data-page="home"] .home-layout-3,
  [data-page="home"] .row .avatar { background:rgba(255,255,255,.6); border-color:var(--gl-line); color:var(--ink); box-shadow:var(--gl-inset); }
  [data-page="home"] .row .avatar { color:#168b9a; }
  .chip { background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(255,255,255,.35)); border:1px solid var(--gl-line); color:var(--ink-soft); border-radius:999px; box-shadow:0 4px 10px -4px rgba(35,85,135,.25), inset 0 1px 0 #fff; }
  .chip.active, [data-page="reports"] .reports-layout-1 .chip.active {
    background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(90deg,#25a5d4,#38cfe0);
    border-color:rgba(255,255,255,.6); color:#fff; font-weight:700; text-shadow:0 1px 2px rgba(10,60,110,.3);
    box-shadow:0 8px 16px -6px rgba(30,160,205,.7), inset 0 1px 0 rgba(255,255,255,.6);
  }
  [data-page="reports"] .reports-view-tabs { background:rgba(255,255,255,.45); border:1px solid var(--gl-line); border-radius:999px; box-shadow:var(--gl-inset); }
  [data-page="reports"] .reports-view-tabs button.active { background:var(--gl-btn); color:#fff; border-radius:999px; box-shadow:var(--gl-btn-shadow); }

  /* ---------- Kartu berwarna ---------- */
  .summary-card, [data-page="dashboard"] .dashboard-hero, [data-page="reports"] .reports-layout-15 {
    background:var(--gl-hero); color:#fff;
    border:1px solid rgba(255,255,255,.45); border-radius:28px; box-shadow:var(--gl-hero-shadow);
  }
  [data-page="expenses"] .expense-summary {
    background:linear-gradient(150deg,#1b9bc4 0%,#2fbcd8 55%,#5fdbe6 100%);
    border:1px solid rgba(255,255,255,.5); border-radius:26px; box-shadow:var(--gl-hero-shadow);
    text-shadow:0 1px 2px rgba(10,70,110,.3);
  }
  .summary-label, [data-page="dashboard"] .dashboard-label { color:rgba(255,255,255,.92); }
  [data-page="dashboard"] .dashboard-primary-action { background:var(--gl-btn); color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:8px 16px 8px 12px; box-shadow:var(--gl-btn-shadow); text-shadow:0 1px 2px rgba(10,60,110,.35); }
  [data-page="home"] .home-dashboard-filter { background:rgba(255,255,255,.55); border:1px solid var(--gl-line); color:var(--primary); border-radius:16px; }
  [data-page="home"] .home-dashboard-filter button { background:var(--gl-btn); color:#fff; border-radius:999px; padding:5px 10px; }
  [data-page="home"] .row-status { background:rgba(31,150,205,.12); }

  /* Akses cepat */
  [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(--gl-card); border:1px solid var(--gl-line); border-radius:22px; color:var(--ink-soft); box-shadow:var(--gl-shadow);
  }
  [data-page="dashboard"] .dashboard-shortcut-icon,
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(n) .dashboard-shortcut-icon {
    background:var(--gl-tile); color:#1a8fc4; border:1px solid #fff; border-radius:15px;
    box-shadow:0 8px 14px -6px rgba(35,100,160,.45), inset 0 1px 0 #fff;
  }
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(2) .dashboard-shortcut-icon { color:#12a0b0; }
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(3) .dashboard-shortcut-icon { color:#3a78d0; }
  [data-page="dashboard"] .dashboard-shortcuts button:nth-child(4) .dashboard-shortcut-icon { color:#1fa8c9; }

  /* Perlu perhatian */
  [data-page="dashboard"] .dashboard-attention::after { border-color:rgba(255,255,255,.35); }
  [data-page="dashboard"] .dashboard-attention-list { border-top-color:var(--outline); }
  [data-page="dashboard"] .dashboard-attention-item:nth-child(2) { border-left-color:var(--outline); }
  @media(max-width:390px) { [data-page="dashboard"] .dashboard-attention-item:nth-child(2) { border-top-color:var(--outline); } }
  [data-page="dashboard"] .dashboard-attention-icon,
  [data-page="dashboard"] .dashboard-attention-item--unpaid .dashboard-attention-icon {
    background:color-mix(in srgb,var(--gl-tile) 35%,transparent); color:#1a8fc4; border:1px solid rgba(255,255,255,.6); border-radius:8px; box-shadow:none;
  }
  [data-page="dashboard"] .dashboard-attention-item--unpaid .dashboard-attention-icon { color:#12a0b0; }
  [data-page="dashboard"] .dashboard-attention-action strong { color:var(--primary); }

  /* ---------- Avatar, foto, ikon, lencana ---------- */
  .avatar,
  [data-page="customers"] .customer-card .avatar,
  [data-page="dashboard"] .dashboard-orders .avatar {
    background:linear-gradient(145deg,#52d5e8,#1c7fc0); color:#fff; border:2px solid rgba(255,255,255,.8);
    box-shadow:0 8px 14px -6px rgba(25,110,175,.55), inset 0 1px 0 rgba(255,255,255,.5);
  }
  [data-page="customers"] .customer-card:nth-child(3n+2) .avatar { background:linear-gradient(145deg,#6fe0d2,#139aa8); color:#fff; }
  [data-page="customers"] .customer-card:nth-child(3n+3) .avatar { background:linear-gradient(145deg,#8fb6ff,#3a62c8); color:#fff; }
  [data-page="products"] .product-photo { background:linear-gradient(145deg,#52d5e8,#1c7fc0); color:#fff; box-shadow:0 8px 14px -6px rgba(25,110,175,.5), inset 0 1px 0 rgba(255,255,255,.5); }
  [data-page="products"] .row:nth-child(3n+2) .product-photo { background:linear-gradient(145deg,#6fe0d2,#139aa8); color:#fff; }
  [data-page="products"] .row:nth-child(3n+3) .product-photo { background:linear-gradient(145deg,#8fb6ff,#3a62c8); color:#fff; }
  .settings-tile .icon-box { background:var(--gl-tile); border:1px solid #fff; box-shadow:0 7px 12px -6px rgba(35,100,160,.45), inset 0 1px 0 #fff; }
  .settings-tile:nth-child(4n+1) .icon-box { background:var(--gl-tile); color:#12a0b0; }
  .settings-tile:nth-child(4n+2) .icon-box { background:var(--gl-tile); color:#1a8fc4; }
  .settings-tile:nth-child(4n+3) .icon-box { background:var(--gl-tile); color:#3a78d0; }
  .settings-tile:nth-child(4n) .icon-box { background:var(--gl-tile); color:#1fa8c9; }

  .payment-badge { background:rgba(224,170,40,.20); color:#8a6200; border:1px solid rgba(224,170,40,.5); border-radius:999px; padding:3px 9px; }
  .payment-badge[data-status="PAID"] { background:rgba(30,170,130,.18); color:#0d6e53; border-color:rgba(30,170,130,.45); }
  .payment-badge[data-status="UNPAID"] { background:rgba(220,80,100,.16); color:#a82f47; border-color:rgba(220,80,100,.45); }
  .payment-badge[data-status="OVERPAID"] { background:rgba(50,120,210,.16); color:#235a9e; border-color:rgba(50,120,210,.42); }

  /* ---------- Laporan ---------- */
  [data-page="reports"] .reports-metric--revenue,
  [data-page="reports"] .reports-overall-metric--received { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(60,140,215,.26)); border-color:var(--gl-line); }
  [data-page="reports"] .reports-metric--transactions { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(40,190,170,.26)); border-color:var(--gl-line); }
  [data-page="reports"] .reports-metric--expenses,
  [data-page="reports"] .reports-overall-metric--expenses { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(235,120,120,.24)); border-color:var(--gl-line); }
  [data-page="reports"] .reports-metric--net,
  [data-page="reports"] .reports-overall-metric--net { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(110,120,225,.26)); border-color:var(--gl-line); }
  [data-page="reports"] .reports-metric--receivable,
  [data-page="reports"] .reports-overall-metric--receivable { background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(235,180,70,.24)); border-color:var(--gl-line); }
  [data-page="reports"] .reports-metric--transactions .reports-layout-7,
  [data-page="reports"] .reports-overall-metric--received .reports-layout-22 { color:#0d7a68; }
  [data-page="reports"] .reports-metric--expenses .reports-layout-8,
  [data-page="reports"] .reports-overall-metric--expenses .reports-layout-23 { color:#b03a4a; }
  [data-page="reports"] .reports-metric--net .reports-layout-7,
  [data-page="reports"] .reports-overall-metric--net .reports-layout-24 { color:#4a54b8; }

  /* ---------- Detail nota & pengaturan ---------- */
  [data-page="sale-detail"] .sale-detail-receipt-wrap { background:rgba(255,255,255,.35); border-radius:22px; box-shadow:var(--gl-inset); }
  [data-page="sale-detail"] .sale-detail-payment-row { background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(220,235,248,.32)); border:1px solid rgba(255,255,255,.62); border-radius:999px; box-shadow:inset 3px 4px 9px rgba(60,110,160,.13), inset -3px -4px 9px rgba(255,255,255,.58), 0 -7px 16px -14px rgba(37,165,212,.52); backdrop-filter:blur(12px) saturate(125%); }
  [data-page="sale-detail"] .sale-detail-payment-icon { background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(204,233,250,.38)); color:color-mix(in srgb,var(--primary) 48%,var(--muted)); border-radius:999px; box-shadow:inset 2px 2px 5px rgba(60,110,160,.11), inset -2px -2px 5px rgba(255,255,255,.56); }
  [data-page="sale-detail"] .sale-detail-payment-trailing strong { color:color-mix(in srgb,var(--primary) 46%,var(--ink-soft)); }
  [data-page="settings"] .settings-logo-control output { background:var(--gl-btn); color:#fff; }
  [data-page="settings"] #logoMaxWidth::-webkit-slider-thumb { background:#25a5d4; }
  [data-page="settings"] #logoMaxWidth::-moz-range-thumb { background:#25a5d4; }
  [data-page="settings"] .theme-switch { background:rgba(255,255,255,.45); box-shadow:var(--gl-inset); border-radius:999px; }
  [data-page="settings"] .theme-switch button { border-radius:999px; }
  [data-page="settings"] .theme-switch button.active { background:var(--gl-btn); color:#fff; box-shadow:var(--gl-btn-shadow); }

  /* ---------- Grafik ---------- */
  .business-bars { background:repeating-linear-gradient(to top,transparent 0,transparent 76px,rgba(70,120,170,.20) 77px,rgba(70,120,170,.20) 78px); }
  .business-day-label { background:transparent; }
  .business-day[aria-pressed="true"] { background:rgba(31,170,205,.20); border-radius:8px; }
  .business-donut > div { background:#eef6fd; box-shadow:var(--gl-inset); }

  /* ---------- Struk tetap putih (tidak diubah) ---------- */
  .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(255,255,255,.35); border-radius:18px; box-shadow:var(--gl-inset); }
  html[data-theme="glass"] #app #bottomnav { --nav-bar:var(--gl-hero); --nav-ink:rgba(255,255,255,.88); --nav-shadow:drop-shadow(0 -10px 18px rgba(25,105,175,.30)); }
  html[data-theme="glass"] #app #bottomnav .nav-shape,
  html[data-theme="glass"] #app #bottomnav .nav-bg { border-radius:30px 30px 0 0; }
  html[data-theme="glass"] #app #bottomnav .nav-bg { border:1px solid rgba(255,255,255,.42); box-shadow:inset 0 2px 4px rgba(255,255,255,.35),inset 0 -4px 8px rgba(20,90,150,.14); }

  /* ---------- Backup: low-contrast glass rhythm ---------- */
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section {
    background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(226,241,252,.58));
    border-color:rgba(255,255,255,.74);
    box-shadow:0 9px 20px -12px rgba(35,85,135,.28), inset 0 1px 0 rgba(255,255,255,.88);
  }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--download { background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(231,243,251,.76)); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--auto { background:linear-gradient(145deg,rgba(231,247,244,.78),rgba(208,237,239,.62)); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--restore,
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--import { background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(226,238,248,.62)); }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--download .settings-button {
    background:linear-gradient(180deg,#55b5cf 0%,#359bbd 100%);
    box-shadow:0 7px 14px -8px rgba(24,125,190,.48), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 4px rgba(10,70,130,.14);
  }
  #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,.48); color:var(--ink-soft); border-color:rgba(255,255,255,.82);
    box-shadow:0 4px 10px -8px rgba(35,85,135,.3), inset 0 1px 0 rgba(255,255,255,.82);
  }
  #pageRoot[data-page="settings"][data-section="backup"] .backup-section--auto .icon-box { background:rgba(203,235,228,.78); color:#197f78; box-shadow:0 4px 9px -7px rgba(20,120,130,.34), inset 0 1px 0 rgba(255,255,255,.85); }
  #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; }
  }

  /* Tanpa dukungan blur: naikkan keburaman agar tetap terbaca */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    :root { --gl-card:linear-gradient(145deg,rgba(255,255,255,.88),rgba(240,248,254,.80)); }
    #topbar, #bottomnav, .drawer, .sheet, .dialog { background:rgba(240,248,254,.96); }
  }
}