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

/* ═══════════════════════════════════════════════
   CHIMERA ALPHA — Agent IDE Design System v3.0
   ═══════════════════════════════════════════════ */

:root {
    --bg-dark: #020203;
    --bg-panel: #0a0a0c;
    --bg-elevated: #111116;
    --bg-input: #0c0c10;

    --primary-h: 174;
    --primary-s: 100%;
    --primary-l: 45%;
    --primary-neon: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
    --primary-subtle: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);

    --secondary-h: 265;
    --secondary-s: 100%;
    --secondary-l: 60%;
    --secondary-neon: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --secondary-glow: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), 0.15);

    --success-neon: #00e68a;
    --success-glow: rgba(0, 230, 138, 0.15);
    --danger-neon: #ff3b5c;
    --danger-glow: rgba(255, 59, 92, 0.15);
    --warning-neon: #f5a623;
    --warning-glow: rgba(245, 166, 35, 0.15);

    --surface-glass: rgba(255, 255, 255, 0.025);
    --surface-glass-border: rgba(255, 255, 255, 0.07);
    --surface-glass-hover: rgba(255, 255, 255, 0.05);
    --surface-elevated: rgba(255, 255, 255, 0.035);

    --text-main: #f0f2f5;
    --text-secondary: #c8d0da;
    --text-muted: #98a4b3;
    --text-dim: #6b7a8a;

    --radius-xl: 20px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --radius-xs: 4px;

    --trans-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --trans-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --trans-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 30px -5px var(--primary-glow);
}

/* ── Light Theme ─────────────────────────── */
[data-theme="light"] {
    --bg-dark: #f5f6fa;
    --bg-panel: #ffffff;
    --bg-elevated: #f0f1f5;
    --bg-input: #ebedf2;
    --surface-glass: rgba(0, 0, 0, 0.03);
    --surface-glass-border: rgba(0, 0, 0, 0.08);
    --surface-glass-hover: rgba(0, 0, 0, 0.06);
    --surface-elevated: rgba(0, 0, 0, 0.04);
    --text-main: #1a1d27;
    --text-secondary: #3d4557;
    --text-muted: #6b7280;
    --text-dim: #9ca3af;
    --text-primary: #1a1d27;
    --text-bright: #0f111a;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --primary-neon: hsl(174, 85%, 35%);
    --primary-glow: hsla(174, 85%, 35%, 0.12);
    --primary-subtle: hsla(174, 85%, 35%, 0.06);
    --success-neon: #059669;
    --danger-neon: #dc2626;
    --warning-neon: #d97706;
}
/* ── VFX: Dark Reptilian Beast ── */
#chimera-vfx-gl { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#chimera-vfx-embers { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; opacity: 0.8; }
body { position: relative; z-index: 2; background: transparent !important; }
.sidebar { position: relative; background: rgba(1, 2, 1, 0.45) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(0, 255, 100, 0.06) !important; }
.panel, .right-panel { position: relative; background: rgba(1, 2, 1, 0.40) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.tab-content { background: transparent !important; }
.ticker-bar { background: rgba(1, 2, 1, 0.55) !important; backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 255, 100, 0.05) !important; }
#chimera-footer { background: rgba(1, 2, 1, 0.55) !important; backdrop-filter: blur(10px); }
.chat-input-area { background: rgba(1, 3, 2, 0.40) !important; backdrop-filter: blur(16px); }
.main-content, .center-panel { background: transparent !important; }
.welcome-section { background: transparent !important; }
.suggestion-card { background: rgba(1, 4, 2, 0.35) !important; backdrop-filter: blur(14px); border: 1px solid rgba(0, 200, 80, 0.08) !important; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.suggestion-card:hover { border-color: rgba(0, 230, 138, 0.25) !important; box-shadow: 0 0 25px -5px rgba(0, 230, 138, 0.15), inset 0 0 20px -10px rgba(0, 230, 138, 0.08) !important; background: rgba(0, 8, 4, 0.45) !important; }

/* ── Vein-pulse border glow (rotating, predatory) ── */
@property --glow-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes rotateGlow { to { --glow-angle: 360deg; } }

.sidebar::before, .right-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
    background: conic-gradient(from var(--glow-angle), transparent 50%, rgba(0,180,80,0.3) 60%, rgba(200,60,10,0.2) 70%, transparent 80%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude; -webkit-mask-composite: xor;
    animation: rotateGlow 12s linear infinite;
    opacity: 0.5;
}

/* Nav items: predatory green */
.nav-item.active { text-shadow: 0 0 6px rgba(0, 200, 80, 0.4); }
.nav-item:hover { text-shadow: 0 0 8px rgba(200, 80, 20, 0.3); }

/* ── Predatory breathing (very subtle) ── */
@keyframes beastBreathe { 0%, 100% { filter: brightness(1.0); } 50% { filter: brightness(1.02); } }
body { animation: beastBreathe 8s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════
   CHIMERA LIVING CONTROLS — Aquatic creature theme
   Every control feels alive, organic, part of the beast
   ═══════════════════════════════════════════════════════════════ */

/* ── Buttons: bioluminescent press ── */
.order-submit-btn {
    position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.order-submit-btn::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 0; height: 0; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s;
    opacity: 0;
}
.order-submit-btn:active::after {
    width: 300px; height: 300px; opacity: 0;
    transition: 0s;
}
.order-submit-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.15);
}
.order-submit-btn:active {
    transform: translateY(1px) scale(0.98) !important;
    filter: brightness(0.9);
}

/* BUY button: green bioluminescence */
.order-submit-btn.buy:hover {
    box-shadow: 0 0 25px rgba(0,230,138,0.3), 0 0 60px rgba(0,230,138,0.1), inset 0 0 15px rgba(0,230,138,0.1) !important;
}
/* SELL button: predatory red */
.order-submit-btn.sell:hover {
    box-shadow: 0 0 25px rgba(255,59,92,0.3), 0 0 60px rgba(255,59,92,0.1), inset 0 0 15px rgba(255,59,92,0.1) !important;
}

/* Small buttons: subtle organism response */
.btn-sm { transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.btn-sm:hover { transform: translateY(-1px); filter: brightness(1.1); }
.btn-sm:active { transform: translateY(0px) scale(0.97); }

/* Toggle buttons: living state switch */
.toggle-btn { transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
.toggle-btn:hover { transform: scale(1.05); }
.toggle-btn.active {
    box-shadow: 0 0 15px var(--primary-glow), 0 0 40px rgba(0,230,138,0.08) !important;
}

/* PAPER/LIVE mode: organic pulse on active */
.mode-switch-btn { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.mode-switch-btn.active-paper {
    animation: modePulse 3s ease-in-out infinite;
}
.mode-switch-btn.active-live {
    animation: modePulseLive 2s ease-in-out infinite;
}
@keyframes modePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(245,166,35,0.15); }
    50% { box-shadow: 0 0 16px rgba(245,166,35,0.3); }
}
@keyframes modePulseLive {
    0%, 100% { box-shadow: 0 0 8px rgba(255,59,92,0.2); }
    50% { box-shadow: 0 0 20px rgba(255,59,92,0.4); }
}

/* ── Inputs: living focus state ── */
.order-input:focus, #chat-input:focus, .input-box:focus-within {
    border-color: rgba(0, 200, 100, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(0, 200, 100, 0.08), 0 0 20px -5px rgba(0, 200, 100, 0.15) !important;
}
.input-box {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 200, 100, 0.06) !important;
}
.input-box:focus-within {
    border-color: rgba(0, 200, 100, 0.25) !important;
    background: rgba(2, 8, 4, 0.9) !important;
}

/* ── Cards: creature scale interaction ── */
.radar-opp-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 180, 80, 0.06) !important;
}
.radar-opp-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0, 200, 100, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 200, 100, 0.08), 0 0 40px -10px rgba(0, 200, 100, 0.05) !important;
    background: rgba(0, 20, 10, 0.5) !important;
}
.radar-opp-card:active {
    transform: translateY(0px) scale(0.99) !important;
}

.stat-card, .balance-card, .p-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 180, 80, 0.05) !important;
}
.stat-card:hover, .balance-card:hover, .p-card:hover {
    border-color: rgba(0, 200, 100, 0.15) !important;
    box-shadow: 0 0 20px -5px rgba(0, 200, 100, 0.1) !important;
    transform: translateY(-1px);
}

/* Suggestion cards: organism curiosity */
.suggestion-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.suggestion-card:hover {
    transform: translateY(-3px) scale(1.01) !important;
    border-color: rgba(0, 200, 100, 0.2) !important;
    box-shadow: 0 8px 30px rgba(0, 200, 100, 0.08), 0 0 60px -15px rgba(0, 200, 100, 0.06), inset 0 0 30px -15px rgba(0, 200, 100, 0.04) !important;
}

/* Strategy widget: living organism card */
.strategy-widget {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 255, 136, 0.15) !important;
}
.strategy-widget:hover {
    border-color: rgba(0, 255, 136, 0.3) !important;
    box-shadow: 0 0 25px -5px rgba(0, 255, 136, 0.15) !important;
}

/* ── Navigation: predatory eye tracking ── */
.nav-item {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    border-left: 2px solid transparent;
}
.nav-item:hover {
    background: rgba(0, 200, 100, 0.04) !important;
    border-left-color: rgba(0, 200, 100, 0.2);
    padding-left: 18px !important;
    text-shadow: 0 0 10px rgba(0, 200, 100, 0.3);
}
.nav-item.active {
    background: rgba(0, 200, 100, 0.06) !important;
    border-left-color: var(--success-neon) !important;
    text-shadow: 0 0 8px rgba(0, 230, 138, 0.4);
}

/* ── Status indicators: living pulse ── */
@keyframes creaturePulse {
    0%, 100% { box-shadow: 0 0 4px currentColor; opacity: 1; }
    50% { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor; opacity: 0.7; }
}
#status-indicator.online {
    animation: creaturePulse 3s ease-in-out infinite !important;
}
.strategy-widget-dot.running {
    animation: creaturePulse 2.5s ease-in-out infinite !important;
}

/* ── CHIMERA title: living text ── */
#header h1, .chimera-title {
    background: linear-gradient(135deg, var(--success-neon) 0%, var(--primary-neon) 50%, rgba(255,255,255,0.8) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 8px rgba(0, 200, 100, 0.3));
}

/* ── Ticker bar: data flowing through veins ── */
.ticker-bar {
    border-bottom: 1px solid rgba(0, 200, 100, 0.05) !important;
}

/* ── Scrollbar: chimera aesthetic ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(0, 10, 5, 0.3); }
::-webkit-scrollbar-thumb {
    background: rgba(0, 200, 100, 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 200, 100, 0.3); }

/* ── Toast notifications: organism alert ── */
.toast {
    border-left: 3px solid var(--success-neon) !important;
    background: rgba(2, 8, 4, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px -10px rgba(0, 200, 100, 0.1) !important;
}
.toast.success { border-left-color: var(--success-neon) !important; }
.toast.error { border-left-color: var(--danger-neon) !important; }
.toast.warning { border-left-color: var(--warning-neon) !important; }

/* ── Chat messages: emerging from the deep ── */
@keyframes swimIn {
    0% { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(2px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.msg { animation: swimIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; }

/* ── Footer: deep ocean floor ── */
#chimera-footer {
    border-top: 1px solid rgba(0, 200, 100, 0.04) !important;
}

/* ── Value flash: bioluminescent highlight ── */
@keyframes bioFlash {
    0% { background: rgba(0, 230, 138, 0.2); }
    100% { background: transparent; }
}
.val-flash { animation: bioFlash 0.8s ease-out !important; }

@media (prefers-reduced-motion: reduce) {
    #chimera-vfx-gl, #chimera-vfx-swarm { display: none !important; }
    .sidebar::before, .right-panel::before { display: none; }
    body { animation: none !important; }
}

[data-theme="light"] body { background: var(--bg-dark); color: var(--text-main); }
[data-theme="light"] #chimera-vfx-gl, [data-theme="light"] #chimera-vfx-embers { display: none; }
[data-theme="light"] .app-container { background: var(--bg-dark); }
[data-theme="light"] #chimera-vfx-canvas { display: none; }
[data-theme="light"] .panel { background: var(--bg-panel); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .chat-input-area { background: var(--bg-panel); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] #chat-input { background: var(--bg-input); color: var(--text-main); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .msg.assistant { background: rgba(0,0,0,0.03); }
[data-theme="light"] .msg.user { background: hsla(174, 85%, 35%, 0.08); }
[data-theme="light"] .nav-tab { color: var(--text-muted); }
[data-theme="light"] .nav-tab.active { color: var(--primary-neon); background: hsla(174, 85%, 35%, 0.08); }
[data-theme="light"] .sidebar { background: var(--bg-panel); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .order-input, [data-theme="light"] .form-input { background: var(--bg-input); color: var(--text-main); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .settings-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }

/* ── Reset ─────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* ── Ambient Background ────────────────── */
body::before {
    content: '';
    position: fixed;
    top: -20%;
    left: -15%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, hsla(var(--primary-h), 80%, 40%, 0.06) 0%, transparent 70%);
    z-index: -1;
    filter: blur(100px);
    pointer-events: none;
    animation: ambientDrift 30s infinite alternate ease-in-out;
}

body::after {
    content: '';
    position: fixed;
    bottom: -20%;
    right: -15%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, hsla(var(--secondary-h), 60%, 40%, 0.05) 0%, transparent 70%);
    z-index: -1;
    filter: blur(100px);
    pointer-events: none;
    animation: ambientDrift 35s infinite alternate-reverse ease-in-out;
}

@keyframes ambientDrift {
    0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { opacity: 1; }
    100% { transform: translate(8%, 8%) scale(1.05); opacity: 0.7; }
}

h1, h2, h3, h4 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.01em;
    font-weight: 600;
}

/* ── Header ────────────────────────────── */
#header {
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: rgba(1, 2, 1, 0.50) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 200, 100, 0.06);
    z-index: 100;
    position: relative;
}

#header h1 {
    font-size: 16px;
    background: linear-gradient(135deg, var(--primary-neon) 0%, #fff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* ── Main Layout ───────────────────────── */
body {
    display: flex;
    flex-direction: column;
}
#main-container {
    display: grid;
    grid-template-columns: 280px 1fr 340px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Side Panes ────────────────────────── */
.side-pane {
    background: var(--bg-panel);
    border-right: 1px solid var(--surface-glass-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Left nav section: scrollable when window is short */
.side-pane:not(.right) > div:first-child {
    overflow-y: auto;
    flex-shrink: 1;
    min-height: 60px;
}

.side-pane.right {
    border-right: none;
    border-left: 1px solid var(--surface-glass-border);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Sidebar Layout Helpers ────────────── */
.sidebar-center {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--surface-glass-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
    flex-shrink: 0;
}

.sidebar-footer .model-selector { width: 100%; }

/* ── Navigation Tabs ───────────────────── */
.tab-btn {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--trans-fast);
    border: 1px solid transparent;
    user-select: none;
}

.tab-btn:hover {
    color: var(--text-main);
    background: var(--surface-glass-hover);
    transform: translateX(2px);
}

.tab-btn.active {
    color: var(--primary-neon);
    background: var(--primary-subtle);
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
}

/* ── Panels ────────────────────────────── */
.panel {
    display: none;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.panel.active {
    display: flex;
}

/* ── Chat Panel ────────────────────────── */
#chat-panel {
    flex-direction: column;
    height: 100%;
    background: transparent;
    overflow: hidden;
}

#chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* ── Message Animations ────────────────── */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes messageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.msg-wrapper {
    animation: messageSlideIn 0.3s var(--trans-smooth) forwards;
    max-width: 100%;
}

/* ── Assistant Messages ────────────────── */
.msg-wrapper.assistant {
    align-self: flex-start;
    max-width: 95%;
}

.msg-wrapper.assistant .msg-bubble {
    background: transparent;
    padding: 2px 0 16px 0;
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.7;
    position: relative;
}

.msg-wrapper.assistant .msg-bubble p {
    margin-bottom: 12px;
}

.msg-wrapper.assistant .msg-bubble p:last-child {
    margin-bottom: 0;
}

/* ── User Messages ─────────────────────── */
.msg-wrapper.user {
    align-self: flex-end;
    max-width: 80%;
}

.msg-wrapper.user .msg-bubble {
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-main);
    padding: 12px 18px;
    border-radius: 18px 18px 4px 18px;
    font-size: 14px;
    line-height: 1.6;
}

/* ── Message Actions ───────────────────── */
.msg-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.msg-wrapper:hover .msg-actions {
    opacity: 1;
}

.msg-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--trans-fast);
    font-family: 'Inter', sans-serif;
}

.msg-action-btn:hover {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.msg-action-btn.copied {
    color: var(--success-neon);
}

.msg-action-btn.delete-btn:hover {
    color: var(--danger-neon);
    background: rgba(255, 59, 92, 0.1);
    border-color: rgba(255, 59, 92, 0.2);
}

/* ── Thinking Indicator ────────────────── */
.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.9) 0%, rgba(20, 20, 30, 0.85) 100%);
    border: 1px solid rgba(100, 120, 180, 0.15);
    border-radius: 16px;
    margin: 8px 0;
    position: relative;
    overflow: hidden;
    animation: deepThinkEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Rich texture overlay */
.thinking-indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(100, 120, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(120, 100, 255, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

/* Animated scan line for deep thinking effect */
.thinking-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(100, 120, 200, 0.08) 50%, transparent 100%);
    animation: deepThinkScan 2.5s ease-in-out infinite;
}

@keyframes deepThinkScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes deepThinkEnter {
    0% { 
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    100% { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.thinking-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.thinking-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-neon) 0%, #6366f1 100%);
    box-shadow: 
        0 0 12px var(--primary-neon),
        0 0 4px var(--primary-neon);
    opacity: 0.5;
    animation: thinkPulse 1.4s ease-in-out infinite;
}

.thinking-dot:nth-child(1) { animation-delay: 0s; }
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkPulse {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(0.7);
        box-shadow: 0 0 8px var(--primary-neon);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.15);
        box-shadow: 0 0 20px var(--primary-neon), 0 0 8px rgba(100, 100, 255, 0.5);
    }
}

.thinking-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 10px rgba(100, 120, 200, 0.3);
}

/* Deep thinking variant - triggered during complex analysis */
.thinking-indicator.deep-think {
    border-color: rgba(120, 100, 255, 0.25);
    background: linear-gradient(135deg, rgba(15, 12, 30, 0.95) 0%, rgba(25, 20, 45, 0.9) 100%);
}

.thinking-indicator.deep-think .thinking-dot {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #8b5cf6 100%);
    box-shadow: 
        0 0 15px rgba(99, 102, 241, 0.8),
        0 0 6px rgba(139, 92, 246, 0.6);
}

.thinking-indicator.deep-think .thinking-label {
    color: var(--text-main);
}

/* ── Streaming Cursor ──────────────────── */
.streaming-cursor {
    display: inline-block;
    width: 3px;
    height: 1.2em;
    background: linear-gradient(180deg, var(--primary-neon) 0%, #6366f1 100%);
    margin-left: 3px;
    vertical-align: text-bottom;
    border-radius: 2px;
    animation: cursorGlow 1s ease-in-out infinite, cursorFade 0.6s steps(2) infinite;
    box-shadow: 
        0 0 8px var(--primary-neon),
        0 0 3px rgba(99, 102, 241, 0.8);
}

@keyframes cursorGlow {
    0%, 100% { 
        box-shadow: 0 0 8px var(--primary-neon), 0 0 3px rgba(99, 102, 241, 0.6);
        opacity: 0.9;
    }
    50% { 
        box-shadow: 0 0 15px var(--primary-neon), 0 0 8px rgba(99, 102, 241, 0.9);
        opacity: 1;
    }
}

@keyframes cursorFade {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ── Tool Execution Cards ──────────────── */
/* ── Tool Execution Pipeline ──────────────────────────── */

.tool-pipeline {
    margin: 8px 0;
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(0, 255, 136, 0.12);
    background: linear-gradient(135deg, rgba(0,255,136,0.03) 0%, rgba(0,200,255,0.02) 100%);
    overflow: hidden;
    animation: pipelineSlideIn 0.3s ease forwards;
    backdrop-filter: blur(4px);
}

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

.tool-pipeline-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 8px;
}

.tool-pipeline-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0,255,136,0.1);
    color: var(--success-neon, #00ff88);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pipelineIconPulse 2s ease infinite;
}

.tool-pipeline.completed .tool-pipeline-icon {
    animation: none;
    background: rgba(0,255,136,0.15);
}

@keyframes pipelineIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.2); }
    50% { box-shadow: 0 0 12px 4px rgba(0,255,136,0.15); }
}

.tool-pipeline-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e0e0e0);
    flex: 1;
}

.tool-pipeline-progress {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim, #666);
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

.tool-pipeline-bar {
    height: 2px;
    background: rgba(255,255,255,0.05);
    margin: 0 16px 4px;
    border-radius: 2px;
    overflow: hidden;
}

.tool-pipeline-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--success-neon, #00ff88), var(--primary-neon, #00d4ff));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.tool-pipeline-bar-fill.has-errors {
    background: linear-gradient(90deg, var(--success-neon, #00ff88), var(--warning-neon, #ffaa00));
}

.tool-pipeline-items {
    padding: 4px 8px 8px;
}

/* Individual tool items */
.tool-pipeline-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    margin: 2px 0;
    animation: toolItemSlideIn 0.25s ease forwards;
    transition: background 0.15s;
}

.tool-pipeline-item:hover {
    background: rgba(255,255,255,0.02);
}

@keyframes toolItemSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.tool-item-status {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.tool-item-status.success {
    background: rgba(0,255,136,0.1);
    color: var(--success-neon, #00ff88);
}

.tool-item-status.error {
    background: rgba(255,68,68,0.1);
    color: var(--danger-neon, #ff4444);
}

.tool-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.tool-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
    text-transform: capitalize;
}

.tool-item-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-dim, #555);
}

.tool-item-preview {
    margin-top: 2px;
    width: 100%;
    padding-left: 32px;
}

.tool-item-data {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-muted, #888);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tool-item-error {
    font-size: 11px;
    color: var(--danger-neon, #ff4444);
    display: block;
}

/* ── Strategic Proposal Actions ──────────────────────── */

.proposal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.proposal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.proposal-btn.confirm {
    background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,255,136,0.08));
    color: var(--success-neon, #00ff88);
    border: 1px solid rgba(0,255,136,0.25);
}

.proposal-btn.confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(0,255,136,0.25), rgba(0,255,136,0.15));
    box-shadow: 0 0 20px rgba(0,255,136,0.15);
    transform: translateY(-1px);
}

.proposal-btn.confirm.executing {
    background: rgba(0,255,136,0.1);
    pointer-events: none;
}

.proposal-btn.cancel {
    background: rgba(255,255,255,0.04);
    color: var(--text-muted, #888);
    border: 1px solid rgba(255,255,255,0.08);
}

.proposal-btn.cancel:hover:not(:disabled) {
    background: rgba(255,68,68,0.08);
    color: var(--danger-neon, #ff4444);
    border-color: rgba(255,68,68,0.2);
}

.proposal-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.proposal-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,255,136,0.2);
    border-top-color: var(--success-neon, #00ff88);
    border-radius: 50%;
    animation: proposalSpin 0.8s linear infinite;
}

@keyframes proposalSpin {
    to { transform: rotate(360deg); }
}

.proposal-cancelled {
    font-size: 12px;
    color: var(--text-dim, #666);
    font-style: italic;
}

/* ── Mode Reminder Banner ────────────────────────────── */

.mode-reminder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 8px 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,170,0,0.06), rgba(255,170,0,0.02));
    border: 1px solid rgba(255,170,0,0.15);
    animation: reminderSlideIn 0.3s ease forwards;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}

@keyframes reminderSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.mode-reminder-icon {
    color: var(--warning-neon, #ffaa00);
    flex-shrink: 0;
    display: flex;
}

.mode-reminder strong {
    color: var(--warning-neon, #ffaa00);
    font-weight: 700;
}

.mode-reminder-btn {
    margin-left: auto;
    padding: 5px 14px;
    border-radius: 6px;
    background: rgba(0,255,136,0.1);
    color: var(--success-neon, #00ff88);
    border: 1px solid rgba(0,255,136,0.2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.mode-reminder-btn:hover {
    background: rgba(0,255,136,0.2);
    box-shadow: 0 0 12px rgba(0,255,136,0.15);
}

.mode-reminder-dismiss {
    background: none;
    border: none;
    color: var(--text-dim, #555);
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.mode-reminder-dismiss:hover {
    color: var(--text-secondary, #aaa);
}

/* Legacy tool-card (keep for backward compat) */
.tool-card {
    margin: 4px 0;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.015);
    overflow: hidden;
    animation: messageSlideIn 0.25s ease forwards;
    font-size: 13px;
}

.tool-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.tool-card-header:hover {
    background: rgba(255,255,255,0.02);
}

.tool-status-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.tool-status-icon.success {
    background: var(--success-glow);
    color: var(--success-neon);
    box-shadow: 0 0 8px var(--success-glow);
}

.tool-status-icon.error {
    background: var(--danger-glow);
    color: var(--danger-neon);
    box-shadow: 0 0 8px var(--danger-glow);
}

.tool-status-icon.running {
    background: var(--primary-glow);
    color: var(--primary-neon);
    animation: toolSpin 1s linear infinite;
}

@keyframes toolSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.tool-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
}

.tool-duration {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}

.tool-chevron {
    color: var(--text-dim);
    font-size: 10px;
    transition: transform 0.2s;
}

.tool-card.expanded .tool-chevron {
    transform: rotate(90deg);
}

.tool-card-body {
    display: none;
    padding: 0 14px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,0.03);
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
}

.tool-card.expanded .tool-card-body {
    display: block;
    padding-top: 10px;
}

.tool-error-msg {
    color: var(--danger-neon);
    margin-top: 4px;
    padding: 6px 8px;
    background: var(--danger-glow);
    border-radius: var(--radius-xs);
}

/* ── Code Blocks ───────────────────────── */
.msg-bubble pre {
    position: relative;
    margin: 12px 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.code-block-wrapper {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    margin: 12px 0;
    overflow: hidden;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.code-lang-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: lowercase;
}

.code-copy-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-dim);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: var(--trans-fast);
    display: flex;
    align-items: center;
    gap: 4px;
}

.code-copy-btn:hover {
    color: var(--text-main);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
}

.code-copy-btn.copied {
    color: var(--success-neon);
    border-color: var(--success-neon);
}

.code-block-wrapper pre {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.code-block-wrapper code,
.msg-bubble pre code {
    display: block;
    padding: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    overflow-x: auto;
    tab-size: 2;
}

.msg-bubble code {
    background: rgba(0, 0, 0, 0.35);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    color: var(--primary-neon);
    border: 1px solid rgba(255,255,255,0.04);
}

/* Don't style code inside pre as inline */
.msg-bubble pre code {
    background: transparent;
    padding: 14px;
    border-radius: 0;
    color: var(--text-secondary);
    border: none;
    font-size: 12.5px;
}

/* ── Markdown Polish ───────────────────── */
.msg-bubble h1 { 
    font-size: 20px; 
    margin: 20px 0 12px; 
    color: var(--text-main); 
    font-weight: 700;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.msg-bubble h2 { 
    font-size: 17px; 
    margin: 16px 0 10px; 
    color: var(--text-main); 
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
}
.msg-bubble h3 { 
    font-size: 15px; 
    margin: 14px 0 8px; 
    color: var(--primary-neon); 
    font-weight: 600;
}
.msg-bubble h4 { 
    font-size: 14px; 
    margin: 12px 0 6px; 
    color: var(--text-secondary); 
    font-weight: 500;
}
.msg-bubble ul, .msg-bubble ol { 
    margin: 10px 0 14px 22px; 
}
.msg-bubble li { 
    margin-bottom: 6px; 
    line-height: 1.6;
}
.msg-bubble li::marker {
    color: var(--primary-neon);
}
.msg-bubble blockquote {
    border-left: 3px solid var(--primary-neon);
    padding: 10px 18px;
    margin: 14px 0;
    color: var(--text-secondary);
    background: linear-gradient(90deg, rgba(100, 120, 200, 0.08) 0%, transparent 100%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
}
.msg-bubble hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 20px 0;
    position: relative;
}
.msg-bubble hr::before {
    content: '✦';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary-neon);
    font-size: 10px;
    background: var(--bg-panel);
    padding: 0 8px;
}
.msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.msg-bubble th, .msg-bubble td {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.06);
    text-align: left;
}
.msg-bubble th {
    background: linear-gradient(135deg, rgba(100, 120, 200, 0.12) 0%, rgba(100, 120, 200, 0.05) 100%);
    font-weight: 600;
    color: var(--text-main);
}
.msg-bubble td {
    background: rgba(255,255,255,0.015);
}
.msg-bubble a {
    color: var(--primary-neon);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}
.msg-bubble a:hover {
    border-bottom-color: var(--primary-neon);
    text-shadow: 0 0 8px rgba(0, 230, 138, 0.3);
}
.msg-bubble strong { 
    color: var(--text-main); 
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.msg-bubble em { 
    color: var(--text-secondary); 
    font-style: italic;
}

/* ── Welcome Screen ────────────────────── */
.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 32px;
    text-align: center;
    animation: messageFadeIn 0.5s ease forwards;
}

.welcome-logo {
    font-size: 32px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-neon), var(--secondary-neon));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    letter-spacing: 0.08em;
}

.welcome-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 36px;
    max-width: 420px;
    line-height: 1.6;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 520px;
}

@keyframes pulse-neon {
    0% { border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2); box-shadow: 0 0 0px transparent; }
    50% { border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); box-shadow: 0 0 8px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2); }
    100% { border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2); box-shadow: 0 0 0px transparent; }
}

.quick-action-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-action-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-action-icon {
    font-size: 18px;
    margin-bottom: 2px;
}

.quick-action-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.quick-action-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ── Input Container (Flex, not Fixed!) ── */
#input-container {
    padding: 12px 28px 20px;
    background: linear-gradient(180deg, transparent, rgba(2,2,3,0.6) 20%, var(--bg-dark) 60%);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.chat-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    gap: 12px;
}

.toggle-group {
    background: rgba(255, 255, 255, 0.03);
    padding: 3px;
    border-radius: 100px;
    border: 1px solid var(--surface-glass-border);
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.mini-model-selector {
    display: none !important;
}

.model-selector-custom {
    position: relative;
    user-select: none;
    z-index: 1000;
}

.model-selector-trigger {
    background: 
        linear-gradient(135deg, hsla(0, 0%, 12%, 0.7), hsla(0, 0%, 8%, 0.5)),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-blend-mode: overlay;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.model-selector-trigger:hover {
    border-color: var(--primary-neon);
    box-shadow: 0 0 25px var(--primary-glow), 0 4px 20px rgba(0,0,0,0.5);
    transform: translateY(-1px);
}

.model-selector-trigger .chevron {
    transition: transform 0.3s ease;
    opacity: 0.6;
}

.model-selector-custom.open .model-selector-trigger .chevron {
    transform: rotate(180deg);
}

.model-selector-dropdown {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: auto;
    min-width: 280px;
    max-width: 380px;
    max-height: 480px;
    background: linear-gradient(165deg, rgba(15, 15, 20, 0.98), rgba(8, 8, 12, 0.96));
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--surface-glass-border);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 2px rgba(255,255,255,0.1);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    z-index: 9999;
}

.model-selector-dropdown.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.model-group {
    padding: 10px 0;
}

.model-group:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.model-group-label {
    padding: 6px 20px;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.05);
}

.model-item {
    padding: 10px 20px;
    font-size: 12.5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.model-item:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
    padding-left: 24px;
}

.model-item.active {
    color: var(--primary-neon);
    background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);
    font-weight: 600;
}

/* Enhanced Model Selector Styles */
.model-filter-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2);
}

.model-filter-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.model-filter-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}

.model-filter-btn.active {
    background: linear-gradient(135deg, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2), hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1));
    border-color: var(--primary-neon);
    color: var(--text-main);
}

.filter-free-badge {
    background: linear-gradient(135deg, rgba(0, 230, 138, 0.3), rgba(0, 230, 138, 0.15));
    color: var(--success-neon);
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.free-models-group {
    background: linear-gradient(180deg, rgba(0, 230, 138, 0.03), transparent);
    border-left: 3px solid var(--success-neon);
}

.free-label {
    color: var(--success-neon) !important;
}

.model-count-badge {
    font-size: 9px;
    padding: 2px 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 100px;
    color: var(--text-muted);
    margin-left: auto;
}

.model-count-badge.paid {
    background: rgba(255, 255, 255, 0.05);
}

.model-item.free-model {
    border-left: 2px solid var(--success-neon);
}

.model-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-name {
    font-weight: 500;
}

.model-provider {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
}

.model-tag-free {
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(0, 230, 138, 0.2), rgba(0, 230, 138, 0.1));
    color: var(--success-neon);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0,255,136,0.25);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.model-item.rate-limited {
    border-left: 2px solid #ff6b6b;
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.05), transparent);
}

.model-tag-rate-limited {
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.1));
    color: #ff6b6b;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 107, 107, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.model-tag-paid {
    font-size: 9px;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.model-badge-free-inline {
    font-size: 9px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(0, 230, 138, 0.25), rgba(0, 230, 138, 0.15));
    color: var(--success-neon);
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid rgba(0,255,136,0.3);
    margin-left: 8px;
}

.model-badge-provider {
    font-size: 9px;
    font-weight: 500;
    background: rgba(255,255,255,0.08);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 100px;
    margin-left: 8px;
}

.model-display-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toggle-btn {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.toggle-btn:hover {
    color: var(--text-main);
}

.toggle-btn.active {
    background: var(--primary-neon);
    color: var(--bg-dark);
    box-shadow: 0 0 12px var(--primary-glow);
}

.input-box {
    display: flex;
    align-items: flex-end;
    background: var(--bg-input);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 6px 8px 6px 16px;
    transition: var(--trans-smooth);
    min-height: 52px;
}

.input-box:focus-within {
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
    box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);
    background: rgba(12, 12, 18, 1);
}

.input-box.disabled {
    opacity: 0.4;
    pointer-events: none;
}

#chat-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 10px 8px;
    font-size: 14px;
    outline: none;
    resize: none;
    line-height: 1.5;
    max-height: 160px;
    font-family: 'Inter', sans-serif;
}

#chat-input::placeholder {
    color: var(--text-dim);
}

/* ── Send Button ───────────────────────── */
.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: var(--trans-fast);
    padding: 8px;
}

.icon-btn:hover {
    color: var(--text-main);
    background: rgba(255,255,255,0.05);
}

.icon-btn.primary {
    background: var(--primary-neon);
    color: var(--bg-dark) !important;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.icon-btn.primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 16px var(--primary-glow);
}

.icon-btn.primary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Suggestions ───────────────────────── */
#suggestions-bar {
    display: flex;
    gap: 8px;
    padding: 0 28px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}

#suggestions-bar::-webkit-scrollbar { display: none; }

.suggestion-chip {
    padding: 7px 14px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--trans-fast);
    font-family: 'Inter', sans-serif;
}

.suggestion-chip:hover {
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
    color: var(--text-main);
    background: var(--primary-subtle);
}

/* ── Loader (old, hidden) ──────────────── */
#loader {
    display: none;
    padding: 10px 24px;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* ── Session Items ─────────────────────── */
.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
    border-radius: var(--radius-md);
    transition: var(--trans-fast);
}

.session-item:hover {
    background: var(--surface-glass-hover);
}

.session-item .tab-btn {
    margin-bottom: 0;
    flex: 1;
    background: transparent;
    border: none;
    overflow: hidden;
}

.session-item .tab-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-actions {
    display: flex;
    gap: 4px;
    padding-right: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.session-item:hover .session-actions {
    opacity: 1;
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: 0.15s;
    font-size: 12px;
}

.action-btn:hover {
    color: var(--text-main);
    background: rgba(255,255,255,0.05);
}

.action-btn.delete:hover {
    color: var(--danger-neon);
}

/* ── Model Selector ────────────────────── */
.model-selector {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--surface-glass-border);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--trans-fast);
    appearance: auto;
    -webkit-appearance: menulist-button;
    font-family: 'Inter', sans-serif;
}

.model-selector:hover {
    background: var(--surface-glass-hover);
    border-color: var(--primary-neon);
}

/* ── Wallet Button ─────────────────────── */
#wallet-btn {
    background: rgba(0, 230, 138, 0.08);
    border: 1px solid rgba(0, 230, 138, 0.2);
    color: var(--success-neon);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: 0.2s;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#wallet-btn:hover {
    background: rgba(0, 230, 138, 0.15);
    border-color: var(--success-neon);
}

#wallet-btn.connected {
    background: var(--primary-subtle);
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
    color: var(--primary-neon);
}

/* ── Status Indicator ──────────────────── */
#status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    background: var(--text-dim);
    transition: background 0.3s;
}

#status-indicator.online {
    background: var(--success-neon);
}

#status-indicator.online::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: statusPing 2s infinite ease-out;
}

@keyframes statusPing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3); opacity: 0; }
}

/* ── Dashboard Stats ───────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--surface-glass-border);
    padding: 14px;
    border-radius: var(--radius-lg);
    transition: var(--trans-fast);
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255,255,255,0.12);
}

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

.stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}

/* ── Event Stream ──────────────────────── */
.event-item {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    animation: messageFadeIn 0.2s ease forwards;
}

.event-timestamp {
    color: var(--text-dim);
}

.event-kind {
    font-weight: 500;
    margin-left: 4px;
}

.event-kind.tool { color: var(--primary-neon); }
.event-kind.llm { color: var(--secondary-neon); }
.event-kind.trade { color: var(--success-neon); }
.event-kind.error { color: var(--danger-neon); }
.event-kind.alert { color: var(--warning-neon); }

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

.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-main);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: auto;
    animation: toastSlideIn 0.3s var(--trans-spring) forwards;
    max-width: 360px;
}

.toast.leaving {
    animation: toastSlideOut 0.25s ease forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(40px); }
}

.toast-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.toast.success { border-left: 3px solid var(--success-neon); }
.toast.error { border-left: 3px solid var(--danger-neon); }
.toast.info { border-left: 3px solid var(--primary-neon); }
.toast.warning { border-left: 3px solid var(--warning-neon); }

/* ── Pulse Icon ────────────────────────── */
.pulse-icon {
    border-radius: 50%;
    background: var(--primary-neon);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 4px var(--primary-glow); opacity: 0.7; }
    50% { box-shadow: 0 0 12px var(--primary-glow); opacity: 1; }
}

/* ── Scrollbar ─────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ═══════════════════════════════════════════════
   QUANT CONTROL PANEL EXTENSIONS v3.1
   ═══════════════════════════════════════════════ */

/* ── Panel Scrollable Content ──────────── */
.panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}

.panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--surface-glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

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

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

/* ── Section Headers ───────────────────── */
.section-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── Portfolio Balance Cards ───────────── */
.balance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.balance-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: var(--trans-fast);
}

.balance-card:hover {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.12);
}

.balance-symbol {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.balance-amount {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}

.balance-usd {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ── Portfolio Summary Row ─────────────── */
.portfolio-summary {
    display: flex;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 20px;
}

.portfolio-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.portfolio-stat-value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.portfolio-stat-value.positive { color: var(--success-neon); }
.portfolio-stat-value.negative { color: var(--danger-neon); }

.portfolio-stat-change {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.portfolio-stat-change.up { color: var(--success-neon); }
.portfolio-stat-change.down { color: var(--danger-neon); }

/* ── Data Tables ───────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.data-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky;
    top: 0;
    background: var(--bg-dark);
    z-index: 1;
}

.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.data-table tbody tr {
    transition: background 0.1s;
}

.data-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

.data-table .side-buy { color: var(--success-neon); font-weight: 600; }
.data-table .side-sell { color: var(--danger-neon); font-weight: 600; }

.table-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-dim);
    font-size: 13px;
}

/* ── Connector Status Cards ────────────── */
.connector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.connector-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    transition: var(--trans-fast);
}

.connector-card:hover {
    background: rgba(255,255,255,0.03);
}

.connector-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.connector-dot.ready { background: var(--success-neon); box-shadow: 0 0 6px var(--success-glow); }
.connector-dot.configured { background: var(--warning-neon); }
.connector-dot.available { background: var(--text-dim); }
.connector-dot.needs_keys { background: var(--danger-neon); }

.connector-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.connector-status {
    font-size: 10px;
    color: var(--text-dim);
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Agent Cards ───────────────────────── */
.agent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    transition: var(--trans-fast);
}

.agent-card:hover {
    background: rgba(255,255,255,0.03);
}

.agent-running-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agent-running-dot.active {
    background: var(--success-neon);
    box-shadow: 0 0 6px var(--success-glow);
    animation: pulseGlow 2s ease-in-out infinite;
}

.agent-running-dot.idle {
    background: var(--text-dim);
}

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

.agent-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-pair {
    font-size: 11px;
    color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}

.agent-pnl {
    font-size: 13px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}

/* ── Strategy Launcher ─────────────────── */
.script-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.script-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    transition: var(--trans-fast);
    cursor: pointer;
}

.script-item:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(0,212,255,0.15);
}

.script-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.script-item-body {
    flex: 1;
    min-width: 0;
}

.script-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

.script-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 3px;
}

.script-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 5px;
}

.script-item .btn-sm {
    flex-shrink: 0;
    align-self: center;
}

.btn-sm {
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    font-family: 'Inter', sans-serif;
    transition: var(--trans-fast);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-sm.primary {
    background: var(--primary-subtle);
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3);
    color: var(--primary-neon);
}

.btn-sm.primary:hover {
    background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
}

.btn-sm.danger {
    background: var(--danger-glow);
    border-color: rgba(255, 59, 92, 0.3);
    color: var(--danger-neon);
}

.btn-sm.danger:hover {
    background: rgba(255, 59, 92, 0.2);
}

.btn-sm.success {
    background: var(--success-glow);
    border-color: rgba(0, 230, 138, 0.3);
    color: var(--success-neon);
}

.btn-sm.export {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-secondary);
}

.btn-sm.export:hover {
    background: rgba(255,255,255,0.06);
}

/* ── Logs Viewer ───────────────────────── */
.log-viewer {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius-md);
    padding: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.log-line {
    padding: 1px 0;
    border-bottom: 1px solid rgba(255,255,255,0.01);
}

.log-line:hover {
    background: rgba(255,255,255,0.02);
}

/* ── Sentiment Gauge (Right Sidebar) ───── */
.sentiment-widget {
    padding: 16px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

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

.sentiment-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.sentiment-regime {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 100px;
}

.sentiment-regime.bullish { background: var(--success-glow); color: var(--success-neon); }
.sentiment-regime.bearish { background: var(--danger-glow); color: var(--danger-neon); }
.sentiment-regime.neutral { background: rgba(255,255,255,0.05); color: var(--text-muted); }

.sentiment-gauge-track {
    height: 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
}

.sentiment-gauge-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 0.6s ease, background 0.3s;
    position: relative;
}

.sentiment-gauge-fill.fear { background: linear-gradient(90deg, var(--danger-neon), var(--warning-neon)); }
.sentiment-gauge-fill.neutral { background: linear-gradient(90deg, var(--warning-neon), var(--text-muted)); }
.sentiment-gauge-fill.greed { background: linear-gradient(90deg, var(--warning-neon), var(--success-neon)); }

.sentiment-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sentiment-score {
    font-size: 28px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    text-align: center;
    margin: 8px 0 4px;
}

.sentiment-score-label {
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 10px;
}

/* ── Right Sidebar Sections ────────────── */
.sidebar-section {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sidebar-section:last-child {
    border-bottom: none;
}

/* ── Onboarding Modal ──────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: messageFadeIn 0.2s ease forwards;
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: var(--bg-panel);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-xl);
    padding: 32px;
    width: 90%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp 0.3s var(--trans-spring) forwards;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-title {
    font-size: 20px;
    margin-bottom: 6px;
}

.modal-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.5;
}

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

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    color: var(--text-main);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: var(--trans-fast);
}

.form-input:focus {
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
    box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);
}

.form-input::placeholder {
    color: var(--text-dim);
}

.form-select {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    color: var(--text-main);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.btn-modal {
    flex: 1;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    font-family: 'Inter', sans-serif;
    transition: var(--trans-fast);
    text-align: center;
}

.btn-modal.primary {
    background: var(--primary-neon);
    border-color: var(--primary-neon);
    color: var(--bg-dark);
}

.btn-modal.primary:hover {
    box-shadow: 0 0 20px var(--primary-glow);
}

.btn-modal.ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.1);
    color: var(--text-muted);
}

.btn-modal.ghost:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text-main);
}

/* ── Bot Controls Bar ──────────────────── */
.bot-controls {
    display: flex;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 20px;
    align-items: center;
}

.bot-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bot-status-badge.running {
    background: var(--success-glow);
    color: var(--success-neon);
}

.bot-status-badge.stopped {
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
}

/* ── Nav Badge (count indicator) ───────── */
.nav-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    background: var(--primary-subtle);
    color: var(--primary-neon);
    padding: 1px 7px;
    border-radius: 100px;
    min-width: 20px;
    text-align: center;
}

/* ═══════════════════════════════════════════════
   ORDER ENTRY & CONTROL PANEL v3.2
   ═══════════════════════════════════════════════ */

/* ── Mode Toggle (Paper/Live) ──────────── */
.mode-switch {
    display: flex;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-glass-border);
    border-radius: 100px;
    padding: 2px;
    gap: 2px;
}

.mode-switch-btn {
    flex: 1;
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.mode-switch-btn.active-paper {
    background: var(--warning-glow);
    color: var(--warning-neon);
}

.mode-switch-btn.active-live {
    background: var(--danger-glow);
    color: var(--danger-neon);
    box-shadow: 0 0 8px var(--danger-glow);
}

/* ── Order Entry Form ──────────────────── */
.order-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-side-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.order-side-btn {
    padding: 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.order-side-btn.buy {
    background: transparent;
    border-color: rgba(0,230,138,0.2);
    color: var(--text-dim);
}

.order-side-btn.buy.active,
.order-side-btn.buy:hover {
    background: var(--success-glow);
    border-color: var(--success-neon);
    color: var(--success-neon);
}

.order-side-btn.sell {
    background: transparent;
    border-color: rgba(255,59,92,0.2);
    color: var(--text-dim);
}

.order-side-btn.sell.active,
.order-side-btn.sell:hover {
    background: var(--danger-glow);
    border-color: var(--danger-neon);
    color: var(--danger-neon);
}

.order-type-select {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-main);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
}

.order-input-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.order-input-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.order-input {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text-main);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}

.order-input:focus {
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
}

.order-input::placeholder { color: var(--text-dim); }

.order-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.order-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.order-submit-btn.buy {
    background: var(--success-neon);
    color: var(--bg-dark);
}

.order-submit-btn.buy:hover {
    box-shadow: 0 0 20px var(--success-glow);
}

.order-submit-btn.sell {
    background: var(--danger-neon);
    color: #fff;
}

.order-submit-btn.sell:hover {
    box-shadow: 0 0 20px var(--danger-glow);
}

/* ── Position List ─────────────────────── */
.position-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.position-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.025);
    font-size: 12px;
}

.position-symbol {
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.position-amount {
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* ── Account Balance Cards ────────────── */
.pos-balance-section { padding-bottom: 10px !important; }
.pos-mode-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(0, 230, 138, 0.08);
    color: var(--success-neon);
    border: 1px solid rgba(0, 230, 138, 0.15);
}
.pos-mode-badge.live {
    background: rgba(255, 59, 92, 0.08);
    color: var(--danger-neon);
    border-color: rgba(255, 59, 92, 0.15);
}
.pos-balance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
}
.pos-balance-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pos-bal-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-weight: 600;
}
.pos-bal-value {
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-main);
    transition: color 0.3s;
}

/* Value flash on change */
@keyframes valueFlash {
    0% { text-shadow: 0 0 8px currentColor; }
    100% { text-shadow: none; }
}
.val-flash { animation: valueFlash 0.6s ease-out; }

/* ── Position Cards ───────────────────── */
.pos-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: var(--trans-fast);
}
.pos-card:hover { background: rgba(255,255,255,0.035); }
.pos-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pos-card-symbol {
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-main);
}
.pos-card-side {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.08em;
}
.pos-card-side.long { background: rgba(0,230,138,0.1); color: var(--success-neon); }
.pos-card-side.short { background: rgba(255,59,92,0.1); color: var(--danger-neon); }
.pos-card-side.flat { background: rgba(255,255,255,0.05); color: var(--text-dim); }
.pos-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.pos-card-stat {
    display: flex;
    flex-direction: column;
}
.pos-card-stat-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pos-card-stat-value {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

/* ── Recent Fills ─────────────────────── */
.fill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
}
.fill-side {
    font-size: 9px;
    font-weight: 700;
    width: 28px;
    text-align: center;
}
.fill-side.buy { color: var(--success-neon); }
.fill-side.sell { color: var(--danger-neon); }
.fill-price { color: var(--text-secondary); }
.fill-amount { color: var(--text-muted); font-size: 10px; }
.fill-time { color: var(--text-dim); font-size: 9px; }

/* ═══════════════════════════════════════════════
   ALPHA TOURNAMENT v3.2
   ═══════════════════════════════════════════════ */

.tournament-tabs {
    display: flex;
    gap: 2px;
    padding: 0 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tournament-tabs::-webkit-scrollbar { display: none; }

.tournament-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 100px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
}

.tournament-tab:hover { color: var(--text-main); }

.tournament-tab.active {
    background: var(--primary-subtle);
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
    color: var(--primary-neon);
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    transition: all 0.15s;
}

.leaderboard-entry:hover {
    background: rgba(255,255,255,0.03);
}

.leaderboard-rank {
    font-size: 16px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.leaderboard-rank.gold { color: #ffd700; }
.leaderboard-rank.silver { color: #c0c0c0; }
.leaderboard-rank.bronze { color: #cd7f32; }

.leaderboard-model {
    flex: 1;
    min-width: 0;
}

.leaderboard-model-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboard-model-meta {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.leaderboard-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.leaderboard-stat {
    text-align: right;
}

.leaderboard-stat-value {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.leaderboard-stat-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.elo-bar {
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: 100px;
    overflow: hidden;
    margin-top: 4px;
}

.elo-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--primary-neon);
    transition: width 0.4s ease;
}

.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 100px;
}

.streak-badge.hot { background: var(--success-glow); color: var(--success-neon); }
.streak-badge.cold { background: var(--danger-glow); color: var(--danger-neon); }

/* Tournament Empty State */
.tournament-empty {
    text-align: center;
    padding: 60px 20px 48px;
}
.tournament-empty-icon { margin-bottom: 16px; }
.tournament-empty-title { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.tournament-empty-desc { font-size: 12px; color: var(--text-dim); max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* Battle Modal */
.battle-modal-box {
    max-width: 520px;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.battle-modal-header {
    text-align: center;
    padding: 28px 28px 16px;
}
.battle-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.battle-modal-body { padding: 0 24px 24px; }
.battle-fighters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.battle-fighter-slot { flex: 1; }
.battle-fighter-slot select { font-size: 12px; }
.battle-vs {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    padding-bottom: 10px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* Battle History Rows */
.battle-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.battle-history-row:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
.battle-history-fighters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.battle-fighter {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.battle-fighter.winner {
    color: var(--success-neon);
    font-weight: 700;
}
.battle-vs-badge {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.battle-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.battle-score {
    font-size: 12px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}
.battle-category-tag {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: capitalize;
}
.battle-time {
    font-size: 10px;
    color: var(--text-dim);
    min-width: 48px;
    text-align: right;
}

/* Live Battle Card */
.battle-live-card, .battle-result-card {
    background: rgba(0, 255, 163, 0.03);
    border: 1px solid rgba(0, 255, 163, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}
.battle-result-card {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.08);
}
.battle-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    color: var(--danger-neon);
    background: rgba(255, 0, 85, 0.1);
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 1px;
    margin-bottom: 14px;
}
.battle-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger-neon);
    animation: battlePulse 1s ease-in-out infinite;
}
@keyframes battlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.battle-live-fighters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 12px 0;
}
.battle-live-fighter {
    flex: 1;
    max-width: 180px;
}
.battle-live-fighter.winner { border-bottom: 2px solid var(--success-neon); padding-bottom: 8px; }
.battle-live-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.battle-live-status {
    font-size: 11px;
    color: var(--text-dim);
    animation: battlePulse 1.5s ease-in-out infinite;
}
.battle-live-vs {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 1px;
}
.battle-live-progress {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 14px;
}
.battle-live-progress-bar {
    width: 40%;
    height: 100%;
    background: var(--primary-neon);
    border-radius: 4px;
    animation: battleProgress 2s ease-in-out infinite;
}
@keyframes battleProgress {
    0% { width: 10%; }
    50% { width: 80%; }
    100% { width: 10%; }
}

/* Battle Result */
.battle-result-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-neon);
    margin-bottom: 12px;
}
.battle-result-score {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: var(--text-muted);
    margin: 4px 0;
}
.battle-result-score.win { color: var(--success-neon); }
.battle-result-reason {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    font-style: italic;
    line-height: 1.5;
}
.battle-response-preview {
    text-align: left;
    margin-top: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.battle-response-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.battle-response-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    max-height: 100px;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════
   SKILL FORGE v3.2
   ═══════════════════════════════════════════════ */

.forge-status-bar {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 16px;
}

.forge-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forge-stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--primary-neon);
}

.forge-stat-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.forge-create-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.forge-skill-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.015);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    transition: all 0.15s;
    cursor: pointer;
}

.forge-skill-card:hover {
    background: rgba(255,255,255,0.04);
}

.forge-skill-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

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

.forge-skill-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.forge-skill-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forge-skill-fitness {
    font-size: 12px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--success-neon);
}

/* ── Forge View System ────────────────── */
.forge-view-tabs {
    display: flex;
    gap: 4px;
}
.forge-view-tab {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: var(--text-dim);
    transition: all 0.15s;
}
.forge-view-tab:hover { color: var(--text-main); border-color: rgba(255,255,255,0.15); }
.forge-view-tab.active { background: rgba(168,85,247,0.15); color: #a855f7; border-color: rgba(168,85,247,0.3); }
.forge-view { display: none; }
.forge-view.active { display: block; }

/* ── Skill Tree ──────────────────────── */
.forge-tree-container {
    position: relative;
    width: 100%;
    height: 480px;
    border-radius: 12px;
    background: radial-gradient(ellipse at center, rgba(168,85,247,0.03) 0%, transparent 70%);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.forge-edge-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}
.forge-edge-svg line {
    stroke-width: 1.5;
    opacity: 0.2;
    transition: opacity 0.2s, stroke-width 0.2s;
}
.forge-edge-svg line.highlight {
    opacity: 0.8;
    stroke-width: 2.5;
}
.forge-node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s, opacity 0.2s;
    transform: translate(-50%, -50%);
}
.forge-node:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 10; }
.forge-node.dimmed { opacity: 0.25; }
.forge-node.selected .forge-node-circle { box-shadow: 0 0 16px var(--node-color); }
.forge-node-circle {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid var(--node-color, rgba(255,255,255,0.15));
    background: rgba(0,0,0,0.6);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.forge-node-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.forge-node-hub .forge-node-circle {
    width: 52px; height: 52px;
    font-size: 22px;
    border-width: 3px;
    background: rgba(168,85,247,0.15);
}

/* ── Detail Panel ────────────────────── */
.forge-detail-panel {
    margin-top: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

/* ── Composer Pipeline ───────────────── */
.forge-pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px;
    min-height: 90px;
    background: rgba(255,255,255,0.015);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.forge-pipeline-empty {
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    padding: 12px;
}
.forge-pipeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    min-width: 72px;
}
.forge-pipeline-node:hover { border-color: rgba(248,81,73,0.4); }
.forge-pipeline-node .remove-x {
    position: absolute;
    top: -6px; right: -6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #f85149;
    color: #fff;
    font-size: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.forge-pipeline-node:hover .remove-x { display: flex; }
.forge-pipeline-arrow {
    color: var(--text-dim);
    font-size: 16px;
    margin: 0 4px;
    flex-shrink: 0;
}
.forge-compose-stats {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    font-size: 11px;
    color: var(--text-dim);
}
.forge-compose-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

/* ── Evolution Dashboard ─────────────── */
.forge-evo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.forge-evo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}
.forge-evo-bar-fill {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #a855f7, #00e68a);
    transition: width 0.3s;
}

/* ── Research Results ─────────────────── */
.forge-research-section {
    margin-bottom: 4px;
}
.forge-research-card {
    padding: 14px;
    background: linear-gradient(135deg, rgba(0,212,255,0.04) 0%, rgba(168,85,247,0.04) 100%);
    border: 1px solid rgba(0,212,255,0.15);
    border-radius: 10px;
    margin-top: 8px;
}
.forge-research-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}
.forge-research-meta {
    font-size: 10px;
    color: var(--text-dim);
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
}
.forge-research-concepts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.forge-research-concept {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
}
.forge-research-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* ── Chart Toolbar ─────────────────────── */
.chart-toolbar {
    display: flex;
    gap: 4px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.chart-toolbar::-webkit-scrollbar { display: none; }

.chart-tool-btn {
    padding: 5px 10px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chart-tool-btn:hover {
    color: var(--text-main);
    background: rgba(255,255,255,0.03);
}

.chart-tool-btn.active {
    color: var(--primary-neon);
    background: var(--primary-subtle);
    border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
}

.chart-tool-separator {
    width: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0 4px;
}

/* ── Strategy Wizard ───────────────────── */
.wizard-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wizard-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wizard-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--surface-glass-border);
    flex-shrink: 0;
}

.wizard-bubble {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.6;
    max-width: 90%;
    animation: messageSlideIn 0.2s ease forwards;
}

.wizard-bubble.assistant {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text-main);
    align-self: flex-start;
}

.wizard-bubble.user {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-main);
    align-self: flex-end;
}

/* ═══════════════════════════════════════════
   AUTH MODAL
   ═══════════════════════════════════════════ */

.auth-modal-box {
    max-width: 420px;
}

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border: 1px solid var(--surface-glass-border);
    border-radius: 6px;
    overflow: hidden;
}

.auth-tab-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.auth-tab-btn.active {
    background: var(--primary-subtle);
    color: var(--primary-neon);
}

.auth-tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.03);
}

.auth-tab-content {
    display: none;
}

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

.auth-error {
    background: rgba(255, 0, 85, 0.1);
    border: 1px solid rgba(255, 0, 85, 0.2);
    color: var(--danger-neon);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 12px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-dim);
    font-size: 11px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--surface-glass-border);
}

.wallet-siwe-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, rgba(112, 0, 255, 0.15), rgba(0, 242, 255, 0.1)) !important;
    border: 1px solid rgba(112, 0, 255, 0.3) !important;
    color: var(--primary-neon) !important;
}

.wallet-siwe-btn:hover {
    background: linear-gradient(135deg, rgba(112, 0, 255, 0.25), rgba(0, 242, 255, 0.15)) !important;
    border-color: var(--primary-neon) !important;
}

.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 14px;
}

.auth-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox-label input[type="checkbox"] {
    display: none;
}

.auth-checkbox-mark {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s;
}

.auth-checkbox-label input:checked + .auth-checkbox-mark {
    background: var(--primary-neon);
    border-color: var(--primary-neon);
}

.auth-checkbox-label input:checked + .auth-checkbox-mark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid var(--bg-panel);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-idle-hint {
    font-size: 10px;
    color: var(--text-dim);
}

.auth-disclaimer {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 12px;
    line-height: 1.5;
}

.auth-user-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--primary-subtle);
    border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
    border-radius: 12px;
    font-size: 11px;
    color: var(--primary-neon);
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════
   CHIMERA FORM CONTROLS
   ═══════════════════════════════════════════ */

.chimera-input {
    display: block;
    box-sizing: border-box;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--surface-glass-border);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.chimera-input:focus {
    border-color: var(--primary-neon);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.08);
}

.chimera-input::placeholder {
    color: var(--text-dim);
}

.chimera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.chimera-btn-primary {
    background: linear-gradient(135deg, var(--primary-neon), hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)));
    color: var(--bg-dark);
    border: none;
}

.chimera-btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
}


/* ═══════════════════════════════════════════
   WALLET MODAL
   ═══════════════════════════════════════════ */

.wallet-modal-box {
    max-width: 420px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.wallet-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 1;
}
.wallet-modal-close:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.wallet-modal-header {
    text-align: center;
    padding: 32px 32px 20px;
}

.wallet-modal-icon-ring {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(0, 255, 163, 0.08);
    border: 1px solid rgba(0, 255, 163, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.wallet-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.wallet-modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.wallet-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 24px;
}

.wallet-option-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.wallet-option-btn:hover {
    border-color: var(--primary-neon);
    background: rgba(0, 255, 163, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 255, 163, 0.1);
}

.wallet-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.wallet-option-icon.metamask-icon { background: rgba(226, 118, 27, 0.12); border-color: rgba(226, 118, 27, 0.2); }
.wallet-option-icon.wc-icon { background: rgba(59, 153, 252, 0.12); border-color: rgba(59, 153, 252, 0.2); }
.wallet-option-icon.cb-icon { background: rgba(0, 82, 255, 0.12); border-color: rgba(0, 82, 255, 0.2); }

.wallet-option-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.wallet-option-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 3px;
}

.wallet-option-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-neon);
    background: rgba(0, 255, 163, 0.1);
    border: 1px solid rgba(0, 255, 163, 0.2);
    border-radius: 6px;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.wallet-modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px 24px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-dim);
    justify-content: center;
}


/* ═══════════════════════════════════════════
   WALLET DROPDOWN
   ═══════════════════════════════════════════ */

.wallet-dropdown {
    display: none;
    position: fixed;
    top: 52px;
    right: 16px;
    width: 300px;
    background: var(--bg-panel);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 16px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
    z-index: 10000;
    backdrop-filter: blur(24px);
    overflow: hidden;
}

.wallet-dropdown.active {
    display: block;
    animation: walletDropIn 0.15s ease-out;
}

@keyframes walletDropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wallet-dropdown-header {
    padding: 16px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.wallet-dropdown-addr {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.6;
    background: rgba(255,255,255,0.04);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}

.wallet-dropdown-via {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 8px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wallet-dropdown-section {
    padding: 8px 0;
}

.wallet-dropdown-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 0;
}

.wallet-dropdown-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 8px 16px 4px;
}

.wallet-dropdown-chains {
    max-height: 180px;
    overflow-y: auto;
    padding: 2px 0;
}
.wallet-dropdown-chains::-webkit-scrollbar { width: 4px; }
.wallet-dropdown-chains::-webkit-scrollbar-track { background: transparent; }
.wallet-dropdown-chains::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.wallet-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.wallet-dropdown-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.wallet-dropdown-item.active {
    color: var(--primary-neon);
    background: rgba(0, 255, 163, 0.06);
    font-weight: 600;
}

.wallet-dropdown-item .chain-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wallet-dropdown-item.danger {
    color: var(--danger-neon);
}

.wallet-dropdown-item.danger:hover {
    background: rgba(255, 0, 85, 0.08);
}

.wallet-dropdown-actions {
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}


/* ═══════════════════════════════════════════
   CHAIN BADGES
   ═══════════════════════════════════════════ */

.chain-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
}

.chain-badge.chain-1      { background: rgba(98,126,234,0.15); border-color: rgba(98,126,234,0.3); color: #627eea; }
.chain-badge.chain-8453   { background: rgba(0,82,255,0.15); border-color: rgba(0,82,255,0.3); color: #0052ff; }
.chain-badge.chain-42161  { background: rgba(40,160,240,0.15); border-color: rgba(40,160,240,0.3); color: #28a0f0; }
.chain-badge.chain-137    { background: rgba(130,71,229,0.15); border-color: rgba(130,71,229,0.3); color: #8247e5; }
.chain-badge.chain-84532  { background: rgba(0,82,255,0.1); border-color: rgba(0,82,255,0.2); color: #4d8aff; }
.chain-badge.chain-11155111 { background: rgba(98,126,234,0.1); border-color: rgba(98,126,234,0.2); color: #8da0ec; }

.chain-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.chain-dot-1      { background: #627eea; }
.chain-dot-8453   { background: #0052ff; }
.chain-dot-42161  { background: #28a0f0; }
.chain-dot-137    { background: #8247e5; }
.chain-dot-84532  { background: #4d8aff; }
.chain-dot-11155111 { background: #8da0ec; }


/* ═══════════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════════ */

.settings-section {
    margin-bottom: 20px;
}

.settings-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-glass-border);
    border-radius: 10px;
    padding: 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.settings-row + .settings-row {
    border-top: 1px solid rgba(255,255,255,0.03);
}

.settings-label {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 140px;
}

.settings-value {
    font-size: 12px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.settings-add-key {
    display: flex;
    gap: 8px;
    align-items: center;
}

.settings-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface-card);
    border: 1px solid var(--surface-glass-border);
    border-radius: 8px;
    margin-bottom: 6px;
}

.settings-key-provider {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-neon);
    min-width: 100px;
    text-transform: capitalize;
}

.settings-key-masked {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-dim);
    flex: 1;
}

.btn-sm.danger {
    background: rgba(255, 0, 85, 0.1);
    border-color: rgba(255, 0, 85, 0.2);
    color: var(--danger-neon);
}

.btn-sm.danger:hover {
    background: rgba(255, 0, 85, 0.2);
    border-color: var(--danger-neon);
}


/* ═══════════════════════════════════════════
   MARKETPLACE
   ═══════════════════════════════════════════ */

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.marketplace-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-glass-border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.marketplace-card:hover {
    border-color: var(--primary-neon);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(112, 0, 255, 0.15);
}

.mp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mp-card-category {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--primary-subtle);
    color: var(--primary-neon);
}

.mp-card-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--success-neon);
}

.mp-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.mp-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.mp-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-dim);
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.03);
}


/* ── Marketplace Detail ────────────────── */
.marketplace-detail {
    padding: 20px;
    background: var(--surface-glass);
    border: 1px solid var(--surface-glass-border);
    border-radius: 12px;
}

/* ── DEX Swap Badge ───────────────────── */
.order-type-select option[value="dex_swap"] {
    color: #f6851b;
    font-weight: 600;
}

/* ── DeFi Panel ───────────────────────── */
.defi-tab-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--surface-glass-border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.15s;
}
.defi-tab-btn.active {
    background: var(--primary-neon);
    color: #000;
    border-color: var(--primary-neon);
}
.defi-tab-btn:hover:not(.active) {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.pool-row, .liquidation-row, .nft-sale-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--surface-glass-border);
    font-size: 12px;
    color: var(--text-muted);
}
.pool-row:hover, .liquidation-row:hover {
    background: rgba(255,255,255,0.03);
}
.pool-pair, .liq-user { font-weight: 600; color: var(--text-primary); min-width: 100px; }
.pool-tvl, .pool-vol { min-width: 120px; }
.pool-fee { color: var(--accent-neon); }
.liq-collateral { color: var(--success-neon); min-width: 80px; }
.liq-debt { color: var(--danger-neon); min-width: 80px; }

/* ── NFT Panel ────────────────────────── */
.nft-collection-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--surface-glass-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.nft-collection-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--primary-neon);
}
.nft-card-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
.nft-card-stats { font-size: 11px; color: var(--text-dim); display: flex; gap: 12px; margin-top: 4px; }
.nft-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.nft-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.nft-listing-card {
    padding: 8px;
    border: 1px solid var(--surface-glass-border);
    border-radius: 10px;
    text-align: center;
}
.nft-listing-info { display: flex; justify-content: space-between; padding: 6px 0 0; font-size: 11px; }
.nft-listing-id { color: var(--text-dim); }
.nft-listing-price { color: var(--accent-neon); font-weight: 600; }

/* ── Responsive ────────────────────────── */
@media (max-width: 1200px) {
    #main-container { grid-template-columns: 240px 1fr 300px; }
    .balance-grid { grid-template-columns: 1fr 1fr; }
    .connector-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
    #main-container { grid-template-columns: 1fr; }
    .side-pane { display: none; }
    .side-pane.right { display: none; }
    /* #9: Mobile-responsive radar cards */
    .radar-opp-card { padding: 8px; margin-bottom: 6px; }
    .radar-opp-header { flex-wrap: wrap; gap: 4px; }
    .radar-opp-title { font-size: 11px; }
    .radar-opp-detail { font-size: 9px; -webkit-line-clamp: 2; }
    .radar-opp-footer { flex-wrap: wrap; gap: 4px; }
}
@media (max-width: 600px) {
    .radar-opp-card { padding: 6px; }
    .panel-header h2 { font-size: 14px; }
    .radar-opp-detail { display: none; }  /* hide detail on very small screens */
}

/* ── Active Strategy Widget ──────────────── */
.strategy-widget {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.06) 0%, rgba(0, 136, 255, 0.06) 100%);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 10px;
    padding: 12px;
}
.strategy-widget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.strategy-widget-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}
.strategy-widget-dot.running {
    background: var(--success-neon, #00ff88);
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
}
.strategy-widget-dot.degraded {
    background: var(--warning-neon, #ffaa00);
    box-shadow: 0 0 6px rgba(255, 170, 0, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.strategy-widget-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--success-neon, #00ff88);
}
.strategy-widget-pair {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.strategy-widget-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.strategy-widget-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.sw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sw-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}
.sw-stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.sw-stop-btn {
    width: 100%;
    margin-top: 10px;
    padding: 6px;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 6px;
    color: var(--danger-neon, #ff4444);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sw-stop-btn:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: rgba(255, 68, 68, 0.5);
}

/* ── Live Ticker Bar — Scrolling Marquee ── */
.ticker-bar {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.98) 0%, rgba(4, 4, 8, 0.99) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    white-space: nowrap;
    height: 32px;
    flex-shrink: 0;
    position: relative;
}
.ticker-bar::before, .ticker-bar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}
.ticker-bar::before { left: 0; background: linear-gradient(90deg, rgba(4,4,8,1) 0%, transparent 100%); }
.ticker-bar::after { right: 0; background: linear-gradient(270deg, rgba(4,4,8,1) 0%, transparent 100%); }

.ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: tickerScroll var(--ticker-duration, 60s) linear infinite;
    will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.tk-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    font-size: 11px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,0.03);
    height: 32px;
    cursor: default;
    transition: background 0.15s;
}
.tk-item:hover { background: rgba(255,255,255,0.03); }

.tk-item .tk-sym {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--primary-neon);
}
.tk-item .tk-price {
    font-weight: 600;
    color: #fff;
}
.tk-item .tk-change {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}
.tk-item .tk-change.up { color: var(--success-neon); background: rgba(0,230,138,0.08); }
.tk-item .tk-change.down { color: var(--danger-neon); background: rgba(255,59,92,0.08); }

.tk-item .tk-lbl {
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    text-transform: uppercase;
}
.tk-item .tk-val {
    font-weight: 600;
    color: var(--text-secondary);
}
.tk-item .tk-val.green { color: var(--success-neon); }
.tk-item .tk-val.red { color: var(--danger-neon); }
.tk-item .tk-val.amber { color: var(--warning-neon); }

.tk-item.news {
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    gap: 8px;
}
.tk-item.news .tk-news-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(168,85,247,0.12);
    color: var(--secondary-neon);
    text-transform: uppercase;
}
.tk-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tk-dot.live { background: var(--success-neon); box-shadow: 0 0 4px rgba(0,230,138,0.5); animation: tickerPulse 2s ease-in-out infinite; }
.tk-dot.idle { background: var(--text-dim); }

@keyframes tickerPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ── Strategy Command Center ──────────── */
.strat-perf-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.strat-perf-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
.strat-perf-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
}
.strat-perf-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
}
.strat-perf-value {
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-main);
}

.strat-guidance-section {
    background: linear-gradient(135deg, rgba(168,85,247,0.04) 0%, rgba(0,230,138,0.04) 100%);
    border: 1px solid rgba(168,85,247,0.1);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.strat-guidance-content {
    max-height: 200px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.strat-guidance-content ul { padding-left: 16px; margin: 6px 0; }
.strat-guidance-content li { margin-bottom: 4px; }
.strat-guidance-content strong { color: var(--text-main); }

.strat-create-form {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.strat-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.strat-form-field { display: flex; flex-direction: column; gap: 4px; }
.strat-form-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Strategy banner in portfolio */
.strategy-banner {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 136, 255, 0.08) 100%);
    border: 1px solid rgba(0, 255, 136, 0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}
.strategy-banner-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.strategy-banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success-neon, #00ff88);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
    animation: pulse-dot 2s ease-in-out infinite;
}
.strategy-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.strategy-banner-pair {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: auto;
    font-weight: 600;
}
.strategy-banner-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.sb-stat {
    text-align: center;
}
.sb-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.sb-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   Training Arena — Gamified Proficiency System
   ═══════════════════════════════════════════════════════════════════ */

.arena-loading { text-align: center; padding: 40px 0; color: var(--text-dim); font-size: 12px; }

/* ── Profile Header ─────────────────────────────────────────────── */
.arena-profile-header {
    display: flex; align-items: center; gap: 16px;
    padding: 16px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.06) 100%);
    border: 1px solid rgba(99,102,241,0.15);
    margin-bottom: 16px;
}
.arena-rank-badge {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 72px; min-width: 72px; height: 72px;
    border-radius: 12px; border: 2px solid;
    background: rgba(0,0,0,0.3);
}
.arena-rank-icon { font-size: 24px; line-height: 1; }
.arena-rank-name { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; font-weight: 700; }

.arena-profile-stats { flex: 1; min-width: 0; }
.arena-xp-section { margin-bottom: 8px; }
.arena-level-label { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.arena-xp-text { font-size: 11px; font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.arena-xp-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.arena-xp-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.arena-xp-next { font-size: 10px; color: var(--text-dim); margin-top: 3px; }

.arena-quick-stats { display: flex; gap: 16px; }
.arena-qstat { display: flex; flex-direction: column; align-items: center; }
.arena-qstat-val { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.arena-qstat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }

/* ── Tab Navigation ─────────────────────────────────────────────── */
.arena-tabs {
    display: flex; gap: 4px; margin-bottom: 16px;
    padding: 3px; border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.arena-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 10px; border-radius: 6px; border: none;
    background: transparent; color: var(--text-dim);
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}
.arena-tab:hover { background: rgba(255,255,255,0.05); color: var(--text-secondary); }
.arena-tab.active { background: rgba(99,102,241,0.15); color: var(--primary-neon); }

/* ── Section Label ──────────────────────────────────────────────── */
.arena-section-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-dim); font-weight: 700; margin-bottom: 10px;
}

/* ── Instrument Cards (Dashboard) ───────────────────────────────── */
.arena-inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.arena-inst-card {
    padding: 12px; border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.2s;
}
.arena-inst-card:hover { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.05); }
.arena-inst-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.arena-inst-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.04); }
.arena-inst-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.arena-inst-rank { font-size: 10px; font-weight: 600; }
.arena-inst-xp-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 6px; }
.arena-inst-xp-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.arena-inst-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); }

/* ── Activity List ──────────────────────────────────────────────── */
.arena-activity-list { display: flex; flex-direction: column; gap: 4px; }
.arena-activity-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.02);
    font-size: 11px;
}
.arena-activity-inst { font-weight: 600; min-width: 80px; }
.arena-activity-label { flex: 1; color: var(--text-secondary); }
.arena-activity-xp { font-weight: 700; color: var(--success-neon); }

.arena-empty-hint { text-align: center; padding: 24px 0; font-size: 11px; color: var(--text-dim); }

/* ── Training Tab ───────────────────────────────────────────────── */
.arena-train-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.arena-inst-select { max-width: 200px; }
.arena-inst-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }

.arena-drill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.arena-drill-card {
    padding: 12px; border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}
.arena-drill-card:hover { border-color: rgba(99,102,241,0.25); }
.arena-drill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.arena-drill-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.arena-drill-diff { font-size: 10px; color: var(--warning-neon, #ffaa00); letter-spacing: 1px; }
.arena-drill-prompt { font-size: 10px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; min-height: 28px; }
.arena-drill-footer { display: flex; justify-content: space-between; align-items: center; }
.arena-drill-xp { font-size: 11px; font-weight: 700; color: var(--success-neon); }

/* Training Live Indicator */
.arena-training-live {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    padding: 16px; border-radius: 10px;
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    margin-bottom: 14px;
    font-size: 12px; color: var(--primary-neon);
}
.arena-training-spinner {
    width: 16px; height: 16px; border: 2px solid rgba(99,102,241,0.3);
    border-top-color: var(--primary-neon); border-radius: 50%;
    animation: arena-spin 0.8s linear infinite;
}
@keyframes arena-spin { to { transform: rotate(360deg); } }

/* Training Result Card */
.arena-train-result-card {
    display: flex; align-items: center; gap: 16px;
    padding: 14px; border-radius: 10px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
    margin-bottom: 12px;
}
.arena-train-score { text-align: center; min-width: 70px; }
.arena-train-score-num { font-size: 22px; font-weight: 800; }
.arena-train-score-label { font-size: 9px; text-transform: uppercase; color: var(--text-dim); }
.arena-train-details { flex: 1; }
.arena-train-xp-earned { font-size: 14px; font-weight: 700; color: var(--success-neon); margin-bottom: 2px; }
.arena-train-feedback { font-size: 11px; color: var(--text-secondary); }
.arena-train-response { margin-top: 12px; }
.arena-response-text {
    font-size: 11px; color: var(--text-secondary); line-height: 1.5;
    padding: 10px; border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    max-height: 200px; overflow-y: auto;
    white-space: pre-wrap;
}

/* ── Battle Tab ─────────────────────────────────────────────────── */
.arena-battle-actions { margin-bottom: 12px; }

.arena-leaderboard { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.arena-lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
}
.arena-lb-rank { width: 24px; text-align: center; font-size: 13px; font-weight: 800; color: var(--text-dim); }
.arena-lb-rank.gold { color: #ffd700; }
.arena-lb-rank.silver { color: #c0c0c0; }
.arena-lb-rank.bronze { color: #cd7f32; }
.arena-lb-model { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-primary); }
.arena-lb-stats { display: flex; gap: 10px; font-size: 10px; color: var(--text-dim); }
.arena-lb-stats span:first-child { font-weight: 700; }

/* Battle History */
.arena-battle-history { display: flex; flex-direction: column; gap: 3px; }
.arena-battle-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.02);
    cursor: pointer; font-size: 11px;
    transition: background 0.15s;
}
.arena-battle-row:hover { background: rgba(255,255,255,0.05); }
.arena-bf { color: var(--text-secondary); font-weight: 600; }
.arena-bf.winner { color: var(--success-neon); }
.arena-bvs { font-size: 9px; color: var(--text-dim); font-weight: 700; }
.arena-bscore { margin-left: auto; color: var(--text-dim); font-weight: 600; }

/* Live Battle */
.arena-battle-live, .arena-battle-result {
    padding: 16px; border-radius: 12px;
    border: 1px solid rgba(99,102,241,0.2);
    margin-bottom: 14px; text-align: center;
}
.arena-battle-live { background: rgba(99,102,241,0.06); }
.arena-battle-result { background: rgba(34,197,94,0.04); border-color: rgba(34,197,94,0.2); }
.arena-battle-live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--danger-neon); margin-bottom: 10px;
}
.arena-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--danger-neon);
    animation: arena-pulse 1s ease-in-out infinite;
}
@keyframes arena-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.arena-battle-fighters { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px 0; }
.arena-fighter { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.arena-fighter.winner { color: var(--success-neon); }
.arena-fighter-score { font-size: 20px; font-weight: 800; margin-top: 4px; color: var(--text-dim); }
.arena-fighter-score.win { color: var(--success-neon); }
.arena-vs-badge { font-size: 10px; font-weight: 800; color: var(--text-dim); padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,0.04); }

.arena-battle-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 10px; }
.arena-battle-progress-bar {
    height: 100%; width: 0; border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-neon), var(--success-neon));
    animation: arena-progress-anim 8s ease-in-out forwards;
}
@keyframes arena-progress-anim { 0% { width: 0; } 100% { width: 100%; } }

.arena-result-header { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.arena-result-reason { font-size: 11px; color: var(--text-dim); margin-top: 8px; font-style: italic; }
.arena-result-xp { font-size: 13px; font-weight: 700; color: var(--success-neon); margin-top: 6px; }

/* ── Custom Bots Tab ────────────────────────────────────────────── */
.arena-bot-actions { margin-bottom: 12px; }
.arena-bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.arena-bot-card {
    padding: 12px; border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
}
.arena-bot-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.arena-bot-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.arena-bot-meta { display: flex; gap: 12px; font-size: 10px; margin-bottom: 4px; }
.arena-bot-desc { font-size: 10px; color: var(--text-dim); line-height: 1.3; margin-bottom: 6px; }
.arena-bot-stats { display: flex; gap: 12px; font-size: 10px; color: var(--text-dim); }

.arena-create-bot-form {
    padding: 14px; border-radius: 10px;
    background: rgba(99,102,241,0.04);
    border: 1px solid rgba(99,102,241,0.15);
    margin-bottom: 14px;
}
.arena-form-row { display: flex; gap: 8px; margin-bottom: 6px; }
.arena-form-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.arena-form-label { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.arena-bot-card {
    padding: 12px; border-radius: 8px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06); transition: all 0.2s;
}
.arena-bot-card:hover { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.03); }
.arena-bot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.arena-bot-name { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.arena-bot-diff { font-size: 10px; color: var(--warning-neon, #ffaa00); letter-spacing: 1px; }
.arena-bot-meta { font-size: 10px; margin-bottom: 4px; }
.arena-bot-inst { font-weight: 600; }
.arena-bot-desc { font-size: 10px; color: var(--text-dim); margin-bottom: 8px; line-height: 1.3; }
.arena-bot-stats { display: flex; gap: 16px; }
.arena-bot-stat { display: flex; flex-direction: column; gap: 1px; }
.arena-bot-stat-val { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.arena-bot-stat-lbl { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.arena-bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.arena-exp-battle-section { margin-top: 14px; padding: 12px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); }
.arena-exp-trade-pair { font-size: 9px; font-weight: 600; min-width: 60px; }

/* ── Achievements Tab — layer3.xyz style ──────────────────────── */
.arena-achievements-tab { display: flex; flex-direction: column; gap: 16px; }
.arena-ach-overview {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.06) 100%);
    border: 1px solid rgba(99,102,241,0.2);
}
.arena-ach-overview-left { display: flex; align-items: center; gap: 14px; }
.arena-ach-progress-ring { position: relative; width: 60px; height: 60px; }
.arena-ach-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; font-weight: 800; color: var(--primary-neon); }
.arena-ach-token-display { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: rgba(255,170,0,0.08); border: 1px solid rgba(255,170,0,0.2); }
.arena-ach-category { margin-bottom: 4px; }
.arena-ach-cat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.arena-ach-cat-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
.arena-ach-cat-count { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.arena-ach-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.arena-ach-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s; position: relative;
}
.arena-ach-card:hover { background: rgba(255,255,255,0.04); }
.arena-ach-card.locked { opacity: 0.45; }
.arena-ach-card.unlocked { border-color: var(--rarity-color, rgba(99,102,241,0.3)); }
.arena-ach-icon-wrap {
    width: 36px; height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid transparent;
}
.arena-ach-body { flex: 1; min-width: 0; }
.arena-ach-name { font-size: 11px; font-weight: 700; margin-bottom: 1px; }
.arena-ach-desc { font-size: 9px; color: var(--text-dim); margin-bottom: 4px; line-height: 1.3; }
.arena-ach-reward-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.arena-ach-rarity-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; border: 1px solid; background: transparent; }
.arena-ach-xp-badge { font-size: 8px; font-weight: 700; color: var(--success-neon); background: rgba(0,211,149,0.1); padding: 1px 5px; border-radius: 3px; }
.arena-ach-reward-badge { font-size: 8px; font-weight: 600; color: var(--warning-neon, #ffaa00); display: flex; align-items: center; gap: 3px; background: rgba(255,170,0,0.08); padding: 1px 5px; border-radius: 3px; }
.arena-ach-check { position: absolute; top: 8px; right: 8px; }

/* ── Alpha Arena Experiment (nof1.ai-style) ────────────────────── */
.arena-experiment-tab { display: flex; flex-direction: column; gap: 0; }
.arena-exp-header { background: linear-gradient(135deg, rgba(0,212,255,0.06) 0%, rgba(0,211,149,0.06) 100%); border: 1px solid rgba(0,212,255,0.15); border-radius: 10px; padding: 16px; margin-bottom: 4px; }
.arena-exp-season { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.arena-exp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 8px #00ff88; animation: pulse 2s infinite; }
.arena-exp-season-label { font-size: 16px; font-weight: 700; color: var(--text-bright); letter-spacing: 0.02em; }
.arena-exp-status { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 4px; background: rgba(0,255,136,0.12); color: #00ff88; border: 1px solid rgba(0,255,136,0.3); }
.arena-exp-summary { display: flex; gap: 20px; flex-wrap: wrap; }
.arena-exp-stat { display: flex; flex-direction: column; gap: 2px; }
.arena-exp-stat-val { font-size: 18px; font-weight: 700; color: var(--text-bright); }
.arena-exp-stat-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.arena-exp-cards { display: flex; flex-direction: column; gap: 6px; }
.arena-exp-card { display: flex; gap: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px; transition: border-color 0.2s, background 0.2s; border-left: 3px solid var(--domain-color, rgba(255,255,255,0.1)); }
.arena-exp-card:hover { border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.03); }
.arena-exp-card.leader { border-color: rgba(255,215,0,0.3); background: rgba(255,215,0,0.04); border-left-color: #ffd700; }
.arena-exp-card-left { display: flex; align-items: flex-start; min-width: 32px; }
.arena-exp-card-body { flex: 1; min-width: 0; }
.arena-exp-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.arena-exp-medal { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; }
.arena-exp-medal.gold { background: rgba(255,215,0,0.15); color: #ffd700; border: 1px solid rgba(255,215,0,0.4); }
.arena-exp-medal.silver { background: rgba(192,192,192,0.12); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.3); }
.arena-exp-medal.bronze { background: rgba(205,127,50,0.12); color: #cd7f32; border: 1px solid rgba(205,127,50,0.3); }
.arena-exp-rank-num { font-size: 10px; font-weight: 700; color: var(--text-muted); min-width: 24px; }
.arena-exp-card-name { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.arena-exp-domain-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; padding: 1px 5px; border-radius: 3px; border: 1px solid; background: transparent; }
.arena-exp-ai-tag { font-size: 7px; font-weight: 700; letter-spacing: 0.1em; padding: 1px 4px; border-radius: 3px; background: rgba(0,212,255,0.12); color: var(--primary-neon); border: 1px solid rgba(0,212,255,0.3); }
.arena-exp-card-profile { font-size: 10px; color: var(--text-dim); margin-bottom: 10px; font-style: italic; }
.arena-exp-card-metrics { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.arena-exp-metric { display: flex; flex-direction: column; gap: 1px; min-width: 70px; }
.arena-exp-metric-val { font-size: 13px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.arena-exp-metric-lbl { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.arena-exp-card-footer { display: flex; gap: 8px; font-size: 9px; color: var(--text-dim); padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.04); }
.arena-exp-pair { color: var(--primary-neon); font-weight: 600; }
.arena-exp-exchange { color: var(--text-muted); }
.arena-exp-template { color: var(--text-dim); font-style: italic; }
/* Trade feed */
.arena-exp-trades { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; }
.arena-exp-trade { display: flex; align-items: center; gap: 8px; font-size: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.015); font-family: 'JetBrains Mono', monospace; }
.arena-exp-trade:hover { background: rgba(255,255,255,0.03); }
.arena-exp-trade-time { color: var(--text-dim); min-width: 58px; }
.arena-exp-trade-side { font-weight: 700; min-width: 32px; }
.arena-exp-trade-side.buy { color: var(--success-neon); }
.arena-exp-trade-side.sell { color: var(--danger-neon); }
.arena-exp-trade-size { color: var(--text-bright); min-width: 90px; }
.arena-exp-trade-price { color: var(--text-muted); min-width: 80px; }
.arena-exp-trade-strat { color: var(--text-dim); font-size: 9px; margin-left: auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── RADAR Panel (Quant HUD v2) ───────────────────────── */
.radar-opp-card {
    padding: 14px;
    margin-bottom: 10px;
    border-radius: var(--radius-md);
    background: var(--surface-glass);
    border: 1px solid var(--surface-glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--trans-smooth);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.radar-opp-card:hover {
    background: var(--surface-glass-hover);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.radar-opp-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.radar-opp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.radar-opp-title {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.radar-opp-detail {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
    font-weight: 400;
}

.radar-opp-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.radar-opp-risk {
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
}

/* ── Rich Portfolio Tuning ──────────────── */

.portfolio-header-rich {
    background: linear-gradient(135deg, rgba(0, 230, 138, 0.08) 0%, rgba(0, 212, 255, 0.05) 100%);
    border: 1px solid rgba(0, 230, 138, 0.15);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.portfolio-header-rich::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 230, 138, 0.4), transparent);
}

.ph-main .ph-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.ph-main .ph-value {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    margin: 4px 0;
    text-shadow: 0 0 20px rgba(0, 230, 138, 0.2);
}

.ph-main .ph-subtext {
    font-size: 11px;
    color: var(--text-dim);
}

.ph-side-metrics {
    display: flex;
    gap: 20px;
}

.ph-side-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ph-side-item .lbl {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.ph-side-item .val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
}

.portfolio-summary-rich {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.p-card, .stat-card, .balance-card {
    background: var(--bg-elevated);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: var(--trans-smooth);
    position: relative;
    overflow: hidden;
}

.p-card:hover, .stat-card:hover, .balance-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--surface-glass-hover);
    transform: translateY(-2px);
}

.p-card-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.p-card-value {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.p-card-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.p-card-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-neon), var(--secondary-neon));
    border-radius: 2px;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.pm-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.pm-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-secondary);
}

.ph-value.positive { color: var(--success-neon); }
.ph-value.negative { color: var(--danger-neon); }
.val.green { color: var(--success-neon); }
.val.red { color: var(--danger-neon); }
.green { color: var(--success-neon); }
.red { color: var(--danger-neon); }

/* ── Rich Texture & Glassmorphism ──────────────── */

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.texture-noise {
    position: relative;
    overflow: hidden;
}

.texture-noise::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

/* ── Sparkline & Visual Charts ─────────────── */

.p-sparkline {
    height: 30px;
    width: 80px;
    position: absolute;
    bottom: 12px;
    right: 16px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.p-card:hover .p-sparkline {
    opacity: 1;
}

.sparkline-path {
    fill: none;
    stroke: var(--success-neon);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: sparklineFadeIn 1.5s ease forwards;
}

.sparkline-path.down {
    stroke: var(--danger-neon);
}

@keyframes sparklineFadeIn {
    to { stroke-dashoffset: 0; }
}

/* ── Asset Allocation Bar ──────────────────── */

.allocation-container {
    margin-top: 12px;
}

.allo-bar {
    height: 8px;
    width: 100%;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    margin-bottom: 8px;
}

.allo-fill {
    height: 100%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.allo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 10px;
}

.allo-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-dim);
}

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


/* ── Rich Portfolio Component ──────────────── */
.portfolio-header-premium {
    padding: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border-bottom: 1px solid var(--surface-glass-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.portfolio-main-val {
    grid-column: span 2;
}

.portfolio-val-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 4px;
    display: block;
}

.portfolio-val-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.portfolio-val-delta {
    font-size: 14px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--success-glow);
    color: var(--success-neon);
}

.portfolio-val-delta.negative {
    background: var(--danger-glow);
    color: var(--danger-neon);
}

.portfolio-grid-rich {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    padding: 16px;
}

.portfolio-section-card {
    background: var(--bg-elevated);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portfolio-health-gauge {
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.health-bar-bg {
    height: 6px;
    background: var(--surface-glass);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-neon), var(--warning-neon));
    width: 100%;
    transition: width 1s ease-out;
}

.health-bar-fill.danger {
    background: var(--danger-neon);
}

.asset-donut-container {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.decision-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.decision-card {
    padding: 10px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}

.decision-card-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 4px;
}

.decision-reasoning {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.sparkline-canvas {
    width: 60px;
    height: 24px;
    opacity: 0.8;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.status-tag {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 255, 170, 0.1);
    color: var(--success-neon);
    text-transform: uppercase;
    font-weight: 700;
}

.status-tag.pulse {
    animation: pulse-glow 2s infinite;
}

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

/* Model Selector Modal - Rich Textured Design */
.model-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.model-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.model-modal-container {
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: linear-gradient(145deg, rgba(20, 20, 25, 0.98), rgba(12, 12, 16, 0.95));
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.model-modal-overlay.active .model-modal-container {
    transform: scale(1) translateY(0);
}

.model-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.model-modal-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal-icon {
    font-size: 32px;
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.3));
}

.model-modal-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #a0a0a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.modal-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.modal-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg);
}

.model-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    max-height: calc(85vh - 180px);
}

.model-search-bar {
    position: relative;
    margin-bottom: 20px;
}

.model-search-bar input {
    width: 100%;
    padding: 14px 18px 14px 44px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--text-main);
    font-size: 14px;
    transition: all 0.2s;
}

.model-search-bar input:focus {
    outline: none;
    border-color: var(--primary-neon);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.15);
}

.model-search-bar input::placeholder {
    color: var(--text-muted);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.5;
}

.model-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.model-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.model-tab:hover {
    color: var(--text-main);
}

.model-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tab-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 700;
}

.tab-badge.free {
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    color: #000;
}

.model-modal-content {
    display: grid;
    gap: 8px;
}

.model-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.model-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.model-card.active {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.02));
    border-color: var(--primary-neon);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.1);
}

.model-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.model-card.active .model-card-icon {
    background: var(--primary-neon);
    border-color: var(--primary-neon);
}

.model-card-info {
    flex: 1;
}

.model-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 3px;
}

.model-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-card-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
}

.model-card-badge.free {
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    color: #000;
}

.model-card-badge.paid {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.model-card-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.model-card.active .model-card-check {
    background: var(--primary-neon);
    border-color: var(--primary-neon);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.model-card-check::after {
    content: '✓';
    color: transparent;
    font-size: 14px;
    font-weight: 700;
}

.model-card.active .model-card-check::after {
    color: #000;
}

.model-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.model-selected-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-label {
    color: var(--text-muted);
    font-size: 13px;
}

.selected-name {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
}

.model-confirm-btn {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary-neon), #00cc6a);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
}

.model-confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 255, 136, 0.4);
}

.model-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Provider Icons */
.provider-google { background: linear-gradient(135deg, #4285f4, #34a853); }
.provider-openai { background: linear-gradient(135deg, #10a37f, #19c59f); }
.provider-anthropic { background: linear-gradient(135deg, #d4a574, #c4a35a); }
.provider-meta { background: linear-gradient(135deg, #0081fb, #0061d5); }
.provider-mistral { background: linear-gradient(135deg, #ff6b35, #ff8f5a); }
.provider-default { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

.no-models-message {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Utility */
.hidden { display: none !important; }