/* Bloomberg-terminal / Windows 95 flat aesthetic. Zero rounding, zero shadows. */

:root {
    --bg:        #0a0a0a;
    --panel:     #111111;
    --panel-2:   #161616;
    --border:    #2a2a2a;
    --border-2:  #3a3a3a;
    --fg:        #d0d0d0;
    --fg-dim:    #888888;
    --accent:    #f5a623;  /* amber */
    --pos:       #4ade80;  /* green */
    --neg:       #f87171;  /* red */
    --link:      #60a5fa;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "JetBrains Mono", "Consolas", "Menlo", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.35;
    height: 100%;
}

button, input, select {
    font-family: inherit;
    font-size: inherit;
    color: var(--fg);
    background: var(--panel);
    border: 1px solid var(--border-2);
    padding: 4px 8px;
    cursor: pointer;
}

button:hover, .btn:hover {
    background: var(--panel-2);
    border-color: var(--accent);
    color: var(--accent);
}

.btn {
    display: inline-block;
    user-select: none;
}

.btn-wide {
    width: 100%;
    padding: 8px 4px;
    margin-top: 8px;
    text-align: center;
}

.hidden {
    display: none !important;
}

/* --- topbar --- */

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 2px;
}

.clock {
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
}

.clock .sep {
    margin: 0 8px;
    color: var(--border-2);
}

.topbar-setting {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-dim);
    font-size: 11px;
    letter-spacing: 1px;
}

.topbar-setting input[type="number"] {
    width: 60px;
    padding: 2px 4px;
    background: var(--bg);
    border: 1px solid var(--border-2);
    color: var(--fg);
    font-size: 11px;
}

.status {
    color: var(--fg-dim);
}

.status.fresh { color: var(--pos); }
.status.stale { color: var(--accent); }
.status.error { color: var(--neg); }

/* --- layout --- */

.layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    height: calc(100vh - 35px);
}

.left-col {
    border-right: 1px solid var(--border);
    padding: 8px;
    overflow-y: auto;
}

.main-col {
    padding: 16px;
    overflow-y: auto;
}

.placeholder {
    border: 1px dashed var(--border);
    padding: 24px;
    color: var(--fg-dim);
}

.placeholder-title {
    color: var(--accent);
    margin-bottom: 8px;
}

/* --- blocks --- */

.blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.block {
    border: 1px solid var(--border);
    background: var(--panel);
}

.block-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
}

.block-title {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-actions {
    display: flex;
    gap: 2px;
}

.iconbtn {
    padding: 1px 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fg-dim);
}
.iconbtn:hover {
    color: var(--accent);
    border-color: var(--border-2);
    background: var(--panel);
}

.block-params {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--fg-dim);
}

.block-params label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.block-params select,
.block-params input {
    padding: 1px 4px;
    font-size: 11px;
    background: var(--bg);
    border: 1px solid var(--border-2);
}

.block-params input[type="number"] {
    width: 50px;
}

.block-body {
    padding: 0;
}

.block-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-bottom: 1px dotted var(--border);
    font-variant-numeric: tabular-nums;
}
.block-row:last-child { border-bottom: none; }
.block-row.starred { background: rgba(245, 166, 35, 0.06); }
.block-row.pinned-last { border-bottom: 1px solid var(--border-2); }

.block-row .sym {
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-tag {
    display: inline-block;
    padding: 0 4px;
    margin-left: 4px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--fg-dim);
    border: 1px solid var(--border-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: 1px;
}

.block-row .val {
    font-weight: 600;
    text-align: right;
    min-width: 54px;
}

.star {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--border-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    width: 14px;
    text-align: center;
}
.star:hover { color: var(--accent); }
.star.on { color: var(--accent); }

.val.pos { color: var(--pos); }
.val.neg { color: var(--neg); }
.val.neu { color: var(--fg); }

.block-footer {
    display: flex;
    justify-content: space-between;
    padding: 3px 6px;
    font-size: 10px;
    color: var(--fg-dim);
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}

.block-empty {
    padding: 12px 8px;
    color: var(--fg-dim);
    text-align: center;
    font-size: 11px;
}

/* --- add menu --- */

.add-menu {
    margin-top: 4px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.add-menu .menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 8px;
    background: var(--panel);
}
.add-menu .menu-item:last-child { border-bottom: none; }
.add-menu .menu-item:hover {
    background: var(--panel-2);
    color: var(--accent);
}
.add-menu .menu-item .src {
    color: var(--fg-dim);
    font-size: 10px;
    margin-left: 6px;
}

/* --- macro regime panel --- */

.macro-panel {
    border: 1px solid var(--border);
    background: var(--panel);
}

.macro-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
}

.macro-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.macro-title {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.macro-regime {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 2px 8px;
    border: 1px solid var(--border-2);
    white-space: nowrap;
}

/* Legacy regime classes — kept so older cached responses still render in
   the right colour while a refresh is in flight. */
.macro-regime.regime-risk_on     { color: var(--pos);    border-color: var(--pos); }
.macro-regime.regime-risk_on_weak { color: #bef264;      border-color: #bef264; }
.macro-regime.regime-neutral     { color: var(--fg-dim); border-color: var(--border-2); }
.macro-regime.regime-risk_off_weak { color: #fb923c;     border-color: #fb923c; }
.macro-regime.regime-risk_off    { color: var(--neg);    border-color: var(--neg); }

/* New 5-state regime palette (matches the regime-descriptions modal). */
.macro-regime.regime-risk_on_growth     { color: #00ff88; border-color: #00ff88; }
.macro-regime.regime-risk_on_inflation  { color: #4488ff; border-color: #4488ff; }
.macro-regime.regime-risk_off_mild      { color: #ff8800; border-color: #ff8800; }
.macro-regime.regime-risk_off_panic     { color: #ff3333; border-color: #ff3333; }

/* Crypto Flows regime badge — same box style as macro-regime. */
.cf-regime {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 2px 8px;
    border: 1px solid var(--border-2);
    white-space: nowrap;
}
.cf-regime.regime-risk_off   { color: #ff3333; border-color: #ff3333; }
.cf-regime.regime-btc_season { color: #f5a623; border-color: #f5a623; }
.cf-regime.regime-altseason  { color: #00ff88; border-color: #00ff88; }
.cf-regime.regime-euphoria   { color: #4488ff; border-color: #4488ff; }
.cf-regime.regime-neutral    { color: var(--fg-dim); border-color: var(--border-2); }

/* IPS badge — sits next to the regime label. Hot (>=2) flips to amber. */
.macro-ips {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 6px;
    border: 1px solid var(--border-2);
    color: var(--fg-dim);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.macro-ips.hot {
    color: #ff8800;
    border-color: #ff8800;
}

/* Regime-info ⓘ button next to the title row — same visual language as the
   per-card info icon, just slightly larger so it's reachable from the header. */
.macro-regime-info {
    background: transparent;
    border: none;
    color: var(--fg-dim);
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 80ms linear, color 80ms linear;
}
.macro-regime-info:hover,
.macro-regime-info:focus-visible {
    color: var(--accent);
    opacity: 1;
    outline: none;
}

/* Regime descriptions modal — full-viewport overlay + centered card. */
.regime-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.regime-modal-overlay.hidden {
    display: none;
}
.regime-modal {
    position: relative;
    max-width: 560px;
    max-height: 85vh;
    overflow: auto;
    padding: 20px 24px;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-left: 2px solid var(--accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
    color: var(--fg);
}
.regime-modal-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--fg-dim);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}
.regime-modal-close:hover,
.regime-modal-close:focus-visible {
    color: var(--accent);
    outline: none;
}
.regime-modal-body {
    margin: 0;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--fg);
}

.macro-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.macro-tf-group {
    display: flex;
    border: 1px solid var(--border-2);
}

.macro-tf {
    border: none;
    border-right: 1px solid var(--border-2);
    background: var(--panel);
    color: var(--fg-dim);
    padding: 3px 10px;
    font-size: 11px;
    letter-spacing: 1px;
}
.macro-tf:last-child { border-right: none; }
.macro-tf.active {
    background: var(--bg);
    color: var(--accent);
}
.macro-tf:hover {
    background: var(--panel-2);
    color: var(--accent);
}

.macro-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    min-height: 0;
}
.macro-flags:empty {
    display: none;
}
.macro-flag {
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: 1px;
    border: 1px solid var(--neg);
    color: var(--neg);
}

.macro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0;
}

.macro-card {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    background: var(--panel);
}

.macro-card.score-pos {
    border-left: 2px solid var(--pos);
}
.macro-card.score-neg {
    border-left: 2px solid var(--neg);
}
.macro-card.score-neu {
    border-left: 2px solid var(--border-2);
}
.macro-card.reference {
    border-left: 2px solid var(--fg-dim);
    background: var(--panel-2);
}
.macro-card.unavailable {
    opacity: 0.55;
}

.macro-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.macro-card-label {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.macro-card-ref-badge {
    color: var(--fg-dim);
    border: 1px solid var(--border-2);
    font-size: 9px;
    padding: 0 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.macro-card-score {
    font-size: 11px;
    font-weight: 700;
    padding: 0 4px;
    border: 1px solid var(--border-2);
    color: var(--fg-dim);
}
.macro-card-score.pos { color: var(--pos); border-color: var(--pos); }
.macro-card-score.neg { color: var(--neg); border-color: var(--neg); }

/* Per-card info icon — opens the description popup. Sits to the right of the
   score/REF badge, dim by default and brighter on hover. */
.macro-card-info {
    background: transparent;
    border: none;
    color: var(--fg-dim);
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
    margin-left: 2px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 80ms linear, color 80ms linear;
}
.macro-card-info:hover,
.macro-card-info:focus-visible {
    color: var(--accent);
    opacity: 1;
    outline: none;
}

/* Shared description popup — single instance, positioned via JS. Tone matches
   the dashboard panel chrome; pre-wrap preserves line breaks in the source
   strings without forcing the author to write <br>. */
.macro-info-popup {
    position: absolute;
    z-index: 1000;
    max-width: 360px;
    min-width: 240px;
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    border-left: 2px solid var(--accent);
    color: var(--fg);
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.macro-info-popup.hidden {
    display: none;
}

.macro-card-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

.macro-card-change {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-dim);
}
.macro-card-change.pos { color: var(--pos); }
.macro-card-change.neg { color: var(--neg); }

.macro-card-spark {
    margin-top: 2px;
    width: 100%;
    height: 32px;
    display: block;
}

.macro-card-source {
    font-size: 9px;
    color: var(--fg-dim);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.macro-card-na {
    font-size: 11px;
    color: var(--fg-dim);
    font-style: italic;
    padding: 12px 0 4px 0;
    text-align: center;
}

.macro-card-error {
    font-size: 9px;
    color: var(--neg);
    line-height: 1.3;
    padding: 0 0 4px 0;
    word-break: break-word;
    user-select: text;
    cursor: text;
    white-space: normal;
}

.macro-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--fg-dim);
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}

.macro-updated {
    font-variant-numeric: tabular-nums;
}

/* ─── CRYPTO FLOWS PANEL ──────────────────────────────────────────────────── */

.cf-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.cf-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
}

.cf-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cf-title {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cf-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cf-tf-group {
    display: flex;
    gap: 0;
}

.cf-tf {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--fg-dim);
    font-family: var(--font);
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.cf-tf:not(:last-child) { border-right: none; }
.cf-tf.active,
.cf-tf:hover { color: var(--accent); border-color: var(--accent); }

.cf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
}

/* Star rating: 5★=cyan/accent, 4★=green, 3★=muted */
.cf-card {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    background: var(--panel);
}
.cf-card.stars-5 { border-left: 2px solid var(--accent); }
.cf-card.stars-4 { border-left: 2px solid var(--pos); }
.cf-card.stars-3 { border-left: 2px solid var(--fg-dim); }
.cf-card.unavailable { opacity: 0.55; }

.cf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.cf-card-label {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-card-stars {
    font-size: 9px;
    color: var(--fg-dim);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Info button — same style as macro-card-info */
.cf-card-info {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--fg-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1.4;
    border-radius: 2px;
    flex-shrink: 0;
    font-family: var(--font);
    transition: color 0.15s, border-color 0.15s;
}
.cf-card-info:hover,
.cf-card-info:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}

.cf-card-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 1px;
}

.cf-card-change {
    font-size: 11px;
    color: var(--fg-dim);
}
.cf-card-change.pos { color: var(--pos); }
.cf-card-change.neg { color: var(--neg); }

.cf-card-spark {
    height: 30px;
    width: 100%;
}

.cf-card-na {
    color: var(--fg-dim);
    font-size: 12px;
    letter-spacing: 1px;
}
.cf-card-error {
    color: var(--neg);
    font-size: 9px;
    word-break: break-word;
}

.cf-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--fg-dim);
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}

.cf-updated {
    font-variant-numeric: tabular-nums;
}

/* ─── SENTIMENT SUB-SECTION (inside cf-panel) ────────────────────────────── */

.cf-sentiment {
    border-top: 1px solid var(--border-2);
}

.sent-header {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fg-dim);
    background: var(--panel-2);
    border-bottom: 1px solid var(--border);
}

.sent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

@media (max-width: 800px) {
    .sent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .sent-grid { grid-template-columns: 1fr; }
}

.sent-card {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--panel);
}
.sent-card:last-child { border-right: none; }

.sent-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 2px;
}

.sent-card-title {
    color: var(--accent);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sent-status {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1px 5px;
    border: 1px solid var(--border-2);
    white-space: nowrap;
    flex-shrink: 0;
}
.sent-status.bull  { color: var(--pos); border-color: var(--pos); }
.sent-status.bear  { color: var(--neg); border-color: var(--neg); }
.sent-status.neu   { color: var(--fg-dim); border-color: var(--border-2); }
.sent-status.warn  { color: #f5a623; border-color: #f5a623; }

.sent-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    line-height: 1.4;
}

.sent-row-label {
    color: var(--fg-dim);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sent-row-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.sent-row-value.pos { color: var(--pos); }
.sent-row-value.neg { color: var(--neg); }
.sent-row-value.neu { color: var(--fg-dim); }

.sent-spark {
    width: 100%;
    height: 22px;
    display: block;
    margin-top: 2px;
}

.sent-na {
    color: var(--fg-dim);
    font-size: 11px;
    font-style: italic;
    padding: 4px 0;
}

/* ─── STRATEGY (MSTR) MONITOR ────────────────────────────────────────────── */

.sm-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.sm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    flex-wrap: wrap;
}

.sm-title {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Machine status badge — same shape as macro-regime */
.sm-machine {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border: 1px solid var(--border-2);
    white-space: nowrap;
}
.sm-machine.sm-pos  { color: #00ff88; border-color: #00ff88; }
.sm-machine.sm-warn { color: #f5a623; border-color: #f5a623; }
.sm-machine.sm-neg  { color: #ff3333; border-color: #ff3333; }

/* Structural regime badge */
.sm-regime {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border: 1px solid var(--border-2);
    white-space: nowrap;
    color: var(--fg-dim);
}
.sm-regime.regime-active        { color: #00ff88; border-color: #00ff88; }
.sm-regime.regime-partial       { color: #f5a623; border-color: #f5a623; }
.sm-regime.regime-stress        { color: #ff8c00; border-color: #ff8c00; }
.sm-regime.regime-system_stress { color: #ff3333; border-color: #ff3333; }

.sm-refresh-btn { margin-left: auto; }

/* ── Body grid ── */
.sm-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 700px) {
    .sm-body { grid-template-columns: 1fr; }
}

/* ── Instrument cards ── */
.sm-card {
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sm-card:last-child { border-right: none; }

.sm-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sm-card-ticker {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sm-card-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 1px;
}
.sm-card-price.sm-dim { color: var(--fg-dim); font-size: 16px; }

.sm-card-status {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border: 1px solid var(--border-2);
    display: inline-block;
    align-self: flex-start;
}
.sm-card-status.sm-pos  { color: #00ff88; border-color: #00ff88; }
.sm-card-status.sm-warn { color: #f5a623; border-color: #f5a623; }
.sm-card-status.sm-neg  { color: #ff3333; border-color: #ff3333; }
.sm-card-status.sm-dim  { color: var(--fg-dim); border-color: var(--border-2); }

.sm-card-meta {
    font-size: 10px;
    color: var(--fg-dim);
    line-height: 1.5;
}
.sm-card-meta b { color: var(--fg); }

.sm-card-desc {
    font-size: 10px;
    color: var(--fg-dim);
    font-style: italic;
    margin-top: 2px;
}

/* deprecated card muted */
.sm-card.deprecated { opacity: 0.55; }
.sm-card.deprecated .sm-card-ticker { color: var(--fg-dim); }

/* ── Diagnostic ratios section (spans all 3 instrument columns) ── */
.sm-ratio-section {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
}
.sm-ratio-header {
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 0.08em;
    padding: 6px 12px 4px;
    background: var(--panel-2);
    text-transform: uppercase;
}
.sm-ratio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
@media (max-width: 900px) {
    .sm-ratio-grid { grid-template-columns: 1fr 1fr; }
}
.sm-ratio-card {
    padding: 8px 12px;
    border-right: 1px solid var(--border-2);
    border-bottom: 1px solid var(--border-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sm-ratio-card:last-child { border-right: none; }

.sm-ratio-card-head {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.sm-ratio-layer {
    font-size: 9px;
    color: var(--fg-dim);
    border: 1px solid var(--border-2);
    padding: 0 4px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sm-ratio-label {
    font-size: 10px;
    color: var(--fg-dim);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-ratio-info-btn {
    background: none;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 11px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}
.sm-ratio-info-btn:hover { color: var(--accent); }
.sm-ratio-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.sm-ratio-subinfo {
    font-size: 9px;
    color: var(--fg-dim);
    line-height: 1.4;
}
.sm-ratio-status {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border: 1px solid var(--border-2);
    display: inline-block;
    align-self: flex-start;
    letter-spacing: 0.3px;
}
.sm-ratio-status.sm-pos  { color: #00ff88; border-color: #00ff88; }
.sm-ratio-status.sm-warn { color: #f5a623; border-color: #f5a623; }
.sm-ratio-status.sm-neg  { color: #ff3333; border-color: #ff3333; }
.sm-ratio-status.sm-dim  { color: var(--fg-dim); border-color: var(--border-2); }
.sm-ratio-spark {
    width: 100%;
    height: 28px;
    display: block;
    margin-top: 2px;
}
.sm-ratio-desc {
    font-size: 9px;
    color: var(--fg-dim);
    font-style: italic;
    line-height: 1.4;
    border-top: 1px solid var(--border-2);
    padding-top: 3px;
    margin-top: 2px;
}

/* ── Links row ── */
.sm-links {
    padding: 6px 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    background: var(--panel-2);
    align-items: center;
    grid-column: 1 / -1;
}
.sm-link {
    color: var(--fg-dim);
    font-size: 10px;
    text-decoration: none;
    border: 1px solid var(--border-2);
    padding: 1px 6px;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s;
}
.sm-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── Leverage note ── */
.sm-leverage {
    font-size: 10px;
    color: var(--fg-dim);
    padding: 4px 10px;
    border-top: 1px solid var(--border);
    background: var(--panel-2);
    grid-column: 1 / -1;
}
.sm-leverage b { color: var(--fg); }

.sm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--fg-dim);
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}

.sm-updated { font-variant-numeric: tabular-nums; }

/* info button (reuse macro-card-info style) on sm cards */
.sm-card-info {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--fg-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1.4;
    border-radius: 2px;
    flex-shrink: 0;
    font-family: var(--font);
    transition: color 0.15s, border-color 0.15s;
    margin-left: auto;
}
.sm-card-info:hover, .sm-card-info:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}

/* ─── OPTIONS GEX PANEL ──────────────────────────────────────────────────── */

.gex-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.gex-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    flex-wrap: wrap;
}

.gex-title {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.gex-regime-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 2px 8px;
    border: 1px solid var(--border-2);
    white-space: nowrap;
    color: var(--fg-dim);
}
.gex-regime-badge.pos { color: var(--pos); border-color: var(--pos); }
.gex-regime-badge.neg { color: var(--neg); border-color: var(--neg); }
.gex-regime-badge.neu { color: var(--fg-dim); border-color: var(--border-2); }
.gex-regime-badge.warn { color: #f5a623; border-color: #f5a623; }

.gex-spot {
    font-size: 11px;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

/* Body: 2 rows — gauges row, then chart+levels row */
.gex-body {
    display: flex;
    flex-direction: column;
}

/* ── Gauge row ── */
.gex-gauges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--border);
}

.gex-gauge-card {
    border-right: 1px solid var(--border);
    padding: 10px 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    background: var(--panel);
}
.gex-gauge-card:last-child { border-right: none; }

.gex-gauge-title {
    font-size: 10px;
    color: var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* SVG gauge sits here */
.gex-gauge-svg {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 4px auto 0;
}

.gex-gauge-arrow {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}
.gex-gauge-arrow.pos  { color: var(--pos); }
.gex-gauge-arrow.neg  { color: var(--neg); }
.gex-gauge-arrow.neu  { color: var(--fg-dim); }
.gex-gauge-arrow.warn { color: #f5a623; }

.gex-gauge-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}
.gex-gauge-label.pos  { color: var(--pos); }
.gex-gauge-label.neg  { color: var(--neg); }
.gex-gauge-label.neu  { color: var(--fg-dim); }
.gex-gauge-label.warn { color: #f5a623; }

.gex-gauge-score {
    font-size: 10px;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
}

/* ── Lower row: chart + key levels ── */
.gex-lower {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 0;
}

.gex-chart-wrap {
    padding: 10px 10px 6px;
    border-right: 1px solid var(--border);
    min-height: 120px;
}

.gex-chart-title {
    font-size: 10px;
    color: var(--fg-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.gex-bar-svg-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.gex-levels {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gex-levels-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--fg-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.gex-level-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
    gap: 6px;
    font-size: 11px;
}
.gex-level-row:last-child { border-bottom: none; }

.gex-level-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border: 1px solid;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.gex-level-name {
    color: var(--fg-dim);
    font-size: 10px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gex-level-price {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* bar container (wraps header + SVG in the lower-left cell) */
.gex-bar-container {
    padding: 8px 10px 8px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.gex-bar-header-title {
    font-size: 10px;
    color: var(--fg-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* gauge card head + footer sub-elements */
.gex-gauge-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gex-gauge-footer {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* level tag colors */
.gex-level-tag.pos  { color: var(--pos); border-color: var(--pos); }
.gex-level-tag.neg  { color: var(--neg); border-color: var(--neg); }
.gex-level-tag.neu  { color: var(--fg-dim); border-color: var(--border-2); }
.gex-level-tag.warn { color: #f5a623; border-color: #f5a623; }

/* net/abs GEX summary rows */
.gex-net-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 11px;
    border-top: 1px solid var(--border);
    gap: 6px;
    margin-top: 2px;
}
.gex-net-label { color: var(--fg-dim); font-size: 10px; }
.gex-net-val   { font-variant-numeric: tabular-nums; font-weight: 600; }
.gex-net-val.pos { color: var(--pos); }
.gex-net-val.neg { color: var(--neg); }
.gex-net-val.neu { color: var(--fg-dim); }

/* no data */
.gex-na {
    color: var(--fg-dim);
    font-size: 11px;
    padding: 8px 0;
}

.gex-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--fg-dim);
    border-top: 1px solid var(--border);
    background: var(--panel-2);
}
.gex-updated { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    .gex-gauges  { grid-template-columns: 1fr; }
    .gex-lower   { grid-template-columns: 1fr; }
    .gex-levels  { border-top: 1px solid var(--border); }
}

/* ── GEX 24h history charts ── */
.gex-hist-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--border);
}
.gex-hist-chart {
    padding: 6px 10px 5px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.gex-hist-chart:nth-child(2n) {
    border-right: none;
}
.gex-hist-chart:nth-last-child(-n+2) {
    border-bottom: none;
}
.gex-hist-title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}
.gex-hist-label {
    font-size: 9px;
    font-family: var(--mono);
    color: var(--muted);
    letter-spacing: 0.04em;
    flex: 1;
}
.gex-hist-cur {
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gex-hist-info-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 9px;
    cursor: pointer;
    padding: 0 1px;
    line-height: 1;
    opacity: 0.6;
}
.gex-hist-info-btn:hover { opacity: 1; }
.gex-hist-chart svg {
    display: block;
    width: 100%;
    height: 63px;
}
.gex-hist-empty {
    grid-column: 1 / -1;
    padding: 14px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 700px) {
    .gex-hist-container { grid-template-columns: 1fr; }
    .gex-hist-chart { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ─── PLAYBOOK ───────────────────────────────────────────────────────────── */

.playbook-panel {
    margin-top: 16px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 4px;
    overflow: hidden;
}
.playbook-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}
.playbook-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fg-dim);
    letter-spacing: 1px;
    flex: 1;
}
.playbook-tf-group {
    display: flex;
    gap: 4px;
}
.playbook-tf {
    font-family: var(--mono);
    font-size: 10px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
    border-radius: 2px;
}
.playbook-tf.active {
    background: var(--border);
    color: var(--fg);
}
.playbook-body {
    padding: 12px 14px 14px;
}

/* Inputs row: three signal pills */
.pb-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.pb-signal {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 8px 10px;
}
.pb-signal-label {
    font-size: 9px;
    font-family: var(--mono);
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.pb-signal-value {
    font-size: 12px;
    font-family: var(--mono);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pb-signal-sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 2px;
    font-family: var(--mono);
}

/* Output: bias box */
.pb-output {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pb-output-arrow {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.pb-output-main {
    flex: 1;
}
.pb-output-bias {
    font-size: 14px;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}
.pb-output-action {
    font-size: 11px;
    color: var(--fg-dim);
    font-family: var(--mono);
    line-height: 1.5;
}
.pb-output-tf {
    font-size: 9px;
    color: var(--muted);
    font-family: var(--mono);
    text-align: right;
    flex-shrink: 0;
}

/* conflict warning */
.pb-conflict {
    margin-top: 8px;
    padding: 6px 10px;
    border-left: 2px solid var(--warn, #e8943a);
    font-size: 10px;
    color: var(--fg-dim);
    font-family: var(--mono);
    line-height: 1.5;
}

/* colour helpers */
.pb-output.bias-full-on   { border-color: var(--pos); }
.pb-output.bias-btc-on    { border-color: #5b9bd5; }
.pb-output.bias-neutral    { border-color: var(--border); }
.pb-output.bias-caution   { border-color: var(--warn, #e8943a); }
.pb-output.bias-off        { border-color: var(--neg); }

/* --- scrollbars --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--border-2);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}