/*
  Shemify Shell Override V2 — Master Fix
  ========================================
  Targets ACTUAL DOM classes confirmed via browser inspection.
  Fixes: header, sidebar, settings, team, reports, all inner pages.
  Loads LAST via index.html. Uses !important to override everything.

  ╔══════════════════════════════════════════════════════════════════╗
  ║  DARK MODE PANEL RULE — NEVER VIOLATE                            ║
  ╠══════════════════════════════════════════════════════════════════╣
  ║  All dark mode panels MUST match .dash-card exactly:             ║
  ║    background: linear-gradient(180deg,                           ║
  ║      rgba(255,255,255,.035) 0%, rgba(255,255,255,.018) 100%);    ║
  ║    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),            ║
  ║      0 4px 20px rgba(0,0,0,.25), 0 12px 48px rgba(0,0,0,.18);   ║
  ║                                                                  ║
  ║  NEVER use solid colors like var(--raised) for panels —          ║
  ║  #14141A is LIGHTER than void + transparent overlay.             ║
  ║                                                                  ║
  ║  Page titles: plain bold 20px heading, NOT pill badges.          ║
  ╚══════════════════════════════════════════════════════════════════╝
*/

/* ═══════════════════════════════════════════
   HEADER — Fix right-side overflow + profile
   ═══════════════════════════════════════════ */

/* Profile toggle — prevent text overflow */
.nui-profile-toggle,
.nui-profile-wrap .nui-profile-toggle {
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 0 10px !important;
  height: 36px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
}

/* Profile avatar text */
.nui-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: var(--gold-glow) !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
}

/* Header actions — proper spacing, no overflow */
.nui-app-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
/* Ensure header allows dropdown overflow */
.nui-app-header,
.app-header-right {
  overflow: visible !important;
}

/* Mode switch — DELETED in singleview3. See shell-override.css. */

/* LIVE indicator styling */
.nui-live-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  background: rgba(74,222,128,.1) !important;
  color: var(--green) !important;
  white-space: nowrap !important;
}

/* Quick action button */
#nui-quick-action {
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  border: none !important;
  white-space: nowrap !important;
  min-height: auto !important;
}
#nui-quick-action:hover {
  background: var(--gold-glow) !important;
  color: var(--gold) !important;
}

/* Notification bell */
#nui-notifications-wrap button,
#nui-notifications-wrap .icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  color: var(--ink-3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-height: auto !important;
}
#nui-notifications-wrap button:hover { background: rgba(255,255,255,.08) !important; color: var(--ink) !important; }
#nui-notifications-wrap svg { width: 17px !important; height: 17px !important; }

/* Theme toggle */
#theme-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  color: var(--ink-3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-height: auto !important;
  cursor: pointer !important;
}
#theme-toggle:hover { background: rgba(255,255,255,.08) !important; color: var(--ink) !important; }
#theme-toggle svg { width: 17px !important; height: 17px !important; }

/* Sidebar toggle in header */
.nui-sidebar-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  color: var(--ink-3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  min-height: auto !important;
}
.nui-sidebar-toggle:hover { background: rgba(255,255,255,.08) !important; color: var(--ink) !important; }
.nui-sidebar-toggle svg { width: 18px !important; height: 18px !important; }

/* Hide brand duplicate in header — it's in the sidebar already */
.nui-app-header .brand { display: none !important; }
.nui-app-header .tagline { display: none !important; }

/* ═══════════════════════════════════════════
   SIDEBAR — Plan chip, workspace pill, location
   ═══════════════════════════════════════════ */

/* Plan chip — prevent truncation */
.plan-chip,
#plan-chip {
  font-size: 9px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Workspace pill */
.nui-workspace-pill,
#nui-sidebar-workspace-pill {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  color: var(--ink-2) !important;
  white-space: nowrap !important;
}

/* Status row layout */
.nui-sidebar-status-row {
  display: flex !important;
  gap: 6px !important;
  padding: 0 18px 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Location section */
.location-switcher {
  padding: 8px 14px 14px !important;
}
.location-switcher-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}
.location-switcher-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--ink-5) !important;
}
.location-switcher .btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
}
.location-switcher-select {
  width: 100% !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}
.location-switcher-select:focus {
  box-shadow: 0 0 0 2px var(--gold-glow-ring) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════
   SETTINGS TABS — Style the tab navigation
   ═══════════════════════════════════════════ */

/* Settings page tab bar — these are <a> or <button> links at the top */
.content-placeholder a[href="#"],
.page a[href="#"],
#dashboard-placeholder a[href="#"] {
  /* Don't style ALL hash links, too broad */
}

/* Settings-specific tab styling */
[id*="settings"] .btn,
.page .btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  border: none !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.page .btn:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--ink) !important;
}
.page .btn-primary,
.page .btn.btn-primary {
  background: var(--gold) !important;
  color: var(--void) !important;
}
.page .btn-primary:hover {
  background: var(--gold-bright) !important;
  box-shadow: 0 4px 16px rgba(200,160,76,.2) !important;
}
.page .btn-danger {
  background: var(--red-glow) !important;
  color: var(--red) !important;
}

/* File input / upload styling */
input[type="file"] {
  padding: 8px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px dashed rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  color: var(--ink-2) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  width: 100% !important;
}
input[type="file"]:hover {
  border-color: var(--gold) !important;
  background: var(--gold-glow) !important;
}
html.light input[type="file"],
html[data-theme="light"] input[type="file"] {
  background: rgba(0,0,0,.03) !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* ═══════════════════════════════════════════
   TEAM PAGE — Fix stats, tabs, cards, filters
   ═══════════════════════════════════════════ */

/* Team page content — glass panels */
.page .card,
#dashboard-placeholder .card {
  background: var(--raised) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.2) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
html.light .page .card,
html[data-theme="light"] .page .card {
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04) !important;
}

/* Tab-like buttons in a row */
.page [role="tablist"],
.page .btn-group {
  display: flex !important;
  gap: 3px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
  width: fit-content !important;
}
.page [role="tab"],
.page .btn-group .btn {
  padding: 7px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  min-height: auto !important;
}
.page [role="tab"].active,
.page [role="tab"][aria-selected="true"],
.page .btn-group .btn.active {
  background: var(--gold) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 8px rgba(200,160,76,.2) !important;
}

/* Select dropdowns everywhere */
select,
.page select {
  padding: 10px 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  min-height: 40px !important;
}
select:focus {
  box-shadow: 0 0 0 2px var(--gold-glow-ring) !important;
  outline: none !important;
}
html.light select,
html[data-theme="light"] select {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Search inputs */
input[type="search"],
input[type="text"][placeholder*="Search"],
input[placeholder*="search"],
input[placeholder*="Search"] {
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  width: 100% !important;
}
input[type="search"]:focus,
input[placeholder*="Search"]:focus,
input[placeholder*="search"]:focus {
  box-shadow: 0 0 0 2px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.15) !important;
  outline: none !important;
}

/* Team employee cards */
.team2-emp-card,
.team-card {
  background: var(--raised) !important;
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  padding: 16px !important;
  transition: all .15s !important;
}
.team2-emp-card:hover,
.team-card:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12), 0 4px 16px rgba(0,0,0,.2) !important;
}

/* Status badges */
.badge, [class*="badge"] {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ═══════════════════════════════════════════
   ALL INNER PAGES — Universal polish
   ═══════════════════════════════════════════ */

/* Page titles */
.page h2, .page h3,
#dashboard-placeholder h2,
#dashboard-placeholder h3 {
  color: var(--ink) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

/* Subtle helper text */
.page .hint,
.page .text-muted,
.page .pos-mini,
.page .settings-mini-note,
.page small {
  font-size: 12px !important;
  color: var(--ink-4) !important;
}

/* Tables everywhere */
.page table,
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.page table th,
table th {
  padding: 12px 16px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-4) !important;
  background: var(--elevated) !important;
  text-align: left !important;
}
.page table td,
table td {
  padding: 12px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
html.light table td,
html[data-theme="light"] table td {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
.page table tbody tr:hover,
table tbody tr:hover {
  background: rgba(255,255,255,.02) !important;
}

/* Labels */
.page label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* All text inputs and textareas */
.page input[type="text"],
.page input[type="email"],
.page input[type="password"],
.page input[type="number"],
.page input[type="tel"],
.page input[type="url"],
.page textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 42px !important;
}
.page input:focus,
.page textarea:focus {
  box-shadow: 0 0 0 2px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.15) !important;
  outline: none !important;
}
.page input::placeholder,
.page textarea::placeholder {
  color: var(--ink-4) !important;
}
html.light .page input[type="text"],
html.light .page input[type="email"],
html.light .page input[type="password"],
html.light .page input[type="number"],
html.light .page textarea,
html[data-theme="light"] .page input,
html[data-theme="light"] .page textarea {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Empty states */
.page .empty-state,
.page [class*="empty"] {
  text-align: center !important;
  padding: 40px 20px !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
}

/* Sections/panels inside pages */
.page > div,
#dashboard-placeholder > div {
  margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════
   LIGHT MODE — Fix light-specific issues
   ═══════════════════════════════════════════ */
/* Mode-switch light override deleted in singleview3 (no switcher exists). */
html.light #nui-quick-action,
html[data-theme="light"] #nui-quick-action {
  background: rgba(0,0,0,.04) !important;
}
html.light .nui-live-indicator,
html[data-theme="light"] .nui-live-indicator {
  background: rgba(13,148,72,.08) !important;
  color: #0D9448 !important;
}
html.light .nui-sidebar-toggle,
html.light #nui-notifications-wrap button,
html.light #theme-toggle,
html[data-theme="light"] .nui-sidebar-toggle,
html[data-theme="light"] #nui-notifications-wrap button,
html[data-theme="light"] #theme-toggle {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-3) !important;
}
html.light .nui-workspace-pill,
html[data-theme="light"] .nui-workspace-pill {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .location-switcher-select,
html[data-theme="light"] .location-switcher-select {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light .page .card,
html[data-theme="light"] .page .card {
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.03) !important;
}
html.light table th,
html[data-theme="light"] table th {
  background: rgba(0,0,0,.02) !important;
}

/* ═══════════════════════════════════════════
   TAB BARS — All page-specific tabs
   ═══════════════════════════════════════════ */
.team2-tabs{display:flex!important;gap:3px!important;padding:3px!important;background:rgba(255,255,255,.03)!important;border-radius:10px!important;margin-bottom:20px!important;width:fit-content!important}
.team2-tab{padding:8px 18px!important;border-radius:8px!important;font-size:12px!important;font-weight:600!important;background:transparent!important;color:var(--ink-3)!important;border:none!important;cursor:pointer!important;font-family:var(--font)!important;transition:all .15s!important;min-height:auto!important}
.team2-tab:hover{color:var(--ink-2)!important;background:rgba(255,255,255,.03)!important}
.team2-tab.active{background:var(--gold)!important;color:var(--void)!important;box-shadow:0 2px 10px rgba(200,160,76,.2)!important}
html.light .team2-tab.active,html[data-theme="light"] .team2-tab.active{color:#fff!important}

.team2-view-toggle{display:flex!important;gap:3px!important;padding:3px!important;background:rgba(255,255,255,.03)!important;border-radius:8px!important;width:fit-content!important}
.team2-view-toggle .btn{padding:6px 14px!important;border-radius:6px!important;font-size:11px!important;background:transparent!important;color:var(--ink-3)!important;border:none!important;min-height:auto!important}
.team2-view-toggle .btn.active{background:rgba(255,255,255,.08)!important;color:var(--ink)!important}

.settings-nav-btn{padding:8px 18px!important;border-radius:8px!important;font-size:12px!important;font-weight:600!important;background:rgba(255,255,255,.03)!important;color:var(--ink-3)!important;border:none!important;cursor:pointer!important;font-family:var(--font)!important;transition:all .15s!important;min-height:auto!important;white-space:nowrap!important}
.settings-nav-btn:hover{color:var(--ink-2)!important;background:rgba(255,255,255,.05)!important}
.settings-nav-btn.active{background:var(--gold)!important;color:var(--void)!important;box-shadow:0 2px 10px rgba(200,160,76,.2)!important}
html.light .settings-nav-btn.active,html[data-theme="light"] .settings-nav-btn.active{color:#fff!important}

.gc-nav{display:flex!important;gap:3px!important;padding:3px!important;background:rgba(255,255,255,.03)!important;border-radius:10px!important;margin-bottom:20px!important;width:fit-content!important}
.gc-tab{padding:8px 18px!important;border-radius:8px!important;font-size:12px!important;font-weight:600!important;background:transparent!important;color:var(--ink-3)!important;border:none!important;cursor:pointer!important;font-family:var(--font)!important;transition:all .15s!important}
.gc-tab:hover{color:var(--ink-2)!important}
.gc-tab.active{background:var(--gold)!important;color:var(--void)!important;box-shadow:0 2px 10px rgba(200,160,76,.2)!important}

.loy-tab{padding:8px 18px!important;border-radius:8px!important;font-size:12px!important;font-weight:600!important;background:rgba(255,255,255,.03)!important;color:var(--ink-3)!important;border:none!important;cursor:pointer!important;font-family:var(--font)!important;transition:all .15s!important}
.loy-tab.active{background:var(--gold)!important;color:var(--void)!important}

.reports-tab{padding:7px 16px!important;border-radius:20px!important;font-size:12px!important;font-weight:600!important;background:rgba(255,255,255,.04)!important;color:var(--ink-3)!important;border:none!important;cursor:pointer!important;font-family:var(--font)!important;transition:all .15s!important;min-height:auto!important}
.reports-tab.active{background:var(--gold)!important;color:var(--void)!important;box-shadow:0 2px 10px rgba(200,160,76,.2)!important}

/* ═══ SIDEBAR COLLAPSE ═══ */
body.nui-sidebar-collapsed .sidebar{width:64px!important;min-width:64px!important;overflow:hidden!important}
body.nui-sidebar-collapsed .sidebar .menu-label span:last-child,
body.nui-sidebar-collapsed .sidebar .nui-sidebar-brand-copy,
body.nui-sidebar-collapsed .sidebar .nui-sidebar-brand-sub,
body.nui-sidebar-collapsed .sidebar .nui-menu-section-title,
body.nui-sidebar-collapsed .sidebar .menu-section-title,
body.nui-sidebar-collapsed .sidebar .nui-sidebar-status-row,
body.nui-sidebar-collapsed .sidebar .location-switcher,
body.nui-sidebar-collapsed .sidebar .sidebar-title,
body.nui-sidebar-collapsed .sidebar .plan-chip,
body.nui-sidebar-collapsed .sidebar .nui-workspace-pill,
body.nui-sidebar-collapsed .sidebar .nui-sidebar-footer-copy,
body.nui-sidebar-collapsed .sidebar .nui-sidebar-utility,
body.nui-sidebar-collapsed .sidebar .menu-badge{display:none!important}
body.nui-sidebar-collapsed .sidebar .menu-button{justify-content:center!important;padding:10px 8px!important}
body.nui-sidebar-collapsed .sidebar .menu-label{justify-content:center!important}
body.nui-sidebar-collapsed .sidebar .nui-sidebar-brand{justify-content:center!important;padding:20px 8px!important}
body.nui-sidebar-collapsed .sidebar .nui-sidebar-footer-card{justify-content:center!important;padding:8px!important}
body.nui-sidebar-collapsed .nui-app-header{left:64px!important}

/* ═══ E2E AUDIT: REPORTS DAILY/MONTHLY/YEARLY DETAIL CARDS ═══
   The renderer in app.js writes .reports-kpis / .reports-kpi / .reports-rows
   but no CSS existed for them — caused the text-dump layout the audit flagged.
   3-up KPI cards on desktop, stack on mobile. Breakdown rows are a 2-col
   key/value grid with comfortable spacing. */
.reports-detail-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;margin-bottom:18px!important;flex-wrap:wrap!important}
.reports-detail-title{font-size:18px!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:-.01em!important}
.reports-detail-sub{font-size:12.5px!important;color:var(--ink-3)!important;margin-top:2px!important}
.reports-detail-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.reports-kpis{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:14px!important;margin-bottom:18px!important}
.reports-kpi{background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;border-radius:12px!important;padding:16px 18px!important;display:flex!important;flex-direction:column!important;gap:6px!important}
html.light .reports-kpi,html[data-theme='light'] .reports-kpi{background:rgba(0,0,0,.025)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)!important}
.reports-kpi .t{font-size:11px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ink-3)!important}
/* Phase A T2B: 24px -> 30px to fill the 597px breathing room the
   sidebar collapse opened up in singleview5. Mobile override below
   stays at 20px to keep the tile from blowing out on phones. */
.reports-kpi .v{font-size:30px!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums!important}
.reports-kpi .s{font-size:11.5px!important;color:var(--ink-2)!important}
.reports-box{background:rgba(255,255,255,.03)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;border-radius:12px!important;padding:16px 18px!important;margin-bottom:14px!important}
html.light .reports-box,html[data-theme='light'] .reports-box{background:rgba(0,0,0,.02)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)!important}
.reports-box-title{font-size:13px!important;font-weight:600!important;color:var(--ink)!important;margin-bottom:12px!important}
.reports-rows{display:grid!important;grid-template-columns:max-content 1fr!important;gap:8px 16px!important;align-items:baseline!important}
.reports-rows .k{font-size:12px!important;color:var(--ink-3)!important;text-transform:uppercase!important;letter-spacing:.04em!important;font-weight:500!important}
.reports-rows .v{font-size:13.5px!important;color:var(--ink)!important;font-variant-numeric:tabular-nums!important}
.reports-mini-note{font-size:11.5px!important;color:var(--ink-3)!important;margin-top:10px!important;padding-top:10px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important}
html.light .reports-mini-note,html[data-theme='light'] .reports-mini-note{box-shadow:inset 0 1px 0 rgba(0,0,0,.05)!important}
.reports-mini-note.text-danger{color:#fca5a5!important}
html.light .reports-mini-note.text-danger,html[data-theme='light'] .reports-mini-note.text-danger{color:#b91c1c!important}
@media (max-width:540px){
  .reports-kpis{grid-template-columns:1fr!important}
  .reports-kpi .v{font-size:20px!important}
  .reports-rows{grid-template-columns:1fr!important;gap:2px 0!important}
  .reports-rows .k{margin-top:8px!important}
}

/* ═══ E2E AUDIT: MARKETING STRUCTURED FORM (Shop > Marketing) ═══ */
.shop-marketing-form{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:12px!important}
.shop-marketing-field{display:flex!important;flex-direction:column!important;gap:4px!important;font-size:12.5px!important;color:var(--ink-2)!important}
.shop-marketing-field--wide{grid-column:1 / -1!important}
.shop-marketing-field--checkbox{flex-direction:row!important;align-items:center!important;gap:8px!important;color:var(--ink)!important;cursor:pointer!important}
.shop-marketing-field-label{font-size:11px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--ink-3)!important}
.shop-marketing-advanced-toggle{margin-top:12px!important}
.shop-marketing-json-editor{width:100%!important;min-height:320px!important;margin-top:10px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:12px!important}
@media (max-width:540px){.shop-marketing-form{grid-template-columns:1fr!important}}

/* ═══ E2E AUDIT: CUSTOMER SEARCH MODAL (loyalty/POS) ═══ */
.loy-cust-search-input{width:100%!important;padding:10px 12px!important;font-size:14px!important;background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;border:0!important;border-radius:8px!important;color:var(--ink)!important;font-family:inherit!important;outline:none!important;transition:box-shadow .2s var(--spring,ease)!important}
.loy-cust-search-input:focus{box-shadow:inset 0 0 0 1.5px var(--gold-glow-ring,rgba(200,160,76,.4))!important}
.loy-cust-search-hint{font-size:11.5px!important;color:var(--ink-3)!important;margin:6px 0 10px!important}
.loy-cust-search-list{display:flex!important;flex-direction:column!important;gap:4px!important;max-height:280px!important;overflow-y:auto!important}
.loy-cust-suggestion{text-align:left!important;background:rgba(255,255,255,.03)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important;border:0!important;border-radius:8px!important;padding:10px 12px!important;cursor:pointer!important;transition:all .15s var(--spring,ease)!important;display:flex!important;flex-direction:column!important;gap:2px!important;color:var(--ink)!important;font-family:inherit!important}
.loy-cust-suggestion:hover{background:var(--gold-glow,rgba(200,160,76,.12))!important;box-shadow:inset 0 0 0 1px var(--gold-glow-ring,rgba(200,160,76,.3))!important}
.loy-cust-suggestion.is-selected{background:var(--gold-glow-strong,rgba(200,160,76,.22))!important;box-shadow:inset 0 0 0 1px var(--gold-glow-ring,rgba(200,160,76,.3))!important}
.loy-cust-suggestion-name{font-size:13px!important;font-weight:600!important;color:var(--ink)!important}
.loy-cust-suggestion-meta{font-size:11.5px!important;color:var(--ink-3)!important}
.loy-cust-search-empty{padding:20px 12px!important;text-align:center!important;font-size:12.5px!important;color:var(--ink-3)!important;background:rgba(255,255,255,.02)!important;border-radius:8px!important}
html.light .loy-cust-suggestion,html[data-theme='light'] .loy-cust-suggestion{background:rgba(0,0,0,.025)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)!important}
html.light .loy-cust-search-input,html[data-theme='light'] .loy-cust-search-input{background:rgba(0,0,0,.025)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)!important}

/* ═══ E2E AUDIT: COLLAPSIBLE SIDEBAR GROUPS ═══ */
.nui-collapsible-title{display:flex!important;align-items:center!important;justify-content:space-between!important;cursor:pointer!important;user-select:none!important;transition:color .15s var(--spring,ease)!important}
.nui-collapsible-title:hover{color:var(--gold)!important}
.nui-collapsible-title:focus-visible{outline:2px solid var(--gold-glow-ring,rgba(200,160,76,.3))!important;outline-offset:2px!important;border-radius:6px!important}
.nui-section-title-text{flex:1!important}
.nui-section-chevron{flex-shrink:0!important;opacity:.6!important;transition:transform .2s var(--spring,ease),opacity .15s ease!important}
.nui-collapsible-title:hover .nui-section-chevron{opacity:1!important}
.nui-collapsible-title.is-collapsed .nui-section-chevron{transform:rotate(-90deg)!important}
.menu-item.nui-section-collapsed-hidden{display:none!important}
body.nui-sidebar-collapsed .sidebar .nui-section-chevron{display:none!important}

/* ═══ GLOBAL POLISH ═══ */
details summary{cursor:pointer!important;font-weight:600!important;color:var(--ink)!important;padding:8px 0!important}
details summary:hover{color:var(--gold)!important}
hr{border:none!important;height:1px!important;background:rgba(255,255,255,.04)!important;margin:16px 0!important}
html.light hr,html[data-theme="light"] hr{background:rgba(0,0,0,.06)!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--gold)!important;width:16px!important;height:16px!important;min-height:auto!important}
input[type="file"]{padding:8px!important;background:rgba(255,255,255,.04)!important;border:1px dashed rgba(255,255,255,.1)!important;border-radius:10px!important;color:var(--ink-2)!important;font-family:var(--font)!important;font-size:12px!important;cursor:pointer!important;width:100%!important;min-height:auto!important}
input[type="file"]:hover{border-color:var(--gold)!important;background:var(--gold-glow)!important}
html.light input[type="file"],html[data-theme="light"] input[type="file"]{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.1)!important}
strong,b{color:var(--ink)!important}
.page a:not(.btn):not(.menu-button):not(.menu-link){color:var(--gold)!important;text-decoration:none!important}
.page a:not(.btn):not(.menu-button):not(.menu-link):hover{text-decoration:underline!important}

/* ═══════════════════════════════════════════
   ISSUE FIXES — Based on user screenshots
   ═══════════════════════════════════════════ */

/* 1. SIDEBAR COLLAPSE — content must expand to fill space */
body.nui-sidebar-collapsed .dashboard-shell {
  grid-template-columns: 64px 1fr !important;
}

/* 2. Hide Enterprise plan chip + business name sub next to logo */
.nui-sidebar-status-row { display: none !important; }
.nui-sidebar-brand-sub { display: none !important; }

/* 3. Hide mobile menu button on desktop (hamburger in header) */
#mobile-nav-toggle-top,
.mobile-nav-toggle-top,
.nui-app-header .icon-btn.mobile-nav-toggle-top {
  display: none !important;
}
@media (max-width: 768px) {
  #mobile-nav-toggle-top,
  .mobile-nav-toggle-top {
    display: flex !important;
  }
}

/* 4. Notification bell — center the icon properly */
#nui-notifications-wrap button,
#nui-notifications-wrap .icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
}
#nui-notifications-wrap svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

/* 5. LIVE indicator — only ONE green dot, not two */
.nui-live-indicator {
  gap: 6px !important;
  padding: 4px 12px !important;
}
.nui-live-indicator::before {
  content: none !important;
}
.nui-live-indicator .nui-live-dot,
.nui-live-indicator span:first-child {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
  box-shadow: 0 0 8px rgba(74,222,128,.5) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* 6. Profile button — show avatar icon, not "Owner" text */
.nui-profile-toggle {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  background: var(--gold-glow) !important;
  color: var(--gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Hide the text, show only avatar initials */
.nui-profile-toggle .nui-profile-name,
.nui-profile-toggle span:not(.nui-avatar) {
  display: none !important;
}
.nui-profile-toggle .nui-avatar {
  display: flex !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* 7. Profile dropdown — short labels, not full sentences */
.nui-dropdown-item {
  font-size: 13px !important;
  padding: 10px 16px !important;
}
/* Hide only verbose descriptions, keep the main label */
.nui-dropdown-item .nui-dropdown-desc {
  display: none !important;
}

/* 8. Search bar — better integration with header design */
.nui-header-search {
  background: rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  min-width: 280px !important;
  max-width: 500px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  transition: all .2s !important;
}
.nui-header-search:hover {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}
.nui-header-search:focus-within {
  box-shadow: 0 0 0 2px var(--gold-glow-ring) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Search results dropdown — apply Tesla glass treatment */
.nui-cmdk-overlay,
.nui-search-modal,
[class*="cmdk"] {
  background: rgba(0,0,0,.6) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.nui-cmdk-panel,
.nui-search-panel,
[class*="cmdk-panel"],
[class*="search-panel"] {
  background: var(--elevated) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  overflow: hidden !important;
}
.nui-cmdk-results,
.nui-search-results,
[class*="cmdk-results"],
[class*="search-results"] {
  background: transparent !important;
}
.nui-cmdk-item,
.nui-search-item,
[class*="cmdk-item"],
[class*="search-item"] {
  padding: 10px 16px !important;
  border-radius: 10px !important;
  margin: 2px 4px !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  transition: all .12s !important;
  cursor: pointer !important;
}
.nui-cmdk-item:hover,
.nui-search-item:hover,
[class*="cmdk-item"]:hover,
[class*="search-item"]:hover,
.nui-cmdk-item.focused,
.nui-search-item.focused {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
}
/* Search input inside the modal */
#nui-global-search-input,
[class*="cmdk"] input,
[class*="search-modal"] input {
  background: transparent !important;
  border: none !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  width: 100% !important;
  min-height: auto !important;
}
#nui-global-search-input::placeholder { color: var(--ink-4) !important; }

/* 9. Location dropdown — style it like the prototype workspace pill */
.location-switcher-select {
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
/* Style the native dropdown options */
.location-switcher-select option {
  background: var(--elevated) !important;
  color: var(--ink) !important;
  padding: 8px !important;
}

/* 10. Sidebar — match prototype's edge glow and glassmorphism */
.sidebar {
  background: var(--glass-sb, rgba(12,12,16,.88)) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  background-image: linear-gradient(180deg, rgba(30,30,40,.65), rgba(10,10,14,.85)), radial-gradient(ellipse 80% 30% at 50% 0%, rgba(200,160,76,.04), transparent) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06), 1px 0 60px rgba(0,0,0,.5) !important;
  border-right: none !important;
}

/* Sidebar logo — breathing glow like prototype */
.nui-sidebar-brand-mark {
  animation: logo-breathe 3s ease-in-out infinite !important;
  box-shadow: 0 4px 20px rgba(200,160,76,.25), 0 0 40px rgba(200,160,76,.08) !important;
}

/* Active sidebar item — stronger glow bar like prototype */
.sidebar .menu-button.active::before {
  box-shadow: 0 0 12px rgba(200,160,76,.6), 0 0 24px rgba(200,160,76,.3), 4px 0 16px rgba(200,160,76,.15) !important;
}

/* Light mode fixes for all new rules */
html.light .nui-header-search,
html[data-theme="light"] .nui-header-search {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .nui-header-search:hover,
html[data-theme="light"] .nui-header-search:hover {
  background: rgba(0,0,0,.06) !important;
}
html.light .location-switcher-select,
html[data-theme="light"] .location-switcher-select {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light .location-switcher-select option,
html[data-theme="light"] .location-switcher-select option {
  background: #fff !important;
  color: var(--ink) !important;
}
html.light .sidebar,
html[data-theme="light"] .sidebar {
  background: rgba(250,250,248,.92) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,250,248,.88)) !important;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.06), 2px 0 30px rgba(0,0,0,.03) !important;
}
html.light .nui-cmdk-panel,
html[data-theme="light"] .nui-cmdk-panel,
html.light [class*="cmdk-panel"],
html[data-theme="light"] [class*="cmdk-panel"] {
  background: #fff !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════
   PROTOTYPE MATCH — Exact visual parity
   ═══════════════════════════════════════════ */

/* SIDEBAR: Workspace pill — glass gradient surface, like prototype .sb-ws */
.sidebar .location-switcher {
  margin: 0 12px 16px !important;
  padding: 0 !important;
  border: none !important;
}
.location-switcher-top { display: none !important; }
/* Location switcher wrapper — add green dot via pseudo */
.sidebar .location-switcher {
  position: relative !important;
  margin: 0 12px 16px !important;
  padding: 0 !important;
}
.location-switcher-select {
  padding: 13px 36px 13px 32px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 12px rgba(0,0,0,.2) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  /* Chevron on right */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236A6A7A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  width: 100% !important;
}
/* Green status dot before the select text */
.sidebar .location-switcher::before {
  content: '' !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
  box-shadow: 0 0 8px rgba(74,222,128,.5) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: pulse-green 2.8s ease-in-out infinite !important;
}
.location-switcher-select:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 20px rgba(0,0,0,.3), 0 0 30px rgba(200,160,76,.03) !important;
  transform: scale(1.015) !important;
}
.location-switcher-select:focus {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 0 3px var(--gold-glow-ring), 0 4px 20px rgba(0,0,0,.3) !important;
  outline: none !important;
}
/* Style native dropdown options — limited by browser but do our best */
.location-switcher-select option {
  background: #1A1A22 !important;
  color: #F0F0F4 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.location-switcher-select option:checked,
.location-switcher-select option:hover {
  background: #C8A04C !important;
  color: #060608 !important;
}
/* Force dark color scheme on the select for better native dropdown */
.location-switcher-select {
  color-scheme: dark !important;
}
/* ═══ CUSTOM GLASS SELECT (replaces native <select>) ═══ */
.sfy-select-wrap {
  position: relative !important;
  width: 100% !important;
}
.sfy-select-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 12px rgba(0,0,0,.2) !important;
  border: none !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
  text-align: left !important;
}
.sfy-select-trigger:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 20px rgba(0,0,0,.3), 0 0 30px rgba(200,160,76,.03) !important;
  /* Removed transform: scale(1.01) - causes layout shift and "messes up the box" */
}
.sfy-select-wrap.open .sfy-select-trigger {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 0 3px var(--gold-glow-ring), 0 4px 20px rgba(0,0,0,.3) !important;
}
.sfy-select-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
  box-shadow: 0 0 8px rgba(74,222,128,.5) !important;
  flex-shrink: 0 !important;
  animation: pulse-green 2.8s ease-in-out infinite !important;
}
.sfy-select-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.sfy-select-chevron {
  font-size: 10px !important;
  color: var(--ink-4) !important;
  transition: transform .2s !important;
  flex-shrink: 0 !important;
}
.sfy-select-wrap.open .sfy-select-chevron {
  transform: rotate(180deg) !important;
}
/* Dropdown menu — glass panel (position/coords set inline by JS to portal out of overflow containers) */
.sfy-select-menu {
  background: linear-gradient(180deg, rgba(28,28,36,.96), rgba(18,18,24,.98)) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
}

/* Default state (when child of wrap, before being portaled) */
.sfy-select-wrap > .sfy-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 500;
}

/* Portaled state (when in body) — use inline styles for fixed positioning */
body > .sfy-select-menu {
  position: fixed;
}
.sfy-select-option {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .12s !important;
  text-align: left !important;
}
.sfy-select-option:hover {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
}
.sfy-select-option.selected {
  color: var(--gold) !important;
}
.sfy-select-option.selected::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  box-shadow: 0 0 8px rgba(200,160,76,.4) !important;
}
/* Light mode */
html.light .sfy-select-trigger,
html[data-theme="light"] .sfy-select-trigger {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
}
html.light .sfy-select-menu,
html[data-theme="light"] .sfy-select-menu {
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .sfy-select-option:hover,
html[data-theme="light"] .sfy-select-option:hover {
  background: rgba(0,0,0,.04) !important;
}
html.light .sfy-select-dot,
html[data-theme="light"] .sfy-select-dot {
  background: #0D9448 !important;
  box-shadow: 0 0 8px rgba(13,148,72,.4) !important;
}

/* ═══ COMPACT SELECT (language selector) ═══ */
.sfy-select-compact {
  width: auto !important;
  display: inline-flex !important;
}
.sfy-select-compact .sfy-select-trigger {
  padding: 6px 10px !important;
  gap: 6px !important;
  font-size: 12px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.12) !important;
}
.sfy-select-compact .sfy-select-trigger:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(0,0,0,.16) !important;
}
.sfy-select-compact .sfy-select-ico {
  font-size: 14px !important;
  line-height: 1 !important;
}
.sfy-select-compact .sfy-select-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.sfy-select-compact .sfy-select-chevron {
  font-size: 10px !important;
  opacity: .4 !important;
}
.sfy-select-compact .sfy-select-menu {
  min-width: 140px !important;
  width: auto !important;
  padding: 4px !important;
  border-radius: 10px !important;
}
.sfy-select-compact .sfy-select-option {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* Ghost trigger — no box, just icon + label */
.sfy-select-ghost { position: relative !important; }
/* Remove border from the parent .menu-link wrapping the ghost selector */
.menu-link:has(.sfy-select-ghost) {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.sfy-select-ghost .sfy-select-trigger {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 4px 6px !important;
}
.sfy-select-ghost .sfy-select-trigger:hover {
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
html.light .sfy-select-ghost .sfy-select-trigger:hover,
html[data-theme="light"] .sfy-select-ghost .sfy-select-trigger:hover {
  background: rgba(0,0,0,.03) !important;
}

/* Menu opens UPWARD (for bottom-of-sidebar placement) */
.sfy-select-menu.sfy-select-menu-up {
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* Light mode compact */
html.light .sfy-select-compact .sfy-select-trigger,
html[data-theme="light"] .sfy-select-compact .sfy-select-trigger {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.03) !important;
}
html.light .sfy-select-compact .sfy-select-trigger:hover,
html[data-theme="light"] .sfy-select-compact .sfy-select-trigger:hover {
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12), 0 2px 6px rgba(0,0,0,.05) !important;
}

/* ═══ WELCOME BANNER — Match prototype .wlc exactly ═══ */
/* Move banner to top of dashboard */
.dash-wrap, .dash-online-shell { display: flex !important; flex-direction: column !important; }
#dash-onboarding-banner {
  order: -1 !important;
  /* Animated golden gradient — highly visible, matching prototype */
  background: linear-gradient(135deg, rgba(200,160,76,.14) 0%, rgba(200,160,76,.05) 25%, rgba(96,165,250,.05) 50%, rgba(200,160,76,.1) 75%, rgba(200,160,76,.14) 100%) !important;
  background-size: 400% 400% !important;
  animation: wlc-shift 8s ease infinite, wlc-glow 3s ease-in-out infinite !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 26px 32px !important;
  margin-bottom: 28px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Hide the emoji, replace with golden icon box */
#dash-onboarding-banner > div:first-child {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 14px !important;
  background: rgba(200,160,76,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 20px rgba(200,160,76,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
/* Add SVG icon via background */
#dash-onboarding-banner > div:first-child::after {
  content: '' !important;
  width: 24px !important;
  height: 24px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A04C' stroke-width='1.5'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 0 6px rgba(200,160,76,.4)) !important;
}
/* Ambient glow inside banner */
#dash-onboarding-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  left: 15% !important;
  width: 400px !important;
  height: 250px !important;
  background: radial-gradient(ellipse, rgba(200,160,76,.12), transparent 65%) !important;
  pointer-events: none !important;
}
#dash-onboarding-banner::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important;
  right: 10% !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(ellipse, rgba(96,165,250,.06), transparent 65%) !important;
  pointer-events: none !important;
}
/* Banner buttons — EXACT prototype .btn-glow and .btn-ghost */
#dash-onboarding-banner .btn,
#dash-onboarding-banner button {
  position: relative !important;
  z-index: 1 !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  border: none !important;
  min-height: auto !important;
}
/* First button = golden primary (Add products) */
#dash-onboarding-banner .btn-primary,
#dash-onboarding-banner .btn:first-of-type,
#dash-onboarding-banner button[onclick*="Settings"] {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  box-shadow: 0 4px 16px rgba(200,160,76,.3), 0 0 40px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
#dash-onboarding-banner .btn-primary:hover,
#dash-onboarding-banner .btn:first-of-type:hover,
#dash-onboarding-banner button[onclick*="Settings"]:hover {
  background: linear-gradient(135deg, #E0C070, var(--gold-bright)) !important;
  box-shadow: 0 8px 24px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(-1px) !important;
}
/* Second button = ghost (Open POS) */
#dash-onboarding-banner .btn-secondary,
#dash-onboarding-banner .btn:last-of-type,
#dash-onboarding-banner button[onclick*="POS"] {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 2px 8px rgba(0,0,0,.15) !important;
}
#dash-onboarding-banner .btn-secondary:hover,
#dash-onboarding-banner .btn:last-of-type:hover,
#dash-onboarding-banner button[onclick*="POS"]:hover {
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 16px rgba(0,0,0,.25) !important;
}
/* Banner text */
#dash-onboarding-banner div {
  position: relative !important;
  z-index: 1 !important;
}
/* Light mode */
html.light #dash-onboarding-banner,
html[data-theme="light"] #dash-onboarding-banner {
  background: linear-gradient(135deg, rgba(150,117,10,.07) 0%, rgba(150,117,10,.03) 30%, rgba(37,99,235,.03) 60%, rgba(150,117,10,.05) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12), 0 0 30px rgba(150,117,10,.04), 0 12px 40px rgba(0,0,0,.04) !important;
}
@keyframes wlc-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes wlc-glow {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(200,160,76,.18), 0 0 40px rgba(200,160,76,.06), 0 20px 60px rgba(0,0,0,.25);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(200,160,76,.3), 0 0 80px rgba(200,160,76,.14), 0 0 120px rgba(200,160,76,.06), 0 20px 60px rgba(0,0,0,.25);
  }
}

/* Also style the nui-page-hero similarly (the shell may inject this) */
.nui-page-hero {
  background: linear-gradient(135deg, rgba(200,160,76,.08), rgba(200,160,76,.03), rgba(96,165,250,.03)) !important;
  background-size: 300% 300% !important;
  animation: wlc-shift 8s ease infinite !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12), 0 0 30px rgba(200,160,76,.04), 0 16px 48px rgba(0,0,0,.2) !important;
  border-radius: 20px !important;
  padding: 26px 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ═══ AUTH PAGE — Hide header elements that don't belong ═══ */
body[data-app-view="auth"] .nui-header-search,
/* .sf-mode-switch-shell removed in singleview3 — selector dead. */
body[data-app-view="auth"] .nui-live-indicator,
body[data-app-view="auth"] #nui-quick-action,
body[data-app-view="auth"] #nui-notifications-wrap,
body[data-app-view="auth"] .nui-profile-wrap,
body[data-app-view="auth"] #nui-profile-toggle,
body[data-app-view="auth"] .nui-sidebar-toggle,
body[data-app-view="auth"] #nui-sidebar-toggle,
body[data-app-view="auth"] #mobile-nav-toggle-top,
body[data-app-view="auth"] .app-header-left .icon-btn,
body[data-app-view="auth"] .app-header-left > button,
body[data-app-view="auth"] .nui-app-header .icon-btn:not(#theme-toggle) {
  display: none !important;
}
/* Auth header spans full width, no sidebar offset */
body[data-app-view="auth"] .nui-app-header {
  left: 0 !important;
}
/* Hide footer on auth */
body[data-app-view="auth"] footer {
  display: none !important;
}

/* ═══ AUTH LIGHT MODE — Glass + depth + ambient glow ═══ */
/* Body ambient gradient background */
html.light body[data-app-view="auth"],
html[data-theme="light"] body[data-app-view="auth"] {
  background: #F2F1EE !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 60% 0%, rgba(150,117,10,.06), transparent) !important;
}

/* Auth header light */
html.light body[data-app-view="auth"] .nui-app-header,
html[data-theme="light"] body[data-app-view="auth"] .nui-app-header {
  background: rgba(242,241,238,.85) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.03) !important;
}

/* Auth section — glass card treatment */
html.light #auth-section,
html[data-theme="light"] #auth-section {
  background: transparent !important;
}

/* Auth light mode — NO extra glass containers, just color adjustments */
/* Remove any double-boxing — keep same structure as dark mode */
html.light .auth-form-column,
html[data-theme="light"] .auth-form-column {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
html.light .auth-layout > div:nth-child(2),
html[data-theme="light"] .auth-layout > div:nth-child(2),
html.light .auth-info-column,
html[data-theme="light"] .auth-info-column {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 24px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.04) !important;
  padding: 36px !important;
}

/* Auth tabs in light mode */
html.light .auth-tabs,
html[data-theme="light"] .auth-tabs {
  background: rgba(0,0,0,.04) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}
html.light .auth-tab,
html[data-theme="light"] .auth-tab {
  color: rgba(0,0,0,.4) !important;
  background: transparent !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
html.light .auth-tab.active,
html[data-theme="light"] .auth-tab.active {
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(150,117,10,.2) !important;
}

/* Form inputs in light auth — glass inset */
html.light body[data-app-view="auth"] input[type="text"],
html.light body[data-app-view="auth"] input[type="email"],
html.light body[data-app-view="auth"] input[type="password"],
html[data-theme="light"] body[data-app-view="auth"] input[type="text"],
html[data-theme="light"] body[data-app-view="auth"] input[type="email"],
html[data-theme="light"] body[data-app-view="auth"] input[type="password"] {
  background: rgba(0,0,0,.03) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  color: #1A1917 !important;
  min-height: 48px !important;
}
html.light body[data-app-view="auth"] input:focus,
html[data-theme="light"] body[data-app-view="auth"] input:focus {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2), 0 0 0 3px rgba(150,117,10,.1) !important;
}

/* Labels */
html.light body[data-app-view="auth"] label,
html.light body[data-app-view="auth"] .field-group label,
html[data-theme="light"] body[data-app-view="auth"] label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: rgba(0,0,0,.4) !important;
}

/* Sign in button — golden with strong contrast */
html.light body[data-app-view="auth"] .btn-primary,
html.light body[data-app-view="auth"] .btn.btn-primary,
html[data-theme="light"] body[data-app-view="auth"] .btn-primary {
  background: linear-gradient(135deg, #96750A, #7D6208) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(150,117,10,.2), 0 0 40px rgba(150,117,10,.06) !important;
}
html.light body[data-app-view="auth"] .btn-primary:hover,
html[data-theme="light"] body[data-app-view="auth"] .btn-primary:hover {
  background: linear-gradient(135deg, #7D6208, #6B5407) !important;
  box-shadow: 0 8px 24px rgba(150,117,10,.3), 0 0 60px rgba(150,117,10,.08) !important;
  transform: translateY(-1px) !important;
}

/* ═══ GOOGLE BUTTON — Tesla glass treatment, both modes ═══ */
/* Dark mode */
.nui-google-btn {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.25) !important;
  border-radius: 14px !important;
  min-height: 52px !important;
  padding: 14px 20px !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.nui-google-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent) !important;
  background-size: 200% 100% !important;
  animation: google-shimmer 3s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes google-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.nui-google-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.3), 0 0 30px rgba(200,160,76,.04) !important;
  transform: translateY(-1px) !important;
}
.nui-google-btn:active {
  transform: scale(.98) !important;
}
/* Google icon container */
.nui-google-btn img,
.nui-google-btn svg,
.nui-google-btn .google-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}
/* Arrow on right */
.nui-google-btn .nui-google-arrow,
.nui-google-btn > span:last-child {
  margin-left: auto !important;
  opacity: .3 !important;
  transition: all .2s !important;
}
.nui-google-btn:hover > span:last-child,
.nui-google-btn:hover .nui-google-arrow {
  opacity: .6 !important;
  transform: translateX(3px) !important;
}
/* Light mode */
html.light .nui-google-btn,
html[data-theme="light"] .nui-google-btn {
  background: linear-gradient(180deg, #fff, #FAFAF8) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5), 0 4px 16px rgba(0,0,0,.06), 0 0 40px rgba(150,117,10,.02) !important;
}
html.light .nui-google-btn::before,
html[data-theme="light"] .nui-google-btn::before {
  background: linear-gradient(90deg, transparent, rgba(150,117,10,.03), transparent) !important;
  background-size: 200% 100% !important;
}
html.light .nui-google-btn:hover,
html[data-theme="light"] .nui-google-btn:hover {
  background: linear-gradient(180deg, #fff, #F8F6F0) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15), inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px rgba(0,0,0,.08), 0 0 40px rgba(150,117,10,.04) !important;
  transform: translateY(-1px) !important;
}

/* Secondary/ghost buttons light */
html.light body[data-app-view="auth"] .btn-secondary,
html.light body[data-app-view="auth"] .btn:not(.btn-primary):not(.nui-google-btn),
html[data-theme="light"] body[data-app-view="auth"] .btn-secondary {
  background: rgba(0,0,0,.03) !important;
  color: #1A1917 !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
}

/* Auth info column (right side) — cards with glass depth */
html.light .auth-layout > div:last-child,
html[data-theme="light"] .auth-layout > div:last-child {
  color: #57564F !important;
}

/* Chips in light mode */
html.light .auth-chip,
html[data-theme="light"] .auth-chip {
  background: rgba(0,0,0,.04) !important;
  color: rgba(0,0,0,.5) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
  border-radius: 20px !important;
}

/* Text links */
html.light body[data-app-view="auth"] .btn-text,
html.light body[data-app-view="auth"] a,
html[data-theme="light"] body[data-app-view="auth"] .btn-text {
  color: var(--gold) !important;
}

/* Divider */
html.light .divider-or::before,
html.light .divider-or::after,
html.light .auth-divider::before,
html.light .auth-divider::after,
html[data-theme="light"] .divider-or::before,
html[data-theme="light"] .divider-or::after {
  background: rgba(0,0,0,.08) !important;
}

/* Plan cards in light */
html.light .plan-card,
html[data-theme="light"] .plan-card {
  background: rgba(255,255,255,.8) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
  border: none !important;
  border-radius: 16px !important;
}
html.light .plan-card.selected,
html[data-theme="light"] .plan-card.selected {
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 20px rgba(150,117,10,.08), 0 8px 24px rgba(0,0,0,.06) !important;
}

/* Kicker text */
html.light .kicker,
html[data-theme="light"] .kicker {
  color: rgba(0,0,0,.35) !important;
}

/* Auth title */
html.light .auth-title,
html[data-theme="light"] .auth-title {
  color: #1A1917 !important;
}
html.light .auth-subtitle,
html[data-theme="light"] .auth-subtitle {
  color: #57564F !important;
}
/* Show only brand + theme toggle on auth */
body[data-app-view="auth"] .nui-app-header .brand {
  display: flex !important;
}

/* Hide the old native select and its green dot pseudo */
.sidebar .location-switcher::before {
  display: none !important;
}

/* ═══ LANGUAGE SELECTOR — Glass treatment ═══ */
#shemify-lang-select {
  padding: 10px 36px 10px 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.2) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color-scheme: dark !important;
  width: 100% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236A6A7A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
#shemify-lang-select:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 20px rgba(0,0,0,.3) !important;
  transform: scale(1.01) !important;
}
#shemify-lang-select:focus {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.25), 0 0 0 3px var(--gold-glow-ring), 0 4px 20px rgba(0,0,0,.3) !important;
  outline: none !important;
}
#shemify-lang-select option {
  background: #1A1A22 !important;
  color: #F0F0F4 !important;
  padding: 10px !important;
  font-size: 13px !important;
}
#shemify-lang-select option:checked {
  background: #C8A04C !important;
  color: #060608 !important;
}
/* Language container — style the wrapper */
.nui-sidebar-utility-item:has(#shemify-lang-select),
#shemify-lang-select ~ *,
#shemify-lang-select + label {
  color: var(--ink-3) !important;
  font-size: 11px !important;
}
/* Hide the original "Language" label + icon — custom dropdown already shows these */
#shemify-lang-label { display: none !important; }
#shemify-lang-label + span,
#shemify-lang-label ~ span { display: none !important; }
/* Hide the parent div that wraps both icon + label spans */
.menu-link > div:has(#shemify-lang-label) { display: none !important; }
/* Fallback: hide any span that's a sibling of lang label */
#shemify-lang-label { display: none !important; }

/* The globe icon + "Language" label above */
.nui-sidebar-utility {
  padding: 8px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.nui-sidebar-utility-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
}

/* Light mode */
html.light #shemify-lang-select,
html[data-theme="light"] #shemify-lang-select {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
  color: var(--ink) !important;
  color-scheme: light !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A8880' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
html.light #shemify-lang-select option,
html[data-theme="light"] #shemify-lang-select option {
  background: #fff !important;
  color: #1A1917 !important;
}
html.light #shemify-lang-select option:checked,
html[data-theme="light"] #shemify-lang-select option:checked {
  background: #96750A !important;
  color: #fff !important;
}

/* Show CLOUD POS under Shemify */
.nui-sidebar-brand-sub {
  display: block !important;
  font-size: 9.5px !important;
  color: var(--ink-4) !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
/* Light mode */
html.light .sidebar .location-switcher::before,
html[data-theme="light"] .sidebar .location-switcher::before {
  background: #0D9448 !important;
  box-shadow: 0 0 8px rgba(13,148,72,.4) !important;
}
html.light .location-switcher-select,
html[data-theme="light"] .location-switcher-select {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
}
html.light .location-switcher-select option,
html[data-theme="light"] .location-switcher-select option {
  background: #fff !important;
  color: var(--ink) !important;
}
/* Hide "2 locations" text */
.settings-mini-note:has(+ .location-switcher),
.sidebar .settings-mini-note {
  display: none !important;
}

/* SIDEBAR: Logo area — match prototype exactly */
.nui-sidebar-brand {
  padding: 28px 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.nui-sidebar-brand-mark {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 13px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 50%, #A07830 100%) !important;
}
.nui-sidebar-brand-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

/* HEADER: Match prototype — proper height, glow edge, glass */
.nui-app-header,
header.app-header.nui-app-header {
  height: 56px !important;
  background: var(--glass-hd, rgba(6,6,8,.75)) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.3) !important;
  padding: 0 24px !important;
}

/* HEADER: Search bar — match prototype .hd-srch exactly */
.nui-header-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.2) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  color: var(--ink-4) !important;
  min-width: 210px !important;
  max-width: 400px !important;
  height: 36px !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}
.nui-header-search:hover {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 16px rgba(0,0,0,.3) !important;
  color: var(--ink-3) !important;
  transform: scale(1.01) !important;
}
.nui-header-search:focus-within {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 0 3px var(--gold-glow-ring), 0 4px 16px rgba(0,0,0,.3) !important;
}
.nui-header-search input {
  height: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 12.5px !important;
  border: none !important;
}

/* HEADER: All icon buttons — match prototype .hd-btn exactly */
.nui-app-header .icon-btn,
.nui-app-header button.icon-btn,
#nui-notifications-wrap button,
#nui-notifications-wrap .icon-btn,
#theme-toggle,
.nui-sidebar-toggle {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: none !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-4) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.15) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  padding: 0 !important;
  min-height: auto !important;
}
.nui-app-header .icon-btn:hover,
#nui-notifications-wrap button:hover,
#theme-toggle:hover,
.nui-sidebar-toggle:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 16px rgba(0,0,0,.25) !important;
  transform: scale(1.05) !important;
}
.nui-app-header .icon-btn svg,
#nui-notifications-wrap svg,
#theme-toggle svg,
.nui-sidebar-toggle svg {
  width: 17px !important;
  height: 17px !important;
}

/* HEADER: Profile avatar — gold circle, properly sized */
.nui-profile-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(200,160,76,.2), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 12px rgba(200,160,76,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.nui-profile-toggle:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.3), 0 0 20px rgba(200,160,76,.15), 0 0 0 3px var(--gold-glow-ring) !important;
  transform: scale(1.05) !important;
}
/* Ensure profile dropdown still opens */
.nui-profile-wrap { position: relative !important; }
.nui-profile-wrap .nui-dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 8px !important;
  min-width: 200px !important;
}

/* Light mode for new rules */
html.light .location-switcher-select,
html[data-theme="light"] .location-switcher-select {
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8880' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
html.light .nui-app-header,
html[data-theme="light"] .nui-app-header {
  background: rgba(250,250,248,.8) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.03) !important;
}
html.light .nui-header-search,
html[data-theme="light"] .nui-header-search {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03) !important;
}
html.light .nui-app-header .icon-btn,
html.light #nui-notifications-wrap button,
html.light #theme-toggle,
html.light .nui-sidebar-toggle,
html[data-theme="light"] .nui-app-header .icon-btn,
html[data-theme="light"] #nui-notifications-wrap button,
html[data-theme="light"] #theme-toggle,
html[data-theme="light"] .nui-sidebar-toggle {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03) !important;
  color: var(--ink-3) !important;
}
html.light .nui-profile-toggle,
html[data-theme="light"] .nui-profile-toggle {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.05)) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15), 0 0 8px rgba(150,117,10,.06) !important;
}

/* ═══════════════════════════════════════════
   FIX 1: SEARCH BAR — Bigger, proper size
   ═══════════════════════════════════════════ */
.nui-header-search {
  height: 40px !important;
  min-width: 300px !important;
  max-width: 520px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}
.nui-header-search input {
  height: 40px !important;
  min-height: 40px !important;
  font-size: 13px !important;
}

/* Search bar must be position:relative so dropdown stays inside */
.nui-header-search {
  position: relative !important;
}
/* Search results dropdown — constrained to search bar width */
.nui-search-results {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 520px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(28,28,36,.96), rgba(18,18,24,.98)) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-shadow: 0 16px 64px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.07) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  z-index: 9999 !important;
  right: auto !important;
}
html.light .nui-search-results,
html[data-theme="light"] .nui-search-results {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* Search result items — dark glass, not white */
.nui-search-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  transition: all .12s !important;
  width: 100% !important;
  text-align: left !important;
}
.nui-search-item:hover,
.nui-search-item.focused {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
}
html.light .nui-search-item:hover,
html[data-theme="light"] .nui-search-item:hover {
  background: rgba(0,0,0,.04) !important;
}

/* Search item icon — visible with golden tint */
.nui-search-item-ico {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(200,160,76,.08) !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}
.nui-search-item-ico svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  color: var(--gold) !important;
  opacity: .7 !important;
  display: block !important;
  flex-shrink: 0 !important;
}
html.light .nui-search-item-ico,
html[data-theme="light"] .nui-search-item-ico {
  background: rgba(150,117,10,.06) !important;
}

/* Search item copy — takes available space */
.nui-search-item-copy {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
}

/* Search pill — pushed to right, golden style */
.nui-search-pill {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--ink-4) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}

/* Hide verbose descriptions in search results — show only title */
.nui-search-item-desc,
.nui-search-item .nui-search-item-sub,
.nui-search-item small {
  display: none !important;
}

/* Cmd+K modal overlay (.cmdk-modal) */
.cmdk-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 15vh !important;
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.cmdk-modal[aria-hidden="true"] { display: none !important; }

.cmdk-card {
  width: 100% !important;
  max-width: 560px !important;
  background: var(--elevated) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
html.light .cmdk-card,
html[data-theme="light"] .cmdk-card {
  background: #fff !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════
   FIX 2: NOTIFICATION BELL — Center the icon
   ═══════════════════════════════════════════ */
#nui-notifications-toggle {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.15) !important;
  border: none !important;
  color: var(--ink-3) !important;
  min-height: auto !important;
  position: relative !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
#nui-notifications-toggle svg {
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
#nui-notifications-toggle:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
  transform: scale(1.05) !important;
}

/* ═══════════════════════════════════════════
   FIX 3: PROFILE BUTTON — Proper AA avatar
   ═══════════════════════════════════════════ */
#nui-profile-toggle {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(200,160,76,.25), rgba(200,160,76,.1)) !important;
  color: var(--gold) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.25), 0 2px 12px rgba(200,160,76,.1) !important;
  cursor: pointer !important;
  transition: all .2s !important;
  overflow: visible !important;
  border: none !important;
  min-height: auto !important;
}
/* Profile dropdown wrapper */
.nui-dropdown-wrap.nui-profile-wrap,
.nui-profile-wrap {
  overflow: visible !important;
}
/* Profile dropdown menu — Tesla glass treatment */
.nui-profile-menu:not([hidden]),
.nui-profile-wrap .nui-dropdown-menu:not([hidden]) {
  display: block !important;
  position: fixed !important;
  top: 62px !important;
  right: 12px !important;
  z-index: 9999 !important;
  min-width: 260px !important;
  background: linear-gradient(180deg, rgba(28,28,36,.95), rgba(18,18,24,.98)) !important;
  border-radius: 18px !important;
  padding: 8px !important;
  box-shadow:
    0 16px 64px rgba(0,0,0,.6),
    0 4px 16px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 40px rgba(200,160,76,.03) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
}
/* Profile dropdown header */
.nui-profile-menu .nui-dropdown-head,
.nui-profile-menu .nui-profile-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  margin-bottom: 4px !important;
}
.nui-profile-menu .nui-dropdown-head .nui-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(200,160,76,.25), rgba(200,160,76,.1)) !important;
  color: var(--gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
}
.nui-profile-menu .nui-dropdown-head-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  display: block !important;
}
.nui-profile-menu .nui-dropdown-head-sub {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  display: block !important;
  margin-top: 2px !important;
}
/* Profile dropdown items */
.nui-profile-menu .nui-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .15s cubic-bezier(.16,1,.3,1) !important;
}
.nui-profile-menu .nui-dropdown-item:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
  transform: translateX(2px) !important;
}
.nui-profile-menu .nui-dropdown-item svg,
.nui-profile-menu .nui-dropdown-item-ico svg {
  width: 17px !important;
  height: 17px !important;
  opacity: .4 !important;
  flex-shrink: 0 !important;
}
.nui-profile-menu .nui-dropdown-item:hover svg {
  opacity: .7 !important;
}
.nui-profile-menu .nui-dropdown-item-ico {
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.nui-profile-menu .nui-dropdown-item-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.nui-profile-menu .nui-dropdown-item-sub {
  display: none !important;
}
/* Separator */
.nui-profile-menu .nui-dropdown-separator {
  height: 1px !important;
  background: rgba(255,255,255,.05) !important;
  margin: 4px 8px !important;
}
/* Light mode */
html.light .nui-profile-menu:not([hidden]),
html[data-theme="light"] .nui-profile-menu:not([hidden]) {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,250,248,.99)) !important;
  box-shadow: 0 16px 64px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.06), 0 0 40px rgba(150,117,10,.02) !important;
}
/* Dropdown body inside */
.nui-profile-menu .nui-dropdown-body {
  padding: 0 !important;
}
/* Dropdown items — glass styled with text visible */
.nui-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .12s !important;
}
.nui-profile-wrap .nui-dropdown-item:hover {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
}
html.light .nui-profile-wrap .nui-dropdown-item:hover,
html[data-theme="light"] .nui-profile-wrap .nui-dropdown-item:hover {
  background: rgba(0,0,0,.04) !important;
}
.nui-profile-wrap .nui-dropdown-item svg,
.nui-dropdown-item svg,
.nui-dropdown-item-ico svg {
  width: 16px !important;
  height: 16px !important;
  opacity: .5 !important;
  flex-shrink: 0 !important;
}
.nui-dropdown-item-ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  flex-shrink: 0 !important;
}
.nui-dropdown-item-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.nui-dropdown-item-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.nui-dropdown-item-sub {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  display: none !important;
}
#nui-profile-toggle:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.35), 0 0 20px rgba(200,160,76,.15), 0 0 0 3px var(--gold-glow-ring) !important;
  transform: scale(1.08) !important;
}
/* Hide ALL text inside profile, show only avatar */
#nui-profile-toggle .nui-profile-text { display: none !important; }
#nui-profile-toggle .nui-profile-name { display: none !important; }
#nui-profile-toggle .nui-profile-sub { display: none !important; }
/* Style the avatar span */
#nui-profile-toggle .nui-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  color: var(--gold) !important;
}

/* Profile dropdown — ensure it opens */
.nui-profile-wrap .nui-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 500 !important;
  min-width: 220px !important;
  background: var(--floating) !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html.light .nui-profile-wrap .nui-dropdown,
html[data-theme="light"] .nui-profile-wrap .nui-dropdown {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════════════════
   SETTINGS PAGE — Complete Tesla/iOS Glass Rework
   ═══════════════════════════════════════════════════════ */

/* --- Layout: NO second sidebar — horizontal tabs + content --- */
.settings-page {
  padding: 0 !important;
  margin: 0 !important;
}
.settings-layout {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 64px) !important;
}

/* --- Settings Nav = Horizontal Tab Bar --- */
.settings-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 12px 32px !important;
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  border-right: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.settings-nav::-webkit-scrollbar { display: none !important; }
.settings-nav-title {
  display: none !important;
}
.settings-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.settings-nav-btn:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-1) !important;
}
.settings-nav-btn.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(200,160,76,.1) !important;
  font-weight: 600 !important;
}
.settings-nav-tag {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-4) !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}
.settings-nav-btn.active .settings-nav-tag {
  background: rgba(200,160,76,.15) !important;
  color: var(--gold) !important;
}

/* --- Settings Content Area --- */
.settings-content {
  padding: 32px 40px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 64px) !important;
}
.settings-panel {
  display: none !important;
}
.settings-panel.active {
  display: block !important;
}

/* --- Section Headers --- */
.settings-section-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  width: 100% !important;
  min-height: 1px !important;
}
.settings-section-title {
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.01em !important;
  margin-bottom: 6px !important;
}
.settings-section-subtitle {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  max-width: 500px !important;
}
.settings-badge-premium {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12) !important;
  white-space: nowrap !important;
}

/* --- Form as glass card --- */
.settings-panel form.form-grid,
.settings-panel > form {
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.012) 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* --- Subsections --- */
.settings-subsection {
  margin-top: 24px !important;
  padding: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.settings-subsection-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin-bottom: 4px !important;
}
.settings-subsection-note {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

/* --- Form Grid & Field Groups (UNIVERSAL — applies to ALL pages) --- */
.form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr !important; } }
.form-grid .full-span { grid-column: 1 / -1 !important; }
.form-grid > button { grid-column: 1 / -1 !important; justify-self: start !important; }
.form-grid > .settings-message { grid-column: 1 / -1 !important; }

.field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.field-group label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

/* --- Inputs, Selects, Textareas (UNIVERSAL — ALL pages) --- */
.field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field-group select,
.field-group textarea,
.settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.settings-page select,
.settings-page textarea,
input.input,
select.input,
textarea.input {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--ink-1) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  transition: all .2s !important;
  box-sizing: border-box !important;
  outline: none !important;
}
.field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.field-group select:hover,
.field-group textarea:hover,
.settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.settings-page select:hover,
.settings-page textarea:hover {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
}
.field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.field-group select:focus,
.field-group textarea:focus,
.settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.settings-page select:focus,
.settings-page textarea:focus {
  border-color: var(--gold) !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* File inputs — prototype .ui-upload style */
@keyframes sfy-dash-flow { to { stroke-dashoffset: -20; } }
.field-group input[type="file"],
.settings-page input[type="file"] {
  padding: 28px 20px !important;
  font-size: 13px !important;
  border: 2px dashed rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
  transition: all .3s cubic-bezier(.34,1.2,.64,1) !important;
  position: relative !important;
  text-align: center !important;
  width: 100% !important;
}
.field-group input[type="file"]:hover,
.settings-page input[type="file"]:hover {
  border-color: var(--gold) !important;
  background: rgba(200,160,76,.04) !important;
}
html.light .field-group input[type="file"],
html[data-theme="light"] .field-group input[type="file"],
html.light .settings-page input[type="file"],
html[data-theme="light"] .settings-page input[type="file"] {
  border-color: rgba(0,0,0,.1) !important;
}
html.light .field-group input[type="file"]:hover,
html[data-theme="light"] .field-group input[type="file"]:hover,
html.light .settings-page input[type="file"]:hover,
html[data-theme="light"] .settings-page input[type="file"]:hover {
  border-color: var(--gold) !important;
  background: rgba(200,160,76,.06) !important;
}

/* Hints */
.field-group .hint,
.settings-page .hint {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  line-height: 1.4 !important;
}

/* Settings message */
.settings-message {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  margin-top: 12px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
}
.settings-message.success,
.settings-message[data-type="success"] {
  background: rgba(34,197,94,.08) !important;
  border-color: rgba(34,197,94,.15) !important;
  color: #22c55e !important;
}
.settings-message.error,
.settings-message[data-type="error"] {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.15) !important;
  color: #ef4444 !important;
}

/* Logo preview */
#settings-biz-logo-preview {
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* --- Buttons inside Settings (prototype .btn-glow style) --- */
.settings-page .btn,
.settings-content .btn {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
  border: none !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.settings-page .btn-primary,
.settings-content .btn-primary {
  background: linear-gradient(135deg, #D4A853 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.25),
    0 0 30px rgba(200,160,76,.1),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.settings-page .btn-primary:hover,
.settings-content .btn-primary:hover {
  background: linear-gradient(135deg, #E0C070 0%, #D4A853 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 6px 28px rgba(200,160,76,.4),
    0 0 60px rgba(200,160,76,.15),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.settings-page .btn-primary:active,
.settings-content .btn-primary:active {
  transform: scale(.97) !important;
}
.settings-page .btn-secondary,
.settings-content .btn-secondary {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.settings-page .btn-secondary:hover,
.settings-content .btn-secondary:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--ink-1) !important;
  transform: translateY(-1px) !important;
}
.settings-page .btn-small,
.settings-content .btn-small {
  padding: 8px 16px !important;
  font-size: 12px !important;
}
.settings-page .btn-danger,
.settings-content .btn-danger {
  background: rgba(239,68,68,.12) !important;
  color: #ef4444 !important;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.15) !important;
}
.settings-page .btn-danger:hover,
.settings-content .btn-danger:hover {
  background: rgba(239,68,68,.2) !important;
  transform: translateY(-1px) !important;
}

/* --- Mini tables inside settings --- */
.settings-mini-table-wrapper {
  overflow-x: auto !important;
  margin-top: 10px !important;
}
.settings-mini-table-wrapper table,
.settings-page table:not(.settings-table) {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.settings-mini-table-wrapper th,
.settings-page table:not(.settings-table) th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  padding: 8px 10px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.settings-mini-table-wrapper td,
.settings-page table:not(.settings-table) td {
  padding: 10px !important;
  color: var(--ink-2) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  vertical-align: middle !important;
}
.settings-mini-table-wrapper tr:hover td,
.settings-page table:not(.settings-table) tr:hover td {
  background: rgba(255,255,255,.02) !important;
}

/* --- Cancel flow --- */
.settings-cancel-step {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.settings-cancel-plan-box {
  padding: 16px !important;
  background: rgba(255,255,255,.025) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  margin-bottom: 12px !important;
}
.settings-cancel-plan-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin-bottom: 8px !important;
}
.settings-cancel-reason-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
.settings-cancel-reason-label:hover {
  background: rgba(255,255,255,.03) !important;
}
.settings-cancel-reason-title {
  font-size: 14px !important;
  color: var(--ink-1) !important;
}

/* --- Payroll section --- */
.settings-payroll-deduction-chip {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,.025) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  margin: 4px !important;
}
.settings-payroll-ded-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}
.settings-payroll-row-label {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  min-width: 120px !important;
}
.settings-payroll-ded-amt,
.settings-payroll-gross,
.settings-payroll-bonus,
.settings-payroll-extra {
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-family: var(--font-mono, monospace) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  color: var(--ink-1) !important;
  width: 100px !important;
  text-align: right !important;
}
.settings-payroll-ded-amt:focus,
.settings-payroll-gross:focus,
.settings-payroll-bonus:focus,
.settings-payroll-extra:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12) !important;
}

/* --- Location list items --- */
.settings-location-list > div,
#settings-locations-list > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  transition: all .2s !important;
}
.settings-location-list > div:hover,
#settings-locations-list > div:hover {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* --- Upgrade box --- */
.settings-upgrade-box {
  padding: 16px 20px !important;
  background: linear-gradient(135deg, rgba(200,160,76,.08), rgba(200,160,76,.03)) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(200,160,76,.12) !important;
  margin: 14px 0 !important;
}

/* --- Pill groups (toggles) --- */
.settings-pill-group {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.settings-pill-group .btn {
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-radius: 20px !important;
}

/* ═══════════════════════════════════════════════════════
   SETTINGS LIGHT MODE
   ═══════════════════════════════════════════════════════ */
html.light .settings-nav,
html[data-theme="light"] .settings-nav {
  background: rgba(0,0,0,.015) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .settings-nav-btn,
html[data-theme="light"] .settings-nav-btn {
  color: var(--ink-3) !important;
}
html.light .settings-nav-btn:hover,
html[data-theme="light"] .settings-nav-btn:hover {
  background: rgba(0,0,0,.03) !important;
  color: var(--ink-1) !important;
}
html.light .settings-nav-btn.active,
html[data-theme="light"] .settings-nav-btn.active {
  background: linear-gradient(135deg, rgba(160,120,40,.1), rgba(160,120,40,.04)) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(160,120,40,.12), 0 2px 8px rgba(160,120,40,.08) !important;
}
html.light .settings-nav-tag,
html[data-theme="light"] .settings-nav-tag {
  background: rgba(0,0,0,.04) !important;
}
html.light .settings-section-header,
html[data-theme="light"] .settings-section-header {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .settings-badge-premium,
html[data-theme="light"] .settings-badge-premium {
  background: linear-gradient(135deg, rgba(160,120,40,.12), rgba(160,120,40,.05)) !important;
  color: #96750A !important;
}
/* Light mode form inputs */
html.light .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light .field-group select,
html[data-theme="light"] .field-group select,
html.light .field-group textarea,
html[data-theme="light"] .field-group textarea,
html.light .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light .settings-page select,
html[data-theme="light"] .settings-page select,
html.light .settings-page textarea,
html[data-theme="light"] .settings-page textarea {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: var(--ink-1) !important;
}
html.light .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
html[data-theme="light"] .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
html.light .field-group select:hover,
html[data-theme="light"] .field-group select:hover {
  border-color: rgba(0,0,0,.15) !important;
  background: rgba(255,255,255,.95) !important;
}
html.light .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="light"] .field-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html.light .field-group select:focus,
html[data-theme="light"] .field-group select:focus,
html.light .field-group textarea:focus,
html[data-theme="light"] .field-group textarea:focus {
  border-color: #96750A !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.1), inset 0 0 0 1px rgba(150,117,10,.15) !important;
}
html.light .settings-subsection,
html[data-theme="light"] .settings-subsection {
  background: rgba(0,0,0,.015) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .settings-panel form.form-grid,
html[data-theme="light"] .settings-panel form.form-grid,
html.light .settings-panel > form,
html[data-theme="light"] .settings-panel > form {
  background: rgba(255,255,255,.6) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
html.light .settings-mini-table-wrapper th,
html[data-theme="light"] .settings-mini-table-wrapper th {
  border-bottom-color: rgba(0,0,0,.08) !important;
}
html.light .settings-mini-table-wrapper td,
html[data-theme="light"] .settings-mini-table-wrapper td {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
html.light .settings-cancel-plan-box,
html[data-theme="light"] .settings-cancel-plan-box {
  background: rgba(0,0,0,.02) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .settings-page .btn-primary,
html[data-theme="light"] .settings-page .btn-primary,
html.light .settings-content .btn-primary,
html[data-theme="light"] .settings-content .btn-primary {
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(150,117,10,.18), 0 0 40px rgba(150,117,10,.06) !important;
}
html.light .settings-page .btn-primary:hover,
html[data-theme="light"] .settings-page .btn-primary:hover,
html.light .settings-content .btn-primary:hover,
html[data-theme="light"] .settings-content .btn-primary:hover {
  background: #7D6208 !important;
  box-shadow: 0 4px 24px rgba(150,117,10,.25), 0 0 60px rgba(150,117,10,.08) !important;
}
html.light .settings-page .btn-secondary,
html[data-theme="light"] .settings-page .btn-secondary,
html.light .settings-content .btn-secondary,
html[data-theme="light"] .settings-content .btn-secondary {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light .settings-page input[type="file"],
html[data-theme="light"] .settings-page input[type="file"] {
  border-color: rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.02) !important;
}

/* ═══════════════════════════════════════════════════════
   UNIVERSAL PAGE CONTENT — Glass card for ALL inner pages
   ═══════════════════════════════════════════════════════ */

/* Every page section gets proper glass cards */
.page {
  padding: 24px !important;
}
.page .section-header,
.page > h2,
.page > h3 {
  font-size: 20px !important;
  font-weight: 300 !important;
  color: var(--ink-1) !important;
  margin-bottom: 20px !important;
}

/* Universal table styling for ALL pages */
.page table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.page table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  white-space: nowrap !important;
}
.page table tbody td {
  padding: 12px !important;
  color: var(--ink-2) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.page table tbody tr:hover td {
  background: rgba(255,255,255,.02) !important;
}
html.light .page table thead th,
html[data-theme="light"] .page table thead th {
  border-bottom-color: rgba(0,0,0,.08) !important;
}
html.light .page table tbody td,
html[data-theme="light"] .page table tbody td {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
html.light .page table tbody tr:hover td,
html[data-theme="light"] .page table tbody tr:hover td {
  background: rgba(0,0,0,.02) !important;
}

/* ═══════════════════════════════════════════════════════
   LEGACY SETTINGS CLASSES — Coupons, Payouts, etc.
   These classes are used in the HTML but had CSS only in
   the OLD deleted files. Adding Tesla/iOS styles now.
   ═══════════════════════════════════════════════════════ */

/* --- Generic settings titles/descriptions --- */
.settings-title {
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.01em !important;
  margin: 0 0 6px !important;
}
.settings-desc {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin: 0 0 24px !important;
}

/* --- Grid layouts (2-col, 3-col) --- */
.settings-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
.settings-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .settings-grid-2 { grid-template-columns: 1fr !important; }
  .settings-grid-3 { grid-template-columns: 1fr !important; }
}

/* --- Card (glass treatment) --- */
.settings-page .card,
.settings-content .card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.settings-page .card-title,
.settings-content .card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
html.light .settings-page .card,
html[data-theme="light"] .settings-page .card,
html.light .settings-content .card,
html[data-theme="light"] .settings-content .card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
html.light .settings-page .card-title,
html[data-theme="light"] .settings-page .card-title {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

/* --- Field inline (label + input on same row) --- */
.field-inline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.field-inline label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  min-width: 120px !important;
  white-space: nowrap !important;
}
.field-inline input,
.field-inline select {
  flex: 1 !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--ink-1) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  transition: all .2s !important;
  outline: none !important;
}
.field-inline input:focus,
.field-inline select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12) !important;
}

/* --- Form row (generic) --- */
.form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}
.form-row .label,
.form-row > label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}
.form-row .input,
.form-row input,
.form-row select,
.form-row textarea {
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--ink-1) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  transition: all .2s !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12) !important;
}
html.light .form-row input,
html[data-theme="light"] .form-row input,
html.light .form-row select,
html[data-theme="light"] .form-row select,
html.light .field-inline input,
html[data-theme="light"] .field-inline input,
html.light .field-inline select,
html[data-theme="light"] .field-inline select {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(0,0,0,.1) !important;
}
html.light .form-row input:focus,
html[data-theme="light"] .form-row input:focus,
html.light .field-inline input:focus,
html[data-theme="light"] .field-inline input:focus {
  border-color: #96750A !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.1) !important;
}

/* --- POS mini text / empty state (used in coupons) --- */
.pos-mini {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  line-height: 1.4 !important;
}
.pos-empty {
  text-align: center !important;
  padding: 32px 16px !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
}

/* --- Settings list (coupon list, etc.) --- */
.settings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.settings-list > div,
.settings-list > li {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 12px !important;
  transition: all .2s !important;
}
.settings-list > div:hover,
.settings-list > li:hover {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.light .settings-list > div,
html[data-theme="light"] .settings-list > div {
  background: rgba(0,0,0,.015) !important;
  border-color: rgba(0,0,0,.04) !important;
}

/* --- SR only (screen reader) --- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   PAYOUTS — Glass cards, balance grid, forms
   ═══════════════════════════════════════════════════════ */
.payout-balance-grid {
  margin-bottom: 28px !important;
}
.payout-card {
  text-align: center !important;
  padding: 24px 20px !important;
}
.payout-meta {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  margin-bottom: 8px !important;
}
.payout-value {
  font-size: 28px !important;
  font-weight: 200 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin-bottom: 6px !important;
}
.payout-hint {
  font-size: 11px !important;
  color: var(--ink-4, var(--ink-3)) !important;
  line-height: 1.4 !important;
}

/* Payout summary (withdraw preview) */
.payout-summary {
  padding: 16px 20px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
  margin: 14px 0 !important;
}
.payout-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
}
.payout-line + .payout-line {
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
.payout-min-note {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 6px !important;
}

/* Payouts history table */
.payouts-history {
  margin-top: 24px !important;
}
.payouts-history h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin-bottom: 8px !important;
}

/* Light mode payouts */
html.light .payout-card,
html[data-theme="light"] .payout-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .payout-summary,
html[data-theme="light"] .payout-summary {
  background: rgba(0,0,0,.02) !important;
  border-color: rgba(0,0,0,.04) !important;
}
html.light .payout-line + .payout-line,
html[data-theme="light"] .payout-line + .payout-line {
  border-top-color: rgba(0,0,0,.06) !important;
}

/* --- Generic utility classes --- */
.muted { color: var(--ink-3) !important; }
.caption { font-size: 11px !important; color: var(--ink-3) !important; }
.mt-8 { margin-top: 8px !important; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════
   GLOBAL — ALL native selects, date/time inputs, calendars
   Matching prototype .ui-dd-trigger style across ENTIRE app
   ═══════════════════════════════════════════════════════ */

/* --- ALL native <select> elements --- */
select,
.page select,
.settings-page select,
.settings-content select,
.modal select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 10px 40px 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--ink-1) !important;
  background-color: rgba(255,255,255,.03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.34,1.2,.64,1) !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color-scheme: dark !important;
}
select:hover {
  background-color: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}
select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  background-color: rgba(255,255,255,.05) !important;
}

/* Native select dropdown options — force dark */
select option {
  background: #1a1a1e !important;
  color: var(--ink-1) !important;
  padding: 8px 12px !important;
}

/* Light mode selects */
html.light select,
html[data-theme="light"] select {
  background-color: rgba(255,255,255,.8) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: var(--ink-1) !important;
  color-scheme: light !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
html.light select:hover,
html[data-theme="light"] select:hover {
  background-color: rgba(255,255,255,.95) !important;
  border-color: rgba(0,0,0,.15) !important;
}
html.light select:focus,
html[data-theme="light"] select:focus {
  border-color: #96750A !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.1) !important;
}
html.light select option,
html[data-theme="light"] select option {
  background: #fff !important;
  color: #1a1a1e !important;
}

/* --- ALL date/time/datetime-local inputs --- */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  color: var(--ink-1) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .2s !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color-scheme: dark !important;
}
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12) !important;
}

/* Calendar picker icon color */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) !important;
  cursor: pointer !important;
  opacity: .6 !important;
  transition: opacity .2s !important;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
}

/* Light mode date/time inputs */
html.light input[type="date"],
html[data-theme="light"] input[type="date"],
html.light input[type="time"],
html[data-theme="light"] input[type="time"],
html.light input[type="datetime-local"],
html[data-theme="light"] input[type="datetime-local"] {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(0,0,0,.1) !important;
  color-scheme: light !important;
}
html.light input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html.light input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: .5 !important;
}
html.light input[type="date"]:focus,
html[data-theme="light"] input[type="date"]:focus,
html.light input[type="datetime-local"]:focus,
html[data-theme="light"] input[type="datetime-local"]:focus {
  border-color: #96750A !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.1) !important;
}

/* --- ALL native text/number/email/etc inputs (catch-all) --- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password),
textarea {
  font-family: var(--font) !important;
  color: var(--ink-1) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: all .2s !important;
  outline: none !important;
  box-sizing: border-box !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password):hover,
textarea:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password):focus,
textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  background: rgba(255,255,255,.05) !important;
}
/* Light mode catch-all inputs */
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password),
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password),
html.light textarea,
html[data-theme="light"] textarea {
  background: rgba(255,255,255,.8) !important;
  border-color: rgba(0,0,0,.1) !important;
}
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password):focus,
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.nui-global-search-input):not(#login-email):not(#login-password):focus,
html.light textarea:focus,
html[data-theme="light"] textarea:focus {
  border-color: #96750A !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.1) !important;
}

/* --- Placeholder text --- */
::placeholder {
  color: var(--ink-3) !important;
  opacity: .6 !important;
}
html.light ::placeholder,
html[data-theme="light"] ::placeholder {
  color: #999 !important;
  opacity: .7 !important;
}

/* --- ALL buttons across the app (global golden treatment) --- */
.btn, button.btn {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
  border: none !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, #D4A853, var(--gold)) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-primary:hover, button.btn-primary:hover {
  background: linear-gradient(135deg, #E0C070, #D4A853) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary:active, button.btn-primary:active {
  transform: scale(.97) !important;
}
.btn-secondary, button.btn-secondary {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.btn-secondary:hover, button.btn-secondary:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--ink-1) !important;
  transform: translateY(-1px) !important;
}
.btn-danger, button.btn-danger {
  background: rgba(239,68,68,.12) !important;
  color: #ef4444 !important;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.15) !important;
}
.btn-danger:hover, button.btn-danger:hover {
  background: rgba(239,68,68,.2) !important;
  transform: translateY(-1px) !important;
}
.btn-small {
  padding: 7px 14px !important;
  font-size: 12px !important;
}
/* Light mode buttons */
html.light .btn-primary,
html[data-theme="light"] .btn-primary {
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(150,117,10,.18), 0 0 40px rgba(150,117,10,.06) !important;
}
html.light .btn-primary:hover,
html[data-theme="light"] .btn-primary:hover {
  background: #7D6208 !important;
  box-shadow: 0 4px 24px rgba(150,117,10,.25), 0 0 60px rgba(150,117,10,.08) !important;
}
html.light .btn-secondary,
html[data-theme="light"] .btn-secondary {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light .btn-secondary:hover,
html[data-theme="light"] .btn-secondary:hover {
  background: rgba(0,0,0,.07) !important;
}

/* ═══════════════════════════════════════════════════════
   ONLINE STORE — Complete Tesla/iOS Glass Rework
   Horizontal nav, glass cards, shop fields, toggles, grids
   ═══════════════════════════════════════════════════════ */

/* --- Top bar --- */
.shop-admin-topbar, .shop2-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 0 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.shop-admin-title {
  font-size: 22px !important;
  font-weight: 300 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.01em !important;
}
.shop-admin-sub {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}
.shop-admin-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.shop-save-status {
  font-size: 12px !important;
  color: var(--green) !important;
}

/* --- Layout: Horizontal tabs (NOT second sidebar) --- */
.shop-admin-layout, .shop2-layout {
  display: flex !important;
  flex-direction: column !important;
}

/* --- Shop Nav → Horizontal Tab Bar --- */
.shop-admin-nav, .shop2-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  flex-wrap: wrap !important;
}
.shop-admin-nav::-webkit-scrollbar, .shop2-nav::-webkit-scrollbar { display: none !important; }

.shop-nav-section {
  display: contents !important;
}
.shop-nav-section-title {
  display: none !important;
}
.shop-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.shop-nav-btn:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-1) !important;
}
.shop-nav-btn.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(200,160,76,.1) !important;
  font-weight: 600 !important;
}

/* --- Panels --- */
.shop-admin-panels, .shop2-panels {
  padding: 24px 0 !important;
}
.shop-panel {
  display: none !important;
}
.shop-panel:not(.hidden) {
  display: block !important;
}

/* --- Cards (glass) --- */
.shop-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  margin-bottom: 16px !important;
}
.shop-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin: 0 0 8px !important;
}

/* --- Grids (2-col, 3-col) --- */
.shop-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}
.shop-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 768px) {
  .shop-grid-2 { grid-template-columns: 1fr !important; }
  .shop-grid-3 { grid-template-columns: 1fr !important; }
}

/* --- Fields --- */
.shop-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.shop-field label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink-2) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* --- Toggle switch (iOS-style) --- */
.shop-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  padding: 8px 0 !important;
}
.shop-toggle input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 44px !important;
  height: 24px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.34,1.2,.64,1) !important;
  flex-shrink: 0 !important;
  border: none !important;
  outline: none !important;
}
.shop-toggle input[type="checkbox"]::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--ink-2) !important;
  border-radius: 50% !important;
  transition: all .25s cubic-bezier(.34,1.2,.64,1) !important;
}
.shop-toggle input[type="checkbox"]:checked {
  background: var(--gold) !important;
  box-shadow: 0 0 12px rgba(200,160,76,.3) !important;
}
.shop-toggle input[type="checkbox"]:checked::after {
  left: 22px !important;
  background: var(--void) !important;
}
.shop-toggle span {
  font-weight: 500 !important;
}

/* --- Color picker row --- */
.shop-color {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.shop-color label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink-2) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.shop-color-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.shop-color-row input[type="color"] {
  width: 36px !important;
  height: 36px !important;
  border: 2px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 2px !important;
  transition: border-color .2s !important;
}
.shop-color-row input[type="color"]:hover {
  border-color: var(--gold) !important;
}
.shop-color-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}
.shop-color-row input[type="color"]::-webkit-color-swatch {
  border: none !important;
  border-radius: 6px !important;
}

/* --- File row --- */
.shop-file-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* --- Header preview --- */
.shop-header-preview {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.shop-header-preview img {
  width: 100% !important;
  max-height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- Shop row / toolbar --- */
.shop-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.shop-orders-toolbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* --- Analytics grid --- */
.shop-analytics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
}

/* --- Link hint --- */
.shop-link-hint {
  font-size: 11px !important;
  color: var(--gold) !important;
  font-style: italic !important;
}

/* --- Checklist (home panel) --- */
#shop-home-checklist {
  min-height: 80px !important;
}

/* ── ONLINE STORE LIGHT MODE ── */
html.light .shop-admin-topbar,
html[data-theme="light"] .shop-admin-topbar {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .shop-admin-nav,
html[data-theme="light"] .shop-admin-nav {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .shop-nav-btn,
html[data-theme="light"] .shop-nav-btn {
  color: var(--ink-3) !important;
}
html.light .shop-nav-btn:hover,
html[data-theme="light"] .shop-nav-btn:hover {
  background: rgba(0,0,0,.03) !important;
  color: var(--ink-1) !important;
}
html.light .shop-nav-btn.active,
html[data-theme="light"] .shop-nav-btn.active {
  background: linear-gradient(135deg, rgba(160,120,40,.1), rgba(160,120,40,.04)) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(160,120,40,.12), 0 2px 8px rgba(160,120,40,.08) !important;
}
html.light .shop-card,
html[data-theme="light"] .shop-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
html.light .shop-toggle input[type="checkbox"],
html[data-theme="light"] .shop-toggle input[type="checkbox"] {
  background: rgba(0,0,0,.1) !important;
}
html.light .shop-toggle input[type="checkbox"]::after,
html[data-theme="light"] .shop-toggle input[type="checkbox"]::after {
  background: #fff !important;
}
html.light .shop-toggle input[type="checkbox"]:checked,
html[data-theme="light"] .shop-toggle input[type="checkbox"]:checked {
  background: #96750A !important;
}
html.light .shop-color-row input[type="color"],
html[data-theme="light"] .shop-color-row input[type="color"] {
  border-color: rgba(0,0,0,.1) !important;
}

/* ═══════════════════════════════════════════════════════
   ONLINE STORE — Phase 2: Glass Theme Deep Override
   Override shop_online_views.css variables + all missing classes
   ═══════════════════════════════════════════════════════ */

/* --- Override CSS variables to match glass theme --- */
:root {
  --sf-shop-online-card-bg: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  --sf-shop-online-card-border: rgba(255,255,255,.06) !important;
  --sf-shop-online-card-border-strong: rgba(255,255,255,.1) !important;
  --sf-shop-online-card-text: var(--ink-1) !important;
  --sf-shop-online-card-muted: var(--ink-3) !important;
  --sf-shop-online-card-shadow: 0 2px 12px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  --sf-shop-online-pill-bg: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  --sf-shop-online-pill-border: rgba(200,160,76,.2) !important;
  --sf-shop-online-pill-text: var(--gold) !important;
  --sf-shop-online-advanced-pill-bg: rgba(200,160,76,.12) !important;
  --sf-shop-online-advanced-pill-border: rgba(200,160,76,.18) !important;
  --sf-shop-online-advanced-pill-text: var(--gold) !important;
}
html[data-theme="dark"] {
  --sf-shop-online-card-bg: rgba(255,255,255,.02) !important;
  --sf-shop-online-card-border: rgba(255,255,255,.06) !important;
  --sf-shop-online-card-text: var(--ink-1) !important;
  --sf-shop-online-card-muted: var(--ink-3) !important;
  --sf-shop-online-pill-bg: rgba(200,160,76,.12) !important;
  --sf-shop-online-pill-border: rgba(200,160,76,.2) !important;
  --sf-shop-online-pill-text: var(--gold) !important;
}

/* Force glass on ALL shop-ux cards/rows/metrics */
#shop-page .shop-ux-card,
#shop-page .shop-ux-row,
#shop-page .shop-ux-empty,
#shop-page .shop-ux-advanced,
#shop-page .shop-ux-metric,
#shop-page .shop-ux-step {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  color: var(--ink-1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}
#shop-page .shop-ux-card { padding: 20px !important; }
#shop-page .shop-ux-row { padding: 14px 16px !important; }
#shop-page .shop-ux-metric { padding: 16px !important; }
#shop-page .shop-ux-step { padding: 16px !important; }
#shop-page .shop-ux-empty {
  padding: 32px 20px !important;
  text-align: center !important;
}

/* UX row hover */
#shop-page .shop-ux-row:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.025) 100%) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Active step golden glow */
#shop-page .shop-ux-step.is-active {
  box-shadow: 0 2px 12px rgba(200,160,76,.15), inset 0 0 0 1px rgba(200,160,76,.15) !important;
  border-color: rgba(200,160,76,.15) !important;
}

/* UX typography */
#shop-page .shop-ux-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin-bottom: 4px !important;
}
#shop-page .shop-ux-row-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
#shop-page .shop-ux-row-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
#shop-page .shop-ux-row-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
#shop-page .shop-ux-copy {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
}
#shop-page .shop-ux-note {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  font-style: italic !important;
}
#shop-page .shop-ux-kicker {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
}
#shop-page .shop-ux-metric-num {
  font-size: 28px !important;
  font-weight: 200 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
}
#shop-page .shop-ux-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
}
#shop-page .shop-ux-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}
#shop-page .shop-ux-stack {
  display: grid !important;
  gap: 12px !important;
}
#shop-page .shop-ux-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
#shop-page .shop-ux-list {
  display: grid !important;
  gap: 8px !important;
}
#shop-page .shop-ux-divider {
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  margin: 12px 0 !important;
}
#shop-page .shop-ux-mini-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
#shop-page .shop-ux-field {
  display: grid !important;
  gap: 6px !important;
}
#shop-page .shop-ux-field > label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--ink-2) !important;
}
#shop-page .shop-ux-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
@media (max-width: 768px) {
  #shop-page .shop-ux-fields,
  #shop-page .shop-ux-grid {
    grid-template-columns: 1fr !important;
  }
}

/* UX advanced (details/summary) */
#shop-page .shop-ux-advanced {
  padding: 12px 14px !important;
}
#shop-page .shop-ux-advanced summary {
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#shop-page .shop-ux-advanced summary::-webkit-details-marker { display: none !important; }
#shop-page .shop-ux-advanced-content {
  margin-top: 12px !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
}

/* Wizard section/shell/stepper */
#shop-page .shop-ux-wizard-shell {
  display: grid !important;
  gap: 16px !important;
}
#shop-page .shop-ux-wizard-section {
  display: grid !important;
  gap: 12px !important;
}
#shop-page .shop-ux-stepper {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
#shop-page .shop-ux-step-num {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  letter-spacing: .04em !important;
}
#shop-page .shop-ux-step-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
#shop-page .shop-ux-step-copy {
  font-size: 12px !important;
  color: var(--ink-3) !important;
}

/* --- Setup guide (Launch store tab) --- */
.shop-setup-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.shop-setup-head-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.shop-setup-progressbar {
  width: 100% !important;
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  margin: 8px 0 !important;
}
.shop-setup-progressbar > div,
.shop-setup-progressbar > span {
  height: 100% !important;
  background: linear-gradient(90deg, var(--gold), #D4A853) !important;
  border-radius: 3px !important;
  transition: width .4s cubic-bezier(.34,1.2,.64,1) !important;
}
.shop-setup-progresscopy {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-bottom: 16px !important;
}
.shop-setup-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
}
.shop-setup-group {
  margin-bottom: 20px !important;
}
.shop-setup-group-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  padding: 8px 0 6px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  margin-bottom: 8px !important;
}
.shop-setup-task {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  transition: background .2s !important;
  border: 1px solid transparent !important;
}
.shop-setup-task:hover {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.04) !important;
}
.shop-setup-task-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-setup-task-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.shop-setup-task-copy {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
}
.shop-setup-task-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 8px !important;
}
.shop-setup-share {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

/* --- Checklist rows (from shop.js) --- */
.shop-check-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 10px !important;
}
.shop-check-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  transition: background .2s !important;
}
.shop-check-row:hover {
  background: rgba(255,255,255,.02) !important;
}
.shop-check-ic {
  flex-shrink: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin-top: 1px !important;
}
.shop-check-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-1) !important;
}
.shop-check-hint {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
.shop-link-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

/* --- Badges (glass override) --- */
.shop-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-3) !important;
  white-space: nowrap !important;
}
.shop-badge-ok {
  background: rgba(34,197,94,.12) !important;
  color: var(--green) !important;
}
.shop-badge-warn {
  background: rgba(245,158,11,.12) !important;
  color: #f59e0b !important;
}
.shop-badge-bad {
  background: rgba(239,68,68,.12) !important;
  color: var(--red) !important;
}
.shop-badge-info {
  background: rgba(59,130,246,.12) !important;
  color: var(--blue) !important;
}
.shop-badge-muted {
  background: rgba(255,255,255,.03) !important;
  color: var(--ink-3) !important;
}

/* --- Product rows --- */
.shop-prod-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all .2s !important;
}
.shop-prod-row:hover {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.04) !important;
}
.shop-prod-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-prod-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-prod-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
.shop-prod-toggle {
  flex-shrink: 0 !important;
}

/* --- Collection rows --- */
.shop-col-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all .2s !important;
}
.shop-col-row:hover {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.04) !important;
}
.shop-col-handle {
  cursor: grab !important;
  color: var(--ink-3) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}
.shop-col-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-col-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-col-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}

/* --- Order rows --- */
.shop-order-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.shop-order-row:hover {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
}
.shop-order-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-order-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-order-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
.shop-order-badges {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}

/* --- Draft order rows --- */
.shop-draft-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.shop-draft-row:hover {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.06) !important;
}
.shop-draft-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-draft-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.shop-draft-side {
  text-align: right !important;
  flex-shrink: 0 !important;
}
.shop-draft-total {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-draft-actions-inline {
  display: flex !important;
  gap: 6px !important;
  margin-top: 4px !important;
  justify-content: flex-end !important;
}

/* --- Order/Draft Modals --- */
.shop-order-modal,
.shop-draft-modal {
  display: grid !important;
  gap: 16px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.shop-order-modal-xl {
  max-width: 960px !important;
}
.shop-order-modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.shop-order-modal-title {
  font-size: 20px !important;
  font-weight: 300 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.01em !important;
}
.shop-order-modal-sub {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}
.shop-order-modal-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.shop-order-modal-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.shop-order-modal-foot,
.shop-draft-footer-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
.shop-draft-footer-buttons {
  display: flex !important;
  gap: 8px !important;
}
.shop-draft-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
@media (max-width: 768px) {
  .shop-draft-grid { grid-template-columns: 1fr !important; }
}

/* --- Draft summary box --- */
.shop-draft-summary-box {
  margin-top: 12px !important;
  padding: 14px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.shop-draft-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 0 !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
}
.shop-draft-summary-total {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  margin-top: 4px !important;
}
.shop-draft-summary-note {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 8px !important;
}

/* --- Draft line items --- */
.shop-draft-lines {
  margin-top: 10px !important;
}
.shop-draft-line-row {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.shop-draft-line-grid {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.shop-draft-line-qty-wrap {
  max-width: 80px !important;
}
.shop-draft-line-price {
  text-align: right !important;
  min-width: 80px !important;
  flex-shrink: 0 !important;
}
.shop-draft-line-price-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-draft-line-remove-wrap {
  flex-shrink: 0 !important;
}
.shop-draft-line-sub {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}
.shop-draft-line-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
.shop-draft-address-wrap {
  margin-top: 12px !important;
}

/* --- Order progress/fulfillment --- */
.shop-order-summary-strip {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
.shop-order-summary-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  min-width: 80px !important;
  font-size: 12px !important;
}
.shop-order-summary-pill strong {
  font-size: 18px !important;
  font-weight: 200 !important;
  color: var(--ink-1) !important;
}
.shop-order-progress-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.shop-order-progress-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink-1) !important;
}
.shop-order-progress-meta {
  font-size: 11px !important;
  color: var(--ink-3) !important;
}
.shop-order-progress-right {
  flex-shrink: 0 !important;
}

/* --- Shipment cards --- */
.shop-shipment-card {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.shop-shipment-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.shop-shipment-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-shipment-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
.shop-shipment-track {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  margin-bottom: 6px !important;
}
.shop-shipment-dates {
  font-size: 12px !important;
  margin-bottom: 6px !important;
}
.shop-shipment-note {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  font-style: italic !important;
  margin-bottom: 8px !important;
}
.shop-shipment-items {
  display: grid !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
.shop-shipment-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.02) !important;
}
.shop-shipment-actions {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* --- Return cards --- */
.shop-return-card {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.shop-return-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.shop-return-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-return-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
.shop-return-kv-row {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}
.shop-return-note {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-bottom: 6px !important;
}
.shop-return-linkrow {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}
.shop-return-items {
  display: grid !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
.shop-return-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.02) !important;
}
.shop-return-actions {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.shop-return-line {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
  margin-bottom: 6px !important;
}
.shop-return-line-copy {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-return-line-controls {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* --- Key-value pairs --- */
.shop-kv {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.shop-kv b {
  font-weight: 600 !important;
  color: var(--ink-2) !important;
}
.shop-kv:last-child {
  border-bottom: none !important;
}

/* --- Timeline --- */
.shop-order-timeline-item {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
.shop-order-timeline-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-order-timeline-meta {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
.shop-order-timeline-detail {
  font-size: 12px !important;
  color: var(--ink-2) !important;
  margin-top: 4px !important;
}

/* --- Payment note --- */
.shop-payment-note {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
}

/* --- Link style --- */
.shop-link {
  color: var(--gold) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: opacity .2s !important;
}
.shop-link:hover {
  opacity: .8 !important;
}

/* --- Analytics cards --- */
.shop-analytics-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.shop-analytics-num {
  font-size: 28px !important;
  font-weight: 200 !important;
  color: var(--ink-1) !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 6px !important;
}

/* --- Card header row --- */
.shop-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

/* --- Shop chip/tag --- */
.shop-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
}

/* --- CMS grid/columns/list --- */
.shop-cms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}
.shop-cms-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.shop-cms-list {
  display: grid !important;
  gap: 6px !important;
}
.shop-cms-col-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--ink-3) !important;
}
.shop-cms-chip {
  display: inline-flex !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(200,160,76,.1) !important;
  color: var(--gold) !important;
}

/* --- Content/JSON editor area --- */
.shop-content-json {
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  font-family: 'SF Mono', 'Consolas', monospace !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  overflow-x: auto !important;
}
.shop-content-json-status,
.shop-content-files-status {
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 6px !important;
}
.shop-content-action-buttons {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
.shop-code {
  font-family: 'SF Mono', 'Consolas', monospace !important;
  font-size: 12px !important;
  background: rgba(0,0,0,.2) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: var(--ink-2) !important;
}

/* --- Customer rows --- */
.shop-cust-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  transition: all .2s !important;
  cursor: pointer !important;
}
.shop-cust-row:hover {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.04) !important;
}
.shop-cust-main {
  flex: 1 !important;
  min-width: 0 !important;
}
.shop-cust-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
}
.shop-cust-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
.shop-customers-actions {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.shop-customers-stats {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* --- Discount detail --- */
.shop-discount-detail {
  padding: 12px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}
.shop-discounts-summary {
  font-size: 13px !important;
  color: var(--ink-2) !important;
}
.shop-detail-chips {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
}

/* --- GrapesJS / Theme import --- */
.shop-grapes-info {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
}
.shop-grapes-status-badge {
  display: inline-flex !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}
.shop-theme-editor-body {
  margin-top: 12px !important;
}
.shop-theme-import-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.shop-theme-import-status {
  font-size: 12px !important;
  color: var(--ink-3) !important;
}
.shop-theme-summary {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  line-height: 1.5 !important;
}

/* --- SF Shop tier pills override --- */
.sf-shop-tier-pill {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  border-color: rgba(200,160,76,.2) !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.sf-shop-tier-pill--advanced {
  background: linear-gradient(135deg, rgba(200,160,76,.18), rgba(200,160,76,.1)) !important;
  border-color: rgba(200,160,76,.25) !important;
  color: var(--gold-bright, #D4A853) !important;
}
.sf-shop-tier-pill--design {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  border-color: rgba(200,160,76,.15) !important;
  color: var(--gold) !important;
}

/* --- All buttons inside shop page: glass treatment --- */
#shop-page .btn,
#shop-page button.btn {
  border-radius: 10px !important;
  font-family: var(--font) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
}
#shop-page .btn-primary,
#shop-page .btn-glow {
  background: linear-gradient(135deg, #D4A853 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
#shop-page .btn-primary:hover,
#shop-page .btn-glow:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15) !important;
}
#shop-page .btn-secondary,
#shop-page .btn-ghost {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
#shop-page .btn-secondary:hover,
#shop-page .btn-ghost:hover {
  background: rgba(255,255,255,.07) !important;
}
#shop-page .btn-danger {
  background: rgba(239,68,68,.12) !important;
  color: #ef4444 !important;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.15) !important;
}

/* --- All inputs inside shop page --- */
#shop-page input.input,
#shop-page textarea.input,
#shop-page select.input,
#shop-page .shop-field input,
#shop-page .shop-field textarea,
#shop-page .shop-field select,
#shop-page .shop-ux-field input,
#shop-page .shop-ux-field textarea,
#shop-page .shop-ux-field select {
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  color: var(--ink-1) !important;
  font-family: var(--font) !important;
  transition: all .2s !important;
  color-scheme: dark !important;
}
#shop-page input.input:hover,
#shop-page textarea.input:hover,
#shop-page select.input:hover,
#shop-page .shop-field input:hover,
#shop-page .shop-field textarea:hover,
#shop-page .shop-field select:hover,
#shop-page .shop-ux-field input:hover,
#shop-page .shop-ux-field textarea:hover,
#shop-page .shop-ux-field select:hover {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}
#shop-page input.input:focus,
#shop-page textarea.input:focus,
#shop-page select.input:focus,
#shop-page .shop-field input:focus,
#shop-page .shop-field textarea:focus,
#shop-page .shop-field select:focus,
#shop-page .shop-ux-field input:focus,
#shop-page .shop-ux-field textarea:focus,
#shop-page .shop-ux-field select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* Native selects — custom chevron */
#shop-page select.input,
#shop-page .shop-field select,
#shop-page .shop-ux-field select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A8A49C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* ── ONLINE STORE LIGHT MODE — Phase 2 ── */
html.light #shop-page .shop-ux-card,
html[data-theme="light"] #shop-page .shop-ux-card,
html.light #shop-page .shop-ux-row,
html[data-theme="light"] #shop-page .shop-ux-row,
html.light #shop-page .shop-ux-metric,
html[data-theme="light"] #shop-page .shop-ux-metric,
html.light #shop-page .shop-ux-step,
html[data-theme="light"] #shop-page .shop-ux-step,
html.light #shop-page .shop-ux-empty,
html[data-theme="light"] #shop-page .shop-ux-empty,
html.light #shop-page .shop-ux-advanced,
html[data-theme="light"] #shop-page .shop-ux-advanced {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
html.light .shop-analytics-card,
html[data-theme="light"] .shop-analytics-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
html.light .shop-order-modal-card,
html[data-theme="light"] .shop-order-modal-card {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .shop-setup-group-title,
html[data-theme="light"] .shop-setup-group-title {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .shop-setup-progressbar,
html[data-theme="light"] .shop-setup-progressbar {
  background: rgba(0,0,0,.06) !important;
}
html.light .shop-setup-pill,
html[data-theme="light"] .shop-setup-pill {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.04)) !important;
  color: #96750A !important;
}
html.light .shop-badge,
html[data-theme="light"] .shop-badge {
  background: rgba(0,0,0,.04) !important;
}
html.light .shop-order-row:hover,
html[data-theme="light"] .shop-order-row:hover,
html.light .shop-draft-row:hover,
html[data-theme="light"] .shop-draft-row:hover,
html.light .shop-prod-row:hover,
html[data-theme="light"] .shop-prod-row:hover,
html.light .shop-col-row:hover,
html[data-theme="light"] .shop-col-row:hover,
html.light .shop-cust-row:hover,
html[data-theme="light"] .shop-cust-row:hover {
  background: rgba(0,0,0,.02) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .shop-shipment-card,
html[data-theme="light"] .shop-shipment-card,
html.light .shop-return-card,
html[data-theme="light"] .shop-return-card {
  background: rgba(0,0,0,.02) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .shop-content-json,
html[data-theme="light"] .shop-content-json {
  background: rgba(0,0,0,.03) !important;
  border-color: rgba(0,0,0,.06) !important;
}
html.light .sf-shop-tier-pill,
html[data-theme="light"] .sf-shop-tier-pill {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.04)) !important;
  border-color: rgba(150,117,10,.15) !important;
  color: #96750A !important;
}
html.light #shop-page .btn-primary,
html[data-theme="light"] #shop-page .btn-primary,
html.light #shop-page .btn-glow,
html[data-theme="light"] #shop-page .btn-glow {
  background: linear-gradient(135deg, #B8941E 0%, #96750A 100%) !important;
  color: #fff !important;
}
html.light #shop-page .btn-secondary,
html[data-theme="light"] #shop-page .btn-secondary {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light #shop-page input.input,
html[data-theme="light"] #shop-page input.input,
html.light #shop-page textarea.input,
html[data-theme="light"] #shop-page textarea.input,
html.light #shop-page select.input,
html[data-theme="light"] #shop-page select.input,
html.light #shop-page .shop-field input,
html[data-theme="light"] #shop-page .shop-field input,
html.light #shop-page .shop-field textarea,
html[data-theme="light"] #shop-page .shop-field textarea,
html.light #shop-page .shop-field select,
html[data-theme="light"] #shop-page .shop-field select,
html.light #shop-page .shop-ux-field input,
html[data-theme="light"] #shop-page .shop-ux-field input,
html.light #shop-page .shop-ux-field textarea,
html[data-theme="light"] #shop-page .shop-ux-field textarea,
html.light #shop-page .shop-ux-field select,
html[data-theme="light"] #shop-page .shop-ux-field select {
  background: rgba(0,0,0,.02) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: var(--ink-1) !important;
  color-scheme: light !important;
}
html.light #shop-page input.input:focus,
html[data-theme="light"] #shop-page input.input:focus,
html.light #shop-page .shop-field input:focus,
html[data-theme="light"] #shop-page .shop-field input:focus,
html.light #shop-page .shop-ux-field input:focus,
html[data-theme="light"] #shop-page .shop-ux-field input:focus {
  border-color: #96750A !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.1) !important;
}

/* ============================================================
   AUDIT LOGS PAGE — GLASS THEME
   Tesla/iOS luxury styling for the Logs/Audit trail page
   ============================================================ */

/* --- Main wrapper — FULL WIDTH like Team page --- */
.logs-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* --- Top card (filters toolbar) — TRANSPARENT GLASS to let body warmth through --- */
/* Use #dashboard-placeholder to beat specificity of "#dashboard-placeholder .card" rule */
#dashboard-placeholder .logs-card,
.logs-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 16px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg, 20px) !important;
  padding: 24px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: none !important;
  overflow: visible !important; /* don't clip glass dropdowns */
}

/* Card header with title and Live pill */
.logs-card > div:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

/* Page title in card */
.logs-card > div:first-child > div:first-child > div:first-child {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--ink, #F0F0F4) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}
/* "Logs" section title */
.logs-card > div:first-child > div:first-child > div:first-child + div {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-2, #9898A8) !important;
  margin-top: 4px !important;
}

/* Subtitle */
.logs-card .text-muted {
  font-size: 13px !important;
  color: var(--ink-3, #6A6A7A) !important;
}

/* --- Live pill (matches Team page badge style) --- */
.logs-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(74,222,128,.06)) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: var(--green, #4ADE80) !important;
  box-shadow:
    inset 0 0 0 1px rgba(74,222,128,.18),
    0 2px 8px rgba(0,0,0,.2) !important;
}
.logs-pill::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--green, #4ADE80) !important;
  animation: pulse-green 2.8s ease-in-out infinite !important;
  box-shadow: 0 0 8px rgba(74,222,128,.6) !important;
}
.logs-pill span:last-child {
  color: var(--ink-3, #6A6A7A) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}

/* --- Toolbar container --- */
.logs-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: flex-end !important;
  margin-top: 16px !important;
}

/* --- Field wrapper --- */
.logs-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.logs-field > label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #6A6A7A) !important;
}

/* --- Search input --- */
.logs-field input[type="text"],
#logs-search {
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink-1, #F0F0F4) !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  min-width: 240px !important;
}
.logs-field input[type="text"]:hover,
#logs-search:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.logs-field input[type="text"]:focus,
#logs-search:focus {
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}
.logs-field input[type="text"]::placeholder,
#logs-search::placeholder {
  color: var(--ink-4, #42424F) !important;
}

/* --- Sort select --- */
.logs-field select,
#logs-sort {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 10px 36px 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink-1, #F0F0F4) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  color-scheme: dark !important;
}
.logs-field select:hover,
#logs-sort:hover {
  background-color: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.logs-field select:focus,
#logs-sort:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* --- Quick range buttons --- */
.logs-quick {
  display: flex !important;
  gap: 6px !important;
}
.logs-quick .btn,
.logs-quick button {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ink-2, #9898A8) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  white-space: nowrap !important;
}
.logs-quick .btn:hover,
.logs-quick button:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink-1, #F0F0F4) !important;
  transform: translateY(-1px) !important;
}
.logs-quick .btn:active,
.logs-quick button:active {
  transform: scale(.97) !important;
}
.logs-quick .btn.active,
.logs-quick button.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold, #C8A04C) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 2px 8px rgba(200,160,76,.1) !important;
}

/* --- Datetime inputs --- */
.logs-field input[type="datetime-local"],
#logs-from,
#logs-to {
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink-1, #F0F0F4) !important;
  color-scheme: dark !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}
.logs-field input[type="datetime-local"]:hover,
#logs-from:hover,
#logs-to:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.logs-field input[type="datetime-local"]:focus,
#logs-from:focus,
#logs-to:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}
.logs-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) !important;
  opacity: .6 !important;
  cursor: pointer !important;
}

/* --- Apply button (primary gold) --- */
#logs-apply {
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--gold-bright, #D4B060) 0%, var(--gold, #C8A04C) 100%) !important;
  color: var(--void, #060608) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.25),
    0 0 30px rgba(200,160,76,.1),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}
#logs-apply:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 6px 28px rgba(200,160,76,.4),
    0 0 60px rgba(200,160,76,.15),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#logs-apply:active {
  transform: scale(.97) !important;
}

/* --- Action filters row --- */
.logs-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}
.logs-actions-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #6A6A7A) !important;
  white-space: nowrap !important;
}

/* --- Action filter chips container --- */
.logs-action-filters,
#logs-action-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* --- Individual action filter chip (matches Team page tab pill style) --- */
.logs-action-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gold, #C8A04C) !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.18), 0 2px 8px rgba(200,160,76,.08) !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  user-select: none !important;
}
.logs-action-chip:hover {
  background: linear-gradient(135deg, rgba(200,160,76,.18), rgba(200,160,76,.1)) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.25), 0 4px 12px rgba(200,160,76,.12) !important;
}
.logs-action-chip input[type="checkbox"] {
  display: none !important;
}
/* Chip OFF state (unchecked) — matches Team page inactive tab */
.logs-action-chip.off {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-3, #6A6A7A) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.logs-action-chip.off:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink-2, #9898A8) !important;
  transform: translateY(-1px) !important;
}

/* Action name */
.logs-action-name {
  font-weight: 600 !important;
}

/* Action count badge */
.logs-action-count {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 20px !important;
  min-width: 18px !important;
  text-align: center !important;
}
.logs-action-chip.off .logs-action-count {
  background: rgba(255,255,255,.05) !important;
}

/* Helper text under action filters */
.logs-actions-row + .text-muted {
  font-size: 11px !important;
  color: var(--ink-4, #42424F) !important;
  margin-top: 8px !important;
}

/* --- Table card container — TRANSPARENT GLASS to let body warmth through --- */
/* Use #dashboard-placeholder to beat specificity of "#dashboard-placeholder .card" rule */
#dashboard-placeholder .logs-wrap > .card:last-of-type,
.logs-wrap > .card:last-of-type {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 16px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg, 20px) !important;
  border: none !important;
  overflow: hidden !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* --- Logs table --- */
.logs-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

/* Table header (matches Team page table style) */
.logs-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}
.logs-table thead tr {
  background: rgba(255,255,255,.04) !important;
}
.logs-table thead th {
  padding: 14px 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  color: var(--ink-3, #6A6A7A) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  white-space: nowrap !important;
}

/* Table body */
.logs-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  transition: background .15s ease !important;
}
.logs-table tbody tr:hover {
  background: rgba(255,255,255,.02) !important;
}
.logs-table tbody tr:last-child {
  border-bottom: none !important;
}
.logs-table tbody td {
  padding: 14px 20px !important;
  color: var(--ink-2, #9898A8) !important;
  vertical-align: top !important;
}
/* First column (Time) - slightly muted */
.logs-table tbody td:first-child {
  color: var(--ink-3, #6A6A7A) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
/* Second column (Who) - show name */
.logs-table tbody td:nth-child(2) {
  color: var(--ink-1, #F0F0F4) !important;
  font-weight: 500 !important;
}
/* Third column (Action) - type badge style */
.logs-table tbody td:nth-child(3) {
  font-weight: 600 !important;
  color: var(--ink-2, #9898A8) !important;
}
/* Fourth column (Details) - main content */
.logs-table tbody td:nth-child(4) {
  color: var(--ink-1, #F0F0F4) !important;
}

/* --- Debug details toggle --- */
.logs-details {
  margin-top: 8px !important;
}
.logs-details summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-3, #6A6A7A) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  list-style: none !important;
}
.logs-details summary::-webkit-details-marker {
  display: none !important;
}
.logs-details summary::before {
  content: '▶' !important;
  font-size: 8px !important;
  transition: transform .15s ease !important;
}
.logs-details[open] summary::before {
  transform: rotate(90deg) !important;
}
.logs-details summary:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink-2, #9898A8) !important;
}

/* Debug meta content */
.logs-row-meta {
  margin-top: 8px !important;
  padding: 12px !important;
  background: rgba(0,0,0,.2) !important;
  border-radius: 8px !important;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--ink-3, #6A6A7A) !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-x: auto !important;
}

/* --- Empty state --- */
.logs-empty {
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--ink-3, #6A6A7A) !important;
  font-size: 14px !important;
}

/* --- Table footer --- */
.logs-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.02) !important;
}

/* Log count */
.logs-count,
#logs-count {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-3, #6A6A7A) !important;
}

/* Load more button */
#logs-load-more {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ink-2, #9898A8) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}
#logs-load-more:hover:not(:disabled) {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink-1, #F0F0F4) !important;
  transform: translateY(-1px) !important;
}
#logs-load-more:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

/* ============================================================
   AUDIT LOGS — LIGHT MODE
   ============================================================ */
html.light .logs-card,
html[data-theme="light"] .logs-card {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 20px rgba(0,0,0,.08),
    0 12px 40px rgba(0,0,0,.04) !important;
}
html.light .logs-card > div:first-child > div:first-child > div:first-child,
html[data-theme="light"] .logs-card > div:first-child > div:first-child > div:first-child {
  color: var(--ink-1, #1C1917) !important;
}
html.light .logs-card .text-muted,
html[data-theme="light"] .logs-card .text-muted {
  color: var(--ink-3, #A8A29E) !important;
}
html.light .logs-pill,
html[data-theme="light"] .logs-pill {
  background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(74,222,128,.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.2) !important;
}
html.light .logs-field > label,
html[data-theme="light"] .logs-field > label {
  color: var(--ink-3, #A8A29E) !important;
}
html.light .logs-field input[type="text"],
html[data-theme="light"] .logs-field input[type="text"],
html.light #logs-search,
html[data-theme="light"] #logs-search {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-1, #1C1917) !important;
}
html.light .logs-field input[type="text"]:hover,
html[data-theme="light"] .logs-field input[type="text"]:hover,
html.light #logs-search:hover,
html[data-theme="light"] #logs-search:hover {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important;
}
html.light .logs-field input[type="text"]:focus,
html[data-theme="light"] .logs-field input[type="text"]:focus,
html.light #logs-search:focus,
html[data-theme="light"] #logs-search:focus {
  box-shadow: 0 0 0 3px rgba(150,117,10,.12), inset 0 0 0 1px rgba(150,117,10,.25) !important;
}
html.light .logs-field input[type="text"]::placeholder,
html[data-theme="light"] .logs-field input[type="text"]::placeholder,
html.light #logs-search::placeholder,
html[data-theme="light"] #logs-search::placeholder {
  color: var(--ink-4, #D6D3D1) !important;
}
html.light .logs-field select,
html[data-theme="light"] .logs-field select,
html.light #logs-sort,
html[data-theme="light"] #logs-sort {
  background-color: rgba(0,0,0,.02) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-1, #1C1917) !important;
  color-scheme: light !important;
}
html.light .logs-field select:hover,
html[data-theme="light"] .logs-field select:hover,
html.light #logs-sort:hover,
html[data-theme="light"] #logs-sort:hover {
  background-color: rgba(0,0,0,.04) !important;
}
html.light .logs-quick .btn,
html[data-theme="light"] .logs-quick .btn,
html.light .logs-quick button,
html[data-theme="light"] .logs-quick button {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-2, #57534E) !important;
}
html.light .logs-quick .btn:hover,
html[data-theme="light"] .logs-quick .btn:hover,
html.light .logs-quick button:hover,
html[data-theme="light"] .logs-quick button:hover {
  background: rgba(0,0,0,.06) !important;
  color: var(--ink-1, #1C1917) !important;
}
html.light .logs-quick .btn.active,
html[data-theme="light"] .logs-quick .btn.active,
html.light .logs-quick button.active,
html[data-theme="light"] .logs-quick button.active {
  background: linear-gradient(135deg, rgba(150,117,10,.12), rgba(150,117,10,.06)) !important;
  color: var(--gold, #96750A) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2) !important;
}
html.light .logs-field input[type="datetime-local"],
html[data-theme="light"] .logs-field input[type="datetime-local"],
html.light #logs-from,
html[data-theme="light"] #logs-from,
html.light #logs-to,
html[data-theme="light"] #logs-to {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-1, #1C1917) !important;
  color-scheme: light !important;
}
html.light #logs-apply,
html[data-theme="light"] #logs-apply {
  background: linear-gradient(135deg, #A07830 0%, #96750A 100%) !important;
  color: #FFF !important;
  box-shadow:
    0 2px 12px rgba(150,117,10,.2),
    0 0 30px rgba(150,117,10,.08) !important;
}
html.light .logs-actions-label,
html[data-theme="light"] .logs-actions-label {
  color: var(--ink-3, #A8A29E) !important;
}
html.light .logs-action-chip,
html[data-theme="light"] .logs-action-chip {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.05)) !important;
  color: var(--gold, #96750A) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2) !important;
}
html.light .logs-action-chip.off,
html[data-theme="light"] .logs-action-chip.off {
  background: rgba(0,0,0,.03) !important;
  color: var(--ink-3, #A8A29E) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .logs-action-count,
html[data-theme="light"] .logs-action-count {
  background: rgba(0,0,0,.08) !important;
}
html.light .logs-action-chip.off .logs-action-count,
html[data-theme="light"] .logs-action-chip.off .logs-action-count {
  background: rgba(0,0,0,.05) !important;
}
html.light .logs-wrap > .card:last-of-type,
html[data-theme="light"] .logs-wrap > .card:last-of-type {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 20px rgba(0,0,0,.06),
    0 12px 40px rgba(0,0,0,.03) !important;
}
html.light .logs-table thead tr,
html[data-theme="light"] .logs-table thead tr {
  background: rgba(0,0,0,.02) !important;
}
html.light .logs-table thead th,
html[data-theme="light"] .logs-table thead th {
  color: var(--ink-3, #A8A29E) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .logs-table tbody tr,
html[data-theme="light"] .logs-table tbody tr {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
html.light .logs-table tbody tr:hover,
html[data-theme="light"] .logs-table tbody tr:hover {
  background: rgba(0,0,0,.02) !important;
}
html.light .logs-table tbody td,
html[data-theme="light"] .logs-table tbody td {
  color: var(--ink-2, #57534E) !important;
}
html.light .logs-table tbody td:first-child,
html[data-theme="light"] .logs-table tbody td:first-child {
  color: var(--ink-3, #A8A29E) !important;
}
html.light .logs-table tbody td:nth-child(2),
html[data-theme="light"] .logs-table tbody td:nth-child(2),
html.light .logs-table tbody td:nth-child(4),
html[data-theme="light"] .logs-table tbody td:nth-child(4) {
  color: var(--ink-1, #1C1917) !important;
}
html.light .logs-details summary,
html[data-theme="light"] .logs-details summary {
  color: var(--ink-3, #A8A29E) !important;
  background: rgba(0,0,0,.03) !important;
}
html.light .logs-details summary:hover,
html[data-theme="light"] .logs-details summary:hover {
  background: rgba(0,0,0,.06) !important;
  color: var(--ink-2, #57534E) !important;
}
html.light .logs-row-meta,
html[data-theme="light"] .logs-row-meta {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-3, #A8A29E) !important;
}
html.light .logs-footer,
html[data-theme="light"] .logs-footer {
  border-top-color: rgba(0,0,0,.06) !important;
  background: rgba(0,0,0,.02) !important;
}
html.light .logs-count,
html[data-theme="light"] .logs-count,
html.light #logs-count,
html[data-theme="light"] #logs-count {
  color: var(--ink-3, #A8A29E) !important;
}
html.light #logs-load-more,
html[data-theme="light"] #logs-load-more {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-2, #57534E) !important;
}
html.light #logs-load-more:hover:not(:disabled),
html[data-theme="light"] #logs-load-more:hover:not(:disabled) {
  background: rgba(0,0,0,.08) !important;
  color: var(--ink-1, #1C1917) !important;
}
html.light .logs-empty,
html[data-theme="light"] .logs-empty {
  color: var(--ink-3, #A8A29E) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — COMPREHENSIVE GLASS THEME OVERHAUL
   Complete restyle following Shemify Glass Theme specification
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. HORIZONTAL TABS — Glass pill active state with gold accent
   ───────────────────────────────────────────────────────────────────────────── */
.settings-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 36px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.008) 100%) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.3) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.settings-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .25s cubic-bezier(.34,1.2,.64,1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.settings-nav-btn:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  transform: translateY(-1px) !important;
}

.settings-nav-btn.active {
  background: linear-gradient(135deg, rgba(200,160,76,.14) 0%, rgba(200,160,76,.06) 100%) !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.18),
    0 2px 12px rgba(200,160,76,.12),
    0 0 20px rgba(200,160,76,.06) !important;
}

.settings-nav-tag {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  padding: 3px 7px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink-4) !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

.settings-nav-btn.active .settings-nav-tag {
  background: linear-gradient(135deg, rgba(200,160,76,.2) 0%, rgba(200,160,76,.1) 100%) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 8px rgba(200,160,76,.15) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. SELECT DROPDOWNS — Custom chevron, glass background, dark color-scheme
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page select,
.settings-content select,
.field-group select,
select.input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 38px !important;
  background-color: rgba(255,255,255,.03) !important;
  color-scheme: dark !important;
}

.settings-page select:hover,
.settings-content select:hover,
.field-group select:hover {
  background-color: rgba(255,255,255,.05) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C8A04C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
}

.settings-page select:focus,
.settings-content select:focus,
.field-group select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C8A04C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. FORM INPUTS — Glass gradient background with proper focus states
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.settings-page textarea,
.settings-content textarea {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--ink-1) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
}

.settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.settings-page textarea:hover,
.settings-content textarea:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.settings-page textarea:focus,
.settings-content textarea:focus {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.25) !important;
  outline: none !important;
}

/* Select inputs same styling — combine gradient + chevron */
.settings-page select,
.settings-content select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 14px center, 0 0 !important;
  background-size: 12px, 100% 100% !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  padding-right: 38px !important;
  font-size: 14px !important;
  color: var(--ink-1) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
}

.settings-page select:hover,
.settings-content select:hover {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C8A04C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.settings-page select:focus,
.settings-content select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23C8A04C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.25) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. FORM LABELS — Uppercase with proper letter-spacing and weight
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page label,
.settings-content label,
.field-group > label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Hint text under fields */
.settings-page .hint,
.settings-content .hint,
.field-hint {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. PRIMARY BUTTONS — Gold gradient with radiating glow, NEVER full-width
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page .btn-primary,
.settings-content .btn-primary,
.settings-page button[type="submit"]:not(.btn-secondary):not(.btn-danger),
.settings-content button[type="submit"]:not(.btn-secondary):not(.btn-danger) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  min-height: 44px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  background: linear-gradient(135deg, var(--gold-bright, #D4B060) 0%, var(--gold, #C8A04C) 100%) !important;
  color: var(--void, #060608) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  width: auto !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.25),
    0 0 30px rgba(200,160,76,.1),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
}

.settings-page .btn-primary:hover,
.settings-content .btn-primary:hover,
.settings-page button[type="submit"]:not(.btn-secondary):not(.btn-danger):hover,
.settings-content button[type="submit"]:not(.btn-secondary):not(.btn-danger):hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 6px 28px rgba(200,160,76,.4),
    0 0 60px rgba(200,160,76,.15),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.settings-page .btn-primary:active,
.settings-content .btn-primary:active,
.settings-page button[type="submit"]:not(.btn-secondary):not(.btn-danger):active,
.settings-content button[type="submit"]:not(.btn-secondary):not(.btn-danger):active {
  transform: scale(.97) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. SECONDARY/GHOST BUTTONS — Subtle glass with inset glow border
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page .btn-secondary,
.settings-content .btn-secondary,
.settings-page .btn:not(.btn-primary):not(.btn-danger),
.settings-content .btn:not(.btn-primary):not(.btn-danger) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  min-height: 42px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  width: auto !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
}

.settings-page .btn-secondary:hover,
.settings-content .btn-secondary:hover,
.settings-page .btn:not(.btn-primary):not(.btn-danger):hover,
.settings-content .btn:not(.btn-primary):not(.btn-danger):hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink-1) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. DANGER BUTTONS — Red glow variant
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page .btn-danger,
.settings-content .btn-danger {
  background: rgba(248,113,113,.12) !important;
  color: var(--red, #F87171) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18) !important;
}

.settings-page .btn-danger:hover,
.settings-content .btn-danger:hover {
  background: rgba(248,113,113,.2) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.25), 0 4px 16px rgba(248,113,113,.15) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. SMALL BUTTONS — Compact variant
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page .btn-small,
.settings-content .btn-small {
  padding: 8px 16px !important;
  min-height: 36px !important;
  font-size: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. SECTION HEADERS & BADGES — Premium badge with gold styling
   ───────────────────────────────────────────────────────────────────────────── */
.settings-section-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.settings-section-title {
  font-size: 24px !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
  color: var(--ink-1) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}

.settings-section-subtitle {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}

.settings-badge-premium {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.06) 100%) !important;
  color: var(--gold) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 0 12px rgba(200,160,76,.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. FORM CARDS — Glass panels with gradient and inset glow border
   ───────────────────────────────────────────────────────────────────────────── */
.settings-panel form.form-grid,
.settings-panel > form,
.settings-subsection {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.012) 100%) !important;
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 12px rgba(0,0,0,.2),
    0 8px 32px rgba(0,0,0,.15) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  margin-bottom: 28px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.settings-subsection-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.01em !important;
}

.settings-subsection-note {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. LOCATIONS LIST — Glass cards with hover effects
   ───────────────────────────────────────────────────────────────────────────── */
.settings-location-list > div,
#settings-locations-list > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.12) !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  transition: all .22s cubic-bezier(.34,1.2,.64,1) !important;
}

.settings-location-list > div:hover,
#settings-locations-list > div:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.18) !important;
  transform: translateY(-1px) !important;
}

/* Location badges */
.settings-location-list span[style*="background"],
#settings-locations-list span[style*="background"] {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. PAYOUTS PAGE — Stat cards with glass float
   ───────────────────────────────────────────────────────────────────────────── */
/* Stat card wrapper */
.settings-content > div:has(> div > [style*="AVAILABLE"]),
.settings-content > div:has(> div > [style*="PENDING"]),
.settings-content > div:has(> div > [style*="RESERVE"]),
[class*="payout"] .stats-row,
.settings-panel[data-panel="payouts"] > div:first-of-type {
  display: flex !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
}

/* Individual stat cards on Payouts */
.settings-panel[data-panel="payouts"] .settings-subsection:has([style*="$"]),
div[style*="AVAILABLE"],
div[style*="PENDING"],
div[style*="RESERVE"] {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.012) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 16px rgba(0,0,0,.2),
    0 16px 48px rgba(0,0,0,.15) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
}

/* Stat labels */
.settings-panel[data-panel="payouts"] [style*="font-size: 10px"],
.settings-panel[data-panel="payouts"] [style*="font-size: 11px"],
.settings-panel[data-panel="payouts"] [style*="font-size: 12px"][style*="uppercase"],
[style*="AVAILABLE"],
[style*="PENDING"],
[style*="RESERVE"] {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

/* Stat values — large thin numbers */
.settings-panel[data-panel="payouts"] [style*="font-size: 24px"],
.settings-panel[data-panel="payouts"] [style*="font-size: 28px"],
.settings-panel[data-panel="payouts"] [style*="font-size: 32px"],
.settings-panel[data-panel="payouts"] [style*="$0.00"],
.settings-panel[data-panel="payouts"] [style*="$"] {
  font-size: 36px !important;
  font-weight: 200 !important;
  letter-spacing: -.03em !important;
  color: var(--ink-1) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.4), 0 0 40px rgba(200,160,76,.03) !important;
}

/* Stat hints */
.settings-panel[data-panel="payouts"] .hint,
.settings-panel[data-panel="payouts"] [style*="color: #666"],
.settings-panel[data-panel="payouts"] [style*="color: rgb(102"] {
  font-size: 10px !important;
  color: var(--ink-4) !important;
  margin-top: 6px !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. PAYOUTS DESTINATION & WITHDRAW CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.settings-panel[data-panel="payouts"] .settings-subsection {
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 12px rgba(0,0,0,.18) !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

/* Withdraw fee line items */
.settings-panel[data-panel="payouts"] [style*="border-bottom"],
.settings-panel[data-panel="payouts"] .fee-row {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
}

/* History section */
.settings-panel[data-panel="payouts"] h3,
.settings-panel[data-panel="payouts"] .history-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink-1) !important;
  margin-bottom: 8px !important;
}

/* Empty state */
.settings-panel[data-panel="payouts"] .empty-state,
.settings-panel[data-panel="payouts"] [style*="No payouts"] {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  font-style: italic !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. FILE UPLOAD ZONE — Dashed border with gold hover
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page input[type="file"],
.settings-content input[type="file"] {
  padding: 32px 24px !important;
  font-size: 13px !important;
  border: 2px dashed rgba(255,255,255,.1) !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  cursor: pointer !important;
  transition: all .3s cubic-bezier(.34,1.2,.64,1) !important;
  text-align: center !important;
  width: 100% !important;
}

.settings-page input[type="file"]:hover,
.settings-content input[type="file"]:hover {
  border-color: var(--gold) !important;
  background: rgba(200,160,76,.04) !important;
  color: var(--ink-2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. LOGO PREVIEW — Rounded with subtle border
   ───────────────────────────────────────────────────────────────────────────── */
#settings-biz-logo-preview,
.settings-logo-preview,
img[src*="logo"] {
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.2) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. TABLES INSIDE SETTINGS — Glass styling
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page table,
.settings-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

.settings-page table th,
.settings-content table th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-3) !important;
  padding: 12px 14px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: transparent !important;
}

.settings-page table td,
.settings-content table td {
  padding: 14px !important;
  color: var(--ink-2) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  vertical-align: middle !important;
}

.settings-page table tbody tr:hover td,
.settings-content table tbody tr:hover td {
  background: rgba(255,255,255,.02) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. BADGES & PILLS — Status indicators
   ───────────────────────────────────────────────────────────────────────────── */
.settings-page .badge,
.settings-content .badge,
.settings-page .pill,
.settings-content .pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
}

.pill-success,
.badge-success,
[class*="success"] {
  background: rgba(74,222,128,.12) !important;
  color: var(--green, #4ADE80) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.15) !important;
}

.pill-info,
.badge-info,
[class*="info"] {
  background: rgba(96,165,250,.12) !important;
  color: var(--blue, #60A5FA) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.15) !important;
}

.pill-warning,
.badge-warning,
[class*="warning"] {
  background: rgba(251,191,36,.12) !important;
  color: var(--amber, #FBBF24) !important;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.15) !important;
}

.pill-danger,
.badge-danger,
[class*="danger"]:not(button) {
  background: rgba(248,113,113,.12) !important;
  color: var(--red, #F87171) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Horizontal tabs light mode */
html.light .settings-nav,
html[data-theme="light"] .settings-nav {
  background: linear-gradient(180deg, rgba(0,0,0,.015) 0%, rgba(0,0,0,.008) 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 1px 0 rgba(0,0,0,.02) !important;
}

html.light .settings-nav-btn,
html[data-theme="light"] .settings-nav-btn {
  color: var(--ink-3) !important;
}

html.light .settings-nav-btn:hover,
html[data-theme="light"] .settings-nav-btn:hover {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-2) !important;
}

html.light .settings-nav-btn.active,
html[data-theme="light"] .settings-nav-btn.active {
  background: linear-gradient(135deg, rgba(150,117,10,.12) 0%, rgba(150,117,10,.05) 100%) !important;
  color: #96750A !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.15),
    0 2px 12px rgba(150,117,10,.1) !important;
}

html.light .settings-nav-tag,
html[data-theme="light"] .settings-nav-tag {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-3) !important;
}

html.light .settings-nav-btn.active .settings-nav-tag,
html[data-theme="light"] .settings-nav-btn.active .settings-nav-tag {
  background: linear-gradient(135deg, rgba(150,117,10,.15) 0%, rgba(150,117,10,.08) 100%) !important;
  color: #96750A !important;
}

/* Form inputs light mode (excluding selects - handled separately) */
html.light .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.light .settings-page textarea,
html[data-theme="light"] .settings-page textarea {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04) !important;
  color: var(--ink-1) !important;
}

html.light .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
html[data-theme="light"] .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
html.light .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
html[data-theme="light"] .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover {
  background: rgba(255,255,255,.95) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.06) !important;
}

html.light .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="light"] .settings-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html.light .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="light"] .settings-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
  box-shadow: 0 0 0 3px rgba(150,117,10,.12), inset 0 0 0 1px rgba(150,117,10,.2) !important;
}

/* Select dropdowns light mode — combine chevron + gradient */
html.light .settings-page select,
html[data-theme="light"] .settings-page select,
html.light .settings-content select,
html[data-theme="light"] .settings-content select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 14px center, 0 0 !important;
  background-size: 12px, 100% 100% !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04) !important;
  color: var(--ink-1) !important;
  color-scheme: light !important;
}

html.light .settings-page select:hover,
html[data-theme="light"] .settings-page select:hover,
html.light .settings-content select:hover,
html[data-theme="light"] .settings-content select:hover {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2396750A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.06) !important;
}

html.light .settings-page select:focus,
html[data-theme="light"] .settings-page select:focus,
html.light .settings-content select:focus,
html[data-theme="light"] .settings-content select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2396750A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%) !important;
  box-shadow: 0 0 0 3px rgba(150,117,10,.12), inset 0 0 0 1px rgba(150,117,10,.2) !important;
}

/* Labels light mode */
html.light .settings-page label,
html[data-theme="light"] .settings-page label,
html.light .settings-content label,
html[data-theme="light"] .settings-content label {
  color: var(--ink-2) !important;
}

/* Primary buttons light mode */
html.light .settings-page .btn-primary,
html[data-theme="light"] .settings-page .btn-primary,
html.light .settings-content .btn-primary,
html[data-theme="light"] .settings-content .btn-primary,
html.light .settings-page button[type="submit"]:not(.btn-secondary):not(.btn-danger),
html[data-theme="light"] .settings-page button[type="submit"]:not(.btn-secondary):not(.btn-danger) {
  background: linear-gradient(135deg, #A07830 0%, #96750A 100%) !important;
  color: #fff !important;
  box-shadow:
    0 2px 12px rgba(150,117,10,.2),
    0 0 30px rgba(150,117,10,.08),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

html.light .settings-page .btn-primary:hover,
html[data-theme="light"] .settings-page .btn-primary:hover,
html.light .settings-content .btn-primary:hover,
html[data-theme="light"] .settings-content .btn-primary:hover {
  background: linear-gradient(135deg, #7D6208 0%, #6B5507 100%) !important;
  box-shadow:
    0 6px 28px rgba(150,117,10,.3),
    0 0 60px rgba(150,117,10,.1) !important;
}

/* Secondary buttons light mode */
html.light .settings-page .btn-secondary,
html[data-theme="light"] .settings-page .btn-secondary,
html.light .settings-content .btn-secondary,
html[data-theme="light"] .settings-content .btn-secondary,
html.light .settings-page .btn:not(.btn-primary):not(.btn-danger),
html[data-theme="light"] .settings-page .btn:not(.btn-primary):not(.btn-danger) {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04) !important;
}

html.light .settings-page .btn-secondary:hover,
html[data-theme="light"] .settings-page .btn-secondary:hover,
html.light .settings-content .btn-secondary:hover,
html[data-theme="light"] .settings-content .btn-secondary:hover {
  background: rgba(0,0,0,.08) !important;
  color: var(--ink-1) !important;
}

/* Section cards light mode */
html.light .settings-panel form.form-grid,
html[data-theme="light"] .settings-panel form.form-grid,
html.light .settings-panel > form,
html[data-theme="light"] .settings-panel > form,
html.light .settings-subsection,
html[data-theme="light"] .settings-subsection {
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.7) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 2px 12px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.04) !important;
}

/* Location list light mode */
html.light .settings-location-list > div,
html[data-theme="light"] .settings-location-list > div,
html.light #settings-locations-list > div,
html[data-theme="light"] #settings-locations-list > div {
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important;
}

html.light .settings-location-list > div:hover,
html[data-theme="light"] .settings-location-list > div:hover,
html.light #settings-locations-list > div:hover,
html[data-theme="light"] #settings-locations-list > div:hover {
  background: rgba(255,255,255,.95) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.08) !important;
}

/* Premium badge light mode */
html.light .settings-badge-premium,
html[data-theme="light"] .settings-badge-premium {
  background: linear-gradient(135deg, rgba(150,117,10,.12) 0%, rgba(150,117,10,.05) 100%) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12) !important;
}

/* File input light mode */
html.light .settings-page input[type="file"],
html[data-theme="light"] .settings-page input[type="file"],
html.light .settings-content input[type="file"],
html[data-theme="light"] .settings-content input[type="file"] {
  border-color: rgba(0,0,0,.12) !important;
  color: var(--ink-2) !important;
}

html.light .settings-page input[type="file"]:hover,
html[data-theme="light"] .settings-page input[type="file"]:hover {
  border-color: #96750A !important;
  background: rgba(150,117,10,.04) !important;
}

/* Table light mode */
html.light .settings-page table th,
html[data-theme="light"] .settings-page table th,
html.light .settings-content table th,
html[data-theme="light"] .settings-content table th {
  border-bottom-color: rgba(0,0,0,.08) !important;
  color: var(--ink-2) !important;
}

html.light .settings-page table td,
html[data-theme="light"] .settings-page table td,
html.light .settings-content table td,
html[data-theme="light"] .settings-content table td {
  border-bottom-color: rgba(0,0,0,.04) !important;
  color: var(--ink-2) !important;
}

html.light .settings-page table tbody tr:hover td,
html[data-theme="light"] .settings-page table tbody tr:hover td {
  background: rgba(0,0,0,.02) !important;
}

/* Hints light mode */
html.light .settings-page .hint,
html[data-theme="light"] .settings-page .hint,
html.light .settings-content .hint,
html[data-theme="light"] .settings-content .hint,
html.light .field-hint,
html[data-theme="light"] .field-hint {
  color: var(--ink-3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   TEAM PAGE — Complete Glass Theme Rework
   Every component from ground up: topbar, metrics, tabs, cards, forms, buttons
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Team Page Container
   ───────────────────────────────────────────── */
#team-page {
  padding: 24px !important;
}

#team-page .team-shell,
#team-page .team2-shell {
  padding: 0 !important;
  /* Inner shells don't need padding — outer container handles it */
}

/* ─────────────────────────────────────────────
   Top Bar — Title block + Action buttons
   ───────────────────────────────────────────── */
#team-page .team2-topbar,
.team2-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.team2-titleblock {
  flex: 1 !important;
  min-width: 200px !important;
}

.team2-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.03em !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}

.team2-subtitle {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────────
   Page Headers — Consistent title + subtitle
   ───────────────────────────────────────────── */
.dash-page-header,
.pos-page-header,
.reports-page-header,
.settings-page-header {
  margin-bottom: 28px !important;
  padding: 0 !important;
}
.dash-page-title,
.pos-page-title,
.reports-title-row,
.settings-page-title {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
  margin: 0 0 6px 0 !important;
}
.dash-page-subtitle,
.pos-page-subtitle,
.reports-page-subtitle,
.settings-page-subtitle {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────
   Debts-style Page Headers — TimeClock, GiftCards, Logs, etc.
   ───────────────────────────────────────────── */
.debts-topbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}
.debts-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
  margin: 0 0 4px 0 !important;
}
.debts-subtitle {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}
/* Light mode overrides */
html.light .debts-title,
html[data-theme="light"] .debts-title {
  color: var(--ink) !important;
  text-shadow: none !important;
}
html.light .debts-subtitle,
html[data-theme="light"] .debts-subtitle {
  color: var(--ink-3) !important;
}

/* ─────────────────────────────────────────────
   Time Clock Page — Full width, contained table
   ───────────────────────────────────────────── */
#timeclock-page {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}
/* Glass cards — let warm body background show through */
#dashboard-placeholder #timeclock-page .card,
#timeclock-page .card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2) !important;
  border-radius: var(--r-lg) !important;
}
/* Admin table — contained height with scroll */
#timeclock-admin-wrap {
  max-height: calc(100vh - 320px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
#timeclock-admin-wrap > div:last-child {
  flex: 1 !important;
  overflow-y: auto !important;
  max-height: 100% !important;
}
/* Table header styling — transparent glass to let card bg show */
#timeclock-admin-wrap .table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  position: sticky !important;
  top: 0 !important;
  background: rgba(255,255,255,.02) !important;
  z-index: 1 !important;
}
/* Table rows */
#timeclock-admin-wrap .table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}
#timeclock-admin-wrap .table tbody tr:hover {
  background: rgba(255,255,255,.02) !important;
}
#timeclock-admin-wrap .table td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  vertical-align: middle !important;
}
/* Light mode */
html.light #timeclock-admin-wrap .table thead th,
html[data-theme="light"] #timeclock-admin-wrap .table thead th {
  background: rgba(0,0,0,.02) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light #timeclock-admin-wrap .table tbody tr,
html[data-theme="light"] #timeclock-admin-wrap .table tbody tr {
  border-bottom-color: rgba(0,0,0,.04) !important;
}
html.light #timeclock-admin-wrap .table tbody tr:hover,
html[data-theme="light"] #timeclock-admin-wrap .table tbody tr:hover {
  background: rgba(0,0,0,.02) !important;
}

/* ─────────────────────────────────────────────
   Page Help Icon — Lightbulb next to title
   ───────────────────────────────────────────── */
.page-help-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -2px !important;
}
.page-help-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--ink-3) !important;
  fill: none !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
}
.page-help-icon:hover {
  background: rgba(200,160,76,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 20px rgba(200,160,76,.1) !important;
  transform: scale(1.08) !important;
}
.page-help-icon:hover svg {
  stroke: var(--gold) !important;
}
.page-help-icon:active {
  transform: scale(.95) !important;
}

/* Light mode */
html.light .page-help-icon,
html[data-theme="light"] .page-help-icon {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light .page-help-icon:hover,
html[data-theme="light"] .page-help-icon:hover {
  background: rgba(150,117,10,.1) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2), 0 0 12px rgba(150,117,10,.08) !important;
}

/* ─────────────────────────────────────────────
   Page Help Modal — Glass modal for help content
   ───────────────────────────────────────────── */
.help-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}
.help-modal-overlay.open {
  display: flex !important;
  opacity: 1 !important;
}

.help-modal-panel {
  background: linear-gradient(180deg, var(--floating), var(--elevated)) !important;
  border-radius: var(--r-xl) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5),
    0 40px 80px rgba(0,0,0,.3),
    0 0 60px rgba(200,160,76,.04) !important;
  max-width: 640px !important;
  width: 92vw !important;
  max-height: 85vh !important;
  overflow: hidden !important;
  animation: modal-spring-in .45s cubic-bezier(.34,1.4,.64,1) forwards !important;
}

.help-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.help-modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.help-modal-title svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--gold) !important;
  fill: none !important;
}
.help-modal-close {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  color: var(--ink-3) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}
.help-modal-close:hover {
  background: rgba(248,113,113,.1) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}

.help-modal-body {
  padding: 20px 24px 28px !important;
  overflow-y: auto !important;
  max-height: calc(85vh - 80px) !important;
}

.help-modal-subtitle {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  margin-bottom: 20px !important;
  line-height: 1.5 !important;
}

.help-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

.help-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border-radius: var(--r) !important;
  padding: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
}
.help-card:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 4px 16px rgba(0,0,0,.15) !important;
  transform: translateY(-2px) !important;
}
.help-card-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
}
.help-card-desc {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}
.help-card ul {
  margin: 0 !important;
  padding-left: 16px !important;
  font-size: 11px !important;
  color: var(--ink-2) !important;
  line-height: 1.6 !important;
}
.help-card li {
  margin-bottom: 3px !important;
}

/* Light mode */
html.light .help-modal-panel,
html[data-theme="light"] .help-modal-panel {
  background: linear-gradient(180deg, var(--floating), var(--base)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.12),
    0 40px 80px rgba(0,0,0,.08) !important;
}
html.light .help-modal-header,
html[data-theme="light"] .help-modal-header {
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .help-card,
html[data-theme="light"] .help-card {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

.team2-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* ─────────────────────────────────────────────
   Upgrade / Permission Hint Boxes
   ───────────────────────────────────────────── */
#team-upgrade-hint,
#team-permission-hint,
.team2-hint {
  background: linear-gradient(135deg, rgba(200,160,76,.08) 0%, rgba(200,160,76,.03) 100%) !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 16px 20px !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12) !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
}

#team-upgrade-hint strong,
#team-permission-hint strong {
  color: var(--gold) !important;
}

/* ─────────────────────────────────────────────
   Metrics Strip — Stats cards row
   ───────────────────────────────────────────── */
.team2-metrics,
#team2-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.team2-metric {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 16px rgba(0,0,0,.2),
    0 12px 40px rgba(0,0,0,.15) !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle ambient glow at top */
.team2-metric::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent) !important;
}

.team2-metric-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

.team2-metric-value {
  font-size: 36px !important;
  font-weight: 200 !important;
  color: var(--ink) !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.4), 0 0 40px rgba(200,160,76,.03) !important;
}

.team2-metric-sub {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  font-weight: 400 !important;
}

/* ─────────────────────────────────────────────
   Main Tabs — Directory, Org chart, Time off, Payroll
   ───────────────────────────────────────────── */
#team2-tabs,
.team2-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.team2-tab {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .2s var(--spring) !important;
  min-height: auto !important;
  white-space: nowrap !important;
}

.team2-tab:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.04) !important;
}

.team2-tab.active {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.25),
    0 0 30px rgba(200,160,76,.08),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* ─────────────────────────────────────────────
   Layout — Cards grid with sidebar
   ───────────────────────────────────────────── */
.team2-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 16px !important;
  align-items: start !important;
}

@media (max-width: 1100px) {
  .team2-layout {
    grid-template-columns: 1fr !important;
  }
}

.team2-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ─────────────────────────────────────────────
   Responsive Grid Layouts — Side-by-side on wide, stacked on narrow
   ───────────────────────────────────────────── */
.team2-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.team2-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
/* Auto-fit: fills available space, min 340px per column */
.team2-grid-auto {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  .team2-grid-2 { grid-template-columns: 1fr !important; }
  .team2-grid-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .team2-grid-3 { grid-template-columns: 1fr !important; }
  .team2-grid-auto { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────
   Glass Cards — Main containers
   ───────────────────────────────────────────── */
.team2-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 20px rgba(0,0,0,.25),
    0 12px 48px rgba(0,0,0,.2) !important;
  position: relative !important;
}

/* Top edge highlight */
.team2-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20px !important;
  right: 20px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  border-radius: 1px !important;
}

.team2-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}

.team2-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.015em !important;
  margin-bottom: 4px !important;
}

.team2-card-sub {
  font-size: 12px !important;
  color: var(--ink-4) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.team2-card-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Hide the old inline Add Employee card — now handled by modal */
#team-add-card {
  display: none !important;
}

/* Team modals — hidden by default */
#team-add-employee-modal,
#team-add-timeoff-modal {
  display: none;
}

/* Glass modal selects — match prototype */
#team-add-employee-modal .modal-select,
#team-add-timeoff-modal .modal-select,
.modal-overlay .modal-select {
  width: 100% !important;
  padding: 10px 36px 10px 14px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  background-color: rgba(255,255,255,.03) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  min-height: 42px !important;
  color-scheme: dark !important;
  transition: all .2s var(--spring) !important;
}

.modal-overlay .modal-select:hover {
  background-color: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}

.modal-overlay .modal-select:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

html.light .modal-overlay .modal-select,
html[data-theme="light"] .modal-overlay .modal-select {
  background-color: rgba(0,0,0,.04) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color-scheme: light !important;
}

/* Time off list card in Directory */
#team-timeoff-list-card {
  margin-top: 16px !important;
}

#team-timeoff-list-card .settings-mini-table-wrapper {
  margin-top: 16px !important;
}

/* ─────────────────────────────────────────────
   Toolbar — Search, filters, view toggle
   ───────────────────────────────────────────── */
.team2-toolbar {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.team2-toolbar .field-group {
  margin-bottom: 0 !important;
}

.team2-toolbar label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-4) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.team2-toolbar input[type="text"],
.team2-toolbar input[type="search"],
#team-member-search {
  padding: 10px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 42px !important;
  width: 100% !important;
  transition: all .2s var(--spring) !important;
}

.team2-toolbar input:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}

.team2-toolbar input:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

.team2-toolbar input::placeholder {
  color: var(--ink-4) !important;
}

/* Toolbar select dropdowns */
.team2-toolbar select,
#team-member-filter,
#team-member-status,
#team-member-dept {
  padding: 10px 36px 10px 14px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 12px center, 0 0 !important;
  background-size: 12px, 100% 100% !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 42px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
}

.team2-toolbar select:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}

.team2-toolbar select:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* View toggle buttons */
.team2-view-toggle {
  display: inline-flex !important;
  gap: 3px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.team2-view-toggle .btn {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  min-height: auto !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

.team2-view-toggle .btn:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.03) !important;
}

.team2-view-toggle .btn.active {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* ─────────────────────────────────────────────
   Employee Directory Cards Grid
   ───────────────────────────────────────────── */
.team2-directory-cards,
#team-directory-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

/* Individual employee card */
.team2-emp-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  border: none !important;
  border-radius: var(--r) !important;
  padding: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
  position: relative !important;
}

.team2-emp-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.12),
    0 8px 24px rgba(0,0,0,.25),
    0 0 40px rgba(200,160,76,.03) !important;
}

.team2-emp-card.active,
.team2-emp-card[class*="selected"],
.team2-emp-card.selected {
  box-shadow:
    inset 0 0 0 2px rgba(200,160,76,.3),
    0 4px 20px rgba(200,160,76,.15) !important;
}

.team2-emp-head {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.team2-emp-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.08) 100%) !important;
  color: var(--gold) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
}

.team2-emp-card-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.team2-emp-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.team2-emp-sub {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tags row in employee card */
.team2-emp-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.team-tag {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink-3) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

.team-tag.status-active {
  background: rgba(74,222,128,.1) !important;
  color: var(--green) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.15) !important;
}

.team-tag.status-leave {
  background: rgba(251,191,36,.1) !important;
  color: var(--amber) !important;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.15) !important;
}

.team-tag.status-terminated {
  background: rgba(248,113,113,.1) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}

/* Action buttons in employee card */
.team2-emp-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: auto !important;
}

/* ─────────────────────────────────────────────
   Employee Profile Card (sidebar)
   ───────────────────────────────────────────── */
#team-profile-card {
  min-height: 200px !important;
}

.team-profile-head {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.team-profile-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(200,160,76,.2) 0%, rgba(200,160,76,.1) 100%) !important;
  color: var(--gold) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 4px 16px rgba(200,160,76,.1) !important;
}

.team-profile-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.team-profile-meta {
  font-size: 12px !important;
  color: var(--ink-4) !important;
}

.team-profile-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

/* Profile tabs */
.team-profile-tabs,
#team-profile-tabs {
  display: inline-flex !important;
  gap: 3px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.team-profile-tab {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}

.team-profile-tab:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.03) !important;
}

.team-profile-tab.active {
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.08) 100%) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
}

/* Profile panels */
.team-profile-panel {
  margin-top: 8px !important;
}

/* ─────────────────────────────────────────────
   Form Elements in Team Page
   ───────────────────────────────────────────── */
#team-page .field-group {
  margin-bottom: 14px !important;
}

#team-page label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-4) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

#team-page input[type="text"],
#team-page input[type="email"],
#team-page input[type="password"],
#team-page input[type="number"],
#team-page input[type="tel"],
#team-page input[type="date"],
#team-page textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 42px !important;
  transition: all .2s var(--spring) !important;
}

#team-page input:hover,
#team-page textarea:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}

#team-page input:focus,
#team-page textarea:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

#team-page input::placeholder,
#team-page textarea::placeholder {
  color: var(--ink-4) !important;
}

/* Date inputs */
#team-page input[type="date"] {
  color-scheme: dark !important;
}

#team-page input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) !important;
  opacity: .6 !important;
  cursor: pointer !important;
}

/* Select dropdowns in team page */
#team-page select,
.team-native-select {
  width: 100% !important;
  padding: 10px 36px 10px 14px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 12px center, 0 0 !important;
  background-size: 12px, 100% 100% !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 42px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
  color-scheme: dark !important;
}

#team-page select:hover,
.team-native-select:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}

#team-page select:focus,
.team-native-select:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* Form grid */
#team-page .form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}

@media (max-width: 600px) {
  #team-page .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Field inline (button row) */
#team-page .field-inline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Team mini row */
.team-mini-row {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
}

/* ─────────────────────────────────────────────
   Choice Row — Access type / Role selector
   ───────────────────────────────────────────── */
.team-choice-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.team-choice {
  padding: 12px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  transition: all .2s var(--spring) !important;
}

.team-choice:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
  transform: translateY(-1px) !important;
}

.team-choice.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12) 0%, rgba(200,160,76,.05) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 4px 16px rgba(200,160,76,.1) !important;
}

.team-choice-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.team-choice.active .team-choice-title {
  color: var(--gold) !important;
}

.team-choice-sub {
  font-size: 10px !important;
  color: var(--ink-4) !important;
}

/* ─────────────────────────────────────────────
   List Items — Onboarding, Documents, Notes
   ───────────────────────────────────────────── */
.team-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.team-list-item {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.team-list-item-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.team-list-item-label input[type="checkbox"] {
  margin-top: 2px !important;
}

.team-list-item-content {
  flex: 1 !important;
}

.team-list-item-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.team-list-item .meta {
  font-size: 11px !important;
  color: var(--ink-4) !important;
}

.team-list-item-foot {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255,255,255,.03) !important;
}

/* Document items */
.team-doc-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.team-doc-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.team-doc-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.team-doc-actions {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* Note items */
.team-note-text {
  font-size: 13px !important;
  color: var(--ink) !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
}

/* ─────────────────────────────────────────────
   Empty States
   ───────────────────────────────────────────── */
.team2-empty {
  text-align: center !important;
  padding: 40px 20px !important;
  color: var(--ink-4) !important;
  font-size: 13px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r-sm) !important;
}

#team-profile-empty,
#team-directory-empty {
  text-align: center !important;
  padding: 32px 20px !important;
  color: var(--ink-4) !important;
  font-size: 13px !important;
}

/* ─────────────────────────────────────────────
   Table Wrapper
   ───────────────────────────────────────────── */
.team2-table-wrapper {
  overflow-x: auto !important;
  border-radius: var(--r-sm) !important;
}

.team2-table-wrapper table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.team2-table-wrapper th {
  padding: 12px 16px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-4) !important;
  background: rgba(255,255,255,.02) !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  white-space: nowrap !important;
}

.team2-table-wrapper td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  vertical-align: middle !important;
}

.team2-table-wrapper tbody tr:hover {
  background: rgba(255,255,255,.02) !important;
}

/* ─────────────────────────────────────────────
   Org Chart
   ───────────────────────────────────────────── */
.team-org-node {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border-radius: var(--r-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.team-org-node-body {
  flex: 1 !important;
}

.team-org-node-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.team-org-node-meta {
  font-size: 11px !important;
  color: var(--ink-4) !important;
}

.team-org-children {
  margin-left: 24px !important;
  padding-left: 16px !important;
  border-left: 2px solid rgba(255,255,255,.06) !important;
}

/* ─────────────────────────────────────────────
   Buttons — All variants for Team page
   ───────────────────────────────────────────── */

/* Primary button — golden glow */
#team-page .btn-primary,
#team-page .btn.btn-primary,
.team2-actions .btn-primary {
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.25),
    0 0 30px rgba(200,160,76,.08),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: all .22s var(--spring) !important;
  min-height: auto !important;
  white-space: nowrap !important;
}

#team-page .btn-primary:hover,
.team2-actions .btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 6px 24px rgba(200,160,76,.35),
    0 0 50px rgba(200,160,76,.12),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}

#team-page .btn-primary:active,
.team2-actions .btn-primary:active {
  transform: scale(.97) !important;
}

/* Small primary */
#team-page .btn-primary.btn-small {
  padding: 8px 16px !important;
  font-size: 11px !important;
}

/* Secondary button — ghost glass */
#team-page .btn-secondary,
#team-page .btn.btn-secondary,
.team2-actions .btn-secondary {
  padding: 10px 20px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  transition: all .2s var(--spring) !important;
  min-height: auto !important;
  white-space: nowrap !important;
}

#team-page .btn-secondary:hover,
.team2-actions .btn-secondary:hover {
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.2) !important;
}

/* Small secondary */
#team-page .btn-secondary.btn-small,
#team-page .btn.btn-small:not(.btn-primary):not(.btn-danger) {
  padding: 8px 14px !important;
  font-size: 11px !important;
}

/* Danger button */
#team-page .btn-danger,
#team-page .btn.btn-danger {
  padding: 10px 20px !important;
  background: rgba(248,113,113,.1) !important;
  color: var(--red) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
  transition: all .2s var(--spring) !important;
  min-height: auto !important;
  white-space: nowrap !important;
}

#team-page .btn-danger:hover {
  background: rgba(248,113,113,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.25), 0 4px 16px rgba(248,113,113,.15) !important;
}

/* Small danger */
#team-page .btn-danger.btn-small {
  padding: 8px 14px !important;
  font-size: 11px !important;
}

/* ─────────────────────────────────────────────
   Custom Role Builder
   ───────────────────────────────────────────── */
.settings-custom-role-box {
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  border-radius: var(--r-sm) !important;
  padding: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.settings-perms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.settings-perm-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
  transition: background .15s !important;
}

.settings-perm-item:hover {
  background: rgba(255,255,255,.04) !important;
}

.settings-perm-item input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--gold) !important;
}

/* Role help text */
#settings-emp-role-help,
.settings-role-help {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  background: rgba(200,160,76,.04) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────────
   Mini Notes / Helper Text
   ───────────────────────────────────────────── */
#team-page .settings-mini-note {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

#team-page .settings-mini-note strong {
  color: var(--ink-3) !important;
}

/* ─────────────────────────────────────────────
   Messages (success/error feedback)
   ───────────────────────────────────────────── */
#team-page .settings-message {
  padding: 10px 14px !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  margin-top: 12px !important;
}

#team-page .settings-message.success,
#team-page .settings-message:not(.error) {
  background: rgba(74,222,128,.08) !important;
  color: var(--green) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.12) !important;
}

#team-page .settings-message.error {
  background: rgba(248,113,113,.08) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.12) !important;
}

/* ─────────────────────────────────────────────
   File Input
   ───────────────────────────────────────────── */
#team-page input[type="file"] {
  padding: 10px !important;
  background: rgba(255,255,255,.03) !important;
  border: 2px dashed rgba(255,255,255,.08) !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-3) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  width: 100% !important;
  min-height: auto !important;
  transition: all .2s !important;
}

#team-page input[type="file"]:hover {
  border-color: var(--gold) !important;
  background: rgba(200,160,76,.04) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   TEAM PAGE — Light Mode Overrides
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Title */
html.light .team2-title,
html[data-theme="light"] .team2-title {
  color: var(--ink) !important;
  text-shadow: none !important;
}

/* Metrics cards */
html.light .team2-metric,
html[data-theme="light"] .team2-metric {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.04) !important;
}

html.light .team2-metric::before,
html[data-theme="light"] .team2-metric::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.03), transparent) !important;
}

html.light .team2-metric-value,
html[data-theme="light"] .team2-metric-value {
  text-shadow: none !important;
}

/* Main tabs */
html.light .team2-tabs,
html[data-theme="light"] .team2-tabs,
html.light #team2-tabs,
html[data-theme="light"] #team2-tabs {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .team2-tab,
html[data-theme="light"] .team2-tab {
  color: var(--ink-3) !important;
}

html.light .team2-tab:hover,
html[data-theme="light"] .team2-tab:hover {
  background: rgba(0,0,0,.03) !important;
}

html.light .team2-tab.active,
html[data-theme="light"] .team2-tab.active {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: #fff !important;
}

/* Cards */
html.light .team2-card,
html[data-theme="light"] .team2-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 4px 20px rgba(0,0,0,.06),
    0 12px 48px rgba(0,0,0,.04) !important;
}

html.light .team2-card::before,
html[data-theme="light"] .team2-card::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.02), transparent) !important;
}

/* Toolbar */
html.light .team2-toolbar,
html[data-theme="light"] .team2-toolbar {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

/* Toolbar inputs */
html.light .team2-toolbar input,
html[data-theme="light"] .team2-toolbar input,
html.light #team-member-search,
html[data-theme="light"] #team-member-search {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

html.light .team2-toolbar input:hover,
html[data-theme="light"] .team2-toolbar input:hover {
  background: rgba(0,0,0,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important;
}

/* Toolbar selects */
html.light .team2-toolbar select,
html[data-theme="light"] .team2-toolbar select,
html.light #team-member-filter,
html[data-theme="light"] #team-member-filter,
html.light #team-member-status,
html[data-theme="light"] #team-member-status,
html.light #team-member-dept,
html[data-theme="light"] #team-member-dept {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.4) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color-scheme: light !important;
}

/* View toggle */
html.light .team2-view-toggle,
html[data-theme="light"] .team2-view-toggle {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .team2-view-toggle .btn.active,
html[data-theme="light"] .team2-view-toggle .btn.active {
  background: rgba(0,0,0,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* Employee cards */
html.light .team2-emp-card,
html[data-theme="light"] .team2-emp-card {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.75) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04) !important;
}

html.light .team2-emp-card:hover,
html[data-theme="light"] .team2-emp-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.15),
    0 8px 24px rgba(0,0,0,.08) !important;
}

html.light .team2-emp-card.active,
html[data-theme="light"] .team2-emp-card.active,
html.light .team2-emp-card.selected,
html[data-theme="light"] .team2-emp-card.selected {
  box-shadow:
    inset 0 0 0 2px rgba(150,117,10,.25),
    0 4px 16px rgba(150,117,10,.08) !important;
}

/* Avatar */
html.light .team2-emp-avatar,
html[data-theme="light"] .team2-emp-avatar {
  background: linear-gradient(135deg, rgba(150,117,10,.12) 0%, rgba(150,117,10,.06) 100%) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12) !important;
}

html.light .team-profile-avatar,
html[data-theme="light"] .team-profile-avatar {
  background: linear-gradient(135deg, rgba(150,117,10,.15) 0%, rgba(150,117,10,.08) 100%) !important;
  color: #96750A !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.12),
    0 4px 12px rgba(150,117,10,.06) !important;
}

/* Tags */
html.light .team-tag,
html[data-theme="light"] .team-tag {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-3) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

/* Profile tabs */
html.light .team-profile-tabs,
html[data-theme="light"] .team-profile-tabs,
html.light #team-profile-tabs,
html[data-theme="light"] #team-profile-tabs {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .team-profile-tab,
html[data-theme="light"] .team-profile-tab {
  color: var(--ink-3) !important;
}

html.light .team-profile-tab:hover,
html[data-theme="light"] .team-profile-tab:hover {
  background: rgba(0,0,0,.03) !important;
}

html.light .team-profile-tab.active,
html[data-theme="light"] .team-profile-tab.active {
  background: linear-gradient(135deg, rgba(150,117,10,.1) 0%, rgba(150,117,10,.05) 100%) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12) !important;
}

/* Profile head border */
html.light .team-profile-head,
html[data-theme="light"] .team-profile-head {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

/* Form inputs */
html.light #team-page input[type="text"],
html[data-theme="light"] #team-page input[type="text"],
html.light #team-page input[type="email"],
html[data-theme="light"] #team-page input[type="email"],
html.light #team-page input[type="password"],
html[data-theme="light"] #team-page input[type="password"],
html.light #team-page input[type="number"],
html[data-theme="light"] #team-page input[type="number"],
html.light #team-page input[type="tel"],
html[data-theme="light"] #team-page input[type="tel"],
html.light #team-page input[type="date"],
html[data-theme="light"] #team-page input[type="date"],
html.light #team-page textarea,
html[data-theme="light"] #team-page textarea {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

html.light #team-page input:hover,
html[data-theme="light"] #team-page input:hover,
html.light #team-page textarea:hover,
html[data-theme="light"] #team-page textarea:hover {
  background: rgba(0,0,0,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important;
}

html.light #team-page input[type="date"],
html[data-theme="light"] #team-page input[type="date"] {
  color-scheme: light !important;
}

/* Selects */
html.light #team-page select,
html[data-theme="light"] #team-page select,
html.light .team-native-select,
html[data-theme="light"] .team-native-select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.4) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color-scheme: light !important;
}

html.light #team-page select:hover,
html[data-theme="light"] #team-page select:hover,
html.light .team-native-select:hover,
html[data-theme="light"] .team-native-select:hover {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important;
}

/* Choice buttons */
html.light .team-choice,
html[data-theme="light"] .team-choice {
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

html.light .team-choice:hover,
html[data-theme="light"] .team-choice:hover {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important;
}

html.light .team-choice.active,
html[data-theme="light"] .team-choice.active {
  background: linear-gradient(135deg, rgba(150,117,10,.08) 0%, rgba(150,117,10,.03) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15), 0 4px 12px rgba(150,117,10,.06) !important;
}

html.light .team-choice.active .team-choice-title,
html[data-theme="light"] .team-choice.active .team-choice-title {
  color: #96750A !important;
}

/* List items */
html.light .team-list-item,
html[data-theme="light"] .team-list-item {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .team-list-item-foot,
html[data-theme="light"] .team-list-item-foot {
  border-top-color: rgba(0,0,0,.04) !important;
}

/* Org chart */
html.light .team-org-node,
html[data-theme="light"] .team-org-node {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .team-org-children,
html[data-theme="light"] .team-org-children {
  border-left-color: rgba(0,0,0,.08) !important;
}

/* Empty states */
html.light .team2-empty,
html[data-theme="light"] .team2-empty {
  background: rgba(0,0,0,.02) !important;
}

/* Table */
html.light .team2-table-wrapper th,
html[data-theme="light"] .team2-table-wrapper th {
  background: rgba(0,0,0,.02) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}

html.light .team2-table-wrapper td,
html[data-theme="light"] .team2-table-wrapper td {
  border-bottom-color: rgba(0,0,0,.04) !important;
}

html.light .team2-table-wrapper tbody tr:hover,
html[data-theme="light"] .team2-table-wrapper tbody tr:hover {
  background: rgba(0,0,0,.02) !important;
}

/* Buttons light mode */
html.light #team-page .btn-secondary,
html[data-theme="light"] #team-page .btn-secondary,
html.light .team2-actions .btn-secondary,
html[data-theme="light"] .team2-actions .btn-secondary {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04) !important;
}

html.light #team-page .btn-secondary:hover,
html[data-theme="light"] #team-page .btn-secondary:hover,
html.light .team2-actions .btn-secondary:hover,
html[data-theme="light"] .team2-actions .btn-secondary:hover {
  background: rgba(0,0,0,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;
}

html.light #team-page .btn-primary,
html[data-theme="light"] #team-page .btn-primary,
html.light .team2-actions .btn-primary,
html[data-theme="light"] .team2-actions .btn-primary {
  color: #fff !important;
}

html.light #team-page .btn-danger,
html[data-theme="light"] #team-page .btn-danger {
  background: rgba(220,38,38,.06) !important;
  color: #DC2626 !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.12) !important;
}

html.light #team-page .btn-danger:hover,
html[data-theme="light"] #team-page .btn-danger:hover {
  background: rgba(220,38,38,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.2), 0 4px 12px rgba(220,38,38,.08) !important;
}

/* Custom role box */
html.light .settings-custom-role-box,
html[data-theme="light"] .settings-custom-role-box {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .settings-perm-item,
html[data-theme="light"] .settings-perm-item {
  background: rgba(0,0,0,.02) !important;
}

html.light .settings-perm-item:hover,
html[data-theme="light"] .settings-perm-item:hover {
  background: rgba(0,0,0,.04) !important;
}

/* Role help */
html.light #settings-emp-role-help,
html[data-theme="light"] #settings-emp-role-help,
html.light .settings-role-help,
html[data-theme="light"] .settings-role-help {
  background: rgba(150,117,10,.04) !important;
}

/* File input */
html.light #team-page input[type="file"],
html[data-theme="light"] #team-page input[type="file"] {
  background: rgba(0,0,0,.02) !important;
  border-color: rgba(0,0,0,.1) !important;
}

html.light #team-page input[type="file"]:hover,
html[data-theme="light"] #team-page input[type="file"]:hover {
  border-color: #96750A !important;
  background: rgba(150,117,10,.04) !important;
}

/* Upgrade hint */
html.light #team-upgrade-hint,
html[data-theme="light"] #team-upgrade-hint,
html.light #team-permission-hint,
html[data-theme="light"] #team-permission-hint,
html.light .team2-hint,
html[data-theme="light"] .team2-hint {
  background: linear-gradient(135deg, rgba(150,117,10,.06) 0%, rgba(150,117,10,.02) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.1) !important;
}

html.light #team-upgrade-hint strong,
html[data-theme="light"] #team-upgrade-hint strong,
html.light #team-permission-hint strong,
html[data-theme="light"] #team-permission-hint strong {
  color: #96750A !important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Tesla/iOS Premium Theme
   Massive stat numbers, glass cards, ambient glow, chart animations
   ═══════════════════════════════════════════════════════════════ */

/* Dashboard wrapper */
.dash-wrap,
.dash-online-shell {
  padding: 0 !important;
}

/* ─── Dashboard Cards — Glass treatment ─── */
.dash-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.018) 100%) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 20px rgba(0,0,0,.25),
    0 12px 48px rgba(0,0,0,.18) !important;
  border: none !important;
  position: relative !important;
  overflow: visible !important;
}

/* Top edge highlight */
.dash-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  pointer-events: none !important;
}

/* Ambient glow on hover */
.dash-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.08),
    0 4px 20px rgba(0,0,0,.3),
    0 12px 48px rgba(0,0,0,.22),
    0 0 60px rgba(200,160,76,.03) !important;
}

/* ─── Dashboard Stat Values — Massive 44px thin ─── */
.dash-online-stat-value,
.dash-stat-value,
.dash-kpi-value {
  font-size: 44px !important;
  font-weight: 200 !important;
  letter-spacing: -.05em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.5), 0 0 40px rgba(200,160,76,.04) !important;
  line-height: 1.1 !important;
}

/* Stat labels — uppercase tiny */
.dash-online-stat-label,
.dash-stat-label,
.dash-kpi-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

/* Stats grid */
.dash-online-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 1200px) {
  .dash-online-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .dash-online-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-online-stat-value,
  .dash-stat-value {
    font-size: 36px !important;
  }
}

/* Individual stat card within grid */
.dash-online-stat {
  padding: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}

.dash-online-stat:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.1), 0 4px 20px rgba(0,0,0,.15) !important;
  transform: translateY(-2px) !important;
}

/* ─── Welcome Banner — Override inline styles ─── */
#dash-onboarding-banner {
  background: linear-gradient(135deg, rgba(200,160,76,.08) 0%, rgba(200,160,76,.03) 50%, rgba(96,165,250,.04) 100%) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  padding: 24px 28px !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.12),
    0 4px 24px rgba(0,0,0,.2),
    0 0 60px rgba(200,160,76,.04) !important;
  animation: wlc-glow 3s ease-in-out infinite !important;
}

#dash-onboarding-banner > div:first-child {
  font-size: 32px !important;
}

#dash-onboarding-banner .btn {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1) !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}

#dash-onboarding-banner .btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15) !important;
}

/* ─── Quick Action Buttons — Golden glow ─── */
.dash-online-action-grid {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.dash-online-action-grid .btn {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}

.dash-online-action-grid .btn:hover {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 4px 16px rgba(200,160,76,.1) !important;
  transform: translateY(-2px) !important;
}

/* ─── Dashboard Mode Pill ─── */
.sf-pill--accent,
#dash-online-mode-pill {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 2px 8px rgba(200,160,76,.1) !important;
}

/* ─── Card Titles ─── */
.dash-card-title h3,
.nui-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.015em !important;
}

.dash-card-title .dash-sub,
.nui-card-sub {
  font-size: 12px !important;
  color: var(--ink-4) !important;
  margin-top: 4px !important;
}

/* ─── Pill Groups (chart range selectors) ─── */
.nui-pill-group {
  display: flex !important;
  gap: 3px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 8px !important;
}

.nui-pill {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-4) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

.nui-pill:hover {
  color: var(--ink-2) !important;
}

.nui-pill.active {
  background: var(--gold) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 8px rgba(200,160,76,.2) !important;
}

/* ─── Health Rings ─── */
.nui-health-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1000px) {
  .nui-health-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 500px) {
  .nui-health-grid {
    grid-template-columns: 1fr !important;
  }
}

.nui-health-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

.nui-ring {
  width: 56px !important;
  height: 56px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.nui-ring svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
}

.nui-ring-bg {
  fill: none !important;
  stroke: rgba(255,255,255,.06) !important;
  stroke-width: 8 !important;
}

.nui-ring-meter {
  fill: none !important;
  stroke: var(--ring-color, var(--gold)) !important;
  stroke-width: 8 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 251 !important;
  transition: stroke-dashoffset .8s cubic-bezier(.34,1,.64,1) !important;
  filter: drop-shadow(0 0 6px var(--ring-color, var(--gold))) !important;
}

.nui-ring-value {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.nui-health-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 2px !important;
}

.nui-health-note {
  font-size: 10px !important;
  color: var(--ink-4) !important;
}

/* Health status badge */
.nui-health-status {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ─── Dashboard Grids ─── */
.dash-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.dash-insights-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.dash-insights-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 900px) {
  .dash-grid-2,
  .dash-insights-grid,
  .dash-insights-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Charts — Draw animation ─── */
.nui-chart-canvas {
  position: relative !important;
  height: 220px !important;
  margin-top: 16px !important;
}

.nui-chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ─── Donut Chart ─── */
.nui-donut-layout {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin-top: 16px !important;
}

.nui-donut-wrap {
  width: 140px !important;
  height: 140px !important;
  flex-shrink: 0 !important;
}

.nui-donut-legend {
  flex: 1 !important;
}

/* ─── Heatmap ─── */
.nui-heat-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
  margin-top: 16px !important;
}

.nui-heat-day {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--ink-4) !important;
  text-align: center !important;
  padding: 4px 0 !important;
}

.nui-heat-cell {
  aspect-ratio: 1 !important;
  border-radius: 4px !important;
  transition: all .2s !important;
}

.nui-heat-cell:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 0 12px rgba(200,160,76,.3) !important;
}

/* ─── Empty States ─── */
.dash-online-empty,
.empty-state {
  text-align: center !important;
  padding: 32px 20px !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.empty-state svg {
  opacity: .4 !important;
  margin-bottom: 12px !important;
}

/* ─── Developer Card ─── */
.dash-online-dev-card {
  background: linear-gradient(180deg, rgba(96,165,250,.04), rgba(96,165,250,.02)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(96,165,250,.1),
    0 4px 20px rgba(0,0,0,.2) !important;
}

.dash-online-dev-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.dash-online-dev-stat {
  padding: 12px 14px !important;
  background: rgba(96,165,250,.06) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.08) !important;
}

.dash-online-dev-stat-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--blue) !important;
  margin-bottom: 4px !important;
}

.dash-online-dev-stat-value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-family: monospace !important;
  word-break: break-all !important;
}

/* ─── Dashboard Light Mode ─── */
html.light .dash-card,
html[data-theme="light"] .dash-card {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 4px 20px rgba(0,0,0,.06),
    0 12px 48px rgba(0,0,0,.04) !important;
}

html.light .dash-card::before,
html[data-theme="light"] .dash-card::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.03), transparent) !important;
}

html.light .dash-online-stat,
html[data-theme="light"] .dash-online-stat {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .dash-online-stat:hover,
html[data-theme="light"] .dash-online-stat:hover {
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15), 0 4px 16px rgba(0,0,0,.06) !important;
}

html.light .dash-online-stat-value,
html.light .dash-stat-value,
html.light .dash-kpi-value,
html[data-theme="light"] .dash-online-stat-value,
html[data-theme="light"] .dash-stat-value,
html[data-theme="light"] .dash-kpi-value {
  text-shadow: none !important;
}

html.light #dash-onboarding-banner,
html[data-theme="light"] #dash-onboarding-banner {
  background: linear-gradient(135deg, rgba(150,117,10,.06) 0%, rgba(150,117,10,.02) 50%, rgba(96,165,250,.03) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.1),
    0 4px 24px rgba(0,0,0,.04) !important;
}

html.light .nui-health-item,
html[data-theme="light"] .nui-health-item {
  background: linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.005)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .nui-ring-bg,
html[data-theme="light"] .nui-ring-bg {
  stroke: rgba(0,0,0,.06) !important;
}

html.light .nui-pill-group,
html[data-theme="light"] .nui-pill-group {
  background: rgba(0,0,0,.03) !important;
}

html.light .nui-pill.active,
html[data-theme="light"] .nui-pill.active {
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   POS PAGE — Tesla/iOS Premium Theme
   Glass panels, golden accents, premium checkout experience
   ═══════════════════════════════════════════════════════════════ */

/* ─── POS Layout ─── */
.pos-layout {
  background: var(--void) !important;
}

/* ─── Products Panel ─── */
.pos-panel-products {
  background: linear-gradient(180deg, var(--base) 0%, rgba(12,12,16,.95) 100%) !important;
  border-right: 1px solid rgba(255,255,255,.04) !important;
}

/* ─── Cart Panel — Glass with golden ambient ─── */
.pos-panel-cart {
  background: linear-gradient(180deg, rgba(20,20,26,.98), var(--void)) !important;
  border-left: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.3), 0 0 80px rgba(200,160,76,.02) !important;
}

/* Cart header */
.pos-cart-head,
.pos-panel-head {
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

.pos-head-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}

/* Cart badge */
.pos-head-title .badge,
.pos-panel-head .badge {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
  font-size: 10px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* ─── Business Mode Tabs (Orders / Manual checkout) ─── */
.pos-bizmode-tabs {
  display: flex !important;
  gap: 3px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
}

.pos-bizmode-tab {
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s cubic-bezier(.16,1,.3,1) !important;
}

.pos-bizmode-tab:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.03) !important;
}

.pos-bizmode-tab.active {
  background: var(--gold) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 10px rgba(200,160,76,.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POS HEADER SIMPLIFICATION — Hide verbose header, move search to tabs row
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the verbose "POS / Catalog / Search or scan..." header block in products panel */
.pos-panel-products > .pos-panel-head > .pos-head-block {
  display: none !important;
}

/* Hide the entire header since its only content (head-block) is hidden and search is moved */
.pos-panel-products > .pos-panel-head {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POS CART SIMPLIFICATION — Hide verbose header, show Clear button via CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the cart header content (mini-tag, "Current sale", description) but keep header for button */
.pos-panel-cart > .pos-panel-head {
  position: relative !important;
  padding: 8px 16px !important;
  border-bottom: none !important;
  min-height: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: transparent !important;
}

/* Hide the text block completely */
.pos-panel-cart > .pos-panel-head > .pos-head-block {
  display: none !important;
}

/* Style the Clear button container */
.pos-panel-cart .pos-cart-actions {
  display: flex !important;
}

/* Clear button — compact danger style */
.pos-panel-cart #pos-clear-cart-btn {
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  background: rgba(248,113,113,.08) !important;
  color: var(--red) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
  cursor: pointer !important;
  transition: all .15s cubic-bezier(.16,1,.3,1) !important;
}

.pos-panel-cart #pos-clear-cart-btn:hover {
  background: rgba(248,113,113,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.25), 0 2px 8px rgba(248,113,113,.15) !important;
  transform: translateY(-1px) !important;
}

/* Widen cart panel so discount hint fits on one line */
#pos-page .pos-layout {
  grid-template-columns: 1fr 400px !important;
}
@media (max-width: 1100px) {
  #pos-page .pos-layout {
    grid-template-columns: 1fr 360px !important;
  }
}

/* Discount hint text — ensure it fits on one line */
#pos-discount-hint {
  white-space: nowrap !important;
  font-size: 10px !important;
  color: var(--ink-4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POS CART LAYOUT FIXES — Discount row, cart items, sticky checkout
   ═══════════════════════════════════════════════════════════════════════════ */

/* === FIX 1: Discount row — select smaller, input bigger === */
.pos-discount-row {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.pos-discount-row .sfy-select-wrap {
  flex: 0 0 170px !important;
  min-width: 0 !important;
}

.pos-discount-row .sfy-select-trigger {
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

.pos-discount-row .sfy-select-label {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.pos-discount-row #pos-discount-value {
  flex: 0 0 90px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
}

.pos-discount-row #pos-discount-value:focus {
  box-shadow: 0 0 0 3px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* === FIX 2: Cart panel flex column with sticky footer ===
   Cart panel starts at ~79px below top (under header), so constrain
   its height to viewport MINUS header height. */
.pos-panel-cart {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 80px) !important;
  max-height: calc(100vh - 80px) !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 80px !important;
}

.pos-cart-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding: 12px 16px !important;
}

.pos-cart-footer {
  flex: 0 0 auto !important;
  z-index: 10 !important;
  background: linear-gradient(180deg, var(--base) 0%, var(--void) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.3) !important;
  padding: 14px 16px 16px !important;
}

/* Keep footer compact — reduce cart-summary padding if needed */
.pos-cart-footer .cart-summary {
  padding: 8px 0 !important;
}

.pos-cart-footer .cart-actions {
  padding-top: 8px !important;
}

/* === FIX 3: Cart items — restore proper grid, constrain qty stepper === */
.pos-cart-item {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto 60px 24px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
  margin-bottom: 6px !important;
}

.pos-cart-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* Thumbnail */
.pos-cart-thumb {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

/* Name + price */
.pos-cart-item-main {
  min-width: 0 !important;
  overflow: hidden !important;
}

.pos-cart-item-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--ink) !important;
}

.pos-cart-item-sub {
  font-size: 10px !important;
  color: var(--ink-4) !important;
  margin-top: 1px !important;
}

/* Quantity stepper — constrained width */
.pos-cart-item-qty {
  justify-self: center !important;
}

.pos-qty-stepper {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  overflow: hidden !important;
}

.pos-qty-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink-3) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s !important;
}

.pos-qty-btn:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
}

.pos-qty-input {
  width: 34px !important;
  height: 28px !important;
  min-width: 34px !important;
  max-width: 72px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0 2px !important;
  outline: none !important;
  -moz-appearance: textfield !important;
  transition: width .15s var(--spring) !important;
}

/* Dynamic width — grows with digit count */
.pos-qty-input[data-qty-len="2"] { width: 42px !important; }
.pos-qty-input[data-qty-len="3"] { width: 52px !important; }
.pos-qty-input[data-qty-len="4"] { width: 62px !important; }
.pos-qty-input[data-qty-len="5"] { width: 72px !important; }

.pos-qty-input::-webkit-inner-spin-button,
.pos-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Line total */
.pos-cart-item-line {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Remove button */
.pos-remove-btn {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: var(--ink-4) !important;
  font-size: 10px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

.pos-remove-btn:hover {
  background: var(--red-glow) !important;
  color: var(--red) !important;
}

/* Cart items header row */
.pos-cart-items-head {
  display: grid !important;
  grid-template-columns: 32px 1fr 90px 60px 24px !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-4) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

/* Tabs wrapper becomes flex row: tabs on left, search on right */
.pos-tabs-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,.015) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

/* ─── Category Tabs ─── */
.pos-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 10px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  flex: 1 !important;
  min-width: 0 !important; /* Allow shrinking */
}

.pos-tab {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all .15s cubic-bezier(.16,1,.3,1) !important;
}

.pos-tab:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.04) !important;
}

.pos-tab.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(200,160,76,.1) !important;
}

/* ─── Product Search (compact inline style) ─── */

/* Hide the original label and tip text */
.pos-search > label,
.pos-search .pos-search-tip {
  display: none !important;
}

/* Search container — compact width */
.pos-search {
  flex-shrink: 0 !important;
  width: 220px !important;
}

.pos-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  padding: 8px 12px !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}

.pos-search-row:hover {
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}

.pos-search-row:focus-within {
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 0 0 3px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.15) !important;
}

/* Hide emoji, show SVG via CSS background */
.pos-search-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A04C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: .7 !important;
  transition: opacity .15s ease !important;
}

.pos-search-row:focus-within .pos-search-icon {
  opacity: 1 !important;
}

/* Compact search input */
.pos-search-row input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.pos-search-row input::placeholder {
  color: var(--ink-4) !important;
}

/* Clear button */
.pos-search-row .pos-icon-btn {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  border: none !important;
  color: var(--ink-3) !important;
  font-size: 11px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s ease !important;
  flex-shrink: 0 !important;
}

.pos-search-row .pos-icon-btn:hover {
  background: rgba(255,255,255,.15) !important;
  color: var(--ink) !important;
}

/* ─── Product Grid Empty State ─── */
.pos-empty,
.pos-grid-empty {
  text-align: center !important;
  padding: 60px 24px !important;
  color: var(--ink-3) !important;
}

.pos-empty svg,
.pos-grid-empty svg {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;
  opacity: .3 !important;
}

.pos-empty h3,
.pos-grid-empty h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
}

.pos-empty p,
.pos-grid-empty p {
  font-size: 13px !important;
  color: var(--ink-4) !important;
  max-width: 280px !important;
  margin: 0 auto 20px !important;
  line-height: 1.5 !important;
}

.pos-empty .btn,
.pos-grid-empty .btn {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1) !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}

.pos-empty .btn:hover,
.pos-grid-empty .btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15) !important;
}

/* ─── Product Cards ─── */
.pos-item,
.pos-product-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.15) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}

.pos-item:hover,
.pos-product-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 8px 24px rgba(0,0,0,.25),
    0 0 40px rgba(200,160,76,.05) !important;
}

.pos-item:active,
.pos-product-card:active {
  transform: scale(.96) !important;
}

.pos-item-name,
.pos-product-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: 10px 12px 4px !important;
}

.pos-item-price,
.pos-product-price {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  padding: 0 12px 10px !important;
  text-shadow: 0 0 10px rgba(200,160,76,.25) !important;
}

/* ─── Cart Items ─── */
.pos-cart-item,
.cart-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  margin-bottom: 8px !important;
  transition: all .15s !important;
}

.pos-cart-item:hover,
.cart-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* ─── Cart Empty State ─── */
.pos-cart-empty,
.cart-empty {
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--ink-4) !important;
}

.pos-cart-empty svg,
.cart-empty svg {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 14px !important;
  opacity: .25 !important;
}

.pos-cart-empty h4,
.cart-empty h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink-3) !important;
  margin-bottom: 6px !important;
}

.pos-cart-empty p,
.cart-empty p {
  font-size: 12px !important;
  color: var(--ink-4) !important;
}

/* ─── Discount Section ─── */
.pos-discount-section,
.discount-section {
  padding: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  margin: 12px 0 !important;
}

.pos-discount-row,
.discount-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Discount pills */
.pos-discount-pill,
.discount-pill {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s !important;
}

.pos-discount-pill:hover,
.discount-pill:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
}

.pos-discount-pill.active,
.discount-pill.active {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* ─── Cart Summary ─── */
.pos-cart-summary,
.cart-summary {
  padding: 16px 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

.pos-cart-summary-row,
.cart-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  font-size: 13px !important;
}

.pos-cart-total,
.cart-total {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

/* ─── Pay Button — Golden glow, premium feel ─── */
.pos-pay-btn,
.pay-btn,
#pos-pay-btn {
  width: 100% !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--r) !important;
  cursor: pointer !important;
  box-shadow:
    0 4px 20px rgba(200,160,76,.3),
    0 0 50px rgba(200,160,76,.12),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
}

.pos-pay-btn:hover,
.pay-btn:hover,
#pos-pay-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow:
    0 8px 32px rgba(200,160,76,.45),
    0 0 80px rgba(200,160,76,.18),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.pos-pay-btn:active,
.pay-btn:active,
#pos-pay-btn:active {
  transform: scale(.98) !important;
}

/* ─── Customer Select ─── */
.pos-customer-select,
#pos-customer-select {
  width: 100% !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  transition: all .2s !important;
}

.pos-customer-select:focus,
#pos-customer-select:focus {
  box-shadow: 0 0 0 3px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.15) !important;
  outline: none !important;
}

/* ─── Active Order Banner ─── */
.pos-active-order-banner {
  background: linear-gradient(135deg, rgba(200,160,76,.1), rgba(200,160,76,.05)) !important;
  border-radius: var(--r) !important;
  padding: 14px 18px !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
  margin-bottom: 16px !important;
}

.pos-active-order-title {
  font-weight: 700 !important;
  color: var(--gold) !important;
}

/* ─── POS Light Mode ─── */
html.light .pos-panel-products,
html[data-theme="light"] .pos-panel-products {
  background: linear-gradient(180deg, #FAFAF8 0%, #F5F5F3 100%) !important;
  border-right: 1px solid rgba(0,0,0,.06) !important;
}

html.light .pos-panel-cart,
html[data-theme="light"] .pos-panel-cart {
  background: linear-gradient(180deg, #FFFFFF, #FAFAF8) !important;
  border-left: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: -8px 0 40px rgba(0,0,0,.04) !important;
}

html.light .pos-bizmode-tabs,
html[data-theme="light"] .pos-bizmode-tabs,
html.light .pos-tabs,
html[data-theme="light"] .pos-tabs {
  background: rgba(0,0,0,.03) !important;
}

html.light .pos-bizmode-tab.active,
html[data-theme="light"] .pos-bizmode-tab.active {
  color: #fff !important;
}

html.light .pos-tab.active,
html[data-theme="light"] .pos-tab.active {
  background: linear-gradient(135deg, rgba(150,117,10,.12), rgba(150,117,10,.06)) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light .pos-search-row,
html[data-theme="light"] .pos-search-row {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

html.light .pos-item,
html.light .pos-product-card,
html[data-theme="light"] .pos-item,
html[data-theme="light"] .pos-product-card {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04) !important;
}

html.light .pos-cart-item,
html.light .cart-item,
html[data-theme="light"] .pos-cart-item,
html[data-theme="light"] .cart-item {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .pos-cart-summary,
html.light .cart-summary,
html[data-theme="light"] .pos-cart-summary,
html[data-theme="light"] .cart-summary {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .pos-discount-pill.active,
html.light .discount-pill.active,
html[data-theme="light"] .pos-discount-pill.active,
html[data-theme="light"] .discount-pill.active {
  background: linear-gradient(135deg, rgba(150,117,10,.12), rgba(150,117,10,.06)) !important;
  color: #96750A !important;
}

/* ─── POS Cart Total — Massive Typography ─── */
.cart-summary-row.total {
  margin-top: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

.cart-summary-row.total span:first-child {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

#pos-total,
.cart-summary-row.total span:last-child {
  font-size: 32px !important;
  font-weight: 200 !important;
  letter-spacing: -.04em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--gold) !important;
  text-shadow: 0 2px 16px rgba(200,160,76,.2), 0 0 30px rgba(200,160,76,.08) !important;
}

/* ─── POS Checkout Button — Golden Premium ─── */
.pos-checkout-btn,
#pos-checkout-btn {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: 0 4px 20px rgba(200,160,76,.3), 0 0 50px rgba(200,160,76,.12), inset 0 1px 0 rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  transition: all .22s var(--spring) !important;
}

.pos-checkout-btn:hover,
#pos-checkout-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 32px rgba(200,160,76,.4), 0 0 70px rgba(200,160,76,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.pos-checkout-btn:active,
#pos-checkout-btn:active {
  transform: scale(.98) !important;
}

/* ─── POS Host Board — Glass Cards ─── */
.pos-host-shell {
  background: transparent !important;
}

.pos-host-toolbar {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent) !important;
  padding: 16px 20px !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}

.pos-host-kpis {
  display: flex !important;
  gap: 12px !important;
  padding: 0 20px 20px !important;
}

.pos-host-kpi {
  flex: 1 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.15) !important;
  border-radius: var(--r) !important;
  padding: 16px 18px !important;
  text-align: center !important;
}

.pos-host-kpi span {
  display: block !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 6px !important;
}

.pos-host-kpi strong {
  display: block !important;
  font-size: 36px !important;
  font-weight: 200 !important;
  letter-spacing: -.04em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.4), 0 0 30px rgba(200,160,76,.03) !important;
}

.pos-host-kpi small {
  display: block !important;
  font-size: 10px !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}

/* ─── Host Rail Cards ─── */
.pos-host-rail-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.15) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
}

.pos-host-section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.pos-host-count-pill {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
}

/* ─── Host Stage Card ─── */
.pos-host-stage-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 16px rgba(0,0,0,.2) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.pos-host-stage-head {
  padding: 20px 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.pos-host-stage-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

.pos-host-stage-foot {
  padding: 16px 24px !important;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.02)) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

/* ─── Host Legend Dots ─── */
.pos-host-legend-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 6px !important;
}

.pos-host-legend-dot.available {
  background: var(--green) !important;
  box-shadow: 0 0 8px rgba(74,222,128,.4) !important;
}

.pos-host-legend-dot.reserved {
  background: var(--gold) !important;
  box-shadow: 0 0 8px rgba(200,160,76,.4) !important;
}

.pos-host-legend-dot.occupied {
  background: var(--blue) !important;
  box-shadow: 0 0 8px rgba(96,165,250,.4) !important;
}

.pos-host-legend-dot.alert {
  background: var(--red) !important;
  box-shadow: 0 0 8px rgba(248,113,113,.4) !important;
}

/* ─── Host Toolbar Segments ─── */
.pos-host-segment {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
}

.pos-host-segment:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.03) !important;
}

.pos-host-segment.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
}

/* ─── Host Filter Chips ─── */
.pos-host-chip {
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  background: rgba(255,255,255,.03) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
}

.pos-host-chip:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.05) !important;
}

.pos-host-chip.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 0 10px rgba(200,160,76,.05) !important;
}

/* ─── Host Inspector ─── */
.pos-host-inspector-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.15) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  margin-bottom: 12px !important;
}

.pos-host-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.pos-host-summary-card {
  background: rgba(255,255,255,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px !important;
  text-align: center !important;
}

.pos-host-summary-card span {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-4) !important;
  margin-bottom: 4px !important;
}

.pos-host-summary-card strong {
  font-size: 24px !important;
  font-weight: 200 !important;
  letter-spacing: -.03em !important;
  color: var(--ink) !important;
}

/* ─── Host Map ─── */
.pos-host-map-canvas {
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005)) !important;
  border-radius: var(--r-lg) !important;
}

.pos-host-map-grid {
  opacity: .3 !important;
}

.pos-host-area-chip {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(0,0,0,.2) !important;
}

/* ─── Host Date Pill ─── */
.pos-host-date-pill {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  padding: 8px 16px !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}

.pos-host-iconbtn {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink-2) !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
}

.pos-host-iconbtn:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
}

/* ─── Live Pill ─── */
.pos-host-live-pill {
  background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(74,222,128,.06)) !important;
  color: var(--green) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.15), 0 0 12px rgba(74,222,128,.08) !important;
}

/* ─── POS Light Mode Host Board ─── */
html.light .pos-host-kpi,
html[data-theme="light"] .pos-host-kpi {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .pos-host-kpi span,
html[data-theme="light"] .pos-host-kpi span {
  color: var(--ink-3) !important;
}

html.light .pos-host-kpi strong,
html[data-theme="light"] .pos-host-kpi strong {
  color: var(--ink) !important;
  text-shadow: none !important;
}

html.light .pos-host-rail-card,
html.light .pos-host-inspector-card,
html[data-theme="light"] .pos-host-rail-card,
html[data-theme="light"] .pos-host-inspector-card {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .pos-host-stage-card,
html[data-theme="light"] .pos-host-stage-card {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06) !important;
}

html.light .pos-host-segment,
html.light .pos-host-chip,
html[data-theme="light"] .pos-host-segment,
html[data-theme="light"] .pos-host-chip {
  color: var(--ink-3) !important;
}

html.light .pos-host-segment.active,
html.light .pos-host-chip.active,
html[data-theme="light"] .pos-host-segment.active,
html[data-theme="light"] .pos-host-chip.active {
  background: linear-gradient(135deg, rgba(150,117,10,.12), rgba(150,117,10,.06)) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light #pos-total,
html.light .cart-summary-row.total span:last-child,
html[data-theme="light"] #pos-total,
html[data-theme="light"] .cart-summary-row.total span:last-child {
  color: #96750A !important;
  text-shadow: none !important;
}

html.light .cart-summary-row.total,
html[data-theme="light"] .cart-summary-row.total {
  border-top-color: rgba(0,0,0,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEMO CHOOSER MODAL — Glass Theme for Business Category Picker
   Tesla/iOS-grade modal with backdrop blur, spring animations, ambient orbs
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Keyframes for modal system --- */
@keyframes demo-modal-in {
  0% { transform: translateY(80px) scale(0.85); opacity: 0; filter: blur(4px); }
  35% { opacity: 1; filter: blur(0); }
  55% { transform: translateY(-12px) scale(1.025); }
  75% { transform: translateY(4px) scale(0.997); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes demo-modal-out {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(50px) scale(0.9); opacity: 0; filter: blur(2px); }
}

@keyframes demo-backdrop-in {
  0% { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: rgba(0,0,0,0); }
  100% { backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); background: rgba(0,0,0,0.55); }
}

@keyframes demo-backdrop-out {
  0% { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(0,0,0,0.55); }
  100% { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: rgba(0,0,0,0); }
}

@keyframes demo-stagger {
  0% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes demo-glow-pulse {
  0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 0 rgba(200,160,76,0); }
  40% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 120px rgba(200,160,76,.12); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 80px rgba(200,160,76,.07); }
}

@keyframes demo-orb-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(30%, -20%); }
  50% { transform: translate(-20%, 30%); }
  75% { transform: translate(25%, 15%); }
}

@keyframes demo-orb-2 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-25%, 25%); }
  50% { transform: translate(30%, -15%); }
  75% { transform: translate(-15%, -25%); }
}

@keyframes demo-orb-3 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(20%, 30%); }
  50% { transform: translate(-30%, -10%); }
  75% { transform: translate(10%, -30%); }
}

/* --- Modal overlay (backdrop) --- */
.demo-chooser-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

.demo-chooser-modal.hidden {
  display: none !important;
}

/* Backdrop blur layer */
.demo-chooser-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  animation: demo-backdrop-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* RGB ambient orbs — floating colored lights behind modal */
.demo-chooser-modal::before,
.demo-chooser-modal::after {
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  animation-fill-mode: forwards !important;
  will-change: transform !important;
}

.demo-chooser-modal:not(.hidden)::before,
.demo-chooser-modal:not(.hidden)::after {
  opacity: 1 !important;
}

.demo-chooser-modal::before {
  width: 500px !important;
  height: 500px !important;
  top: 10% !important;
  left: 15% !important;
  background: radial-gradient(circle, rgba(200,160,76,.12), transparent 70%) !important;
  animation: demo-orb-1 10s ease-in-out infinite !important;
}

.demo-chooser-modal::after {
  width: 450px !important;
  height: 450px !important;
  bottom: 10% !important;
  right: 15% !important;
  background: radial-gradient(circle, rgba(96,165,250,.08), transparent 70%) !important;
  animation: demo-orb-2 12s ease-in-out infinite !important;
}

/* --- Dialog panel (glass surface) --- */
.demo-chooser-dialog {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 720px !important;
  max-height: calc(100vh - 48px) !important;
  background: linear-gradient(180deg, rgba(34,34,44,1), rgba(20,20,26,1)) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 12px 40px rgba(0,0,0,.5),
    0 40px 100px rgba(0,0,0,.35) !important;
  animation: demo-modal-in 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) forwards,
             demo-glow-pulse 0.8s ease 0.4s forwards !important;
}

/* --- Close button --- */
.demo-chooser-close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 10 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: none !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink-3) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

.demo-chooser-close svg {
  width: 18px !important;
  height: 18px !important;
}

.demo-chooser-close:hover {
  background: rgba(255,255,255,.1) !important;
  color: var(--ink) !important;
  transform: scale(1.05) !important;
}

.demo-chooser-close:active {
  transform: scale(0.95) !important;
}

/* --- Header section --- */
.demo-chooser-header {
  padding: 32px 32px 24px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  animation: demo-stagger 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both !important;
}

.demo-chooser-header .kicker {
  display: inline-block !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: var(--gold) !important;
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

.demo-chooser-header h2,
#demo-chooser-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}

.demo-chooser-copy {
  font-size: 14px !important;
  color: var(--ink-2) !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

/* --- Body section (scrollable) --- */
.demo-chooser-body {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 28px 32px !important;
}

/* Custom scrollbar for body */
.demo-chooser-body::-webkit-scrollbar {
  width: 4px !important;
}

.demo-chooser-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.demo-chooser-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
}

/* --- Group sections --- */
.demo-chooser-group {
  margin-bottom: 28px !important;
  animation: demo-stagger 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.demo-chooser-group:nth-child(1) { animation-delay: 0.18s !important; }
.demo-chooser-group:nth-child(2) { animation-delay: 0.26s !important; }
.demo-chooser-group:nth-child(3) { animation-delay: 0.34s !important; }
.demo-chooser-group:nth-child(4) { animation-delay: 0.42s !important; }

.demo-chooser-group:last-child {
  margin-bottom: 0 !important;
}

.demo-chooser-group-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-4) !important;
  margin-bottom: 14px !important;
  padding-left: 4px !important;
}

/* --- Card grid --- */
.demo-chooser-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}

/* --- Individual cards (glass treatment) --- */
.demo-chooser-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
  border: none !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.2) !important;
  font-family: var(--font) !important;
  min-height: 140px !important;
}

.demo-chooser-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 8px 24px rgba(0,0,0,.3),
    0 0 40px rgba(200,160,76,.06) !important;
}

.demo-chooser-card:active {
  transform: translateY(-2px) scale(0.99) !important;
}

/* Card title */
.demo-chooser-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em !important;
}

/* Card subtitle */
.demo-chooser-card-subtitle {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  flex: 1 !important;
}

/* Card chips container */
.demo-chooser-card-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

/* Individual chips */
.demo-chooser-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* Card CTA */
.demo-chooser-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  opacity: 0 !important;
  transform: translateX(-8px) !important;
  transition: all 0.2s ease !important;
}

.demo-chooser-card:hover .demo-chooser-card-cta {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.demo-chooser-card-cta::after {
  content: '→' !important;
  font-size: 13px !important;
  transition: transform 0.2s ease !important;
}

.demo-chooser-card:hover .demo-chooser-card-cta::after {
  transform: translateX(3px) !important;
}

/* --- Shell parallax effect when modal is open --- */
body.demo-chooser-open .dashboard-shell,
body.demo-chooser-open .auth-shell,
body.demo-chooser-open .auth-container,
body.demo-chooser-open main {
  transform: scale(0.96) !important;
  filter: brightness(0.7) !important;
  border-radius: 14px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

/* ═══ Light mode overrides ═══ */
html.light .demo-chooser-backdrop,
html[data-theme="light"] .demo-chooser-backdrop {
  animation-name: demo-backdrop-in-light !important;
}

@keyframes demo-backdrop-in-light {
  0% { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: rgba(0,0,0,0); }
  100% { backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); background: rgba(0,0,0,0.25); }
}

html.light .demo-chooser-modal::before,
html[data-theme="light"] .demo-chooser-modal::before {
  background: radial-gradient(circle, rgba(150,117,10,.09), transparent 70%) !important;
}

html.light .demo-chooser-modal::after,
html[data-theme="light"] .demo-chooser-modal::after {
  background: radial-gradient(circle, rgba(37,99,235,.06), transparent 70%) !important;
}

html.light .demo-chooser-dialog,
html[data-theme="light"] .demo-chooser-dialog {
  background: linear-gradient(180deg, #FFFFFF, #FAFAF8) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.1),
    0 40px 100px rgba(0,0,0,.06) !important;
}

html.light .demo-chooser-close,
html[data-theme="light"] .demo-chooser-close {
  background: rgba(0,0,0,.04) !important;
}

html.light .demo-chooser-close:hover,
html[data-theme="light"] .demo-chooser-close:hover {
  background: rgba(0,0,0,.08) !important;
  color: var(--ink) !important;
}

html.light .demo-chooser-header,
html[data-theme="light"] .demo-chooser-header {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

html.light .demo-chooser-header .kicker,
html[data-theme="light"] .demo-chooser-header .kicker {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.05)) !important;
  color: #96750A !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light #demo-chooser-title,
html.light .demo-chooser-header h2,
html[data-theme="light"] #demo-chooser-title,
html[data-theme="light"] .demo-chooser-header h2 {
  text-shadow: none !important;
}

html.light .demo-chooser-card,
html[data-theme="light"] .demo-chooser-card {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 2px 8px rgba(0,0,0,.05) !important;
}

html.light .demo-chooser-card:hover,
html[data-theme="light"] .demo-chooser-card:hover {
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.15),
    0 8px 24px rgba(0,0,0,.08),
    0 0 40px rgba(150,117,10,.04) !important;
}

html.light .demo-chooser-chip,
html[data-theme="light"] .demo-chooser-chip {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

html.light .demo-chooser-card-cta,
html[data-theme="light"] .demo-chooser-card-cta {
  color: #96750A !important;
}

/* ═══ Responsive adjustments ═══ */
@media (max-width: 768px) {
  .demo-chooser-modal {
    padding: 16px !important;
  }

  .demo-chooser-dialog {
    max-width: 100% !important;
    border-radius: 20px !important;
    max-height: calc(100vh - 32px) !important;
  }

  .demo-chooser-header {
    padding: 24px 24px 20px !important;
  }

  .demo-chooser-header h2,
  #demo-chooser-title {
    font-size: 18px !important;
  }

  .demo-chooser-copy {
    font-size: 13px !important;
  }

  .demo-chooser-body {
    padding: 20px !important;
  }

  .demo-chooser-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .demo-chooser-card {
    min-height: auto !important;
    padding: 16px !important;
  }
}

@media (max-width: 480px) {
  .demo-chooser-close {
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .demo-chooser-close svg {
    width: 16px !important;
    height: 16px !important;
  }

  .demo-chooser-header .kicker {
    font-size: 8px !important;
    padding: 4px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT WIDGET — Floating Chat Button + Glass Panel (Tesla/iOS Grade)
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Root container: show when logged in --- */
#sw-root {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9000 !important;
  font-family: var(--font) !important;
}
#sw-root[hidden] {
  display: block !important; /* Override hidden attribute */
}
/* Hide on auth pages */
body[data-app-view="auth"] #sw-root {
  display: none !important;
}

/* --- Floating Action Button (FAB) — Golden glow, breathing animation --- */
#sw-launcher {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: none !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-size: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 4px 20px rgba(200,160,76,.35),
    0 0 50px rgba(200,160,76,.15),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: all .28s cubic-bezier(.16,1,.3,1) !important;
  animation: sw-fab-breathe 3s ease-in-out infinite !important;
}
#sw-launcher:hover {
  transform: scale(1.08) translateY(-3px) !important;
  box-shadow:
    0 8px 32px rgba(200,160,76,.5),
    0 0 80px rgba(200,160,76,.25),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
#sw-launcher:active {
  transform: scale(.95) !important;
}

/* FAB breathing animation */
@keyframes sw-fab-breathe {
  0%, 100% {
    box-shadow:
      0 4px 20px rgba(200,160,76,.35),
      0 0 50px rgba(200,160,76,.15),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
  50% {
    box-shadow:
      0 6px 30px rgba(200,160,76,.5),
      0 0 70px rgba(200,160,76,.22),
      inset 0 1px 0 rgba(255,255,255,.3);
  }
}

/* --- Unread Badge --- */
#sw-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  background: var(--red) !important;
  color: white !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(248,113,113,.4) !important;
  animation: sw-badge-pulse 2s ease-in-out infinite !important;
}
#sw-badge.hidden {
  display: none !important;
}
@keyframes sw-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(248,113,113,.4); }
  50% { transform: scale(1.1); box-shadow: 0 4px 16px rgba(248,113,113,.6); }
}

/* --- Chat Panel — Glass modal with spring entrance --- */
#sw-popup {
  position: absolute !important;
  bottom: 72px !important;
  right: 0 !important;
  width: 380px !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100vh - 140px) !important;
  background: linear-gradient(180deg, var(--floating) 0%, var(--elevated) 100%) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border-radius: var(--r-xl) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 48px rgba(0,0,0,.5),
    0 40px 100px rgba(0,0,0,.3),
    0 0 80px rgba(200,160,76,.04) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: all .35s cubic-bezier(.34,1.4,.64,1) !important;
}
#sw-popup.hidden {
  opacity: 0 !important;
  transform: translateY(20px) scale(.95) !important;
  pointer-events: none !important;
}

/* --- Panel Header --- */
#sw-popup .sw-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#sw-popup .sw-title {
  flex: 1 !important;
  min-width: 0 !important;
}
#sw-popup .sw-title b {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
}
#sw-popup .sw-title span {
  display: block !important;
  font-size: 11px !important;
  color: var(--ink-3) !important;
  margin-top: 2px !important;
}
#sw-popup .sw-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
#sw-popup .sw-actions label {
  font-size: 10px !important;
  color: var(--ink-3) !important;
}
#sw-popup .sw-actions input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--gold) !important;
}

/* --- Messages Area --- */
#sw-popup .sw-body {
  flex: 1 !important;
  padding: 16px 20px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#sw-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* --- Message Bubbles --- */
.sw-msg {
  display: flex !important;
  max-width: 85% !important;
}
.sw-msg.sw-user {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
}
.sw-msg.sw-assistant,
.sw-msg.sw-agent {
  align-self: flex-start !important;
}
.sw-bubble {
  padding: 12px 16px !important;
  border-radius: var(--r) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
}

/* User bubble — golden tint */
.sw-user .sw-bubble {
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.08) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
  color: var(--ink) !important;
}

/* Assistant bubble — glass */
.sw-assistant .sw-bubble {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Agent (human) bubble — blue tint */
.sw-agent .sw-bubble {
  background: linear-gradient(135deg, rgba(96,165,250,.12) 0%, rgba(96,165,250,.06) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.15) !important;
}

/* --- Footer / Input Area --- */
#sw-popup .sw-foot {
  padding: 16px 20px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
#sw-popup .sw-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}
#sw-popup #sw-input {
  flex: 1 !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}
#sw-popup #sw-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}
#sw-popup #sw-input::placeholder {
  color: var(--ink-4) !important;
}
#sw-popup #sw-send {
  padding: 12px 20px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}
#sw-popup #sw-send:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(200,160,76,.4) !important;
}
#sw-popup .sw-mini {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
#sw-popup #sw-status {
  font-size: 11px !important;
  color: var(--ink-4) !important;
}
#sw-popup #sw-clear {
  padding: 6px 12px !important;
  font-size: 11px !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-3) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  cursor: pointer !important;
}
#sw-popup #sw-clear:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
}

/* --- Followup Suggestions --- */
#sw-followups {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
#sw-followups button {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
#sw-followups button:hover {
  background: rgba(200,160,76,.1) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* --- Typing Indicator --- */
.sw-typing .sw-bubble {
  padding: 14px 18px !important;
}
.sw-typing-dots {
  display: inline-flex !important;
  gap: 5px !important;
  align-items: center !important;
}
.sw-typing-dots span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ink-3) !important;
  opacity: .4 !important;
  animation: sw-typing-bounce 1.2s ease-in-out infinite !important;
}
.sw-typing-dots span:nth-child(2) { animation-delay: .15s !important; }
.sw-typing-dots span:nth-child(3) { animation-delay: .3s !important; }
@keyframes sw-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT WIDGET — Light Mode
   ═══════════════════════════════════════════════════════════════════════════ */
html.light #sw-launcher,
html[data-theme="light"] #sw-launcher {
  background: linear-gradient(135deg, var(--gold) 0%, #A07830 100%) !important;
  box-shadow:
    0 4px 20px rgba(150,117,10,.25),
    0 0 40px rgba(150,117,10,.1),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html.light #sw-launcher:hover,
html[data-theme="light"] #sw-launcher:hover {
  box-shadow:
    0 8px 32px rgba(150,117,10,.4),
    0 0 60px rgba(150,117,10,.18),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}
html.light #sw-popup,
html[data-theme="light"] #sw-popup {
  background: linear-gradient(180deg, var(--floating) 0%, var(--raised) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.08),
    0 12px 48px rgba(0,0,0,.12),
    0 40px 80px rgba(0,0,0,.08) !important;
}
html.light #sw-popup .sw-head,
html[data-theme="light"] #sw-popup .sw-head {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, transparent 100%) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
}
html.light .sw-user .sw-bubble,
html[data-theme="light"] .sw-user .sw-bubble {
  background: linear-gradient(135deg, rgba(150,117,10,.12) 0%, rgba(150,117,10,.06) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}
html.light .sw-assistant .sw-bubble,
html[data-theme="light"] .sw-assistant .sw-bubble {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .sw-agent .sw-bubble,
html[data-theme="light"] .sw-agent .sw-bubble {
  background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(59,130,246,.04) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.12) !important;
}
html.light #sw-popup #sw-input,
html[data-theme="light"] #sw-popup #sw-input {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light #sw-popup #sw-input:focus,
html[data-theme="light"] #sw-popup #sw-input:focus {
  box-shadow: 0 0 0 3px rgba(150,117,10,.1), inset 0 0 0 1px rgba(150,117,10,.15) !important;
}
html.light #sw-popup #sw-send,
html[data-theme="light"] #sw-popup #sw-send {
  background: linear-gradient(135deg, var(--gold) 0%, #A07830 100%) !important;
  box-shadow: 0 2px 12px rgba(150,117,10,.2) !important;
}
html.light #sw-popup .sw-foot,
html[data-theme="light"] #sw-popup .sw-foot {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.02) 100%) !important;
  border-top-color: rgba(0,0,0,.04) !important;
}
html.light #sw-popup #sw-clear,
html[data-theme="light"] #sw-popup #sw-clear {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light #sw-popup #sw-clear:hover,
html[data-theme="light"] #sw-popup #sw-clear:hover {
  background: rgba(0,0,0,.08) !important;
}
html.light #sw-followups button,
html[data-theme="light"] #sw-followups button {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light #sw-followups button:hover,
html[data-theme="light"] #sw-followups button:hover {
  background: rgba(150,117,10,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}
html.light .sw-typing-dots span,
html[data-theme="light"] .sw-typing-dots span {
  background: var(--ink-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT WIDGET — Mobile Responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #sw-root {
    bottom: 16px !important;
    right: 16px !important;
  }
  #sw-launcher {
    width: 52px !important;
    height: 52px !important;
    font-size: 20px !important;
  }
  #sw-popup {
    width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 100px) !important;
    bottom: 68px !important;
    right: 0 !important;
    border-radius: var(--r-lg) !important;
  }
  #sw-popup .sw-head {
    padding: 14px 16px !important;
  }
  #sw-popup .sw-body {
    padding: 12px 16px !important;
  }
  #sw-popup .sw-foot {
    padding: 12px 16px !important;
  }
  #sw-popup #sw-input {
    padding: 10px 14px !important;
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  #sw-popup #sw-send {
    padding: 10px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEBTS PAGE — Full Glass Theme Styling
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main page container — full width */
#debts-page {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 32px 36px !important;
}

/* Two-panel layout — left list, right detail */
.debts-layout {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Panel cards — glass treatment (dark base with subtle gradient overlay) */
.debts-panel {
  background: var(--base) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  border: none !important;
  position: relative !important;
}

/* Subtle top highlight line — glass polish (matches .dash-card::before) */
.debts-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  pointer-events: none !important;
}

/* Topbar — page header row */
.debts-topbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

/* Mini tag badge — golden pill */
/* DEBTS page title — plain bold heading like all other pages */
.debts-panel .mini-tag,
#debts-page .mini-tag {
  display: block !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  background: none !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
}

/* Description text under title */
.debts-topbar .text-muted {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}

/* Add Debt button — primary golden glow */
#debts-add-btn {
  padding: 10px 20px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.3),
    0 0 24px rgba(200,160,76,.12),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}
#debts-add-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 6px 24px rgba(200,160,76,.4),
    0 0 48px rgba(200,160,76,.18),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
#debts-add-btn:active {
  transform: scale(.97) !important;
}

/* Summary stats section — horizontal layout */
.debts-summary {
  display: flex !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

/* Summary cards — stat display with glass */
.summary-card {
  flex: 1 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.15) !important;
  border-radius: var(--r) !important;
  padding: 16px 20px !important;
  text-align: left !important;
}

/* Summary label — uppercase small */
.summary-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

/* Summary value — large number */
.summary-value {
  font-size: 28px !important;
  font-weight: 200 !important;
  letter-spacing: -.03em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.4), 0 0 32px rgba(200,160,76,.04) !important;
}

/* Empty state — centered message */
.debts-empty {
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--ink-4) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,.015) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Debts list container */
.debts-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Detail panel — right side */
.debts-detail-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 24px rgba(0,0,0,.25),
    0 12px 48px rgba(0,0,0,.15) !important;
  border-radius: var(--r-lg) !important;
  padding: 28px !important;
  min-height: 300px !important;
}

/* Detail panel header */
.debts-detail-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Detail title */
#debt-detail-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
  margin: 0 0 6px 0 !important;
  text-shadow: 0 0 24px rgba(200,160,76,.06) !important;
}

/* Detail meta text */
#debt-detail-meta {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}

/* Mark Paid button — secondary ghost style */
#debts-mark-paid-btn {
  padding: 10px 20px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}
#debts-mark-paid-btn:hover {
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.2) !important;
}

/* Detail body content */
.debts-detail-body {
  padding: 0 !important;
}

/* ─────────────────────────────────────────────
   Debts Page — Light Mode
   ───────────────────────────────────────────── */
html.light .debts-panel,
html[data-theme="light"] .debts-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.8) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 24px rgba(0,0,0,.08),
    0 12px 48px rgba(0,0,0,.04) !important;
}

html.light .debts-panel .mini-tag,
html[data-theme="light"] .debts-panel .mini-tag,
html.light #debts-page .mini-tag,
html[data-theme="light"] #debts-page .mini-tag {
  background: linear-gradient(135deg, rgba(150,117,10,.12), rgba(150,117,10,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light .summary-card,
html[data-theme="light"] .summary-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.06) !important;
}

html.light .summary-value,
html[data-theme="light"] .summary-value {
  text-shadow: none !important;
}

html.light .debts-empty,
html[data-theme="light"] .debts-empty {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .debts-detail-panel,
html[data-theme="light"] .debts-detail-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 24px rgba(0,0,0,.08) !important;
}

html.light .debts-detail-head,
html[data-theme="light"] .debts-detail-head {
  border-bottom-color: rgba(0,0,0,.08) !important;
}

html.light #debt-detail-title,
html[data-theme="light"] #debt-detail-title {
  text-shadow: none !important;
}

html.light #debts-mark-paid-btn,
html[data-theme="light"] #debts-mark-paid-btn {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06) !important;
}
html.light #debts-mark-paid-btn:hover,
html[data-theme="light"] #debts-mark-paid-btn:hover {
  background: rgba(0,0,0,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 4px 16px rgba(0,0,0,.08) !important;
}

/* ─────────────────────────────────────────────
   Debts Page — Mobile Responsive
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .debts-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .debts-detail-panel {
    min-height: auto !important;
  }
}

@media (max-width: 600px) {
  #debts-page {
    padding: 20px 16px !important;
  }
  .debts-panel {
    padding: 18px !important;
  }
  .debts-topbar {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #debts-add-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .debts-summary {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .summary-value {
    font-size: 24px !important;
  }
  .debts-detail-panel {
    padding: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPORTS PAGE — Full Glass Theme Styling
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main page container — full width */
#reports-page {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 32px 36px !important;
}

/* Two-panel layout (singleview5 Phase F1 — sidebar collapsed from
   1fr/1.4fr to 320px/1fr per the canonical shemify-ui.css:2651
   declaration). The 1fr/1.4fr ratio gave a 917px sidebar at 2226px
   viewport — bigger than needed for a date-list rail. The fixed
   320px sidebar puts more breathing room behind the report detail
   without removing any feature. */
.reports-layout {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* Panel cards — glass treatment (darker than dash-card to compensate for sparse content) */
.reports-panel {
  background: var(--base) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  border: none !important;
  position: relative !important;
}

/* Subtle top highlight line — glass polish (matches .dash-card::before) */
.reports-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  pointer-events: none !important;
}

/* Topbar — page header row */
.reports-topbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

/* REPORTS page title — plain bold heading like all other pages */
#reports-page .mini-tag {
  display: block !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  background: none !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
}

/* Subtitle styling */
.reports-topbar > div:first-child > div:nth-child(2) {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
  text-shadow: none !important;
  margin-bottom: 4px !important;
}

/* Mini summary text */
#reports-summary-mini,
.reports-topbar .pos-mini {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-4) !important;
  margin-bottom: 12px !important;
}

/* Tabs container */
.reports-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Tab buttons — golden pill active state */
.reports-tab {
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}
.reports-tab:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
}
.reports-tab.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.3), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* Filters section */
.reports-topbar .history-filters {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
}

/* Field group styling */
.reports-topbar .field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.reports-topbar .field-group label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
}

/* Year select — custom styling */
#reports-year {
  padding: 10px 36px 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  color-scheme: dark !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  min-width: 100px !important;
}
#reports-year:hover {
  background-color: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.2) !important;
}
#reports-year:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* Refresh button — ghost style */
#reports-refresh-btn {
  padding: 10px 20px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
}
#reports-refresh-btn:hover {
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.2) !important;
}

/* Reports list container */
.reports-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Reports item — list entry */
.reports-item {
  padding: 16px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}
.reports-item:hover {
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
}
.reports-item.active {
  background: var(--gold-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 12px rgba(200,160,76,.1) !important;
}

/* Reports item meta/empty state */
.reports-item-meta {
  font-size: 13px !important;
  color: var(--ink-3) !important;
}

/* Detail panel */
.reports-detail {
  min-height: 200px !important;
}

/* Detail panel empty state */
.reports-detail-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 200px !important;
  padding: 48px 24px !important;
  color: var(--ink-4) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
  background: rgba(255,255,255,.015) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Upgrade hint box */
#reports-upgrade-hint {
  padding: 20px !important;
  background: linear-gradient(135deg, rgba(200,160,76,.08), rgba(200,160,76,.03)) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
  margin-bottom: 20px !important;
}
#reports-upgrade-hint strong {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────
   Reports Page — Light Mode
   ───────────────────────────────────────────── */
html.light .reports-panel,
html[data-theme="light"] .reports-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.8) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 24px rgba(0,0,0,.08),
    0 12px 48px rgba(0,0,0,.04) !important;
}

html.light #reports-page .mini-tag,
html[data-theme="light"] #reports-page .mini-tag {
  background: linear-gradient(135deg, rgba(150,117,10,.12), rgba(150,117,10,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light .reports-topbar > div:first-child > div:nth-child(2),
html[data-theme="light"] .reports-topbar > div:first-child > div:nth-child(2) {
  text-shadow: none !important;
}

html.light .reports-tabs,
html[data-theme="light"] .reports-tabs {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .reports-tab,
html[data-theme="light"] .reports-tab {
  color: var(--ink-3) !important;
}
html.light .reports-tab:hover,
html[data-theme="light"] .reports-tab:hover {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink) !important;
}
html.light .reports-tab.active,
html[data-theme="light"] .reports-tab.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: white !important;
}

html.light #reports-year,
html[data-theme="light"] #reports-year {
  background-color: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06) !important;
  color-scheme: light !important;
}
html.light #reports-year:hover,
html[data-theme="light"] #reports-year:hover {
  background-color: rgba(0,0,0,.05) !important;
}

html.light #reports-refresh-btn,
html[data-theme="light"] #reports-refresh-btn {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06) !important;
}
html.light #reports-refresh-btn:hover,
html[data-theme="light"] #reports-refresh-btn:hover {
  background: rgba(0,0,0,.06) !important;
}

html.light .reports-item,
html[data-theme="light"] .reports-item {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}
html.light .reports-item:hover,
html[data-theme="light"] .reports-item:hover {
  background: rgba(0,0,0,.04) !important;
}
html.light .reports-item.active,
html[data-theme="light"] .reports-item.active {
  background: var(--gold-glow) !important;
}

html.light .reports-detail-empty,
html[data-theme="light"] .reports-detail-empty {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light #reports-upgrade-hint,
html[data-theme="light"] #reports-upgrade-hint {
  background: linear-gradient(135deg, rgba(150,117,10,.08), rgba(150,117,10,.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12) !important;
}

/* ─────────────────────────────────────────────
   Reports Page — Mobile Responsive
   Phase A: breakpoint reconciled to 900px to match the canonical
   single-column collapse declared in shemify-ui.css:2660 (Thinker
   singleview5 follow-up). Between 900-1024px the 320px sidebar +
   ~580px detail layout still works comfortably; previously the
   override prematurely collapsed at 1024 leaving a single-column
   layout that wasted horizontal real estate.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .reports-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  #reports-page {
    padding: 20px 16px !important;
  }
  .reports-panel {
    padding: 18px !important;
  }
  .reports-topbar {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .reports-topbar .history-filters {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  #reports-year {
    flex: 1 !important;
    min-width: 120px !important;
  }
  #reports-refresh-btn {
    flex: 1 !important;
  }
  .reports-tabs {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GIFT CARDS PAGE — COMPLETE GLASS THEME REDESIGN
   Tesla/iOS/Savant-inspired luxury interface
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Gift Cards Page Container
   ───────────────────────────────────────────── */
#giftcards-page {
  padding: 28px 36px 40px !important;
  width: 100% !important;
  max-width: none !important;
}

/* ─────────────────────────────────────────────
   Page Header — Top Bar
   ───────────────────────────────────────────── */
#giftcards-page .debts-topbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

#giftcards-page .debts-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
  margin: 0 !important;
}

#giftcards-page .debts-subtitle {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}

/* Top action buttons container — UX: Show only main CTA + Refresh, hide tab-duplicates */
#giftcards-page .gc-top-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* UX: Hide duplicate navigation buttons — tabs already handle this */
#giftcards-print-tab-btn,
#giftcards-activate-tab-btn {
  display: none !important;
}

/* Primary action button (Sell gift card) */
#giftcards-sell-btn {
  padding: 10px 22px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  transition: all .22s var(--spring) !important;
}

#giftcards-sell-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

#giftcards-sell-btn:active {
  transform: scale(.97) !important;
}

/* Secondary action buttons */
#giftcards-print-tab-btn,
#giftcards-activate-tab-btn,
#giftcards-refresh-btn {
  padding: 10px 18px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2) !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
}

#giftcards-print-tab-btn:hover,
#giftcards-activate-tab-btn:hover,
#giftcards-refresh-btn:hover {
  background: rgba(255,255,255,.09) !important;
  transform: translateY(-1px) scale(1.01) !important;
}

/* ─────────────────────────────────────────────
   Tab Navigation — Glass Pill Container
   ───────────────────────────────────────────── */
#giftcards-page .gc-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* UX: Tab bar + Pro Tip side by side */
#giftcards-page .gc-shell > .gc-nav {
  display: inline-flex !important;
  align-items: center !important;
}

#giftcards-page .gc-nav {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  margin-bottom: 0 !important;
  width: fit-content !important;
  backdrop-filter: blur(8px) !important;
}

#giftcards-page .gc-tab {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .2s var(--spring) !important;
  position: relative !important;
}

#giftcards-page .gc-tab:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.03) !important;
}

#giftcards-page .gc-tab.active {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 2px 12px rgba(200,160,76,.15) !important;
}

/* UX: Add workflow step numbers to tabs */
#giftcards-page .gc-tab[data-gc-tab="design"]::before {
  content: "1. " !important;
  opacity: .6 !important;
}
#giftcards-page .gc-tab[data-gc-tab="print"]::before {
  content: "2. " !important;
  opacity: .6 !important;
}
#giftcards-page .gc-tab[data-gc-tab="activate"]::before {
  content: "3. " !important;
  opacity: .6 !important;
}
#giftcards-page .gc-tab[data-gc-tab="cards"]::before {
  content: "" !important;
}
#giftcards-page .gc-tab.active::before {
  opacity: 1 !important;
}

/* Pro tip hint — UX: Show as workflow guide banner */
#giftcards-page .gc-nav-hint {
  display: block !important;
  margin-left: 24px !important;
  padding: 12px 18px !important;
  background: linear-gradient(135deg, rgba(200,160,76,.08), rgba(200,160,76,.03)) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12) !important;
  max-width: 400px !important;
}

#giftcards-page .gc-nav-hint .hint {
  font-size: 12px !important;
  color: var(--ink-2) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

#giftcards-page .gc-nav-hint .hint b {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────
   Main Content Panel Container
   ───────────────────────────────────────────── */
#giftcards-page .gc-main {
  width: 100% !important;
}

#giftcards-page .gc-panel {
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

#giftcards-page .gc-panel > .card,
#giftcards-page .gc-print-grid .card,
#giftcards-page .gc-activate-grid .card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  border: none !important;
}

/* ─────────────────────────────────────────────
   CARDS TAB — Stats Strip
   ───────────────────────────────────────────── */
#giftcards-page .gc-cards-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

#giftcards-page .gc-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 8px !important;
}

#giftcards-page .gc-stats .mini-tag {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
}

#giftcards-page .gc-stats .mini-tag span {
  font-size: 32px !important;
  font-weight: 200 !important;
  letter-spacing: -.03em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.5), 0 0 40px rgba(200,160,76,.04) !important;
}

/* Outstanding stat — gold accent */
#giftcards-page .gc-stats .mini-tag:first-child {
  background: linear-gradient(135deg, rgba(200,160,76,.08) 0%, rgba(200,160,76,.03) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12), 0 2px 12px rgba(200,160,76,.08) !important;
}

#giftcards-page .gc-stats .mini-tag:first-child span {
  color: var(--gold) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.3) !important;
}

/* ─────────────────────────────────────────────
   CARDS TAB — Filters
   ───────────────────────────────────────────── */
#giftcards-page .gc-filters {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
}

#giftcards-page .gc-filters .field {
  margin: 0 !important;
}

#giftcards-page .gc-filters .label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

#giftcards-page .gc-filters .input,
#giftcards-page .gc-filters select {
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  transition: all .2s var(--spring) !important;
}

#giftcards-page .gc-filters .input:hover,
#giftcards-page .gc-filters select:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

#giftcards-page .gc-filters .input:focus,
#giftcards-page .gc-filters select:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* Custom select dropdown styling */
#giftcards-page .gc-filters select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  color-scheme: dark !important;
}

/* ─────────────────────────────────────────────
   CARDS TAB — Table
   ───────────────────────────────────────────── */
#giftcards-page .gc-table-wrap {
  margin-top: 16px !important;
  overflow-x: auto !important;
  border-radius: var(--r) !important;
}

#giftcards-page .gc-table-wrap .table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#giftcards-page .gc-table-wrap thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  padding: 14px 16px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.01) !important;
}

#giftcards-page .gc-table-wrap tbody td {
  padding: 14px 16px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  vertical-align: middle !important;
}

#giftcards-page .gc-table-wrap tbody tr:hover {
  background: rgba(255,255,255,.02) !important;
}

#giftcards-page .gc-table-wrap tbody tr:last-child td {
  border-bottom: none !important;
}

/* Monospace code column */
#giftcards-page .gc-table-wrap .mono {
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  color: var(--ink-2) !important;
}

/* Status pills */
#giftcards-page .gc-table-wrap .pill {
  display: inline-flex !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  border-radius: 20px !important;
}

#giftcards-page .gc-table-wrap .pill-success {
  background: var(--green-glow) !important;
  color: var(--green) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.15) !important;
}

#giftcards-page .gc-table-wrap .pill-muted {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-3) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

#giftcards-page .gc-table-wrap .pill-danger {
  background: var(--red-glow) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}

/* Action buttons in table */
#giftcards-page .gc-section-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#giftcards-page .gc-section-row .btn {
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all .15s var(--spring) !important;
}

#giftcards-page .gc-section-row .btn-secondary {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
}

#giftcards-page .gc-section-row .btn-secondary:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
}

#giftcards-page .gc-section-row .btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 8px rgba(200,160,76,.2) !important;
  border: none !important;
}

#giftcards-page .gc-section-row .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(200,160,76,.3) !important;
}

#giftcards-page .gc-section-row .btn-danger {
  background: rgba(248,113,113,.1) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
  border: none !important;
}

#giftcards-page .gc-section-row .btn-danger:hover {
  background: rgba(248,113,113,.15) !important;
}

/* Empty state — UX: Make more inviting with guidance */
#giftcards-page .gc-table-wrap .text-muted {
  color: var(--ink-3) !important;
  font-size: 15px !important;
  text-align: center !important;
  padding: 60px 24px !important;
}

/* UX: Style empty state row to be more prominent */
#giftcards-page .gc-table-wrap tbody tr:only-child td[colspan] {
  background: linear-gradient(180deg, rgba(255,255,255,.01), transparent) !important;
  border-radius: var(--r) !important;
}

#giftcards-page .gc-table-wrap tbody tr:only-child td[colspan]::before {
  content: "🎁" !important;
  display: block !important;
  font-size: 40px !important;
  margin-bottom: 12px !important;
  opacity: .4 !important;
}

#giftcards-page .gc-table-wrap tbody tr:only-child td[colspan]::after {
  content: "Start by designing a template, then sell or print cards." !important;
  display: block !important;
  margin-top: 8px !important;
  font-size: 13px !important;
  color: var(--ink-4) !important;
}

/* Message row */
#giftcards-page #giftcards-msg {
  font-size: 12px !important;
  padding: 8px 0 !important;
}

#giftcards-page .gc-msg-success { color: var(--green) !important; }
#giftcards-page .gc-msg-error { color: var(--red) !important; }
#giftcards-page .gc-msg-info { color: var(--ink-3) !important; }

/* ─────────────────────────────────────────────
   DESIGN TAB — Two Column Layout
   ───────────────────────────────────────────── */
#giftcards-page .gc-design-layout {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Templates sidebar */
#giftcards-page .gc-templates {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
}

#giftcards-page .gc-templates-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

#giftcards-page .gc-templates .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

#giftcards-page .gc-templates .card-subtitle {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}

/* Template action buttons */
#giftcards-page .gc-templates-head .row {
  display: flex !important;
  gap: 8px !important;
}

#giftcards-page .gc-templates-head .btn-small {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

#giftcards-page #gc-new-template-btn {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  box-shadow: 0 2px 8px rgba(200,160,76,.2) !important;
  border: none !important;
}

#giftcards-page #gc-dup-template-btn {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
}

#giftcards-page #gc-del-template-btn {
  background: rgba(248,113,113,.1) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
  border: none !important;
}

/* Ready-made templates presets */
#giftcards-page .gc-presets {
  margin-bottom: 20px !important;
  padding: 16px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

#giftcards-page .gc-presets-head {
  margin-bottom: 12px !important;
}

#giftcards-page .gc-presets-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 10px !important;
}

/* UX: Compact preset cards — click whole card to select */
#giftcards-page .gc-preset {
  cursor: pointer !important;
  border-radius: var(--r-sm) !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  transition: all .2s var(--spring) !important;
  overflow: hidden !important;
}

#giftcards-page .gc-preset:hover {
  background: rgba(200,160,76,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 4px 16px rgba(0,0,0,.2) !important;
  transform: translateY(-2px) !important;
}

#giftcards-page .gc-preset:active {
  transform: scale(.97) !important;
}

/* Compact preview — smaller height, hide logo overlay */
#giftcards-page .gc-preset-preview {
  height: 60px !important;
  overflow: hidden !important;
  border-radius: 6px 6px 0 0 !important;
  pointer-events: none !important;
}

/* Hide the business logo in preset preview */
#giftcards-page .gc-preset-preview [data-gc-el-id="sys_logo"],
#giftcards-page .gc-preset-preview .gc-el[data-gc-el-id*="logo"] {
  display: none !important;
}

/* Compact body */
#giftcards-page .gc-preset-body {
  padding: 8px 10px !important;
}

#giftcards-page .gc-preset-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 2px !important;
}

/* Description: smaller + muted */
#giftcards-page .gc-preset-sub {
  font-size: 9px !important;
  font-weight: 400 !important;
  color: var(--ink-4) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* UX: Hide "Use" button — clicking card selects it */
#giftcards-page .gc-preset [data-gc-preset-use] {
  display: none !important;
}

/* Designer canvas: elements MUST be absolutely positioned (card preview already has this via .gc-card-el) */
#gc-designer-canvas .gc-el {
  position: absolute !important;
  box-sizing: border-box !important;
}


#giftcards-page .gc-templates .hint {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  line-height: 1.5 !important;
}

/* Undo/Redo buttons */
#giftcards-page .gc-undo-redo {
  display: flex !important;
  gap: 4px !important;
}
#giftcards-page .gc-undo-redo .btn {
  font-size: 11px !important;
  padding: 5px 10px !important;
  min-width: 0 !important;
}
#giftcards-page .gc-undo-redo .btn:disabled {
  opacity: 0.3 !important;
  pointer-events: none !important;
}

/* Editor area */
#giftcards-page .gc-editor {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
}

#giftcards-page .gc-editor-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

#giftcards-page .gc-side-toggle {
  display: flex !important;
  gap: 4px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

#giftcards-page .gc-side-toggle .btn {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  transition: all .15s !important;
}

#giftcards-page .gc-side-toggle .btn.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15) !important;
}

#giftcards-page .gc-editor-body {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 20px !important;
}

/* Canvas wrap */
#giftcards-page .gc-editor-canvas-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#giftcards-page .gc-canvas {
  aspect-ratio: 1.586 !important;
  background-color: rgba(255,255,255,.02);
  background-size: cover;
  background-position: center;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Editor sidebar */
#giftcards-page .gc-editor-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#giftcards-page .gc-toolbox {
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  padding: 16px !important;
}

#giftcards-page .gc-toolbox .card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3) !important;
  margin-bottom: 12px !important;
}

#giftcards-page .gc-toolbox-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#giftcards-page .gc-props {
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  padding: 16px !important;
  flex: 1 !important;
}

#giftcards-page .gc-props .text-muted {
  font-size: 12px !important;
  color: var(--ink-4) !important;
}

/* Color field styling */
#giftcards-page .gc-colorfield {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#giftcards-page .gc-color-swatch {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 2px 6px rgba(0,0,0,.3) !important;
  cursor: pointer !important;
}

#giftcards-page .gc-color-hex {
  flex: 1 !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
}

#giftcards-page .gc-color-native {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
}

/* ─────────────────────────────────────────────
   PRINT & BATCHES TAB — Two Column Grid
   ───────────────────────────────────────────── */
#giftcards-page .gc-print-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

#giftcards-page .gc-print-grid > .card {
  background: var(--base) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
}

#giftcards-page .gc-print-grid .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}

#giftcards-page .gc-print-grid .card-subtitle {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin: 0 0 20px !important;
  line-height: 1.5 !important;
}

/* Print form */
#giftcards-page .gc-print-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

#giftcards-page .gc-print-form .field {
  margin: 0 !important;
}

#giftcards-page .gc-print-form .label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

#giftcards-page .gc-print-form .input {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background-color: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
}

/* Gift cards glass select — .sfy-select-wrap inside print form gets full-width */
#giftcards-page .gc-print-form .sfy-select-wrap {
  width: 100% !important;
}
#giftcards-page .gc-print-form .sfy-select-trigger {
  width: 100% !important;
}
#giftcards-page .gc-print-form .sfy-select-menu {
  width: 100% !important;
}

#giftcards-page .gc-print-form .mini {
  font-size: 12px !important;
  color: var(--ink-3) !important;
}

#giftcards-page #gc-generate-batch-btn {
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25) !important;
  cursor: pointer !important;
}

/* Batches list */
#giftcards-page .gc-batches-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

#giftcards-page .gc-batches-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#giftcards-page #gc-batch-msg,
#giftcards-page #gc-activate-msg {
  font-size: 12px !important;
}

/* ─────────────────────────────────────────────
   ACTIVATE TAB — Two Column Layout
   ───────────────────────────────────────────── */
#giftcards-page .gc-activate-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

#giftcards-page .gc-activate-grid > .card {
  background: var(--base) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
}

#giftcards-page .gc-activate-grid .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
}

#giftcards-page .gc-activate-grid .card-subtitle {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin: 0 0 20px !important;
}

/* Activate form */
#giftcards-page .gc-activate-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

#giftcards-page .gc-activate-form .field {
  margin: 0 !important;
}

#giftcards-page .gc-activate-form .label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 8px !important;
}

#giftcards-page .gc-activate-form .input,
#giftcards-page .gc-activate-form textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
}

#giftcards-page .gc-activate-form textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

#giftcards-page .gc-activate-form .mono {
  font-family: 'SF Mono', Monaco, Consolas, monospace !important;
  letter-spacing: .03em !important;
}

#giftcards-page #gc-activate-btn {
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25) !important;
  cursor: pointer !important;
}

#giftcards-page #gc-activate-check-btn {
  padding: 12px 18px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  cursor: pointer !important;
}

/* Preview card side toggle */
#giftcards-page .gc-activate-grid .gc-side-toggle,
#giftcards-page [data-gc-panel="activate"] [style*="display:flex"] {
  display: flex !important;
  gap: 4px !important;
}

/* ─────────────────────────────────────────────
   Gift Cards — Light Mode Overrides
   ───────────────────────────────────────────── */
html.light #giftcards-page .gc-panel > .card,
html[data-theme="light"] #giftcards-page .gc-panel > .card,
html.light #giftcards-page .gc-templates,
html[data-theme="light"] #giftcards-page .gc-templates,
html.light #giftcards-page .gc-editor,
html[data-theme="light"] #giftcards-page .gc-editor,
html.light #giftcards-page .gc-print-grid > .card,
html[data-theme="light"] #giftcards-page .gc-print-grid > .card,
html.light #giftcards-page .gc-activate-grid > .card,
html[data-theme="light"] #giftcards-page .gc-activate-grid > .card {
  background: var(--raised) !important;
  background-image: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light #giftcards-page .gc-stats .mini-tag,
html[data-theme="light"] #giftcards-page .gc-stats .mini-tag {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light #giftcards-page .gc-stats .mini-tag:first-child,
html[data-theme="light"] #giftcards-page .gc-stats .mini-tag:first-child {
  background: linear-gradient(135deg, rgba(150,117,10,.06), rgba(150,117,10,.02)) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.1) !important;
}

html.light #giftcards-page .gc-nav,
html[data-theme="light"] #giftcards-page .gc-nav {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light #giftcards-page .gc-tab.active,
html[data-theme="light"] #giftcards-page .gc-tab.active {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.05)) !important;
  color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light #giftcards-page .gc-filters .input,
html[data-theme="light"] #giftcards-page .gc-filters .input,
html.light #giftcards-page .gc-filters select,
html[data-theme="light"] #giftcards-page .gc-filters select,
html.light #giftcards-page .gc-print-form .input,
html[data-theme="light"] #giftcards-page .gc-print-form .input,
html.light #giftcards-page .gc-print-form select,
html[data-theme="light"] #giftcards-page .gc-print-form select,
html.light #giftcards-page .gc-activate-form .input,
html[data-theme="light"] #giftcards-page .gc-activate-form .input,
html.light #giftcards-page .gc-activate-form textarea,
html[data-theme="light"] #giftcards-page .gc-activate-form textarea {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink) !important;
}

html.light #giftcards-page .gc-filters select,
html[data-theme="light"] #giftcards-page .gc-filters select,
html.light #giftcards-page .gc-print-form select,
html[data-theme="light"] #giftcards-page .gc-print-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  color-scheme: light !important;
}

/* ─────────────────────────────────────────────
   Gift Cards — Mobile Responsive
   ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  #giftcards-page .gc-design-layout {
    grid-template-columns: 1fr !important;
  }
  #giftcards-page .gc-editor-body {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1024px) {
  #giftcards-page .gc-print-grid,
  #giftcards-page .gc-activate-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  #giftcards-page {
    padding: 0 16px 24px !important;
  }

  #giftcards-page .debts-topbar {
    flex-direction: column !important;
    gap: 16px !important;
  }

  #giftcards-page .gc-top-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #giftcards-page .gc-top-actions .btn {
    flex: 1 !important;
    min-width: 120px !important;
  }

  #giftcards-page .gc-nav {
    width: 100% !important;
    overflow-x: auto !important;
  }

  #giftcards-page .gc-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #giftcards-page .gc-filters {
    flex-direction: column !important;
  }

  #giftcards-page .gc-filters .field {
    width: 100% !important;
    min-width: unset !important;
  }

  #giftcards-page .gc-activate-form {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT PAGE — Glass Theme Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page container — no max-width, let cards fill available space */
.spt-page {
  padding: 0 !important;
  max-width: none !important;
}

/* Header */
.spt-header {
  margin-bottom: 32px !important;
}

.spt-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
}

.spt-subtitle {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
}

/* Responsive Card Grid — auto-fit keeps cards ~280px+ wide, centers the row */
.spt-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

@media (max-width: 700px) {
  .spt-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Glass Cards */
.spt-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.018) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.25), 0 12px 48px rgba(0,0,0,.18) !important;
  border-radius: var(--r-lg, 20px) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.25s cubic-bezier(.16,1,.3,1) !important;
  border: none !important;
}

.spt-card:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 6px 28px rgba(0,0,0,.3), 0 16px 56px rgba(0,0,0,.22), 0 0 40px rgba(200,160,76,.04) !important;
  transform: translateY(-2px) !important;
}

/* Card Icon */
.spt-card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  color: var(--ink-2) !important;
}

.spt-card-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.8 !important;
}

.spt-card-icon-gold {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 0 20px rgba(200,160,76,.08) !important;
  color: var(--gold) !important;
}

/* Card Title */
.spt-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

/* Card Description */
.spt-card-desc {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
  flex: 1 !important;
}

.spt-card-desc strong {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* Buttons */
.spt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm, 10px) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(.16,1,.3,1) !important;
  font-family: inherit !important;
  white-space: nowrap !important;
}

.spt-btn-gold {
  background: linear-gradient(135deg, var(--gold-bright, #D4B060) 0%, var(--gold, #C8A04C) 100%) !important;
  color: var(--void, #060608) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

.spt-btn-gold:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.spt-btn-gold:active {
  transform: scale(0.97) !important;
}

.spt-btn-ghost {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink, #F0F0F4) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2) !important;
}

.spt-btn-ghost:hover {
  background: rgba(255,255,255,.09) !important;
  transform: translateY(-1px) scale(1.01) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.25) !important;
}

.spt-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Page Status */
.spt-page-status {
  margin-top: 24px !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPPORT MODALS — Glass Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal description text */
.spt-modal-desc {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  line-height: 1.5 !important;
  margin: 0 0 20px 0 !important;
}

.spt-modal-desc strong {
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* Form group */
.spt-form-group {
  margin-bottom: 16px !important;
}

.spt-form-group:last-child {
  margin-bottom: 0 !important;
}

/* Labels */
.spt-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ink-2) !important;
  margin-bottom: 8px !important;
}

.spt-optional {
  font-weight: 400 !important;
  text-transform: none !important;
  color: var(--ink-4) !important;
}

/* Glass Inputs */
.spt-input {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: var(--ink) !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: var(--r-sm, 10px) !important;
  transition: all 0.2s cubic-bezier(.16,1,.3,1) !important;
  outline: none !important;
}

.spt-input::placeholder {
  color: var(--ink-4) !important;
}

.spt-input:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.spt-input:focus {
  background: rgba(255,255,255,.05) !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* Textarea specific */
.spt-textarea {
  resize: vertical !important;
  min-height: 100px !important;
  line-height: 1.5 !important;
}

/* Two-column form row */
.spt-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

@media (max-width: 500px) {
  .spt-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* Status messages */
.spt-status {
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-radius: var(--r-sm, 10px) !important;
  margin-top: 16px !important;
  min-height: 20px !important;
}

.spt-status:empty {
  display: none !important;
}

.spt-status-success {
  background: rgba(74,222,128,.08) !important;
  color: var(--green, #4ADE80) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.15) !important;
}

.spt-status-error {
  background: rgba(248,113,113,.08) !important;
  color: var(--red, #F87171) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}

/* Modal footer buttons */
#support-callback-modal .modal-ft,
#support-email-modal .modal-ft,
#support-feature-modal .modal-ft {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 16px 24px 20px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* Modal body padding */
#support-callback-modal .modal-body,
#support-email-modal .modal-body,
#support-feature-modal .modal-body {
  padding: 20px 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Support Page
   ═══════════════════════════════════════════════════════════════════════════ */

html.light .spt-card,
html[data-theme="light"] .spt-card {
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.04) !important;
}

html.light .spt-card:hover,
html[data-theme="light"] .spt-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.1), 0 12px 40px rgba(0,0,0,.06), inset 0 0 0 1px rgba(150,117,10,.15) !important;
}

html.light .spt-card-icon,
html[data-theme="light"] .spt-card-icon {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
  color: var(--ink-2) !important;
}

html.light .spt-card-icon-gold,
html[data-theme="light"] .spt-card-icon-gold {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.05)) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15) !important;
  color: var(--gold) !important;
}

html.light .spt-btn-gold,
html[data-theme="light"] .spt-btn-gold {
  background: linear-gradient(135deg, var(--gold-bright, #A07830) 0%, var(--gold, #96750A) 100%) !important;
  color: #FFFFFF !important;
}

html.light .spt-btn-ghost,
html[data-theme="light"] .spt-btn-ghost {
  background: rgba(0,0,0,.04) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

html.light .spt-btn-ghost:hover,
html[data-theme="light"] .spt-btn-ghost:hover {
  background: rgba(0,0,0,.07) !important;
}

html.light .spt-input,
html[data-theme="light"] .spt-input {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important;
  color: var(--ink) !important;
}

html.light .spt-input:hover,
html[data-theme="light"] .spt-input:hover {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15) !important;
}

html.light .spt-input:focus,
html[data-theme="light"] .spt-input:focus {
  box-shadow: 0 0 0 3px rgba(150,117,10,.1), inset 0 0 0 1px rgba(150,117,10,.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HISTORY PAGE — Pixel-matched to Team page (team2-* classes)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Page container — match .page class padding used by Team --- */
/* :not(.hidden) ensures .hidden { display:none } still works on page switch */
.history-page:not(.hidden) {
  display: block !important;
  min-height: 100% !important;
  padding: 24px !important;
}

/* --- Page header — matches team2-topbar exactly --- */
.history-page-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.history-titleblock {
  flex: 1 !important;
  min-width: 200px !important;
}

/* --- Page title — matches team2-title exactly --- */
.history-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.03em !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.history-subtitle {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* --- Action buttons in header --- */
.history-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* --- Two-panel layout --- MUST be transparent to let body warmth through */
.history-layout {
  display: grid !important;
  grid-template-columns: 420px 1fr !important;
  gap: 16px !important;
  height: calc(100vh - 180px) !important;  /* FIXED height, not min-height — enables internal scroll */
  background: transparent !important;  /* Override legacy var(--raised) from shemify-ui.css:2657 */
  box-shadow: none !important;         /* Remove legacy inset box-shadow */
  border-radius: 0 !important;         /* Panels have their own radius */
  overflow: visible !important;        /* Don't clip panel shadows */
}

/* --- Both panels — GLASS gradient matching team2-card exactly --- */
.history-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 20px rgba(0,0,0,.25),
    0 12px 48px rgba(0,0,0,.2) !important;
  border-radius: 20px !important;
  border: none !important;
  overflow: hidden !important;   /* Enable internal scroll containment */
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;      /* Allow flex shrink for scroll containment */
}

/* Top edge highlight — matches team2-card::before */
.history-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20px !important;
  right: 20px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  border-radius: 1px !important;
}

/* --- Card header — matches team2-card-head --- */
.history-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 24px 24px 16px !important;
  flex-wrap: wrap !important;
}

.history-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -.015em !important;
  margin-bottom: 4px !important;
}

.history-card-sub {
  font-size: 12px !important;
  color: var(--ink-4) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Override for the summary mini that gets ID */
#history-summary-mini {
  font-size: 12px !important;
  color: var(--ink-4) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --- Toolbar — matches team2-toolbar --- */
.history-toolbar {
  display: flex !important;
  gap: 12px !important;
  padding: 0 24px 16px !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
}

.history-toolbar .field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.history-field-range {
  min-width: 160px !important;
}

.history-field-search {
  flex: 1 !important;
  min-width: 200px !important;
}

/* --- Labels — matches team2 field labels --- */
.history-toolbar label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
}

/* --- Select dropdown — glass style matching Team inputs --- */
#history-range,
.history-toolbar select,
.history-page select {
  width: 100% !important;
  padding: 10px 36px 10px 14px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #F0F0F4) !important;
  background-color: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  color-scheme: dark !important;
}

#history-range:hover,
.history-toolbar select:hover,
.history-page select:hover {
  background-color: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

#history-range:focus,
.history-toolbar select:focus,
.history-page select:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.25) !important;
  outline: none !important;
}

/* --- Search input — glass style matching Team --- */
#history-search,
.history-toolbar input[type="text"],
.history-toolbar input[type="search"] {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #F0F0F4) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 10px !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
}

#history-search::placeholder,
.history-toolbar input::placeholder {
  color: var(--ink-4, #42424F) !important;
}

#history-search:hover,
.history-toolbar input:hover {
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

#history-search:focus,
.history-toolbar input:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.25) !important;
  outline: none !important;
}

/* --- Buttons — match Team btn-secondary btn-small exactly --- */
#history-refresh-btn,
.history-actions .btn,
.history-page .btn-secondary {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--font, 'Inter', system-ui, sans-serif) !important;
  color: var(--ink, #F0F0F4) !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2) !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16,1,.3,1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#history-refresh-btn:hover,
.history-actions .btn:hover,
.history-page .btn-secondary:hover {
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.25) !important;
  transform: translateY(-1px) !important;
}

#history-refresh-btn:active,
.history-actions .btn:active,
.history-page .btn-secondary:active {
  transform: scale(.97) !important;
}

/* --- Sales list container --- */
.history-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px !important;
}

/* --- Individual sale items — match Team table row style --- */
.history-list > div,
.history-list .sale-item,
.history-list .history-item {
  padding: 14px 16px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

.history-list > div:last-child {
  border-bottom: none !important;
}

.history-list > div:hover,
.history-list .sale-item:hover,
.history-list .history-item:hover {
  background: rgba(255,255,255,.02) !important;
}

.history-list > div.active,
.history-list > div.selected,
.history-list .sale-item.active,
.history-list .history-item.selected {
  background: rgba(200,160,76,.06) !important;
  box-shadow: inset 3px 0 0 0 var(--gold, #C8A04C) !important;
}

/* --- Empty state in list — match Team's "No time off yet" --- */
.history-list .empty,
.history-list .no-results {
  text-align: center !important;
  padding: 48px 24px !important;
  color: var(--ink-3, #6A6A7A) !important;
  font-size: 13px !important;
}

/* --- Right panel (detail view) — same glass card as left --- */
.history-panel:last-child {
  display: flex !important;
  flex-direction: column !important;
  padding: 24px !important;
  overflow-y: auto !important;   /* Internal scroll for long transaction details */
}

/* --- Detail inner area — full width, top-aligned when content exists --- */
.history-detail {
  background: transparent !important;
  padding: 0 !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;      /* Full width children */
  justify-content: flex-start !important; /* Start from top */
  overflow-y: auto !important;
  gap: 0 !important;
}

/* Empty state centering - only when truly empty or has empty-state class */
.history-detail:empty,
.history-detail.history-detail--empty {
  align-items: center !important;
  justify-content: center !important;
}

/* --- Empty detail state — centered, soft --- */
.history-detail-empty,
.history-panel:last-child .empty-state,
.history-detail:only-child {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 16px !important;
}

.history-detail-empty svg,
.history-detail-empty .icon,
.history-detail svg {
  width: 48px !important;
  height: 48px !important;
  opacity: .3 !important;
  color: var(--ink-4, #42424F) !important;
}

.history-detail-empty p,
.history-detail-empty span,
.history-detail > p,
.history-detail > span {
  font-size: 13px !important;
  color: var(--ink-3, #6A6A7A) !important;
  max-width: 260px !important;
  line-height: 1.6 !important;
}

/* --- Detail view with data (receipt) --- */
.history-detail .receipt-header,
.history-detail > header {
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  margin-bottom: 16px !important;
}

.history-detail .receipt-items,
.history-detail .line-items {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

.history-detail .receipt-total,
.history-detail .totals {
  padding-top: 16px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSACTION DETAILS REDESIGN — Premium UX matching Square/Toast quality
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Transaction Header — Full width with prominent title --- */
.history-detail-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Title row with status */
.history-detail-header > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.history-detail-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink, #F0F0F4) !important;
  letter-spacing: -.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Status badge removed - status is in the subtitle text already */

.history-detail-sub {
  font-size: 13px !important;
  color: var(--ink-3, #6A6A7A) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* --- Action Buttons Toolbar — Glass styling --- */
.history-detail-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding-top: 4px !important;
}

.history-detail-actions .btn {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2, #9898A8) !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
  cursor: pointer !important;
}

.history-detail-actions .btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(0,0,0,.2) !important;
  color: var(--ink, #F0F0F4) !important;
  transform: translateY(-1px) !important;
}

/* Refund button — danger styling */
.history-detail-actions .btn-danger,
.history-detail-actions #history-refund-btn {
  background: rgba(248,113,113,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
  color: #F87171 !important;
}

.history-detail-actions .btn-danger:hover,
.history-detail-actions #history-refund-btn:hover {
  background: rgba(248,113,113,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.25), 0 4px 16px rgba(248,113,113,.1) !important;
  color: #FCA5A5 !important;
}

/* --- Metadata Grid — Clean glass card --- */
.history-kv {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  margin-bottom: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.history-kv .k,
.history-kv .v {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.history-kv .k:nth-last-child(2),
.history-kv .v:last-child {
  border-bottom: none !important;
}

.history-kv .k {
  color: var(--ink-4, #42424F) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  background: rgba(255,255,255,.015) !important;
}

.history-kv .v {
  color: var(--ink, #F0F0F4) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* --- Line Items Table — Full width with proper styling --- */
.history-table-wrap {
  width: 100% !important;
  margin-bottom: 24px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.1) !important;
}

.history-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.history-table thead tr {
  background: rgba(255,255,255,.03) !important;
}

.history-table thead th {
  padding: 14px 18px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--ink-3, #6A6A7A) !important;  /* More visible than ink-4 */
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.history-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  transition: background .15s ease !important;
}

.history-table tbody tr:last-child {
  border-bottom: none !important;
}

.history-table tbody tr:hover {
  background: rgba(200,160,76,.03) !important;
}

.history-table td {
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: var(--ink, #F0F0F4) !important;
}

/* Product name column */
.history-table td:first-child {
  font-weight: 500 !important;
}

/* Price columns — tabular numbers with subtle gold tint */
.history-table .col-right {
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}

.history-table td.col-right:last-child {
  color: var(--ink, #F0F0F4) !important;
}

/* --- Totals Section — HERO element with prominent styling --- */
.history-summary {
  width: 100% !important;
  margin-top: auto !important;
  padding: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 20px rgba(0,0,0,.15) !important;
  border-radius: 16px !important;
}

.history-summary-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important;
}

.history-summary-row span:first-child {
  font-size: 13px !important;
  color: var(--ink-3, #6A6A7A) !important;
  font-weight: 500 !important;
}

.history-summary-row span:last-child {
  font-size: 14px !important;
  color: var(--ink-2, #9898A8) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums !important;
}

/* TOTAL ROW — The hero element */
.history-summary-row.total {
  margin-top: 12px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.history-summary-row.total span:first-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ink, #F0F0F4) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.history-summary-row.total span:last-child {
  font-size: 28px !important;
  font-weight: 200 !important;
  color: var(--ink, #F0F0F4) !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.4), 0 0 40px rgba(200,160,76,.06) !important;
}

/* Hover state on summary — subtle gold glow */
.history-summary:hover {
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.12),
    0 4px 24px rgba(0,0,0,.2),
    0 0 40px rgba(200,160,76,.04) !important;
}

/* --- Light mode overrides --- */
html.light .history-detail-header,
html[data-theme="light"] .history-detail-header {
  border-bottom-color: rgba(0,0,0,.08) !important;
}

html.light .history-detail-actions .btn,
html[data-theme="light"] .history-detail-actions .btn {
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.02) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05) !important;
  color: var(--ink-2) !important;
}

html.light .history-kv,
html[data-theme="light"] .history-kv {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.01) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

html.light .history-kv .k,
html[data-theme="light"] .history-kv .k {
  background: rgba(0,0,0,.02) !important;
}

html.light .history-kv .k,
html.light .history-kv .v,
html[data-theme="light"] .history-kv .k,
html[data-theme="light"] .history-kv .v {
  border-bottom-color: rgba(0,0,0,.05) !important;
}

html.light .history-table-wrap,
html[data-theme="light"] .history-table-wrap {
  background: rgba(0,0,0,.015) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

html.light .history-table thead tr,
html[data-theme="light"] .history-table thead tr {
  background: rgba(0,0,0,.03) !important;
}

html.light .history-table tbody tr:hover,
html[data-theme="light"] .history-table tbody tr:hover {
  background: rgba(150,117,10,.04) !important;
}

html.light .history-summary,
html[data-theme="light"] .history-summary {
  background: linear-gradient(180deg, rgba(0,0,0,.025) 0%, rgba(0,0,0,.015) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.05) !important;
}

html.light .history-summary:hover,
html[data-theme="light"] .history-summary:hover {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15), 0 4px 24px rgba(0,0,0,.08) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HISTORY MODALS — FULL PREMIUM (matches .modal-overlay prototype spec)
   Features: RGB orbs (gold/blue/green), shell parallax, spring bounce,
   golden glow pulse, backdrop blur-in, content stagger animation
   ══════════════════════════════════════════════════════════════════════════ */

/* Base state — hidden with visibility (NOT display:none so animations can run) */
.history-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

/* Open state — backdrop blur-in animation */
.history-modal-backdrop.show {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: hm-bdrop-in .45s cubic-bezier(.2,.8,.2,1) forwards !important;
}

/* RGB AMBIENT ORBS — gold (pseudo), blue (pseudo), green (injected element) */
.history-modal-backdrop::before,
.history-modal-backdrop::after,
.history-modal-backdrop .rgb-orb {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}
.history-modal-backdrop.show::before,
.history-modal-backdrop.show::after,
.history-modal-backdrop.show .rgb-orb {
  opacity: 1;
}

/* Gold orb — top-left */
.history-modal-backdrop::before {
  width: 500px; height: 500px;
  top: 10%; left: 15%;
  background: radial-gradient(circle, rgba(200,160,76,.12), transparent 70%);
  animation: hm-orb1 10s ease-in-out infinite;
}
/* Blue orb — bottom-right */
.history-modal-backdrop::after {
  width: 450px; height: 450px;
  bottom: 10%; right: 15%;
  background: radial-gradient(circle, rgba(96,165,250,.08), transparent 70%);
  animation: hm-orb2 12s ease-in-out infinite;
}
/* Green orb — center */
.history-modal-backdrop .rgb-orb {
  width: 400px; height: 400px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74,222,128,.06), transparent 70%);
  animation: hm-orb3 14s ease-in-out infinite;
}

/* Modal panel — premium glass card with spring + glow */
.history-modal-backdrop .history-modal {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 600px !important;
  max-height: calc(100vh - 48px) !important;
  background: linear-gradient(180deg, var(--elevated, #1A1A22), var(--raised, #14141A)) !important;
  border-radius: var(--r-xl, 26px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 12px 40px rgba(0,0,0,.5),
    0 40px 100px rgba(0,0,0,.35) !important;
  padding: 0 !important;
}

/* Spring entrance with bounce overshoot + glow pulse */
.history-modal-backdrop.show .history-modal {
  animation:
    hm-mdl-in .6s cubic-bezier(.34, 1.4, .64, 1) forwards,
    hm-mdl-glow .8s ease .4s forwards !important;
}

/* Content stagger — header, body children, footer appear sequentially */
.history-modal-backdrop.show .history-modal-header {
  opacity: 0;
  animation: hm-stagger .4s cubic-bezier(.2,.8,.2,1) .08s forwards;
}
.history-modal-backdrop.show .history-modal > *:not(.history-modal-header):not(.refund-footer):not(.modal-footer-row) {
  opacity: 0;
  animation: hm-stagger .35s cubic-bezier(.2,.8,.2,1) forwards;
}
.history-modal-backdrop.show .history-modal > *:nth-child(2) { animation-delay: .14s; }
.history-modal-backdrop.show .history-modal > *:nth-child(3) { animation-delay: .20s; }
.history-modal-backdrop.show .history-modal > *:nth-child(4) { animation-delay: .26s; }
.history-modal-backdrop.show .history-modal > *:nth-child(5) { animation-delay: .32s; }
.history-modal-backdrop.show .history-modal > *:nth-child(6) { animation-delay: .38s; }
.history-modal-backdrop.show .refund-footer,
.history-modal-backdrop.show .modal-footer-row {
  opacity: 0;
  animation: hm-stagger .35s cubic-bezier(.2,.8,.2,1) .34s forwards;
}

/* Scroll body content */
.history-modal-backdrop .history-modal > *:not(.history-modal-header):not(.refund-footer):not(.modal-footer-row) {
  padding-left: 24px;
  padding-right: 24px;
}
.history-modal-backdrop .history-modal > *:nth-child(2) { padding-top: 20px; }

/* Keyframes — scoped with hm- prefix to avoid collisions */
@keyframes hm-bdrop-in {
  0%   { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: rgba(0,0,0,0); }
  100% { backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); background: rgba(0,0,0,.5); }
}
@keyframes hm-mdl-in {
  0%   { opacity: 0; transform: translateY(30px) scale(.92); filter: blur(6px); }
  55%  { transform: translateY(-12px) scale(1.025); }
  75%  { transform: translateY(4px) scale(.997); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hm-mdl-glow {
  0%   { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 0 rgba(200,160,76,0); }
  40%  { box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 120px rgba(200,160,76,.12); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 80px rgba(200,160,76,.07); }
}
@keyframes hm-stagger {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes hm-orb1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(30%,-20%)} 50%{transform:translate(-20%,30%)} 75%{transform:translate(25%,15%)} }
@keyframes hm-orb2 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-25%,25%)} 50%{transform:translate(30%,-15%)} 75%{transform:translate(-15%,-25%)} }
@keyframes hm-orb3 { 0%,50%,100%{transform:translate(-50%,-50%)} 25%{transform:translate(-30%,-20%)} 75%{transform:translate(-70%,-80%)} }

/* Modal header — premium style matching prototype */
.history-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
}

.history-modal-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink, #F0F0F4) !important;
  letter-spacing: -.02em !important;
}

/* Modal inputs */
.history-modal input[type="email"],
.history-modal input[type="text"],
.history-modal input[type="number"] {
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--ink, #F0F0F4) !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
}

.history-modal input:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* Modal footer buttons — sticky premium style */
.history-modal .modal-footer-row {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
}
.history-modal .refund-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

/* Scrollable body area between header and footer */
.history-modal-backdrop .history-modal > *:not(.history-modal-header):not(.refund-footer):not(.modal-footer-row):not(:last-child) {
  flex-shrink: 0;
}

/* Refund modal specific — item rows */
.history-modal .refund-item,
.history-modal .refund-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

.history-modal .refund-item:last-child,
.history-modal .refund-row:last-child {
  border-bottom: none !important;
}

/* Refund quantity inputs */
.history-modal input[type="number"] {
  width: 80px !important;
  text-align: center !important;
}

/* Refund total section */
.history-modal .refund-total,
.history-modal #refund-total-section {
  margin-top: 16px !important;
  padding: 16px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* Apply refund / Send button — primary gold */
.history-modal .btn-primary,
.history-modal #history-email-send,
.history-modal #apply-refund-btn {
  background: linear-gradient(135deg, var(--gold-bright, #D4B060) 0%, var(--gold, #C8A04C) 100%) !important;
  color: var(--void, #060608) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16, 1, .3, 1) !important;
}

.history-modal .btn-primary:hover,
.history-modal #history-email-send:hover,
.history-modal #apply-refund-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Cancel / Close button — secondary glass */
.history-modal .btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15) !important;
  color: var(--ink-2, #9898A8) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
}

.history-modal .btn-secondary:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%) !important;
  color: var(--ink, #F0F0F4) !important;
  transform: translateY(-1px) !important;
}

/* Light mode */
html.light .history-modal-backdrop.show,
html[data-theme="light"] .history-modal-backdrop.show {
  background: rgba(242,241,238,.85) !important;
}

html.light .history-modal-backdrop.show .history-modal,
html[data-theme="light"] .history-modal-backdrop.show .history-modal {
  background: linear-gradient(180deg, #FFFFFF, #FAFAF8) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.12),
    0 40px 80px rgba(0,0,0,.08) !important;
}

html.light .history-modal-header,
html[data-theme="light"] .history-modal-header {
  border-bottom-color: rgba(0,0,0,.08) !important;
}

html.light .history-modal .modal-footer-row,
html[data-theme="light"] .history-modal .modal-footer-row {
  border-top-color: rgba(0,0,0,.08) !important;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .history-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .history-panel:first-child {
    max-height: 50vh !important;
  }
}

@media (max-width: 768px) {
  .history-layout {
    gap: 12px !important;
  }

  .history-topbar {
    padding: 20px !important;
  }

  .history-filters {
    padding: 16px 20px !important;
  }

  .history-panel:last-child {
    padding: 16px !important;
  }
}

/* --- Light mode --- */
html.light .history-panel,
html[data-theme="light"] .history-panel {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.01) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 20px rgba(0,0,0,.06),
    0 12px 48px rgba(0,0,0,.04) !important;
}

html.light .history-topbar,
html[data-theme="light"] .history-topbar {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

html.light .history-filters,
html[data-theme="light"] .history-filters {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

html.light #history-range,
html[data-theme="light"] #history-range,
html.light .history-filters select,
html[data-theme="light"] .history-filters select {
  background-color: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink) !important;
}

html.light #history-search,
html[data-theme="light"] #history-search,
html.light .history-filters input,
html[data-theme="light"] .history-filters input {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink) !important;
}

html.light .history-filters button,
html[data-theme="light"] .history-filters button {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
  color: var(--ink) !important;
}

html.light .history-list > div:hover,
html[data-theme="light"] .history-list > div:hover {
  background: rgba(0,0,0,.02) !important;
}

html.light .history-detail,
html[data-theme="light"] .history-detail {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEBTS PAGE — Warm Glass Theme Fix
   ═══════════════════════════════════════════════════════════════════════════
   Problem: .debts-panel was using var(--base) which blocks warm body radials.
   Fix: Make outer container transparent, only inner cards get glass gradient.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer panel — transparent layout container */
#debts-page .debts-panel {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#debts-page .debts-panel::before {
  display: none !important;
}

/* Inner cards — glass gradient treatment */
#debts-page .debts-topbar,
#debts-page .debts-summary,
#debts-page .debts-list,
#debts-page .debts-empty,
#debts-page .debts-detail-head,
#debts-page .debts-detail-body {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
  position: relative !important;
}

#debts-page .debts-topbar {
  margin-bottom: 16px !important;
}

#debts-page .debts-summary {
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 16px !important;
}

/* Summary cards inside summary container don't need their own box-shadow */
#debts-page .summary-card {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
}

/* Detail panel — same treatment */
#debts-page .debts-detail-panel {
  background: transparent !important;
  box-shadow: none !important;
}

#debts-page .debts-detail-panel::before {
  display: none !important;
}

/* Light mode overrides */
html.light #debts-page .debts-panel,
html[data-theme="light"] #debts-page .debts-panel,
html.light #debts-page .debts-detail-panel,
html[data-theme="light"] #debts-page .debts-detail-panel {
  background: transparent !important;
  box-shadow: none !important;
}

html.light #debts-page .debts-topbar,
html[data-theme="light"] #debts-page .debts-topbar,
html.light #debts-page .debts-summary,
html[data-theme="light"] #debts-page .debts-summary,
html.light #debts-page .debts-list,
html[data-theme="light"] #debts-page .debts-list,
html.light #debts-page .debts-empty,
html[data-theme="light"] #debts-page .debts-empty,
html.light #debts-page .debts-detail-head,
html[data-theme="light"] #debts-page .debts-detail-head,
html.light #debts-page .debts-detail-body,
html[data-theme="light"] #debts-page .debts-detail-body {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.01) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 20px rgba(0,0,0,.06),
    0 12px 48px rgba(0,0,0,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPORTS PAGE — Warm Glass Theme Fix
   ═══════════════════════════════════════════════════════════════════════════
   Problem: .reports-layout had solid rgb(20,20,26) blocking warm body radials.
   Fix: Make .reports-layout and .reports-panel transparent, only inner sections
        get glass gradient treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ROOT CAUSE FIX: .reports-layout grid container must be transparent */
#reports-page .reports-layout,
.reports-layout {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Page title styling (matching Team page) */
.reports-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}

.reports-subtitle {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink-2) !important;
  margin-top: 2px !important;
}

/* Outer panel — transparent layout container */
#reports-page .reports-panel {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#reports-page .reports-panel::before {
  display: none !important;
}

/* Inner sections — glass gradient treatment */
#reports-page .reports-topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
}

#reports-page .reports-list {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
}

#reports-page .reports-detail {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
}

/* Light mode overrides */
html.light .reports-title,
html[data-theme="light"] .reports-title {
  color: var(--ink) !important;
  text-shadow: none !important;
}

html.light #reports-page .reports-panel,
html[data-theme="light"] #reports-page .reports-panel {
  background: transparent !important;
  box-shadow: none !important;
}

html.light #reports-page .reports-topbar,
html[data-theme="light"] #reports-page .reports-topbar,
html.light #reports-page .reports-list,
html[data-theme="light"] #reports-page .reports-list,
html.light #reports-page .reports-detail,
html[data-theme="light"] #reports-page .reports-detail {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.01) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 20px rgba(0,0,0,.06),
    0 12px 48px rgba(0,0,0,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POS PAGE — Warm Glass Theme Fix
   ═══════════════════════════════════════════════════════════════════════════
   Problem: .pos-layout in shell-override.css had legacy blue-gray gradient
   rgba(22,22,30,1) blocking warm body radials.
   Fix: Override with warm near-black gradient matching var(--void) = #060608.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ROOT CAUSE FIX: .pos-layout must use warm gradient, not blue-gray */
#pos-page .pos-layout,
.pos-layout {
  background: linear-gradient(180deg, rgba(8,8,10,1) 0%, rgba(6,6,8,1) 100%) !important;
  background-image: linear-gradient(180deg, rgba(8,8,10,1) 0%, rgba(6,6,8,1) 100%) !important;
}

/* Products panel — warm gradient matching void */
#pos-page .pos-panel-products,
.pos-panel-products {
  background: linear-gradient(180deg, rgba(10,10,12,1) 0%, rgba(6,6,8,1) 100%) !important;
  background-image: linear-gradient(180deg, rgba(10,10,12,1) 0%, rgba(6,6,8,1) 100%) !important;
}

/* Cart panel — warm gradient */
#pos-page .pos-panel-cart,
.pos-panel-cart {
  background: linear-gradient(180deg, rgba(8,8,10,.98) 0%, rgba(6,6,8,1) 100%) !important;
  background-image: linear-gradient(180deg, rgba(8,8,10,.98) 0%, rgba(6,6,8,1) 100%) !important;
}

/* Inner pos-panel — warm gradient (not blue-gray) */
#pos-page .pos-panel,
.pos-panel {
  background: linear-gradient(180deg, rgba(10,10,12,1) 0%, rgba(6,6,8,1) 100%) !important;
  background-image: linear-gradient(180deg, rgba(10,10,12,1) 0%, rgba(6,6,8,1) 100%) !important;
}

/* Orders/Catalog cards — warmer glass treatment */
#pos-page .pos-orders-wrap,
#pos-page .pos-catalog-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
}

/* POS biz cards (Tables, Tickets, etc.) — warm glass */
#pos-page .pos-biz-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 20px rgba(0,0,0,.35),
    0 12px 48px rgba(0,0,0,.25) !important;
}

/* Glass dropdowns for POS native selects */
#pos-page select,
#pos-page .pos-host-area-select {
  appearance: none !important;
  background: rgba(255,255,255,.04) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  padding: 10px 32px 10px 14px !important;
  cursor: pointer !important;
  transition: all .2s var(--spring) !important;
  color-scheme: dark !important;
}

#pos-page select:hover {
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

#pos-page select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOYALTY PAGE — Full Theme + UX Fix
   ═══════════════════════════════════════════════════════════════════════════
   Fixes: (1) box-in-box card nesting, (2) duplicate title, (3) top actions UX
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide shell tagline — loyalty has its own title */
/* Uses :has() — Chrome 105+, supported by all Shemify target browsers */
.content.main-content:has(> #loyalty-page:not(.hidden)) > .content-tagline {
  display: none !important;
}
/* Fallback: also target any tagline sibling */
#loyalty-page:not(.hidden) ~ .content-tagline,
.content-tagline:has(~ #loyalty-page:not(.hidden)) {
  display: none !important;
}

/* ── Layout containers — all transparent ── */
#loyalty-page .loy-shell { background: transparent !important; }
#loyalty-page .loy-main { background: transparent !important; }
/* Strip .loy-panel to pure container — the inner .card is the visible glass surface */
#loyalty-page .loy-panel {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ── Section cards — reuse team2-card (already styled globally) ── */
/* Customers tab still uses .card — give it team2-card treatment */
#loyalty-page .loy-panel > .card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  background-color: transparent !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 4px 20px rgba(0,0,0,.25),
    0 12px 48px rgba(0,0,0,.2) !important;
  position: relative !important;
}
#loyalty-page .loy-panel > .card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20px !important;
  right: 20px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  border-radius: 1px !important;
}

/* Spacing between stacked team2-cards */
#loyalty-page .team2-card {
  margin-bottom: 16px !important;
}
#loyalty-page .team2-card:last-child {
  margin-bottom: 0 !important;
}

/* ── Typography — match section title / subtitle pattern ── */
#loyalty-page .card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
  text-shadow: 0 0 20px rgba(200,160,76,.04) !important;
}

#loyalty-page .card-subtitle {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  margin-top: 3px !important;
  line-height: 1.4 !important;
}

/* ── Section head spacing ── */
#loyalty-page .loy-panel-head {
  margin-bottom: 20px !important;
}

/* ── Section headers with icons ── */
#loyalty-page .loy-section-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

#loyalty-page .loy-section-header .loy-panel-actions {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

#loyalty-page .loy-section-icon {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  color: var(--gold) !important;
  opacity: .7 !important;
  margin-top: 2px !important;
}

/* ── Inline sentence pattern ── */
#loyalty-page .loy-sentence {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  line-height: 2.2 !important;
}

#loyalty-page .loy-sentence-text {
  font-weight: 400 !important;
  white-space: nowrap !important;
}

#loyalty-page .loy-sentence-hint {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  font-weight: 400 !important;
}

#loyalty-page .loy-inline-input {
  width: 80px !important;
  text-align: center !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
}

#loyalty-page .loy-earn-sentence {
  margin-bottom: 16px !important;
}

#loyalty-page .loy-earn-row {
  margin-top: 8px !important;
}

/* ── Empty state with illustration ── */
#loyalty-page .loy-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 24px !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
}

#loyalty-page .loy-empty-svg {
  width: 48px !important;
  height: 48px !important;
  opacity: .4 !important;
}

/* ── Collapsible sections ── */
#loyalty-page .loy-collapsible .loy-collapse-body {
  display: none !important;
}

#loyalty-page .loy-collapsible.open .loy-collapse-body {
  display: block !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

#loyalty-page .loy-collapse-trigger {
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

#loyalty-page .loy-collapse-chevron {
  width: 18px !important;
  height: 18px !important;
  color: var(--ink-3) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: transform .25s var(--spring) !important;
}

#loyalty-page .loy-collapsible.open .loy-collapse-chevron {
  transform: rotate(90deg) !important;
}

/* ── Advanced toggle (inline) ── */
#loyalty-page .loy-advanced-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  margin-top: 16px !important;
  padding: 6px 0 !important;
  user-select: none !important;
}

#loyalty-page .loy-advanced-toggle svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform .2s var(--spring) !important;
}

#loyalty-page .loy-advanced-toggle.open svg {
  transform: rotate(90deg) !important;
}

#loyalty-page .loy-advanced-body {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

/* ── Nested cards (loy-split-card) — subtle glass ── */
#loyalty-page .loy-split-card {
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 2px 12px rgba(0,0,0,.3) !important;
  border-radius: var(--r) !important;
  padding: 16px !important;
}

/* ── Simple scrollable layout (no tabs) ── */
#loyalty-page .loy-simple-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Hide old tab nav if still in DOM */
#loyalty-page .loy-nav { display: none !important; }
#loyalty-page .loy-shell { display: none !important; }

/* ── Top actions — Enabled toggle + Save ── */
#loyalty-page .loy-top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Enabled toggle — iOS style */
#loyalty-page .loy-enabled-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
}

#loyalty-page .loy-enabled-pill input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#loyalty-page .loy-enabled-track {
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  position: relative !important;
  display: inline-block !important;
  transition: all .35s cubic-bezier(.34, 1.2, .64, 1) !important;
}

#loyalty-page .loy-enabled-pill input:checked + .loy-enabled-track {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  box-shadow: 0 0 20px rgba(200,160,76,.2), inset 0 0 0 1px rgba(200,160,76,.3) !important;
}

#loyalty-page .loy-enabled-knob {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: white !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.3) !important;
  transition: transform .35s cubic-bezier(.34, 1.2, .64, 1) !important;
}

#loyalty-page .loy-enabled-pill input:checked + .loy-enabled-track .loy-enabled-knob {
  transform: translateX(20px) !important;
}

#loyalty-page .loy-enabled-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
}

#loyalty-page .loy-enabled-pill input:checked ~ .loy-enabled-label {
  color: var(--gold) !important;
}

/* ── Tables — warm glass ── */
#loyalty-page .loy-table-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.008) 100%) !important;
  border-radius: var(--r) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
  overflow: hidden !important;
}

/* ── Lookup/form area — subtle glass wrap ── */
#loyalty-page .loy-lookup {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 12px !important;
}

/* ── Form grids ── */
#loyalty-page .loy-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

@media (max-width: 768px) {
  #loyalty-page .loy-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — Horizontal Tab Bar V2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide old sidebar nav, show new tab bar */
.settings-layout-v2 .settings-nav { display: none !important; }

.settings-tabs-bar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  width: fit-content !important;
  margin-bottom: 24px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.settings-tabs-bar::-webkit-scrollbar { display: none !important; }

/* Tab button with icon */
.settings-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all .22s var(--spring) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.settings-tab-btn:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--ink-2) !important;
}
.settings-tab-btn.active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06)) !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(200,160,76,.1) !important;
}

/* Tab icon */
.settings-tab-ico {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Remove old tag labels */
.settings-tab-btn .settings-nav-tag { display: none !important; }

/* Settings content — warm glass cards */
.settings-layout-v2 .settings-content {
  padding: 0 !important;
}
.settings-layout-v2 .settings-panel {
  background: transparent !important;
}
.settings-layout-v2 .settings-section-header {
  margin-bottom: 20px !important;
}

@media (max-width: 768px) {
  .settings-tabs-bar {
    width: 100% !important;
    overflow-x: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS V3 — Jurassic Redesign (Clean Section Layout)
   Open-space sections with icon headers, not boxed cards.
   Feels like Stripe/Linear settings — guided, minimal, breathable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fix spacing: page flush to header/sidebar/edges ── */
/* ═══════════════════════════════════════════════════════
   SETTINGS V4 — Glass Card UI (matching Team/Loyalty/History)
   ═══════════════════════════════════════════════════════ */

.settings-layout-v2 {
  padding: 32px 40px 80px !important;
}

/* ── Form wrapper — fully transparent, content participates in parent grid ── */
.sett-form-wrap,
.sett-form-inner {
  width: 100% !important;
  max-width: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: contents !important; /* Children flow into parent grid */
}

/* ── Each section group = glass card ── */
.sett-group {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
  transition: box-shadow .22s cubic-bezier(.16,1,.3,1) !important;
}
.sett-group:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.22), 0 0 40px rgba(200,160,76,.02) !important;
}

/* ── Section header inside card ── */
.sett-group-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}

.sett-group-ico {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  color: var(--gold) !important;
  opacity: .65 !important;
  margin-top: 2px !important;
}

.sett-group-head h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 3px !important;
  letter-spacing: -.01em !important;
}

.sett-group-head p {
  font-size: 12.5px !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Field grid — 2 columns inside card ── */
.sett-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 18px !important;
  padding-left: 0 !important;
}

.sett-fields > .sett-full,
.sett-fields > .field-group.sett-full {
  grid-column: 1 / -1 !important;
}

/* ── Dividers — hidden now (cards provide separation) ── */
.sett-divider {
  display: none !important;
}

/* ── Collapsible sections ── */
.sett-collapsible > .sett-collapse-body {
  display: none !important;
}
.sett-collapsible.open > .sett-collapse-body {
  display: block !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
.sett-collapsible > .sett-group-head {
  margin-bottom: 0 !important;
}
.sett-collapsible.open > .sett-group-head {
  margin-bottom: 0 !important;
}
.sett-collapse-trigger {
  cursor: pointer !important;
  user-select: none !important;
}
.sett-collapse-trigger:hover h3 {
  color: var(--gold) !important;
  transition: color .15s !important;
}
.sett-chevron {
  width: 16px !important;
  height: 16px !important;
  color: var(--ink-4) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: transform .25s var(--spring) !important;
  margin-top: 3px !important;
}
.sett-collapsible.open > .sett-collapse-trigger .sett-chevron {
  transform: rotate(90deg) !important;
}

/* ── Logo area ── */
.sett-logo-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding-left: 0 !important;
}
.sett-logo-box {
  width: 72px !important;
  height: 72px !important;
  border-radius: var(--r-sm) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.sett-logo-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.sett-logo-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--ink-4) !important;
}
.sett-logo-empty svg {
  width: 20px !important;
  height: 20px !important;
  opacity: .5 !important;
}
.sett-logo-empty span {
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.sett-logo-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.sett-logo-actions .hint {
  font-size: 11px !important;
}

/* ── Save row ── */
.sett-save-row {
  padding-left: 0 !important;
  margin-top: 8px !important;
}

/* ── Light mode overrides ── */
html.light .sett-group,
html[data-theme="light"] .sett-group {
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important;
}
html.light .sett-group:hover,
html[data-theme="light"] .sett-group:hover {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06) !important;
}
html.light .sett-collapsible.open > .sett-collapse-body,
html[data-theme="light"] .sett-collapsible.open > .sett-collapse-body {
  border-top-color: rgba(0,0,0,.06) !important;
}

html.light .sett-logo-box,
html[data-theme="light"] .sett-logo-box {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

html.light .sett-group-ico,
html[data-theme="light"] .sett-group-ico {
  color: var(--gold) !important;
  opacity: .8 !important;
}

html.light .sett-chevron,
html[data-theme="light"] .sett-chevron {
  color: var(--ink-3) !important;
}

/* ── Panel headers for non-Business tabs (Products, Coupons, Billing, Payouts) ── */
.sett-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}
.sett-panel-head .sett-group-ico {
  width: 24px !important;
  height: 24px !important;
  margin-top: 2px !important;
}
.sett-panel-head h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 4px !important;
  letter-spacing: -.015em !important;
}
.sett-panel-head p {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Products & Coupons grid — glass cards for sub-panels ── */
.settings-panel[data-settings-panel="products"] .settings-grid-2,
.settings-panel[data-settings-panel="coupons"] .settings-grid-2 {
  gap: 24px !important;
}
.settings-panel[data-settings-panel="products"] .settings-grid-2 > div,
.settings-panel[data-settings-panel="coupons"] .settings-grid-2 > div,
.settings-panel[data-settings-panel="coupons"] .settings-grid-2 > .card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  border: none !important;
}

/* ── Billing & Payouts — constrain width ── */
.settings-panel[data-settings-panel="subscription"],
.settings-panel[data-settings-panel="payouts"] {
  max-width: 900px !important;
}

/* ── Billing — full width like other settings pages ── */
/* Removed max-width: 600px constraint */

/* ── Payouts balance cards ── */
.settings-panel[data-settings-panel="payouts"] .payout-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18) !important;
  border-radius: var(--r-lg) !important;
  border: none !important;
}

/* ── Light mode for non-Business tab cards ── */
html.light .settings-panel[data-settings-panel="products"] .settings-grid-2 > div,
html[data-theme="light"] .settings-panel[data-settings-panel="products"] .settings-grid-2 > div,
html.light .settings-panel[data-settings-panel="coupons"] .settings-grid-2 > div,
html[data-theme="light"] .settings-panel[data-settings-panel="coupons"] .settings-grid-2 > div,
html.light .settings-panel[data-settings-panel="coupons"] .settings-grid-2 > .card,
html[data-theme="light"] .settings-panel[data-settings-panel="coupons"] .settings-grid-2 > .card {
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04) !important;
}

/* ══════════════════════════════════════════════════════
   SETTINGS V4 — HIDE MESSAGE BOXES (use toast instead)
   ══════════════════════════════════════════════════════ */
.settings-message,
#settings-business-message,
#settings-tables-message,
#settings-locations-message,
#settings-products-message,
#settings-import-products-message,
#settings-coupons-message,
#settings-subscription-message,
#settings-payout-email-msg,
#settings-payout-withdraw-msg,
#settings-employees-message,
#settings-vacation-message,
#settings-payroll-message,
#team-modal-employee-message,
#team-modal-timeoff-message {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   SETTINGS — PAGE-LEVEL TOPBAR (like Team page)
   Save changes button lives here, not in card content
   ══════════════════════════════════════════════════════ */
.sett-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.sett-topbar-title {
  flex: 1 !important;
  min-width: 200px !important;
}

.sett-topbar-title h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sett-topbar-title p {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}

.sett-topbar-actions {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Hide old save row inside cards */
.sett-save-row {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   SETTINGS — SELECT DROPDOWNS (glass theme)
   Match prototype.html and Team page styling
   ══════════════════════════════════════════════════════ */

/* Native selects in settings - glass styling */
.settings-panel select,
.sett-group select,
.sett-fields select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 12px 36px 12px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16,1,.3,1) !important;
  color-scheme: dark !important;
}

.settings-panel select:hover,
.sett-group select:hover,
.sett-fields select:hover {
  background-color: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

.settings-panel select:focus,
.sett-group select:focus,
.sett-fields select:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

/* Light mode selects */
html.light .settings-panel select,
html.light .sett-group select,
html.light .sett-fields select,
html[data-theme="light"] .settings-panel select,
html[data-theme="light"] .sett-group select,
html[data-theme="light"] .sett-fields select {
  background-color: rgba(0,0,0,.03) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink) !important;
  color-scheme: light !important;
}

html.light .settings-panel select:hover,
html.light .sett-group select:hover,
html.light .sett-fields select:hover,
html[data-theme="light"] .settings-panel select:hover,
html[data-theme="light"] .sett-group select:hover,
html[data-theme="light"] .sett-fields select:hover {
  background-color: rgba(0,0,0,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) !important;
}

/* ══════════════════════════════════════════════════════
   SETTINGS — MORE OPTIONS (collapsible inside Store details)
   ══════════════════════════════════════════════════════ */
.sett-more-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 0 !important;
  margin-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  cursor: pointer !important;
  color: var(--ink-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color .2s !important;
}

.sett-more-toggle:hover {
  color: var(--ink) !important;
}

.sett-more-toggle span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sett-more-chevron {
  color: var(--ink-4) !important;
  transition: transform .25s cubic-bezier(.16,1,.3,1) !important;
}

/* Collapsed state (default) */
.sett-more-body {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .25s !important;
}

/* Open state */
.sett-group.more-open .sett-more-chevron {
  transform: rotate(180deg) !important;
}

.sett-group.more-open .sett-more-body {
  max-height: 600px !important;
  opacity: 1 !important;
  padding-top: 16px !important;
  overflow: visible !important; /* Allow dropdowns inside to escape the card */
}

/* Ensure dropdown menus can escape card containers */
.sett-group,
.sett-fields,
.sett-cards-grid {
  overflow: visible !important;
}

/* Dropdown menu should be scrollable for long lists (e.g. 159 currencies) */
.sfy-select-menu {
  max-height: 320px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
}

.sett-group.more-open .sett-more-toggle {
  color: var(--gold) !important;
}

/* Light mode */
html.light .sett-more-toggle,
html[data-theme="light"] .sett-more-toggle {
  border-top-color: rgba(0,0,0,.06) !important;
}

/* ══════════════════════════════════════════════════════
   SETTINGS V5 — SMART GRID LAYOUT (no max-width caps)
   Philosophy:
   • 100% width everywhere, no artificial constraints
   • CSS Grid auto-fit determines column count automatically
   • Cards flow into available space intelligently
   • Wide screens get 3+ columns, narrow screens stack
   ══════════════════════════════════════════════════════ */

/* ── All panels use full width — no max-width caps ── */
.settings-panel {
  width: 100% !important;
  max-width: none !important;
}

.settings-panel[data-settings-panel="subscription"],
.settings-panel[data-settings-panel="payouts"],
.settings-panel[data-settings-panel="products"],
.settings-panel[data-settings-panel="coupons"] {
  width: 100% !important;
  max-width: none !important;
}

/* ── All grid containers use auto-fit smart grid ── */
.settings-grid-2,
.settings-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* ── Mobile (<768): single column ── */
@media (max-width: 767px) {
  .settings-layout-v2 {
    padding: 20px 16px 60px !important;
  }
  .sett-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .sett-group {
    padding: 20px 18px !important;
  }
  .sett-fields {
    grid-template-columns: 1fr !important;
  }
  .settings-grid-2,
  .settings-grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Tablet (768–1199): 2-col fields, auto-fit cards ── */
@media (min-width: 768px) and (max-width: 1199px) {
  .sett-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 18px !important;
  }
  .sett-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
  }
}

/* ── Desktop (1200–1599): 2-3 cards auto-fit ── */
@media (min-width: 1200px) and (max-width: 1599px) {
  .sett-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
    gap: 22px !important;
  }
  .sett-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 22px !important;
  }
}

/* ── Wide (1600–2199): 3 cards fit comfortably ── */
@media (min-width: 1600px) and (max-width: 2199px) {
  .sett-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
    gap: 24px !important;
  }
  .sett-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 24px !important;
  }
}

/* ── Ultra-wide (≥2200): 3-4 cards, generous spacing ── */
@media (min-width: 2200px) {
  .sett-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)) !important;
    gap: 28px !important;
  }
  .sett-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 28px !important;
  }
}

/* ── sett-group no longer needs break-inside (was for columns, now grid) ── */
.sett-group {
  /* Remove column-break rules, grid handles layout */
  break-inside: unset !important;
}

/* ══════════════════════════════════════════════════════
   SETTINGS V5 — CARDS GRID CONTAINER
   ══════════════════════════════════════════════════════ */

/* ── Main grid container for all cards in Business tab ── */
.sett-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  align-items: start !important;
}

/* ── Form inside grid — displays its children (sett-groups) as grid items ── */
.sett-form-inner {
  display: contents !important; /* Makes children participate in parent grid */
}

/* ── Billing panel — full width (removed max-width: 800px constraint) ── */

/* ── Operations & Locations — glass card treatment, participate in grid ── */
#settings-ops-wrap,
#settings-locations-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px 28px !important;
  margin: 0 !important;
}

/* ── Operations/Locations should participate in grid as cards ── */
#settings-ops-wrap:not(.hidden),
#settings-locations-wrap:not(.hidden) {
  display: block !important;
}

/* ── Locations list styling ── */
.settings-location-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

/* ── Add Location button (replaces inline form) ── */
#settings-add-location-btn {
  margin-top: 16px !important;
}

/* ── Grid-wide span for full-row elements ── */
.sett-group.sett-group-wide,
.sett-group[data-sett-wide="true"],
.settings-subsection.sett-group-wide {
  grid-column: 1 / -1 !important;
}

/* ══════════════════════════════════════════════════════
   ADD LOCATION MODAL — Glass panel (matches prototype.html)
   ══════════════════════════════════════════════════════ */
/* Default hidden state — uses .modal-overlay base from ui-components.css */
#add-location-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .3s ease, visibility .3s ease, background .3s ease !important;
}

/* When modal is open — .open class added by JS */
#add-location-modal.open {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#add-location-modal .modal-panel {
  background: linear-gradient(180deg, var(--floating, #22222C), var(--elevated, #1A1A22)) !important;
  border-radius: var(--r-xl, 26px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5),
    0 40px 80px rgba(0,0,0,.3),
    0 0 60px rgba(200,160,76,.04) !important;
  max-width: 480px !important;
  width: 90vw !important;
  animation: modal-spring-in .55s cubic-bezier(.34, 1.4, .64, 1) forwards !important;
  overflow: hidden !important;
}

#add-location-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 28px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

#add-location-modal .modal-header h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink, #F0F0F4) !important;
  margin: 0 !important;
}

#add-location-modal .modal-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.05) !important;
  border: none !important;
  color: var(--ink-3, #6A6A7A) !important;
  font-size: 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s var(--spring, cubic-bezier(.16,1,.3,1)) !important;
}
#add-location-modal .modal-close:hover {
  background: rgba(255,255,255,.1) !important;
  color: var(--ink, #F0F0F4) !important;
}

#add-location-modal .modal-body {
  padding: 24px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

#add-location-modal .field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#add-location-modal .field-group label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ink-3, #6A6A7A) !important;
}

#add-location-modal .field-group input {
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: rgba(255,255,255,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border: none !important;
  border-radius: var(--r-sm, 10px) !important;
  color: var(--ink, #F0F0F4) !important;
  transition: all .2s var(--spring, cubic-bezier(.16,1,.3,1)) !important;
}
#add-location-modal .field-group input:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
#add-location-modal .field-group input:focus {
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
  outline: none !important;
}

#add-location-modal .modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 16px 28px 24px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

#add-location-modal .btn-ghost {
  padding: 10px 20px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--ink, #F0F0F4) !important;
  border: none !important;
  border-radius: var(--r-sm, 10px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  transition: all .2s var(--spring, cubic-bezier(.16,1,.3,1)) !important;
}
#add-location-modal .btn-ghost:hover {
  background: rgba(255,255,255,.09) !important;
  transform: translateY(-1px) !important;
}

#add-location-modal .btn-glow {
  padding: 10px 22px !important;
  background: linear-gradient(135deg, var(--gold-bright, #D4B060) 0%, var(--gold, #C8A04C) 100%) !important;
  color: var(--void, #060608) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: var(--r-sm, 10px) !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  transition: all .22s var(--spring, cubic-bezier(.16,1,.3,1)) !important;
}
#add-location-modal .btn-glow:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ── Badge for Enterprise tag ── */
.badge-info {
  padding: 3px 8px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  background: var(--blue-glow, rgba(96,165,250,.12)) !important;
  color: var(--blue, #60A5FA) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.15) !important;
  vertical-align: middle !important;
}


/* ============================================================
   Products page v2 -- glass theme redesign
   ============================================================ */

.prod-v2 { --prod-card-h: 68px; }

/* Hide old layout remnants */
.prod-v2 .prod-v2-hidden { display: none !important; }
.prod-v2 #settings-catalog-grid { display: none !important; }

/* Topbar */
.prod-v2 .prod-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 22px;
  flex-wrap: wrap;
}
.prod-v2 .prod-topbar-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(200,160,76,.06);
}
.prod-v2 .prod-topbar-head p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}
.prod-v2 .prod-topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Shared button variants */
.prod-btn-glow,
.prod-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: all .22s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}
.prod-btn-glow {
  background: linear-gradient(135deg, var(--gold-bright,#D4B060) 0%, var(--gold,#C8A04C) 100%);
  color: #1C1409;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2);
}
.prod-btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200,160,76,.4), 0 0 50px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25);
}
.prod-btn-glow:active { transform: scale(.97); }
.prod-btn-ghost {
  background: rgba(255,255,255,.05);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2);
}
.prod-btn-ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.prod-btn-ghost:active { transform: scale(.97); }
.prod-btn-lg { padding: 14px 26px; font-size: 14px; }
.prod-btn-sm { padding: 7px 14px; font-size: 12px; }

/* Empty state */
.prod-v2 [hidden] { display: none !important; }
.prod-v2 .prod-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 60px;
  min-height: 480px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.2), 0 0 60px rgba(200,160,76,.03);
  position: relative;
  overflow: hidden;
}
.prod-v2 .prod-empty::before {
  content: "";
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%,-50%);
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(200,160,76,.05), transparent 70%);
  pointer-events: none;
}
.prod-empty-illust { position: relative; margin-bottom: 18px; animation: prod-empty-breathe 4s ease-in-out infinite; }
.prod-empty-svg { width: 180px; height: auto; display: block; }
.prod-empty-sparkle { transform-origin: center; animation: prod-sparkle 3.2s ease-in-out infinite; }
@keyframes prod-empty-breathe {
  0%,100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 20px rgba(200,160,76,.15)); }
  50%      { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 0 30px rgba(200,160,76,.25)); }
}
@keyframes prod-sparkle {
  0%,100% { opacity:.3; transform:scale(.8); }
  50%      { opacity:1;  transform:scale(1.2); }
}
.prod-empty-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 6px; }
.prod-empty-sub   { font-size: 14px; color: var(--ink-3); margin-bottom: 28px; }
.prod-empty-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* List view toolbar — search grows (bounded), sort locked compact */
.prod-v2 .prod-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.prod-v2 .prod-search-wrap { position: relative; flex: 1 1 auto; max-width: 480px; min-width: 280px; }
.prod-v2 .prod-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.prod-v2 .prod-search-input {
  width: 100%; padding: 11px 14px 11px 40px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none; border-radius: 10px;
  color: var(--ink); font-size: 14px; font-family: inherit;
  transition: all .2s cubic-bezier(.16,1,.3,1); outline: none;
}
.prod-v2 .prod-search-input::placeholder { color: var(--ink-4); }
.prod-v2 .prod-search-input:hover { background: rgba(255,255,255,.05); }
.prod-v2 .prod-search-input:focus {
  background: rgba(255,255,255,.04);
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2);
}
.prod-v2 .prod-count { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); margin-left: auto; }

/* Search clear (X) button */
.prod-v2 .prod-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border: none; border-radius: 999px;
  color: var(--ink-3); cursor: pointer;
  transition: all .18s cubic-bezier(.16,1,.3,1);
  padding: 0;
}
.prod-v2 .prod-search-clear:hover { background: rgba(255,255,255,.1); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.prod-v2 .prod-search-clear[hidden] { display: none; }
.prod-v2 .prod-search-wrap:has(.prod-search-clear:not([hidden])) .prod-search-input { padding-right: 40px; }

/* Sort dropdown — leverages shared .ui-dropdown pattern. Locked at 200px width
   so it never steals space from the search input and never looks oversized. */
.prod-v2 .prod-sort-dd { width: 200px; flex: 0 0 200px; position: relative; }
.prod-v2 .prod-sort-dd .ui-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--elevated, #1A1A22);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.5);
  border-radius: 14px;
  padding: 6px;
  display: none;
  z-index: 40;
  max-height: 320px; overflow-y: auto;
}
.prod-v2 .prod-sort-dd.open .ui-dd-menu { display: block; animation: prod-sort-menu-in .22s cubic-bezier(.16,1,.3,1); }
@keyframes prod-sort-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.prod-v2 .prod-sort-dd .ui-dd-item {
  display: block; padding: 10px 12px; font-size: 13px; color: var(--ink, #F0F0F4);
  cursor: pointer; border-radius: 10px;
  transition: background .15s ease, color .15s ease;
  outline: none;
}
.prod-v2 .prod-sort-dd .ui-dd-item:hover,
.prod-v2 .prod-sort-dd .ui-dd-item:focus-visible {
  background: rgba(255,255,255,.05); color: var(--ink, #F0F0F4);
}
.prod-v2 .prod-sort-dd .ui-dd-item.selected {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06));
  color: var(--gold, #C8A04C);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15);
}
.prod-v2 .prod-sort-dd .ui-dd-trigger {
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none; border-radius: 10px;
  color: var(--ink); font-size: 13px; font-family: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; transition: all .2s cubic-bezier(.16,1,.3,1);
}
.prod-v2 .prod-sort-dd .ui-dd-trigger svg { width: 14px; height: 14px; color: var(--ink-3); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.prod-v2 .prod-sort-dd.open .ui-dd-trigger svg { transform: rotate(180deg); color: var(--gold-bright, #D4B060); }
.prod-v2 .prod-sort-dd .ui-dd-trigger:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.prod-v2 .prod-sort-dd.open .ui-dd-trigger { box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2); }

/* Category pills */
.prod-v2 .prod-pills-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding: 4px 0; }
.prod-v2 .prod-cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border: none; border-radius: 999px;
  color: var(--ink-2); font-size: 12.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: all .18s cubic-bezier(.16,1,.3,1);
}
.prod-v2 .prod-cat-pill:hover { background: rgba(255,255,255,.06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.prod-v2 .prod-cat-pill.active {
  background: linear-gradient(135deg, rgba(200,160,76,.14), rgba(200,160,76,.06));
  color: var(--gold-bright,#D4B060); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.28), 0 2px 8px rgba(200,160,76,.08);
}
.prod-v2 .prod-cat-pill-new { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.prod-v2 .prod-cat-pill-new:hover { color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(200,160,76,.35); }

/* Product card list */
.prod-v2 .prod-cards-list { display: flex; flex-direction: column; gap: 6px; }
.prod-v2 .prod-card {
  display: grid;
  grid-template-columns: 54px 1fr 110px 140px 80px;
  align-items: center; gap: 18px;
  padding: 10px 16px 10px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 1px 4px rgba(0,0,0,.15);
  border-radius: 14px;
  transition: all .18s cubic-bezier(.16,1,.3,1);
}
.prod-v2 .prod-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.25), 0 0 20px rgba(200,160,76,.04);
  transform: translateY(-1px);
}
.prod-v2 .prod-card-thumb {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--ink-4);
}
.prod-v2 .prod-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-v2 .prod-card-main { min-width: 0; }
.prod-v2 .prod-card-name {
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-v2 .prod-card-meta {
  font-size: 11.5px; color: var(--ink-3); margin-top: 3px;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-v2 .prod-card-cat-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink-2);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border-radius: 999px; white-space: nowrap;
}
.prod-v2 .prod-card-sku {
  font-size: 11px; color: var(--ink-4); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.prod-v2 .prod-card-sku-muted { font-family: inherit; }
.prod-v2 .prod-card-price { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(200,160,76,.25); }

/* Stock pills */
.prod-v2 .prod-stock-pill { display: inline-block; padding: 4px 10px; font-size: 10.5px; font-weight: 600; border-radius: 999px; letter-spacing: -.005em; white-space: nowrap; }
.prod-stock-ok     { background: rgba(74,222,128,.08); color: #4ADE80; box-shadow: inset 0 0 0 1px rgba(74,222,128,.15); }
.prod-stock-warn   { background: rgba(251,191,36,.08); color: #FBBF24; box-shadow: inset 0 0 0 1px rgba(251,191,36,.15); }
.prod-stock-danger { background: rgba(248,113,113,.08); color: #F87171; box-shadow: inset 0 0 0 1px rgba(248,113,113,.18); }
.prod-stock-info   { background: rgba(96,165,250,.08); color: #60A5FA; box-shadow: inset 0 0 0 1px rgba(96,165,250,.15); }
.prod-stock-muted  { background: rgba(255,255,255,.03); color: var(--ink-4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* Card action buttons */
.prod-v2 .prod-card-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: .5; transition: opacity .18s ease; }
.prod-v2 .prod-card:hover .prod-card-actions { opacity: 1; }
.prod-v2 .prod-card-action {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  border: none; border-radius: 8px; color: var(--ink-3); cursor: pointer;
  transition: all .18s ease;
}
.prod-v2 .prod-card-action:hover { background: rgba(255,255,255,.07); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.prod-v2 .prod-card-action-danger:hover { background: rgba(248,113,113,.1); color: #F87171; box-shadow: inset 0 0 0 1px rgba(248,113,113,.25); }

/* Empty filter state */
.prod-v2 .prod-empty-filter {
  padding: 48px 24px; text-align: center; color: var(--ink-3);
  display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 13px;
}
.prod-v2 .prod-empty-filter-title { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.prod-v2 .prod-empty-filter-sub { font-size: 12px; color: var(--ink-4); }

/* Category combobox (replaces native datalist; Section 8.11 pattern) */
.prod-cat-combo { position: relative; }
.prod-cat-combo-input {
  width: 100%; padding: 10px 38px 10px 14px; font-size: 14px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none; border-radius: 10px;
  color: var(--ink); font-family: inherit;
  transition: all .2s cubic-bezier(.16,1,.3,1); outline: none;
}
.prod-cat-combo-input::placeholder { color: var(--ink-4); }
.prod-cat-combo-input:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.prod-cat-combo-input:focus { background: rgba(255,255,255,.04); box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2); }
.prod-cat-combo-chev {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--ink-3); cursor: pointer;
  transition: transform .22s cubic-bezier(.16,1,.3,1), color .18s ease;
  padding: 0;
}
.prod-cat-combo-chev:hover { color: var(--ink); }
.prod-cat-combo.open .prod-cat-combo-chev { transform: translateY(-50%) rotate(180deg); color: var(--gold-bright, #D4B060); }

.prod-cat-combo-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  max-height: 260px; overflow-y: auto;
  background: var(--elevated, #1A1A22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.5);
  border-radius: 14px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: prod-cat-menu-in .22s cubic-bezier(.16,1,.3,1);
}
@keyframes prod-cat-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.prod-cat-combo-menu[hidden] { display: none; }
.prod-cat-combo-menu::-webkit-scrollbar { width: 4px; }
.prod-cat-combo-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }
.prod-cat-combo-item {
  padding: 9px 12px; font-size: 13.5px; color: var(--ink-2);
  border-radius: 9px; cursor: pointer;
  transition: all .14s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px;
}
.prod-cat-combo-item:hover, .prod-cat-combo-item:focus {
  background: rgba(200,160,76,.08); color: var(--ink); outline: none;
}
.prod-cat-combo-create {
  color: var(--gold-bright, #D4B060);
  border-top: 1px dashed rgba(255,255,255,.06);
  margin-top: 2px; padding-top: 10px;
}
.prod-cat-combo-create:hover { background: rgba(200,160,76,.12); }
.prod-cat-combo-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(200,160,76,.14);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.22);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.prod-cat-combo-empty {
  padding: 20px 12px; font-size: 12.5px; color: var(--ink-4); text-align: center;
}

/* =============================================
   UOM combobox (Session 4.5) — mirrors category
   combobox pattern. Backed by ShemifyProductUnits.
   ============================================= */
.prod-uom-combo { position: relative; }
.prod-uom-combo-input {
  width: 100%; padding: 10px 38px 10px 14px; font-size: 14px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none; border-radius: 10px;
  color: var(--ink); font-family: inherit;
  transition: all .2s cubic-bezier(.16,1,.3,1); outline: none;
}
.prod-uom-combo-input::placeholder { color: var(--ink-4); }
.prod-uom-combo-input:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.prod-uom-combo-input:focus { background: rgba(255,255,255,.04); box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2); }
.prod-uom-combo-chev {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--ink-3); cursor: pointer;
  transition: transform .22s cubic-bezier(.16,1,.3,1), color .18s ease;
  padding: 0;
}
.prod-uom-combo-chev:hover { color: var(--ink); }
.prod-uom-combo.open .prod-uom-combo-chev { transform: translateY(-50%) rotate(180deg); color: var(--gold-bright, #D4B060); }

.prod-uom-combo-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1000;
  max-height: 320px; overflow-y: auto;
  background: var(--elevated, #1A1A22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.5);
  border-radius: 14px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: prod-cat-menu-in .22s cubic-bezier(.16,1,.3,1);
}
.prod-uom-combo-menu[hidden] { display: none; }
.prod-uom-combo-menu::-webkit-scrollbar { width: 4px; }
.prod-uom-combo-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }

.prod-uom-combo-group {
  padding: 10px 12px 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4);
  pointer-events: none; user-select: none;
}
.prod-uom-combo-group:first-child { padding-top: 6px; }

.prod-uom-combo-item {
  padding: 9px 12px; font-size: 13.5px; color: var(--ink-2);
  border-radius: 9px; cursor: pointer;
  transition: all .14s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.prod-uom-combo-item:hover, .prod-uom-combo-item:focus {
  background: rgba(200,160,76,.08); color: var(--ink); outline: none;
}
.prod-uom-combo-item.selected {
  color: var(--gold-bright, #D4B060);
  background: rgba(200,160,76,.06);
}
.prod-uom-combo-item.selected::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold, #C8A04C);
  box-shadow: 0 0 8px rgba(200,160,76,.5);
  margin-right: 2px;
}
.prod-uom-combo-label { flex: 1 1 auto; }
.prod-uom-combo-abbr {
  flex: 0 0 auto; font-size: 11px; font-weight: 500;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.prod-uom-combo-item.selected .prod-uom-combo-abbr {
  color: var(--gold, #C8A04C);
  background: rgba(200,160,76,.06);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.14);
}
.prod-uom-combo-empty {
  padding: 20px 12px; font-size: 12.5px; color: var(--ink-4); text-align: center;
}

/* =============================================
   Product & Category Modals — Glass Theme
   Matches prototype.html exactly: keyframe animations,
   RGB ambient orbs, shell parallax, content stagger.
   ============================================= */

/* Keyframes for modal system */
@keyframes prod-mdl-in {
  0%   { opacity:0; transform:translateY(30px) scale(.92); filter:blur(6px); }
  55%  { transform:translateY(-12px) scale(1.025); }
  75%  { transform:translateY(4px) scale(.997); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes prod-mdl-out {
  0%   { transform:translateY(0) scale(1); opacity:1; }
  100% { transform:translateY(50px) scale(.9); opacity:0; filter:blur(2px); }
}
@keyframes prod-bdrop-in {
  0%   { backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); background:rgba(0,0,0,0); }
  100% { backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5); background:rgba(0,0,0,.5); }
}
@keyframes prod-bdrop-out {
  0%   { backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); background:rgba(0,0,0,.5); }
  100% { backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); background:rgba(0,0,0,0); }
}
@keyframes prod-stagger {
  0%   { transform:translateY(16px); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
@keyframes prod-mdl-glow {
  0%   { box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 0 rgba(200,160,76,0); }
  40%  { box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 120px rgba(200,160,76,.12); }
  100% { box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 80px rgba(200,160,76,.07); }
}
@keyframes prod-orb1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(30%,-20%)} 50%{transform:translate(-20%,30%)} 75%{transform:translate(25%,15%)} }
@keyframes prod-orb2 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-25%,25%)} 50%{transform:translate(30%,-15%)} 75%{transform:translate(-15%,-25%)} }
@keyframes prod-orb3 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(20%,30%)} 50%{transform:translate(-30%,-10%)} 75%{transform:translate(10%,-30%)} }

.prod-modal[hidden] { display: none !important; }
.prod-modal {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden; pointer-events: none;
  /* Blur applied directly to overlay — matches prototype.html exactly */
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
}
.prod-modal.open {
  visibility: visible; pointer-events: auto;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  animation: prod-bdrop-in .45s cubic-bezier(.2,.8,.2,1) forwards;
}
.prod-modal.closing {
  pointer-events: none;
  animation: prod-bdrop-out .22s ease-in forwards;
}

/* Backdrop click target (fills modal, catches outside clicks) */
.prod-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  background: transparent;
  z-index: 1;
}

/* RGB ambient orbs — gold + blue via pseudo, green via element */
.prod-modal::before,
.prod-modal::after,
.prod-modal-orb {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  will-change: transform;
}
.prod-modal.open::before,
.prod-modal.open::after,
.prod-modal.open .prod-modal-orb { opacity: 1; }

.prod-modal::before {
  width: 500px; height: 500px; top: 10%; left: 15%;
  background: radial-gradient(circle, rgba(200,160,76,.12), transparent 70%);
  animation: prod-orb1 10s ease-in-out infinite;
}
.prod-modal::after {
  width: 450px; height: 450px; bottom: 10%; right: 15%;
  background: radial-gradient(circle, rgba(96,165,250,.08), transparent 70%);
  animation: prod-orb2 12s ease-in-out infinite;
}
.prod-modal-orb-green {
  position: absolute; width: 400px; height: 400px; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74,222,128,.06), transparent 70%);
  animation: prod-orb3 14s ease-in-out infinite;
  border-radius: 50%; pointer-events: none;
}

/* Panel with spring animation */
.prod-modal-panel {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, var(--floating,#22222C) 0%, var(--elevated,#1A1A22) 100%);
  border-radius: var(--r-xl, 26px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35);
  width: 560px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.prod-modal.open .prod-modal-panel {
  animation: prod-mdl-in .6s cubic-bezier(.34,1.4,.64,1) forwards, prod-mdl-glow .8s ease .4s forwards;
}
.prod-modal.closing .prod-modal-panel {
  animation: prod-mdl-out .2s ease-in forwards;
}
.prod-modal-panel-sm { width: 420px; }

/* Shell parallax — scale down + dim */
@keyframes prod-shell-in  { 0%{transform:scale(1);border-radius:0;filter:brightness(1)} 100%{transform:scale(.96);border-radius:14px;filter:brightness(.7)} }
@keyframes prod-shell-out { 0%{transform:scale(.96);border-radius:14px;filter:brightness(.7)} 100%{transform:scale(1);border-radius:0;filter:brightness(1)} }

.dashboard-shell.mdl-on { animation: prod-shell-in .45s cubic-bezier(.2,.8,.2,1) forwards; overflow: hidden; }
.dashboard-shell.mdl-off { animation: prod-shell-out .28s ease-out forwards; }

/* Content stagger — header, body children, footer appear sequentially */
.prod-modal.open .prod-modal-head { opacity: 0; animation: prod-stagger .4s cubic-bezier(.2,.8,.2,1) .08s forwards; }
.prod-modal.open .prod-modal-body > * { opacity: 0; animation: prod-stagger .35s cubic-bezier(.2,.8,.2,1) forwards; }
.prod-modal.open .prod-modal-body > *:nth-child(1) { animation-delay: .14s; }
.prod-modal.open .prod-modal-body > *:nth-child(2) { animation-delay: .2s; }
.prod-modal.open .prod-modal-body > *:nth-child(3) { animation-delay: .26s; }
.prod-modal.open .prod-modal-body > *:nth-child(4) { animation-delay: .32s; }
.prod-modal.open .prod-modal-body > *:nth-child(5) { animation-delay: .38s; }
.prod-modal.open .prod-modal-foot { opacity: 0; animation: prod-stagger .35s cubic-bezier(.2,.8,.2,1) .34s forwards; }

.prod-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.prod-modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.prod-modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border: none; border-radius: 8px; color: var(--ink-3); cursor: pointer;
  transition: all .12s ease; font-family: var(--font, inherit); font-size: 16px;
}
.prod-modal-close:hover { background: rgba(255,255,255,.1); color: var(--ink); }
.prod-modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.prod-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* Modal form */
.prod-form { display: flex; flex-direction: column; gap: 16px; }
.prod-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prod-field { display: flex; flex-direction: column; gap: 6px; }
.prod-field label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.prod-field label .req { color: var(--gold); }
.prod-field input[type="text"],
.prod-field input[type="number"],
.prod-field input[type="file"],
.prod-field select {
  padding: 11px 14px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none; border-radius: 10px; color: var(--ink); font-size: 14px; font-family: inherit;
  transition: all .2s cubic-bezier(.16,1,.3,1); outline: none; width: 100%;
}
.prod-field input:hover, .prod-field select:hover { background: rgba(255,255,255,.05); }
.prod-field input:focus, .prod-field select:focus { box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2); }
.prod-hint { font-size: 11px; color: var(--ink-4); letter-spacing: -.005em; }
.prod-promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.prod-image-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.prod-image-preview {
  width: 72px; height: 72px; border-radius: 12px;
  background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.prod-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.prod-image-empty { font-size: 10px; color: var(--ink-4); }
.prod-image-controls { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }

/* Optional details collapsible */
.prod-advanced {
  margin-top: 4px;
  background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  border-radius: 12px; overflow: hidden;
  transition: box-shadow .2s ease;
}
.prod-advanced[open] { box-shadow: inset 0 0 0 1px rgba(200,160,76,.15); }
.prod-advanced summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: color .15s ease;
}
.prod-advanced summary::-webkit-details-marker { display: none; }
.prod-advanced summary:hover { color: var(--ink); }
.prod-advanced-chev { color: var(--ink-3); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.prod-advanced[open] .prod-advanced-chev { transform: rotate(90deg); color: var(--gold-bright); }
.prod-advanced-sub { color: var(--ink-4); font-weight: 400; font-size: 11.5px; margin-left: auto; }
.prod-advanced-body {
  padding: 4px 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Shell parallax controlled by JS via .mdl-on / .mdl-off classes */
/* See above keyframes: prod-shell-in, prod-shell-out */

/* Responsive — Path B breakpoints */
/* ≥1280: full 5-col layout (default above). */

/* ≥1024 and <1280: condense price+stock width slightly */
@media (max-width: 1279px) and (min-width: 1024px) {
  .prod-v2 .prod-card { grid-template-columns: 50px 1fr 96px 120px 72px; gap: 14px; }
}

/* ≥720 and <1024: tablet — hide stock column, rely on pill inline */
@media (max-width: 1023px) and (min-width: 720px) {
  .prod-v2 .prod-card {
    grid-template-columns: 48px 1fr 100px 72px;
    gap: 14px;
  }
  .prod-v2 .prod-card-stock { display: none; }
  /* Push actions into the 4th slot */
  .prod-v2 .prod-card-actions { grid-column: 4; }
}

/* <=768px: toolbar wraps onto multiple lines (sort slots below search).
   Kept separate from the 719 card-layout breakpoint so iPads (768) get
   a sensible toolbar layout without triggering the mobile card stack. */
@media (max-width: 768px) {
  .prod-v2 .prod-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .prod-v2 .prod-search-wrap { max-width: 100%; min-width: 0; flex: 1 1 100%; }
  .prod-v2 .prod-sort-dd { width: 100%; flex: 0 0 100%; }
  .prod-v2 .prod-count { margin-left: 0; }
}

/* <720: stacked card layout */
@media (max-width: 719px) {
  .prod-v2 .prod-card {
    grid-template-columns: 44px 1fr 80px;
    grid-template-rows: auto auto; gap: 10px; padding: 10px;
  }
  .prod-v2 .prod-card-thumb { width: 44px; height: 44px; }
  .prod-v2 .prod-card-price { grid-row: 1; grid-column: 3; text-align: right; }
  .prod-v2 .prod-card-stock { grid-row: 2; grid-column: 2 / 4; display: block; }
  .prod-v2 .prod-card-main  { grid-row: 1; grid-column: 2; }
  .prod-v2 .prod-card-actions { grid-row: 2; grid-column: 2 / 4; justify-content: flex-end; opacity: 1; /* always visible on touch */ }
  .prod-form-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   ONLINE STORE SIMPLIFICATION — Wizard Flow
   ═══════════════════════════════════════════════════════════════════ */

/* singleview3: the legacy `[data-shemify-ux-mode="simple"]` gating rules
   and the `.shop-wizard-active` companion rules below them are all
   dead — `data-shemify-ux-mode` is now hard-pinned to "advanced" by
   the single-view controller, and `.shop-wizard-active` is never set
   on body by any JS module. The horizontal tab bar shows on every
   shop surface, and every tier card is visible by default. */

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Welcome Hero
   ═══════════════════════════════════════════════════════════════════ */

.shop-wizard {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 24px;
  animation: shop-wiz-in .6s cubic-bezier(.16,1,.3,1) both;
}

@keyframes shop-wiz-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-wizard-hero {
  text-align: center;
  margin-bottom: 32px;
}

.shop-wizard-illustration {
  width: 140px;
  height: 140px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,160,76,.12) 0%, transparent 70%);
  position: relative;
}
.shop-wizard-illustration::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(200,160,76,.06) 0%, transparent 70%);
  animation: shop-wiz-glow 3s ease-in-out infinite;
}
@keyframes shop-wiz-glow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.shop-wizard-illustration svg {
  width: 80px;
  height: 80px;
  color: var(--gold);
  opacity: .9;
}

.shop-wizard-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.shop-wizard-subtitle {
  font-size: 15px;
  color: var(--ink-3);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Step Card
   ═══════════════════════════════════════════════════════════════════ */

.shop-wizard-step {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 24px rgba(0,0,0,.2),
    0 12px 48px rgba(0,0,0,.15);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.shop-wizard-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
  opacity: .7;
}

.shop-wizard-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.shop-wizard-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shop-wizard-step-icon svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
}

.shop-wizard-step-meta {
  flex: 1;
}

.shop-wizard-step-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.shop-wizard-step-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
}

.shop-wizard-step-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 24px;
}

.shop-wizard-step-action {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shop-wizard-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all .22s cubic-bezier(.16,1,.3,1);
}

.shop-wizard-btn-primary {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--void);
  box-shadow:
    0 2px 12px rgba(200,160,76,.3),
    0 0 30px rgba(200,160,76,.1),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.shop-wizard-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 28px rgba(200,160,76,.4),
    0 0 60px rgba(200,160,76,.15),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.shop-wizard-btn-primary:active {
  transform: scale(.97);
}

.shop-wizard-btn-ghost {
  background: rgba(255,255,255,.05);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.shop-wizard-btn-ghost:hover {
  background: rgba(255,255,255,.08);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Progress Indicator
   ═══════════════════════════════════════════════════════════════════ */

.shop-wizard-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.shop-wizard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: all .3s cubic-bezier(.16,1,.3,1);
}

.shop-wizard-dot.active {
  background: var(--gold);
  box-shadow:
    0 0 12px rgba(200,160,76,.5),
    0 0 24px rgba(200,160,76,.2);
  transform: scale(1.2);
}

.shop-wizard-dot.completed {
  background: var(--green);
  box-shadow: 0 0 8px rgba(74,222,128,.3);
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Coming Up Next
   ═══════════════════════════════════════════════════════════════════ */

.shop-wizard-upcoming {
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.shop-wizard-upcoming-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}

.shop-wizard-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-wizard-upcoming-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-3);
}

.shop-wizard-upcoming-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

.shop-wizard-upcoming-item.done::before {
  background: var(--green);
  box-shadow: 0 0 6px rgba(74,222,128,.4);
}

.shop-wizard-upcoming-item.done {
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Store Live Card
   ═══════════════════════════════════════════════════════════════════ */

.shop-live-card {
  background: linear-gradient(135deg, rgba(74,222,128,.08) 0%, rgba(74,222,128,.03) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(74,222,128,.2),
    0 4px 24px rgba(0,0,0,.15);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.shop-live-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, #86efac 100%);
}

.shop-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(74,222,128,.15);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.shop-live-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-green 2.8s ease-in-out infinite;
}

.shop-live-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.shop-live-subtitle {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 24px;
}

.shop-live-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Stat Cards
   ═══════════════════════════════════════════════════════════════════ */

.shop-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.shop-stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.018) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 12px rgba(0,0,0,.15);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  transition: all .2s ease;
  cursor: pointer;
}
.shop-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.2);
}

.shop-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}

.shop-stat-value {
  font-size: 28px;
  font-weight: 200;
  color: var(--ink);
  letter-spacing: -.03em;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.shop-stat-link {
  font-size: 11px;
  color: var(--gold);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-stat-link:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Quick Actions
   ═══════════════════════════════════════════════════════════════════ */

.shop-quick-actions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.shop-quick-actions-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}

.shop-quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color .15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.shop-quick-action:hover {
  color: var(--gold);
}
.shop-quick-action svg {
  width: 16px;
  height: 16px;
  opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════════
   SHOP WIZARD — Responsive
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .shop-wizard { padding: 20px 16px; }
  .shop-wizard-illustration { width: 100px; height: 100px; }
  .shop-wizard-illustration svg { width: 56px; height: 56px; }
  .shop-wizard-title { font-size: 22px; }
  .shop-wizard-step { padding: 24px; border-radius: 16px; }
  .shop-wizard-step-name { font-size: 16px; }
  .shop-stat-grid { grid-template-columns: 1fr; }
  .shop-live-actions { flex-direction: column; }
  .shop-wizard-btn { width: 100%; justify-content: center; }
}

/* Light mode adjustments */
html.light .shop-wizard-step,
html.light .shop-live-card,
html.light .shop-stat-card {
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}
html.light .shop-wizard-dot { background: rgba(0,0,0,.08); }
html.light .shop-wizard-dot.active { background: var(--gold); }
html.light .shop-wizard-upcoming { background: rgba(0,0,0,.02); }

/* ═══════════════════════════════════════════════════════════════════
   REPORTS LAYOUT — Single-view advanced
   ═══════════════════════════════════════════════════════════════════ */

/* singleview4: `.reports-simple-container` selector kept for cache-
   stale renders (cheap hide rule). The previous `.reports-layout
   { display: flex !important }` override was deleted — it was
   suppressing the canonical 2-column grid (sidebar 320px + content
   1fr) declared in `shemify-ui.css:2649`. With no rule hiding
   .reports-layout anymore (singleview3 deleted the
   `[data-shemify-ux-mode="simple"]` gating block), the natural grid
   layout from shemify-ui.css applies as intended. */
.reports-simple-container {
  display: none !important;
}

/* Reports Hero Section */
.reports-hero {
  text-align: center;
  margin-bottom: 28px;
  animation: rpt-hero-in .6s cubic-bezier(.16,1,.3,1) both;
}

@keyframes rpt-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.reports-hero-illustration {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,160,76,.12) 0%, transparent 70%);
}
.reports-hero-illustration svg {
  width: 44px;
  height: 44px;
  color: var(--gold);
}

.reports-hero-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 6px;
}

.reports-hero-subtitle {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 320px;
  margin: 0 auto;
}

/* Time Period Selector Pills */
.reports-time-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.reports-time-pill {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: all .2s var(--spring);
  background: rgba(255,255,255,.04);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.reports-time-pill:hover {
  background: rgba(255,255,255,.08);
  color: var(--ink);
  transform: translateY(-1px);
}
.reports-time-pill.active {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08));
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 2px 12px rgba(200,160,76,.1);
}

html.light .reports-time-pill {
  background: rgba(0,0,0,.03);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .reports-time-pill.active {
  background: var(--gold-glow);
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM DATE RANGE PICKER — Glass Theme Premium
   ═══════════════════════════════════════════════════════════ */

.reports-date-range-picker {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.08),
    0 4px 24px rgba(0,0,0,.2),
    0 0 60px rgba(200,160,76,.03);
  backdrop-filter: blur(12px);
  animation: rpt-card-in .4s cubic-bezier(.16,1,.3,1) both;
}
/* Subtle ambient glow behind picker */
.reports-date-range-picker::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(200,160,76,.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.reports-date-range-picker.hidden {
  display: none;
}
.reports-date-range-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.reports-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
  max-width: 180px;
}
.reports-date-field label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink-4);
}
.reports-date-input {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: none;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.15);
  transition: all .22s var(--spring);
  color-scheme: dark;
  width: 100%;
}
.reports-date-input:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.reports-date-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.15), inset 0 0 0 1px rgba(200,160,76,.25), 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.reports-date-input::-webkit-calendar-picker-indicator {
  filter: invert(.7) sepia(.3) saturate(2) hue-rotate(10deg);
  opacity: .6;
  cursor: pointer;
  transition: opacity .2s;
}
.reports-date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* Apply/Cancel buttons in the row */
.reports-date-range-row .btn {
  height: 42px;
  padding: 0 20px;
}
.reports-date-range-row #reports-apply-range {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--void);
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(200,160,76,.3), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2);
}
.reports-date-range-row #reports-apply-range:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 24px rgba(200,160,76,.4), 0 0 50px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25);
}
.reports-date-presets {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.04);
  flex-wrap: wrap;
}
.reports-date-preset-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-4);
  margin-right: 6px;
}
.reports-date-preset {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: none;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .22s var(--spring);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.1);
}
.reports-date-preset:hover {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06));
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 4px 12px rgba(200,160,76,.12);
  transform: translateY(-1px) scale(1.02);
}
.reports-date-preset:active {
  transform: scale(.97);
}

/* Light mode date picker */
html.light .reports-date-range-picker {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.01) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 4px 24px rgba(0,0,0,.08);
}
html.light .reports-date-range-picker::before {
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(150,117,10,.04), transparent 70%);
}
html.light .reports-date-input {
  background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.015) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05);
  color-scheme: light;
}
html.light .reports-date-preset {
  background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.015) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .reports-date-presets {
  border-top-color: rgba(0,0,0,.06);
}

/* Summary Cards Grid */
.reports-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 600px) {
  .reports-summary-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.reports-summary-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.15);
  transition: all .25s var(--spring);
  animation: rpt-card-in .5s cubic-bezier(.16,1,.3,1) both;
  text-align: center;
}
.reports-summary-card:nth-child(1) { animation-delay: .1s; }
.reports-summary-card:nth-child(2) { animation-delay: .15s; }
.reports-summary-card:nth-child(3) { animation-delay: .2s; }

.reports-summary-card:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 4px 20px rgba(0,0,0,.2), 0 0 30px rgba(200,160,76,.04);
  transform: translateY(-2px);
}

@keyframes rpt-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.reports-summary-card-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(200,160,76,.08);
}
.reports-summary-card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.reports-summary-card-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}

.reports-summary-card-value {
  font-size: 32px;
  font-weight: 200;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(0,0,0,.3), 0 0 30px rgba(200,160,76,.03);
}

.reports-summary-card-change {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}
.reports-summary-card-change.positive { color: var(--green); }
.reports-summary-card-change.negative { color: var(--red); }
.reports-summary-card-change.neutral { color: var(--ink-3); }

.reports-summary-card-comparison {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}
.comparison-up {
  color: var(--green);
}
.comparison-down {
  color: var(--red);
}
.comparison-neutral {
  color: var(--ink-4);
}

html.light .reports-summary-card {
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}

/* Primary Chart Container */
.reports-primary-chart {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 12px rgba(0,0,0,.15);
  animation: rpt-chart-in .6s cubic-bezier(.16,1,.3,1) .25s both;
}

@keyframes rpt-chart-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}

.reports-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.reports-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.reports-chart-period {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 4px 10px;
  background: rgba(255,255,255,.04);
  border-radius: 20px;
}

.reports-chart-wrapper {
  height: 200px;
  position: relative;
}

@media (min-width: 768px) {
  .reports-chart-wrapper { height: 260px; }
}

.reports-chart-canvas {
  height: 200px;
  width: 100%;
}

@media (min-width: 768px) {
  .reports-chart-canvas { height: 260px; }
}

/* Collapsible Accordions — Premium Glass */
.reports-accordions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reports-accordion {
  background:
    linear-gradient(180deg, rgba(200,160,76,.02) 0%, rgba(200,160,76,.005) 100%),
    #080808;
  border-radius: var(--r);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.06),
    0 4px 16px rgba(0,0,0,.25);
  overflow: hidden;
  transition: all .25s var(--spring);
}
.reports-accordion:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 4px 16px rgba(0,0,0,.15);
}
.reports-accordion.open {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.1),
    0 4px 20px rgba(0,0,0,.18),
    0 0 30px rgba(200,160,76,.03);
}

.reports-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: all .2s var(--spring);
}
.reports-accordion-header:hover {
  background: rgba(255,255,255,.03);
  color: var(--ink);
}
.reports-accordion.open .reports-accordion-header {
  color: var(--gold);
  background: rgba(200,160,76,.03);
}

.reports-accordion-chevron {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition: all .28s var(--spring);
}
.reports-accordion-header:hover .reports-accordion-chevron {
  color: var(--ink);
}
.reports-accordion.open .reports-accordion-chevron {
  transform: rotate(90deg);
  color: var(--gold);
}

.reports-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--spring);
}
.reports-accordion.open .reports-accordion-body {
  max-height: 500px;
}

.reports-accordion-content {
  padding: 0 20px 20px;
  color: var(--ink-3);
  font-size: 13px;
}

.reports-accordion-empty {
  color: var(--ink-4);
  font-size: 12px;
  font-style: italic;
  margin: 0;
}

/* Light mode accordions — fixed: dark-mode baseline used `linear-gradient
   + #080808` (two layers); previous override had ONLY the white gradient
   so the #080808 solid still showed through. Now uses a solid white base
   layer + subtle gold tint, plus explicit text colors so the header is
   readable on the cream surface. */
html.light .reports-accordion,
html[data-theme="light"] .reports-accordion {
  background:
    linear-gradient(180deg, rgba(200,160,76,.04) 0%, rgba(200,160,76,.01) 100%),
    #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05) !important;
}
html.light .reports-accordion:hover,
html[data-theme="light"] .reports-accordion:hover {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}
html.light .reports-accordion.open,
html[data-theme="light"] .reports-accordion.open {
  background:
    linear-gradient(180deg, rgba(200,160,76,.06) 0%, rgba(200,160,76,.02) 100%),
    #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.18), 0 4px 16px rgba(0,0,0,.08) !important;
}
html.light .reports-accordion-header,
html[data-theme="light"] .reports-accordion-header { color: rgba(0,0,0,.82); }
html.light .reports-accordion-header:hover,
html[data-theme="light"] .reports-accordion-header:hover {
  background: rgba(0,0,0,.025);
  color: rgba(0,0,0,.92);
}
html.light .reports-accordion.open .reports-accordion-header,
html[data-theme="light"] .reports-accordion.open .reports-accordion-header {
  color: #8a6810;
  background: rgba(150,117,10,.05);
}
html.light .reports-accordion-chevron,
html[data-theme="light"] .reports-accordion-chevron { color: rgba(0,0,0,.55); }
html.light .reports-accordion-header:hover .reports-accordion-chevron,
html[data-theme="light"] .reports-accordion-header:hover .reports-accordion-chevron { color: rgba(0,0,0,.82); }
html.light .reports-accordion.open .reports-accordion-chevron,
html[data-theme="light"] .reports-accordion.open .reports-accordion-chevron { color: #8a6810; }
html.light .reports-accordion-content,
html[data-theme="light"] .reports-accordion-content { color: rgba(0,0,0,.7); }
html.light .reports-accordion-empty,
html[data-theme="light"] .reports-accordion-empty { color: rgba(0,0,0,.55); }

/* Payment Methods Accordion */
.reports-payment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reports-payment-item {
  display: grid;
  grid-template-columns: 100px 1fr 80px;
  align-items: center;
  gap: 12px;
}
.reports-payment-method {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.reports-payment-bar {
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.reports-payment-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 3px;
  transition: width .4s var(--spring);
}
.reports-payment-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Top Products Accordion */
.reports-products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reports-product-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(200,160,76,.03) 0%, rgba(200,160,76,.01) 100%),
    #0D0D0D;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.06), 0 2px 8px rgba(0,0,0,.3);
}
.reports-product-item:hover {
  background:
    linear-gradient(180deg, rgba(200,160,76,.06) 0%, rgba(200,160,76,.02) 100%),
    #111111;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.14), 0 4px 14px rgba(0,0,0,.3);
  transform: translateX(2px);
  transition: all .22s var(--spring);
}
.reports-product-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(200,160,76,.1);
  border-radius: 50%;
}
.reports-product-info,
div.reports-product-info[class*="info"] {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  border: none !important;
}
.reports-product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reports-product-qty {
  font-size: 11px;
  color: var(--ink-3) !important;
  margin-top: 2px;
}
.reports-product-revenue {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(200,160,76,.25);
}

/* Breakdown Details Accordion */
.reports-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reports-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.reports-breakdown-item:last-child {
  border-bottom: none;
}
.reports-breakdown-label {
  font-size: 13px;
  color: var(--ink-2);
}
.reports-breakdown-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Export Options — Accordion Content */
.reports-export-quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.reports-export-quick .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Financial Documents Inside Export Accordion */
.reports-export-docs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reports-export-docs-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.reports-export-doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(200,160,76,.03) 0%, rgba(200,160,76,.01) 100%),
    #0D0D0D;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.06), 0 2px 8px rgba(0,0,0,.25);
  cursor: pointer;
  transition: all .22s var(--spring);
}
.reports-export-doc-row:hover {
  background:
    linear-gradient(180deg, rgba(200,160,76,.06) 0%, rgba(200,160,76,.02) 100%),
    #111111;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.16), 0 4px 14px rgba(0,0,0,.3);
  transform: translateX(4px);
}
.reports-export-doc-featured {
  background:
    linear-gradient(135deg, rgba(200,160,76,.12) 0%, rgba(200,160,76,.03) 100%),
    #0D0D0D;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.16), 0 2px 8px rgba(0,0,0,.25);
}
.reports-export-doc-featured:hover {
  background:
    linear-gradient(135deg, rgba(200,160,76,.16) 0%, rgba(200,160,76,.05) 100%),
    #111111;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.26), 0 0 20px rgba(200,160,76,.1), 0 4px 14px rgba(0,0,0,.3);
}
.reports-export-doc-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  color: var(--ink-2);
  transition: all .2s var(--spring);
}
.reports-export-doc-row:hover .reports-export-doc-icon {
  color: var(--ink);
}
.reports-export-doc-icon-gold {
  background: rgba(200,160,76,.1);
  color: var(--gold);
}
.reports-export-doc-icon-gold svg {
  filter: drop-shadow(0 0 4px rgba(200,160,76,.3));
}
.reports-export-doc-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.reports-export-doc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink) !important;
}
.reports-export-doc-desc {
  font-size: 11px;
  color: var(--ink-3) !important;
}
.reports-export-doc-row .btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 11px;
}

/* Light mode */
html.light .reports-export-quick {
  border-bottom-color: rgba(0,0,0,.06);
}
html.light .reports-export-doc-row {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .reports-export-doc-row:hover {
  background: rgba(0,0,0,.04);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15);
}
html.light .reports-export-doc-featured {
  background: linear-gradient(135deg, rgba(150,117,10,.06) 0%, rgba(150,117,10,.02) 100%);
}
html.light .reports-export-doc-icon {
  background: rgba(0,0,0,.03);
}

/* Financial Documents Section — Premium Glass */
.reports-financial-docs {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  border-radius: var(--r-lg);
  padding: 32px;
  margin-top: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.2),
    0 12px 40px rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}
/* Ambient glow behind section */
.reports-financial-docs::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200,160,76,.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.reports-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 8px;
  text-shadow: 0 0 30px rgba(200,160,76,.06);
}
.reports-section-title svg {
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(200,160,76,.3));
}
.reports-section-subtitle {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 28px;
}
.reports-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.reports-doc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%);
  border-radius: var(--r);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.15);
  transition: all .28s var(--spring);
}
.reports-doc-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.025) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 6px 24px rgba(0,0,0,.2),
    0 0 30px rgba(200,160,76,.04);
  transform: translateY(-3px) scale(1.005);
}
.reports-doc-card-full {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(200,160,76,.08) 0%, rgba(200,160,76,.025) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 4px 16px rgba(0,0,0,.18),
    0 0 40px rgba(200,160,76,.04);
}
.reports-doc-card-full:hover {
  background: linear-gradient(135deg, rgba(200,160,76,.12) 0%, rgba(200,160,76,.04) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.25),
    0 8px 32px rgba(0,0,0,.25),
    0 0 60px rgba(200,160,76,.08);
  transform: translateY(-4px) scale(1.008);
}
.reports-doc-icon {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  color: var(--ink-2);
  transition: all .25s var(--spring);
}
.reports-doc-card:hover .reports-doc-icon {
  color: var(--ink);
}
.reports-doc-icon-gold {
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.06) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.2),
    0 0 20px rgba(200,160,76,.1);
  color: var(--gold);
}
.reports-doc-icon-gold svg {
  filter: drop-shadow(0 0 6px rgba(200,160,76,.4));
}
.reports-doc-info {
  flex: 1;
  min-width: 0;
}
.reports-doc-info h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 5px;
}
.reports-doc-info p {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.45;
}
/* Generate button — golden glow */
.reports-doc-card .btn,
.reports-doc-card .btn-ghost {
  flex-shrink: 0;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--void);
  border: none;
  border-radius: var(--r-sm);
  box-shadow:
    0 2px 10px rgba(200,160,76,.25),
    0 0 20px rgba(200,160,76,.08),
    inset 0 1px 0 rgba(255,255,255,.2);
  cursor: pointer;
  transition: all .22s var(--spring);
}
.reports-doc-card .btn:hover,
.reports-doc-card .btn-ghost:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 4px 20px rgba(200,160,76,.35),
    0 0 40px rgba(200,160,76,.12),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.reports-doc-card .btn:active,
.reports-doc-card .btn-ghost:active {
  transform: scale(.97);
}

/* Light mode financial docs */
html.light .reports-financial-docs {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 16px rgba(0,0,0,.08);
}
html.light .reports-financial-docs::before {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(150,117,10,.05) 0%, transparent 70%);
}
html.light .reports-doc-card {
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.5) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
}
html.light .reports-doc-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.15),
    0 6px 20px rgba(0,0,0,.1);
}
html.light .reports-doc-card-full {
  background: linear-gradient(135deg, rgba(150,117,10,.08) 0%, rgba(150,117,10,.02) 100%);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.15);
}
html.light .reports-doc-icon {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .reports-doc-icon-gold {
  background: linear-gradient(135deg, rgba(150,117,10,.12) 0%, rgba(150,117,10,.05) 100%);
}
html.light .reports-doc-card .btn,
html.light .reports-doc-card .btn-ghost {
  background: linear-gradient(135deg, #A07830 0%, #96750A 100%);
  box-shadow: 0 2px 10px rgba(150,117,10,.2);
}

/* Empty State */
.reports-empty-state {
  text-align: center;
  padding: 48px 24px;
  animation: rpt-empty-in .5s cubic-bezier(.16,1,.3,1) both;
}

@keyframes rpt-empty-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

.reports-empty-illustration {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200,160,76,.08) 0%, transparent 70%);
}
.reports-empty-illustration svg {
  width: 64px;
  height: 64px;
  color: var(--gold);
  opacity: .7;
}

.reports-empty-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reports-empty-icon svg {
  width: 64px;
  height: 64px;
}

.reports-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.reports-empty-text {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 320px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

.reports-empty-desc {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 300px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

.reports-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--void);
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1);
  transition: all .22s var(--spring);
}
.reports-empty-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15);
}

/* singleview4: ~95 lines of `.reports-simple-container` responsive grid
   layout deleted. The simple-mode reports container was hidden by
   single-view CSS in singleview3, and the reports_simple.js module
   (1551 lines) that populated it was deleted in singleview4. The
   element no longer exists; styling it was dead. */

/* Loading Skeleton */
.reports-skeleton-card {
  background: linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.02) 100%);
  background-size: 200% 100%;
  animation: rpt-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-lg);
  height: 120px;
}

@keyframes rpt-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* singleview4: `.reports-simple-container` mobile responsive block
   removed (container no longer exists). The hero/illustration/chart
   responsive rules below would only fire inside that container. */

/* ═══════════════════════════════════════════════════════════════════
   POS CHECKOUT MODAL — Tesla/iOS Grade (Glass Theme Section 9)
   Full premium modal: RGB orbs, shell parallax, spring in, fast out
   ═══════════════════════════════════════════════════════════════════ */

/* Shell parallax — scales down background when modal opens */
.dashboard-shell.pos-mdl-on {
  transform: scale(.96) !important;
  filter: brightness(.7) !important;
  transition: all .4s cubic-bezier(.16, 1, .3, 1) !important;
}
.dashboard-shell.pos-mdl-off {
  transform: scale(1) !important;
  filter: brightness(1) !important;
  transition: all .25s ease-out !important;
}

/* Body scroll lock when modal open */
body.pos-modal-open {
  overflow: hidden !important;
}

/* Backdrop — MUST be position: fixed to stay in viewport */
#pos-checkout-modal,
.pos-modal-backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(6,6,8,.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow-y: auto !important;
}

#pos-checkout-modal.show,
.pos-modal-backdrop.show {
  display: flex !important;
  animation: pos-modal-bdrop-in .4s ease forwards !important;
}

/* Closing state — fast exit (iOS pattern: exit faster than entrance) */
#pos-checkout-modal.closing,
.pos-modal-backdrop.closing {
  display: flex !important;
  animation: pos-modal-bdrop-out .2s ease forwards !important;
}
#pos-checkout-modal.closing > .pos-modal,
.pos-modal-backdrop.closing > .pos-modal {
  animation: pos-modal-spring-out .2s ease forwards !important;
}

/* Modal panel — glass surface with spring entrance */
#pos-checkout-modal > .pos-modal,
.pos-modal-backdrop > .pos-modal {
  position: relative !important;
  background: linear-gradient(180deg, var(--floating, #22222C) 0%, var(--elevated, #1A1A22) 100%) !important;
  border-radius: var(--r-xl, 26px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5),
    0 40px 80px rgba(0,0,0,.3),
    0 0 60px rgba(200,160,76,.04) !important;
  max-width: 520px !important;
  width: 100% !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  padding: 24px !important;
  animation: pos-modal-spring-in .55s cubic-bezier(.34, 1.4, .64, 1) forwards !important;
}

/* Modal header */
#pos-checkout-modal .pos-modal-header,
.pos-modal-backdrop .pos-modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  gap: 16px !important;
}

#pos-checkout-modal .pos-modal-title,
.pos-modal-backdrop .pos-modal-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #F0F0F4) !important;
  text-shadow: 0 0 30px rgba(200,160,76,.06) !important;
}

/* Checkout breakdown */
#pos-checkout-modal .pos-checkout-breakdown {
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r-lg, 20px) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

#pos-checkout-modal .pos-checkout-total-amount {
  font-size: 36px !important;
  font-weight: 200 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink, #F0F0F4) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.5), 0 0 40px rgba(200,160,76,.04) !important;
}

#pos-checkout-modal .pos-checkout-items {
  margin-top: 16px !important;
  max-height: 160px !important;
  overflow-y: auto !important;
}

#pos-checkout-modal .pos-checkout-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  font-size: 13px !important;
}

#pos-checkout-modal .pos-checkout-item:last-child {
  border-bottom: none !important;
}

/* ─────────────────────────────────────────────────────
   CHECKOUT MODAL — REDESIGNED INTERIOR (Glass Theme)
   Clean, minimal, Tesla-grade payment selection
   ───────────────────────────────────────────────────── */

/* Header redesign — title left, X button right */
#pos-checkout-modal .pos-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
}

#pos-checkout-modal .pos-modal-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink, #F0F0F4) !important;
  margin: 0 !important;
}

/* Close button — glass ghost circle with X */
#pos-checkout-modal .pos-close-btn {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.05) !important;
  border: none !important;
  border-radius: 50% !important;
  color: var(--ink-2, #9898A8) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
#pos-checkout-modal .pos-close-btn:hover {
  background: rgba(255,255,255,.1) !important;
  color: var(--ink, #F0F0F4) !important;
  transform: scale(1.05) !important;
}
#pos-checkout-modal .pos-close-btn:active {
  transform: scale(.95) !important;
}

/* Total label — uppercase micro */
#pos-checkout-modal .pos-checkout-total-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #6A6A7A) !important;
  margin-bottom: 4px !important;
}

/* Summary line — subtle, below items */
#pos-checkout-modal .pos-checkout-summary-line {
  font-size: 11px !important;
  color: var(--ink-3, #6A6A7A) !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
#pos-checkout-modal .pos-checkout-summary-line:empty {
  display: none !important;
}

/* ─────────────────────────────────────────────────────
   TIP SECTION — Cleaner, minimal
   ───────────────────────────────────────────────────── */
#pos-checkout-modal .pos-tip-wrap {
  background: rgba(255,255,255,.02) !important;
  border-radius: var(--r, 14px) !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

#pos-checkout-modal .pos-tip-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

#pos-checkout-modal .pos-tip-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2, #9898A8) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

#pos-checkout-modal .pos-tip-amount {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--gold, #C8A04C) !important;
  font-variant-numeric: tabular-nums !important;
}

#pos-checkout-modal .pos-tip-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

#pos-checkout-modal .pos-tip-chips {
  display: flex !important;
  gap: 6px !important;
  flex: 1 !important;
}

#pos-checkout-modal .pos-tip-chip {
  flex: 1 !important;
  padding: 10px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ink-2, #9898A8) !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: var(--r-sm, 10px) !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
#pos-checkout-modal .pos-tip-chip:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink, #F0F0F4) !important;
}
#pos-checkout-modal .pos-tip-chip.active,
#pos-checkout-modal .pos-tip-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(200,160,76,.15), rgba(200,160,76,.08)) !important;
  color: var(--gold, #C8A04C) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 12px rgba(200,160,76,.1) !important;
}

#pos-checkout-modal .pos-tip-custom {
  width: 80px !important;
}
#pos-checkout-modal .pos-tip-custom input {
  width: 100% !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink, #F0F0F4) !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: var(--r-sm, 10px) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  text-align: center !important;
}
#pos-checkout-modal .pos-tip-custom input::placeholder {
  color: var(--ink-3, #6A6A7A) !important;
}
#pos-checkout-modal .pos-tip-custom input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* ─────────────────────────────────────────────────────
   PAYMENT OPTIONS — Large glass cards with icons
   ───────────────────────────────────────────────────── */
#pos-checkout-modal .pos-pay-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

#pos-checkout-modal .pos-pay-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border: none !important;
  border-radius: var(--r-lg, 20px) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16, 1, .3, 1) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.2) !important;
}
#pos-checkout-modal .pos-pay-option:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.3) !important;
}
#pos-checkout-modal .pos-pay-option:active {
  transform: scale(.97) !important;
}

/* Primary payment option (Cash) — golden accent */
#pos-checkout-modal .pos-pay-primary {
  background: linear-gradient(135deg, rgba(200,160,76,.12) 0%, rgba(200,160,76,.05) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 12px rgba(200,160,76,.1) !important;
}
#pos-checkout-modal .pos-pay-primary:hover {
  background: linear-gradient(135deg, rgba(200,160,76,.18) 0%, rgba(200,160,76,.08) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.25), 0 8px 32px rgba(200,160,76,.15), 0 0 40px rgba(200,160,76,.08) !important;
}
#pos-checkout-modal .pos-pay-primary .pos-pay-icon {
  color: var(--gold, #C8A04C) !important;
}
#pos-checkout-modal .pos-pay-primary .pos-pay-label {
  color: var(--gold-bright, #D4B060) !important;
}

#pos-checkout-modal .pos-pay-icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--ink-2, #9898A8) !important;
  transition: all .2s ease !important;
}
#pos-checkout-modal .pos-pay-option:hover .pos-pay-icon {
  color: var(--ink, #F0F0F4) !important;
  transform: scale(1.1) !important;
}

#pos-checkout-modal .pos-pay-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ink, #F0F0F4) !important;
  letter-spacing: -0.01em !important;
}

/* ─────────────────────────────────────────────────────
   ALTERNATIVE PAYMENTS — Small pills row
   ───────────────────────────────────────────────────── */
#pos-checkout-modal .pos-pay-more {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

#pos-checkout-modal .pos-pay-alt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-2, #9898A8) !important;
  background: rgba(255,255,255,.03) !important;
  border: none !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.16, 1, .3, 1) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
#pos-checkout-modal .pos-pay-alt:hover {
  background: rgba(255,255,255,.07) !important;
  color: var(--ink, #F0F0F4) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.2) !important;
}
#pos-checkout-modal .pos-pay-alt:active {
  transform: scale(.96) !important;
}
#pos-checkout-modal .pos-pay-alt:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

#pos-checkout-modal .pos-pay-alt svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ─────────────────────────────────────────────────────
   ERROR BOX — Glass style
   ───────────────────────────────────────────────────── */
#pos-checkout-modal .pos-checkout-error {
  background: rgba(248,113,113,.08) !important;
  color: var(--red, #F87171) !important;
  padding: 12px 16px !important;
  border-radius: var(--r-sm, 10px) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
  margin-top: 12px !important;
}
#pos-checkout-modal .pos-checkout-error.hidden {
  display: none !important;
}

/* Spring entrance animation */
@keyframes pos-modal-spring-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Backdrop blur-in animation */
@keyframes pos-modal-bdrop-in {
  from {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: transparent;
  }
  to {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(6,6,8,.65);
  }
}

/* Backdrop blur-out animation (fast exit) */
@keyframes pos-modal-bdrop-out {
  from {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(6,6,8,.65);
    opacity: 1;
  }
  to {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: transparent;
    opacity: 0;
  }
}

/* Spring exit animation (fast) */
@keyframes pos-modal-spring-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(.97);
  }
}

/* RGB orb floating keyframes */
@keyframes pos-orb-gold { 0%,100%{transform:translate(0,0)} 25%{transform:translate(30%,-20%)} 50%{transform:translate(-20%,30%)} 75%{transform:translate(25%,15%)} }
@keyframes pos-orb-blue { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-25%,25%)} 50%{transform:translate(30%,-15%)} 75%{transform:translate(-15%,-25%)} }
@keyframes pos-orb-green { 0%,100%{transform:translate(0,0)} 25%{transform:translate(20%,30%)} 50%{transform:translate(-30%,-10%)} 75%{transform:translate(10%,-30%)} }

/* RGB ambient orbs — floating colored lights behind modal */
.pos-checkout-orb {
  position: absolute !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .6s ease !important;
  z-index: 0 !important;
  will-change: transform, opacity !important;
}
#pos-checkout-modal.show .pos-checkout-orb {
  opacity: 1 !important;
}
#pos-checkout-modal.closing .pos-checkout-orb {
  opacity: 0 !important;
  transition: opacity .15s ease !important;
}

/* Gold orb — top-left */
.pos-checkout-orb-gold {
  top: 10% !important;
  left: 15% !important;
  background: radial-gradient(circle, rgba(200,160,76,.15), transparent 70%) !important;
  animation: pos-orb-gold 10s ease-in-out infinite !important;
}

/* Blue orb — bottom-right */
.pos-checkout-orb-blue {
  bottom: 15% !important;
  right: 10% !important;
  background: radial-gradient(circle, rgba(96,165,250,.12), transparent 70%) !important;
  animation: pos-orb-blue 12s ease-in-out infinite !important;
}

/* Green orb — center */
.pos-checkout-orb-green {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(74,222,128,.1), transparent 70%) !important;
  animation: pos-orb-green 14s ease-in-out infinite !important;
}

/* Light mode adjustments */
html[data-theme="light"] #pos-checkout-modal > .pos-modal,
html.light #pos-checkout-modal > .pos-modal {
  background: var(--raised, #FFFFFF) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.12),
    0 40px 80px rgba(0,0,0,.08) !important;
}

html[data-theme="light"] #pos-checkout-modal,
html.light #pos-checkout-modal {
  background: rgba(250,250,248,.7) !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  #pos-checkout-modal > .pos-modal,
  .pos-modal-backdrop > .pos-modal {
    max-width: 100% !important;
    margin: 16px !important;
    padding: 20px !important;
    max-height: 90vh !important;
  }

  #pos-checkout-modal .pos-pay-grid {
    grid-template-columns: 1fr !important;
  }

  #pos-checkout-modal .pos-checkout-total-amount {
    font-size: 28px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   BILLING MODALS — FULL PREMIUM SYSTEM
   Features: RGB orbs, shell parallax, backdrop blur, spring entrance,
   golden glow, content stagger — matches history/POS modal specs
   Applies to: braintree-checkout-modal, settings-plan-change-modal,
   settings-cancel-flow-modal, settings-upgrade-modal
   ══════════════════════════════════════════════════════════════════════════ */

/* Shell parallax when billing modal is open */
.dashboard-shell.billing-mdl-on {
  transform: scale(.96) !important;
  filter: brightness(.7) !important;
  transition: all .45s cubic-bezier(.16, 1, .3, 1) !important;
  overflow: hidden !important;
}
.dashboard-shell.billing-mdl-off {
  transform: scale(1) !important;
  filter: brightness(1) !important;
  transition: all .22s cubic-bezier(.16, 1, .3, 1) !important;
}
body.billing-modal-open {
  overflow: hidden !important;
}

/* Base state for all billing modals — fixed viewport centering */
#braintree-checkout-modal,
#settings-plan-change-modal,
#settings-cancel-flow-modal,
#settings-upgrade-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: hidden !important;
}
/* Hidden state — NO !important so animation can override */
#braintree-checkout-modal:not(.show),
#settings-plan-change-modal:not(.show),
#settings-cancel-flow-modal:not(.show),
#settings-upgrade-modal:not(.show) {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  visibility: hidden;
  pointer-events: none;
}

/* When visible/show — animate backdrop blur-in */
#braintree-checkout-modal.show,
#settings-plan-change-modal.show,
#settings-cancel-flow-modal.show,
#settings-upgrade-modal.show {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: billing-bdrop-in .45s cubic-bezier(.2,.8,.2,1) forwards !important;
}

/* RGB AMBIENT ORBS — gold (::before), blue (::after), green (.billing-rgb-orb) */
#braintree-checkout-modal::before,
#braintree-checkout-modal::after,
#settings-plan-change-modal::before,
#settings-plan-change-modal::after,
#settings-cancel-flow-modal::before,
#settings-cancel-flow-modal::after,
#settings-upgrade-modal::before,
#settings-upgrade-modal::after,
.billing-rgb-orb {
  content: '';
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .6s ease !important;
  will-change: transform !important;
  z-index: 0 !important;
}

/* Show orbs when modal is open */
#braintree-checkout-modal.show::before,
#braintree-checkout-modal.show::after,
#settings-plan-change-modal.show::before,
#settings-plan-change-modal.show::after,
#settings-cancel-flow-modal.show::before,
#settings-cancel-flow-modal.show::after,
#settings-upgrade-modal.show::before,
#settings-upgrade-modal.show::after,
.billing-rgb-orb.show {
  opacity: 1 !important;
}

/* Gold orb — top-left */
#braintree-checkout-modal::before,
#settings-plan-change-modal::before,
#settings-cancel-flow-modal::before,
#settings-upgrade-modal::before {
  width: 500px !important; height: 500px !important;
  top: 10% !important; left: 15% !important;
  background: radial-gradient(circle, rgba(200,160,76,.12), transparent 70%) !important;
  animation: billing-orb1 10s ease-in-out infinite !important;
}

/* Blue orb — bottom-right */
#braintree-checkout-modal::after,
#settings-plan-change-modal::after,
#settings-cancel-flow-modal::after,
#settings-upgrade-modal::after {
  width: 450px !important; height: 450px !important;
  bottom: 10% !important; right: 15% !important;
  background: radial-gradient(circle, rgba(96,165,250,.08), transparent 70%) !important;
  animation: billing-orb2 12s ease-in-out infinite !important;
}

/* Green orb — center (injected via JS as .billing-rgb-orb) */
.billing-rgb-orb {
  width: 400px !important; height: 400px !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: radial-gradient(circle, rgba(74,222,128,.06), transparent 70%) !important;
  animation: billing-orb3 14s ease-in-out infinite !important;
  z-index: 0 !important;
}

/* Modal panel — premium glass card */
#braintree-checkout-modal > .modal-card,
#settings-plan-change-modal > .modal-card,
#settings-cancel-flow-modal > .modal-card,
#settings-upgrade-modal > .modal-card {
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, var(--floating, #22222C), var(--elevated, #1A1A22)) !important;
  border-radius: var(--r-xl, 26px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 12px 40px rgba(0,0,0,.5),
    0 40px 100px rgba(0,0,0,.35) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
}
/* Base hidden state — NO !important so animation can override */
#braintree-checkout-modal:not(.show) > .modal-card,
#settings-plan-change-modal:not(.show) > .modal-card,
#settings-cancel-flow-modal:not(.show) > .modal-card,
#settings-upgrade-modal:not(.show) > .modal-card {
  transform: translateY(24px) scale(.96);
  opacity: 0;
  filter: blur(4px);
}

/* Spring entrance with overshoot bounce + golden glow pulse */
#braintree-checkout-modal.show > .modal-card,
#settings-plan-change-modal.show > .modal-card,
#settings-cancel-flow-modal.show > .modal-card,
#settings-upgrade-modal.show > .modal-card {
  animation:
    billing-mdl-in .55s cubic-bezier(.34, 1.4, .64, 1) forwards,
    billing-mdl-glow .8s ease .4s forwards !important;
}

/* Content stagger animation — header/body/footer appear sequentially */
#braintree-checkout-modal.show .modal-head,
#settings-plan-change-modal.show .modal-head,
#settings-cancel-flow-modal.show .modal-head,
#settings-upgrade-modal.show .modal-head {
  opacity: 0;
  animation: billing-stagger .4s cubic-bezier(.2,.8,.2,1) .08s forwards !important;
}
#braintree-checkout-modal.show .modal-body,
#settings-plan-change-modal.show .modal-body,
#settings-cancel-flow-modal.show .modal-body,
#settings-upgrade-modal.show .modal-body {
  opacity: 0;
  animation: billing-stagger .35s cubic-bezier(.2,.8,.2,1) .16s forwards !important;
}
#braintree-checkout-modal.show .modal-actions,
#settings-plan-change-modal.show .modal-actions,
#settings-cancel-flow-modal.show .modal-actions,
#settings-upgrade-modal.show .modal-actions {
  opacity: 0;
  animation: billing-stagger .35s cubic-bezier(.2,.8,.2,1) .24s forwards !important;
}

/* Modal header — premium style */
#braintree-checkout-modal .modal-head,
#settings-plan-change-modal .modal-head,
#settings-cancel-flow-modal .modal-head,
#settings-upgrade-modal .modal-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

#braintree-checkout-modal .modal-title,
#settings-plan-change-modal .modal-title,
#settings-cancel-flow-modal .modal-title,
#settings-upgrade-modal .modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink, #F0F0F4) !important;
  letter-spacing: -.02em !important;
}

/* Modal body */
#braintree-checkout-modal .modal-body,
#settings-plan-change-modal .modal-body,
#settings-cancel-flow-modal .modal-body,
#settings-upgrade-modal .modal-body {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  max-height: calc(80vh - 160px) !important;
}

/* Close button — premium circular X */
#braintree-checkout-modal .modal-head .btn,
#braintree-checkout-modal #braintree-checkout-cancel-x {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.04) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  color: var(--ink-3, #6A6A7A) !important;
  font-size: 16px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}
#braintree-checkout-modal .modal-head .btn:hover,
#braintree-checkout-modal #braintree-checkout-cancel-x:hover {
  background: rgba(248,113,113,.1) !important;
  color: var(--red, #F87171) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}

/* Hint text styling */
#braintree-checkout-modal .hint,
#settings-plan-change-modal .hint,
#settings-cancel-flow-modal .hint,
#settings-upgrade-modal .hint {
  font-size: 12px !important;
  color: var(--ink-3, #6A6A7A) !important;
  line-height: 1.5 !important;
}

/* Modal action buttons — premium style */
#braintree-checkout-modal .modal-actions,
#settings-plan-change-modal .modal-actions,
#settings-cancel-flow-modal .modal-actions,
#settings-upgrade-modal .modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* Primary button — golden glow */
#braintree-checkout-modal .btn-primary,
#settings-plan-change-modal .btn-primary,
#settings-cancel-flow-modal .btn-primary,
#settings-upgrade-modal .btn-primary {
  background: linear-gradient(135deg, var(--gold-bright, #D4B060), var(--gold, #C8A04C)) !important;
  color: var(--void, #060608) !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 30px rgba(200,160,76,.1), inset 0 1px 0 rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16, 1, .3, 1) !important;
}
#braintree-checkout-modal .btn-primary:hover,
#settings-plan-change-modal .btn-primary:hover,
#settings-cancel-flow-modal .btn-primary:hover,
#settings-upgrade-modal .btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 28px rgba(200,160,76,.4), 0 0 60px rgba(200,160,76,.15), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* Secondary/ghost button */
#braintree-checkout-modal .btn-secondary,
#settings-plan-change-modal .btn-secondary,
#settings-cancel-flow-modal .btn-secondary,
#settings-upgrade-modal .btn-secondary {
  background: rgba(255,255,255,.05) !important;
  color: var(--ink, #F0F0F4) !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2) !important;
  cursor: pointer !important;
  transition: all .22s cubic-bezier(.16, 1, .3, 1) !important;
}
#braintree-checkout-modal .btn-secondary:hover,
#settings-plan-change-modal .btn-secondary:hover,
#settings-cancel-flow-modal .btn-secondary:hover,
#settings-upgrade-modal .btn-secondary:hover {
  background: rgba(255,255,255,.09) !important;
  transform: translateY(-1px) scale(1.01) !important;
}

/* Keyframes for billing modals */
@keyframes billing-bdrop-in {
  from { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); background: rgba(0,0,0,0); }
  to { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(0,0,0,.5); }
}
@keyframes billing-mdl-in {
  from { transform: translateY(24px) scale(.96); opacity: 0; filter: blur(4px); }
  to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes billing-mdl-glow {
  0% { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 1px rgba(200,160,76,.12), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35), 0 0 80px rgba(200,160,76,.08); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.5), 0 40px 100px rgba(0,0,0,.35); }
}
@keyframes billing-stagger {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes billing-orb1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(30%,-20%)} 50%{transform:translate(-20%,30%)} 75%{transform:translate(25%,15%)} }
@keyframes billing-orb2 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-25%,25%)} 50%{transform:translate(30%,-15%)} 75%{transform:translate(-15%,-25%)} }
@keyframes billing-orb3 { 0%,50%,100%{transform:translate(-50%,-50%)} 25%{transform:translate(-30%,-20%)} 75%{transform:translate(-70%,-80%)} }

/* Light mode adjustments */
html[data-theme="light"] #braintree-checkout-modal > .modal-card,
html[data-theme="light"] #settings-plan-change-modal > .modal-card,
html[data-theme="light"] #settings-cancel-flow-modal > .modal-card,
html[data-theme="light"] #settings-upgrade-modal > .modal-card,
html.light #braintree-checkout-modal > .modal-card,
html.light #settings-plan-change-modal > .modal-card,
html.light #settings-cancel-flow-modal > .modal-card,
html.light #settings-upgrade-modal > .modal-card {
  background: var(--raised, #FFFFFF) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.12),
    0 40px 80px rgba(0,0,0,.08) !important;
}

html[data-theme="light"] #braintree-checkout-modal .modal-head,
html[data-theme="light"] #settings-plan-change-modal .modal-head,
html[data-theme="light"] #settings-cancel-flow-modal .modal-head,
html[data-theme="light"] #settings-upgrade-modal .modal-head,
html.light #braintree-checkout-modal .modal-head,
html.light #settings-plan-change-modal .modal-head,
html.light #settings-cancel-flow-modal .modal-head,
html.light #settings-upgrade-modal .modal-head {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  #braintree-checkout-modal > .modal-card,
  #settings-plan-change-modal > .modal-card,
  #settings-cancel-flow-modal > .modal-card,
  #settings-upgrade-modal > .modal-card {
    max-width: 100% !important;
    border-radius: var(--r-lg, 20px) !important;
  }

  #braintree-checkout-modal .modal-body,
  #settings-plan-change-modal .modal-body,
  #settings-cancel-flow-modal .modal-body,
  #settings-upgrade-modal .modal-body {
    max-height: calc(70vh - 120px) !important;
  }
}

/* =========================================================================
   Accounting Panel — Glass Theme
   ========================================================================= */

/* Not-enabled hero card */
.acct-hero-card {
  padding: 48px 36px;
  border-radius: var(--r-xl, 26px);
  background: linear-gradient(180deg, rgba(200,160,76,.04), rgba(20,20,26,.72));
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.14),
    0 4px 16px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.3),
    0 0 80px rgba(200,160,76,.04);
  text-align: center;
  max-width: 680px;
  margin: 24px auto;
  position: relative;
  overflow: hidden;
}
.acct-hero-card::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  width: 520px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 60% at center, rgba(200,160,76,.08), transparent 70%);
  pointer-events: none;
}
.acct-hero-icon {
  margin: 0 auto 20px;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.04));
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.2),
    0 4px 20px rgba(200,160,76,.12);
  position: relative;
  z-index: 1;
}
.acct-hero-title {
  font-size: 24px;
  font-weight: 200;
  letter-spacing: -.025em;
  color: var(--ink, #F0F0F4);
  margin-bottom: 8px;
  position: relative; z-index: 1;
  text-shadow: 0 0 30px rgba(200,160,76,.08);
}
.acct-hero-sub {
  font-size: 14px;
  color: var(--ink-2, #9898A8);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 28px;
  position: relative; z-index: 1;
}
.acct-hero-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  max-width: 560px;
  margin: 0 auto 28px;
  text-align: left;
  position: relative; z-index: 1;
}
.acct-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2, #9898A8);
}
.acct-feature svg {
  width: 16px; height: 16px;
  color: var(--gold, #C8A04C);
  flex-shrink: 0;
}
.acct-enable-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.acct-enable-btn svg {
  width: 16px; height: 16px;
}
.acct-hero-note {
  font-size: 11px;
  color: var(--ink-3, #6A6A7A);
  position: relative; z-index: 1;
}

/* Enabled state — status strip */
.acct-status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  padding: 20px 24px;
  border-radius: var(--r-lg, 20px);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.2);
}
.acct-status-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct-status-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4, #42424F);
}
.acct-status-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #F0F0F4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.acct-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green, #4ADE80);
  animation: pulse-green 2.8s ease-in-out infinite;
}

/* CoA card */
.acct-coa-card {
  margin-bottom: 20px;
}
.acct-coa-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.acct-coa-head h3 {
  margin-bottom: 4px;
}
.acct-coa-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.acct-coa-loading,
.acct-coa-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3, #6A6A7A);
}
.acct-coa-group {
  display: flex;
  flex-direction: column;
}
.acct-coa-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4, #42424F);
  padding: 8px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.acct-coa-row {
  display: grid;
  grid-template-columns: 80px 1fr auto 32px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm, 10px);
  transition: background .18s var(--spring, cubic-bezier(.16,1,.3,1));
}
.acct-coa-row:hover {
  background: rgba(255,255,255,.02);
}
.acct-coa-code {
  font-family: 'SF Mono', Consolas, Monaco, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold, #C8A04C);
  letter-spacing: -.02em;
}
.acct-coa-name {
  font-size: 13px;
  color: var(--ink, #F0F0F4);
  display: flex;
  align-items: center;
  gap: 8px;
}
.acct-coa-sys {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  color: var(--ink-3, #6A6A7A);
}
.acct-coa-balance {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #F0F0F4);
  font-variant-numeric: tabular-nums;
}
.acct-coa-del {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink-3, #6A6A7A);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all .18s var(--spring);
}
.acct-coa-del:hover {
  background: rgba(248,113,113,.12);
  color: var(--red, #F87171);
}

/* ---------------------------------------------------------------------
   Accounting method toggle (Cash vs Accrual)
   Full-width card above the 2-column actions grid. The method is the
   fundamental reporting setting — underlying journal entries are unchanged,
   only report interpretation flips. Uses the segmented pill control from
   the Glass Theme (section 8.7) for the mode choice.
   --------------------------------------------------------------------- */
.acct-method-card {
  padding: 22px 24px;
  margin-bottom: 18px;
}
.acct-method-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.acct-method-heading h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 4px 0;
  color: var(--ink, #F0F0F4);
  text-shadow: 0 0 20px rgba(200,160,76,.04);
}
.acct-method-heading p.muted {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3, #6A6A7A);
  margin: 0;
  max-width: 540px;
}

/* Segmented pill control — mirrors Glass Theme section 8.7 */
.acct-method-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm, 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.acct-method-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  min-width: 140px;
  background: transparent;
  border: none;
  border-radius: calc(var(--r-sm, 10px) - 2px);
  color: var(--ink-2, #9898A8);
  cursor: pointer;
  transition: all .22s var(--spring, cubic-bezier(.16,1,.3,1));
  text-align: left;
}
.acct-method-opt:hover:not(.is-active) {
  background: rgba(255,255,255,.03);
  color: var(--ink, #F0F0F4);
}
.acct-method-opt.is-active {
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06));
  color: var(--gold, #C8A04C);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 2px 8px rgba(200,160,76,.1);
}
.acct-method-opt-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.acct-method-opt-sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-3, #6A6A7A);
  opacity: .9;
}
.acct-method-opt.is-active .acct-method-opt-sub {
  color: var(--gold, #C8A04C);
  opacity: .75;
}
.acct-method-opt:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(200,160,76,.12),
    inset 0 0 0 1px rgba(200,160,76,.2);
}

/* Footer row — status message + heal trigger */
.acct-method-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.acct-method-status {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3, #6A6A7A);
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-height: 18px;
  transition: color .2s ease;
}
.acct-method-status.is-busy {
  color: var(--amber, #FBBF24);
}
.acct-method-status.is-ok {
  color: var(--green, #4ADE80);
}
.acct-method-status.is-error {
  color: var(--red, #F87171);
}
#acct-method-heal {
  flex-shrink: 0;
}

/* Actions grid */
.acct-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.acct-action-card h3 {
  margin-bottom: 6px;
}
.acct-action-card p {
  margin-bottom: 14px;
}

/* Modal card (use existing premium modal system) */
.acct-modal-card {
  max-width: 720px;
  width: 90vw;
}

/* Opening Balance wizard form */
.acct-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
.acct-form-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold, #C8A04C);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200,160,76,.15);
}
.acct-field {
  margin-bottom: 12px;
}
.acct-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3, #6A6A7A);
  margin-bottom: 6px;
}
.acct-field .input {
  width: 100%;
}

/* Opening balance preview */
.acct-balance-preview {
  padding: 16px 20px;
  border-radius: var(--r, 14px);
  background: linear-gradient(180deg, rgba(200,160,76,.04), rgba(200,160,76,.015));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12);
}
.acct-balance-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink-2, #9898A8);
}
.acct-balance-row-hi {
  border-top: 1px solid rgba(200,160,76,.15);
  margin-top: 6px;
  padding-top: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--gold, #C8A04C);
}
.acct-balance-row span:last-child {
  font-variant-numeric: tabular-nums;
}

/* Rebuild progress bar */
.acct-rebuild-progress {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r, 14px);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.acct-rebuild-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 8px;
}
.acct-rebuild-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold, #C8A04C), var(--gold-bright, #D4B060));
  box-shadow: 0 0 12px rgba(200,160,76,.4);
  transition: width .4s var(--spring, cubic-bezier(.16,1,.3,1));
}
.acct-rebuild-counts {
  font-size: 11px;
  color: var(--ink-3, #6A6A7A);
  font-variant-numeric: tabular-nums;
}

/* Status message states */
.acct-status-error {
  color: var(--red, #F87171) !important;
}
.acct-status-ok {
  color: var(--green, #4ADE80) !important;
}

/* Accounting modals use the existing billing premium modal system.
   Register them so they get shell parallax, backdrop blur, RGB orbs. */
#acct-opening-modal,
#acct-add-modal,
#acct-rebuild-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: hidden !important;
}

#acct-opening-modal:not(.show),
#acct-add-modal:not(.show),
#acct-rebuild-modal:not(.show) {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  visibility: hidden;
  pointer-events: none;
}

#acct-opening-modal.show,
#acct-add-modal.show,
#acct-rebuild-modal.show {
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: bdrop-in .4s ease forwards;
}

#acct-opening-modal .modal-card,
#acct-add-modal .modal-card,
#acct-rebuild-modal .modal-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--floating, #22222C), var(--elevated, #1A1A22)) !important;
  border-radius: var(--r-xl, 26px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5),
    0 40px 80px rgba(0,0,0,.3),
    0 0 60px rgba(200,160,76,.04) !important;
}
/* Hidden base state — only applied while NOT .show so the spring animation
   has a clean field to animate into. Mirrors the billing-modal fix pattern. */
#acct-opening-modal:not(.show) .modal-card,
#acct-add-modal:not(.show) .modal-card,
#acct-rebuild-modal:not(.show) .modal-card {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  filter: blur(4px);
}
#acct-opening-modal.show .modal-card,
#acct-add-modal.show .modal-card,
#acct-rebuild-modal.show .modal-card {
  animation: modal-spring-in .55s cubic-bezier(.34, 1.4, .64, 1) forwards;
}

/* Responsive */
@media (max-width: 900px) {
  .acct-status-strip {
    grid-template-columns: 1fr 1fr;
  }
  .acct-form-grid,
  .acct-actions-grid,
  .acct-hero-features {
    grid-template-columns: 1fr;
  }
  .acct-coa-row {
    grid-template-columns: 64px 1fr auto;
  }
  .acct-coa-row .acct-coa-del {
    grid-column: 3;
  }
  /* Method toggle stacks on narrow screens */
  .acct-method-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .acct-method-switch {
    width: 100%;
  }
  .acct-method-opt {
    flex: 1;
    min-width: 0;
  }
  .acct-method-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Light mode */
html.light .acct-hero-card {
  background: linear-gradient(180deg, rgba(150,117,10,.03), rgba(255,255,255,.85));
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.14),
    0 4px 16px rgba(0,0,0,.06),
    0 16px 48px rgba(0,0,0,.08);
}
html.light .acct-status-strip {
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .acct-coa-group-label,
html.light .acct-status-label,
html.light .acct-field label {
  color: var(--ink-3, #A8A29E);
}

/* =========================================================================
   Financial Document Preview + Drill-Down Modals
   ========================================================================= */

/* Preview overlay — uses the same premium-modal pattern as billing */
#fin-doc-preview,
#fin-doc-drill,
#acct-delete-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1060 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow: hidden !important;
}
#fin-doc-preview:not(.show),
#fin-doc-drill:not(.show),
#acct-delete-modal:not(.show) {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  visibility: hidden;
  pointer-events: none;
}
#fin-doc-preview.show,
#fin-doc-drill.show,
#acct-delete-modal.show {
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: bdrop-in .4s ease forwards;
}
/* Drill-down sits on top of the preview */
#fin-doc-drill { z-index: 1070 !important; }

/* Preview / drill card — glass panel */
.fin-doc-card,
.fin-doc-drill-card,
#acct-delete-modal .modal-card {
  position: relative;
  z-index: 1;
  max-width: 920px;
  width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--floating, #22222C), var(--elevated, #1A1A22)) !important;
  border-radius: var(--r-xl, 26px) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.5),
    0 40px 80px rgba(0,0,0,.3),
    0 0 60px rgba(200,160,76,.04) !important;
  overflow: hidden;
}
.fin-doc-drill-card { max-width: 760px; }
#acct-delete-modal .modal-card { max-width: 480px; }

#fin-doc-preview:not(.show) .fin-doc-card,
#fin-doc-drill:not(.show) .fin-doc-drill-card,
#acct-delete-modal:not(.show) .modal-card {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  filter: blur(4px);
}
#fin-doc-preview.show .fin-doc-card,
#fin-doc-drill.show .fin-doc-drill-card,
#acct-delete-modal.show .modal-card {
  animation: modal-spring-in .55s cubic-bezier(.34, 1.4, .64, 1) forwards;
}

/* Shared head / actions */
.fin-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 20px;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.fin-doc-head-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink, #F0F0F4);
  margin-bottom: 4px;
  text-shadow: 0 0 30px rgba(200,160,76,.06);
}
.fin-doc-head-sub {
  font-size: 12px;
  color: var(--ink-2, #9898A8);
  margin-bottom: 2px;
}
.fin-doc-head-generated {
  font-size: 10.5px;
  color: var(--ink-4, #42424F);
}
.fin-doc-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* Reports page mode selector — compact segmented pill in the preview
   header. Uses the same Glass Theme golden-active pattern as Settings. */
.fin-doc-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm, 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  margin-right: 4px;
}
.fin-doc-mode-opt {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  background: transparent;
  border: none;
  border-radius: calc(var(--r-sm, 10px) - 3px);
  color: var(--ink-3, #6A6A7A);
  cursor: pointer;
  transition: all .18s var(--spring, cubic-bezier(.16,1,.3,1));
}
.fin-doc-mode-opt:hover:not(.is-active) {
  background: rgba(255,255,255,.03);
  color: var(--ink, #F0F0F4);
}
.fin-doc-mode-opt.is-active {
  background: linear-gradient(135deg, rgba(200,160,76,.14), rgba(200,160,76,.07));
  color: var(--gold, #C8A04C);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.18),
    0 1px 6px rgba(200,160,76,.12);
}
.fin-doc-mode-opt:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(200,160,76,.12),
    inset 0 0 0 1px rgba(200,160,76,.22);
}
.fin-doc-body {
  transition: opacity .2s ease;
}

/* Scrollable body */
.fin-doc-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
}

/* Statement sections */
.fin-doc-section { margin-bottom: 28px; }
.fin-doc-section h2 {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold, #C8A04C);
  margin-bottom: 12px;
}
.fin-doc-section h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, #6A6A7A);
  margin: 14px 0 6px;
  letter-spacing: .02em;
}
.fin-doc-section-header {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #F0F0F4);
  margin: 24px 0 12px;
  letter-spacing: -.02em;
}
.fin-doc-divider {
  height: 1px;
  background: rgba(255,255,255,.05);
  margin: 20px 0;
}

.fin-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.fin-doc-table td {
  padding: 9px 4px;
  font-size: 13px;
  color: var(--ink, #F0F0F4);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.fin-doc-table .fin-doc-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.fin-doc-table .fin-doc-subtotal td {
  border-top: 1px solid rgba(255,255,255,.1);
  font-weight: 600;
}
.fin-doc-table .fin-doc-total td {
  border-top: 1.5px solid rgba(200,160,76,.3);
  font-weight: 700;
  color: var(--gold, #C8A04C);
  padding-top: 12px;
  padding-bottom: 12px;
}
.fin-doc-table .fin-doc-big td { font-size: 15px; }
.fin-doc-table .fin-doc-metric td {
  color: var(--ink-3, #6A6A7A);
  font-size: 11.5px;
  font-style: italic;
}
.fin-doc-table .fin-doc-check td {
  font-size: 11px;
  color: var(--green, #4ADE80);
  border-top: 1px dashed rgba(74,222,128,.3);
  padding-top: 10px;
}
.fin-doc-table .fin-doc-check-err td {
  color: var(--red, #F87171);
  border-top-color: rgba(248,113,113,.3);
}

/*
 * Phase 14a — Trial Balance proof affordance + account-code chip.
 * Council iter1 Order #12: these classes were emitted by
 * buildTrialBalanceHtml in reports_ledger_integration.js but had no
 * CSS rules backing them. Without these the balanced/out-of-balance
 * footer rendered as identical generic text.
 */
.fin-doc-tb { font-variant-numeric: tabular-nums; }
.fin-doc-tb tfoot .fin-doc-total td {
  border-top: 2px solid rgba(200,160,76,.45);
}
.fin-doc-acct-code {
  display: inline-block;
  min-width: 48px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 12px;
  color: var(--ink-3, #6A6A7A);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.fin-doc-tb-proof {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fin-doc-tb-proof::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.fin-doc-tb-proof-ok {
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.25);
  color: var(--green, #4ADE80);
}
.fin-doc-tb-proof-ok::before { background: var(--green, #4ADE80); }
.fin-doc-tb-proof-bad {
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.30);
  color: var(--red, #F87171);
}
.fin-doc-tb-proof-bad::before { background: var(--red, #F87171); }
.fin-doc-tb-truncated {
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 8px;
  color: var(--amber, #F59E0B);
}
html.light .fin-doc-tb-proof-ok {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.25);
  color: rgb(22,127,69);
}
html.light .fin-doc-tb-proof-bad {
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.25);
  color: rgb(167,28,28);
}
html.light .fin-doc-tb-truncated {
  background: rgba(217,119,6,.10);
  border-color: rgba(217,119,6,.30);
  color: rgb(146,64,14);
}

.fin-doc-highlight {
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(200,160,76,.04);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.12);
}

/* Drill-down trigger rows */
.fin-doc-drill {
  cursor: pointer;
  transition: background .18s var(--spring, cubic-bezier(.16,1,.3,1));
}
.fin-doc-drill:hover,
.fin-doc-drill:focus {
  background: rgba(200,160,76,.06);
  outline: none;
}
.fin-doc-drill:focus { box-shadow: inset 0 0 0 1px rgba(200,160,76,.25); }
.fin-doc-drill-hint {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  color: var(--ink-4, #42424F);
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity .18s var(--spring, cubic-bezier(.16,1,.3,1));
}
.fin-doc-drill:hover .fin-doc-drill-hint,
.fin-doc-drill:focus .fin-doc-drill-hint {
  opacity: 1;
}

.fin-doc-note {
  font-size: 11px;
  color: var(--ink-3, #6A6A7A);
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  border-left: 2px solid rgba(200,160,76,.3);
  line-height: 1.55;
}

/* Executive summary grid */
.fin-doc-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.fin-doc-summary-card {
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fin-doc-summary-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4, #42424F);
  margin-bottom: 8px;
}
.fin-doc-summary-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #F0F0F4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.fin-doc-summary-change { font-size: 11px; margin-top: 4px; color: var(--ink-2, #9898A8); }
.fin-doc-summary-change.positive { color: var(--green, #4ADE80); }
.fin-doc-summary-change.negative { color: var(--red, #F87171); }

/* Drill-down body */
.fin-doc-drill-body { padding-top: 8px; }
.fin-doc-drill-loading,
.fin-doc-drill-empty {
  padding: 36px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3, #6A6A7A);
}
.fin-doc-drill-table {
  width: 100%;
  border-collapse: collapse;
}
.fin-doc-drill-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3, #6A6A7A);
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
}
.fin-doc-drill-table td {
  font-size: 12.5px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  color: var(--ink, #F0F0F4);
}
.fin-doc-drill-num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-doc-drill-running { font-weight: 600; color: var(--gold, #C8A04C); }
.fin-doc-drill-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(200,160,76,.08);
  color: var(--gold, #C8A04C);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15);
  vertical-align: middle;
}
.fin-doc-drill-footer {
  font-size: 11px;
  color: var(--ink-4, #42424F);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.05);
  text-align: center;
}

/* Delete-account confirmation modal body */
#acct-delete-modal .modal-body {
  padding: 20px 28px 24px;
}
.acct-delete-message {
  font-size: 14px;
  color: var(--ink, #F0F0F4);
  line-height: 1.6;
  margin-bottom: 10px;
}
.acct-delete-hint {
  font-size: 12px;
  color: var(--ink-3, #6A6A7A);
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(248,113,113,.04);
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.12);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .fin-doc-head { flex-direction: column; }
  .fin-doc-head-actions { width: 100%; flex-wrap: wrap; }
  .fin-doc-summary-grid { grid-template-columns: 1fr 1fr; }
  .fin-doc-mode-switch { margin-right: 0; order: -1; }
}
@media (max-width: 600px) {
  .fin-doc-summary-grid { grid-template-columns: 1fr; }
  .fin-doc-card, .fin-doc-drill-card { width: 100vw; max-height: 100vh; border-radius: 0 !important; }
  .fin-doc-drill-table th,
  .fin-doc-drill-table td { font-size: 11px; padding: 8px 4px; }
  .fin-doc-drill-hint { display: none; }
}

/* Light mode */
html.light .fin-doc-head,
html.light .fin-doc-table td { border-color: rgba(0,0,0,.05); }
html.light .fin-doc-section h2 { color: var(--gold, #96750A); }
html.light .fin-doc-drill-badge { background: rgba(150,117,10,.08); color: var(--gold, #96750A); }

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 8.1 — REVERSING ENTRIES (Glass Theme conform)

   Visual language:
     - Reversed ORIGINAL rows: amber tint background, strikethrough memo, inline "Reversed" pill
     - REVERSAL entry rows: amber "↻ Reversal" badge next to memo
     - Reverse ACTION column: ghost-style icon button for admins; ghost "Reversed" text for already-reversed; "—" for reversal entries themselves
     - Reverse MODAL: Glass card (section 9 pattern), treatment badges (8.8), golden submit
   ═══════════════════════════════════════════════════════════════════════════ */

/* Row tint for reversed originals */
.fin-doc-drill-table tbody tr.fin-doc-drill-row.is-reversed {
  background: linear-gradient(90deg, rgba(251,191,36,.04), rgba(251,191,36,.015));
  box-shadow: inset 3px 0 0 rgba(251,191,36,.35);
}
.fin-doc-drill-table tbody tr.fin-doc-drill-row.is-reversal {
  background: linear-gradient(90deg, rgba(200,160,76,.035), rgba(200,160,76,.01));
  box-shadow: inset 3px 0 0 rgba(200,160,76,.3);
}

/* Strikethrough on reversed memo content */
.fin-doc-drill-reversed-memo {
  text-decoration: line-through;
  text-decoration-color: rgba(251,191,36,.5);
  color: var(--ink-3, #6A6A7A);
}

/* "Reversed on DATE" tag */
.fin-doc-drill-reversed-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 20px;
  background: rgba(251,191,36,.12);
  color: var(--amber, #FBBF24);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.2);
  vertical-align: middle;
}

/* "↻ Reversal" badge */
.fin-doc-drill-rev-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  margin-left: 4px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(200,160,76,.16), rgba(200,160,76,.08));
  color: var(--gold, #C8A04C);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 10px rgba(200,160,76,.05);
  vertical-align: middle;
}
.fin-doc-drill-rev-link {
  font-size: 10px;
  color: var(--ink-4, #42424F);
  margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Action column (Reverse button column) */
.fin-doc-drill-table th.fin-doc-drill-action,
.fin-doc-drill-table td.fin-doc-drill-action {
  text-align: right;
  width: 120px;
  white-space: nowrap;
}

/* Reverse button — small ghost with gold hover */
.fin-doc-drill-reverse-btn {
  appearance: none;
  background: rgba(255,255,255,.04);
  color: var(--ink-2, #9898A8);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  cursor: pointer;
  transition: all .22s cubic-bezier(.16,1,.3,1);
}
.fin-doc-drill-reverse-btn:hover {
  background: rgba(200,160,76,.1);
  color: var(--gold-bright, #D4B060);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.3), 0 0 14px rgba(200,160,76,.1);
  transform: translateY(-1px);
}
.fin-doc-drill-reverse-btn:active {
  transform: scale(.97);
}
.fin-doc-drill-reverse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.15), inset 0 0 0 1px rgba(200,160,76,.3);
}

.fin-doc-drill-action-note {
  font-size: 10px;
  color: var(--ink-4, #42424F);
  font-style: italic;
  letter-spacing: .04em;
}

/* ────────── REVERSE CONFIRMATION MODAL ────────── */
.fin-doc-reverse-modal .fin-doc-reverse-card,
#fin-doc-reverse .modal-card {
  max-width: 560px;
  width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
}

.fin-doc-reverse-body {
  padding: 4px 2px 2px;
}
.fin-doc-reverse-loading,
.fin-doc-reverse-error {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3, #6A6A7A);
}
.fin-doc-reverse-error {
  color: var(--red, #F87171);
  background: rgba(248,113,113,.04);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15);
  margin: 4px 0 12px;
}

/* Summary block — key/value rows */
.fin-doc-reverse-summary {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0 16px;
}
.fin-doc-reverse-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(255,255,255,.04);
}
.fin-doc-reverse-summary-row:last-child { border-bottom: none; }
.fin-doc-reverse-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3, #6A6A7A);
}
.fin-doc-reverse-summary-value {
  color: var(--ink, #F0F0F4);
  text-align: right;
  max-width: 60%;
  word-break: break-word;
}
.fin-doc-reverse-treatment {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}
.fin-doc-reverse-treatment.treatment-immediate {
  background: rgba(74,222,128,.12);
  color: var(--green, #4ADE80);
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.2);
}
.fin-doc-reverse-treatment.treatment-deferred {
  background: rgba(96,165,250,.12);
  color: var(--blue, #60A5FA);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.2);
}
.fin-doc-reverse-treatment.treatment-exempt {
  background: rgba(154,154,168,.1);
  color: var(--ink-2, #9898A8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.fin-doc-reverse-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-4, #42424F);
  letter-spacing: .02em;
}

/* Inventory / PO warning callout */
.fin-doc-reverse-warning {
  font-size: 12px;
  color: var(--amber, #FBBF24);
  background: rgba(251,191,36,.05);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.2);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 4px 0 14px;
  line-height: 1.5;
}
.fin-doc-reverse-warning strong { font-weight: 700; }

/* Section groups */
.fin-doc-reverse-section {
  margin: 14px 0;
}
.fin-doc-reverse-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3, #6A6A7A);
  margin-bottom: 8px;
}
.fin-doc-reverse-table { margin-top: 4px; }
.fin-doc-reverse-table tfoot .fin-doc-total td {
  font-weight: 700;
  border-top: 2px solid rgba(200,160,76,.3);
  padding-top: 10px;
  color: var(--gold, #C8A04C);
}

/* Form fields */
.fin-doc-reverse-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3, #6A6A7A);
  margin-bottom: 6px;
}
.fin-doc-reverse-required { color: var(--red, #F87171); }
.fin-doc-reverse-textarea,
.fin-doc-reverse-date-input {
  width: 100%;
  background: rgba(255,255,255,.03);
  color: var(--ink, #F0F0F4);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: all .2s cubic-bezier(.16,1,.3,1);
  resize: vertical;
  min-height: 68px;
  color-scheme: dark;
}
.fin-doc-reverse-date-input { min-height: 0; height: 38px; }
.fin-doc-reverse-textarea:hover,
.fin-doc-reverse-date-input:hover {
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.fin-doc-reverse-textarea:focus,
.fin-doc-reverse-date-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.25);
}
.fin-doc-reverse-date-input::-webkit-calendar-picker-indicator {
  filter: invert(.7);
  opacity: .6;
  cursor: pointer;
}

/* Footer button row */
.fin-doc-reverse-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.fin-doc-reverse-footer .btn {
  min-width: 120px;
}

/* Lightweight toast fallback */
.fin-doc-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 2000;
  max-width: 380px;
  padding: 12px 18px;
  background: var(--elevated, #1A1A22);
  color: var(--ink, #F0F0F4);
  font-size: 13px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateX(24px);
  transition: all .35s cubic-bezier(.34,1.4,.64,1);
  pointer-events: none;
}
.fin-doc-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.fin-doc-toast.fin-doc-toast-success {
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.25), 0 8px 32px rgba(0,0,0,.4), 0 0 30px rgba(74,222,128,.08);
}
.fin-doc-toast.fin-doc-toast-error {
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.3), 0 8px 32px rgba(0,0,0,.4), 0 0 30px rgba(248,113,113,.08);
}

/* Light mode */
html.light .fin-doc-drill-table tbody tr.fin-doc-drill-row.is-reversed {
  background: linear-gradient(90deg, rgba(251,191,36,.08), rgba(251,191,36,.02));
  box-shadow: inset 3px 0 0 rgba(251,191,36,.5);
}
html.light .fin-doc-drill-reversed-tag {
  background: rgba(251,191,36,.15);
  color: #b77a06;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.35);
}
html.light .fin-doc-drill-rev-badge {
  background: rgba(150,117,10,.1);
  color: var(--gold, #96750A);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.25);
}
html.light .fin-doc-reverse-summary {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .fin-doc-reverse-textarea,
html.light .fin-doc-reverse-date-input {
  background: rgba(0,0,0,.02);
  color: var(--ink, #1C1917);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  color-scheme: light;
}
html.light .fin-doc-toast {
  background: #FFFFFF;
  color: var(--ink, #1C1917);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.15);
}

/* Responsive */
@media (max-width: 600px) {
  .fin-doc-drill-table th.fin-doc-drill-action,
  .fin-doc-drill-table td.fin-doc-drill-action {
    width: auto;
    min-width: 88px;
  }
  .fin-doc-drill-reverse-btn {
    padding: 6px 8px;
    font-size: 10px;
  }
  #fin-doc-reverse .modal-card {
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .fin-doc-reverse-summary-row {
    flex-direction: column;
    gap: 2px;
  }
  .fin-doc-reverse-summary-value {
    max-width: 100%;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 5.1 — POS SCANNER MODALS (Glass Theme conform)

   Both POS modals now use the canonical Session 4 Save-all modal pattern
   (.s4-modal / .s4-modal-backdrop / .s4-modal-panel / .s4-modal-head /
   .s4-modal-body / .s4-modal-foot, plus .prod-btn-ghost / .prod-btn-glow).
   The chrome lives in sfy_products_session4.css; this block only:
     1. Promotes the .s4-modal lifecycle selectors from ID-specific
        (#s4-saveall-modal.open ...) to class-based (.s4-modal.open ...)
        so any .s4-modal instance gets the same open/close behavior.
     2. Adds the content-specific styles for the qty input and barcode
        display (legitimately new — not duplicated anywhere else).
     3. Adds the cart-line flash animation.
   ~150 lines of duplicate modal chrome CSS were removed in Session 5.1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Generic .s4-modal base + lifecycle ──────────────────────────────────── */
.s4-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--spring);
}
.s4-modal.open { opacity: 1; pointer-events: auto; }
.s4-modal.open .s4-modal-backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
}
.s4-modal.open .s4-modal-panel {
  transform: translateY(0) scale(1);
  filter: blur(0);
  opacity: 1;
}

/* ─── Qty Entry Modal content (inside .s4-modal-body) ─────────────────────── */
.sfy-qty-product-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.sfy-qty-price-info {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.sfy-qty-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sfy-qty-input {
  flex: 1;
  padding: 14px 16px;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: none;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: var(--ink);
  transition: all .2s var(--spring);
}
.sfy-qty-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.14), inset 0 0 0 1px rgba(200,160,76,.25);
}
.sfy-qty-unit-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  min-width: 60px;
}
.sfy-qty-preview {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  min-height: 24px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(200,160,76,.2);
}

/* ─── Unknown Barcode Modal content (inside .s4-modal-body) ───────────────── */
.sfy-unknown-msg {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.sfy-unknown-barcode {
  font-size: 18px;
  font-weight: 700;
  font-family: monospace;
  color: var(--ink);
  padding: 14px 18px;
  background: rgba(255,255,255,.04);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  text-align: center;
  letter-spacing: .04em;
  word-break: break-all;
}

/* ─── Cart Line Flash Animation (on scan-to-add success) ─────────────────── */
@keyframes sfy-cart-flash-anim {
  0%   { background: rgba(200,160,76,.2); box-shadow: inset 0 0 0 1px rgba(200,160,76,.3); }
  50%  { background: rgba(200,160,76,.1); box-shadow: inset 0 0 0 1px rgba(200,160,76,.15); }
  100% { background: transparent; box-shadow: none; }
}
.sfy-cart-flash {
  animation: sfy-cart-flash-anim .6s ease-out forwards !important;
}

/* ─── Light Mode Overrides (content-specific only; s4-modal chrome
        already has its own light-mode treatment via CSS custom properties) */
html.light .sfy-qty-product-name,
html.light .sfy-unknown-barcode {
  color: var(--ink);
}
html.light .sfy-qty-input,
html.light .sfy-unknown-barcode {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
html.light .sfy-qty-input:focus {
  box-shadow: 0 0 0 3px rgba(150,117,10,.1), inset 0 0 0 1px rgba(150,117,10,.2);
}
html.light .sfy-qty-preview { color: var(--gold); }
html.light .sfy-cart-flash { animation-name: sfy-cart-flash-anim-light !important; }
@keyframes sfy-cart-flash-anim-light {
  0%   { background: rgba(150,117,10,.12); box-shadow: inset 0 0 0 1px rgba(150,117,10,.2); }
  50%  { background: rgba(150,117,10,.06); box-shadow: inset 0 0 0 1px rgba(150,117,10,.1); }
  100% { background: transparent; box-shadow: none; }
}

/* =====================================================================
   SESSION 8.2 — PERIOD CLOSE UI
   =====================================================================
   Period-Close card in the Accounting panel, plus 4 modals:
   close-period, year-end-close, reopen-period, and re-auth (override).
   Follows the Glass Theme dark-mode tokens already established above.
   ===================================================================== */

/* ---- Period card ---------------------------------------------------- */
.acct-period-card {
  padding: 22px 24px;
  margin-top: 18px;
  margin-bottom: 18px;
}
.acct-period-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.acct-period-heading h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 4px 0;
  color: var(--ink, #F0F0F4);
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 20px rgba(200,160,76,.04);
}
.acct-period-heading p.muted {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3, #6A6A7A);
  margin: 0;
  max-width: 640px;
}
.acct-period-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.acct-owner-only-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(200,160,76,.14), rgba(200,160,76,.06));
  color: var(--gold, #C8A04C);
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.18),
    0 0 10px rgba(200,160,76,.05);
}
.acct-period-body {
  border-top: 1px solid rgba(255,255,255,.04);
  padding-top: 14px;
}
.acct-period-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.acct-period-subhead-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold, #C8A04C);
}
.acct-closed-periods-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct-period-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm, 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: background .2s ease;
}
.acct-period-item:hover {
  background: rgba(255,255,255,.035);
}
.acct-period-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.acct-period-item-badge.is-soft {
  background: var(--amber-glow, rgba(251,191,36,.12));
  color: var(--amber, #FBBF24);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.18);
}
.acct-period-item-badge.is-hard {
  background: var(--red-glow, rgba(248,113,113,.12));
  color: var(--red, #F87171);
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18);
}
.acct-period-item-badge.is-reopened {
  background: rgba(96,165,250,.1);
  color: var(--blue, #60A5FA);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.acct-period-item-range {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #F0F0F4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.acct-period-item-range small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3, #6A6A7A);
  letter-spacing: 0;
  margin-top: 2px;
}
.acct-period-item-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3, #6A6A7A);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.acct-period-item-actions {
  display: flex;
  gap: 6px;
}
.acct-period-item-actions .btn-small {
  padding: 6px 12px;
  font-size: 11px;
}
.acct-period-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-3, #6A6A7A);
  font-size: 12px;
}

/* ---- Close-type picker (radio-as-card) ------------------------------ */
.acct-form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 0;
}
.acct-close-type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.acct-close-type-opt {
  position: relative;
  display: block;
  padding: 14px 14px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border-radius: var(--r-sm, 10px);
  cursor: pointer;
  transition: all .22s var(--spring, cubic-bezier(.16,1,.3,1));
}
.acct-close-type-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.acct-close-type-opt:hover {
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.acct-close-type-opt.is-active {
  background: linear-gradient(135deg, rgba(200,160,76,.14), rgba(200,160,76,.06));
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.22),
    0 2px 12px rgba(200,160,76,.1);
}
.acct-close-type-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink, #F0F0F4);
  margin-bottom: 4px;
}
.acct-close-type-opt.is-active .acct-close-type-title {
  color: var(--gold, #C8A04C);
}
.acct-close-type-sub {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-3, #6A6A7A);
}

/* ---- Year-end preview ----------------------------------------------- */
.acct-yearend-preview {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm, 10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.acct-yearend-preview-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold, #C8A04C);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200,160,76,.12);
}
.acct-yearend-preview-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--ink-2, #9898A8);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dashed rgba(255,255,255,.04);
}
.acct-yearend-preview-row:last-child {
  border-bottom: none;
}
.acct-yearend-preview-row.is-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(200,160,76,.2);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #C8A04C);
  border-bottom: none;
}
.acct-yearend-preview-row.is-net-income {
  font-weight: 700;
  color: var(--ink, #F0F0F4);
}

/* ---- Reopen modal hard-close warning -------------------------------- */
.acct-hard-warn {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--red-glow, rgba(248,113,113,.08));
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18);
  border-radius: var(--r-sm, 10px);
  font-size: 12px;
  line-height: 1.5;
  color: var(--red, #F87171);
}
.acct-hard-warn b {
  color: var(--red, #F87171);
  font-weight: 700;
}
.acct-readonly-value {
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border-radius: var(--r-sm, 10px);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2, #9898A8);
}

/* ---- Re-auth modal context ------------------------------------------ */
.acct-reauth-context {
  padding: 10px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(200,160,76,.1), rgba(200,160,76,.04));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.18);
  border-radius: var(--r-sm, 10px);
  font-size: 12px;
  color: var(--gold, #C8A04C);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---- Status row color states (reused from opening-balance modal) ---- */
/* Already styled via .hint; no new rules needed. */

/* ---- Reports — closed period badge (B.6) ---------------------------- */
.fin-doc-head-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 2px;
}
.reports-closed-period-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  line-height: 1.4;
}
.reports-closed-period-badge-range {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .85;
}
.reports-closed-period-badge.is-soft {
  background: var(--amber-glow, rgba(251,191,36,.12));
  color: var(--amber, #FBBF24);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.2);
}
.reports-closed-period-badge.is-hard {
  background: var(--red-glow, rgba(248,113,113,.12));
  color: var(--red, #F87171);
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.2);
}
.reports-closed-period-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: reports-closed-pulse 2.4s ease-in-out infinite;
}
@keyframes reports-closed-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.88); }
}

/* ---- Mobile responsive --------------------------------------------- */
@media (max-width: 720px) {
  .acct-period-head {
    grid-template-columns: 1fr;
  }
  .acct-period-actions {
    flex-wrap: wrap;
  }
  .acct-period-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .acct-period-item-meta {
    grid-column: 1 / -1;
    text-align: left;
  }
  .acct-period-item-actions {
    grid-column: 1 / -1;
  }
  .acct-close-type-switch,
  .acct-form-grid-2col {
    grid-template-columns: 1fr;
  }
}

/* ---- Light mode overrides ------------------------------------------- */
html.light .acct-period-item {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .acct-period-item:hover {
  background: rgba(0,0,0,.04);
}
html.light .acct-close-type-opt {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
html.light .acct-close-type-opt.is-active {
  background: linear-gradient(135deg, rgba(150,117,10,.14), rgba(150,117,10,.06));
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.22),
    0 2px 12px rgba(150,117,10,.1);
}
html.light .acct-yearend-preview {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .acct-readonly-value {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
  color: var(--ink-2);
}
html.light .acct-reauth-context {
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.04));
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.18);
  color: var(--gold);
}

/* ============================================================
   SESSION 9 — REPORTS TOP TABS + FINANCIALS TAB + NOTES
   ============================================================
   Glass-theme styling for the four top-level Reports sections
   ([Sales][Financials][Expenses][Staff]), the Financials tab
   orchestration shell, and statement notes UI.
*/

/* ---- Top-level Reports tab bar ---- */
.reports-top-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 20px 0;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.reports-top-tabs::-webkit-scrollbar { display: none; }

.reports-top-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .22s var(--spring);
  white-space: nowrap;
  min-height: 36px;
}
.reports-top-tab:hover:not(.is-active) {
  color: var(--ink);
  background: rgba(255,255,255,.04);
}
.reports-top-tab.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 2px 8px rgba(200,160,76,.1);
}
.reports-top-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2);
}

.reports-top-panel {
  display: none;
  animation: fin-panel-in .35s var(--spring);
}
.reports-top-panel.is-active {
  display: block;
}

@keyframes fin-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Placeholder panel (Expenses / Staff) */
.reports-top-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2);
  text-align: center;
}
.reports-top-placeholder-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.04));
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15), 0 0 30px rgba(200,160,76,.06);
}
.reports-top-placeholder-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink);
}
.reports-top-placeholder-text {
  font-size: 13px; color: var(--ink-3);
  max-width: 480px; line-height: 1.55;
}

/* ---- Financials tab — skeleton / header ---- */
.fin-tab-body {
  min-height: 320px;
  animation: fin-panel-in .35s var(--spring);
}

.fin-tab-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.fin-tab-subtabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fin-tab-subtab {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-2); font: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .22s var(--spring);
  min-height: 32px;
  white-space: nowrap;
}
.fin-tab-subtab:hover:not(.is-active) {
  color: var(--ink); background: rgba(255,255,255,.04);
}
.fin-tab-subtab.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(200,160,76,.12), rgba(200,160,76,.06));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15);
}
.fin-tab-subtab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2);
}

.fin-tab-period-pills {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fin-tab-period-pill {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-2); font: inherit;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer;
  transition: all .22s var(--spring);
  white-space: nowrap;
  min-height: 30px;
}
.fin-tab-period-pill:hover:not(.is-active) {
  color: var(--ink); background: rgba(255,255,255,.04);
}
.fin-tab-period-pill.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(200,160,76,.1), rgba(200,160,76,.04));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15);
}

.fin-tab-mode-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fin-tab-mode-opt {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-2); font: inherit;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer;
  transition: all .22s var(--spring);
  min-height: 30px;
}
.fin-tab-mode-opt:hover:not(.is-active) {
  color: var(--ink); background: rgba(255,255,255,.04);
}
.fin-tab-mode-opt.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(200,160,76,.1), rgba(200,160,76,.04));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15);
}

/* Phase 19, Tracker #19 — Group-by pill (None / Class / Location). Mirrors
   the mode-switch styling for visual consistency, with a label prefix. */
.fin-tab-groupby-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 10px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fin-tab-groupby-label {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
  margin-right: 4px;
}
.fin-tab-groupby-opt {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-2); font: inherit;
  font-size: 11.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer;
  transition: all .22s var(--spring);
  min-height: 30px;
}
.fin-tab-groupby-opt:hover:not(.is-active) {
  color: var(--ink); background: rgba(255,255,255,.04);
}
.fin-tab-groupby-opt.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(200,160,76,.1), rgba(200,160,76,.04));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.15);
}
html.light .fin-tab-groupby-switch {
  background: rgba(0,0,0,.015);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .fin-tab-groupby-label { color: var(--ink-2); }
html.light .fin-tab-groupby-opt { color: var(--ink-2); }
html.light .fin-tab-groupby-opt.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.04));
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.18);
}

/* Grouped P&L table — column-per-class/location tableau. */
.fin-doc-grouped-banner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin: 0 0 12px;
  background: linear-gradient(135deg, rgba(200,160,76,.08), rgba(200,160,76,.02));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.18);
  border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600;
  color: var(--ink-2);
}
.fin-doc-grouped-banner strong { color: var(--gold); font-weight: 700; }
.fin-doc-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
.fin-doc-table-grouped {
  min-width: 100%;
  table-layout: auto;
}
.fin-doc-table-grouped th, .fin-doc-table-grouped td {
  white-space: nowrap;
}
.fin-doc-table-grouped .fin-doc-rowtotal {
  background: rgba(200,160,76,.04);
  font-weight: 700;
  box-shadow: inset 1px 0 0 rgba(200,160,76,.15);
}
.fin-doc-table-grouped .fin-doc-untagged { color: var(--ink-3); font-style: italic; }
html.light .fin-doc-table-grouped .fin-doc-rowtotal { background: rgba(150,117,10,.05); box-shadow: inset 1px 0 0 rgba(150,117,10,.18); }

@media (max-width: 768px) {
  .fin-tab-groupby-switch { padding: 3px; }
  .fin-tab-groupby-label { display: none; }
}

.fin-tab-compare-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer;
  user-select: none;
  transition: all .2s var(--spring);
  min-height: 32px;
}
.fin-tab-compare-label:hover {
  background: rgba(255,255,255,.04);
  color: var(--ink);
}
.fin-tab-compare-label input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: all .2s var(--spring);
  position: relative;
}
.fin-tab-compare-label input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.5), 0 0 8px rgba(200,160,76,.25);
}
.fin-tab-compare-label input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fin-tab-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.fin-tab-actions .fin-tab-btn {
  appearance: none; border: 0;
  background: rgba(255,255,255,.05);
  color: var(--ink);
  font: inherit;
  font-size: 12px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.2);
  cursor: pointer;
  transition: all .22s var(--spring);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
}
.fin-tab-actions .fin-tab-btn:hover {
  background: rgba(255,255,255,.09);
  transform: translateY(-1px) scale(1.01);
}
.fin-tab-actions .fin-tab-btn:active { transform: scale(.97); }
.fin-tab-actions .fin-tab-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2);
}

.fin-tab-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.fin-tab-custom-range input[type="date"] {
  appearance: none;
  background: rgba(255,255,255,.03);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color-scheme: dark;
  min-height: 32px;
}
.fin-tab-custom-range input[type="date"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2);
}
.fin-tab-custom-range .fin-tab-custom-sep {
  color: var(--ink-3); font-size: 12px; font-weight: 600;
}

/* ---- Financials tab — layout grid ---- */
.fin-tab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .fin-tab-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fin-tab-main {
  min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2);
  padding: 24px;
  min-height: 420px;
}

.fin-tab-main-empty,
.fin-tab-main-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--ink-3);
  font-size: 13px;
}
.fin-tab-main-loading::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(200,160,76,.25);
  border-top-color: var(--gold);
  margin-right: 10px;
  animation: fin-spin .9s linear infinite;
}
@keyframes fin-spin { to { transform: rotate(360deg); } }

.fin-tab-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.fin-tab-metrics {
  background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2);
  padding: 18px 20px;
}
.fin-tab-metrics-title {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 14px 0;
}
.fin-tab-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.fin-tab-metric:last-child { border-bottom: 0; padding-bottom: 0; }
.fin-tab-metric:first-child { padding-top: 0; }
.fin-tab-metric-label {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3); letter-spacing: -.005em;
}
.fin-tab-metric-value {
  font-size: 22px; font-weight: 200; letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.fin-tab-metric.is-up .fin-tab-metric-value { color: var(--green); }
.fin-tab-metric.is-down .fin-tab-metric-value { color: var(--red); }
.fin-tab-metric-sub {
  font-size: 10.5px; font-weight: 500;
  color: var(--ink-4);
}

/* Inline status line (Loading… / error text) */
.fin-tab-status {
  padding: 10px 14px;
  margin: 0 0 14px 0;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-3);
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.fin-tab-status:empty { display: none; }
.fin-tab-status.is-error {
  color: var(--red);
  background: var(--red-glow);
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18);
}

/* Session 10 — A/R Aging table inside Financials tab */
.fin-aging-wrap { padding-top: 4px; }
.fin-aging-asof {
  font-size: 11px; color: var(--ink-3);
  margin-bottom: 12px;
}
.fin-aging-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fin-aging-table th {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fin-aging-table th:first-child { text-align: left; }
.fin-aging-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fin-aging-table td:first-child { text-align: left; font-weight: 500; }
.fin-aging-table tr.fin-aging-totals {
  background: rgba(200,160,76,.04);
}
.fin-aging-table tr.fin-aging-totals td { color: var(--gold); font-weight: 700; }
.fin-aging-empty {
  text-align: center; color: var(--ink-3);
  padding: 28px 0;
  font-style: italic;
}
html.light .fin-aging-table th { border-bottom-color: rgba(0,0,0,.08); }
html.light .fin-aging-table td { border-bottom-color: rgba(0,0,0,.04); }

/* Reports-closed-period badges (shared with modal path) */
.reports-closed-period-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  margin: 8px 0 0 0;
  border-radius: 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.reports-closed-period-badge.is-soft {
  background: var(--amber-glow);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.18);
}
.reports-closed-period-badge.is-hard {
  background: var(--red-glow);
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18);
}

/* Financials tab — side header + metric empty */
.fin-tab-side-head {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-4);
  padding: 0 4px;
}
.fin-tab-metric-empty {
  font-size: 12px; color: var(--ink-4); text-align: center;
  padding: 12px 0;
}
.fin-tab-closed-badge-slot:empty { display: none; }
.fin-tab-controls {
  display: contents;
}

/* ---- Statement notes — preview overlay + Financials tab ---- */
.fin-doc-notes {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.fin-doc-notes-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fin-doc-notes-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.fin-doc-notes-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(200,160,76,.1);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2);
  color: var(--gold);
  font-size: 10px; font-weight: 700;
}
.fin-doc-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.fin-doc-notes-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  background: rgba(255,255,255,.02);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  margin-bottom: 14px;
}
.fin-doc-notes-item {
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.fin-doc-notes-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.fin-doc-notes-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.fin-doc-notes-time {
  font-size: 10.5px;
  color: var(--ink-4);
}
.fin-doc-notes-mode-chip {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(96,165,250,.1);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.fin-doc-notes-mode-chip.tone-both {
  background: rgba(200,160,76,.1);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.18);
}
.fin-doc-notes-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}
.fin-doc-notes-action {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  transition: all .2s var(--spring);
}
.fin-doc-notes-action:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.fin-doc-notes-action.is-danger:hover { color: var(--red); background: var(--red-glow); }
.fin-doc-notes-text {
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.fin-doc-notes-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fin-doc-notes-add textarea {
  appearance: none;
  background: rgba(255,255,255,.03);
  color: var(--ink);
  font: inherit; font-size: 13px; line-height: 1.5;
  padding: 10px 12px;
  border: 0; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  resize: vertical;
  min-height: 60px;
  max-height: 240px;
  transition: all .2s var(--spring);
}
.fin-doc-notes-add textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(200,160,76,.12), inset 0 0 0 1px rgba(200,160,76,.2);
}
.fin-doc-notes-add-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fin-doc-notes-add-meta {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 10px;
}
.fin-doc-notes-add-count { font-variant-numeric: tabular-nums; }
.fin-doc-notes-add-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.fin-doc-notes-add-mode input[type="checkbox"] {
  appearance: none;
  width: 13px; height: 13px; border-radius: 3px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  cursor: pointer; position: relative;
  transition: all .2s var(--spring);
}
.fin-doc-notes-add-mode input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.5);
}
.fin-doc-notes-add-mode input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3.5px; top: .5px;
  width: 4px; height: 7px;
  border: solid var(--void);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fin-doc-notes-add-btn {
  appearance: none; border: 0;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--void);
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(200,160,76,.25), 0 0 20px rgba(200,160,76,.08), inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .22s var(--spring);
  min-height: 32px;
}
.fin-doc-notes-add-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 20px rgba(200,160,76,.4), 0 0 40px rgba(200,160,76,.12), inset 0 1px 0 rgba(255,255,255,.25);
}
.fin-doc-notes-add-btn:active { transform: scale(.97); }
.fin-doc-notes-add-btn:disabled {
  opacity: .5; cursor: not-allowed; transform: none;
  box-shadow: 0 2px 8px rgba(200,160,76,.12), inset 0 1px 0 rgba(255,255,255,.1);
}
.fin-doc-notes-add-ghost {
  appearance: none; border: 0;
  background: rgba(255,255,255,.04);
  color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  cursor: pointer;
  transition: all .22s var(--spring);
  min-height: 32px;
}
.fin-doc-notes-add-ghost:hover { background: rgba(255,255,255,.08); }

/* Print-mode note styling (served from _printStatement inline styles +
   these fallback classes for browsers that strip inline CSS aggressively) */
.print-notes { margin-top: 24px; padding-top: 16px; border-top: 1px solid #ccc; }
.print-note-item { margin-bottom: 10px; font-size: 12px; color: #222; }
.print-note-chip {
  display: inline-block; font-size: 9px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px;
  background: #eee; color: #555; margin-left: 6px;
}

/* ---- Light mode overrides ---- */
html.light .reports-top-tabs,
html.light .fin-tab-subtabs,
html.light .fin-tab-period-pills,
html.light .fin-tab-mode-switch {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .reports-top-tab,
html.light .fin-tab-subtab,
html.light .fin-tab-period-pill,
html.light .fin-tab-mode-opt {
  color: var(--ink-2);
}
html.light .reports-top-tab:hover:not(.is-active),
html.light .fin-tab-subtab:hover:not(.is-active),
html.light .fin-tab-period-pill:hover:not(.is-active),
html.light .fin-tab-mode-opt:hover:not(.is-active) {
  color: var(--ink); background: rgba(0,0,0,.04);
}
html.light .reports-top-tab.is-active,
html.light .fin-tab-subtab.is-active,
html.light .fin-tab-period-pill.is-active,
html.light .fin-tab-mode-opt.is-active {
  color: var(--gold);
  background: linear-gradient(135deg, rgba(150,117,10,.1), rgba(150,117,10,.04));
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.18);
}
html.light .reports-top-placeholder,
html.light .fin-tab-main,
html.light .fin-tab-metrics {
  background: linear-gradient(180deg, #FFF 0%, rgba(255,255,255,.7) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}
html.light .fin-tab-compare-label {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .fin-tab-compare-label input[type="checkbox"] {
  background: rgba(0,0,0,.04);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
html.light .fin-tab-actions .fin-tab-btn {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}
html.light .fin-tab-actions .fin-tab-btn:hover {
  background: rgba(0,0,0,.06);
}
html.light .fin-tab-custom-range {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .fin-tab-custom-range input[type="date"] {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  color-scheme: light;
}
html.light .fin-tab-metric {
  border-bottom-color: rgba(0,0,0,.05);
}
html.light .fin-doc-notes {
  border-top-color: rgba(0,0,0,.08);
}
html.light .fin-doc-notes-empty,
html.light .fin-doc-notes-item {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .fin-doc-notes-add textarea {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
html.light .fin-doc-notes-add-ghost {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
html.light .fin-doc-notes-add-ghost:hover { background: rgba(0,0,0,.06); }

/* ═════════════════════════════════════════════════════════════
   SESSION 13.1 — Super Admin Businesses (native rebuild, glass)
   Namespace: .sab-*  (Super Admin Businesses)
   Reuses .team2-* for shared shell patterns (card/metrics/toolbar/tabs).
   Every surface: 5-layer glass recipe per Premium Spec §3.1.
   Zero .sa-* references; pure token palette; no raw hex.
   ═════════════════════════════════════════════════════════════ */

/* — Page shell: let body ambient gradient bleed through — */
.sab-shell {
  display: block;
  position: relative;
  padding: 0;
}

/* — Page tabs (Businesses / Plans / Tickets-KB / Webhooks) —
   Session 13.2: position:relative + z-index ensures the inactive tab buttons
   are not occluded by the global app-header's invisible .app-header-center
   container. Without this, only the active (.is-active gold pill) reads as
   clickable to elementFromPoint hit-testing because btn-secondary lacks the
   shadow stack that lifts btn-primary above the header. */
.sab-page-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
  position: relative !important;
  z-index: 100 !important;
}
.sab-page-tab {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--font) !important;
  transition: all 200ms var(--spring) !important;
  /* Session 13.2 iter-1 Order 4: lift hit area to Apple HIG 44×44 minimum.
     Visual band stays compact via padding; the extra height is pure touch
     target. */
  min-height: 44px !important;
  white-space: nowrap !important;
}
.sab-page-tab:hover { color: var(--ink-2) !important; background: rgba(255,255,255,.04) !important; }
.sab-page-tab:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--gold-glow-ring) !important;
}
.sab-page-tab.is-active {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  box-shadow:
    0 2px 12px rgba(200,160,76,.25),
    0 0 30px rgba(200,160,76,.08),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* — Hero block — */
.sab-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.sab-hero-titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sab-hero-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.sab-hero-info {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  cursor: help;
  /* iter1 Order 11: visible 18×18 dot keeps inline-with-title layout while
     ::before provides a 44×44 invisible tap target (Apple HIG touch-safe
     minimum). Necessary on iPad/phone where fingertip hit area is wider
     than the decorative pill. */
  position: relative;
}
.sab-hero-info::before {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.sab-hero-sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 680px;
}
.sab-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* — Metrics strip: reuses .team2-metrics / .team2-metric via class composition.
     Additive-only: subtle accent modifier for focus-stat card — */
.sab-metric-focus {
  background: linear-gradient(180deg, rgba(200,160,76,.06) 0%, rgba(200,160,76,.02) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.15),
    0 4px 16px rgba(0,0,0,.2),
    0 12px 40px rgba(200,160,76,.05) !important;
}
.sab-metric-focus .team2-metric-value { color: var(--gold) !important; }

/* — Main layout grid: 1fr + 380px sidecard (reuses .team2-layout semantics) — */
.sab-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .sab-layout { grid-template-columns: 1fr; }
}

/* — Toolbar filters/search (reuses .team2-toolbar patterns) — */
.sab-toolbar {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
.sab-toolbar .field-group { margin-bottom: 0 !important; flex: 1 1 auto; min-width: 180px; }
.sab-toolbar .field-group--search { flex: 2 1 260px; max-width: 420px; }
.sab-toolbar label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important; /* iter1 Order 15: match .sab-modal-kv-cell-label + canonical kicker tracking */
  color: var(--ink-4) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.sab-toolbar input[type="text"],
.sab-toolbar input[type="search"] {
  padding: 10px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 44px !important;
  width: 100% !important;
  transition: all 200ms var(--spring) !important;
}
.sab-toolbar input:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important;
}
.sab-toolbar input:focus,
.sab-toolbar input:focus-visible {
  box-shadow: 0 0 0 3px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.3) !important;
  outline: none !important;
}
.sab-toolbar input::placeholder { color: var(--ink-4) !important; }

.sab-toolbar select {
  padding: 10px 36px 10px 14px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239898A8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 12px center, 0 0 !important;
  background-size: 12px, 100% 100% !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  min-height: 44px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  transition: all 200ms var(--spring) !important;
}
.sab-toolbar select:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; }
.sab-toolbar select:focus-visible {
  box-shadow: 0 0 0 3px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.3) !important;
  outline: none !important;
}

/* — Business list (rows, not table) — */
.sab-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sab-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  cursor: pointer;
  transition: transform 180ms var(--spring), box-shadow 180ms var(--spring), background 180ms var(--spring);
  position: relative;
}
.sab-row:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.12),
    0 4px 20px rgba(0,0,0,.2),
    0 0 30px rgba(200,160,76,.03);
}
.sab-row:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(200,160,76,.4),
    0 0 0 3px var(--gold-glow-ring);
}
.sab-row[aria-selected="true"],
.sab-row.is-selected {
  background: linear-gradient(180deg, rgba(200,160,76,.05) 0%, rgba(200,160,76,.015) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(200,160,76,.28),
    0 4px 16px rgba(200,160,76,.08);
}

.sab-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200,160,76,.15) 0%, rgba(200,160,76,.08) 100%);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.18);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.sab-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sab-row-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sab-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}
.sab-row-sub {
  font-size: 12px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sab-row-pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sab-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

/* — Pills (plan + status + counts) — */
.sab-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  color: var(--ink-2);
}
.sab-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.sab-pill--plan-premium {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(200,160,76,.12) 0%, rgba(200,160,76,.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2);
}
.sab-pill--plan-free {
  color: var(--ink-2);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sab-pill--status-active {
  color: var(--green);
  background: var(--green-glow);
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.2);
}
.sab-pill--status-blocked {
  color: var(--red);
  background: var(--red-glow);
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.2);
}
.sab-pill--status-grace {
  color: var(--gold);
  background: var(--gold-glow);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.22);
}
.sab-pill--tickets {
  color: var(--ink-2);
  background: rgba(255,255,255,.04);
}
.sab-pill--no-dot::before { display: none; }

/* — Kebab menu popover — */
.sab-kebab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: linear-gradient(180deg, rgba(26,26,34,.96) 0%, rgba(20,20,26,.94) 100%);
  border-radius: var(--r);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 12px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: sab-pop-in 180ms var(--ease-out) both;
  transform-origin: top right;
}
.sab-kebab-menu[hidden] { display: none; }
@keyframes sab-pop-in {
  0%   { opacity: 0; transform: translateY(-4px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sab-kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: background 150ms var(--spring), color 150ms var(--spring);
}
.sab-kebab-item:hover {
  background: rgba(255,255,255,.05);
  color: var(--ink);
}
.sab-kebab-item:focus-visible {
  outline: none;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.sab-kebab-item--danger { color: var(--red); }
.sab-kebab-item--danger:hover {
  background: rgba(248,113,113,.08);
  color: var(--red);
}
.sab-kebab-item[disabled],
.sab-kebab-item[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}
.sab-kebab-sep {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 4px 4px;
}

/* — Detail drawer (side-card interior) — */
.sab-side-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  min-height: 200px;
}
.sab-side-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--ink-4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sab-side-empty-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.sab-side-empty-sub {
  font-size: 12px;
  color: var(--ink-4);
  line-height: 1.5;
}
.sab-detail-kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sab-detail-kv:last-of-type { border-bottom: none; }
.sab-detail-kv-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sab-detail-kv-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.sab-detail-kv-value--muted { color: var(--ink-3); font-weight: 400; }
.sab-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.05);
}

/* — Selected-business detail hero — */
.sab-detail-hero {
  margin-bottom: 8px;
}
.sab-detail-hero-top {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.sab-detail-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(200,160,76,.22), rgba(200,160,76,.08));
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.35),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 14px rgba(200,160,76,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.sab-detail-hero-text { min-width: 0; }
.sab-detail-kicker {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.sab-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin-bottom: 10px;
  word-break: break-word;
}
.sab-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* — Detail sections (Security / Activity) — */
.sab-detail-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.sab-detail-section-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.sab-detail-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}

/* — Detail KV mono variant — */
.sab-detail-kv-value--mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .01em;
}

/* — Inline form (verify client ID) — */
.sab-inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.sab-inline-form .input {
  min-height: 40px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border: none;
  border-radius: 10px;
  padding: 0 14px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font);
  transition: all 160ms var(--spring);
}
.sab-inline-form .input:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.45),
    0 0 0 3px var(--gold-glow-ring);
}
.sab-inline-form-hint {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--ink-4);
  min-height: 16px;
  line-height: 1.4;
}

/* — Activity log list — */
.sab-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.sab-log-item {
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sab-log-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.sab-log-item-type {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: .02em;
}
.sab-log-item-when {
  font-size: 11px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.sab-log-item-message {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.4;
  word-break: break-word;
}
.sab-log-item--placeholder {
  color: var(--ink-4);
  font-size: 12px;
  text-align: center;
  padding: 16px 12px;
  background: rgba(255,255,255,.015);
}
.sab-log-item--error {
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.2);
  background: rgba(220,38,38,.04);
}

/* — Mini-tabs inside sidecard — */
.sab-mini-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.sab-mini-tab {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  /* Session 13.2 iter-1 Order 4: lift hit area to Apple HIG 44×44 minimum.
     Padding compensated to keep the visual band tight. */
  min-height: 44px;
  font-family: var(--font);
  transition: all 150ms var(--spring);
}
.sab-mini-tab:hover { color: var(--ink-2); background: rgba(255,255,255,.03); }
.sab-mini-tab.is-active {
  color: var(--ink);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sab-mini-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-glow-ring);
}

/* — Empty / loading / error states — */
.sab-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: rgba(255,255,255,.015);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.sab-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.sab-empty-sub {
  font-size: 13px;
  color: var(--ink-4);
  max-width: 340px;
  line-height: 1.5;
}
.sab-empty-cta {
  margin-top: 16px;
}

/* Session 13.2 iter-1 Order 5: technical-details disclosure inside an
   empty-state error. Hides correlationIds + raw error strings behind a
   summary so the Anna persona never sees the UUID, but a support
   engineer can expand to grab it for log lookups. */
.sab-empty-state-tech {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-4);
  max-width: 340px;
  width: 100%;
}
.sab-empty-state-tech > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--ink-3);
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  display: inline-block;
}
.sab-empty-state-tech > summary:hover {
  color: var(--ink-2);
  background: rgba(255,255,255,.04);
}
.sab-empty-state-tech > summary::-webkit-details-marker { display: none; }
.sab-empty-state-tech > code {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(0,0,0,.18);
  border-radius: 6px;
  word-break: break-word;
  text-align: left;
}
.sab-skeleton-row {
  height: 68px;
  border-radius: var(--r);
  background: linear-gradient(90deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.05) 50%,
    rgba(255,255,255,.02) 100%);
  background-size: 200% 100%;
  animation: sab-shimmer 1600ms linear infinite;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
@keyframes sab-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* — Deferred tab notice (Plans/Webhooks placeholders) — */
.sab-deferred-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}
.sab-deferred-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-glow);
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.22);
}
.sab-deferred-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.sab-deferred-sub {
  font-size: 13px;
  color: var(--ink-3);
  max-width: 420px;
  line-height: 1.5;
}

/* — Focus ring utility for non-button focusable targets — */
.sab-focusable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--gold-glow-ring);
}

/* — Super Admin Modal (glass) — Session 13.1 —
   Scoped to #delete-biz-modal (and future sab-modal usage). Rides on top of
   the existing .modal.show visibility toggle while providing glass chrome. */
#delete-biz-modal.modal.show {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(6,6,8,.72) !important;
  /* iter1 Order 6: Glass Theme canonical modal blur = 16px. Every other
     app modal (s4-modal backdrop, global .modal) uses 16px. 10px was the
     Session 13.1 miss — here to match. */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  animation: sab-modal-backdrop-in 220ms var(--ease-out) both;
}
@keyframes sab-modal-backdrop-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.sab-modal-card {
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  border-radius: var(--r-xl, 26px);
  position: relative;
  background:
    radial-gradient(1100px 500px at 85% -25%, rgba(220,38,38,.08) 0%, rgba(220,38,38,0) 60%),
    radial-gradient(900px 400px at 15% 120%, rgba(200,160,76,.05) 0%, rgba(200,160,76,0) 60%),
    linear-gradient(180deg, rgba(22,22,28,.98) 0%, rgba(14,14,20,.99) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.4) inset,
    0 24px 60px rgba(0,0,0,.5),
    0 48px 120px rgba(0,0,0,.35),
    0 0 48px rgba(220,38,38,.06);
  /* 13.6 D6 — entrance trimmed 340 → 280ms to match Premium Spec §5 ceiling
   * for micro-interactions. The orchestrating modal-orb fade still runs at
   * 550ms (modal exception per spec); only the card pop is normalized. */
  animation: sab-modal-card-in 280ms var(--spring-bounce, cubic-bezier(.34,1.56,.64,1)) both;
}
.sab-modal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: 1px;
  pointer-events: none;
}
@keyframes sab-modal-card-in {
  0%   { opacity: 0; transform: scale(.94) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.sab-modal-head {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sab-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(220,38,38,.18) 0%, rgba(220,38,38,.06) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(220,38,38,.35),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 16px rgba(220,38,38,.2);
  color: var(--red); /* iter1 Order 14: trust design token; no hex fallback */
  flex-shrink: 0;
}
.sab-modal-icon svg { width: 24px; height: 24px; }
.sab-modal-head-text { min-width: 0; }
.sab-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.25;
  margin-bottom: 6px;
}
.sab-modal-sub {
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.5;
}
.sab-modal-close {
  /* Session 13.2 iter-1 Order 4: lift modal close to Apple HIG 44×44
     touch minimum. Internal SVG (16px) stays the same; the extra width
     is hit area padding. */
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  transition: all 160ms var(--spring);
  flex-shrink: 0;
}
.sab-modal-close:hover {
  background: rgba(255,255,255,.07);
  color: var(--ink);
}
.sab-modal-close:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.4),
    0 0 0 3px var(--gold-glow-ring);
}
.sab-modal-close svg { width: 16px; height: 16px; }

.sab-modal-body {
  padding: 18px 22px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sab-warning-banner {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(220,38,38,.08) 0%, rgba(220,38,38,.03) 100%);
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.18);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* 13.6 D5 — Info-level modal preamble banner (gold/amber). Used by modals
 * to identify target + summarize impact ABOVE the form fields. Distinct from
 * .sab-warning-banner (red danger). Replaces the inline
 * `style="background:rgba(255,200,80,...)"` pattern that was duplicated
 * across 5 confirmation modals (Picky 13.5 finding).
 */
.sab-modal-banner {
  padding: 12px;
  background: rgba(255, 200, 80, 0.06);
  border: 1px solid rgba(255, 200, 80, 0.18);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sab-modal-banner strong { color: var(--ink-1); }

/* 13.6 Council Iter1 Order #6 (Picky/Anna #1) — Visible ON-state for toggle
 * buttons that use aria-pressed (e.g., audit-my-actions-toggle). Without
 * this rule the pressed state was indistinguishable from the rest state on
 * touch devices. Uses gold tint to match the .sab-modal-banner palette and
 * to align with the Glass Theme's gold-accent vocabulary.
 */
.btn-secondary[aria-pressed="true"],
.btn-secondary.is-active {
  background: rgba(255, 200, 80, 0.18);
  border-color: rgba(255, 200, 80, 0.6);
  color: var(--ink-1);
}

/* 13.6 Council Iter1 Order #7 (Picky/Anna #2) — Disabled-state affordance
 * for modal dismiss controls during in-flight CF call. `_setModalBusy` adds
 * `aria-busy="true"` to the modal AND sets disabled on the close-X / cancel
 * buttons; this rule makes the disablement visually unambiguous.
 * pointer-events:none is belt-and-suspenders so the not-allowed cursor
 * actually fires on devices that ignore the standard `disabled` cursor.
 */
.sab-modal[aria-busy="true"] .sab-modal-close,
.sab-modal[aria-busy="true"] [id$="-cancel"],
.sab-modal[aria-busy="true"] [id$="-close-x"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
 * Session 13.7 Item 1 — Support ticket conversation thread
 * Replaces the 13.5 placeholder at staff.js:3488. Thread renders below the
 * status/priority controls in the super-admin ticket detail drawer. Polled
 * every 5s. Bubble layout left-aligned for user, right-aligned for support.
 * =========================================================================== */
.sab-thread-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sab-thread-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sab-thread-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: 0.01em;
}
.sab-thread-status {
  font-size: 12px;
  color: var(--ink-3);
  min-height: 16px;
}
.sab-thread-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 4px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.sab-thread-row {
  display: flex;
  width: 100%;
}
.sab-thread-row--user { justify-content: flex-start; }
.sab-thread-row--support { justify-content: flex-end; }
.sab-thread-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sab-thread-bubble--user {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}
.sab-thread-bubble--support {
  background: rgba(255, 200, 80, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 80, 0.18);
  border-bottom-right-radius: 4px;
}
.sab-thread-bubble--synthetic {
  opacity: 0.78;
  font-style: italic;
}
.sab-thread-meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.sab-thread-text { white-space: pre-wrap; word-wrap: break-word; }
.sab-thread-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-3);
}
.sab-thread-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sab-thread-composer-label {
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.sab-thread-input {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
}
.sab-thread-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sab-thread-composer-hint {
  font-size: 12px;
  color: var(--ink-3);
  flex: 1 1 auto;
  min-width: 200px;
}
/* Light-theme adjustments to keep contrast right. */
html.light .sab-thread-list,
html[data-theme="light"] .sab-thread-list {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
html.light .sab-thread-bubble--user,
html[data-theme="light"] .sab-thread-bubble--user {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
html.light .sab-thread-bubble--support,
html[data-theme="light"] .sab-thread-bubble--support {
  background: rgba(255, 200, 80, 0.18);
  box-shadow: inset 0 0 0 1px rgba(220, 160, 50, 0.32);
}
.sab-warning-banner-icon {
  color: var(--red); /* iter1 Order 14: trust design token; no hex fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.sab-warning-banner-icon svg { width: 16px; height: 16px; }

.sab-modal-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 4px 0;
  background: rgba(255,255,255,.015);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.sab-modal-kv-cell {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sab-modal-kv-cell + .sab-modal-kv-cell {
  box-shadow: -1px 0 0 rgba(255,255,255,.03);
}
.sab-modal-kv-cell--wide { grid-column: 1 / -1; }
.sab-modal-kv-cell-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sab-modal-kv-cell-value {
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.sab-modal-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.sab-modal-confirm-hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.sab-modal-confirm-hint strong {
  color: var(--red); /* iter1 Order 14: trust design token; no hex fallback */
  font-weight: 700;
  letter-spacing: .05em;
}
.sab-modal-confirm .input {
  min-height: 44px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font);
  letter-spacing: .02em;
  transition: all 160ms var(--spring);
}
.sab-modal-confirm .input::placeholder { color: var(--ink-5, rgba(255,255,255,.25)); }
.sab-modal-confirm .input:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(220,38,38,.5),
    0 0 0 3px rgba(220,38,38,.15);
}

.sab-modal-foot {
  padding: 14px 22px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.04);
  margin-top: 8px;
}

/* Light mode for the glass modal */
html.light #delete-biz-modal.modal.show,
html[data-theme="light"] #delete-biz-modal.modal.show {
  background: rgba(255,255,255,.62) !important;
}
html.light .sab-modal-card,
html[data-theme="light"] .sab-modal-card {
  background:
    radial-gradient(1100px 500px at 85% -25%, rgba(220,38,38,.05) 0%, rgba(220,38,38,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 24px 60px rgba(0,0,0,.14),
    0 48px 120px rgba(0,0,0,.08);
}
html.light .sab-modal-card::before,
html[data-theme="light"] .sab-modal-card::before {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
}
html.light .sab-modal-head,
html[data-theme="light"] .sab-modal-head { border-bottom-color: rgba(0,0,0,.06); }
html.light .sab-modal-foot,
html[data-theme="light"] .sab-modal-foot { border-top-color: rgba(0,0,0,.06); }
html.light .sab-modal-close,
html[data-theme="light"] .sab-modal-close {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .sab-modal-kv-grid,
html[data-theme="light"] .sab-modal-kv-grid {
  background: rgba(0,0,0,.015);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
html.light .sab-modal-kv-cell + .sab-modal-kv-cell,
html[data-theme="light"] .sab-modal-kv-cell + .sab-modal-kv-cell {
  box-shadow: -1px 0 0 rgba(0,0,0,.04);
}
html.light .sab-modal-confirm .input,
html[data-theme="light"] .sab-modal-confirm .input {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
html.light .sab-warning-banner,
html[data-theme="light"] .sab-warning-banner {
  background: rgba(220,38,38,.04);
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.14);
}

/* Mobile: narrow the modal content, stack grid */
@media (max-width: 640px) {
  .sab-modal-head { grid-template-columns: 40px 1fr auto; padding: 18px 18px 14px; }
  .sab-modal-icon { width: 40px; height: 40px; border-radius: 12px; }
  .sab-modal-body { padding: 16px 18px 2px; }
  .sab-modal-foot { padding: 12px 18px 18px; flex-direction: column-reverse; }
  .sab-modal-foot .btn { width: 100%; }
  .sab-modal-kv-grid { grid-template-columns: 1fr; }
  .sab-modal-kv-cell + .sab-modal-kv-cell { box-shadow: 0 -1px 0 rgba(255,255,255,.03); }
  html.light .sab-modal-kv-cell + .sab-modal-kv-cell,
  html[data-theme="light"] .sab-modal-kv-cell + .sab-modal-kv-cell { box-shadow: 0 -1px 0 rgba(0,0,0,.04); }
}

/* Reduced motion: disable modal entrance animations */
@media (prefers-reduced-motion: reduce) {
  #delete-biz-modal.modal.show,
  .sab-modal-card { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   iter2: Shared glass chrome for the sab-modal pattern.
   Generalizes the glass treatment that previously only applied to
   #delete-biz-modal so that Set plan / Create ticket / Create support agent
   modals (all now .sab-modal) become centered overlays with backdrop blur.
   Also extracts the Block modal's ambient orbs + light sheen into reusable
   .sab-modal-orbs / .sab-modal-light layers. Also styles the gold
   "Back to Super Admin" exit button (#back-to-admin-btn).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Centered-overlay positioning for any .sab-modal (not just #delete-biz-modal). */
.sab-modal.show {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: rgba(6,6,8,.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  animation: sab-modal-backdrop-in 220ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) both;
}
html.light .sab-modal.show,
html[data-theme="light"] .sab-modal.show { background: rgba(255,255,255,.62) !important; }

/* Ambient orbs — three animated radial-gradient lights (gold/blue/green)
   behind the card. Matches the Block modal's .modal-overlay ambient pattern
   from ui-components.css. Reuses the existing orb1/orb2/orb3 keyframes. */
.sab-modal-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sab-modal-orbs::before,
.sab-modal-orbs::after,
.sab-modal-orbs .sab-orb-3 {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity .6s ease;
}
.sab-modal.show .sab-modal-orbs::before,
.sab-modal.show .sab-modal-orbs::after,
.sab-modal.show .sab-modal-orbs .sab-orb-3 { opacity: 1; }
.sab-modal-orbs::before {
  width: 500px; height: 500px; top: 10%; left: 15%;
  background: radial-gradient(circle, rgba(200,160,76,.12), transparent 70%);
  animation: orb1 10s ease-in-out infinite;
}
.sab-modal-orbs::after {
  width: 450px; height: 450px; bottom: 10%; right: 15%;
  background: radial-gradient(circle, rgba(96,165,250,.08), transparent 70%);
  animation: orb2 12s ease-in-out infinite;
}
.sab-modal-orbs .sab-orb-3 {
  width: 400px; height: 400px; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(74,222,128,.06), transparent 70%);
  animation: orb3 14s ease-in-out infinite;
}
html.light .sab-modal-orbs::before,
html[data-theme="light"] .sab-modal-orbs::before {
  background: radial-gradient(circle, rgba(150,117,10,.09), transparent 70%);
}
html.light .sab-modal-orbs::after,
html[data-theme="light"] .sab-modal-orbs::after {
  background: radial-gradient(circle, rgba(37,99,235,.06), transparent 70%);
}
html.light .sab-modal-orbs .sab-orb-3,
html[data-theme="light"] .sab-modal-orbs .sab-orb-3 {
  background: radial-gradient(circle, rgba(13,148,72,.05), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .sab-modal-orbs::before,
  .sab-modal-orbs::after,
  .sab-modal-orbs .sab-orb-3 { animation: none; }
}

/* Thin diagonal glass sheen layer — sits above the orbs, below the card. */
.sab-modal-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 45%);
}
html.light .sab-modal-light,
html[data-theme="light"] .sab-modal-light {
  background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 45%);
}

/* Gold variant of sab-modal-card — for non-destructive modals (Set plan,
   Create ticket, Create support agent). Replaces the red accent gradients
   from the base .sab-modal-card with gold+blue tints. */
.sab-modal-card.sab-modal-card--gold {
  background:
    radial-gradient(1100px 500px at 85% -25%, rgba(200,160,76,.10) 0%, rgba(200,160,76,0) 60%),
    radial-gradient(900px 400px at 15% 120%, rgba(96,165,250,.04) 0%, rgba(96,165,250,0) 60%),
    linear-gradient(180deg, rgba(22,22,28,.98) 0%, rgba(14,14,20,.99) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 0 rgba(0,0,0,.4) inset,
    0 24px 60px rgba(0,0,0,.5),
    0 48px 120px rgba(0,0,0,.35),
    0 0 48px rgba(200,160,76,.08);
}
html.light .sab-modal-card.sab-modal-card--gold,
html[data-theme="light"] .sab-modal-card.sab-modal-card--gold {
  background:
    radial-gradient(1100px 500px at 85% -25%, rgba(200,160,76,.06) 0%, rgba(200,160,76,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 24px 60px rgba(0,0,0,.14),
    0 48px 120px rgba(0,0,0,.08);
}

/* Gold variant of sab-modal-icon — matches the gold card accent. */
.sab-modal-icon.sab-modal-icon--gold {
  background: linear-gradient(145deg, rgba(200,160,76,.22) 0%, rgba(200,160,76,.08) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.4),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 6px 16px rgba(200,160,76,.2);
  color: var(--gold);
}

/* Form field group for sab-modal body (inputs, textareas, dropdowns). */
.sab-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sab-modal-field-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sab-modal-field .input,
.sab-modal-field textarea {
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font);
  min-height: 44px;
  transition: box-shadow 160ms var(--spring, cubic-bezier(.2,.8,.2,1));
  width: 100%;
  box-sizing: border-box;
}
.sab-modal-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.sab-modal-field .input::placeholder,
.sab-modal-field textarea::placeholder { color: var(--ink-5, rgba(255,255,255,.25)); }
.sab-modal-field .input:focus-visible,
.sab-modal-field textarea:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.5),
    0 0 0 3px var(--gold-glow-ring);
}
.sab-modal-field-hint {
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.5;
}
html.light .sab-modal-field .input,
html[data-theme="light"] .sab-modal-field .input,
html.light .sab-modal-field textarea,
html[data-theme="light"] .sab-modal-field textarea {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  color: var(--ink);
}

/* Dropdown trigger inside sab-modal-field — matches input chrome. */
.sab-modal-field .ui-dropdown { width: 100%; }
.sab-modal-field .ui-dd-trigger {
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius: 12px;
  min-height: 44px;
  padding: 0 16px;
}
html.light .sab-modal-field .ui-dd-trigger,
html[data-theme="light"] .sab-modal-field .ui-dd-trigger {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Checkbox row. */
.sab-modal-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 2px 0;
}
.sab-modal-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* ───────────── Gold exit button (Back to Super Admin) ─────────────
   Restyles #back-to-admin-btn when a superadmin/support is acting as a
   business. Button visibility is still controlled by updateBackButtonVisibility
   in app.js — this is chrome only. */
#back-to-admin-btn {
  position: relative;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: var(--void) !important;
  border: none;
  padding: 10px 16px 10px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 0 0 1px rgba(200,160,76,.35),
    0 6px 14px rgba(200,160,76,.28),
    0 0 24px rgba(200,160,76,.18) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 140ms var(--spring, cubic-bezier(.2,.8,.2,1)), box-shadow 180ms ease;
  cursor: pointer;
  overflow: visible;
  height: auto;
  line-height: 1.2;
}
#back-to-admin-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(200,160,76,.5),
    0 10px 22px rgba(200,160,76,.38),
    0 0 36px rgba(200,160,76,.28) !important;
}
#back-to-admin-btn:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 0 0 1px rgba(200,160,76,.6),
    0 0 0 3px var(--gold-glow-ring),
    0 10px 22px rgba(200,160,76,.38) !important;
}
#back-to-admin-btn .sab-exit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#back-to-admin-btn .sab-exit-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Ambient gold glow pulsing around the button. */
#back-to-admin-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(ellipse at center, rgba(200,160,76,.3) 0%, rgba(200,160,76,.08) 40%, transparent 70%);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
  animation: sab-exit-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes sab-exit-glow-pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .75; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  #back-to-admin-btn::after { animation: none; opacity: .55; }
}
html.light #back-to-admin-btn,
html[data-theme="light"] #back-to-admin-btn {
  color: #fff !important;
}

/* Admin-return surface: legacy .content-header is suppressed by
   shell-override.css:427 in dashboard view (display:none !important).
   When staff is acting as a business, surface the header as a transparent
   float anchored to the top-right so the gold "Back to Super Admin" button
   becomes the only visible legacy chrome. All other header descendants
   stay hidden — the workspace shell topbar already renders biz info, etc. */
body[data-app-view="dashboard"].sf-minimal-workspace-admin-return .content-header {
  display: block !important;
  position: fixed;
  top: 64px;
  right: 24px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  z-index: 1100;
  pointer-events: none;
  width: auto;
  min-height: 0;
}
body[data-app-view="dashboard"].sf-minimal-workspace-admin-return .content-header > * {
  display: none !important;
}
body[data-app-view="dashboard"].sf-minimal-workspace-admin-return .content-header > div:has(#back-to-admin-btn) {
  display: block !important;
  background: transparent !important;
  pointer-events: auto;
}
body[data-app-view="dashboard"].sf-minimal-workspace-admin-return .content-header > div:has(#back-to-admin-btn) > * {
  display: none !important;
}
body[data-app-view="dashboard"].sf-minimal-workspace-admin-return .content-header #back-to-admin-btn:not(.hidden) {
  display: inline-flex !important;
  pointer-events: auto;
}

/* — Chat widget fix (Session 13.1 chat-widget audit) —
     Staff users must never see the customer support bubble.
     #sw-root is the user's customer-facing chat widget (z-index 9000).
     #slc-btn is the staff Agent Live Chat (z-index 99998 prev → cap at 1200). */
body[data-staff-mode="active"] #sw-root { display: none !important; }
#slc-btn { z-index: 1200 !important; }
#slc-modal { z-index: 1300 !important; }

/* iter1 follow-up (not Council-ordered): .sfy-phone-only was shipped as a
   class name in index.html's #sfy-bottom-nav (Home/Sell/Orders/Products/
   Reports) but never received its hide-on-desktop rule in any CSS file.
   Result: the phone bottom-nav leaked onto every desktop page as a cluster
   of icons in the lower-left corner.

   iter1 v2 fix: hide via the #id selector (not .class) so this rule wins
   regardless of cascade order or any future accidental overrides. Default
   is hidden everywhere; the phone breakpoint would need an explicit
   opt-in rule to show it (currently unwritten — bottom-nav proper has no
   mobile styling yet, so leaving it hidden is the correct ship state). */
#sfy-bottom-nav { display: none !important; }

/* — Mobile — */
@media (max-width: 768px) {
  .sab-layout { grid-template-columns: 1fr !important; }
  .sab-row { grid-template-columns: 40px 1fr; padding: 12px 14px; }
  .sab-row-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 4px; }
  .sab-hero-title { font-size: 22px; }
  .sab-row-name { max-width: 60vw; }
  .sab-page-tabs { flex-wrap: wrap; }
  .sab-toolbar { gap: 8px; padding-bottom: 12px; margin-bottom: 12px; }
  .sab-toolbar .field-group { min-width: 0; flex: 1 1 100%; }

  /* iter1 Order 12: row-action buttons must meet Apple HIG 44×44 touch
     minimum on mobile. Desktop btn-small (28-30px) fails two-finger thumb
     operation on iPad in portrait. Keep visual weight reasonable by
     tightening padding rather than scaling text. */
  .sab-row-actions .btn-small,
  .sab-row-actions .btn-kebab {
    min-width: 44px;
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Session 13.2 iter-1 Order 4: re-assert 44×44 hit area at the mobile
     breakpoint for tab-style controls and modal-close. The base rules
     already set 44px, but flex-wrap inside .sab-page-tabs at 375px can
     compress the band — these min-* declarations are defensive. */
  .sab-page-tab { min-height: 44px !important; }
  .sab-mini-tab { min-height: 44px; }
  .sab-modal-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
  .sab-row,
  .sab-page-tab,
  .sab-mini-tab,
  .sab-kebab-item,
  .sab-skeleton-row {
    transition: none !important;
    animation: none !important;
  }
}

/* ───────── Light mode overrides (Session 13.1 .sab-*) ───────── */
html.light .sab-page-tabs,
html[data-theme="light"] .sab-page-tabs {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04) !important;
}
html.light .sab-page-tab,
html[data-theme="light"] .sab-page-tab { color: var(--ink-3) !important; }
html.light .sab-page-tab:hover,
html[data-theme="light"] .sab-page-tab:hover { background: rgba(0,0,0,.04) !important; color: var(--ink-2) !important; }
html.light .sab-page-tab.is-active,
html[data-theme="light"] .sab-page-tab.is-active { color: #fff !important; }

html.light .sab-hero-info,
html[data-theme="light"] .sab-hero-info {
  background: rgba(0,0,0,.03); color: var(--ink-4);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

html.light .sab-metric-focus,
html[data-theme="light"] .sab-metric-focus {
  background: linear-gradient(180deg, rgba(150,117,10,.06) 0%, rgba(150,117,10,.02) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.2),
    0 4px 16px rgba(0,0,0,.05),
    0 12px 40px rgba(150,117,10,.04) !important;
}

html.light .sab-toolbar,
html[data-theme="light"] .sab-toolbar { border-bottom-color: rgba(0,0,0,.06) !important; }
html.light .sab-toolbar input,
html[data-theme="light"] .sab-toolbar input {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .sab-toolbar input:hover,
html[data-theme="light"] .sab-toolbar input:hover {
  background: rgba(0,0,0,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important;
}
html.light .sab-toolbar select,
html[data-theme="light"] .sab-toolbar select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2357534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.4) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color-scheme: light !important;
}

html.light .sab-row,
html[data-theme="light"] .sab-row {
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.7) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .sab-row:hover,
html[data-theme="light"] .sab-row:hover {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.15),
    0 4px 16px rgba(0,0,0,.04),
    0 0 30px rgba(150,117,10,.05);
}
html.light .sab-row[aria-selected="true"],
html.light .sab-row.is-selected,
html[data-theme="light"] .sab-row[aria-selected="true"],
html[data-theme="light"] .sab-row.is-selected {
  background: linear-gradient(180deg, rgba(150,117,10,.05) 0%, rgba(150,117,10,.02) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(150,117,10,.22),
    0 4px 16px rgba(150,117,10,.06);
}

html.light .sab-row-avatar,
html[data-theme="light"] .sab-row-avatar {
  background: linear-gradient(135deg, rgba(150,117,10,.14) 0%, rgba(150,117,10,.06) 100%);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.16);
}

html.light .sab-pill,
html[data-theme="light"] .sab-pill {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .sab-pill--plan-premium,
html[data-theme="light"] .sab-pill--plan-premium {
  background: linear-gradient(180deg, rgba(150,117,10,.1) 0%, rgba(150,117,10,.04) 100%);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2);
}
html.light .sab-pill--status-active,
html[data-theme="light"] .sab-pill--status-active {
  background: rgba(13,148,72,.08);
  box-shadow: inset 0 0 0 1px rgba(13,148,72,.2);
}
html.light .sab-pill--status-blocked,
html[data-theme="light"] .sab-pill--status-blocked {
  background: rgba(220,38,38,.06);
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.2);
}

html.light .sab-kebab-menu,
html[data-theme="light"] .sab-kebab-menu {
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.98) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 12px 32px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.04);
}
html.light .sab-kebab-item,
html[data-theme="light"] .sab-kebab-item { color: var(--ink-2); }
html.light .sab-kebab-item:hover,
html[data-theme="light"] .sab-kebab-item:hover { background: rgba(0,0,0,.04); color: var(--ink); }
html.light .sab-kebab-item--danger,
html[data-theme="light"] .sab-kebab-item--danger { color: var(--red); }
html.light .sab-kebab-item--danger:hover,
html[data-theme="light"] .sab-kebab-item--danger:hover { background: rgba(220,38,38,.06); color: var(--red); }
html.light .sab-kebab-sep,
html[data-theme="light"] .sab-kebab-sep { background: rgba(0,0,0,.06); }

html.light .sab-side-empty-icon,
html[data-theme="light"] .sab-side-empty-icon {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
html.light .sab-detail-kv,
html[data-theme="light"] .sab-detail-kv { border-bottom-color: rgba(0,0,0,.06); }
html.light .sab-detail-actions,
html[data-theme="light"] .sab-detail-actions { border-top-color: rgba(0,0,0,.06); }

html.light .sab-mini-tabs,
html[data-theme="light"] .sab-mini-tabs {
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
html.light .sab-mini-tab.is-active,
html[data-theme="light"] .sab-mini-tab.is-active {
  background: rgba(0,0,0,.06);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

html.light .sab-empty-state,
html[data-theme="light"] .sab-empty-state {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .sab-skeleton-row,
html[data-theme="light"] .sab-skeleton-row {
  background: linear-gradient(90deg,
    rgba(0,0,0,.03) 0%,
    rgba(0,0,0,.07) 50%,
    rgba(0,0,0,.03) 100%);
  background-size: 200% 100%;
}

html.light .sab-deferred-badge,
html[data-theme="light"] .sab-deferred-badge {
  color: var(--gold);
  background: rgba(150,117,10,.08);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Session 13.2 — Plans surface
   Reuses 13.1 .sab-row / .sab-rows / .sab-pill / .sab-toolbar / .sab-side-empty
   / .sab-detail-kv / .team2-card / .team2-metrics primitives. Only adds
   slot-specific helpers required by the Plans-row content shape (price,
   feature-list rendering inside the detail drawer).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Plans row — keep grid identical to .sab-row (40px avatar / 1fr main / auto
   actions); only the description sub-line gets a 2-line clamp so long
   marketing copy never breaks the row height. */
.sab-row--plan .sab-row-sub {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Inline price chip surfaced in the row toplineNo new color — reuses --ink
   plus tabular-nums so the digit baseline aligns with adjacent pills. */
.sab-row-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
}
.sab-row-price-currency {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-right: 4px;
}

/* Detail drawer body — features list. Glass pill rows that match
   .sab-detail-kv chrome. */
.sab-feature-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.sab-feature-list-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 12px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.sab-feature-list-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-top: 1px;
}
.sab-feature-list-item-icon svg { width: 14px; height: 14px; }
.sab-feature-list-empty {
  font-size: 12px;
  color: var(--ink-4);
  padding: 10px 12px;
  text-align: center;
  background: rgba(255,255,255,.015);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

html.light .sab-feature-list-item,
html[data-theme="light"] .sab-feature-list-item {
  background: rgba(0,0,0,.02);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .sab-feature-list-empty,
html[data-theme="light"] .sab-feature-list-empty {
  background: rgba(0,0,0,.015);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Plans detail price block — large value + currency kicker. Reuses
   --ink/--ink-4 + tabular-nums; weight 200 per Premium Spec §2.1 metric
   value rule (large display number = thin). */
.sab-plan-price-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 0 10px;
}
.sab-plan-price-amount {
  font-size: 28px;
  font-weight: 200;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sab-plan-price-currency {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sab-plan-price-period {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: 4px;
}

/* Tier pill for plan rows — gold variant when active, muted when archived.
   Reuses .sab-pill base; only adds the archived modifier. */
.sab-pill--archived {
  color: var(--ink-4);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
html.light .sab-pill--archived,
html[data-theme="light"] .sab-pill--archived {
  background: rgba(0,0,0,.025);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Detail drawer hero variant for plans — narrower than business hero. */
.sab-detail-plan-hero {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 4px;
}
.sab-detail-plan-hero .sab-detail-avatar { font-size: 17px; }

/* Edit-plan footer split layout — destructive on the left, primary group on
   the right. Mirrors the .sab-modal-foot pattern but allows the spacer flex. */
#sa-plan-edit-modal .sab-modal-foot { flex-wrap: wrap; }

/* Plans surface: small breakpoint — collapse pills/price-chip stack. */
@media (max-width: 600px) {
  .sab-row--plan .sab-row-topline { gap: 6px; }
  .sab-plan-price-amount { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Session 13.2 — Tickets/KB surface
   Reuses the 13.1 .sab-row / .sab-rows / .sab-pill / .sab-toolbar /
   .sab-side-empty / .sab-detail-* / .sab-modal-* primitives. Only adds
   slot-specific helpers that the Tickets-row + KB-row content shapes need:
   sub-tabs (top-of-panel sized), collapsible toolbar disclosure, KB row
   selection checkbox frame, ticket message clamp, and detail-drawer
   thread placeholder. All colors via tokens; light-mode mirrors below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Top-of-panel sub-tabs — slightly larger than the sidecard mini-tabs since
   they sit at panel level (not inside a card). Font size + padding nudge
   the visual weight up to "page navigation" rather than "inspector segment". */
.sab-mini-tabs.sab-subtabs {
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 10px;
}
.sab-mini-tabs.sab-subtabs .sab-mini-tab {
  /* Session 13.2 iter-1 Order 4 fix: 36 → 44 to honor Apple HIG hit target.
     Compound selector specificity beat the base .sab-mini-tab 44px rule.
     Padding bumped to 11px to keep the visual band tight inside the 44px. */
  padding: 11px 16px;
  font-size: 12px;
  min-height: 44px;
  border-radius: 8px;
}

/* Collapsible toolbar disclosure (Bulk import / delete in the KB sub-panel).
   Keeps the toolbar slim by default; expands to reveal file pickers + bulk
   actions on demand. The summary row is glass-styled to feel like a button
   without competing with primary CTAs. */
.sab-toolbar-details {
  margin-top: 4px;
  margin-bottom: 12px;
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.022) 0%, rgba(255,255,255,.008) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  padding: 4px 6px;
  transition: box-shadow 180ms var(--spring);
}
.sab-toolbar-details[open] {
  padding: 4px 6px 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 16px rgba(0,0,0,.18);
}
.sab-toolbar-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  user-select: none;
  border-radius: 10px;
  min-height: 40px;
  transition: color 150ms var(--spring), background 150ms var(--spring);
}
.sab-toolbar-summary::-webkit-details-marker { display: none; }
.sab-toolbar-summary:hover { color: var(--ink-2); background: rgba(255,255,255,.03); }
.sab-toolbar-summary:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.4),
    0 0 0 3px var(--gold-glow-ring);
}
.sab-toolbar-summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 180ms var(--spring);
  flex-shrink: 0;
}
.sab-toolbar-details[open] .sab-toolbar-summary::before {
  transform: rotate(90deg);
}
.sab-toolbar.sab-toolbar--inset {
  margin: 0 6px;
  padding: 12px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Inline checkbox group used in toolbars (Publish imported, Select all
   visible). Min-height aligns with the 44px touch-target rule. */
.sab-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
  user-select: none;
}
.sab-checkbox-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* KB row checkbox slot — replaces the 40px avatar with a square checkbox
   tile that reads as both selection affordance AND row-leading visual. The
   initial letter shows when unchecked; the gold check appears when checked. */
.sab-row--kb {
  grid-template-columns: 40px 1fr auto;
}
.sab-row-check {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sab-row-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.sab-row-check-frame {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 160ms var(--spring);
  font-variant-numeric: tabular-nums;
}
.sab-row-check input[type="checkbox"]:focus-visible + .sab-row-check-frame {
  box-shadow:
    inset 0 0 0 2px rgba(200,160,76,.5),
    0 0 0 3px var(--gold-glow-ring);
}
.sab-row-check input[type="checkbox"]:checked + .sab-row-check-frame {
  background: linear-gradient(135deg, rgba(200,160,76,.22) 0%, rgba(200,160,76,.10) 100%);
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.4);
  color: var(--gold);
  /* Replace the initial letter with a gold check mark via SVG mask. */
  position: relative;
  font-size: 0;
}
.sab-row-check input[type="checkbox"]:checked + .sab-row-check-frame::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

/* Ticket row sub-line: a 2-line clamp on the message preview prevents long
   pastes from breaking the queue rhythm. The meta line below reuses the
   .sab-row-sub helper but turns lighter for the timestamp tail. */
.sab-row--ticket .sab-row-sub--ticket {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
}
.sab-row--ticket .sab-row-sub--meta {
  font-size: 11px;
  color: var(--ink-5, var(--ink-4));
  margin-top: 4px;
}

/* Lang/visibility pills inside the KB row — neutral chrome (no left dot)
   so the published/draft pill remains the visual anchor of the topline. */
.sab-pill.sab-pill--lang,
.sab-pill.sab-pill--vis {
  text-transform: lowercase;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* Detail-drawer KV value variants — wide message bodies wrap; mono is for
   IDs (already shipped). */
.sab-detail-kv-value--message {
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.5;
  white-space: pre-wrap;
  font-variant-numeric: normal;
}

/* Detail-drawer dropdown grid — uses the same .sab-modal-field-grid pattern
   as the modal body so the 2-up grid feels native to the drawer. */
.sab-detail-fields {
  margin-top: 12px;
}

/* Conversation thread placeholder inside the ticket detail drawer. Uses
   .sab-empty-state chrome; the wrapping div lets us add a subtle top border
   to separate it from the action row above. */
.sab-thread-placeholder {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Modal field-grid — used by KB editor to lay out 2-up rows. Three sizing
   variants mirror the pre-13.2 form-grid templates (1fr 160px, 1fr 220px,
   1fr 1fr) so the existing field-width relationships are preserved. */
.sab-modal-field-grid {
  display: grid;
  gap: 12px;
}
.sab-modal-field-grid--2-thin   { grid-template-columns: 1fr 180px; }
.sab-modal-field-grid--2-thick  { grid-template-columns: 1fr 240px; }
.sab-modal-field-grid--2-equal  { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .sab-modal-field-grid--2-thin,
  .sab-modal-field-grid--2-thick,
  .sab-modal-field-grid--2-equal { grid-template-columns: 1fr; }
}

/* Light-mode mirrors. Same alphas as elsewhere — black on white instead of
   white on black, but the visual relationships stay intact. */
html.light .sab-toolbar-details,
html[data-theme="light"] .sab-toolbar-details {
  background: linear-gradient(180deg, rgba(0,0,0,.018) 0%, rgba(0,0,0,.008) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .sab-toolbar-details[open],
html[data-theme="light"] .sab-toolbar-details[open] {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 16px rgba(0,0,0,.06);
}
html.light .sab-toolbar-summary:hover,
html[data-theme="light"] .sab-toolbar-summary:hover { background: rgba(0,0,0,.025); }
html.light .sab-toolbar.sab-toolbar--inset,
html[data-theme="light"] .sab-toolbar.sab-toolbar--inset {
  background: rgba(0,0,0,.015);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
html.light .sab-row-check-frame,
html[data-theme="light"] .sab-row-check-frame {
  background: linear-gradient(135deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.015) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  color: var(--ink-3);
}
html.light .sab-row-check input[type="checkbox"]:checked + .sab-row-check-frame,
html[data-theme="light"] .sab-row-check input[type="checkbox"]:checked + .sab-row-check-frame {
  background: linear-gradient(135deg, rgba(150,117,10,.16) 0%, rgba(150,117,10,.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.4);
  color: var(--gold);
}
html.light .sab-thread-placeholder,
html[data-theme="light"] .sab-thread-placeholder { border-top-color: rgba(0,0,0,.05); }
html.light .sab-row--ticket .sab-row-sub--meta,
html[data-theme="light"] .sab-row--ticket .sab-row-sub--meta { color: var(--ink-4); }

/* Tickets/KB surface narrow-breakpoint */
@media (max-width: 900px) {
  .sab-mini-tabs.sab-subtabs { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .sab-row--ticket .sab-row-pills { gap: 4px; }
  .sab-row--ticket .sab-row-sub--ticket { -webkit-line-clamp: 3; }
}


/* ─────────────────────────────────────────────
   Touch tooltip (Phase A T2C)
   Long-press reveal for `title`-bearing elements on touch devices.
   Pure additive: desktop hover behavior unchanged.
   ───────────────────────────────────────────── */
.sfy-touch-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: 280px;
  padding: 10px 14px;
  background: var(--elevated, #1A1A22);
  color: var(--ink, #F0F0F4);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 8px 32px rgba(0,0,0,.45),
    0 0 60px rgba(200,160,76,.05);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.96);
  transition: opacity .18s cubic-bezier(.16, 1, .3, 1),
              transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.sfy-touch-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
html[data-theme="light"] .sfy-touch-tooltip,
html.light .sfy-touch-tooltip {
  background: rgba(255,255,255,.96);
  color: var(--ink, #1C1917);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 8px 32px rgba(0,0,0,.18);
}

/* ─────────────────────────────────────────────
   Dashboard quick-actions grouping (Phase A T3A)

   Phase A Council batch 2 Order 2: scoped to a `--grouped` modifier
   class so we don't collide with the `.dash-online-action-grid` rule
   already declared earlier in this file (the older `display: flex
   !important` rule that the developer-mode dev-card consumer at
   dashboard_online_views.js:976 relies on stays untouched). The
   renderer adds `--grouped` to the host element only when there's
   more than one group.
   ───────────────────────────────────────────── */
.dash-online-action-grid--grouped {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
}
.dash-online-action-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-online-action-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-left: 2px;
}
.dash-online-action-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-online-action-group-row .btn {
  flex: 0 0 auto;
}
@media (max-width: 600px) {
  .dash-online-action-group-row {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }
  .dash-online-action-group-row .btn {
    width: 100%;
  }
}