:root {
    color-scheme: dark;
    --bg: #080b0d;
    --bg-2: #0e1311;
    --panel: rgba(18, 24, 21, 0.92);
    --panel-2: rgba(25, 31, 29, 0.9);
    --line: rgba(181, 230, 188, 0.16);
    --line-strong: rgba(115, 214, 151, 0.34);
    --text: #edf5ee;
    --muted: #9eafa6;
    --faint: #65746d;
    --green: #60d394;
    --mint: #7ee7c5;
    --amber: #f4c95d;
    --red: #ff6b6b;
    --blue: #78a6ff;
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(135deg, #080b0d 0%, #10120f 46%, #0a0c10 100%);
    color: var(--text);
}

body {
    overflow-x: hidden;
}

button,
input,
.rz-inputtext,
.rz-dropdown,
.rz-button {
    font-family: inherit;
}

main {
    min-height: 100vh;
}

.dashboard-shell {
    width: min(1760px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.eyebrow {
    margin-bottom: 6px;
    color: var(--green);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-header h1 {
    margin: 0;
    color: #fbfff9;
    font-size: clamp(2rem, 4vw, 4.6rem);
    line-height: 0.95;
    font-weight: 850;
    letter-spacing: 0;
}

.header-note {
    max-width: 680px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.status-cluster {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    min-width: 230px;
}

.run-state,
.status-meta,
.panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(12, 17, 15, 0.82);
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-meta,
.panel-badge,
.mi-value,
.kpi-value,
.mini-value,
.ch-packets,
.ch-rate,
.ch-vol,
.template-count,
.template-rate,
.symbol-chip strong,
.rz-grid-table td {
    font-variant-numeric: tabular-nums;
}

.panel-badge {
    min-width: 96px;
    justify-content: center;
}

.run-state.is-running {
    border-color: rgba(96, 211, 148, 0.45);
    color: #dcffe9;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.dot.on {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(96, 211, 148, 0.16), 0 0 18px rgba(96, 211, 148, 0.78);
}

.dot.off {
    background: var(--faint);
}

.rz-card.control-panel,
.rz-card.panel-card,
.rz-card.metric-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(22, 29, 25, 0.94), rgba(12, 16, 14, 0.94));
    box-shadow: var(--shadow);
}

.control-panel {
    margin-bottom: 16px;
    padding: 16px;
}

.control-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1fr);
    gap: 14px;
    align-items: end;
}

.control-field {
    min-width: 0;
}

.field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #d8e7dd;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(126, 231, 197, 0.25);
    border-radius: 999px;
    color: var(--mint);
    cursor: help;
}

.hint.large {
    width: 30px;
    height: 30px;
}

.hint .rz-icon {
    font-size: 1rem;
}

.full-input {
    width: 100%;
}

.field-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

.field-summary {
    margin-right: auto;
    color: var(--muted);
    font-size: 0.84rem;
}

.action-field {
    display: flex;
    align-items: flex-end;
}

.run-button {
    width: 100%;
    min-height: 42px;
    font-weight: 800;
}

.mini-action {
    min-height: 30px;
}

.error-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 107, 107, 0.28);
    border-radius: var(--radius);
    background: rgba(255, 107, 107, 0.08);
    color: #ffd6d6;
}

.vpn-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(126, 231, 197, 0.22);
    border-radius: var(--radius);
    background: rgba(126, 231, 197, 0.055);
    color: #dffff0;
    font-size: 0.9rem;
}

.vpn-callout.muted {
    border-color: rgba(158, 175, 166, 0.14);
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
}

.metric-row,
.chart-row {
    margin-bottom: 16px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 104px;
    padding: 16px;
}

.metric-card.warn {
    border-color: rgba(255, 107, 107, 0.36);
}

.metric-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(126, 231, 197, 0.22);
    border-radius: var(--radius);
    background: rgba(126, 231, 197, 0.08);
    color: var(--mint);
}

.metric-icon .rz-icon {
    font-size: 1.45rem;
}

.kpi-value {
    margin-top: 4px;
    color: #fbfff9;
    font-size: clamp(1.45rem, 2.2vw, 2.05rem);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: 0;
}

.kpi-label {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-card {
    min-height: 100%;
    padding: 16px;
}

.chart-card {
    min-height: 360px;
}

.table-card {
    min-height: 620px;
}

.selected-card {
    min-height: 620px;
}

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

.panel-head h2 {
    margin: 0;
    color: #f7fff8;
    font-size: 1.02rem;
    font-weight: 850;
    letter-spacing: 0;
}

.panel-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.table-head {
    align-items: center;
}

.search-box {
    width: min(260px, 44vw);
}

.main-chart {
    height: 285px;
}

.message-type-layout {
    display: grid;
    grid-template-rows: 150px minmax(118px, 1fr);
    gap: 10px;
}

.message-chart {
    height: 150px;
}

.template-list {
    display: grid;
    gap: 6px;
    max-height: 138px;
    overflow: auto;
    padding-right: 3px;
}

.template-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 58px;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid rgba(158, 175, 166, 0.13);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.028);
}

.template-label {
    overflow: hidden;
    color: #e5f1e8;
    font-size: 0.78rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-count,
.template-rate {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 760;
    text-align: right;
    white-space: nowrap;
}

.selected-chart {
    height: 250px;
    margin-top: 12px;
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 230px;
    padding: 24px;
    border: 1px dashed rgba(158, 175, 166, 0.28);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    text-align: center;
}

.empty-state .rz-icon {
    color: var(--amber);
    font-size: 2.2rem;
}

.empty-state strong {
    color: #eef8ef;
    font-size: 1rem;
}

.empty-state span {
    max-width: 360px;
    font-size: 0.88rem;
}

.instrument-grid {
    border-radius: var(--radius);
    overflow: hidden;
}

.row-action {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
}

.symbol-picker {
    margin-bottom: 14px;
}

.selected-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 12px;
}

.range-switch {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid rgba(158, 175, 166, 0.18);
    border-radius: var(--radius);
    background: rgba(7, 10, 9, 0.52);
}

.range-chip {
    min-width: 0;
    min-height: 34px;
    padding: 0 7px;
    border: 0;
    border-right: 1px solid rgba(158, 175, 166, 0.12);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.range-chip:last-child {
    border-right: 0;
}

.range-chip:hover,
.range-chip.active {
    background: rgba(126, 231, 197, 0.12);
    color: #e7fff3;
}

.selected-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.symbol-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(96, 211, 148, 0.34);
    border-radius: var(--radius);
    background: rgba(96, 211, 148, 0.1);
    color: #dffff0;
    cursor: pointer;
}

.symbol-chip span,
.symbol-chip strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-chip strong {
    color: var(--amber);
    font-weight: 850;
    min-width: 128px;
    text-align: right;
}

.mini-metric-row {
    margin-bottom: 8px;
}

.mini-kpi {
    min-height: 86px;
    padding: 12px;
    border: 1px solid rgba(158, 175, 166, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.035);
}

.mini-value {
    margin-top: 5px;
    color: #fbfff9;
    font-size: 1.2rem;
    font-weight: 850;
    line-height: 1.1;
    min-height: 1.4em;
    overflow-wrap: anywhere;
}

.rz-card {
    color: var(--text);
}

.rz-inputtext,
.rz-dropdown,
.rz-dropdown-label,
.rz-multiselect,
.rz-multiselect-label {
    border-color: rgba(158, 175, 166, 0.2) !important;
    border-radius: var(--radius) !important;
    background: rgba(7, 10, 9, 0.64) !important;
    color: var(--text) !important;
}

.rz-inputtext:focus,
.rz-state-focused {
    border-color: var(--line-strong) !important;
    box-shadow: 0 0 0 3px rgba(96, 211, 148, 0.11) !important;
}

.rz-button {
    border-radius: var(--radius) !important;
    text-transform: none !important;
}

.rz-button.rz-success {
    background: linear-gradient(135deg, #35b86f, #7ee7c5) !important;
    color: #03100a !important;
}

.rz-button.rz-danger {
    background: linear-gradient(135deg, #ff6b6b, #f4c95d) !important;
    color: #1c0909 !important;
}

.rz-button.rz-light {
    border: 1px solid rgba(158, 175, 166, 0.2) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #e6f1e8 !important;
}

.rz-data-grid,
.rz-grid-table,
.rz-paginator {
    background: transparent !important;
}

.rz-grid-table thead th {
    border-color: rgba(158, 175, 166, 0.16) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #dce9df !important;
    font-size: 0.78rem;
    font-weight: 800;
}

.rz-grid-table td {
    border-color: rgba(158, 175, 166, 0.11) !important;
    color: #edf5ee !important;
}

.rz-grid-table tbody tr:hover td {
    background: rgba(96, 211, 148, 0.07) !important;
}

.rz-chart text {
    fill: #c6d4cc !important;
}

.rz-chart .rz-axis-grid-line {
    stroke: rgba(158, 175, 166, 0.16) !important;
}

/* --- Compact general stats (less space, focus shifts to the selected instrument) --- */
.control-grid {
    grid-template-columns: minmax(340px, 1fr);
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.metric-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
    min-height: 40px;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(12, 17, 15, 0.7);
}

.metric-item.warn {
    border-color: rgba(255, 107, 107, 0.36);
}

.mi-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.mi-value {
    color: #fbfff9;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    min-width: 74px;
    text-align: right;
    white-space: nowrap;
}

.term-note {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: -2px 0 14px;
    padding: 9px 12px;
    border: 1px solid rgba(244, 201, 93, 0.22);
    border-radius: var(--radius);
    background: rgba(244, 201, 93, 0.06);
    color: #eadfbd;
    font-size: 0.86rem;
}

.term-note .rz-icon {
    color: var(--amber);
    font-size: 1.1rem;
}

.term-note strong {
    color: #fff5cf;
}

/* --- Per-channel strip (logical split: different channels carry different data) --- */
.channel-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.channel-chip {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 68px 58px 62px;
    align-items: baseline;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(120, 166, 255, 0.26);
    border-radius: var(--radius);
    background: rgba(120, 166, 255, 0.08);
    font-size: 0.82rem;
    min-width: 0;
}

.channel-chip .ch-name {
    color: #cfe0ff;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-chip .ch-packets {
    color: #f7d77b;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.channel-chip .ch-rate {
    color: var(--mint);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.channel-chip .ch-vol {
    color: var(--muted);
    font-size: 0.76rem;
    text-align: right;
    white-space: nowrap;
}

/* --- Native substring search input --- */
input.search-box {
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(158, 175, 166, 0.2);
    border-radius: var(--radius);
    background: rgba(7, 10, 9, 0.64);
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
}

input.search-box:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(96, 211, 148, 0.11);
}

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

/* --- Give the selected-instrument panel more room for its dynamics --- */
.selected-chart {
    height: 360px;
}


.rz-legend-item text {
    fill: #dce8de !important;
}

.selected-chart .rz-legend,
.main-chart .rz-legend {
    max-height: 64px;
    overflow: auto;
}

@media (max-width: 1180px) {
    .control-grid {
        grid-template-columns: 1fr 1fr;
    }

    .action-field {
        align-self: stretch;
    }
}

@media (max-width: 760px) {
    .dashboard-shell {
        padding: 16px;
    }

    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-cluster {
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .run-state,
    .status-meta {
        justify-content: center;
        white-space: normal;
    }

    .control-grid {
        grid-template-columns: 1fr;
    }

    .field-actions {
        align-items: stretch;
    }

    .field-summary {
        width: 100%;
        margin-right: 0;
    }

    .mini-action {
        flex: 1 1 30%;
    }

    .metric-strip,
    .channel-strip {
        grid-template-columns: 1fr;
    }

    .term-note {
        align-items: flex-start;
    }

    .range-switch {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .panel-head,
    .table-head {
        align-items: stretch;
        flex-direction: column;
    }

    .search-box {
        width: 100%;
    }

    .table-card,
    .selected-card {
        min-height: 0;
    }
}