/* =============================================================================
   HAILO — UNIFIED DESIGN SYSTEM (2026-05-19)

   Source of truth for the visual language across the entire Hailo desktop
   app. Mirrors the marketing site at hailo.studio — same palette, same
   typography, same glass treatment, same orbs. Loads AFTER crm.css and
   liquid_glass_v3.css so this layer wins on the cascade.

   Strategy: don't rewrite the templates. Re-bind the tokens every existing
   class already reads through, and override only the components whose
   shapes drifted from the site (top bar, sidebar, cards, buttons, forms,
   tables, calendar, cmd-k, flashes, modals).

   Wings (Manage / Edit / Deliver) used to be color-tinted differently.
   That's retired here — the wings are CONTENT, not chrome. The whole
   product reads as one cohesive surface.
   ============================================================================= */

/* ── Website tokens (override everything before this) ─────────────────── */
:root,
body[data-wing="manage"],
body[data-wing="edit"],
body[data-wing="deliver"],
body:not([data-wing]) {
  /* Base canvas */
  --bg:              #06040d;
  --bg-deep:         #06040d;
  --bg-base:         #0c0818;
  --bg-elevated:     #0c0818;

  /* Purple-tinted lavender glass surfaces */
  --glass-bg:        rgba(20, 12, 38, 0.40);
  --glass-bg-strong: rgba(20, 12, 38, 0.55);
  --glass-bg-deep:   rgba(20, 12, 38, 0.65);
  --surface-1:       rgba(20, 12, 38, 0.40);
  --surface-2:       rgba(20, 12, 38, 0.55);
  --surface-active:  rgba(40, 24, 72, 0.55);

  /* Lavender hairlines */
  --glass-border:        rgba(167, 139, 250, 0.18);
  --glass-border-strong: rgba(167, 139, 250, 0.35);
  --border-faint:        rgba(167, 139, 250, 0.10);
  --border-line:         rgba(167, 139, 250, 0.18);
  --border-strong:       rgba(167, 139, 250, 0.32);

  /* Brand colors — purple primary, teal accent (per the website) */
  --purple-100: #f0eaff;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --teal-300:   #7dd3fc;
  --teal-400:   #4dd0e1;
  --teal-500:   #22d3ee;
  --teal-600:   #0891b2;

  /* Map the legacy --accent / --wing-* tokens to the website palette so
     the existing crm.css rules that read through them re-theme without
     edit. PURPLE is primary; teal is the secondary accent. */
  --accent:        #7c3aed;
  --accent-soft:   #22d3ee;
  --accent-hover:  #8b5cf6;
  --accent-line:   rgba(124, 58, 237, 0.55);
  --accent-tint:   rgba(124, 58, 237, 0.10);
  --accent-glow:   rgba(124, 58, 237, 0.22);
  --accent-subtle: rgba(124, 58, 237, 0.08);

  --wing-accent:        #7c3aed;
  --wing-accent-soft:   #22d3ee;
  --wing-accent-deep:   #6d28d9;
  --wing-accent-glow:   rgba(124, 58, 237, 0.55);
  --wing-accent-tint:   rgba(124, 58, 237, 0.10);
  --wing-bloom-a:       rgba(124, 58, 237, 0.55);
  --wing-bloom-b:       rgba(34, 211, 238, 0.30);
  --wing-bloom-c:       rgba(167, 139, 250, 0.25);

  /* Text */
  --text:           #ece7f7;
  --text-primary:   #ece7f7;
  --text-secondary: rgba(236, 231, 247, 0.70);
  --text-tertiary:  rgba(196, 181, 253, 0.55);
  --text-faint:     rgba(196, 181, 253, 0.45);
  --text-mute:      rgba(196, 181, 253, 0.25);
  --text-dim:       rgba(236, 231, 247, 0.70);

  /* Status semantics */
  --status-success: #34D399;
  --status-warning: #FBBF24;
  --status-danger:  #FF8585;
  --status-info:    #67E8F9;

  /* Typography — Inter only (website font) */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', Menlo, 'Roboto Mono', monospace;

  /* Shadows */
  --shadow-card:    0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-pop:     0 20px 60px rgba(124, 58, 237, 0.18);
  --shadow-button:  0 8px 32px rgba(124, 58, 237, 0.40);

  /* Glass blur */
  --glass-blur: blur(20px) saturate(160%);
}

/* ── Page base ────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

* { font-family: inherit; }

/* Re-bind the legacy site font families that templates may set inline */
.halo-brand, .halo-brand-word, .halo-brand-sub,
.page-title, .page-sub, .card-title, .card,
.btn, .btn-primary, .btn-ghost, .btn-soft, .btn-gradient,
.sidebar, .sidebar-nav, .nav-item, .nav-label,
.halo-wing, .halo-topbar,
input, textarea, select, button {
  font-family: var(--font-body) !important;
}

/* ── Animated orbs (carbon-copy the website's drift) ──────────────────── */
.orbs {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: hailo-drift 28s ease-in-out infinite;
  background: radial-gradient(circle, var(--purple-600), transparent 60%);
}
.orb.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--purple-600), transparent 60%);
  top: -200px; left: -150px;
  animation-delay: 0s;
}
.orb.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--teal-600), transparent 60%);
  top: 30%; right: -200px;
  animation-delay: -9s; animation-duration: 32s;
}
.orb.orb-3 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--purple-500), transparent 60%);
  bottom: -300px; left: 30%;
  animation-delay: -18s; animation-duration: 36s;
}
@keyframes hailo-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(50px, -60px) scale(1.08); }
  50%      { transform: translate(-40px, 80px) scale(0.96); }
  75%      { transform: translate(-70px, -30px) scale(1.04); }
}

/* ── App shell ────────────────────────────────────────────────────────── */
.app-shell {
  position: relative;
  z-index: 2;
}
.app-main {
  position: relative;
  z-index: 2;
}

/* Floating-capsule clearance.
   The MED capsule hangs ~30px below the topbar's bottom edge. Manage
   pages start content flush with the topbar (page-header is the first
   child of .app-main), so the capsule overlaps the title block. Push
   Manage content down enough to clear the overhang + visual breathing
   room. Edit is an iframe and Deliver's layout already has hero
   spacing, so we scope this to Manage only. */
body[data-wing="manage"] .app-main {
  padding-top: 44px;
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
/* One-row layout, taller (2026-05-19 third pass). Height 72 + vertical
   padding zeroed; the brand/wings/right-cluster all align to the row's
   centerline. The wings are absolutely centered inside the topbar so
   their position is independent of brand/right-cluster widths — that's
   what makes the liquid bubble travel dead-center horizontally. */
.halo-topbar {
  position: sticky; top: 0;
  z-index: 100;
  display: flex; align-items: center;
  gap: 20px;
  height: 72px;
  padding: 0 28px;
  background: linear-gradient(to bottom, rgba(6, 4, 13, 0.92), rgba(6, 4, 13, 0.65));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
}

.halo-brand {
  display: flex; align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.halo-brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple-500), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
  color: #fff;
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.45),
              inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  object-fit: contain;
}
.halo-brand-stack {
  display: flex; flex-direction: column;
  line-height: 1.1;
}
.halo-brand-word {
  font-weight: 800; font-size: 19px;
  letter-spacing: -0.5px;
  background: linear-gradient(140deg, #f0eaff, #c4b5fd 45%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.halo-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Wing switcher — floating capsule that hangs HALFWAY OFF the bottom
   of the topbar. Anchored at top:100% (bottom edge of topbar) with a
   -50% Y translate, so the capsule straddles the topbar's bottom line:
   top half sits inside the bar, bottom half spills onto the page below.
   That overhang is what makes MED read as a hero element — it doesn't
   live "in" the chrome, it bridges chrome and content.

   Bubble bug fix (third pass): crm.css set .halo-wing-pill to
   display:none !important when the pill was retired earlier in the
   project. Resurrecting it requires winning that !important fight — see
   the rule below. */
.halo-wings {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center;
  gap: 2px;
  padding: 5px;
  /* The visible capsule (bg + border + bulge) lives inside .halo-capsule-gooed
     so the SVG goo filter can deform it. The nav itself is now just a
     positioning container — transparent, no border, no backdrop. The
     drop shadow stays here (NOT inside the gooed layer) because we
     don't want the shadow getting blurred + thresholded too. */
  background: transparent !important;
  border: 1px solid transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 18px 40px -8px rgba(0, 0, 0, 0.55),
    0 6px 16px -4px rgba(124, 58, 237, 0.30);
  border-radius: 999px;
  z-index: 101;
  overflow: visible;
}

/* Gooed wrapper. The SVG filter blurs everything inside, then thresholds
   alpha back to a sharp outline — two nearby same-colored shapes
   (.halo-capsule-bg + .halo-capsule-bulge) merge into one organic shape
   with a smooth bulge where they overlap. Wing text + the inner pill
   are siblings of this wrapper (not descendants) so they don't get
   blurred. */
.halo-capsule-gooed {
  position: absolute;
  inset: 0;
  filter: url(#halo-goo);
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}
.halo-capsule-bg {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  /* Slightly more opaque so the goo's alpha threshold catches it cleanly.
     The translucent-glass look is already provided by the topbar's own
     backdrop, so we can afford to make the capsule itself a bit more
     solid here. */
  background: rgba(28, 18, 48, 0.90);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.halo-capsule-bulge {
  position: absolute;
  /* Extends past the capsule's top + bottom — that protrusion is what
     gets merged via the goo filter into the capsule outline as a
     localized swelling. Bigger top/bottom = more pronounced bulge.
     Trimmed -8→-6 in sync with the smaller capsule (6th pass). */
  top: -6px; bottom: -6px;
  /* left + width are set by JS to match the active wing — same code
     path as the inner bubble, so they move in lockstep. */
  left: 0; width: 0;
  border-radius: 999px;
  /* SAME background + border as .halo-capsule-bg — that's what makes
     them merge seamlessly under the goo filter. If the colors differ,
     the bulge would read as a separate blob. */
  background: rgba(28, 18, 48, 0.90);
  border: 1px solid rgba(167, 139, 250, 0.45);
  /* Same timing as the inner pill so the bulge tracks the bubble. */
  transition: left 0.85s cubic-bezier(0.5, 1.4, 0.4, 1),
              width 0.85s cubic-bezier(0.5, 1.4, 0.4, 1);
}
.halo-wing-pill {
  /* display:block !important defeats the retired-pill rule in crm.css. */
  display: block !important;
  position: absolute;
  /* Bubble stays INSIDE the capsule. The outer capsule's "bulge around
     the active mode" effect is produced by a separate metaball layer
     (.halo-capsule-gooed) — see below. The bubble doesn't drive that
     deformation, it rides on top of it. */
  top: 6px; bottom: 6px;
  /* left + width are set by JS — pre-set to 0 so an un-scripted page
     (or pre-DOM-ready render) doesn't flash a full-width bubble. */
  left: 0; width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg,
              rgba(124, 58, 237, 0.55),
              rgba(34, 211, 238, 0.38));
  border: 1px solid rgba(167, 139, 250, 0.50);
  /* Spring overshoot easing — the >1 second control point gives the
     bubble a little "pop" at the destination, which is what reads as
     "liquid" instead of "linear slide." Both left and width travel
     together so the bubble morphs into the destination's footprint.
     Duration bumped 0.55s → 0.85s and overshoot softened 1.55 → 1.4
     for a more deliberate, less-snappy travel (2026-05-19 4th pass). */
  transition: left 0.85s cubic-bezier(0.5, 1.4, 0.4, 1),
              width 0.85s cubic-bezier(0.5, 1.4, 0.4, 1);
  pointer-events: none;
  z-index: 0;
  box-shadow:
    0 0 32px rgba(124, 58, 237, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.halo-wing {
  position: relative;
  z-index: 1;
  /* Slimmed slightly (2026-05-19 6th pass) — capsule was reading too
     bulky relative to the topbar; trimmed vertical padding 13→10 and
     horizontal 34→26 so the capsule shrinks without changing
     proportions. Font also dropped 15→13.5 to match. */
  padding: 10px 26px;
  border-radius: 999px;
  /* Wipe the segmented-control background that the older crm.css adds
     to .halo-wing.is-active — the bubble is the active indicator now. */
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
/* Kill the stale ::after underline accent from crm.css — the bubble
   replaces it entirely, otherwise both render simultaneously. */
.halo-wing.is-active::after { display: none !important; }
.halo-wing:hover { color: var(--purple-100); }
.halo-wing.is-active {
  color: #ffffff;
}

/* Bulge reaction — fires when the user clicks the already-active wing.
   JS adds .bulge to the pill, which runs this keyframe (a single squish
   + return). transform is independent of the left/width transitions
   that drive bubble travel, so they don't fight each other. */
.halo-wing-pill.bulge {
  animation: halo-pill-bulge 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}
@keyframes halo-pill-bulge {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.08, 1.18); }
  100% { transform: scale(1, 1); }
}

/* ── Pipeline-active glow (replaces the old thin progress bar) ────────
   The topbar JS still toggles .halo-wing-progress[hidden] on/off based
   on /edit/api/pipeline_state, but instead of rendering as a 3px bar at
   the bottom of the Edit pill, we repurpose the element as a full-bleed
   pulsing teal halo that fills the wing tile and breathes a soft glow
   outward. Same activation signal, calmer visual, no implied percentage.

   Why override here (not in crm.css): crm.css sets `.halo-wing` to
   `box-shadow: none !important`, so the glow CANNOT live on the wing
   tile itself. It lives on `.halo-wing-progress` (an independent child
   element whose box-shadow is unaffected by that rule), and we override
   the bar layout from crm.css to a full-tile halo here in the
   later-loaded sheet so the cascade wins cleanly. */
.halo-wing-progress {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important; right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  width: auto !important;
  border-radius: 999px !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none;
  z-index: -1;
  animation: haloPipelineHaloPulse 2.4s ease-in-out infinite;
}
.halo-wing-progress[hidden] { display: none !important; }
/* The inner fill is irrelevant in halo mode — kill it. */
.halo-wing-progress-fill { display: none !important; }
@keyframes haloPipelineHaloPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(45, 212, 191, 0.00),
      0 0 6px 0 rgba(45, 212, 191, 0.15);
  }
  50% {
    box-shadow:
      0 0 22px 3px rgba(45, 212, 191, 0.60),
      0 0 40px 8px rgba(167, 139, 250, 0.22);
  }
}

/* Top-bar right cluster */
.halo-topbar-right {
  display: flex; align-items: center;
  gap: 12px;
  margin-left: auto;
}

.halo-search-trigger {
  display: flex; align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.halo-search-trigger:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  color: var(--purple-100);
}
.halo-search-trigger kbd {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(6, 4, 13, 0.5);
  border: 1px solid var(--glass-border);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-faint);
}

.halo-project-chip {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  border-radius: 100px;
  background: linear-gradient(140deg, rgba(124, 58, 237, 0.18), rgba(34, 211, 238, 0.10));
  border: 1px solid var(--glass-border-strong);
  font-size: 12px;
  font-weight: 600;
  color: var(--purple-100);
  text-decoration: none;
  transition: all 0.2s;
}
.halo-project-chip:hover {
  border-color: var(--purple-400);
  transform: translateY(-1px);
}
.halo-project-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px var(--teal-400);
}
.halo-project-chip-clear {
  background: none; border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 4px;
}
.halo-project-chip-clear:hover { color: var(--purple-100); }

.halo-ws {
  display: flex; align-items: center;
  gap: 10px;
}
.halo-icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.halo-icon-btn:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  color: var(--purple-100);
}
/* Bell dropdown panel.
   Earlier inline-style version used var(--surface-2, …) which resolves
   to rgba(28,32,40,0.65) — way too transparent against the dark page,
   making the panel read as a "faint ghost." Solid #0e1116 fill + heavier
   border + deeper shadow makes the panel sit cleanly on top of any wing
   without bleeding through. */
.halo-bell-wrap { position: relative; }
.halo-bell-panel {
  position: absolute;
  right: 0; top: calc(100% + 10px);
  width: 380px;
  max-height: 480px;
  overflow: auto;
  background: #0e1116;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.75),
    0 8px 20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 80;
  color: var(--text-primary, #e9ecf2);
}
.halo-bell-panel[hidden] { display: none; }
.halo-bell-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.halo-bell-row.is-unread:hover {
  background: rgba(45, 212, 191, 0.10) !important;
}
.halo-bell-act { transition: opacity 0.15s ease; }
.halo-bell-act:hover { opacity: 1 !important; }

.halo-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--purple-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.halo-avatar-wrap { position: relative; }
.halo-ws-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-500), var(--teal-500));
  border: 1px solid var(--glass-border-strong);
  cursor: pointer;
  object-fit: cover;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.30);
}

.halo-mode-toggle {
  display: flex; align-items: center;
  gap: 8px;
}
.halo-mode-toggle-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple-300);
}
.halo-mode-toggle-track {
  width: 38px; height: 22px;
  border-radius: 100px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-strong);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.halo-mode-toggle.is-on .halo-mode-toggle-track {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  border-color: var(--purple-400);
}
.halo-mode-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--purple-100);
  transition: transform 0.2s;
}
.halo-mode-toggle.is-on .halo-mode-toggle-thumb {
  transform: translateX(16px);
}

.halo-status-pill {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.halo-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
  box-shadow: 0 0 8px var(--teal-400);
}

/* Avatar menu (dropdown) */
.halo-avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  /* 2026-05-20 — Was var(--glass-bg-deep) (≈0.65 alpha), which let the
     chat/page chrome behind bleed through and hurt readability. Cody's
     verdict after walking the opacity scale: go fully solid. Backdrop
     blur removed since nothing shows through. */
  background: #14101F;
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-pop);
  z-index: 200;
}
.halo-avatar-menu-header {
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 6px;
}
.halo-avatar-menu-header-label {
  /* 2026-05-20 — Was a plain solid purple in the heavy default weight,
     which read as "old branding" next to the Hailo wordmark. Switched
     to the brand teal→purple gradient (same treatment as the wordmark)
     and on the Inter display family so the label matches the rest of
     the new branding. */
  font-family: var(--font-display), 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  background: linear-gradient(90deg, #2DD4BF, #A78BFA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 2px;
}
.halo-avatar-menu-header-sub {
  font-size: 11px;
  color: var(--text-faint);
}
.halo-avatar-menu-item {
  display: flex; align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.halo-avatar-menu-item:hover {
  background: var(--glass-bg);
  color: var(--purple-100);
}
.halo-avatar-menu-item-strong { color: var(--purple-100); font-weight: 600; }
.halo-avatar-menu-item-quiet { color: var(--text-faint); }
.halo-avatar-menu-sep {
  height: 1px;
  background: var(--glass-border);
  margin: 6px 0;
}
.halo-avatar-menu-tag {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(34, 211, 238, 0.10);
  color: var(--teal-400);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.halo-avatar-menu-tag-soon {
  background: rgba(167, 139, 250, 0.10);
  color: var(--purple-300);
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
/* The sidebar is a transparent column, NOT a glass card. The template
   ships `class="sidebar glass"` because every other surface in the app
   reads as glass — but on the rail it produces a floating-box look
   that boxes-in Dashboard/Clients/Calendar visually. Override the
   .glass card defaults so .sidebar only gets a quiet right-edge line
   and breathing room, no rounded card chrome. */
.sidebar,
.sidebar.glass {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* 10px of top padding so the collapse pill + search bar both sit
     clear of the topbar's bottom edge. Previously had 0 top padding
     so the search aligned with the dashboard hero — but the toggle
     pill at top:5 ended up visually crowding the topbar. Slight loss
     of hero-row alignment is worth the breathing room. */
  padding: 10px 14px 16px !important;
  color: var(--text-dim) !important;
}
.sidebar::before, .sidebar.glass::before { display: none !important; }
.sidebar-brand,
.sidebar-app-name {
  color: var(--purple-100) !important;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.sidebar-business-name {
  color: var(--text-faint) !important;
  font-size: 11px;
  font-weight: 500;
}
/* The spine is just the <nav> wrapper for the cross-wing items
   (Dashboard / Clients / Calendar). It must NOT have a background —
   that previously painted a rounded box around just those three rows,
   which read like a phantom "container" highlight. */
.sidebar-spine {
  background: transparent !important;
  border: none !important;
  padding-bottom: 4px;
}
/* The real input is .sidebar-search-input inside .sidebar-search. Don't
   paint the wrapper — only the input — and explicitly restore the 32px
   left padding the template uses to make room for the magnifying-glass
   icon. The generic `input[type="search"]` rule above would otherwise
   reset it to 14px, leaving the icon on top of the placeholder text. */
.sidebar-search {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 8px;
}
.sidebar-search-input,
input.sidebar-search-input,
input[type="search"].sidebar-search-input {
  background: rgba(6, 4, 13, 0.45) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  padding: 9px 12px 9px 34px !important;
  font-size: 13px !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.sidebar-search-input:focus {
  border-color: var(--purple-400) !important;
  background: rgba(6, 4, 13, 0.60) !important;
  box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.sidebar-search-icon {
  color: var(--text-faint) !important;
  left: 11px !important;
}
.sidebar-search-input::placeholder { color: var(--text-mute) !important; }
.sidebar-nav { padding: 8px; }
.sidebar-wing-section { margin-bottom: 12px; }
.sidebar-wing-section-head {
  padding: 14px 14px 6px;
}
/* The wing label ("MANAGE" / "EDIT" / "DELIVER") + the hairline divider
   that runs to the right edge. Quieter than the original Bebas-Neue
   treatment so it doesn't compete with the active nav row. */
.sidebar-wing-label {
  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: var(--text-faint) !important;
}
.sidebar-wing-divider {
  background: var(--border-faint) !important;
  opacity: 0.6;
}
.nav-item {
  display: flex; align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  position: relative;
  border: 1px solid transparent;
}
.nav-item:hover {
  background: rgba(167, 139, 250, 0.06);
  color: var(--purple-100);
}
/* Active row — much softer than before. Tinted lavender wash + a 2px
   gradient bar pinned to the left edge does the "you are here" job
   without reading as a giant button. */
.nav-item.is-active {
  background: rgba(124, 58, 237, 0.10);
  color: var(--purple-100);
  border-color: transparent;
  padding-left: 14px;
}
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 4px; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--purple-400), var(--teal-400));
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.45);
}
.nav-icon {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.nav-label { flex: 1; }

.nav-group { margin-bottom: 4px; }
.nav-group-chevron {
  font-size: 9px;
  opacity: 0.5;
  transition: transform 0.2s;
}
.nav-group.is-open .nav-group-chevron { transform: rotate(90deg); }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--glass-border);
  margin-top: auto;
}
.sidebar-footer-meta {
  font-size: 11px;
  color: var(--text-mute);
}
.sidebar-foot-link {
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
}
.sidebar-foot-link:hover { color: var(--teal-400); }
.sidebar-version {
  font-size: 10px;
  color: var(--text-mute);
  font-family: var(--font-mono);
}

/* ─── Sidebar top row (search + collapse toggle, side-by-side) ─────────
   The .sidebar-top wrapper guarantees these two are flex-children of the
   same row. No absolute positioning, no calc() width hacks — they share
   the row naturally and stay vertically centered together. */
.sidebar { position: relative; }
/* NEW STRATEGY (2026-05-19, final attempt): absolute-position the toggle
   against .sidebar so its right edge matches the nav rows' right edge by
   direct measurement — `right: 22px` = sidebar's 14px right padding +
   sidebar-nav's 8px right padding. Bypasses all the grid/flex cascade
   ambiguity that was preventing alignment.

   .sidebar-top now ONLY holds the search bar, with right padding sized
   to reserve room for the toggle hovering over the row. */
.sidebar-top {
  position: static !important;
  display: block !important;
  margin-bottom: 12px !important;
  padding: 0 8px !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
}
.sidebar-nav { padding: 8px !important; box-sizing: border-box !important; }
.sidebar-top .sidebar-search {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;            /* required for grid item to shrink below content size */
  max-width: 100%;
  overflow: hidden;
}
.sidebar-top .sidebar-search-input-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.sidebar-top .sidebar-search-input {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
/* Collapse toggle — absolutely positioned against the sidebar so its
   right edge sits at sidebar's right - 22px = exactly where the nav
   rows (Dashboard, Clients, Calendar) end. Vertical position centers
   it on the search input row. */
.sidebar-toggle {
  position: absolute !important;
  right: 22px !important;
  top: 25px !important;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 8px;
  background: rgba(20, 12, 38, 0.55);
  border: 1px solid var(--glass-border-strong);
  color: var(--text-faint);
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: rgba(40, 24, 72, 0.85);
  border-color: var(--purple-400);
  color: var(--purple-100);
  outline: 0;
}
.sidebar-toggle:active { transform: scale(0.94); }
.sidebar-toggle-icon {
  width: 13px; height: 13px;
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
html.is-sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }

/* ─── Footer-meta layout (toggle no longer lives here) ─────────────── */
.sidebar-footer-meta {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.sidebar-footer-meta .sidebar-foot-link {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Collapsed icon-rail state ────────────────────────────────────
   When the user collapses the sidebar (⌘\ or click the toggle), the
   rail shrinks to ~64px. Everything text-y hides; only icons + the
   toggle remain. Icons center in the narrow column; the active row's
   left-bar accent is suppressed (it would point at empty space). */
html.is-sidebar-collapsed .sidebar {
  padding: 14px 8px 16px !important;
}
html.is-sidebar-collapsed .sidebar-search,
html.is-sidebar-collapsed .sidebar-wing-section-head,
html.is-sidebar-collapsed .sidebar-footer-meta,
html.is-sidebar-collapsed .nav-label,
html.is-sidebar-collapsed .nav-group-chevron,
html.is-sidebar-collapsed .nav-group > .nav-group-children {
  display: none !important;
}
/* Toggle on its own at the top of the collapsed rail, centered. */
html.is-sidebar-collapsed .sidebar-top {
  justify-content: center;
  margin-bottom: 14px;
}
/* Centered icon rows, no left-bar accent, no extra padding-left. */
html.is-sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px 0 !important;
}
html.is-sidebar-collapsed .nav-item.is-active {
  background: rgba(124, 58, 237, 0.10);
  padding-left: 0 !important;
}
html.is-sidebar-collapsed .nav-item.is-active::before {
  display: none;
}
html.is-sidebar-collapsed .nav-icon { opacity: 1; }
html.is-sidebar-collapsed .nav-item.is-active .nav-icon { color: var(--purple-100); }

/* Search now uses the full sidebar width — no more room reserved on
   the right for the toggle pill, since the toggle moved to the footer. */
.sidebar-search { padding-right: 0 !important; }

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 32px 24px;
  margin-bottom: 8px;
}
.page-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
  background: linear-gradient(140deg, #f0eaff, #c4b5fd 50%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.page-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
}
.page-body {
  padding: 0 32px 64px;
}
.page-actions {
  display: flex; align-items: center;
  gap: 10px;
}

/* ── Cards / glass surfaces ───────────────────────────────────────────── */
.card,
.glass {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  color: var(--text);
}
.card::before,
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-strong), transparent);
}
.card.lift:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 18px 56px rgba(124, 58, 237, 0.16);
}
.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--purple-100);
  letter-spacing: -0.3px;
  margin-bottom: 6px;
  display: flex; align-items: center;
  gap: 10px;
}
.card-title-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(34, 211, 238, 0.15));
  border: 1px solid var(--glass-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* Grids */
.grid    { display: grid; gap: 20px; }
.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn,
.button,
button.btn,
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px;
  background: var(--glass-bg);
  color: var(--purple-100);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1.2;
}
.btn:hover,
.button:hover {
  background: var(--glass-bg-strong);
  border-color: var(--purple-400);
  transform: translateY(-1px);
}

.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
  padding: 14px 26px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-button);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(124, 58, 237, 0.55);
}

.btn-gradient {
  background: linear-gradient(135deg, var(--purple-600), var(--teal-500)) !important;
  color: #fff !important;
  border: none;
}

.btn-ghost,
.btn.btn-ghost {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-strong);
  color: var(--purple-100);
}
.btn-ghost:hover {
  background: rgba(40, 24, 72, 0.6);
  border-color: var(--purple-400);
}

.btn-soft {
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: var(--purple-100);
}
.btn-soft:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: var(--purple-400);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 8px;
}

/* ── Forms ────────────────────────────────────────────────────────────── */
.form-row { margin-bottom: 18px; }

label,
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple-300);
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input:not([type]),
textarea,
select,
.form-input,
.ep-input,
.rev-input,
.halo-mode-pwd-input,
.cmdk-input,
.sidebar-search input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(6, 4, 13, 0.50);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.2s;
}
input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.ep-input:focus,
.rev-input:focus,
.cmdk-input:focus {
  border-color: var(--teal-400);
  background: rgba(6, 4, 13, 0.65);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.10);
}
input::placeholder,
textarea::placeholder { color: var(--text-mute); }

textarea { min-height: 110px; line-height: 1.5; resize: vertical; }

input[type="checkbox"],
input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--purple-500);
  cursor: pointer;
  margin-right: 8px;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple-300);
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(20, 12, 38, 0.30);
}
table tbody td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--glass-border);
}
table tbody tr:hover { background: var(--glass-bg); }
table tbody tr:last-child td { border-bottom: none; }

/* ── Status chips / pills / badges ────────────────────────────────────── */
.pill,
.chip,
.tag,
.badge,
.status-pill {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
}
.pill.good,
.pill.success,
.chip.good,
.badge.success { background: rgba(52, 211, 153, 0.10); color: var(--status-success); border-color: rgba(52, 211, 153, 0.25); }
.pill.warn,
.pill.warning,
.chip.warn,
.badge.warning { background: rgba(251, 191, 36, 0.10); color: var(--status-warning); border-color: rgba(251, 191, 36, 0.25); }
.pill.danger,
.pill.error,
.chip.error,
.badge.danger { background: rgba(255, 133, 133, 0.10); color: var(--status-danger); border-color: rgba(255, 133, 133, 0.25); }
.pill.info,
.chip.info { background: rgba(103, 232, 249, 0.10); color: var(--status-info); border-color: rgba(103, 232, 249, 0.25); }

/* ── Flash messages ───────────────────────────────────────────────────── */
.flash-stack {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 0 32px;
  margin-bottom: 12px;
}
.flash {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  color: var(--text);
}
.flash-success { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.30); color: var(--status-success); }
.flash-info    { background: rgba(103, 232, 249, 0.08); border-color: rgba(103, 232, 249, 0.30); color: var(--status-info); }
.flash-error   { background: rgba(255, 133, 133, 0.08); border-color: rgba(255, 133, 133, 0.30); color: var(--status-danger); }
.flash-warning { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.30); color: var(--status-warning); }

/* ── Cmd+K palette ────────────────────────────────────────────────────── */
.cmdk { position: fixed; inset: 0; z-index: 500; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk[hidden] { display: none; }
.cmdk-scrim {
  position: absolute; inset: 0;
  background: rgba(6, 4, 13, 0.65);
  backdrop-filter: blur(8px);
}
.cmdk-shell {
  position: relative; z-index: 1;
  width: min(640px, 92vw);
  background: var(--glass-bg-deep);
  border: 1px solid var(--glass-border-strong);
  border-radius: 18px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.cmdk-shell::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-400), var(--teal-400), transparent);
}
.cmdk-input-row {
  display: flex; align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border);
}
.cmdk-icon { width: 18px; height: 18px; color: var(--text-faint); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 16px;
  color: var(--text);
  outline: none;
  box-shadow: none !important;
}
.cmdk-kbd {
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-faint);
}
.cmdk-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.cmdk-item {
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
}
.cmdk-item:hover,
.cmdk-item.is-selected {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(34, 211, 238, 0.08));
}
.cmdk-item-title { font-weight: 600; color: var(--purple-100); }
.cmdk-item-sub   { font-size: 12px; color: var(--text-faint); }
.cmdk-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--glass-border);
  display: flex; gap: 16px;
  font-size: 11px;
  color: var(--text-faint);
}
.cmdk-foot kbd {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono);
}

/* ── Quickview drawer ─────────────────────────────────────────────────── */
.quickview { position: fixed; inset: 0; z-index: 400; display: flex; justify-content: flex-end; }
.quickview[hidden] { display: none; }
.quickview-scrim {
  position: absolute; inset: 0;
  background: rgba(6, 4, 13, 0.55);
  backdrop-filter: blur(6px);
}
.quickview-panel {
  position: relative;
  width: min(460px, 92vw);
  height: 100%;
  background: var(--glass-bg-deep);
  border-left: 1px solid var(--glass-border-strong);
  backdrop-filter: var(--glass-blur);
  padding: 28px;
  overflow-y: auto;
  z-index: 1;
}
.quickview-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
}
.quickview-close:hover { color: var(--purple-100); }
.skel {
  background: linear-gradient(90deg, var(--glass-bg) 0%, var(--glass-bg-strong) 50%, var(--glass-bg) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skel-shimmer 1.4s infinite;
}
.skel-title { width: 60%; height: 22px; margin-bottom: 14px; }
.skel-line  { width: 100%; height: 12px; margin-bottom: 8px; }
.skel-line.short { width: 75%; }
@keyframes skel-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }

/* ── Metric tiles ─────────────────────────────────────────────────────── */
.metric,
.metric-card,
.stat-tile,
.state-tile {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  position: relative;
  overflow: hidden;
}
.metric-card::before { background: linear-gradient(90deg, transparent, var(--purple-400), var(--teal-400), transparent); }
.metric-label,
.state-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 10px;
}
.metric-value,
.state-count,
.big-money,
.dash-bignum {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1.5px;
  background: linear-gradient(140deg, #f0eaff, #a78bfa 60%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.metric-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(34, 211, 238, 0.15));
  border: 1px solid var(--glass-border-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 16px;
  color: var(--purple-100);
}
.metric-icon-purple { color: var(--purple-300); }
.metric-icon-teal,
.metric-icon-cyan   { color: var(--teal-400); }
.metric-icon-amber  { color: var(--status-warning); }

/* Trend chips */
.trend-chip {
  display: inline-flex; align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
}
.trend-up   { background: rgba(52, 211, 153, 0.10); color: var(--status-success); }
.trend-down { background: rgba(255, 133, 133, 0.10); color: var(--status-danger); }

/* ── Action / hero cards ──────────────────────────────────────────────── */
.action-card,
.dash-hero {
  padding: 36px 32px;
  border-radius: 22px;
  background: linear-gradient(140deg, rgba(124, 58, 237, 0.10), rgba(34, 211, 238, 0.06));
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  position: relative;
  overflow: hidden;
  /* Ambient-sky orbs (2026-05-19, Variant C). The two pseudo-elements act
     as soft radial-gradient orbs that we re-tint via data-sky=. They sit
     BEHIND the hero text and gently move when the data-sky attr changes.
     CSS variables hold per-sky colors so the transition between skies
     animates smoothly. Default values match the existing purple/teal feel
     so the hero looks right BEFORE the weather call comes back. */
  --sky-orb-a: rgba(167, 139, 250, 0.22);  /* lavender top-right glow */
  --sky-orb-b: rgba(34, 211, 238, 0.12);   /* teal bottom-left glow */
  --sky-headline-grad: linear-gradient(140deg, #f0eaff, #c4b5fd 60%, #22d3ee);
  transition: background 1.2s ease;
}
.dash-hero::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 78% 22%, var(--sky-orb-a), transparent 60%),
    radial-gradient(closest-side at 22% 82%, var(--sky-orb-b), transparent 65%);
  opacity: 0.95;
  transition: background 1.4s ease, opacity 1.4s ease;
  z-index: 0;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero .dash-hero-h {
  background: var(--sky-headline-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background 1.4s ease;
}

/* ── Sky presets ─────────────────────────────────────────────────────────
   Each preset tweaks two orb tints and the headline gradient. The presets
   map to weather + time-of-day combos returned by /api/weather. The CSS
   transitions animate smoothly when the data-sky attribute flips. */
.dash-hero[data-sky="sunrise"] {
  --sky-orb-a: rgba(251, 146, 60, 0.32);  /* warm peach top */
  --sky-orb-b: rgba(244, 114, 182, 0.18); /* rose horizon  */
  --sky-headline-grad: linear-gradient(140deg, #fff7ed, #fdba74 50%, #f472b6);
}
.dash-hero[data-sky="morning"] {
  --sky-orb-a: rgba(253, 224, 71, 0.22);  /* soft gold */
  --sky-orb-b: rgba(34, 211, 238, 0.14);  /* clear-sky teal */
  --sky-headline-grad: linear-gradient(140deg, #fef9c3, #fde047 50%, #22d3ee);
}
.dash-hero[data-sky="noon"] {
  --sky-orb-a: rgba(250, 204, 21, 0.28);  /* bright gold */
  --sky-orb-b: rgba(125, 211, 252, 0.18); /* sky blue */
  --sky-headline-grad: linear-gradient(140deg, #fef3c7, #facc15 50%, #38bdf8);
}
.dash-hero[data-sky="afternoon"] {
  --sky-orb-a: rgba(250, 204, 21, 0.18);
  --sky-orb-b: rgba(96, 165, 250, 0.20);
  --sky-headline-grad: linear-gradient(140deg, #fef3c7, #93c5fd 50%, #22d3ee);
}
.dash-hero[data-sky="sunset"] {
  --sky-orb-a: rgba(244, 63, 94, 0.32);   /* coral horizon */
  --sky-orb-b: rgba(139, 92, 246, 0.24);  /* dusk purple */
  --sky-headline-grad: linear-gradient(140deg, #fee2e2, #fb7185 45%, #a78bfa);
}
.dash-hero[data-sky="night"] {
  --sky-orb-a: rgba(99, 102, 241, 0.18);  /* indigo */
  --sky-orb-b: rgba(124, 58, 237, 0.22);  /* deep purple */
  --sky-headline-grad: linear-gradient(140deg, #e0e7ff, #a5b4fc 55%, #6366f1);
}
.dash-hero[data-sky="night-cloudy"] {
  --sky-orb-a: rgba(71, 85, 105, 0.30);   /* slate */
  --sky-orb-b: rgba(124, 58, 237, 0.18);
  --sky-headline-grad: linear-gradient(140deg, #cbd5e1, #94a3b8 55%, #818cf8);
}
.dash-hero[data-sky="cloudy"] {
  --sky-orb-a: rgba(148, 163, 184, 0.24); /* overcast slate */
  --sky-orb-b: rgba(100, 116, 139, 0.18);
  --sky-headline-grad: linear-gradient(140deg, #e2e8f0, #cbd5e1 50%, #94a3b8);
}
.dash-hero[data-sky="partly"] {
  --sky-orb-a: rgba(251, 191, 36, 0.22);
  --sky-orb-b: rgba(148, 163, 184, 0.22);
  --sky-headline-grad: linear-gradient(140deg, #fef3c7, #e2e8f0 55%, #94a3b8);
}
.dash-hero[data-sky="rain"] {
  --sky-orb-a: rgba(56, 189, 248, 0.22);  /* cool wet cyan */
  --sky-orb-b: rgba(59, 130, 246, 0.20);
  --sky-headline-grad: linear-gradient(140deg, #dbeafe, #93c5fd 55%, #38bdf8);
}
.dash-hero[data-sky="storm"] {
  --sky-orb-a: rgba(168, 85, 247, 0.26);  /* electric purple */
  --sky-orb-b: rgba(30, 64, 175, 0.30);   /* deep storm blue */
  --sky-headline-grad: linear-gradient(140deg, #e0e7ff, #a78bfa 55%, #1e40af);
}
.dash-hero[data-sky="snow"] {
  --sky-orb-a: rgba(224, 242, 254, 0.30); /* powder */
  --sky-orb-b: rgba(186, 230, 253, 0.22);
  --sky-headline-grad: linear-gradient(140deg, #f0f9ff, #e0f2fe 55%, #bae6fd);
}
.dash-hero[data-sky="fog"] {
  --sky-orb-a: rgba(203, 213, 225, 0.26);
  --sky-orb-b: rgba(148, 163, 184, 0.20);
  --sky-headline-grad: linear-gradient(140deg, #f1f5f9, #cbd5e1 55%, #94a3b8);
}

/* Inline weather pill that lives inside the eyebrow row. Borrows the same
   glass treatment as the rest of the v3 chrome. Hidden by default — the
   JS adds .is-loaded once /api/weather returns OK. */
.dash-hero-weather {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-left: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(236, 231, 247, 0.85);
  vertical-align: 1px;
  opacity: 0;
  transition: opacity 800ms ease;
}
.dash-hero-weather.is-loaded {
  display: inline-flex;
  opacity: 1;
}
.dash-hero-weather i {
  font-size: 13px;
  line-height: 1;
}
/* Per-sky icon tints so the chip itself echoes the mood. */
.dash-hero[data-sky="sunrise"]   .dash-hero-weather i,
.dash-hero[data-sky="morning"]   .dash-hero-weather i,
.dash-hero[data-sky="noon"]      .dash-hero-weather i,
.dash-hero[data-sky="afternoon"] .dash-hero-weather i { color: #fbbf24; }
.dash-hero[data-sky="sunset"]    .dash-hero-weather i { color: #fb7185; }
.dash-hero[data-sky="night"]     .dash-hero-weather i,
.dash-hero[data-sky="night-cloudy"] .dash-hero-weather i { color: #a5b4fc; }
.dash-hero[data-sky="cloudy"]    .dash-hero-weather i,
.dash-hero[data-sky="partly"]    .dash-hero-weather i,
.dash-hero[data-sky="fog"]       .dash-hero-weather i { color: #cbd5e1; }
.dash-hero[data-sky="rain"]      .dash-hero-weather i { color: #38bdf8; }
.dash-hero[data-sky="storm"]     .dash-hero-weather i { color: #a78bfa; }
.dash-hero[data-sky="snow"]      .dash-hero-weather i { color: #e0f2fe; }

/* ── Dashboard stat row (2026-05-19) ────────────────────────────────────
   Six glance-tiles immediately below the hero. Liquid Glass v3 vocabulary
   on dark, each tile tinted with a different brand accent. Hover lift +
   border-glow matches the action-card pattern elsewhere. */
.dash-stat-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .dash-stat-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .dash-stat-row { grid-template-columns: repeat(2, 1fr); } }

.dash-stat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg,
                              var(--tile-tint-strong, rgba(167,139,250,0.14)),
                              var(--tile-tint-soft,   rgba(167,139,250,0.03)));
  border: 1px solid var(--tile-border, rgba(167,139,250,0.20));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              border-color 180ms ease,
              box-shadow 180ms ease,
              background 180ms ease;
}
.dash-stat-tile:hover {
  transform: translateY(-2px);
  border-color: var(--tile-accent, #c4b5fd);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}
.dash-stat-tile:active { transform: translateY(0); }

.dash-stat-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--tile-icon-bg, rgba(167,139,250,0.22));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  color: var(--tile-accent, #c4b5fd);
}
/* Inline SVGs inherit color via currentColor — see the icon block in
   dashboard/index.html. Sized once here so all six render identically. */
.dash-stat-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Legacy <i class="ti …"> path kept in case anything else routes through
   this rule — falls back to the same accent color. */
.dash-stat-icon i {
  font-size: 20px;
  line-height: 1;
  color: var(--tile-accent, #c4b5fd);
}
.dash-stat-label {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tile-label, rgba(236,231,247,0.80));
  margin-bottom: 4px;
}
.dash-stat-value {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #ece7f7;
}

/* Per-tile color tints. CSS variables set on the tile drive the
   background gradient, border, icon chip, and label color. */
.dash-stat-tile--lavender {
  --tile-tint-strong: rgba(167,139,250,0.16);
  --tile-tint-soft:   rgba(167,139,250,0.04);
  --tile-border:      rgba(167,139,250,0.22);
  --tile-icon-bg:     rgba(167,139,250,0.22);
  --tile-accent:      #c4b5fd;
  --tile-label:       rgba(196,181,253,0.90);
}
.dash-stat-tile--gold {
  --tile-tint-strong: rgba(251,191,36,0.14);
  --tile-tint-soft:   rgba(251,191,36,0.03);
  --tile-border:      rgba(251,191,36,0.22);
  --tile-icon-bg:     rgba(251,191,36,0.20);
  --tile-accent:      #fbbf24;
  --tile-label:       rgba(251,191,36,0.88);
}
.dash-stat-tile--teal {
  --tile-tint-strong: rgba(34,211,238,0.14);
  --tile-tint-soft:   rgba(34,211,238,0.03);
  --tile-border:      rgba(34,211,238,0.22);
  --tile-icon-bg:     rgba(34,211,238,0.20);
  --tile-accent:      #67e8f9;
  --tile-label:       rgba(103,232,249,0.90);
}
.dash-stat-tile--pink {
  --tile-tint-strong: rgba(244,114,182,0.14);
  --tile-tint-soft:   rgba(244,114,182,0.03);
  --tile-border:      rgba(244,114,182,0.22);
  --tile-icon-bg:     rgba(244,114,182,0.20);
  --tile-accent:      #f9a8d4;
  --tile-label:       rgba(249,168,212,0.92);
}
.dash-stat-tile--mint {
  --tile-tint-strong: rgba(74,222,128,0.14);
  --tile-tint-soft:   rgba(74,222,128,0.03);
  --tile-border:      rgba(74,222,128,0.22);
  --tile-icon-bg:     rgba(74,222,128,0.20);
  --tile-accent:      #86efac;
  --tile-label:       rgba(134,239,172,0.92);
}
.dash-stat-tile--lilac {
  --tile-tint-strong: rgba(196,181,253,0.14);
  --tile-tint-soft:   rgba(196,181,253,0.03);
  --tile-border:      rgba(196,181,253,0.22);
  --tile-icon-bg:     rgba(196,181,253,0.20);
  --tile-accent:      #d8b4fe;
  --tile-label:       rgba(216,180,254,0.90);
}
.action-card::before,
.dash-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-400), var(--teal-400), transparent);
}
.action-card-eyebrow,
.dash-hero-eyebrow,
.qv-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-400);
}
.action-card-headline,
.dash-hero-h {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--purple-100);
  margin: 10px 0 8px;
  background: linear-gradient(140deg, #f0eaff, #c4b5fd 60%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.action-card-body,
.dash-hero-sub {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}
.action-card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: all 0.25s;
}
.action-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 44px rgba(124, 58, 237, 0.55);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty-state,
.dash-empty,
.dash-empty-block {
  padding: 48px 32px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px dashed var(--glass-border-strong);
  text-align: center;
  color: var(--text-dim);
}
.empty-state-art { font-size: 36px; opacity: 0.6; margin-bottom: 12px; }
.empty-state h3,
.dash-empty-h {
  font-size: 18px;
  color: var(--purple-100);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ── Calendar (calendar_view) ─────────────────────────────────────────── */
.cal,
.calendar {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px;
  backdrop-filter: var(--glass-blur);
  padding: 24px;
}
.cal-month,
.calendar-header {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--purple-100);
  background: linear-gradient(140deg, #f0eaff, #c4b5fd 50%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cal-grid,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 16px;
}
.cal-day,
.calendar-day,
.dash-heat-col {
  padding: 10px;
  min-height: 96px;
  border-radius: 10px;
  background: rgba(6, 4, 13, 0.40);
  border: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--text);
  position: relative;
  transition: all 0.15s;
}
.cal-day:hover,
.calendar-day:hover {
  background: var(--glass-bg-strong);
  border-color: var(--purple-400);
}
.cal-day.is-today,
.calendar-day.is-today {
  background: linear-gradient(140deg, rgba(124, 58, 237, 0.20), rgba(34, 211, 238, 0.10));
  border-color: var(--purple-400);
  color: var(--purple-100);
}
.cal-day.is-weekend { color: var(--text-faint); }
.cal-dow,
.calendar-dow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-400);
  text-align: center;
  padding: 8px 4px;
}
.cal-event,
.calendar-event {
  display: block;
  padding: 4px 8px;
  margin-top: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(34, 211, 238, 0.12));
  border: 1px solid var(--glass-border);
  font-size: 11px;
  color: var(--purple-100);
  text-decoration: none;
  font-weight: 500;
}

/* Heatmap (year overview) */
.heatmap-cell {
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.08);
}
.heatmap-cell.has-photo {
  background: linear-gradient(135deg, var(--purple-500), var(--teal-500));
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Dashboard-specific widgets ───────────────────────────────────────── */
.dash-grid       { display: grid; gap: 20px; }
.dash-hero       { margin-bottom: 20px; }
.dash-money-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-money-grid > div { min-width: 0; }
@media (max-width: 700px) { .dash-money-grid { grid-template-columns: 1fr; } }
.dash-money-l { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal-400); font-weight: 700; }
.dash-money-v { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; color: var(--purple-100); margin-top: 6px; white-space: nowrap; }
.dash-money-sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

.dash-week-row,
.dash-bench-row,
.dash-punch {
  display: flex; align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(6, 4, 13, 0.30);
  border: 1px solid var(--glass-border);
  margin-bottom: 8px;
}
.dash-week-row:hover,
.dash-bench-row:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border-strong);
}
.dash-week-label,
.dash-shoot-name,
.dash-bench-name,
.dash-punch-what {
  font-weight: 600;
  color: var(--purple-100);
  font-size: 14px;
}
.dash-shoot-meta,
.dash-bench-meta,
.dash-bench-days,
.dash-punch-when,
.dash-week-entry {
  font-size: 12px;
  color: var(--text-faint);
}
.dash-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(124, 58, 237, 0.15);
  color: var(--purple-300);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Sparkline / chart ────────────────────────────────────────────────── */
.dash-spark,
.rev-chart,
.viz-card {
  background: rgba(6, 4, 13, 0.30);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px;
}
.viz-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--purple-100);
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}
.viz-card-meta {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Section eyebrow utility (matches website) ────────────────────────── */
.qv-eyebrow,
.embed-preview-eyebrow,
.ep-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--purple-300);
}

/* ── Funnel widget (lead pipeline) ────────────────────────────────────── */
.funnel {
  display: flex; flex-direction: column;
  gap: 8px;
}
.funnel-stage {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(34, 211, 238, 0.06));
  border: 1px solid var(--glass-border);
  color: var(--purple-100);
  font-weight: 600;
  font-size: 13px;
}

/* ── Modal patterns (password gate for mode toggle, etc) ──────────────── */
.halo-mode-pwd-scrim {
  position: fixed; inset: 0;
  z-index: 600;
  background: rgba(6, 4, 13, 0.75);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}
.halo-mode-pwd-card {
  width: min(420px, 92vw);
  padding: 36px 32px;
  border-radius: 22px;
  background: var(--glass-bg-deep);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-pop);
  position: relative;
}
.halo-mode-pwd-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-400), var(--teal-400), transparent);
}
.halo-mode-pwd-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--purple-100);
  margin-bottom: 6px;
  background: linear-gradient(140deg, #f0eaff, #c4b5fd 50%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.halo-mode-pwd-sub {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 22px;
  line-height: 1.55;
}
.halo-mode-pwd-err {
  margin-top: 10px;
  font-size: 13px;
  color: var(--status-danger);
}
.halo-mode-pwd-actions {
  display: flex; gap: 10px;
  margin-top: 18px;
}

/* ── Embed preview (Settings → Embed forms) ───────────────────────────── */
.embed-preview-shell {
  padding: 24px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.embed-preview-iframe {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--bg);
}
.ep-headline {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--purple-100);
  background: linear-gradient(140deg, #f0eaff, #c4b5fd 60%, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ep-intro { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.ep-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-button);
}

/* ── Revenue / expense ledger ─────────────────────────────────────────── */
.rev-bar-stack { background: rgba(6,4,13,0.30); border-radius: 8px; overflow: hidden; }
.rev-bar-income  { background: linear-gradient(135deg, var(--purple-500), var(--teal-500)); }
.rev-bar-expense { background: linear-gradient(135deg, var(--status-danger), rgba(255,133,133,0.6)); }
.rev-legend {
  display: flex; gap: 14px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rev-exp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
}
.rev-exp-cat { color: var(--teal-400); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.rev-exp-amt { font-weight: 700; color: var(--purple-100); }
.rev-exp-date { color: var(--text-faint); font-size: 12px; }
.rev-sw, .rev-range {
  display: inline-flex; padding: 4px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.rev-sw button, .rev-range button,
.rev-sw-in, .rev-sw-ex {
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}
.rev-sw button.is-active,
.rev-sw-in.is-active,
.rev-sw-ex.is-active,
.rev-range button.is-active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(34, 211, 238, 0.15));
  color: var(--purple-100);
}

/* ── Misc text utilities ──────────────────────────────────────────────── */
.dim, .meta, .row-sub, .row-sub-soft, .row-quiet { color: var(--text-faint); font-size: 12px; }
.short { width: 75%; }
a, a:visited { color: var(--teal-400); text-decoration: none; }
a:hover { color: var(--teal-300); }

/* ── Code / mono ──────────────────────────────────────────────────────── */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  background: rgba(6, 4, 13, 0.50);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--teal-300);
}
pre {
  padding: 16px;
  overflow-x: auto;
  line-height: 1.5;
}

/* ── Scrollbar (consistent across wings) ──────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.20) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.18);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.35); }

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   ROLLBACK
   To restore the previous look:
     1. Remove the <link> to hailo_unified.css from base.html
     2. Re-copy crm.css, liquid_glass_v3.css, base.html, and
        hailo-app/static/index.html from:
        .snapshots/website_redesign_20260519/
   ============================================================================= */