/* ═══════════════════════════════════════════════════════════════════════
   PIXEL BLACK POS — COMPLETE VISUAL THEMES
   Full UI transformation per theme — backgrounds, glows, gradients,
   card styles, borders, typography weight, everything.

   THEMES:
   1. emerald   — Default clean green (Gofrugal professional)
   2. neon       — Neon Cyber (dark navy + cyan neon glows)
   3. gold       — Midnight Gold (dark + warm amber glows)
   4. ocean      — Deep Ocean (dark blue gradient)
   5. rose       — Blush Rose (soft dark + pink-purple gradient)
═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════
   1. EMERALD — Default (no override)
═══════════════════════════════ */
[data-theme="emerald"] { color-scheme: light; }

/* ═══════════════════════════════
   2. NEON CYBER 🔵
   Dark navy + cyan/teal neon glows
   Inspired by futuristic dashboards
═══════════════════════════════ */
[data-theme="neon"] {
  --green:      #00E5CF;
  --green-dk:   #00BFA5;
  --green-lt:   rgba(0,229,207,0.12);
  --green-dim:  rgba(0,229,207,0.22);
  --green-glow: rgba(0,229,207,0.45);
  --blue:       #3D8EFF;
  --blue-lt:    rgba(61,142,255,0.14);
  --orange:     #FF6B2B;
  --orange-lt:  rgba(255,107,43,0.14);
  --orange-dim: rgba(255,107,43,0.22);
  --red:        #FF4D6A;
  --red-lt:     rgba(255,77,106,0.14);
  --red-dim:    rgba(255,77,106,0.22);
  --gold:       #FFD600;
  --gold-lt:    rgba(255,214,0,0.1);
  --purple:     #B44DFF;
  --bg:         #070C1A;
  --bg-dk:      #0D1230;
  --t1:         #E8F2FF;
  --t2:         #A0B8D8;
  --t3:         #5A6E90;
  --t4:         #38486A;
  --border:     rgba(0,229,207,0.1);
  --border-md:  rgba(0,229,207,0.2);
  --border-dk:  rgba(0,229,207,0.32);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.6);
  --shadow:     0 6px 24px rgba(0,0,0,0.7);
  color-scheme: dark;
}
[data-theme="neon"] body {
  background: radial-gradient(ellipse at 20% 20%, rgba(0,50,100,0.4) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(0,100,80,0.25) 0%, transparent 60%),
              #070C1A;
  min-height: 100vh;
}
[data-theme="neon"] .page-header {
  background: linear-gradient(135deg, #0D1230 0%, #091828 100%);
  border-bottom: 1px solid rgba(0,229,207,0.18);
  box-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 0 rgba(0,229,207,0.15);
}
[data-theme="neon"] .ph-logo-box {
  background: linear-gradient(135deg, rgba(0,229,207,0.3), rgba(61,142,255,0.2));
  border: 1px solid rgba(0,229,207,0.35);
  box-shadow: 0 0 12px rgba(0,229,207,0.3);
}
[data-theme="neon"] .ph-logo-text { color: #E8F2FF; }
[data-theme="neon"] .ph-logo-sub  { color: #5A6E90; }
[data-theme="neon"] .ph-value     { color: #00E5CF; }
[data-theme="neon"] .ph-label     { color: #5A6E90; }
[data-theme="neon"] .ph-sep       { background: rgba(0,229,207,0.15); }
[data-theme="neon"] .ph-btn {
  background: rgba(13,18,48,0.8); border: 1px solid rgba(0,229,207,0.2);
  color: #A0B8D8;
}
[data-theme="neon"] .ph-btn:hover { border-color: #00E5CF; color: #00E5CF; box-shadow: 0 0 10px rgba(0,229,207,0.2); }
[data-theme="neon"] .ph-btn.white {
  background: linear-gradient(135deg, #00E5CF, #3D8EFF);
  border: none; color: #070C1A; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,229,207,0.4);
}
[data-theme="neon"] .nav-tabs {
  background: #0A0F24;
  border-bottom: 1px solid rgba(0,229,207,0.12);
  box-shadow: none;
}
[data-theme="neon"] .nav-tab       { color: #38486A; }
[data-theme="neon"] .nav-tab:hover { background: rgba(0,229,207,0.06); color: #A0B8D8; }
[data-theme="neon"] .nav-tab.active {
  background: rgba(0,229,207,0.1);
  border-bottom-color: #00E5CF;
  color: #00E5CF;
  text-shadow: 0 0 12px rgba(0,229,207,0.6);
}
[data-theme="neon"] .nav-tabs-right { background: #0A0F24; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .sync-pill { background: rgba(0,229,207,0.1); color: #00E5CF; border: 1px solid rgba(0,229,207,0.2); }
[data-theme="neon"] .sync-pulse { background: #00E5CF; box-shadow: 0 0 6px #00E5CF; }

/* Category panel */
[data-theme="neon"] .gcat-panel {
  background: #0A0F24;
  border-right: 1px solid rgba(0,229,207,0.12);
}
[data-theme="neon"] .gcat-head { border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .gcat-item:hover { background: rgba(0,229,207,0.06); }
[data-theme="neon"] .gcat-item.active {
  background: linear-gradient(90deg, rgba(0,229,207,0.12), transparent);
  border-left-color: #00E5CF;
  box-shadow: inset 3px 0 8px rgba(0,229,207,0.2);
}
[data-theme="neon"] .gcat-name  { color: #A0B8D8; }
[data-theme="neon"] .gcat-item.active .gcat-name { color: #00E5CF; }
[data-theme="neon"] .gcat-count { background: rgba(0,229,207,0.08); border-color: rgba(0,229,207,0.15); color: #5A6E90; }
[data-theme="neon"] .gcat-item.active .gcat-count { background: rgba(0,229,207,0.2); color: #00E5CF; }

/* Product area */
[data-theme="neon"] .gprod-area { background: #070C1A; }
[data-theme="neon"] .barcode-bar {
  background: #0A0F24;
  border-bottom: 1px solid rgba(0,229,207,0.12);
}
[data-theme="neon"] .barcode-icon-wrap {
  background: linear-gradient(135deg, #00E5CF, #3D8EFF);
  color: #070C1A; font-weight: 800;
  box-shadow: 0 3px 12px rgba(0,229,207,0.35);
}
[data-theme="neon"] .barcode-input {
  background: rgba(0,229,207,0.05);
  border-color: rgba(0,229,207,0.3);
  color: #00E5CF;
  letter-spacing: 1.5px;
}
[data-theme="neon"] .barcode-input:focus { background: rgba(0,229,207,0.08); box-shadow: 0 0 16px rgba(0,229,207,0.2); }
[data-theme="neon"] .barcode-input::placeholder { color: #38486A; }
[data-theme="neon"] .prod-search-g { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.12); color: #A0B8D8; }
[data-theme="neon"] .prod-search-g:focus { border-color: #00E5CF; background: rgba(0,229,207,0.05); }
[data-theme="neon"] .gst-pill { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.12); color: #5A6E90; }
[data-theme="neon"] .gst-pill:hover { border-color: #00E5CF; color: #00E5CF; }
[data-theme="neon"] .gst-pill.active { background: linear-gradient(135deg, #00E5CF, #3D8EFF); border-color: transparent; color: #070C1A; box-shadow: 0 3px 10px rgba(0,229,207,0.3); }

/* Product cards */
[data-theme="neon"] .gprod-card {
  background: rgba(13,18,48,0.7);
  border: 1px solid rgba(0,229,207,0.1);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
[data-theme="neon"] .gprod-card:hover {
  background: rgba(13,18,48,0.9);
  border-color: #00E5CF;
  box-shadow: 0 0 0 1px rgba(0,229,207,0.3), 0 8px 24px rgba(0,229,207,0.2), 0 0 40px rgba(0,229,207,0.08);
  transform: translateY(-3px);
}
[data-theme="neon"] .gprod-card.in-cart {
  border-color: #00E5CF;
  background: rgba(0,229,207,0.08);
  box-shadow: 0 0 0 1px rgba(0,229,207,0.3), 0 4px 16px rgba(0,229,207,0.2);
}
[data-theme="neon"] .gprod-name  { color: #E8F2FF; }
[data-theme="neon"] .gprod-unit  { color: #38486A; }
[data-theme="neon"] .gprod-price { color: #00E5CF; text-shadow: 0 0 10px rgba(0,229,207,0.5); }
[data-theme="neon"] .gprod-qty-badge { background: linear-gradient(135deg, #00E5CF, #3D8EFF); color: #070C1A; box-shadow: 0 2px 8px rgba(0,229,207,0.4); }
[data-theme="neon"] .gprod-add-strip { background: linear-gradient(135deg, #00E5CF, #3D8EFF); color: #070C1A; font-weight: 800; }

/* Billing panel */
[data-theme="neon"] .gbill-panel { background: #0A0F24; border-left: 1px solid rgba(0,229,207,0.12); }
[data-theme="neon"] .gbill-header { background: linear-gradient(135deg, #00BFA5 0%, #3D8EFF 100%); box-shadow: 0 4px 20px rgba(0,229,207,0.3); }
[data-theme="neon"] .gbhdr-btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
[data-theme="neon"] .gbill-ledger-head { background: #070C1A; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .glh-cell { color: #3D8EFF; }
[data-theme="neon"] .gbill-row { border-color: rgba(0,229,207,0.08); }
[data-theme="neon"] .gbill-row:hover { background: rgba(0,229,207,0.04); }
[data-theme="neon"] .gbi-name { color: #E8F2FF; }
[data-theme="neon"] .gbi-unit { color: #5A6E90; }
[data-theme="neon"] .gbi-amt  { color: #00E5CF; }
[data-theme="neon"] .gbi-qty-btn { background: rgba(0,229,207,0.08); border-color: rgba(0,229,207,0.2); color: #00E5CF; }
[data-theme="neon"] .gbi-qty-btn:hover { background: #00E5CF; color: #070C1A; }
[data-theme="neon"] .gbill-totals { background: #070C1A; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .gtot-row { color: #5A6E90; }
[data-theme="neon"] .gtot-row .gtv { color: #A0B8D8; }
[data-theme="neon"] .gtot-grand { border-color: rgba(0,229,207,0.2); }
[data-theme="neon"] .gtgr-lbl { color: #E8F2FF; }
[data-theme="neon"] .gtgr-val { color: #00E5CF; text-shadow: 0 0 16px rgba(0,229,207,0.6); font-size: 1.3rem; }
[data-theme="neon"] .gbill-cash { background: rgba(0,229,207,0.06); border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .gcash-lbl { color: #00E5CF; }
[data-theme="neon"] .gcash-in { border-color: rgba(0,229,207,0.3); background: rgba(0,229,207,0.05); color: #00E5CF; }
[data-theme="neon"] .gpm-btn { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.12); color: #5A6E90; }
[data-theme="neon"] .gpm-btn:hover { border-color: #00E5CF; color: #00E5CF; }
[data-theme="neon"] .gpm-btn.active { background: linear-gradient(135deg, rgba(0,229,207,0.2), rgba(61,142,255,0.2)); border-color: #00E5CF; color: #00E5CF; box-shadow: 0 0 10px rgba(0,229,207,0.15); }
[data-theme="neon"] .gbill-actions { background: #0A0F24; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .gact-hold { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.15); color: #A0B8D8; }
[data-theme="neon"] .gact-print { background: rgba(61,142,255,0.1); border-color: rgba(61,142,255,0.3); color: #3D8EFF; }
[data-theme="neon"] .gact-print:hover { background: #3D8EFF; color: #fff; box-shadow: 0 4px 14px rgba(61,142,255,0.4); }
[data-theme="neon"] .gact-settle {
  background: linear-gradient(135deg, #00E5CF 0%, #3D8EFF 100%);
  box-shadow: 0 4px 20px rgba(0,229,207,0.5), 0 0 40px rgba(0,229,207,0.15);
  color: #070C1A; border: none;
}
[data-theme="neon"] .gact-settle:hover { box-shadow: 0 6px 24px rgba(0,229,207,0.7), 0 0 60px rgba(0,229,207,0.2); transform: translateY(-1px); }

/* Modals */
[data-theme="neon"] .modal-box { background: #0D1230; border: 1px solid rgba(0,229,207,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,229,207,0.1); }
[data-theme="neon"] .modal-head { background: rgba(0,229,207,0.06); border-color: rgba(0,229,207,0.15); }
[data-theme="neon"] .modal-head-title { color: #E8F2FF; }
[data-theme="neon"] .modal-head-close { color: #5A6E90; }
[data-theme="neon"] .modal-foot { background: rgba(0,0,0,0.3); border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .modal-overlay { background: rgba(2,5,18,0.85); backdrop-filter: blur(8px); }
[data-theme="neon"] .f-input, [data-theme="neon"] .f-select { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.15); color: #E8F2FF; }
[data-theme="neon"] .f-input:focus { border-color: #00E5CF; background: rgba(0,229,207,0.05); box-shadow: 0 0 12px rgba(0,229,207,0.15); }
[data-theme="neon"] .form-label { color: #5A6E90; }
[data-theme="neon"] .wk-btn { background: rgba(255,255,255,0.05); border-color: rgba(0,229,207,0.15); color: #A0B8D8; }
[data-theme="neon"] .wk-btn:hover { background: #00E5CF; border-color: #00E5CF; color: #070C1A; box-shadow: 0 0 14px rgba(0,229,207,0.4); }
[data-theme="neon"] .wk-btn.special { background: rgba(0,229,207,0.08); color: #00E5CF; }
[data-theme="neon"] .wk-btn.del-key { background: rgba(255,77,106,0.1); color: #FF4D6A; }
[data-theme="neon"] .wk-btn.add-key { background: linear-gradient(135deg, #00E5CF, #3D8EFF); color: #070C1A; box-shadow: 0 4px 14px rgba(0,229,207,0.4); }
[data-theme="neon"] .weight-display { background: linear-gradient(135deg, #0D1230, #091828); border: 1px solid rgba(0,229,207,0.2); }
[data-theme="neon"] .wd-unit  { color: #5A6E90; }
[data-theme="neon"] .wd-total { color: #00E5CF; }
[data-theme="neon"] .weight-modal-product { background: rgba(0,229,207,0.05); border: 1px solid rgba(0,229,207,0.12); }

/* Inventory & Reports */
[data-theme="neon"] .inv-toolbar, [data-theme="neon"] .inv-filters, [data-theme="neon"] .rpt-bar { background: #0A0F24; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .inv-stats { background: #070C1A; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .ist-card { background: rgba(13,18,48,0.8); border-color: rgba(0,229,207,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
[data-theme="neon"] .inv-search, [data-theme="neon"] .inv-filter-sel { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.15); color: #A0B8D8; }
[data-theme="neon"] .inv-search:focus { border-color: #00E5CF; box-shadow: 0 0 10px rgba(0,229,207,0.15); }
[data-theme="neon"] .exp-filter-pill { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.12); color: #5A6E90; }
[data-theme="neon"] .exp-filter-pill:hover { border-color: #00E5CF; color: #00E5CF; }
[data-theme="neon"] .exp-filter-pill.active { background: linear-gradient(135deg, #00E5CF, #3D8EFF); border-color: transparent; color: #070C1A; box-shadow: 0 3px 10px rgba(0,229,207,0.3); }
[data-theme="neon"] .inv-table, [data-theme="neon"] .cc, [data-theme="neon"] .kpi-c { background: rgba(13,18,48,0.8); border-color: rgba(0,229,207,0.1); }
[data-theme="neon"] .inv-table thead th { background: rgba(7,12,26,0.9); color: #3D8EFF; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .inv-table tbody td { color: #A0B8D8; border-color: rgba(0,229,207,0.07); }
[data-theme="neon"] .inv-table tbody tr:hover td { background: rgba(0,229,207,0.04); }
[data-theme="neon"] .cc-head { border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .cc-title { color: #E8F2FF; }
[data-theme="neon"] .cc-sub   { color: #5A6E90; }
[data-theme="neon"] .kpi-lbl  { color: #5A6E90; }
[data-theme="neon"] .rpt-shell, [data-theme="neon"] .inv-table-wrap { background: #070C1A; }
[data-theme="neon"] .btn-primary { background: linear-gradient(135deg, #00E5CF, #3D8EFF); border: none; box-shadow: 0 4px 14px rgba(0,229,207,0.35); color: #070C1A; font-weight: 800; }
[data-theme="neon"] .btn-secondary { background: rgba(255,255,255,0.05); border-color: rgba(0,229,207,0.2); color: #A0B8D8; }
[data-theme="neon"] .toast-item { background: #0D1230; border: 1px solid rgba(0,229,207,0.2); color: #E8F2FF; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
[data-theme="neon"] .hb-trk  { background: rgba(0,229,207,0.08); }
[data-theme="neon"] .bar-f   { opacity: 0.8; }
[data-theme="neon"] .gst-report-table th { background: rgba(7,12,26,0.9); color: #3D8EFF; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .gst-report-table td { color: #A0B8D8; border-color: rgba(0,229,207,0.07); }
[data-theme="neon"] .txn-t th { background: rgba(7,12,26,0.9); color: #3D8EFF; border-color: rgba(0,229,207,0.12); }
[data-theme="neon"] .txn-t td { color: #A0B8D8; border-color: rgba(0,229,207,0.07); }
[data-theme="neon"] .txn-t tr:hover td { background: rgba(0,229,207,0.04); }
[data-theme="neon"] .badge { border: 1px solid currentColor; }
[data-theme="neon"] .per-btn { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.12); color: #5A6E90; }
[data-theme="neon"] .per-btn.active { background: linear-gradient(135deg, #00E5CF, #3D8EFF); border-color: transparent; color: #070C1A; box-shadow: 0 3px 10px rgba(0,229,207,0.3); }
[data-theme="neon"] .rpt-date { background: rgba(255,255,255,0.04); border-color: rgba(0,229,207,0.15); color: #A0B8D8; }
[data-theme="neon"] .inv-toolbar-title, [data-theme="neon"] .rpt-bar-title { color: #E8F2FF; }

/* ═══════════════════════════════
   3. MIDNIGHT GOLD 🌑
   Ultra dark + warm gold/amber glows
   Inspired by the second reference image
═══════════════════════════════ */
[data-theme="gold"] {
  --green:      #F59E0B;
  --green-dk:   #D97706;
  --green-lt:   rgba(245,158,11,0.1);
  --green-dim:  rgba(245,158,11,0.2);
  --green-glow: rgba(245,158,11,0.4);
  --blue:       #FB923C;
  --blue-lt:    rgba(251,146,60,0.12);
  --orange:     #FBBF24;
  --orange-lt:  rgba(251,191,36,0.12);
  --orange-dim: rgba(251,191,36,0.2);
  --red:        #F87171;
  --red-lt:     rgba(248,113,113,0.12);
  --red-dim:    rgba(248,113,113,0.2);
  --gold:       #FDE68A;
  --gold-lt:    rgba(253,230,138,0.1);
  --purple:     #C084FC;
  --bg:         #080806;
  --bg-dk:      #0F0E0B;
  --t1:         #FEFCE8;
  --t2:         #D4C5A0;
  --t3:         #8A7A5A;
  --t4:         #4A3E2A;
  --border:     rgba(245,158,11,0.1);
  --border-md:  rgba(245,158,11,0.18);
  --border-dk:  rgba(245,158,11,0.28);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.7);
  --shadow:     0 8px 30px rgba(0,0,0,0.8);
  color-scheme: dark;
}
[data-theme="gold"] body {
  background: radial-gradient(ellipse at 50% 0%, rgba(180,100,0,0.25) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(120,60,0,0.15) 0%, transparent 50%),
              #080806;
  min-height: 100vh;
}
[data-theme="gold"] .page-header {
  background: linear-gradient(135deg, #0F0E0B 0%, #1A1308 100%);
  border-bottom: 1px solid rgba(245,158,11,0.15);
  box-shadow: 0 2px 20px rgba(0,0,0,0.8), 0 1px 0 rgba(245,158,11,0.1);
}
[data-theme="gold"] .ph-logo-box {
  background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(251,146,60,0.2));
  border: 1px solid rgba(245,158,11,0.4);
  box-shadow: 0 0 14px rgba(245,158,11,0.25);
}
[data-theme="gold"] .ph-logo-text { color: #FEFCE8; }
[data-theme="gold"] .ph-logo-sub  { color: #8A7A5A; }
[data-theme="gold"] .ph-value     { color: #F59E0B; }
[data-theme="gold"] .ph-label     { color: #4A3E2A; }
[data-theme="gold"] .ph-sep       { background: rgba(245,158,11,0.12); }
[data-theme="gold"] .ph-btn { background: rgba(15,14,11,0.8); border: 1px solid rgba(245,158,11,0.18); color: #8A7A5A; }
[data-theme="gold"] .ph-btn:hover { border-color: #F59E0B; color: #F59E0B; box-shadow: 0 0 10px rgba(245,158,11,0.2); }
[data-theme="gold"] .ph-btn.white {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  border: none; color: #080806; font-weight: 800;
  box-shadow: 0 4px 14px rgba(245,158,11,0.45);
}
[data-theme="gold"] .nav-tabs { background: #0B0A07; border-bottom: 1px solid rgba(245,158,11,0.1); }
[data-theme="gold"] .nav-tab       { color: #4A3E2A; }
[data-theme="gold"] .nav-tab:hover { background: rgba(245,158,11,0.05); color: #D4C5A0; }
[data-theme="gold"] .nav-tab.active { background: rgba(245,158,11,0.08); border-bottom-color: #F59E0B; color: #F59E0B; text-shadow: 0 0 12px rgba(245,158,11,0.5); }
[data-theme="gold"] .nav-tabs-right { background: #0B0A07; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .sync-pill { background: rgba(245,158,11,0.1); color: #F59E0B; border: 1px solid rgba(245,158,11,0.2); }
[data-theme="gold"] .sync-pulse { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }

[data-theme="gold"] .gcat-panel { background: #0B0A07; border-right: 1px solid rgba(245,158,11,0.1); }
[data-theme="gold"] .gcat-head  { border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .gcat-item:hover { background: rgba(245,158,11,0.05); }
[data-theme="gold"] .gcat-item.active { background: linear-gradient(90deg, rgba(245,158,11,0.1), transparent); border-left-color: #F59E0B; }
[data-theme="gold"] .gcat-name  { color: #D4C5A0; }
[data-theme="gold"] .gcat-item.active .gcat-name { color: #F59E0B; }
[data-theme="gold"] .gcat-count { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.12); color: #8A7A5A; }
[data-theme="gold"] .gcat-item.active .gcat-count { background: rgba(245,158,11,0.18); color: #F59E0B; }

[data-theme="gold"] .gprod-area { background: #080806; }
[data-theme="gold"] .barcode-bar { background: #0B0A07; border-bottom: 1px solid rgba(245,158,11,0.1); }
[data-theme="gold"] .barcode-icon-wrap { background: linear-gradient(135deg, #F59E0B, #D97706); color: #080806; font-weight:800; box-shadow: 0 3px 12px rgba(245,158,11,0.35); }
[data-theme="gold"] .barcode-input { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.28); color: #F59E0B; }
[data-theme="gold"] .barcode-input:focus { background: rgba(245,158,11,0.08); box-shadow: 0 0 16px rgba(245,158,11,0.18); }
[data-theme="gold"] .barcode-input::placeholder { color: #4A3E2A; }
[data-theme="gold"] .prod-search-g { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.1); color: #D4C5A0; }
[data-theme="gold"] .prod-search-g:focus { border-color: #F59E0B; }
[data-theme="gold"] .gst-pill { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.1); color: #8A7A5A; }
[data-theme="gold"] .gst-pill:hover  { border-color: #F59E0B; color: #F59E0B; }
[data-theme="gold"] .gst-pill.active { background: linear-gradient(135deg, #F59E0B, #D97706); border-color:transparent; color: #080806; box-shadow: 0 3px 10px rgba(245,158,11,0.3); }

[data-theme="gold"] .gprod-card { background: rgba(15,14,11,0.85); border: 1px solid rgba(245,158,11,0.1); box-shadow: 0 2px 12px rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
[data-theme="gold"] .gprod-card:hover { background: rgba(20,18,12,0.95); border-color: #F59E0B; box-shadow: 0 0 0 1px rgba(245,158,11,0.3), 0 8px 24px rgba(245,158,11,0.2), 0 0 40px rgba(245,158,11,0.06); transform: translateY(-3px); }
[data-theme="gold"] .gprod-card.in-cart { border-color: #F59E0B; background: rgba(245,158,11,0.07); box-shadow: 0 0 0 1px rgba(245,158,11,0.3), 0 4px 16px rgba(245,158,11,0.15); }
[data-theme="gold"] .gprod-name   { color: #FEFCE8; }
[data-theme="gold"] .gprod-unit   { color: #4A3E2A; }
[data-theme="gold"] .gprod-price  { color: #F59E0B; text-shadow: 0 0 10px rgba(245,158,11,0.4); }
[data-theme="gold"] .gprod-qty-badge { background: linear-gradient(135deg, #F59E0B, #D97706); color: #080806; box-shadow: 0 2px 8px rgba(245,158,11,0.4); }
[data-theme="gold"] .gprod-add-strip { background: linear-gradient(135deg, #F59E0B, #D97706); color: #080806; font-weight: 800; }

[data-theme="gold"] .gbill-panel { background: #0B0A07; border-left: 1px solid rgba(245,158,11,0.12); }
[data-theme="gold"] .gbill-header { background: linear-gradient(135deg, #D97706, #B45309); box-shadow: 0 4px 20px rgba(245,158,11,0.3); }
[data-theme="gold"] .gbill-ledger-head { background: #080806; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .glh-cell { color: #8A7A5A; }
[data-theme="gold"] .gbill-row { border-color: rgba(245,158,11,0.07); }
[data-theme="gold"] .gbill-row:hover { background: rgba(245,158,11,0.04); }
[data-theme="gold"] .gbi-name { color: #FEFCE8; }
[data-theme="gold"] .gbi-unit { color: #4A3E2A; }
[data-theme="gold"] .gbi-amt  { color: #F59E0B; }
[data-theme="gold"] .gbi-qty-btn { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.18); color: #F59E0B; }
[data-theme="gold"] .gbi-qty-btn:hover { background: #F59E0B; color: #080806; }
[data-theme="gold"] .gbill-totals { background: #080806; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .gtot-row { color: #8A7A5A; }
[data-theme="gold"] .gtot-row .gtv { color: #D4C5A0; }
[data-theme="gold"] .gtot-grand { border-color: rgba(245,158,11,0.2); }
[data-theme="gold"] .gtgr-lbl { color: #FEFCE8; }
[data-theme="gold"] .gtgr-val { color: #F59E0B; text-shadow: 0 0 16px rgba(245,158,11,0.6); font-size: 1.3rem; }
[data-theme="gold"] .gbill-cash { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .gcash-lbl { color: #F59E0B; }
[data-theme="gold"] .gcash-in  { border-color: rgba(245,158,11,0.28); background: rgba(245,158,11,0.05); color: #F59E0B; }
[data-theme="gold"] .gpm-btn   { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.1); color: #8A7A5A; }
[data-theme="gold"] .gpm-btn:hover { border-color: #F59E0B; color: #F59E0B; }
[data-theme="gold"] .gpm-btn.active { background: rgba(245,158,11,0.15); border-color: #F59E0B; color: #F59E0B; box-shadow: 0 0 10px rgba(245,158,11,0.15); }
[data-theme="gold"] .gbill-actions { background: #0B0A07; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .gact-hold { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.15); color: #D4C5A0; }
[data-theme="gold"] .gact-print { background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.3); color: #FB923C; }
[data-theme="gold"] .gact-print:hover { background: #FB923C; color: #fff; box-shadow: 0 4px 14px rgba(251,146,60,0.4); }
[data-theme="gold"] .gact-settle { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 4px 20px rgba(245,158,11,0.5), 0 0 40px rgba(245,158,11,0.12); color: #080806; border: none; }
[data-theme="gold"] .gact-settle:hover { box-shadow: 0 6px 24px rgba(245,158,11,0.7); transform: translateY(-1px); }
[data-theme="gold"] .modal-box { background: #0F0E0B; border: 1px solid rgba(245,158,11,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(245,158,11,0.08); }
[data-theme="gold"] .modal-head { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.12); }
[data-theme="gold"] .modal-head-title { color: #FEFCE8; }
[data-theme="gold"] .modal-foot { background: rgba(0,0,0,0.3); border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .modal-overlay { background: rgba(4,3,2,0.88); backdrop-filter: blur(8px); }
[data-theme="gold"] .f-input, [data-theme="gold"] .f-select { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.14); color: #FEFCE8; }
[data-theme="gold"] .f-input:focus { border-color: #F59E0B; box-shadow: 0 0 12px rgba(245,158,11,0.15); }
[data-theme="gold"] .form-label { color: #8A7A5A; }
[data-theme="gold"] .wk-btn { background: rgba(255,255,255,0.04); border-color: rgba(245,158,11,0.14); color: #D4C5A0; }
[data-theme="gold"] .wk-btn:hover { background: #F59E0B; border-color: #F59E0B; color: #080806; box-shadow: 0 0 14px rgba(245,158,11,0.4); }
[data-theme="gold"] .wk-btn.special { background: rgba(245,158,11,0.08); color: #F59E0B; }
[data-theme="gold"] .wk-btn.del-key { background: rgba(248,113,113,0.1); color: #F87171; }
[data-theme="gold"] .wk-btn.add-key { background: linear-gradient(135deg, #F59E0B, #D97706); color: #080806; box-shadow: 0 4px 14px rgba(245,158,11,0.4); }
[data-theme="gold"] .weight-display { background: linear-gradient(135deg, #0F0E0B, #1A1308); border: 1px solid rgba(245,158,11,0.18); }
[data-theme="gold"] .wd-unit  { color: #8A7A5A; }
[data-theme="gold"] .wd-total { color: #F59E0B; }
[data-theme="gold"] .inv-toolbar, [data-theme="gold"] .inv-filters, [data-theme="gold"] .rpt-bar { background: #0B0A07; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .inv-stats { background: #080806; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .ist-card { background: rgba(15,14,11,0.9); border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .inv-search, [data-theme="gold"] .inv-filter-sel { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.12); color: #D4C5A0; }
[data-theme="gold"] .inv-search:focus { border-color: #F59E0B; }
[data-theme="gold"] .exp-filter-pill { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.1); color: #8A7A5A; }
[data-theme="gold"] .exp-filter-pill:hover  { border-color: #F59E0B; color: #F59E0B; }
[data-theme="gold"] .exp-filter-pill.active { background: linear-gradient(135deg, #F59E0B, #D97706); border-color:transparent; color: #080806; }
[data-theme="gold"] .inv-table, [data-theme="gold"] .cc, [data-theme="gold"] .kpi-c { background: rgba(15,14,11,0.85); border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .inv-table thead th { background: rgba(8,8,6,0.95); color: #8A7A5A; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .inv-table tbody td { color: #D4C5A0; border-color: rgba(245,158,11,0.06); }
[data-theme="gold"] .inv-table tbody tr:hover td { background: rgba(245,158,11,0.03); }
[data-theme="gold"] .cc-head { border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .cc-title { color: #FEFCE8; }
[data-theme="gold"] .cc-sub   { color: #8A7A5A; }
[data-theme="gold"] .kpi-lbl  { color: #8A7A5A; }
[data-theme="gold"] .rpt-shell, [data-theme="gold"] .inv-table-wrap { background: #080806; }
[data-theme="gold"] .btn-primary { background: linear-gradient(135deg, #F59E0B, #D97706); border:none; box-shadow: 0 4px 14px rgba(245,158,11,0.35); color: #080806; font-weight:800; }
[data-theme="gold"] .btn-secondary { background: rgba(255,255,255,0.04); border-color: rgba(245,158,11,0.18); color: #D4C5A0; }
[data-theme="gold"] .toast-item { background: #0F0E0B; border: 1px solid rgba(245,158,11,0.2); color: #FEFCE8; box-shadow: 0 4px 20px rgba(0,0,0,0.7); }
[data-theme="gold"] .hb-fill  { opacity: 0.85; }
[data-theme="gold"] .gst-report-table th { background: rgba(8,8,6,0.95); color: #8A7A5A; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .gst-report-table td { color: #D4C5A0; border-color: rgba(245,158,11,0.06); }
[data-theme="gold"] .txn-t th { background: rgba(8,8,6,0.95); color: #8A7A5A; border-color: rgba(245,158,11,0.1); }
[data-theme="gold"] .txn-t td { color: #D4C5A0; border-color: rgba(245,158,11,0.06); }
[data-theme="gold"] .txn-t tr:hover td { background: rgba(245,158,11,0.03); }
[data-theme="gold"] .per-btn { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.12); color: #8A7A5A; }
[data-theme="gold"] .per-btn.active { background: linear-gradient(135deg, #F59E0B, #D97706); border-color:transparent; color: #080806; }
[data-theme="gold"] .rpt-date { background: rgba(255,255,255,0.03); border-color: rgba(245,158,11,0.14); color: #D4C5A0; }
[data-theme="gold"] .inv-toolbar-title, [data-theme="gold"] .rpt-bar-title { color: #FEFCE8; }

/* ═══════════════════════════════
   4. OCEAN DEEP 🌊
   Rich deep blue gradients
═══════════════════════════════ */
[data-theme="ocean"] {
  --green:      #38BDF8;
  --green-dk:   #0EA5E9;
  --green-lt:   rgba(56,189,248,0.1);
  --green-dim:  rgba(56,189,248,0.2);
  --green-glow: rgba(56,189,248,0.4);
  --blue:       #818CF8;
  --blue-lt:    rgba(129,140,248,0.12);
  --orange:     #34D399;
  --orange-lt:  rgba(52,211,153,0.12);
  --orange-dim: rgba(52,211,153,0.2);
  --red:        #F87171;
  --red-lt:     rgba(248,113,113,0.12);
  --red-dim:    rgba(248,113,113,0.2);
  --gold:       #FCD34D;
  --gold-lt:    rgba(252,211,77,0.1);
  --purple:     #C084FC;
  --bg:         #06091A;
  --bg-dk:      #0C1235;
  --t1:         #E0F0FF;
  --t2:         #90B4D8;
  --t3:         #4A6890;
  --t4:         #2A3A55;
  --border:     rgba(56,189,248,0.1);
  --border-md:  rgba(56,189,248,0.18);
  --border-dk:  rgba(56,189,248,0.3);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.6);
  --shadow:     0 8px 28px rgba(0,0,0,0.7);
  color-scheme: dark;
}
[data-theme="ocean"] body {
  background: linear-gradient(180deg, #090F28 0%, #06091A 40%, #04080F 100%);
  min-height: 100vh;
}
[data-theme="ocean"] .page-header { background: linear-gradient(135deg, #0C1235 0%, #0A1830 100%); border-bottom: 1px solid rgba(56,189,248,0.15); box-shadow: 0 2px 20px rgba(0,0,0,0.7); }
[data-theme="ocean"] .ph-logo-box { background: linear-gradient(135deg, rgba(56,189,248,0.3), rgba(129,140,248,0.2)); border: 1px solid rgba(56,189,248,0.35); box-shadow: 0 0 14px rgba(56,189,248,0.25); }
[data-theme="ocean"] .ph-logo-text { color: #E0F0FF; }
[data-theme="ocean"] .ph-logo-sub  { color: #4A6890; }
[data-theme="ocean"] .ph-value     { color: #38BDF8; }
[data-theme="ocean"] .ph-label     { color: #4A6890; }
[data-theme="ocean"] .ph-sep       { background: rgba(56,189,248,0.12); }
[data-theme="ocean"] .ph-btn { background: rgba(12,18,53,0.8); border: 1px solid rgba(56,189,248,0.18); color: #90B4D8; }
[data-theme="ocean"] .ph-btn:hover { border-color: #38BDF8; color: #38BDF8; }
[data-theme="ocean"] .ph-btn.white { background: linear-gradient(135deg, #38BDF8, #818CF8); border:none; color:#fff; font-weight:800; box-shadow: 0 4px 14px rgba(56,189,248,0.35); }
[data-theme="ocean"] .nav-tabs { background: #090F28; border-bottom: 1px solid rgba(56,189,248,0.1); }
[data-theme="ocean"] .nav-tab       { color: #2A3A55; }
[data-theme="ocean"] .nav-tab:hover { background: rgba(56,189,248,0.05); color: #90B4D8; }
[data-theme="ocean"] .nav-tab.active { background: rgba(56,189,248,0.08); border-bottom-color: #38BDF8; color: #38BDF8; }
[data-theme="ocean"] .nav-tabs-right { background: #090F28; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .sync-pill { background: rgba(56,189,248,0.1); color: #38BDF8; border: 1px solid rgba(56,189,248,0.2); }
[data-theme="ocean"] .sync-pulse { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; }
[data-theme="ocean"] .gcat-panel { background: #090F28; border-right: 1px solid rgba(56,189,248,0.1); }
[data-theme="ocean"] .gcat-head  { border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .gcat-item:hover { background: rgba(56,189,248,0.05); }
[data-theme="ocean"] .gcat-item.active { background: linear-gradient(90deg, rgba(56,189,248,0.1), transparent); border-left-color: #38BDF8; }
[data-theme="ocean"] .gcat-name  { color: #90B4D8; }
[data-theme="ocean"] .gcat-item.active .gcat-name { color: #38BDF8; }
[data-theme="ocean"] .gcat-count { background: rgba(56,189,248,0.06); border-color: rgba(56,189,248,0.12); color: #4A6890; }
[data-theme="ocean"] .gcat-item.active .gcat-count { background: rgba(56,189,248,0.18); color: #38BDF8; }
[data-theme="ocean"] .gprod-area { background: #06091A; }
[data-theme="ocean"] .barcode-bar { background: #090F28; border-bottom: 1px solid rgba(56,189,248,0.1); }
[data-theme="ocean"] .barcode-icon-wrap { background: linear-gradient(135deg, #38BDF8, #818CF8); color:#fff; font-weight:800; box-shadow: 0 3px 12px rgba(56,189,248,0.35); }
[data-theme="ocean"] .barcode-input { background: rgba(56,189,248,0.05); border-color: rgba(56,189,248,0.28); color: #38BDF8; }
[data-theme="ocean"] .barcode-input:focus { box-shadow: 0 0 16px rgba(56,189,248,0.18); }
[data-theme="ocean"] .barcode-input::placeholder { color: #2A3A55; }
[data-theme="ocean"] .prod-search-g { background: rgba(255,255,255,0.03); border-color: rgba(56,189,248,0.1); color: #90B4D8; }
[data-theme="ocean"] .prod-search-g:focus { border-color: #38BDF8; }
[data-theme="ocean"] .gst-pill { background: rgba(255,255,255,0.03); border-color: rgba(56,189,248,0.1); color: #4A6890; }
[data-theme="ocean"] .gst-pill.active { background: linear-gradient(135deg, #38BDF8, #818CF8); border-color:transparent; color:#fff; box-shadow: 0 3px 10px rgba(56,189,248,0.3); }
[data-theme="ocean"] .gprod-card { background: rgba(12,18,53,0.7); border: 1px solid rgba(56,189,248,0.1); backdrop-filter:blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,0.5); }
[data-theme="ocean"] .gprod-card:hover { border-color: #38BDF8; box-shadow: 0 0 0 1px rgba(56,189,248,0.3), 0 8px 24px rgba(56,189,248,0.18); transform: translateY(-3px); }
[data-theme="ocean"] .gprod-card.in-cart { border-color: #38BDF8; background: rgba(56,189,248,0.08); }
[data-theme="ocean"] .gprod-name  { color: #E0F0FF; }
[data-theme="ocean"] .gprod-unit  { color: #2A3A55; }
[data-theme="ocean"] .gprod-price { color: #38BDF8; text-shadow: 0 0 10px rgba(56,189,248,0.4); }
[data-theme="ocean"] .gprod-qty-badge { background: linear-gradient(135deg, #38BDF8, #818CF8); color:#fff; box-shadow: 0 2px 8px rgba(56,189,248,0.4); }
[data-theme="ocean"] .gprod-add-strip { background: linear-gradient(135deg, #38BDF8, #818CF8); color:#fff; font-weight:800; }
[data-theme="ocean"] .gbill-panel { background: #090F28; border-left: 1px solid rgba(56,189,248,0.1); }
[data-theme="ocean"] .gbill-header { background: linear-gradient(135deg, #0EA5E9, #818CF8); box-shadow: 0 4px 20px rgba(56,189,248,0.3); }
[data-theme="ocean"] .gbill-ledger-head { background: #06091A; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .glh-cell { color: #818CF8; }
[data-theme="ocean"] .gbill-row { border-color: rgba(56,189,248,0.07); }
[data-theme="ocean"] .gbill-row:hover { background: rgba(56,189,248,0.04); }
[data-theme="ocean"] .gbi-name { color: #E0F0FF; }
[data-theme="ocean"] .gbi-unit { color: #4A6890; }
[data-theme="ocean"] .gbi-amt  { color: #38BDF8; }
[data-theme="ocean"] .gbi-qty-btn { background: rgba(56,189,248,0.07); border-color: rgba(56,189,248,0.18); color: #38BDF8; }
[data-theme="ocean"] .gbi-qty-btn:hover { background: #38BDF8; color:#fff; }
[data-theme="ocean"] .gbill-totals { background: #06091A; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .gtot-row { color: #4A6890; }
[data-theme="ocean"] .gtot-row .gtv { color: #90B4D8; }
[data-theme="ocean"] .gtot-grand { border-color: rgba(56,189,248,0.2); }
[data-theme="ocean"] .gtgr-lbl { color: #E0F0FF; }
[data-theme="ocean"] .gtgr-val { color: #38BDF8; text-shadow: 0 0 16px rgba(56,189,248,0.6); font-size:1.3rem; }
[data-theme="ocean"] .gbill-cash { background: rgba(56,189,248,0.05); border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .gcash-lbl { color: #38BDF8; }
[data-theme="ocean"] .gcash-in  { border-color: rgba(56,189,248,0.28); background: rgba(56,189,248,0.05); color: #38BDF8; }
[data-theme="ocean"] .gpm-btn   { background: rgba(255,255,255,0.03); border-color: rgba(56,189,248,0.1); color: #4A6890; }
[data-theme="ocean"] .gpm-btn.active { background: rgba(56,189,248,0.14); border-color: #38BDF8; color: #38BDF8; }
[data-theme="ocean"] .gbill-actions { background: #090F28; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .gact-hold { background: rgba(255,255,255,0.03); border-color: rgba(56,189,248,0.14); color: #90B4D8; }
[data-theme="ocean"] .gact-print { background: rgba(129,140,248,0.1); border-color: rgba(129,140,248,0.3); color: #818CF8; }
[data-theme="ocean"] .gact-print:hover { background: #818CF8; color:#fff; }
[data-theme="ocean"] .gact-settle { background: linear-gradient(135deg, #38BDF8, #818CF8); box-shadow: 0 4px 20px rgba(56,189,248,0.45); color:#fff; border:none; font-weight:800; }
[data-theme="ocean"] .gact-settle:hover { box-shadow: 0 6px 24px rgba(56,189,248,0.65); transform:translateY(-1px); }
[data-theme="ocean"] .modal-box { background: #0C1235; border: 1px solid rgba(56,189,248,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
[data-theme="ocean"] .modal-head { background: rgba(56,189,248,0.06); border-color: rgba(56,189,248,0.12); }
[data-theme="ocean"] .modal-head-title { color: #E0F0FF; }
[data-theme="ocean"] .modal-overlay { background: rgba(4,6,20,0.88); backdrop-filter:blur(8px); }
[data-theme="ocean"] .f-input, [data-theme="ocean"] .f-select { background: rgba(255,255,255,0.04); border-color: rgba(56,189,248,0.14); color: #E0F0FF; }
[data-theme="ocean"] .f-input:focus { border-color: #38BDF8; box-shadow: 0 0 12px rgba(56,189,248,0.14); }
[data-theme="ocean"] .form-label { color: #4A6890; }
[data-theme="ocean"] .wk-btn { background: rgba(255,255,255,0.04); border-color: rgba(56,189,248,0.14); color: #90B4D8; }
[data-theme="ocean"] .wk-btn:hover { background: #38BDF8; border-color: #38BDF8; color:#fff; }
[data-theme="ocean"] .wk-btn.special { background: rgba(56,189,248,0.08); color: #38BDF8; }
[data-theme="ocean"] .wk-btn.del-key { background: rgba(248,113,113,0.1); color: #F87171; }
[data-theme="ocean"] .wk-btn.add-key { background: linear-gradient(135deg, #38BDF8, #818CF8); color:#fff; box-shadow: 0 4px 14px rgba(56,189,248,0.4); }
[data-theme="ocean"] .weight-display { background: linear-gradient(135deg, #0C1235, #090F28); border: 1px solid rgba(56,189,248,0.18); }
[data-theme="ocean"] .wd-unit  { color: #4A6890; }
[data-theme="ocean"] .wd-total { color: #38BDF8; }
[data-theme="ocean"] .btn-primary { background: linear-gradient(135deg, #38BDF8, #818CF8); border:none; box-shadow: 0 4px 14px rgba(56,189,248,0.3); color:#fff; font-weight:800; }
[data-theme="ocean"] .btn-secondary { background: rgba(255,255,255,0.04); border-color: rgba(56,189,248,0.18); color: #90B4D8; }
[data-theme="ocean"] .inv-toolbar, [data-theme="ocean"] .inv-filters, [data-theme="ocean"] .rpt-bar { background: #090F28; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .inv-stats { background: #06091A; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .ist-card { background: rgba(12,18,53,0.8); border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .inv-search, [data-theme="ocean"] .inv-filter-sel { background: rgba(255,255,255,0.03); border-color: rgba(56,189,248,0.12); color: #90B4D8; }
[data-theme="ocean"] .exp-filter-pill.active { background: linear-gradient(135deg, #38BDF8, #818CF8); border-color:transparent; color:#fff; }
[data-theme="ocean"] .inv-table, [data-theme="ocean"] .cc, [data-theme="ocean"] .kpi-c { background: rgba(12,18,53,0.8); border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .inv-table thead th { background: rgba(6,9,26,0.95); color: #818CF8; border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .inv-table tbody td { color: #90B4D8; border-color: rgba(56,189,248,0.06); }
[data-theme="ocean"] .cc-head { border-color: rgba(56,189,248,0.1); }
[data-theme="ocean"] .cc-title { color: #E0F0FF; }
[data-theme="ocean"] .cc-sub   { color: #4A6890; }
[data-theme="ocean"] .kpi-lbl  { color: #4A6890; }
[data-theme="ocean"] .rpt-shell, [data-theme="ocean"] .inv-table-wrap { background: #06091A; }
[data-theme="ocean"] .toast-item { background: #0C1235; border: 1px solid rgba(56,189,248,0.2); color: #E0F0FF; }
[data-theme="ocean"] .gst-report-table th { background: rgba(6,9,26,0.95); color: #818CF8; }
[data-theme="ocean"] .gst-report-table td { color: #90B4D8; }
[data-theme="ocean"] .txn-t th  { background: rgba(6,9,26,0.95); color: #818CF8; }
[data-theme="ocean"] .txn-t td  { color: #90B4D8; }
[data-theme="ocean"] .per-btn.active { background: linear-gradient(135deg, #38BDF8, #818CF8); border-color:transparent; color:#fff; }
[data-theme="ocean"] .rpt-date { background: rgba(255,255,255,0.03); border-color: rgba(56,189,248,0.14); color: #90B4D8; }
[data-theme="ocean"] .inv-toolbar-title, [data-theme="ocean"] .rpt-bar-title { color: #E0F0FF; }

/* ═══════════════════════════════
   5. ROSE DARK 🌸
   Dark charcoal + pink/purple gradient
═══════════════════════════════ */
[data-theme="rose"] {
  --green:      #F472B6;
  --green-dk:   #EC4899;
  --green-lt:   rgba(244,114,182,0.1);
  --green-dim:  rgba(244,114,182,0.2);
  --green-glow: rgba(244,114,182,0.4);
  --blue:       #A78BFA;
  --blue-lt:    rgba(167,139,250,0.12);
  --orange:     #FB923C;
  --orange-lt:  rgba(251,146,60,0.12);
  --orange-dim: rgba(251,146,60,0.2);
  --red:        #F87171;
  --red-lt:     rgba(248,113,113,0.12);
  --red-dim:    rgba(248,113,113,0.2);
  --gold:       #FDE68A;
  --gold-lt:    rgba(253,230,138,0.1);
  --purple:     #C084FC;
  --bg:         #0D0910;
  --bg-dk:      #160C1E;
  --t1:         #FAF0FF;
  --t2:         #C8A8D8;
  --t3:         #7A5A8A;
  --t4:         #3A2A4A;
  --border:     rgba(244,114,182,0.1);
  --border-md:  rgba(244,114,182,0.18);
  --border-dk:  rgba(244,114,182,0.3);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.6);
  --shadow:     0 8px 28px rgba(0,0,0,0.7);
  color-scheme: dark;
}
[data-theme="rose"] body { background: radial-gradient(ellipse at 70% 10%, rgba(180,0,100,0.2) 0%, transparent 50%), radial-gradient(ellipse at 20% 90%, rgba(100,0,150,0.15) 0%, transparent 50%), #0D0910; min-height:100vh; }
[data-theme="rose"] .page-header { background: linear-gradient(135deg, #160C1E 0%, #1A0A18 100%); border-bottom: 1px solid rgba(244,114,182,0.15); box-shadow: 0 2px 20px rgba(0,0,0,0.7); }
[data-theme="rose"] .ph-logo-box { background: linear-gradient(135deg, rgba(244,114,182,0.3), rgba(167,139,250,0.2)); border: 1px solid rgba(244,114,182,0.35); box-shadow: 0 0 14px rgba(244,114,182,0.25); }
[data-theme="rose"] .ph-logo-text { color: #FAF0FF; }
[data-theme="rose"] .ph-logo-sub  { color: #7A5A8A; }
[data-theme="rose"] .ph-value     { color: #F472B6; }
[data-theme="rose"] .ph-label     { color: #7A5A8A; }
[data-theme="rose"] .ph-sep       { background: rgba(244,114,182,0.12); }
[data-theme="rose"] .ph-btn { background: rgba(22,12,30,0.8); border: 1px solid rgba(244,114,182,0.18); color: #C8A8D8; }
[data-theme="rose"] .ph-btn:hover { border-color: #F472B6; color: #F472B6; }
[data-theme="rose"] .ph-btn.white { background: linear-gradient(135deg, #F472B6, #A78BFA); border:none; color:#fff; font-weight:800; box-shadow: 0 4px 14px rgba(244,114,182,0.4); }
[data-theme="rose"] .nav-tabs { background: #110A18; border-bottom: 1px solid rgba(244,114,182,0.1); }
[data-theme="rose"] .nav-tab       { color: #3A2A4A; }
[data-theme="rose"] .nav-tab:hover { background: rgba(244,114,182,0.05); color: #C8A8D8; }
[data-theme="rose"] .nav-tab.active { background: rgba(244,114,182,0.08); border-bottom-color: #F472B6; color: #F472B6; }
[data-theme="rose"] .nav-tabs-right { background: #110A18; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .sync-pill { background: rgba(244,114,182,0.1); color: #F472B6; border: 1px solid rgba(244,114,182,0.2); }
[data-theme="rose"] .sync-pulse { background: #F472B6; box-shadow: 0 0 6px #F472B6; }
[data-theme="rose"] .gcat-panel { background: #110A18; border-right: 1px solid rgba(244,114,182,0.1); }
[data-theme="rose"] .gcat-head  { border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .gcat-item:hover { background: rgba(244,114,182,0.05); }
[data-theme="rose"] .gcat-item.active { background: linear-gradient(90deg, rgba(244,114,182,0.1), transparent); border-left-color: #F472B6; }
[data-theme="rose"] .gcat-name  { color: #C8A8D8; }
[data-theme="rose"] .gcat-item.active .gcat-name { color: #F472B6; }
[data-theme="rose"] .gcat-count { background: rgba(244,114,182,0.06); border-color: rgba(244,114,182,0.12); color: #7A5A8A; }
[data-theme="rose"] .gcat-item.active .gcat-count { background: rgba(244,114,182,0.18); color: #F472B6; }
[data-theme="rose"] .gprod-area { background: #0D0910; }
[data-theme="rose"] .barcode-bar { background: #110A18; border-bottom: 1px solid rgba(244,114,182,0.1); }
[data-theme="rose"] .barcode-icon-wrap { background: linear-gradient(135deg, #F472B6, #A78BFA); color:#fff; font-weight:800; box-shadow: 0 3px 12px rgba(244,114,182,0.35); }
[data-theme="rose"] .barcode-input { background: rgba(244,114,182,0.05); border-color: rgba(244,114,182,0.28); color: #F472B6; }
[data-theme="rose"] .barcode-input:focus { box-shadow: 0 0 16px rgba(244,114,182,0.18); }
[data-theme="rose"] .barcode-input::placeholder { color: #3A2A4A; }
[data-theme="rose"] .prod-search-g { background: rgba(255,255,255,0.03); border-color: rgba(244,114,182,0.1); color: #C8A8D8; }
[data-theme="rose"] .prod-search-g:focus { border-color: #F472B6; }
[data-theme="rose"] .gst-pill { background: rgba(255,255,255,0.03); border-color: rgba(244,114,182,0.1); color: #7A5A8A; }
[data-theme="rose"] .gst-pill.active { background: linear-gradient(135deg, #F472B6, #A78BFA); border-color:transparent; color:#fff; box-shadow: 0 3px 10px rgba(244,114,182,0.3); }
[data-theme="rose"] .gprod-card { background: rgba(22,12,30,0.7); border: 1px solid rgba(244,114,182,0.1); backdrop-filter:blur(8px); }
[data-theme="rose"] .gprod-card:hover { border-color: #F472B6; box-shadow: 0 0 0 1px rgba(244,114,182,0.3), 0 8px 24px rgba(244,114,182,0.18); transform:translateY(-3px); }
[data-theme="rose"] .gprod-card.in-cart { border-color: #F472B6; background: rgba(244,114,182,0.08); }
[data-theme="rose"] .gprod-name  { color: #FAF0FF; }
[data-theme="rose"] .gprod-unit  { color: #3A2A4A; }
[data-theme="rose"] .gprod-price { color: #F472B6; text-shadow: 0 0 10px rgba(244,114,182,0.4); }
[data-theme="rose"] .gprod-qty-badge { background: linear-gradient(135deg, #F472B6, #A78BFA); color:#fff; }
[data-theme="rose"] .gprod-add-strip { background: linear-gradient(135deg, #F472B6, #A78BFA); color:#fff; font-weight:800; }
[data-theme="rose"] .gbill-panel { background: #110A18; border-left: 1px solid rgba(244,114,182,0.1); }
[data-theme="rose"] .gbill-header { background: linear-gradient(135deg, #EC4899, #A78BFA); box-shadow: 0 4px 20px rgba(244,114,182,0.3); }
[data-theme="rose"] .gbill-ledger-head { background: #0D0910; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .glh-cell { color: #A78BFA; }
[data-theme="rose"] .gbill-row { border-color: rgba(244,114,182,0.07); }
[data-theme="rose"] .gbill-row:hover { background: rgba(244,114,182,0.04); }
[data-theme="rose"] .gbi-name { color: #FAF0FF; }
[data-theme="rose"] .gbi-unit { color: #7A5A8A; }
[data-theme="rose"] .gbi-amt  { color: #F472B6; }
[data-theme="rose"] .gbi-qty-btn { background: rgba(244,114,182,0.08); border-color: rgba(244,114,182,0.2); color: #F472B6; }
[data-theme="rose"] .gbi-qty-btn:hover { background: #F472B6; color:#fff; }
[data-theme="rose"] .gbill-totals { background: #0D0910; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .gtot-row { color: #7A5A8A; }
[data-theme="rose"] .gtot-row .gtv { color: #C8A8D8; }
[data-theme="rose"] .gtot-grand { border-color: rgba(244,114,182,0.2); }
[data-theme="rose"] .gtgr-lbl { color: #FAF0FF; }
[data-theme="rose"] .gtgr-val { color: #F472B6; text-shadow: 0 0 16px rgba(244,114,182,0.6); font-size:1.3rem; }
[data-theme="rose"] .gbill-cash { background: rgba(244,114,182,0.05); border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .gcash-lbl { color: #F472B6; }
[data-theme="rose"] .gcash-in  { border-color: rgba(244,114,182,0.28); background: rgba(244,114,182,0.05); color: #F472B6; }
[data-theme="rose"] .gpm-btn   { background: rgba(255,255,255,0.03); border-color: rgba(244,114,182,0.1); color: #7A5A8A; }
[data-theme="rose"] .gpm-btn.active { background: rgba(244,114,182,0.14); border-color: #F472B6; color: #F472B6; }
[data-theme="rose"] .gbill-actions { background: #110A18; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .gact-hold { background: rgba(255,255,255,0.03); border-color: rgba(244,114,182,0.14); color: #C8A8D8; }
[data-theme="rose"] .gact-print { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.3); color: #A78BFA; }
[data-theme="rose"] .gact-print:hover { background: #A78BFA; color:#fff; }
[data-theme="rose"] .gact-settle { background: linear-gradient(135deg, #F472B6, #A78BFA); box-shadow: 0 4px 20px rgba(244,114,182,0.45); color:#fff; border:none; font-weight:800; }
[data-theme="rose"] .gact-settle:hover { box-shadow: 0 6px 24px rgba(244,114,182,0.65); transform:translateY(-1px); }
[data-theme="rose"] .modal-box { background: #160C1E; border: 1px solid rgba(244,114,182,0.2); box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
[data-theme="rose"] .modal-head { background: rgba(244,114,182,0.06); border-color: rgba(244,114,182,0.12); }
[data-theme="rose"] .modal-head-title { color: #FAF0FF; }
[data-theme="rose"] .modal-overlay { background: rgba(6,4,8,0.88); backdrop-filter:blur(8px); }
[data-theme="rose"] .f-input, [data-theme="rose"] .f-select { background: rgba(255,255,255,0.04); border-color: rgba(244,114,182,0.14); color: #FAF0FF; }
[data-theme="rose"] .f-input:focus { border-color: #F472B6; box-shadow: 0 0 12px rgba(244,114,182,0.15); }
[data-theme="rose"] .form-label { color: #7A5A8A; }
[data-theme="rose"] .wk-btn { background: rgba(255,255,255,0.04); border-color: rgba(244,114,182,0.14); color: #C8A8D8; }
[data-theme="rose"] .wk-btn:hover { background: #F472B6; border-color: #F472B6; color:#fff; }
[data-theme="rose"] .wk-btn.special { background: rgba(244,114,182,0.08); color: #F472B6; }
[data-theme="rose"] .wk-btn.del-key { background: rgba(248,113,113,0.1); color: #F87171; }
[data-theme="rose"] .wk-btn.add-key { background: linear-gradient(135deg, #F472B6, #A78BFA); color:#fff; box-shadow: 0 4px 14px rgba(244,114,182,0.4); }
[data-theme="rose"] .weight-display { background: linear-gradient(135deg, #160C1E, #110A18); border: 1px solid rgba(244,114,182,0.18); }
[data-theme="rose"] .wd-unit  { color: #7A5A8A; }
[data-theme="rose"] .wd-total { color: #F472B6; }
[data-theme="rose"] .btn-primary { background: linear-gradient(135deg, #F472B6, #A78BFA); border:none; color:#fff; font-weight:800; box-shadow: 0 4px 14px rgba(244,114,182,0.35); }
[data-theme="rose"] .btn-secondary { background: rgba(255,255,255,0.04); border-color: rgba(244,114,182,0.18); color: #C8A8D8; }
[data-theme="rose"] .inv-toolbar, [data-theme="rose"] .inv-filters, [data-theme="rose"] .rpt-bar { background: #110A18; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .inv-stats { background: #0D0910; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .ist-card { background: rgba(22,12,30,0.85); border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .inv-search, [data-theme="rose"] .inv-filter-sel { background: rgba(255,255,255,0.03); border-color: rgba(244,114,182,0.12); color: #C8A8D8; }
[data-theme="rose"] .exp-filter-pill.active { background: linear-gradient(135deg, #F472B6, #A78BFA); border-color:transparent; color:#fff; }
[data-theme="rose"] .inv-table, [data-theme="rose"] .cc, [data-theme="rose"] .kpi-c { background: rgba(22,12,30,0.8); border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .inv-table thead th { background: rgba(13,9,16,0.95); color: #A78BFA; border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .inv-table tbody td { color: #C8A8D8; border-color: rgba(244,114,182,0.06); }
[data-theme="rose"] .cc-head { border-color: rgba(244,114,182,0.1); }
[data-theme="rose"] .cc-title { color: #FAF0FF; }
[data-theme="rose"] .cc-sub   { color: #7A5A8A; }
[data-theme="rose"] .kpi-lbl  { color: #7A5A8A; }
[data-theme="rose"] .rpt-shell, [data-theme="rose"] .inv-table-wrap { background: #0D0910; }
[data-theme="rose"] .toast-item { background: #160C1E; border: 1px solid rgba(244,114,182,0.2); color: #FAF0FF; }
[data-theme="rose"] .gst-report-table th { background: rgba(13,9,16,0.95); color: #A78BFA; }
[data-theme="rose"] .gst-report-table td { color: #C8A8D8; }
[data-theme="rose"] .txn-t th  { background: rgba(13,9,16,0.95); color: #A78BFA; }
[data-theme="rose"] .txn-t td  { color: #C8A8D8; }
[data-theme="rose"] .per-btn.active { background: linear-gradient(135deg, #F472B6, #A78BFA); border-color:transparent; color:#fff; }
[data-theme="rose"] .rpt-date { background: rgba(255,255,255,0.03); border-color: rgba(244,114,182,0.14); color: #C8A8D8; }
[data-theme="rose"] .inv-toolbar-title, [data-theme="rose"] .rpt-bar-title { color: #FAF0FF; }

/* ═══════════════════════════════
   THEME SWITCHER UI
═══════════════════════════════ */
.theme-fab { position:fixed; bottom:22px; right:22px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.theme-fab-btn {
  width:48px; height:48px; border-radius:99px;
  background: linear-gradient(135deg, var(--green), var(--blue,#3D8EFF));
  border:none; cursor:pointer;
  box-shadow: 0 4px 18px var(--green-glow,rgba(0,166,81,0.4)), 0 2px 8px rgba(0,0,0,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; transition:all 0.25s ease;
}
.theme-fab-btn:hover { transform:scale(1.12) rotate(15deg); box-shadow: 0 6px 24px var(--green-glow,rgba(0,166,81,0.5)); }

.theme-panel {
  background:#fff; border-radius:16px; border:1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
  padding:16px; width:220px;
  display:none; flex-direction:column; gap:5px;
  animation:themeUp 0.22s ease;
}
@keyframes themeUp { from{opacity:0;transform:translateY(12px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }
.theme-panel.open { display:flex; }

[data-theme="neon"]  .theme-panel, [data-theme="gold"]  .theme-panel,
[data-theme="ocean"] .theme-panel, [data-theme="rose"]  .theme-panel { background: var(--bg-dk); border-color: var(--border-md); }

.theme-panel-title { font-size:0.63rem; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:5px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.theme-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:all 0.15s; border:1.5px solid transparent; }
.theme-opt:hover { background:var(--bg); }
.theme-opt.active { border-color:var(--green); background:var(--green-lt); }
.theme-swatch-wrap { position:relative; flex-shrink:0; }
.theme-swatch { width:24px; height:24px; border-radius:99px; border:2px solid rgba(255,255,255,0.15); flex-shrink:0; }
.theme-swatch-2 { position:absolute; width:13px; height:13px; border-radius:99px; border:2px solid rgba(0,0,0,0.2); right:-3px; bottom:-3px; }
.theme-name { font-size:0.72rem; font-weight:700; color:var(--t1); flex:1; }
.theme-sub  { font-size:0.6rem; color:var(--t3); }
.theme-check { margin-left:auto; font-size:0.75rem; color:var(--green); }