/* ================================================================
   Trading Platform — Operator Console Design System
   ================================================================
   Design tokens · typography · layout · components · utilities.
   Single source of truth for all visual styling.
   Dark-theme professional trading terminal.
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    --bg-primary:    #080b10;
    --bg-secondary:  #0e1218;
    --bg-card:       #131921;
    --bg-hover:      #1a2230;
    --bg-elevated:   #1c2534;
    --bg-input:      #0a0e15;

    --border:        #1c2838;
    --border-subtle: #141e2c;
    --border-focus:  #3b82f6;

    --text-primary:   #e4eaf2;
    --text-secondary: #8494a7;
    --text-muted:     #4a5b6e;

    --accent:        #3b82f6;
    --accent-hover:  #2563eb;
    --accent-muted:  #172a4a;

    --green:         #22c55e;
    --green-muted:   #0c2d1a;
    --red:           #ef4444;
    --red-muted:     #2d0c0c;
    --yellow:        #eab308;
    --yellow-muted:  #2d2006;
    --orange:        #f97316;
    --cyan:          #06b6d4;
    --purple:        #a855f7;

    --sidebar-width: 220px;
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-pill:   999px;

    --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
    --shadow-md:     0 4px 16px rgba(0,0,0,.5);
    --shadow-lg:     0 8px 32px rgba(0,0,0,.6);
    --shadow-glow:   0 0 20px rgba(59,130,246,.08);

    --transition:      150ms ease;
    --transition-slow: 300ms ease;

    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-color: var(--border) transparent; }

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 13px; font-weight: 600; }

::selection { background: rgba(59,130,246,.3); color: var(--text-primary); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Layout ─────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    position: fixed; top: 0; left: 0; height: 100vh;
    overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column;
    z-index: 100;
}

.main {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 20px 24px;
    min-width: 0;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar-brand {
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.sidebar-section {
    padding: 0;
}
.sidebar-section + .sidebar-section {
    border-top: 1px solid var(--border-subtle);
}

.sidebar-label {
    padding: 16px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    user-select: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all var(--transition);
    cursor: pointer;
    text-decoration: none;
    position: relative;
}
.nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.nav-link.active {
    color: var(--text-primary);
    border-left-color: var(--accent);
    background: linear-gradient(90deg, rgba(59,130,246,.08), transparent);
}

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

.nav-count {
    margin-left: auto;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-muted);
    color: var(--accent);
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: box-shadow var(--transition), background var(--transition);
}
.card:not(.no-hover):hover {
    box-shadow: var(--shadow-sm);
    background: var(--bg-elevated);
}
.card.no-hover:hover {
    box-shadow: none;
    background: var(--bg-card);
}

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

.card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ── KPI Strip ──────────────────────────────────────────────── */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.kpi-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.kpi-val {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.kpi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Grids ──────────────────────────────────────────────────── */
.grid   { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .main { padding: 12px; }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px;
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    font-family: inherit;
}
.btn:hover { background: var(--bg-hover); border-color: var(--text-muted); }

.btn-primary {
    background: var(--accent); border-color: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger {
    background: var(--red-muted); border-color: rgba(239,68,68,.3);
    color: var(--red);
}
.btn-danger:hover { background: rgba(239,68,68,.2); }

.btn-success {
    background: var(--green-muted); border-color: rgba(34,197,94,.3);
    color: var(--green);
}
.btn-success:hover { background: rgba(34,197,94,.2); }

.btn-sm { padding: 4px 10px; font-size: 11px; }

.btn-icon {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

.btn-ghost {
    background: transparent; border-color: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.w-full { width: 100%; }

/* ── Badges & Pills ─────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    border: 1px solid transparent;
}

.badge-active  { background: var(--green-muted); color: var(--green); border-color: rgba(34,197,94,.2); }
.badge-inactive { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border); }
.badge-long    { background: var(--green-muted); color: var(--green); border-color: rgba(34,197,94,.2); }
.badge-short   { background: var(--red-muted);   color: var(--red);   border-color: rgba(239,68,68,.2); }
.badge-neutral { background: var(--bg-hover);     color: var(--text-secondary); border-color: var(--border); }
.badge-info    { background: var(--accent-muted); color: var(--accent); border-color: rgba(59,130,246,.2); }
.badge-warn    { background: var(--yellow-muted); color: var(--yellow); border-color: rgba(234,179,8,.2); }

.badge-vol-low    { background: var(--green-muted); color: var(--green); }
.badge-vol-normal { background: var(--bg-hover);    color: var(--text-secondary); }
.badge-vol-high   { background: var(--red-muted);   color: var(--red); }

.regime-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
}
.regime-capitulation { background: var(--red-muted);    color: var(--red); }
.regime-recovery     { background: var(--yellow-muted); color: var(--yellow); }
.regime-normal       { background: var(--green-muted);  color: var(--green); }
.regime-euphoria     { background: rgba(168,85,247,.12); color: var(--purple); }
.regime-unknown      { background: var(--bg-hover);      color: var(--text-muted); }

/* ── Symbol Cards (NO JITTER) ───────────────────────────────── */
.sym-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: box-shadow var(--transition);
    cursor: pointer;
}
.sym-card:hover {
    box-shadow: 0 0 0 1px var(--accent), var(--shadow-glow);
}

.sym-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.sym-price {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}

.sym-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

/* ── Status Dots ────────────────────────────────────────────── */
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-ok    { background: var(--green); }
.status-warn  { background: var(--yellow); }
.status-error { background: var(--red); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.pulse { animation: pulse 2s ease-in-out infinite; }

/* ── Stats & Metrics ────────────────────────────────────────── */
.stat { text-align: center; }
.stat-value {
    font-size: 20px; font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted); margin-top: 2px;
}

.metric { display: flex; justify-content: space-between; padding: 5px 0; }
.metric-k { color: var(--text-muted); font-size: 12px; }
.metric-v { color: var(--text-primary); font-size: 12px; font-weight: 600; font-family: var(--font-mono); }

/* ── Progress Bars ──────────────────────────────────────────── */
.progress-track {
    width: 100%;
    height: 6px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width var(--transition-slow);
}
.progress-fill.warning { background: var(--yellow); }
.progress-fill.danger  { background: var(--red); }

/* ── Tables ─────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th {
    text-align: left; padding: 8px 10px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    vertical-align: middle;
}
tbody tr:hover { background: var(--bg-hover); }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.tab {
    padding: 8px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition);
}
.tab:hover { color: var(--text-secondary); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 12px; font-weight: 500;
    border: 1px solid;
    margin-bottom: 12px;
}
.alert-critical {
    background: var(--red-muted); color: var(--red);
    border-color: rgba(239,68,68,.25);
}
.alert-warning {
    background: var(--yellow-muted); color: var(--yellow);
    border-color: rgba(234,179,8,.25);
}
.alert-info {
    background: var(--accent-muted); color: var(--accent);
    border-color: rgba(59,130,246,.25);
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container {
    position: fixed; top: 16px; right: 16px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 12px; font-weight: 500;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toast-in 200ms ease forwards;
}

.toast-success { border-left: 3px solid var(--green); }
.toast-error   { border-left: 3px solid var(--red); }
.toast-warning { border-left: 3px solid var(--yellow); }
.toast-info    { border-left: 3px solid var(--accent); }

.toast-out { animation: toast-out 200ms ease forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

/* ── Emergency Bar ──────────────────────────────────────────── */
.engine-controls {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    margin-bottom: 12px;
}

.emergency-bar {
    background: var(--red-muted);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--red);
    font-size: 12px; font-weight: 600;
}

/* ── AI Panel ───────────────────────────────────────────────── */
.ai-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    min-height: 200px;
}
.ai-panel .card-header {
    margin-bottom: 14px;
}

/* ── Decision Feed (Autopilot Timeline) ─────────────────────── */
.decision-feed {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.decision-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.decision-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    flex-shrink: 0;
    background: var(--bg-hover);
    color: var(--text-muted);
}

/* ── Text Utilities ─────────────────────────────────────────── */
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-muted  { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.positive    { color: var(--green); }
.negative    { color: var(--red); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Spacing ────────────────────────────────────────────────── */
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

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

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loading-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin: 0 auto;
}

.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

/* ── Flex Utilities ─────────────────────────────────────────── */
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-4  { gap: 4px; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

/* ── Missing utilities ──────────────────────────────────────── */
.hidden { display: none !important; }
.progress-fill.ok { background: var(--green); }

.mode-badge {
    display: inline-block;
    font-size: 9px; font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    margin-top: 6px;
    letter-spacing: 0.5px;
}
.mode-live { background: var(--red-muted); color: var(--red); }
.mode-testnet { background: var(--accent-muted); color: var(--accent); }

.sidebar-user strong { color: var(--text-primary); }

/* ── Forms ──────────────────────────────────────────────────── */
label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
input, select, textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    transition: border-color var(--transition);
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--border-focus); }
select { cursor: pointer; }

/* ── Enhanced Symbol Cards ──────────────────────────────────── */
.sym-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    transition: box-shadow var(--transition);
    position: relative;
}
.sym-card:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow-glow); }
.sym-header { display: flex; justify-content: space-between; align-items: flex-start; }
.sym-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.sym-price { font-size: 18px; font-weight: 700; font-family: var(--font-mono); margin-top: 2px; }
.sym-sparkline { margin: 6px 0 4px; height: 28px; opacity: .7; }
.sym-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: 11px; }
.sym-field { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid var(--border-subtle); }
.sym-field-k { color: var(--text-muted); }
.sym-field-v { color: var(--text-primary); font-weight: 600; font-family: var(--font-mono); }
.sym-na { color: var(--text-muted); font-style: italic; font-size: 10px; }
.sym-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.sym-tf { font-size: 9px; padding: 1px 5px; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--text-muted); font-weight: 600; }
.sym-quality { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sym-quality-ok { background: var(--green); }
.sym-quality-stale { background: var(--yellow); animation: pulse 1.5s ease-in-out infinite; }
.sym-quality-error { background: var(--red); animation: pulse 1.5s ease-in-out infinite; }

/* ── Sidebar Icons ─────────────────────────────────────────── */
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .6; }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon { opacity: 1; }
.sidebar.compact { width: 56px; }
.sidebar.compact .sidebar-label,
.sidebar.compact .nav-link span:not(.nav-dot):not(.nav-count):not(.nav-icon),
.sidebar.compact .sidebar-brand h1,
.sidebar.compact .sidebar-user,
.sidebar.compact .sidebar-footer .btn { display: none; }
.sidebar.compact .nav-link { justify-content: center; padding: 10px 0; border-left-width: 2px; }
.sidebar.compact + .main { margin-left: 56px; }
.sidebar-toggle { cursor: pointer; padding: 6px; border-radius: var(--radius-sm); margin: 4px 8px; text-align: center; color: var(--text-muted); font-size: 14px; }
.sidebar-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Sentiment Gauge ───────────────────────────────────────── */
.sentiment-gauge { text-align: center; padding: 8px; }
.sentiment-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); line-height: 1.2; }
.sentiment-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.sentiment-fear { color: var(--red); }
.sentiment-greed { color: var(--green); }
.sentiment-neutral { color: var(--yellow); }
.sentiment-extreme-fear { color: var(--red); }
.sentiment-extreme-greed { color: var(--green); }

/* ── AI Advisor Feed ───────────────────────────────────────── */
.advisor-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; }
.advisor-card:hover { border-color: var(--border); }
.advisor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.advisor-type { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-pill); text-transform: uppercase; }
.advisor-type-regime { background: var(--purple-muted); color: var(--purple); }
.advisor-type-tune { background: var(--cyan-muted); color: var(--cyan); }
.advisor-type-review { background: var(--accent-muted); color: var(--accent); }
.advisor-confidence { font-size: 11px; font-weight: 600; }
.advisor-body { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.advisor-details { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-muted); }
.tp-expandable.expanded .advisor-details { display: block; }
.advisor-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.advisor-status-advisory { background: var(--accent-muted); color: var(--accent); }
.advisor-status-accepted { background: var(--green-muted); color: var(--green); }
.advisor-status-rejected { background: var(--red-muted); color: var(--red); }
.advisor-status-applied { background: var(--green-muted); color: var(--green); }
.advisor-status-error { background: var(--red-muted); color: var(--red); }

/* ── Autopilot Enhanced ────────────────────────────────────── */
.ap-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ap-counter { text-align: center; min-width: 50px; }
.ap-counter-val { font-size: 18px; font-weight: 700; font-family: var(--font-mono); }
.ap-counter-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.ap-filter-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.ap-filter-tab { padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--text-muted); cursor: pointer; border: none; }
.ap-filter-tab:hover { color: var(--text-primary); }
.ap-filter-tab.active { background: var(--accent-muted); color: var(--accent); }

/* ── Chart Containers ──────────────────────────────────────── */
.chart-container { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 12px; min-height: 80px; }
.chart-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }

/* ── Tooltips (CSS-driven) ─────────────────────────────────── */
.tp-has-tooltip { position: relative; cursor: help; }
.tp-has-tooltip::after {
    content: attr(data-tp-tooltip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%); padding: 6px 10px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 11px; color: var(--text-secondary);
    white-space: nowrap; pointer-events: none; opacity: 0;
    transition: opacity var(--transition); z-index: 1000;
    box-shadow: var(--shadow-md); max-width: 280px; white-space: normal;
}
.tp-has-tooltip:hover::after { opacity: 1; }
.tp-hover-tooltip {
    position: fixed;
    z-index: 10050;
    max-width: 260px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1.4;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    white-space: normal;
}

/* ── Widget State Overlays ─────────────────────────────────── */
.tp-widget-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: rgba(8,11,16,.85);
    border-radius: inherit; z-index: 5;
}
.tp-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
.tp-overlay-icon { font-size: 18px; color: var(--text-muted); }
.tp-overlay-error { color: var(--red); }
.tp-overlay-msg { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Freshness Indicator ───────────────────────────────────── */
.freshness { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.freshness-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.freshness-stale .freshness-dot { background: var(--yellow); }
.freshness-error .freshness-dot { background: var(--red); }

/* ── Market Intelligence Row ───────────────────────────────── */
.intel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.intel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; }
.intel-card-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }

/* ── Decision Row ──────────────────────────────────────────── */
.decisions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .decisions-row { grid-template-columns: 1fr; } }

/* ── Health Panel ───────────────────────────────────────────── */
.health-panel { border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.health-panel-healthy { background: var(--green-muted); border: 1px solid rgba(34,197,94,.2); }
.health-panel-degraded { background: var(--yellow-muted); border: 1px solid rgba(234,179,8,.2); }
.health-panel-limited { background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.2); }
.health-panel-blocked { background: var(--red-muted); border: 1px solid rgba(239,68,68,.2); }
.health-panel-unknown { background: var(--bg-secondary); border: 1px solid var(--border); }
.health-state-label { font-size: 14px; font-weight: 700; }
.health-detail { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.health-restrictions { margin-top: 6px; font-size: 11px; }
.health-restriction-tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 600; margin-right: 4px; margin-top: 2px; }

/* ── Color semantics (C5) ──────────────────────────────────── */
/* System danger — bright red, animated */
.color-danger { color: #ef4444; }
.color-danger-bg { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); }
/* Bearish market context — muted orange-red, NOT animated */
.color-bearish { color: #f97316; }
.color-bearish-bg { background: rgba(249,115,22,.08); }
/* Bullish market context — muted teal-green */
.color-bullish { color: #22c55e; }
.color-bullish-bg { background: rgba(34,197,94,.08); }
/* Warning / attention — amber */
.color-warn { color: #eab308; }
.color-warn-bg { background: rgba(234,179,8,.08); }
/* Policy restriction — purple */
.color-policy { color: #a855f7; }
.color-policy-bg { background: rgba(168,85,247,.08); }
/* Data problem / stale — grey-blue */
.color-stale { color: #4a5b6e; }
.color-stale-bg { background: rgba(74,91,110,.12); }
/* Info / neutral */
.color-info { color: #3b82f6; }
.color-info-bg { background: rgba(59,130,246,.08); }

/* ── Mode Badge ────────────────────────────────────────────── */
.mode-indicator { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.mode-production { background: var(--red-muted); color: var(--red); border: 1px solid rgba(239,68,68,.2); }
.mode-testnet { background: var(--accent-muted); color: var(--accent); border: 1px solid rgba(59,130,246,.2); }
.mode-sandbox { background: rgba(168,85,247,.1); color: var(--purple); border: 1px solid rgba(168,85,247,.2); }

/* ── Widget State Badges ───────────────────────────────────── */
.widget-state-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-pill); text-transform: uppercase; }
.ws-loading { background: var(--accent-muted); color: var(--accent); }
.ws-stale-badge { background: rgba(234,179,8,.15); color: var(--yellow); }
.ws-degraded-badge { background: rgba(249,115,22,.12); color: var(--orange); }
.ws-error-badge { background: var(--red-muted); color: var(--red); }
.ws-ok-badge { background: var(--green-muted); color: var(--green); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar { display: none; }
    .main { margin-left: 0; }
}


/* Reasoning modal */
.tp-reasoning-modal { position: fixed; inset: 0; z-index: 1200; }
.tp-reasoning-modal.hidden { display: none; }
.tp-reasoning-backdrop { position: absolute; inset: 0; background: rgba(3,7,18,.72); backdrop-filter: blur(2px); }
.tp-reasoning-dialog { position: relative; margin: 4vh auto; width: min(980px, calc(100vw - 32px)); max-height: 92vh; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.tp-reasoning-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); }
.tp-reasoning-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.tp-reasoning-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tp-reasoning-body { padding: 18px; overflow: auto; font-size: 13px; line-height: 1.75; color: var(--text-primary); }


.advisor-card.selected,
.decision-entry.selected {
  border-color: rgba(96,165,250,.55) !important;
  box-shadow: 0 0 0 1px rgba(96,165,250,.18) inset;
}

#advisor-detail-body,
#autopilot-detail-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}