/*
  Shemify Shell Override — Tesla/iOS Grade
  ==========================================
  Targets the ACTUAL DOM classes injected by newappui_app.js
  This file loads AFTER shemify-ui.css to override shell defaults.
*/

/* ═══════════════════════════════════════════
   NUI HEADER — Glassmorphic top bar
   ═══════════════════════════════════════════ */
/* Header spans CONTENT AREA ONLY — offset by sidebar width */
.nui-app-header,
header.app-header.nui-app-header {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: var(--nui-sidebar-width, 258px) !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  padding: 0 20px !important;
  background: rgba(6,6,8,.7) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.3) !important;
  transition: left .25s var(--spring) !important;
}
/* When sidebar is collapsed */
body.nui-sidebar-collapsed .nui-app-header {
  left: var(--nui-sidebar-collapsed-width, 64px) !important;
}
/* Content needs top padding to account for fixed header */
.dashboard-shell .content {
  padding-top: 56px !important;
}
html.light .nui-app-header,
html[data-theme="light"] .nui-app-header,
html.light header.app-header.nui-app-header,
html[data-theme="light"] header.app-header.nui-app-header {
  background: rgba(250,250,248,.8) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.03) !important;
}

/* Move the header INSIDE the content area, not above the grid */
body[data-app-view="dashboard"] #dashboard-section > .dashboard-shell > .content > .nui-app-header,
body[data-app-view="dashboard"] .nui-app-header {
  /* Header should be a child of .content, not .dashboard-shell */
}

/* The sidebar toggle in header — hide the brand duplicate, just show toggle */
.nui-app-header .brand { display: none !important; }
.nui-app-header .tagline { display: none !important; }
.nui-sidebar-toggle {
  display: flex !important;
}

/* The sidebar toggle icons */
.nui-sidebar-toggle-icon { display: flex; align-items: center; justify-content: center; }
.nui-sidebar-toggle-icon svg { width: 18px; height: 18px; }
.nui-sidebar-toggle-icon-close { display: none; }
body.nui-sidebar-collapsed .nui-sidebar-toggle-icon-open { display: none; }
body.nui-sidebar-collapsed .nui-sidebar-toggle-icon-close { display: flex; }

/* Header sections */
.app-header-left {
  display: flex; align-items: center; gap: 12px;
}
.app-header-center {
  flex: 1; display: flex; justify-content: center; padding: 0 20px;
}
.app-header-right {
  display: flex; align-items: center; gap: 8px;
}

/* Sidebar toggle in header */
.nui-sidebar-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: none;
  background: rgba(255,255,255,.04);
  color: var(--ink-3); cursor: pointer;
  transition: all .15s var(--spring);
}
.nui-sidebar-toggle:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.nui-sidebar-toggle svg { width: 18px; height: 18px; }
html.light .nui-sidebar-toggle { background: rgba(0,0,0,.04); }
html.light .nui-sidebar-toggle:hover { background: rgba(0,0,0,.08); }

/* Brand in header */
.nui-app-header .brand {
  display: flex; align-items: center; gap: 10px;
}
.nui-app-header .brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  display: flex; align-items: center; justify-content: center;
  color: var(--void); font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 12px rgba(200,160,76,.2);
}
.nui-app-header .brand-text-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.nui-app-header .brand-text-sub { font-size: 9px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.nui-app-header .tagline { display: none; }

/* Search bar in header */
.nui-header-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; min-width: 240px; max-width: 400px; width: 100%;
  background: rgba(255,255,255,.04); border: none; border-radius: 10px;
  font-size: 13px; color: var(--ink-3); cursor: pointer;
  transition: all .15s;
}
.nui-header-search:hover { background: rgba(255,255,255,.06); }
.nui-header-search-icon { display: flex; width: 16px; height: 16px; opacity: .4; }
.nui-header-search-icon svg { width: 16px; height: 16px; }
.nui-header-search input { border: none; background: transparent; color: var(--ink); font-family: var(--font); font-size: 13px; outline: none; width: 100%; }
.nui-header-search input::placeholder { color: var(--ink-4); }
.nui-header-search-shortcut, .nui-header-search kbd {
  margin-left: auto; font-size: 10px; padding: 2px 6px;
  background: rgba(255,255,255,.06); border-radius: 4px; color: var(--ink-5); font-family: var(--font);
}
html.light .nui-header-search { background: rgba(0,0,0,.04); }
html.light .nui-header-search:hover { background: rgba(0,0,0,.06); }

/* Mode switch — DELETED in singleview3. The 3-mode UX (Simple / Design /
   Advanced) was collapsed to a single hard-pinned "advanced" view in
   singleview2. No element with class `.sf-mode-switch*` is rendered
   anywhere in the app anymore. */

/* Header action buttons */
.nui-app-header .header-actions {
  display: flex; align-items: center; gap: 6px;
}

/* LIVE indicator */
.nui-live-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: rgba(74,222,128,.1); color: var(--green);
}
.nui-live-indicator::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px rgba(74,222,128,.5);
  animation: pulse-green 2.8s ease-in-out infinite;
}

/* Quick action button */
.nui-quick-action {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; border: none;
  background: rgba(255,255,255,.04); color: var(--ink-2);
  cursor: pointer; transition: all .15s var(--spring);
}
.nui-quick-action:hover { background: var(--gold-glow); color: var(--gold); }
.nui-quick-action svg { width: 14px; height: 14px; }
html.light .nui-quick-action { background: rgba(0,0,0,.04); }

/* Notification dropdown wrapper */
#nui-notifications-wrap {
  display: flex; align-items: center;
}
#nui-notifications-wrap .icon-btn,
#nui-notifications-wrap button {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: none;
  background: rgba(255,255,255,.04); color: var(--ink-3);
  cursor: pointer; transition: all .15s; position: relative;
}
#nui-notifications-wrap .icon-btn:hover { background: rgba(255,255,255,.08); color: var(--ink); }
#nui-notifications-wrap svg { width: 17px; height: 17px; }

/* Theme toggle */
#theme-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-3) !important;
  cursor: pointer !important; transition: all .15s !important;
  padding: 0 !important;
}
#theme-toggle:hover { background: rgba(255,255,255,.08) !important; color: var(--ink) !important; }
#theme-toggle svg { width: 17px !important; height: 17px !important; }
#theme-toggle .icon-sun { display: none; }
#theme-toggle .icon-moon { display: block; }
html.light #theme-toggle .icon-sun,
html[data-theme="light"] #theme-toggle .icon-sun { display: block; }
html.light #theme-toggle .icon-moon,
html[data-theme="light"] #theme-toggle .icon-moon { display: none; }
html.light #theme-toggle { background: rgba(0,0,0,.04) !important; }

/* Profile toggle */
.nui-profile-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold-glow); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: none; cursor: pointer;
  transition: box-shadow .2s;
}
.nui-profile-toggle:hover { box-shadow: 0 0 0 2px var(--gold-glow-ring), 0 0 20px rgba(200,160,76,.1); }
.nui-avatar { font-size: 12px; font-weight: 700; }

/* ═══════════════════════════════════════════
   SIDEBAR — Glassmorphic with golden accents
   ═══════════════════════════════════════════ */
.sidebar {
  background: 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,.6), rgba(10,10,14,.85)) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 2px 0 40px rgba(0,0,0,.4) !important;
  border-right: none !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;
}

/* Sidebar brand */
.nui-sidebar-brand {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 18px 20px;
}
.nui-sidebar-brand-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  display: flex; align-items: center; justify-content: center;
  color: var(--void) !important; font-weight: 800; font-size: 17px;
  box-shadow: 0 4px 20px rgba(200,160,76,.25), 0 0 40px rgba(200,160,76,.08);
  animation: logo-breathe 3s ease-in-out infinite;
}
.nui-sidebar-brand-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.nui-sidebar-brand-sub { font-size: 11px; color: var(--ink-4); }

/* Sidebar status row */
.nui-sidebar-status-row {
  padding: 0 18px 12px; display: flex; gap: 6px; flex-wrap: wrap;
}
.nui-workspace-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-size: 12px; font-weight: 500; color: var(--ink-2);
}
html.light .nui-workspace-pill { background: rgba(0,0,0,.03); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* Plan chip */
.plan-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.plan-chip.free { background: var(--green-glow); color: var(--green); }
.plan-chip.premium, .plan-chip.enterprise { background: var(--gold-glow); color: var(--gold); }

/* Hide legacy sidebar title */
.sidebar-title, .nui-legacy-sidebar-title { display: none !important; }

/* Sidebar header — location switcher area */
.sidebar-header {
  padding: 4px 14px 8px;
}

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

/* Menu section titles (group labels) */
.nui-menu-section-title,
.menu-section-title {
  padding: 20px 14px 7px !important;
  font-size: 9px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .16em !important;
  color: var(--ink-5) !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
.nui-menu-section-title::after,
.menu-section-title::after {
  content: '' !important; flex: 1 !important; height: 1px !important;
  background: rgba(255,255,255,.03) !important;
}
html.light .nui-menu-section-title::after { background: rgba(0,0,0,.04) !important; }

/* Menu items */
.sidebar .menu-button,
#main-menu .menu-button {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 10px 14px !important; margin: 2px 4px !important;
  border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important;
  color: var(--ink-3) !important; background: transparent !important;
  border: none !important; cursor: pointer !important;
  transition: all .2s var(--spring) !important;
  text-decoration: none !important; position: relative !important;
}
.sidebar .menu-button:hover,
#main-menu .menu-button:hover {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.03) !important;
  transform: translateX(2px) !important;
}
/* Active menu item — golden glow */
.sidebar .menu-button.active,
#main-menu .menu-button.active {
  color: var(--gold) !important;
  background: linear-gradient(90deg, rgba(200,160,76,.1), rgba(200,160,76,.03)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.1), 0 0 20px rgba(200,160,76,.04) !important;
}
.sidebar .menu-button.active::before,
#main-menu .menu-button.active::before {
  content: '' !important; position: absolute !important; left: -2px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 3px !important; height: 20px !important;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important;
  border-radius: 0 3px 3px 0 !important;
  box-shadow: 0 0 10px rgba(200,160,76,.5), 0 0 20px rgba(200,160,76,.2) !important;
}
html.light .sidebar .menu-button { color: var(--ink-3) !important; }
html.light .sidebar .menu-button:hover { background: rgba(0,0,0,.03) !important; color: var(--ink-2) !important; }
html.light .sidebar .menu-button.active {
  color: var(--gold) !important;
  background: linear-gradient(90deg, rgba(150,117,10,.08), rgba(150,117,10,.02)) !important;
}
html.light .sidebar .menu-button.active::before {
  background: var(--gold) !important;
  box-shadow: 0 0 8px rgba(150,117,10,.4) !important;
}

/* Menu icons */
.nui-menu-icon { display: flex !important; width: 18px !important; height: 18px !important; opacity: .3 !important; transition: all .2s !important; }
.menu-button:hover .nui-menu-icon { opacity: .55 !important; }
.menu-button.active .nui-menu-icon {
  opacity: 1 !important; color: var(--gold) !important;
  filter: drop-shadow(0 0 4px rgba(200,160,76,.3)) !important;
}

/* PRO badges */
.menu-badge.premium,
.menu-badge.nui-text-badge {
  display: inline-flex !important;
  padding: 2px 7px !important; font-size: 8px !important; font-weight: 700 !important;
  background: var(--gold-glow) !important; color: var(--gold) !important;
  border-radius: 20px !important; letter-spacing: .04em !important;
  margin-left: auto !important;
}

/* Sidebar footer */
.nui-sidebar-footer {
  padding: 14px 14px; margin-top: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
html.light .nui-sidebar-footer { box-shadow: inset 0 1px 0 rgba(0,0,0,.06); }

.nui-sidebar-footer-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.nui-sidebar-footer-card:hover { background: rgba(255,255,255,.03); }
html.light .nui-sidebar-footer-card:hover { background: rgba(0,0,0,.03); }

.nui-sidebar-footer-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold-glow); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.nui-sidebar-footer-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.nui-sidebar-footer-sub { font-size: 10px; color: var(--ink-4); }

/* Sidebar utility row */
.nui-sidebar-utility {
  display: flex; gap: 4px; padding: 8px 14px 4px;
}
.nui-sidebar-utility-item {
  padding: 6px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 500; color: var(--ink-4);
  background: rgba(255,255,255,.03); border: none; cursor: pointer;
  transition: all .12s; font-family: var(--font);
}
.nui-sidebar-utility-item:hover { background: rgba(255,255,255,.06); color: var(--ink-2); }

/* ═══════════════════════════════════════════
   CONTENT AREA — Dashboard zone
   ═══════════════════════════════════════════ */
/* Hide old content-header when nui-app-header is present */
body[data-app-view="dashboard"] .content-header {
  display: none !important;
}

/* Content tagline (page title) */
.content-tagline {
  padding: 20px 28px 0;
}
#current-page-title {
  font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
}
#current-page-tagline {
  font-size: 12px; color: var(--ink-4); margin-left: 8px;
}

/* Dashboard placeholder / content */
.content-placeholder,
#dashboard-placeholder {
  padding: 20px 28px 40px;
}

/* Page sections */
.page {
  padding: 20px 28px;
}

/* ═══════════════════════════════════════════
   DROPDOWNS (injected by shell)
   ═══════════════════════════════════════════ */
.nui-dropdown {
  position: absolute; z-index: 200;
  background: var(--floating);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 14px; padding: 4px; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
}
html.light .nui-dropdown {
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.06);
}
.nui-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all .12s;
  border: none; background: none; width: 100%; text-align: left; font-family: var(--font);
}
.nui-dropdown-item:hover { background: rgba(255,255,255,.05); color: var(--ink); }
html.light .nui-dropdown-item:hover { background: rgba(0,0,0,.04); }
.nui-dropdown-separator { height: 1px; background: rgba(255,255,255,.04); margin: 4px 0; }

/* ═══════════════════════════════════════════
   NOTIFICATIONS PANEL
   ═══════════════════════════════════════════ */
.nui-notifications-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw);
  z-index: 500; background: var(--base);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: -4px 0 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s var(--spring);
}
.nui-notifications-panel.open { transform: translateX(0); }

/* ═══ POS PAGE OVERRIDE ═══ */

/* Two-column grid layout — products (1fr) + cart (358px) */
#pos-page .pos-layout {
  display: grid !important;
  grid-template-columns: 1fr 358px !important;
  background: linear-gradient(180deg, rgba(22,22,30,1) 0%, rgba(16,16,22,1) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 8px rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.4),
    0 40px 100px rgba(0,0,0,.3),
    0 0 80px rgba(200,160,76,.03) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}
@media (max-width: 1100px) {
  #pos-page .pos-layout { grid-template-columns: 1fr 320px !important; }
}
@media (max-width: 767px) {
  #pos-page .pos-layout { grid-template-columns: 1fr !important; }
}

/* Products panel — slightly raised surface */
#pos-page .pos-panel-products {
  background: linear-gradient(180deg, rgba(22,22,30,1) 0%, rgba(16,16,22,1) 100%) !important;
  border-right: none !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05) !important;
}

/* Cart panel — deeper/darker recessed surface */
#pos-page .pos-panel-cart {
  background: linear-gradient(180deg, rgba(10,10,14,1) 0%, rgba(8,8,12,1) 100%) !important;
  border-left: none !important;
}

/* Panel head — no hard border, use subtle inset shadow */
#pos-page .pos-panel-head {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04) !important;
  background: transparent !important;
}

/* Category pills — golden active state + glow */
#pos-page .pos-tab {
  background: transparent !important;
  border: none !important;
  color: var(--ink-4) !important;
  font-size: 11.5px !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  transition: all .18s var(--spring) !important;
}
#pos-page .pos-tab:hover:not(.active) {
  color: var(--ink-2) !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  transform: scale(1.03) !important;
}
#pos-page .pos-tab.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: var(--void) !important;
  border-color: transparent !important;
  box-shadow:
    0 2px 14px rgba(200,160,76,.3),
    0 0 30px rgba(200,160,76,.1),
    inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Tabs wrap — no hard border */
#pos-page .pos-tabs-wrap {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03) !important;
  background: transparent !important;
}

/* Search row — ghost style matching prototype */
#pos-page .pos-search-row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
#pos-page .pos-search-row:focus-within {
  box-shadow: none !important;
  border-color: transparent !important;
}
#pos-page .pos-search {
  padding: 18px 24px !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04) !important;
  border-bottom: none !important;
}
#pos-page .pos-search-row input {
  font-size: 15px !important;
  padding: 0 !important;
}
#pos-page .pos-search-tip { display: none !important; }

/* Product cards — golden hover glow + lift effect, rounded 14px */
#pos-page .pos-product {
  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: none !important;
  border-radius: 14px !important;
  transition: all .22s var(--spring) !important;
}
#pos-page .pos-product:hover {
  background: linear-gradient(180deg, rgba(200,160,76,.1) 0%, rgba(200,160,76,.04) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.2),
    0 6px 20px rgba(0,0,0,.3),
    0 0 30px rgba(200,160,76,.06) !important;
  transform: translateY(-3px) scale(1.02) !important;
  border-color: transparent !important;
}
#pos-page .pos-product:active { transform: scale(.94) !important; }

/* Product media / image area — icon-style thumb */
#pos-page .pos-product-media {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  aspect-ratio: unset !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#pos-page .pos-product:hover .pos-product-media {
  background: rgba(200,160,76,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2), 0 0 14px rgba(200,160,76,.1) !important;
}

/* Product name + price */
#pos-page .pos-product-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ink-2) !important;
  -webkit-line-clamp: 2 !important;
  transition: color .15s !important;
}
#pos-page .pos-product:hover .pos-product-name { color: var(--ink) !important; }
#pos-page .pos-product-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(200,160,76,.25) !important;
}

/* Product footer — no hard top border */
#pos-page .pos-product-footer {
  border-top: none !important;
}

/* Hide the "Add" button in favor of tap-whole-card UX */
#pos-page .pos-add-btn { display: none !important; }

/* Cart footer — no base bg, keep dark */
#pos-page .pos-cart-footer {
  background: transparent !important;
  border-top: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding: 22px !important;
}

/* Cart items wrap — glass surface */
#pos-page .pos-cart-items-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Cart item rows — glass surface with hover */
#pos-page .pos-cart-item {
  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) !important;
  border-radius: var(--r-sm) !important;
  border-bottom: none !important;
  margin-bottom: 4px !important;
  transition: all .18s var(--spring) !important;
}
#pos-page .pos-cart-item:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.025) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.2) !important;
  transform: scale(1.01) !important;
}

/* Cart items head — clean */
#pos-page .pos-cart-items-head {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04) !important;
}

/* Cart thumb */
#pos-page .pos-cart-thumb {
  background: rgba(255,255,255,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  border: none !important;
}

/* Qty stepper buttons — hover scale */
#pos-page .pos-qty-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  font-size: 13px !important;
  color: var(--ink-3) !important;
  transition: all .15s var(--spring) !important;
}
#pos-page .pos-qty-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.1) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.2) !important;
  transform: scale(1.1) !important;
}
#pos-page .pos-qty-stepper {
  background: transparent !important;
  border: none !important;
}

/* Total row — weight-200 thin font stat number */
#pos-page .cart-summary-row.total {
  font-size: 26px !important;
  font-weight: 200 !important;
  letter-spacing: -.05em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ink) !important;
  padding-top: 14px !important;
  margin-top: 10px !important;
  border-top: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.4) !important;
}

/* Subtotal/tax rows */
#pos-page .cart-summary-row {
  font-size: 11px !important;
  color: var(--ink-4) !important;
  font-variant-numeric: tabular-nums !important;
}

/* GOLDEN PAY BUTTON — 3-layer glow */
#pos-page .pos-checkout-btn {
  width: 100% !important;
  padding: 16px !important;
  margin-top: 16px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 60%, #A07830 100%) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: var(--r) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  min-height: unset !important;
  box-shadow:
    0 4px 16px rgba(200,160,76,.35),
    0 0 40px rgba(200,160,76,.15),
    0 0 80px rgba(200,160,76,.06),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: all .25s var(--spring) !important;
}
#pos-page .pos-checkout-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #E0C070 0%, var(--gold-bright) 50%, var(--gold) 100%) !important;
  box-shadow:
    0 8px 30px rgba(200,160,76,.5),
    0 0 60px rgba(200,160,76,.25),
    0 0 120px rgba(200,160,76,.1),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(-2px) scale(1.02) !important;
}
#pos-page .pos-checkout-btn:active:not(:disabled) { transform: scale(.97) !important; }

/* Light mode overrides for POS */
html.light #pos-page .pos-layout,
html[data-theme="light"] #pos-page .pos-layout {
  background: linear-gradient(180deg, #FFFFFF, #FAFAF8) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 32px rgba(0,0,0,.06) !important;
}
html.light #pos-page .pos-panel-products,
html[data-theme="light"] #pos-page .pos-panel-products {
  background: #FFFFFF !important;
}
html.light #pos-page .pos-panel-cart,
html[data-theme="light"] #pos-page .pos-panel-cart {
  background: #F5F5F0 !important;
  border-left: 1px solid rgba(0,0,0,.06) !important;
}
html.light #pos-page .pos-tab.active,
html[data-theme="light"] #pos-page .pos-tab.active {
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(150,117,10,.2) !important;
}
html.light #pos-page .pos-product,
html[data-theme="light"] #pos-page .pos-product {
  background: rgba(0,0,0,.02) !important;
}
html.light #pos-page .pos-product:hover,
html[data-theme="light"] #pos-page .pos-product:hover {
  background: var(--gold-glow) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}
html.light #pos-page .pos-checkout-btn,
html[data-theme="light"] #pos-page .pos-checkout-btn {
  background: var(--gold) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(150,117,10,.15) !important;
}
html.light #pos-page .pos-checkout-btn:hover:not(:disabled),
html[data-theme="light"] #pos-page .pos-checkout-btn:hover:not(:disabled) {
  background: #7D6208 !important;
  box-shadow: 0 8px 32px rgba(150,117,10,.25) !important;
}

/* ═══════════════════════════════════════════
   DASHBOARD CARDS GLASS
   ═══════════════════════════════════════════ */

/* ─── .dash-card — gradient surface + inset glow border ─── */
.dash-card {
  background: linear-gradient(180deg, rgba(22,22,28,1) 0%, rgba(14,14,18,1) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 16px rgba(0,0,0,.3),
    0 16px 48px rgba(0,0,0,.25),
    0 0 60px rgba(200,160,76,.02) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .28s var(--spring) !important;
}
/* Ambient gold radial always visible, brightens on hover */
.dash-card::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  left: auto !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle, rgba(200,160,76,.1), transparent 65%) !important;
  pointer-events: none !important;
  opacity: .7 !important;
  transition: opacity .35s ease !important;
  transform: none !important;
  border-radius: 0 !important;
}
.dash-card:hover {
  background: linear-gradient(180deg, rgba(28,28,36,1) 0%, rgba(18,18,24,1) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 6px 24px rgba(0,0,0,.35),
    0 20px 60px rgba(0,0,0,.3),
    0 0 80px rgba(200,160,76,.04) !important;
  transform: translateY(-1px) !important;
}
.dash-card:hover::before {
  opacity: 1.5 !important;
}
html[data-theme="light"] .dash-card,
html.light .dash-card {
  background: linear-gradient(180deg, #ffffff 0%, #FAFAF8 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05),
    0 4px 16px rgba(0,0,0,.05),
    0 16px 48px rgba(0,0,0,.04) !important;
}
html[data-theme="light"] .dash-card::before,
html.light .dash-card::before {
  background: radial-gradient(circle, rgba(150,117,10,.08), transparent 65%) !important;
  opacity: .5 !important;
}
html[data-theme="light"] .dash-card:hover,
html.light .dash-card:hover {
  background: linear-gradient(180deg, #fff 0%, #F5F5F2 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.07),
    0 6px 24px rgba(0,0,0,.08),
    0 0 40px rgba(150,117,10,.04) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] .dash-card:hover::before,
html.light .dash-card:hover::before {
  opacity: 1 !important;
}

/* ─── .dash-online-mode-card — golden accent variant ─── */
.dash-online-mode-card {
  background: linear-gradient(135deg, rgba(22,22,28,1) 0%, rgba(200,160,76,.06) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.12),
    0 4px 24px rgba(0,0,0,.3),
    0 0 60px rgba(200,160,76,.04) !important;
}
html[data-theme="light"] .dash-online-mode-card,
html.light .dash-online-mode-card {
  background: linear-gradient(135deg, #ffffff 0%, rgba(150,117,10,.05) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.1),
    0 4px 24px rgba(0,0,0,.06) !important;
}

/* ─── .dash-online-mode-kicker — golden accent kicker text ─── */
.dash-online-mode-kicker {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  text-shadow: 0 0 12px rgba(200,160,76,.35) !important;
  margin-bottom: 6px !important;
}
html[data-theme="light"] .dash-online-mode-kicker,
html.light .dash-online-mode-kicker {
  text-shadow: none !important;
}

/* ─── .dash-online-stats-grid — unified strip, 1px gap separators ─── */
.dash-online-stats-grid {
  display: grid !important;
  gap: 1px !important;
  background: rgba(255,255,255,.05) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 16px rgba(0,0,0,.2) !important;
}
html[data-theme="light"] .dash-online-stats-grid,
html.light .dash-online-stats-grid {
  background: rgba(0,0,0,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

/* ─── .dash-online-stat — stat cell with ambient hover glow ─── */
.dash-online-stat {
  background: linear-gradient(180deg, rgba(22,22,28,1) 0%, rgba(16,16,20,1) 100%) !important;
  padding: 18px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .25s var(--spring) !important;
}
/* Always-on ambient gold radial, flares on hover */
.dash-online-stat::before {
  content: '' !important;
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  width: 120px !important;
  height: 120px !important;
  background: radial-gradient(circle, rgba(200,160,76,.09), transparent 65%) !important;
  pointer-events: none !important;
  opacity: .6 !important;
  transition: opacity .35s ease !important;
}
.dash-online-stat:hover {
  background: linear-gradient(180deg, rgba(28,28,36,1) 0%, rgba(20,20,26,1) 100%) !important;
  z-index: 1 !important;
}
.dash-online-stat:hover::before {
  opacity: 2 !important;
}
html[data-theme="light"] .dash-online-stat,
html.light .dash-online-stat {
  background: linear-gradient(180deg, #ffffff 0%, #FAFAF8 100%) !important;
}
html[data-theme="light"] .dash-online-stat::before,
html.light .dash-online-stat::before {
  background: radial-gradient(circle, rgba(150,117,10,.07), transparent 65%) !important;
}
html[data-theme="light"] .dash-online-stat:hover,
html.light .dash-online-stat:hover {
  background: linear-gradient(180deg, #fafafa 0%, #F5F5F2 100%) !important;
}

/* ─── .dash-online-stat-label — 10px uppercase, letter-spacing .1em ─── */
.dash-online-stat-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ─── .dash-online-stat-value — font-weight 200, 38px, letter-spacing -.05em ─── */
.dash-online-stat-value {
  font-size: 38px !important;
  font-weight: 200 !important;
  letter-spacing: -.05em !important;
  color: var(--ink) !important;
  line-height: 1 !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;
  position: relative !important;
  z-index: 1 !important;
}
html[data-theme="light"] .dash-online-stat-value,
html.light .dash-online-stat-value {
  text-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}

/* ─── .dash-kpi-grid — strip with 1px separators, multi-layer shadow ─── */
.dash-kpi-grid {
  background: rgba(255,255,255,.04) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 4px 16px rgba(0,0,0,.25),
    0 12px 36px rgba(0,0,0,.2) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
html[data-theme="light"] .dash-kpi-grid,
html.light .dash-kpi-grid {
  background: rgba(0,0,0,.04) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.05),
    0 4px 16px rgba(0,0,0,.05) !important;
}

/* ─── .dash-kpi — individual KPI tile with gradient + ambient radial ─── */
.dash-kpi {
  background: linear-gradient(180deg, rgba(20,20,26,1) 0%, rgba(14,14,18,1) 100%) !important;
  padding: 18px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .22s var(--spring) !important;
}
.dash-kpi::before {
  content: '' !important;
  position: absolute !important;
  top: -15px !important;
  right: -15px !important;
  width: 100px !important;
  height: 100px !important;
  background: radial-gradient(circle, rgba(200,160,76,.07), transparent 65%) !important;
  pointer-events: none !important;
  opacity: .5 !important;
  transition: opacity .3s ease !important;
}
.dash-kpi:hover {
  background: linear-gradient(180deg, rgba(26,26,34,1) 0%, rgba(18,18,24,1) 100%) !important;
  z-index: 1 !important;
}
.dash-kpi:hover::before {
  opacity: 1.8 !important;
}
html[data-theme="light"] .dash-kpi,
html.light .dash-kpi {
  background: linear-gradient(180deg, #ffffff 0%, #FAFAF8 100%) !important;
}
html[data-theme="light"] .dash-kpi::before,
html.light .dash-kpi::before {
  background: radial-gradient(circle, rgba(150,117,10,.07), transparent 65%) !important;
}
html[data-theme="light"] .dash-kpi:hover,
html.light .dash-kpi:hover {
  background: linear-gradient(180deg, #fafafa 0%, #F5F5F0 100%) !important;
}

/* ─── .dash-kpi-label — 10px uppercase, letter-spacing .1em ─── */
.dash-kpi-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ─── .dash-kpi-value — thin weight, tabular, depth shadow ─── */
.dash-kpi-value {
  font-size: 28px !important;
  font-weight: 200 !important;
  letter-spacing: -.05em !important;
  color: var(--ink) !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.4), 0 0 30px rgba(200,160,76,.03) !important;
  position: relative !important;
  z-index: 1 !important;
}
html[data-theme="light"] .dash-kpi-value,
html.light .dash-kpi-value {
  text-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

/* ─── Operator controls — golden hover glow on buttons inside dash cards ─── */
.dash-card .nui-btn,
.dash-card .dash-card-action,
.dash-card .operator-ctrl-btn {
  transition: all .2s var(--spring) !important;
}
.dash-card .nui-btn:hover,
.dash-card .dash-card-action:hover,
.dash-card .operator-ctrl-btn:hover {
  color: var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(200,160,76,.18),
    0 4px 16px rgba(200,160,76,.1),
    0 0 30px rgba(200,160,76,.05) !important;
}
html[data-theme="light"] .dash-card .nui-btn:hover,
html[data-theme="light"] .dash-card .dash-card-action:hover,
html[data-theme="light"] .dash-card .operator-ctrl-btn:hover,
html.light .dash-card .nui-btn:hover,
html.light .dash-card .dash-card-action:hover,
html.light .dash-card .operator-ctrl-btn:hover {
  box-shadow:
    0 0 0 1px rgba(150,117,10,.15),
    0 4px 16px rgba(150,117,10,.08) !important;
}

/* ─── Welcome / hero banner — animated gradient + ambient glow ─── */
.dash-welcome,
.nui-page-hero,
[class*="dash-hero"] {
  background: linear-gradient(
    135deg,
    rgba(200,160,76,.08) 0%,
    rgba(200,160,76,.04) 40%,
    rgba(96,165,250,.03) 70%,
    rgba(200,160,76,.06) 100%
  ) !important;
  background-size: 300% 300% !important;
  animation: dash-wlc-shift 8s ease infinite !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.14),
    0 0 40px rgba(200,160,76,.06),
    0 4px 24px rgba(0,0,0,.2) !important;
  position: relative !important;
  overflow: hidden !important;
}
.dash-welcome::before,
.nui-page-hero::before,
[class*="dash-hero"]::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;
  z-index: 0 !important;
}
html[data-theme="light"] .dash-welcome,
html.light .dash-welcome,
html[data-theme="light"] .nui-page-hero,
html.light .nui-page-hero {
  background: linear-gradient(135deg, rgba(150,117,10,.07), rgba(150,117,10,.03)) !important;
  background-size: auto !important;
  animation: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.12),
    0 4px 24px rgba(150,117,10,.06),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}
html[data-theme="light"] .dash-welcome::before,
html.light .dash-welcome::before,
html[data-theme="light"] .nui-page-hero::before,
html.light .nui-page-hero::before {
  background: radial-gradient(ellipse 60% 80% at 30% 40%, rgba(150,117,10,.1), transparent 70%) !important;
}

@keyframes dash-wlc-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES GLASS TREATMENT
   Tesla/iOS grade — applies to ALL inner page content areas.
   Targets classes emitted by pos.js, settings.js, staff.js,
   loyalty.js, timeclock.js, reports.js, and all other modules.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. PAGE CONTAINER ── */
.page {
  padding: 24px 28px 60px !important;
  min-height: 100% !important;
}

/* ── 2. GENERIC GLASS PANEL (card / panel / section) ── */
/* Shared surface rule: no solid border, inset box-shadow only */
.loy-panel,
.gc-panel,
.shop-card,
.support-card,
.debt-stat-card,
.debts-list-panel,
.debt-detail-panel,
.tc-hero,
.reports-card,
.reports-chart-wrap,
.settings-payroll-section,
.admin-list-item,
.mini-card,
.shop-order-modal-card,
.support-method {
  background: var(--raised) !important;
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 12px rgba(0,0,0,.22) !important;
  transition: box-shadow .2s var(--spring), background .2s var(--spring) !important;
}

/* Hover — subtle lift + gold whisper */
.loy-panel:hover,
.gc-panel:hover,
.shop-card:hover,
.support-card:hover,
.debt-stat-card:hover,
.reports-card:hover,
.admin-list-item:hover {
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.1),
    0 4px 24px rgba(0,0,0,.3),
    0 0 20px rgba(200,160,76,.03) !important;
}

/* ── 3. SETTINGS TABLE — reinforced glass ── */
.settings-table {
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 28px rgba(0,0,0,.3) !important;
}
.settings-table thead th {
  background: var(--elevated) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05) !important;
  color: var(--ink-3) !important;
}
.settings-table td {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03) !important;
  color: var(--ink) !important;
}
.settings-table tbody tr:last-child td {
  box-shadow: none !important;
}
.settings-table tbody tr:hover {
  background: rgba(255,255,255,.03) !important;
}
.settings-table tbody tr.active td {
  background: var(--gold-glow) !important;
}

/* ── 4. SA MODAL — glass floating layer ── */
.sa-modal {
  background: rgba(22,22,30,.92) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 32px 100px rgba(0,0,0,.7),
    0 0 80px rgba(0,0,0,.3) !important;
  border: none !important;
}
.sa-modal-head {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06) !important;
}
.sa-modal-foot {
  background: transparent !important;
  border-top: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ── 5. TEAM CARDS ── */
.team2-emp-card {
  background: var(--raised) !important;
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 12px rgba(0,0,0,.22) !important;
  transition: box-shadow .2s var(--spring), background .2s var(--spring) !important;
}
.team2-emp-card:hover {
  background: rgba(255,255,255,.02) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.14),
    0 4px 20px rgba(0,0,0,.3),
    0 0 20px rgba(200,160,76,.04) !important;
}
.team2-emp-card.active {
  background: var(--gold-glow) !important;
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.28),
    0 4px 28px rgba(200,160,76,.08) !important;
}

.team-list-item {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  transition: box-shadow .15s var(--spring) !important;
}
.team-list-item:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.1) !important;
}

.team-org-node {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.team-org-children {
  border-left: none !important;
  box-shadow: inset 2px 0 0 rgba(255,255,255,.05) !important;
}

/* ── 6. GIFT CARD PANEL ── */
.gc-panel {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 28px rgba(0,0,0,.28) !important;
}
.gc-panel-header {
  padding-bottom: 14px !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05) !important;
  margin-bottom: 4px !important;
}

/* ── 7. LOYALTY PANEL ── */
.loy-panel {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 28px rgba(0,0,0,.28) !important;
}
.loy-customer-card {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* ── 8. REPORTS GRID ── */
.reports-grid {
  gap: 14px !important;
}
.reports-card {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 16px rgba(0,0,0,.24) !important;
  padding: 18px !important;
}
.reports-chart-wrap {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 4px 24px rgba(0,0,0,.28) !important;
  padding: 20px !important;
}
.reports-controls {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04) !important;
}

/* ── 9. DEBTS PAGE ── */
.debts-list-panel {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 24px rgba(0,0,0,.28) !important;
}
.debts-list-panel-head {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05) !important;
}
.debts-item {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03) !important;
  color: var(--ink) !important;
}
.debts-item:last-child {
  box-shadow: none !important;
}
.debts-item:hover {
  background: rgba(255,255,255,.03) !important;
}
.debts-item.active {
  background: var(--gold-glow) !important;
  box-shadow: inset 3px 0 0 var(--gold), inset 0 -1px 0 rgba(255,255,255,.03) !important;
}
.debt-detail-panel {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 28px rgba(0,0,0,.3) !important;
}
.simple-list {
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
}
.simple-list-row {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03) !important;
}
.simple-list-row:last-child {
  box-shadow: none !important;
}

/* ── 10. TIMECLOCK PAGE ── */
.tc-hero {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 28px rgba(0,0,0,.3) !important;
}

/* ── 11. ONLINE STORE / SHOP ── */
.shop-card {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 24px rgba(0,0,0,.28) !important;
}
.shop-card-header {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05) !important;
}
.shop-chip {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  color: var(--ink-2) !important;
}
.shop-chip-accent {
  background: var(--gold-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.18) !important;
  color: var(--gold) !important;
}
.shop-order-modal-card {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.shop-cms-chip {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  color: var(--ink-2) !important;
}

/* sf-shop-online-* — storefront section panels */
[class*="sf-shop-online"] {
  background: var(--raised) !important;
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 16px rgba(0,0,0,.22) !important;
}

/* ── 12. SUPPORT CARD ── */
.support-card {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 28px rgba(0,0,0,.3) !important;
}
.support-method {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.16) !important;
  transition: box-shadow .15s var(--spring) !important;
}
.support-method:hover {
  box-shadow:
    inset 0 0 0 1px rgba(200,160,76,.12),
    0 4px 16px rgba(0,0,0,.24) !important;
}

/* ── 13. STATUS BADGES — semantic glow ── */
.badge,
.status-badge,
[class*="badge-"] {
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius: 20px !important;
}
.badge-green, .badge-active, .badge-paid, .badge-complete,
.status-badge.active, .status-badge.paid, .status-badge.complete {
  background: var(--green-glow) !important;
  color: var(--green) !important;
  box-shadow: inset 0 0 0 1px rgba(74,222,128,.15) !important;
}
.badge-red, .badge-inactive, .badge-overdue, .badge-failed,
.status-badge.inactive, .status-badge.overdue, .status-badge.failed {
  background: var(--red-glow) !important;
  color: var(--red) !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.15) !important;
}
.badge-amber, .badge-pending, .badge-partial,
.status-badge.pending, .status-badge.partial {
  background: var(--amber-glow) !important;
  color: var(--amber) !important;
  box-shadow: inset 0 0 0 1px rgba(251,191,36,.15) !important;
}
.badge-blue, .badge-info, .badge-processing,
.status-badge.info, .status-badge.processing {
  background: var(--blue-glow) !important;
  color: var(--blue) !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.15) !important;
}

/* ── 14. INPUTS — glass surface + golden focus ring ── */
.page input,
.page select,
.page textarea,
.content-placeholder input,
.content-placeholder select,
.content-placeholder textarea,
.sa-modal input,
.sa-modal select,
.sa-modal textarea,
.loy-panel input,
.loy-panel select,
.gc-panel input,
.gc-panel select,
.shop-card input,
.shop-card select,
.shop-card textarea {
  background: rgba(255,255,255,.03) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  color: var(--ink) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
  transition: box-shadow .15s var(--spring) !important;
}
.page input:focus,
.page select:focus,
.page textarea:focus,
.content-placeholder input:focus,
.content-placeholder select:focus,
.content-placeholder textarea:focus,
.sa-modal input:focus,
.sa-modal select:focus,
.sa-modal textarea:focus,
.loy-panel input:focus,
.loy-panel select:focus,
.gc-panel input:focus,
.gc-panel select:focus,
.shop-card input:focus,
.shop-card select:focus,
.shop-card textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--gold-glow-ring), inset 0 0 0 1px rgba(200,160,76,.2) !important;
}
.page input::placeholder,
.content-placeholder input::placeholder,
.sa-modal input::placeholder {
  color: var(--ink-4) !important;
}

/* ── 15. BUTTONS — default ghost + primary gold ── */
.btn-primary,
.btn-gold,
.action-btn-primary {
  background: var(--gold) !important;
  border: none !important;
  box-shadow: 0 2px 16px rgba(200,160,76,.2) !important;
  color: var(--void) !important;
  font-weight: 700 !important;
  border-radius: var(--r-sm) !important;
  transition: box-shadow .15s var(--spring), filter .15s !important;
}
.btn-primary:hover,
.btn-gold:hover,
.action-btn-primary:hover {
  box-shadow: 0 4px 24px rgba(200,160,76,.3) !important;
  filter: brightness(1.06) !important;
}

/* ── 16. EMPTY STATES ── */
.empty-state,
.page-empty,
.tc-empty,
.loy-empty,
.gc-empty,
.team2-empty,
.reports-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 20px !important;
  color: var(--ink-3) !important;
  font-size: 13px !important;
  text-align: center !important;
  gap: 12px !important;
}
.empty-state svg,
.page-empty svg,
.team2-empty svg {
  opacity: .25 !important;
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 4px !important;
}

/* ── 17. FLAG / ALERT BANNERS ── */
.flag-danger {
  background: var(--red-glow) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18) !important;
  color: var(--red) !important;
}
.dash-alert {
  background: var(--raised) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.18), 0 2px 12px rgba(248,113,113,.06) !important;
}

/* ── 18. SETTINGS UPGRADE BOX ── */
.settings-upgrade-box {
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important;
}

/* ── 19. PAYROLL + SETTINGS INNER COMPONENTS ── */
.settings-payroll-section {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 4px 24px rgba(0,0,0,.28) !important;
}
.settings-payroll-header {
  background: var(--elevated) !important;
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05) !important;
}
.settings-std-ded-item {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.settings-cancel-plan-box {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
.settings-cancel-reason-label {
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
  transition: box-shadow .15s var(--spring), background .15s var(--spring) !important;
}
.settings-cancel-reason-label:hover {
  background: var(--gold-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.22) !important;
}

/* ── 20. ADMIN LIST ── */
.admin-list-item {
  background: var(--elevated) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  transition: box-shadow .15s var(--spring), background .15s var(--spring) !important;
}
.admin-list-item:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.1) !important;
}
.admin-list-item.active {
  background: var(--gold-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.22) !important;
}

/* ── 21. TIMECLOCK + LOYALTY TABLE ROWS ── */
.tc-table td,
.tc-table th {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03) !important;
}
.tc-table tr:last-child td {
  box-shadow: none !important;
}
.tc-table tr:hover td {
  background: rgba(255,255,255,.02) !important;
}

/* ─────────────────────────────────────────────
   LIGHT MODE OVERRIDES
   rgba(255,255,255,...) borders flip to rgba(0,0,0,...).
   ───────────────────────────────────────────── */
html.light .loy-panel,
html[data-theme="light"] .loy-panel,
html.light .gc-panel,
html[data-theme="light"] .gc-panel,
html.light .shop-card,
html[data-theme="light"] .shop-card,
html.light .support-card,
html[data-theme="light"] .support-card,
html.light .debt-stat-card,
html[data-theme="light"] .debt-stat-card,
html.light .debts-list-panel,
html[data-theme="light"] .debts-list-panel,
html.light .debt-detail-panel,
html[data-theme="light"] .debt-detail-panel,
html.light .tc-hero,
html[data-theme="light"] .tc-hero,
html.light .reports-card,
html[data-theme="light"] .reports-card,
html.light .reports-chart-wrap,
html[data-theme="light"] .reports-chart-wrap,
html.light .settings-payroll-section,
html[data-theme="light"] .settings-payroll-section,
html.light .mini-card,
html[data-theme="light"] .mini-card,
html.light .shop-order-modal-card,
html[data-theme="light"] .shop-order-modal-card {
  background: var(--raised) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 2px 10px rgba(0,0,0,.05) !important;
}

html.light .loy-panel:hover,
html[data-theme="light"] .loy-panel:hover,
html.light .gc-panel:hover,
html[data-theme="light"] .gc-panel:hover,
html.light .shop-card:hover,
html[data-theme="light"] .shop-card:hover,
html.light .support-card:hover,
html[data-theme="light"] .support-card:hover,
html.light .debt-stat-card:hover,
html[data-theme="light"] .debt-stat-card:hover,
html.light .reports-card:hover,
html[data-theme="light"] .reports-card:hover {
  box-shadow:
    inset 0 0 0 1px rgba(150,117,10,.14),
    0 4px 16px rgba(0,0,0,.08) !important;
}

/* Settings table — light */
html.light .settings-table,
html[data-theme="light"] .settings-table {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 4px 16px rgba(0,0,0,.04) !important;
}
html.light .settings-table thead th,
html[data-theme="light"] .settings-table thead th {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
html.light .settings-table td,
html[data-theme="light"] .settings-table td {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04) !important;
}
html.light .settings-table tbody tr:last-child td,
html[data-theme="light"] .settings-table tbody tr:last-child td {
  box-shadow: none !important;
}
html.light .settings-table tbody tr:hover,
html[data-theme="light"] .settings-table tbody tr:hover {
  background: rgba(0,0,0,.02) !important;
}

/* SA modal — light */
html.light .sa-modal,
html[data-theme="light"] .sa-modal {
  background: var(--raised) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.07),
    0 24px 60px rgba(0,0,0,.12) !important;
}
html.light .sa-modal-head,
html[data-theme="light"] .sa-modal-head {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
html.light .sa-modal-foot,
html[data-theme="light"] .sa-modal-foot {
  box-shadow: inset 0 1px 0 rgba(0,0,0,.06) !important;
}

/* Team cards — light */
html.light .team2-emp-card,
html[data-theme="light"] .team2-emp-card {
  background: var(--raised) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 2px 8px rgba(0,0,0,.05) !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,.16),
    0 4px 14px rgba(0,0,0,.08) !important;
}
html.light .team2-emp-card.active,
html[data-theme="light"] .team2-emp-card.active {
  background: rgba(150,117,10,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.22) !important;
}
html.light .team-list-item,
html[data-theme="light"] .team-list-item {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .team-list-item:hover,
html[data-theme="light"] .team-list-item:hover {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12) !important;
}
html.light .team-org-node,
html[data-theme="light"] .team-org-node {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .team-org-children,
html[data-theme="light"] .team-org-children {
  box-shadow: inset 2px 0 0 rgba(0,0,0,.08) !important;
}

/* Gift card panel — light */
html.light .gc-panel-header,
html[data-theme="light"] .gc-panel-header {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}

/* Loyalty — light */
html.light .loy-customer-card,
html[data-theme="light"] .loy-customer-card {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}

/* Reports — light */
html.light .reports-card,
html[data-theme="light"] .reports-card {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 2px 10px rgba(0,0,0,.04) !important;
}
html.light .reports-chart-wrap,
html[data-theme="light"] .reports-chart-wrap {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 16px rgba(0,0,0,.04) !important;
}
html.light .reports-controls,
html[data-theme="light"] .reports-controls {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}

/* Debts — light */
html.light .debts-list-panel,
html[data-theme="light"] .debts-list-panel {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 16px rgba(0,0,0,.04) !important;
}
html.light .debts-list-panel-head,
html[data-theme="light"] .debts-list-panel-head {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
html.light .debts-item,
html[data-theme="light"] .debts-item {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04) !important;
}
html.light .debts-item:last-child,
html[data-theme="light"] .debts-item:last-child {
  box-shadow: none !important;
}
html.light .debts-item:hover,
html[data-theme="light"] .debts-item:hover {
  background: rgba(0,0,0,.02) !important;
}
html.light .debts-item.active,
html[data-theme="light"] .debts-item.active {
  background: rgba(150,117,10,.06) !important;
  box-shadow: inset 3px 0 0 var(--gold), inset 0 -1px 0 rgba(0,0,0,.04) !important;
}
html.light .debt-detail-panel,
html[data-theme="light"] .debt-detail-panel {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 16px rgba(0,0,0,.05) !important;
}
html.light .simple-list,
html[data-theme="light"] .simple-list {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07) !important;
}
html.light .simple-list-row,
html[data-theme="light"] .simple-list-row {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04) !important;
}
html.light .simple-list-row:last-child,
html[data-theme="light"] .simple-list-row:last-child {
  box-shadow: none !important;
}

/* TimeClock — light */
html.light .tc-hero,
html[data-theme="light"] .tc-hero {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 16px rgba(0,0,0,.05) !important;
}
html.light .tc-table td,
html.light .tc-table th,
html[data-theme="light"] .tc-table td,
html[data-theme="light"] .tc-table th {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.04) !important;
}
html.light .tc-table tr:last-child td,
html[data-theme="light"] .tc-table tr:last-child td {
  box-shadow: none !important;
}
html.light .tc-table tr:hover td,
html[data-theme="light"] .tc-table tr:hover td {
  background: rgba(0,0,0,.02) !important;
}

/* Online Store — light */
html.light .shop-card,
html[data-theme="light"] .shop-card {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 16px rgba(0,0,0,.04) !important;
}
html.light .shop-card-header,
html[data-theme="light"] .shop-card-header {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
html.light .shop-chip,
html[data-theme="light"] .shop-chip {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-2) !important;
}
html.light .shop-chip-accent,
html[data-theme="light"] .shop-chip-accent {
  background: rgba(150,117,10,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.16) !important;
  color: var(--gold) !important;
}
html.light .shop-order-modal-card,
html[data-theme="light"] .shop-order-modal-card {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .shop-cms-chip,
html[data-theme="light"] .shop-cms-chip {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
  color: var(--ink-2) !important;
}
html.light [class*="sf-shop-online"],
html[data-theme="light"] [class*="sf-shop-online"] {
  background: var(--raised) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 2px 8px rgba(0,0,0,.04) !important;
}

/* Support — light */
html.light .support-card,
html[data-theme="light"] .support-card {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 16px rgba(0,0,0,.05) !important;
}
html.light .support-method,
html[data-theme="light"] .support-method {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .support-method:hover,
html[data-theme="light"] .support-method:hover {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.14) !important;
}

/* Semantic badges — light */
html.light .badge-green, html[data-theme="light"] .badge-green,
html.light .badge-active, html[data-theme="light"] .badge-active,
html.light .badge-paid, html[data-theme="light"] .badge-paid,
html.light .badge-complete, html[data-theme="light"] .badge-complete,
html.light .status-badge.active, html[data-theme="light"] .status-badge.active,
html.light .status-badge.paid, html[data-theme="light"] .status-badge.paid,
html.light .status-badge.complete, html[data-theme="light"] .status-badge.complete {
  background: var(--green-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(13,148,72,.12) !important;
}
html.light .badge-red, html[data-theme="light"] .badge-red,
html.light .badge-inactive, html[data-theme="light"] .badge-inactive,
html.light .badge-overdue, html[data-theme="light"] .badge-overdue,
html.light .badge-failed, html[data-theme="light"] .badge-failed,
html.light .status-badge.inactive, html[data-theme="light"] .status-badge.inactive,
html.light .status-badge.overdue, html[data-theme="light"] .status-badge.overdue,
html.light .status-badge.failed, html[data-theme="light"] .status-badge.failed {
  background: var(--red-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.1) !important;
}
html.light .badge-amber, html[data-theme="light"] .badge-amber,
html.light .badge-pending, html[data-theme="light"] .badge-pending,
html.light .badge-partial, html[data-theme="light"] .badge-partial,
html.light .status-badge.pending, html[data-theme="light"] .status-badge.pending,
html.light .status-badge.partial, html[data-theme="light"] .status-badge.partial {
  background: var(--amber-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(180,83,9,.1) !important;
}
html.light .badge-blue, html[data-theme="light"] .badge-blue,
html.light .badge-info, html[data-theme="light"] .badge-info,
html.light .badge-processing, html[data-theme="light"] .badge-processing,
html.light .status-badge.info, html[data-theme="light"] .status-badge.info,
html.light .status-badge.processing, html[data-theme="light"] .status-badge.processing {
  background: var(--blue-glow) !important;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.1) !important;
}

/* Inputs — light */
html.light .page input,
html.light .page select,
html.light .page textarea,
html.light .content-placeholder input,
html.light .content-placeholder select,
html.light .content-placeholder textarea,
html.light .sa-modal input,
html.light .sa-modal select,
html.light .sa-modal textarea,
html.light .loy-panel input,
html.light .loy-panel select,
html.light .gc-panel input,
html.light .gc-panel select,
html.light .shop-card input,
html.light .shop-card select,
html.light .shop-card textarea,
html[data-theme="light"] .page input,
html[data-theme="light"] .page select,
html[data-theme="light"] .page textarea,
html[data-theme="light"] .content-placeholder input,
html[data-theme="light"] .content-placeholder select,
html[data-theme="light"] .content-placeholder textarea,
html[data-theme="light"] .sa-modal input,
html[data-theme="light"] .sa-modal select,
html[data-theme="light"] .sa-modal textarea,
html[data-theme="light"] .loy-panel input,
html[data-theme="light"] .loy-panel select,
html[data-theme="light"] .gc-panel input,
html[data-theme="light"] .gc-panel select,
html[data-theme="light"] .shop-card input,
html[data-theme="light"] .shop-card select,
html[data-theme="light"] .shop-card textarea {
  background: rgba(0,0,0,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important;
  color: var(--ink) !important;
}
html.light .page input:focus,
html.light .page select:focus,
html.light .page textarea:focus,
html.light .content-placeholder input:focus,
html.light .content-placeholder select:focus,
html.light .content-placeholder textarea:focus,
html.light .sa-modal input:focus,
html.light .sa-modal select:focus,
html.light .sa-modal textarea:focus,
html[data-theme="light"] .page input:focus,
html[data-theme="light"] .page select:focus,
html[data-theme="light"] .page textarea:focus,
html[data-theme="light"] .content-placeholder input:focus,
html[data-theme="light"] .content-placeholder select:focus,
html[data-theme="light"] .content-placeholder textarea:focus,
html[data-theme="light"] .sa-modal input:focus,
html[data-theme="light"] .sa-modal select:focus,
html[data-theme="light"] .sa-modal textarea:focus {
  box-shadow: 0 0 0 2px var(--gold-glow-ring), inset 0 0 0 1px rgba(150,117,10,.2) !important;
}

/* Payroll + settings inner — light */
html.light .settings-payroll-section,
html[data-theme="light"] .settings-payroll-section {
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.07),
    0 4px 14px rgba(0,0,0,.04) !important;
}
html.light .settings-payroll-header,
html[data-theme="light"] .settings-payroll-header {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06) !important;
}
html.light .settings-std-ded-item,
html[data-theme="light"] .settings-std-ded-item {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .settings-cancel-plan-box,
html[data-theme="light"] .settings-cancel-plan-box {
  background: rgba(0,0,0,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .settings-cancel-reason-label,
html[data-theme="light"] .settings-cancel-reason-label {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}
html.light .settings-cancel-reason-label:hover,
html[data-theme="light"] .settings-cancel-reason-label:hover {
  background: rgba(150,117,10,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2) !important;
}

/* Admin list — light */
html.light .admin-list-item,
html[data-theme="light"] .admin-list-item {
  background: rgba(0,0,0,.02) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
html.light .admin-list-item:hover,
html[data-theme="light"] .admin-list-item:hover {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.12) !important;
}
html.light .admin-list-item.active,
html[data-theme="light"] .admin-list-item.active {
  background: rgba(150,117,10,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.2) !important;
}

/* Flags / alerts — light */
html.light .flag-danger,
html[data-theme="light"] .flag-danger {
  background: rgba(220,38,38,.06) !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.14) !important;
}
html.light .dash-alert,
html[data-theme="light"] .dash-alert {
  background: var(--raised) !important;
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.14), 0 2px 8px rgba(220,38,38,.04) !important;
}

/* Settings upgrade box — light */
html.light .settings-upgrade-box,
html[data-theme="light"] .settings-upgrade-box {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.18) !important;
}

/* Empty states — light */
html.light .empty-state,
html.light .page-empty,
html.light .tc-empty,
html.light .loy-empty,
html.light .gc-empty,
html.light .team2-empty,
html.light .reports-empty,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .page-empty,
html[data-theme="light"] .tc-empty,
html[data-theme="light"] .loy-empty,
html[data-theme="light"] .gc-empty,
html[data-theme="light"] .team2-empty,
html[data-theme="light"] .reports-empty {
  color: var(--ink-3) !important;
}
html.light .empty-state svg,
html.light .page-empty svg,
html.light .team2-empty svg,
html[data-theme="light"] .empty-state svg,
html[data-theme="light"] .page-empty svg,
html[data-theme="light"] .team2-empty svg {
  opacity: .18 !important;
}


/* ═══ AUTH PAGES ═══ */
/* Tesla/iOS Grade Override - body[data-app-view="auth"]
   ALL borders: box-shadow inset only. No solid border declarations. */

/* Auth header - full-width glass bar */
body[data-app-view="auth"] header.app-header,
body[data-app-view="auth"] header.app-header.auth-app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  padding: 0 24px !important;
  background: rgba(6,6,8,.7) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: none !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.35) !important;
  transition: background .25s !important;
}
html.light body[data-app-view="auth"] header.app-header,
html[data-theme="light"] body[data-app-view="auth"] header.app-header {
  background: rgba(250,250,248,.8) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
}
body[data-app-view="auth"] header.app-header .brand {
  display: flex !important; align-items: center !important; gap: 10px !important;
}
body[data-app-view="auth"] header.app-header .brand-mark {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 60%, #9A7630 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #1A1200 !important; font-size: 15px !important; font-weight: 800 !important;
  border: none !important; box-shadow: 0 2px 12px rgba(200,160,76,.3) !important;
  animation: logo-breathe 3.5s ease-in-out infinite !important;
}
body[data-app-view="auth"] header.app-header .brand-text-title {
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--ink) !important; letter-spacing: -.01em !important;
}
body[data-app-view="auth"] header.app-header .brand-text-sub {
  font-size: 9px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ink-4) !important;
}
body[data-app-view="auth"] header.app-header .tagline { display: none !important; }
body[data-app-view="auth"] header.app-header #theme-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,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  color: var(--ink-3) !important; cursor: pointer !important;
  transition: background .15s, color .15s !important; padding: 0 !important;
}
body[data-app-view="auth"] header.app-header #theme-toggle:hover {
  background: rgba(255,255,255,.09) !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
body[data-app-view="auth"] header.app-header #theme-toggle svg { width: 17px !important; height: 17px !important; }
html.light body[data-app-view="auth"] header.app-header #theme-toggle,
html[data-theme="light"] body[data-app-view="auth"] header.app-header #theme-toggle {
  background: rgba(0,0,0,.04) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07) !important;
}
html.light body[data-app-view="auth"] header.app-header #theme-toggle:hover,
html[data-theme="light"] body[data-app-view="auth"] header.app-header #theme-toggle:hover {
  background: rgba(0,0,0,.07) !important;
}

/* Main content */
body[data-app-view="auth"] main#main-content {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  padding: calc(56px + 40px) 16px 64px !important;
  min-height: 100dvh !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,160,76,.09), transparent),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(96,165,250,.04), transparent) !important;
}
html.light body[data-app-view="auth"] main#main-content,
html[data-theme="light"] body[data-app-view="auth"] main#main-content {
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(150,117,10,.07), transparent),
    radial-gradient(ellipse 60% 45% at 20% 80%, rgba(37,99,235,.03), transparent) !important;
}

/* Section constraints */
#auth-section, #force-password-section, #onboarding-section {
  width: 100% !important; max-width: 1100px !important;
}
#force-password-section { max-width: 480px !important; margin: 0 auto !important; }
#onboarding-section { max-width: 960px !important; margin: 0 auto !important; }
#auth-section.card, #force-password-section.card, #onboarding-section.card {
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
}

/* Auth tabs */
.auth-tabs {
  display: flex !important; gap: 3px !important; padding: 3px !important;
  background: rgba(255,255,255,.04) !important; border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.2) !important;
  border-radius: var(--r-sm) !important; width: fit-content !important; margin: 0 auto 28px !important;
}
html.light .auth-tabs, html[data-theme="light"] .auth-tabs {
  background: rgba(0,0,0,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04) !important;
}
.auth-tab {
  padding: 7px 20px !important; border-radius: 8px !important; border: none !important;
  background: transparent !important; color: var(--ink-3) !important;
  font-size: 14px !important; font-weight: 600 !important; font-family: var(--font) !important;
  cursor: pointer !important;
  transition: background .16s var(--spring), color .16s var(--spring), box-shadow .16s var(--spring) !important;
  white-space: nowrap !important; min-height: 44px !important; letter-spacing: -.005em !important;
}
.auth-tab:hover { color: var(--ink) !important; background: rgba(255,255,255,.06) !important; }
.auth-tab.active {
  background: var(--gold) !important; color: var(--void) !important;
  font-weight: 700 !important; box-shadow: 0 2px 10px rgba(200,160,76,.25) !important;
}
html.light .auth-tab.active, html[data-theme="light"] .auth-tab.active {
  background: var(--gold) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(150,117,10,.2) !important;
}
html.light .auth-tab:hover, html[data-theme="light"] .auth-tab:hover {
  background: rgba(0,0,0,.05) !important; color: var(--ink) !important;
}

/* Two-column layout */
.auth-layout {
  display: grid !important; grid-template-columns: 1.2fr 1fr !important;
  gap: 32px !important; align-items: start !important;
}
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr !important; }
  .auth-benefits.auth-hero-rail { display: none !important; }
}

/* Form shell */
.auth-form-shell {
  background: var(--glass-card) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.1), 0 8px 40px rgba(0,0,0,.36), 0 2px 8px rgba(0,0,0,.2) !important;
  border-radius: var(--r-lg) !important; padding: 36px 32px !important;
  position: relative !important; overflow: hidden !important;
}
html.light .auth-form-shell, html[data-theme="light"] .auth-form-shell {
  background: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.8), 0 8px 32px rgba(0,0,0,.07) !important;
}
@media (max-width: 480px) { .auth-form-shell { padding: 24px 20px !important; } }
.auth-form-shell::before {
  content: "" !important; position: absolute !important;
  top: 0 !important; left: 15% !important; right: 15% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(200,160,76,.4), transparent) !important;
  border-radius: 0 0 4px 4px !important; pointer-events: none !important;
}
html.light .auth-form-shell::before, html[data-theme="light"] .auth-form-shell::before {
  background: linear-gradient(90deg, transparent, rgba(150,117,10,.3), transparent) !important;
}

/* Typography */
.kicker {
  display: inline-block !important; font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--gold) !important; margin-bottom: 10px !important; opacity: .9 !important;
}
.auth-title {
  font-size: 28px !important; font-weight: 700 !important; color: var(--ink) !important;
  line-height: 1.22 !important; letter-spacing: -.02em !important; margin-bottom: 8px !important;
}
@media (max-width: 480px) { .auth-title { font-size: 22px !important; } }
.auth-subtitle {
  font-size: 14px !important; color: var(--ink-3) !important;
  line-height: 1.55 !important; margin-bottom: 16px !important;
}

/* Auth chips */
.auth-chip-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 6px !important; }
.auth-chip {
  display: inline-flex !important; align-items: center !important;
  padding: 4px 10px !important; background: rgba(200,160,76,.08) !important;
  border: none !important; box-shadow: inset 0 0 0 1px rgba(200,160,76,.18) !important;
  border-radius: 100px !important; font-size: 11px !important; font-weight: 600 !important;
  color: var(--gold) !important; letter-spacing: .03em !important;
}
html.light .auth-chip, html[data-theme="light"] .auth-chip {
  background: rgba(150,117,10,.06) !important; box-shadow: inset 0 0 0 1px rgba(150,117,10,.16) !important;
}

/* Divider */
.divider-or { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 20px !important; }
.divider-line {
  flex: 1 !important; height: 1px !important; background: transparent !important;
  box-shadow: 0 0.5px 0 var(--ink-5) !important;
}
.divider-text { font-size: 11.5px !important; color: var(--ink-4) !important; white-space: nowrap !important; font-weight: 500 !important; letter-spacing: .02em !important; }

/* Google button */
.nui-google-btn {
  display: flex !important; align-items: center !important; gap: 12px !important;
  width: 100% !important; padding: 11px 16px !important;
  background: rgba(255,255,255,.04) !important; border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 2px 8px rgba(0,0,0,.18) !important;
  border-radius: var(--r-sm) !important; cursor: pointer !important; text-align: left !important;
  transition: background .16s var(--spring), box-shadow .16s var(--spring) !important;
  min-height: 48px !important;
}
.nui-google-btn:hover {
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.3), 0 0 0 3px rgba(200,160,76,.1), 0 4px 16px rgba(0,0,0,.22) !important;
}
html.light .nui-google-btn, html[data-theme="light"] .nui-google-btn {
  background: var(--raised) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06) !important;
}
html.light .nui-google-btn:hover, html[data-theme="light"] .nui-google-btn:hover {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.32), 0 0 0 3px rgba(150,117,10,.08), 0 4px 12px rgba(0,0,0,.07) !important;
}

/* Form fields */
body[data-app-view="auth"] .field-group input,
body[data-app-view="auth"] .field-group select,
body[data-app-view="auth"] .field-group textarea,
#force-password-section .field-group input,
#onboarding-section .field-group input,
#onboarding-section .field-group select,
#onboarding-section .field-group textarea {
  height: 44px !important; padding: 0 13px !important;
  background: rgba(255,255,255,.03) !important; border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  border-radius: var(--r-sm) !important; color: var(--ink) !important;
  font-size: 14px !important; font-family: var(--font) !important; outline: none !important;
  transition: box-shadow .16s var(--spring), background .16s var(--spring) !important;
  -webkit-appearance: none !important; appearance: none !important;
}
body[data-app-view="auth"] .field-group input:hover,
body[data-app-view="auth"] .field-group select:hover,
#force-password-section .field-group input:hover,
#onboarding-section .field-group input:hover,
#onboarding-section .field-group select:hover {
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13) !important;
}
body[data-app-view="auth"] .field-group input:focus,
body[data-app-view="auth"] .field-group select:focus,
body[data-app-view="auth"] .field-group textarea:focus,
#force-password-section .field-group input:focus,
#onboarding-section .field-group input:focus,
#onboarding-section .field-group select:focus,
#onboarding-section .field-group textarea:focus {
  background: rgba(200,160,76,.04) !important;
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.45), 0 0 0 3px rgba(200,160,76,.12) !important;
}
html.light body[data-app-view="auth"] .field-group input,
html[data-theme="light"] body[data-app-view="auth"] .field-group input,
html.light body[data-app-view="auth"] .field-group select,
html[data-theme="light"] body[data-app-view="auth"] .field-group select,
html.light body[data-app-view="auth"] .field-group textarea,
html[data-theme="light"] body[data-app-view="auth"] .field-group textarea,
html.light #force-password-section .field-group input,
html[data-theme="light"] #force-password-section .field-group input,
html.light #onboarding-section .field-group input,
html[data-theme="light"] #onboarding-section .field-group input,
html.light #onboarding-section .field-group select,
html[data-theme="light"] #onboarding-section .field-group select {
  background: var(--base) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1) !important; color: var(--ink) !important;
}
html.light body[data-app-view="auth"] .field-group input:focus,
html[data-theme="light"] body[data-app-view="auth"] .field-group input:focus,
html.light body[data-app-view="auth"] .field-group select:focus,
html[data-theme="light"] body[data-app-view="auth"] .field-group select:focus,
html.light body[data-app-view="auth"] .field-group textarea:focus,
html[data-theme="light"] body[data-app-view="auth"] .field-group textarea:focus,
html.light #force-password-section .field-group input:focus,
html[data-theme="light"] #force-password-section .field-group input:focus,
html.light #onboarding-section .field-group input:focus,
html[data-theme="light"] #onboarding-section .field-group input:focus,
html.light #onboarding-section .field-group select:focus,
html[data-theme="light"] #onboarding-section .field-group select:focus {
  background: rgba(150,117,10,.03) !important;
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.4), 0 0 0 3px rgba(150,117,10,.1) !important;
}
body[data-app-view="auth"] .field-group label,
#force-password-section .field-group label,
#onboarding-section .field-group label {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--ink-3) !important; text-transform: uppercase !important; letter-spacing: .04em !important;
}

/* Primary submit */
.auth-submit-btn,
.auth-form-shell .btn-primary.btn-block,
#force-password-section .btn-primary.btn-block,
#onboarding-section #onboard-submit {
  width: 100% !important; height: 48px !important; padding: 0 20px !important;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 60%, #9A7630 100%) !important;
  color: #1A1200 !important; border: none !important; border-radius: var(--r-sm) !important;
  font-size: 15px !important; font-weight: 700 !important; font-family: var(--font) !important;
  cursor: pointer !important; letter-spacing: .01em !important;
  box-shadow: 0 2px 14px rgba(200,160,76,.35), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: opacity .16s var(--spring), box-shadow .16s var(--spring), transform .12s var(--spring) !important;
  position: relative !important; overflow: hidden !important;
}
.auth-submit-btn:hover,
.auth-form-shell .btn-primary.btn-block:hover,
#force-password-section .btn-primary.btn-block:hover,
#onboarding-section #onboard-submit:hover {
  opacity: .92 !important;
  box-shadow: 0 4px 22px rgba(200,160,76,.45), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transform: translateY(-1px) !important;
}
.auth-submit-btn:active,
.auth-form-shell .btn-primary.btn-block:active,
#force-password-section .btn-primary.btn-block:active,
#onboarding-section #onboard-submit:active { transform: translateY(0) !important; opacity: 1 !important; }

/* Demo button */
.auth-demo-btn { border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
.auth-demo-btn:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.13) !important; }
html.light .auth-demo-btn, html[data-theme="light"] .auth-demo-btn {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) !important;
}

/* Alerts */
.error-box { border: none !important; box-shadow: inset 0 0 0 1px rgba(248,113,113,.22) !important; }
.success-box { border: none !important; box-shadow: inset 0 0 0 1px rgba(74,222,128,.22) !important; }
html.light .error-box, html[data-theme="light"] .error-box { box-shadow: inset 0 0 0 1px rgba(220,38,38,.18) !important; }
html.light .success-box, html[data-theme="light"] .success-box { box-shadow: inset 0 0 0 1px rgba(13,148,72,.18) !important; }

/* Next steps */
.auth-next-steps { border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important; }
html.light .auth-next-steps, html[data-theme="light"] .auth-next-steps { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important; }
.auth-step-badge { border: none !important; box-shadow: inset 0 0 0 1px rgba(200,160,76,.28) !important; }
html.light .auth-step-badge, html[data-theme="light"] .auth-step-badge { box-shadow: inset 0 0 0 1px rgba(150,117,10,.22) !important; }

/* Benefits rail */
.auth-benefits.auth-hero-rail {
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html.light .auth-benefits.auth-hero-rail, html[data-theme="light"] .auth-benefits.auth-hero-rail {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
}
.auth-proof-item { border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; }
html.light .auth-proof-item, html[data-theme="light"] .auth-proof-item { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important; }
.auth-preview-shell { border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; }
html.light .auth-preview-shell, html[data-theme="light"] .auth-preview-shell { box-shadow: inset 0 0 0 1px rgba(0,0,0,.07) !important; }
.auth-preview-card { border: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; }
html.light .auth-preview-card, html[data-theme="light"] .auth-preview-card { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important; }
.auth-live-pill { border: none !important; box-shadow: inset 0 0 0 1px rgba(74,222,128,.2) !important; }
.mini-tag { border: none !important; box-shadow: inset 0 0 0 1px rgba(200,160,76,.2) !important; }
html.light .mini-tag, html[data-theme="light"] .mini-tag { box-shadow: inset 0 0 0 1px rgba(150,117,10,.18) !important; }
.badge-trial { border: none !important; box-shadow: inset 0 0 0 1px rgba(74,222,128,.14) !important; }
html.light .badge-trial, html[data-theme="light"] .badge-trial { box-shadow: inset 0 0 0 1px rgba(13,148,72,.14) !important; }

/* Force password section */
#force-password-section.card {
  background: var(--glass-card) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.1), 0 8px 40px rgba(0,0,0,.35) !important;
  border-radius: var(--r-lg) !important; padding: 36px 32px !important;
}
html.light #force-password-section.card, html[data-theme="light"] #force-password-section.card {
  background: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), 0 8px 32px rgba(0,0,0,.06) !important;
}
#force-password-section .form-grid { display: flex !important; flex-direction: column !important; gap: 14px !important; }

/* Onboarding */
#onboarding-section { background: transparent !important; padding: 0 !important; }
#onboarding-section .kicker { display: block !important; text-align: center !important; margin-bottom: 8px !important; }
.onboarding-section-title {
  font-size: 20px !important; font-weight: 700 !important; color: var(--ink) !important;
  letter-spacing: -.018em !important; margin-bottom: 6px !important;
}
.onboarding-subtitle { font-size: 13.5px !important; color: var(--ink-3) !important; line-height: 1.55 !important; margin-bottom: 24px !important; }

/* Plan cards */
.plan-card {
  position: relative !important; padding: 20px !important; background: var(--raised) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 10px rgba(0,0,0,.18) !important;
  border-radius: var(--r-lg) !important; cursor: pointer !important;
  transition: box-shadow .18s var(--spring), background .18s var(--spring) !important;
}
.plan-card:hover {
  box-shadow: inset 0 0 0 1px rgba(200,160,76,.22), 0 4px 20px rgba(0,0,0,.25) !important;
}
.plan-card.selected {
  background: rgba(200,160,76,.06) !important;
  box-shadow: inset 0 0 0 1.5px rgba(200,160,76,.45), 0 4px 28px rgba(200,160,76,.14), 0 2px 8px rgba(0,0,0,.15) !important;
}
html.light .plan-card, html[data-theme="light"] .plan-card {
  background: var(--raised) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 6px rgba(0,0,0,.05) !important;
}
html.light .plan-card:hover, html[data-theme="light"] .plan-card:hover {
  box-shadow: inset 0 0 0 1px rgba(150,117,10,.22), 0 4px 16px rgba(0,0,0,.08) !important;
}
html.light .plan-card.selected, html[data-theme="light"] .plan-card.selected {
  background: rgba(150,117,10,.05) !important;
  box-shadow: inset 0 0 0 1.5px rgba(150,117,10,.38), 0 4px 20px rgba(150,117,10,.1) !important;
}
.plan-badge {
  position: absolute !important; top: -10px !important; left: 16px !important;
  padding: 3px 10px !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  color: #1A1200 !important; font-size: 10.5px !important; font-weight: 700 !important;
  border-radius: 100px !important; letter-spacing: .04em !important;
  border: none !important; box-shadow: 0 2px 8px rgba(200,160,76,.3) !important;
}

/* Onboarding biz col */
.onboarding-col-biz {
  background: var(--glass-card) !important; border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.07), 0 4px 24px rgba(0,0,0,.2) !important;
  border-radius: var(--r-lg) !important; padding: 24px !important;
}
html.light .onboarding-col-biz, html[data-theme="light"] .onboarding-col-biz {
  background: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.05) !important;
}