/* ==================== Theme Variables ==================== */
:root {
  /* Backgrounds */
  --bg-base: #0a0a0a;
  --bg-surface: #111111;
  --bg-card: #141414;
  --bg-input: #1a1a1a;
  --bg-hover: #1e1e1e;
  --bg-track: #222222;
  --bg-muted: #333333;
  --bg-priority-high: #1a1212;
  --bg-priority-med: #1a1812;

  /* Text */
  --c-primary: #ffffff;
  --c-body: #e5e5e5;
  --c-value: #cccccc;
  --c-secondary: #999999;
  --c-muted: #888888;
  --c-dim: #666666;
  --c-faint: #555555;

  /* Borders & tints */
  --b-subtlest: rgba(255,255,255,0.03);
  --b-subtle: rgba(255,255,255,0.04);
  --b-faint: rgba(255,255,255,0.06);
  --b-default: rgba(255,255,255,0.08);
  --b-medium: rgba(255,255,255,0.1);
  --b-hover: rgba(255,255,255,0.12);
  --b-strong: rgba(255,255,255,0.15);
  --b-focus: rgba(255,255,255,0.2);
  --b-accent: rgba(255,255,255,0.3);
  --b-highlight: rgba(255,255,255,0.4);

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-xl: 0 25px 50px rgba(0,0,0,0.5);
  --shadow-drawer: -4px 0 24px rgba(0,0,0,0.4);
  --shadow-nav: 0 -2px 8px rgba(0,0,0,0.3);

  /* Overlay */
  --overlay-bg: rgba(0,0,0,0.6);

  /* Slider controls */
  --slider-thumb-bg: #ffffff;
  --slider-thumb-hover: #e5e5e5;
  --slider-thumb-border: #333333;
  --score-gradient: linear-gradient(to right, #222222 0%, #888888 50%, #ef4444 100%);
  --score-thumb-border: #555555;

  /* Scrollbar */
  --scrollbar-track: #111111;
  --scrollbar-thumb: #333333;
  --scrollbar-thumb-hover: #555555;
}

:root.light-theme {
  --bg-base: #f8f9fa;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f3f4f6;
  --bg-hover: #f3f4f6;
  --bg-track: #e5e7eb;
  --bg-muted: #d1d5db;
  --bg-priority-high: #fef2f2;
  --bg-priority-med: #fffbeb;

  --c-primary: #111827;
  --c-body: #374151;
  --c-value: #4b5563;
  --c-secondary: #6b7280;
  --c-muted: #6b7280;
  --c-dim: #9ca3af;
  --c-faint: #9ca3af;

  --b-subtlest: rgba(0,0,0,0.02);
  --b-subtle: rgba(0,0,0,0.04);
  --b-faint: rgba(0,0,0,0.08);
  --b-default: rgba(0,0,0,0.1);
  --b-medium: rgba(0,0,0,0.12);
  --b-hover: rgba(0,0,0,0.15);
  --b-strong: rgba(0,0,0,0.2);
  --b-focus: rgba(0,0,0,0.25);
  --b-accent: rgba(0,0,0,0.3);
  --b-highlight: rgba(0,0,0,0.4);

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-xl: 0 25px 50px rgba(0,0,0,0.15);
  --shadow-drawer: -4px 0 24px rgba(0,0,0,0.1);
  --shadow-nav: 0 -2px 8px rgba(0,0,0,0.08);

  --overlay-bg: rgba(0,0,0,0.3);

  --slider-thumb-bg: #ffffff;
  --slider-thumb-hover: #f9fafb;
  --slider-thumb-border: #d1d5db;
  --score-gradient: linear-gradient(to right, #e5e7eb 0%, #9ca3af 50%, #ef4444 100%);
  --score-thumb-border: #9ca3af;

  --scrollbar-track: #f3f4f6;
  --scrollbar-thumb: #d1d5db;
  --scrollbar-thumb-hover: #9ca3af;
}

/* ==================== Type Scale ==================== */
/* 5 stops: xs=10px, sm=12px, base=14px, lg=16px, xl=20px */
:root {
  --t-xs: 0.625rem;
  --t-sm: 0.75rem;
  --t-base: 0.875rem;
  --t-lg: 1rem;
  --t-xl: 1.25rem;
}

/* ==================== Reset & Base ==================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    background: var(--bg-base);
    color: var(--c-body);
    overflow-x: hidden;
    font-size: var(--t-base);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Header */
.header {
    background: var(--bg-surface);
    padding: 0.375rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--b-faint);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-sm);
    color: var(--c-muted);
    flex-wrap: wrap;
}

.header-left h1.brand-logo {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.03em;
    white-space: nowrap;
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.15s ease;
}

.header-left h1.brand-logo:hover {
    opacity: 0.8;
}

.header-sep {
    color: var(--c-faint);
    font-size: var(--t-xs);
}

.header-vix {
    font-weight: 700;
    font-size: var(--t-sm);
    white-space: nowrap;
}

.header-vix-mode {
    font-size: var(--t-xs);
    font-weight: 600;
    opacity: 0.8;
    text-transform: uppercase;
}

.header-pulse {
    font-size: var(--t-sm);
    font-weight: 600;
}

.header-pulse.bullish { color: #10b981; }
.header-pulse.bearish { color: #ef4444; }
.header-pulse.neutral { color: var(--c-muted); }

.header-count {
    font-size: var(--t-sm);
    color: var(--c-dim);
    font-weight: 500;
}

.header-context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-sm);
}

.connection-status {
    font-size: var(--t-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 1rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.connection-status.offline {
    background: rgba(220, 38, 38, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* Sidebar */
.sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--bg-surface);
    border-right: 1px solid var(--b-faint);
    padding: 0.875rem;
    overflow-y: auto;
}

.search-section {
    margin-bottom: 0.5rem;
}

.search-input-wrap {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 0.4375rem 1.75rem 0.4375rem 0.625rem;
    border: 1px solid var(--b-medium);
    border-radius: 0.375rem;
    font-size: var(--t-sm);
    font-family: inherit;
    transition: all 0.2s ease;
    background: var(--bg-input);
    color: var(--c-body);
}

.search-input:focus {
    outline: none;
    border-color: var(--b-accent);
    box-shadow: 0 0 0 3px var(--b-subtle);
}

.search-input::placeholder {
    color: var(--c-faint);
}

.clear-search-x {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--c-faint);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 0.25rem;
}

.clear-search-x:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.etf-excluded-hint {
    margin-top: 0.375rem;
    padding: 0.3125rem 0.5rem;
    font-size: var(--t-xs);
    color: var(--c-faint);
    background: var(--b-subtlest);
    border-left: 2px solid var(--bg-muted);
    border-radius: 0 4px 4px 0;
}

.sidebar h3 {
    font-size: var(--t-xs);
    margin-bottom: 0.5rem;
    color: var(--c-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Segmented filter bar */
.filter-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.seg-btn {
    padding: 0.3125rem 0.5rem;
    background: transparent;
    border: 1px solid var(--b-default);
    border-radius: 0.3125rem;
    color: var(--c-secondary);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    font-family: inherit;
}

.seg-btn:hover {
    background: var(--b-subtle);
    border-color: var(--b-hover);
}

.seg-btn.active {
    background: var(--b-medium);
    border-color: var(--b-focus);
    color: var(--c-primary);
    font-weight: 600;
}

.seg-btn.seg-high.active {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.seg-count {
    font-size: var(--t-xs);
    font-weight: 700;
    opacity: 0.6;
}

.seg-btn.active .seg-count {
    opacity: 1;
}

.seg-more {
    padding: 0.25rem 0.375rem;
    font-size: var(--t-xs);
}

.filter-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1875rem;
    margin-bottom: 0.5rem;
    padding-top: 0.1875rem;
    border-top: 1px solid var(--b-faint);
}

.sidebar-info {
    margin-top: 1rem;
    padding: 0.625rem;
    background: var(--bg-input);
    border-radius: 0.375rem;
    border: 1px solid var(--b-faint);
}

.sidebar-info h4 {
    font-size: var(--t-sm);
    margin-bottom: 0.5rem;
    color: var(--c-body);
    font-weight: 600;
}

.sidebar-info ul {
    list-style: none;
    font-size: var(--t-sm);
    color: var(--c-muted);
}

.sidebar-info li {
    padding: 0.25rem 0;
    padding-left: 0.75rem;
    position: relative;
}

.sidebar-info li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--c-faint);
    font-weight: bold;
}

/* Trade Timeline */
.trade-timeline {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--b-faint);
}

.trade-timeline h4 {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.timeline-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 50px;
}

.timeline-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    cursor: default;
}

.timeline-bar-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 2px 2px 0 0;
    overflow: hidden;
    min-height: 2px;
}

.timeline-bar-seg {
    width: 100%;
}

.timeline-high {
    background: #ef4444;
}

.timeline-med {
    background: #f59e0b;
}

.timeline-empty {
    background: var(--bg-track);
}

.timeline-label {
    font-size: var(--t-xs);
    color: var(--c-faint);
    margin-top: 3px;
    white-space: nowrap;
}

/* Flow Direction Timeline */
.timeline-flow-chart {
    display: flex;
    gap: 2px;
    height: 60px;
}

.flow-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    cursor: default;
}

.flow-bar-bull {
    width: 100%;
    background: #10b981;
    border-radius: 2px 2px 0 0;
    margin-top: auto;
    min-height: 1px;
}

.flow-bar-mid {
    width: 100%;
    height: 1px;
    background: var(--b-medium);
    flex-shrink: 0;
}

.flow-bar-bear {
    width: 100%;
    background: #ef4444;
    border-radius: 0 0 2px 2px;
    margin-bottom: auto;
    min-height: 1px;
}

/* Top Tickers */
.top-tickers {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--b-faint);
}

.top-tickers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.top-tickers-header h4 {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.top-tickers-toggle {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--b-faint);
}

.tt-tog {
    font-size: var(--t-xs);
    font-weight: 500;
    padding: 1px 7px;
    border: none;
    background: transparent;
    color: var(--c-dim);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.01em;
}

.tt-tog + .tt-tog {
    border-left: 1px solid var(--b-faint);
}

.tt-tog.active {
    background: var(--b-faint);
    color: var(--c-primary);
    font-weight: 600;
}

.top-tickers-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 18px;
    cursor: default;
}

.tt-symbol {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-body);
    width: 40px;
    flex-shrink: 0;
}

.tt-bar-track {
    flex: 1;
    height: 10px;
    background: var(--bg-track);
    border-radius: 2px;
    overflow: hidden;
}

.tt-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.tt-row.tt-high .tt-bar-fill { background: #ef4444; opacity: 0.7; }
.tt-row.tt-med  .tt-bar-fill { background: #f59e0b; opacity: 0.55; }
.tt-row.tt-low  .tt-bar-fill { background: #3b82f6; opacity: 0.45; }

.tt-row.tt-high .tt-symbol { color: #ef4444; }
.tt-row.tt-med  .tt-symbol { color: #d97706; }

.tt-val {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-secondary);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.tt-empty {
    font-size: var(--t-xs);
    color: var(--c-faint);
    text-align: center;
    padding: 0.5rem 0;
}

/* Alerts Container */
.alerts-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-base);
}

.alerts-header {
    padding: 0.625rem 1rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--b-faint);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
}

.alerts-header h2 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.01em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Alerts List */
.alerts-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.alerts-list * {
    pointer-events: auto;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--c-dim);
    font-weight: 600;
}

.empty-state p {
    color: var(--c-faint);
}

/* Alert Card */
.alert-card {
    background: var(--bg-card);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--b-faint);
    border-left: 4px solid var(--b-faint);
    transition: all 0.2s ease;
    animation: slideIn 0.3s ease;
    contain: content;
    will-change: transform;
}

.alert-card.sent-bull { border-left-color: #10b981; }
.alert-card.sent-bear { border-left-color: #ef4444; }

.alert-card.alert-highlight {
    animation: highlightBlink 2s ease;
}

@keyframes highlightBlink {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    15%  { box-shadow: 0 0 0 3px rgba(255,255,255,0.15); }
    30%  { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    45%  { box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
    60%  { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    75%  { box-shadow: 0 0 0 2px rgba(255,255,255,0.06); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.alert-card.sent-neutral { border-left-color: #64748b; }


/* 30-day trend label */
.alert-meta-right {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-shrink: 1;
    min-width: 0;
}

.trend-label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: default;
}

.trend-label.trend-bull { color: rgba(16, 185, 129, 0.55); }
.trend-label.trend-bear { color: rgba(239, 68, 68, 0.5); }
.trend-label.trend-flat { color: var(--c-faint); opacity: 0.5; }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-card:hover {
    border-color: var(--b-hover);
    box-shadow: var(--shadow-md);
}

.alert-card.priority-high {
    border-color: rgba(239, 68, 68, 0.2);
    background: var(--bg-priority-high);
}

.alert-card.priority-high:hover {
    border-color: rgba(239, 68, 68, 0.35);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.1);
}

.alert-card.priority-medium {
    border-color: rgba(245, 158, 11, 0.2);
    background: var(--bg-priority-med);
}

.alert-card.priority-medium:hover {
    border-color: rgba(245, 158, 11, 0.35);
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--b-faint);
    flex-wrap: wrap;
    gap: 0.125rem 0.5rem;
}

.alert-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}

.underlying-price {
    font-size: var(--t-sm);
    color: var(--c-muted);
    font-weight: 500;
}

.priority-icon {
    font-size: var(--t-sm);
}

.symbol {
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.01em;
}

.badge {
    font-size: var(--t-xs);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge.repeat {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}

.badge.put-sale {
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
}

.alert-time {
    font-size: var(--t-sm);
    color: var(--c-dim);
    font-weight: 500;
}

.alert-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem 0.75rem;
}

.alert-row {
    display: contents;
}

/* Collapsed essentials row */
.alert-essentials {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--t-sm);
}

.ae-direction {
    font-weight: 700;
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ae-strike {
    color: var(--c-value);
    font-weight: 500;
}

.ae-size {
    color: var(--c-secondary);
    font-weight: 600;
}

.flag-more {
    background: var(--b-faint);
    color: var(--c-dim);
    cursor: pointer;
}

.alert-detail {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.alert-detail .label {
    font-size: var(--t-xs);
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.alert-detail .value {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--c-value);
}

.alert-detail .value.highlight {
    color: var(--c-value);
    font-weight: 700;
}

.earnings-row {
    background: rgba(250, 204, 21, 0.08);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 2px 0;
}
.earnings-date {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}
.earnings-countdown {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}

.alert-flags {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--b-faint);
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}

.flag {
    font-size: var(--t-xs);
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 0.1875rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    position: relative;
}

/* Flag colors — 5 semantic categories */
.flag-signal  { background: rgba(239, 68, 68, 0.12); color: #f87171; }   /* red — high signal */
.flag-context { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }  /* blue — context */
.flag-timing  { background: rgba(250, 204, 21, 0.12); color: #fcd34d; }  /* yellow — timing */
.flag-flow    { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }  /* green — flow */
.flag-info    { background: rgba(100, 116, 139, 0.12); color: #94a3b8; } /* slate — info */

/* Backward compat — old color names map to semantic categories */
.flag-red, .flag-orange { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.flag-purple, .flag-indigo, .flag-violet { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
.flag-yellow, .flag-amber { background: rgba(250, 204, 21, 0.12); color: #fcd34d; }
.flag-green, .flag-emerald, .flag-teal { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; }
.flag-blue, .flag-sky, .flag-cyan, .flag-slate, .flag-pink { background: rgba(100, 116, 139, 0.12); color: #94a3b8; }

/* Tooltip handled by JS */
.flag[data-tip] {
    cursor: default;
}

#flag-tooltip {
    position: fixed;
    background: var(--bg-hover);
    color: var(--c-body);
    font-size: 0.6875rem;
    font-weight: 400;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--b-medium);
}

/* ==================== Why It Scored ==================== */

.why-scored {
    grid-column: 1 / -1;
    font-size: var(--t-sm);
    color: var(--c-muted);
    font-style: italic;
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* ==================== Market Pulse ==================== */

.market-pulse {
    padding: 0.375rem 1.5rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--b-faint);
    font-size: 0.75rem;
    color: var(--c-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    white-space: nowrap;
}

.pulse-label {
    font-weight: 700;
    color: var(--c-secondary);
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.pulse-text {
    color: var(--c-body);
    overflow: hidden;
    text-overflow: ellipsis;
}

.pulse-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
}

.pulse-stat.bullish {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.pulse-stat.bearish {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.pulse-stat.neutral {
    background: var(--b-faint);
    color: var(--c-secondary);
}

/* ==================== Conviction Clusters ==================== */

.cluster-banner {
    margin: 0.5rem 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--b-faint);
    background: var(--bg-card);
    font-size: var(--t-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cluster-banner.cluster-bull {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.04);
}

.cluster-banner.cluster-bear {
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.04);
}

.cluster-direction {
    font-weight: 700;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.0625rem 0.25rem;
    border-radius: 0.1875rem;
}

.cluster-direction.dir-bull {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.cluster-direction.dir-bear {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.cluster-icon {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.cluster-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--c-faint);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.15s ease;
}

.cluster-dismiss:hover {
    color: var(--c-primary);
    background: var(--b-faint);
}

.cluster-ticker {
    cursor: pointer;
    padding: 0.0625rem 0.1875rem;
    margin: -0.0625rem -0.1875rem;
    border-radius: 0.1875rem;
    transition: all 0.15s ease;
}

.cluster-ticker:hover {
    background: var(--b-default);
    color: var(--c-primary);
}

.cluster-text {
    color: var(--c-body);
    line-height: 1.3;
}

.cluster-text strong {
    color: #c4b5fd;
    font-weight: 700;
}

/* ==================== Sector Groups ==================== */

.sector-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sector-toggle-btn {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid var(--b-default);
    background: var(--bg-input);
    color: var(--c-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sector-toggle-btn.active {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.sector-group {
    margin-bottom: 0.75rem;
}

.sector-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--b-faint);
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
}

.sector-group-header:hover {
    background: var(--bg-hover);
}

.sector-name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--c-primary);
}

.sector-meta {
    font-size: 0.6875rem;
    color: var(--c-muted);
}

.sector-sentiment-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--b-default);
    overflow: hidden;
    flex-shrink: 0;
}

.sector-sentiment-fill {
    height: 100%;
    border-radius: 2px;
}

.sector-group-body {
    border: 1px solid var(--b-faint);
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
}

/* ==================== Sector Heatmap ==================== */

.sector-heatmap {
    padding: 0.5rem 0.75rem;
    flex-shrink: 0;
}

.heatmap-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--c-secondary);
}

.heatmap-filter-bar strong {
    color: var(--c-primary);
    font-weight: 700;
}

.heatmap-clear-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--b-default);
    color: var(--c-muted);
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.heatmap-clear-btn:hover {
    background: var(--b-faint);
    color: var(--c-primary);
    border-color: var(--b-hover);
}

.heatmap-row {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
}

.heatmap-row-top {
    height: 56px;
}

.heatmap-row-bottom {
    height: 44px;
}

.heatmap-cell {
    flex-basis: 0;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: filter 0.15s ease, outline 0.15s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.heatmap-cell:hover {
    filter: brightness(1.2);
    outline-color: rgba(255, 255, 255, 0.3);
}

.heatmap-cell-selected {
    outline-color: #60a5fa !important;
    outline-width: 2px;
    filter: brightness(1.15);
}

.heatmap-cell-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}

.heatmap-cell-label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.heatmap-cell-notional {
    font-size: 0.5625rem;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

@media (max-width: 768px) {
    .heatmap-row-top {
        height: 48px;
    }
    .heatmap-row-bottom {
        height: 38px;
    }
    .heatmap-cell {
        min-width: 48px;
    }
    .heatmap-cell-name {
        font-size: 0.6875rem;
    }
    .heatmap-cell-label {
        font-size: 0.5rem;
    }
    .heatmap-cell-notional {
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .heatmap-cell-label {
        display: none;
    }
    .heatmap-cell {
        min-width: 40px;
    }
    .heatmap-row-top {
        height: 42px;
    }
    .heatmap-row-bottom {
        height: 34px;
    }
}

/* ==================== Signal Flow Summary ==================== */

.signal-flow-summary {
    font-size: 0.625rem;
    color: var(--c-muted);
    line-height: 1.3;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== Expand Hint ==================== */

.expand-hint {
    font-size: 0.625rem;
    color: var(--c-faint);
    margin-left: 0.25rem;
}

/* ==================== Expanded Detail Panel ==================== */

.alert-card.expanded {
    padding: 0.75rem 1rem;
}

.alert-card.expanded .alert-body {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem 1rem;
}

.alert-detail-panel {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--b-faint);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    animation: expandIn 0.2s ease;
}

@keyframes expandIn {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 800px; }
}

.detail-section h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}

.detail-section + .detail-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--b-faint);
}

/* Score Breakdown Bars */
.score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.breakdown-row {
    display: grid;
    grid-template-columns: 110px 1fr 48px 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.breakdown-label {
    font-weight: 600;
    color: var(--c-value);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-bar-track {
    height: 8px;
    background: var(--bg-track);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.breakdown-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 0;
}

.breakdown-pts {
    font-weight: 700;
    color: var(--c-body);
    text-align: right;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.breakdown-detail {
    font-size: 0.6875rem;
    color: var(--c-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-total {
    margin-top: 0.375rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--b-medium);
}

.breakdown-total .breakdown-label {
    font-weight: 800;
    color: var(--c-primary);
}

.breakdown-total .breakdown-pts {
    font-weight: 800;
    font-size: 0.75rem;
}

.breakdown-total .breakdown-detail {
    font-weight: 700;
    color: var(--c-value);
}

/* Raw Data Grid */
.raw-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem 1.5rem;
}

.raw-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--b-subtle);
}

.raw-label {
    font-size: 0.6875rem;
    color: var(--c-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.raw-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-body);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.375rem 0.75rem;
    }

    .header-right {
        justify-content: flex-end;
    }

    .stat-box {
        min-width: auto;
        flex: 1;
    }

    .alerts-header {
        padding: 1rem;
    }

    .alerts-list {
        padding: 1rem;
    }
}

/* Signals Banner (replaces Live Feed Panel) */
.signals-banner {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--b-faint);
}

.signals-banner-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.signals-banner-bar:hover {
    background: var(--b-subtlest);
}

.signals-banner-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-faint);
    flex-shrink: 0;
}

.signals-banner-chips {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.signals-banner-chips::-webkit-scrollbar {
    display: none;
}

.signals-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--b-default);
    background: var(--bg-card);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.signals-chip:hover {
    border-color: var(--b-strong);
    background: var(--b-subtle);
}

.signals-chip-active {
    border-color: var(--b-highlight);
    background: var(--b-faint);
    box-shadow: 0 0 0 1px var(--b-focus);
}

.signals-chip strong {
    color: var(--c-primary);
    font-weight: 700;
}

.signals-chip-meta {
    color: var(--c-dim);
    font-size: 0.625rem;
}

.signals-chip-notional {
    color: var(--c-muted);
    font-size: 0.625rem;
    font-weight: 600;
}

.signals-chip-score {
    font-weight: 700;
    font-size: 0.625rem;
}

.signals-chip-more {
    font-size: 0.625rem;
    color: var(--c-faint);
    font-weight: 600;
}

.signals-banner-toggle {
    background: none;
    border: none;
    color: var(--c-faint);
    font-size: 0.625rem;
    cursor: pointer;
    padding: 0.25rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.signals-banner-toggle:hover {
    color: var(--c-primary);
}

.signals-banner-expanded {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid var(--b-faint);
}

.signals-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.125rem;
    max-height: 300px;
    overflow-y: auto;
}

/* Legacy: keep live-feed-panel for mobile tab compat */
.live-feed-panel {
    width: 320px;
    background: var(--bg-surface);
    border-left: 1px solid var(--b-faint);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    display: none;
}

.feed-header {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--b-faint);
    background: var(--bg-card);
}

.feed-header h3 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

.feed-header-top {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.feed-subtitle {
    font-size: 0.6875rem;
    color: var(--c-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.signal-sort-toggle {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.signal-sort-btn {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.signal-sort-btn:hover {
    border-color: var(--b-strong);
    color: var(--c-value);
}

.signal-sort-btn.active {
    background: var(--b-default);
    border-color: var(--b-focus);
    color: var(--c-primary);
}

.feed-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

/* Feed Item */
.feed-item {
    background: var(--bg-card);
    border: 1px solid var(--b-faint);
    border-radius: 0.5rem;
    padding: 0.875rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
    animation: feedSlideIn 0.2s ease;
    will-change: transform;
}

@keyframes feedSlideIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feed-item:hover {
    border-color: var(--b-hover);
    box-shadow: var(--shadow-sm);
    transform: translateX(-2px);
}

.feed-item.priority-high {
    border-left: 3px solid rgba(239, 68, 68, 0.5);
    background: var(--bg-priority-high);
}

.feed-item.priority-medium {
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    background: var(--bg-priority-med);
}

.feed-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.feed-symbol-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feed-priority {
    font-size: 0.75rem;
}

.feed-symbol {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: -0.01em;
}

.feed-type-icon {
    font-size: 0.875rem;
}

.feed-strike {
    font-size: 0.75rem;
    color: var(--c-muted);
    font-weight: 600;
    margin-top: 0.25rem;
}

.feed-metrics {
    display: flex;
    gap: 1rem;
}

.feed-metric {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.feed-time {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.6875rem;
    color: var(--c-faint);
    font-weight: 500;
}

.feed-badge {
    position: absolute;
    bottom: 0.625rem;
    right: 0.625rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

.feed-badge.repeat {
    color: #60a5fa;
}

.empty-icon-small {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

.metric-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-body);
}

.metric-value.highlight {
    color: var(--c-value);
}

.metric-label {
    font-size: 0.625rem;
    color: var(--c-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==================== Settings Panel ==================== */

.settings-btn {
    padding: 0.3125rem 0.625rem;
    background: transparent;
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    color: var(--c-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.settings-btn:hover {
    background: var(--b-subtle);
    border-color: var(--b-focus);
    color: var(--c-primary);
}

.settings-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.settings-panel {
    background: var(--bg-card);
    border-radius: 0.75rem;
    width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.2s ease;
    border: 1px solid var(--b-medium);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--b-faint);
}

.settings-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-primary);
}

.settings-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--c-dim);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.settings-close:hover {
    background: var(--b-faint);
    color: var(--c-primary);
}

.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.settings-section {
    margin-bottom: 1.5rem;
}

.settings-section h3 {
    font-size: 0.8125rem;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 1rem;
}

.weight-total {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border-radius: 0.375rem;
    text-align: center;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.slider-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-value);
    min-width: 145px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.slider-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--b-default);
    color: var(--c-muted);
    font-size: 0.625rem;
    font-weight: 700;
    cursor: help;
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s ease;
}

.slider-tooltip:hover {
    background: var(--b-focus);
    color: var(--c-primary);
}

.slider-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-hover);
    color: var(--c-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    width: 240px;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1001;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--b-medium);
}

.slider-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.weight-slider,
.threshold-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-track);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.weight-slider::-webkit-slider-thumb,
.threshold-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    cursor: pointer;
    border: 2px solid var(--slider-thumb-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

.weight-slider::-webkit-slider-thumb:hover,
.threshold-slider::-webkit-slider-thumb:hover {
    background: var(--slider-thumb-hover);
    transform: scale(1.15);
}

.slider-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-primary);
    min-width: 28px;
    text-align: right;
}

.settings-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--b-faint);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.reset-btn {
    padding: 0.625rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.5rem;
    color: #ef4444;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.reset-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.settings-save-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-save-btn {
    padding: 0.625rem 1.25rem;
    background: var(--c-accent, #0f3460);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.settings-save-btn:hover { opacity: 0.85; }
.settings-save-msg {
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.settings-save-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.settings-save-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c-border);
    border-radius: 0.375rem;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 0.82rem;
    outline: none;
    font-family: inherit;
}
.settings-save-input:focus { border-color: var(--c-accent, #0f3460); }
.settings-save-submit {
    padding: 0.5rem 1rem;
    background: var(--c-accent, #0f3460);
    border: none;
    border-radius: 0.375rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.settings-save-submit:disabled { opacity: 0.4; cursor: default; }
.settings-save-cancel {
    background: none;
    border: none;
    color: var(--c-dim);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}
.settings-save-cancel:hover { color: var(--c-text); }

/* ==================== Collapsible Filter Sections ==================== */

.filter-group {
    margin-bottom: 0.75rem;
    border: 1px solid var(--b-faint);
    border-radius: 0.5rem;
    overflow: hidden;
}

.filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: var(--bg-input);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.filter-group-header:hover {
    background: var(--bg-hover);
}

.filter-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-value);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-group-chevron {
    font-size: 0.75rem;
    color: var(--c-dim);
    transition: transform 0.2s ease;
}

.filter-group-chevron.expanded {
    transform: rotate(90deg);
}

.filter-group-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.filter-group-body.collapsed {
    display: none;
}

/* ==================== Toggle Switch ==================== */

.toggle-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.toggle-switch-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-value);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-track {
    position: absolute;
    inset: 0;
    background: var(--bg-track);
    border-radius: 10px;
    border: 1px solid var(--b-default);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-switch input:checked + .toggle-switch-track {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.5);
}

.toggle-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--c-dim);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.toggle-switch input:checked + .toggle-switch-track::after {
    transform: translateX(16px);
    background: #10b981;
}

/* ==================== Multi-Toggle Chips ==================== */

.multi-toggle-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.multi-toggle-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--c-value);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.multi-toggle-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.multi-toggle-chip {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--b-default);
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    user-select: none;
}

.multi-toggle-chip:hover {
    border-color: var(--b-hover);
    color: var(--c-value);
}

.multi-toggle-chip.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

/* ==================== Active Filter Badge ==================== */

.settings-btn {
    position: relative;
}

.filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: white;
    font-size: 0.5625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ==================== Settings Tabs ==================== */

.settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--b-faint);
    padding: 0 1.5rem;
}

.settings-tab {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.settings-tab:hover {
    color: var(--c-value);
}

.settings-tab.active {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
}

/* ==================== Score Badges ==================== */

.score-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    letter-spacing: 0.025em;
}

.feed-score {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--c-muted);
    background: var(--b-faint);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
}

/* ==================== LOW Priority ==================== */

.alert-card.priority-low {
    border-color: var(--b-faint);
    background: var(--bg-card);
}

.feed-item.priority-low {
    border-left: 3px solid var(--bg-muted);
}

/* ==================== Market Clock ==================== */

.market-clock {
    padding: 0.1875rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

.market-clock.closed {
    background: rgba(220, 38, 38, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.market-clock.open {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.market-clock.open:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

/* ==================== Sort Controls ==================== */

.alerts-header-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.alerts-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.sort-controls {
    position: relative;
}

.sort-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sort-trigger:hover {
    background: var(--b-subtle);
    border-color: var(--b-hover);
    color: var(--c-primary);
}

.sort-panel {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    min-width: 8rem;
}

.sort-pill {
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-align: left;
}

.sort-pill:hover {
    background: var(--b-subtle);
}

.sort-pill.active {
    background: var(--b-default);
    color: var(--c-primary);
}

.sort-pill-arrow {
    font-size: 0.5625rem;
}

.sort-arrow {
    font-size: 0.5625rem;
    opacity: 0.7;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.page-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled) {
    background: var(--b-subtle);
    border-color: var(--b-hover);
}

.page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.page-info {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--c-faint);
    min-width: 3rem;
    text-align: center;
}

/* ==================== Score Filter ==================== */

.score-filter-section {
    margin-bottom: 0.625rem;
}

.score-filter-section h3 {
    margin-bottom: 0.375rem;
}

.score-filter-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.score-filter-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--score-gradient);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.score-filter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    cursor: pointer;
    border: 2px solid var(--score-thumb-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
}

.score-filter-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.score-filter-value {
    font-size: var(--t-base);
    font-weight: 700;
    min-width: 32px;
    text-align: right;
}

/* ==================== View Mode Toggle ==================== */

.view-toggle {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--b-medium);
}

.toggle-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.toggle-btn.active {
    background: var(--b-medium);
    color: var(--c-primary);
}

.toggle-btn:hover:not(.active) {
    background: var(--b-subtle);
}

.view-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.data-date-badge {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--c-dim);
    background: var(--b-subtle);
    padding: 0.1875rem 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ==================== Range Picker ==================== */

.range-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.range-slider {
    width: 100px;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--bg-track);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--slider-thumb-bg);
    cursor: pointer;
    border: 2px solid var(--slider-thumb-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.range-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--c-value);
    min-width: 28px;
}

/* ==================== History Note ==================== */

.history-note {
    font-size: 0.75rem;
    color: var(--c-faint);
    font-style: italic;
}

/* ==================== Loading State ==================== */

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--c-dim);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg-track);
    border-top-color: var(--c-muted);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==================== Unified Signal Rows ==================== */

.signal-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.375rem 0.625rem;
    margin-bottom: 0.125rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    animation: feedSlideIn 0.2s ease;
}

.signal-row:hover {
    background: var(--b-subtlest);
    border-color: var(--b-faint);
    box-shadow: inset 3px 0 0 var(--b-focus);
}

.signal-row.signal-active {
    background: var(--b-faint);
    border-color: var(--b-medium);
    box-shadow: inset 3px 0 0 var(--b-highlight), 0 0 0 1px var(--b-faint);
}

.signal-rank {
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 1.75rem;
    text-align: center;
    color: var(--c-faint);
    padding-top: 0.125rem;
    flex-shrink: 0;
}

.signal-body {
    flex: 1;
    min-width: 0;
}

.signal-top-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.signal-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--c-primary);
    letter-spacing: 0.025em;
}

.score-dot {
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 0.125rem 0.4375rem;
    border-radius: 999px;
    line-height: 1;
}

.sentiment-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.signal-time {
    font-size: 0.6875rem;
    color: var(--c-faint);
    margin-left: auto;
    flex-shrink: 0;
}

.signal-bottom-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--c-dim);
}

.signal-count {
    white-space: nowrap;
}

.activity-bar-track {
    flex: 1;
    height: 3px;
    background: var(--bg-track);
    border-radius: 2px;
    min-width: 30px;
    max-width: 80px;
    overflow: hidden;
}

.activity-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.signal-notional {
    color: var(--c-muted);
    font-weight: 600;
    white-space: nowrap;
}

.signal-badge {
    font-size: 0.59375rem;
    font-weight: 700;
    padding: 0.0625rem 0.3125rem;
    border-radius: 0.1875rem;
    white-space: nowrap;
    line-height: 1.2;
}

.signal-badge.high {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.signal-badge.ps {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.12);
}

.signal-badge.unusual {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.12);
}

/* ==================== Ticker Frequency Badge ==================== */

.badge.ticker-freq {
    background: rgba(124, 58, 237, 0.12);
    color: #a78bfa;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

/* ==================== Responsive ==================== */

@media (max-width: 768px) {
    .settings-panel {
        width: 95vw;
        max-height: 90vh;
    }

    .slider-label {
        min-width: 90px;
        font-size: 0.75rem;
    }

    .slider-tooltip::after {
        left: 50%;
        top: calc(100% + 8px);
        transform: translateX(-50%);
        width: 200px;
    }

    .view-toggle {
        order: -1;
    }

    .range-picker {
        order: -1;
    }

    .range-slider {
        width: 70px;
    }

    .alerts-header-controls {
        gap: 0.375rem;
    }
}

/* ==================== Spread Groups ==================== */

.spread-group {
    grid-column: 1 / -1;
    border: 2px solid rgba(129, 140, 248, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--bg-card);
    animation: slideIn 0.3s ease;
}

.spread-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--b-faint);
    flex-wrap: wrap;
}

.spread-type-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    background: #4f46e5;
    color: white;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.spread-symbol {
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.01em;
}

.spread-sentiment {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.spread-net {
    font-size: 0.75rem;
    font-weight: 600;
    color: #a5b4fc;
    margin-left: auto;
}

.spread-group-legs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
}

.spread-group-legs .alert-card {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--b-faint);
    animation: none;
}

.spread-group-legs .alert-card:last-child {
    border-right: none;
}

.spread-group-legs .alert-card:hover {
    transform: none;
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Sentiment colors */
.spread-bullish {
    border-color: rgba(134, 239, 172, 0.3);
}

.spread-bullish .spread-group-header {
    background: rgba(16, 185, 129, 0.06);
    border-bottom-color: rgba(134, 239, 172, 0.15);
}

.spread-bullish .spread-type-badge {
    background: #16a34a;
}

.spread-bullish .spread-sentiment {
    background: rgba(22, 163, 74, 0.1);
    color: #4ade80;
}

.spread-bullish .spread-net {
    color: #4ade80;
}

.spread-bearish {
    border-color: rgba(252, 165, 165, 0.3);
}

.spread-bearish .spread-group-header {
    background: rgba(239, 68, 68, 0.06);
    border-bottom-color: rgba(252, 165, 165, 0.15);
}

.spread-bearish .spread-type-badge {
    background: #dc2626;
}

.spread-bearish .spread-sentiment {
    background: rgba(220, 38, 38, 0.1);
    color: #f87171;
}

.spread-bearish .spread-net {
    color: #f87171;
}

.spread-neutral {
    border-color: rgba(252, 211, 77, 0.3);
}

.spread-neutral .spread-group-header {
    background: rgba(245, 158, 11, 0.06);
    border-bottom-color: rgba(252, 211, 77, 0.15);
}

.spread-neutral .spread-type-badge {
    background: #d97706;
}

.spread-neutral .spread-sentiment {
    background: rgba(217, 119, 6, 0.1);
    color: #fbbf24;
}

.spread-neutral .spread-net {
    color: #fbbf24;
}

.spread-volatile {
    border-color: rgba(167, 139, 250, 0.3);
}
.spread-volatile .spread-group-header {
    background: rgba(139, 92, 246, 0.06);
    border-bottom-color: rgba(167, 139, 250, 0.15);
}
.spread-volatile .spread-type-badge { background: #7c3aed; }
.spread-volatile .spread-sentiment { background: rgba(124, 58, 237, 0.1); color: #a78bfa; }
.spread-volatile .spread-net { color: #a78bfa; }

.spread-leg-count {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-muted);
    border: 1px solid var(--b-faint);
}

@media (max-width: 768px) {
    .spread-group-legs {
        grid-template-columns: 1fr;
    }

    .spread-group-legs .alert-card {
        border-right: none;
        border-bottom: 1px solid var(--b-faint);
    }

    .spread-group-legs .alert-card:last-child {
        border-bottom: none;
    }

    .spread-group-header {
        padding: 0.5rem 1rem;
    }
}

/* ==================== Roll Groups ==================== */

.roll-group {
    grid-column: 1 / -1;
    border: 2px solid rgba(167, 139, 250, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--bg-card);
    animation: slideIn 0.3s ease;
}

.roll-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--b-faint);
    flex-wrap: wrap;
}

.roll-type-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    background: #7c3aed;
    color: white;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.roll-symbol {
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.01em;
}

.roll-confidence {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: #c4b5fd;
}

.roll-sentiment {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.roll-net {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c4b5fd;
    margin-left: auto;
}

.roll-oi-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.03em;
}

.roll-oi-badge.confirmed {
    background: rgba(22, 163, 74, 0.12);
    color: #4ade80;
}

.roll-oi-badge.likely {
    background: rgba(13, 148, 136, 0.12);
    color: #5eead4;
}

.roll-oi-badge.denied {
    background: rgba(100, 116, 139, 0.12);
    color: #94a3b8;
}

.roll-group-legs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.roll-group-legs .alert-card {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--b-faint);
    animation: none;
}

.roll-group-legs .alert-card:last-child {
    border-right: none;
}

.roll-group-legs .alert-card:hover {
    transform: none;
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* Roll sentiment colors */
.roll-bullish {
    border-color: rgba(134, 239, 172, 0.3);
}

.roll-bullish .roll-group-header {
    background: rgba(16, 185, 129, 0.06);
    border-bottom-color: rgba(134, 239, 172, 0.15);
}

.roll-bullish .roll-type-badge {
    background: #16a34a;
}

.roll-bullish .roll-sentiment {
    background: rgba(22, 163, 74, 0.1);
    color: #4ade80;
}

.roll-bullish .roll-net {
    color: #4ade80;
}

.roll-bearish {
    border-color: rgba(252, 165, 165, 0.3);
}

.roll-bearish .roll-group-header {
    background: rgba(239, 68, 68, 0.06);
    border-bottom-color: rgba(252, 165, 165, 0.15);
}

.roll-bearish .roll-type-badge {
    background: #dc2626;
}

.roll-bearish .roll-sentiment {
    background: rgba(220, 38, 38, 0.1);
    color: #f87171;
}

.roll-bearish .roll-net {
    color: #f87171;
}

.roll-neutral {
    border-color: rgba(167, 139, 250, 0.3);
}

.roll-neutral .roll-group-header {
    background: rgba(124, 58, 237, 0.06);
    border-bottom-color: rgba(167, 139, 250, 0.15);
}

.roll-neutral .roll-type-badge {
    background: #7c3aed;
}

.roll-neutral .roll-sentiment {
    background: rgba(124, 58, 237, 0.1);
    color: #c4b5fd;
}

.roll-neutral .roll-net {
    color: #c4b5fd;
}

@media (max-width: 768px) {
    .roll-group-legs {
        grid-template-columns: 1fr;
    }

    .roll-group-legs .alert-card {
        border-right: none;
        border-bottom: 1px solid var(--b-faint);
    }

    .roll-group-legs .alert-card:last-child {
        border-bottom: none;
    }

    .roll-group-header {
        padding: 0.5rem 1rem;
    }
}

/* ==================== Mobile Nav Bar ==================== */

.mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Bottom nav bar */
    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-surface);
        border-top: 1px solid var(--b-faint);
        z-index: 900;
        height: 56px;
        box-shadow: var(--shadow-nav);
    }

    .mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        background: none;
        border: none;
        color: var(--c-faint);
        font-family: inherit;
        cursor: pointer;
        padding: 0.375rem 0;
        transition: color 0.15s ease;
    }

    .mobile-nav-btn.active {
        color: var(--c-primary);
    }

    .mobile-nav-icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    .mobile-nav-label {
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    /* Tab-driven panel visibility */
    .main-content {
        display: block;
        padding-bottom: 56px;
        overflow-y: auto;
    }

    .sidebar,
    .alerts-container {
        display: none;
        width: 100%;
    }

    .mobile-tab-alerts .alerts-container {
        display: flex;
    }

    .mobile-tab-filters .sidebar {
        display: block;
    }

    /* Header simplification */
    .header {
        padding: 0.375rem 0.75rem;
    }

    .header-left h1.brand-logo {
        font-size: 0;
    }

    .header-left h1.brand-logo::after {
        content: "SOD";
        font-size: var(--t-sm);
    }

    .header-left {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 0.375rem;
    }

    .header-right {
        flex-wrap: wrap;
    }

    .header-pulse {
        display: none;
    }

    /* Hide VIX mode text on small screens */
    .header-vix-mode {
        display: none;
    }

    /* Alerts list and cards */
    .alerts-list {
        padding: 0.75rem;
    }

    .alert-card {
        padding: 0.5rem 0.625rem;
        contain: none;
        will-change: auto;
    }

    /* Tighter cards on mobile */
    .alert-essentials {
        gap: 0.375rem;
        font-size: var(--t-xs);
    }

    .ae-direction {
        font-size: var(--t-xs);
    }

    .alerts-container {
        overflow: visible;
    }

    .alert-header {
        flex-wrap: nowrap;
        gap: 0.375rem;
        overflow: visible;
    }

    .alert-title {
        gap: 0.3rem;
        flex: 1 1 0%;
        min-width: 0;
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .alert-title .symbol {
        font-size: 0.875rem;
    }

    .alert-title .underlying-price {
        font-size: 0.6875rem;
    }

    .alert-meta-right {
        flex: 0 0 auto;
        min-width: auto;
        overflow: visible;
        gap: 0.25rem;
    }

    .trend-label {
        display: none;
    }

    .alert-time {
        font-size: 0.6875rem;
        white-space: nowrap;
        overflow: visible;
    }

    .alert-body {
        grid-template-columns: repeat(2, 1fr);
    }

    .alerts-header {
        padding: 0.5rem 0.75rem;
        gap: 0.25rem 0.5rem;
    }

    .alerts-header h2 {
        font-size: 0.8125rem;
    }

    .sector-toggle-btn,
    .sort-trigger,
    .page-btn {
        font-size: 0.5625rem;
        padding: 0.1875rem 0.375rem;
    }

    .page-info {
        font-size: 0.5625rem;
        min-width: 2rem;
    }

    .sort-panel {
        max-width: calc(100vw - 1rem);
    }

    .breakdown-row {
        grid-template-columns: 90px 1fr 40px;
    }

    .breakdown-detail {
        display: none;
    }

    .raw-data-grid {
        grid-template-columns: 1fr;
    }

    /* Signals banner mobile */
    .signals-banner-chips {
        max-width: calc(100vw - 120px);
    }

    .signals-banner-grid {
        grid-template-columns: 1fr;
    }

    .signal-row {
        padding: 0.5rem 0.625rem;
        gap: 0.375rem;
    }

    .signal-bottom-line {
        flex-wrap: wrap;
    }

    .activity-bar-track {
        max-width: 50px;
    }

    /* Sidebar full-width */
    .sidebar {
        border-right: none;
        min-width: unset;
    }
}

/* ==================== Very Small Screens ==================== */

@media (max-width: 480px) {
    .settings-panel {
        width: 100vw;
        border-radius: 0;
    }

    .slider-row {
        flex-wrap: wrap;
    }

    .slider-label {
        width: 100%;
        min-width: unset;
    }
}

/* ==================== Stock Detail Drawer ==================== */

.symbol.symbol-clickable {
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0.125rem 0.25rem;
    margin: -0.125rem -0.25rem;
    border-radius: 0.25rem;
}

.symbol.symbol-clickable:hover {
    background: var(--b-default);
    color: var(--c-primary);
}

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.stock-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--bg-surface);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-drawer);
    animation: drawerSlideIn 0.25s ease;
}

@keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.drawer-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--b-faint);
    background: var(--bg-card);
    flex-shrink: 0;
}

.drawer-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.drawer-symbol {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.02em;
    margin: 0;
}

.drawer-name {
    font-size: 0.8125rem;
    color: var(--c-dim);
    font-weight: 500;
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--c-dim);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.drawer-close:hover {
    background: var(--b-faint);
    color: var(--c-primary);
}

.drawer-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.drawer-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -0.02em;
}

.drawer-change {
    font-size: 0.9375rem;
    font-weight: 700;
}

.drawer-change.positive { color: #10b981; }
.drawer-change.negative { color: #ef4444; }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.drawer-chart-controls {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.drawer-chart-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.drawer-chart-btn:hover {
    background: var(--b-subtle);
    border-color: var(--b-hover);
}

.drawer-chart-btn.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--bg-base);
}

.drawer-chart {
    width: 100%;
    height: 300px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--b-default);
    margin-bottom: 1.25rem;
}

.drawer-section {
    margin-bottom: 1.25rem;
}

.drawer-section h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--b-subtle);
}

.drawer-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.drawer-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.drawer-stat-label {
    font-size: 0.6875rem;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.drawer-stat-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--c-body);
}

.drawer-empty {
    font-size: 0.8125rem;
    color: var(--c-faint);
    font-style: italic;
    padding: 0.75rem 0;
}

.drawer-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.drawer-alert-row {
    display: grid;
    grid-template-columns: 28px 70px 1fr 70px 36px 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    border: 1px solid var(--b-subtle);
    transition: background 0.15s ease;
}

.drawer-alert-row.clickable {
    cursor: pointer;
}

.drawer-alert-row:hover {
    background: var(--b-subtlest);
}

.drawer-alert-row.expanded {
    border-color: var(--b-hover);
    background: var(--b-subtlest);
}

.drawer-alert-row.priority-high {
    border-left: 3px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

.drawer-alert-row.priority-medium {
    border-left: 3px solid rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.05);
}

.drawer-alert-type {
    font-weight: 800;
    font-size: 0.75rem;
}

.drawer-alert-strike { font-weight: 600; color: var(--c-value); }
.drawer-alert-exp { color: var(--c-dim); font-size: 0.75rem; }
.drawer-alert-size { font-weight: 600; color: var(--c-body); }
.drawer-alert-score { font-weight: 700; font-size: 0.75rem; }
.drawer-alert-time { color: var(--c-faint); font-size: 0.6875rem; text-align: right; }

.drawer-alert-detail {
    grid-column: 1 / -1;
    padding-top: 0.375rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--b-faint);
}

.drawer-alert-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.drawer-detail-label {
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--c-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.drawer-detail-value {
    font-weight: 600;
    color: var(--c-value);
    font-size: 0.75rem;
}

.drawer-alert-flags {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-top: 0.375rem;
}

.drawer-see-all-btn {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-muted);
    background: var(--b-subtle);
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.drawer-see-all-btn:hover {
    background: var(--b-default);
    border-color: var(--b-hover);
    color: var(--c-primary);
}

@media (max-width: 768px) {
    .stock-drawer {
        width: 100vw;
    }

    .drawer-alert-row {
        grid-template-columns: 24px 60px 1fr 60px 30px;
        font-size: 0.75rem;
    }

    .drawer-alert-time {
        display: none;
    }
}

/* ==================== Theme Toggle ==================== */

.theme-toggle {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid var(--b-default);
    border-radius: 0.375rem;
    color: var(--c-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.theme-toggle:hover {
    background: var(--b-subtle);
    border-color: var(--b-focus);
    color: var(--c-primary);
}

/* Firefox scrollbar */
* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

/* ==================== Mobile Tap Highlight ==================== */

button,
.alert-card,
.feed-item,
.mobile-nav-btn,
.filter-btn,
.sort-trigger,
.sort-pill,
.page-btn,
.signal-sort-btn,
.spread-group,
.roll-group,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}


/* ==================== Pull to Refresh ==================== */

.pull-to-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    color: var(--c-muted);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.pull-spinner {
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}
.pull-spinner.spinning {
    animation: pullSpin 0.8s linear infinite;
}
@keyframes pullSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.pull-text {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==================== Legal Footer ==================== */
.legal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--b-faint);
    background: var(--bg-base);
    font-size: 0.6875rem;
    color: var(--c-dim);
    flex-wrap: wrap;
}
.legal-disclaimer {
    font-style: italic;
}
.legal-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.legal-links button {
    background: none;
    border: none;
    color: var(--c-muted);
    font-size: 0.6875rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-links button:hover {
    color: var(--c-body);
}
.legal-sep {
    color: var(--c-faint);
}

/* Legal Modal */
.legal-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.legal-modal {
    background: var(--bg-surface);
    border: 1px solid var(--b-default);
    border-radius: 12px;
    max-width: 640px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}
.legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--b-faint);
}
.legal-modal-header h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--c-primary);
}
.legal-modal-close {
    background: none;
    border: none;
    color: var(--c-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.legal-modal-close:hover {
    color: var(--c-primary);
}
.legal-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.legal-text {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--c-body);
    margin: 0;
}
.legal-updated {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--c-dim);
    font-style: italic;
}

@media (max-width: 768px) {
    .legal-footer {
        padding-bottom: calc(0.75rem + 56px); /* space for mobile nav */
    }
}

/* ==================== Auth ==================== */
.sign-in-btn {
    background: var(--c-accent, #0f3460);
    color: #fff;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.sign-in-btn:hover { opacity: 0.85; }

.auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}
.auth-modal {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    width: 380px;
    max-width: 92vw;
    padding: 28px 24px 24px;
    position: relative;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.auth-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--c-dim);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}
.auth-close:hover { color: var(--c-text); }

.auth-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 16px;
    text-align: center;
}
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--c-border);
}
.auth-tabs button {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 4px;
    color: var(--c-dim);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.auth-tabs button.active {
    color: var(--c-accent, #0f3460);
    border-bottom-color: var(--c-accent, #0f3460);
}
.auth-tabs button:hover:not(.active) {
    color: var(--c-text);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.auth-input:focus {
    border-color: var(--c-accent, #0f3460);
}
.auth-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: var(--c-accent, #0f3460);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn:disabled { opacity: 0.5; cursor: default; }

.auth-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: center;
}
.auth-success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: center;
}
.auth-link {
    display: block;
    margin-top: 12px;
    text-align: center;
    background: none;
    border: none;
    color: var(--c-dim);
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
}
.auth-link:hover { color: var(--c-text); }

.auth-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #10b981;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 3000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    animation: fadeIn 0.2s ease-out;
}

@media (max-width: 768px) {
    .sign-in-btn { padding: 4px 10px; font-size: 0.72rem; }
    .user-email { max-width: 80px; font-size: 0.72rem; }
    .auth-modal { padding: 20px 16px 16px; }
}

/* ==================== Account Page ==================== */
.account-btn {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-btn:hover {
    border-color: var(--c-accent, #0f3460);
    background: rgba(15, 52, 96, 0.1);
}

.account-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.15s ease-out;
}
.account-panel {
    width: 400px;
    max-width: 92vw;
    height: 100%;
    background: rgba(12, 5, 28, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: 1px solid rgba(80, 50, 160, 0.2);
    overflow-y: auto;
    padding: 24px 20px 40px;
    animation: slideInRight 0.2s ease-out;
}
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.account-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}
.account-close {
    background: none;
    border: none;
    color: var(--c-dim);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.account-close:hover { color: var(--c-text); }

.account-section {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}
.account-info {
    margin-bottom: 16px;
}
.account-email {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text);
    margin-bottom: 4px;
}
.account-plan {
    font-size: 0.82rem;
    color: var(--c-dim);
    text-transform: capitalize;
}
.account-joined {
    font-size: 0.78rem;
    color: var(--c-dim);
    margin-top: 2px;
}
.account-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.account-signout-btn {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}
.account-signout-btn:hover {
    border-color: var(--c-text);
}
.account-changepw-toggle {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-dim);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.account-changepw-toggle:hover {
    border-color: var(--c-text);
    color: var(--c-text);
}
.change-password-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border);
}

.account-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.account-section-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}
.account-save-btn {
    background: var(--c-accent, #0f3460);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.account-save-btn:hover { opacity: 0.85; }

.save-search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.save-search-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 0.85rem;
    outline: none;
}
.save-search-input:focus { border-color: var(--c-accent, #0f3460); }
.save-search-submit {
    background: var(--c-accent, #0f3460);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.save-search-submit:disabled { opacity: 0.4; cursor: default; }

.account-loading, .account-empty {
    color: var(--c-dim);
    font-size: 0.85rem;
    text-align: center;
    padding: 20px 0;
    line-height: 1.5;
}

.account-link-btn {
    background: none;
    border: none;
    color: var(--c-accent, #0f3460);
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-family: inherit;
}
.account-link-btn:hover { opacity: 0.8; }

.saved-searches-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.saved-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg);
    transition: border-color 0.15s;
}
.saved-search-card:hover {
    border-color: var(--c-accent, #0f3460);
}
.saved-search-main {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}
.saved-search-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-search-desc {
    font-size: 0.75rem;
    color: var(--c-dim);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-search-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.saved-search-action {
    background: none;
    border: none;
    color: var(--c-dim);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.saved-search-action:hover {
    color: var(--c-text);
    background: rgba(255,255,255,0.06);
}
.saved-search-action.danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.saved-search-confirm-delete {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.confirm-delete-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--c-dim);
}
.confirm-delete-yes {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.confirm-delete-yes:hover { background: rgba(239, 68, 68, 0.25); }
.confirm-delete-no {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-dim);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.confirm-delete-no:hover { color: var(--c-text); }

.saved-search-edit {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
}
.saved-search-cancel {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-dim);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    cursor: pointer;
}

/* Danger zone */
.account-danger {
    border-color: rgba(239, 68, 68, 0.25);
}
.account-danger h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ef4444;
    margin: 0 0 12px;
}
.account-delete-btn {
    background: none;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.account-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
}
.delete-confirm p {
    color: var(--c-dim);
    font-size: 0.85rem;
    margin: 0 0 14px;
    line-height: 1.5;
}
.delete-confirm-btns {
    display: flex;
    gap: 10px;
}
.delete-confirm-yes {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.delete-confirm-yes:hover { opacity: 0.9; }
.delete-confirm-no {
    background: none;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .account-panel { width: 100%; max-width: 100vw; border-left: none; }
    .account-btn { max-width: 80px; font-size: 0.72rem; padding: 4px 8px; }
}

/* ==================== Share Modal ==================== */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: shareOverlayIn 0.15s ease-out;
}
@keyframes shareOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.share-modal {
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: 16px;
    max-width: 560px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: shareModalIn 0.2s ease-out;
}
@keyframes shareModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--b-faint);
}
.share-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-primary);
    margin: 0;
}
.share-modal-close {
    background: none;
    border: none;
    color: var(--c-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.share-modal-close:hover {
    background: var(--b-faint);
    color: var(--c-primary);
}
.share-section {
    padding: 16px 24px;
}
.share-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.share-link-row {
    display: flex;
    gap: 8px;
}
.share-link-input {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--b-default);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--c-body);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    outline: none;
    min-width: 0;
}
.share-link-input:focus {
    border-color: var(--b-focus);
}
.share-copy-btn {
    background: var(--b-faint);
    border: 1px solid var(--b-default);
    border-radius: 8px;
    padding: 10px 16px;
    color: var(--c-body);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.share-copy-btn:hover {
    background: var(--b-hover);
    border-color: var(--b-strong);
}
.share-image-preview {
    border: 1px solid var(--b-default);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.share-image-preview img {
    width: 100%;
    display: block;
}
.share-image-actions {
    display: flex;
    gap: 8px;
}
.share-loading {
    padding: 40px 24px;
    text-align: center;
    color: var(--c-muted);
}
.share-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: var(--b-faint);
    border: 1px solid var(--b-default);
    border-radius: 8px;
    color: var(--c-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.share-btn:hover {
    background: var(--b-hover);
    color: var(--c-primary);
}

@media (max-width: 768px) {
    .share-modal {
        width: 95vw;
        max-width: 95vw;
        border-radius: 12px;
    }
    .share-section {
        padding: 12px 16px;
    }
    .share-modal-header {
        padding: 16px 16px 10px;
    }
}

/* ==================== OG Share Card (1200x630, off-screen, captured by html2canvas) ==================== */
/* Uses app CSS variables so it automatically tracks theme/UI changes */
.share-og-card {
    width: 1200px;
    height: 630px;
    overflow: hidden;
}
.og-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-surface) 100%);
    padding: 32px;
    box-sizing: border-box;
}
.og-inner {
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: 20px;
    display: flex;
    overflow: hidden;
}
.og-accent {
    width: 8px;
    flex-shrink: 0;
}
.og-content {
    flex: 1;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.og-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.og-brand {
    font-size: 20px;
    font-weight: 600;
    color: var(--c-dim);
    letter-spacing: 0.5px;
}
.og-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 28px;
    border-radius: 14px;
}
.og-score-num {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}
.og-score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-top: 2px;
}
.og-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 4px 0;
}
.og-symbol {
    font-size: 64px;
    font-weight: 800;
    color: var(--c-primary);
    letter-spacing: -1px;
}
.og-type {
    font-size: 22px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 10px;
}
.og-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 32px;
}
.og-cell-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.og-cell-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--c-body);
}
.og-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--b-faint);
    padding-top: 16px;
}
.og-ts {
    font-size: 16px;
    color: var(--c-dim);
}
.og-tagline {
    font-size: 16px;
    color: var(--c-faint);
    font-style: italic;
}

/* ==================== Bookmarks ==================== */

.bookmark-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--c-dim);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.bookmark-icon-btn:hover {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    transform: scale(1.15);
}

.bookmark-icon-btn.active {
    color: #f59e0b;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.bookmark-icon-btn.active:hover {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.15);
}

.bookmark-count-badge {
    display: inline-block;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    margin-left: 4px;
    border-radius: 7px;
    background: #f59e0b;
    color: #000;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    vertical-align: middle;
}

.bookmarks-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--c-muted);
}

.bookmarks-empty .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.bookmarks-empty h3 {
    color: var(--c-secondary);
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.bookmarks-empty p {
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

.account-bookmark-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--c-secondary);
    font-size: 0.85rem;
}

/* ==================== Backtester ==================== */

@keyframes btFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes btBarGrow {
    from { width: 0; }
}

@keyframes btLoadSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.bt-panel {
    padding: 14px;
    animation: btFadeUp 0.3s ease-out;
}

/* Loading */
.bt-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 5rem 2rem;
}

.bt-loading-bar {
    width: 160px;
    height: 3px;
    background: var(--b-faint);
    border-radius: 2px;
    overflow: hidden;
}

.bt-loading-fill {
    width: 50%;
    height: 100%;
    background: var(--c-dim);
    border-radius: 2px;
    animation: btLoadSlide 1s ease-in-out infinite;
}

.bt-loading-text {
    font-size: 0.75rem;
    color: var(--c-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Empty state */
.bt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    gap: 20px;
}

.bt-empty-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0.15;
}

.bt-empty-line {
    height: 3px;
    border-radius: 2px;
    background: var(--c-muted);
}

.bt-empty-line:nth-child(1) { width: 80px; }
.bt-empty-line:nth-child(2) { width: 56px; }
.bt-empty-line:nth-child(3) { width: 40px; }

.bt-empty-content {
    text-align: center;
}

.bt-empty-tag {
    display: inline-block;
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--c-dim);
    border: 1px solid var(--b-faint);
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.bt-empty-content p {
    font-size: 0.8rem;
    color: var(--c-muted);
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}

/* ---- Summary ---- */

.bt-summary {
    margin-bottom: 16px;
    animation: btFadeUp 0.3s ease-out;
}

.bt-hero-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.bt-hero-stat {
    background: var(--bg-card);
    border: 1px solid var(--b-faint);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bt-hero-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--c-dim);
}

.bt-hero-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bt-hero-value {
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--c-primary);
}

.bt-hero-unit {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.6;
}

.bt-hero-sub {
    font-size: 0.7rem;
    color: var(--c-dim);
    font-variant-numeric: tabular-nums;
}

.bt-wl-w { color: #22c55e; }
.bt-wl-l { color: #ef4444; }
.bt-wl-sep { color: var(--c-dim); opacity: 0.4; }

.bt-winrate-bar {
    flex: 1;
    height: 4px;
    background: var(--b-faint);
    border-radius: 2px;
    overflow: hidden;
    max-width: 80px;
}

.bt-winrate-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease-out;
    animation: btBarGrow 0.8s ease-out;
}

.bt-gain { color: #22c55e; }
.bt-loss { color: #ef4444; }

/* ---- Controls ---- */

.bt-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bt-sort-group, .bt-status-group {
    display: flex;
    gap: 4px;
    background: var(--c-surface, #1a1a2e);
    border-radius: 8px;
    padding: 3px;
}

.bt-sort-btn, .bt-status-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--c-muted, #888);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: capitalize;
}

.bt-sort-btn:hover, .bt-status-btn:hover {
    color: var(--c-text, #eee);
}

.bt-sort-btn.active, .bt-status-btn.active {
    background: var(--c-accent, #3b82f6);
    color: #fff;
}

.bt-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Pick cards ---- */

.bt-picks-list {
    display: flex;
    flex-direction: column;
}

.bt-pick {
    padding: 10px 14px;
    border-bottom: 1px solid var(--b-subtlest);
    transition: background 0.15s ease;
    animation: btFadeUp 0.3s ease-out both;
}

.bt-pick:last-child {
    border-bottom: none;
}

.bt-pick:hover {
    background: var(--b-subtle);
}

.bt-pick-row {
    display: grid;
    grid-template-columns: 120px 1fr auto 36px;
    align-items: center;
    gap: 8px;
}

.bt-pick-id {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bt-pick-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--c-primary);
    letter-spacing: 0.3px;
}

.bt-pick-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 18px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}

.bt-pick-prices {
    display: flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.bt-pick-entry {
    font-size: 0.8rem;
    color: var(--c-muted);
}

.bt-pick-entry::before {
    content: "$";
    opacity: 0.5;
}

.bt-pick-arrow-wrap {
    font-size: 0.85rem;
    line-height: 1;
}

.bt-pick-current {
    font-size: 0.8rem;
    font-weight: 600;
}

.bt-pick-current::before {
    content: "$";
    opacity: 0.5;
}

.bt-pick-result {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: flex-end;
}

.bt-pick-pnl {
    font-weight: 700;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: right;
}

.bt-pick-pnl-bar {
    width: 40px;
    height: 3px;
    background: var(--b-faint);
    border-radius: 2px;
    overflow: hidden;
}

.bt-pick-pnl-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease-out;
    animation: btBarGrow 0.6s ease-out;
}

.bt-pick-days {
    font-size: 0.7rem;
    color: var(--c-dim);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bt-pick-context {
    font-size: 0.7rem;
    color: var(--c-dim);
    margin-top: 4px;
    padding-left: 0;
    letter-spacing: 0.2px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .bt-hero-row {
        grid-template-columns: 1fr 1fr;
    }

    .bt-pick-row {
        grid-template-columns: 100px 1fr auto;
    }

    .bt-pick-days {
        display: none;
    }

    .bt-pick-pnl-bar {
        display: none;
    }
}