/* ═══════════════════════════════════════════════════════════════════════
   60-dashboard-base.css — LEGACY BASE STYLES (dashboard-wide)
   Extracted from `templates/base.html` inline <style> block on
   18 Apr 2026 as part of the post-blueprint-refactor finish pass.
   ═══════════════════════════════════════════════════════════════════════

   Contains (in order):
     1. Universal reset (* selector)
     2. :root — Base tokens (--bg / --card-bg / --tone-* / ...)
        (legacy fintech-glass-luxe theme block removed 27 Apr 2026 — themes
         now live exclusively in 10-themes.css; this file only defines :root
         legacy-token defaults that all themes inherit through the bridge.)
     3. Dashboard-wide layout classes — .g24-header, .g24-sidebar, .g24-nav, .g24-logo
     4. Shared component legacy styles — .card, .btn, .tip, .toast, .badge, etc.

   Token naming here uses the OLD scheme (--bg, --tone-success-fg) that
   every blueprint CSS consumes. The NEW scheme in 00-tokens.css (--color-bg,
   --color-surface-card) is not yet wired. A future pass can rename old →
   new in one sweep + retrofit blueprint CSS.

   DO NOT duplicate these styles in blueprint CSS — this file loads FIRST
   (via design-system/index.css in base.html) so every blueprint inherits
   them automatically.
   ═══════════════════════════════════════════════════════════════════════ */

/* This legacy universal reset was extracted UNLAYERED from base.html on
   18 Apr 2026 — BEFORE the @layer cascade migration. Being unlayered, it beat
   EVERY layered component's padding/margin regardless of specificity, so
   `.kpi-tile` / `.chip` / `.alert` / `.g24-empty-state` (all in @layer
   components) computed to 0 padding and their text touched the card/pill
   borders. Moving it into @layer reset — which 00-tokens.css already declares
   BELOW @layer components, and where 20-components.css already keeps the
   box-sizing reset — fixes that bug class for ALL components at once.
   UA defaults still lose to this (UA origin < any author layer), so headings /
   lists / etc. stay reset as before. */
@layer reset {
  * { margin:0; padding:0; box-sizing:border-box; }
}

/* Classic Theme (default) */
:root {
    --bg: #0F1923;
    --card-bg: #1A2332;
    --card-border: #2A3A4A;
    --text: #E0E6ED;
    --text-muted: #7B8FA3;
    --text-dim: #5B7A95;
    --hover-bg: #1F2D3D;
    --section-bg: #1A2332;
    --popover-bg: #1A2332;
    --footer-text: #3B5068;
    --input-bg: #0F1923;
    --input-border: #2A3A4A;
    --header-grad-start: #1A3A5C;
    --header-grad-end: #2563EB;
    --header-link: rgba(255,255,255,0.75);
    --header-link-hover-bg: rgba(255,255,255,0.10);
    --header-link-active-bg: rgba(96,165,250,0.25);
    --header-link-active-text: #60A5FA;
    --header-control-bg: rgba(255,255,255,0.10);
    --header-control-border: rgba(255,255,255,0.20);
    --header-control-text: rgba(255,255,255,0.80);
    --header-input-bg: rgba(255,255,255,0.08);
    --header-input-border: rgba(255,255,255,0.20);
    --header-input-text: #FFFFFF;
    --header-input-placeholder: rgba(255,255,255,0.40);
    --brand-accent: #60A5FA;
    --theme-glow: none;
    --tone-success-bg: rgba(34,197,94,0.18);
    --tone-success-fg: #86EFAC;
    --tone-success-border: rgba(34,197,94,0.34);
    --tone-info-bg: rgba(59,130,246,0.18);
    --tone-info-fg: #93C5FD;
    --tone-info-border: rgba(96,165,250,0.34);
    --tone-warn-bg: rgba(245,158,11,0.18);
    --tone-warn-fg: #FCD34D;
    --tone-warn-border: rgba(245,158,11,0.34);
    --tone-danger-bg: rgba(239,68,68,0.18);
    --tone-danger-fg: #FCA5A5;
    --tone-danger-border: rgba(239,68,68,0.34);
    --tone-neutral-bg: rgba(148,163,184,0.14);
    --tone-neutral-fg: #CBD5E1;
    --tone-neutral-border: rgba(148,163,184,0.28);
    /* Solid-filled chip variants (opaque backgrounds for badges,
       complement tone-*-bg which are semi-transparent washes) */
    --chip-success-solid-bg: #14532D;
    --chip-warn-solid-bg:    #78350F;
    --chip-danger-solid-bg:  #7F1D1D;
    --chip-info-solid-bg:    #1E3A8A;
    --chip-neutral-solid-bg: #334155;
    /* Solid-chip FOREGROUND colours — light text for the dark solid-bg above.
       Added 31 May 2026 (site-wide UX audit): --chip-neutral-solid-fg was
       undefined, so member/recipient chips rendered dark-on-dark (unreadable)
       in light theme. The success/warn/danger/info solid-fg are added too —
       same dark-bg → needs-light-fg bug class. Defined once → both themes. */
    --chip-neutral-solid-fg: #E2E8F0;
    --chip-success-solid-fg: #BBF7D0;
    --chip-warn-solid-fg:    #FDE68A;
    --chip-danger-solid-fg:  #FECACA;
    --chip-info-solid-fg:    #BFDBFE;
    --chip-teal-solid-bg:    #0F766E;
    --chip-teal-solid-fg:    #99F6E4;
    --chip-purple-solid-bg:  #4C1D95;
    --chip-purple-solid-fg:  #D8B4FE;
    --chip-orange-solid-fg:  #FDBA74;
    --chip-amber-solid-fg:   #FED7AA;
    --chip-pink-solid-fg:    #EC4899;
    --chip-cyan-solid-fg:    #06B6D4;
    --chip-teal-accent-fg:   #14B8A6;
    --chip-success-accent-fg:#A3E635;
    --chip-violet-fg:        #8B5CF6;
    --chip-light-warn-bg:    #FEF3C7;
    --chip-light-surface:    #F9FAFB;
    --chip-light-card:       #FFFFFF;
    --chip-light-border:     #E5E7EB;
    --chip-dark-code-bg:     #0A1019;
    --chip-dark-border:      #243041;

    /* Overlay tokens (added 18 Apr 2026 — Phase 1-C modal + on-accent chips).
       Semi-transparent RGBA values kept themeable by putting them here so
       dark-theme designers can override (e.g. backdrop could be lighter
       in a light theme, heavier in a dark one). */
    --overlay-modal-backdrop: rgba(0, 0, 0, 0.55);   /* dim below dialogs */
    --overlay-on-accent:      rgba(255, 255, 255, 0.22); /* pills on filled brand-accent bg */
    --overlay-on-accent-strong: rgba(255, 255, 255, 0.34);
    --overlay-shadow-lg-fallback: rgba(0, 0, 0, 0.45); /* fallback inside box-shadow if --shadow-lg missing */
    --sidebar-width: 190px;

    /* ── Training Panel tokens (tp-*) — always dark AI-style panel ── */
    --tp-bg:               #0d1117;
    --tp-border-color:     #6366f1;
    --tp-text:             #f1f5f9;
    --tp-text-muted:       #94a3b8;
    --tp-text-dim:         #64748b;
    --tp-text-accent:      #c7d2fe;
    --tp-eyebrow:          #818cf8;
    --tp-search-bg:        rgba(99,102,241,.08);
    --tp-search-border:    rgba(99,102,241,.25);
    --tp-section-hover:    rgba(99,102,241,.07);
    --tp-close-border:     rgba(99,102,241,.3);
    --tp-close-hover-bg:   rgba(99,102,241,.2);
    --tp-header-grad:      linear-gradient(135deg,rgba(99,102,241,.08),rgba(168,85,247,.05));
    --tp-header-border:    rgba(99,102,241,.25);
    --tp-glow-indigo:      #6366f1;
    --tp-glow-purple:      #a855f7;
    --tp-glow-cyan:        #06b6d4;

    /* ── Automation Diagram tokens (sc-auto-*) ── */
    --sc-auto-bg:               linear-gradient(135deg,rgba(99,102,241,.07),rgba(168,85,247,.05),rgba(6,182,212,.04));
    --sc-auto-border:           rgba(99,102,241,.2);
    --sc-auto-eyebrow:          #818cf8;
    --sc-auto-title:            #e2e8f0;
    --sc-auto-footnote:         #64748b;
    --sc-auto-node-default-border: rgba(255,255,255,.08);
    --sc-node-blue-bg:          rgba(59,130,246,.12);
    --sc-node-blue-border:      rgba(59,130,246,.3);
    --sc-node-blue-shadow:      rgba(59,130,246,.15);
    --sc-node-warn-bg:          rgba(245,158,11,.1);
    --sc-node-warn-border:      rgba(245,158,11,.3);
    --sc-node-warn-shadow:      rgba(245,158,11,.12);
    --sc-node-purple-bg:        rgba(168,85,247,.12);
    --sc-node-purple-border:    rgba(168,85,247,.3);
    --sc-node-purple-shadow:    rgba(168,85,247,.15);
    --sc-node-cyan-bg:          rgba(6,182,212,.1);
    --sc-node-cyan-border:      rgba(6,182,212,.3);
    --sc-node-cyan-shadow:      rgba(6,182,212,.12);
    --sc-node-green-bg:         rgba(34,197,94,.1);
    --sc-node-green-border:     rgba(34,197,94,.3);
    --sc-node-green-shadow:     rgba(34,197,94,.2);
    --sc-node-green-pulse:      rgba(34,197,94,.45);
    --sc-connector-line:        linear-gradient(90deg,rgba(99,102,241,.4),rgba(6,182,212,.4));
    /* Bridge new --color-* tokens for design-system components (buttons, inputs, etc.) */
    --color-bg:                  #0F1923;
    --color-bg-alt:              #162030;
    --color-surface-card:        #1A2332;
    --color-surface-card-hover:  #1F2D3D;
    --color-surface-section:     #1A2332;
    --color-surface-elevated:    #1A2332;
    --color-surface-input:       #0F1923;
    --color-surface-input-hover: #1A2332;
    --color-surface-hover:       #1F2D3D;
    --color-surface-active:      #243444;
    --color-surface-disabled:    #1A2332;
    --color-text-heading:        #E0E6ED;
    --color-text-body:           #E0E6ED;
    --color-text-muted:          #7B8FA3;
    --color-text-dim:            #5B7A95;
    --color-text-soft:           #3B5068;
    --color-text-brand:          #93C5FD;
    --color-text-disabled:       #3B5068;
    --color-border-default:      #2A3A4A;
    --color-border-strong:       #3A4A5A;
    --color-brand:               #60A5FA;
    --color-brand-hover:         #3B82F6;
    --color-brand-soft:          rgba(96,165,250,0.10);
    --color-brand-soft-border:   rgba(96,165,250,0.25);
}

/* fintech-glass-luxe theme block removed 27 Apr 2026 (Msir directive).
   Production themes now live ONLY in 10-themes.css — see clean-light + ai-neural.
   This file keeps :root legacy-token defaults that all themes bridge into. */

/* ═══════════════════════════════════════════════════════════
   SEMANTIC UTILITY CLASSES — theme-aware, one-click theme swap
   Msir's rule (18 Apr 2026): never hardcode colors; always use
   these classes. Every theme defines its own tone-* variables.
   ═══════════════════════════════════════════════════════════ */
.tone-success { color: var(--tone-success-fg); background: var(--tone-success-bg); border-color: var(--tone-success-border); }
.tone-info    { color: var(--tone-info-fg);    background: var(--tone-info-bg);    border-color: var(--tone-info-border); }
.tone-warn    { color: var(--tone-warn-fg);    background: var(--tone-warn-bg);    border-color: var(--tone-warn-border); }
.tone-danger  { color: var(--tone-danger-fg);  background: var(--tone-danger-bg);  border-color: var(--tone-danger-border); }
.tone-neutral { color: var(--tone-neutral-fg); background: var(--tone-neutral-bg); border-color: var(--tone-neutral-border); }
.tone-brand   { color: var(--brand-accent); }
/* Text-only variants (no bg) */
.tone-success-text { color: var(--tone-success-fg); }
.tone-info-text    { color: var(--tone-info-fg); }
.tone-warn-text    { color: var(--tone-warn-fg); }
.tone-danger-text  { color: var(--tone-danger-fg); }
.tone-neutral-text { color: var(--tone-neutral-fg); }
.tone-muted        { color: var(--text-muted); }
.tone-dim          { color: var(--text-dim); }
/* Background-only */
.tone-success-bg { background: var(--tone-success-bg); }
.tone-info-bg    { background: var(--tone-info-bg); }
.tone-warn-bg    { background: var(--tone-warn-bg); }
.tone-danger-bg  { background: var(--tone-danger-bg); }
.tone-neutral-bg { background: var(--tone-neutral-bg); }
/* Pill shape (combine with .tone-*) */
.pill { display:inline-block; padding:2px 10px; border-radius:11px; font-size:var(--text-2xs); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:.3px; border:1px solid transparent; }
/* Card used across new pages */
.g24-card { background: var(--card-bg); border:1px solid var(--card-border); border-radius:10px; padding:14px; }
.g24-card-hover { transition: transform .15s, border-color .15s; }
.g24-card-hover:hover { transform: translateY(-1px); border-color: var(--brand-accent); }
/* Stat big number */
.g24-stat { font-size:var(--text-stat); font-weight:var(--weight-bold); color: var(--text); }
.g24-stat-label { font-size:var(--text-xs); color: var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-top:3px; }
/* ═══════════════════════════════════════════════════════════
   UI PREFERENCE VARIABLES — things themes don't control
   Controlled via Settings > UI Preferences; saved to localStorage
   + server. Defaults below are overridden by <html> attribute
   data-ui-font / data-ui-density / style="--brand-accent:..."
   ═══════════════════════════════════════════════════════════ */
:root {
  --ui-font-scale: 1.0;       /* 0.90 | 1.00 | 1.10 | 1.20 */
  --ui-space-scale: 1.0;      /* compact=0.82, comfortable=1.0 */
}
html { font-size: calc(14px * var(--ui-font-scale)); }
html[data-ui-font="xsmall"]  { --ui-font-scale: 0.85; }
html[data-ui-font="small"]   { --ui-font-scale: 0.90; }
html[data-ui-font="default"] { --ui-font-scale: 1.00; }
html[data-ui-font="large"]   { --ui-font-scale: 1.10; }
html[data-ui-font="xlarge"]  { --ui-font-scale: 1.20; }
html[data-ui-density="compact"]    { --ui-space-scale: 0.82; }
html[data-ui-density="comfortable"]{ --ui-space-scale: 1.00; }
/* Density-sensitive paddings on common layout atoms */
.g24-card     { padding: calc(14px * var(--ui-space-scale)); }
.config-section { padding: calc(22px * var(--ui-space-scale)); }
/* UI-pref segmented button row (Font size, Density) */
.ui-pref-btn { padding:6px 12px; font-size:var(--text-sm); border-radius:6px; cursor:pointer;
               border:1px solid var(--card-border); background:var(--card-bg); color:var(--text-muted);
               transition: border-color .15s, color .15s, background .15s; }
.ui-pref-btn:hover { border-color:var(--brand-accent); color:var(--text); }
.ui-pref-btn.active { border-color:var(--brand-accent); color:var(--brand-accent);
                      background: var(--tone-info-bg); font-weight:var(--weight-semibold); }
/* Reduce motion (accessibility toggle) */
html[data-ui-reduce-motion="1"] .g24-card-hover { transition: none; }
html[data-ui-reduce-motion="1"] .g24-card-hover:hover { transform: none; }
html[data-ui-reduce-motion="1"] *, html[data-ui-reduce-motion="1"] *::before, html[data-ui-reduce-motion="1"] *::after { transition-duration: 0s !important; animation-duration: 0s !important; }

body { font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; transition: background 0.3s, color 0.3s; font-size:var(--text-base); line-height:1.5; -webkit-font-smoothing:antialiased; position:relative; }
body::before { content:''; position:fixed; inset:0; background:var(--theme-glow); pointer-events:none; z-index:0; opacity:1; }

/* ── Top Header — logo + core nav + search + controls ── */
.g24-header {
  /* Solid surface gradient — for clean-light both stops are #ffffff so
     it reads as plain white. Dark themes still get their gradient. */
  background: linear-gradient(135deg, var(--header-grad-start), var(--header-grad-end));
  /* Wave B7 (17 May 2026): safe-area-inset for iPhone notch + landscape side-cutouts.
     Defensive form with ", 0" fallback — pure additive on unsupported browsers. */
  padding:
    env(safe-area-inset-top, 0)
    calc(18px + env(safe-area-inset-right, 0))
    0
    calc(18px + env(safe-area-inset-left, 0));
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;            /* +6px breathing room */
  min-height: 56px;
  /* Crisp 1px separation + soft elevation shadow for depth on light themes.
     The shadow uses --shadow-sm so dark themes inherit a near-invisible variant
     while clean-light gets a clear lift. */
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(11,31,68,0.04));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Logo — explicit color fallback (legacy --chip-light-card was undefined on
   clean-light → invisible logo). Now reads as the heading colour with
   a brand-accent emphasis on the inner <span>. */
.g24-header .g24-logo {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading, var(--text, #0b1f44));
  text-decoration: none;
  padding: 0 16px 0 4px;
  margin-right: 12px;
  border-right: 1px solid var(--header-control-border);
  white-space: nowrap;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  height: 100%;
  transition: color 0.15s ease;
}
.g24-header .g24-logo:hover { color: var(--color-brand, var(--brand-accent)); }
.g24-header .g24-logo span { color: var(--color-brand, var(--brand-accent)); }
.g24-nav-inline { display: flex; gap: 2px; align-items: center; flex: 1 1 auto; min-width: 0; position: relative; }
.g24-nav-inline a {
  color: var(--header-link);
  text-decoration: none;
  font-size: var(--text-compact-half);
  font-weight: var(--weight-semibold);
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  position: relative;
}
.g24-nav-inline a:hover {
  background: var(--header-link-hover-bg);
  color: var(--color-text-heading, var(--text));
}
.g24-nav-inline a.active {
  background: var(--header-link-active-bg);
  color: var(--header-link-active-text);
  font-weight: var(--weight-bold);
}
/* Razorpay-style 2px underline on the active nav item — adds clear
   "you are here" cue without needing a strong fill colour. */
.g24-nav-inline a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -10px;
  height: 2px;
  background: var(--color-brand, var(--brand-accent));
  border-radius: 1px;
}
.g24-right { display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0; justify-content:flex-end; }
.g24-hidden { display:none; }
.g24-inline-wrap { position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }
.g24-sidebar-toggle { padding:3px 8px; margin-right:6px; }
.g24-right-end { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.g24-right-more-wrap { position:relative; display:none; align-items:center; }
.g24-right-more-btn { padding:3px 9px; font-size:var(--text-md); }
.g24-nav-more-dropdown-left { right:auto; left:0; top:calc(100% + 4px); }
.g24-right-more-dropdown { position:absolute; right:0; top:calc(100% + 4px); min-width:160px; z-index:var(--z-dropdown); }
.g24-user-dropdown { position:absolute; right:0; top:calc(100% + 4px); min-width:170px; z-index:var(--z-dropdown); padding:6px 0; }
.g24-menu-row {
    display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box;
    padding:7px 12px; border-radius:6px; color:var(--text); text-decoration:none;
    font-size:var(--text-sm); text-align:left; background:transparent; border:0;
    cursor:pointer; font-family:inherit;
}
.g24-menu-row:hover { background:var(--hover-bg); color:var(--text); }
.g24-menu-button { appearance:none; -webkit-appearance:none; }
.g24-menu-divider { height:1px; background:var(--card-border); margin:4px 0; }
.g24-search-wrap { position:relative; width:clamp(110px, 10vw, 160px); flex:0 1 160px; min-width:100px; }
.g24-search-wrap input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border-input, var(--header-input-border));
  background: var(--color-surface-input, var(--header-input-bg));
  color: var(--color-text-body, var(--header-input-text));
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.g24-search-wrap::before {
  content: "🔍";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.55;
  pointer-events: none;
}
.g24-search-wrap input:hover { border-color: var(--color-border-input-hover, var(--brand-accent)); }
.g24-search-wrap input:focus,
.g24-search-wrap input:focus-visible {
  border-color: var(--color-brand, var(--brand-accent));
  outline: none;
  box-shadow: var(--shadow-glow-brand, 0 0 0 4px rgba(51,149,255,0.18));
}
.g24-search-wrap input::placeholder { color: var(--color-text-muted, var(--header-input-placeholder)); }
.g24-search-results { display:none; position:absolute; top:100%; left:0; right:0; min-width:340px; max-height:380px; overflow-y:auto; background:var(--popover-bg, var(--card-bg)); border:1px solid var(--card-border); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:var(--z-popover); margin-top:4px; }
.g24-search-results .sr-item { padding:7px 12px; cursor:pointer; font-size:var(--text-sm); border-bottom:1px solid var(--card-border); display:flex; justify-content:space-between; }
.g24-search-results .sr-item:hover { background:var(--hover-bg); }
.g24-search-results .sr-item .sr-label { color:var(--text); }
.g24-search-results .sr-item .sr-page { color:var(--text-muted); font-size:var(--text-2xs); }
.g24-search-results .sr-empty { padding:10px 12px; color:var(--text-muted); font-size:var(--text-sm); }
.theme-toggle {
  background: var(--header-control-bg);
  border: 1px solid var(--header-control-border);
  color: var(--header-control-text);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.theme-toggle:hover {
  background: var(--header-link-hover-bg);
  border-color: var(--color-border-strong, var(--brand-accent));
  color: var(--color-text-heading, var(--text));
}
.theme-toggle:active { transform: scale(0.97); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--shadow-glow-brand, 0 0 0 3px rgba(51,149,255,0.22)); }
.theme-toggle.is-active { background: var(--header-link-active-bg); color: var(--header-link-active-text); border-color: var(--brand-accent); }
.g24-user-btn { font-size: var(--text-sm); padding: 6px 12px; font-weight: var(--weight-semibold); white-space: nowrap; }
.g24-ctx-btn {
  font-size: var(--text-sm);
  padding: 6px 10px;
  white-space: nowrap;
  width: auto;
  max-width: 110px;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.25;
}
.g24-ctx-btn #g24CtxLabel {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.g24-ctx-dropdown { position:absolute; right:0; top:calc(100% + 4px); min-width:260px; padding:12px 14px; z-index:var(--z-dropdown); }
.g24-ctx-stack { display:flex; flex-direction:column; gap:10px; }
.g24-ctx-label {
    font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:.7px;
    text-transform:uppercase; color:var(--text-muted); margin-bottom:4px;
}
.g24-ctx-select {
    width:100%; padding:5px 8px; border-radius:6px; background:var(--input-bg,var(--hover-bg));
    border:1px solid var(--card-border); color:var(--text); font-size:var(--text-xs);
    outline:none; cursor:pointer;
}
.g24-ctx-select:focus-visible { outline:2px solid var(--brand-accent); outline-offset:2px; }
.g24-ctx-market-wrap { display:none; flex-direction:column; gap:4px; }
.g24-demo-banner {
    background:var(--tone-info-bg); color:var(--tone-info-fg); padding:7px 18px;
    font-size:var(--text-sm); font-weight:var(--weight-medium); text-align:center;
    border-bottom:1px solid var(--card-border);
}
.g24-demo-banner-primary {
    color:var(--chip-light-card); font-weight:var(--weight-bold); margin-left:10px;
    text-decoration:underline;
}
.g24-demo-banner-sep { margin-left:14px; color:var(--text-dim); font-size:var(--text-xs); }
.g24-demo-banner-secondary { color:var(--tone-success-fg); font-weight:var(--weight-semibold); margin-left:8px; }
/* Last-run widget — blends with the header bar (no own background/border) */
/* ── Context switcher dropdowns in header (18 Apr 2026: multi-tenant) ── */
.g24-ctx-switch { display:inline-flex; align-items:center; gap:6px; margin-right:8px; flex-wrap:nowrap; }
.g24-ctx-switch label { font-size:var(--text-xs); color:rgba(255,255,255,0.55); margin-right:2px; letter-spacing:.3px; text-transform:uppercase; font-weight:var(--weight-medium); }
.g24-ctx-switch select {
    background:var(--card-border); color:rgba(255,255,255,0.92); border:1px solid rgba(255,255,255,0.15);
    border-radius:6px; padding:5px 22px 5px 10px; font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%23bbb'/></svg>");
    background-repeat:no-repeat; background-position:right 7px center; background-size:8px;
    min-width:90px; max-width:180px; transition:all .15s;
}
.g24-ctx-switch select:hover { background-color:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.25); }
.g24-ctx-switch select:focus { outline:none; border-color:var(--brand-accent); }
.g24-ctx-switch select option { background:var(--hover-bg); color:var(--chip-light-card); }
.g24-ctx-switch .ctx-divider { width:1px; height:18px; background:rgba(255,255,255,0.15); margin:0 2px; }
.g24-ctx-switch.hidden { display:none; }
.g24-ctx-switch #ctx-mkt-wrap.country-hide { display:none; }

/* ── Inline sync badge (reusable across all settings pages) ── */
.sync-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 7px;
              border-radius:11px; font-size:var(--text-2xs); font-weight:var(--weight-semibold); cursor:pointer;
              border:1px solid transparent; transition:all .15s; user-select:none;
              vertical-align:middle; margin-left:6px; line-height:1.2; }
.sync-badge.synced    { background:var(--tone-success-bg); color:var(--tone-success-fg); border-color:var(--tone-success-border); }
.sync-badge.synced:hover { background:var(--tone-success-bg); }
.sync-badge.override  { background:var(--tone-warn-bg); color:var(--tone-warn-fg); border-color:var(--tone-warn-fg)55; }
.sync-badge.override:hover { background:var(--tone-warn-bg); }
.sync-badge.independent { background:var(--tone-neutral-bg); color:var(--text-muted); border-color:var(--text-dim)55; }
.sync-badge .icon { font-size:var(--text-xs); }
.sync-field-locked { background:var(--tone-success-bg) !important;
                     border-color:var(--tone-success-border) !important;
                     cursor:not-allowed; opacity:0.85; }

/* Bulk Operations (UM6: universal list pattern) */
.bulk-bar { position:sticky; top:0; z-index:50; background:var(--hover-bg); border:1px solid var(--card-border);
            border-radius:8px; padding:10px 14px; margin-bottom:12px;
            display:none; align-items:center; gap:12px; box-shadow:0 4px 12px rgba(0,0,0,0.2); }
.bulk-bar.active { display:flex; }
.bulk-bar .count { font-weight:var(--weight-semibold); font-size:var(--text-compact); color:var(--brand-accent); }
.bulk-bar select { padding:6px 10px; border-radius:6px; border:1px solid var(--card-border);
                   background:var(--bg); color:inherit; font-size:var(--text-sm); }
.bulk-bar button { padding:6px 14px; border-radius:6px; cursor:pointer; font-size:var(--text-sm); font-weight:var(--weight-semibold);
                   border:1px solid transparent; }
.bulk-bar .bulk-apply { background:var(--tone-success-fg); color:var(--chip-light-card); }
.bulk-bar .bulk-apply:hover { background:var(--tone-success-fg); }
.bulk-bar .bulk-clear { background:transparent; color:var(--text-muted); border-color:var(--card-border); }
.bulk-search { padding:6px 10px; border-radius:6px; border:1px solid var(--card-border);
                background:var(--bg); color:inherit; font-size:var(--text-sm); min-width:200px; }
table[data-bulk-ops] .bulk-checkbox-col { width:32px; text-align:center; }
table[data-bulk-ops] tr.bulk-selected { background:var(--tone-info-bg) !important; }
.g24-last-run { display:inline-flex; align-items:center; gap:4px;
                padding:4px 6px; border-radius:6px;
                background:transparent; color:rgba(255,255,255,0.75);
                font-size:var(--text-sm); text-decoration:none;
                border:none;
                transition:background 0.2s, color 0.2s, max-width 0.25s, padding 0.2s, gap 0.2s;
                white-space:nowrap; min-width:0; overflow:hidden; max-width:20px; }
.g24-last-run:hover { background:var(--card-border); color:var(--chip-light-card);
                      max-width:260px; padding:4px 10px; gap:8px; }
.g24-last-run-dot { width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.g24-last-run-dot.status-success { background:var(--tone-success-fg); }
.g24-last-run-dot.status-warning { background:var(--tone-warn-fg); }
.g24-last-run-dot.status-failed  { background:var(--tone-danger-fg); }
.g24-last-run-dot.status-partial { background:var(--tone-warn-fg); }
.g24-last-run-label { font-weight:var(--weight-medium); min-width:0; overflow:hidden; text-overflow:ellipsis;
                      opacity:0; max-width:0; transition:opacity 0.2s 0.05s, max-width 0.25s; pointer-events:none; }
.g24-last-run:hover .g24-last-run-label { opacity:1; max-width:220px; pointer-events:auto; }
.g24-theme-btn { display:inline-flex; align-items:center; gap:4px; overflow:hidden;
                 max-width:28px; transition:max-width 0.25s, gap 0.2s, padding 0.2s; }
.g24-theme-btn:hover { max-width:160px; gap:6px; }
.g24-theme-btn-label { opacity:0; max-width:0; overflow:hidden; white-space:nowrap;
                       transition:opacity 0.2s 0.05s, max-width 0.25s; font-size:var(--text-sm); }
.g24-theme-btn:hover .g24-theme-btn-label { opacity:1; max-width:130px; }
.g24-account-group { display:inline-flex; align-items:center; gap:2px; }

/* ── Phase 4-A Agent P (19 Apr 2026) — trial-expiry countdown banner ──
   Renders in the header (before .g24-last-run) when the active user has
   role=trial_user. Uses design-system --tone-warn-* tokens for the
   normal state and --tone-danger-* when <= 3 days remain (pulse
   animation draws the eye). Zero new hex. */
.g24-trial-banner { display:inline-flex; align-items:center; gap:6px;
                    padding:4px 10px; border-radius:6px;
                    background:var(--tone-warn-bg); color:var(--tone-warn-fg);
                    border:1px solid var(--tone-warn-border);
                    font-size:var(--text-sm); font-weight:var(--weight-semibold); text-decoration:none;
                    transition:background 0.2s, color 0.2s, transform 0.15s;
                    white-space:nowrap; margin-right:6px; }
.g24-trial-banner:hover { transform:translateY(-1px); }
.g24-trial-banner-urgent { background:var(--tone-danger-bg); color:var(--tone-danger-fg);
                           border-color:var(--tone-danger-border);
                           animation:g24TrialPulse 1.6s ease-in-out infinite; }
@keyframes g24TrialPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.68; }
}

/* ── Left Sidebar — module/feature pages ── */
/* Wave B7 (17 May 2026): safe-area-inset for iPhone landscape left-notch + home-indicator. */
.g24-sidebar { position:fixed; top:50px; left:0; bottom:0; width:var(--sidebar-width); background:var(--card-bg); border-right:1px solid var(--card-border); overflow-y:auto; z-index:var(--z-sticky); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0); transition: background 0.3s, width 0.12s ease, padding 0.12s ease, border-color 0.12s ease; scrollbar-width: thin; scrollbar-color: transparent transparent; }
/* Auto-hide scrollbar (31 May 2026): invisible at rest, fades in only while the
   menu is hovered / focused / actively scrolled. scrollbar-gutter:stable (block
   below) keeps the 4px reserved so revealing the thumb never shifts nav text. */
.g24-sidebar::-webkit-scrollbar { width: 4px; }
.g24-sidebar::-webkit-scrollbar-track { background: transparent; }
.g24-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 0.25s ease; }
.g24-sidebar:hover, .g24-sidebar:focus-within { scrollbar-color: var(--card-border) transparent; }
.g24-sidebar:hover::-webkit-scrollbar-thumb,
.g24-sidebar:focus-within::-webkit-scrollbar-thumb { background: var(--card-border); }
.g24-sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ── Sidebar nav items — V3 style (Apr 2026): inline divider labels + left-border accent ── */
.g24-sidebar .sb-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 10px 12px 3px;
  color: var(--brand-accent); opacity: 0.72;
  display: flex; align-items: center; gap: 7px;
}
.g24-sidebar .sb-label::after {
  content: ''; flex: 1; height: 1px; background: var(--card-border);
}
.g24-sidebar a { display:flex; align-items:center; justify-content:space-between; padding:6px 10px 6px 12px; font-size:var(--text-compact-half); color:var(--tone-neutral-fg); text-decoration:none; transition: background 0.12s, border-color 0.12s, color 0.12s; border-left:3px solid transparent; }
.g24-sidebar a:hover { background:var(--hover-bg); color:var(--text); border-left-color: var(--text-dim); }
.g24-sidebar a.active { background:rgba(96,165,250,0.14); color:var(--brand-accent); border-left-color:var(--brand-accent); font-weight:600; }
.g24-sidebar .sb-soon { font-size:var(--text-4xs); color:var(--text-dim); margin-left:4px; }
.sb-item-inner { display:flex; align-items:center; gap:7px; min-width:0; flex:1; }
.sb-icon { font-size:13px; flex-shrink:0; line-height:1; }
.sb-item-label { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.sb-search-wrap { padding:8px 10px 4px; }
.sb-search-input {
    width:100%; box-sizing:border-box; padding:6px 10px; border-radius:8px;
    border:1px solid var(--card-border); background:var(--input-bg,var(--hover-bg));
    color:var(--text); font-size:var(--text-sm); outline:none;
}
.sb-search-input:focus-visible { outline:2px solid var(--brand-accent); outline-offset:2px; }

/* ── Sidebar persona switch + marketplace tabs (29 May 2026) ───────────
   Two-axis menu controls directly under the sidebar search:
     .sb-persona  — Admin / Seller segmented control (super_admin-tier only,
                    Jinja-guarded server-side).
     .sb-mkt-tabs — Amazon / Flipkart / … strip (Seller view, 2+ platforms;
                    JS-toggled via the [hidden] attribute).
   Tokens only (var(--token,#fallback)); visibility via [hidden] (NOT
   el.style.display); mobile tap targets >=44px. */
.sb-persona,
.sb-mkt-tabs {
  display: flex; gap: 4px; margin: 4px 10px 2px;
  padding: 3px; border-radius: 9px;
  background: var(--input-bg, var(--hover-bg));
  border: 1px solid var(--card-border);
}
.sb-mkt-tabs { margin-top: 6px; flex-wrap: wrap; }
/* A display:flex class would otherwise defeat the [hidden] attribute the JS
   toggles — make [hidden] authoritative so g24RenderMktTabs() can hide it. */
.sb-mkt-tabs[hidden] { display: none; }

.sb-persona-btn,
.sb-mkt-tab {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-dim);
  font-size: var(--text-xs, 11px); font-weight: 700; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s;
}
.sb-persona-btn:hover,
.sb-mkt-tab:hover { background: var(--hover-bg); color: var(--text); }
.sb-persona-btn.is-active,
.sb-mkt-tab.is-active { background: var(--color-primary-solid, var(--brand-accent)); color: var(--on-accent, #fff); }
.sb-persona-btn:focus-visible,
.sb-mkt-tab:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.sb-persona-ico { font-size: 13px; line-height: 1; }

@media (max-width: 760px) {
  .sb-persona-btn,
  .sb-mkt-tab { min-height: 44px; }
}

/* ── Persona view filter (29 May 2026) — INSTANT client-side Admin/Seller.
   `body[data-nav-view]` is set ONLY for super_admin / internal_admin; for
   every other role it is ABSENT, so none of these rules apply and they keep
   their full role menu untouched. This is a pure DISPLAY filter — security is
   enforced server-side by role-gating (a non-admin's DOM never contains
   admin-only items). Leaf items (header pins, sidebar rows, children, recent)
   carry data-persona and are hidden here; empty group rows + section labels
   get `.sb-view-hidden` from g24PruneNavGroups(). */
body[data-nav-view="admin"] [data-persona="seller"],
body[data-nav-view="seller"] [data-persona="admin"] { display: none !important; }
body[data-nav-view="admin"] .sb-mkt-tabs { display: none !important; }
.g24-sidebar .sb-view-hidden { display: none !important; }

/* ── Submenu support (27 Apr 2026, polished) ───────────────────────────
   Items declaring `parent_id` get folded under their parent in app.py's
   `_inject_user_nav` and rendered as `.sb-child` rows inside `.sb-children`.
   Parent gets a BIG, clear chevron — children are FULL-readable size. */
.g24-sidebar .sb-row { display:block; }
.g24-sidebar .sb-row.sb-has-children > a .sb-toggle { display:inline-flex; }

/* Chevron toggle — bigger + brand-colored so it stands out clearly */
.g24-sidebar .sb-toggle {
  display:none; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; margin-right:2px;
  background:rgba(96,165,250,0.10); border:1px solid var(--card-border);
  cursor:pointer; opacity:1;
  color:var(--brand-accent); border-radius:6px;
  transition: background 0.12s, transform 0.18s, border-color 0.12s;
  flex-shrink:0;
}
.g24-sidebar .sb-toggle:hover { background:rgba(96,165,250,0.22); border-color:var(--brand-accent); }
.g24-sidebar .sb-toggle .sb-chev {
  font-size:18px; line-height:1; font-weight:900;
  transition: transform 0.2s ease;
  display:inline-block;
}
.g24-sidebar .sb-row.is-expanded > a .sb-toggle { background:rgba(96,165,250,0.22); border-color:var(--brand-accent); }
.g24-sidebar .sb-row.is-expanded > a .sb-toggle .sb-chev { transform: rotate(180deg); }

/* Children block — clearly subordinate but READABLE.
   Same font-size as parent, slightly indented, accent-colored guide line. */
.g24-sidebar .sb-children {
  padding:4px 0 6px 0;
  border-left:3px solid var(--brand-accent);
  margin:2px 0 6px 18px;
  background:rgba(96,165,250,0.04);
  border-radius:0 6px 6px 0;
}
@media (min-width: 641px) {
  .g24-sidebar .sb-row.sb-has-children { position: relative; }
  .g24-sidebar .sb-row.sb-has-children > a .sb-chev { transform: rotate(-90deg); }
  .g24-sidebar .sb-row.sb-has-children.is-expanded > a .sb-toggle .sb-chev,
  .g24-sidebar .sb-row.sb-has-children.is-flyout-open > a .sb-toggle .sb-chev { transform: rotate(-90deg); }
  .g24-sidebar .sb-row.sb-has-children.is-flyout-open > a {
    background: rgba(96,165,250,0.10);
    font-weight: 600;
  }
  .g24-sidebar .sb-children.sb-flyout {
    position: fixed;
    left: var(--g24-flyout-left, var(--sidebar-width));
    top: var(--g24-flyout-top, 64px);
    z-index: calc(var(--z-sticky, 90) + 8);
    min-width: 220px;
    max-width: 300px;
    max-height: min(520px, calc(100vh - 72px));
    overflow-y: auto;
    padding: 6px;
    margin: 0;
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--brand-accent);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: var(--shadow-lg, 0 14px 36px rgba(0,0,0,0.24));
    scrollbar-width: thin; scrollbar-color: transparent transparent;
  }
  .g24-sidebar .sb-children.sb-flyout:hover,
  .g24-sidebar .sb-children.sb-flyout:focus-within { scrollbar-color: var(--card-border) transparent; }
  .g24-sidebar .sb-children.sb-flyout::-webkit-scrollbar { width: 6px; }
  .g24-sidebar .sb-children.sb-flyout::-webkit-scrollbar-track { background: transparent; }
  .g24-sidebar .sb-children.sb-flyout::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; transition: background 0.25s ease; }
  .g24-sidebar .sb-children.sb-flyout:hover::-webkit-scrollbar-thumb,
  .g24-sidebar .sb-children.sb-flyout:focus-within::-webkit-scrollbar-thumb { background: var(--card-border); }
  .g24-sidebar .sb-children.sb-flyout a.sb-child {
    margin: 0;
    border-radius: 6px;
    padding: 8px 10px;
  }
}
.g24-sidebar .sb-children a.sb-child {
  padding:7px 10px 7px 14px;
  font-size:var(--text-compact-half);
  border-left:3px solid transparent;
  color:var(--text);
  opacity:0.92;
}
.g24-sidebar .sb-children a.sb-child .sb-icon { font-size:14px; opacity:1; }
.g24-sidebar .sb-children a.sb-child .sb-item-label { font-weight:500; }
.g24-sidebar .sb-children a.sb-child:hover {
  background:var(--hover-bg);
  color:var(--text);
  border-left-color:var(--text-dim);
  opacity:1;
}
.g24-sidebar .sb-children a.sb-child.active {
  background:rgba(96,165,250,0.18);
  color:var(--brand-accent);
  border-left-color:var(--brand-accent);
  font-weight:700;
  opacity:1;
}
.g24-sidebar .sb-row.sb-has-children.is-expanded > a {
  background:rgba(96,165,250,0.08);
  font-weight:600;
}

.sb-pin { opacity:0.2; cursor:pointer; font-size:var(--text-sm); transition:0.15s; flex-shrink:0; margin-left:4px; }
.sb-pin:hover { opacity:0.7; }
.sb-pin.pinned { opacity:1; color:var(--tone-warn-fg); }
.g24-sidebar a:hover .sb-pin { opacity:0.5; }
#pinnedNav a { color:var(--header-link); text-decoration:none; font-size:var(--text-sm); font-weight:bold; padding:5px 10px; border-radius:5px; white-space:nowrap; }
#pinnedNav a:hover { background:var(--header-link-hover-bg); color:var(--text); }
#pinnedNav a.active { background:var(--header-link-active-bg); color:var(--header-link-active-text); }

/* ── Phase 3-B Pass 2 (19 Apr 2026) — nav bookmarks + overflow + ctx chips ──
   Star button + "More ▾" dropdown + context chips for the header/sidebar
   nav split. Zero new hex — every colour pulls from existing design tokens.
   Source rationale: `sb-pin` rules above already implemented the sidebar
   star pattern; these new classes (`g24-star`) are a semantic rename that
   works in BOTH header and sidebar contexts.                              */
.g24-star { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
            background:transparent; border:0; border-radius:6px; padding:0; color:var(--text-dim);
            cursor:pointer; opacity:0.55; font-size:0; line-height:1;
            transition:opacity 0.15s, color 0.15s, transform 0.12s, background 0.15s;
            margin-left:4px; flex-shrink:0; }
.g24-star::before { content:""; width:10px; height:14px; display:block; background:currentColor;
                    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M2 1.5h8v12.2L6 11.1l-4 2.6V1.5Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
                    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M2 1.5h8v12.2L6 11.1l-4 2.6V1.5Z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.g24-star:hover { opacity:0.85; background:var(--hover-bg); }
.g24-star.is-starred { opacity:1; color:var(--tone-warn-fg); }
.g24-star.is-starred::before { -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M2 1.5h8v12.2L6 11.1l-4 2.6V1.5Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
                              mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M2 1.5h8v12.2L6 11.1l-4 2.6V1.5Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; }
.g24-star:active { transform:scale(0.9); }
/* Declutter (31 May 2026 — Msir UX pass): in the LEFT MENU the bookmark/star
   button hides at rest and reveals on row hover / focus. Only the seller's
   actually-starred items stay visible — removes ~89 always-on grey icons that
   made the resting menu look noisy. Header inline stars (.g24-nav-inline) keep
   their own rules untouched. Width stays reserved (opacity only) — no reflow. */
.g24-sidebar .g24-star { opacity:0; pointer-events:none; }
.g24-sidebar a:hover .g24-star,
.g24-sidebar a:focus-within .g24-star { opacity:0.5; pointer-events:auto; }
.g24-sidebar .g24-star:hover,
.g24-sidebar .g24-star:focus-visible { opacity:0.9; pointer-events:auto; }
.g24-sidebar .g24-star.is-starred { opacity:1; pointer-events:auto; }
.g24-nav-inline a { position:relative; }
.g24-nav-inline .g24-star { color:var(--header-link); opacity:0.55; }
.g24-nav-inline .g24-star.is-starred { opacity:1; color:var(--tone-warn-fg); }

/* "More ▾" overflow dropdown — header corner. */
.g24-nav-more { background:transparent; border:0; color:var(--header-link);
                 padding:4px 10px; font-size:var(--text-compact); font-weight:var(--weight-semibold);
                 cursor:pointer; border-radius:6px; transition:0.15s;
                 white-space:nowrap; order:9999; margin-left:auto; }
.g24-nav-more:hover { background:var(--header-link-hover-bg); color:var(--text); }
.g24-nav-more[aria-expanded="true"] { background:var(--header-link-active-bg);
                                       color:var(--header-link-active-text); }
.g24-nav-more-dropdown { position:absolute; top:48px; right:0;
                          background:var(--popover-bg, var(--card-bg)); border:1px solid var(--card-border);
                          backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
                          border-radius:10px; padding:6px; min-width:200px;
                          box-shadow:0 8px 24px var(--overlay-modal-backdrop);
                          z-index:var(--z-popover); display:flex; flex-direction:column; gap:2px; }
.g24-nav-more-dropdown[hidden] { display:none; }
.g24-nav-more-dropdown a { display:flex; justify-content:space-between; align-items:center;
                            padding:7px 12px; border-radius:6px; color:var(--text);
                            text-decoration:none; font-size:var(--text-compact); font-weight:var(--weight-medium); }
.g24-nav-more-dropdown a:hover { background:var(--hover-bg); color:var(--text); }
.g24-nav-more-dropdown a.active { background:var(--header-link-active-bg);
                                   color:var(--header-link-active-text); }

/* Context-switcher chips — first 3 pinned contexts as 1-click switchers. */
.g24-ctx-chips { display:inline-flex; gap:4px; align-items:center; margin-right:6px;
                  flex-wrap:wrap; }
.g24-ctx-chip { background:var(--tone-info-bg); color:var(--tone-info-fg);
                 border:1px solid var(--tone-info-border); border-radius:14px;
                 padding:3px 10px; font-size:var(--text-xs); font-weight:var(--weight-semibold); cursor:pointer;
                 white-space:nowrap; transition:0.15s; }
.g24-ctx-chip:hover { background:var(--color-primary-solid, var(--brand-accent)); color:var(--color-text-on-solid, #fff);
                       border-color:var(--color-primary-solid, var(--brand-accent)); }

/* ── Sidebar collapse ── */
/* sidebar toggle handled by ☰ in header */
body.sb-collapsed .g24-sidebar { width:0; padding:0; overflow:hidden; border:none; }
body.sb-collapsed .g24-main { margin-left:0; width:100%; }

/* ── Main content area — offset for header + sidebar ── */
.g24-body { display:flex; margin-top:56px; min-height:calc(100vh - 56px); position:relative; z-index:1; }
.g24-main {
  flex:1 1 auto;
  width:calc(100% - var(--sidebar-width));
  min-width:0;
  margin-left:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 56px);
  transition:margin-left 0.12s ease;
}

/* ── Footer ── */
.g24-footer { background:rgba(0,0,0,0.3); text-align:center; padding:10px 16px; color:var(--footer-text); font-size:var(--text-xs); margin-top:auto; border-top:1px solid var(--card-border); }
/* UX Audit 10 May 2026 — footerSync separator auto-renders only when JS writes content into the span. */
.g24-footer #footerSync:not(:empty)::before { content: ' | '; }

/* Common Component Styles */
.card { background:var(--card-bg); border-radius:12px; padding:18px; border:1px solid var(--card-border); transition: background 0.3s, border 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.card h3 { font-size:var(--text-base); color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.card .val { font-size:var(--text-value); font-weight:bold; color:var(--text); }
.card .sub { font-size:var(--text-base); color:var(--text-dim); margin-top:4px; }
.green { color:var(--tone-success-fg) !important; } .red { color:var(--tone-danger-fg) !important; } .orange { color:var(--tone-warn-fg) !important; } .blue { color:var(--brand-accent) !important; }
.section { background:var(--section-bg); border-radius:12px; padding:18px; border:1px solid var(--card-border); transition: background 0.3s, border 0.3s; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.section h2 { font-size:var(--text-section); color:var(--brand-accent); margin-bottom:10px; border-bottom:1px solid var(--card-border); padding-bottom:6px; line-height:1.35; }
table { width:100%; border-collapse:collapse; font-size:var(--text-md); }
th { color:var(--text-dim); text-align:left; padding:6px 8px; font-size:var(--text-compact); text-transform:uppercase; }
td { padding:6px 8px; border-bottom:1px solid var(--card-border); }
tr:hover { background:var(--hover-bg); }
.btn { display:inline-block; padding:7px 16px; border-radius:8px; border:none; cursor:pointer; font-size:var(--text-compact); font-weight:var(--weight-semibold); margin:2px; transition:0.2s; letter-spacing:0.01em; box-shadow:0 1px 2px rgba(0,0,0,0.15); }
.btn.running { opacity:0.5; cursor:wait; }
.btn-ghost { background:transparent; border:1px solid var(--card-border); color:var(--text-muted); }
.btn-ghost:hover { background:var(--hover-bg); color:var(--text); }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:var(--text-compact); font-weight:bold; }
.badge-ok { background:var(--tone-success-bg); color:var(--tone-success-fg); border:1px solid var(--tone-success-border); }
.badge-run { background:var(--tone-info-bg); color:var(--tone-info-fg); border:1px solid var(--tone-info-border); }
.badge-fail { background:var(--tone-danger-bg); color:var(--tone-danger-fg); border:1px solid var(--tone-danger-border); }
.dyn-mode-clear, .sync-badge.synced { background:var(--tone-success-bg) !important; color:var(--tone-success-fg) !important; border-color:var(--tone-success-border) !important; }
.dyn-mode-backoff, .sync-badge.override { background:var(--tone-warn-bg) !important; color:var(--tone-warn-fg) !important; border-color:var(--tone-warn-border) !important; }
.dyn-mode-escalate { background:var(--tone-danger-bg) !important; color:var(--tone-danger-fg) !important; border-color:var(--tone-danger-border) !important; }
.dyn-mode-pause, .sync-badge.independent { background:var(--tone-neutral-bg) !important; color:var(--tone-neutral-fg) !important; border-color:var(--tone-neutral-border) !important; }
.dyn-event-chip { background:var(--tone-info-bg) !important; color:var(--tone-info-fg) !important; border:1px solid var(--tone-info-border) !important; }
.toggle-switch { position:relative; display:inline-block; vertical-align:middle; width:44px; height:24px; flex:0 0 44px; }
/* Keep the fixed compact size even inside .form-row — whose broad
   `label { flex:0 0 220px }` (desktop) and `label { width:auto !important }`
   (mobile) would otherwise stretch a <label class="toggle-switch"> into a long
   pill. Higher specificity + !important beats both. (Universal fix 5 Jun 2026) */
.form-row label.toggle-switch { flex:0 0 44px !important; width:44px !important; min-width:44px !important; }
.form-row label.switch        { flex:0 0 36px !important; width:36px !important; min-width:36px !important; }
.toggle-switch input { opacity:0; width:0; height:0; margin:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--text-muted); border-radius:999px; transition:background 0.25s ease; }
.toggle-slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:var(--chip-light-card, #fff); border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:transform 0.25s ease; }
.toggle-switch input:checked + .toggle-slider { background:var(--tone-success-fg); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(20px); }
/* Zebra striping — purpose-built alt-row token (lighter than the border tone, themed for
   light + dark). 8 Jun 2026: was var(--card-border) which read too heavy/gray. */
tbody tr:nth-child(even) { background: var(--color-bg-alt); }
tbody tr:hover { background: var(--hover-bg) !important; }
#toastContainer { position:fixed; bottom:20px; right:20px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:8px; }
.toast { background:var(--section-bg); color:var(--text); padding:12px 20px; border-radius:8px; font-size:var(--text-base); font-weight:bold; box-shadow:0 4px 12px rgba(0,0,0,0.3); opacity:0; transform:translateX(40px); transition:opacity 0.3s, transform 0.3s; max-width:360px; }

/* ── Tooltip helper icon (hover/tap to reveal) ── */
.tip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:15px;
    height:15px;
    border-radius:50%;
    background:var(--tone-info-bg);
    color:var(--brand-accent);
    font-size:var(--text-2xs);
    font-weight:var(--weight-bold);
    font-style:normal;
    margin-left:6px;
    cursor:help;
    position:relative;
    vertical-align:middle;
    transition:0.15s;
    user-select:none;
}
.tip:hover { background:var(--color-primary-solid, var(--brand-accent)); color:var(--color-text-on-solid, #fff); }
.tip::before {
    content: attr(data-tip);
    position:absolute;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    background:var(--bg);
    color:var(--text);
    padding:10px 14px;
    border-radius:6px;
    font-size:var(--text-sm);
    font-weight:var(--weight-regular);
    font-style:normal;
    line-height:1.5;
    min-width:200px;
    max-width:340px;
    width:max-content;
    border:1px solid rgba(96,165,250,0.35);
    box-shadow:0 8px 20px rgba(0,0,0,0.4);
    white-space:normal;
    text-align:left;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.15s, visibility 0.15s;
    z-index:var(--z-tooltip);
}
.tip::after {
    content:'';
    position:absolute;
    bottom:calc(100% + 1px);
    left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:rgba(96,165,250,0.35);
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.15s, visibility 0.15s;
    z-index:var(--z-tooltip);
}
.tip:hover::before, .tip:hover::after,
.tip:focus::before, .tip:focus::after,
.tip.tip-open::before, .tip.tip-open::after { opacity:1; visibility:visible; }
/* Flip tooltip to left edge on right-aligned elements */
.tip.tip-right::before { left:auto; right:-6px; transform:none; }
.tip.tip-right::after { left:auto; right:2px; transform:none; }
.toast.show { opacity:1; transform:translateX(0); }
.toast.toast-error { background:var(--tone-danger-fg); border-left:4px solid var(--tone-danger-fg); }
.toast.toast-success { background:var(--chip-success-solid-bg); border-left:4px solid var(--tone-success-fg); }
.toast.toast-info { background:var(--section-bg); border-left:4px solid var(--brand-accent); }
.form-row { display:flex; align-items:center; margin-bottom:10px; gap:12px; }
.form-row label { flex:0 0 220px; font-size:var(--text-base); color:var(--text-muted); font-weight:bold; }
.form-row input, .form-row select { flex:1; padding:8px 12px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); font-size:var(--text-base); font-family:Calibri,Arial; }
.form-row input:focus { outline:none; border-color:var(--brand-accent); }
.save-status { display:inline-block; margin-left:10px; font-size:var(--text-sm); font-weight:500; min-height:18px; opacity:0; transition:opacity 0.3s; }
.save-status.show { opacity:1; }

/* ── Settings-layout helpers — shared across /settings, /clients, /alerts, /price-optimizer.
   Any blueprint needing these classes can rely on 60-base; no local copy needed. ── */
.settings-container  { max-width: 800px; margin: 20px auto; padding: 0 20px; }
.settings-btn-inline { border: 1px solid var(--card-border); font-size: var(--text-sm); padding: 5px 10px; }
.settings-input-full { width: 100%; box-sizing: border-box; }
.settings-section-sub { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 14px; }
.settings-save-status { font-size: var(--text-sm); font-weight: 500; min-height: 18px; }


/* ── Stub / "Coming Soon" placeholder pages (/products, /keywords, /reports)
   Moved from app.py STUB_CSS on 18 Apr 2026 into the design system so every
   theme picks them up. Classes are scoped under .stub-* so no bleed. ── */
.stub-container { max-width: 700px; margin: 120px auto; text-align: center; padding: 0 20px; }
.stub-icon      { font-size: var(--text-icon); margin-bottom: 24px; opacity: 0.3; }
.stub-title     { font-size: var(--text-4xl); font-weight: bold; color: var(--brand-accent); margin-bottom: 12px; }
.stub-badge     { display: inline-block; background: var(--color-primary-solid, var(--brand-accent)); color: var(--chip-light-card); font-size: var(--text-compact); font-weight: bold; padding: 4px 14px; border-radius: 999px; margin-bottom: 20px; }
.stub-desc      { font-size: var(--text-subhead); color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }
.stub-back      { display: inline-block; background: var(--card-border); border: 1px solid rgba(255,255,255,0.15); color: var(--brand-accent); padding: 10px 28px; border-radius: 8px; text-decoration: none; font-size: var(--text-base); font-weight: bold; transition: 0.2s; }
.stub-back:hover { background: rgba(255,255,255,0.15); }

/* Empty state — reusable across all blueprints */
.g24-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
  color: var(--text-muted);
}
.g24-empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; }
.g24-empty-title { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.g24-empty-sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; }

/* ── Print ──────────────────────────────────────────────────────── */
.g24-noscript {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast);
  /* Wave B7 (17 May 2026): safe-area-inset for iPhone notch (top) + landscape side-cutouts. */
  padding:
    calc(10px + env(safe-area-inset-top, 0))
    calc(16px + env(safe-area-inset-right, 0))
    10px
    calc(16px + env(safe-area-inset-left, 0));
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg); border-bottom: 1px solid var(--tone-warn-border);
  text-align: center; font-size: 0.875rem;
}
.g24-demo-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-toast);
  background: linear-gradient(135deg, var(--header-grad-start), var(--header-grad-end));
  border-top: 2px solid var(--brand-accent);
  /* Wave B7 (17 May 2026): safe-area-inset for home-indicator + landscape side-cutouts. */
  padding:
    12px
    calc(24px + env(safe-area-inset-right, 0))
    calc(12px + env(safe-area-inset-bottom, 0))
    calc(24px + env(safe-area-inset-left, 0));
  align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap;
}
.g24-demo-cta-link {
  font-size: 17px; font-weight: var(--weight-bold); cursor: pointer;
  transition: font-size 0.4s, opacity 0.4s;
}
.g24-demo-cta-trial { color: var(--brand-accent); }
.g24-demo-cta-free { color: var(--tone-success-fg); }
.g24-demo-cta-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--text-dim);
  font-size: var(--text-section); cursor: pointer; padding: 4px 8px;
}
.g24-scroll-top {
  display: none; position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border);
  background: var(--card-bg); color: var(--text-muted); font-size: var(--text-subhead);
  cursor: pointer; box-shadow: 0 4px 12px var(--overlay-modal-backdrop);
  transition: opacity 0.2s, transform 0.2s;
}
.g24-session-warn {
  display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast); background: var(--tone-warn-bg); color: var(--tone-warn-fg);
  border: 1px solid var(--tone-warn-border); border-radius: 8px; padding: 10px 20px;
  font-size: 0.85rem; font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px var(--overlay-modal-backdrop);
  white-space: nowrap; align-items: center; gap: 12px; flex-direction: row;
}
.g24-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
  background: var(--overlay-modal-backdrop); align-items: center; justify-content: center;
}
.g24-confirm-dialog {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 28px 32px; max-width: 400px; width: 90%;
  box-shadow: 0 20px 60px var(--overlay-modal-backdrop);
}
.g24-confirm-title { margin: 0 0 10px; font-size: 1rem; color: var(--text); }
.g24-confirm-msg { margin: 0 0 24px; font-size: 0.875rem; color: var(--text-muted); }
.g24-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.g24-confirm-cancel {
  padding: 7px 18px; border-radius: 7px; border: 1px solid var(--card-border);
  background: var(--hover-bg); color: var(--text); cursor: pointer; font-size: 0.85rem;
}
.g24-confirm-ok {
  padding: 7px 18px; border-radius: 7px; border: 0;
  background: var(--tone-danger-fg); color: var(--chip-light-card);
  cursor: pointer; font-size: 0.85rem; font-weight: var(--weight-semibold);
}

/* ══════════════════════════════════════════════════════════════════════
   UNIVERSAL POPUP SYSTEM  (g24-popup.js companion — 28 Apr 2026)
   Zero hardcoded hex/rgba — every value via design tokens.
   CSS layer: overrides (loaded last, wins over component defaults).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Backdrop overlay ─────────────────────────────────────────────── */
.g24p-overlay {
  position: fixed; inset: 0;
  background: var(--color-surface-overlay);
  z-index: var(--z-modal-backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base) var(--ease-out),
              visibility var(--transition-base) var(--ease-out);
}
.g24p-overlay.g24p-open {
  opacity: 1; visibility: visible;
}

/* ── Dialog card ──────────────────────────────────────────────────── */
.g24p-dialog {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  max-width: 420px; width: 100%;
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
  position: relative;
  transform: scale(0.92) translateY(12px);
  transition: transform var(--transition-base) var(--ease-spring);
}
.g24p-overlay.g24p-open .g24p-dialog {
  transform: scale(1) translateY(0);
}

/* ── Close × button ───────────────────────────────────────────────── */
.g24p-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 28px; height: 28px;
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); color: var(--color-text-muted);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.g24p-close:hover { background: var(--color-surface-hover); color: var(--color-text-body); }
.g24p-close:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* ── Icon circle ──────────────────────────────────────────────────── */
.g24p-icon-wrap {
  width: 68px; height: 68px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5);
  font-size: 30px; line-height: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.g24p-icon-wrap--info    { background: var(--color-info-bg);    border: 2px solid var(--color-info-border);    }
.g24p-icon-wrap--success { background: var(--color-success-bg); border: 2px solid var(--color-success-border); }
.g24p-icon-wrap--warn    { background: var(--color-warn-bg);    border: 2px solid var(--color-warn-border);    }
.g24p-icon-wrap--danger  { background: var(--color-danger-bg);  border: 2px solid var(--color-danger-border);  }

/* ── Title & body text ────────────────────────────────────────────── */
.g24p-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
}
.g24p-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-6);
}

/* ── Action buttons row ───────────────────────────────────────────── */
.g24p-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

/* ── Button base ──────────────────────────────────────────────────── */
.g24p-btn {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  border: none; cursor: pointer;
  font-size: var(--text-compact);
  font-weight: var(--weight-semibold);
  font-family: inherit;
  line-height: 1.4;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.g24p-btn:active { transform: scale(0.97); }
.g24p-btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Ghost / cancel */
.g24p-btn--ghost {
  background: var(--color-neutral-bg);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-body);
}
.g24p-btn--ghost:hover { background: var(--color-surface-hover); }

/* Solid primary — color is set by type modifier */
.g24p-btn--primary { color: var(--color-text-on-solid); border: none; }
.g24p-btn--info    { background: var(--color-info-solid);    }
.g24p-btn--info:hover    { background: var(--color-info-solid-hover);    }
.g24p-btn--success { background: var(--color-success-solid); }
.g24p-btn--success:hover { background: var(--color-success-solid-hover); }
.g24p-btn--warn    { background: var(--color-warn-solid);    }
.g24p-btn--warn:hover    { background: var(--color-warn-solid-hover);    }
.g24p-btn--danger  { background: var(--color-danger-solid);  }
.g24p-btn--danger:hover  { background: var(--color-danger-solid-hover);  }

/* ── Upgraded toast ───────────────────────────────────────────────── */
.g24p-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  max-width: 360px; min-width: 220px;
  pointer-events: all;
  opacity: 0; transform: translateX(20px);
  transition: opacity var(--transition-base) var(--ease-out),
              transform var(--transition-base) var(--ease-out);
}
.g24p-toast.g24p-toast--show { opacity: 1; transform: translateX(0); }

.g24p-toast-icon { font-size: var(--text-subhead); flex-shrink: 0; margin-top: 1px; }
.g24p-toast-msg  { font-size: var(--text-sm); color: var(--color-text-body);
                   flex: 1; line-height: var(--leading-snug); }

.g24p-toast--success { border-left: 3px solid var(--color-success-solid); }
.g24p-toast--warn    { border-left: 3px solid var(--color-warn-solid);    }
.g24p-toast--danger  { border-left: 3px solid var(--color-danger-solid);  }
.g24p-toast--info    { border-left: 3px solid var(--color-info-solid);    }

/* Production UI polish pass (08 May 2026)
   Dashboard-wide, token-only refinements for smoother launch readiness. */
:root {
  --g24-header-height: 58px;
  --g24-control-min-height: 36px;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
}

.g24-header {
  height: var(--g24-header-height);
  min-height: var(--g24-header-height);
  gap: var(--space-2);
  padding-inline: var(--space-5);
  box-shadow: var(--shadow-md);
}

.g24-body {
  margin-top: var(--g24-header-height);
  min-height: calc(100vh - var(--g24-header-height));
}

.g24-main {
  min-height: calc(100vh - var(--g24-header-height));
}

.g24-header .g24-logo {
  letter-spacing: 0;
}

.g24-nav-inline {
  gap: var(--space-1);
  min-width: 0;
}

.g24-nav-inline a,
.g24-nav-more,
.theme-toggle,
.g24-user-btn,
.g24-ctx-btn,
.g24-sidebar-toggle {
  min-height: var(--g24-control-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.g24-ctx-btn {
  justify-content: flex-start;
}

.g24-nav-inline a,
.g24-nav-more,
.g24-menu-row,
.theme-toggle,
.g24-user-btn,
.g24-ctx-btn,
.g24-sidebar-toggle {
  transition: background var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out),
              color var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              transform var(--transition-fast) var(--ease-out);
}

.g24-nav-inline a:hover,
.g24-nav-more:hover,
.theme-toggle:hover,
.g24-user-btn:hover,
.g24-ctx-btn:hover,
.g24-sidebar-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

.g24-nav-inline a:focus-visible,
.g24-nav-more:focus-visible,
.g24-menu-row:focus-visible,
.theme-toggle:focus-visible,
.g24-user-btn:focus-visible,
.g24-ctx-btn:focus-visible,
.g24-sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.g24-search-wrap input,
.g24-ctx-select,
.g24-ctx-switch select,
.sb-search-input,
.bulk-search,
.bulk-bar select,
.form-row input,
.form-row select,
.form-row textarea,
.settings-input-full {
  font-family: inherit;
  transition: background var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out);
}

.g24-search-wrap input:focus-visible,
.g24-ctx-select:focus-visible,
.g24-ctx-switch select:focus-visible,
.sb-search-input:focus-visible,
.bulk-search:focus-visible,
.bulk-bar select:focus-visible,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.settings-input-full:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: var(--shadow-focus);
}

.g24-sidebar {
  top: var(--g24-header-height);
  padding: var(--space-3) 0;
  box-shadow: var(--shadow-md);
  scrollbar-gutter: stable;
}

.g24-sidebar .sb-label {
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.g24-sidebar a {
  min-height: 34px;
  margin-inline: var(--space-1);
  border-radius: var(--radius-md);
  transition: background var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out),
              color var(--transition-base) var(--ease-out),
              transform var(--transition-fast) var(--ease-out);
}

.g24-sidebar a:hover {
  transform: translateX(1px);
}

.g24-sidebar a.active,
.g24-sidebar .sb-children a.sb-child.active,
.g24-sidebar .sb-row.sb-has-children.is-expanded > a {
  background: var(--tone-info-bg);
}

.g24-sidebar .sb-children {
  background: var(--tone-info-bg);
}

.card,
.section,
.g24-card,
.config-section,
.bulk-bar,
.g24-search-results,
.g24-nav-more-dropdown,
.g24-right-more-dropdown,
.g24-user-dropdown,
.g24-ctx-dropdown {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              transform var(--transition-fast) var(--ease-out);
}

.card:hover,
.section:hover,
.g24-card:hover,
.config-section:hover,
.bulk-bar.active {
  box-shadow: var(--shadow-md);
}

.g24-card-hover:hover,
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card h3,
.section h2,
.card-title,
.heading-card {
  letter-spacing: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--g24-control-min-height);
  transition: background var(--transition-base) var(--ease-out),
              border-color var(--transition-base) var(--ease-out),
              color var(--transition-base) var(--ease-out),
              box-shadow var(--transition-base) var(--ease-out),
              transform var(--transition-fast) var(--ease-out);
}

.btn:not(.running):not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:not(.running):not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

.btn:focus-visible,
.settings-btn-inline:focus-visible,
.g24-confirm-cancel:focus-visible,
.g24-confirm-ok:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

table {
  border-spacing: 0;
}

th {
  background: var(--section-bg);
}

th,
td {
  vertical-align: middle;
}

tbody tr {
  transition: background var(--transition-fast) var(--ease-out);
}

.table-wrap,
.g24-main table {
  scrollbar-width: thin;
  scrollbar-color: var(--card-border) transparent;
}

.g24-empty,
.toast,
.g24p-toast,
.g24-confirm-dialog,
.g24p-dialog {
  box-shadow: var(--shadow-lg);
}

.g24-scroll-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .g24-nav-inline a,
  .g24-nav-more,
  .theme-toggle,
  .g24-user-btn,
  .g24-ctx-btn,
  .g24-sidebar-toggle,
  .g24-sidebar a,
  .btn,
  .card,
  .section,
  .g24-card,
  .config-section,
  .toast,
  .g24p-toast,
  .g24p-dialog {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ── AI Neural theme — card entry + pulse + header glow ── */
body[data-theme="ai-neural"] .grid .card {
  border-top: 2px solid #6366f1;
  animation: aiTopGlow 4s ease-in-out infinite;
}
body[data-theme="ai-neural"] .card:hover {
  border-color:rgba(99,102,241,.55)!important;
  box-shadow:0 0 22px rgba(99,102,241,.18),0 0 6px rgba(168,85,247,.12)!important;
  transition:border-color .3s,box-shadow .3s;
}
body[data-theme="ai-neural"] .g24-header {
  border-bottom-color:rgba(99,102,241,.3);
  animation:aiHeaderGlow 5s ease-in-out infinite;
}
body[data-theme="ai-neural"] .g24-sidebar {
  border-right:1px solid rgba(99,102,241,.18);
}

@media print {
  /* Mway BIGFIX 18 (H5) — was using broken --chip-light-card token; now
     forces clean white-on-navy regardless of screen theme. Print fidelity:
     paper is always white, dark-mode-printed pages are unreadable, so we
     hardcode the light palette for `@media print` only. */
  .g24-header, .g24-sidebar, .g24-right, .theme-toggle,
  .btn, [class*="rt-hero-actions"], .g24-nav-inline { display: none !important; }
  body { background: #ffffff !important; color: #0b1f44 !important; }
  .g24-main { margin: 0 !important; padding: 0 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Wave 1 Agent H (17 May 2026) — base.html anti-pattern eradication.
   Promoted from inline `style="..."` attributes that lived in base.html
   so the header / notification drawer / footer markup stays clean.
   Zero new hex — every colour via existing token vocabulary.
   ═══════════════════════════════════════════════════════════════════════ */

/* Notifications bell — wrap + button stay relative for dropdown anchoring. */
.g24-notif-wrap { position: relative; }
.g24-notif-btn  { position: relative; }
.g24-notif-count {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  padding: 1px 3px;
  border-radius: var(--radius-pill);
  background: var(--tone-danger-fg);
  color: var(--color-text-on-solid);
  font-size: var(--text-3xs);
  line-height: 1.2;
  text-align: center;
}
.g24-notif-count.is-visible { display: block; }

.g24-notif-dropdown {
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  right: 0;
  left: auto;
}
.g24-notif-list           { padding: var(--space-1) 0; }
.g24-notif-list-empty,
.g24-notif-list-loading,
.g24-notif-list-error {
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-compact);
}
.g24-notif-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--card-border);
}
.g24-notif-row-severity {
  font-size: var(--text-compact);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
}
.g24-notif-row-msg  { font-size: var(--text-compact-half); }
.g24-notif-row-ts   { font-size: var(--text-xs); color: var(--text-muted); }
.g24-notif-footer {
  border-top: 1px solid var(--card-border);
  padding: var(--space-1) var(--space-4);
  display: flex;
  justify-content: flex-end;
}
.g24-notif-footer .g24-menu-row { font-size: var(--text-compact); }

/* Credential-expiry badge in the header. JS toggles .is-visible. */
.g24-cred-badge {
  display: none;
  color: var(--tone-danger-fg);
  font-size: var(--text-base);
  text-decoration: none;
  padding: 0 var(--space-1);
}
.g24-cred-badge.is-visible { display: inline; }

/* Page-content wrapper inside .g24-main. */
.g24-page-content { flex: 1; }

/* API Docs footer link (admin-only). */
.g24-footer-apilink {
  color: inherit;
  opacity: 0.7;
  font-size: var(--text-sm);
  text-decoration: none;
}
.g24-footer-apilink:hover { opacity: 1; text-decoration: underline; }

/* Inline session-expiry close button. */
.g24-session-warn-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: var(--text-md);
  padding: 0 0 0 var(--space-2);
  line-height: 1;
}

/* ───────────────────────────────────────────────────────────────────
   Migrated from base.html inline <style> on 17 May 2026 (Perf Wave,
   Agent CORE-1). Three families: global tooltip system, help-icon,
   and the onboarding banner. Page-universal — every page used to pay
   ~2KB of inline CSS parsing on every render. Moved here so it caches
   with the rest of the design system. Onboarding banner hex values
   tokenised to var(--token, #fallback) per Rule 15 v2.2.
   ─────────────────────────────────────────────────────────────────── */

/* Global tooltip system — usage: <el data-tooltip="hint text"> */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--text, #E0E6ED); color: var(--bg, #0F1923);
  font-size: .73rem; padding: 4px 8px; border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: var(--z-tooltip, 9000);
  max-width: 220px; white-space: normal; text-align: center; line-height: 1.35;
}
[data-tooltip]:hover::after { opacity: 1; }

/* Help "?" icon — usage: <span class="g24-help-icon" data-tooltip="...">?</span> */
.g24-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tone-info-bg, rgba(59,130,246,0.18));
  color: var(--tone-info-fg, #93C5FD);
  font-size: .65rem; font-weight: 700; cursor: help; line-height: 1;
  margin-left: 4px; flex-shrink: 0; vertical-align: middle;
  border: 1px solid var(--tone-info-border, rgba(96,165,250,0.34));
}

/* Global onboarding banner — shown to sellers with zero linked accounts. */
.g24-onboard-banner {
  background: linear-gradient(135deg, var(--onboard-grad-start, #1e1b4b) 0%, var(--onboard-grad-end, #1e3a5f) 100%);
  border-bottom: 2px solid var(--brand-accent-strong, #4f46e5);
  /* Wave B7 (17 May 2026): safe-area-inset for iPhone landscape side-cutouts.
     Top edge already clears notch (banner sits below 56px header). */
  padding:
    10px
    calc(48px + env(safe-area-inset-right, 0))
    10px
    calc(20px + env(safe-area-inset-left, 0));
  display: flex; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; transition: background .2s;
  position: fixed; top: 56px; left: 0; right: 0; z-index: 997;
}
/* When banner is visible, push sidebar + body down by banner height (45px). */
body.has-onboard-banner .g24-body { margin-top: calc(56px + 45px); min-height: calc(100vh - 101px); }
body.has-onboard-banner .g24-sidebar { top: calc(50px + 45px); }
.g24-onboard-banner:hover {
  background: linear-gradient(135deg, var(--onboard-grad-start-hover, #2d2870) 0%, var(--onboard-grad-end-hover, #1e4a7f) 100%);
}
.g24-onboard-banner-icon { font-size: 20px; flex-shrink: 0; }
.g24-onboard-banner-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.g24-onboard-banner-title {
  font-size: .88rem; font-weight: 700;
  color: var(--onboard-title-fg, #a78bfa);
  white-space: nowrap;
}
.g24-onboard-banner-sub {
  font-size: .76rem;
  color: var(--text-muted, #94a3b8);
}
.g24-onboard-banner-cta {
  background: var(--brand-accent-strong, #4f46e5);
  color: var(--on-accent-fg, #fff);
  border: none; border-radius: 7px;
  padding: 6px 14px; font-size: .8rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.g24-onboard-banner-cta:hover { background: var(--brand-accent-hover, #6366f1); }
.g24-onboard-banner-dismiss {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-dim, #4b5563);
  font-size: 17px; cursor: pointer;
  padding: 4px 8px; line-height: 1; border-radius: 4px;
}
.g24-onboard-banner-dismiss:hover {
  color: var(--text-muted, #94a3b8);
  background: var(--surface-hover-on-dark, rgba(255,255,255,.06));
}

/* Launch home dashboard polish — shared so the real homepage and any future
   command-center surface use the same first-paint treatment. */
.g24-home-primary-cta {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--tone-info-bg), var(--card-bg) 68%);
  box-shadow: var(--shadow-sm, 0 1px 3px var(--overlay-modal-backdrop));
}
.g24-home-primary-cta-icon {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /* Count indicator (not a button) — soft tinted stat-tile, same treatment as
     the Command Center .cc-hero-badge so both dashboards read consistently and
     stay readable in the black theme. */
  background: var(--color-brand-soft, var(--color-surface-hover));
  color: var(--color-text-brand, var(--brand-accent));
  border: 1px solid var(--color-brand-soft-border, var(--color-border-default));
  font-size: 22px;
  font-weight: 800;
}
.g24-home-primary-cta-msg {
  flex: 1 1 260px;
}
.g24-home-primary-cta-msg b {
  display: block;
  font-size: 18px;
  margin-bottom: 2px;
}
.g24-home-primary-cta-msg span { color: var(--text-muted); }
.g24-home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.g24-home-section-head h2 { margin: 0; }
.g24-kpi { min-height: 128px; }
@media (max-width: 480px) {
  .g24-home-primary-cta-actions { width: 100%; }
  .g24-home-primary-cta-actions .btn { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   COMMAND CENTER homepage layout (`.cc-*`)
   The live, data-driven alternative homepage chosen via
   Settings → Menu Defaults → Default homepage dashboard = "Command Center".
   Universal + token-driven so it themes automatically in light + black.
   Markup: blueprints/home/templates/_command_center.html.
   ════════════════════════════════════════════════════════════════════ */
.cc-wrap { display: flex; flex-direction: column; gap: 18px; }

/* Hero — one primary action, full width */
.cc-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  padding: 16px 20px;
  border: 1px solid var(--color-border-default, var(--card-border));
  border-radius: var(--radius-lg, 10px);
  background: linear-gradient(135deg, var(--color-brand-soft, var(--hover-bg)) 0%, var(--color-surface-card, var(--card-bg)) 70%);
  box-shadow: var(--shadow-sm);
}
/* Count indicator — deliberately NOT a button: a soft tinted stat-tile with
   a bold brand-coloured number + subtle ring, so it reads as "a number" and
   stays distinct from the solid CTA buttons beside it. Tokenised → looks good
   in light + black. */
.cc-hero-badge {
  flex: 0 0 auto; min-width: 52px; height: 52px; padding: 0 12px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--color-brand-soft, var(--color-surface-hover));
  color: var(--color-text-brand, var(--brand-accent));
  border: 1px solid var(--color-brand-soft-border, var(--color-border-default));
  font-size: 26px; font-weight: 800; line-height: 1;
}
.cc-hero-txt { flex: 1 1 auto; min-width: 0; }
.cc-hero-title { font-size: 18px; margin: 0 0 2px; color: var(--color-text-heading, var(--text)); }
.cc-hero-sub { font-size: 13px; margin: 0; color: var(--color-text-muted, var(--text-muted)); }
.cc-hero-acts { flex: 0 0 auto; display: flex; gap: 9px; }

/* Two-column body — action queue (wide) + vitals/AI (narrow) */
.cc-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
.cc-stack { display: flex; flex-direction: column; gap: 18px; }
.cc-pad { padding: 18px 20px; }
.cc-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-mb { margin-bottom: 14px; }
.cc-mt { margin-top: 8px; }
.cc-h2 { font-size: 17px; margin: 0; color: var(--color-text-heading, var(--text)); }
.cc-muted { color: var(--color-text-muted, var(--text-muted)); }
.cc-tiny { font-size: 12px; }
.cc-eyebrow {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 11px; font-weight: 700;
  color: var(--color-text-dim, var(--text-dim));
}

/* Action-queue rows */
.cc-list { display: flex; flex-direction: column; }
.cc-list-loading { padding: 10px 2px; font-size: 13px; color: var(--color-text-muted, var(--text-muted)); }
.cc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border-subtle, var(--card-border));
}
.cc-item:last-child { border-bottom: none; }
.cc-item-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 10px; display: grid; place-items: center; font-size: 18px;
}
.cc-item-ico.is-urgent { background: var(--color-danger-bg, var(--tone-danger-bg)); }
.cc-item-ico.is-important { background: var(--color-warn-bg, var(--tone-warn-bg)); }
.cc-item-msg { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--color-text-body, var(--text)); }
.cc-item-link {
  flex: 0 0 auto; font-size: 13px; font-weight: 600;
  color: var(--color-text-link, var(--brand-accent)); white-space: nowrap;
}
.cc-item-link:hover { text-decoration: underline; }
.cc-empty { padding: 10px 2px; font-size: 13px; }

/* Vital signs */
.cc-vital {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--card-border));
  font-size: 13.5px; color: var(--color-text-body, var(--text));
}
.cc-vital:last-child { border-bottom: none; }
.cc-vital-sm { padding: 8px 0; }
.cc-vital-lbl { flex: 1 1 auto; min-width: 0; }
.cc-vital-v { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--color-text-heading, var(--text)); }
.cc-vital-v-sm { font-size: 15px; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.cc-dot-ok { background: var(--color-success-solid, var(--tone-success-fg)); }
.cc-dot-warn { background: var(--color-warn-solid, var(--tone-warn-fg)); }
.cc-dot-bad { background: var(--color-danger-solid, var(--tone-danger-fg)); }

/* AI-overnight card */
.cc-ai { background: linear-gradient(135deg, var(--color-success-bg, var(--tone-success-bg)), transparent); }
.cc-ai-big { font-size: 34px; font-weight: 800; color: var(--color-text-heading, var(--text)); }
.cc-ai-big-sub { font-size: 15px; font-weight: 600; color: var(--color-text-muted, var(--text-muted)); }

@media (max-width: 900px) {
  .cc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cc-hero { flex-wrap: wrap; }
  .cc-hero-acts { flex-basis: 100%; }
  .cc-hero-acts .btn { flex: 1; }
}
@media (max-width: 480px) {
  .g24-home-primary-cta-actions { width: 100%; }
  .g24-home-primary-cta-actions .btn { flex: 1 1 100%; }
}