:root {
    color-scheme: dark;

    --background: #080b11;
    --panel: #10151f;
    --panel-soft: #151c28;
    --panel-border: #212a38;

    --text: #e8edf5;
    --muted: #8d99aa;

    --accent: #4ea1ff;

    --buy: #26a69a;
    --buy-bright: #78d6c8;
    --buy-soft: rgba(38, 166, 154, 0.14);

    --sell: #ef5350;
    --sell-bright: #ff8b88;
    --sell-soft: rgba(239, 83, 80, 0.14);

    --warning: #f0b95b;
    --warning-soft: rgba(240, 185, 91, 0.14);
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;

    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


button,
select {
    font: inherit;
}


.app-shell {
    width: min(1600px, 100%);

    margin: 0 auto;
    padding: 18px;
}


/* ============================================================
Шапка
============================================================ */

.topbar,
.status-row,
.chart-header,
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


.topbar {
    margin-bottom: 12px;
}


.brand {
    font-size: 24px;
    font-weight: 750;
}


.subtitle,
.chart-caption,
.dashboard-caption {
    color: var(--muted);
    font-size: 13px;
}


.toolbar {
    display: flex;
    align-items: center;

    gap: 10px;
}


.select-control {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--muted);
    font-size: 12px;
}

.select-control select {
    min-width: 132px;
}


.button-group {
    display: flex;

    padding: 3px;

    border: 1px solid var(--panel-border);
    border-radius: 10px;

    background: var(--panel);
}


.button-group button,
select {
    padding: 8px 12px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: var(--muted);

    cursor: pointer;
}


.button-group button.active {
    background: var(--accent);
    color: white;
}


select {
    border: 1px solid var(--panel-border);

    background: var(--panel);
    color: var(--text);
}


/* ============================================================
Статус
============================================================ */

.status-row {
    margin-bottom: 10px;

    color: var(--muted);
    font-size: 13px;
}


#symbol {
    margin-right: 8px;

    color: var(--text);
    font-weight: 700;
}


.status.ok {
    color: var(--buy);
}


.status.error {
    color: var(--sell);
}


/* ============================================================
Карточки
============================================================ */

.chart-card,
.dashboard-card {
    margin-bottom: 12px;

    overflow: hidden;

    border: 1px solid var(--panel-border);
    border-radius: 14px;

    background: var(--panel);
}


.chart-title {
    padding: 12px 14px 0;

    font-size: 14px;
    font-weight: 700;
}


.chart-caption {
    padding: 0 14px 10px;
}


.price-chart {
    height: 470px;
}


.flow-chart {
    height: 300px;
}


.metrics {
    display: flex;

    gap: 18px;
    padding: 10px 14px;
}


.metrics div {
    display: grid;

    gap: 3px;

    text-align: right;
}


.metrics span {
    color: var(--muted);
    font-size: 11px;
}


.metrics strong {
    font-variant-numeric: tabular-nums;
}


/* ============================================================
Заголовки панелей
============================================================ */

.dashboard-header {
    padding: 15px 16px;

    border-bottom: 1px solid var(--panel-border);
}


.dashboard-title {
    font-size: 14px;
    font-weight: 750;

    letter-spacing: 0.5px;
}


.table-wrapper {
    width: 100%;
    overflow-x: auto;
}


.higher-timeframe-row td {
    border-top:
        1px solid rgba(78, 161, 255, 0.34);
}


.period-cell {
    color: var(--text);
    font-weight: 700;
}


/* ============================================================
Компактная Flow Overview
============================================================ */

.overview-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;

    font-size: 13px;
}


.overview-table th,
.overview-table td {
    padding: 11px 15px;

    border-bottom:
        1px solid rgba(33, 42, 56, 0.78);

    text-align: right;
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}


.overview-table th {
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;

    letter-spacing: 0.35px;
    text-transform: uppercase;
}


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


.overview-table tbody tr:last-child td {
    border-bottom: 0;
}


.overview-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.022);
}


.scale-heading {
    width: 36%;
    min-width: 300px;
}


.scale-labels {
    display: flex;
    justify-content: space-between;

    width: 100%;
}


.flow-track {
    position: relative;

    width: 100%;
    min-width: 300px;
    height: 24px;

    overflow: hidden;

    border: 1px solid #293345;
    border-radius: 5px;

    background:
        linear-gradient(
            to right,
            rgba(239, 83, 80, 0.035) 0%,
            rgba(239, 83, 80, 0.01) 50%,
            rgba(38, 166, 154, 0.01) 50%,
            rgba(38, 166, 154, 0.035) 100%
        );
}


.flow-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: #7f8a9a;
}


.flow-fill {
    position: absolute;
    top: 3px;

    height: 16px;

    border-radius: 2px;

    transition:
        left 180ms ease,
        width 180ms ease,
        background-color 180ms ease;
}


.flow-fill.positive {
    background: var(--buy-bright);
}


.flow-fill.negative {
    background: var(--sell-bright);
}


.flow-fill.neutral {
    background: var(--muted);
}


.overview-value-positive {
    color: var(--buy-bright);
    font-weight: 700;
}


.overview-value-negative {
    color: var(--sell-bright);
    font-weight: 700;
}


.overview-value-neutral {
    color: var(--muted);
}


.overview-signal {
    font-size: 12px;
    font-weight: 700;
}


.overview-signal.strong-buy,
.overview-signal.buy {
    color: var(--buy-bright);
}


.overview-signal.strong-sell,
.overview-signal.sell {
    color: var(--sell-bright);
}


.overview-signal.neutral {
    color: var(--muted);
}


.overview-signal.warming {
    color: var(--warning);
}


/* ============================================================
Liquidity Flow
============================================================ */

.liquidity-flow-table {
    width: 100%;
    min-width: 1050px;

    border-collapse: collapse;

    font-size: 13px;
}


.liquidity-flow-table th,
.liquidity-flow-table td {
    padding: 13px 15px;

    border-bottom:
        1px solid rgba(33, 42, 56, 0.78);

    text-align: right;
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}


.liquidity-flow-table th {
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;

    letter-spacing: 0.35px;
    text-transform: uppercase;
}


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


.liquidity-flow-table tbody tr:last-child td {
    border-bottom: 0;
}


.liquidity-flow-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.022);
}


.value-buy {
    color: var(--buy-bright);
}


.value-sell {
    color: var(--sell-bright);
}


.value-positive {
    color: var(--buy-bright);
    font-weight: 700;
}


.value-negative {
    color: var(--sell-bright);
    font-weight: 700;
}


.value-neutral {
    color: var(--muted);
}


/* ============================================================
LIVE
============================================================ */

.live-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 88px;

    padding: 6px 10px;

    border: 1px solid var(--panel-border);
    border-radius: 999px;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 0.5px;
}


.live-indicator.live {
    border-color: rgba(38, 166, 154, 0.5);

    background: var(--buy-soft);
    color: var(--buy-bright);
}


.live-indicator.waiting {
    border-color: rgba(240, 185, 91, 0.42);

    background: var(--warning-soft);
    color: var(--warning);
}


.live-indicator.error {
    border-color: rgba(239, 83, 80, 0.45);

    background: var(--sell-soft);
    color: var(--sell-bright);
}


/* ============================================================
Бейджи крупного потока
============================================================ */

.signal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 126px;

    padding: 5px 9px;

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 0.2px;
}


.signal-badge.strong-buy {
    border-color: rgba(113, 217, 203, 0.45);

    background: rgba(113, 217, 203, 0.16);
    color: var(--buy-bright);
}


.signal-badge.buy {
    border-color: rgba(38, 166, 154, 0.4);

    background: var(--buy-soft);
    color: var(--buy);
}


.signal-badge.neutral {
    border-color: rgba(141, 153, 170, 0.28);

    background: rgba(141, 153, 170, 0.08);
    color: var(--muted);
}


.signal-badge.sell {
    border-color: rgba(239, 83, 80, 0.38);

    background: var(--sell-soft);
    color: var(--sell);
}


.signal-badge.strong-sell {
    border-color: rgba(255, 119, 116, 0.45);

    background: rgba(255, 119, 116, 0.16);
    color: var(--sell-bright);
}


.signal-badge.warming {
    border-color: rgba(240, 185, 91, 0.42);

    background: var(--warning-soft);
    color: var(--warning);
}


/* ============================================================
Footer
============================================================ */

footer {
    color: var(--muted);

    font-size: 12px;
    text-align: right;
}


footer a {
    color: var(--muted);
}


/* ============================================================
Адаптивность
============================================================ */

@media (max-width: 760px) {
    .topbar,
    .chart-header,
    .dashboard-header {
        align-items: stretch;
        flex-direction: column;
    }


    .toolbar {
        align-items: stretch;
        flex-direction: column;
    }


    .button-group {
        justify-content: space-between;
    }


    .metrics {
        justify-content: space-between;
    }


    .price-chart {
        height: 390px;
    }


    .flow-chart {
        height: 260px;
    }


    .overview-table th,
    .overview-table td,
    .liquidity-flow-table th,
    .liquidity-flow-table td {
        padding: 11px 12px;
    }
}


@media (max-width: 480px) {
    .app-shell {
        padding: 10px;
    }
}

/* ============================================================
Liquidity Depth
============================================================ */

.depth-header-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}


.depth-midpoint {
    color: var(--muted);
    font-size: 12px;
}


.depth-midpoint strong {
    margin-left: 4px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}


.liquidity-depth-table {
    width: 100%;
    min-width: 1180px;

    border-collapse: collapse;

    font-size: 13px;
}


.liquidity-depth-table th,
.liquidity-depth-table td {
    padding: 13px 15px;

    border-bottom:
        1px solid rgba(33, 42, 56, 0.78);

    text-align: right;
    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}


.liquidity-depth-table th {
    color: var(--muted);

    font-size: 11px;
    font-weight: 650;

    letter-spacing: 0.35px;
    text-transform: uppercase;
}


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


.liquidity-depth-table tbody tr:last-child td {
    border-bottom: 0;
}


.liquidity-depth-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.022);
}


.depth-scale-heading {
    width: 28%;
    min-width: 270px;
}


.depth-track {
    position: relative;

    width: 100%;
    min-width: 270px;
    height: 24px;

    overflow: hidden;

    border: 1px solid #293345;
    border-radius: 5px;

    background:
        linear-gradient(
            to right,
            rgba(239, 83, 80, 0.035) 0%,
            rgba(239, 83, 80, 0.01) 50%,
            rgba(38, 166, 154, 0.01) 50%,
            rgba(38, 166, 154, 0.035) 100%
        );
}


.depth-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: #7f8a9a;
}


.depth-fill {
    position: absolute;
    top: 3px;

    height: 16px;

    border-radius: 2px;

    transition:
        left 180ms ease,
        width 180ms ease,
        background-color 180ms ease;
}


.depth-fill.positive {
    background: var(--buy-bright);
}


.depth-fill.negative {
    background: var(--sell-bright);
}


.depth-fill.neutral {
    background: var(--muted);
}


.depth-bid-value {
    color: var(--buy-bright);
}


.depth-ask-value {
    color: var(--sell-bright);
}


.depth-positive {
    color: var(--buy-bright);
    font-weight: 700;
}


.depth-negative {
    color: var(--sell-bright);
    font-weight: 700;
}


.depth-neutral {
    color: var(--muted);
}


.depth-persistence-high {
    color: var(--text);
    font-weight: 700;
}


.depth-persistence-medium {
    color: var(--warning);
}


.depth-persistence-low {
    color: var(--muted);
}


@media (max-width: 760px) {
    .depth-header-meta {
        align-items: stretch;
        flex-direction: column;
    }


    .liquidity-depth-table th,
    .liquidity-depth-table td {
        padding: 11px 12px;
    }
}


/* ============================================================
Liquidity Depth: процент + цена + покрытие
============================================================ */

.depth-note {
    padding: 10px 16px;
    border-bottom: 1px solid var(--panel-border);
    color: var(--muted);
    font-size: 12px;
}

.depth-range-cell {
    min-width: 150px;
    text-align: left !important;
}

.depth-range-cell strong,
.depth-range-cell span {
    display: block;
}

.depth-range-cell span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.depth-coverage-complete {
    color: var(--buy-bright);
    font-weight: 700;
}

.depth-coverage-partial {
    color: var(--warning);
    font-weight: 700;
}

.depth-coverage-missing {
    color: var(--sell-bright);
    font-weight: 700;
}

.liquidity-depth-table {
    min-width: 1280px;
}

/* ============================================================
DNA Intelligence + AI Journal
============================================================ */
.view-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}
.view-tab {
    padding: 8px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
}
.view-tab.active {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(78, 161, 255, 0.12);
}
.dna-panel {
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel);
}
.dna-panel-head,
.journal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.dna-quality {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.dna-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.dna-metric {
    padding: 11px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-soft);
}
.dna-metric span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .35px;
}
.dna-metric strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.dna-positive { color: var(--buy-bright) !important; }
.dna-negative { color: var(--sell-bright) !important; }
.dna-neutral { color: var(--warning) !important; }
.dna-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.dna-reason {
    padding: 5px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
}
.dna-explain-button {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.dna-explanation {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    background: rgba(78, 161, 255, 0.06);
    color: var(--text);
    line-height: 1.55;
    font-size: 13px;
}
.journal-view {
    min-height: 480px;
    padding: 16px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel);
}
.journal-empty {
    color: var(--muted);
    padding: 24px 4px;
}
.journal-list {
    display: grid;
    gap: 10px;
}
.journal-entry {
    display: grid;
    grid-template-columns: 145px 180px 1fr 110px;
    gap: 14px;
    align-items: start;
    padding: 13px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-soft);
}
.journal-time { color: var(--muted); font-size: 12px; }
.journal-action { font-weight: 750; }
.journal-scenario { color: var(--text); }
.journal-reasons { color: var(--muted); font-size: 12px; margin-top: 5px; }
.journal-confidence { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .dna-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal-entry { grid-template-columns: 1fr; }
    .journal-confidence { text-align: left; }
}

/* ============================================================
LiquidityDNA v1.2 — unified chart + consensus lamps
============================================================ */

.brand-zone {
    display: grid;
    gap: 2px;
}

.consensus-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.consensus-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.consensus-item.active {
    border-color: rgba(78, 161, 255, 0.62);
    color: var(--text);
    background: rgba(78, 161, 255, 0.08);
}

.consensus-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #667080;
    box-shadow: 0 0 0 3px rgba(102, 112, 128, 0.10);
}

.consensus-dot.long {
    background: var(--buy-bright);
    box-shadow: 0 0 10px rgba(120, 214, 200, 0.75);
}

.consensus-dot.sell {
    background: var(--sell-bright);
    box-shadow: 0 0 10px rgba(255, 139, 136, 0.75);
}

.consensus-dot.mixed {
    background: #697386;
    box-shadow: none;
}

.combined-chart-header {
    padding: 10px 14px 6px;
    border-bottom: 1px solid rgba(33, 42, 56, 0.72);
}

.combined-chart-header .chart-title,
.combined-chart-header .chart-caption {
    padding-left: 0;
    padding-right: 0;
}

.combined-chart-header .chart-title {
    padding-top: 0;
}

.combined-chart-header .chart-caption {
    padding-bottom: 0;
    margin-top: 4px;
}

.market-chart {
    height: 720px;
}

.merged-flow-table {
    min-width: 1450px;
}

.merged-flow-table .scale-heading {
    width: 25%;
    min-width: 250px;
}

.compact-flow-track {
    min-width: 240px;
}

@media (max-width: 900px) {
    .market-chart {
        height: 610px;
    }

    .consensus-strip {
        margin-bottom: 4px;
    }
}

@media (max-width: 760px) {
    .market-chart {
        height: 560px;
    }

    .consensus-item {
        padding: 5px 8px;
    }
}

/* ============================================================
LiquidityDNA v2.0 — Market Journal / human annotations
============================================================ */

.human-annotation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel);
}

.human-annotation-copy {
    min-width: 260px;
}

.human-annotation-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .45px;
}

.human-annotation-caption {
    max-width: 760px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.human-annotation-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.human-label-buttons {
    display: inline-flex;
    gap: 6px;
}

.human-label {
    min-width: 86px;
    padding: 7px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.human-label:hover { color: var(--text); }
.human-label:disabled { opacity: .45; cursor: wait; }
.human-label.bullish:hover {
    border-color: rgba(120, 214, 200, .6);
    background: rgba(120, 214, 200, .09);
    color: var(--buy-bright);
}
.human-label.bearish:hover {
    border-color: rgba(255, 139, 136, .6);
    background: rgba(255, 139, 136, .09);
    color: var(--sell-bright);
}
.human-label.neutral:hover {
    border-color: rgba(151, 163, 181, .55);
    background: rgba(151, 163, 181, .08);
}

.human-tag-select {
    min-width: 150px;
    padding: 7px 9px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 11px;
}

.human-save-status {
    min-width: 150px;
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}
.human-save-status.saved.positive { color: var(--buy-bright); }
.human-save-status.saved.negative { color: var(--sell-bright); }
.human-save-status.saved.neutral { color: var(--text); }
.human-save-status.error { color: var(--sell-bright); }
.human-save-status.saving { color: var(--warning); }

.market-journal-header {
    margin-bottom: 10px;
}

.journal-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.journal-summary > div {
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-soft);
}

.journal-summary span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.journal-summary strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.journal-legend {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--accent);
    background: rgba(78, 161, 255, .05);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.market-journal-list {
    gap: 12px;
}

.market-memory-entry {
    padding: 14px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-soft);
    box-shadow: inset 3px 0 0 rgba(105, 115, 134, .4);
}
.market-memory-entry.positive { box-shadow: inset 3px 0 0 rgba(120, 214, 200, .75); }
.market-memory-entry.negative { box-shadow: inset 3px 0 0 rgba(255, 139, 136, .75); }

.memory-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 11px;
}

.memory-time {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.memory-state-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.memory-state-line strong {
    color: var(--text);
    font-size: 14px;
}

.memory-direction,
.memory-source,
.memory-tag,
.memory-consensus {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 7px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .25px;
}

.memory-direction.positive,
.memory-consensus.positive {
    border-color: rgba(120, 214, 200, .34);
    color: var(--buy-bright);
    background: rgba(120, 214, 200, .07);
}
.memory-direction.negative,
.memory-consensus.negative {
    border-color: rgba(255, 139, 136, .34);
    color: var(--sell-bright);
    background: rgba(255, 139, 136, .07);
}

.memory-source.human {
    border-color: rgba(78, 161, 255, .35);
    color: #8fc5ff;
}

.memory-entry-meta {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.memory-metrics-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.memory-metric {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgba(39, 49, 66, .78);
    border-radius: 8px;
    background: rgba(10, 14, 21, .24);
}

.memory-metric span {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 9px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.memory-metric strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.memory-metric.positive strong { color: var(--buy-bright); }
.memory-metric.negative strong { color: var(--sell-bright); }

.memory-outcomes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(39, 49, 66, .72);
}

.memory-outcome-title {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
}

.memory-outcome-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.memory-outcome-cell {
    min-height: 61px;
    padding: 7px 8px;
    border: 1px solid rgba(39, 49, 66, .72);
    border-radius: 7px;
    background: rgba(10, 14, 21, .22);
}

.memory-outcome-cell > span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.memory-outcome-cell strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.memory-outcome-cell strong.good { color: var(--buy-bright); }
.memory-outcome-cell strong.bad { color: var(--sell-bright); }
.memory-outcome-cell strong.pending { color: #778297; font-size: 11px; font-weight: 600; }

.memory-outcome-cell small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 8.5px;
    line-height: 1.35;
}

@media (max-width: 1150px) {
    .human-annotation-card { align-items: flex-start; flex-direction: column; }
    .human-annotation-controls { justify-content: flex-start; }
    .human-save-status { text-align: left; }
    .memory-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .memory-outcome-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .human-label-buttons { width: 100%; flex-wrap: wrap; }
    .human-label { flex: 1 1 90px; }
    .human-tag-select { width: 100%; }
    .journal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .memory-entry-head { flex-direction: column; }
    .memory-entry-meta { justify-content: flex-start; }
    .memory-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .memory-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.memory-outcome-cell strong.neutral { color: var(--text); }

/* ============================================================
Flow Pressure v2.2
============================================================ */

.pressure-metrics {
    align-items: stretch;
    gap: 10px;
    padding-right: 4px;
}

.pressure-metrics > div {
    min-width: 112px;
    padding: 7px 9px;
    border: 1px solid rgba(48, 61, 80, 0.74);
    border-radius: 8px;
    background: rgba(15, 22, 32, 0.62);
}

.pressure-metrics strong {
    font-size: 17px;
    line-height: 1.05;
}

.pressure-metrics small {
    color: #667386;
    font-size: 10px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .pressure-metrics {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .pressure-metrics > div {
        min-width: 104px;
    }
}

@media (max-width: 760px) {
    .pressure-metrics {
        justify-content: stretch;
    }

    .pressure-metrics > div {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        text-align: left;
    }
}

/* ============================================================
LiquidityDNA Web Launch — Signal Tape
============================================================ */

.terminal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 12px;
    align-items: stretch;
}

.terminal-hero-grid .combined-chart-card {
    min-width: 0;
    margin: 0;
}

.signal-tape-card {
    display: flex;
    min-width: 0;
    height: 100%;
    max-height: 790px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--panel);
}

.signal-tape-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--panel-border);
}

.signal-tape-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .45px;
}

.signal-tape-caption {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.signal-tape-live {
    padding: 3px 7px;
    border: 1px solid rgba(120, 214, 200, .34);
    border-radius: 999px;
    background: rgba(120, 214, 200, .07);
    color: var(--buy-bright);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
}

.signal-tape-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(39, 49, 66, .72);
}

.signal-filter {
    flex: 1 1 auto;
    padding: 5px 7px;
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 750;
    cursor: pointer;
}

.signal-filter.active {
    border-color: rgba(78, 161, 255, .45);
    background: rgba(78, 161, 255, .08);
    color: var(--text);
}

.signal-tape-list {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
}

.signal-tape-item {
    display: block;
    width: 100%;
    padding: 9px 9px 8px;
    border: 1px solid rgba(39, 49, 66, .82);
    border-radius: 9px;
    background: rgba(10, 14, 21, .28);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.signal-tape-item:hover {
    transform: translateY(-1px);
    background: rgba(20, 27, 39, .72);
}

.signal-tape-item.long {
    box-shadow: inset 3px 0 0 rgba(120, 214, 200, .82);
}

.signal-tape-item.sell {
    box-shadow: inset 3px 0 0 rgba(255, 139, 136, .82);
}

.signal-tape-item.long:hover { border-color: rgba(120, 214, 200, .35); }
.signal-tape-item.sell:hover { border-color: rgba(255, 139, 136, .35); }

.signal-tape-item-top,
.signal-tape-item-bottom {
    display: flex;
    align-items: center;
    gap: 7px;
}

.signal-tape-item-top strong {
    min-width: 38px;
    font-size: 11px;
    letter-spacing: .2px;
}

.signal-tape-item-top time {
    margin-left: auto;
    color: var(--muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.signal-tape-state {
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .25px;
}

.signal-tape-item.long .signal-tape-state {
    background: rgba(120, 214, 200, .10);
    color: var(--buy-bright);
}

.signal-tape-item.sell .signal-tape-state {
    background: rgba(255, 139, 136, .10);
    color: var(--sell-bright);
}

.signal-tape-metrics {
    margin-top: 7px;
    overflow: hidden;
    color: #a8b3c3;
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signal-tape-item-bottom {
    justify-content: space-between;
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.signal-tape-empty {
    padding: 20px 12px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 1380px) {
    .terminal-hero-grid {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
}

@media (max-width: 1120px) {
    .terminal-hero-grid {
        grid-template-columns: 1fr;
    }
    .signal-tape-card {
        max-height: 330px;
    }
}

/* Connection state stays visible across both views. */
.data-health { margin: 12px 0; padding: 11px 14px; border: 1px solid var(--panel-border); border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--panel); color: var(--muted); }
.data-health.healthy { color: var(--buy-bright); border-color: rgba(38,166,154,.3); }
.data-health.waiting { color: var(--warning); border-color: rgba(240,185,91,.3); }
.dashboard-card.data-stale tbody { opacity: .55; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.status.warning { color: var(--warning); }
[hidden] { display: none !important; }