/* ============================================================
   Treeni Monitor — premium.css (Redesign v3 — "Quiet Operations")
   --------------------------------------------------------------
   Single global stylesheet. Both themes (premium-light, premium-dark)
   are first-class. Every JS-load-bearing class/ID in the v2 codebase
   still resolves here.

   Language: restrained, type-led, generous whitespace. Refined red
   #DC2626 accent reserved for primary CTAs, active nav, POST NOW,
   and focus rings. Everything else is quiet.

   Section map:
     0  Fonts
     1  Tokens (light + dark)
     2  Reset + globals
     3  Scrollbars
     4  Navbar + dropdowns + demo trial bar
     5  Layout primitives (.main, .page-header, .section-title, .card)
     6  Buttons — every variant
     7  Badges, pills, chips
     8  Forms + inputs
     9  Cards (.card-item, .cat-row, .xpro-section, .run-summary-bar,
            .ba-hero, .inbox-hero, .inbox-card, .stat-card, etc.)
    10  Tables
    11  Modals + toasts + bulk action bar
    12  Empty + skeleton + loading
    13  Status indicators (urgency, status, health dots, pulse)
    14  Onboarding tour shell
    15  Page-specific bits (media panel, search-link rows, parties,
            writeup block, sm-widget, etc.)
    16  Pipeline debug
    17  Mobile breakpoints
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. FONTS — Inter (proportional) + JetBrains Mono (numerics/IDs)
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─────────────────────────────────────────────────────────────
   1. TOKENS
   :root holds theme-independent (radius, motion, fonts).
   body.premium-light / body.premium-dark each redefine the
   semantic tokens.
   ───────────────────────────────────────────────────────────── */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* Unified-button intent tokens (load-bearing — referenced by .btn-status etc.) */
    --tb-radius: 7px;
    --tb-pad-y: 7px;
    --tb-pad-x: 13px;
    --tb-font: 12.5px;
    --tb-weight: 600;
    --tb-letter: 0.01em;
    --tb-height: 32px;
}

/* ── LIGHT — warm-neutral, content-first ───────────────────── */
body.premium-light {
    /* Surfaces */
    --bg-base:     #FAFAF7;     /* warm neutral page wash */
    --bg-surface:  #FFFFFF;     /* cards */
    --bg-elevated: #FFFFFF;
    --bg-hover:    #F4F4F0;
    --bg-card:     #FFFFFF;
    --bg-inset:    #F4F4F0;     /* sunken (writeup blocks, code) */
    --bg-tint:     rgba(15,23,42,0.025);

    /* Borders */
    --border-subtle: rgba(15,23,42,0.06);
    --border-medium: rgba(15,23,42,0.10);
    --border-strong: rgba(15,23,42,0.18);

    /* Text */
    --text-primary:   #0F172A;
    --text-secondary: #475569;
    --text-muted:     #64748B;
    --text-faint:     #94A3B8;
    --text-onaccent:  #FFFFFF;

    /* Brand accent — refined red */
    --accent-red:       #DC2626;
    --accent-red-hover: #B91C1C;
    --accent-red-dim:   rgba(220,38,38,0.08);
    --accent-red-glow:  rgba(220,38,38,0.16);
    --accent-red-ring:  rgba(220,38,38,0.28);

    /* Back-compat alias: 30+ refs to --accent-gold in templates/inline styles */
    --accent-gold:       var(--accent-red);
    --accent-gold-hover: var(--accent-red-hover);
    --accent-gold-dim:   var(--accent-red-dim);
    --accent-gold-glow:  var(--accent-red-glow);

    /* Semantic */
    --color-success:    #059669;
    --color-success-bg: rgba(5,150,105,0.10);
    --color-danger:     #DC2626;
    --color-danger-bg:  rgba(220,38,38,0.10);
    --color-warning:    #D97706;
    --color-warning-bg: rgba(217,119,6,0.12);
    --color-info:       #2563EB;
    --color-info-bg:    rgba(37,99,235,0.10);
    --color-purple:     #7C3AED;
    --color-purple-bg:  rgba(124,58,237,0.10);

    /* Urgency — POST NOW red, URGENT amber, MONITOR blue */
    --urg-postnow:    #DC2626;
    --urg-postnow-bg: rgba(220,38,38,0.10);
    --urg-urgent:     #D97706;
    --urg-urgent-bg:  rgba(217,119,6,0.12);
    --urg-monitor:    #3B82F6;
    --urg-monitor-bg: rgba(59,130,246,0.10);

    /* Shadows — soft, low-opacity */
    --shadow-xs:       0 1px 2px rgba(15,23,42,0.05);
    --shadow-sm:       0 1px 3px rgba(15,23,42,0.07);
    --shadow-card:     0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
    --shadow-hover:    0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.05);
    --shadow-elevated: 0 12px 28px rgba(15,23,42,0.10), 0 4px 10px rgba(15,23,42,0.06);
    --shadow-modal:    0 30px 60px rgba(15,23,42,0.20), 0 10px 20px rgba(15,23,42,0.12);

    /* Navbar */
    --nav-bg:        rgba(255,255,255,0.85);
    --nav-blur:      saturate(180%) blur(14px);
    --nav-border:    rgba(15,23,42,0.06);
    --nav-link:      var(--text-secondary);
    --nav-link-hover:var(--text-primary);
    --nav-link-active: var(--text-primary);

    /* Dropdown menu */
    --menu-bg:       #FFFFFF;
    --menu-border:   rgba(15,23,42,0.08);
    --menu-shadow:   0 12px 36px rgba(15,23,42,0.14), 0 4px 10px rgba(15,23,42,0.08);
    --menu-link:     var(--text-secondary);
    --menu-link-hover-bg: var(--bg-hover);
    --menu-link-active-bg: var(--accent-red-dim);
    --menu-link-active-fg: var(--accent-red);
}

/* ── DARK — true neutral, NOT navy-blue ────────────────────── */
body.premium-dark {
    --bg-base:     #0E0E10;
    --bg-surface:  #161618;
    --bg-elevated: #1E1E22;
    --bg-hover:    #25252A;
    --bg-card:     #161618;
    --bg-inset:    #0A0A0C;
    --bg-tint:     rgba(255,255,255,0.03);

    --border-subtle: rgba(255,255,255,0.06);
    --border-medium: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.18);

    --text-primary:   #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted:     #94A3B8;
    --text-faint:     #64748B;
    --text-onaccent:  #FFFFFF;

    --accent-red:       #EF4444;
    --accent-red-hover: #F87171;
    --accent-red-dim:   rgba(239,68,68,0.14);
    --accent-red-glow:  rgba(239,68,68,0.28);
    --accent-red-ring:  rgba(239,68,68,0.40);

    --accent-gold:       var(--accent-red);
    --accent-gold-hover: var(--accent-red-hover);
    --accent-gold-dim:   var(--accent-red-dim);
    --accent-gold-glow:  var(--accent-red-glow);

    --color-success:    #10B981;
    --color-success-bg: rgba(16,185,129,0.14);
    --color-danger:     #EF4444;
    --color-danger-bg:  rgba(239,68,68,0.14);
    --color-warning:    #F59E0B;
    --color-warning-bg: rgba(245,158,11,0.16);
    --color-info:       #60A5FA;
    --color-info-bg:    rgba(96,165,250,0.14);
    --color-purple:     #A78BFA;
    --color-purple-bg:  rgba(167,139,250,0.14);

    --urg-postnow:    #EF4444;
    --urg-postnow-bg: rgba(239,68,68,0.14);
    --urg-urgent:     #F59E0B;
    --urg-urgent-bg:  rgba(245,158,11,0.16);
    --urg-monitor:    #60A5FA;
    --urg-monitor-bg: rgba(96,165,250,0.14);

    --shadow-xs:       0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm:       0 2px 4px rgba(0,0,0,0.4);
    --shadow-card:     0 1px 3px rgba(0,0,0,0.5);
    --shadow-hover:    0 6px 20px rgba(0,0,0,0.55);
    --shadow-elevated: 0 16px 36px rgba(0,0,0,0.6);
    --shadow-modal:    0 30px 60px rgba(0,0,0,0.7), 0 10px 20px rgba(0,0,0,0.5);

    --nav-bg:        rgba(14,14,16,0.78);
    --nav-blur:      saturate(180%) blur(16px);
    --nav-border:    rgba(255,255,255,0.06);
    --nav-link:      var(--text-secondary);
    --nav-link-hover:var(--text-primary);
    --nav-link-active: var(--text-primary);

    --menu-bg:       #1A1A1D;
    --menu-border:   rgba(255,255,255,0.08);
    --menu-shadow:   0 16px 40px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.4);
    --menu-link:     var(--text-secondary);
    --menu-link-hover-bg: rgba(255,255,255,0.05);
    --menu-link-active-bg: var(--accent-red-dim);
    --menu-link-active-fg: var(--accent-red);
}

/* Early-paint guard — wins before <body> class applied (theme.js sets
   data-theme on <html> sync in <head>). */
html[data-theme="light"] body { background: #FAFAF7; color: #0F172A; }
html[data-theme="dark"]  body { background: #0E0E10; color: #F1F5F9; }

/* ─────────────────────────────────────────────────────────────
   2. RESET + GLOBALS
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.premium-light,
body.premium-dark {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv05', 'cv11', 'ss01';
    min-height: 100vh;
    scroll-behavior: smooth;
}

a { color: var(--color-info); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--accent-red); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
p { margin: 0; }

button { font-family: inherit; cursor: pointer; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-red);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

::selection { background: var(--accent-red-glow); color: var(--text-primary); }

.mono, .num, code, pre,
.timestamp, .card-age-stamp,
.session-ip, .session-chip, .ip-chip,
.cl-hash, .entry-hash,
.run-link.mono, .stat-num, .metric-value,
.rs-stat-num, .inbox-hero-num, .ba-hero-num,
.bulk-count-num, .filter-count,
.tb-mono, .duration {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Tabular nums everywhere a count/timestamp/score lives, even if
   the element doesn't get a .mono class. */
.cat-count, .card-meta, .card-detail, .stat-pill,
.tab-count, .badge, .urgency-badge, .status-badge,
.score-pill, .stat-chip, .pipe-cost, .pipe-calls,
.delta, .yield-bar-fill, .progress-text {
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   3. SCROLLBARS — thin, blendy
   ───────────────────────────────────────────────────────────── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
body.premium-light *::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.14); border-radius: 4px; }
body.premium-light *::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.24); }
body.premium-dark  *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }
body.premium-dark  *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
body { scrollbar-width: thin; }

/* ─────────────────────────────────────────────────────────────
   4. NAVBAR + DROPDOWNS + DEMO BAR
   ───────────────────────────────────────────────────────────── */
.navbar {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    height: 56px;
    background: var(--nav-bg);
    -webkit-backdrop-filter: var(--nav-blur);
            backdrop-filter: var(--nav-blur);
    border-bottom: 1px solid var(--nav-border);
}
.navbar-left  { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.navbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.navbar-brand {
    display: inline-flex; align-items: center; gap: 9px;
    text-decoration: none; color: var(--text-primary);
    flex-shrink: 0;
}
.navbar-logo {
    width: 24px; height: 24px; flex-shrink: 0; object-fit: contain;
    border-radius: 5px;
}
.navbar-title {
    font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
}

.navbar-nav { display: flex; align-items: center; gap: 2px; }

.nav-link {
    position: relative;
    display: inline-flex; align-items: center;
    color: var(--nav-link); text-decoration: none;
    font-size: 13.5px; font-weight: 500;
    padding: 8px 12px; border-radius: 6px;
    background: transparent; border: none;
    transition: color var(--dur-fast), background var(--dur-fast);
    font-family: inherit;
    white-space: nowrap;
}
.nav-link:hover { color: var(--nav-link-hover); background: var(--bg-tint); }
.nav-link.active { color: var(--nav-link-active); font-weight: 600; }
.nav-link.active::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px;
    bottom: -10px;
    height: 2px;
    background: var(--accent-red);
    border-radius: 2px 2px 0 0;
}

/* Dropdown trigger buttons (Discover/Workspace/Admin) — same as nav-link */
.nav-admin-dd { position: relative; }
.nav-admin-btn {
    color: var(--nav-link);
    font-size: 13.5px; font-weight: 500;
    padding: 8px 12px;
    background: transparent; border: none;
    border-radius: 6px;
    cursor: pointer; font-family: inherit;
    transition: color var(--dur-fast), background var(--dur-fast);
    white-space: nowrap;
}
.nav-admin-btn:hover { color: var(--nav-link-hover); background: var(--bg-tint); }
.nav-admin-btn.active {
    color: var(--nav-link-active); font-weight: 600;
    background: transparent;
}
.nav-admin-btn.active::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px;
    bottom: -10px;
    height: 2px;
    background: var(--accent-red);
    border-radius: 2px 2px 0 0;
}

/* Dropdown menu */
.nav-admin-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 180px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: var(--radius-md);
    box-shadow: var(--menu-shadow);
    padding: 6px;
    z-index: 400;
    animation: menuFadeIn 160ms var(--ease);
}
.nav-admin-menu.open { display: block; }
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nav-admin-menu a {
    display: block;
    padding: 8px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--menu-link);
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-admin-menu a:hover { background: var(--menu-link-hover-bg); color: var(--text-primary); }
.nav-admin-menu a.active {
    background: var(--menu-link-active-bg);
    color: var(--menu-link-active-fg);
    font-weight: 600;
}

/* Sectioned admin menu */
.nav-admin-menu-sectioned { min-width: 220px; padding: 4px; }
.nav-admin-section { padding: 6px 4px; }
.nav-admin-section + .nav-admin-section { border-top: 1px solid var(--border-subtle); }
.nav-admin-section-label {
    padding: 6px 12px 4px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint);
}
.nav-admin-section a { padding: 7px 12px; }

/* Navbar user dropdown */
.user-dropdown { position: relative; }
.user-dropdown-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.user-dropdown-btn:hover { color: var(--text-primary); border-color: var(--border-medium); background: var(--bg-tint); }
.user-dropdown-menu {
    display: none;
    position: absolute; right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: var(--radius-md);
    box-shadow: var(--menu-shadow);
    padding: 6px;
    z-index: 400;
    animation: menuFadeIn 160ms var(--ease);
}
.user-dropdown-menu.open { display: block; }
.user-dropdown-menu a {
    display: block;
    padding: 8px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--menu-link);
    text-decoration: none;
    border-radius: 6px;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.user-dropdown-menu a:hover { background: var(--menu-link-hover-bg); color: var(--text-primary); }

/* Theme toggle */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    cursor: pointer; font-family: inherit;
    color: var(--text-secondary);
    transition: all var(--dur-fast);
}
.theme-toggle:hover { border-color: var(--border-medium); background: var(--bg-tint); }
.theme-icon { font-size: 14px; line-height: 1; }

/* Help button */
.nav-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    cursor: pointer; font-family: inherit;
    color: var(--text-secondary);
    font-size: 14px; font-weight: 700;
    transition: all var(--dur-fast);
    position: relative;
}
.nav-help-btn:hover { border-color: var(--accent-red); color: var(--accent-red); background: var(--accent-red-dim); }

.nav-help-menu {
    display: none;
    position: absolute; right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: var(--radius-md);
    box-shadow: var(--menu-shadow);
    padding: 6px;
    z-index: 400;
    animation: menuFadeIn 160ms var(--ease);
}
.nav-help-menu.open { display: block; }
.nav-help-menu a,
.nav-help-menu button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--menu-link);
    text-decoration: none;
    border: none; background: transparent;
    border-radius: 6px;
    text-align: left;
    cursor: pointer; font-family: inherit;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-help-menu a:hover,
.nav-help-menu button:hover { background: var(--menu-link-hover-bg); color: var(--text-primary); }
.nav-help-menu span:first-child { font-size: 14px; line-height: 1; }
.nav-help-divider { height: 1px; background: var(--border-subtle); margin: 4px 6px; }

/* Help (?) + workspace ⭐ + inbox-unread mini badges */
.nav-help-badge,
#navBadge, #navStarBadge, #navHelpWhatsnewBadge {
    display: none;
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--accent-red);
    color: #FFF;
    font-size: 10px; font-weight: 700;
    font-family: var(--font-mono);
    line-height: 16px; text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--bg-base);
}
/* Help-menu inline badge variant (shows inline next to item) */
.nav-help-menu #navHelpWhatsnewBadge {
    position: static;
    margin-left: auto;
    box-shadow: none;
}

/* Hamburger */
.hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 18px; line-height: 1;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.hamburger:hover { border-color: var(--border-medium); background: var(--bg-tint); }

/* Demo trial bar — restrained amber strip, no animated gradient */
#demo-trial-bar {
    position: relative;
    z-index: 90;
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap;
    padding: 8px 16px;
    background: linear-gradient(90deg,
        rgba(217,119,6,0.04) 0%,
        rgba(217,119,6,0.12) 50%,
        rgba(217,119,6,0.04) 100%);
    border-bottom: 1px solid rgba(217,119,6,0.22);
    color: var(--color-warning);
    font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.005em;
}
body.premium-dark #demo-trial-bar {
    background: linear-gradient(90deg,
        rgba(245,158,11,0.06) 0%,
        rgba(245,158,11,0.18) 50%,
        rgba(245,158,11,0.06) 100%);
    border-bottom-color: rgba(245,158,11,0.30);
    color: #FBBF24;
}
#demo-trial-bar .dtb-chip { display: inline-flex; align-items: center; gap: 6px; }
#demo-trial-bar .dtb-sep  { opacity: 0.5; }
#demo-trial-bar .dtb-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#demo-trial-bar .dtb-note { font-weight: 400; opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────
   5. LAYOUT PRIMITIVES
   ───────────────────────────────────────────────────────────── */
.main, .page-wrap, .page-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.app-shell { min-height: 100vh; }

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 32px;
}
.page-header-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-red-dim);
    color: var(--accent-red);
    border-radius: var(--radius-md);
    font-size: 18px;
    flex-shrink: 0;
}
.page-title {
    font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.15;
}
.page-subtitle {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.55;
}
.page-sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

.section-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint);
    margin: 32px 0 14px;
    display: flex; align-items: center; gap: 10px;
}
.section-title::after {
    content: ''; flex: 1; height: 1px;
    background: var(--border-subtle);
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 16px; }
.card-title    { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.01em; }
.card-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-muted); font-size: 13px;
    text-decoration: none;
    margin-bottom: 16px;
}
.back-link:hover { color: var(--accent-red); }

/* ─────────────────────────────────────────────────────────────
   6. BUTTONS
   ───────────────────────────────────────────────────────────── */
.btn,
.btn-primary, .btn-secondary, .btn-danger, .btn-amber, .btn-gold, .btn-outline,
.btn-sm, .btn-demo, .btn-logout, .btn-refresh, .btn-export, .btn-reload,
.btn-filter, .btn-modal-cancel, .btn-modal-confirm, .btn-danger-sm {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px; font-weight: 600;
    font-family: inherit;
    line-height: 1;
    border: 1px solid var(--border-medium);
    border-radius: 7px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover, .btn-secondary:hover, .btn-outline:hover, .btn-sm:hover,
.btn-refresh:hover, .btn-reload:hover, .btn-filter:hover, .btn-modal-cancel:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Primary (filled red) */
.btn-primary, .btn-modal-confirm, .login-btn {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--text-onaccent);
    box-shadow: 0 1px 2px rgba(220,38,38,0.18);
}
.btn-primary:hover, .btn-modal-confirm:hover, .login-btn:hover {
    background: var(--accent-red-hover);
    border-color: var(--accent-red-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220,38,38,0.22);
}

/* Danger filled */
.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #FFF;
}
.btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    transform: translateY(-1px);
}
.btn-danger-sm {
    height: 28px; padding: 0 10px; font-size: 11.5px;
    background: var(--color-danger-bg); border-color: transparent; color: var(--color-danger);
}
.btn-danger-sm:hover { background: var(--color-danger); color: #FFF; }

.btn-amber, .btn-gold {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #FFF;
}
.btn-amber:hover, .btn-gold:hover { background: #B45309; border-color: #B45309; transform: translateY(-1px); }

.btn-outline {
    background: transparent;
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; }

/* Composite action buttons (.btn-action with icon + body) — used on
   batch_analysis page header. Ghost-by-default, red fill for primary. */
.btn-action {
    display: inline-flex; align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 9px;
    color: var(--text-primary);
    font-family: inherit; cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    text-align: left; white-space: nowrap;
}
.btn-action:hover { border-color: var(--border-strong); background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-action:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-action-icon { font-size: 15px; line-height: 1; flex-shrink: 0; opacity: 0.85; }
.btn-action-body { display: flex; flex-direction: column; gap: 1px; }
.btn-action-label { font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.btn-action-desc  { font-size: 10.5px; font-weight: 400; opacity: 0.65; line-height: 1.1; }

/* Page-primary action — filled red */
.btn-primary-action {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--text-onaccent);
    box-shadow: 0 1px 2px rgba(220,38,38,0.20);
}
.btn-primary-action:hover:not(:disabled) {
    background: var(--accent-red-hover);
    border-color: var(--accent-red-hover);
    box-shadow: 0 6px 16px rgba(220,38,38,0.28);
}
.btn-primary-action .btn-action-desc { opacity: 0.85; color: rgba(255,255,255,0.85); }

/* Force Fresh — ghost danger */
.btn-danger-action {
    background: var(--bg-surface);
    border-color: rgba(220,38,38,0.30);
    color: var(--color-danger);
}
.btn-danger-action:hover:not(:disabled) {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #FFF;
    box-shadow: 0 6px 16px rgba(220,38,38,0.24);
}
body.premium-dark .btn-danger-action { border-color: rgba(239,68,68,0.36); color: var(--color-danger); }

/* Dry Run — ghost purple */
.btn-indigo-action {
    background: var(--bg-surface);
    border-color: rgba(124,58,237,0.30);
    color: var(--color-purple);
}
.btn-indigo-action:hover:not(:disabled) {
    background: var(--color-purple);
    border-color: var(--color-purple);
    color: #FFF;
    box-shadow: 0 6px 16px rgba(124,58,237,0.28);
}
body.premium-dark .btn-indigo-action { border-color: rgba(167,139,250,0.36); }

.action-group { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.action-divider { width: 1px; height: 32px; background: var(--border-subtle); flex-shrink: 0; }

/* Spinner inside buttons */
.btn-spinner {
    display: inline-block;
    width: 13px; height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--border-medium);
    border-top-color: var(--accent-red);
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
    vertical-align: middle;
}

/* Status pill buttons (Cover / Drop) — segmented look */
.card-status-btns {
    display: inline-flex; align-items: stretch;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--border-medium);
}
.btn-status {
    height: 28px; padding: 0 12px;
    background: var(--bg-surface);
    border: none; color: var(--text-muted);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; font-family: inherit;
    transition: background var(--dur-fast), color var(--dur-fast);
    border-right: 1px solid var(--border-medium);
}
.btn-status:last-child { border-right: none; }
.btn-status:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-status.covered-btn:hover { background: var(--color-success); color: #FFF; }
.btn-status.ignored-btn:hover { background: var(--color-danger); color: #FFF; }

/* Assign button */
.btn-assign {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: var(--color-purple-bg);
    color: var(--color-purple);
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-assign:hover { background: var(--color-purple); color: #FFF; }
.btn-assign.has-assignees {
    background: var(--color-success-bg) !important;
    color: var(--color-success) !important;
    border-color: rgba(5,150,105,0.20) !important;
}
.btn-assign.has-assignees:hover { background: var(--color-success) !important; color: #FFF !important; }

/* Reassign / history / more / star */
.btn-reassign {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: var(--color-purple-bg); color: var(--color-purple);
    border: 1px solid transparent; border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-reassign:hover { background: var(--color-purple); color: #FFF; }

.btn-history {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 10px;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-subtle); border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    margin-left: auto;
}
.btn-history:hover { color: var(--text-primary); border-color: var(--border-medium); background: var(--bg-tint); }

.btn-more {
    position: absolute !important;
    top: 10px; right: 12px;
    display: inline-flex; align-items: center; gap: 4px;
    height: 26px; padding: 0 9px;
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border-subtle); border-radius: 6px;
    font-size: 11px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    z-index: 2;
}
.btn-more:hover { color: var(--text-primary); border-color: var(--border-medium); background: var(--bg-tint); }
.btn-more .more-arrow { display: inline-block; transition: transform var(--dur-base) var(--ease); font-size: 9px; }
.card-item.expanded .btn-more .more-arrow { transform: rotate(180deg); }

.btn-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 7px;
    color: var(--text-muted); font-size: 14px; line-height: 1;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-star:hover { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-bg); }
.btn-star.starred { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-bg); }

/* Open article (blue) */
.btn-open, .btn-open-article, .btn-open-tweet {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: var(--color-info);
    color: #FFF !important;
    border: 1px solid var(--color-info);
    border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    text-decoration: none !important;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.btn-open:hover, .btn-open-article:hover, .btn-open-tweet:hover {
    background: #1D4ED8; border-color: #1D4ED8;
    transform: translateY(-1px); box-shadow: 0 4px 10px rgba(37,99,235,0.24);
}
.btn-open-article .open-arrow { font-size: 11px; transition: transform var(--dur-fast); }
.btn-open-article:hover .open-arrow { transform: translate(1px, -1px); }

/* Copy write-up button (sits in dark write-up block, so light text) */
.btn-copy-wu, .btn-copy-wu-inbox {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 10px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    font-size: 10.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-copy-wu:hover, .btn-copy-wu-inbox:hover { background: rgba(255,255,255,0.12); color: #FFF; }
.btn-copy-wu.copied, .btn-copy-wu-inbox.copied {
    background: var(--color-success); color: #FFF; border-color: var(--color-success);
}

/* Write-up tweet button */
.btn-write-tweet {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: var(--text-primary); color: var(--bg-base);
    border: 1px solid var(--text-primary); border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-write-tweet:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-write-tweet.loading { opacity: 0.55; cursor: wait; }

/* Find media */
.btn-find-media {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: transparent; color: var(--accent-red);
    border: 1px solid var(--accent-red); border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-find-media:hover { background: var(--accent-red); color: #FFF; }
.btn-find-media.loading { opacity: 0.6; cursor: wait; }

/* Copy all / Copy selected */
.btn-copy-all, .btn-copy, .btn-copy-card {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 16px;
    background: var(--color-success); color: #FFF;
    border: 1px solid var(--color-success); border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    flex: 1; min-width: 140px;
}
.btn-copy-all:hover { background: #047857; border-color: #047857; transform: translateY(-1px); }

/* Refresh / export / cancel / disable / restore */
.btn-refresh, .btn-export, .btn-reload, .btn-filter, .btn-restore {
    background: var(--bg-surface); color: var(--text-primary);
    border: 1px solid var(--border-medium);
}
.btn-restore {
    color: var(--color-purple); border-color: rgba(124,58,237,0.30);
    background: var(--color-purple-bg);
}
.btn-restore:hover { background: var(--color-purple); color: #FFF; border-color: var(--color-purple); }

.btn-cancel, .btn-modal-cancel, .btn-assign-cancel, .btn-confirm-ignore {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    height: 36px; padding: 0 14px;
    border-radius: 7px;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--dur-fast);
}
.btn-cancel:hover, .btn-modal-cancel:hover, .btn-assign-cancel:hover {
    background: var(--bg-hover); border-color: var(--border-strong);
}
.btn-confirm-ignore {
    background: var(--color-danger); color: #FFF; border-color: var(--color-danger);
}
.btn-confirm-ignore:hover { background: #B91C1C; border-color: #B91C1C; }

.btn-assign-confirm {
    background: var(--color-purple); color: #FFF; border: 1px solid var(--color-purple);
    font-size: 13px; font-weight: 600;
    height: 36px; padding: 0 18px; border-radius: 7px;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-assign-confirm:hover { background: #6D28D9; border-color: #6D28D9; transform: translateY(-1px); }

/* Inbox action button (segmented row) */
.btn-act {
    display: inline-flex; align-items: center; gap: 5px;
    height: 30px; padding: 0 12px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: 7px;
    font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.btn-act:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.btn-act.btn-inprogress { color: var(--color-warning); border-color: rgba(217,119,6,0.25); }
.btn-act.btn-inprogress:hover { background: var(--color-warning); color: #FFF; border-color: var(--color-warning); }
.btn-act.btn-done       { color: var(--color-success); border-color: rgba(5,150,105,0.25); }
.btn-act.btn-done:hover { background: var(--color-success); color: #FFF; border-color: var(--color-success); }
.btn-act.btn-ignore     { color: var(--color-danger); border-color: rgba(220,38,38,0.25); }
.btn-act.btn-ignore:hover { background: var(--color-danger); color: #FFF; border-color: var(--color-danger); }
.btn-act.btn-reopen     { color: var(--color-info); border-color: rgba(37,99,235,0.25); }
.btn-act.btn-reopen:hover { background: var(--color-info); color: #FFF; border-color: var(--color-info); }
.btn-act.btn-copy-card  { color: var(--text-secondary); }

/* Bulk action bar buttons (white-on-dark) */
.bulk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.06);
    color: #FFF;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.bulk-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.bulk-btn:active { transform: translateY(1px); }
.bulk-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.bulk-btn.assign   { background: var(--color-purple);  border-color: var(--color-purple); }
.bulk-btn.assign:hover { background: #6D28D9; border-color: #6D28D9; }
.bulk-btn.reassign { background: var(--color-purple);  border-color: var(--color-purple); }
.bulk-btn.covered  { background: var(--color-success); border-color: var(--color-success); }
.bulk-btn.covered:hover { background: #047857; border-color: #047857; }
.bulk-btn.drop     { background: var(--color-danger);  border-color: var(--color-danger); }
.bulk-btn.drop:hover { background: #B91C1C; border-color: #B91C1C; }
.bulk-btn.copy     { background: var(--color-info); border-color: var(--color-info); }
.bulk-btn.copy:hover { background: #1D4ED8; border-color: #1D4ED8; }
.bulk-btn.inprog   { background: var(--color-warning); border-color: var(--color-warning); }
.bulk-btn.done     { background: var(--color-success); border-color: var(--color-success); }
.bulk-btn.ghost    { background: transparent; border-color: rgba(255,255,255,0.12); }
.bulk-btn .bulk-ico { font-size: 13px; line-height: 1; }

/* Social platform buttons (search-link-row) */
.btn-search-link {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 5px;
    font-size: 11px; font-weight: 600;
    text-decoration: none;
    transition: all var(--dur-fast);
    border: 1px solid transparent;
}
.btn-search-link:hover { transform: translateY(-1px); }
.btn-fb { background: rgba(24,119,242,0.12); color: #1877F2; border-color: rgba(24,119,242,0.25); }
.btn-fb:hover { background: #1877F2; color: #FFF; }
.btn-ig { background: rgba(228,64,95,0.12); color: #E4405F; border-color: rgba(228,64,95,0.25); }
.btn-ig:hover { background: #E4405F; color: #FFF; }
.btn-yt { background: rgba(255,0,0,0.10); color: #FF0000; border-color: rgba(255,0,0,0.22); }
.btn-yt:hover { background: #FF0000; color: #FFF; }
.btn-x  { background: rgba(15,23,42,0.08); color: var(--text-primary); border-color: var(--border-medium); }
.btn-x:hover { background: var(--text-primary); color: var(--bg-base); }
.btn-tg { background: rgba(0,136,204,0.12); color: #0088CC; border-color: rgba(0,136,204,0.25); }
.btn-tg:hover { background: #0088CC; color: #FFF; }

/* Cat copy / urgency-filter pills */
.cat-copy-btn, .urgency-filter-btn, .filter-btn, .tab-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 13px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.cat-copy-btn:hover, .urgency-filter-btn:hover, .filter-btn:hover, .tab-btn:hover {
    background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong);
}

.urgency-filter-btn.filter-active,
.filter-btn.active,
.tab-btn.active {
    background: var(--text-primary); color: var(--bg-base);
    border-color: var(--text-primary);
}
.urgency-filter-btn.filter-active .filter-count {
    background: rgba(255,255,255,0.18); color: #FFF;
}
/* NEW filter — emerald accent */
.urgency-filter-btn.filter-new {
    background: var(--color-success-bg); color: var(--color-success);
    border-color: rgba(5,150,105,0.30);
}
.urgency-filter-btn.filter-new:hover { background: rgba(5,150,105,0.18); }
.urgency-filter-btn.filter-new.filter-active {
    background: var(--color-success); color: #FFF; border-color: var(--color-success);
}
.urgency-filter-btn.filter-new.filter-active .filter-count { background: rgba(255,255,255,0.22); color: #FFF; }

.filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 11px; font-weight: 700;
    border-radius: var(--radius-pill);
    margin-left: 2px;
    font-family: var(--font-mono);
}

/* SM widget search btn */
.sm-search-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-red); color: #FFF;
    border: none; padding: 10px 22px;
    border-radius: 8px;
    font-size: 13.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.sm-search-btn:hover { background: var(--accent-red-hover); transform: translateY(-1px); }
.sm-btn-mini {
    background: var(--bg-surface); color: var(--text-secondary);
    border: 1px solid var(--border-medium); border-radius: 6px;
    font-size: 11.5px; padding: 4px 10px; cursor: pointer;
    font-family: inherit; transition: all var(--dur-fast);
}
.sm-btn-mini:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Empty-state CTA */
.tb-empty-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    background: var(--accent-red); color: #FFF;
    border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.tb-empty-cta:hover { background: var(--accent-red-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220,38,38,0.22); }

/* ─────────────────────────────────────────────────────────────
   7. BADGES + PILLS + CHIPS
   ───────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--radius-xs);
    line-height: 1.6;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}

/* Urgency badges (POST NOW / URGENT / MONITOR) */
.urgency-badge, .badge-urgency-post, .badge-urgency-urgent, .badge-urgency-monitor,
.badge-post-now, .badge-urgent, .badge-monitor,
.tweet-urgency, .urg-badge, .urgency-pill, .stat-pill, .pill-postnow, .pill-urgent, .pill-monitor,
.ub-post-now, .ub-urgent, .ub-monitor, .up-post-now, .up-urgent, .up-monitor {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: var(--radius-xs);
    font-family: var(--font-sans);
}

.urgency-badge.post-now, .badge-urgency-post, .badge-post-now,
.tweet-urgency.post-now, .urg-badge.post-now, .urgency-pill.up-post-now,
.ub-post-now, .up-post-now, .pill-postnow, .stat-pill.pill-postnow {
    background: var(--urg-postnow-bg);
    color: var(--urg-postnow);
    box-shadow: inset 0 0 0 1px rgba(220,38,38,0.20);
}
.urgency-badge.urgent, .badge-urgency-urgent, .badge-urgent,
.tweet-urgency.urgent, .urg-badge.urgent, .urgency-pill.up-urgent,
.ub-urgent, .up-urgent, .pill-urgent, .stat-pill.pill-urgent {
    background: var(--urg-urgent-bg);
    color: var(--urg-urgent);
    box-shadow: inset 0 0 0 1px rgba(217,119,6,0.20);
}
.urgency-badge.monitor, .badge-urgency-monitor, .badge-monitor,
.tweet-urgency.monitor, .urg-badge.monitor, .urgency-pill.up-monitor,
.ub-monitor, .up-monitor, .pill-monitor, .stat-pill.pill-monitor {
    background: var(--urg-monitor-bg);
    color: var(--urg-monitor);
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.20);
}
.badge-urgency-skip, .badge-skipped {
    background: var(--bg-hover); color: var(--text-muted);
}

/* Semantic badge variants */
.badge-info, .badge-page, .badge-feature, .badge-login {
    background: var(--color-info-bg); color: var(--color-info);
}
.badge-warning, .badge-warn, .badge-time {
    background: var(--color-warning-bg); color: var(--color-warning);
}
.badge-error, .badge-err, .badge-dead {
    background: var(--color-danger-bg); color: var(--color-danger);
}
.badge-ok, .badge-active, .badge-complete, .badge-kept, .badge-matched, .badge-covered {
    background: var(--color-success-bg); color: var(--color-success);
}
.badge-default, .badge-disabled, .badge-unknown, .badge-other, .badge-merged {
    background: var(--bg-hover); color: var(--text-muted);
}
.badge-internal { background: var(--text-primary); color: var(--bg-base); }
.badge-subscribed { background: var(--color-success); color: #FFF; }
.badge-demo, .badge-demo-exp {
    background: var(--color-warning-bg); color: var(--color-warning);
    box-shadow: inset 0 0 0 1px rgba(217,119,6,0.20);
}
.badge-admin   { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-analyst { background: var(--color-info-bg); color: var(--color-info); }
.badge-user    { background: var(--color-purple-bg); color: var(--color-purple); }
.badge-viewer  { background: var(--bg-hover); color: var(--text-muted); }
.badge-system  { background: var(--bg-hover); color: var(--text-muted); }
.badge-scheduler { background: var(--color-info-bg); color: var(--color-info); }
.badge-name, .badge-analysis { background: var(--color-purple-bg); color: var(--color-purple); }
.badge-serper  { background: var(--bg-hover); color: var(--text-secondary); }
.badge-grok, .badge-gemini, .badge-model, .badge-engine {
    background: var(--color-purple-bg); color: var(--color-purple);
}
.badge-tier1 { background: var(--color-info-bg); color: var(--color-info); }
.badge-tier3 { background: var(--bg-hover); color: var(--text-muted); }
.badge-flagged { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-unique { background: var(--color-info-bg); color: var(--color-info); }
.badge-missing { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-created { background: var(--color-success-bg); color: var(--color-success); }
.badge-updated { background: var(--color-info-bg); color: var(--color-info); }
.badge-password { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-rss   { background: var(--color-success-bg); color: var(--color-success); }
.badge-gdelt { background: var(--color-info-bg); color: var(--color-info); }
.badge-dropped, .badge-skipped { background: var(--bg-hover); color: var(--text-muted); }
.badge-sev-HIGH   { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-sev-MEDIUM { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-sev-LOW    { background: var(--color-info-bg); color: var(--color-info); }
.badge-coverage-new, .badge-coverage-in_pool {
    background: var(--color-info-bg); color: var(--color-info);
}
.badge-coverage-produced { background: var(--color-purple-bg); color: var(--color-purple); }
.badge-coverage-covered  { background: var(--color-success-bg); color: var(--color-success); }

/* Source badges (RSS/GDELT/Serper) */
.src-badge {
    font-size: 9.5px; font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px; letter-spacing: 0.04em;
    flex-shrink: 0; text-transform: uppercase;
    font-family: var(--font-mono);
}
.src-badge-rss   { background: var(--color-success-bg); color: var(--color-success); }
.src-badge-gdelt { background: var(--color-info-bg); color: var(--color-info); }
.src-badge-serper { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-medium); }

/* NEW shimmer badge (cards <2h old) — emerald gradient, restrained */
.card-new-badge, .badge-new-count {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 7px;
    background: var(--color-success);
    color: #FFF;
    border-radius: 4px;
    font-family: var(--font-sans);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 1px 2px rgba(5,150,105,0.30);
    position: relative; overflow: hidden;
}
.card-new-badge::before, .badge-new-count::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.30) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: newShimmer 4s ease-in-out infinite;
}
@keyframes newShimmer {
    0%, 55%  { transform: translateX(-120%); }
    85%, 100% { transform: translateX(120%); }
}

/* Glass age stamp */
.card-age-stamp {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tint);
    padding: 2px 8px; border-radius: 10px;
    border: 1px solid var(--border-subtle);
    cursor: help;
    transition: background var(--dur-fast), color var(--dur-fast);
    font-family: var(--font-mono);
}
.card-age-stamp::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--text-faint);
}
.card-age-stamp:hover { background: var(--bg-hover); color: var(--text-secondary); }

/* Status pills (inbox sent state) */
.status-badge, .status-pill, .sb-new, .sb-in_progress, .sb-done, .sb-ignored, .sb-forwarded,
.sp-new, .sp-in_progress, .sp-done, .sp-ignored {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    border-radius: var(--radius-xs);
}
.status-badge.badge-ok, .status-badge.sb-done, .sp-done {
    background: var(--color-success-bg); color: var(--color-success);
}
.status-badge.badge-warn, .status-badge.sb-in_progress, .sp-in_progress {
    background: var(--color-warning-bg); color: var(--color-warning);
}
.status-badge.badge-err, .sp-ignored, .sb-ignored {
    background: var(--bg-hover); color: var(--text-muted);
}
.sb-new, .sp-new { background: var(--color-danger-bg); color: var(--color-danger); }
.sb-forwarded { background: var(--color-purple-bg); color: var(--color-purple); }

/* Chips (TweetDeck) */
.chip {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: 11px; font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--bg-hover); color: var(--text-secondary);
}
.chip.city   { background: var(--color-info-bg); color: var(--color-info); }
.chip.cat    { background: var(--color-purple-bg); color: var(--color-purple); }
.chip.reach  { background: var(--bg-hover); color: var(--text-secondary); }
.chip.score-high { background: var(--color-danger-bg); color: var(--color-danger); }
.chip.score-mid  { background: var(--color-warning-bg); color: var(--color-warning); }
.chip.score-low  { background: var(--bg-hover); color: var(--text-muted); }

/* Phase pills (pipeline) */
.phase-pill, .action-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: 11px; font-weight: 600;
    border-radius: var(--radius-xs);
    letter-spacing: 0.03em; text-transform: uppercase;
    font-family: var(--font-sans);
}
.phase-pill.phase-sources, .chip-sources  { background: var(--color-info-bg); color: var(--color-info); }
.phase-pill.phase-input, .chip-input      { background: var(--color-purple-bg); color: var(--color-purple); }
.phase-pill.phase-triage, .chip-triage    { background: var(--color-warning-bg); color: var(--color-warning); }
.phase-pill.phase-analysis, .chip-analysis{ background: var(--color-success-bg); color: var(--color-success); }
.phase-pill.phase-dedup, .chip-dedup      { background: var(--bg-hover); color: var(--text-muted); }
.phase-scorer { background: var(--color-purple-bg); color: var(--color-purple); padding: 1px 6px; border-radius: 3px; font-size: 9.5px; }
.action-pill.action-kept    { background: var(--color-success-bg); color: var(--color-success); }
.action-pill.action-skipped { background: var(--bg-hover); color: var(--text-muted); }
.action-pill.action-merged  { background: var(--color-info-bg); color: var(--color-info); }
.action-pill.action-error   { background: var(--color-danger-bg); color: var(--color-danger); }
.action-pill.action-counted { background: var(--color-purple-bg); color: var(--color-purple); }
.action-pill.action-fetched { background: var(--color-info-bg); color: var(--color-info); }

/* Score pill */
.score-pill {
    display: inline-flex; padding: 1px 7px; border-radius: var(--radius-xs);
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; font-family: var(--font-mono);
}
.score-pill.high { background: var(--color-warning-bg); color: var(--color-warning); }
.score-pill.crit { background: var(--color-danger-bg); color: var(--color-danger); }

/* Rule tags (dedup) */
.rule-tag, .rule-a, .rule-b, .rule-c {
    display: inline-flex; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 700;
    background: var(--bg-hover); color: var(--text-muted);
    font-family: var(--font-mono);
}
.rule-a { background: var(--color-info-bg); color: var(--color-info); }
.rule-b { background: var(--color-purple-bg); color: var(--color-purple); }
.rule-c { background: var(--color-warning-bg); color: var(--color-warning); }

/* Heatmap czy cells */
.czy-cell, .heatmap-cell {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 8px; border-radius: var(--radius-xs);
    font-size: 11px; font-weight: 700;
    font-family: var(--font-mono);
}
.czy-hot,    .hm-hot    { background: rgba(220,38,38,0.18); color: var(--color-danger); }
.czy-warm,   .hm-warm   { background: rgba(217,119,6,0.18); color: var(--color-warning); }
.czy-cool,   .hm-cool   { background: rgba(59,130,246,0.16); color: var(--color-info); }
.czy-cold,   .hm-cold   { background: rgba(100,116,139,0.16); color: var(--text-muted); }
.czy-arctic, .hm-arctic { background: var(--bg-hover); color: var(--text-faint); }

/* Lang/claude/sandbox/forwarded chips */
.lang-badge, .claude-badge, .sandbox-pill, .forwarded-chip {
    display: inline-flex; padding: 2px 8px;
    font-size: 11px; font-weight: 600;
    border-radius: var(--radius-pill);
    background: var(--bg-hover); color: var(--text-secondary);
}
.claude-badge { background: var(--color-purple-bg); color: var(--color-purple); }
.forwarded-chip { background: var(--color-purple-bg); color: var(--color-purple); }

/* Tweet deck/lang tags */
.tweet-deck-tag, .tweet-lang-tag {
    background: var(--bg-hover); color: var(--text-muted);
    font-size: 10.5px; padding: 1px 6px; border-radius: 3px;
    font-family: var(--font-mono);
}

/* xpro-x-badge — black X tag */
.xpro-x-badge {
    background: var(--text-primary); color: var(--bg-base);
    font-size: 10px; font-weight: 800;
    padding: 2px 7px; border-radius: 3px;
    letter-spacing: 0.02em;
}

/* Dots & online status */
.dot-ok, .dot-err, .dot-gray, .health-dot, .online-dot, .offline-dot, .pd-live-dot, .badge-dot,
.sent-status-dot, .ssd-new, .ssd-in_progress, .ssd-done, .ssd-ignored {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
}
.dot-ok, .health-dot.green, .online-dot, .pill-complete { background: var(--color-success); box-shadow: 0 0 0 3px rgba(5,150,105,0.18); }
.dot-err, .health-dot.red,  .pill-error    { background: var(--color-danger); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.health-dot.yellow, .pill-pending { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.dot-gray, .offline-dot, .badge-dot { background: var(--text-faint); }
.pd-live-dot { background: var(--color-danger); animation: livePulse 1.5s ease-in-out infinite; }
.ssd-new       { background: var(--color-danger); }
.ssd-in_progress { background: var(--color-warning); }
.ssd-done      { background: var(--color-success); }
.ssd-ignored   { background: var(--text-faint); }
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55); }
    70%      { box-shadow: 0 0 0 7px rgba(220,38,38,0); }
}

/* Pulse rings (utility) */
.pulse-danger { animation: pulse-ring-danger 1.4s infinite; }
.pulse-warn   { animation: pulse-ring-warn 1.6s infinite; }
@keyframes pulse-ring-danger {
    0%   { box-shadow: 0 0 0 0   rgba(220,38,38,0.40); }
    70%  { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0   rgba(220,38,38,0); }
}
@keyframes pulse-ring-warn {
    0%   { box-shadow: 0 0 0 0   rgba(217,119,6,0.35); }
    70%  { box-shadow: 0 0 0 7px rgba(217,119,6,0); }
    100% { box-shadow: 0 0 0 0   rgba(217,119,6,0); }
}

/* Avatar circles */
.av-circle, .av-circle-mini, .assign-av {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #FFF;
    font-weight: 700; font-family: var(--font-sans);
    flex-shrink: 0; letter-spacing: -0.02em;
}
.av-circle      { width: 24px; height: 24px; font-size: 10.5px; }
.av-circle-mini { width: 18px; height: 18px; font-size: 9px; }
.assign-av      { width: 28px; height: 28px; font-size: 11px; }

/* Assignee mini chip */
.assignee-mini-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--color-success-bg);
    border: 1px solid rgba(5,150,105,0.20);
    border-radius: var(--radius-pill);
    padding: 2px 8px 2px 3px;
}
.assignee-mini-name { font-size: 11px; font-weight: 600; color: var(--color-success); }
.assignee-mini-status {
    font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ams-new         { background: var(--color-danger-bg); color: var(--color-danger); }
.ams-in_progress { background: var(--color-warning-bg); color: var(--color-warning); }
.ams-done        { background: var(--color-success-bg); color: var(--color-success); }
.ams-ignored     { background: var(--bg-hover); color: var(--text-muted); }
.card-assignees, .assignee-chip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* ─────────────────────────────────────────────────────────────
   8. FORMS + INPUTS
   ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form-row-single { display: block; }
@media (max-width: 720px) { .form-row-3 { grid-template-columns: 1fr; } }

.form-label, .sm-sublabel {
    display: block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.form-input, .form-select, .form-control, .sm-input,
input[type="text"]:not([class]):not([id*="treeni"]),
input[type="email"]:not([class]):not([id*="treeni"]),
input[type="password"]:not([class]):not([id*="treeni"]),
input[type="number"]:not([class]):not([id*="treeni"]),
textarea:not([class]):not([id*="treeni"]),
select:not([class]):not([id*="treeni"]) {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.form-input:focus, .form-select:focus, .form-control:focus, .sm-input:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-glow);
}
.form-input::placeholder, .sm-input::placeholder { color: var(--text-faint); }

.sm-platform-row, .sm-time-row {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.sm-check-label, .sm-radio-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-secondary);
    cursor: pointer; user-select: none;
}
.sm-check-label input[type="checkbox"],
.sm-radio-label input[type="radio"] {
    accent-color: var(--accent-red);
    width: 15px; height: 15px;
    cursor: pointer;
}
.sm-mini-btns { display: inline-flex; gap: 6px; margin-left: 4px; }
.sm-error {
    color: var(--color-danger);
    font-size: 12px;
    margin-bottom: 10px;
    display: none;
}

/* Card-level checkboxes */
.batch-card-cb, .inbox-select-cb, .assign-cb, .card-checkbox, .wn-visible-cb {
    width: 18px !important; height: 18px !important;
    margin: 0 !important;
    accent-color: var(--color-purple);
    cursor: pointer;
    flex-shrink: 0;
}
@media (hover: none) and (pointer: coarse) {
    .batch-card-cb, .inbox-select-cb { width: 22px !important; height: 22px !important; }
}

/* Strength meter (change-password) */
.strength-meter {
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}
.strength-bar { height: 100%; width: 0%; transition: width var(--dur-base), background-color var(--dur-base); }
.strength-label { font-size: 11px; font-weight: 600; margin-top: 6px; }

/* ─────────────────────────────────────────────────────────────
   9. CARDS — every variant
   ───────────────────────────────────────────────────────────── */

/* Result-card (Raw Data) */
.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.result-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.result-card.post-now { border-left-color: var(--urg-postnow); }
.result-card.urgent   { border-left-color: var(--urg-urgent); }
.result-card.monitor  { border-left-color: var(--urg-monitor); }

/* Cat-row accordion */
.cat-row {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.cat-row + .cat-row { margin-top: 8px; }
.cat-row-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    cursor: pointer; user-select: none;
    transition: background var(--dur-fast);
}
.cat-row-header:hover { background: var(--bg-tint); }
.cat-arrow {
    display: inline-block;
    font-size: 10px; color: var(--text-muted);
    transition: transform var(--dur-base) var(--ease);
    flex-shrink: 0;
}
.cat-row.open .cat-arrow,
.cat-cards[data-rendered="1"] ~ .cat-arrow { transform: rotate(90deg); }
.cat-name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.cat-count { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.cat-badges { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cat-row.loading .cat-name { color: var(--text-faint); }
.cat-cards {
    display: none;
    border-top: 1px solid var(--border-subtle);
    padding: 14px 16px;
    background: var(--bg-base);
}

/* Card-item — the workhorse */
.card-item {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.card-item:hover { box-shadow: var(--shadow-sm); }
.card-item.post-now { border-left-color: var(--urg-postnow); border-left-width: 3px; box-shadow: var(--shadow-xs), inset 1px 0 0 rgba(220,38,38,0.06); }
.card-item.urgent   { border-left-color: var(--urg-urgent);  box-shadow: var(--shadow-xs), inset 1px 0 0 rgba(217,119,6,0.06); }
.card-item.monitor  { border-left-color: var(--urg-monitor); box-shadow: var(--shadow-xs), inset 1px 0 0 rgba(59,130,246,0.06); }
.card-item.covered  { opacity: 0.7; border-left-color: var(--color-success); }
.card-item.ignored  { opacity: 0.55; border-left-color: var(--text-faint); }

/* Reserve right space so floating btn-more doesn't collide */
.card-item .card-meta,
.card-item .card-headline,
.card-item .card-compact-meta { padding-right: 84px; }

.card-meta {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.card-meta-line { font-size: 11px; color: var(--text-muted); }

.card-headline {
    font-size: 14.5px; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}
.card-item:not(.expanded) .card-headline {
    font-size: 13.5px;
    cursor: pointer;
    transition: color var(--dur-fast);
}
.card-item:not(.expanded) .card-headline:hover { color: var(--color-info); }
.card-summary {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 8px;
}
.card-detail, .card-detail-row, .c-detail-row {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12px; color: var(--text-muted);
    margin-bottom: 6px;
}
.card-cat, .card-urgency, .card-severity { font-size: 11px; font-weight: 600; }
.card-severity { color: var(--text-muted); }
.category-text, .severity-text { font-size: 11px; color: var(--text-muted); }
.category-chip {
    display: inline-flex; padding: 2px 8px;
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 10.5px; font-weight: 600;
    border-radius: var(--radius-pill);
}

.card-source-link, .source-link, .article-link {
    color: var(--color-info); font-size: 12px;
    text-decoration: none;
    margin-right: 8px;
}
.card-source-link:hover, .source-link:hover, .article-link:hover { text-decoration: underline; }
.card-received { font-size: 11px; color: var(--text-muted); }
.card-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }

/* Compact-meta line (collapsed cards) */
.card-compact-meta {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap;
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 2px 0 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.card-compact-meta .ccm-acc { color: var(--color-danger); font-weight: 600; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-compact-meta .ccm-vic { color: var(--color-info);   font-weight: 600; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-compact-meta .ccm-loc { color: var(--text-muted); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-compact-meta .ccm-arrow { color: var(--text-faint); flex-shrink: 0; }
.card-compact-meta .ccm-dot   { color: var(--border-medium); flex-shrink: 0; }
.card-item.expanded .card-compact-meta { display: none; }

/* Write-up block (dark inset) */
.card-writeup, .inbox-writeup {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: 8px;
    padding: 12px 14px 10px;
    margin: 10px 0 8px;
    border-left: 3px solid var(--color-purple);
}
body.premium-dark .card-writeup,
body.premium-dark .inbox-writeup {
    background: #0A0A0C;
    border-left-color: var(--color-purple);
}
.card-writeup-label, .inbox-writeup-label {
    font-size: 9.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--color-purple);
    margin-bottom: 8px;
}
.card-writeup-text, .inbox-writeup-text {
    font-size: 13px; line-height: 1.55;
    color: #E2E8F0;
    white-space: pre-wrap; word-break: break-word;
}
.card-writeup-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.card-writeup-chars, .inbox-writeup-chars {
    font-size: 10.5px; font-family: var(--font-mono);
    color: #94A3B8;
}
.card-writeup-chars.ok, .inbox-writeup-chars.ok { color: #6EE7B7; }
.card-writeup-chars.warn, .inbox-writeup-chars.warn { color: #FCD34D; font-weight: 700; }

/* Parties grid (accused / victim) */
.c-parties, .inbox-parties, .card-parties {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 10px 0 6px;
}
.c-party, .inbox-party {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-medium);
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 12px;
}
.c-party.accused, .c-party-accused, .inbox-party.accused-party {
    border-left-color: var(--color-danger);
}
.c-party.victim, .c-party-victim, .inbox-party.victim-party {
    border-left-color: var(--color-info);
}
.c-party-label, .inbox-party-label {
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: 3px;
}
.c-party.accused .c-party-label, .inbox-party.accused-party .inbox-party-label { color: var(--color-danger); }
.c-party.victim  .c-party-label, .inbox-party.victim-party  .inbox-party-label { color: var(--color-info); }
.c-party-name, .inbox-party-name { color: var(--text-primary); font-weight: 600; font-size: 13px; }
.c-party-comm, .inbox-party-comm { color: var(--text-muted); font-size: 11px; }
.victim-researched { color: var(--color-purple); font-size: 10.5px; font-style: italic; margin-top: 4px; display: inline-block; }
.accused-source-note { color: var(--text-faint); font-size: 11px; font-style: italic; margin-top: 4px; }
.additional-sources { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 600px) { .c-parties, .inbox-parties, .card-parties { grid-template-columns: 1fr; } }

/* Card extra (revealed on expand) */
.card-extra, .card-extra-row { animation: cardExtraIn var(--dur-slow) var(--ease); }
.card-item:not(.expanded) .card-extra { display: none !important; }
@keyframes cardExtraIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Action row */
.card-actions-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Share button — always visible, pinned to the bottom-right corner of the card
   (no need to open "More"). Purple accent to read as the brand action. */
.btn-share-card {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: rgba(124, 58, 237, 0.10);
    color: var(--color-purple, #a855f7);
    border: 1px solid rgba(124, 58, 237, 0.34);
    border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease;
}
.btn-share-card:hover {
    background: rgba(124, 58, 237, 0.18);
    border-color: rgba(124, 58, 237, 0.6);
    transform: translateY(-1px);
}

/* Inbox-specific card */
.inbox-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-fast);
}
.inbox-card:hover { box-shadow: var(--shadow-sm); }
.inbox-card.status-new         { border-left-color: var(--color-danger); }
.inbox-card.status-in_progress { border-left-color: var(--color-warning); }
.inbox-card.status-done        { border-left-color: var(--color-success); opacity: 0.85; }
.inbox-card.status-ignored     { border-left-color: var(--text-faint); opacity: 0.6; }
.inbox-card.is-forwarded       { border-left-color: var(--color-purple); }
.inbox-headline { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; letter-spacing: -0.005em; }
.inbox-summary  { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 10px; }
.inbox-meta2    { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.inbox-meta2-chip { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.inbox-attr {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--text-muted);
    margin: 8px 0;
}
.inbox-attr-text { font-size: 11px; }
.assignment-note {
    display: flex; gap: 8px;
    background: var(--color-purple-bg);
    border-left: 3px solid var(--color-purple);
    border-radius: 6px;
    padding: 8px 11px;
    margin: 8px 0;
    font-size: 12.5px; color: var(--text-secondary);
}
.assignment-note-icon { color: var(--color-purple); flex-shrink: 0; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ignore-reason-row {
    display: none;
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    gap: 8px; align-items: flex-start;
}
.ignore-reason-row.open { display: flex; }
.reassign-popover {
    display: none;
    margin-top: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.reassign-popover.open { display: block; }
.rp-header { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 8px; }
.rp-title  { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.rp-search { width: 100%; padding: 7px 10px; border: none; background: var(--bg-base); font-size: 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); outline: none; }
.rp-list   { max-height: 220px; overflow-y: auto; }
.rp-item   { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background var(--dur-fast); }
.rp-item:hover { background: var(--bg-hover); }
.rp-name   { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.rp-role   { font-size: 10.5px; color: var(--text-muted); }
.rp-empty  { padding: 14px; text-align: center; color: var(--text-muted); font-size: 12px; }
.rp-footer { padding: 8px 12px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; }
.rp-cancel { background: none; border: none; color: var(--text-muted); font-size: 11.5px; font-family: inherit; cursor: pointer; }
.rp-cancel:hover { color: var(--text-primary); }

/* History timeline */
.history-panel {
    display: none;
    margin-top: 10px; padding: 12px 14px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.history-panel.open { display: block; }
.history-loading { font-size: 12px; color: var(--text-muted); }
.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl-item  { display: flex; gap: 12px; }
.tl-left  { flex-shrink: 0; padding-top: 3px; }
.tl-body  { flex: 1; min-width: 0; }
.tl-text  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.tl-time  { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); margin-top: 2px; }
.ev-assigned   { color: var(--color-purple); }
.ev-reassigned { color: var(--color-purple); }
.ev-received   { color: var(--color-info); }
.ev-status     { color: var(--color-success); }

/* Stat cards */
.stats-row, .stats-bar, .stat-cards, .summary-grid, .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat-card, .sum-card, .cd-card, .metric-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
/* Top-rule color stripe (semantic) */
.stat-card::before, .metric-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: var(--border-medium);
}
.stat-card.covered::before, .stat-card.total-chip::before, .metric-card[data-tone="success"]::before { background: var(--color-success); }
.stat-card.dropped::before, .metric-card[data-tone="muted"]::before { background: var(--text-faint); }
.stat-card.total::before,   .metric-card[data-tone="info"]::before { background: var(--color-info); }
.stat-card.post-now::before { background: var(--urg-postnow); }
.stat-card.urgent::before   { background: var(--urg-urgent); }
.stat-card.monitor::before  { background: var(--urg-monitor); }
.stat-icon { font-size: 18px; color: var(--text-muted); margin-bottom: 6px; }
.stat-body, .stat-value { line-height: 1; }
.stat-num, .metric-value {
    font-size: 30px; font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    font-family: var(--font-mono);
    line-height: 1;
    margin-bottom: 6px;
}
.stat-label, .metric-label {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
}
.stat-sub, .metric-sub { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.stat-chip {
    display: inline-flex; padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 11px; font-weight: 600;
}
.stat-chip.critical, .stat-chip.high { background: var(--color-danger-bg); color: var(--color-danger); }
.stat-chip.monitor-chip { background: var(--urg-monitor-bg); color: var(--urg-monitor); }
.stat-chip.total-chip, .stat-chip.active-chip { background: var(--color-info-bg); color: var(--color-info); }

/* Run summary bar */
.run-summary-bar {
    display: none; align-items: center; gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 18px 0;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-xs);
}
.run-summary-bar::before {
    content: ''; position: absolute;
    top: 0; left: 16px; right: 16px; height: 2px;
    background: linear-gradient(90deg, var(--color-success), var(--color-info));
    border-radius: 2px 2px 0 0;
    opacity: 0.7;
}
.run-summary-bar .rs-icon-wrap {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-success-bg);
    color: var(--color-success);
    border-radius: 8px;
    font-size: 15px;
    flex-shrink: 0;
}
.run-summary-bar .rs-stat { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-summary-bar .rs-stat-clickable { cursor: pointer; padding: 4px 10px; margin: -4px -10px; border-radius: 7px; transition: background var(--dur-fast); }
.run-summary-bar .rs-stat-clickable:hover { background: var(--bg-hover); }
.rs-stat-num { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; font-family: var(--font-mono); }
.rs-stat-num.rs-new { color: var(--color-success); }
.rs-stat-num.rs-old { color: var(--text-muted); }
.rs-stat-label {
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--text-muted);
}
.rs-divider { width: 1px; height: 28px; background: var(--border-subtle); }
.rs-urgency { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rs-u {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700;
    padding: 3px 9px; border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
    font-family: var(--font-sans);
}
.rs-u::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.rs-u-pn { background: var(--urg-postnow-bg); color: var(--urg-postnow); }
.rs-u-pn::before { background: var(--urg-postnow); }
.rs-u-ug { background: var(--urg-urgent-bg); color: var(--urg-urgent); }
.rs-u-ug::before { background: var(--urg-urgent); }
.rs-u-mo { background: var(--urg-monitor-bg); color: var(--urg-monitor); }
.rs-u-mo::before { background: var(--urg-monitor); }
.rs-meta { font-size: 11.5px; color: var(--text-muted); margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rs-meta strong { color: var(--text-primary); font-weight: 600; }
.rs-meta-iso { font-size: 10.5px; font-family: var(--font-mono); opacity: 0.75; }
.rs-empty { font-size: 12px; color: var(--text-faint); font-style: italic; }
/* ── Analysis Summary Card (.asc) ───────────────────────────────────── */
.asc {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 28px rgba(15,23,42,0.06);
    overflow: hidden;
    position: relative;
}
.asc::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--border-medium);
    transition: background var(--dur-fast);
}
.asc.danger::before { background: var(--urg-postnow); }
.asc.warn::before   { background: var(--urg-urgent); }
.asc.calm::before   { background: var(--urg-monitor); }

.asc-top {
    display: grid; grid-template-columns: 1fr auto;
    align-items: stretch; gap: 28px;
    padding: 22px 26px 20px;
}
.asc-stats { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.asc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted);
}
.asc-eyebrow .pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(5,150,105,0.14);
    flex-shrink: 0;
}
.asc-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.asc-num {
    font-family: var(--font-mono); font-size: 56px; font-weight: 700;
    line-height: 1; letter-spacing: -0.04em; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.asc-num-tail { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.asc-num-tail strong { color: var(--text-primary); font-weight: 600; }

.asc-breakdown {
    display: inline-flex; align-items: center;
    background: var(--bg-base); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 4px; gap: 2px; align-self: flex-start;
}
.asc-seg {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 7px; border: none;
    background: transparent; cursor: pointer; font-family: inherit;
    transition: background var(--dur-fast);
}
.asc-seg:hover { background: var(--bg-surface); }
.asc-seg + .asc-seg { position: relative; }
.asc-seg + .asc-seg::before {
    content: ""; position: absolute; left: -1px; top: 22%; bottom: 22%;
    width: 1px; background: var(--border-subtle);
}
.asc-seg-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.asc-seg.post-now .asc-seg-dot { background: var(--urg-postnow); }
.asc-seg.urgent   .asc-seg-dot { background: var(--urg-urgent); }
.asc-seg.monitor  .asc-seg-dot { background: var(--urg-monitor); }
.asc-seg-num {
    font-family: var(--font-mono); font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.asc-seg-lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.asc-seg.post-now .asc-seg-lbl { color: var(--urg-postnow); }
.asc-seg.urgent   .asc-seg-lbl { color: var(--urg-urgent); }
.asc-seg.monitor  .asc-seg-lbl { color: var(--urg-monitor); }

.asc-action {
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: space-between;
    gap: 14px; min-width: 220px;
}
.asc-meta { text-align: right; font-size: 12px; color: var(--text-muted); line-height: 1.55; }
.asc-meta .row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.asc-meta .row + .row { margin-top: 3px; }
.asc-meta b { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.asc-meta .ts { font-family: var(--font-mono); color: var(--text-faint); font-size: 11px; }

.asc-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--urg-postnow); color: #FFF;
    border: none; height: 42px; padding: 0 18px 0 20px;
    border-radius: 9px; font-family: inherit;
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(220,38,38,0.30), 0 6px 16px rgba(220,38,38,0.22);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
.asc-cta:hover {
    background: var(--accent-red-hover); transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 2px 4px rgba(220,38,38,0.30), 0 10px 24px rgba(220,38,38,0.28);
}
.asc.warn .asc-cta { background: var(--urg-urgent); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 14px rgba(217,119,6,0.25); }
.asc.warn .asc-cta:hover { filter: brightness(0.9); }
.asc.calm .asc-cta { background: var(--color-info); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 4px 14px rgba(59,130,246,0.22); }
.asc.calm .asc-cta:hover { background: #1D4ED8; }
.asc-cta .cta-count {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    padding: 2px 7px; background: rgba(255,255,255,0.18); border-radius: 5px;
    font-variant-numeric: tabular-nums;
}
.asc-cta .arrow { font-size: 16px; line-height: 1; transition: transform var(--dur-fast); }
.asc-cta:hover .arrow { transform: translateX(2px); }

.asc-divider { height: 1px; background: var(--border-subtle); }

.asc-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 26px 18px;
    background: linear-gradient(180deg, rgba(15,23,42,0.012), transparent 40%);
}
.asc-filter-label {
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint); margin-right: 4px; padding: 0 4px 0 0;
}
.asc-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 12px;
    background: var(--bg-surface); color: var(--text-secondary);
    border: 1px solid var(--border-medium); border-radius: var(--radius-pill);
    font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
    cursor: pointer; transition: all var(--dur-fast);
}
.asc-pill:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.asc-pill-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; padding: 1px 7px;
    background: var(--bg-hover); color: var(--text-muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    border-radius: var(--radius-pill); font-variant-numeric: tabular-nums;
}
.asc-pill.active { background: var(--text-primary); color: #FFF; border-color: var(--text-primary); }
.asc-pill.active .asc-pill-count { background: rgba(255,255,255,0.20); color: #FFF; }
.asc-pill.tone-new { background: rgba(5,150,105,0.07); color: var(--color-success); border-color: rgba(5,150,105,0.22); }
.asc-pill.tone-new:hover { background: rgba(5,150,105,0.12); }
.asc-pill.tone-new .asc-pill-count { background: rgba(5,150,105,0.14); color: var(--color-success); }
.asc-pill.tone-postnow { color: var(--urg-postnow); border-color: rgba(220,38,38,0.22); }
.asc-pill.tone-postnow:hover { background: var(--urg-postnow-bg); }
.asc-pill.tone-postnow .asc-pill-count { background: var(--urg-postnow-bg); color: var(--urg-postnow); }
.asc-pill.tone-urgent { color: var(--urg-urgent); border-color: rgba(217,119,6,0.22); }
.asc-pill.tone-urgent:hover { background: var(--urg-urgent-bg); }
.asc-pill.tone-urgent .asc-pill-count { background: var(--urg-urgent-bg); color: var(--urg-urgent); }
.asc-pill.tone-monitor { color: var(--urg-monitor); border-color: rgba(59,130,246,0.22); }
.asc-pill.tone-monitor:hover { background: var(--urg-monitor-bg); }
.asc-pill.tone-monitor .asc-pill-count { background: var(--urg-monitor-bg); color: var(--urg-monitor); }
.asc-spark {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); align-self: center;
}
.asc-spark .live {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--urg-postnow); box-shadow: 0 0 0 3px rgba(220,38,38,0.16);
}
@media (max-width: 760px) {
    .asc { max-width: 100%; }
    .asc-top { grid-template-columns: 1fr; gap: 16px; padding: 16px 16px 14px; }
    .asc-action { align-items: stretch; }
    .asc-meta, .asc-meta .row { justify-content: flex-start; text-align: left; }
    .asc-cta { justify-content: center; }
    .asc-num { font-size: 42px; }
    .asc-breakdown { flex-wrap: wrap; width: 100%; max-width: 100%; box-sizing: border-box; }
    .asc-seg { flex: 1 1 auto; justify-content: center; }
    .asc-filters { padding: 12px 16px 14px; gap: 6px; }
    .asc-pill { flex: 1 1 auto; justify-content: center; }
    .asc-spark { display: none; }
    .xpro-section-header { padding: 12px 14px; }
    .xpro-section-badges { width: 100%; }
}

.rs-filter-row {
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--border-subtle);
}
@media (max-width: 720px) {
    .run-summary-bar .rs-divider { display: none; }
    .run-summary-bar .rs-meta { width: 100%; margin-left: 0; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
}

/* Hero blocks — softened, mood = single semantic color */
.inbox-hero, .ba-hero {
    display: none;
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 22px;
    gap: 20px;
    align-items: center;
    box-shadow: var(--shadow-card);
}
.inbox-hero.show, .ba-hero.show { display: flex; }
/* Mood = 3px left bar, ring on number */
.inbox-hero::before, .ba-hero::before {
    content: ''; position: absolute;
    left: 0; top: 16px; bottom: 16px;
    width: 3px; border-radius: 2px;
    background: var(--border-medium);
}
.inbox-hero.danger::before, .ba-hero.danger::before { background: var(--urg-postnow); }
.inbox-hero.warn::before,   .ba-hero.warn::before   { background: var(--urg-urgent); }
.inbox-hero.calm::before,   .ba-hero.calm::before   { background: var(--urg-monitor); }
.inbox-hero.all-clear::before                       { background: var(--color-success); }

.inbox-hero-num, .ba-hero-num {
    font-size: 48px; font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    min-width: 72px; text-align: center;
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.inbox-hero.danger .inbox-hero-num, .ba-hero.danger .ba-hero-num { color: var(--urg-postnow); }
.inbox-hero.warn   .inbox-hero-num, .ba-hero.warn   .ba-hero-num { color: var(--urg-urgent); }
.inbox-hero.calm   .inbox-hero-num, .ba-hero.calm   .ba-hero-num { color: var(--urg-monitor); }
.inbox-hero.all-clear .inbox-hero-num                            { color: var(--color-success); }
.inbox-hero-num.zero { color: var(--text-faint); }
.ba-hero-meta, .inbox-hero-meta { flex: 1; min-width: 0; }
.inbox-hero-label, .ba-hero-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.inbox-hero.danger .inbox-hero-label, .ba-hero.danger .ba-hero-label { color: var(--urg-postnow); }
.inbox-hero.warn   .inbox-hero-label, .ba-hero.warn   .ba-hero-label { color: var(--urg-urgent); }
.inbox-hero.calm   .inbox-hero-label, .ba-hero.calm   .ba-hero-label { color: var(--urg-monitor); }
.inbox-hero.all-clear .inbox-hero-label                              { color: var(--color-success); }
.inbox-hero-subtitle, .ba-hero-subtitle {
    font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.inbox-hero-mini, .ba-hero-mini {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 8px;
    font-size: 12px; color: var(--text-muted);
}
.inbox-hero-mini b, .ba-hero-mini b {
    color: var(--text-primary); font-weight: 700;
    margin-right: 4px;
    font-family: var(--font-mono);
}
.inbox-hero-cta, .ba-hero-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-red); color: #FFF !important;
    border: none; padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.inbox-hero-cta:hover, .ba-hero-cta:hover {
    background: var(--accent-red-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220,38,38,0.24);
}
.inbox-hero.calm .inbox-hero-cta, .ba-hero.calm .ba-hero-cta { background: var(--color-info); }
.inbox-hero.calm .inbox-hero-cta:hover, .ba-hero.calm .ba-hero-cta:hover { background: #1D4ED8; }
.inbox-hero.all-clear .inbox-hero-cta { background: var(--color-success); }
.inbox-hero.all-clear .inbox-hero-cta:hover { background: #047857; }

@media (max-width: 600px) {
    .inbox-hero, .ba-hero { padding: 18px 20px; flex-wrap: wrap; }
    .inbox-hero-num, .ba-hero-num { font-size: 40px; min-width: 56px; }
    .inbox-hero-cta, .ba-hero-cta { width: 100%; justify-content: center; }
}

/* Progress bar */
.progress-wrap, .progress-bar-outer {
    display: none;
}
.progress-wrap { display: none; margin-bottom: 18px; }
.progress-bar-outer {
    display: block;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-inner {
    height: 100%; width: 0%;
    background: var(--accent-red);
    border-radius: 3px;
    transition: width var(--dur-slow) var(--ease);
    box-shadow: 0 0 8px var(--accent-red-glow);
}
.progress-text { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }

/* Copy-all wrap */
.copy-all-wrap {
    display: none;
    margin-bottom: 18px;
    gap: 8px; flex-wrap: wrap;
}

/* Sm-widget (collapsible) */
.sm-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}
.sm-widget-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: transparent; border: none;
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--dur-fast);
}
.sm-widget-toggle:hover { background: var(--bg-tint); }
.sm-widget-toggle-arrow { font-size: 11px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease); }
.sm-widget.open .sm-widget-toggle-arrow { transform: rotate(180deg); }
.sm-widget-body { display: none; padding: 16px 20px 20px; border-top: 1px solid var(--border-subtle); }
.sm-widget.open .sm-widget-body { display: block; animation: cardExtraIn var(--dur-base) var(--ease); }
.sm-widget-title { font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }

/* X-Pro section */
.xpro-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--text-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
}
.xpro-section-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 18px; cursor: pointer; user-select: none; }
.xpro-section-header:hover { background: var(--bg-tint); }
.xpro-section-arrow { font-size: 10px; color: var(--text-muted); transition: transform var(--dur-base); flex-shrink: 0; }
.xpro-section.open .xpro-section-arrow { transform: rotate(90deg); }
.xpro-section-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
.xpro-section-count { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
.xpro-section-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.xpro-section-body { display: none; padding: 14px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-base); }
.xpro-section.open .xpro-section-body { display: block; }
.xpro-section-inner { display: flex; flex-direction: column; gap: 8px; }
.xpro-tweet-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: all var(--dur-fast);
}
.xpro-tweet-card.urg-post-now, .xpro-tweet-card.post-now { border-left-color: var(--urg-postnow); }
.xpro-tweet-card.urg-urgent,   .xpro-tweet-card.urgent   { border-left-color: var(--urg-urgent); }
.xpro-tweet-card.urg-monitor,  .xpro-tweet-card.monitor  { border-left-color: var(--urg-monitor); }
.xpro-tweet-card.dismissed, .xpro-card.done { opacity: 0; max-height: 0; padding: 0; margin: 0; overflow: hidden; border-width: 0; transition: all 0.3s ease; }
.xpro-attribution { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 11.5px; }
.xpro-attr-handle { color: #1D9BF0; font-weight: 600; text-decoration: none; }
.xpro-attr-handle:hover { text-decoration: underline; }
.xpro-attr-sep, .xpro-attr-age { color: var(--text-faint); font-size: 11px; }
.xpro-attr-age { font-family: var(--font-mono); }
.xpro-tweet-text {
    margin: 6px 0;
    padding: 8px 10px;
    background: var(--bg-inset);
    border-left: 3px solid var(--border-medium);
    border-radius: 6px;
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-secondary);
}
.xpro-empty { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 13px; }

/* Embed placeholder (tweet embed) */
.card-embed { margin: 8px 0; min-height: 80px; }
.embed-placeholder {
    padding: 12px 14px;
    background: var(--bg-inset);
    border: 1px dashed var(--border-medium);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-style: italic;
}

/* Org / bot / provider cards */
.org-card, .bot-card, .provider-card, .section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-card);
}
.bot-card { border-left: 3px solid var(--border-medium); }
.bot-card.ok    { border-left-color: var(--color-success); }
.bot-card.warn  { border-left-color: var(--color-warning); }
.bot-card.error { border-left-color: var(--color-danger); }
.bot-card.dead  { border-left-color: var(--text-faint); }

.org-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.org-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.org-meta { font-size: 12px; color: var(--text-muted); }

/* Provider card */
.provider-card { border-top: 3px solid var(--color-info); border-radius: var(--radius-md); padding: 16px; }
.provider-card.paid { border-top-color: var(--color-warning); }
.provider-card.free { border-top-color: var(--color-success); }
.provider-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.provider-tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.provider-tag.paid { background: var(--color-warning-bg); color: var(--color-warning); }
.provider-tag.free { background: var(--color-success-bg); color: var(--color-success); }
.provider-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
.provider-row-label { font-size: 12px; color: var(--text-muted); }
.provider-row-cost  { font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); }
.provider-row-calls { font-size: 11.5px; color: var(--text-faint); font-family: var(--font-mono); }

/* Funnel (pipeline overview) */
.funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; align-items: center; }
.funnel-step {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
}
.funnel-step.highlight { border-color: var(--accent-red); box-shadow: 0 0 0 3px var(--accent-red-glow); }
.funnel-count { font-size: 22px; font-weight: 800; color: var(--text-primary); font-family: var(--font-mono); }
.funnel-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 4px; }
.funnel-arrow { text-align: center; color: var(--text-faint); font-size: 18px; }
.funnel-drop  { font-size: 11px; color: var(--color-danger); font-family: var(--font-mono); }

/* Pipe-row (api usage) */
.pipe-row { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 8px; }
.pipe-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pipe-name { font-weight: 600; color: var(--text-primary); }
.pipe-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pipe-cost { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.pipe-calls { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.pipe-bar-wrap { background: var(--bg-hover); height: 6px; border-radius: 3px; margin-top: 10px; overflow: hidden; }
.pipe-bar { height: 100%; background: var(--color-info); border-radius: 3px; }

/* Phase / drop bars */
.phase-bar-wrap, .yield-bar, .eng-bar-wrap, .eng-bar-bg, .count-bar-wrap {
    background: var(--bg-hover); height: 6px; border-radius: 3px; overflow: hidden;
}
.phase-bar-fill, .yield-bar-fill, .eng-bar-fill, .count-bar { height: 100%; background: var(--color-danger); border-radius: 3px; }
.phase-bar-zero { background: var(--color-success) !important; opacity: 0.3; }
.drop-high { color: var(--color-danger); }
.drop-med  { color: var(--color-warning); }
.drop-low  { color: var(--color-success); }

/* Daily chart */
.daily-chart { display: flex; gap: 4px; align-items: flex-end; height: 80px; padding: 8px 0; }
.day-col { flex: 1; background: var(--bg-hover); border-radius: 3px 3px 0 0; min-height: 4px; position: relative; }
.day-bar-inner { width: 100%; background: var(--color-info); border-radius: 3px 3px 0 0; min-height: 4px; }
.day-today { background: var(--accent-red); }

/* ─────────────────────────────────────────────────────────────
   10. TABLES
   ───────────────────────────────────────────────────────────── */
.table-wrap, .table-scroll, .tbl-scroll, .users-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    /* Scroll wide tables horizontally on small screens instead of
       clipping them. overflow-y stays hidden so the rounded corners are
       still clipped; on desktop the table fits so no scrollbar shows. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.users-table-wrap { display: none; }
.users-table-wrap.open { display: block; }
table.log-table, .users-table, .audit-table, .batch-table, .logs-table, .history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
th {
    text-align: left;
    padding: 11px 14px;
    background: var(--bg-tint);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky; top: 0; z-index: 1;
}
td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: top;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-tint); }
.truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num, td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.legend { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* Run-comparison cells (Run A blue / Run B purple — preserved) */
.run-headers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.run-header-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; }
.run-header-card.run-a-col { border-left: 3px solid var(--color-info); }
.run-header-card.run-b-col { border-left: 3px solid var(--color-purple); }
.run-header-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.run-header-id    { font-size: 13px; font-family: var(--font-mono); color: var(--text-primary); }
.run-header-ts    { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.run-status       { display: inline-flex; padding: 1px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.run-status.done    { background: var(--color-success-bg); color: var(--color-success); }
.run-status.running { background: var(--color-info-bg); color: var(--color-info); }
.run-status.error   { background: var(--color-danger-bg); color: var(--color-danger); }
.run-status.partial { background: var(--color-warning-bg); color: var(--color-warning); }
.run-error { color: var(--color-danger); font-size: 12px; }
.delta { font-family: var(--font-mono); font-weight: 700; }
.delta.pos  { color: var(--color-success); }
.delta.neg  { color: var(--color-danger); }
.delta.zero { color: var(--text-muted); }
th.run-a { color: var(--color-info); }
th.run-b { color: var(--color-purple); }

.raw-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--border-medium);
    color: var(--text-muted);
    font-size: 11px; font-family: var(--font-mono);
    padding: 3px 8px; border-radius: 4px;
    cursor: pointer;
}
.raw-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.raw-response { display: none; margin-top: 6px; padding: 10px; background: var(--bg-inset); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); white-space: pre-wrap; max-height: 240px; overflow: auto; }
.raw-response.open { display: block; }
.title-cell { max-width: 280px; }
.title-text { color: var(--text-primary); }
.url-text   { color: var(--text-faint); font-size: 11px; font-family: var(--font-mono); }

/* ─────────────────────────────────────────────────────────────
   11. MODALS + TOASTS + BULK BAR
   ───────────────────────────────────────────────────────────── */
.modal-overlay, .assign-modal-overlay, .bulk-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 1000;
    align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
body.premium-dark .modal-overlay,
body.premium-dark .assign-modal-overlay,
body.premium-dark .bulk-modal-overlay { background: rgba(0,0,0,0.65); }
.modal-overlay.open, .assign-modal-overlay.open, .bulk-modal-overlay.open { display: flex; }

.modal, .modal-box, .assign-modal, .bulk-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 460px; width: 92%;
    box-shadow: var(--shadow-modal);
    animation: modalIn 220ms var(--ease);
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-title, .assign-modal-title, .bulk-modal-title {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.modal-sub, .assign-modal-sub, .bulk-modal-sub {
    font-size: 12.5px; color: var(--text-muted);
    margin-bottom: 18px;
}
.modal-body { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.55; }
.modal-info  { background: var(--color-info-bg); color: var(--color-info); padding: 10px 14px; border-radius: 8px; font-size: 12.5px; }
.modal-error { background: var(--color-danger-bg); color: var(--color-danger); padding: 10px 14px; border-radius: 8px; font-size: 12.5px; }
.modal-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.modal-select { width: 100%; padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: 8px; font-size: 13px; color: var(--text-primary); }
.modal-actions, .assign-modal-actions, .bulk-modal-actions, .modal-btns, .modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 6px;
}
.modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none;
    color: var(--text-muted);
    font-size: 22px; line-height: 1;
    cursor: pointer; font-family: inherit;
}
.modal-close:hover { color: var(--text-primary); }
.assign-user-list, .bulk-modal-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 260px; overflow-y: auto;
    margin-bottom: 16px;
}
.assign-user-item, .bulk-modal-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer; user-select: none;
    transition: all var(--dur-fast);
}
.assign-user-item:hover, .bulk-modal-item:hover {
    background: var(--color-purple-bg);
    border-color: rgba(124,58,237,0.30);
}
.assign-user-name, .bulk-modal-name { font-size: 13px; font-weight: 600; flex: 1; color: var(--text-primary); }
.assign-user-role, .bulk-modal-role {
    font-size: 11px; color: var(--text-muted);
    background: var(--bg-hover);
    padding: 1px 8px; border-radius: var(--radius-pill);
}
.assign-modal-empty {
    color: var(--text-muted); font-size: 13px;
    text-align: center; padding: 24px 0;
}

/* Toast */
.toast, #undoToast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary); color: var(--bg-base);
    padding: 12px 18px;
    border-radius: 10px;
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-elevated);
    z-index: 9999;
    transition: opacity var(--dur-base);
}
#undoToast button {
    background: var(--accent-red); color: #FFF;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}
.toast.show { opacity: 1; }

/* Bulk action bar */
.bulk-action-bar {
    position: fixed;
    left: 50%; bottom: 24px;
    transform: translateX(-50%) translateY(140%);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(15,23,42,0.96);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    padding: 10px 12px 10px 16px;
    box-shadow: var(--shadow-modal);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    z-index: 950;
    opacity: 0; pointer-events: none;
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur-base);
    font-family: inherit;
    max-width: calc(100vw - 32px);
}
body.premium-dark .bulk-action-bar { background: rgba(20,20,24,0.96); }
.bulk-action-bar.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.bulk-count {
    display: inline-flex; align-items: center; gap: 8px;
    color: #FFF; font-size: 13px; font-weight: 600;
    padding-right: 12px; margin-right: 4px;
    border-right: 1px solid rgba(255,255,255,0.12);
    white-space: nowrap;
}
.bulk-count-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 8px;
    background: rgba(255,255,255,0.14); color: #FFF;
    border-radius: 13px;
    font-size: 12px; font-weight: 700;
    font-family: var(--font-mono);
}

/* Alert / banner */
.alert, .banner, .forced-banner, .error-box, .error-msg, .data-note, .hint-box, .expiry-note {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
    border: 1px solid var(--border-subtle);
}
.alert-success, .banner-ok {
    background: var(--color-success-bg); color: var(--color-success);
    border-color: rgba(5,150,105,0.20);
}
.alert-error, .banner-err, .error-msg, .error-box {
    background: var(--color-danger-bg); color: var(--color-danger);
    border-color: rgba(220,38,38,0.20);
}
.alert-warning, .forced-banner, .data-note, .expiry-note {
    background: var(--color-warning-bg); color: var(--color-warning);
    border-color: rgba(217,119,6,0.20);
}
.hint-box { background: var(--color-info-bg); color: var(--color-info); border-color: rgba(37,99,235,0.20); }

/* ─────────────────────────────────────────────────────────────
   12. EMPTY + SKELETON + LOADING
   ───────────────────────────────────────────────────────────── */
.empty, .empty-state, .no-results, .no-runs-card, .tb-empty, .inbox-empty, .star-empty, .rp-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.empty-state-icon, .empty-icon, .tb-empty-icon, .inbox-empty-icon, .star-empty-icon {
    font-size: 38px;
    margin-bottom: 16px;
    opacity: 0.55;
}
.empty-state-title, .empty-title, .tb-empty-title {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.empty-state-sub, .empty-subtitle, .empty-msg, .empty-note, .tb-empty-msg {
    font-size: 13.5px;
    color: var(--text-muted);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.55;
}
.empty-state-cmd { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-top: 8px; }

.skeleton, .tb-skel-line, .skel-line {
    background: linear-gradient(90deg,
        var(--bg-hover) 25%,
        var(--bg-tint) 50%,
        var(--bg-hover) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    height: 12px; width: 60%;
}
.skeleton.lg, .tb-skel-line.lg, .skel-line.lg { height: 16px; width: 80%; }
.skeleton.sm, .tb-skel-line.sm, .skel-line.sm { height: 10px; width: 40%; }
.skel-card, .tb-skel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.loading, .loading-box, .running-state {
    display: none;
    padding: 14px 16px;
    background: var(--color-info-bg);
    border: 1px solid rgba(37,99,235,0.20);
    color: var(--color-info);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
.running-state.visible { display: block; animation: cardExtraIn var(--dur-base) var(--ease); }
.loading-spinner { display: inline-block; vertical-align: middle; }

/* ─────────────────────────────────────────────────────────────
   13. STATUS INDICATORS (live banners, tabs, mood)
   ───────────────────────────────────────────────────────────── */
.tab-bar, .pipeline-tabs, .settings-tabs, .tabs-list, .tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 18px;
    overflow-x: auto;
}
.tab-btn, .pipeline-tab, .settings-tab, .log-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px;
    background: transparent;
    border: none; border-radius: 0;
    color: var(--text-muted);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur-fast), border-color var(--dur-fast);
    white-space: nowrap;
}
.tab-btn:hover, .pipeline-tab:hover, .settings-tab:hover, .log-tab:hover { color: var(--text-primary); }
.tab-btn.active, .pipeline-tab.active, .settings-tab.active, .log-tab.active {
    background: transparent; color: var(--text-primary); font-weight: 600;
    border-bottom-color: var(--accent-red);
}
.tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 10.5px; font-weight: 700;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
}
.tab-btn.active .tab-count { background: var(--accent-red-dim); color: var(--accent-red); }
.tab-ico { font-size: 13px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: cardExtraIn var(--dur-base) var(--ease); }

/* PD Live banner (pipeline) */
.pd-live-banner {
    display: none;
    align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--color-danger-bg);
    border: 1px solid rgba(220,38,38,0.20);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--color-danger);
}
.pd-live-banner.show { display: flex; }
.pd-live-text { font-weight: 600; }
.pd-live-phase { font-family: var(--font-mono); font-size: 12px; }
.pd-live-refresh { margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); }

/* Status bar (claude_analysis) */
.status-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 12.5px;
}
.status-text { font-weight: 600; color: var(--text-primary); }
.status-time { font-family: var(--font-mono); color: var(--text-muted); margin-left: auto; }
#statusDot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
#statusDot.idle    { background: var(--text-faint); }
#statusDot.running { background: var(--color-info); animation: livePulse 1.5s infinite; }
#statusDot.done    { background: var(--color-success); }
#statusDot.error   { background: var(--color-danger); }

/* ─────────────────────────────────────────────────────────────
   14. ONBOARDING TOUR — refresh ring color
   (onboarding.css owns the structure; we just override colors) ─ */
.tour-spotlight { box-shadow: 0 0 0 4px var(--accent-red), 0 0 0 9999px rgba(15,23,42,0.55) !important; border-radius: 8px; }
body.premium-dark .tour-spotlight { box-shadow: 0 0 0 4px var(--accent-red), 0 0 0 9999px rgba(0,0,0,0.72) !important; }

/* ─────────────────────────────────────────────────────────────
   15. PAGE-SPECIFIC BITS
   ───────────────────────────────────────────────────────────── */

/* Media panel */
.media-results {
    margin-top: 10px;
    padding: 14px;
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}
.media-section { margin-bottom: 12px; }
.media-section:last-child { margin-bottom: 0; }
.media-section-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.media-keywords { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.media-keyword  {
    background: var(--bg-hover); color: var(--text-secondary);
    padding: 2px 8px; border-radius: var(--radius-pill);
    font-size: 11px;
}
.media-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.media-item {
    position: relative; overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-card);
    max-width: 180px;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.media-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.media-item img { width: 100%; max-height: 120px; object-fit: cover; display: block; }
.media-video-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #FFF; text-shadow: 0 1px 6px rgba(0,0,0,0.6); pointer-events: none; }
.media-vid-dur { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,0.75); color: #FFF; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); }

/* Search link rows */
.search-link-row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    margin-bottom: 6px;
}
.search-link-keyword {
    font-size: 12.5px; font-weight: 600;
    color: var(--text-primary);
    min-width: 160px; max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-link-btns { display: flex; gap: 5px; flex-wrap: wrap; }

/* Star/coverage cards extras */
.star-card { border-left: 3px solid var(--color-warning); }
.star-list { display: flex; flex-direction: column; gap: 10px; }
.star-empty-icon { font-size: 38px; opacity: 0.5; }

/* ─────────────────────────────────────────────────────────────
   16. PIPELINE DEBUG (run selector, phase bars, etc.)
   ───────────────────────────────────────────────────────────── */
.run-selector {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}
.run-selector select {
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: 7px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-primary);
}
.run-link { color: var(--color-info); text-decoration: none; }
.run-link:hover { text-decoration: underline; }
.run-link.mono { font-family: var(--font-mono); }

/* ─────────────────────────────────────────────────────────────
   17. MOBILE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    body.nav-open { overflow: hidden; }
    .navbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 0; }
    .navbar-left { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    .hamburger { display: inline-flex; }
    .navbar-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
        order: 10;
    }
    .navbar-nav.open { display: flex; }
    .nav-link, .nav-admin-btn { font-size: 14px; padding: 10px 12px; }
    .nav-link.active::after, .nav-admin-btn.active::after { display: none; }
    .nav-link.active, .nav-admin-btn.active { background: var(--accent-red-dim); color: var(--accent-red); }
    .nav-admin-menu { position: static; box-shadow: none; border: none; padding: 4px 12px; background: transparent; }
    .nav-admin-menu.nav-admin-menu-sectioned {
        max-height: 60vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-right { width: 100%; justify-content: flex-end; gap: 6px; margin-top: 0; }
}

@media (max-width: 768px) {
    .main, .page-wrap, .page-container { padding: 20px 14px 48px; }
    .page-title { font-size: 22px; }
    .inbox-actions { flex-wrap: wrap; }
    .bulk-action-bar { left: 12px; right: 12px; transform: translateY(140%); padding: 8px 10px; gap: 6px; justify-content: center; }
    .bulk-action-bar.open { transform: translateY(0); }
    .bulk-count { padding-right: 8px; margin-right: 0; font-size: 12px; }
    .bulk-btn { padding: 7px 10px; font-size: 12px; }
}

@media (max-width: 600px) {
    .stats-row, .stats-bar, .stat-cards, .summary-grid { grid-template-columns: 1fr 1fr; }

    /* Category row header: wrap so count/badges/copy drop to a 2nd row
       (indented under the name) instead of colliding with a wrapped name. */
    .cat-row-header { flex-wrap: wrap; row-gap: 6px; column-gap: 8px; padding: 12px 14px; }
    .cat-name      { flex: 1 1 calc(100% - 28px); font-size: 13.5px; }
    .cat-count     { flex: 0 0 auto; padding-left: 28px; font-size: 11.5px; }
    .cat-badges    { flex: 1 1 auto; flex-wrap: wrap; gap: 4px; }
    .cat-row-header > .cat-copy-btn { flex-shrink: 0; font-size: 11px; padding: 4px 10px; }
}

@media (max-width: 480px) {
    .navbar { padding: 8px 12px; }
    .navbar-title { font-size: 13px; }
    .navbar-logo  { width: 22px; height: 22px; }
    .modal, .assign-modal { width: 95%; padding: 20px; }
}

/* ─────────────────────────────────────────────────────────────
   18. TWEAKS / OUT-OF-FLOW
   Animation utilities + late overrides. Place last so they win.
   ───────────────────────────────────────────────────────────── */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Make sure dark mode never renders pure-white text on white card
   (was a recurring bug in v2 where one inline-styled child slipped). */
body.premium-dark .card-headline,
body.premium-dark .inbox-headline,
body.premium-dark .stat-num,
body.premium-dark .metric-value,
body.premium-dark .rs-stat-num,
body.premium-dark .funnel-count,
body.premium-dark .page-title,
body.premium-dark .modal-title,
body.premium-dark .card-title { color: var(--text-primary); }

/* Light-mode guard: inline `style="color:#fff"` etc. on cards inherits
   wrong contrast. The .card-writeup blocks are already dark so they
   keep their light text; everywhere else, normalize. */
body.premium-light .inbox-headline,
body.premium-light .card-headline { color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════════
   PHASE 1 ADDITIONS
   Patterns surfaced when integrating: inbox, latest_tweets, starred,
   coverage-history, assignment-report, claude_analysis, index (Raw
   Data), change-password, login + standalone shells.
   ════════════════════════════════════════════════════════════════ */

/* ── Filter bar (inbox + assignment-report + coverage tabs) ─────── */
.filter-bar {
    display: flex; align-items: center;
    gap: 8px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.filter-bar .filter-btn { /* inherits .filter-btn pill from §6 */ }
.filter-btn.fwd-tab { color: var(--color-purple); border-color: rgba(124,58,237,0.30); }
.filter-btn.fwd-tab.active { background: var(--color-purple); color: #fff; border-color: var(--color-purple); }
.filter-btn.sent-tab { color: var(--color-info); border-color: rgba(37,99,235,0.30); }
.filter-btn.sent-tab.active { background: var(--color-info); color: #fff; border-color: var(--color-info); }
.filter-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 4px;
}
.filter-bar select,
.filter-bar input {
    height: 32px;
    padding: 0 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}
.filter-bar select:focus,
.filter-bar input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-glow);
    outline: none;
}

/* ── Tab pill bar (coverage-history) — alias of .tab-bar style ──── */
.tab-btns {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 16px 0 18px;
}
.tab-btns .tab-btn { /* inherits .tab-btn pill */
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    border-bottom: 1px solid var(--border-medium);
    padding: 6px 14px;
}
.tab-btns .tab-btn.active {
    background: var(--text-primary); color: var(--bg-base);
    border-color: var(--text-primary);
    border-bottom-color: var(--text-primary);
}
.tab-btns .tab-count {
    background: rgba(255,255,255,0.18);
    color: inherit;
}
.tab-btns .tab-btn:not(.active) .tab-count { background: var(--bg-hover); color: var(--text-muted); }

/* ── Stat-card alternate values: assignment-report's .stat-value ── */
.stat-value {
    font-size: 28px; font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    font-family: var(--font-mono);
    line-height: 1;
    margin-top: 6px;
}

/* ── Starred card extras (built in JS) ──────────────────────────── */
.star-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-fast);
}
.star-card:hover { box-shadow: var(--shadow-sm); }
.star-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 11.5px; color: var(--text-muted); }
.star-headline { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; letter-spacing: -0.005em; }
.star-summary  { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 8px; }
.star-date     { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 6px; }
.star-detail   { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.star-actions  { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.star-starred-at { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); margin-top: 8px; }
.btn-unstar {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid rgba(217,119,6,0.30);
    border-radius: 7px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.btn-unstar:hover { background: var(--color-warning); color: #FFF; border-color: var(--color-warning); }
.star-empty { padding: 60px 24px; }
.star-empty-icon { opacity: 0.5; }

/* ── Coverage-history extras ─────────────────────────────────────── */
.history-list { display: flex; flex-direction: column; gap: 10px; }
.card-badge {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    border-radius: var(--radius-xs);
}
.card-badge.badge-covered { background: var(--color-success-bg); color: var(--color-success); }
.card-badge.badge-dropped { background: var(--bg-hover); color: var(--text-muted); }
.card-ip {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--text-faint);
    padding: 1px 6px;
    background: var(--bg-tint);
    border-radius: 3px;
}
.card-device {
    font-size: 11px; color: var(--text-faint);
    font-family: var(--font-mono);
}
.ml-marker { color: var(--text-secondary); font-weight: 600; }
.c-chip {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 11px;
    border-radius: var(--radius-pill);
}

/* ── X-Pro card extras (latest_tweets grid) ──────────────────────── */
.xpro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.xpro-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-xs);
    transition: all var(--dur-fast);
}
.xpro-card:hover { box-shadow: var(--shadow-sm); }
.xpro-card.urg-post-now { border-left-color: var(--urg-postnow); }
.xpro-card.urg-urgent   { border-left-color: var(--urg-urgent); }
.xpro-card.urg-monitor  { border-left-color: var(--urg-monitor); }
.xpro-card .card-header {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.xpro-card .card-summary {
    font-size: 12.5px; color: var(--text-secondary);
    line-height: 1.55;
    margin: 8px 0;
    font-style: italic;
}
.xpro-card .card-actions {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
}
.xpro-card .btn-act.star    { color: var(--color-warning); border-color: rgba(217,119,6,0.30); }
.xpro-card .btn-act.star:hover    { background: var(--color-warning); color: #fff; border-color: var(--color-warning); }
.xpro-card .btn-act.covered { color: var(--color-success); border-color: rgba(5,150,105,0.30); }
.xpro-card .btn-act.covered:hover { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.xpro-card .btn-act.drop    { color: var(--color-danger); border-color: rgba(220,38,38,0.30); }
.xpro-card .btn-act.drop:hover    { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.xpro-card .btn-act.open-link {
    background: var(--color-info); color: #fff !important;
    border-color: var(--color-info);
    text-decoration: none;
}
.xpro-card .btn-act.open-link:hover { background: #1D4ED8; border-color: #1D4ED8; }

.assign-wrap { position: relative; }
.assign-menu {
    display: none;
    position: absolute; left: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: var(--radius-md);
    box-shadow: var(--menu-shadow);
    padding: 6px;
    z-index: 50;
}
.assign-menu.open { display: block; animation: menuFadeIn 160ms var(--ease); }
.assign-menu button {
    display: block; width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    color: var(--menu-link);
    font-size: 12.5px; font-weight: 500;
    text-align: left;
    border-radius: 5px;
    cursor: pointer; font-family: inherit;
    transition: background var(--dur-fast);
}
.assign-menu button:hover { background: var(--menu-link-hover-bg); color: var(--text-primary); }

/* Stat-pills strip (used in latest_tweets) */
.stat-pills {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.stat-pill {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
}
.stat-pill:hover { background: var(--bg-hover); color: var(--text-primary); }
.stat-pill.active {
    background: var(--text-primary); color: var(--bg-base);
    border-color: var(--text-primary);
}
.stat-pill.pill-postnow.active { background: var(--urg-postnow); border-color: var(--urg-postnow); color: #fff; }
.stat-pill.pill-urgent.active  { background: var(--urg-urgent);  border-color: var(--urg-urgent);  color: #fff; }
.stat-pill.pill-monitor.active { background: var(--urg-monitor); border-color: var(--urg-monitor); color: #fff; }

/* ── claude_analysis history table ───────────────────────────────── */
.history-block {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}
.history-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.history-table { width: 100%; font-size: 12.5px; }
.history-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px; }
.history-table td { padding: 8px 10px; font-family: var(--font-mono); }

/* ── Raw Data filter panel (index.html) ──────────────────────────── */
.filter-panel {
    max-width: 1100px;
    margin: 24px auto 0;
    padding: 20px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.filter-row { margin-bottom: 14px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-row-header {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 8px;
}
.filter-row-header .filter-label { margin: 0; }
.cat-count {
    font-size: 11px; color: var(--text-muted);
    font-family: var(--font-mono);
}
.category-scroll {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.cat-btn {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 13px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: all var(--dur-fast);
    white-space: nowrap;
}
.cat-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }
.cat-btn.active {
    background: var(--accent-red); color: #fff;
    border-color: var(--accent-red);
}
.controls-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}
.ctrl-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctrl-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
}
.ctrl-select {
    height: 38px;
    padding: 0 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.ctrl-select:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-glow);
    outline: none;
}
.mode-hint { font-size: 11px; color: var(--text-muted); }

/* ── Login standalone (no-navbar) page ───────────────────────────── */
.login-box {
    width: 100%; max-width: 400px;
    padding: 36px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin: auto;
}
body.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.login-brand {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.login-brand img { width: 28px; height: 28px; border-radius: 6px; }
.login-brand-text { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.login-title {
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 6px;
}
.login-subtitle {
    font-size: 13.5px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px;
}
.login-box .form-group label {
    display: block;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.login-box .form-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.login-box .form-group input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px var(--accent-red-glow);
}
.login-box .login-btn { width: 100%; margin-top: 8px; padding: 11px; }

/* ── Countdown timer cards (index.html) — neutralize the inline
     bright tint blocks to fit the calm language. The page ships
     each .cd-card with hardcoded inline pastel backgrounds we
     can't strip without touching markup. Override here. ─────────── */
.cd-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.cd-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--color-info);
}
.cd-card#cd-news::before     { background: var(--color-info); }
.cd-card#cd-web::before      { background: var(--color-success); }
.cd-card#cd-names::before    { background: var(--color-purple); }
.cd-card#cd-analysis::before { background: var(--color-warning); }
.cd-card > div:first-child {
    color: var(--text-muted) !important;
}
.cd-card > div:nth-child(2) {
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 17px !important;
}
.cd-card > div:nth-child(3),
.cd-card > div:nth-child(4) {
    color: var(--text-muted) !important;
    font-family: var(--font-mono);
}
.cd-card#cd-news    > div:first-child { color: var(--color-info) !important; }
.cd-card#cd-web     > div:first-child { color: var(--color-success) !important; }
.cd-card#cd-names   > div:first-child { color: var(--color-purple) !important; }
.cd-card#cd-analysis > div:first-child { color: var(--color-warning) !important; }

/* RSS & GDELT panel tiles share the same shape via inline styles —
   the panel root has inline background/border/radius/padding. We
   leave its container as-is; just neutralize the inner tile bgs. */
.fsp-tile { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-md) !important; }

/* Tab btns container used inline by coverage-history (with .tab-count) */
.tab-count { font-family: var(--font-mono); }

/* btn-run mapped to red primary (claude_analysis) */
.btn-run {
    height: 36px; padding: 0 16px;
    background: var(--accent-red); color: #fff;
    border: 1px solid var(--accent-red);
    border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--dur-fast);
}
.btn-run:hover { background: var(--accent-red-hover); border-color: var(--accent-red-hover); transform: translateY(-1px); }
.btn-run:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Tweet text translation block (latest_tweets — inline-styled
     in JS, can't change markup. Selector by .card-translation
     overrides safely.) ─────────────────────────────────────────── */
.xpro-card .card-translation {
    background: var(--color-info-bg) !important;
    border-left-color: var(--color-info) !important;
    color: var(--text-secondary) !important;
}
.xpro-card .card-translation strong { color: var(--color-info) !important; }

/* User-row colored numeric cells (assignment-report) — the page
   ships inline color="#dc3545" etc. on td.num. We don't fight
   those inline styles; they read as intentional emphasis. */

/* ─────────────────────────────────────────────────────────────
   18. PHASE 1 ADDITIONS — page-local bits that are shared by
       more than one Phase 1 page, lifted out of per-page <style>
       blocks. Pages: index, inbox, latest_tweets, starred,
       coverage-history, assignment-report, claude_analysis,
       login, change-password, demo-expired, session-kicked.
   ───────────────────────────────────────────────────────────── */

/* index.html — Raw Data results panel */
.results-wrap {
    max-width: 1100px;
    margin: 16px auto 0;
    padding: 0 16px 60px;
}
.results-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
    padding-top: 4px;
}
.results-info {
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.no-results-icon {
    font-size: 38px; opacity: 0.5;
    margin-bottom: 12px;
}
.result-card .card-body { display: block; }
.result-card .card-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    font-size: 11.5px; color: var(--text-muted);
    margin: 4px 0 8px;
}
.meta-source { font-weight: 600; color: var(--text-secondary); }
.meta-dot    { color: var(--text-faint); }
.meta-badge {
    font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: #fff;
    line-height: 1.4;
}
.card-snippet {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: 4px;
}
.result-card .card-footer {
    margin-top: 10px; padding-top: 0;
    border-top: none;
}
.result-card .card-headline {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14.5px; font-weight: 600;
    line-height: 1.4;
    display: block;
}
.result-card .card-headline:hover { color: var(--color-info); }

/* inbox.html — list + card inner wrapper */
.inbox-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-card-inner { padding: 16px 18px; }
.inbox-card-meta {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.inbox-card-meta .meta-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--text-faint);
    color: transparent;          /* the inline char render */
    flex-shrink: 0;
}
.inbox-card-meta .severity-text strong {
    color: var(--text-primary); font-weight: 700;
}
.inbox-select-cb {
    width: 16px; height: 16px;
    accent-color: var(--color-purple);
    cursor: pointer; flex-shrink: 0;
}
.inbox-attr-text { font-size: 11.5px; color: var(--text-muted); }
.inbox-attr-text strong { color: var(--text-secondary); font-weight: 600; }

/* Reassign popover internals */
.rp-search {
    flex: 1; min-width: 0;
    height: 28px; padding: 0 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    font-size: 12.5px; color: var(--text-primary);
    font-family: inherit;
}
.rp-search:focus { outline: none; border-color: var(--accent-red); box-shadow: 0 0 0 3px var(--accent-red-glow); }
.rp-list {
    max-height: 240px; overflow-y: auto;
    padding: 6px;
}
.rp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 6px;
    cursor: pointer;
    transition: background var(--dur-fast);
}
.rp-item:hover { background: var(--bg-hover); }
.rp-name { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.rp-role {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-hover);
    padding: 1px 7px; border-radius: var(--radius-pill);
}
.rp-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--border-subtle);
    text-align: right;
}
.rp-cancel {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 12px;
    cursor: pointer; padding: 4px 8px;
    font-family: inherit;
}
.rp-cancel:hover { color: var(--text-primary); }

/* Timeline entries inside the history-panel */
.tl-text { font-size: 12.5px; color: var(--text-secondary); }
.tl-text strong { color: var(--text-primary); }
.tl-time {
    font-size: 10.5px; color: var(--text-faint);
    font-family: var(--font-mono); margin-top: 2px;
}
.tl-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--text-faint); flex-shrink: 0;
}
.tl-dot.ev-assigned   { background: var(--color-info); }
.tl-dot.ev-reassigned { background: var(--color-purple); }
.tl-dot.ev-received   { background: var(--color-purple); }
.tl-dot.ev-status     { background: var(--color-warning); }
.tl-line {
    width: 1px; min-height: 14px;
    background: var(--border-subtle);
    margin: 4px auto 0;
}

/* Skeleton card */
.tb-skel-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 10px;
}
.tb-skel-card .skeleton { margin-bottom: 8px; }
.tb-skel-card .skeleton:last-child { margin-bottom: 0; }
.tb-skel-line.lg { height: 14px; }
.tb-skel-line.sm { height: 10px; }

/* latest_tweets.html — assign menu popover */
.assign-wrap { position: relative; }
.assign-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px); left: 0;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: var(--radius-md);
    box-shadow: var(--menu-shadow);
    min-width: 140px;
    padding: 4px;
    z-index: 50;
}
.assign-menu.open { display: flex; flex-direction: column; gap: 2px; }
.assign-menu button {
    background: transparent; border: none;
    padding: 8px 12px;
    font-size: 12.5px; text-align: left;
    cursor: pointer; color: var(--text-secondary);
    font-family: inherit;
    border-radius: 5px;
}
.assign-menu button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* latest_tweets — chip variants used by xpro-card */
.xpro-card .chip.score-high { background: var(--color-danger-bg);  color: var(--color-danger); }
.xpro-card .chip.score-mid  { background: var(--color-warning-bg); color: var(--color-warning); }
.xpro-card .chip.score-low  { background: var(--bg-hover);         color: var(--text-secondary); }
.xpro-card .chip.city       { background: var(--color-success-bg); color: var(--color-success); }
.xpro-card .chip.cat        { background: var(--color-info-bg);    color: var(--color-info); }
.xpro-card .chip.reach      { background: var(--color-purple-bg);  color: var(--color-purple); }

/* Parties block as built inline by latest_tweets JS — neutralize the
   inline pastel backgrounds + lift left-rule to semantic tokens. */
.xpro-card .card-parties > div {
    background: var(--bg-inset) !important;
    color: var(--text-primary) !important;
}
.xpro-card .card-parties > div:first-child {
    border-left-color: var(--color-danger) !important;
}
.xpro-card .card-parties > div:last-child:not(:first-child) {
    border-left-color: var(--color-info) !important;
}
.xpro-card .card-parties > div > div:first-child {
    color: var(--text-muted) !important;
}
.xpro-card .card-parties > div > div:nth-child(2) {
    color: var(--text-primary) !important;
}
.xpro-card .card-parties > div > div:nth-child(3) {
    color: var(--text-muted) !important;
}

/* claude_analysis.html — page-header layout + claude badge */
.page-title-block { min-width: 0; }
.claude-badge {
    display: inline-flex; align-items: center;
    gap: 5px;
    background: var(--color-purple-bg);
    color: var(--color-purple);
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.02em;
}

/* claude_analysis toast (single floating element) */
#toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--text-primary); color: var(--bg-base);
    padding: 10px 16px; border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    z-index: 9999;
    display: none;
    box-shadow: var(--shadow-elevated);
}
body.premium-dark #toast {
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-medium);
}

/* assignment-report — summary-grid stat-card variant
   (the page renders <stat-label/value/sub> stack — works with §9 already
    but the icon-less layout looks tighter at 180px min, so loosen.) */
#summaryGrid.summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 24px;
}
#summaryGrid .stat-card {
    padding: 14px 18px;
}
#summaryGrid .stat-card .stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px; font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 2px 0;
    letter-spacing: -0.02em;
}
#summaryGrid .stat-card .stat-label {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
}
#summaryGrid .stat-card .stat-sub {
    font-size: 11px; color: var(--text-faint); margin-top: 2px;
}

/* assignment-report — table row numeric columns inherit tabular-nums */
#userTable td.num, #assignTable td.num { font-family: var(--font-mono); }

/* coverage-history — premium 3-up stats row */
.stats-row.coverage-stats {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) {
    .stats-row.coverage-stats { grid-template-columns: 1fr; }
}

/* Demo-expired / session-kicked — standalone landing pages.
   These pages don't include the navbar; they ship their own
   ambient-glow background + glass card. Keep them dark always
   (intentional per the v2 design — both are end-of-session
   states that feel right on a near-black canvas, regardless of
   the user's saved theme). */
body.auth-edge {
    background: #07070C !important;
    color: #E2E8F0 !important;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px;
    overflow: hidden;
    position: relative;
    font-family: var(--font-sans);
}
body.auth-edge::before,
body.auth-edge::after {
    content: '';
    position: fixed;
    width: 600px; height: 600px;
    pointer-events: none;
}
body.auth-edge::before {
    top: -200px; left: -200px;
    background: radial-gradient(circle, rgba(220,38,38,0.06) 0%, transparent 70%);
}
body.auth-edge::after {
    bottom: -240px; right: -240px;
    width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(124,58,237,0.05) 0%, transparent 70%);
}
body.auth-edge .wordmark {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 44px;
    position: relative; z-index: 1;
}
body.auth-edge .wordmark img {
    width: 30px; height: 30px; border-radius: 6px;
}
body.auth-edge .wordmark-text {
    font-size: 15.5px; font-weight: 700;
    color: #F1F5F9; letter-spacing: -0.01em;
}
body.auth-edge .card {
    width: 100%; max-width: 460px;
    background: rgba(22,22,26,0.85);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 44px 40px;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 30px 60px rgba(0,0,0,0.5);
    text-align: center;
    position: relative; z-index: 1;
}
body.auth-edge .icon-ring {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px;
    background: rgba(220,38,38,0.10);
    border: 1px solid rgba(220,38,38,0.22);
    color: #F87171;
}
body.auth-edge .icon-ring svg { width: 28px; height: 28px; color: currentColor; }
body.auth-edge.session .icon-ring {
    background: rgba(124,58,237,0.10);
    border-color: rgba(124,58,237,0.22);
    color: #A78BFA;
}
body.auth-edge .tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.18);
    color: #F87171;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 18px;
    font-family: var(--font-mono);
}
body.auth-edge.session .tag {
    background: rgba(124,58,237,0.08);
    border-color: rgba(124,58,237,0.20);
    color: #A78BFA;
}
body.auth-edge h1 {
    font-size: 26px; font-weight: 700;
    color: #F8FAFC;
    letter-spacing: -0.025em; line-height: 1.2;
    margin-bottom: 14px;
}
body.auth-edge .subtitle {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.65;
    margin-bottom: 28px;
}
body.auth-edge .features {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 28px;
    text-align: left;
}
body.auth-edge .feature-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 9px 14px;
}
body.auth-edge .feature-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #F87171; flex-shrink: 0;
}
body.auth-edge .feature-text { font-size: 12.5px; color: #CBD5E1; }
body.auth-edge .divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin-bottom: 22px;
}
body.auth-edge .cta-label {
    font-size: 10.5px; color: #64748B; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 12px;
    font-family: var(--font-mono);
}
body.auth-edge .cta-btn {
    display: block; width: 100%;
    padding: 13px 24px;
    background: var(--accent-red);
    color: #fff;
    font-size: 14px; font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
    box-shadow: 0 4px 18px rgba(220,38,38,0.30);
}
body.auth-edge .cta-btn:hover {
    background: var(--accent-red-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(220,38,38,0.36);
}
body.auth-edge.session .cta-btn {
    background: var(--color-purple);
    box-shadow: 0 4px 18px rgba(124,58,237,0.30);
}
body.auth-edge.session .cta-btn:hover {
    background: #6D28D9;
    box-shadow: 0 6px 24px rgba(124,58,237,0.36);
}
body.auth-edge .back-link {
    display: block; margin-top: 14px;
    font-size: 12.5px; color: #64748B;
    text-decoration: none;
}
body.auth-edge .back-link:hover { color: #94A3B8; }
@media (max-width: 520px) {
    body.auth-edge .card { padding: 32px 22px; }
    body.auth-edge h1 { font-size: 22px; }
}

/* login.html standalone — center brand mark above the form card */
body.auth-login {
    background: var(--bg-base);
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px;
    font-family: var(--font-sans);
    color: var(--text-primary);
}

/* ── Final guard: dark mode body must NOT carry premium-light bg
     painted by the early-paint guard once class is applied. ─────── */
html[data-theme="dark"] body.premium-dark,
html[data-theme="light"] body.premium-light {
    transition: background var(--dur-base);
}