:root {
  --bg: #03060c;
  --panel: rgba(12, 19, 33, 0.88);
  --panel-alt: rgba(6, 10, 19, 0.95);
  --border: rgba(100, 116, 139, 0.38);
  --border-glow: rgba(16, 185, 129, 0.38);
  --text: #f8fafc;
  --muted: #94a3b8;
  --accent: #10b981;
  --accent-hover: #059669;
  --warn: #c084fc;
  --danger: #f43f5e;
  --blue: #38bdf8;
  --purple: #c084fc;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-synthesis: none;
}

body {
  margin: 0;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background-color: #03060c;
  color: var(--text);
  overflow-x: hidden;
  touch-action: manipulation;
  position: relative;
}

/* GPU-Promoted Fixed Ambient Backdrop (Eliminates background-attachment:fixed scroll repaint jank) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #03060c;
  background-image:
    radial-gradient(circle at 10% 5%, rgba(16, 185, 129, 0.20) 0px, transparent 42%),
    radial-gradient(circle at 90% 8%, rgba(56, 189, 248, 0.18) 0px, transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(192, 132, 252, 0.14) 0px, transparent 48%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 10px);
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
}

/* Crisp Tabular Numerals & High-DPI Vector / Image Precision */
.kpi-val,
.bd-widget-stat-val,
.hub-context-stat,
.badge,
table td,
input[type="number"],
.price-input-inline-wrap input,
#bottleCalcModal .btl-keypad button {
  font-variant-numeric: tabular-nums;
}

svg {
  shape-rendering: geometricPrecision;
}

.bd-table-scroll-wrap {
  contain: layout style;
}

.container { max-width: 1460px; margin: 0 auto; }

/* KEYFRAME ANIMATIONS */
@keyframes hubEnter {
  0% { opacity: 0; transform: translateY(10px) scale(0.994); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes subPaneSlide {
  0% { opacity: 0; transform: translateX(8px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes kpiPop {
  0% { opacity: 0; transform: translateY(6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.94) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4), inset 0 0 8px rgba(244, 63, 94, 0.2); }
  50% { box-shadow: 0 0 14px 3px rgba(244, 63, 94, 0.35), inset 0 0 12px rgba(244, 63, 94, 0.3); }
}

/* ==========================================================================
   1. LOCKED-IN HEADER & 3D NEON MARTINI CREST BRANDING
   ========================================================================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding: 12px 4px 12px 4px;
  flex-wrap: wrap;
  gap: 12px;
  overflow: visible !important;
}

header h1, .header-h1-wrap {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: visible !important;
}

.header-brand-block {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  overflow: visible !important;
}

.header-brand-block .brand-text,
header h1 > span:first-of-type {
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
}

.header-badges-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#bdCustomCrestLogo {
  width: 36px;
  height: 36px;
  margin: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75), 0 0 14px rgba(16, 185, 129, 0.50);
}

.ent-suite-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.20), rgba(56, 189, 248, 0.18)) !important;
  border: 1px solid rgba(52, 211, 153, 0.50) !important;
  color: #34d399 !important;
  -webkit-text-fill-color: #34d399 !important;
}

.cloud-sync-badge {
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.25s ease !important;
  user-select: none !important;
}

.cloud-sync-badge.synced {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(52, 211, 153, 0.50) !important;
  color: #34d399 !important;
  -webkit-text-fill-color: #34d399 !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.20) !important;
  animation: cloudBreathingPulse 3.5s ease-in-out infinite !important;
}

@keyframes cloudBreathingPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.20), inset 0 0 4px rgba(52, 211, 153, 0.10);
    border-color: rgba(52, 211, 153, 0.45);
  }
  50% {
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.45), inset 0 0 8px rgba(52, 211, 153, 0.22);
    border-color: rgba(52, 211, 153, 0.80);
  }
}

.cloud-sync-badge.syncing {
  background: rgba(56, 189, 248, 0.18) !important;
  border: 1px solid rgba(56, 189, 248, 0.50) !important;
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.20) !important;
}

.cloud-sync-badge.offline {
  background: rgba(192, 132, 252, 0.18) !important;
  border: 1px solid rgba(192, 132, 252, 0.50) !important;
  color: #c084fc !important;
  -webkit-text-fill-color: #c084fc !important;
}

/* INTERACTIVE VENUE CONTEXT & SITUATIONAL STRIP */
.hub-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: rgba(15, 23, 42, 0.70);
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 10px;
  padding: 6px 14px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--muted);
  backdrop-filter: blur(8px);
}
.hub-context-venue {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  color: #f1f5f9;
}
.hub-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  display: inline-block;
  animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.hub-context-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hub-context-stat span {
  color: #f8fafc;
  font-weight: 700;
}

h3 {
  margin: 0 0 12px 0;
  font-size: 0.96rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   2. 17-CATEGORY SPIRIT & BEVERAGE COLOR SPECTRUM (DARK & LIGHT MODE)
   ========================================================================== */
.cat-agave     { --s-rgb: 0, 229, 153;   --s-hex: #34d399; }
.cat-whiskey   { --s-rgb: 245, 158, 11;  --s-hex: #fbbf24; }
.cat-gin       { --s-rgb: 132, 204, 22;  --s-hex: #a3e635; }
.cat-vodka     { --s-rgb: 56, 189, 248;  --s-hex: #38bdf8; }
.cat-rum       { --s-rgb: 249, 115, 22;  --s-hex: #fb923c; }
.cat-brandy         { --s-rgb: 225, 95, 115;  --s-hex: #fda4af; }
.cat-wine,
.cat-wine-red       { --s-rgb: 244, 63, 94;   --s-hex: #f43f5e; }
.cat-wine-white     { --s-rgb: 190, 242, 100; --s-hex: #bef264; }
.cat-wine-sparkling { --s-rgb: 253, 224, 71;  --s-hex: #fde047; }
.cat-wine-rose      { --s-rgb: 249, 168, 212; --s-hex: #f9a8d4; }
.cat-wine-orange    { --s-rgb: 251, 146, 60;  --s-hex: #fb923c; }
.cat-beer           { --s-rgb: 234, 179, 8;   --s-hex: #facc15; }
.cat-coffee         { --s-rgb: 217, 119, 6;   --s-hex: #f59e0b; }
.cat-dessert        { --s-rgb: 236, 72, 153;  --s-hex: #f472b6; }
.cat-liqueur        { --s-rgb: 232, 121, 249; --s-hex: #e879f9; }
.cat-fortified      { --s-rgb: 217, 70, 239;  --s-hex: #d946ef; }
.cat-prep      { --s-rgb: 168, 85, 247;  --s-hex: #c084fc; }
.cat-mixer     { --s-rgb: 99, 102, 241;  --s-hex: #818cf8; }
.cat-citrus    { --s-rgb: 255, 87, 51;   --s-hex: #ff6b4a; }
.cat-zeroproof { --s-rgb: 20, 184, 166;  --s-hex: #2dd4bf; }
.cat-ice       { --s-rgb: 6, 182, 212;   --s-hex: #22d3ee; }
.cat-generic   { --s-rgb: 56, 189, 248;  --s-hex: #7dd3fc; }

/* ==========================================================================
   3. 6-HUB CONSOLIDATED NAVIGATION BAR & VECTOR SVG ICONS
   ========================================================================== */
.bd-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;
  margin-right: 4px;
  line-height: 1;
  color: currentColor;
  flex-shrink: 0;
}
.bd-ico svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: rgba(var(--s-rgb, 56, 189, 248), 0.14);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 6px;
}

.tab-btn {
  min-width: 0;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.92) 0%, rgba(9, 15, 28, 0.96) 100%);
  color: var(--muted);
  border: 1px solid rgba(56, 189, 248, 0.24);
  padding: 10px 8px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(0.72rem, 0.88vw, 0.84rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.16s var(--spring), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  user-select: none;
  box-shadow: 0 4px 10px -2px rgba(2, 6, 23, 0.65), 0 2px 6px rgba(14, 165, 233, 0.06);
}
.tab-btn .nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.tab-btn .nav-ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: rgba(56, 189, 248, 0.12);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tab-btn:hover {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.78);
  background: linear-gradient(180deg, rgba(20, 34, 58, 0.96) 0%, rgba(12, 21, 38, 0.98) 100%);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(56, 189, 248, 0.16), inset 0 0 8px rgba(56, 189, 248, 0.15);
  transform: translateY(-1px);
}
.tab-btn.active {
  background: linear-gradient(180deg, rgba(22, 38, 66, 0.96) 0%, rgba(11, 20, 36, 0.98) 100%);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.72);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.26), 0 2px 8px rgba(56, 189, 248, 0.14), inset 0 0 10px rgba(56, 189, 248, 0.16);
}
.tab-btn.active .nav-ico svg {
  stroke: #38bdf8;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.55));
}

.tab-content, .subtab-pane { display: none; }
.tab-content.active { display: block; animation: hubEnter 0.28s var(--spring) forwards; }
.subtab-pane.active { display: block; animation: subPaneSlide 0.22s var(--spring) forwards; }

/* SUBTABS & SPIRIT FILTER PILLS */
.subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--panel-alt);
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subtabs::-webkit-scrollbar { display: none; }

.subtab-btn {
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.90) 0%, rgba(9, 15, 28, 0.95) 100%);
  color: var(--muted);
  border: 1px solid rgba(56, 189, 248, 0.26);
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: transform 0.16s var(--spring), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 8px -2px rgba(2, 6, 23, 0.60);
}
.subtab-btn:hover {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.78);
  background: linear-gradient(180deg, rgba(20, 34, 58, 0.96) 0%, rgba(12, 21, 38, 0.98) 100%);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(56, 189, 248, 0.16), inset 0 0 8px rgba(56, 189, 248, 0.15);
  transform: translateY(-1px);
}
.subtab-btn.active {
  background: linear-gradient(180deg, rgba(22, 38, 66, 0.96) 0%, rgba(11, 20, 36, 0.98) 100%);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.72);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.24), inset 0 0 8px rgba(56, 189, 248, 0.15);
}
.subtab-btn[class*="cat-"] {
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: var(--s-hex);
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.92) 0%, rgba(9, 15, 28, 0.96) 100%);
}
.subtab-btn[class*="cat-"]:hover {
  border-color: rgba(56, 189, 248, 0.78);
  color: var(--s-hex);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(56, 189, 248, 0.16), inset 0 0 8px rgba(56, 189, 248, 0.15);
}
.subtab-btn[class*="cat-"].active {
  border-color: rgba(56, 189, 248, 0.78);
  background: linear-gradient(180deg, rgba(22, 38, 66, 0.96) 0%, rgba(11, 20, 36, 0.98) 100%);
  color: var(--s-hex);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.26), inset 0 0 8px rgba(56, 189, 248, 0.16);
  font-weight: 800;
}

/* ==========================================================================
   4. PANELS, KPI CARDS & UNIFIED FROM-UNDERNEATH ICE-BLUE GLOW
   ========================================================================== */
.program-bar, .library-bar, .scalable-mode-banner, .property-outlet-bar {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(7, 11, 20, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 10px 26px -4px rgba(2, 6, 23, 0.72), 0 4px 14px -2px rgba(14, 165, 233, 0.10);
}
.property-outlet-bar, .scalable-mode-banner {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.property-outlet-bar { flex-direction: column; align-items: stretch; }
.property-outlet-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.property-outlet-title { font-size: 0.74rem; font-weight: 900; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.property-outlet-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.property-outlet-bar .subtabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
  scrollbar-width: thin !important;
}
.property-outlet-bar .subtabs::-webkit-scrollbar {
  height: 4px !important;
}
.property-outlet-bar .subtabs::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.4) !important;
  border-radius: 4px !important;
}
.property-outlet-bar .subtabs .subtab-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.program-select-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; flex-wrap: wrap; }
.program-select-wrap select { max-width: 290px; font-weight: 700; border-color: var(--blue); }

.grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.kpi-card, .drop-box, .prep-card, .bd-widget-card, .turnkey-card, .modal-box {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --glow-rgb: 56, 189, 248;
}
.panel,
.program-bar,
.library-bar,
.scalable-mode-banner,
.property-outlet-bar,
.hub-context-strip,
.cocktail-balance-strip,
.bd-import-drawer,
#physAuditLifecycleBar,
#avtAuditLifecycleBar,
#bdCleanWorkspaceBanner,
#poManualOrderCartStrip {
  position: relative;
  overflow: visible !important;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --glow-rgb: 56, 189, 248;
}
.panel:has(details[open]), .panel > h3:has(details[open]), header:has(details[open]),
.program-bar:has(details[open]), .library-bar:has(details[open]) {
  z-index: 60 !important;
}

/* Ensure interactive child elements remain above cursor glow */
.panel > *, .modal-box > *, .bd-widget-card > *, .turnkey-card > *,
.program-bar > *, .library-bar > *, .scalable-mode-banner > *, .property-outlet-bar > *,
.hub-context-strip > *, .cocktail-balance-strip > *, .bd-import-drawer > *,
#physAuditLifecycleBar > *, #avtAuditLifecycleBar > *, #bdCleanWorkspaceBanner > *, #poManualOrderCartStrip > * {
  position: relative;
  z-index: 2;
}

.kpi-card {
  border-radius: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.94) 0%, rgba(8, 13, 24, 0.98) 100%);
  box-shadow: 0 10px 26px -4px rgba(2, 6, 23, 0.72), 0 4px 14px -2px rgba(14, 165, 233, 0.10);
  animation: kpiPop 0.3s var(--spring) backwards;
  transition: transform 0.2s var(--spring), border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Standout text colors preserved on KPI values while glow stays 100% unified Ice Blue */
.kpi-card:nth-child(1) .kpi-val { color: #34d399; }
.kpi-card:nth-child(2) .kpi-val { color: #38bdf8; }
.kpi-card:nth-child(3) .kpi-val { color: #c084fc; }
.kpi-card:nth-child(4) .kpi-val { color: #38bdf8; }
.kpi-card:nth-child(5) .kpi-val { color: #fb7185; }

/* Unified Ice-Blue glow across all widget classes */
.widget-cyan, .widget-emerald, .widget-amber, .widget-purple, .widget-rose {
  --glow-rgb: 56, 189, 248 !important;
}

.kpi-card::before, .drop-box::before, .prep-card::before, .bd-widget-card::before, .panel::before, .turnkey-card::before, .modal-box::before,
.program-bar::before, .library-bar::before, .scalable-mode-banner::before, .property-outlet-bar::before,
.hub-context-strip::before, .cocktail-balance-strip::before, .bd-import-drawer::before,
#physAuditLifecycleBar::before, #avtAuditLifecycleBar::before, #bdCleanWorkspaceBanner::before, #poManualOrderCartStrip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.04) 48%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}
.kpi-card:hover::before, .drop-box:hover::before, .prep-card:hover::before, .bd-widget-card:hover::before, .panel:hover::before, .turnkey-card:hover::before, .modal-box:hover::before,
.program-bar:hover::before, .library-bar:hover::before, .scalable-mode-banner:hover::before, .property-outlet-bar:hover::before,
.hub-context-strip:hover::before, .cocktail-balance-strip:hover::before, .bd-import-drawer:hover::before,
#physAuditLifecycleBar:hover::before, #avtAuditLifecycleBar:hover::before, #bdCleanWorkspaceBanner:hover::before, #poManualOrderCartStrip:hover::before,
.panel:focus-within::before, .program-bar:focus-within::before, .library-bar:focus-within::before,
.scalable-mode-banner:focus-within::before, .property-outlet-bar:focus-within::before, .cocktail-balance-strip:focus-within::before { opacity: 1; }
.kpi-card:hover, .drop-box:hover, .prep-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.52);
  box-shadow: 0 12px 28px -4px rgba(2, 6, 23, 0.80), 0 6px 20px -2px rgba(14, 165, 233, 0.22), inset 0 0 8px rgba(56, 189, 248, 0.06);
}

.kpi-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.kpi-val { 
  font-size: 1.4rem; 
  font-weight: 800; 
  margin-top: 4px; 
  letter-spacing: -0.02em; 
  transition: transform 0.25s ease, filter 0.25s ease;
}
.kpi-val.kpi-pulse {
  animation: kpiFlashGlow 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes kpiFlashGlow {
  0% { transform: scale(1.07); filter: brightness(1.6) drop-shadow(0 0 10px rgba(56, 189, 248, 0.7)); }
  100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
.kpi-sub { font-size: 0.74rem; color: var(--muted); margin-top: 4px; }

.panel {
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.92) 0%, rgba(8, 13, 24, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 16px;
  overflow: visible !important;
  box-shadow: 0 12px 30px -6px rgba(2, 6, 23, 0.75), 0 4px 14px -2px rgba(14, 165, 233, 0.09);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.panel:hover {
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: 0 14px 32px -6px rgba(2, 6, 23, 0.82), 0 6px 20px -2px rgba(14, 165, 233, 0.18);
}

.drop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-bottom: 16px; }
.drop-box {
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.92) 0%, rgba(8, 13, 24, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 14px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 10px 24px -4px rgba(2, 6, 23, 0.70), 0 4px 12px -2px rgba(14, 165, 233, 0.10);
  transition: transform 0.2s var(--spring), border-color 0.2s ease, box-shadow 0.2s ease;
}

.controls-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; margin-bottom: 12px; }
.prep-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 12px; }
.prep-card {
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.92) 0%, rgba(8, 13, 24, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  padding: 13px;
  box-shadow: 0 8px 22px -4px rgba(2, 6, 23, 0.68), 0 3px 10px -2px rgba(14, 165, 233, 0.08);
  transition: transform 0.2s var(--spring), border-color 0.2s ease, box-shadow 0.2s ease;
}
#inAppGuideCardsGrid .prep-card,
.turnkey-grid .turnkey-card {
  overflow: visible !important;
  height: auto !important;
  min-height: max-content !important;
}

/* ==========================================================================
   5. DRINK LAB TABLE FORMATTING UNIFIED ACROSS ALL TABLES IN THE APP
   ========================================================================== */
label { display: block; font-size: 0.73rem; color: var(--muted); margin-bottom: 4px; font-weight: 600; }

input, select, textarea {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(71, 85, 105, 0.65);
  background-color: #060a14;
  background: rgba(4, 7, 14, 0.94);
  color: var(--text);
  font-size: 0.84rem;
  color-scheme: dark;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #060a14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 28px !important;
  cursor: pointer;
}
select option, select optgroup {
  background-color: #0b1120 !important;
  color: #f8fafc !important;
  font-weight: 600;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65), 0 0 12px rgba(16, 185, 129, 0.32);
}

/* Spirit-Colored Inputs, Dropdowns & Unified Table SKU Boxes (Drink Lab Look Everywhere!) */
input[class*="cat-"],
select[class*="cat-"],
.sku-box-pill {
  border: 1px solid rgba(var(--s-rgb), 0.48) !important;
  border-radius: 8px !important;
  color: var(--s-hex) !important;
  font-weight: 800 !important;
  padding: 7px 10px !important;
  background-color: #050912 !important;
  background-image: linear-gradient(90deg, rgba(var(--s-rgb), 0.18) 0%, rgba(5, 9, 18, 0.96) 75%) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 10px rgba(var(--s-rgb), 0.12) !important;
  line-height: 1.25;
}
select[class*="cat-"] {
  display: inline-block !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(var(--s-rgb), 0.18) 0%, rgba(5, 9, 18, 0.96) 75%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: right 9px center, 0 0 !important;
  background-size: 12px 12px, 100% 100% !important;
}
.sku-box-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.14s var(--spring), border-color 0.15s ease, box-shadow 0.15s ease;
}
.sku-box-pill:hover {
  border-color: var(--s-hex) !important;
  box-shadow: 0 0 14px rgba(var(--s-rgb), 0.28) !important;
  filter: brightness(1.1);
}

.bd-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  background: linear-gradient(90deg, rgba(var(--s-rgb), 0.20) 0%, rgba(var(--s-rgb), 0.08) 100%) !important;
  color: var(--s-hex) !important;
  border: 1px solid rgba(var(--s-rgb), 0.48) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.bd-cat-pill:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(var(--s-rgb), 0.35) !important;
}

table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
}
th, td {
  padding: 8px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(71, 85, 105, 0.38);
  font-size: 0.82rem;
  vertical-align: middle;
}
thead th {
  background: #060a13;
  border-bottom: 2px solid rgba(56, 189, 248, 0.40) !important;
  color: #e2e8f0 !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75) !important;
}

/* Active & Focused Inventory Row Spirit-Color Highlight */
body tbody tr:focus-within td:first-child,
body tbody tr.active-count-row td:first-child {
  box-shadow: 8px 0 18px rgba(0, 0, 0, 0.88) !important;
  background-color: #0c1424 !important;
}
body tbody tr:focus-within td,
body tbody tr.active-count-row td {
  background: linear-gradient(90deg, rgba(var(--s-rgb, 16, 185, 129), 0.28) 0%, rgba(var(--s-rgb, 16, 185, 129), 0.08) 55%, rgba(15, 23, 42, 0.70) 100%) !important;
  border-bottom-color: rgba(var(--s-rgb, 56, 189, 248), 0.48) !important;
}

/* Smoked-Glass Spirit Row Gradient */
body tr[class*="cat-"] td {
  background: linear-gradient(90deg, rgba(var(--s-rgb), 0.13) 0%, rgba(var(--s-rgb), 0.035) 55%, rgba(8, 13, 24, 0.45) 100%) !important;
}
body tbody tr:hover td {
  background: linear-gradient(90deg, rgba(var(--s-rgb, 16, 185, 129), 0.22) 0%, rgba(var(--s-rgb, 16, 185, 129), 0.07) 65%, rgba(15, 23, 42, 0.7) 100%) !important;
}

/* ==========================================================================
   STATIC TOP BOXES & STICKY TABLE SCROLL VIEWPORT
   Ensures summary KPI cards, search controls, and table header boxes NEVER leave FOV
   ========================================================================== */
.bd-table-scroll-wrap {
  max-height: min(68vh, 640px) !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 10px !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  background: rgba(4, 8, 18, 0.70) !important;
  position: relative !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  margin-top: 10px !important;
}
.bd-table-scroll-wrap table {
  margin-bottom: 0 !important;
}
.bd-table-scroll-wrap thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.95) !important;
  background: #080d1a !important;
}

/* ==========================================================================
   PURCHASE ORDERS & DELIVERY REGISTER TABLE FORMATTING
   ========================================================================== */
.po-segmented-tabs {
  display: inline-flex !important;
  background: rgba(10, 16, 32, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
.po-tab-btn {
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.90) 0%, rgba(9, 15, 28, 0.95) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.24) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  cursor: pointer !important;
  transition: transform 0.16s var(--spring), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  user-select: none !important;
}
.po-tab-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(20, 34, 58, 0.96) 0%, rgba(12, 21, 38, 0.98) 100%) !important;
  border-color: rgba(56, 189, 248, 0.78) !important;
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(56, 189, 248, 0.16), inset 0 0 8px rgba(56, 189, 248, 0.15) !important;
  transform: translateY(-1px) !important;
}
.po-tab-btn.active,
.po-tab-btn.tab-new.active,
.po-tab-btn.tab-pending.active,
.po-tab-btn.tab-received.active {
  background: linear-gradient(180deg, rgba(22, 38, 66, 0.96) 0%, rgba(11, 20, 36, 0.98) 100%) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.26), 0 2px 8px rgba(56, 189, 248, 0.14), inset 0 0 8px rgba(56, 189, 248, 0.15) !important;
}
.po-tab-btn.active, .po-tab-btn.tab-new.active { color: #38bdf8 !important; }
.po-tab-btn.tab-pending.active { color: #c084fc !important; }
.po-tab-btn.tab-received.active { color: #34d399 !important; }

.bd-po-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.82rem !important;
  min-width: 820px !important;
}
.bd-po-table thead th {
  background: #080d1a !important;
  color: #94a3b8 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
  white-space: nowrap !important;
}
.bd-po-table tbody tr.po-row {
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.bd-po-table tbody tr.po-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.bd-po-table tbody tr.po-row td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
}
.bd-po-table tbody tr.po-details-subrow td {
  background: rgba(6, 11, 22, 0.95) !important;
  border-bottom: 2px solid rgba(56, 189, 248, 0.3) !important;
}

/* User Auth Badge & Role Badges */
.user-auth-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(56, 189, 248, 0.32) !important;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.92) 0%, rgba(9, 15, 28, 0.96) 100%) !important;
  box-shadow: 0 4px 10px -2px rgba(2, 6, 23, 0.65), 0 2px 6px rgba(14, 165, 233, 0.08) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.18s ease !important;
  margin-left: 6px !important;
}
.user-auth-badge:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(56, 189, 248, 0.78) !important;
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(56, 189, 248, 0.16), inset 0 0 8px rgba(56, 189, 248, 0.15) !important;
}

/* Subscription Tier Cards Hover Glow Effects (Unified Ice-Blue Glow) */
.sub-tier-card {
  transition: transform 0.22s var(--spring), box-shadow 0.22s ease, border-color 0.22s ease !important;
  cursor: pointer;
  position: relative;
}
.sub-tier-card:hover,
.sub-tier-card.tier-solo:hover,
.sub-tier-card.tier-pro:hover,
.sub-tier-card.tier-enterprise:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(56, 189, 248, 0.78) !important;
  box-shadow: 0 12px 28px -4px rgba(2, 6, 23, 0.80), 0 6px 20px -2px rgba(14, 165, 233, 0.26), inset 0 0 8px rgba(56, 189, 248, 0.12) !important;
}
.role-tag {
  padding: 2px 6px !important;
  border-radius: 6px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.role-director { background: rgba(52, 211, 153, 0.20) !important; color: #34d399 !important; border: 1px solid rgba(52, 211, 153, 0.4) !important; }
.role-manager { background: rgba(56, 189, 248, 0.20) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; }
.role-staff { background: rgba(168, 85, 247, 0.20) !important; color: #c084fc !important; border: 1px solid rgba(192, 132, 252, 0.4) !important; }

/* Cocktail Balance & Flavor Visual Meter */
.balance-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
.balance-pill.balanced { background: rgba(52, 211, 153, 0.20) !important; color: #34d399 !important; border: 1px solid rgba(52, 211, 153, 0.45) !important; }
.balance-pill.spirit { background: rgba(56, 189, 248, 0.20) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; }
.balance-pill.acid { background: rgba(163, 230, 53, 0.20) !important; color: #a3e635 !important; border: 1px solid rgba(163, 230, 53, 0.45) !important; }
.balance-pill.sweet { background: rgba(251, 191, 36, 0.20) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.45) !important; }
.balance-pill.bitter { background: rgba(192, 132, 252, 0.20) !important; color: #c084fc !important; border: 1px solid rgba(192, 132, 252, 0.45) !important; }
.balance-pill.coffee { background: rgba(217, 119, 6, 0.20) !important; color: #f59e0b !important; border: 1px solid rgba(217, 119, 6, 0.45) !important; }
.balance-pill.wine { background: rgba(244, 63, 94, 0.20) !important; color: #fb7185 !important; border: 1px solid rgba(244, 63, 94, 0.45) !important; }

/* In-Context Non-Offensive Hazard & Health Badges */
.bd-hazard-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  cursor: help !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}
.bd-hazard-badge.warn {
  background: rgba(168, 85, 247, 0.16) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
}
.bd-hazard-badge.danger {
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.48) !important;
}
.bd-hazard-badge.info {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.40) !important;
}
.bd-hazard-badge.ok {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.40) !important;
}

/* Sticky Table Headers - Global Base */
table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 25 !important;
}

/* Sticky First Column — 100% Opaque Base So Scrolling Never Bleeds Through */
table tbody td:first-child,
tr[class*="cat-"] td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 12 !important;
  min-width: 136px;
  width: 155px;
  max-width: 176px;
  background-color: #080d18 !important;
  background-image: linear-gradient(90deg, rgba(var(--s-rgb, 16, 185, 129), 0.20) 0%, rgba(8, 13, 24, 0.97) 88%, #080d18 100%) !important;
  box-shadow: 6px 0 14px rgba(0, 0, 0, 0.78) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.28) !important;
}
table thead th:first-child,
.bd-table-scroll-wrap thead th:first-child,
.sliding-pricing-table thead th:first-child {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  min-width: 136px;
  width: 155px;
  max-width: 176px;
  white-space: normal !important;
  line-height: 1.25 !important;
  background: #060a13 !important;
  background-image: none !important;
  z-index: 35 !important;
  box-shadow: 6px 4px 14px rgba(0, 0, 0, 0.95) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.28) !important;
}

/* Sub-Pixel 120Hz GPU-Accelerated Side-to-Side Auto-Scroll Animation */
@keyframes bdGentleMarqueePingPong {
  0%, 16% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(var(--bd-scroll-dist, -45px), 0, 0);
  }
  66% {
    transform: translate3d(var(--bd-scroll-dist, -45px), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.bd-marquee-clip {
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  position: relative;
}

.bd-marquee-clip.bd-marquee-active {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 8px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 8px), transparent 100%);
}

.bd-marquee-clip > .bd-marquee-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform: translate3d(0, 0, 0);
}

.bd-marquee-clip.bd-marquee-active > .bd-marquee-inner {
  animation: bdGentleMarqueePingPong var(--bd-scroll-dur, 9.5s) cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.bd-marquee-clip.bd-marquee-active:hover > .bd-marquee-inner {
  animation-play-state: paused;
}

/* Sub-Pixel GPU Marquee Mirror for Overflowing Table Text Inputs */
.bd-input-marquee-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body input.bd-input-has-marquee:not(:focus),
html body table td input.bd-input-has-marquee:not(:focus) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #38bdf8;
}

.bd-input-marquee-overlay {
  position: absolute !important;
  left: 9px !important;
  right: 7px !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  pointer-events: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  z-index: 3 !important;
  transition: opacity 0.12s ease;
}

input.bd-input-has-marquee:focus + .bd-input-marquee-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Compact Table Inputs & Selects (Matches Drink Lab Tightness) */
table td input[type="number"],
table td input[type="text"],
table td select {
  height: 34px;
  padding: 5px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
}

/* ==========================================================================
   6. STANDARDIZED BUTTON SYSTEM & 4-EDGE ICE-BLUE HOVER GLOW
   ========================================================================== */
.btn,
.btn-primary,
.btn-ok,
.btn-emerald,
.btn-success,
.btn-skinny-emerald,
.btn-purple,
.btn-skinny-purple,
.btn-cyan,
.btn-skinny-cyan,
.btn-outline,
.btn-secondary,
.btn-skinny-highlight,
.turnkey-card,
#hdrGeminiAiBtn {
  --glow-rgb: 56, 189, 248;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.92) 0%, rgba(9, 15, 28, 0.96) 100%);
  color: #f1f5f9;
  border: 1px solid rgba(56, 189, 248, 0.30);
  padding: 7px 13px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.77rem;
  letter-spacing: 0.01em;
  transition: transform 0.16s var(--spring), background 0.16s ease, border-color 0.16s ease, box-shadow 0.18s ease, color 0.16s ease;
  white-space: nowrap;
  user-select: none;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 10px -2px rgba(2, 6, 23, 0.65), 0 2px 6px rgba(14, 165, 233, 0.08);
}
.turnkey-card {
  display: block;
  white-space: normal;
  text-align: left;
  padding: 11px 13px;
  border-radius: 10px;
}
.btn-warn, .btn-amber, .btn-skinny-amber {
  --glow-rgb: 56, 189, 248;
  background: linear-gradient(180deg, rgba(24, 22, 48, 0.92) 0%, rgba(12, 14, 28, 0.96) 100%);
  border: 1px solid rgba(192, 132, 252, 0.48);
  color: #e9d5ff;
}
.btn-danger, .btn-rose {
  --glow-rgb: 56, 189, 248;
  background: linear-gradient(180deg, rgba(48, 14, 24, 0.88) 0%, rgba(20, 10, 16, 0.95) 100%);
  border: 1px solid rgba(244, 63, 94, 0.48);
  color: #fecdd3;
  padding: 5px 10px;
}
/* Unified 4-Edge Lit Hover & Underneath Blue Glow Placed AFTER All Variants */
.btn:hover,
.btn-primary:hover,
.btn-ok:hover,
.btn-emerald:hover,
.btn-success:hover,
.btn-skinny-emerald:hover,
.btn-purple:hover,
.btn-skinny-purple:hover,
.btn-cyan:hover,
.btn-skinny-cyan:hover,
.btn-outline:hover,
.btn-secondary:hover,
.btn-skinny-highlight:hover,
.turnkey-card:hover,
#hdrGeminiAiBtn:hover {
  background: linear-gradient(180deg, rgba(20, 34, 58, 0.96) 0%, rgba(12, 21, 38, 0.98) 100%);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.78);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), 0 2px 8px rgba(56, 189, 248, 0.16), inset 0 0 8px rgba(56, 189, 248, 0.15);
  transform: translateY(-1px);
}
.btn-warn:hover,
.btn-amber:hover,
.btn-skinny-amber:hover {
  background: linear-gradient(180deg, rgba(34, 28, 66, 0.96) 0%, rgba(16, 18, 36, 0.98) 100%);
  color: #f3e8ff;
  border: 1px solid rgba(192, 132, 252, 0.82);
  box-shadow: 0 6px 16px -2px rgba(168, 85, 247, 0.26), 0 2px 8px rgba(56, 189, 248, 0.14), inset 0 0 8px rgba(192, 132, 252, 0.15);
  transform: translateY(-1px);
}
.btn-danger:hover,
.btn-rose:hover {
  background: linear-gradient(180deg, rgba(64, 18, 30, 0.94) 0%, rgba(26, 12, 18, 0.98) 100%);
  color: #ffe4e6;
  border: 1px solid rgba(244, 63, 94, 0.82);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.26), 0 2px 8px rgba(56, 189, 248, 0.14), inset 0 0 8px rgba(244, 63, 94, 0.15);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.97); }
.btn-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.71rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.badge-ok { background: rgba(16, 185, 129, 0.18); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.35); }
.badge-warn { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.38); }
.badge-danger { background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.35); animation: dangerPulse 2.2s infinite ease-in-out; }
.badge-info { background: rgba(59, 130, 246, 0.18); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.35); cursor: pointer; }
.badge-purple { background: rgba(168, 85, 247, 0.18); color: #c084fc; border: 1px solid rgba(192, 132, 252, 0.35); }
.badge-outline { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.35); }
.badge[class*="cat-"] {
  background: rgba(var(--s-rgb), 0.18) !important;
  color: var(--s-hex) !important;
  border: 1px solid rgba(var(--s-rgb), 0.48) !important;
}

.price-input-inline-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.price-input-inline-wrap input { padding-right: 76px !important; width: 100% !important; }
.price-input-inline-wrap .inline-action-pill {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  padding: 0 7px;
  font-size: 0.64rem;
  font-weight: 800;
  border-radius: 6px;
  background: rgba(16, 26, 46, 0.92);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.42);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  z-index: 3;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.price-input-inline-wrap .inline-action-pill:hover {
  border-color: rgba(56, 189, 248, 0.82);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25), inset 0 0 6px rgba(56, 189, 248, 0.15);
}

/* ==========================================================================
   7. SEAMLESS 3D BOTTLE SILHOUETTE & TOUCH CALCULATOR (FIXED NECK SEAM!)
   ========================================================================== */
.inv-touch-wrap { display: inline-flex; align-items: center; gap: 5px; }
.inv-step-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.92) 0%, rgba(9, 15, 28, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: var(--text);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.inv-step-btn:hover {
  border-color: rgba(56, 189, 248, 0.78);
  color: #ffffff;
  box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.28), inset 0 0 6px rgba(56, 189, 248, 0.14);
}
.inv-bottle-pill {
  min-width: 78px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.92) 0%, rgba(9, 15, 28, 0.96) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #34d399;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.inv-bottle-pill:hover {
  border-color: rgba(56, 189, 248, 0.78);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.28), inset 0 0 8px rgba(56, 189, 248, 0.15);
  transform: translateY(-1px);
}

.btl-calc-grid {
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 12px;
}
.btl-stage {
  background: radial-gradient(circle at 50% 25%, rgba(30, 41, 59, 0.60) 0%, rgba(4, 7, 15, 0.98) 80%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.85);
  user-select: none;
}
/* Seamless Cap → Neck → Shoulder Transition (Zero Intersecting Border Seam!) */
.btl-assembly {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.7));
}
.btl-cap {
  width: 30px;
  height: 13px;
  background: linear-gradient(90deg, #047857 0%, #34d399 48%, #064e3b 100%);
  border-radius: 5px 5px 2px 2px;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  border-bottom: none;
  z-index: 4;
}
.btl-neck {
  width: 28px;
  height: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 35%, rgba(0,0,0,0.45) 75%, rgba(255,255,255,0.12) 100%);
  border-left: 1.5px solid rgba(226, 232, 240, 0.42);
  border-right: 1.5px solid rgba(226, 232, 240, 0.42);
  border-top: none;
  border-bottom: none;
  margin-bottom: -1px;
  z-index: 3;
}
.btl-silhouette {
  position: relative;
  width: 108px;
  height: 220px;
  border-radius: 34px 34px 14px 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 18%, rgba(6,10,19,0.55) 55%, rgba(0,0,0,0.7) 84%, rgba(255,255,255,0.15) 100%),
    rgba(10, 16, 28, 0.78);
  border: 1.5px solid rgba(226, 232, 240, 0.42);
  box-shadow: inset 8px 0 14px rgba(255, 255, 255, 0.10), inset -10px -8px 20px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  z-index: 2;
}
/* Mask out the center 25px of the top border where the neck meets the shoulder! */
.btl-silhouette::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 4px;
  background: rgba(15, 23, 42, 0.95);
  z-index: 5;
  pointer-events: none;
}
.btl-liquid {
  position: absolute;
  bottom: 0; left: -18%; right: -18%;
  width: 136%;
  background: linear-gradient(180deg, rgba(var(--s-rgb, 16, 185, 129), 0.92) 0%, rgba(var(--s-rgb, 16, 185, 129), 0.75) 48%, rgba(4, 12, 24, 0.95) 100%);
  box-shadow: 0 -4px 20px rgba(var(--s-rgb, 16, 185, 129), 0.55), inset 0 6px 14px rgba(255, 255, 255, 0.35);
  transform-origin: 50% 0%;
  transform: rotate(var(--slosh-deg, 0deg));
  transition: height 0.06s linear;
  pointer-events: none;
}
.btl-meniscus {
  position: absolute;
  top: -6px; left: 0; right: 0;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.88) 0%, rgba(var(--s-rgb, 16, 185, 129), 0.72) 68%, transparent 100%);
  border-radius: 50%;
}
.btl-ticks {
  position: absolute;
  inset: 12px 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 4;
}
.btl-ticks span {
  font-size: 0.69rem;
  font-weight: 800;
  color: rgba(248, 250, 252, 0.88);
  text-align: right;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.28);
  line-height: 1;
  padding-bottom: 2px;
}
.btl-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.btl-keypad button {
  background: rgba(15, 23, 42, 0.90);
  color: var(--text);
  border: 1px solid rgba(100, 116, 139, 0.42);
  border-radius: 10px;
  min-height: 46px;
  font-size: 1.12rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btl-keypad button:hover { border-color: var(--accent); color: #34d399; }
.btl-keypad button:active {
  transform: scale(0.95) !important;
  border-color: var(--accent) !important;
  background: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.45) !important;
  filter: brightness(1.22);
}

.inv-step-btn {
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.inv-step-btn:active {
  transform: scale(0.93) !important;
  border-color: var(--accent) !important;
  background: rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.40) !important;
  filter: brightness(1.2);
}

.inv-bottle-pill:active {
  transform: scale(0.96) !important;
  filter: brightness(1.2);
}

.btn:active, .subtab-btn:active {
  transform: scale(0.97) !important;
  filter: brightness(1.18);
}

/* ==========================================================================
   8. LINE-OF-SIGHT MODALS, AUTOCOMPLETE & HOVER TOOLTIP GUIDE
   ========================================================================== */
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: radial-gradient(circle at 50% 40%, rgba(15, 23, 42, 0.82) 0%, rgba(2, 4, 10, 0.94) 100%) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3000 !important;
  padding: 16px !important;
  overflow-y: auto !important;
  outline: none !important;
}
#bdDestructiveConfirmModal,
#bdManagerPinModal,
#appExitConfirmModal,
#bdScreenshotLightboxModal {
  z-index: 99999999 !important;
}
*, *:focus, *:focus-visible {
  outline: none !important;
}
.modal-backdrop, .modal-box, .modal-card,
.modal-backdrop *, .modal-box *, .modal-card *,
button:focus, button:focus-visible,
.btn:focus, .btn:focus-visible,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.modal-box {
  background: linear-gradient(180deg, #10192d 0%, #070b14 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 16px !important;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px !important;
  margin: auto !important;
  animation: modalPop 0.24s var(--spring) forwards;
  box-shadow: 0 24px 55px -6px rgba(2, 6, 23, 0.88), 0 6px 24px -2px rgba(14, 165, 233, 0.18) !important;
  outline: none !important;
}
.modal-box > h3 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
}
.modal-box > h3 > button.btn-danger {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  flex: 0 0 34px !important;
}

#bdCustomSkuSuggest {
  position: fixed;
  z-index: 3500;
  background: #0b1322;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.90);
  max-height: 230px;
  overflow-y: auto;
  padding: 6px;
  display: none;
}
.bd-sug-item {
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}
.bd-sug-item:hover { background: rgba(56, 189, 248, 0.16); }

.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #032215;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.84rem;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.45);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.22s var(--spring), transform 0.22s var(--spring);
  will-change: transform, opacity;
  backface-visibility: hidden;
  z-index: 3600;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }

/* Universal Hover Guide Tooltip Toast */
#bdHoverGuideToast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 20px;
  max-width: 390px;
  background: rgba(11, 19, 34, 0.96);
  border: 1px solid rgba(56, 189, 248, 0.55);
  color: #f8fafc;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  z-index: 3400;
}
#bdHoverGuideToast.show { opacity: 1; transform: translateY(0); }

.flashcard {
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.94) 0%, rgba(8, 13, 24, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 16px auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px -4px rgba(2, 6, 23, 0.72), 0 4px 14px -2px rgba(14, 165, 233, 0.12);
}
.quiz-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 15px;
  margin-bottom: 8px;
  background: var(--panel-alt);
  border: 1px solid rgba(56, 189, 248, 0.24);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.quiz-opt:hover {
  border-color: rgba(56, 189, 248, 0.78);
  box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.26), inset 0 0 8px rgba(56, 189, 248, 0.14);
}

/* Mobile responsive dock, modals & cocktail card grids moved to /css/app-modals-mobile.css */