/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #080a12;
    --bg-card: rgba(22, 25, 38, 0.75);
    --bg-panel: rgba(18, 21, 32, 0.8);
    --bg-table-row: rgba(26, 29, 42, 0.6);
    --bg-hover: rgba(40, 44, 64, 0.6);
    --bg-input: rgba(26, 29, 42, 0.8);
    --border: rgba(255, 255, 255, 0.06);
    --border-focus: #4c8dff;
    --text: #e8eaf4;
    --text-dim: #9499b3;
    --text-muted: #5a5f78;
    --accent-blue: #4c8dff;
    --accent-green: #00e68a;
    --accent-red: #ff4d6a;
    --accent-orange: #ff9f43;
    --accent-purple: #a855f7;
    --accent-teal: #14b8a6;
    --accent-pink: #f472b6;
    --accent-yellow: #fbbf24;
    --glow-blue: rgba(76, 141, 255, 0.15);
    --glow-green: rgba(0, 230, 138, 0.15);
    --glow-purple: rgba(168, 85, 247, 0.15);
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --font: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 8px 32px rgba(0,0,0,0.3);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
    --shadow-glow-blue: 0 0 20px rgba(76,141,255,0.2);
    --shadow-glow-green: 0 0 20px rgba(0,230,138,0.2);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

body {
    font-family: var(--font);
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(76,141,255,0.08), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(168,85,247,0.05), transparent);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    padding: 0 24px 40px;
    max-width: 1600px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ─── Header ───────────────────────────────────────────────────── */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    position: sticky;
    top: 0;
    background: rgba(8, 10, 18, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
}
header h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, #fff 0%, #94a3d0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subtitle { color: var(--text-muted); font-size: 0.8rem; margin-left: 12px; font-weight: 500; letter-spacing: 0.02em; }
.header-right { display: flex; align-items: center; gap: 10px; }
.last-updated { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }

/* ─── Tab Navigation ───────────────────────────────────────────── */
.tab-nav {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    margin-bottom: 24px;
    border: 1px solid var(--glass-border);
    position: sticky;
    top: 62px;
    z-index: 99;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-sm);
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex: 1;
    justify-content: center;
    position: relative;
}

.tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--accent-blue), #3b6fdf);
    color: #fff;
    box-shadow: 0 2px 12px rgba(76, 141, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.tab-icon { font-size: 0.95rem; }
.tab-label { letter-spacing: -0.01em; }

/* Tab content visibility */
.tab-content {
    display: none;
    animation: tabFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-content.active {
    display: block;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.998); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.badge-paper { background: linear-gradient(135deg, var(--accent-orange), #e68a30); color: #000; }
.badge-live { background: linear-gradient(135deg, var(--accent-red), #cc3050); color: #fff; animation: pulse-live 2s infinite; box-shadow: 0 0 12px rgba(255,77,106,0.4); }
.badge-ok { background: linear-gradient(135deg, var(--accent-green), #00b875); color: #000; }
.badge-danger { background: linear-gradient(135deg, var(--accent-red), #cc3050); color: #fff; }

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ─── Card Grid ────────────────────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.card {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--border);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255,255,255,0.1);
}

.card.accent-blue   { border-left-color: var(--accent-blue); }
.card.accent-green  { border-left-color: var(--accent-green); }
.card.accent-purple { border-left-color: var(--accent-purple); }
.card.accent-orange { border-left-color: var(--accent-orange); }
.card.accent-teal   { border-left-color: var(--accent-teal); }
.card.accent-pink   { border-left-color: var(--accent-pink); }

.card.accent-blue:hover   { box-shadow: 0 8px 32px rgba(76,141,255,0.15); }
.card.accent-green:hover  { box-shadow: 0 8px 32px rgba(0,214,143,0.15); }
.card.accent-purple:hover { box-shadow: 0 8px 32px rgba(168,85,247,0.15); }
.card.accent-orange:hover { box-shadow: 0 8px 32px rgba(255,159,67,0.15); }

.card-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.card-value { font-size: 1.8rem; font-weight: 700; margin: 6px 0; font-family: var(--font-mono); letter-spacing: -0.02em; background: linear-gradient(135deg, var(--text), var(--text-dim)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.card-sub { font-size: 0.78rem; color: var(--text-muted); }

/* ─── Charts ───────────────────────────────────────────────────── */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 16px;
    margin-bottom: 24px;
}
.charts-row-single {
    grid-template-columns: 1fr;
}
.chart-container {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--glass-border);
    transition: var(--transition-normal);
}
.chart-container:hover {
    border-color: rgba(255,255,255,0.1);
    box-shadow: var(--shadow-md);
}
.chart-container h3 { font-size: 0.88rem; margin-bottom: 12px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; }
.chart-container canvas { width: 100% !important; max-height: 240px; }
.chart-wide canvas { max-height: 280px; }

/* ─── Panel ────────────────────────────────────────────────────── */
.panel {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--glass-border);
    transition: var(--transition-normal);
}
.panel:hover {
    border-color: rgba(255,255,255,0.08);
}
.panel h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.panel-header h2 { margin-bottom: 0; }
.panel-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Search Input ─────────────────────────────────────────────── */
.search-input {
    background: rgba(15,17,23,0.6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.78rem;
    padding: 8px 14px;
    width: 220px;
    transition: var(--transition-normal);
    backdrop-filter: blur(8px);
}
.search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(76,141,255,0.12), var(--shadow-sm);
}
.search-input::placeholder { color: var(--text-muted); }

/* ─── Risk Monitor ─────────────────────────────────────────────── */
.risk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }

.risk-item { background: var(--glass); backdrop-filter: blur(8px); border-radius: var(--radius-sm); padding: 16px; border: 1px solid var(--glass-border); transition: var(--transition-normal); }
.risk-item:hover { border-color: rgba(255,255,255,0.08); }
.risk-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.risk-bar-container { background: rgba(37,40,56,0.6); border-radius: 6px; height: 10px; overflow: hidden; margin-bottom: 6px; }
.risk-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-green), #33e8ad); transition: width 0.6s ease, background 0.3s; box-shadow: 0 0 8px rgba(0,214,143,0.3); }
.risk-bar.warning { background: linear-gradient(90deg, var(--accent-orange), #ffb96e); box-shadow: 0 0 8px rgba(255,159,67,0.3); }
.risk-bar.danger { background: linear-gradient(90deg, var(--accent-red), #ff7088); box-shadow: 0 0 8px rgba(255,77,106,0.3); }
.bar-inverted { background: linear-gradient(90deg, var(--accent-blue), #7badff); box-shadow: 0 0 8px rgba(76,141,255,0.3); }
.risk-values { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); }

.risk-params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.risk-param {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.8rem;
}
.risk-param .rp-label { color: var(--text-dim); font-size: 0.7rem; text-transform: uppercase; }
.risk-param .rp-value { font-family: var(--font-mono); font-weight: 600; margin-top: 2px; }

/* ─── Tables ───────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
thead th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 12px 14px;
    border-bottom: 1px solid var(--glass-border);
    font-weight: 700;
    white-space: nowrap;
    background: rgba(15,17,23,0.3);
}
tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
}
tbody tr {
    transition: var(--transition-fast);
}
tbody tr:hover {
    background: rgba(76,141,255,0.04);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 12px !important;
    font-style: italic;
    font-size: 0.85rem;
}

/* ─── Decision/Status Pills ────────────────────────────────────── */
.pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pill-trade  { background: rgba(0,214,143,0.15); color: var(--accent-green); }
.pill-no-trade { background: rgba(255,77,106,0.12); color: var(--accent-red); }
.pill-filled { background: rgba(76,141,255,0.15); color: var(--accent-blue); }
.pill-dry    { background: rgba(255,159,67,0.15); color: var(--accent-orange); }
.pill-buy    { background: rgba(0,214,143,0.15); color: var(--accent-green); }
.pill-sell   { background: rgba(255,77,106,0.12); color: var(--accent-red); }

.pnl-positive { color: var(--accent-green); }
.pnl-negative { color: var(--accent-red); }
.pnl-zero    { color: var(--text-muted); }

/* ─── Trade History Badges & Rows ─────────────────────────────── */
.trade-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.7rem; font-weight: 700;
    padding: 3px 10px; border-radius: 12px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.trade-active   { background: rgba(0,214,143,0.15); color: var(--accent-green); border: 1px solid rgba(0,214,143,0.25); }
.trade-tp       { background: rgba(0,214,143,0.12); color: #00d68f; border: 1px solid rgba(0,214,143,0.2); }
.trade-sl       { background: rgba(255,77,106,0.12); color: var(--accent-red); border: 1px solid rgba(255,77,106,0.2); }
.trade-resolved { background: rgba(76,141,255,0.12); color: var(--accent-blue); border: 1px solid rgba(76,141,255,0.2); }
.trade-time     { background: rgba(255,159,67,0.12); color: var(--accent-orange); border: 1px solid rgba(255,159,67,0.2); }
.trade-closed   { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); }
.trade-entry    { background: rgba(76,141,255,0.08); color: var(--accent-blue); border: 1px solid rgba(76,141,255,0.15); }

.trade-row-active {
    background: rgba(0,214,143,0.03) !important;
    border-left: 3px solid var(--accent-green);
}
.trade-row-active:hover {
    background: rgba(0,214,143,0.06) !important;
}

/* TP/SL Proximity bars */
.prox-wrap {
    display: flex; gap: 2px; margin-top: 3px; height: 3px; border-radius: 2px;
    overflow: hidden; background: rgba(255,255,255,0.04);
}
.prox-bar { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.prox-sl  { background: linear-gradient(90deg, rgba(255,77,106,0.4), rgba(255,77,106,0.9)); }
.prox-tp  { background: linear-gradient(90deg, rgba(0,214,143,0.4), rgba(0,214,143,0.9)); }

/* Trade summary items */
#trades-summary .summary-item {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.78rem;
}

/* ─── Live PNL Styling ─────────────────────────────────────────── */
.pnl-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
}
.pnl-stat { display: flex; align-items: center; gap: 4px; }
.pnl-stat strong { font-weight: 700; }

.live-price { font-variant-numeric: tabular-nums; }
.price-arrow { font-size: 0.7rem; margin-left: 3px; font-weight: 700; }
.price-up   { color: var(--accent-green); }
.price-down { color: var(--accent-red); }
.price-flat { color: var(--text-muted); }

.pnl-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.pnl-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.pnl-badge-pos {
    background: rgba(0,214,143,0.12);
    color: var(--accent-green);
}
.pnl-badge-neg {
    background: rgba(255,77,106,0.10);
    color: var(--accent-red);
}
.pnl-badge-flat {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}

.position-row { transition: background 0.3s ease; }
.position-row:hover { background: rgba(255,255,255,0.04); }
.position-row.pnl-positive { border-left: 3px solid var(--accent-green); }
.position-row.pnl-negative { border-left: 3px solid var(--accent-red); }
.position-row.pnl-zero     { border-left: 3px solid var(--border); }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-danger { background: linear-gradient(135deg, var(--accent-red), #cc3050); color: #fff; }
.btn-danger:hover { box-shadow: 0 4px 20px rgba(255,77,106,0.3); }
.btn-ok     { background: linear-gradient(135deg, var(--accent-green), #00b875); color: #000; }
.btn-ok:hover { box-shadow: 0 4px 20px rgba(0,214,143,0.3); }
.btn-save   { background: linear-gradient(135deg, var(--accent-blue), #3570d9); color: #fff; }
.btn-save:hover { box-shadow: 0 4px 20px rgba(76,141,255,0.3); }
.btn-muted  { background: var(--glass); color: var(--text-dim); border: 1px solid var(--glass-border); backdrop-filter: blur(8px); }
.btn-muted:hover { border-color: rgba(255,255,255,0.15); color: var(--text); }
.btn-export { background: var(--glass); color: var(--accent-teal); border: 1px solid var(--glass-border); font-size: 0.7rem; padding: 6px 12px; backdrop-filter: blur(8px); }
.btn-export:hover { border-color: var(--accent-teal); box-shadow: 0 4px 16px rgba(0,210,211,0.15); }
.btn-sm { font-size: 0.68rem; padding: 5px 12px; }

/* ─── Toast Notifications ──────────────────────────────────────── */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%) scale(0.95);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
}
.toast-show {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.toast-hide {
    opacity: 0;
    transform: translateX(100%) scale(0.95);
}
.toast-icon { font-size: 1.2rem; }
.toast-msg { flex: 1; }

.toast-success { border-left: 4px solid var(--accent-green); box-shadow: var(--shadow-lg), inset 0 0 20px rgba(0,214,143,0.03); }
.toast-error   { border-left: 4px solid var(--accent-red); box-shadow: var(--shadow-lg), inset 0 0 20px rgba(255,77,106,0.03); }
.toast-info    { border-left: 4px solid var(--accent-blue); box-shadow: var(--shadow-lg), inset 0 0 20px rgba(76,141,255,0.03); }
.toast-warning { border-left: 4px solid var(--accent-orange); box-shadow: var(--shadow-lg), inset 0 0 20px rgba(255,159,67,0.03); }

/* ─── Confirmation Modal ──────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: modalOverlayIn 0.25s ease-out;
}
@keyframes modalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-box {
    background: var(--glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    animation: modalBoxIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalBoxIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-box h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.modal-box p {
    color: var(--text-dim);
    font-size: 0.88rem;
    margin-bottom: 24px;
    line-height: 1.5;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ─── Position Detail Modal ────────────────────────────────────── */
.pos-detail-box {
    background: var(--glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    max-width: 720px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pos-detail-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border);
}
.pos-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.pos-detail-title-row h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    flex: 1;
}
.pos-detail-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}
.pos-detail-close:hover { color: var(--accent-red); }
.pos-detail-badges {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.pos-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pos-detail-badge.badge-direction-buy  { background: rgba(0,214,143,0.15); color: var(--accent-green); }
.pos-detail-badge.badge-direction-sell { background: rgba(255,77,106,0.15); color: var(--accent-red); }
.pos-detail-badge.badge-type    { background: rgba(168,85,247,0.15); color: var(--accent-purple); }
.pos-detail-badge.badge-cat     { background: rgba(76,141,255,0.15); color: var(--accent-blue); }
.pos-detail-body {
    padding: 20px 28px;
}
.pos-detail-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--text-dim);
}
.pos-detail-footer {
    padding: 14px 28px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pos-detail-footer a {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.pos-detail-footer a:hover { color: #6fa8ff; text-decoration: underline; }
.pos-detail-footer .pos-detail-id {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    white-space: nowrap;
}

/* Section groups inside detail body */
.pd-section {
    margin-bottom: 20px;
}
.pd-section:last-child { margin-bottom: 0; }
.pd-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.pd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.pd-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pd-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pd-value {
    font-size: 0.92rem;
    font-weight: 600;
    font-family: var(--font-mono);
}
.pd-value.big {
    font-size: 1.15rem;
}

/* Proximity / Progress bars */
.pd-bar-group {
    margin-bottom: 14px;
}
.pd-bar-group:last-child { margin-bottom: 0; }
.pd-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.pd-bar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
}
.pd-bar-value {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-mono);
}
.pd-bar-track {
    height: 8px;
    background: var(--bg-table-row);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.pd-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.pd-bar-fill.bar-red    { background: linear-gradient(90deg, var(--accent-red), #ff7088); }
.pd-bar-fill.bar-green  { background: linear-gradient(90deg, var(--accent-green), #33e8ad); }
.pd-bar-fill.bar-orange { background: linear-gradient(90deg, var(--accent-orange), #ffb96e); }
.pd-bar-fill.bar-blue   { background: linear-gradient(90deg, var(--accent-blue), #7badff); }
.pd-bar-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* Reasoning / evidence text */
.pd-reasoning {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-dim);
    background: var(--bg-table-row);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    max-height: 160px;
    overflow-y: auto;
    margin-top: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Clickable position rows */
.position-row { cursor: pointer; }
.position-row:hover { background: var(--bg-hover) !important; }

/* Responsive detail modal */
@media (max-width: 600px) {
    .pos-detail-box { width: 100%; max-width: 100%; border-radius: 0; max-height: 100vh; }
    .pd-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Trade Detail Modal ───────────────────────────────────────── */
.trade-detail-box {
    background: var(--glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    max-width: 780px;
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.td-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border);
}
.td-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.td-title-row h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    flex: 1;
}
.td-badges {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.td-body {
    padding: 20px 28px;
}
.td-footer {
    padding: 14px 28px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.td-footer a {
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.td-footer a:hover { color: #6fa8ff; text-decoration: underline; }

/* Clickable trade rows */
.trade-row-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.trade-row-clickable:hover {
    background: var(--bg-hover) !important;
}

/* Outcome Banner (top of closed trade detail) */
.td-outcome-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.td-outcome-win {
    background: linear-gradient(135deg, rgba(0,214,143,0.12), rgba(0,214,143,0.04));
    border: 1px solid rgba(0,214,143,0.2);
}
.td-outcome-loss {
    background: linear-gradient(135deg, rgba(255,77,106,0.12), rgba(255,77,106,0.04));
    border: 1px solid rgba(255,77,106,0.2);
}
.td-outcome-icon {
    font-size: 2rem;
    line-height: 1;
}
.td-outcome-details {
    flex: 1;
}
.td-outcome-label {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 2px;
}
.td-outcome-win .td-outcome-label { color: var(--accent-green); }
.td-outcome-loss .td-outcome-label { color: var(--accent-red); }
.td-outcome-pnl {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: var(--font-mono);
}
.td-outcome-win .td-outcome-pnl { color: var(--accent-green); }
.td-outcome-loss .td-outcome-pnl { color: var(--accent-red); }
.td-outcome-duration {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: right;
}

/* Trade Timeline */
.td-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.td-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
}
.td-timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}
.td-tl-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border-radius: 50%;
    background: var(--bg-table-row);
    border: 2px solid var(--border);
    z-index: 1;
    flex-shrink: 0;
}
.td-tl-buy .td-tl-icon  { border-color: rgba(0,214,143,0.4); }
.td-tl-sell .td-tl-icon { border-color: rgba(255,77,106,0.4); }
.td-tl-content { flex: 1; min-width: 0; }
.td-tl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
}
.td-tl-side {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-bright);
}
.td-tl-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
    font-family: var(--font-mono);
}
.td-tl-details {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.td-tl-status {
    margin-top: 4px;
    display: flex;
    align-items: center;
}

/* Decision Trail */
.td-decisions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.td-decision-item {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    align-items: flex-start;
}
.td-decision-item:hover {
    background: rgba(255,255,255,0.04);
}
.td-dec-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.td-dec-content { flex: 1; min-width: 0; }
.td-dec-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.td-dec-stage {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.td-dec-time {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-left: auto;
    font-family: var(--font-mono);
}
.td-dec-details {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 4px;
    line-height: 1.4;
    word-break: break-word;
}
.td-dec-hash {
    flex-shrink: 0;
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 600px) {
    .trade-detail-box { width: 100%; max-width: 100%; border-radius: 0; max-height: 100vh; }
    .td-outcome-banner { flex-direction: column; text-align: center; gap: 8px; }
    .td-outcome-duration { text-align: center; }
}

/* ─── Config Editor ────────────────────────────────────────────── */
.config-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.config-hint strong { color: var(--accent-blue); }

/* Config Tabs */
.config-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.config-tab {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.config-tab:hover {
    border-color: var(--accent-blue);
    color: var(--text);
}
.config-tab-active {
    background: rgba(76,141,255,0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}
.config-tab-dirty {
    position: relative;
}
.config-tab-dirty::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-orange);
}

/* Config Editor Panel */
.config-editor {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--glass-border);
}
.config-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.config-section-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-blue);
}
.config-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.config-field-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(42, 45, 58, 0.3);
    gap: 16px;
}
.config-field-row:last-child { border-bottom: none; }
.config-field-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}
.config-field-input {
    display: flex;
    align-items: center;
}

/* Config Inputs */
.config-input {
    background: rgba(15,17,23,0.6);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 8px 14px;
    width: 180px;
    transition: var(--transition-normal);
}
.config-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(76,141,255,0.12);
}
.config-input-wide { width: 100%; max-width: 400px; }
.config-textarea {
    width: 100%;
    max-width: 400px;
    font-size: 0.75rem;
    resize: vertical;
    min-height: 60px;
}
input[type="number"].config-input { width: 120px; }

/* Toggle Switch */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.toggle-switch input { display: none; }
.toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--bg-table-row);
    border-radius: 11px;
    border: 1px solid var(--border);
    transition: background 0.3s;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.3s, background 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(0,214,143,0.2);
    border-color: var(--accent-green);
}
.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(18px);
    background: var(--accent-green);
}
.toggle-label {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-dim);
}

/* Old config grid (kept for backwards compat) */
.config-grid {
    display: grid;
    gap: 16px;
}
.config-section {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.config-section h4 {
    font-size: 0.82rem;
    color: var(--accent-blue);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.config-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(42, 45, 58, 0.3);
}
.config-row:last-child { border-bottom: none; }
.config-key { color: var(--text-dim); }
.config-val { font-family: var(--font-mono); font-weight: 600; }

/* ─── Footer ───────────────────────────────────────────────────── */
footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    border-top: 1px solid var(--glass-border);
    margin-top: 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   DECISION INTELLIGENCE TAB
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.di-panel-main { padding: 0 !important; }
.di-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
    gap: 10px;
}
.di-toolbar-left { display: flex; align-items: center; gap: 12px; }
.di-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.di-title { margin: 0; font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.di-pulse {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--accent-green); animation: whalePulse 2s ease-in-out infinite;
}
.di-stat { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.di-divider { color: rgba(255,255,255,0.1); }
.di-btn-export {
    background: rgba(76,141,255,0.08); border: 1px solid rgba(76,141,255,0.2);
    color: var(--accent-blue); padding: 6px 14px; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.di-btn-export:hover { background: rgba(76,141,255,0.15); }

/* ── KPI Row ── */
.di-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-kpi-card {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.2s;
}
.di-kpi-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.di-kpi-icon { font-size: 1.1rem; margin-bottom: 4px; }
.di-kpi-val { font-size: 1.3rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.di-kpi-label { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; text-align: center; }
.di-kpi-green .di-kpi-val { color: var(--accent-green); }
.di-kpi-blue .di-kpi-val { color: var(--accent-blue); }
.di-kpi-purple .di-kpi-val { color: #a855f7; }
.di-kpi-teal .di-kpi-val { color: #06b6d4; }
.di-kpi-orange .di-kpi-val { color: #f59e0b; }
.di-kpi-pink .di-kpi-val { color: #ec4899; }

/* ── Charts Row ── */
.di-charts-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-chart-card {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px 14px;
}
.di-chart-card h3 { margin: 0 0 8px 0; font-size: 0.8rem; color: var(--text-muted); }
.di-chart-card canvas { max-height: 180px; }

/* ── Timeline Strip ── */
.di-timeline-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-timeline-section h3 { margin: 0 0 10px 0; font-size: 0.85rem; }
.di-timeline-strip {
    display: flex; gap: 3px; overflow-x: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
    padding-bottom: 4px;
}
.di-tl-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; height: 52px; border-radius: 6px;
    font-family: 'JetBrains Mono', monospace; transition: all 0.15s;
    cursor: default;
}
.di-tl-0 { background: rgba(255,255,255,0.02); }
.di-tl-1 { background: rgba(76,141,255,0.1); }
.di-tl-2 { background: rgba(76,141,255,0.2); }
.di-tl-3 { background: rgba(76,141,255,0.35); }
.di-tl-4 { background: rgba(76,141,255,0.5); }
.di-tl-count { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.di-tl-hour { font-size: 0.55rem; color: var(--text-dim); margin-top: 2px; }

/* ── Pipeline Funnel ── */
.di-funnel-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-funnel-section h3 { margin: 0 0 10px 0; font-size: 0.85rem; }
.di-funnel { display: flex; flex-direction: column; gap: 2px; }
.di-funnel-stage { display: flex; align-items: center; gap: 10px; }
.di-funnel-label {
    min-width: 150px; font-size: 0.75rem; font-weight: 600;
    color: var(--text-muted); white-space: nowrap;
}
.di-funnel-bar-wrap {
    flex: 1; display: flex; gap: 2px; height: 28px;
    border-radius: 6px; overflow: hidden;
}
.di-funnel-bar {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 600; color: #fff;
    transition: width 0.4s ease;
    min-width: 0;
}
.di-funnel-bar span { white-space: nowrap; padding: 0 6px; }
.di-funnel-passed { background: rgba(0,230,138,0.45); }
.di-funnel-blocked { background: rgba(255,77,106,0.45); }
.di-funnel-skipped { background: rgba(148,153,179,0.3); }
.di-funnel-rate {
    min-width: 40px; text-align: right;
    font-size: 0.72rem; font-weight: 700; font-family: 'JetBrains Mono', monospace;
    color: var(--accent-green);
}
.di-funnel-arrow {
    text-align: center; color: rgba(255,255,255,0.15);
    font-size: 0.7rem; line-height: 1; padding: 2px 0;
    margin-left: 150px;
}

/* ── Filter Bar ── */
.di-filter-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
    background: rgba(255,255,255,0.01);
}
.di-search {
    flex: 1; min-width: 180px; max-width: 300px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 8px 12px; color: var(--text);
    font-size: 0.78rem; outline: none; transition: border-color 0.2s;
}
.di-search:focus { border-color: var(--accent-blue); }
.di-search::placeholder { color: var(--text-dim); }
.di-select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 8px 10px; color: var(--text);
    font-size: 0.75rem; outline: none; cursor: pointer;
    transition: border-color 0.2s;
}
.di-select:focus { border-color: var(--accent-blue); }
.di-btn {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 8px 14px; color: var(--text);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.di-btn:hover { background: rgba(255,255,255,0.08); }
.di-filter-count {
    font-size: 0.72rem; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}

.di-filter-count {
    font-size: 0.72rem; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}

/* ── DI: Section Headers ── */
.di-section-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.di-section-header h3 { margin: 0; }
.di-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 22px; padding: 0 8px;
    background: rgba(99,102,241,0.18); color: #a5b4fc;
    border-radius: 12px; font-size: 0.7rem; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.di-badge-warn {
    background: rgba(251,191,36,0.18); color: #fbbf24;
}

/* ── DI: Auto Insights ── */
.di-insights-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-insights-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}
.di-insight-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 14px 16px;
    font-size: 0.82rem; color: var(--text);
    line-height: 1.5; transition: all 0.15s;
}
.di-insight-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(99,102,241,0.25);
    transform: translateY(-1px);
}

/* ── DI: Score Trend Chart ── */
.di-score-trend-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-score-trend-section h3 { margin-bottom: 10px; }
.di-score-trend-section .di-chart-wrap {
    background: rgba(255,255,255,0.02); border-radius: 12px;
    padding: 16px; border: 1px solid rgba(255,255,255,0.05);
}

/* ── DI: Two-Column Row ── */
.di-two-col-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-calibration-section,
.di-category-rank-section {
    padding: 16px 20px;
}
.di-calibration-section {
    border-right: 1px solid rgba(255,255,255,0.04);
}
.di-calibration-section h3,
.di-category-rank-section h3 { margin-bottom: 12px; }

/* ── DI: Calibration Matrix ── */
.di-cal-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 6px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s;
}
.di-cal-row:hover { background: rgba(255,255,255,0.05); }
.di-cal-level {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    min-width: 70px; letter-spacing: 0.03em;
}
.di-cal-level.high { color: #34d399; }
.di-cal-level.medium { color: #fbbf24; }
.di-cal-level.low { color: #f87171; }
.di-cal-bar-wrap {
    flex: 1; height: 20px; background: rgba(255,255,255,0.06);
    border-radius: 10px; overflow: hidden; position: relative;
}
.di-cal-bar-fill {
    height: 100%; border-radius: 10px;
    transition: width 0.6s ease;
}
.di-cal-bar-fill.high { background: linear-gradient(90deg, #34d399, #10b981); }
.di-cal-bar-fill.medium { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.di-cal-bar-fill.low { background: linear-gradient(90deg, #f87171, #ef4444); }
.di-cal-pct {
    font-size: 0.78rem; font-weight: 700; min-width: 48px; text-align: right;
    font-family: 'JetBrains Mono', monospace;
}
.di-cal-stats {
    font-size: 0.68rem; color: var(--text-muted); min-width: 100px; text-align: right;
    font-family: 'JetBrains Mono', monospace;
}

/* ── DI: Category Ranking ── */
.di-cat-rank-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 6px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s;
}
.di-cat-rank-item:hover { background: rgba(255,255,255,0.05); }
.di-cat-medal {
    font-size: 1.1rem; min-width: 28px; text-align: center;
}
.di-cat-name {
    font-size: 0.8rem; font-weight: 600; color: var(--text);
    min-width: 120px; flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.di-cat-bars {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
}
.di-cat-bar-row {
    display: flex; align-items: center; gap: 6px; font-size: 0.65rem;
    color: var(--text-muted);
}
.di-cat-bar-label { min-width: 32px; text-align: right; }
.di-cat-bar-track {
    flex: 1; height: 6px; background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden;
}
.di-cat-bar-edge {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #818cf8, #6366f1);
}
.di-cat-bar-score {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #34d399, #10b981);
}
.di-cat-bar-val {
    min-width: 36px; font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem; font-weight: 600;
}
.di-cat-stats-mini {
    font-size: 0.65rem; color: var(--text-muted); min-width: 80px;
    text-align: right; font-family: 'JetBrains Mono', monospace;
}

/* ── DI: Outcomes ── */
.di-outcomes-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-outcomes-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.di-outcome-card {
    background: rgba(255,255,255,0.03); border-radius: 10px;
    padding: 14px 16px; border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.15s;
}
.di-outcome-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-1px);
}
.di-outcome-card.win { border-left: 3px solid #34d399; }
.di-outcome-card.loss { border-left: 3px solid #f87171; }
.di-outcome-card.pending { border-left: 3px solid #fbbf24; }
.di-outcome-q {
    font-size: 0.78rem; font-weight: 600; color: var(--text);
    margin-bottom: 8px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.di-outcome-meta {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.di-outcome-pnl {
    font-size: 0.82rem; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
.di-outcome-pnl.pos { color: #34d399; }
.di-outcome-pnl.neg { color: #f87171; }
.di-outcome-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 6px;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em;
}
.di-outcome-tag.win { background: rgba(52,211,153,0.15); color: #34d399; }
.di-outcome-tag.loss { background: rgba(248,113,113,0.15); color: #f87171; }
.di-outcome-tag.pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
.di-outcome-date {
    font-size: 0.65rem; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* ── DI: Missed Opportunities ── */
.di-missed-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-missed-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}
.di-missed-card {
    background: rgba(251,191,36,0.04); border: 1px solid rgba(251,191,36,0.15);
    border-radius: 10px; padding: 14px 16px;
    border-left: 3px solid #fbbf24;
    transition: all 0.15s;
}
.di-missed-card:hover {
    background: rgba(251,191,36,0.08);
    transform: translateY(-1px);
}
.di-missed-q {
    font-size: 0.78rem; font-weight: 600; color: var(--text);
    margin-bottom: 8px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.di-missed-stats {
    display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.72rem;
}
.di-missed-stat {
    display: flex; flex-direction: column; gap: 2px;
}
.di-missed-stat-label {
    font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.05em;
}
.di-missed-stat-val {
    font-weight: 700; font-family: 'JetBrains Mono', monospace;
    color: #fbbf24;
}

/* ── DI: Responsive ── */
@media (max-width: 900px) {
    .di-two-col-row { grid-template-columns: 1fr; }
    .di-calibration-section { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .di-insights-grid { grid-template-columns: 1fr; }
    .di-outcomes-grid { grid-template-columns: 1fr; }
    .di-missed-grid { grid-template-columns: 1fr; }
}

/* ── DI: Calibration Card Layout ── */
.di-cal-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
    transition: all 0.15s;
}
.di-cal-card:hover { background: rgba(255,255,255,0.05); }
.di-cal-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.di-cal-icon { font-size: 1rem; }
.di-cal-level { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.di-cal-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px;
}
.di-cal-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px; background: rgba(255,255,255,0.03); border-radius: 6px;
}
.di-cal-stat-val {
    font-size: 0.85rem; font-weight: 700; color: var(--text);
    font-family: 'JetBrains Mono', monospace;
}
.di-cal-stat-lbl {
    font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em;
}
.di-cal-accuracy {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,0.03);
}
.di-cal-accuracy.di-cal-good { border-left: 3px solid #00e68a; }
.di-cal-accuracy.di-cal-mid { border-left: 3px solid #f59e0b; }
.di-cal-accuracy.di-cal-bad { border-left: 3px solid #ff4d6a; }
.di-cal-accuracy.di-cal-na { border-left: 3px solid #5a5f78; }
.di-cal-acc-label { font-size: 0.7rem; color: var(--text-muted); }
.di-cal-acc-val {
    font-size: 0.85rem; font-weight: 700;
    font-family: 'JetBrains Mono', monospace; color: var(--text);
}
.di-cal-outcomes {
    display: flex; gap: 12px; font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
}
.di-cal-win { color: #34d399; }
.di-cal-loss { color: #f87171; }

/* ── DI: Category Rank Rows ── */
.di-catrank-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 6px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s;
}
.di-catrank-row:hover { background: rgba(255,255,255,0.05); }
.di-catrank-rank {
    font-size: 1.1rem; min-width: 30px; text-align: center;
}
.di-catrank-name {
    font-size: 0.78rem; font-weight: 600; color: var(--text);
    min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.di-catrank-stats {
    display: flex; gap: 8px; flex: 1; flex-wrap: wrap;
}
.di-catrank-stat {
    font-size: 0.65rem; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 6px; background: rgba(255,255,255,0.04);
    border-radius: 4px;
}
.di-catrank-bar-wrap {
    width: 80px; height: 8px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden; position: relative;
}
.di-catrank-bar {
    height: 100%; border-radius: 4px; transition: width 0.6s ease;
}
.di-catrank-score {
    font-size: 0.7rem; font-weight: 700; min-width: 28px; text-align: right;
    font-family: 'JetBrains Mono', monospace; color: var(--text);
}

/* ── DI: Missed Opportunity Cards ── */
.di-mo-card {
    background: rgba(251,191,36,0.04); border: 1px solid rgba(251,191,36,0.12);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 8px;
    border-left: 3px solid #fbbf24; transition: all 0.15s;
}
.di-mo-card:hover { background: rgba(251,191,36,0.08); transform: translateY(-1px); }
.di-mo-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.di-mo-edge {
    font-size: 0.82rem; font-weight: 700; color: #fbbf24;
    font-family: 'JetBrains Mono', monospace;
}
.di-mo-grade {
    font-size: 0.72rem; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.06);
}
.di-mo-cat { font-size: 0.7rem; color: var(--text-muted); }
.di-mo-time { font-size: 0.65rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-left: auto; }
.di-mo-question {
    font-size: 0.78rem; font-weight: 600; color: var(--text);
    margin-bottom: 6px; line-height: 1.35;
}
.di-mo-prob {
    font-size: 0.7rem; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace; margin-bottom: 6px;
}
.di-mo-reasons { display: flex; flex-direction: column; gap: 2px; }
.di-mo-reason {
    font-size: 0.65rem; color: #f87171; line-height: 1.4;
}

/* ── DI: Insight Card Detail ── */
.di-insight-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.di-insight-icon { font-size: 1.1rem; }
.di-insight-title { font-size: 0.82rem; font-weight: 700; color: var(--text); flex: 1; }
.di-insight-type {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
}
.di-insight-message { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

/* ── DI: Research ROI ── */
.di-research-roi-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.di-research-roi-section h3 { margin-bottom: 12px; }
.di-roi-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; margin-bottom: 6px;
    background: rgba(255,255,255,0.03); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.15s;
}
.di-roi-row:hover { background: rgba(255,255,255,0.05); }
.di-roi-tier {
    display: flex; align-items: center; gap: 6px; min-width: 160px;
}
.di-roi-icon { font-size: 1rem; }
.di-roi-label { font-size: 0.78rem; font-weight: 700; min-width: 60px; }
.di-roi-count {
    font-size: 0.65rem; color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}
.di-roi-bar-wrap {
    flex: 1; height: 20px; background: rgba(255,255,255,0.06);
    border-radius: 10px; overflow: hidden; position: relative;
    display: flex; align-items: center;
}
.di-roi-bar {
    height: 100%; border-radius: 10px; transition: width 0.6s ease;
    min-width: 4px;
}
.di-roi-val {
    position: absolute; right: 8px; font-size: 0.68rem; font-weight: 600;
    color: var(--text); font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.di-roi-max {
    font-size: 0.65rem; color: var(--text-muted); min-width: 80px;
    text-align: right; font-family: 'JetBrains Mono', monospace;
}

/* ── Decision Cards Container (inside DI tab) ── */
#decision-log-container { padding: 12px 20px; }

/* ── Responsive ── */
@media (max-width: 1400px) {
    .di-charts-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .di-kpi-row { grid-template-columns: repeat(4, 1fr); }
    .di-charts-row { grid-template-columns: 1fr; }
    .di-funnel-label { min-width: 100px; font-size: 0.68rem; }
    .di-funnel-arrow { margin-left: 100px; }
}
@media (max-width: 600px) {
    .di-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .di-filter-bar { flex-direction: column; align-items: stretch; }
    .di-search { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   DECISION INTELLIGENCE LOG (CARD STYLES)
   ═══════════════════════════════════════════════════════════════ */

.decision-card {
    background: var(--glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    margin-bottom: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}
.decision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(76,141,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.decision-card:hover {
    border-color: rgba(76,141,255,0.35);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(76,141,255,0.08);
    transform: translateY(-1px);
}
.decision-card:hover::before { opacity: 1; }
.decision-card.dc-trade { border-left: 4px solid var(--accent-green); }
.decision-card.dc-no-trade { border-left: 4px solid var(--accent-red); }
.decision-card.dc-skip { border-left: 4px solid var(--accent-orange); }

/* ── Card Header (collapsed) ── */
.dc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    gap: 12px;
    user-select: none;
    transition: background 0.2s;
}
.dc-header:hover { background: rgba(37, 40, 56, 0.6); }

.dc-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.dc-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Grade Badge (collapsed) */
.dc-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.dc-grade-badge.grade-a { background: linear-gradient(135deg, rgba(0,214,143,0.2), rgba(0,214,143,0.08)); color: #00d68f; border: 1px solid rgba(0,214,143,0.3); }
.dc-grade-badge.grade-b { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.08)); color: #3b82f6; border: 1px solid rgba(59,130,246,0.3); }
.dc-grade-badge.grade-c { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.08)); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.dc-grade-badge.grade-d { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.06)); color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }
.dc-grade-badge.grade-f { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.06)); color: #8b5cf6; border: 1px solid rgba(139,92,246,0.25); }

.dc-decision-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.dc-decision-badge.dc-trade { background: linear-gradient(135deg, rgba(0,214,143,0.18), rgba(0,214,143,0.08)); color: var(--accent-green); }
.dc-decision-badge.dc-no-trade { background: linear-gradient(135deg, rgba(255,77,106,0.15), rgba(255,77,106,0.06)); color: var(--accent-red); }
.dc-decision-badge.dc-skip { background: linear-gradient(135deg, rgba(255,159,67,0.18), rgba(255,159,67,0.08)); color: var(--accent-orange); }

.dc-question {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Category Badge */
.dc-category-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(168,85,247,0.12);
    color: var(--accent-purple);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.dc-type-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(76,141,255,0.12);
    color: var(--accent-blue);
    text-transform: uppercase;
    white-space: nowrap;
}

.dc-stages-mini {
    display: flex;
    gap: 2px;
}
.stage-dot {
    font-size: 0.65rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: transform 0.15s;
}
.stage-dot:hover { transform: scale(1.15); }
.stage-dot.stage-pass { background: rgba(0,214,143,0.12); }
.stage-dot.stage-block { background: rgba(255,77,106,0.12); }
.stage-dot.stage-skip { background: rgba(90,94,114,0.15); }

/* Mini Probability Bar */
.dc-mini-prob {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
}
.dc-mini-prob-track {
    position: relative;
    width: 50px;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.dc-mini-prob-implied {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent-orange);
    opacity: 0.5;
    border-radius: 3px;
}
.dc-mini-prob-model {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent-blue);
    border-radius: 3px;
    opacity: 0.8;
}
.dc-mini-prob-label {
    font-size: 0.6rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Confidence Indicator */
.dc-conf-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dc-conf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.dc-conf-text {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text-muted);
}
.conf-high .dc-conf-dot { background: var(--accent-green); box-shadow: 0 0 6px rgba(0,214,143,0.4); }
.conf-high .dc-conf-text { color: var(--accent-green); }
.conf-med .dc-conf-dot { background: var(--accent-orange); box-shadow: 0 0 6px rgba(255,159,67,0.4); }
.conf-med .dc-conf-text { color: var(--accent-orange); }
.conf-low .dc-conf-dot { background: var(--accent-red); box-shadow: 0 0 6px rgba(255,77,106,0.4); }
.conf-low .dc-conf-text { color: var(--accent-red); }
.conf-none .dc-conf-dot { background: var(--text-muted); }

.dc-metric {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
}
.dc-metric-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 3px;
}
.dc-time {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.dc-expand-icon {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 16px;
    text-align: center;
}

/* ── Card Detail (expanded) ── */
.dc-detail {
    border-top: 1px solid var(--border);
    padding: 0;
    background: linear-gradient(180deg, rgba(15,17,23,0.5) 0%, rgba(22,25,34,0.3) 100%);
}

/* ═══ DECISION SUMMARY PANEL ═══ */
.dc-summary-panel {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(22,25,34,0.8), rgba(26,29,39,0.6));
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.dc-summary-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(76,141,255,0.04), transparent 60%);
    pointer-events: none;
}
.dc-summary-panel.dc-trade::before { background: radial-gradient(ellipse at top right, rgba(0,214,143,0.05), transparent 60%); }
.dc-summary-panel.dc-no-trade::before { background: radial-gradient(ellipse at top right, rgba(255,77,106,0.04), transparent 60%); }

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

.dc-summary-verdict {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}
.dc-verdict-icon {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}
.dc-verdict-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.dc-verdict-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

/* Grade Circle */
.dc-summary-grade {
    flex-shrink: 0;
}
.dc-grade-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.dc-grade-circle.grade-a {
    background: linear-gradient(135deg, rgba(0,214,143,0.15), rgba(0,214,143,0.05));
    border: 2px solid rgba(0,214,143,0.4);
    box-shadow: 0 0 20px rgba(0,214,143,0.1);
}
.dc-grade-circle.grade-b {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.05));
    border: 2px solid rgba(59,130,246,0.4);
    box-shadow: 0 0 20px rgba(59,130,246,0.1);
}
.dc-grade-circle.grade-c {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05));
    border: 2px solid rgba(245,158,11,0.4);
    box-shadow: 0 0 20px rgba(245,158,11,0.1);
}
.dc-grade-circle.grade-d {
    background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04));
    border: 2px solid rgba(239,68,68,0.35);
    box-shadow: 0 0 20px rgba(239,68,68,0.08);
}
.dc-grade-circle.grade-f {
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.04));
    border: 2px solid rgba(139,92,246,0.35);
    box-shadow: 0 0 20px rgba(139,92,246,0.08);
}
.dc-grade-letter {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}
.dc-grade-circle.grade-a .dc-grade-letter { color: #00d68f; }
.dc-grade-circle.grade-b .dc-grade-letter { color: #3b82f6; }
.dc-grade-circle.grade-c .dc-grade-letter { color: #f59e0b; }
.dc-grade-circle.grade-d .dc-grade-letter { color: #ef4444; }
.dc-grade-circle.grade-f .dc-grade-letter { color: #8b5cf6; }
.dc-grade-score {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* Full question in expanded view */
.dc-summary-question {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 3px solid var(--accent-blue);
}
.dc-full-question {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

/* Summary Metrics Grid */
.dc-summary-metrics {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.dc-summary-metric {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: border-color 0.2s;
}
.dc-summary-metric:hover {
    border-color: rgba(76,141,255,0.2);
}
.dc-sm-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.dc-sm-value {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text);
    margin-bottom: 6px;
}
.dc-sm-bar {
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.dc-sm-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.dc-sm-market { background: linear-gradient(90deg, var(--accent-orange), #ffb366); }
.dc-sm-model { background: linear-gradient(90deg, var(--accent-blue), #6cb0ff); }
.dc-sm-edge { background: linear-gradient(90deg, var(--accent-green), #33e5a5); }
.dc-sm-eq { background: linear-gradient(90deg, var(--accent-purple), #c084fc); }
.dc-sm-conf { background: linear-gradient(90deg, var(--accent-teal), #2dd4bf); }
.dc-sm-research { background: linear-gradient(90deg, var(--accent-pink), #f9a8d4); }

/* Summary Bottom */
.dc-summary-bottom {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.dc-summary-reasons {
    flex: 1;
}
.dc-reasons-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 8px;
}
.dc-reasons-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dc-reasons-list li {
    font-size: 0.78rem;
    color: var(--text-dim);
    padding: 4px 0 4px 16px;
    position: relative;
    line-height: 1.4;
}
.dc-reasons-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
    font-weight: 700;
}

/* Pipeline Completeness Ring */
.dc-summary-completeness {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dc-completeness-title {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.dc-completeness-ring {
    width: 56px;
    height: 56px;
}
.dc-circular-chart {
    width: 100%;
    height: 100%;
}
.dc-circle-bg {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 3;
}
.dc-circle-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    animation: dc-progress 1s ease-out forwards;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.dc-circle-fill.grade-a { stroke: #00d68f; }
.dc-circle-fill.grade-b { stroke: #3b82f6; }
.dc-circle-fill.grade-c { stroke: #f59e0b; }
.dc-circle-fill.grade-d { stroke: #ef4444; }
.dc-circle-fill.grade-f { stroke: #8b5cf6; }
@keyframes dc-progress {
    0% { stroke-dasharray: 0, 100; }
}
.dc-circle-text {
    fill: var(--text);
    font-size: 0.55rem;
    font-weight: 700;
    text-anchor: middle;
    font-family: var(--font-mono);
}
.dc-completeness-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ═══ PIPELINE STAGES ═══ */
.dc-pipeline-section {
    padding: 16px 20px 20px;
}
.dc-pipeline-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.dc-pipeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: 4px 0;
}

.dc-stage {
    flex: 1;
    min-width: 180px;
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.dc-stage:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.dc-stage.stage-pass { border-top: 3px solid var(--accent-green); }
.dc-stage.stage-block { border-top: 3px solid var(--accent-red); }
.dc-stage.stage-skip { border-top: 3px solid var(--text-muted); }

.dc-stage-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(26, 29, 39, 0.6);
}
.dc-stage-icon { font-size: 0.9rem; }
.dc-stage-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}
.dc-stage-number {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.dc-stage-status-pill {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dc-stage-status-pill.stage-pass { background: rgba(0,214,143,0.15); color: var(--accent-green); }
.dc-stage-status-pill.stage-block { background: rgba(255,77,106,0.12); color: var(--accent-red); }
.dc-stage-status-pill.stage-skip { background: rgba(90,94,114,0.2); color: var(--text-muted); }

.dc-stage-body {
    padding: 10px 12px;
    font-size: 0.78rem;
}

/* Stage Connector (enhanced) */
.dc-stage-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    align-self: center;
    gap: 0;
    padding: 0 2px;
}
.dc-connector-line {
    width: 16px;
    height: 2px;
    background: linear-gradient(90deg, var(--border), var(--text-muted), var(--border));
    border-radius: 1px;
}
.dc-connector-arrow {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1;
    margin-top: -4px;
    font-weight: 300;
}

/* Key-Value Grid */
.dc-kv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.dc-kv {
    background: var(--bg-card);
    border-radius: 4px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dc-kv-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dc-kv-value {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

/* Probability Comparison Bars */
.dc-prob-compare {
    margin: 10px 0;
}
.dc-prob-bar-wrap {
    margin-bottom: 6px;
}
.dc-prob-label {
    font-size: 0.68rem;
    color: var(--text-dim);
    margin-bottom: 3px;
    font-weight: 600;
}
.dc-prob-bar-track {
    background: #252838;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.dc-prob-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.dc-prob-implied { background: var(--accent-orange); }
.dc-prob-model { background: var(--accent-blue); }

/* Evidence Bullets */
.dc-evidence-list {
    margin-top: 8px;
}
.dc-evidence-title, .dc-reasoning-title, .dc-triggers-title, .dc-violations-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.dc-evidence-item {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-left: 3px solid var(--accent-blue);
    transition: border-color 0.2s;
}
.dc-evidence-item:hover {
    border-left-color: var(--accent-green);
}
.dc-evidence-item.dc-evidence-numeric {
    border-left-color: var(--accent-orange);
}
.dc-evidence-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.dc-evidence-text {
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.5;
}
.dc-evidence-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Impact badges */
.dc-impact-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.dc-impact-supports {
    background: rgba(0,214,143,0.15);
    color: var(--accent-green);
}
.dc-impact-opposes {
    background: rgba(255,77,106,0.12);
    color: var(--accent-red);
}
.dc-impact-neutral {
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}

.dc-relevance {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0,214,143,0.12);
    color: var(--accent-green);
}
.dc-confidence-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(59,130,246,0.12);
    color: var(--accent-blue);
}
.dc-numeric-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(245,158,11,0.12);
    color: var(--accent-orange);
}

/* Source links */
.dc-source-link {
    font-size: 0.68rem;
    color: var(--accent-blue);
    text-decoration: none;
    transition: color 0.15s;
    word-break: break-all;
}
.dc-source-link:hover {
    color: var(--accent-green);
    text-decoration: underline;
}
.dc-publisher {
    font-size: 0.65rem;
    color: var(--text-dim);
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
}
.dc-source-date {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-style: italic;
}
.dc-citation {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Quality breakdown */
.dc-quality-breakdown {
    margin-top: 8px;
    margin-bottom: 8px;
}
.dc-quality-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}
.dc-quality-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    width: 90px;
    flex-shrink: 0;
    text-align: right;
}
.dc-quality-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.dc-quality-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.dc-quality-val {
    font-size: 0.62rem;
    color: var(--text-muted);
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Research summary */
.dc-research-summary {
    margin-top: 8px;
    background: var(--bg-card);
    border-radius: 4px;
    padding: 10px 12px;
    border-left: 2px solid var(--accent-green);
}
.dc-summary-text {
    font-size: 0.76rem;
    color: var(--text-dim);
    line-height: 1.5;
}

/* Contradictions */
.dc-contradictions {
    margin-top: 8px;
}
.dc-contradiction-item {
    background: rgba(255,77,106,0.05);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-left: 2px solid var(--accent-orange);
}
.dc-contradiction-claim {
    font-size: 0.74rem;
    color: var(--text-dim);
    padding: 2px 0;
}
.dc-contra-label {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    margin-right: 4px;
}
.dc-contradiction-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* Reasoning */
.dc-reasoning {
    margin-top: 10px;
    background: var(--bg-card);
    border-radius: 4px;
    padding: 10px 12px;
    border-left: 2px solid var(--accent-purple);
}
.dc-reasoning-text {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Invalidation Triggers */
.dc-triggers {
    margin-top: 8px;
}
.dc-triggers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dc-triggers-list li {
    font-size: 0.75rem;
    color: var(--accent-orange);
    padding: 3px 0;
    padding-left: 14px;
    position: relative;
}
.dc-triggers-list li::before {
    content: '⚡';
    position: absolute;
    left: 0;
    font-size: 0.65rem;
}

/* Violations */
.dc-violations {
    margin-top: 6px;
}
.dc-violation-item {
    font-size: 0.75rem;
    color: var(--accent-red);
    background: rgba(255,77,106,0.08);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 3px;
    border-left: 2px solid var(--accent-red);
}
.dc-reason-text {
    font-size: 0.76rem;
    color: var(--text-dim);
    margin-top: 4px;
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .dc-summary-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .charts-row { grid-template-columns: 1fr 1fr; }
    .chart-container.chart-small { grid-column: span 2; }
    .config-field-row { grid-template-columns: 180px 1fr; }
}
@media (max-width: 768px) {
    body { padding: 0 12px 24px; }
    header { flex-direction: column; gap: 8px; align-items: flex-start; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-row { grid-template-columns: 1fr; }
    .chart-container.chart-small { grid-column: span 1; }
    .panel-header { flex-direction: column; align-items: flex-start; }
    .panel-tools { width: 100%; }
    .search-input { width: 100%; }
    .config-field-row { grid-template-columns: 1fr; gap: 4px; }
    .config-tabs { gap: 4px; }
    .config-tab { font-size: 0.65rem; padding: 5px 8px; }
    .dc-pipeline { flex-direction: column; }
    .dc-stage-connector { transform: rotate(90deg); padding: 4px 0; }
    .dc-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .dc-header-right { flex-wrap: wrap; }
    .dc-summary-metrics { grid-template-columns: repeat(2, 1fr); }
    .dc-summary-header { flex-direction: column; }
    .dc-summary-bottom { flex-direction: column; }
    .dc-mini-prob { display: none; }
    .dc-category-badge { display: none; }
    .tab-nav { top: 0; }
    .tab-btn { padding: 8px 12px; font-size: 0.75rem; }
    .tab-label { display: none; }
    .tab-icon { font-size: 1.2rem; }
}

/* ─── Performance Analytics ────────────────────────────────────── */
#analytics-panel .analytics-cards {
    margin-bottom: 16px;
}

#analytics-panel .charts-row {
    margin-top: 8px;
}

#leaderboard-table th:first-child { width: 50px; text-align: center; }
#leaderboard-table td:first-child { text-align: center; font-weight: 700; }

.leaderboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
}
.leaderboard-rank.rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1d27; }
.leaderboard-rank.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #1a1d27; }
.leaderboard-rank.rank-3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
.leaderboard-rank.rank-other { background: var(--bg-table-row); color: var(--text-dim); }

/* ─── Market Regime ────────────────────────────────────────────── */
#regime-panel .card-grid {
    grid-template-columns: repeat(3, 1fr);
}

.regime-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.regime-NORMAL { background: rgba(76, 141, 255, 0.2); color: var(--accent-blue); }
.regime-TRENDING { background: rgba(0, 214, 143, 0.2); color: var(--accent-green); }
.regime-MEAN_REVERTING { background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); }
.regime-HIGH_VOLATILITY { background: rgba(255, 77, 106, 0.2); color: var(--accent-red); }
.regime-LOW_ACTIVITY { background: rgba(139, 143, 163, 0.2); color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════ */

/* ─── Admin Top Bar (Health Gauge + Quick Actions) ─────────────── */
.admin-top-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 20px;
}
.admin-health-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 110px;
}
.admin-health-gauge {
    position: relative;
    width: 100px;
    height: 100px;
}
.health-ring {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.health-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 8;
}
.health-ring-fill {
    fill: none;
    stroke: var(--accent-green);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease, stroke 0.5s ease;
}
.health-gauge-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.health-gauge-score {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text);
    line-height: 1;
}
.health-gauge-grade {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.health-gauge-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.admin-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}
.btn-action {
    background: rgba(76,141,255,0.08);
    border: 1px solid rgba(76,141,255,0.2);
    color: var(--accent-blue);
    font-weight: 600;
    transition: all 0.2s;
}
.btn-action:hover {
    background: rgba(76,141,255,0.18);
    border-color: rgba(76,141,255,0.4);
    transform: translateY(-1px);
}

/* ─── Health Issues ────────────────────────────────────────────── */
.admin-health-issues { margin-bottom: 4px; }
.admin-issue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 0.8rem;
}
.admin-issue-item:last-child { margin-bottom: 0; }
.admin-issue-critical {
    background: rgba(255,77,106,0.1);
    border-left: 3px solid var(--accent-red);
    color: var(--accent-red);
}
.admin-issue-error {
    background: rgba(255,77,106,0.08);
    border-left: 3px solid var(--accent-red);
    color: #ff8a8a;
}
.admin-issue-warning {
    background: rgba(255,159,67,0.08);
    border-left: 3px solid var(--accent-orange);
    color: var(--accent-orange);
}
.admin-issue-info {
    background: rgba(76,141,255,0.06);
    border-left: 3px solid var(--accent-blue);
    color: var(--accent-blue);
}
.admin-issue-icon { font-size: 1rem; }
.admin-issue-text { font-weight: 500; }

/* ─── Admin Health Grid ────────────────────────────────────────── */
.admin-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.admin-health-item {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.admin-health-item:hover {
    border-color: rgba(76,141,255,0.3);
}
.admin-health-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.admin-health-value {
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text);
    word-break: break-all;
}
.admin-error-text {
    color: var(--accent-red);
    font-size: 0.78rem;
}
.admin-path-text {
    font-size: 0.72rem;
    word-break: break-all;
    color: var(--text-dim);
}

/* ─── API Keys Grid ────────────────────────────────────────────── */
.admin-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.admin-key-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}
.admin-key-item:hover {
    border-color: rgba(76,141,255,0.2);
}
.admin-key-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.admin-key-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-key-ok {
    background: rgba(0,214,143,0.15);
    color: var(--accent-green);
}
.admin-key-missing {
    background: rgba(255,77,106,0.12);
    color: var(--accent-red);
}
.admin-key-value {
    background: rgba(255,159,67,0.12);
    color: var(--accent-orange);
}

/* ─── Feature Flags Grid ──────────────────────────────────────── */
.admin-flags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.admin-flag-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    border: 1px solid var(--border);
}
.admin-flag-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
}
.admin-flag-status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.admin-flag-on {
    background: rgba(0,214,143,0.15);
    color: var(--accent-green);
}
.admin-flag-off {
    background: rgba(255,77,106,0.10);
    color: var(--accent-red);
}

/* ─── Ensemble Info ────────────────────────────────────────────── */
.admin-ensemble-info {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.admin-ensemble-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.admin-ensemble-models {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(76,141,255,0.08);
    border: 1px solid rgba(76,141,255,0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-blue);
    font-family: var(--font-mono);
}
.admin-model-chip.primary {
    background: rgba(0,214,143,0.1);
    border-color: rgba(0,214,143,0.3);
    color: var(--accent-green);
}

/* ─── Cost Breakdown ───────────────────────────────────────────── */
.admin-cost-breakdown {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.admin-cost-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.admin-cost-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.admin-cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    border: 1px solid var(--border);
}
.admin-cost-api-name {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-dim);
}
.admin-cost-api-count {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-orange);
}

/* ─── Decision Breakdown ──────────────────────────────────────── */
.admin-decision-breakdown {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-decision-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.admin-decision-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-decision-count {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-mono);
}
.admin-decision-chip.dc-trade .admin-decision-label { color: var(--accent-green); }
.admin-decision-chip.dc-trade .admin-decision-count { color: var(--accent-green); }
.admin-decision-chip.dc-no-trade .admin-decision-label { color: var(--accent-red); }
.admin-decision-chip.dc-no-trade .admin-decision-count { color: var(--accent-red); }
.admin-decision-chip.dc-skip .admin-decision-label { color: var(--accent-orange); }
.admin-decision-chip.dc-skip .admin-decision-count { color: var(--accent-orange); }

/* ─── DB Row Bar ───────────────────────────────────────────────── */
.admin-row-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.admin-row-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    border-radius: 3px;
    transition: width 0.6s ease;
}
.btn-export-sm {
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(76,141,255,0.08);
    border: 1px solid rgba(76,141,255,0.2);
    border-radius: 4px;
    color: var(--accent-blue);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-export-sm:hover {
    background: rgba(76,141,255,0.18);
}

/* ─── DB Pragma Info ───────────────────────────────────────────── */
.admin-db-pragma {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-pragma-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(76,141,255,0.06);
    border: 1px solid rgba(76,141,255,0.15);
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
}
.admin-pragma-key { color: var(--text-muted); }
.admin-pragma-val { color: var(--accent-blue); font-weight: 700; }

/* ─── Storage Grid ─────────────────────────────────────────────── */
.admin-storage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.admin-storage-card {
    background: var(--glass);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--glass-border);
    text-align: center;
    transition: var(--transition-normal);
}
.admin-storage-card:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-2px); }
.admin-storage-icon { font-size: 1.6rem; margin-bottom: 6px; }
.admin-storage-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.admin-storage-size {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text);
}
.admin-storage-files {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 4px;
}

/* ─── Metrics Grid ─────────────────────────────────────────────── */
.admin-metrics-section {
    margin-bottom: 8px;
}
.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.admin-metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass);
    backdrop-filter: blur(8px);
    border-radius: 6px;
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    transition: var(--transition-fast);
}
.admin-metric-item:hover { border-color: rgba(255,255,255,0.08); }
.admin-metric-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--font-mono);
}
.admin-metric-value {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent-blue);
}

/* ─── Alerts Feed ──────────────────────────────────────────────── */
.admin-alerts-feed {
    max-height: 350px;
    overflow-y: auto;
}
.admin-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    transition: background 0.2s;
}
.admin-alert-item:hover { background: rgba(255,255,255,0.02); }
.admin-alert-item:last-child { border-bottom: none; }
.admin-alert-level {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.admin-alert-level-info { background: rgba(76,141,255,0.12); color: var(--accent-blue); }
.admin-alert-level-warning { background: rgba(255,159,67,0.12); color: var(--accent-orange); }
.admin-alert-level-error { background: rgba(255,77,106,0.12); color: var(--accent-red); }
.admin-alert-level-critical { background: rgba(255,0,40,0.15); color: #ff4d6a; }
.admin-alert-msg {
    flex: 1;
    color: var(--text-dim);
    line-height: 1.4;
    word-break: break-word;
}
.admin-alert-time {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: var(--font-mono);
}
.admin-select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 0.72rem;
    padding: 4px 8px;
    font-family: var(--font-mono);
    cursor: pointer;
}
.admin-select:focus { outline: none; border-color: var(--accent-blue); }

/* ─── Log Viewer ───────────────────────────────────────────────── */
.admin-log-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 0.72rem;
}
.admin-log-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-card);
    border-radius: 4px;
    border: 1px solid var(--border);
}
.admin-log-stat-label { color: var(--text-muted); }
.admin-log-stat-value { color: var(--text); font-weight: 700; font-family: var(--font-mono); }
.admin-log-stat-errors .admin-log-stat-value { color: var(--accent-red); }
.admin-log-stat-warns .admin-log-stat-value { color: var(--accent-orange); }

.admin-log-viewer {
    background: #0a0c10;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}
.admin-log-viewer pre {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text-dim);
    padding: 16px;
    margin: 0;
    white-space: pre;
    word-break: break-all;
}
.admin-log-viewer .log-error {
    color: var(--accent-red);
}
.admin-log-viewer .log-warning {
    color: var(--accent-orange);
}
.admin-log-viewer .log-info {
    color: var(--accent-blue);
}

/* ─── Danger Zone ──────────────────────────────────────────────── */
.admin-danger-zone {
    border: 1px solid rgba(255,77,106,0.3) !important;
    background: rgba(255,77,106,0.02);
}
.admin-danger-zone .panel-header h2 { color: var(--accent-red); }
.admin-danger-warning {
    font-size: 0.78rem;
    color: var(--accent-red);
    opacity: 0.8;
    margin-bottom: 16px;
    padding: 0 4px;
}
.admin-danger-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-danger-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255,77,106,0.04);
    border: 1px solid rgba(255,77,106,0.15);
    border-radius: var(--radius-sm);
}
.admin-danger-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-danger-info strong {
    font-size: 0.82rem;
    color: var(--text);
}
.admin-danger-info span {
    font-size: 0.72rem;
    color: var(--text-dim);
}
.btn-danger {
    background: rgba(255,77,106,0.15);
    border: 1px solid rgba(255,77,106,0.4);
    color: var(--accent-red);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-danger:hover {
    background: rgba(255,77,106,0.3);
    border-color: rgba(255,77,106,0.6);
}

/* ─── Admin Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-top-bar { flex-direction: column; text-align: center; }
    .admin-health-grid { grid-template-columns: 1fr; }
    .admin-keys-grid { grid-template-columns: 1fr; }
    .admin-flags-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-metrics-grid { grid-template-columns: 1fr; }
    .admin-storage-grid { grid-template-columns: 1fr; }
    .admin-cost-items { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --bg: #f2f4f8;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-panel: rgba(240, 242, 248, 0.9);
    --bg-table-row: rgba(245, 247, 252, 0.8);
    --bg-hover: rgba(220, 225, 240, 0.6);
    --bg-input: rgba(255, 255, 255, 0.9);
    --border: rgba(0, 0, 0, 0.08);
    --border-focus: #3b7cf5;
    --text: #1a1e2e;
    --text-dim: #5a6078;
    --text-muted: #8890a8;
    --accent-blue: #3b7cf5;
    --accent-green: #00b368;
    --accent-red: #e53e56;
    --accent-orange: #e88a2a;
    --accent-purple: #8b3fd9;
    --accent-teal: #0f9488;
    --accent-pink: #d94f92;
    --accent-yellow: #d4a21f;
    --glow-blue: rgba(59, 124, 245, 0.08);
    --glow-green: rgba(0, 179, 104, 0.08);
    --glow-purple: rgba(139, 63, 217, 0.08);
    --glass: rgba(0, 0, 0, 0.02);
    --glass-border: rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.10);
    --shadow-glow-blue: 0 0 20px rgba(59,124,245,0.1);
    --shadow-glow-green: 0 0 20px rgba(0,179,104,0.1);
}

[data-theme="light"] body {
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59,124,245,0.04), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(139,63,217,0.03), transparent);
}

[data-theme="light"] header {
    background: rgba(242, 244, 248, 0.9);
}

[data-theme="light"] header h1 {
    background: linear-gradient(135deg, #1a1e2e 0%, #4a5280 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
}

[data-theme="light"] .card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

[data-theme="light"] table th {
    background: rgba(0,0,0,0.03);
}

/* Theme toggle button */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0 3px;
    margin-left: 12px;
}

.theme-toggle::after {
    content: '🌙';
    font-size: 13px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    line-height: 1;
}

[data-theme="light"] .theme-toggle::after {
    content: '☀️';
    transform: translateX(19px);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    body { padding: 0 16px 32px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .tab-container { gap: 0; }
    .tab-btn { padding: 8px 14px; font-size: 0.72rem; }
}

@media (max-width: 768px) {
    body { padding: 0 10px 24px; max-width: 100%; }

    header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px 0;
    }
    header h1 { font-size: 1.15rem; }

    .tab-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    .tab-btn {
        padding: 7px 12px;
        font-size: 0.68rem;
        flex: 0 1 auto;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .card {
        padding: 14px;
        border-radius: 12px;
    }

    .card h2, .card h3 {
        font-size: 0.85rem;
    }

    .kpi-value {
        font-size: 1.35rem;
    }

    table {
        font-size: 0.72rem;
    }
    table th, table td {
        padding: 6px 8px;
    }

    /* Horizontal scroll for wide tables */
    .card:has(table) {
        overflow-x: auto;
    }

    .two-col, .analytics-grid, .system-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body { padding: 0 6px 16px; }

    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tab-btn {
        padding: 6px 10px;
        font-size: 0.65rem;
    }

    header h1 { font-size: 1rem; }
    .subtitle { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   WATCHLIST & JOURNAL SECTIONS
   ═══════════════════════════════════════════════════════════════════ */

.watchlist-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.watchlist-actions input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font-size: 0.82rem;
    font-family: var(--font);
}

.watchlist-actions input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--glow-blue);
}

.btn-watch {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-blue);
    background: rgba(76,141,255,0.15);
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-watch:hover {
    background: rgba(76,141,255,0.3);
}

.btn-remove {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,77,106,0.3);
    background: rgba(255,77,106,0.1);
    color: var(--accent-red);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-remove:hover {
    background: rgba(255,77,106,0.25);
}

.journal-entry {
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.journal-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.journal-pnl-positive { color: var(--accent-green); font-weight: 700; }
.journal-pnl-negative { color: var(--accent-red); font-weight: 700; }

.journal-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.journal-annotation {
    font-size: 0.82rem;
    color: var(--text);
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--glass);
    border-radius: 8px;
    border-left: 3px solid var(--accent-purple);
}

.var-gauge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.var-value {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-mono);
}

.var-label {
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════ */
/*  SETTINGS TAB                                                   */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── Env Var Groups ───────────────────────────────────────────── */
.settings-env-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.env-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
}
.env-group-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.env-group-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.env-key-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.env-key-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.env-dot {
    font-size: 0.6rem;
    line-height: 1;
}
.env-dot-ok { color: var(--accent-green); }
.env-dot-missing { color: var(--accent-red); }
.env-key-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--font-mono);
    cursor: default;
}
.env-key-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.env-key-input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 8px 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.env-key-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(76,141,255,0.15);
}
.env-key-input::placeholder {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.env-reveal-btn {
    background: var(--bg-table-row);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.2s;
}
.env-reveal-btn:hover {
    background: var(--bg-card);
}

/* ─── Feature Flags Grid ──────────────────────────────────────── */
.settings-flags-grid {
    padding: 0;
}
.flags-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}
.flag-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: border-color 0.2s, background 0.2s;
}
.flag-card:hover {
    border-color: rgba(76,141,255,0.25);
}
.flag-card-on {
    border-left: 3px solid var(--accent-green);
}
.flag-card-off {
    border-left: 3px solid var(--border);
    opacity: 0.85;
}
.flag-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.flag-icon {
    font-size: 1.2rem;
}
.flag-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.flag-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}
.flag-desc {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ─── Admin Key Editable ──────────────────────────────────────── */
.admin-key-editable {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.admin-key-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.admin-key-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 6px 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-key-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(76,141,255,0.15);
}
.admin-key-input::placeholder {
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* ─── Settings Config Editor ──────────────────────────────────── */
#settings-cfg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
#settings-cfg-grid .config-editor {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

@media (max-width: 768px) {
    .flags-grid-inner {
        grid-template-columns: 1fr;
    }
    .admin-keys-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/*  WHALE TRACKER — Professional Terminal                             */
/* ═══════════════════════════════════════════════════════════════════ */

/* ── Toolbar ── */
.whale-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 18px;
}
.whale-toolbar-left { display: flex; align-items: center; gap: 12px; }
.whale-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.whale-pulse {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.04em;
}
.whale-pulse-live   { color: #00e68a; background: rgba(0,230,138,0.12); animation: whalePulseGlow 2s ease-in-out infinite; }
.whale-pulse-active { color: #ff9f43; background: rgba(255,159,67,0.12); }
.whale-pulse-idle   { color: #5a5f78; background: rgba(90,95,120,0.15); }
@keyframes whalePulseGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(0,230,138,0.3); }
    50% { box-shadow: 0 0 12px rgba(0,230,138,0.6); }
}
.whale-toolbar-right { display: flex; align-items: center; gap: 8px; }
.whale-toolbar-stat { font-size: 0.72rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.whale-toolbar-divider { color: rgba(255,255,255,0.1); font-size: 0.8rem; }
.whale-refresh-timer { color: var(--accent-blue); }
.whale-btn-export {
    background: rgba(76,141,255,0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(76,141,255,0.2);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.whale-btn-export:hover { background: rgba(76,141,255,0.2); border-color: rgba(76,141,255,0.4); }

/* ── KPI Row ── */
.whale-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.whale-kpi {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 3px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
}
.whale-kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.whale-kpi.accent-blue   { border-left-color: var(--accent-blue); }
.whale-kpi.accent-green  { border-left-color: var(--accent-green); }
.whale-kpi.accent-purple { border-left-color: var(--accent-purple); }
.whale-kpi.accent-teal   { border-left-color: #2dd4bf; }
.whale-kpi.accent-orange { border-left-color: var(--accent-orange); }
.whale-kpi.accent-pink   { border-left-color: #ec4899; }
.whale-kpi-icon { font-size: 1.4rem; line-height: 1; }
.whale-kpi-body { flex: 1; min-width: 0; }
.whale-kpi-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 3px; }
.whale-kpi-value { font-size: 1.4rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1.2; }
.whale-kpi-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.whale-kpi-sub-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whale-positive { color: var(--accent-green); }
.whale-negative { color: var(--accent-red); }

/* ── Gauge Row ── */
.whale-gauge-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.whale-gauge-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
}
.whale-gauge-card h3 { margin: 0 0 12px 0; font-size: 0.88rem; }
.whale-gauge-wrap { margin-bottom: 8px; }
.whale-gauge-bar {
    position: relative;
    height: 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 7px;
    overflow: visible;
}
.whale-gauge-fill {
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg, #ff9f43, #3b82f6);
    transition: width 0.6s ease, background 0.6s ease;
}
.whale-gauge-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 20px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-1.5px);
    box-shadow: 0 0 6px rgba(255,255,255,0.4);
    transition: left 0.6s ease;
}
.whale-gauge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.whale-gauge-bear { color: var(--accent-red); }
.whale-gauge-bull { color: var(--accent-green); }
.whale-gauge-desc { font-size: 0.74rem; color: var(--text-dim); line-height: 1.45; margin-top: 6px; }

/* ── Flow Bars ── */
.whale-flow-bars { display: flex; flex-direction: column; gap: 8px; }
.whale-flow-item { display: flex; align-items: center; gap: 8px; }
.whale-flow-label { width: 80px; font-size: 0.74rem; color: var(--text-dim); flex-shrink: 0; }
.whale-flow-bar-wrap { flex: 1; height: 12px; background: rgba(255,255,255,0.04); border-radius: 6px; overflow: hidden; }
.whale-flow-bar { height: 100%; border-radius: 6px; transition: width 0.5s ease; min-width: 2px; }
.whale-flow-green  { background: var(--accent-green); }
.whale-flow-teal   { background: #2dd4bf; }
.whale-flow-orange { background: var(--accent-orange); }
.whale-flow-red    { background: var(--accent-red); }
.whale-flow-count { font-size: 0.78rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; width: 28px; text-align: right; }

/* ── Charts Row — FIXED HEIGHT (no expansion bug) ── */
.whale-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.whale-chart-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px;
    overflow: hidden;
}
.whale-chart-card h3 { margin: 0 0 8px 0; font-size: 0.85rem; color: var(--text); }
.whale-chart-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ── Activity Timeline Heatmap ── */
.whale-timeline-section {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.whale-timeline-section h3 { margin: 0 0 10px 0; font-size: 0.88rem; }
.whale-section-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }
.whale-timeline-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
    margin-bottom: 8px;
}
.whale-tl-cell {
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: default;
    transition: transform 0.1s;
    position: relative;
}
.whale-tl-cell:hover { transform: scale(1.15); z-index: 2; }
.whale-tl-hour {
    font-size: 0.55rem;
    color: var(--text-muted);
    padding-bottom: 2px;
    opacity: 0;
}
.whale-tl-cell:hover .whale-tl-hour { opacity: 1; }
.whale-tl-0 { background: rgba(255,255,255,0.03); }
.whale-tl-1 { background: rgba(76,141,255,0.2); }
.whale-tl-2 { background: rgba(76,141,255,0.4); }
.whale-tl-3 { background: rgba(0,230,138,0.5); }
.whale-tl-4 { background: rgba(0,230,138,0.8); box-shadow: 0 0 8px rgba(0,230,138,0.3); }
.whale-timeline-legend {
    display: flex;
    gap: 12px;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.whale-tl-legend-item { display: flex; align-items: center; gap: 4px; }
.whale-tl-legend-item .whale-tl-cell { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ── High Consensus ── */
.whale-consensus-section {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}
.whale-consensus-section h3 { margin: 0 0 4px 0; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.whale-consensus-badge {
    background: var(--accent-red);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.whale-consensus-desc { font-size: 0.74rem; color: var(--text-muted); margin-bottom: 10px; }
.whale-consensus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.whale-consensus-card {
    background: rgba(255,255,255,0.025);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.15s;
}
.whale-consensus-card:hover { transform: translateY(-2px); }
.whale-consensus-bull { border-left: 3px solid var(--accent-green); }
.whale-consensus-bear { border-left: 3px solid var(--accent-red); }
.whale-consensus-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.whale-consensus-dir { font-size: 0.74rem; font-weight: 600; }
.whale-consensus-conv { font-size: 0.78rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--accent-orange); }
.whale-consensus-title { font-size: 0.82rem; font-weight: 500; margin-bottom: 4px; line-height: 1.35; }
.whale-consensus-meta { display: flex; gap: 10px; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 3px; }
.whale-consensus-names { font-size: 0.68rem; color: var(--text-muted); font-style: italic; }

/* ── Section Card (shared wrapper) ── */
.whale-section-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.whale-section-card > .whale-table-header { margin-bottom: 10px; }

/* ── Conviction Table ── */
.whale-table-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.whale-table-header h3 { margin: 0; font-size: 0.9rem; }
.whale-table-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.whale-filter-select {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.72rem;
    cursor: pointer;
}
.whale-filter-select:focus { border-color: var(--border-focus); outline: none; }
.whale-filter-input {
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 0.72rem;
    width: 140px;
}
.whale-filter-input:focus { border-color: var(--border-focus); outline: none; }
.whale-table-scroll { overflow-x: auto; max-height: 450px; overflow-y: auto; }

.whale-pro-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.whale-pro-table thead { position: sticky; top: 0; z-index: 2; }
.whale-pro-table thead th {
    background: rgba(0,0,0,0.3);
    padding: 8px 6px;
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.whale-pro-table td {
    padding: 7px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    white-space: nowrap;
}
.whale-pro-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.whale-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; }

.whale-conv-bar-wrap { display: flex; align-items: center; gap: 5px; }
.whale-conv-bar { height: 7px; border-radius: 3px; transition: width 0.4s ease; min-width: 3px; max-width: 70px; }
.whale-conv-label { font-size: 0.74rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.whale-strength-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.whale-str-strong   { background: rgba(0,230,138,0.15); color: var(--accent-green); }
.whale-str-moderate { background: rgba(255,159,67,0.15); color: var(--accent-orange); }
.whale-str-weak     { background: rgba(90,95,120,0.2); color: var(--text-muted); }

/* ── Category Pills ── */
.whale-cat-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    border: 1px solid;
    white-space: nowrap;
}

/* ── Freshness Pills ── */
.whale-fresh-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.whale-fresh-live   { background: rgba(0,230,138,0.2); color: #00e68a; animation: whalePulseGlow 2s ease-in-out infinite; }
.whale-fresh-fresh  { background: rgba(76,141,255,0.15); color: #4c8dff; }
.whale-fresh-recent { background: rgba(255,159,67,0.15); color: #ff9f43; }
.whale-fresh-aging  { background: rgba(90,95,120,0.15); color: #9499b3; }
.whale-fresh-stale  { background: rgba(90,95,120,0.1); color: #5a5f78; }

/* ── Edge Indicators ── */
.whale-edge-pos  { color: var(--accent-green); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; }
.whale-edge-neg  { color: var(--accent-red); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; }
.whale-edge-flat { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; }
.whale-edge-na   { color: var(--text-muted); font-size: 0.74rem; }

/* ── Activity Feed ── */
.whale-feed {
    max-height: 480px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.whale-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.015);
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}
.whale-feed-item:hover { background: rgba(255,255,255,0.04); }
.whale-feed-entry    { border-left-color: var(--accent-green); }
.whale-feed-exit     { border-left-color: var(--accent-red); }
.whale-feed-increase { border-left-color: #2dd4bf; }
.whale-feed-decrease { border-left-color: var(--accent-orange); }
.whale-feed-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.whale-feed-body { flex: 1; font-size: 0.78rem; color: var(--text-dim); line-height: 1.45; }
.whale-feed-name { font-weight: 600; color: var(--text); }
.whale-feed-market { color: var(--accent-blue); }
.whale-feed-outcome { color: var(--text-muted); }
.whale-feed-value { font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--accent-green); }
.whale-feed-shares { font-size: 0.72rem; color: var(--text-muted); }
.whale-feed-time { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Leaderboard Cards ── */
.whale-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 600px;
    overflow-y: auto;
}
.whale-lb-card {
    display: grid;
    grid-template-columns: 44px 180px 1fr 130px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.015);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.03);
    transition: background 0.15s, transform 0.15s;
}
.whale-lb-card:hover { background: rgba(255,255,255,0.04); transform: translateX(2px); }
.whale-lb-rank { font-size: 1.15rem; font-weight: 700; text-align: center; font-family: 'JetBrains Mono', monospace; }
.whale-lb-info { min-width: 0; }
.whale-lb-name { font-weight: 600; font-size: 0.84rem; display: flex; align-items: center; gap: 6px; }
.whale-lb-tier {
    font-size: 0.58rem;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.whale-lb-addr { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.whale-lb-addr code { font-size: 0.68rem; background: none; padding: 0; }
.whale-lb-stats { display: flex; gap: 12px; }
.whale-lb-stat { display: flex; flex-direction: column; align-items: center; }
.whale-lb-stat-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.whale-lb-stat-value { font-size: 0.82rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.whale-lb-score-wrap { display: flex; align-items: center; gap: 6px; }
.whale-lb-score-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.whale-lb-score-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.whale-lb-score-val { font-size: 0.74rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; width: 24px; text-align: right; }

/* ── Risk Alert Ticker ── */
.whale-alert-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    animation: whalTickerSlide 0.3s ease;
}
@keyframes whalTickerSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.whale-alert-high   { background: rgba(255,77,106,0.1); border: 1px solid rgba(255,77,106,0.25); }
.whale-alert-medium { background: rgba(255,159,67,0.1); border: 1px solid rgba(255,159,67,0.25); }
.whale-alert-low    { background: rgba(76,141,255,0.08); border: 1px solid rgba(76,141,255,0.2); }
.whale-alert-ticker-icon { font-size: 1.1rem; flex-shrink: 0; }
.whale-alert-ticker-scroll {
    flex: 1;
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    font-size: 0.76rem;
    color: var(--text-dim);
}
.whale-alert-ticker-scroll::-webkit-scrollbar { display: none; }
.whale-alert-item { padding: 0 8px; flex-shrink: 0; }
.whale-alert-item-high   { color: var(--accent-red); }
.whale-alert-item-medium { color: var(--accent-orange); }
.whale-alert-item-low    { color: var(--accent-blue); }
.whale-alert-sep { color: rgba(255,255,255,0.15); padding: 0 4px; flex-shrink: 0; }
.whale-alert-ticker-count {
    background: rgba(255,77,106,0.15);
    color: var(--accent-red);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ── Momentum Panel ── */
.whale-momentum-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.whale-momentum-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px 16px;
}
.whale-momentum-card h3 { margin: 0 0 10px 0; font-size: 0.88rem; }
.whale-mom-item {
    display: grid;
    grid-template-columns: 40px 1fr 200px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.whale-mom-item:last-child { border-bottom: none; }
.whale-mom-label { font-size: 0.78rem; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.whale-mom-bar-bg {
    position: relative;
    height: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 7px;
    overflow: hidden;
}
.whale-mom-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.15);
}
.whale-mom-bar-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 7px;
    transition: width 0.5s ease;
}
.whale-mom-pos { background: var(--accent-green); left: 50%; }
.whale-mom-neg { background: var(--accent-red); right: 50%; }
.whale-mom-meta { display: flex; gap: 8px; align-items: center; font-size: 0.72rem; }
.whale-mom-flow { font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.whale-mom-dir { color: var(--text-muted); }
.whale-mom-counts { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }

/* ── Velocity & Herd ── */
.whale-velocity-row { display: flex; gap: 16px; margin-bottom: 14px; }
.whale-velocity-item { display: flex; flex-direction: column; align-items: center; flex: 1; }
.whale-velocity-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.whale-velocity-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    transition: color 0.3s;
}
.whale-vel-spike  { color: var(--accent-red) !important; animation: whalePulseGlow 1.5s infinite; }
.whale-vel-active { color: var(--accent-orange) !important; }
.whale-herd-index { display: flex; align-items: center; gap: 10px; }
.whale-herd-label { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; }
.whale-herd-bar-wrap { flex: 1; height: 10px; background: rgba(255,255,255,0.05); border-radius: 5px; overflow: hidden; }
.whale-herd-bar { height: 100%; border-radius: 5px; transition: width 0.6s ease, background 0.3s; }
.whale-herd-value { font-size: 0.82rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; width: 32px; text-align: right; }

/* ── Accumulation / Distribution ── */
.whale-accum-list { display: flex; flex-direction: column; gap: 6px; }
.whale-ad-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.015);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.03);
}
.whale-ad-title { font-size: 0.8rem; font-weight: 500; margin-bottom: 6px; color: var(--text); }
.whale-ad-bar-wrap {
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.whale-ad-bar-buy {
    background: rgba(0,230,138,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2%;
    transition: width 0.5s ease;
}
.whale-ad-bar-sell {
    background: rgba(255,77,106,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2%;
    transition: width 0.5s ease;
}
.whale-ad-bar-label { font-size: 0.62rem; font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 600; }
.whale-ad-meta { display: flex; gap: 12px; align-items: center; font-size: 0.72rem; }
.whale-ad-signal {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.whale-ad-strong-buy { background: rgba(0,230,138,0.2); color: var(--accent-green); }
.whale-ad-buy        { background: rgba(0,230,138,0.1); color: var(--accent-green); }
.whale-ad-neutral    { background: rgba(90,95,120,0.15); color: var(--text-muted); }
.whale-ad-sell       { background: rgba(255,77,106,0.1); color: var(--accent-red); }
.whale-ad-strong-sell { background: rgba(255,77,106,0.2); color: var(--accent-red); }
.whale-ad-ratio { color: var(--text-dim); }
.whale-ad-net { font-weight: 600; }

/* ── Whale Overlap Matrix ── */
.whale-overlap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.whale-overlap-card {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.04);
    background: rgba(255,255,255,0.015);
    transition: transform 0.15s;
}
.whale-overlap-card:hover { transform: translateY(-1px); }
.whale-overlap-1 { border-left: 3px solid rgba(76,141,255,0.4); }
.whale-overlap-2 { border-left: 3px solid rgba(76,141,255,0.6); }
.whale-overlap-3 { border-left: 3px solid rgba(0,230,138,0.6); }
.whale-overlap-4 { border-left: 3px solid rgba(0,230,138,0.8); box-shadow: 0 0 8px rgba(0,230,138,0.15); }
.whale-overlap-pair { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.whale-overlap-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.whale-overlap-connector { color: var(--text-muted); font-size: 0.7rem; }
.whale-overlap-count { font-size: 0.72rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--accent-blue); margin-bottom: 2px; }
.whale-overlap-markets { font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tier Summary ── */
.whale-tier-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.whale-tier-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    transition: transform 0.15s;
}
.whale-tier-card:hover { transform: translateY(-2px); }
.whale-tier-icon { font-size: 1.6rem; margin-bottom: 4px; }
.whale-tier-name { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.whale-tier-count { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 6px; }
.whale-tier-stats { font-size: 0.72rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; }
.whale-tier-stats strong { font-family: 'JetBrains Mono', monospace; }

/* ═══════════════════════════════════════════════════════════════ */
/*  WHALE MODAL SYSTEM                                             */
/* ═══════════════════════════════════════════════════════════════ */

/* ── Clickable Elements ── */
.wm-clickable-name, .wm-clickable-market {
    color: var(--accent-blue);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, text-decoration 0.15s;
    font-weight: 500;
}
.wm-clickable-name:hover, .wm-clickable-market:hover {
    color: #6daaff;
    text-decoration: underline;
}
.wm-clickable-market { color: var(--text); }
.wm-clickable-market:hover { color: var(--accent-blue); }

/* ── Star Buttons ── */
.wm-star-inline {
    cursor: pointer;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.15);
    transition: color 0.2s, transform 0.2s;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.wm-star-inline:hover { color: #ffd700; transform: scale(1.2); }
.wm-star-inline.wm-starred { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.4); }

.wm-star-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.25);
    font-size: 1.3rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.wm-star-btn:hover { color: #ffd700; border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.05); }
.wm-star-btn.wm-starred { color: #ffd700; border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.08); text-shadow: 0 0 8px rgba(255,215,0,0.4); }

/* ── Overlay ── */
.wm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.wm-overlay.wm-visible { opacity: 1; visibility: visible; }

/* ── Modal Base ── */
.wm-modal {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
    animation: wmSlideUp 0.3s ease;
}
.wm-modal.wm-active { display: flex; }
@keyframes wmSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.wm-modal-large { width: 900px; max-width: 95vw; }
.wm-modal-medium { width: 700px; max-width: 95vw; }
.wm-modal-small { width: 500px; max-width: 95vw; }

/* ── Modal Header ── */
.wm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.wm-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wm-header h2 { margin: 0; font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-close {
    background: none; border: none; color: var(--text-muted); font-size: 1.5rem;
    cursor: pointer; width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.wm-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.wm-tier-badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px;
    border: 1px solid; flex-shrink: 0;
}

/* ── Modal Tabs ── */
.wm-tabs {
    display: flex; gap: 0; padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0; overflow-x: auto;
}
.wm-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); font-size: 0.8rem; font-weight: 500;
    padding: 10px 14px; cursor: pointer; white-space: nowrap;
    transition: all 0.15s;
}
.wm-tab:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.wm-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }

/* ── Tab Content ── */
.wm-tab-content { display: none; padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0; }
.wm-tab-content.active { display: block; }

/* ── Loading / Error ── */
.wm-loading { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 0.85rem; }
.wm-error { text-align: center; padding: 40px 0; color: var(--accent-red); font-size: 0.85rem; }

/* ── KPI Row (in modals) ── */
.wm-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 16px; }
.wm-kpi {
    text-align: center; padding: 12px 8px;
    background: rgba(255,255,255,0.02); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
}
.wm-kpi-val { font-size: 1.2rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.wm-kpi-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

/* ── Two-Column ── */
.wm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }

/* ── Card (in modals) ── */
.wm-card {
    background: rgba(255,255,255,0.015); border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04); padding: 12px 14px; margin-bottom: 12px;
}
.wm-card h3 { margin: 0 0 10px 0; font-size: 0.85rem; }

/* ── Direction Bar ── */
.wm-dir-bar-wrap { display: flex; border-radius: 6px; overflow: hidden; height: 28px; }
.wm-dir-bull { background: rgba(0,230,138,0.25); display: flex; align-items: center; justify-content: center; min-width: 5%; transition: width 0.5s; }
.wm-dir-bear { background: rgba(255,77,106,0.25); display: flex; align-items: center; justify-content: center; min-width: 5%; transition: width 0.5s; }
.wm-dir-bull span, .wm-dir-bear span { font-size: 0.72rem; font-weight: 600; }

/* ── Category Items ── */
.wm-cat-item { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.78rem; border-bottom: 1px solid rgba(255,255,255,0.03); }
.wm-cat-item:last-child { border-bottom: none; }

/* ── Market Items ── */
.wm-mkt-item { margin-bottom: 8px; }
.wm-mkt-title { font-size: 0.78rem; margin-bottom: 3px; }
.wm-mkt-bar-wrap { height: 8px; background: rgba(255,255,255,0.04); border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.wm-mkt-bar { height: 100%; border-radius: 4px; transition: width 0.5s; }
.wm-mkt-meta { font-size: 0.68rem; color: var(--text-dim); }

/* ── Table (in modals) ── */
.wm-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.wm-table th { text-align: left; padding: 8px 10px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.06); }
.wm-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.wm-table-scroll { max-height: 300px; overflow-y: auto; }

/* ── Feed (in modals) ── */
.wm-feed { max-height: 350px; overflow-y: auto; }
.wm-feed-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.76rem; }
.wm-feed-item:last-child { border-bottom: none; }
.wm-feed-icon { flex-shrink: 0; }
.wm-feed-text { flex: 1; min-width: 0; }
.wm-feed-time { color: var(--text-dim); font-size: 0.68rem; flex-shrink: 0; white-space: nowrap; }

/* ── Market Detail Links ── */
.wm-market-link-row { display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.wm-ext-link {
    display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px;
    background: rgba(76,141,255,0.1); color: var(--accent-blue); border-radius: 6px;
    text-decoration: none; font-size: 0.76rem; font-weight: 600;
    transition: all 0.15s;
}
.wm-ext-link:hover { background: rgba(76,141,255,0.2); }
.wm-condition-id { font-size: 0.68rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }

/* ── Back-Analysis ── */
.wm-backtest-header { margin-bottom: 16px; }
.wm-bt-info { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }
.wm-bt-months { font-weight: 700; color: var(--accent-blue); font-size: 1.1rem; }
.wm-bt-kpis { display: flex; gap: 20px; }
.wm-bt-kpi { text-align: center; }
.wm-bt-kpi strong { display: block; font-size: 1.1rem; font-family: 'JetBrains Mono', monospace; }
.wm-bt-kpi span { font-size: 0.68rem; color: var(--text-muted); }
.wm-bt-chart-bars {
    display: flex; align-items: flex-end; gap: 4px; height: 120px;
    padding: 8px 0; margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wm-bt-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.wm-bt-bar { width: 100%; max-width: 32px; border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.4s; }
.wm-bt-bar-label { font-size: 0.58rem; color: var(--text-dim); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

/* ── Activity Detail ── */
.wm-act-detail { padding: 8px 0; }
.wm-act-action { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.wm-act-grid { display: flex; flex-direction: column; gap: 8px; }
.wm-act-row { display: flex; align-items: center; gap: 12px; }
.wm-act-label { font-size: 0.72rem; color: var(--text-muted); width: 100px; flex-shrink: 0; font-weight: 600; }
.wm-act-row span, .wm-act-row a { font-size: 0.82rem; }

/* ═══════════════════════════════════════════════════════════════ */
/*  STRATEGY MENTOR CHAT                                           */
/* ═══════════════════════════════════════════════════════════════ */

.wm-mentor-wrap { display: flex; flex-direction: column; height: 450px; }
.wm-mentor-messages {
    flex: 1; overflow-y: auto; padding: 8px 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Welcome screen */
.wm-mentor-welcome { text-align: center; padding: 24px 16px; }
.wm-mentor-welcome .wm-mentor-avatar { font-size: 2.5rem; margin-bottom: 8px; }
.wm-mentor-welcome p { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 8px 0; }
.wm-mentor-suggestions { font-weight: 600; color: var(--text); margin-top: 12px !important; }
.wm-mentor-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.wm-chip {
    background: rgba(76,141,255,0.08); border: 1px solid rgba(76,141,255,0.2);
    color: var(--accent-blue); border-radius: 16px; padding: 6px 14px;
    font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
}
.wm-chip:hover { background: rgba(76,141,255,0.15); border-color: rgba(76,141,255,0.35); }

/* Messages */
.wm-msg { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
.wm-msg-user { justify-content: flex-end; }
.wm-msg-avatar { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.wm-msg-bubble {
    padding: 10px 14px; border-radius: 12px; font-size: 0.8rem;
    line-height: 1.5; max-width: 80%;
}
.wm-msg-user-bubble {
    background: rgba(76,141,255,0.15); border: 1px solid rgba(76,141,255,0.2);
    border-bottom-right-radius: 4px;
}
.wm-msg-asst-bubble {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-bottom-left-radius: 4px;
}
.wm-msg-asst-bubble h2, .wm-msg-asst-bubble h3, .wm-msg-asst-bubble h4 { margin: 8px 0 4px 0; font-size: 0.88rem; }
.wm-msg-asst-bubble ul { margin: 4px 0; padding-left: 16px; }
.wm-msg-asst-bubble li { margin-bottom: 2px; }
.wm-msg-asst-bubble code { background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.74rem; }
.wm-msg-asst-bubble strong { color: var(--text); }
.wm-msg-error { color: var(--accent-red); }

/* Typing indicator */
.wm-typing span { animation: wmBlink 1.4s infinite; }
.wm-typing span:nth-child(2) { animation-delay: 0.2s; }
.wm-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wmBlink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* Input row */
.wm-mentor-input-row {
    display: flex; gap: 8px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.wm-mentor-input {
    flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 10px 14px; color: var(--text); font-size: 0.82rem;
    outline: none; transition: border-color 0.2s;
}
.wm-mentor-input:focus { border-color: var(--accent-blue); }
.wm-mentor-input::placeholder { color: var(--text-dim); }
.wm-mentor-send {
    background: var(--accent-blue); border: none; color: #fff; border-radius: 8px;
    padding: 10px 16px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.wm-mentor-send:hover { background: #5a9fff; }
.wm-mentor-clear {
    background: none; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    padding: 10px; cursor: pointer; font-size: 0.9rem;
    transition: all 0.15s;
}
.wm-mentor-clear:hover { background: rgba(255,77,106,0.1); border-color: rgba(255,77,106,0.2); }

/* Cursor for clickable feed items */
.whale-feed-item { cursor: pointer; transition: background 0.15s; }
.whale-feed-item:hover { background: rgba(255,255,255,0.03); }

/* ── Whale Responsive ── */
@media (max-width: 1400px) {
    .whale-charts-row { grid-template-columns: 1fr 1fr; }
    .whale-overlap-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 1200px) {
    .whale-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .whale-charts-row { grid-template-columns: 1fr; }
    .whale-lb-card { grid-template-columns: 40px 160px 1fr 120px; }
    .whale-timeline-grid { grid-template-columns: repeat(12, 1fr); }
    .whale-momentum-panel { grid-template-columns: 1fr; }
    .whale-mom-item { grid-template-columns: 36px 1fr 160px; }
    .whale-tier-summary-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .whale-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .whale-gauge-row { grid-template-columns: 1fr; }
    .whale-lb-card { grid-template-columns: 1fr; gap: 6px; }
    .whale-lb-stats { flex-wrap: wrap; gap: 6px; }
    .whale-consensus-grid { grid-template-columns: 1fr; }
    .whale-toolbar { flex-direction: column; gap: 8px; align-items: flex-start; }
    .whale-toolbar-right { flex-wrap: wrap; }
    .whale-timeline-grid { grid-template-columns: repeat(8, 1fr); }
    .whale-momentum-panel { grid-template-columns: 1fr; }
    .whale-mom-item { grid-template-columns: 32px 1fr; gap: 6px; }
    .whale-mom-meta { display: none; }
    .whale-velocity-row { flex-direction: column; gap: 10px; }
    .whale-overlap-grid { grid-template-columns: 1fr; }
    .whale-alert-ticker { flex-direction: column; gap: 6px; }
    .whale-tier-summary-row { grid-template-columns: 1fr 1fr; }
    .wm-modal-large, .wm-modal-medium { width: 95vw; }
    .wm-two-col { grid-template-columns: 1fr; }
    .wm-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .wm-bt-kpis { flex-wrap: wrap; }
    .wm-mentor-wrap { height: 380px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/*  DOCUMENTATION TAB                                                 */
/* ═══════════════════════════════════════════════════════════════════ */

.docs-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    min-height: calc(100vh - 180px);
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

/* ── Sidebar ── */
.docs-sidebar {
    background: rgba(15,17,23,0.7);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 0;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.docs-search-box {
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    background: rgba(15,17,23,0.95);
    backdrop-filter: blur(10px);
    z-index: 2;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.docs-search-box input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85em;
    outline: none;
    transition: border-color 0.2s;
}
.docs-search-box input:focus {
    border-color: var(--accent);
}
.docs-search-box input::placeholder {
    color: var(--text-muted);
}

.docs-nav {
    padding: 8px 0 24px;
    display: flex;
    flex-direction: column;
}

.docs-nav-link {
    display: block;
    padding: 8px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85em;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    line-height: 1.4;
}
.docs-nav-link:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.03);
}
.docs-nav-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(99,102,241,0.06);
    font-weight: 600;
}

/* ── Main Content ── */
.docs-content {
    padding: 40px 48px 60px;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.docs-section {
    margin-bottom: 56px;
    scroll-margin-top: 24px;
}
.docs-section:last-of-type {
    margin-bottom: 24px;
}

.docs-section h1 {
    font-size: 2em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.docs-section h2 {
    font-size: 1.55em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(99,102,241,0.3);
    letter-spacing: -0.01em;
}
.docs-section h3 {
    font-size: 1.15em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 28px 0 12px;
}
.docs-section h4 {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.docs-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 14px;
    font-size: 0.95em;
}

.docs-version {
    color: var(--text-muted) !important;
    font-size: 0.9em !important;
    margin-bottom: 24px !important;
}

/* ── Feature Grid ── */
.docs-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 8px;
}
.docs-feature-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 20px;
    transition: border-color 0.2s, transform 0.2s;
}
.docs-feature-card:hover {
    border-color: rgba(99,102,241,0.3);
    transform: translateY(-2px);
}
.docs-feature-icon {
    font-size: 1.8em;
    margin-bottom: 10px;
}
.docs-feature-card h4 {
    margin-bottom: 8px;
}
.docs-feature-card p {
    font-size: 0.88em !important;
    margin: 0;
}

/* ── Tables ── */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 0.9em;
}
.docs-table thead th {
    background: rgba(99,102,241,0.1);
    color: var(--text-primary);
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 2px solid rgba(99,102,241,0.2);
    white-space: nowrap;
}
.docs-table tbody td {
    padding: 9px 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    line-height: 1.5;
    vertical-align: top;
}
.docs-table tbody tr:hover td {
    background: rgba(255,255,255,0.02);
}
.docs-table code {
    background: rgba(99,102,241,0.12);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
    color: #a5b4fc;
}
.docs-table-config td:first-child {
    white-space: nowrap;
    font-weight: 500;
}

/* ── Code Blocks ── */
.docs-code-block {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0;
    margin: 14px 0 20px;
    overflow-x: auto;
}
.docs-code-block pre {
    margin: 0;
    padding: 18px 22px;
    color: #c9d1d9;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85em;
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
}

/* ── Callouts ── */
.docs-callout {
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0 20px;
    border-left: 4px solid;
}
.docs-callout strong {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95em;
}
.docs-callout p {
    margin: 4px 0 0 !important;
    font-size: 0.9em !important;
}

.docs-callout-info {
    background: rgba(59,130,246,0.08);
    border-color: #3b82f6;
}
.docs-callout-info strong { color: #60a5fa; }

.docs-callout-warning {
    background: rgba(245,158,11,0.08);
    border-color: #f59e0b;
}
.docs-callout-warning strong { color: #fbbf24; }

.docs-callout-danger {
    background: rgba(239,68,68,0.08);
    border-color: #ef4444;
}
.docs-callout-danger strong { color: #f87171; }

.docs-callout-math {
    background: rgba(99,102,241,0.06);
    border-color: #6366f1;
}
.docs-callout-math strong { color: #a5b4fc; }

/* ── Unordered Lists ── */
.docs-ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 18px;
}
.docs-ul li {
    position: relative;
    padding: 6px 0 6px 24px;
    color: var(--text-secondary);
    font-size: 0.93em;
    line-height: 1.6;
}
.docs-ul li::before {
    content: '▸';
    position: absolute;
    left: 4px;
    color: var(--accent);
    font-weight: 700;
}
.docs-ul li strong {
    color: var(--text-primary);
}

/* ── Ordered List (custom) ── */
.docs-ordered-list {
    margin: 14px 0 20px;
}
.docs-list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.docs-list-item:last-child { border-bottom: none; }
.docs-list-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82em;
    color: #fff;
    margin-top: 1px;
}
.docs-list-item > div {
    color: var(--text-secondary);
    font-size: 0.93em;
    line-height: 1.6;
}
.docs-list-item > div strong {
    color: var(--text-primary);
}

/* ── Pipeline (vertical timeline) ── */
.docs-pipeline {
    margin: 20px 0;
    position: relative;
    padding-left: 40px;
}
.docs-pipeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), rgba(99,102,241,0.2));
}
.docs-pipeline-step {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.docs-step-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9em;
    color: var(--accent);
    position: relative;
    z-index: 1;
    margin-left: -40px;
}
.docs-step-body {
    padding: 4px 0 8px;
}
.docs-step-body h4 {
    color: var(--text-primary);
    margin-bottom: 4px;
}
.docs-step-body p {
    font-size: 0.88em !important;
    margin: 0 !important;
}

/* ── Risk Grid ── */
.docs-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0 20px;
}
.docs-risk-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.85em;
    line-height: 1.5;
}
.docs-risk-item:hover {
    border-color: rgba(239,68,68,0.25);
}
.docs-risk-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78em;
    margin-top: 1px;
}
.docs-risk-item > div {
    color: var(--text-secondary);
}
.docs-risk-item > div strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

/* ── Badges ── */
.docs-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.docs-badge-macro     { background: rgba(59,130,246,0.15); color: #60a5fa; }
.docs-badge-election  { background: rgba(168,85,247,0.15); color: #c084fc; }
.docs-badge-corp      { background: rgba(34,197,94,0.15);  color: #4ade80; }
.docs-badge-weather   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.docs-badge-sports    { background: rgba(239,68,68,0.15);  color: #f87171; }

/* ── Heat Level Badges ── */
.docs-heat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}
.docs-heat-0 { background: rgba(34,197,94,0.15); color: #4ade80; }
.docs-heat-1 { background: rgba(245,158,11,0.15); color: #fbbf24; }
.docs-heat-2 { background: rgba(249,115,22,0.15); color: #fb923c; }
.docs-heat-3 { background: rgba(239,68,68,0.15); color: #f87171; }

/* ── Docs Footer ── */
.docs-footer {
    text-align: center;
    padding: 32px 0 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 32px;
}
.docs-footer p {
    color: var(--text-muted) !important;
    font-size: 0.85em !important;
}

/* ── Responsive Docs ── */
@media (max-width: 1024px) {
    .docs-layout {
        grid-template-columns: 220px 1fr;
    }
    .docs-content {
        padding: 28px 32px 48px;
    }
    .docs-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .docs-risk-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }
    .docs-sidebar {
        position: relative;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .docs-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 12px 12px;
    }
    .docs-nav-link {
        padding: 5px 12px;
        border-left: none;
        border-radius: 6px;
        font-size: 0.8em;
    }
    .docs-nav-link.active {
        border-left-color: transparent;
        background: rgba(99,102,241,0.15);
    }
    .docs-content {
        padding: 24px 18px 40px;
        max-height: none;
    }
    .docs-feature-grid {
        grid-template-columns: 1fr;
    }
    .docs-risk-grid {
        grid-template-columns: 1fr;
    }
    .docs-section h1 {
        font-size: 1.5em;
    }
    .docs-section h2 {
        font-size: 1.3em;
    }
}


/* ═════════════════════════════════════════════════════════════════ */
/*  STRATEGIES & WALLETS TAB                                        */
/* ═════════════════════════════════════════════════════════════════ */

.sw-panel-main {
    padding: 0 !important;
    overflow: hidden;
}

/* ─── Toolbar ─────────────────────────────────────────────────── */
.sw-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
}
.sw-toolbar-left { display: flex; align-items: center; gap: 12px; }
.sw-toolbar-right { display: flex; align-items: center; gap: 8px; }
.sw-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.sw-pulse {
    font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
    color: #00e68a; background: rgba(0,230,138,0.12);
    animation: whalePulseGlow 2s ease-in-out infinite;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.sw-btn {
    padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: var(--text-secondary);
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    transition: all 0.15s ease;
}
.sw-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.sw-btn-sm { padding: 5px 10px; font-size: 0.75rem; }
.sw-btn-primary {
    background: rgba(76,141,255,0.15); color: #4c8dff; border-color: rgba(76,141,255,0.25);
}
.sw-btn-primary:hover { background: rgba(76,141,255,0.25); }
.sw-btn-secondary {
    background: rgba(0,230,138,0.1); color: #00e68a; border-color: rgba(0,230,138,0.2);
}
.sw-btn-secondary:hover { background: rgba(0,230,138,0.2); }
.sw-btn-danger {
    background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.2);
}
.sw-btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ─── KPI Row ─────────────────────────────────────────────────── */
.sw-kpi-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sw-kpi-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sw-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.sw-kpi-icon { font-size: 1.3rem; margin-bottom: 4px; }
.sw-kpi-val {
    font-size: 1.25rem; font-weight: 800;
    font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.sw-kpi-label {
    font-size: 0.7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;
}
.sw-kpi-green .sw-kpi-val { color: var(--accent-green); }
.sw-kpi-blue .sw-kpi-val { color: #4c8dff; }
.sw-kpi-purple .sw-kpi-val { color: #a855f7; }
.sw-kpi-orange .sw-kpi-val { color: #f59e0b; }
.sw-kpi-teal .sw-kpi-val { color: #06b6d4; }

/* ─── Sections ────────────────────────────────────────────────── */
.sw-section {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sw-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.sw-section-header h3 {
    margin: 0; font-size: 1rem; font-weight: 700;
}
.sw-section-controls { display: flex; gap: 8px; align-items: center; }
.sw-select {
    padding: 5px 10px; border-radius: 6px; font-size: 0.8rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary); cursor: pointer;
}
.sw-select option { background: var(--bg-card); color: var(--text-primary); }

/* ─── Wallet Cards Grid ──────────────────────────────────────── */
.sw-wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.sw-wallet-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sw-wallet-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}
.sw-wc-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.sw-wc-name { font-weight: 700; font-size: 0.95rem; }
.sw-wc-balance {
    font-size: 1.5rem; font-weight: 800; margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}
.sw-wc-stats {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    margin-bottom: 12px;
}
.sw-wc-stat {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.02); border-radius: 6px; padding: 6px 4px;
    font-size: 0.8rem;
}
.sw-wc-stat-label {
    font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.3px; margin-bottom: 2px;
}
.sw-wc-strategies {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.sw-wc-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
}

/* ─── Badges ──────────────────────────────────────────────────── */
.sw-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700;
}
.sw-badge-paper { background: rgba(76,141,255,0.12); color: #4c8dff; }
.sw-badge-live { background: rgba(0,230,138,0.12); color: #00e68a; }
.sw-badge-type {
    background: rgba(168,85,247,0.12); color: #a855f7;
    padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700;
}
.sw-strat-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600;
    border: 1px solid; background: rgba(255,255,255,0.025);
}
.sw-wallet-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 600;
    border: 1px solid; background: rgba(255,255,255,0.025);
}
.sw-badge-alloc {
    font-size: 0.6rem; opacity: 0.7; margin-left: 2px;
}
.sw-badge-paused {
    font-size: 0.65rem; opacity: 0.6; margin-left: 2px;
}
.sw-no-strat {
    font-size: 0.75rem; color: var(--text-muted); font-style: italic;
}

/* ─── Status Dots ─────────────────────────────────────────────── */
.sw-status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-left: 6px; vertical-align: middle;
}
.sw-dot-active { background: #00e68a; box-shadow: 0 0 6px rgba(0,230,138,0.5); }
.sw-dot-inactive { background: #5a5f78; }

/* ─── Strategy Cards Grid ─────────────────────────────────────── */
.sw-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.sw-strategy-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sw-strategy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}
.sw-sc-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.sw-sc-name { font-weight: 700; font-size: 0.95rem; }
.sw-sc-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 10px;
}
.sw-sc-desc {
    color: var(--text-muted); font-size: 0.75rem; font-style: italic;
}
.sw-sc-wallets {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}

/* ─── Wallet Performance Detail Panel ─────────────────────────── */
.sw-perf-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.sw-perf-kpi {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px; padding: 10px 8px;
}
.sw-pk-val { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sw-pk-label {
    font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.3px; margin-top: 2px;
}
.sw-perf-chart-wrap {
    position: relative; height: 240px; margin-bottom: 16px;
    background: rgba(255,255,255,0.015); border-radius: 10px; padding: 10px;
}

/* ─── Trades Table ────────────────────────────────────────────── */
.sw-trades-table {
    width: 100%; border-collapse: collapse; font-size: 0.8rem;
}
.sw-trades-table thead th {
    padding: 8px 10px; text-align: left;
    font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sw-trades-table tbody td {
    padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sw-trades-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}
.sw-trade-status {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
}
.sw-ts-open { background: rgba(76,141,255,0.15); color: #4c8dff; }
.sw-ts-closed { background: rgba(0,230,138,0.12); color: #00e68a; }
.sw-ts-expired { background: rgba(90,95,120,0.2); color: #9499b3; }

/* ─── P&L Color Classes (reuse) ───────────────────────────────── */
.pnl-positive { color: var(--accent-green) !important; }
.pnl-negative { color: var(--accent-red) !important; }

/* ─── Modal Styles (shared across Strategies tab modals) ──────── */
.sw-modal {
    max-width: 480px; width: 95%;
}
.sw-form-group {
    margin-bottom: 14px;
}
.sw-form-group label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 5px;
}
.sw-input {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 0.85rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); outline: none;
    transition: border-color 0.15s;
}
.sw-input:focus { border-color: #4c8dff; }
.sw-textarea {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 0.85rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); outline: none; resize: vertical;
    font-family: inherit;
}
.sw-textarea:focus { border-color: #4c8dff; }
.sw-select-full {
    width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 0.85rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary); cursor: pointer;
}
.sw-select-full option { background: var(--bg-card); color: var(--text-primary); }

/* ─── Type Toggle Buttons ─────────────────────────────────────── */
.sw-type-toggle, .sw-risk-toggle {
    display: flex; gap: 8px;
}
.sw-type-btn, .sw-risk-btn {
    flex: 1; padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted); cursor: pointer;
    transition: all 0.15s ease; text-align: center;
}
.sw-type-btn:hover, .sw-risk-btn:hover {
    background: rgba(255,255,255,0.06); color: var(--text-secondary);
}
.sw-type-btn.active {
    background: rgba(76,141,255,0.15); color: #4c8dff; border-color: rgba(76,141,255,0.3);
}
.sw-risk-btn.active {
    background: rgba(0,230,138,0.12); color: #00e68a; border-color: rgba(0,230,138,0.25);
}

/* ─── Color Picker ────────────────────────────────────────────── */
.sw-color-picker {
    display: flex; gap: 8px;
}
.sw-color-swatch {
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.sw-color-swatch:hover { transform: scale(1.15); }
.sw-color-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}

/* ─── Strategies Tab Responsive ───────────────────────────────── */
@media (max-width: 768px) {
    .sw-toolbar { flex-direction: column; gap: 10px; padding: 12px 16px; }
    .sw-toolbar-right { width: 100%; justify-content: stretch; }
    .sw-toolbar-right .sw-btn { flex: 1; text-align: center; }
    .sw-kpi-row { grid-template-columns: repeat(3, 1fr); padding: 12px 16px; }
    .sw-section { padding: 14px 16px; }
    .sw-wallet-grid { grid-template-columns: 1fr; }
    .sw-strategy-grid { grid-template-columns: 1fr; }
    .sw-wc-stats { grid-template-columns: repeat(3, 1fr); }
    .sw-perf-kpis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
    .sw-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .sw-wc-stats { grid-template-columns: repeat(2, 1fr); }
    .sw-perf-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   WHALE TRACKER ENHANCEMENTS v31
   ══════════════════════════════════════════════════════════════ */

/* ─── Conviction Trend Pills ─────────────────────────────────── */
.whale-trend-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.whale-trend-pill:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.whale-trend-rising {
    background: linear-gradient(135deg, rgba(0,200,83,0.22), rgba(0,200,83,0.10));
    color: #00c853;
    border: 1px solid rgba(0,200,83,0.30);
}
.whale-trend-falling {
    background: linear-gradient(135deg, rgba(255,82,82,0.22), rgba(255,82,82,0.10));
    color: #ff5252;
    border: 1px solid rgba(255,82,82,0.30);
}
.whale-trend-stable {
    background: linear-gradient(135deg, rgba(255,193,7,0.22), rgba(255,193,7,0.10));
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.30);
}
.whale-trend-new {
    background: linear-gradient(135deg, rgba(130,177,255,0.22), rgba(130,177,255,0.10));
    color: #82b1ff;
    border: 1px solid rgba(130,177,255,0.30);
}
.whale-trend-unknown {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.10);
}

/* ─── Signal Age Indicators ──────────────────────────────────── */
.whale-age-live {
    color: #00e676;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0,230,118,0.3);
}
.whale-age-recent {
    color: #ffc107;
    font-weight: 600;
}
.whale-age-old {
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ─── Hold Style Badges ──────────────────────────────────────── */
.whale-hold-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.whale-hold-scalper {
    background: linear-gradient(135deg, rgba(255,152,0,0.22), rgba(255,152,0,0.08));
    color: #ff9800;
    border: 1px solid rgba(255,152,0,0.30);
}
.whale-hold-swing {
    background: linear-gradient(135deg, rgba(33,150,243,0.22), rgba(33,150,243,0.08));
    color: #2196f3;
    border: 1px solid rgba(33,150,243,0.30);
}
.whale-hold-position {
    background: linear-gradient(135deg, rgba(156,39,176,0.22), rgba(156,39,176,0.08));
    color: #ce93d8;
    border: 1px solid rgba(156,39,176,0.30);
}
.whale-hold-hodler {
    background: linear-gradient(135deg, rgba(0,200,83,0.22), rgba(0,200,83,0.08));
    color: #00c853;
    border: 1px solid rgba(0,200,83,0.30);
}
.whale-hold-unknown {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.40);
    border: 1px solid rgba(255,255,255,0.10);
}

/* ─── Leaderboard Follow Signal Pills ────────────────────────── */
.whale-lb-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.whale-lb-follow-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.whale-follow-strong-follow, .whale-follow-strong_follow, .whale-follow-STRONG_FOLLOW {
    background: linear-gradient(135deg, rgba(0,200,83,0.25), rgba(0,200,83,0.10));
    color: #00c853;
    border: 1px solid rgba(0,200,83,0.35);
    box-shadow: 0 0 8px rgba(0,200,83,0.15);
}
.whale-follow-follow, .whale-follow-FOLLOW {
    background: linear-gradient(135deg, rgba(33,150,243,0.25), rgba(33,150,243,0.10));
    color: #42a5f5;
    border: 1px solid rgba(33,150,243,0.35);
}
.whale-follow-caution, .whale-follow-CAUTION {
    background: linear-gradient(135deg, rgba(255,152,0,0.25), rgba(255,152,0,0.10));
    color: #ff9800;
    border: 1px solid rgba(255,152,0,0.35);
}
.whale-follow-avoid, .whale-follow-AVOID {
    background: linear-gradient(135deg, rgba(255,82,82,0.25), rgba(255,82,82,0.10));
    color: #ff5252;
    border: 1px solid rgba(255,82,82,0.35);
}
.whale-follow-no-data, .whale-follow-no_data, .whale-follow-NO_DATA {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.40);
    border: 1px solid rgba(255,255,255,0.10);
}

/* ─── Whale Correlation Badges ───────────────────────────────── */
.whale-corr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.whale-corr-high {
    background: linear-gradient(135deg, rgba(0,200,83,0.22), rgba(0,200,83,0.08));
    color: #00c853;
    border: 1px solid rgba(0,200,83,0.30);
}
.whale-corr-mod {
    background: linear-gradient(135deg, rgba(255,193,7,0.22), rgba(255,193,7,0.08));
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.30);
}
.whale-corr-low {
    background: linear-gradient(135deg, rgba(255,82,82,0.22), rgba(255,82,82,0.08));
    color: #ff5252;
    border: 1px solid rgba(255,82,82,0.30);
}

/* ─── Agreement Rate Badge ───────────────────────────────────── */
.whale-agree-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.70rem;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.10);
    white-space: nowrap;
}

/* ─── Alert History ──────────────────────────────────────────── */
.whale-alert-history-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}
.whale-alert-history-list::-webkit-scrollbar { width: 5px; }
.whale-alert-history-list::-webkit-scrollbar-track { background: transparent; }
.whale-alert-history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }

.whale-ah-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.whale-ah-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.whale-ah-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.whale-ah-body {
    flex: 1;
    min-width: 0;
}
.whale-ah-message {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.4;
    word-break: break-word;
}
.whale-ah-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.whale-ah-type {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(130,177,255,0.15);
    color: #82b1ff;
    border: 1px solid rgba(130,177,255,0.25);
}
.whale-ah-time {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
}

/* Alert level pills */
.whale-ah-high {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(255,82,82,0.25), rgba(255,82,82,0.10));
    color: #ff5252;
    border: 1px solid rgba(255,82,82,0.35);
}
.whale-ah-medium {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(255,193,7,0.25), rgba(255,193,7,0.10));
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.35);
}
.whale-ah-low {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.50);
    border: 1px solid rgba(255,255,255,0.10);
}

/* ─── Alert History Count Badge ──────────────────────────────── */
#whale-alert-history-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 12px;
    font-size: 0.70rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(130,177,255,0.25), rgba(130,177,255,0.10));
    color: #82b1ff;
    border: 1px solid rgba(130,177,255,0.30);
    margin-left: 6px;
    vertical-align: middle;
}

/* ─── Whale Enhancements Responsive ──────────────────────────── */
@media (max-width: 768px) {
    .whale-ah-item { padding: 8px 10px; }
    .whale-ah-message { font-size: 0.78rem; }
    .whale-lb-bottom-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .whale-trend-pill { font-size: 0.68rem; padding: 2px 8px; }
    .whale-hold-badge { font-size: 0.66rem; padding: 2px 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID MARKET WHALE SCANNER
   ═══════════════════════════════════════════════════════════════ */

.scanner-master-panel {
    margin-top: 16px;
    border: 1px solid rgba(0,230,118,0.15);
    background: linear-gradient(135deg, rgba(0,230,118,0.03), rgba(130,177,255,0.03));
}

.scanner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.scanner-header-left h3 { margin: 0; font-size: 1.1rem; }
.scanner-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Status badge */
.scanner-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}
.scanner-status-active {
    background: linear-gradient(135deg, rgba(0,230,118,0.25), rgba(0,230,118,0.10));
    color: #00e676;
    border-color: rgba(0,230,118,0.4);
    animation: scannerPulse 1.5s ease-in-out infinite;
}
.scanner-status-ready {
    background: rgba(130,177,255,0.15);
    color: #82b1ff;
    border-color: rgba(130,177,255,0.3);
}
.scanner-status-error {
    background: rgba(255,82,82,0.15);
    color: #ff5252;
    border-color: rgba(255,82,82,0.3);
}
.scanner-status-idle {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.1);
}

@keyframes scannerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,230,118,0.4); }
    50% { box-shadow: 0 0 8px 4px rgba(0,230,118,0.15); }
}

/* Scanner buttons */
.scanner-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.scanner-btn-primary {
    background: linear-gradient(135deg, #4a8cff, #2d7aff);
    color: #fff;
    border-color: rgba(74,140,255,0.4);
}
.scanner-btn-primary:hover { background: linear-gradient(135deg, #5a9fff, #3d8aff); transform: translateY(-1px); }
.scanner-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.15);
}
.scanner-btn-secondary:hover { background: rgba(255,255,255,0.12); }
.scanner-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.scanner-btn-danger {
    background: linear-gradient(135deg, rgba(255,82,82,0.3), rgba(255,82,82,0.15));
    color: #ff5252;
    border-color: rgba(255,82,82,0.4);
}
.scanner-btn-danger:hover { background: linear-gradient(135deg, rgba(255,82,82,0.4), rgba(255,82,82,0.2)); }
.scanner-btn-ghost {
    background: transparent;
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.1);
    padding: 6px 10px;
}
.scanner-btn-ghost:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); }

/* Config panel */
.scanner-config-panel {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.scanner-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.scanner-config-item label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.scanner-config-item input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-size: 0.82rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.scanner-config-item input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Stats row */
.scanner-stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.scanner-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.2s;
}
.scanner-stat-card:hover { border-color: rgba(130,177,255,0.25); }
.scanner-stat-icon { font-size: 1.2rem; margin-bottom: 4px; }
.scanner-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.scanner-stat-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* Grade distribution bar */
.scanner-grade-bar-wrap {
    margin-top: 14px;
    padding: 10px 0;
}
.scanner-sub-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin: 0 0 8px 0;
}
.scanner-grade-bar {
    display: flex;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    gap: 2px;
}
.scanner-grade-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #000;
    min-width: 28px;
    transition: flex-grow 0.4s ease;
}
.scanner-grade-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.scanner-grade-legend {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.scanner-grade-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.70rem;
    color: rgba(255,255,255,0.6);
}
.scanner-grade-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Candidate table */
.scanner-candidates-wrap {
    margin-top: 14px;
}
.scanner-candidates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.scanner-candidate-count {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
}
.scanner-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.78rem;
}
.scanner-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}
.scanner-table tbody td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    vertical-align: middle;
}
.scanner-candidate-row {
    cursor: pointer;
    transition: background 0.15s;
}
.scanner-candidate-row:hover {
    background: rgba(255,255,255,0.04);
}
.scanner-rank {
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
}
.scanner-name-text {
    font-weight: 600;
    color: #fff;
}
.scanner-source-tag {
    display: inline-flex;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 8px;
    font-size: 0.60rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.08);
}
.scanner-score {
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.scanner-liquid-pct {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
}

/* Grade badges */
.scanner-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 800;
}
.grade-s {
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,215,0,0.1));
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.4);
    text-shadow: 0 0 6px rgba(255,215,0,0.4);
}
.grade-a {
    background: linear-gradient(135deg, rgba(0,230,118,0.25), rgba(0,230,118,0.08));
    color: #00e676;
    border: 1px solid rgba(0,230,118,0.35);
}
.grade-b {
    background: linear-gradient(135deg, rgba(79,195,247,0.25), rgba(79,195,247,0.08));
    color: #4fc3f7;
    border: 1px solid rgba(79,195,247,0.35);
}
.grade-c {
    background: linear-gradient(135deg, rgba(255,167,38,0.25), rgba(255,167,38,0.08));
    color: #ffa726;
    border: 1px solid rgba(255,167,38,0.35);
}
.grade-d {
    background: linear-gradient(135deg, rgba(239,83,80,0.25), rgba(239,83,80,0.08));
    color: #ef5350;
    border: 1px solid rgba(239,83,80,0.35);
}
.grade-f {
    background: rgba(97,97,97,0.2);
    color: #9e9e9e;
    border: 1px solid rgba(97,97,97,0.35);
}

/* Action buttons in table */
.scanner-actions {
    display: flex;
    gap: 4px;
    white-space: nowrap;
}
.scanner-action-btn {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.70rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    background: transparent;
    color: rgba(255,255,255,0.6);
}
.scanner-promote-btn {
    color: #00e676;
    border-color: rgba(0,230,118,0.2);
}
.scanner-promote-btn:hover {
    background: rgba(0,230,118,0.15);
    border-color: rgba(0,230,118,0.4);
}
.scanner-view-btn {
    color: #82b1ff;
    border-color: rgba(130,177,255,0.2);
}
.scanner-view-btn:hover {
    background: rgba(130,177,255,0.15);
    border-color: rgba(130,177,255,0.4);
}
.scanner-dismiss-btn {
    color: #ff5252;
    border-color: rgba(255,82,82,0.15);
    font-size: 0.75rem;
}
.scanner-dismiss-btn:hover {
    background: rgba(255,82,82,0.12);
    border-color: rgba(255,82,82,0.3);
}

/* Market detail expandable row */
.scanner-markets-detail td {
    padding: 6px 10px 10px 40px !important;
    background: rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.scanner-top-markets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.scanner-mkt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.70rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
}

/* PnL colors */
.pnl-pos { color: #00e676; font-weight: 600; }
.pnl-neg { color: #ff5252; font-weight: 600; }

/* Promoted whales section */
.scanner-promoted-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.scanner-promoted-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.scanner-promoted-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(0,230,118,0.04);
    border: 1px solid rgba(0,230,118,0.12);
    border-radius: 10px;
    font-size: 0.78rem;
}
.scanner-promoted-name {
    font-weight: 600;
    color: #fff;
    flex: 1;
}
.scanner-promoted-wr {
    color: rgba(255,255,255,0.6);
    font-size: 0.72rem;
}
.scanner-promoted-date {
    color: rgba(255,255,255,0.35);
    font-size: 0.68rem;
}

/* ── Pipeline Visualization ───────────────────────────── */
.scanner-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 12px;
    margin: 10px 0;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
}
.scanner-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    min-width: 100px;
    transition: all 0.3s;
}
.scanner-phase-done {
    background: rgba(0, 230, 118, 0.08);
    border-color: rgba(0, 230, 118, 0.25);
}
.scanner-phase-icon {
    font-size: 1.3rem;
}
.scanner-phase-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.scanner-phase-val {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}
.scanner-phase-arrow {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.2);
    flex-shrink: 0;
}
.scanner-phase-done .scanner-phase-val {
    color: #00e676;
}

/* ── Scanned Markets Grid ─────────────────────────────── */
.scanner-markets-wrap {
    margin: 10px 0;
}
.scanner-markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 0;
}
.scanner-mkt-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.scanner-mkt-q {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scanner-mkt-vol {
    font-size: 0.68rem;
    color: #4fc3f7;
    font-weight: 600;
}

/* Scanner responsive */
@media (max-width: 1200px) {
    .scanner-stats-row { grid-template-columns: repeat(4, 1fr); }
    .scanner-pipeline { gap: 2px; }
    .scanner-phase { min-width: 80px; padding: 8px 8px; }
    .scanner-phase-label { font-size: 0.58rem; }
}
@media (max-width: 768px) {
    .scanner-header { flex-direction: column; align-items: flex-start; }
    .scanner-header-right { width: 100%; justify-content: flex-start; }
    .scanner-stats-row { grid-template-columns: repeat(2, 1fr); }
    .scanner-pipeline { flex-wrap: wrap; }
    .scanner-phase-arrow { display: none; }
    .scanner-phase { min-width: 70px; }
    .scanner-table { font-size: 0.72rem; }
    .scanner-table thead th { padding: 6px 6px; font-size: 0.62rem; }
    .scanner-table tbody td { padding: 8px 6px; }
    .scanner-config-grid { grid-template-columns: repeat(2, 1fr); }
    .scanner-markets-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Continuous Scan Live Status Bar ────────────────────────── */
.scanner-live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 0 16px 12px;
    background: linear-gradient(135deg, rgba(0,230,118,0.08), rgba(0,230,118,0.02));
    border: 1px solid rgba(0,230,118,0.2);
    border-radius: 10px;
    font-size: 0.76rem;
    color: #b0ffcb;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.scanner-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00e676;
    box-shadow: 0 0 8px rgba(0,230,118,0.6);
    animation: scannerPulse 1.5s ease-in-out infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* ── API Pool Panel ─────────────────────────────────────────── */
.scanner-pool-panel {
    margin: 0 16px 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(156,39,176,0.06), rgba(103,58,183,0.04));
    border: 1px solid rgba(156,39,176,0.18);
    border-radius: 12px;
}
.scanner-pool-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.scanner-pool-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ce93d8;
    letter-spacing: 0.3px;
}
.scanner-pool-summary {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.pool-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.pool-strat { color: #ce93d8; border-color: rgba(156,39,176,0.3); }
.pool-rpm { color: #ffd740; border-color: rgba(255,215,64,0.3); }
.pool-healthy { color: #69f0ae; border-color: rgba(105,240,174,0.3); }
.pool-reqs { color: #81d4fa; border-color: rgba(129,212,250,0.3); }
.pool-err-low { color: #69f0ae; border-color: rgba(105,240,174,0.3); }
.pool-err-med { color: #ffa726; border-color: rgba(255,167,38,0.3); }
.pool-err-high { color: #ef5350; border-color: rgba(239,83,80,0.3); }

.scanner-pool-endpoints {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.pool-ep-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 10px 12px;
    transition: all 0.2s;
}
.pool-ep-card:hover { border-color: rgba(156,39,176,0.3); }
.pool-ep-down { opacity: 0.5; border-color: rgba(239,83,80,0.3); }
.pool-ep-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.74rem;
}
.pool-ep-health { font-size: 0.6rem; }
.pool-ep-name {
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    flex: 1;
}
.pool-ep-rpm {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}
.pool-ep-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.pool-ep-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.pool-ep-stats {
    display: flex;
    gap: 8px;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
}
.pool-ep-fails { color: #ef5350; }
.pool-ep-error {
    margin-top: 4px;
    font-size: 0.58rem;
    color: rgba(239,83,80,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Whale Profile: Address Row ─────────────────────────────── */
.wm-whale-address-row {
    padding: 4px 0 8px;
    text-align: center;
}
.wm-addr-text {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.4px;
    user-select: all;
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}
.wm-addr-text:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.12);
}

/* ── Whale Profile: Live Stats Card ─────────────────────────── */
.wm-live-stats-card {
    margin: 12px 0;
    padding: 16px !important;
    background: linear-gradient(135deg, rgba(76,141,255,0.08), rgba(168,85,247,0.05)) !important;
    border: 1px solid rgba(76,141,255,0.15) !important;
}
.wm-live-stats-card h3 {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: #82b1ff;
}
.wm-live-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.wm-ls-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.wm-ls-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.wm-ls-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

@media (max-width: 768px) {
    .wm-live-stats-grid { grid-template-columns: repeat(2, 1fr); }
}