*, *::before, *::after { box-sizing: border-box; }

:root,
[data-theme="light"] {
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --color-positive: #16a34a;
    --color-negative: #dc2626;
    --color-text-primary: #0f1117;
    --color-text-secondary: #4b5563;
    --color-text-tertiary: #9ca3af;
    --color-text-success: #16a34a;
    --color-text-danger: #dc2626;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f9fafb;
    --color-background-panel: #e8edf3;
    --color-background-hover: #f3f4f6;
    --color-card-chrome: #e2e8f0;
    --color-card-chrome-hover: #d1d9e6;
    --color-border-tertiary: #e5e7eb;
    --color-border-secondary: #d1d5db;
    --color-accent: #2272BE;
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;

    /* Card surface: "lit" gradient edge + soft layered shadow */
    --card-edge-top: #d6dbe3;
    --card-edge-bottom: #eaedf2;
    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 14px rgba(16, 24, 40, 0.07);

    /* DTE pills */
    --dte-ok-bg: #dcfce7;     --dte-ok-color: #16a34a;
    --dte-warn-bg: #fef3c7;   --dte-warn-color: #92400e;
    --dte-urgent-bg: #fee2e2; --dte-urgent-color: #dc2626;

    /* Badges */
    --badge-cc-bg: #dcfce7;   --badge-cc-color: #16a34a;
    --badge-neg-bg: #fee2e2;  --badge-neg-color: #dc2626;
}

[data-theme="dark"] {
    --color-positive: #6ee7b7;
    --color-negative: #fca5a5;
    --color-text-primary: #f3f4f6;
    --color-text-secondary: #9ca3af;
    --color-text-tertiary: #6b7280;
    --color-text-success: #6ee7b7;
    --color-text-danger: #fca5a5;
    --color-background-primary: #111827;
    --color-background-secondary: #1f2937;
    --color-background-panel: #243040;
    --color-background-hover: #2d3748;
    --color-card-chrome: #182535;
    --color-card-chrome-hover: #1e2f44;
    --color-border-tertiary: #374151;
    --color-border-secondary: #4b5563;
    --color-accent: #60a5fa;

    /* Card surface: brighter top edge reads as light hitting the card */
    --card-edge-top: rgba(255, 255, 255, 0.17);
    --card-edge-bottom: rgba(255, 255, 255, 0.05);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.3);

    /* DTE pills */
    --dte-ok-bg: #14532d;     --dte-ok-color: #86efac;
    --dte-warn-bg: #78350f;   --dte-warn-color: #fcd34d;
    --dte-urgent-bg: #7f1d1d; --dte-urgent-color: #fca5a5;

    /* Badges */
    --badge-cc-bg: #14532d;   --badge-cc-color: #86efac;
    --badge-neg-bg: #7f1d1d;  --badge-neg-color: #fca5a5;
}

/* Default card background falls through to the global --color-accent, which is the
   same blue as the "Harbor Blue" chrome — give the pills a neutral fill here so
   picking Default actually looks different from picking Harbor Blue. */
html:not([data-card-chrome]) .col-chip--on {
    background: var(--color-background-hover);
}

html[data-card-chrome="blue"][data-theme="light"],
html[data-card-chrome="blue"]:not([data-theme="dark"])  { --color-card-chrome: #2272BE; --color-card-chrome-hover: #2272BE; }
html[data-card-chrome="blue"][data-theme="dark"]         { --color-card-chrome: #1e3a5c; --color-card-chrome-hover: #1e4570; }

/* Cream text for card chrome areas when blue is active in light mode */
html[data-card-chrome="blue"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="blue"][data-theme="light"] .group-header,
html[data-card-chrome="blue"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="blue"][data-theme="light"] .group-footer,
html[data-card-chrome="blue"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="blue"][data-theme="light"] .an-section-header,
html[data-card-chrome="blue"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="blue"][data-theme="light"] .section-header,
html[data-card-chrome="blue"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="blue"][data-theme="light"] .modal-header {
    --color-text-primary: #fdf8f0;
    --color-text-secondary: rgba(253,248,240,0.82);
    --color-text-tertiary: rgba(253,248,240,0.55);
    --color-border-tertiary: rgba(253,248,240,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #f87171;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="blue"] .an-section-header,
html[data-card-chrome="blue"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the blue footer */
html[data-card-chrome="blue"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="blue"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fdf8f0;
}

/* Keep toggle buttons readable against the blue section header */
html[data-card-chrome="blue"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fdf8f0;
}
html[data-card-chrome="blue"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #fdf8f0;
}

html[data-card-chrome="emerald"][data-theme="light"],
html[data-card-chrome="emerald"]:not([data-theme="dark"]) { --color-card-chrome: #1a6b4a; --color-card-chrome-hover: #1a6b4a; }
html[data-card-chrome="emerald"][data-theme="dark"]        { --color-card-chrome: #0e3f2b; --color-card-chrome-hover: #114d34; }
html[data-card-chrome="emerald"]                           { --color-accent: #10b981; }
html[data-card-chrome="emerald"][data-theme="dark"]        { --color-accent: #34d399; }

/* Light text for card chrome areas when emerald is active in light mode */
html[data-card-chrome="emerald"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="emerald"][data-theme="light"] .group-header,
html[data-card-chrome="emerald"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="emerald"][data-theme="light"] .group-footer,
html[data-card-chrome="emerald"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="emerald"][data-theme="light"] .an-section-header,
html[data-card-chrome="emerald"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="emerald"][data-theme="light"] .section-header,
html[data-card-chrome="emerald"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="emerald"][data-theme="light"] .modal-header {
    --color-text-primary: #f0fdf4;
    --color-text-secondary: rgba(240,253,244,0.82);
    --color-text-tertiary: rgba(240,253,244,0.55);
    --color-border-tertiary: rgba(240,253,244,0.2);
    --color-text-success: #d1fae5;
    --color-text-danger: #fda4af;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="emerald"] .an-section-header,
html[data-card-chrome="emerald"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the emerald footer */
html[data-card-chrome="emerald"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="emerald"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #f0fdf4;
}

/* Keep toggle buttons readable against the emerald section header */
html[data-card-chrome="emerald"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #f0fdf4;
}
html[data-card-chrome="emerald"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #f0fdf4;
}

html[data-card-chrome="obsidian"][data-theme="light"],
html[data-card-chrome="obsidian"]:not([data-theme="dark"]) { --color-card-chrome: #1a1825; --color-card-chrome-hover: #221f30; }
html[data-card-chrome="obsidian"][data-theme="dark"]        { --color-card-chrome: #0f0e16; --color-card-chrome-hover: #16141f; }
html[data-card-chrome="obsidian"]                           { --color-accent: #71717a; }

/* Light text for card chrome areas when obsidian is active */
html[data-card-chrome="obsidian"] .group-header,
html[data-card-chrome="obsidian"] .group-footer,
html[data-card-chrome="obsidian"] .an-section-header,
html[data-card-chrome="obsidian"] .section-header,
html[data-card-chrome="obsidian"] .modal-header {
    --color-text-primary: #e2e8f0;
    --color-text-secondary: rgba(226,232,240,0.75);
    --color-text-tertiary: rgba(226,232,240,0.45);
    --color-border-tertiary: rgba(226,232,240,0.1);
    --color-text-success: #4ade80;
    --color-text-danger: #f87171;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="obsidian"] .an-section-header,
html[data-card-chrome="obsidian"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the obsidian footer */
html[data-card-chrome="obsidian"] .group-footer button {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #e2e8f0;
}

/* Keep toggle buttons readable against the obsidian section header */
html[data-card-chrome="obsidian"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #e2e8f0;
}
html[data-card-chrome="obsidian"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.45);
    color: #e2e8f0;
}

html[data-card-chrome="violet"][data-theme="light"],
html[data-card-chrome="violet"]:not([data-theme="dark"]) { --color-card-chrome: #4c1d95; --color-card-chrome-hover: #5b21b6; }
html[data-card-chrome="violet"][data-theme="dark"]        { --color-card-chrome: #2e1065; --color-card-chrome-hover: #3b0f6b; }
html[data-card-chrome="violet"]                           { --color-accent: #8b5cf6; }
html[data-card-chrome="violet"][data-theme="dark"]        { --color-accent: #a78bfa; }

/* Light text for card chrome areas when violet is active in light mode */
html[data-card-chrome="violet"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="violet"][data-theme="light"] .group-header,
html[data-card-chrome="violet"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="violet"][data-theme="light"] .group-footer,
html[data-card-chrome="violet"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="violet"][data-theme="light"] .an-section-header,
html[data-card-chrome="violet"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="violet"][data-theme="light"] .section-header,
html[data-card-chrome="violet"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="violet"][data-theme="light"] .modal-header {
    --color-text-primary: #f5f3ff;
    --color-text-secondary: rgba(245,243,255,0.82);
    --color-text-tertiary: rgba(245,243,255,0.55);
    --color-border-tertiary: rgba(245,243,255,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #f87171;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="violet"] .an-section-header,
html[data-card-chrome="violet"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the violet footer */
html[data-card-chrome="violet"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="violet"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #f5f3ff;
}

/* Keep toggle buttons readable against the violet section header */
html[data-card-chrome="violet"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #f5f3ff;
}
html[data-card-chrome="violet"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #f5f3ff;
}

html[data-card-chrome="brick"][data-theme="light"],
html[data-card-chrome="brick"]:not([data-theme="dark"]) { --color-card-chrome: #7f1d1d; --color-card-chrome-hover: #8f2323; }
html[data-card-chrome="brick"][data-theme="dark"]        { --color-card-chrome: #450a0a; --color-card-chrome-hover: #5c1414; }
html[data-card-chrome="brick"]                           { --color-accent: #b91c1c; }
html[data-card-chrome="brick"][data-theme="dark"]        { --color-accent: #ef4444; }

/* Light text for card chrome areas when brick is active in light mode */
html[data-card-chrome="brick"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="brick"][data-theme="light"] .group-header,
html[data-card-chrome="brick"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="brick"][data-theme="light"] .group-footer,
html[data-card-chrome="brick"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="brick"][data-theme="light"] .an-section-header,
html[data-card-chrome="brick"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="brick"][data-theme="light"] .section-header,
html[data-card-chrome="brick"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="brick"][data-theme="light"] .modal-header {
    --color-text-primary: #fef2f2;
    --color-text-secondary: rgba(254,242,242,0.82);
    --color-text-tertiary: rgba(254,242,242,0.55);
    --color-border-tertiary: rgba(254,242,242,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="brick"] .an-section-header,
html[data-card-chrome="brick"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the brick footer */
html[data-card-chrome="brick"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="brick"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fef2f2;
}

/* Keep toggle buttons readable against the brick section header */
html[data-card-chrome="brick"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fef2f2;
}
html[data-card-chrome="brick"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #fef2f2;
}

html[data-card-chrome="amber"][data-theme="light"],
html[data-card-chrome="amber"]:not([data-theme="dark"]) { --color-card-chrome: #a16207; --color-card-chrome-hover: #b45309; }
html[data-card-chrome="amber"][data-theme="dark"]        { --color-card-chrome: #713f12; --color-card-chrome-hover: #854d0e; }
html[data-card-chrome="amber"]                           { --color-accent: #ca8a04; }
html[data-card-chrome="amber"][data-theme="dark"]        { --color-accent: #facc15; }

/* Light text for card chrome areas when amber is active in light mode */
html[data-card-chrome="amber"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="amber"][data-theme="light"] .group-header,
html[data-card-chrome="amber"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="amber"][data-theme="light"] .group-footer,
html[data-card-chrome="amber"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="amber"][data-theme="light"] .an-section-header,
html[data-card-chrome="amber"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="amber"][data-theme="light"] .section-header,
html[data-card-chrome="amber"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="amber"][data-theme="light"] .modal-header {
    --color-text-primary: #fefce8;
    --color-text-secondary: rgba(254,252,232,0.82);
    --color-text-tertiary: rgba(254,252,232,0.55);
    --color-border-tertiary: rgba(254,252,232,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="amber"] .an-section-header,
html[data-card-chrome="amber"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the amber footer */
html[data-card-chrome="amber"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="amber"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fefce8;
}

/* Keep toggle buttons readable against the amber section header */
html[data-card-chrome="amber"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fefce8;
}
html[data-card-chrome="amber"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #fefce8;
}

html[data-card-chrome="ocean"][data-theme="light"],
html[data-card-chrome="ocean"]:not([data-theme="dark"]) { --color-card-chrome: #0e7490; --color-card-chrome-hover: #0f84a3; }
html[data-card-chrome="ocean"][data-theme="dark"]        { --color-card-chrome: #164e63; --color-card-chrome-hover: #155e75; }
html[data-card-chrome="ocean"]                           { --color-accent: #0891b2; }
html[data-card-chrome="ocean"][data-theme="dark"]        { --color-accent: #22d3ee; }

/* Light text for card chrome areas when ocean is active in light mode */
html[data-card-chrome="ocean"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="ocean"][data-theme="light"] .group-header,
html[data-card-chrome="ocean"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="ocean"][data-theme="light"] .group-footer,
html[data-card-chrome="ocean"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="ocean"][data-theme="light"] .an-section-header,
html[data-card-chrome="ocean"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="ocean"][data-theme="light"] .section-header,
html[data-card-chrome="ocean"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="ocean"][data-theme="light"] .modal-header {
    --color-text-primary: #ecfeff;
    --color-text-secondary: rgba(236,254,255,0.82);
    --color-text-tertiary: rgba(236,254,255,0.55);
    --color-border-tertiary: rgba(236,254,255,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="ocean"] .an-section-header,
html[data-card-chrome="ocean"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the ocean footer */
html[data-card-chrome="ocean"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="ocean"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #ecfeff;
}

/* Keep toggle buttons readable against the ocean section header */
html[data-card-chrome="ocean"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #ecfeff;
}
html[data-card-chrome="ocean"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #ecfeff;
}

/* ── Gradient card colours ──
   Same structure as the solids; --color-card-chrome holds a gradient, which works
   because every consumer sets it via the `background` shorthand. */
html[data-card-chrome="sunset"][data-theme="light"],
html[data-card-chrome="sunset"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #9a3412, #a16207); --color-card-chrome-hover: linear-gradient(90deg, #b13c14, #b45309); }
html[data-card-chrome="sunset"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #431407, #713f12); --color-card-chrome-hover: linear-gradient(90deg, #5a1b09, #854d0e); }
html[data-card-chrome="sunset"]                           { --color-accent: #ea580c; }
html[data-card-chrome="sunset"][data-theme="dark"]        { --color-accent: #fb923c; }

/* Light text for card chrome areas when sunset is active in light mode */
html[data-card-chrome="sunset"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="sunset"][data-theme="light"] .group-header,
html[data-card-chrome="sunset"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="sunset"][data-theme="light"] .group-footer,
html[data-card-chrome="sunset"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="sunset"][data-theme="light"] .an-section-header,
html[data-card-chrome="sunset"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="sunset"][data-theme="light"] .section-header,
html[data-card-chrome="sunset"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="sunset"][data-theme="light"] .modal-header {
    --color-text-primary: #fff7ed;
    --color-text-secondary: rgba(255,247,237,0.82);
    --color-text-tertiary: rgba(255,247,237,0.55);
    --color-border-tertiary: rgba(255,247,237,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fecaca;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="sunset"] .an-section-header,
html[data-card-chrome="sunset"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the sunset footer */
html[data-card-chrome="sunset"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="sunset"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fff7ed;
}

/* Keep toggle buttons readable against the sunset section header */
html[data-card-chrome="sunset"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fff7ed;
}
html[data-card-chrome="sunset"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #fff7ed;
}

html[data-card-chrome="midnight"][data-theme="light"],
html[data-card-chrome="midnight"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #1e1b2e, #1e3a8a); --color-card-chrome-hover: linear-gradient(90deg, #28243d, #1e40af); }
html[data-card-chrome="midnight"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #0b0a12, #172554); --color-card-chrome-hover: linear-gradient(90deg, #14121f, #1e3a8a); }
html[data-card-chrome="midnight"]                           { --color-accent: #3b82f6; }
html[data-card-chrome="midnight"][data-theme="dark"]        { --color-accent: #60a5fa; }

/* Light text for card chrome areas when midnight is active in light mode */
html[data-card-chrome="midnight"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="midnight"][data-theme="light"] .group-header,
html[data-card-chrome="midnight"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="midnight"][data-theme="light"] .group-footer,
html[data-card-chrome="midnight"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="midnight"][data-theme="light"] .an-section-header,
html[data-card-chrome="midnight"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="midnight"][data-theme="light"] .section-header,
html[data-card-chrome="midnight"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="midnight"][data-theme="light"] .modal-header {
    --color-text-primary: #eef2ff;
    --color-text-secondary: rgba(238,242,255,0.82);
    --color-text-tertiary: rgba(238,242,255,0.55);
    --color-border-tertiary: rgba(238,242,255,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="midnight"] .an-section-header,
html[data-card-chrome="midnight"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the midnight footer */
html[data-card-chrome="midnight"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="midnight"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #eef2ff;
}

/* Keep toggle buttons readable against the midnight section header */
html[data-card-chrome="midnight"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #eef2ff;
}
html[data-card-chrome="midnight"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #eef2ff;
}

html[data-card-chrome="nebula"][data-theme="light"],
html[data-card-chrome="nebula"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #6d28d9, #1d4ed8); --color-card-chrome-hover: linear-gradient(90deg, #7c3aed, #2563eb); }
html[data-card-chrome="nebula"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #2e1065, #172554); --color-card-chrome-hover: linear-gradient(90deg, #3b0f6b, #1e3a8a); }
html[data-card-chrome="nebula"]                           { --color-accent: #7c3aed; }
html[data-card-chrome="nebula"][data-theme="dark"]        { --color-accent: #a78bfa; }

/* Light text for card chrome areas when nebula is active in light mode */
html[data-card-chrome="nebula"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="nebula"][data-theme="light"] .group-header,
html[data-card-chrome="nebula"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="nebula"][data-theme="light"] .group-footer,
html[data-card-chrome="nebula"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="nebula"][data-theme="light"] .an-section-header,
html[data-card-chrome="nebula"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="nebula"][data-theme="light"] .section-header,
html[data-card-chrome="nebula"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="nebula"][data-theme="light"] .modal-header {
    --color-text-primary: #f5f3ff;
    --color-text-secondary: rgba(245,243,255,0.82);
    --color-text-tertiary: rgba(245,243,255,0.55);
    --color-border-tertiary: rgba(245,243,255,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="nebula"] .an-section-header,
html[data-card-chrome="nebula"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the nebula footer */
html[data-card-chrome="nebula"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="nebula"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #f5f3ff;
}

/* Keep toggle buttons readable against the nebula section header */
html[data-card-chrome="nebula"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #f5f3ff;
}
html[data-card-chrome="nebula"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #f5f3ff;
}

html[data-card-chrome="lagoon"][data-theme="light"],
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #0e7490, #047857); --color-card-chrome-hover: linear-gradient(90deg, #0f84a3, #05966a); }
html[data-card-chrome="lagoon"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #164e63, #064e3b); --color-card-chrome-hover: linear-gradient(90deg, #155e75, #065f46); }
html[data-card-chrome="lagoon"]                           { --color-accent: #0891b2; }
html[data-card-chrome="lagoon"][data-theme="dark"]        { --color-accent: #2dd4bf; }

/* Light text for card chrome areas when lagoon is active in light mode */
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="lagoon"][data-theme="light"] .group-header,
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="lagoon"][data-theme="light"] .group-footer,
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="lagoon"][data-theme="light"] .an-section-header,
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="lagoon"][data-theme="light"] .section-header,
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="lagoon"][data-theme="light"] .modal-header {
    --color-text-primary: #ecfeff;
    --color-text-secondary: rgba(236,254,255,0.82);
    --color-text-tertiary: rgba(236,254,255,0.55);
    --color-border-tertiary: rgba(236,254,255,0.2);
    --color-text-success: #bbf7d0;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="lagoon"] .an-section-header,
html[data-card-chrome="lagoon"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the lagoon footer */
html[data-card-chrome="lagoon"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="lagoon"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #ecfeff;
}

/* Keep toggle buttons readable against the lagoon section header */
html[data-card-chrome="lagoon"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #ecfeff;
}
html[data-card-chrome="lagoon"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #ecfeff;
}

html[data-card-chrome="forest"][data-theme="light"],
html[data-card-chrome="forest"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #166534, #115e59); --color-card-chrome-hover: linear-gradient(90deg, #15803d, #0f766e); }
html[data-card-chrome="forest"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #052e16, #134e4a); --color-card-chrome-hover: linear-gradient(90deg, #0a3d1f, #115e59); }
html[data-card-chrome="forest"]                           { --color-accent: #16a34a; }
html[data-card-chrome="forest"][data-theme="dark"]        { --color-accent: #4ade80; }

/* Light text for card chrome areas when forest is active in light mode */
html[data-card-chrome="forest"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="forest"][data-theme="light"] .group-header,
html[data-card-chrome="forest"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="forest"][data-theme="light"] .group-footer,
html[data-card-chrome="forest"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="forest"][data-theme="light"] .an-section-header,
html[data-card-chrome="forest"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="forest"][data-theme="light"] .section-header,
html[data-card-chrome="forest"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="forest"][data-theme="light"] .modal-header {
    --color-text-primary: #f0fdf4;
    --color-text-secondary: rgba(240,253,244,0.82);
    --color-text-tertiary: rgba(240,253,244,0.55);
    --color-border-tertiary: rgba(240,253,244,0.2);
    --color-text-success: #bbf7d0;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="forest"] .an-section-header,
html[data-card-chrome="forest"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the forest footer */
html[data-card-chrome="forest"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="forest"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #f0fdf4;
}

/* Keep toggle buttons readable against the forest section header */
html[data-card-chrome="forest"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #f0fdf4;
}
html[data-card-chrome="forest"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #f0fdf4;
}

html[data-card-chrome="deepsea"][data-theme="light"],
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #1e3a8a, #0e7490); --color-card-chrome-hover: linear-gradient(90deg, #1e40af, #0f84a3); }
html[data-card-chrome="deepsea"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #172554, #164e63); --color-card-chrome-hover: linear-gradient(90deg, #1e3a8a, #155e75); }
html[data-card-chrome="deepsea"]                           { --color-accent: #0284c7; }
html[data-card-chrome="deepsea"][data-theme="dark"]        { --color-accent: #38bdf8; }

/* Light text for card chrome areas when deepsea is active in light mode */
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="deepsea"][data-theme="light"] .group-header,
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="deepsea"][data-theme="light"] .group-footer,
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="deepsea"][data-theme="light"] .an-section-header,
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="deepsea"][data-theme="light"] .section-header,
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="deepsea"][data-theme="light"] .modal-header {
    --color-text-primary: #eff6ff;
    --color-text-secondary: rgba(239,246,255,0.82);
    --color-text-tertiary: rgba(239,246,255,0.55);
    --color-border-tertiary: rgba(239,246,255,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fca5a5;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="deepsea"] .an-section-header,
html[data-card-chrome="deepsea"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the deepsea footer */
html[data-card-chrome="deepsea"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="deepsea"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #eff6ff;
}

/* Keep toggle buttons readable against the deepsea section header */
html[data-card-chrome="deepsea"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #eff6ff;
}
html[data-card-chrome="deepsea"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #eff6ff;
}

html[data-card-chrome="rosewood"][data-theme="light"],
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) { --color-card-chrome: linear-gradient(90deg, #581c87, #9f1239); --color-card-chrome-hover: linear-gradient(90deg, #6b21a8, #be123c); }
html[data-card-chrome="rosewood"][data-theme="dark"]        { --color-card-chrome: linear-gradient(90deg, #2e1065, #4c0519); --color-card-chrome-hover: linear-gradient(90deg, #3b0f6b, #5f0a23); }
html[data-card-chrome="rosewood"]                           { --color-accent: #be185d; }
html[data-card-chrome="rosewood"][data-theme="dark"]        { --color-accent: #f472b6; }

/* Light text for card chrome areas when rosewood is active in light mode */
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) .group-header,
html[data-card-chrome="rosewood"][data-theme="light"] .group-header,
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) .group-footer,
html[data-card-chrome="rosewood"][data-theme="light"] .group-footer,
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) .an-section-header,
html[data-card-chrome="rosewood"][data-theme="light"] .an-section-header,
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) .section-header,
html[data-card-chrome="rosewood"][data-theme="light"] .section-header,
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) .modal-header,
html[data-card-chrome="rosewood"][data-theme="light"] .modal-header {
    --color-text-primary: #fdf4ff;
    --color-text-secondary: rgba(253,244,255,0.82);
    --color-text-tertiary: rgba(253,244,255,0.55);
    --color-border-tertiary: rgba(253,244,255,0.2);
    --color-text-success: #4ade80;
    --color-text-danger: #fecaca;
}

/* Apply card chrome background to Analytics and Settings section headers */
html[data-card-chrome="rosewood"] .an-section-header,
html[data-card-chrome="rosewood"] .section-header { background: var(--color-card-chrome); }

/* Keep the Manage button readable against the rosewood footer */
html[data-card-chrome="rosewood"]:not([data-theme="dark"]) .group-footer button,
html[data-card-chrome="rosewood"][data-theme="light"] .group-footer button {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
    color: #fdf4ff;
}

/* Keep toggle buttons readable against the rosewood section header */
html[data-card-chrome="rosewood"] .section-header .toggle-btn {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #fdf4ff;
}
html[data-card-chrome="rosewood"] .section-header .toggle-btn.active {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.6);
    color: #fdf4ff;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-background-secondary);
}

a { color: #2272BE; }

button {
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 4px 10px;
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    background: var(--color-background-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s;
}

button:hover { background: var(--color-background-secondary); }

/* Separator — change content here to update everywhere */
.sep::before {
    content: "/";
    color: var(--color-text-tertiary);
    opacity: 0.9;
    margin: 0 6px;
    font-weight: 300;
    font-size: 0.85em;
    letter-spacing: 0;
}

/* Skeleton shimmer — global so any page can use .skel-block */
@keyframes skel-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skel-block {
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--color-border-tertiary) 25%,
        var(--color-background-secondary) 50%,
        var(--color-border-tertiary) 75%);
    background-size: 1200px 100%;
    animation: skel-shimmer 1.5s ease-in-out infinite;
}

/* DTE pills — global so Settings preview can use them */
.dte-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.01em;
}

.dte-ok     { background: var(--dte-ok-bg);     color: var(--dte-ok-color); }
.dte-warn   { background: var(--dte-warn-bg);   color: var(--dte-warn-color); }
.dte-urgent { background: var(--dte-urgent-bg); color: var(--dte-urgent-color); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

#blazor-error-ui {
    background: #fefce8;
    border-top: 1px solid #fde68a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1);
    display: none;
    left: 0;
    padding: 0.5rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
    color: #92400e;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Water-ripple loading splash — a droplet with ripples radiating outward. */
.loading-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hv-ripple {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 20vh auto 1.75rem;
}

/* Center droplet, gently pulsing */
.hv-ripple::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent);
    animation: hv-drop 2s ease-in-out infinite;
}

/* Ripple rings expanding and fading, like water */
.hv-ripple span {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--color-accent);
    opacity: 0;
    animation: hv-ripple 2s cubic-bezier(0.15, 0.5, 0.3, 1) infinite;
}

.hv-ripple span:nth-child(2) { animation-delay: 0.66s; }
.hv-ripple span:nth-child(3) { animation-delay: 1.33s; }

@keyframes hv-ripple {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(5.5); opacity: 0; }
}

@keyframes hv-drop {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(0.65); opacity: 0.65; }
}

.loading-progress-text {
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary);
    animation: hv-text-fade 2s ease-in-out infinite;
}

.loading-progress-text::after { content: "Loading"; }

@keyframes hv-text-fade {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-ripple span,
    .hv-ripple::before,
    .loading-progress-text {
        animation-duration: 0.001s;
        animation-iteration-count: 1;
    }
    .hv-ripple span { opacity: 0.4; transform: scale(3); }
}

.brand-accent { color: var(--color-accent); }

/* ── Auth pages ── */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 24px 24px;
    background: var(--color-background-secondary);
}

.auth-card {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.auth-brand { text-align: center; margin-bottom: 32px; }

.auth-logo {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.03em;
}

.auth-tagline {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-top: 5px;
}

.auth-error {
    background: rgba(239, 68, 68, 0.08);
    border: 0.5px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-danger);
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.auth-country-block {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 0.5px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-danger);
    font-size: 13px;
    padding: 10px 14px;
    margin-top: 10px;
}

.auth-country-block i {
    font-size: 18px;
    flex-shrink: 0;
}

.auth-field { margin-bottom: 18px; }

.auth-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 7px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-input {
    width: 100%;
    padding: 10px 13px;
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

select.auth-input:hover { border-color: var(--color-border-secondary); color: var(--color-text-primary); }

select.auth-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

.auth-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

/* Override browser autofill chrome so inputs stay on-theme */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-background-secondary) inset;
    -webkit-text-fill-color: var(--color-text-primary);
    caret-color: var(--color-text-primary);
    transition: background-color 5000s;
}

.auth-validation { display: block; font-size: 11px; color: var(--color-text-danger); margin-top: 4px; }

.auth-btn {
    width: 100%;
    padding: 11px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: opacity 0.15s;
    letter-spacing: 0.01em;
    justify-content: center;
}
.auth-btn:hover { opacity: 0.88; background: var(--color-accent); }
.auth-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: -4px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

.auth-remember input[type="checkbox"] { cursor: pointer; accent-color: var(--color-accent); }

.auth-forgot {
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: none;
}
.auth-forgot:hover { text-decoration: underline; }

.auth-hint {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0 0 20px;
    line-height: 1.5;
}

.auth-success {
    background: rgba(34, 197, 94, 0.08);
    border: 0.5px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-success);
    font-size: 13px;
    padding: 12px 14px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.auth-switch {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 22px;
}
.auth-switch a { color: var(--color-accent); font-weight: 500; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* Password strength indicator */
.pw-strength { display: flex; align-items: center; gap: 8px; margin-top: 7px; margin-left: 1px; margin-right: 1px; }
.pw-strength-bars { display: flex; gap: 4px; flex: 1; }
.pw-bar {
    height: 3px;
    flex: 1;
    border-radius: 2px;
    background: var(--color-border-tertiary);
    transition: background 0.2s;
}
.pw-bar-1 { background: #ef4444; }
.pw-bar-2 { background: #f97316; }
.pw-bar-3 { background: #eab308; }
.pw-bar-4 { background: #22c55e; }
.pw-strength-label {
    font-size: 11px;
    font-weight: 600;
    min-width: 42px;
    text-align: right;
    transition: color 0.2s;
}
.pw-label-1 { color: #ef4444; }
.pw-label-2 { color: #f97316; }
.pw-label-3 { color: #eab308; }
.pw-label-4 { color: #22c55e; }

/* ── Landing page ── */
.landing-shell {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 80px;
}

.landing-hero {
    text-align: center;
    padding: 48px 0 32px;
    animation: hv-fade-up 0.5s ease both;
}

.landing-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.landing-headline {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--color-text-primary);
    margin: 0 0 24px;
}

.landing-sub {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto 28px;
}

.landing-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.landing-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: opacity 0.15s;
}

.landing-btn-primary:hover { opacity: 0.88; color: #fff; }

.landing-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.landing-btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

.landing-divider { margin-bottom: 32px; animation: hv-fade-up 0.5s 0.1s ease both; }

.landing-ticker-strip {
    position: relative;
    overflow: hidden;
    padding: 18px 0;
    border-radius: var(--border-radius-lg);
    /* Frosted glass over the hero, borderless. */
    background: color-mix(in srgb, var(--color-background-primary) 55%, transparent);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    /* The whole strip dissolves into the page at both ends, and the
       items fade in and out with it. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.landing-ticker-track { display: flex; }

.landing-ticker-group {
    display: flex;
    align-items: center;
    gap: 44px;
    padding-right: 44px; /* equals the gap, so the seam between copies matches */
    flex-shrink: 0;
    min-width: 100%;
    animation: ticker-scroll 36s linear infinite;
}

.landing-ticker-strip:hover .landing-ticker-group { animation-play-state: paused; }

.landing-ticker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.landing-ticker-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--badge), color-mix(in srgb, var(--badge) 60%, #000));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--badge) 25%, transparent);
    flex-shrink: 0;
}

/* Logos ship as single-colour (black) SVGs; render them white on the brand circle. */
.landing-ticker-badge img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.landing-ticker-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.landing-ticker-sym      { font-size: 16px; font-weight: 700; color: var(--color-text-primary); letter-spacing: 0.02em; }
.landing-ticker-strategy { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; }

.landing-ticker-pnl {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

.landing-ticker-item.pos .landing-ticker-pnl {
    color: var(--color-text-success);
    background: color-mix(in srgb, var(--color-text-success) 14%, transparent);
}
.landing-ticker-item.neg .landing-ticker-pnl {
    color: var(--color-text-danger);
    background: color-mix(in srgb, var(--color-text-danger) 14%, transparent);
}

.landing-ticker-item.pos .landing-ticker-pnl::before { content: "▲ "; font-size: 9px; }
.landing-ticker-item.neg .landing-ticker-pnl::before { content: "▼ "; font-size: 9px; }

@media (prefers-reduced-motion: reduce) {
    .landing-ticker-group { animation-duration: 120s; }
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    animation: hv-fade-up 0.5s 0.18s ease both;
}

.landing-feature {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 28px 24px;
    transition: border-color 0.15s;
}

.landing-feature:hover { border-color: var(--color-border-secondary); }

.landing-feature-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 20px;
    color: var(--color-accent);
}

.landing-feature { text-align: center; }
.landing-feature-icon-wrap { margin-left: auto; margin-right: auto; }
.landing-feature-title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin: 0 0 8px; }
.landing-feature-desc  { font-size: 13px; color: var(--color-text-secondary); line-height: 1.65; margin: 0; }

/* Landing — secondary feature gallery */
.landing-gallery {
    margin-top: 72px;
    animation: hv-fade-up 0.5s 0.18s ease both;
}

/* Masonry (multi-column) so the mixed portrait/landscape screenshots each show
   in full at their natural proportions instead of being cropped to a fixed frame. */
.gallery-grid {
    column-count: 2;
    column-gap: 16px;
}

.gallery-card {
    break-inside: avoid;
    margin-bottom: 16px;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 16px 16px 20px;
    transition: border-color 0.15s;
}

.gallery-card:hover { border-color: var(--color-border-secondary); }

.gallery-frame {
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--color-background-secondary);
    line-height: 0;
}

.gallery-img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 6px;
}

.gallery-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Landing — pricing */
.landing-pricing {
    margin-top: 72px;
    animation: hv-fade-up 0.5s 0.2s ease both;
}

.landing-section-head { text-align: center; margin-bottom: 32px; }

.landing-section-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 10px;
}

.landing-section-sub {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

.pricing-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 28px 24px;
    transition: border-color 0.15s;
}

.pricing-tier:hover { border-color: var(--color-border-secondary); }

.pricing-tier--featured {
    border: 1px solid var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.pricing-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.pricing-tier-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: 10px;
}

.pricing-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 10px; }

.pricing-amount {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    line-height: 1;
}

.pricing-period { font-size: 13px; color: var(--color-text-tertiary); }

.pricing-price--empty { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: 10px; }

.pricing-tier-desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 18px;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 auto;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.pricing-features i {
    color: var(--color-accent);
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.pricing-cta { justify-content: center; width: 100%; box-sizing: border-box; }

/* Landing — FAQ */
.landing-faq {
    margin-top: 72px;
    animation: hv-fade-up 0.5s 0.21s ease both;
}

.faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    padding: 0 20px;
    transition: border-color 0.15s;
}

.faq-item:hover,
.faq-item[open] { border-color: var(--color-border-secondary); }

/* <summary> — strip the native disclosure triangle and lay the row out flat */
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-chevron {
    font-size: 16px;
    color: var(--color-text-tertiary);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-a {
    padding: 0 0 20px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Landing — closing call to action */
.landing-closing {
    margin-top: 72px;
    padding: 56px 32px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%);
    border: 0.5px solid var(--color-border-tertiary);
    border-radius: var(--border-radius-lg);
    animation: hv-fade-up 0.5s 0.22s ease both;
}

.landing-closing-title {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0 0 12px;
}

.landing-closing-sub {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 460px;
    margin: 0 auto 26px;
}

/* Landing — legal disclaimer (fine print below the closing CTA, tastytrade-style) */
.landing-legal {
    margin-top: 56px;
    text-align: left;
    animation: hv-fade-up 0.5s 0.26s ease both;
}

.landing-legal-text {
    max-width: 100%;
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text-tertiary);
}

.landing-legal-text:last-child {
    margin-bottom: 0;
}

.landing-legal-text a {
    color: var(--color-text-tertiary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.landing-legal-text a:hover {
    color: var(--color-text-secondary);
}

/* Landing — product preview */
.landing-preview {
    margin: 0 -32px 56px;
    padding: 64px 32px;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 70%);
    border-top: 0.5px solid var(--color-border-tertiary);
    border-bottom: 0.5px solid var(--color-border-tertiary);
    display: flex;
    flex-direction: column;
    gap: 72px;
    animation: hv-fade-up 0.5s 0.14s ease both;
}

.preview-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.preview-text {
    text-align: center;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-heading {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin: 0;
}

.preview-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin: 0;
}

.preview-frame {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border-secondary);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 0.5px var(--color-border-tertiary);
}

.preview-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--color-background-secondary);
    border-bottom: 1px solid var(--color-border-tertiary);
}

.preview-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.preview-chrome span:nth-child(1) { background: #ff5f57; }
.preview-chrome span:nth-child(2) { background: #febc2e; }
.preview-chrome span:nth-child(3) { background: #28c840; }

.preview-img {
    width: 100%;
    display: block;
}

/* Click-to-enlarge affordance + lightbox overlay (see js/lightbox.js) */
.preview-img,
.gallery-img { cursor: zoom-in; }

.hv-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    animation: hv-fade-up 0.15s ease both;
}

.hv-lightbox.open { display: flex; }

.hv-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* Some screenshots are captured at lower resolution than the full-width frame,
   so stretching them there enlarges past native size and looks pixelated. Cap
   the frame to near the screenshot's native width so it renders crisp, still
   centered with the same chrome/shadow as the wide blocks. */
.preview-frame--medium  { max-width: 800px; margin: 0 auto; }
.preview-frame--portrait { max-width: 460px; margin: 0 auto; }

@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    50%       { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@keyframes hv-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .landing-hero     { padding: 32px 0 24px; }
    .landing-features { grid-template-columns: 1fr; }
    .landing-ticker-item  { gap: 8px; }
    .landing-ticker-group { gap: 28px; padding-right: 28px; }
    .landing-ticker-sym   { font-size: 14px; }
    /* Stacked tiers need the row gap opened up so the featured badge, which sits
       above the card edge, doesn't collide with the card above it. */
    .pricing-grid     { grid-template-columns: 1fr; gap: 24px; }
    .gallery-grid     { grid-template-columns: 1fr; }
    .landing-closing  { padding: 40px 20px; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL MOBILE: ≤768px — safe areas & touch targets
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Minimum touch-target size for interactive elements */
    button, a, input[type="checkbox"], select {
        min-height: 36px;
    }

    /* Auth page forms: full width on mobile */
    .auth-card {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
}

/* Hover help flyout (a ? icon with a styled definition list), shared across pages.
   Page-specific placement variants (exchange, manual, allocation) live in each
   page's scoped CSS. */
.greeks-help {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.greeks-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: -8px;
    z-index: 200;
    background: var(--color-background-primary);
    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 10px 14px;
    width: 320px;
    pointer-events: none;
}

.greeks-help:hover .greeks-popup {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.greeks-popup-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.greeks-popup-name {
    font-weight: 600;
    color: var(--color-text-primary);
    width: 44px;
    flex-shrink: 0;
}

.greeks-popup-def {
    color: var(--color-text-secondary);
    line-height: 1.4;
}