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

        :root {
            --bg-primary: #0a0e17;
            --bg-secondary: #111827;
            --bg-card: #1a2236;
            --bg-card-hover: #1e293b;
            --border: #1e293b;
            --border-accent: #334155;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent-blue: #3b82f6;
            --accent-cyan: #06b6d4;
            --green-bright: #22c55e;
            --green-bg: rgba(34, 197, 94, 0.12);
            --green-text: #4ade80;
            --red-bright: #ef4444;
            --red-bg: rgba(239, 68, 68, 0.12);
            --red-text: #f87171;
            --yellow-bg: rgba(234, 179, 8, 0.12);
            --yellow-text: #fbbf24;
            --orange-bg: rgba(251, 146, 60, 0.12);
            --orange-text: #fb923c;
            --purple-bg: rgba(168, 85, 247, 0.12);
            --purple-text: #a78bfa;
            --cyan-bg: rgba(6, 182, 212, 0.12);
            --cyan-text: #22d3ee;
            --font-main: 'Inter', -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', 'Consolas', monospace;
        }

        body {
            font-family: var(--font-main);
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
        }

        /* ===== TOP NAV ===== */
        .topbar {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
            border-bottom: 1px solid var(--border);
            padding: 10px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(12px);
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo {
            font-size: 18px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo span {
            font-weight: 400;
            opacity: 0.7;
        }

        .nav-links {
            display: flex;
            gap: 8px;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .nav-links a:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        .nav-links a.active {
            color: var(--accent-cyan);
            background: rgba(6, 182, 212, 0.1);
            border: 1px solid rgba(6, 182, 212, 0.2);
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 13px;
        }

        .recovery-chip {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid var(--border-accent);
            color: var(--text-secondary);
            background: rgba(148, 163, 184, 0.12);
            max-width: 280px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .recovery-chip.ok {
            color: var(--green-text);
            border-color: rgba(34, 197, 94, 0.35);
            background: var(--green-bg);
        }

        .recovery-chip.running {
            color: var(--yellow-text);
            border-color: rgba(251, 191, 36, 0.35);
            background: var(--yellow-bg);
        }

        .recovery-chip.blocked,
        .recovery-chip.error {
            color: var(--red-text);
            border-color: rgba(239, 68, 68, 0.35);
            background: var(--red-bg);
        }

        .spot-display {
            font-family: var(--font-mono);
            font-weight: 600;
            font-size: 15px;
            color: var(--accent-cyan);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
            animation: pulse 2s infinite;
        }

        .status-dot.live {
            background: var(--green-bright);
        }

        .status-dot.stale {
            background: var(--yellow-text);
        }

        .status-dot.dead {
            background: var(--red-bright);
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        /* ===== MAIN LAYOUT ===== */
        .main {
            max-width: 1440px;
            margin: 0 auto;
            padding: 20px 24px;
        }

        /* ===== TRADE SIGNAL HERO ===== */
        .signal-hero {
            border-radius: 16px;
            padding: 20px 24px;
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 32px;
            border: 2px solid transparent;
            transition: all 0.3s;
        }

        .signal-hero.no-signal {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-color: var(--border-accent);
        }

        .signal-hero.active-signal {
            background: linear-gradient(135deg, #0a2e0a 0%, #1a3a1a 100%);
            border-color: var(--green-bright);
            box-shadow: 0 0 40px rgba(34, 197, 94, 0.15);
        }

        .signal-hero.active-signal.short-signal {
            background: linear-gradient(135deg, #2e0a0a 0%, #3a1a1a 100%);
            border-color: var(--red-bright);
            box-shadow: 0 0 40px rgba(239, 68, 68, 0.15);
        }

        .hero-left {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .signal-info {
            flex: 1;
            min-width: 0;
        }

        .signal-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .signal-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .signal-direction {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .dir-long {
            background: var(--green-bg);
            color: var(--green-text);
        }

        .dir-short {
            background: var(--red-bg);
            color: var(--red-text);
        }

        .dir-neutral {
            background: rgba(100, 116, 139, 0.2);
            color: var(--text-muted);
        }

        /* Score breakdown bar */
        .score-breakdown {
            display: flex;
            gap: 6px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        .score-chip {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            cursor: help;
            position: relative;
        }

        .score-chip .chip-val {
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 13px;
        }

        .score-chip.full {
            background: var(--green-bg);
            border-color: rgba(34, 197, 94, 0.3);
            color: var(--green-text);
        }

        .score-chip.partial {
            background: var(--yellow-bg);
            border-color: rgba(251, 191, 36, 0.3);
            color: var(--yellow-text);
        }

        .score-chip.zero {
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.2);
            color: var(--red-text);
        }

        /* Score gauge */
        .score-gauge {
            width: 140px;
            text-align: center;
            flex-shrink: 0;
        }

        .gauge-ring {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: relative;
            margin: 0 auto 8px;
        }

        .gauge-ring svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }

        .gauge-ring circle {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
        }

        .gauge-bg {
            stroke: #1e293b;
        }

        .gauge-fill {
            stroke: var(--accent-cyan);
            transition: stroke-dashoffset 0.8s ease;
        }

        .gauge-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 28px;
            font-weight: 900;
            font-family: var(--font-mono);
        }

        .gauge-max {
            font-size: 11px;
            color: var(--text-muted);
        }

        .gauge-need {
            font-size: 11px;
            margin-top: 4px;
            font-weight: 600;
        }

        /* ===== REASONING + ATM PANEL (new) ===== */
        .reasoning-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

        .reasoning-panel,
        .atm-panel {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
        }

        .panel-title {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .panel-title .icon {
            font-size: 16px;
        }

        .reason-list {
            list-style: none;
            padding: 0;
        }

        .reason-list li {
            padding: 6px 0;
            border-bottom: 1px solid rgba(30, 41, 59, 0.5);
            font-size: 13px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .reason-list li:last-child {
            border-bottom: none;
        }

        .reason-section-header {
            padding: 8px 0 4px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-muted);
            border-bottom: none !important;
            display: block;
        }

        .reason-summary {
            padding: 10px 14px;
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .reason-summary.good {
            background: var(--green-bg);
            color: var(--green-text);
        }

        .reason-summary.mid {
            background: var(--yellow-bg);
            color: var(--yellow-text);
        }

        .reason-summary.low {
            background: rgba(100, 116, 139, 0.15);
            color: var(--text-secondary);
        }

        .reason-icon {
            flex-shrink: 0;
            font-size: 14px;
            margin-top: 1px;
        }

        .reason-icon.pass {
            color: var(--green-text);
        }

        .reason-icon.fail {
            color: var(--red-text);
        }

        .reason-icon.warn {
            color: var(--yellow-text);
        }

        .reason-icon.block {
            color: var(--red-text);
        }

        .reason-text {
            color: var(--text-secondary);
        }

        .reason-text strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .atm-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
        }

        .atm-metric {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }

        .atm-metric-label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .atm-metric-value {
            font-family: var(--font-mono);
            font-size: 18px;
            font-weight: 700;
        }

        .atm-metric-sub {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .atm-straddle {
            margin-top: 12px;
            padding: 12px;
            border-radius: 8px;
            background: rgba(168, 85, 247, 0.08);
            border: 1px solid rgba(168, 85, 247, 0.15);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .atm-straddle-label {
            font-size: 11px;
            color: var(--purple-text);
            font-weight: 600;
        }

        .atm-straddle-sub {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .atm-straddle-value {
            font-family: var(--font-mono);
            font-size: 20px;
            font-weight: 700;
            color: var(--purple-text);
        }

        /* Kill switch badges (inline with score chips) */
        .kill-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
        }

        .kill-badge.active {
            background: var(--red-bg);
            color: var(--red-text);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .kill-badge.warn-badge {
            background: var(--yellow-bg);
            color: var(--yellow-text);
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .kill-badge.clear {
            background: rgba(34, 197, 94, 0.08);
            color: var(--green-text);
            border: 1px solid rgba(34, 197, 94, 0.15);
        }

        .kill-badge.tip {
            border-bottom: none;
        }

        .chip-separator {
            width: 1px;
            height: 18px;
            background: var(--border-accent);
            margin: 0 4px;
            align-self: center;
            display: inline-block;
            vertical-align: middle;
        }

        /* ===== ENGINE CARDS GRID ===== */
        .engines-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        .engine-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            transition: all 0.2s;
        }

        .engine-card:hover {
            border-color: var(--border-accent);
        }

        .engine-card.alert {
            border-color: rgba(239, 68, 68, 0.4);
        }

        .engine-card.active-alert {
            border-color: var(--red-bright);
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
        }

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

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

        .card-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .icon-gamma {
            background: var(--purple-bg);
        }

        .icon-stress {
            background: var(--red-bg);
        }

        .icon-seller {
            background: var(--orange-bg);
        }

        .icon-gap {
            background: var(--cyan-bg);
        }

        .card-title {
            font-size: 14px;
            font-weight: 700;
        }

        .card-subtitle {
            font-size: 11px;
            color: var(--text-muted);
        }

        .card-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .status-positive {
            background: var(--green-bg);
            color: var(--green-text);
        }

        .status-negative {
            background: var(--red-bg);
            color: var(--red-text);
        }

        .status-neutral {
            background: rgba(100, 116, 139, 0.15);
            color: var(--text-muted);
        }

        .status-warning {
            background: var(--yellow-bg);
            color: var(--yellow-text);
        }

        .status-stress {
            background: var(--orange-bg);
            color: var(--orange-text);
        }

        .status-offline {
            background: rgba(100, 116, 139, 0.1);
            color: #475569;
        }

        .card-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .metric {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            padding: 8px 12px;
        }

        .metric-label {
            font-size: 10px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        .metric-value {
            font-family: var(--font-mono);
            font-size: 14px;
            font-weight: 600;
        }

        .metric-value.positive {
            color: var(--green-text);
        }

        .metric-value.negative {
            color: var(--red-text);
        }

        .metric-value.warn {
            color: var(--yellow-text);
        }

        .metric-value.cyan {
            color: var(--cyan-text);
        }

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

        .metric-full {
            grid-column: 1 / -1;
        }

        .metric-explain {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px;
            font-style: italic;
            line-height: 1.3;
        }

        /* ===== SIGNAL HISTORY TABLE ===== */
        .history-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
        }

        .history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .history-title {
            font-size: 16px;
            font-weight: 700;
        }

        .history-subtitle {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .history-filters {
            display: flex;
            gap: 8px;
        }

        .filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            padding: 5px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .filter-btn:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .filter-btn.active {
            background: var(--accent-blue);
            color: white;
            border-color: var(--accent-blue);
        }

        .history-table-wrap {
            overflow-x: auto;
        }

        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
            min-width: 1100px;
        }

        .history-table th {
            text-align: left;
            padding: 8px 10px;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 10px;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
            cursor: help;
        }

        .history-table td {
            padding: 8px 10px;
            border-bottom: 1px solid rgba(30, 41, 59, 0.5);
            font-family: var(--font-mono);
            font-size: 12px;
            white-space: nowrap;
        }

        .history-table tr:hover td {
            background: rgba(255, 255, 255, 0.04);
        }

        .history-table tr:nth-child(even) td {
            background: rgba(255, 255, 255, 0.015);
        }

        .history-table tr:nth-child(even):hover td {
            background: rgba(255, 255, 255, 0.04);
        }

        .history-table .signal-fired td {
            background: rgba(34, 197, 94, 0.08) !important;
        }

        .history-table .signal-fired:hover td {
            background: rgba(34, 197, 94, 0.12) !important;
        }

        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
        }

        .badge-green {
            background: var(--green-bg);
            color: var(--green-text);
        }

        .badge-red {
            background: var(--red-bg);
            color: var(--red-text);
        }

        .badge-yellow {
            background: var(--yellow-bg);
            color: var(--yellow-text);
        }

        .badge-muted {
            background: rgba(100, 116, 139, 0.15);
            color: var(--text-muted);
        }

        /* Trade P/L styles */
        .trade-result {
            font-weight: 700;
            font-size: 11px;
            white-space: nowrap;
        }

        .trade-target {
            color: var(--green-text);
        }

        .trade-sl {
            color: var(--red-text);
        }

        .trade-open {
            color: var(--yellow-text);
        }

        .pl-summary {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .pl-card {
            flex: 1;
            min-width: 130px;
            padding: 10px 14px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            text-align: center;
        }

        .pl-card-title {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .pl-card-pnl {
            font-family: var(--font-mono);
            font-size: 18px;
            font-weight: 800;
        }

        .pl-card-stats {
            font-size: 10px;
            color: var(--text-secondary);
            margin-top: 2px;
        }

        .pl-card-winrate {
            font-size: 11px;
            font-weight: 600;
            margin-top: 2px;
        }

        /* ===== TOOLTIP ===== */
        .tip {
            position: relative;
            cursor: help;
            border-bottom: 1px dotted var(--text-muted);
        }

        .tip:hover::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            white-space: normal;
            width: max-content;
            max-width: 300px;
            z-index: 1000;
            border: 1px solid var(--border-accent);
            font-style: normal;
            font-weight: 400;
            font-family: var(--font-main);
            line-height: 1.4;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }

        /* ===== FOOTER ===== */
        .footer {
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
            font-size: 11px;
            border-top: 1px solid var(--border);
            margin-top: 20px;
        }

        .updated-at {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-muted);
        }

        .engine-offline {
            text-align: center;
            padding: 20px;
            color: #475569;
            font-size: 13px;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .main {
                padding: 12px;
            }

            .signal-hero {
                flex-direction: column;
                text-align: center;
                padding: 20px;
                gap: 16px;
            }

            .hero-left {
                flex-direction: column;
            }

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

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

            .score-breakdown {
                justify-content: center;
            }

            .topbar {
                flex-direction: column;
                gap: 8px;
                padding: 8px 12px;
            }

            .card-metrics {
                grid-template-columns: 1fr;
            }

            .atm-metrics {
                grid-template-columns: 1fr;
            }
        }