/* TradingView-inspired dark theme */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global smooth interactions */
html {
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    /* Prevent iOS rubber-band bounce — app should feel native, not browser-like */
    overscroll-behavior: none;
}

/* Touch-friendly buttons with scale feedback */
button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Institutional: no transitions on buttons (instant feedback) */
button:not([disabled]),
.chart-btn,
.header-nav-link {
    transition: none;
}
/* Panel cards keep subtle transition for content areas */
.panel-card {
    transition: border-color 0.15s ease;
}

/* Loading Overlay - Devircle Text Fill */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #131722;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Skip loader on warm reloads (e.g., iOS Safari tab restore) */
html.skip-loader .loading-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Text Fill Loader */
.fill-loader {
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fill-text-outline,
.fill-text-filled {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 12vw, 96px);
    letter-spacing: 2px;
    display: inline-block;
    -webkit-user-select: none;
    user-select: none;
}

.fill-text-outline {
    color: rgba(255, 255, 255, 0.06);
}

/* Filled layer sits on top, clipped by width */
.fill-text-filled {
    position: absolute;
    top: 0;
    left: 0;
    color: #e8eaed;
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
    /* JP Morgan Jet/Granite dark palette */
    --bg-primary: #101820;
    --bg-secondary: #1a2229;
    --bg-tertiary: #26292b;
    --bg-hover: #2f3336;
    --border-color: #4c505b;
    --border-subtle: #2a2e39;
    --text-primary: #d4d8e1;
    --text-secondary: #84878e;
    --text-muted: #61656e;
    /* Devircle identity -- teal accent (JP Morgan teal family) */
    --accent: #12647E;
    --accent-light: #7ab8cc;
    --accent-dark: #0d4d62;
    --accent-muted: rgba(18, 100, 126, 0.15);
    /* Navigation active indicator (JP Morgan orange) */
    --nav-active: #e06519;
    /* Semantic */
    --accent-blue: #2670a9;
    --accent-green: #00875d;
    --accent-red: #e52135;
    --accent-orange: #f7931a;
    --accent-yellow: #ffeb3b;
    /* Institutional button tokens */
    --btn-radius: 0;
    --btn-letter-spacing: 0.6px;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
    /* Prevent iOS touch behaviors that interfere with chart */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-x pan-y;
}

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

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Live Breaking News Tape */
.news-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 16px;
    height: 28px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease;
}

.news-ticker:hover {
    background: var(--bg-tertiary);
}

.news-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--btn-radius);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    flex: 0 0 auto;
}

.news-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-green);
}

.news-ticker.is-elevated .news-badge {
    border-color: rgba(255, 152, 0, 0.35);
    color: #ffb74d;
}

.news-ticker.is-elevated .news-dot {
    background: #ff9800;
    animation: newsPulse 2s infinite;
}

.news-ticker.is-critical .news-badge {
    border-color: rgba(239, 83, 80, 0.35);
    color: #ef9a9a;
}

.news-ticker.is-critical .news-dot {
    background: #ef5350;
    animation: newsPulse 1.4s infinite;
}

@keyframes newsPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.news-marquee {
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
}

.news-marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    animation: newsScroll 22s linear infinite;
    will-change: transform;
}

.news-ticker:hover .news-marquee-track {
    animation-play-state: paused;
}

.news-item {
    color: var(--text-primary);
    opacity: 0.88;
    transition: opacity 0.15s ease;
}

/* Breaking-news severity semantics */
.news-item.news-critical {
    color: rgba(239, 83, 80, 1);
    font-weight: 700;
    opacity: 1;
}

.news-item.news-high {
    color: rgba(255, 183, 77, 0.98);
    opacity: 0.98;
}

.news-item.news-neutral {
    color: rgba(189, 189, 189, 0.92);
    opacity: 0.92;
}

.news-item.news-watchlist {
    color: rgba(120, 190, 255, 0.96);
    opacity: 0.96;
}

.news-item.news-link {
    text-decoration: none;
}

.news-ticker:hover .news-item.news-link {
    text-decoration: underline;
}

.news-ticker:hover .news-item {
    opacity: 1;
}

.news-sep {
    color: var(--text-muted);
    opacity: 0.4;
    font-weight: 300;
}

@keyframes newsScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 340px;
}

.brand-wordmark {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #e8eaed;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1;
}

.logo-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-orange);
}

.title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.symbol-badge {
    background: transparent;
    border: 1px solid var(--accent);
    padding: 4px 10px;
    border-radius: var(--btn-radius);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-light);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
}

.timeframe-badge {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: var(--btn-radius);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: var(--btn-letter-spacing);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--btn-radius);
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    position: relative;
}

.header-nav-link i {
    width: 14px;
    height: 14px;
}

.header-nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.header-nav-link:active {
    background: var(--text-muted);
    color: #fff;
}

.price-display {
    text-align: right;
}

.current-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    transition: color 0.3s ease;
}

/* Flash animation for price updates */
.current-price.flash-up {
    color: var(--accent-green);
}

.current-price.flash-down {
    color: var(--accent-red);
}

.price-change {
    font-size: 12px;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    transition: transform 0.2s ease;
}

.price-change.positive {
    color: var(--accent-green);
}

.price-change.negative {
    color: var(--accent-red);
}

/* Smooth number transition */
@keyframes priceFlash {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.price-flash {
    animation: priceFlash 0.3s ease;
}

/* Header Action Buttons (Settings, Help) */
.settings-btn,
.help-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    padding: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-btn i,
.help-btn i {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.settings-btn:hover,
.help-btn:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.settings-btn:hover i,
.help-btn:hover i {
    color: var(--text-primary);
}

.settings-btn:active,
.help-btn:active {
    background: var(--text-muted);
}

.settings-btn:active i,
.help-btn:active i {
    color: #fff;
}

/* Settings Drawer */
.settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 2000;
}

.settings-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.settings-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(420px, 92vw);
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.settings-drawer.open {
    transform: translateX(0);
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.settings-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-close {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.settings-close:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.settings-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 0;
    background: rgba(20, 24, 34, 0.7);
    border: 1px solid rgba(54, 58, 69, 0.6);
}

.settings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.settings-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-input {
    flex: 1 1 auto;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}

.settings-input:focus {
    border-color: var(--accent);
}

.settings-value {
    padding: 5px 10px;
    border-radius: 0;
    background: var(--accent-muted);
    border: 1px solid var(--accent);
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 600;
}

.settings-help {
    font-size: 12px;
    color: var(--text-secondary);
}

.settings-status {
    font-size: 11px;
    color: rgba(38, 166, 154, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

/* Settings toggle row — iOS-style on/off switches */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 0;
    background: rgba(20, 24, 34, 0.7);
    border: 1px solid rgba(54, 58, 69, 0.6);
}

.settings-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-toggle-label i {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
}

.settings-toggle-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

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

.settings-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(54, 58, 69, 0.8);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.settings-toggle-switch input:checked + .settings-toggle-track {
    background: rgba(38, 166, 154, 0.75);
}

.settings-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.settings-toggle-switch input:checked ~ .settings-toggle-thumb {
    transform: translateX(18px);
}

.settings-divider-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 2px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    font-size: 11px;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: var(--accent-green);
}

.status-dot.offline {
    background: var(--text-muted);
}

.status-dot.checking {
    background: var(--accent-yellow);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Main Content */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Chart Section */
.chart-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.ohlcv-display {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.ohlcv-label {
    color: var(--text-muted);
    margin-left: 12px;
}

.ohlcv-label:first-child {
    margin-left: 0;
}

.ohlcv-value {
    color: var(--text-primary);
    font-weight: 500;
}

.ohlcv-value.high {
    color: var(--accent-green);
}

.ohlcv-value.low {
    color: var(--accent-red);
}

.ohlcv-value.volume {
    color: var(--accent-blue);
}

.ohlcv-sep {
    color: rgba(93, 96, 107, 0.8);
    margin: 0 8px;
}

.ohlcv-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    opacity: 0.9;
}

.ohlcv-legend-item {
    font-family: 'SF Mono', 'Consolas', monospace;
    color: rgba(120, 123, 134, 0.95);
}

.ohlcv-legend-dot {
    color: rgba(93, 96, 107, 0.8);
}

@media (max-width: 900px) {
    .ohlcv-sep,
    .ohlcv-legend {
        display: none;
    }
}

.chart-controls {
    display: flex;
    gap: 4px;
}

.chart-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 3px 10px;
    border-radius: var(--btn-radius);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chart-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.chart-btn:active {
    background: var(--text-muted);
    color: #fff;
}

.chart-btn.active {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent-light);
}

.refresh-btn {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-icon {
    width: 14px;
    height: 14px;
}

.refresh-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.refresh-btn.spinning {
    animation: spin 0.5s linear;
}

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

#chart {
    flex: 1;
    width: 100%;
    position: relative;
    /* Allow pinch-zoom gestures on the chart */
    touch-action: manipulation;
}

/* War Timeline Strip -- institutional, no decoration */
.war-timeline-strip {
    position: relative;
    height: 28px;
    flex-shrink: 0;
    padding: 0 16px;
    background: var(--bg-primary);
    border-top: 1px solid rgba(229, 33, 53, 0.12);
    overflow: hidden;
    user-select: none;
}

.war-timeline-axis {
    position: relative;
    width: 100%;
    height: 100%;
}

.war-timeline-track {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(229, 33, 53, 0.12);
}

.war-timeline-active {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 0;
    border-left: 1px solid rgba(229, 33, 53, 0.18);
    border-right: 1px solid rgba(229, 33, 53, 0.18);
    background: rgba(229, 33, 53, 0.04);
    display: none;
}

.war-timeline-strip.is-active .war-timeline-active {
    display: block;
}

.war-timeline-start-marker {
    position: absolute;
    top: 0; bottom: 0;
    display: none;
    border-left: 1px solid var(--accent-red);
}

.war-timeline-strip.has-start-in-view .war-timeline-start-marker {
    display: block;
}

.war-timeline-start-marker::before {
    content: '';
    position: absolute;
    top: 3px;
    left: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-red);
}

.war-timeline-start-label {
    position: absolute;
    top: 2px;
    left: 8px;
    color: var(--accent-red);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.war-timeline-start-marker.align-right .war-timeline-start-label {
    left: auto;
    right: 8px;
    transform: translateX(-100%);
}

.war-timeline-ticks {
    position: absolute;
    inset: 0;
}

.war-timeline-tick {
    position: absolute;
    bottom: 3px;
    transform: translateX(-50%);
    color: rgba(229, 33, 53, 0.55);
    font-size: 10px;
    line-height: 1;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.war-timeline-tick::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 1px;
    height: 4px;
    background: rgba(229, 33, 53, 0.25);
    transform: translateX(-50%);
}

.war-timeline-tick.major {
    color: rgba(229, 33, 53, 0.75);
    font-weight: 600;
}

.war-timeline-key {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 0 0 0 24px;
    background: linear-gradient(90deg, transparent 0%, var(--bg-primary) 24%);
    color: rgba(229, 33, 53, 0.7);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.war-timeline-key::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--accent-red);
}

.war-timeline-strip.is-prewar .war-timeline-track {
    background: rgba(229, 33, 53, 0.06);
}

.outlook-widget {
    position: absolute;
    top: 12px;
    right: 120px;
    background: rgba(26, 29, 36, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 16px;
    z-index: 100;
    min-width: 160px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-tap-highlight-color: transparent;
}

.outlook-widget:hover {
    border-color: rgba(120, 123, 134, 0.6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.outlook-widget:active {
    transform: scale(0.97);
    box-shadow: none;
}

.outlook-widget.ml-alert {
    border-color: rgba(239, 83, 80, 0.5);
}

.outlook-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 12px;
}

.outlook-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.outlook-prob {
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    margin-left: auto;
    margin-right: 8px;
}

.outlook-prob.quiet {
    color: var(--text-muted);
}

.outlook-prob.heating {
    color: #ffd54f;
}

.outlook-prob.building {
    color: #ffb74d;
}

.outlook-prob.imminent {
    color: var(--accent-red);
    animation: pulse-text 1s infinite;
}

.outlook-prob.stale {
    color: var(--text-muted);
}

.outlook-label.quiet {
    color: var(--text-muted);
}

.outlook-label.heating {
    color: #ffd54f;
}

.outlook-label.building {
    color: #ffb74d;
}

.outlook-label.imminent {
    color: var(--accent-red);
    animation: pulse-text 1s infinite;
}

.outlook-label.stale {
    color: var(--text-muted);
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.outlook-next {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
}

/* Directional Bias indicator (Phase 8) */
.outlook-direction {
    font-size: 10px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1;
}

.outlook-direction.dir-up {
    color: var(--accent-green);
    background: rgba(38, 166, 91, 0.12);
}

.outlook-direction.dir-down {
    color: var(--accent-red);
    background: rgba(234, 57, 67, 0.12);
}

.outlook-direction.dir-neutral {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

.outlook-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.outlook-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.5s ease, background 0.3s ease;
}

.outlook-fill.quiet {
    background: var(--text-muted);
}

.outlook-fill.heating {
    background: #ffd54f;
}

.outlook-fill.building {
    background: var(--accent-orange);
}

.outlook-fill.imminent {
    background: var(--accent-red);
}

.outlook-fill.stale {
    background: var(--text-muted);
}

/* Regime bias row inside outlook widget */
.regime-bias-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(120, 123, 134, 0.15);
}

.regime-bias-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.regime-bias-label.bias-up {
    color: var(--accent-green, #66bb6a);
}

.regime-bias-label.bias-down {
    color: var(--accent-red, #ef5350);
}

.regime-bias-label.bias-neutral {
    color: var(--text-muted);
}

.regime-bias-conf {
    font-size: 10px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    margin-left: auto;
}

.regime-bias-conf.conf-high {
    color: var(--text-secondary);
}

.regime-bias-conf.conf-low {
    color: var(--text-muted);
    opacity: 0.6;
}

.regime-bias-countdown {
    font-size: 9px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* ── News Hangover visual state (Phase 7.2) ──────────────────────── */

/* Banner across the top of the chart */
.hangover-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 183, 77, 0.12);
    border-bottom: 1px solid rgba(255, 183, 77, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #ffb74d;
}

.hangover-banner-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: #ffb74d;
}

.hangover-banner-text {
    color: #ffb74d;
    opacity: 0.85;
}

.hangover-banner-event {
    color: rgba(255, 183, 77, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.hangover-banner-timer {
    margin-left: auto;
    color: #ffb74d;
    font-weight: 600;
    white-space: nowrap;
}

/* Outlook widget hangover modifier -- amber border */
.outlook-widget.news-hangover {
    border-color: rgba(255, 183, 77, 0.35);
}

/* Override ML alert when hangover is active -- amber takes precedence */
.outlook-widget.news-hangover.ml-alert {
    border-color: rgba(255, 183, 77, 0.45);
}

/* Hangover info row inside the widget */
.hangover-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 183, 77, 0.15);
}

.hangover-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    color: #ffb74d;
    animation: pulse-text 2s infinite;
}

.hangover-icon {
    width: 10px;
    height: 10px;
    stroke: #ffb74d;
}

.hangover-event {
    font-size: 9px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 183, 77, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.hangover-countdown {
    font-size: 9px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: #ffb74d;
    margin-left: auto;
    white-space: nowrap;
}

.breaking-news-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(239, 83, 80, 0.12);
}

.breaking-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    color: #ffb74d;
}

.breaking-news-badge.critical {
    color: #ef5350;
}

.breaking-news-headline {
    font-size: 9px;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    text-decoration: none;
}

.breaking-news-headline:hover {
    color: #ffffff;
    text-decoration: underline;
}

.breaking-news-meta {
    font-size: 9px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255, 183, 77, 0.72);
    margin-left: auto;
    white-space: nowrap;
}

.breaking-news-meta.critical {
    color: #ef9a9a;
}

/* Dampened probability indicator inside factors modal */
.factors-hangover-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(255, 183, 77, 0.08);
    border: 1px solid rgba(255, 183, 77, 0.2);
    border-radius: 6px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: #ffb74d;
}

.factors-hangover-note .hangover-icon {
    width: 12px;
    height: 12px;
}

/* Directional Bias note in factors modal (Phase 8) */
.factors-direction-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.factors-direction-badge {
    font-weight: 700;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.factors-direction-badge.dir-up {
    color: var(--accent-green);
    background: rgba(38, 166, 91, 0.15);
}

.factors-direction-badge.dir-down {
    color: var(--accent-red);
    background: rgba(234, 57, 67, 0.15);
}

.factors-direction-badge.dir-neutral {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.factors-direction-detail {
    font-size: 10px;
    color: var(--text-muted);
}

/* Shaded overlay for hangover windows on the chart (Phase 7.3) */
.hangover-window-overlay {
    background: rgba(255, 183, 77, 0.04);
    border-left: 1px solid rgba(255, 183, 77, 0.18);
    border-right: 1px solid rgba(255, 183, 77, 0.08);
    z-index: 5;
    pointer-events: none;
}

/* ── Hangover Event Marker Tooltip ─────────────────────────────── */

.hangover-marker-tooltip {
    position: absolute;
    z-index: 210;
    width: 260px;
    padding: 0;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    pointer-events: none;
    animation: hmt-fade-in 0.18s ease-out;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

/* HIGH impact — amber accent */
.hangover-marker-tooltip.hmt-high {
    background: rgba(20, 22, 30, 0.92);
    border: 1px solid rgba(255, 152, 0, 0.45);
}

/* MEDIUM impact — muted amber */
.hangover-marker-tooltip.hmt-medium {
    background: rgba(20, 22, 30, 0.92);
    border: 1px solid rgba(255, 183, 77, 0.30);
}

.hmt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px;
}

.hmt-impact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.hmt-high .hmt-impact-badge {
    background: rgba(255, 152, 0, 0.20);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.35);
}

.hmt-medium .hmt-impact-badge {
    background: rgba(255, 183, 77, 0.12);
    color: #ffb74d;
    border: 1px solid rgba(255, 183, 77, 0.25);
}

.hmt-currency {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.hmt-title {
    padding: 0 14px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.hmt-meta {
    padding: 0 14px 8px;
}

.hmt-category {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.hmt-divider {
    height: 1px;
    background: rgba(54, 58, 69, 0.6);
    margin: 0 14px;
}

.hmt-details {
    padding: 8px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hmt-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.hmt-detail-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.hmt-detail-value {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
    white-space: nowrap;
}

@keyframes hmt-fade-in {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile: wider tooltip, bigger text */
@media (max-width: 480px) {
    .hangover-marker-tooltip {
        width: calc(100vw - 32px);
        max-width: 300px;
    }

    .hmt-title {
        font-size: 14px;
    }

    .hmt-detail-label,
    .hmt-detail-value {
        font-size: 11px;
    }
}

/* ── End News Hangover styles ──────────────────────────────────── */

/* Countdown timer is now in the header under price display */

/* Chart countdown - overlay on right price scale, tracks current price */
.chart-countdown {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(38, 166, 154, 0.9);
    border-radius: 2px 0 0 2px;
    padding: 2px 8px;
    z-index: 100;
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: center;
    white-space: nowrap;
}

/* Factors Modal */
.factors-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.factors-modal.visible {
    display: flex;
}

.factors-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 400px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.factors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.factors-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.factors-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}

.factors-close:hover {
    color: var(--text-primary);
}

.factors-score {
    text-align: center;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.factors-ml-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.factors-ml-prob {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.factors-ml-value {
    font-size: 48px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.factors-ml-value.quiet {
    color: var(--text-muted);
}

.factors-ml-value.heating {
    color: #ffd54f;
}

.factors-ml-value.building {
    color: #ffb74d;
}

.factors-ml-value.imminent {
    color: var(--accent-red);
    animation: pulse-text 1s infinite;
}

.factors-ml-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.factors-heuristic {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.6;
}

.factors-total {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.factors-max {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.factors-list {
    padding: 16px 20px;
    max-height: 300px;
    overflow-y: auto;
}

.factor-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.factor-item:last-child {
    border-bottom: none;
}

.factor-item.factor-unavailable {
    opacity: 0.45;
}

.factor-info {
    flex: 1;
}

.factor-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.factor-detail {
    font-size: 11px;
    color: var(--text-secondary);
}

.factor-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.factor-bar {
    width: 60px;
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.factor-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.factor-fill.low {
    background: var(--text-muted);
}

.factor-fill.medium {
    background: #ffb74d;
}

.factor-fill.high {
    background: var(--accent-green);
}

.factor-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 24px;
    text-align: right;
}

.factors-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

/* =============================================================================
   CONTROL PANEL - MODERN REDESIGN
   ============================================================================= */

.control-panel {
    width: 320px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Panel Header */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.panel-header-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.panel-header-live {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.live-dot {
    width: 5px;
    height: 5px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: livePulse 3s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.35; }
}

/* Panel Cards */
.panel-card {
    margin: 10px 12px;
    padding: 14px;
    background: rgba(30, 34, 45, 0.6);
    border: 1px solid rgba(54, 58, 69, 0.45);
    border-radius: 4px;
    transition: border-color 0.1s ease;
}

.panel-card:hover {
    border-color: rgba(54, 58, 69, 0.7);
}

/* ── ATR Card (Desktop Sidebar) ── */
.atr-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.atr-period-label {
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}

.atr-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.atr-row-single {
    grid-template-columns: 1fr;
}

.atr-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px;
    background: rgba(54, 58, 69, 0.25);
    border-radius: 3px;
}

.atr-val {
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.atr-val.atr-cool { color: var(--accent-blue); }
.atr-val.atr-warm { color: var(--accent-orange); }
.atr-val.atr-hot  { color: var(--accent-red); }

.atr-tf {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Verdict row (desktop) */
.atr-verdict-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    min-width: 0;
}

.atr-bias-badge {
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
    border-radius: 2px;
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.atr-regime-badge {
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
    border-radius: 2px;
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.atr-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    font-size: 8px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    border-radius: 2px;
    min-width: 0;
    max-width: 92px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

/* Execution verdict colors — shared by badge + hint */
.bias-up      { background: rgba(38,166,154,0.15); color: var(--accent-green); }
.bias-down    { background: rgba(239,83,80,0.15);  color: var(--accent-red); }
.bias-neutral { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.exec-go    { background: rgba(38,166,154,0.15); color: var(--accent-green); }
.exec-wait  { background: rgba(247,147,26,0.12); color: var(--accent-orange); }
.exec-warning { background: rgba(247,147,26,0.2); color: var(--accent-orange); }
.exec-avoid { background: rgba(239,83,80,0.15);  color: var(--accent-red); }
.risk-good   { background: rgba(38,166,154,0.12); color: var(--accent-green); }
.risk-warn   { background: rgba(247,147,26,0.12); color: var(--accent-orange); }
.risk-danger { background: rgba(239,83,80,0.15);  color: var(--accent-red); }
.risk-muted  { background: rgba(255,255,255,0.06); color: var(--text-muted); }

.atr-card.news-hangover {
    border-color: rgba(247,147,26,0.45);
    box-shadow: inset 0 0 0 1px rgba(247,147,26,0.16);
}

.mobile-atr-strip.news-hangover {
    border-color: rgba(247,147,26,0.35);
    box-shadow: inset 0 0 0 1px rgba(247,147,26,0.12);
}

/* ── Mobile ATR Strip (iOS / phones) ── */
.mobile-atr-strip {
    display: none; /* Hidden on desktop */
}

@media (max-width: 480px) {
    .mobile-atr-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 5px 12px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        /* iOS safe area */
        padding-left: calc(12px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
    }

    .mobile-atr-item {
        display: flex;
        align-items: baseline;
        gap: 4px;
        padding: 0 12px;
    }

    .mobile-atr-val {
        font-size: 12px;
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-primary);
        transition: color 0.3s ease;
    }

    .mobile-atr-val.atr-cool { color: var(--accent-blue); }
    .mobile-atr-val.atr-warm { color: var(--accent-orange); }
    .mobile-atr-val.atr-hot  { color: var(--accent-red); }

    .mobile-atr-tf {
        font-size: 9px;
        font-weight: 500;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobile-atr-sep {
        width: 1px;
        height: 14px;
        background: var(--border-color);
    }

    .mobile-atr-verdict {
        display: flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
        flex-shrink: 0;
        margin-left: 6px;
    }

    .mobile-atr-bias {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 7px;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: 0.06em;
        padding: 2px 5px;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .mobile-atr-regime {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: 0.08em;
        padding: 2px 5px;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .mobile-atr-hint {
        font-size: 7px;
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: 0.04em;
        padding: 2px 4px;
        border-radius: 2px;
        min-width: 0;
        max-width: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    opacity: 0.7;
}

.card-header-collapsible {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s ease;
}

.card-header-collapsible:hover {
    opacity: 0.85;
}

.card-header-collapsible .collapse-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.panel-card.collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.panel-card.collapsible .card-content {
    transition: all 0.25s ease;
    overflow: hidden;
}

.panel-card.collapsible.collapsed .card-content {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding: 0;
}

/* FVG Card Styles */
.fvg-card .card-icon {
    color: var(--text-secondary);
}

.fvg-stats {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 14px;
    padding: 0 2px;
}

.fvg-stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
}

.fvg-stat-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: transparent;
}

.fvg-stat-icon svg {
    width: 14px;
    height: 14px;
}

.fvg-above .fvg-stat-icon {
    background: transparent;
}

.fvg-above .fvg-stat-icon svg {
    color: var(--text-secondary);
}

.fvg-below .fvg-stat-icon {
    background: transparent;
}

.fvg-below .fvg-stat-icon svg {
    color: var(--text-secondary);
}

.fvg-stat-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.fvg-stat-value {
    font-size: 18px;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    line-height: 1;
    color: var(--text-primary);
}

.fvg-above .fvg-stat-value {
    color: var(--text-primary);
}

.fvg-below .fvg-stat-value {
    color: var(--text-primary);
}

.fvg-stat-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.fvg-stat-dormant {
    font-size: 9px;
    color: rgba(160, 160, 180, 0.45);
    font-style: normal;
    margin-left: 4px;
}

.fvg-stat-dormant:not(:empty)::before {
    content: '+';
}

.fvg-stat-dormant:not(:empty)::after {
    content: ' dormant';
}

.fvg-stat-divider {
    width: 1px;
    background: var(--border-color);
    margin: 4px 6px;
}

/* Vacuum Ratio Indicator */
.vacuum-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    margin: 6px 0 10px;
    background: transparent;
    border-top: 1px solid rgba(54, 58, 69, 0.5);
    border-bottom: 1px solid rgba(54, 58, 69, 0.5);
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.vacuum-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vacuum-label svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.vacuum-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.vacuum-bias {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.vacuum-bias.bias-above {
    background: transparent;
    color: var(--accent-red);
    border: none;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
}

.vacuum-bias.bias-below {
    background: transparent;
    color: var(--accent-green);
    border: none;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
}

.fvg-targets {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(54, 58, 69, 0.4);
    padding-top: 10px;
}

.fvg-target {
    padding: 8px 4px;
    background: transparent;
    border-radius: 0;
    border-left: none;
    transition: background 0.1s ease;
}

.fvg-target:hover {
    background: rgba(255, 255, 255, 0.02);
}

.fvg-target + .fvg-target {
    border-top: 1px solid rgba(54, 58, 69, 0.25);
}

.fvg-target-above {
    border-left-color: transparent;
}

.fvg-target-below {
    border-left-color: transparent;
}

.fvg-target-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.target-arrow {
    width: 12px;
    height: 12px;
    opacity: 0.5;
}

.fvg-target-above .target-arrow {
    color: var(--text-secondary);
}

.fvg-target-below .target-arrow {
    color: var(--text-secondary);
}

.target-dir-indicator {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    line-height: 1;
    width: 12px;
    display: inline-block;
    text-align: center;
}

.fvg-target-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.fvg-target-value {
    font-size: 13px;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    color: var(--text-primary);
    line-height: 1.4;
    padding-left: 17px;
}

.fvg-target-value .gap-distance {
    display: inline;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 6px;
}

.fvg-target-value .reach-badge {
    margin-left: 6px;
    vertical-align: baseline;
}

/* Key Levels Card */
.key-levels-card .card-icon {
    color: var(--text-muted);
}

.key-levels-card .card-content {
    margin-top: 0;
}

/* Calendar Card */
.calendar-card .card-header {
    margin-bottom: 16px;
    padding-top: 2px;
}

.calendar-card .card-icon {
    color: var(--text-muted);
}

.calendar-card .calendar-list {
    max-height: 220px;
}

.calendar-card .calendar-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(54, 58, 69, 0.4);
}

/* Panel Footer */
.panel-footer {
    margin-top: auto;
    padding: 10px 14px;
    text-align: center;
    border-top: 1px solid rgba(54, 58, 69, 0.35);
    background: transparent;
}

.panel-footer-text {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.6px;
    opacity: 0.5;
    font-family: 'JetBrains Mono', monospace;
}

/* Legacy Panel Section - Keep for compatibility */
.panel-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.btn-icon {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-right: 4px;
}

.control-group {
    margin-bottom: 12px;
}

.control-group label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;;
    letter-spacing: 0.5px;
}

.input-group {
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.input-group:focus-within {
    border-color: var(--accent-blue);
}

.input-prefix,
.input-suffix {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.input-group input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.input-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.webhook-input {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
}

.webhook-input:focus {
    border-color: var(--accent-blue);
}

.webhook-input::placeholder {
    color: var(--text-muted);
}

/* Buttons */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--accent-blue);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #1e53e4;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    margin-top: 8px;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
}

.btn-danger {
    background: var(--accent-red);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #d32f2f;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

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

/* ================================
   MOBILE RESPONSIVE STYLES
   iPhone 14 Pro Max: 430x932px
   ================================ */

/* Tablet and below */
@media (max-width: 1024px) {
    .main-content {
        flex-direction: column;
    }
    
    .control-panel {
        width: 100%;
        max-height: 40vh;
        overflow-y: auto;
        border-left: none;
        border-top: 1px solid var(--border-color);
    }
}

/* Mobile phones - Chart fullscreen, hide sidebar */
@media (max-width: 480px) {
    body {
        overflow: hidden;
    }

    /* Hide breaking news ticker on mobile */
    .news-ticker {
        display: none;
    }
    
    .container {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile */
    }
    
    /* Compact header */
    .header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
        padding-right: calc(8px + env(safe-area-inset-right, 0px));
    }
    
    .header-left {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
        overflow: hidden;
    }

    .brand {
        max-width: 140px;
        gap: 6px;
        overflow: hidden;
    }

    .brand-wordmark {
        font-size: 15px;
    }

    .symbol-badge, .timeframe-badge {
        font-size: 9px;
        padding: 2px 4px;
        flex-shrink: 0;
    }
    
    .header-right {
        flex-shrink: 0;
        justify-content: flex-end;
        gap: 6px;
    }
    
    .price-display {
        display: flex;
        align-items: baseline;
        gap: 4px;
    }
    
    /* Gold button - icon only on mobile */
    .header-nav-link {
        padding: 5px;
        gap: 0;
        flex-shrink: 0;
    }
    
    .header-nav-link span {
        display: none; /* Hide "Gold" text on mobile */
    }
    
    .header-nav-link i {
        width: 14px;
        height: 14px;
    }
    
    /* Compact action buttons on mobile */
    .settings-btn,
    .help-btn {
        padding: 5px;
        flex-shrink: 0;
    }
    
    .settings-btn i,
    .help-btn i {
        width: 14px;
        height: 14px;
    }
    
    .current-price {
        font-size: 14px;
    }
    
    .price-change {
        font-size: 10px;
    }
    
    .status-indicator {
        display: none; /* Hide status on mobile - save space */
    }
    
    /* Main content - chart only */
    .main-content {
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Chart section - FULLSCREEN */
    .chart-section {
        flex: 1;
        min-height: 0;
        height: 100%;
    }
    
    .chart-header {
        flex-direction: row;
        gap: 8px;
        padding: 6px 10px;
    }
    
    .ohlcv-display {
        flex: 1;
        justify-content: flex-start;
        gap: 2px;
        font-size: 9px;
    }
    
    .ohlcv-label {
        margin-left: 4px;
    }
    
    .chart-controls {
        justify-content: flex-end;
        gap: 4px;
    }
    
    .chart-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .chart-btn[data-range="1000"],
    .chart-btn[data-range="2000"],
    .chart-btn[data-range="3000"] {
        display: none; /* Hide larger ranges on mobile */
    }
    
    .refresh-btn {
        display: none; /* Hide refresh on mobile */
    }
    
    /* Chart container - full height */
    #chart {
        position: relative;
        flex: 1;
        min-height: 0;
    }

    .war-timeline-strip {
        height: 22px;
        padding: 0 10px;
    }

    .war-timeline-start-label {
        top: 1px;
        font-size: 8px;
    }

    .war-timeline-tick {
        bottom: 2px;
        font-size: 9px;
    }

    .war-timeline-tick::before {
        bottom: 11px;
        height: 3px;
    }

    .war-timeline-key {
        font-size: 8px;
        padding-left: 20px;
    }

    .war-timeline-key::before {
        left: 8px;
        width: 4px;
        height: 4px;
    }
    
    /* Outlook widget - compact mobile position */
    .outlook-widget {
        top: 6px;
        left: 6px;
        padding: 6px 10px;
        min-width: 80px;
        font-size: 10px;
    }
    
    .outlook-label {
        font-size: 10px;
    }
    
    .outlook-prob {
        font-size: 11px;
    }
    
    .outlook-score {
        font-size: 20px;
    }
    
    .outlook-next {
        font-size: 8px;
    }
    
    .outlook-bar {
        height: 2px;
    }
    
    /* Outlook Factors - compact mobile */
    .outlook-factors-container {
        top: 6px;
        left: 0;
    }

    .outlook-factors-toggle {
        width: 20px;
        height: 32px;
    }

    .outlook-factors-toggle .toggle-icon {
        width: 12px;
        height: 12px;
    }

    .outlook-factors-panel {
        width: 200px;
        padding: 6px 8px;
        font-size: 9px;
    }
    
    /* Countdown - on chart for mobile */
    .chart-countdown {
        font-size: 10px;
        padding: 2px 6px;
        min-width: 50px;
    }
    
    /* HIDE CONTROL PANEL ON MOBILE */
    .control-panel {
        display: none;
    }
    
    /* Mobile FAB Container - shows Gaps + News buttons */
    .mobile-fab-container {
        display: flex;
    }
    
    /* Legacy: Mobile FAB (Floating Action Button) for Gaps */
    .mobile-gaps-fab {
        display: flex;
    }
    
    /* Mobile Gaps Drawer */
    .mobile-gaps-drawer {
        display: block;
    }
    
    /* Mobile News Drawer */
    .mobile-news-drawer {
        display: block;
    }

    /* Mobile ML / Learning Systems Drawer */
    .mobile-ml-drawer {
        display: block;
    }

    /* On-chart gap labels: phone-first readability + safe-area padding */
    .gap-strength-label {
        right: calc(66px + env(safe-area-inset-right, 0px));
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        column-gap: 4px;
        row-gap: 3px;
        max-width: min(220px, calc(100vw - 102px - env(safe-area-inset-right, 0px)));
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        line-height: 1.15;
    }

    .gap-echo-label {
        max-width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .gap-strength-label .strength-score,
    .gap-strength-label .reach-score,
    .gap-strength-label .test-count-badge,
    .gap-strength-label .chart-chip {
        margin-left: 0;
        flex: 0 0 auto;
    }

    .gap-strength-label .chart-chip {
        font-size: 9px;
        padding: 2px 4px;
        opacity: 0.92;
    }

    /* Age badge: slightly larger for touch readability */
    .gap-strength-label .gap-age-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .gap-id-label {
        left: 46%;
        font-size: 10px;
        letter-spacing: 0.06em;
        color: rgba(205, 210, 220, 0.22);
    }
    
    .mobile-gaps-drawer.open {
        transform: translateY(0);
    }
    
    /* Factors modal - fullscreen on mobile */
    .factors-modal {
        padding: 0;
    }

    .factors-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    .factors-header h2 {
        font-size: 16px;
    }
    
    .factors-score {
        padding: 16px;
    }

    .factors-ml-summary {
        gap: 20px;
        padding: 16px;
    }

    .factors-ml-value {
        font-size: 36px;
    }
    
    .factors-total {
        font-size: 22px;
    }
    
    .factors-max {
        font-size: 10px;
    }
    
    .factor-item {
        padding: 10px 12px;
    }
    
    .factor-name {
        font-size: 12px;
    }
    
    .factor-score {
        font-size: 14px;
    }
    
    .factor-detail {
        font-size: 10px;
    }
    
    .factor-bar {
        height: 3px;
    }
    
    /* API modal on mobile */
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    /* ── News Hangover mobile adaptations ───────────────────────── */
    .hangover-banner {
        padding: 4px 10px;
        padding-left: calc(10px + env(safe-area-inset-left, 0px));
        padding-right: calc(10px + env(safe-area-inset-right, 0px));
        gap: 5px;
        font-size: 8px;
    }

    .hangover-banner-icon {
        width: 10px;
        height: 10px;
    }

    .hangover-banner-event {
        max-width: 90px;
        font-size: 8px;
    }

    .hangover-banner-timer {
        font-size: 8px;
    }

    /* Widget hangover row — tighter on mobile */
    .hangover-row {
        gap: 4px;
        margin-top: 4px;
        padding-top: 4px;
    }

    .hangover-badge {
        font-size: 7px;
        gap: 2px;
    }

    .hangover-icon {
        width: 8px;
        height: 8px;
    }

    .hangover-event {
        font-size: 7px;
        max-width: 60px;
    }

    .hangover-countdown {
        font-size: 7px;
    }

    /* Factors modal hangover note — compact */
    .factors-hangover-note {
        padding: 6px 8px;
        margin-bottom: 8px;
        font-size: 9px;
        gap: 4px;
    }

    .factors-hangover-note .hangover-icon {
        width: 10px;
        height: 10px;
    }

    /* Context menu — touch-friendly sizing */
    .chart-context-menu {
        min-width: 200px;
    }

    .context-menu-item {
        padding: 12px 16px;
        font-size: 14px;
        gap: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    .context-menu-item i,
    .context-menu-item svg {
        width: 18px;
        height: 18px;
    }

    /* Settings toggle row (News toggles) */
    .settings-toggle-row {
        padding: 12px 14px;
    }

    .settings-toggle-label {
        font-size: 13px;
    }
}

/* Touch-first devices (iOS/iPadOS, Android, etc.) - show FAB and drawer */
@media (hover: none) and (pointer: coarse) {
    .news-ticker {
        display: none !important;
    }
    
    /* Show mobile FAB on all touch devices */
    .mobile-fab-container {
        display: flex !important;
    }
    
    .mobile-gaps-drawer {
        display: block !important;
    }
    
    .mobile-news-drawer {
        display: block !important;
    }

    .mobile-ml-drawer {
        display: block !important;
    }
    
    /* Hide control panel on touch devices */
    .control-panel {
        display: none !important;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .header-left {
        gap: 6px;
    }
    
    .title {
        font-size: 13px;
    }
    
    .current-price {
        font-size: 16px;
    }
    
    .chart-section {
        min-height: 250px;
        height: 40vh;
    }
    
    .ohlcv-display {
        font-size: 9px;
    }
}

/* Landscape mode on phones */
@media (max-height: 500px) and (orientation: landscape) {
    .header {
        padding: 6px 12px;
    }
    
    .chart-section {
        height: 60vh;
    }
    
    .control-panel {
        max-height: 50vh;
        overflow-y: auto;
    }
}

/* iOS safe areas (notch support) */
@supports (padding-top: env(safe-area-inset-top)) {
    .header {
        padding-top: calc(8px + env(safe-area-inset-top));
        padding-left: calc(12px + env(safe-area-inset-left));
        padding-right: calc(12px + env(safe-area-inset-right));
    }
    
    .control-panel {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

/* =============================================================================
   FAIR VALUE GAPS PANEL - Legacy (kept for mobile drawer)
   ============================================================================= */

/* =============================================================================
   KEY LEVELS PANEL
   ============================================================================= */

.key-levels-section,
.key-levels-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.key-levels-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 10px 0;
}

.key-levels-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.key-levels-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-blue);
}

.key-levels-near {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.key-levels-near-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#keyLevelsNearSelect {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    outline: none;
}

#keyLevelsNearSelect:focus {
    border-color: var(--accent-blue);
}

.key-levels-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.key-levels-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 0;
}

.key-level-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    padding: 10px 10px;
    border-radius: 8px;
    background: rgba(19, 23, 34, 0.55);
    border: 1px solid rgba(54, 58, 69, 0.65);
}

.key-level-row.near {
    border-color: rgba(41, 98, 255, 0.45);
    background: rgba(41, 98, 255, 0.10);
}

.key-level-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.key-level-sub {
    font-size: 11px;
    color: var(--text-secondary);
}

.key-level-price {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.key-level-distance {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.key-level-distance.above {
    color: rgba(38, 166, 154, 0.95);
}

.key-level-distance.below {
    color: rgba(239, 83, 80, 0.95);
}

.key-levels-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(54, 58, 69, 0.65);
    margin-top: 12px;
}

.key-levels-updated {
    font-size: 11px;
    color: var(--text-muted);
}

.gaps-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.gaps-summary {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.gaps-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gaps-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.gaps-value {
    font-size: 24px;
    font-weight: 700;
}

.gaps-value.gap-above {
    color: var(--accent-red);
}

.gaps-value.gap-below {
    color: var(--accent-green);
}

.gaps-nearest {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
}

.gap-target {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gap-target-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

.gap-target-value {
    font-size: 13px;
    color: var(--text-primary);
    font-family: monospace;
}

.gap-distance {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Direction Bias Indicator */
.direction-bias-section {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin: 12px 12px 0 12px;
}

.direction-bias-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.direction-bias-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.direction-bias-value {
    font-size: 14px;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.direction-bias-value.bias-up {
    color: var(--accent-green);
}

.direction-bias-value.bias-down {
    color: var(--accent-red);
}

.direction-bias-value.bias-neutral {
    color: var(--text-secondary);
}

.direction-bias-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bias-bar-track {
    height: 8px;
    background: linear-gradient(to right, 
        var(--accent-red) 0%, 
        var(--bg-secondary) 40%, 
        var(--bg-secondary) 60%, 
        var(--accent-green) 100%);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.bias-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bias-bar-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--bg-primary);
    border: 2px solid var(--text-primary);
    border-radius: 50%;
    transition: left 0.5s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.bias-bar-marker.marker-up {
    border-color: var(--accent-green);
}

.bias-bar-marker.marker-down {
    border-color: var(--accent-red);
}

.bias-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bias-label-down {
    color: var(--accent-red);
    opacity: 0.7;
}

.bias-label-neutral {
    color: var(--text-muted);
}

.bias-label-up {
    color: var(--accent-green);
    opacity: 0.7;
}

.gaps-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
}

.no-gaps {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 16px;
}

.gap-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    border-left: 3px solid transparent;
}

.gap-strength {
    font-size: 11px;
    letter-spacing: 1px;
}

.gap-strength.strength-high {
    color: var(--accent-green);
}

.gap-strength.strength-med {
    color: var(--accent-orange);
}

.gap-strength.strength-low {
    color: var(--text-muted);
}

.gap-item.gap-bullish {
    border-left-color: var(--accent-green);
}

.gap-item.gap-bearish {
    border-left-color: var(--accent-red);
}

.gap-range {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.gap-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.gap-size {
    font-size: 11px;
    color: var(--text-secondary);
}

.gap-direction {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-orange);
}

/* Reach Probability Badge */
.reach-badge {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    font-size: 10px;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: 0;
    white-space: nowrap;
    margin-left: auto;
    border: none;
    background: transparent;
}

.reach-badge.reach-high {
    background: transparent;
    color: var(--accent-green);
    border: none;
}

.reach-badge.reach-medium {
    background: transparent;
    color: var(--text-secondary);
    border: none;
}

.reach-badge.reach-low {
    background: transparent;
    color: var(--text-muted);
    border: none;
}

/* =============================================================================
   ECONOMIC CALENDAR SECTION
   ============================================================================= */

.calendar-section,
.calendar-card {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.calendar-card .card-header {
    margin-bottom: 12px;
}

/* Featured Next Up Event Card */
.calendar-next-up {
    position: relative;
    margin: 0 0 14px 0;
    padding: 14px;
    background: linear-gradient(135deg, rgba(41, 98, 255, 0.1) 0%, rgba(41, 98, 255, 0.03) 100%);
    border: 1px solid rgba(41, 98, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.calendar-next-up::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(41, 98, 255, 0.6), transparent);
    animation: nextUpShimmer 3s ease-in-out infinite;
}

@keyframes nextUpShimmer {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.calendar-next-up.urgency-approaching {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.03) 100%);
    border-color: rgba(255, 152, 0, 0.35);
}

.calendar-next-up.urgency-approaching::before {
    background: linear-gradient(90deg, transparent, rgba(255, 152, 0, 0.7), transparent);
}

.calendar-next-up.urgency-imminent {
    background: linear-gradient(135deg, rgba(239, 83, 80, 0.12) 0%, rgba(239, 83, 80, 0.04) 100%);
    border-color: rgba(239, 83, 80, 0.4);
    animation: imminentPulse 1.5s ease-in-out infinite;
}

.calendar-next-up.urgency-imminent::before {
    background: linear-gradient(90deg, transparent, rgba(239, 83, 80, 0.8), transparent);
    animation: nextUpShimmer 1s ease-in-out infinite;
}

@keyframes imminentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 83, 80, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(239, 83, 80, 0.2); }
}

.next-up-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.next-up-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(41, 98, 255, 0.2);
    border: 1px solid rgba(41, 98, 255, 0.3);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #5c8aff;
    text-transform: uppercase;
}

.urgency-approaching .next-up-badge {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.35);
    color: #ffb74d;
}

.urgency-imminent .next-up-badge {
    background: rgba(239, 83, 80, 0.25);
    border-color: rgba(239, 83, 80, 0.4);
    color: #ef5350;
    animation: badgePulse 1s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.next-up-countdown {
    font-size: 13px;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #5c8aff;
    letter-spacing: 0.5px;
}

.urgency-approaching .next-up-countdown {
    color: #ffb74d;
}

.urgency-imminent .next-up-countdown {
    color: #ef5350;
    animation: countdownPulse 0.8s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
}

.next-up-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.next-up-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.next-up-time {
    font-size: 11px;
    font-family: 'SF Mono', monospace;
    color: var(--text-secondary);
}

.next-up-currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(66, 165, 245, 0.15);
    color: #64b5f6;
    letter-spacing: 0.4px;
}

.next-up-currency.cur-USD { background: rgba(76, 175, 80, 0.18); color: #81c784; }
.next-up-currency.cur-EUR { background: rgba(66, 165, 245, 0.18); color: #64b5f6; }
.next-up-currency.cur-GBP { background: rgba(171, 71, 188, 0.18); color: #ba68c8; }
.next-up-currency.cur-JPY { background: rgba(239, 83, 80, 0.18); color: #ef5350; }
.next-up-currency.cur-CAD { background: rgba(255, 152, 0, 0.18); color: #ffb74d; }
.next-up-currency.cur-AUD { background: rgba(255, 193, 7, 0.18); color: #ffd54f; }
.next-up-currency.cur-NZD { background: rgba(0, 188, 212, 0.18); color: #4dd0e1; }
.next-up-currency.cur-CHF { background: rgba(239, 83, 80, 0.18); color: #ef9a9a; }

.next-up-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.next-up-details {
    display: flex;
    gap: 12px;
    font-size: 10px;
    color: var(--text-muted);
}

.next-up-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.next-up-details .detail-label {
    color: var(--text-muted);
    opacity: 0.7;
}

.next-up-details .detail-value {
    color: var(--text-secondary);
}

.calendar-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}

.calendar-loading {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    padding: 16px;
}

.calendar-day {
    margin-bottom: 10px;
}

.calendar-day-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(42, 46, 57, 0.5);
    border-radius: 4px;
    margin-bottom: 4px;
}

.calendar-day-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calendar-day-date {
    font-size: 10px;
    color: var(--text-muted);
}

.calendar-event {
    display: grid;
    grid-template-columns: 48px 36px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 2px;
    background: transparent;
    transition: background 0.15s ease;
}

.calendar-event:hover {
    background: rgba(42, 46, 57, 0.4);
}

/* Dim the next-up event in the list since it's featured above */
.calendar-event.is-next-up {
    opacity: 0.45;
    position: relative;
}

.calendar-event.is-next-up::after {
    content: 'Featured above';
    position: absolute;
    right: 28px;
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.calendar-event-time {
    font-size: 10px;
    font-family: 'SF Mono', monospace;
    color: var(--text-secondary);
    white-space: nowrap;
}

.calendar-event-currency {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(66, 165, 245, 0.12);
    color: var(--accent-blue);
    letter-spacing: 0.3px;
}

.calendar-event-currency.cur-USD { background: rgba(76, 175, 80, 0.15); color: #81c784; }
.calendar-event-currency.cur-EUR { background: rgba(66, 165, 245, 0.15); color: #64b5f6; }
.calendar-event-currency.cur-GBP { background: rgba(171, 71, 188, 0.15); color: #ba68c8; }
.calendar-event-currency.cur-JPY { background: rgba(239, 83, 80, 0.15); color: #ef5350; }
.calendar-event-currency.cur-CAD { background: rgba(255, 152, 0, 0.15); color: #ffb74d; }
.calendar-event-currency.cur-AUD { background: rgba(255, 193, 7, 0.15); color: #ffd54f; }
.calendar-event-currency.cur-NZD { background: rgba(0, 188, 212, 0.15); color: #4dd0e1; }
.calendar-event-currency.cur-CHF { background: rgba(239, 83, 80, 0.15); color: #ef9a9a; }

.calendar-event-title {
    font-size: 11px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-impact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.calendar-event-impact.impact-high {
    background: var(--accent-red);
}

.calendar-event-impact.impact-medium {
    background: var(--accent-orange);
}

.calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 4px;
    font-size: 9px;
    color: var(--text-muted);
    border-top: 1px solid rgba(42, 46, 57, 0.4);
    margin-top: 8px;
}

.calendar-source {
    opacity: 0.7;
}

.calendar-updated {
    opacity: 0.6;
}

.calendar-empty {
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    padding: 20px 16px;
}

/* Gap header layout update for reach badge */
.gap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

/* Phase 5/6 chips (Fill/Reaction/Confluence + latest signal) */
.gap-score-strip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.gap-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(93, 96, 107, 0.35);
    background: rgba(93, 96, 107, 0.12);
    color: var(--text-secondary);
}

.gap-chip.chip-score.score-high {
    background: rgba(38, 166, 154, 0.18);
    border-color: rgba(38, 166, 154, 0.45);
    color: var(--accent-green);
}

.gap-chip.chip-score.score-med {
    background: rgba(255, 152, 0, 0.14);
    border-color: rgba(255, 152, 0, 0.35);
    color: var(--accent-orange);
}

.gap-chip.chip-score.score-low {
    background: rgba(93, 96, 107, 0.14);
    border-color: rgba(93, 96, 107, 0.35);
    color: var(--text-muted);
}

.gap-chip.chip-signal.sig-confirmed {
    background: rgba(38, 166, 154, 0.22);
    border-color: rgba(38, 166, 154, 0.50);
    color: var(--accent-green);
}

.gap-chip.chip-signal.sig-sweep {
    background: rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.45);
    color: var(--accent-orange);
}

.gap-chip.chip-signal.sig-neutral {
    background: rgba(93, 96, 107, 0.16);
    border-color: rgba(93, 96, 107, 0.40);
    color: var(--text-secondary);
}

/* Gap Strength Labels on Chart */
.gap-strength-label {
    position: absolute;
    right: 70px;
    transform: translateY(-50%);
    z-index: 50;
    pointer-events: none;
}

.gap-boundary-price-label {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    transform: translateY(-50%);
    z-index: 52;
    pointer-events: none;
    font-size: 10px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(8, 14, 22, 0.72);
    border: 1px solid rgba(156, 163, 175, 0.18);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);
    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
    will-change: opacity, transform;
    -webkit-transform: translateZ(0);
}

.gap-boundary-price-label.gap-boundary-top {
    transform: translateY(-100%);
}

.gap-boundary-price-label.gap-boundary-bottom {
    transform: translateY(0);
}

.gap-boundary-price-label.dormant-gap {
    opacity: 0.82;
}

.gap-id-label {
    position: absolute;
    left: 38%;
    transform: translate(-50%, -50%);
    z-index: 28;
    pointer-events: none;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(205, 210, 220, 0.26);
    white-space: nowrap;
}

.gap-id-label.dormant-gap {
    color: rgba(205, 210, 220, 0.18);
}

/* Gap Echo Labels (24h residue after fill) */
.gap-echo-label {
    position: absolute;
    left: 0;
    right: auto;
    transform: translateY(-50%);
    z-index: 45;
    pointer-events: none;
    font-size: 9px;
    font-style: italic;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.2px;
    /* opacity set per-element via JS freshness (0.50..0.85) */
    color: rgba(205, 210, 220, 0.80);
    background: rgba(19, 23, 34, 0.75);
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gap-echo-label.gap-echo-bullish {
    color: rgba(38, 166, 154, 0.90);
}

.gap-echo-label.gap-echo-bearish {
    color: rgba(239, 83, 80, 0.90);
}

/* Directional footprint labels */
.gap-echo-label.gap-echo-dir-up {
    color: rgba(38, 166, 154, 0.95);
}

.gap-echo-label.gap-echo-dir-down {
    color: rgba(239, 83, 80, 0.95);
}

.gap-echo-label .gap-echo-arrow {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    vertical-align: middle;
    stroke-width: 2.5;
}

.gap-echo-label .gap-echo-icon {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    vertical-align: middle;
}

/* ==========================================================================\n   INTERACTION MARKER TOOLTIP (fill-candle tap/click tooltip)\n   ========================================================================== */

.interaction-marker-tooltip {
    position: absolute;
    z-index: 200;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    letter-spacing: 0.2px;
    white-space: nowrap;
    pointer-events: none;
    animation: imt-fade-in 0.15s ease-out;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.interaction-marker-tooltip.imt-rej {
    background: rgba(239, 83, 80, 0.18);
    color: #ef5350;
    border: 1px solid rgba(239, 83, 80, 0.40);
}

.interaction-marker-tooltip.imt-brk {
    background: rgba(38, 166, 154, 0.18);
    color: #26a69a;
    border: 1px solid rgba(38, 166, 154, 0.40);
}

.interaction-marker-tooltip.imt-hov {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

@keyframes imt-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: ensure tooltip fits on small screens */
@media (max-width: 768px) {
    .interaction-marker-tooltip {
        font-size: 12px;
        padding: 8px 14px;
        max-width: calc(100vw - 32px);
        white-space: normal;
    }
}

/* ==========================================================================
   DIRECTIONAL BIAS STRIP (market structure summary from interactions)
   ========================================================================== */

.directional-bias-strip {
    position: absolute;
    top: 8px;
    right: 80px;
    z-index: 55;
    display: none; /* shown via JS when bias data available */
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    letter-spacing: 0.3px;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: imt-fade-in 0.3s ease-out;
}

.directional-bias-strip .bias-label {
    opacity: 0.65;
    font-weight: 500;
}

.directional-bias-strip .bias-value {
    font-weight: 700;
}

.directional-bias-strip .bias-desc {
    opacity: 0.70;
    font-weight: 400;
    font-size: 9px;
}

.directional-bias-strip.bias-bullish {
    background: rgba(38, 166, 154, 0.14);
    color: #26a69a;
    border: 1px solid rgba(38, 166, 154, 0.30);
}

.directional-bias-strip.bias-bearish {
    background: rgba(239, 83, 80, 0.14);
    color: #ef5350;
    border: 1px solid rgba(239, 83, 80, 0.30);
}

.directional-bias-strip.bias-neutral {
    background: rgba(255, 193, 7, 0.12);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.25);
}

/* Zone marker tooltip (shown on hover for clustered interactions) */
.interaction-marker-tooltip.imt-zone {
    white-space: pre-line;
    line-height: 1.5;
    max-width: 320px;
}

/* ==========================================================================
   RECENTLY-FILLED GAP CARD (mobile drawer)
   ========================================================================== */

.drawer-gap-card.gap-filled {
    border-left: 3px solid rgba(120, 123, 134, 0.5);
    opacity: 0.80;
    background: rgba(255, 255, 255, 0.015);
}

.drawer-gap-card.gap-filled.filled-rej {
    border-left-color: rgba(239, 83, 80, 0.6);
}

.drawer-gap-card.gap-filled.filled-brk {
    border-left-color: rgba(38, 166, 154, 0.6);
}

.drawer-gap-card.gap-filled.filled-hov {
    border-left-color: rgba(255, 193, 7, 0.55);
}

.drawer-gap-card .filled-outcome-tag {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
}

.filled-outcome-tag.tag-rej {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.14);
    border: 1px solid rgba(239, 83, 80, 0.25);
}

.filled-outcome-tag.tag-brk {
    color: #26a69a;
    background: rgba(38, 166, 154, 0.14);
    border: 1px solid rgba(38, 166, 154, 0.25);
}

.filled-outcome-tag.tag-hov {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.22);
}

.drawer-gap-card .filled-time-ago {
    font-size: 9px;
    color: var(--text-muted);
    margin-left: 4px;
}

.gap-strength-label .strength-score {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.gap-strength-label .strength-score.high {
    background: rgba(38, 166, 154, 0.25);
    color: var(--accent-green);
    border: 1px solid rgba(38, 166, 154, 0.5);
}

.gap-strength-label .strength-score.med {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange);
    border: 1px solid rgba(255, 152, 0, 0.4);
}

.gap-strength-label .strength-score.low {
    background: rgba(93, 96, 107, 0.2);
    color: var(--text-muted);
    border: 1px solid rgba(93, 96, 107, 0.4);
}

/* Reach Score on Chart Labels */
.gap-strength-label .reach-score {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin-left: 4px;
}

.gap-strength-label .reach-score.high {
    background: rgba(38, 166, 154, 0.3);
    color: #4ade80;
    border: 1px solid rgba(38, 166, 154, 0.6);
}

.gap-strength-label .reach-score.med {
    background: rgba(255, 152, 0, 0.25);
    color: #fbbf24;
    border: 1px solid rgba(255, 152, 0, 0.5);
}

.gap-strength-label .reach-score.low {
    background: rgba(93, 96, 107, 0.2);
    color: var(--text-muted);
    border: 1px solid rgba(93, 96, 107, 0.4);
}

/* Test Count Badge on Chart Labels */
.gap-strength-label .test-count-badge {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin-left: 4px;
    background: rgba(147, 112, 219, 0.25);
    color: #a78bfa;
    border: 1px solid rgba(147, 112, 219, 0.5);
}

/* Phase 5/6 On-Chart Score Chips (subtle) */
.gap-strength-label .chart-chip {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin-left: 3px;
    opacity: 0.85;
    letter-spacing: -0.2px;
}

.gap-strength-label .chart-chip.high {
    background: rgba(38, 166, 154, 0.22);
    color: #4ade80;
    border: 1px solid rgba(38, 166, 154, 0.45);
}

.gap-strength-label .chart-chip.med {
    background: rgba(255, 152, 0, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(255, 152, 0, 0.38);
}

.gap-strength-label .chart-chip.low {
    background: rgba(93, 96, 107, 0.16);
    color: var(--text-muted);
    border: 1px solid rgba(93, 96, 107, 0.35);
}

.gap-strength-label .chart-chip.sig {
    font-style: italic;
}

/* Dormant Gap Styling (soft-invalidated, counted for vacuum ratio) */
.gap-strength-label.dormant-gap {
    opacity: 0.5;
    pointer-events: none;
}

.gap-strength-label .dormant-badge {
    display: inline-block;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 500;
    background: rgba(100, 100, 120, 0.25);
    color: rgba(160, 160, 180, 0.8);
    border-radius: 3px;
    border: 1px dashed rgba(120, 120, 140, 0.4);
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FVG Age Badge — compact age indicator on gap labels (Option C)
   ══════════════════════════════════════════════════════════════════════════ */

.gap-strength-label .gap-age-badge {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
    margin-left: 4px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* Fresh: < 4h — bright pulsing accent (this gap JUST appeared) */
.gap-strength-label .gap-age-badge.age-fresh {
    background: rgba(56, 189, 248, 0.30);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, 0.55);
    animation: age-pulse 2s ease-in-out infinite;
}

/* Recent: 4h–24h — warm amber (appeared today) */
.gap-strength-label .gap-age-badge.age-recent {
    background: rgba(251, 191, 36, 0.20);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.40);
}

/* Established: 1d–7d — neutral muted (nothing special about age) */
.gap-strength-label .gap-age-badge.age-established {
    background: rgba(148, 163, 184, 0.14);
    color: rgba(148, 163, 184, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.28);
}

/* Old: > 7d — very muted (been around a while) */
.gap-strength-label .gap-age-badge.age-old {
    background: rgba(100, 100, 120, 0.12);
    color: rgba(140, 140, 160, 0.55);
    border: 1px solid rgba(100, 100, 120, 0.22);
}

@keyframes age-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FVG Origin Indicator — hover-reveal vertical line at formation (Option D)
   ══════════════════════════════════════════════════════════════════════════ */

.fvg-origin-line {
    position: absolute;
    width: 0;
    pointer-events: none;
    z-index: 55;
    animation: origin-fade-in 0.15s ease-out;
}

.fvg-origin-line.origin-bullish {
    border-left: 2px dashed rgba(38, 166, 154, 0.65);
}

.fvg-origin-line.origin-bearish {
    border-left: 2px dashed rgba(239, 83, 80, 0.65);
}

/* Origin tooltip (formation details popup) */
.fvg-origin-tooltip {
    position: absolute;
    transform: translateX(-50%);
    z-index: 56;
    pointer-events: none;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    letter-spacing: 0.2px;
    animation: origin-fade-in 0.15s ease-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.fvg-origin-tooltip.origin-bullish {
    background: rgba(38, 166, 154, 0.15);
    color: rgba(38, 166, 154, 0.95);
    border: 1px solid rgba(38, 166, 154, 0.35);
}

.fvg-origin-tooltip.origin-bearish {
    background: rgba(239, 83, 80, 0.15);
    color: rgba(239, 83, 80, 0.95);
    border: 1px solid rgba(239, 83, 80, 0.35);
}

.fvg-origin-tooltip .origin-label {
    color: rgba(209, 212, 220, 0.70);
    margin-right: 3px;
    font-weight: 500;
}

.fvg-origin-tooltip .origin-age {
    margin-left: 6px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(209, 212, 220, 0.85);
}

.fvg-origin-tooltip .origin-trend {
    margin-left: 5px;
    font-style: italic;
    font-weight: 500;
    opacity: 0.70;
    font-size: 8px;
}

@keyframes origin-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile responsive: slightly wider touch targets */
@media (max-width: 768px) {
    .fvg-origin-tooltip {
        font-size: 10px;
        padding: 4px 10px;
    }
    .gap-strength-label .gap-age-badge {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* Version Badge */
.version-badge {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.5;
    font-family: 'SF Mono', 'Consolas', monospace;
    pointer-events: none;
    z-index: 1000;
}

/* Collapsible Panels */
.panel-section.collapsible .panel-title-collapsible {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.2s ease;
}

.panel-section.collapsible .panel-title-collapsible:hover {
    color: var(--accent-blue);
}

.panel-section.collapsible .collapse-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.panel-section.collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.panel-section.collapsible .panel-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
    opacity: 1;
}

.panel-section.collapsible.collapsed .panel-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Outlook Factors Panel Container (inline, toggleable) */
.outlook-factors-container {
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
}

/* Toggle tab — always visible, never transforms with the panel */
.outlook-factors-toggle {
    order: 2;
    flex-shrink: 0;
    pointer-events: auto;
    width: 24px;
    height: 40px;
    background: rgba(30, 33, 40, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.outlook-factors-toggle:hover {
    background: rgba(40, 44, 52, 0.95);
    color: var(--text-primary);
}

.outlook-factors-toggle:active {
    opacity: 0.8;
}

.outlook-factors-toggle .toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

/* Icon points left when open (click to close), right when closed (click to open) */
.outlook-factors-container:not(.collapsed) .outlook-factors-toggle .toggle-icon {
    transform: rotate(0deg);
}

.outlook-factors-container.collapsed .outlook-factors-toggle .toggle-icon {
    transform: rotate(180deg);
}

/* Panel — slides in/out via width + opacity */
.outlook-factors-panel {
    order: 1;
    pointer-events: auto;
    background: rgba(30, 33, 40, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 0 8px 8px 0;
    padding: 10px 12px;
    width: 280px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 11px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                border-color 0.3s ease;
    opacity: 1;
}

.outlook-factors-container.collapsed .outlook-factors-panel {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border-color: transparent;
    overflow: hidden;
}

.outlook-factors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.outlook-factors-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.outlook-factors-summary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.outlook-factors-ml {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
}

.outlook-factors-ml.quiet { color: var(--text-muted); }
.outlook-factors-ml.heating { color: #ffd54f; }
.outlook-factors-ml.building { color: #ffb74d; }
.outlook-factors-ml.imminent { color: #ff7043; }

.outlook-factors-heuristic {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.outlook-factors-max {
    color: var(--text-muted);
    font-size: 9px;
    margin-left: 2px;
}

.outlook-factors-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Inline factor items (compact) */
.outlook-factors-list .factor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}

.outlook-factors-list .factor-item.factor-unavailable {
    opacity: 0.4;
}

.outlook-factors-list .factor-info {
    flex: 1;
    min-width: 0;
}

.outlook-factors-list .factor-name {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outlook-factors-list .factor-detail {
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outlook-factors-list .factor-score {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.outlook-factors-list .factor-bar {
    width: 40px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.outlook-factors-list .factor-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.outlook-factors-list .factor-fill.low { background: var(--text-muted); }
.outlook-factors-list .factor-fill.medium { background: #ffd54f; }
.outlook-factors-list .factor-fill.high { background: #ff7043; }

.outlook-factors-list .factor-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-secondary);
    min-width: 22px;
    text-align: right;
}

/* Direction note inside inline factors */
.outlook-factors-list .factors-direction-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin-bottom: 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    font-size: 10px;
}

.outlook-factors-list .factors-hangover-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin-bottom: 2px;
    background: rgba(255, 183, 77, 0.08);
    border-radius: 4px;
    font-size: 10px;
    color: #ffb74d;
}


/* Clickable Panel Title */
.panel-title.clickable {
    cursor: pointer;
    transition: color 0.2s ease;
}

.panel-title.clickable:hover {
    color: var(--accent-blue);
}

.info-hint {
    width: 12px;
    height: 12px;
    opacity: 0.4;
    margin-left: 4px;
}

.panel-title.clickable:hover .info-hint {
    opacity: 0.8;
}

/* Modal Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.modal-icon {
    width: 18px;
    height: 18px;
    color: var(--accent-blue);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.modal-close i {
    width: 18px;
    height: 18px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* API Rate Limit Modal Specific */
.api-status-header {
    margin-bottom: 20px;
}

.api-usage-meter {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.api-usage-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--positive), var(--accent-orange));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.api-usage-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.api-usage-percent {
    font-size: 28px;
    font-weight: 700;
}

.api-usage-percent.positive {
    color: var(--positive);
}

.api-usage-percent.warning {
    color: var(--accent-orange);
}

.api-usage-percent.negative {
    color: var(--negative);
}

.api-usage-label {
    font-size: 12px;
    color: var(--text-muted);
}

.api-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.api-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.api-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.api-stat-value.positive {
    color: var(--positive);
}

.api-stat-value.warning {
    color: var(--accent-orange);
}

.api-stat-value.negative {
    color: var(--negative);
}

.api-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-endpoints-section h4 {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.api-endpoint-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.api-endpoint-row:last-child {
    border-bottom: none;
}

.endpoint-name {
    font-size: 12px;
    color: var(--text-primary);
    font-family: 'Monaco', 'Consolas', monospace;
}

.endpoint-stats {
    font-size: 11px;
    color: var(--text-muted);
}

.api-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    background: rgba(42, 130, 228, 0.1);
    border: 1px solid rgba(42, 130, 228, 0.2);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.api-info-note .info-icon {
    width: 14px;
    height: 14px;
    color: var(--accent-blue);
    flex-shrink: 0;
    margin-top: 1px;
}

/* =============================================================================
   MOBILE FAB CONTAINER & DRAWERS
   ============================================================================= */

/* Mobile FAB Container - Hidden on desktop */
.mobile-fab-container {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 500;
    gap: 8px;
}

/* Legacy .mobile-gaps-fab - keep for compatibility */
.mobile-gaps-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 500;
}

/* Mobile FAB Button - shared styles */
.mobile-fab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(41, 98, 255, 0);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-tap-highlight-color: transparent;
}

.mobile-fab-btn:active {
    transform: scale(0.92);
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Subtle pulse animation for FAB */
@keyframes fabPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.mobile-fab-btn:not(:active) {
    animation: fabPulse 3s ease-in-out infinite;
}

.mobile-fab-btn.news-fab:not(:active) {
    animation: fabPulseOrange 3s ease-in-out infinite;
}

@keyframes fabPulseOrange {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.mobile-fab-btn i {
    width: 16px;
    height: 16px;
}

.mobile-fab-btn.news-fab i {
    color: var(--accent-orange);
}

.fab-count {
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.news-fab .fab-count {
    background: var(--accent-orange);
}

/* Legacy gaps-fab-btn - keep for compatibility */
.gaps-fab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.gaps-fab-btn:active {
    transform: scale(0.95);
    background: var(--bg-secondary);
}

.gaps-fab-btn i {
    width: 16px;
    height: 16px;
}

.gaps-fab-count {
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Mobile Gaps Drawer - Slides up from bottom, above tab bar (9000) */
.mobile-gaps-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 29, 36, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    max-height: 50vh;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 9200;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

.mobile-gaps-drawer.open {
    transform: translateY(0);
}

.drawer-handle {
    display: flex;
    justify-content: center;
    padding: 12px;
    cursor: grab;
}

.drawer-handle:active {
    cursor: grabbing;
}

.drawer-handle-bar {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.drawer-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.drawer-header h3 i {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
}

.drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    cursor: pointer;
}

.drawer-close i {
    width: 20px;
    height: 20px;
}

.drawer-content {
    padding: 12px 16px;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.drawer-gaps-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.drawer-gap-stat {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(54, 58, 69, 0.45);
    border-radius: 3px;
    padding: 10px;
    text-align: center;
}

.drawer-gap-stat .stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.drawer-gap-stat .stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.drawer-gap-stat.above .stat-value {
    color: var(--text-primary);
}

.drawer-gap-stat.below .stat-value {
    color: var(--text-primary);
}

.drawer-nearest {
    margin-top: 12px;
}

.drawer-nearest-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.drawer-nearest-value {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    font-family: 'JetBrains Mono', monospace;
}

/* Dormant count in drawer stat boxes */
.drawer-gap-stat .stat-dormant {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
    opacity: 0.7;
}

/* Vacuum indicator in drawer */
.drawer-vacuum {
    margin-bottom: 12px;
    padding: 7px 10px;
    background: transparent;
    border-top: 1px solid rgba(54, 58, 69, 0.5);
    border-bottom: 1px solid rgba(54, 58, 69, 0.5);
    border-left: none;
    border-right: none;
    border-radius: 0;
}

.drawer-vacuum-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}

.drawer-vacuum-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-vacuum-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-left: auto;
}

.drawer-vacuum-bias {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.drawer-vacuum-bias.bias-above {
    color: var(--positive);
    background: rgba(38, 166, 154, 0.12);
}

.drawer-vacuum-bias.bias-below {
    color: var(--negative);
    background: rgba(239, 83, 80, 0.12);
}

/* Gap list in drawer */
.drawer-gap-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drawer-gap-list-title {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.drawer-gap-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid rgba(54, 58, 69, 0.4);
    border-radius: 3px;
    font-size: 12px;
}

.drawer-gap-card.gap-above {
    border-left: 2px solid rgba(239, 83, 80, 0.4);
}

.drawer-gap-card.gap-below {
    border-left: 2px solid rgba(38, 166, 154, 0.4);
}

.drawer-gap-card.gap-dormant {
    opacity: 0.55;
    border-style: dashed;
}

.drawer-gap-card .gap-card-dir {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.drawer-gap-card .gap-card-info {
    flex: 1;
    min-width: 0;
}

.drawer-gap-card .gap-card-range {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-gap-card .gap-card-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.drawer-gap-card .gap-card-badge {
    margin-left: auto;
    flex-shrink: 0;
}

.drawer-gap-card .dormant-tag {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Backdrop for drawer — z-index above tab bar (9000) so drawers slide over it */
.drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-backdrop.open {
    display: block;
    opacity: 1;
}

/* =============================================================================
   MOBILE NEWS DRAWER
   ============================================================================= */

.mobile-news-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 29, 36, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    max-height: 50vh;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 9200;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

.mobile-news-drawer.open {
    transform: translateY(0);
}

/* News drawer next up section */
.news-drawer-next {
    background: linear-gradient(135deg, rgba(239, 83, 80, 0.15) 0%, rgba(255, 152, 0, 0.1) 100%);
    border: 1px solid rgba(239, 83, 80, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.news-drawer-next .next-up-badge {
    display: inline-block;
    background: var(--accent-red);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.news-drawer-next-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.news-drawer-next-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.news-drawer-next-currency {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.news-drawer-next-title {
    font-size: 11px;
    color: var(--text-secondary);
    flex: 1;
    min-width: 100%;
}

.news-drawer-next-countdown {
    font-size: 11px;
    color: var(--accent-orange);
    font-weight: 600;
}

/* News drawer list */
.news-drawer-list {
    max-height: 28vh;
    overflow-y: auto;
}

.news-drawer-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-drawer-item:last-child {
    border-bottom: none;
}

.news-drawer-item-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 45px;
}

.news-drawer-item-currency {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.news-drawer-item-title {
    flex: 1;
    font-size: 11px;
    color: var(--text-primary);
    line-height: 1.3;
}

.news-drawer-item-impact {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 4px;
}

.news-drawer-item-impact.high {
    background: var(--accent-red);
    box-shadow: 0 0 6px var(--accent-red);
}

.news-drawer-item-impact.medium {
    background: var(--accent-orange);
    box-shadow: 0 0 6px var(--accent-orange);
}

.news-drawer-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

.news-drawer-day-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.news-drawer-day-header:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Help Modal Styles — max-width set at end of guide section */
.help-modal {
    max-height: 88vh;
}

.help-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.help-kicker {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.help-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.help-list li {
    margin: 6px 0;
}

.help-strong {
    font-weight: 700;
    color: var(--text-primary);
}

.help-section {
    margin-bottom: 4px;
}

.help-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.help-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-blue);
}

.help-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.help-states {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.help-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid;
}

.help-state.imminent {
    border-color: var(--accent-red);
}

.help-state.building {
    border-color: var(--accent-orange);
}

.help-state.heating {
    border-color: #ffd54f;
}

.help-state.quiet {
    border-color: var(--text-muted);
}

.help-state.go {
    border-color: var(--accent-green);
}

.help-state.wait {
    border-color: var(--accent-orange);
}

.help-state.avoid {
    border-color: var(--accent-red);
}

.state-name {
    font-size: 12px;
    font-weight: 700;
    min-width: 70px;
    color: var(--text-primary);
}

.state-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.help-factors {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.help-divider {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0;
}

/* ── Guide: Gap Echo table ─────────────────────────────────── */
.guide-echo-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.guide-echo-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.guide-echo-badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-top: 1px;
}

.guide-echo-badge.echo-up {
    background: rgba(38, 166, 154, 0.18);
    color: rgba(38, 166, 154, 1);
    border: 1px solid rgba(38, 166, 154, 0.35);
}

.guide-echo-badge.echo-down {
    background: rgba(239, 83, 80, 0.18);
    color: rgba(239, 83, 80, 1);
    border: 1px solid rgba(239, 83, 80, 0.35);
}

.guide-echo-badge.echo-neutral {
    background: rgba(255, 193, 7, 0.14);
    color: rgba(255, 193, 7, 1);
    border: 1px solid rgba(255, 193, 7, 0.30);
}

.guide-echo-badge.guide-brk {
    background: rgba(38, 166, 154, 0.22);
    color: rgba(38, 166, 154, 1);
    border: 1px solid rgba(38, 166, 154, 0.45);
    letter-spacing: 0.12em;
    font-size: 12px;
    padding: 4px 10px;
}

.guide-echo-badge.guide-rej {
    background: rgba(239, 83, 80, 0.22);
    color: rgba(239, 83, 80, 1);
    border: 1px solid rgba(239, 83, 80, 0.45);
    letter-spacing: 0.12em;
    font-size: 12px;
    padding: 4px 10px;
}

.guide-echo-badge.guide-hov {
    background: rgba(255, 193, 7, 0.18);
    color: rgba(255, 193, 7, 1);
    border: 1px solid rgba(255, 193, 7, 0.35);
    letter-spacing: 0.12em;
    font-size: 12px;
    padding: 4px 10px;
}

.guide-echo-body {
    flex: 1 1 auto;
    min-width: 0;
}

.guide-echo-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.guide-echo-sub {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.guide-echo-sub code {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.help-body::-webkit-scrollbar {
    width: 4px;
}
.help-body::-webkit-scrollbar-track {
    background: transparent;
}
.help-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
}
.help-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.22);
}

/* ── Guide: Difference comparison table ────────────────────── */
.guide-diff-table {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 10px;
}

.guide-diff-header {
    display: contents;
}

.guide-diff-header > div {
    padding: 8px 10px;
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 11px;
    border-bottom: 1px solid var(--border-color);
}

.guide-diff-header > div:nth-child(1) {
    background: transparent;
}

.guide-diff-row {
    display: contents;
}

.guide-diff-row > div {
    padding: 8px 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.guide-diff-row:last-child > div {
    border-bottom: none;
}

.guide-diff-row > div:nth-child(odd):not(.guide-diff-label) {
    background: rgba(255,255,255,0.015);
}

.guide-diff-label {
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255,255,255,0.03) !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.help-modal {
    max-width: 560px;
}

/* Legend grid */
.legend-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.legend-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid rgba(41, 98, 255, 0.35);
}

.legend-chip {
    flex: 0 0 auto;
    padding-top: 1px;
}

.legend-text {
    flex: 1 1 auto;
    min-width: 0;
}

.legend-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.legend-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.legend-note {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Reuse chart-chip styling inside the Help modal */
.help-modal .chart-chip {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.2px;
}

.help-modal .chart-chip.high {
    background: rgba(38, 166, 154, 0.22);
    color: #4ade80;
    border: 1px solid rgba(38, 166, 154, 0.45);
}

.help-modal .chart-chip.med {
    background: rgba(255, 152, 0, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(255, 152, 0, 0.38);
}

.help-modal .chart-chip.low {
    background: rgba(93, 96, 107, 0.16);
    color: var(--text-muted);
    border: 1px solid rgba(93, 96, 107, 0.35);
}

.help-modal .chart-chip.sig {
    font-style: italic;
}

.help-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 10px;
}

.formula-part {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.formula-part.imminent {
    background: rgba(239, 83, 80, 0.2);
    color: var(--accent-red);
}

.formula-part.gap {
    background: rgba(41, 98, 255, 0.2);
    color: var(--accent-blue);
}

.formula-part.go {
    background: rgba(38, 166, 154, 0.2);
    color: var(--accent-green);
}

.formula-op {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.help-note {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    background: rgba(255, 235, 59, 0.1);
    border: 1px solid rgba(255, 235, 59, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
}

/* Mobile action button adjustments */
@media (max-width: 768px) {
    .settings-btn,
    .help-btn {
        padding: 6px 8px;
        border-radius: 5px;
    }
    
    .settings-btn i,
    .help-btn i {
        width: 14px;
        height: 14px;
    }
    
    .help-modal {
        max-width: 95%;
        max-height: calc(90vh - 60px);
    }
    
    .help-body {
        padding: 14px 16px;
        overflow-y: auto;
    }
    
    .help-section h4 {
        font-size: 14px;
    }
    
    .help-formula {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* =============================================================================
   CHART CONTEXT MENU
   ============================================================================= */

.chart-context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: none;
}

.chart-context-menu.visible {
    display: block;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.context-menu-item.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.context-menu-item.has-submenu {
    position: relative;
}

.context-menu-arrow {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1;
}

.context-submenu {
    position: absolute;
    top: -4px;
    left: calc(100% + 6px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 190px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 10001;
}

.chart-context-menu.submenu-left .context-submenu {
    left: auto;
    right: calc(100% + 6px);
}

.context-menu-item.has-submenu:hover .context-submenu {
    display: block;
}

.context-menu-item:hover {
    background: var(--bg-hover);
}

.context-menu-item i,
.context-menu-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

.clipboard-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: rgba(30, 34, 45, 0.95);
    border: 1px solid rgba(54, 58, 69, 0.8);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10002;
    pointer-events: none;
}

.clipboard-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================================================
   SITE FOOTER
   ============================================================================= */

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 6px 16px;
    background: rgba(30, 33, 40, 0.85);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(42, 46, 57, 0.5);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    flex-shrink: 0;
    position: relative;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    z-index: 1;
}

.footer-link:hover {
    color: var(--accent-blue);
}

.footer-link i {
    width: 14px;
    height: 14px;
}

.footer-copyright {
    line-height: 1.2;
}

.footer-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    pointer-events: auto;
}

.footer-contact-text {
    color: var(--text-muted);
    line-height: 1.2;
}

.footer-contact-link {
    color: inherit;
    text-decoration: none;
}

.footer-contact-link:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

.footer-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-blue);
    text-decoration: none;
    transition: all 0.2s ease;
    z-index: 1;
    margin-left: auto;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(66, 165, 245, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(66, 165, 245, 0.3);
}

.footer-contact:hover {
    color: #fff;
    background: rgba(66, 165, 245, 0.25);
    border-color: var(--accent-blue);
}

.footer-contact i {
    width: 14px;
    height: 14px;
}

/* Hide footer on mobile to save vertical space */
@media (max-width: 480px) {
    .site-footer {
        display: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .site-footer {
        display: none;
    }
}

/* =============================================================================
   LANDING PAGE MODAL - PREMIUM DESIGN
   ============================================================================= */

.landing-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.landing-modal.visible {
    display: flex;
    animation: landingFadeIn 0.4s ease;
}

.landing-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10, 12, 16, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(8px);
}

.landing-card {
    position: relative;
    width: 90%;
    max-width: 720px;
    background: linear-gradient(165deg, rgba(35, 39, 47, 0.98) 0%, rgba(22, 25, 30, 0.98) 100%);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 48px 56px;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 100px rgba(33, 150, 243, 0.08);
    animation: landingSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.landing-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.03) 20%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.03) 80%,
        transparent 100%);
}

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

@keyframes landingSlideUp {
    from { 
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.landing-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.25s ease;
}

.landing-close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.landing-close i {
    width: 18px;
    height: 18px;
}

/* Header */
.landing-header {
    text-align: center;
    margin-bottom: 44px;
}

.landing-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 16px 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.landing-logo-icon {
    width: 22px;
    height: 22px;
    color: var(--accent-orange);
}

.landing-brand {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.landing-header h2 {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a0a8b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 16px 0;
}

.landing-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-orange));
    border-radius: 2px;
    margin: 0 auto 16px;
}

.landing-header p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    letter-spacing: 0.3px;
}

/* Market Cards Grid */
.landing-markets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

/* Individual Market Card */
.market-card {
    position: relative;
    background: linear-gradient(160deg, rgba(45, 50, 60, 0.5) 0%, rgba(30, 34, 42, 0.5) 100%);
    border: 2px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 36px 28px 28px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: not-allowed;
    overflow: hidden;
}

.market-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.market-glow {
    display: none;
}

.market-card.active {
    cursor: pointer;
    border-color: rgba(33, 150, 243, 0.25);
}

.market-card.active:hover {
    transform: translateY(-6px);
    border-color: rgba(33, 150, 243, 0.5);
    background: linear-gradient(160deg, rgba(50, 56, 68, 0.7) 0%, rgba(35, 40, 50, 0.7) 100%);
}

.market-card.active:hover .market-glow {
    opacity: 1;
}

.market-card.active:hover .market-cta {
    opacity: 1;
    transform: translateY(0);
}

.market-card.active:hover .market-icon-wrap {
    transform: scale(1.1);
}

/* Disabled Card */
.market-card.disabled {
    opacity: 0.65;
}

.market-card.disabled .market-icon-wrap {
    filter: grayscale(0.5);
}

.market-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 21, 0.4);
    backdrop-filter: blur(1px);
    border-radius: 14px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.market-card.disabled:hover .market-lock-overlay {
    opacity: 1;
}

.lock-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Market Badge */
.market-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.market-badge.live {
    background: rgba(38, 166, 154, 0.15);
    border: 1px solid rgba(38, 166, 154, 0.3);
    color: #4db6ac;
}

.market-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #26a69a;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.market-badge.coming-soon {
    background: rgba(255, 167, 38, 0.1);
    border: 1px solid rgba(255, 167, 38, 0.25);
    color: #ffb74d;
}

/* Market Icon */
.market-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.15) 0%, rgba(247, 147, 26, 0.05) 100%);
    border: 1px solid rgba(247, 147, 26, 0.25);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.market-icon-wrap.gold {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.05) 100%);
    border-color: rgba(255, 193, 7, 0.2);
}

.market-icon-svg {
    width: 40px;
    height: 40px;
    color: var(--accent-blue);
}

.market-icon-text {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.market-icon-text.btc {
    color: #f7931a;
}

.market-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.market-icon-wrap.gold .market-icon-svg {
    color: #ffc107;
}

.market-symbol {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    letter-spacing: 1px;
}

.market-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
    letter-spacing: 0.3px;
}

/* Enter CTA */
.market-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, #1976d2 100%);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
}

.market-cta i {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.market-card.active:hover .market-cta i {
    transform: translateX(4px);
}

/* Market Status (for disabled) */
.market-status {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Footer */
.landing-footer {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.landing-footer span {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .landing-modal {
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    }

    .landing-card {
        padding: 32px 24px;
        margin: 16px;
        width: calc(100% - 32px);
    }
    
    .landing-markets {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .landing-header h2 {
        font-size: 24px;
    }
    
    .market-icon-wrap {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }
    
    .market-icon-svg {
        width: 32px;
        height: 32px;
    }
    
    .market-cta {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
   LEARNING IMPROVEMENT TOASTS
   ============================================================================= */

.improvement-toast-container {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 360px;
}

.improvement-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(30, 34, 45, 0.97) 0%, rgba(26, 30, 40, 0.97) 100%);
    border: 1px solid rgba(38, 166, 154, 0.35);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(40px) scale(0.96);
    transition: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.improvement-toast.show {
    animation: improvementSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.improvement-toast.exiting {
    animation: improvementSlideOut 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes improvementSlideIn {
    0% {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes improvementSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(40px) scale(0.92);
    }
}

.improvement-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(38, 166, 154, 0.14);
    color: #26a69a;
}

.improvement-toast-icon svg {
    width: 16px;
    height: 16px;
}

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

.improvement-toast-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #d1d4dc;
}

.improvement-system {
    color: #26a69a;
}

.improvement-label {
    color: #787b86;
    font-weight: 500;
    font-size: 12px;
}

.improvement-deltas {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.improvement-delta {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: #9aa0a6;
    background: rgba(38, 166, 154, 0.08);
    border: 1px solid rgba(38, 166, 154, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.improvement-arrow::before {
    content: ' \2192 ';
    color: #26a69a;
    font-weight: 700;
}

.improvement-toast-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #5d606b;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    margin: -2px -4px 0 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.improvement-toast-close:hover {
    color: #d1d4dc;
    background: rgba(255, 255, 255, 0.06);
}

.improvement-toast-close svg {
    width: 14px;
    height: 14px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .improvement-toast-container {
        top: auto;
        bottom: 80px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .improvement-toast {
        padding: 10px 12px;
    }
}

/* =============================================================================
   MODEL HEALTH MONITOR
   ============================================================================= */

.model-health-card {
    border-top: 1px solid rgba(255,255,255,0.04);
    margin-top: auto;
}

.model-health-card .card-header {
    cursor: pointer;
}

.mh-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mh-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-green, #26a69a);
    animation: mh-pulse-glow 2s ease-in-out infinite;
}

@keyframes mh-pulse-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.mh-content {
    padding: 0 !important;
}

.mh-panel-note {
    padding: 10px 12px 0;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    line-height: 1.45;
}

/* Tabs */
.mh-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mh-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 4px 8px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: inherit;
}

.mh-tab:hover {
    color: rgba(255,255,255,0.7);
}

.mh-tab.active {
    color: var(--accent-blue, #2962ff);
    border-bottom-color: var(--accent-blue, #2962ff);
}

/* Model Cards */
.mh-models {
    padding: 10px 12px;
    min-height: 100px;
}

.mh-loading {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    text-align: center;
    padding: 20px;
}

.mh-model-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}

.mh-model-card:last-child { margin-bottom: 0; }

.mh-model-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mh-model-version {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.mh-agent-description {
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    line-height: 1.45;
    margin-bottom: 8px;
}

.mh-model-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.mh-model-badge.active {
    background: rgba(38,166,154,0.15);
    color: #26a69a;
}

.mh-model-badge.inactive {
    background: rgba(239,83,80,0.15);
    color: #ef5350;
}

/* Metrics Row */
.mh-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.mh-metric {
    text-align: center;
    padding: 4px 2px;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.mh-metric-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #e0e0e0;
    line-height: 1.2;
}

.mh-metric-value.good { color: #26a69a; }
.mh-metric-value.warn { color: #ff9800; }
.mh-metric-value.bad  { color: #ef5350; }

.mh-metric-label {
    display: block;
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

/* Data Distribution Bar */
.mh-class-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.mh-class-bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
}

.mh-class-pos {
    height: 100%;
    background: #26a69a;
    transition: width 0.3s;
}

.mh-class-neg {
    height: 100%;
    background: rgba(255,255,255,0.1);
    flex: 1;
}

.mh-class-label {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

/* Factors */
.mh-factors {
    margin-bottom: 6px;
}

.mh-factors-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.25);
    margin-bottom: 4px;
}

.mh-factor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.mh-factor-name {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mh-factor-weight {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 8px;
}

.mh-factor-weight.positive { color: #26a69a; }
.mh-factor-weight.negative { color: #ef5350; }

/* Threshold + Trained */
.mh-model-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.mh-threshold {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    font-family: 'JetBrains Mono', monospace;
}

.mh-trained-at {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
}

/* Pipeline */
.mh-divider {
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin: 0 12px;
}

.mh-pipeline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.mh-pipeline {
    padding: 0 12px 8px;
}

/* Anomaly Detection (Model Health) */
.anomaly-status {
    padding: 0 12px 8px;
}

.anomaly-system-banner {
    border-left: 3px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.anomaly-system-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.anomaly-system-icon {
    width: 14px;
    height: 14px;
}

.anomaly-system-label {
    font-size: 12px;
    font-weight: 600;
}

.anomaly-system-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: auto;
}

.anomaly-models {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anomaly-model-row {
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.anomaly-model-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.anomaly-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

.anomaly-model-name {
    font-size: 11px;
    color: var(--text-primary);
    text-transform: capitalize;
}

.anomaly-model-status {
    font-size: 10px;
    margin-left: auto;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
}

.anomaly-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.anomaly-detail-text {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.anomaly-detail-text.muted {
    color: var(--text-tertiary);
}

.anomaly-progress {
    flex: 1;
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.anomaly-progress-bar {
    height: 100%;
    background: rgba(255,255,255,0.35);
}

/* Status variants — reuse existing Learning Systems palette */
.anomaly-system-banner.healthy { border-left-color: #26a69a; background: rgba(38,166,154,0.08); }
.anomaly-system-banner.warming { border-left-color: #78909c; background: rgba(120,144,156,0.08); }
.anomaly-system-banner.degraded { border-left-color: #ff9800; background: rgba(255,152,0,0.08); }
.anomaly-system-banner.critical { border-left-color: #ef5350; background: rgba(239,83,80,0.10); }
.anomaly-system-banner.nodata { border-left-color: #78909c; background: rgba(120,144,156,0.08); }

.anomaly-system-banner.healthy .anomaly-system-label,
.anomaly-model-row.healthy .anomaly-model-status,
.anomaly-model-row.healthy .anomaly-dot,
.anomaly-progress-bar.healthy { color: #26a69a; background: #26a69a; }

.anomaly-system-banner.warming .anomaly-system-label,
.anomaly-model-row.warming .anomaly-model-status,
.anomaly-model-row.warming .anomaly-dot,
.anomaly-progress-bar.warming { color: #78909c; background: #78909c; }

.anomaly-system-banner.degraded .anomaly-system-label,
.anomaly-model-row.degraded .anomaly-model-status,
.anomaly-model-row.degraded .anomaly-dot,
.anomaly-progress-bar.degraded { color: #ff9800; background: #ff9800; }

.anomaly-system-banner.critical .anomaly-system-label,
.anomaly-model-row.critical .anomaly-model-status,
.anomaly-model-row.critical .anomaly-dot,
.anomaly-progress-bar.critical { color: #ef5350; background: #ef5350; }

.anomaly-system-banner.nodata .anomaly-system-label,
.anomaly-model-row.nodata .anomaly-model-status,
.anomaly-model-row.nodata .anomaly-dot,
.anomaly-progress-bar.nodata { color: #78909c; background: #78909c; }

.mh-pipe-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.mh-pipe-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}

.mh-pipe-value {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(255,255,255,0.6);
}

/* Timers */
.mh-timers {
    padding: 0 12px 8px;
}

.mh-timer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.mh-timer-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mh-timer-dot.active { background: #26a69a; }
.mh-timer-dot.inactive { background: #ef5350; }

.mh-timer-name {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    flex: 1;
}

.mh-timer-info {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    font-family: 'JetBrains Mono', monospace;
}

/* Footer */
.mh-footer {
    padding: 6px 12px 8px;
    text-align: right;
}

.mh-last-refresh {
    font-size: 9px;
    color: rgba(255,255,255,0.2);
}

/* Mobile ML Drawer */
.mobile-ml-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9200;
    background: rgba(26, 29, 36, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.mobile-ml-drawer.open {
    transform: translateY(0);
}

.ml-backdrop {
    z-index: 9100;
}

.ml-fab {
    background: rgba(41,98,255,0.12) !important;
}

.ml-fab i {
    color: var(--accent-blue);
}

.mobile-fab-btn.ml-fab:not(:active) {
    animation: fabPulseBlue 3s ease-in-out infinite;
}

@keyframes fabPulseBlue {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.mobile-ml-drawer .mh-models {
    padding: 10px 16px;
}

.mobile-ml-drawer .mh-pipeline {
    padding: 0 16px 8px;
}

.mobile-ml-drawer .mh-timers {
    padding: 0 16px 8px;
}

.mobile-ml-drawer .mh-divider {
    margin: 0 16px;
}

.mobile-ml-drawer .mh-pipeline-header {
    padding: 8px 16px 4px;
}

.mobile-ml-drawer .mh-footer {
    padding: 6px 16px 20px;
}

.mobile-mh-tabs {
    padding: 8px 16px 0;
}

/* =============================================================================
   AUTOTUNE HISTORY PANEL
   ============================================================================= */

.at-history {
    padding: 4px 0;
}

.at-loading {
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 8px 0;
    text-align: center;
}

.at-row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.at-row:last-child {
    border-bottom: none;
}

.at-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.at-decision-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
}

.at-decision-badge.at-activated {
    color: #81c784;
    background: rgba(129, 199, 132, 0.10);
}

.at-decision-badge.at-no-change {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}

.at-time {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.at-row-metrics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.at-metric {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.at-delta-pos {
    color: #81c784;
}

.at-delta-neg {
    color: #ef5350;
}

.at-row-params {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
    word-break: break-all;
}

/* =============================================================================
   NARRATIVE STORIES DRAWER
   ============================================================================= */

.mobile-stories-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9200;
    background: rgba(26, 29, 36, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.mobile-stories-drawer.open {
    transform: translateY(0);
}

.stories-backdrop {
    z-index: 9100;
}

/* Filter bar */
.stories-filter-bar {
    display: flex;
    gap: 6px;
    padding: 6px 16px 12px;
}

.stories-filter-btn {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
}

.stories-filter-btn.active {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent-light);
}

/* Story list */
.stories-list {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stories-loading {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 24px 0;
}

.stories-empty {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
    padding: 32px 16px;
    line-height: 1.5;
}

/* Episode card */
.story-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.story-card:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.05);
}

.story-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.story-archetype-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Archetype color scheme */
.arch-reject_support_fill,
.arch-reject_resistance_fill {
    color: #81c784;
    background: rgba(129, 199, 132, 0.12);
}

.arch-sequential_rejection,
.arch-trend_continuation {
    color: #ffb74d;
    background: rgba(255, 183, 77, 0.12);
}

.arch-range_compression {
    color: #64b5f6;
    background: rgba(100, 181, 246, 0.12);
}

.arch-cascade_fill {
    color: #ce93d8;
    background: rgba(206, 147, 216, 0.12);
}

.arch-sweep_reverse {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.12);
}

.arch-mixed_interaction {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
}

.story-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.story-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.story-status-open {
    color: #81c784;
}

.story-status-closed {
    color: var(--text-muted);
}

.story-narrative {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.story-card.expanded .story-narrative {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.story-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.story-price-move {
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.story-price-up {
    color: #81c784;
}

.story-price-down {
    color: #ef5350;
}

.story-time {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Step timeline (expanded view) */
.story-steps {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.story-card.expanded .story-steps {
    display: block;
}

.story-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.7rem;
    position: relative;
}

.story-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: -5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.step-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-dot.approach    { background: rgba(100, 181, 246, 0.6); }
.step-dot.tag         { background: rgba(255, 183, 77, 0.6); }
.step-dot.test        { background: rgba(255, 183, 77, 0.8); }
.step-dot.filled      { background: rgba(129, 199, 132, 0.8); }
.step-dot.rejected    { background: rgba(239, 83, 80, 0.6); }
.step-dot.sweep       { background: rgba(206, 147, 216, 0.7); }
.step-dot.default     { background: rgba(255, 255, 255, 0.15); }

.step-info {
    flex: 1;
    min-width: 0;
}

.step-event-type {
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: capitalize;
}

.step-detail {
    display: flex;
    gap: 8px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    margin-top: 2px;
}

/* On-chart archetype label on gap zones (optional) */
.gap-archetype-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 3px;
    opacity: 0.7;
}

/* Desktop: show stories as side panel when applicable */
@media (min-width: 769px) {
    .mobile-stories-drawer {
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        left: auto;
        width: 380px;
        max-height: none;
        border-radius: 0;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
    }

    .mobile-stories-drawer.open {
        transform: translateX(0);
    }
}

/* =============================================================================
   PWA ENHANCEMENTS
   ============================================================================= */

/* ── Page Fade-In Transition ─────────────────────────────────────────────── */
body {
    animation: pageFadeIn 0.3s ease-out;
}

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

/* ── Hidden Scrollbars (native feel) ─────────────────────────────────────── */
*::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}

/* ── Haptic-Style Tap Feedback ───────────────────────────────────────────── */
button:active:not([disabled]),
a:active,
[role="button"]:active,
.chart-btn:active {
    transform: scale(0.98);
    transition: transform 0.05s ease;
}

/* ── Pull-to-Refresh Indicator ───────────────────────────────────────────── */
.pull-refresh-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.pull-refresh-indicator.visible {
    opacity: 1;
}

.pull-refresh-indicator.refreshing {
    opacity: 1;
}

.pull-refresh-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
}

.pull-refresh-indicator.refreshing .pull-refresh-spinner {
    animation: pullSpin 0.8s linear infinite;
}

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

/* ── Bottom Tab Bar ──────────────────────────────────────────────────────── */
.tab-bar {
    display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
    .tab-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9000;
        background: rgba(19, 23, 34, 0.92);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-top: 0.5px solid rgba(54, 58, 69, 0.6);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        justify-content: space-around;
        align-items: stretch;
    }

    .tab-bar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 0 6px;
        background: none;
        border: none;
        border-top: 2px solid transparent;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 9px;
        font-weight: 600;
        font-family: inherit;
        letter-spacing: var(--btn-letter-spacing);
        text-transform: uppercase;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease;
        cursor: pointer;
    }

    .tab-bar-item i {
        width: 22px;
        height: 22px;
        stroke-width: 1.5;
    }

    .tab-bar-item.active {
        color: var(--text-primary);
        border-top-color: var(--nav-active, #e06519);
    }

    .tab-bar-item:active {
        transform: scale(0.92);
        transition: transform 0.05s ease;
    }

    /* Hide header nav link & settings/help on mobile since tab bar replaces them */
    .header-nav-link,
    .settings-btn,
    .help-btn {
        display: none !important;
    }

    /* Offset bottom content so it's not hidden behind the tab bar */
    .container {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Push FABs (Gaps / News / ML) above the tab bar */
    .mobile-fab-container {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
}