* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg:           oklch(0.09 0 0);
    --bg-raised:    oklch(0.12 0 0);
    --bg-hover:     oklch(0.18 0 0);
    --bg-inset:     oklch(0.15 0 0);
    --border:       oklch(0.22 0 0);
    --border-subtle: oklch(0.16 0 0);
    --border-faint: oklch(0.12 0 0);
    --fg:           oklch(0.9 0 0);
    --fg-secondary: oklch(0.8 0 0);
    --fg-tertiary:  oklch(0.7 0 0);
    --fg-muted:     oklch(0.55 0 0);
    --fg-faint:     oklch(0.4 0 0);
    --fg-dim:       oklch(0.6 0 0);
    --green:        oklch(0.7 0.18 145);
    --green-bg:     oklch(0.25 0.06 145);
    --green-dim:    oklch(0.55 0.12 145);
    --green-soft:   oklch(0.6 0.12 145);
    --warning:      oklch(0.75 0.15 85);
    --red:          oklch(0.55 0.2 25);
    --focus:        oklch(0.5 0.15 250);
    --dot-inactive: oklch(0.3 0 0);
    --selected-client-bg: oklch(0.15 0.03 145);
    --btn-hover-bg: oklch(0.20 0 0);
    --activity-border: oklch(0.13 0 0);
    --input-border: oklch(0.25 0 0);
    --activity-age: oklch(0.35 0 0);
    --count-sep:    oklch(0.3 0 0);
}

body {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    background: var(--bg);
    color: var(--fg);
    font-size: 13px;
    line-height: 1.5;
    height: 100vh;
    overflow: hidden;
}

/* ─── Header ─── */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-raised);
}

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

h1 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
    text-transform: uppercase;
}

.header-stats {
    display: flex;
    align-items: center;
    gap: 24px;
}

.stat-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat-value-sm {
    font-size: 18px;
    font-weight: 500;
    color: var(--fg-secondary);
}

.stat-pending {
    color: var(--fg);
}

.stat-clear {
    color: var(--green);
}

.stat-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

.stat-sep {
    width: 1px;
    height: 24px;
    background: var(--border);
}

.progress-bar {
    width: 112px;
    height: 4px;
    background: var(--bg-inset);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--green-dim);
    transition: width 0.3s ease-out;
}

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

.sync-time {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-tertiary);
}

.staleness-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.staleness-text {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.dot-fresh, .dot-fresh.staleness-text { color: var(--green); }
.dot-fresh.staleness-dot { background: var(--green); }
.dot-warn, .dot-warn.staleness-text { color: var(--warning); }
.dot-warn.staleness-dot { background: var(--warning); }
.dot-stale, .dot-stale.staleness-text { color: var(--red); }
.dot-stale.staleness-dot { background: var(--red); }

/* ─── Two-panel layout ─── */

.dashboard {
    display: grid;
    grid-template-columns: 1fr 256px;
    height: calc(100vh - 53px);
    overflow: hidden;
}

.signal-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── Column headers ─── */

.col-headers {
    display: grid;
    grid-template-columns: 1.5rem 7rem 6rem 4.5rem 1fr 9rem 9rem;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-faint);
    background: var(--bg);
    align-items: center;
}

.col-headers .sortable {
    cursor: pointer;
    user-select: none;
}

.col-headers .sortable:hover {
    color: var(--fg);
}

.col-headers .sortable.sort-active {
    color: var(--fg);
}

.col-value {
    text-align: right;
}

/* ─── Info banner ─── */

.info-banner {
    padding: 6px 12px;
    font-size: 11px;
    color: var(--warning);
    background: oklch(0.12 0.03 85);
    border-bottom: 1px solid oklch(0.20 0.05 85);
}

[data-theme="light"] .info-banner {
    background: oklch(0.95 0.03 85);
    border-bottom-color: oklch(0.85 0.05 85);
}

/* ─── Signal list ─── */

.signal-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.signal-group {
    border-bottom: 1px solid var(--border-subtle);
}

/* ─── Rows ─── */

.row {
    display: grid;
    grid-template-columns: 1.5rem 7rem 6rem 4.5rem 1fr 9rem 9rem;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
    transition: background 0.1s;
}

.row-group {
    cursor: pointer;
}

.row-group:hover {
    background: var(--bg-hover);
}

.row-single:not(.row-processed) {
    cursor: pointer;
}

.row-single:not(.row-processed):hover {
    background: var(--bg-hover);
}

.row-client {
    padding-left: 28px;
    border-top: 1px solid var(--border-faint);
}

.row-client:not(.row-processed) {
    cursor: pointer;
}

.row-client:not(.row-processed):hover {
    background: var(--bg-hover);
}

.row-processed {
    opacity: 0.35;
}

.row-selected {
    background: var(--bg-hover);
}

.row-client.row-selected {
    background: var(--selected-client-bg);
}

/* ─── Row contents ─── */

.col-num {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-faint);
}

.ticker {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-secondary);
}

.col-price, .col-amt {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-secondary);
}

.col-client {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.client-count {
    font-size: 12px;
    color: var(--fg-muted);
}

.client-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dot-inactive);
    flex-shrink: 0;
}

.row-selected .client-dot {
    background: var(--green);
}

.client-name {
    font-size: 12px;
    color: var(--fg-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.num {
    font-variant-numeric: tabular-nums;
}

.col-value {
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.col-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ─── Value magnitude colors ─── */

.val-high { color: var(--warning); }
.val-mid  { color: var(--fg); }
.val-low  { color: var(--fg-tertiary); }

/* ─── Chevron ─── */

.chevron {
    display: inline-block;
    font-size: 10px;
    color: var(--fg-faint);
    transition: transform 0.15s;
    margin-right: 4px;
}

.signal-group.expanded .chevron {
    transform: rotate(90deg);
}

/* ─── Buttons ─── */

.btn {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}

.btn.act {
    background: var(--green-bg);
    color: var(--green);
}

.btn.act:hover {
    background: oklch(0.30 0.08 145);
}

.btn.skip {
    background: var(--bg-inset);
    color: var(--fg-muted);
}

.btn.skip:hover {
    background: var(--btn-hover-bg);
    color: var(--fg-tertiary);
}

.btn-all {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-inset);
    color: var(--fg-faint);
    transition: background 0.15s;
}

.btn-all:hover {
    background: var(--btn-hover-bg);
    color: var(--fg-tertiary);
}

.btn-toggle-all {
    padding: 2px 8px;
    border: none;
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--fg-faint);
    letter-spacing: 0.05em;
    transition: color 0.15s;
}

.btn-toggle-all:hover {
    color: var(--fg);
}

.client-filter {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--fg-muted);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.client-filter:hover {
    border-color: var(--fg-muted);
    color: var(--fg);
}

.client-filter:focus {
    outline: none;
    border-color: var(--focus);
}

.status-label {
    font-size: 10px;
    font-weight: 500;
}

.status-label.ACT {
    color: var(--green-dim);
}

.status-label.SKIP {
    color: var(--fg-faint);
}

/* ─── HTMX loading ─── */

.htmx-request .btn {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── Keyboard footer ─── */

.keyboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.shortcuts {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 10px;
    color: var(--fg-faint);
}

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

kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-inset);
    font-family: inherit;
    font-size: 9px;
}

.footer-pending {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-faint);
}

/* ─── Activity sidebar ─── */

.activity-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    overflow: hidden;
}

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

.activity-header h2 {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
    text-transform: uppercase;
}

.activity-counts {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.act-count {
    color: var(--green-soft);
}

.count-sep {
    color: var(--count-sep);
}

.skip-count {
    color: var(--fg-faint);
}

.activity-list {
    flex: 1;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--activity-border);
}

.activity-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.activity-badge {
    font-size: 10px;
    font-weight: 600;
}

.activity-badge.ACT {
    color: var(--green-soft);
}

.activity-badge.SKIP {
    color: var(--fg-faint);
}

.activity-ticker {
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-secondary);
}

.activity-client {
    font-size: 11px;
    color: var(--fg-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.activity-value {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-dim);
}

.activity-age {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--activity-age);
    width: 28px;
    text-align: right;
}

/* ─── Empty state ─── */

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--fg-faint);
    font-size: 11px;
}

/* ─── User info (header) ─── */

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    color: var(--fg-muted);
    font-size: 12px;
}

.user-info .username {
    color: var(--fg-tertiary);
}

.logout-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.logout-btn:hover {
    border-color: var(--fg-muted);
    color: var(--fg);
}

/* ─── Theme toggle ─── */

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.theme-toggle:hover {
    border-color: var(--fg-muted);
    color: var(--fg);
}

/* ─── Light theme ─── */

[data-theme="light"] {
    --bg:           oklch(0.97 0 0);
    --bg-raised:    oklch(0.94 0 0);
    --bg-hover:     oklch(0.91 0 0);
    --bg-inset:     oklch(0.90 0 0);
    --border:       oklch(0.82 0 0);
    --border-subtle: oklch(0.88 0 0);
    --border-faint: oklch(0.90 0 0);
    --fg:           oklch(0.15 0 0);
    --fg-secondary: oklch(0.30 0 0);
    --fg-tertiary:  oklch(0.40 0 0);
    --fg-muted:     oklch(0.50 0 0);
    --fg-faint:     oklch(0.60 0 0);
    --fg-dim:       oklch(0.45 0 0);
    --green:        oklch(0.45 0.18 145);
    --green-bg:     oklch(0.92 0.06 145);
    --green-dim:    oklch(0.45 0.12 145);
    --green-soft:   oklch(0.40 0.12 145);
    --warning:      oklch(0.55 0.15 85);
    --red:          oklch(0.50 0.2 25);
    --focus:        oklch(0.50 0.15 250);
    --dot-inactive: oklch(0.75 0 0);
    --selected-client-bg: oklch(0.93 0.03 145);
    --btn-hover-bg: oklch(0.86 0 0);
    --activity-border: oklch(0.90 0 0);
    --input-border: oklch(0.78 0 0);
    --activity-age: oklch(0.60 0 0);
    --count-sep:    oklch(0.75 0 0);
}

[data-theme="light"] .btn.act:hover {
    background: oklch(0.88 0.08 145);
}

/* ─── Login form (preserved) ─── */

.login-container {
    display: flex;
    justify-content: center;
    padding-top: 80px;
}

.login-form {
    width: 320px;
}

.login-form h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--fg-muted);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.form-field {
    margin-bottom: 16px;
}

.form-field label {
    display: block;
    margin-bottom: 4px;
    color: var(--fg-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-field input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-raised);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    color: var(--fg);
    font-family: inherit;
    font-size: 13px;
}

.form-field input:focus {
    outline: none;
    border-color: var(--focus);
}

.login-btn {
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
}

.login-error {
    color: var(--red);
    margin-bottom: 16px;
    font-size: 12px;
}