/* ============================================
   Signal Command Center Styles
   ============================================ */

/* ---- ALERT FEED ---- */
.alert-feed {
    max-height: 200px;
    overflow-y: auto;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 4px;
    background: var(--bg-panel);
    border-left: 3px solid var(--border-primary);
    font-size: 0.72rem;
    transition: background 0.2s;
}

.alert-item:hover {
    background: var(--bg-hover);
}

.alert-item.alert-cvi { border-left-color: var(--red); }
.alert-item.alert-mwca { border-left-color: var(--purple); }
.alert-item.alert-rvol { border-left-color: var(--orange); }
.alert-item.alert-ipsi { border-left-color: var(--yellow); }
.alert-item.alert-rbc { border-left-color: var(--cyan); }

.alert-time {
    color: var(--text-muted);
    font-size: 0.65rem;
    white-space: nowrap;
    min-width: 40px;
}

.alert-ticker {
    font-weight: 700;
    min-width: 40px;
}

.alert-message {
    color: var(--text-secondary);
    flex: 1;
}

.no-alerts {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 20px;
}

/* ---- STRESS MATRIX ---- */
.stress-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.stress-matrix th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-primary);
}

.stress-matrix td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--border-primary);
}

.stress-matrix tr:last-child td {
    border-bottom: none;
}

.stress-matrix .pair-name {
    font-weight: 700;
    color: var(--text-primary);
}

.stress-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.stress-status.quiet {
    background: rgba(61, 184, 122, 0.12);
    color: var(--green);
}

.stress-status.elevated {
    background: rgba(212, 168, 48, 0.12);
    color: var(--yellow);
}

.stress-status.stress {
    background: rgba(192, 120, 40, 0.12);
    color: var(--orange);
}

.stress-status.critical {
    background: rgba(192, 64, 64, 0.12);
    color: var(--red);
}

/* ---- HEAT CALENDAR ---- */
.heat-calendar {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 2px;
    margin: 8px 0;
}

.heat-cell {
    aspect-ratio: 1;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: transform 0.1s;
}

.heat-cell:hover {
    transform: scale(1.3);
    z-index: 5;
}

.heat-cell .tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    border: 1px solid var(--border-accent);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.6rem;
    white-space: nowrap;
    z-index: 10;
    color: var(--text-primary);
}

.heat-cell:hover .tooltip {
    display: block;
}

.heat-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
}

.heat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin: 0 4px;
}

.heat-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* ---- CONVERGENCE GAUGES ---- */
.convergence-gauges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.convergence-gauge {
    text-align: center;
    padding: 10px;
    background: var(--bg-panel);
    border-radius: var(--panel-radius);
    border: 1px solid var(--border-primary);
}

.gauge-ticker {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.gauge-ring {
    width: 56px;
    height: 56px;
    margin: 0 auto 6px;
    position: relative;
}

.gauge-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-ring .ring-bg {
    fill: none;
    stroke: var(--bg-primary);
    stroke-width: 5;
}

.gauge-ring .ring-fill {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease, stroke 0.3s;
}

.gauge-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 700;
}

.gauge-label {
    font-size: 0.55rem;
    color: var(--text-muted);
}

/* ---- CORRELATION BARS ---- */
.correlation-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.corr-ticker {
    font-size: 0.7rem;
    font-weight: 700;
    width: 40px;
    flex-shrink: 0;
}

.corr-bar-container {
    flex: 1;
    height: 14px;
    background: var(--bg-primary);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.corr-bar-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--text-muted);
}

.corr-bar-fill {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 2px;
    transition: width 0.5s ease, left 0.5s ease;
}

.corr-bar-fill.negative {
    background: var(--red);
    right: 50%;
}

.corr-bar-fill.positive {
    background: var(--green);
    left: 50%;
}

.corr-value {
    font-size: 0.7rem;
    font-weight: 600;
    width: 44px;
    text-align: right;
    flex-shrink: 0;
}

.correlation-note {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.5;
}

/* ============================================
   Historical Echoes Panel
   ============================================ */
.panel-subtitle {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.echoes-loading {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 0;
}

.echoes-pair-group {
    margin-bottom: 12px;
}

.echoes-pair-label {
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border-primary);
}

.echoes-pair-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Individual echo card */
.echo-card {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 8px;
    border-left: 2px solid transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.echo-card.echo-long  { border-left-color: var(--long-accent); }
.echo-card.echo-short { border-left-color: var(--short-accent); }

.echo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.echo-ticker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.echo-count {
    font-size: 0.55rem;
    color: var(--text-muted);
    cursor: help;
}

/* Forward return table */
.echo-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
    font-size: 0.62rem;
}

.echo-table th {
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
    padding: 1px 3px;
    letter-spacing: 0.3px;
    font-size: 0.55rem;
}

.echo-table th:first-child,
.echo-table td:first-child { text-align: left; }

.echo-table td {
    text-align: right;
    padding: 2px 3px;
    font-weight: 600;
}

.echo-window { color: var(--text-muted); font-weight: 500 !important; }
.echo-range  { color: var(--text-muted); font-size: 0.58rem !important; font-weight: 400 !important; }

/* Directional bias line */
.echo-bias {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 3px;
    margin: 4px 0;
    text-align: center;
}

.bias-bull    { background: rgba(61,184,122,0.10); color: var(--green); }
.bias-bear    { background: rgba(192,64,64,0.10);  color: var(--red); }
.bias-neutral { background: rgba(255,255,255,0.05); color: var(--text-secondary); }

/* Recent past occurrences */
.echo-recent {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

.echo-recent-label {
    font-size: 0.52rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.echo-past-date {
    font-size: 0.58rem;
    font-weight: 600;
    cursor: help;
    padding: 1px 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    transition: background 0.15s;
}

.echo-past-date:hover {
    background: rgba(255,255,255,0.1);
}

.echo-empty {
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 8px 0;
    text-align: center;
}

/* Forward return curve canvas */
.echo-curve-container {
    width: 100%;
    height: 80px;
    margin-bottom: 6px;
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
    overflow: hidden;
}

.echo-curve-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Edge-window highlighted table row */
.echo-edge-row td {
    background: rgba(255,255,255,0.03);
}

.echo-edge-row .echo-window {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

/* ============================================
   Conviction Events Panel
   ============================================ */
.conviction-loading,
.conviction-empty {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 0;
}

.conviction-pair-group {
    margin-bottom: 12px;
}

.conviction-pair-label {
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border-primary);
}

.conviction-pair-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.conviction-card {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 8px;
    border-left: 2px solid transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.conviction-card.conviction-long  { border-left-color: var(--long-accent); }
.conviction-card.conviction-short { border-left-color: var(--short-accent); }

.conviction-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: 8px;
}

.conviction-ticker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.conviction-count {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.conviction-rate {
    font-size: 0.55rem;
    color: var(--text-secondary);
    cursor: help;
    margin-left: auto;
}

.conviction-gates {
    font-size: 0.5rem;
    color: var(--text-muted);
    padding: 3px 5px;
    background: rgba(255,255,255,0.03);
    border-radius: 3px;
    margin-bottom: 6px;
    line-height: 1.5;
    cursor: help;
}

.conviction-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6rem;
}

.conviction-table th {
    color: var(--text-muted);
    font-weight: 500;
    text-align: right;
    padding: 1px 2px;
    letter-spacing: 0.1px;
    font-size: 0.5rem;
}

.conviction-table th:first-child,
.conviction-table td:first-child { text-align: left; }

.conviction-table td {
    text-align: right;
    padding: 2px 2px;
    font-weight: 600;
}

.ce-date { color: var(--text-muted); font-weight: 500 !important; text-align: left !important; }
.ce-breadth { color: var(--text-secondary); }

/* Forward returns summary below conviction table */
.ce-fwd-returns {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--border-primary);
}
.ce-fwd-label {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.ce-fwd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6rem;
}
.ce-fwd-table th {
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
    padding: 1px 3px;
    font-size: 0.55rem;
}
.ce-fwd-table td {
    text-align: center;
    padding: 2px 3px;
    font-weight: 700;
}
.ce-fwd-wr td {
    font-weight: 500;
    font-size: 0.5rem;
    opacity: 0.8;
}

/* ============================================
   Side-Wide Volume Convergence (SWVC)
   ============================================ */
.swvc-loading,
.swvc-empty {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 0;
}

.swvc-side {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-primary);
}

.swvc-side:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.swvc-side-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.swvc-side-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.swvc-status-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.swvc-spread-txt {
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* ETF pills */
.swvc-pills {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.swvc-pill {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 4px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: help;
    transition: transform 0.15s;
}

.swvc-pill:hover { transform: scale(1.04); }

.swvc-pill-ticker {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.swvc-pill-days {
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.swvc-pill.spiked .swvc-pill-days {
    color: inherit;
    font-weight: 600;
}

/* Timeline strip */
.swvc-timeline-wrap {
    margin-bottom: 6px;
}

.swvc-timeline {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 2px;
    height: 18px;
    margin-bottom: 2px;
}

.swvc-cell {
    border-radius: 2px;
    transition: transform 0.1s;
    cursor: help;
    border: 1px solid rgba(255,255,255,0.04);
}

.swvc-cell:hover { transform: scale(1.3); z-index: 5; }

.swvc-cell.spike {
    border-color: rgba(255,255,255,0.15);
}

.swvc-cell.today {
    border-color: rgba(255,255,255,0.2);
}

.swvc-timeline-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.48rem;
    color: var(--text-muted);
    padding: 0 1px;
}

/* Full convergence alert banner */
.swvc-alert-banner {
    margin-top: 6px;
    padding: 6px 8px;
    border-left: 2px solid;
    background: rgba(255,255,255,0.03);
    border-radius: 0 3px 3px 0;
    font-size: 0.6rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---- TOP-OF-PAGE CONVERGENCE FLASH BANNER ---- */
.convergence-flash {
    width: 100%;
    box-sizing: border-box;
}

.convergence-flash-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 2px solid;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    animation: flash-pulse 2s ease-in-out infinite;
}

.convergence-flash-inner.flash-short {
    background: rgba(220, 60, 60, 0.12);
    border-color: var(--red);
    color: var(--red);
}

.convergence-flash-inner.flash-long {
    background: rgba(60, 180, 100, 0.12);
    border-color: var(--green);
    color: var(--green);
}

.flash-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.flash-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flash-body strong {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.flash-etfs {
    font-size: 0.6rem;
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.flash-setup {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
}

@keyframes flash-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.7; }
}

/* ---- SETUP DIRECTION BADGES ---- */
/* Used in alert feed, echo cards, and conviction cards to make trade direction explicit */
.setup-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin: 0 3px;
}
.setup-bottom {
    color: var(--green);
    background: rgba(61,184,122,0.12);
    border: 1px solid rgba(61,184,122,0.3);
}
.setup-top {
    color: var(--red);
    background: rgba(192,64,64,0.12);
    border: 1px solid rgba(192,64,64,0.3);
}

/* ============================================================
   FEATURE ADDITIONS: NG Price Bar, Fast-Spike, Season, Elevated Watch
   ============================================================ */

/* ---- NG=F Gas Price Context Bar (Feature 2) ---- */
.ng-price-bar-panel {
    padding: 4px 10px 6px;
    border-bottom: 1px solid var(--border-primary);
    background: rgba(0,0,0,0.2);
}
.ng-price-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.62rem;
    font-family: monospace;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.ng-bar-label {
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.58rem;
}
.ng-bar-price {
    font-weight: 700;
    font-size: 0.7rem;
    cursor: default;
}
.ng-bar-pct {
    font-weight: 600;
    font-size: 0.65rem;
}
.ng-bar-na {
    color: var(--text-muted);
    font-size: 0.58rem;
}
.ng-bar-track {
    position: relative;
    width: 90px;
    height: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    overflow: visible;
    cursor: default;
}
.ng-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.ng-bar-q25, .ng-bar-q75 {
    position: absolute;
    top: -3px;
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.25);
}
.ng-gates { display: flex; gap: 5px; }
.ng-gate {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.03em;
}
.ng-gate.active   { color: #3db87a; background: rgba(61,184,122,0.12); border: 1px solid rgba(61,184,122,0.3); }
.ng-gate.inactive { color: var(--text-muted); background: rgba(255,255,255,0.03); border: 1px solid var(--border-primary); text-decoration: line-through; opacity: 0.7; }
.ng-gate.unknown  { color: var(--text-muted); opacity: 0.5; }

/* ---- Sharp Spike Badge ---- */
.spike-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    color: #f5c542;
    background: rgba(245,197,66,0.12);
    border: 1px solid rgba(245,197,66,0.35);
    animation: spike-pulse 1.5s ease-in-out infinite;
    cursor: default;
}
.spike-badge-sm {
    font-size: 0.7rem;
    cursor: default;
}
@keyframes spike-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ---- Season Badge (card header) ---- */
.season-badge {
    font-size: 0.55rem;
    font-weight: 600;
    cursor: default;
    opacity: 0.85;
    margin-left: 2px;
}

/* ---- Matrix Season Tag ---- */
.matrix-season {
    font-size: 0.65rem;
    margin-left: 3px;
    cursor: default;
    opacity: 0.8;
}

/* ---- Elevated Watch Panel ---- */
.watch-pair-group {
    margin-bottom: 10px;
}
.watch-pair-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
    padding: 2px 4px;
    border-left: 2px solid var(--yellow);
}
.watch-pair-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.watch-card {
    border-left-color: var(--yellow) !important;
    opacity: 0.92;
}
.watch-gates {
    color: var(--yellow) !important;
    opacity: 0.75;
}
.watch-empty {
    color: var(--text-muted);
    font-size: 0.6rem;
    padding: 8px 4px;
}

/* ---- Echo Lead-Time Indicator ---- */
.echo-lead-time {
    font-size: 0.58rem;
    color: rgba(255,220,80,0.9);
    padding: 2px 4px;
    margin: 3px 0 2px;
    border-left: 2px solid rgba(255,220,80,0.4);
    background: rgba(255,220,80,0.04);
    border-radius: 0 3px 3px 0;
    cursor: default;
}

/* Z-score bar variant for NG price bar */
.ng-bar-zscore {
    overflow: visible;
}
.ng-bar-center-mark {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 1px;
    height: 10px;
    background: rgba(255,255,255,0.5);
}
.ng-bar-z-neg15, .ng-bar-z-pos15 {
    position: absolute;
    top: -1px;
    width: 1px;
    height: 8px;
    background: rgba(255,255,255,0.2);
}

/* ---- MOBILE ---- */
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    /* Stress matrix: enforce min-width so it scrolls instead of squashing */
    .stress-matrix { min-width: 640px; font-size: 0.65rem; }
    .stress-matrix th { font-size: 0.55rem; padding: 5px 6px; letter-spacing: 0.5px; }
    .stress-matrix td { padding: 6px 6px; font-size: 0.65rem; }

    /* Conviction table (8 cols, JS-injected) — scroll within card */
    .conviction-table { min-width: 440px; font-size: 0.6rem; }
    .conviction-table th,
    .conviction-table td { padding: 4px 6px; }

    /* Forward return table inside conviction card */
    .ce-fwd-table { min-width: 260px; font-size: 0.6rem; }

    /* Echo table — 4 cols, compact enough but let it breathe */
    .echo-table { width: 100%; font-size: 0.62rem; }

    /* Alert feed */
    .alert-item { font-size: 0.65rem; gap: 8px; }

    /* General signal panel tightening */
    .signal-panel { padding: 10px; }
    .signal-panel h3 { font-size: 0.65rem; }

    /* Conviction gates text wraps instead of overflowing */
    .conviction-gates { font-size: 0.55rem; word-break: break-word; white-space: normal; }
}

@media (max-width: 480px) {
    .stress-matrix { min-width: 580px; font-size: 0.6rem; }
    .stress-matrix th { font-size: 0.5rem; padding: 4px 4px; }
    .stress-matrix td { padding: 5px 4px; font-size: 0.6rem; }
    .conviction-table { min-width: 400px; font-size: 0.58rem; }
    .conviction-table th, .conviction-table td { padding: 3px 4px; }
    .alert-item { font-size: 0.6rem; gap: 6px; }
    .signal-panel { padding: 8px; }
}

/* ================================================================
   VOL REGIME MONITOR
   ================================================================ */

/* ── Selector controls ─────────────────────────────────────────── */
.vrm-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.vrm-mode-toggle {
    display: flex;
    border: 1px solid var(--border-accent);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.vrm-mode-btn {
    padding: 4px 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.vrm-mode-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.vrm-mode-btn.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--border-accent);
}

/* ── Instrument chips ──────────────────────────────────────────── */
.vrm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.vrm-chip {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-primary);
    background: var(--bg-panel);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: var(--text-muted);
}

.vrm-chip:hover { background: var(--bg-hover); border-color: var(--border-accent); }

.vrm-chip-long        { color: var(--green); border-color: rgba(61,184,122,0.25); }
.vrm-chip-long:hover  { border-color: var(--green); background: rgba(61,184,122,0.08); }
.vrm-chip-long.vrm-chip-active {
    background: rgba(61,184,122,0.12);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 6px rgba(61,184,122,0.25);
}

.vrm-chip-short        { color: var(--red); border-color: rgba(192,64,64,0.25); }
.vrm-chip-short:hover  { border-color: var(--red); background: rgba(192,64,64,0.08); }
.vrm-chip-short.vrm-chip-active {
    background: rgba(192,64,64,0.12);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 6px rgba(192,64,64,0.25);
}

.vrm-chip-ng        { color: var(--blue); border-color: rgba(74,128,184,0.25); }
.vrm-chip-ng:hover  { border-color: var(--blue); background: rgba(74,128,184,0.08); }
.vrm-chip-ng.vrm-chip-active {
    background: rgba(74,128,184,0.12);
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: 0 0 6px rgba(74,128,184,0.25);
}

/* Pair chips — two-tone */
.vrm-chip-pair {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    color: var(--text-secondary);
    border-color: var(--border-primary);
}
.vrm-chip-pair.vrm-chip-active {
    border-color: var(--border-accent);
    background: var(--bg-hover);
    color: var(--text-primary);
}
.vrm-chip-long  { color: var(--green); }
.vrm-chip-short { color: var(--red);   }
.vrm-chip-arrow { color: var(--text-muted); font-size: 0.6rem; }
.vrm-chip-sub   { color: var(--text-muted); font-size: 0.55rem; letter-spacing: 0.3px; }

/* ── Loading state ─────────────────────────────────────────────── */
.vrm-loading {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 20px;
}

/* ── Single / pair layouts ─────────────────────────────────────── */
.vrm-single { width: 100%; }

.vrm-pair-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: start;
}

.vrm-pair-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
}

.vrm-vs-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
    padding: 2px 6px;
}

.vrm-pair-spread {
    text-align: center;
    margin-top: 4px;
}
.vrm-spread-key  { font-size: 0.55rem; color: var(--text-muted); letter-spacing: 0.5px; }
.vrm-spread-val  { font-size: 0.9rem; font-weight: 700; }
.vrm-spread-note { font-size: 0.55rem; color: var(--orange); }

/* ── Instrument card ───────────────────────────────────────────── */
.vrm-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
    border-radius: var(--panel-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vrm-card-long  { border-left: 2px solid rgba(61,184,122,0.4);  }
.vrm-card-short { border-left: 2px solid rgba(192,64,64,0.4);   }
.vrm-card-ng    { border-left: 2px solid rgba(74,128,184,0.4);  }
.vrm-card-empty { opacity: 0.5; }

.vrm-no-data { color: var(--text-muted); font-size: 0.72rem; text-align: center; padding: 12px 0; }

/* ── Card header ───────────────────────────────────────────────── */
.vrm-card-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.vrm-ticker {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.vrm-badge-lev, .vrm-badge-exch {
    font-size: 0.55rem;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border-primary);
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Regime badge ──────────────────────────────────────────────── */
.vrm-regime-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: default;
}

.vrm-reg-spike    { background: rgba(192,64,64,0.18);   color: #e05050; border: 1px solid rgba(192,64,64,0.4); }
.vrm-reg-elevated { background: rgba(192,120,40,0.18);  color: #d08840; border: 1px solid rgba(192,120,40,0.4); }
.vrm-reg-normal   { background: rgba(61,184,122,0.14);  color: #3db87a; border: 1px solid rgba(61,184,122,0.35); }
.vrm-reg-low      { background: rgba(74,128,184,0.14);  color: #5a90c8; border: 1px solid rgba(74,128,184,0.35); }
.vrm-reg-unknown  { background: transparent;            color: var(--text-muted); border: 1px solid var(--border-primary); }

/* ── Spike event badge ─────────────────────────────────────────── */
.vrm-spike-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(192,64,64,0.22);
    color: #e05050;
    border: 1px solid rgba(192,64,64,0.5);
    animation: spike-pulse 1.4s ease-in-out infinite;
}

@keyframes spike-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* ── HV stat boxes (4-box row) ─────────────────────────────────── */
.vrm-hv-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.vrm-hv-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 8px 6px 6px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.vrm-hv-box:hover { border-color: var(--border-accent); }
.vrm-hv-box.active {
    border-color: var(--border-accent);
    background: rgba(255, 255, 255, 0.05);
}

.vrm-hv-label {
    font-size: 0.55rem;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-bottom: 4px;
}

.vrm-hv-val {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 5px;
}

/* Regime colour pip below each stat box value */
.vrm-hv-regime-pip {
    width: 100%;
    height: 3px;
    border-radius: 2px;
}

.vrm-hv-regime-pip.vrm-reg-spike    { background: #c04040; }
.vrm-hv-regime-pip.vrm-reg-elevated { background: #c07828; }
.vrm-hv-regime-pip.vrm-reg-normal   { background: #3db87a; }
.vrm-hv-regime-pip.vrm-reg-low      { background: #4a80b8; }
.vrm-hv-regime-pip.vrm-reg-unknown  { background: var(--border-primary); }

/* ── Sparkline area ────────────────────────────────────────────── */
.vrm-spark-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vrm-spark-label {
    font-size: 0.58rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vrm-spark-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.55rem;
    color: var(--text-muted);
}

.vrm-leg-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.vrm-leg-dot.vrm-reg-low      { background: #4a80b8; }
.vrm-leg-dot.vrm-reg-normal   { background: #3db87a; }
.vrm-leg-dot.vrm-reg-elevated { background: #c07828; }
.vrm-leg-dot.vrm-reg-spike    { background: #c04040; }

.vrm-spark-canvas {
    width: 100%;
    height: 200px;
    display: block;
}

/* ── Horizon quick-range buttons ───────────────────────────────── */
.vrm-horizon-group {
    display: flex;
    gap: 4px;
}

.vrm-horizon-btn {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-primary);
    color: var(--text-dim);
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    font-family: 'JetBrains Mono', monospace;
}

.vrm-horizon-btn:hover {
    background: rgba(255,255,255,0.07);
    color: var(--text-primary);
}

.vrm-horizon-btn.active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0,255,255,0.06);
}

/* ── Footer stats row ──────────────────────────────────────────── */
.vrm-footer-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.vrm-stat-box {
    flex: 1;
    min-width: 90px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: default;
    transition: border-color 0.15s;
}

.vrm-stat-box:hover { border-color: var(--border-accent); }

.vrm-stat-lbl {
    display: block;
    font-size: 0.52rem;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-bottom: 3px;
}

.vrm-stat-val {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Term structure classes */
.vrm-stat-val.ts-accel    { color: #e05050; }
.vrm-stat-val.ts-building { color: #c07828; }
.vrm-stat-val.ts-neutral  { color: var(--text-secondary); }
.vrm-stat-val.ts-easing   { color: #3db87a; }
.vrm-stat-val.ts-calm     { color: #4a80b8; }

/* VoV classes */
.vrm-stat-val.vov-high { color: #e05050; }
.vrm-stat-val.vov-mid  { color: #c07828; }
.vrm-stat-val.vov-mod  { color: var(--yellow); }
.vrm-stat-val.vov-low  { color: #3db87a; }

/* Effective vol */
.vrm-stat-val.vrm-eff-vol { color: var(--orange); }

/* ---- VDDS BAR ---- */
.vdds-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.vdds-row {
    display: grid;
    grid-template-columns: 80px 1fr 44px;
    align-items: center;
    gap: 8px;
}

.vdds-ticker {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: help;
}

.vdds-track {
    position: relative;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.vdds-center-mark {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--border-accent);
    opacity: 0.5;
}

.vdds-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
    opacity: 0.8;
}

.vdds-value {
    font-size: 0.65rem;
    font-weight: 600;
    text-align: right;
}

.vdds-na {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Responsive overrides ──────────────────────────────────────── */
@media (max-width: 900px) {
    .vrm-pair-layout { grid-template-columns: 1fr; }
    .vrm-pair-divider { flex-direction: row; padding-top: 0; }
}

@media (max-width: 600px) {
    .vrm-hv-boxes { grid-template-columns: repeat(2, 1fr); }
    .vrm-footer-stats { flex-direction: column; }
    .vrm-chip-pair .vrm-chip-sub { display: none; }
}