:root {
    /* == Core backgrounds ============================================== */
    --bg-deep:    #090c14;
    --bg-body:    #090c14;
    --bg-card:    rgba(255,255,255,0.04);
    --bg-sidebar: rgba(9,12,20,0.92);
    --bg-modal:   #0d1117;
    --bg-input:   rgba(0,0,0,0.3);

    /* == Surfaces / Glass ============================================== */
    --glass:     rgba(255,255,255,0.04);
    --surface-1: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);

    /* == Accent ======================================================== */
    --accent:      #7dd3fc;
    --accent-glow: rgba(125,211,252,0.15);

    /* == Risk / Status ================================================= */
    --risk-high: #f87171;
    --risk-med:  #fb923c;
    --risk-low:  #4ade80;

    /* == Text ========================================================== */
    --text-main: #e2e8f0;
    --text-dim:  #94a3b8;
    --text:      var(--text-main);

    /* == On-colour text (text placed ON a coloured surface) ============ */
    --on-accent:     #000;
    --on-accent-inv: #fff;
    --btn-text:      rgb(121, 204, 244); /* text on gradient CTA buttons */

    /* == Border and Shadow ============================================= */
    --border:       rgba(255,255,255,0.08);
    --shadow-color: rgba(0,0,0,0.5);

    /* == Purple secondary accent ======================================= */
    --purple:      #8b5cf6;
    --purple-glow: rgba(139,92,246,0.15);

    /* == Aliases ======================================================= */
    --card-bg:  var(--bg-card);

    /* == Layout ======================================================== */
    --sidebar-w: 260px;

    /* == Market regime colours ========================================= */
    --regime-accumulation: #818cf8;
    --regime-trending:     #7dd3fc;
    --regime-distribution: #fb923c;
    --regime-volatile:     #f87171;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
body { font-family: 'Outfit', sans-serif; background: var(--bg-body); color: var(--text-main); }

h1, h2, h3 { font-family: 'Outfit', sans-serif; font-weight: 700; }
.material-symbols-outlined { vertical-align: middle; display: inline-flex; justify-content: center; align-items: center; line-height: 1; }

select, option {
    background-color: #0d1117;
    color: var(--text-main);
}
select:focus {
    outline: 1px solid var(--accent);
    border-color: var(--accent);
}

/* Layout */
.layout { display: flex; min-height: 100vh; width: 100%; overflow: hidden; }
.sidebar { 
    width: var(--sidebar-w); 
    background: var(--bg-sidebar); 
    border-right: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px); 
    padding: 1.5rem; 
    display: flex; 
    flex-direction: column; 
    position: sticky; 
    top: 0; 
    height: 100vh; 
    z-index: 1000; 
    flex-shrink: 0; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sidebar.collapsed { width: 0; padding: 0; border: none; overflow: hidden; transform: translateX(-100%); }
.content { flex: 1; min-width: 0; padding: 2rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.layout.collapsed .sidebar { width: 0; padding: 0; opacity: 0; pointer-events: none; }
.layout.collapsed .content { margin-left: 0; }

/* Brand */
.brand { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; padding: 0.5rem 0; }
.logo-orb { width: 32px; height: 32px; background: radial-gradient(135deg, rgba(125,211,252,0.6), rgba(99,102,241,0.4)); border-radius: 50%; border: 1px solid rgba(125,211,252,0.3); }
.brand-title { font-size: 1.5rem; font-weight: 900; }
.brand-title span { color: var(--accent); }



/* Navigation */
.nav-menu { flex: 1; }
.nav-item { padding: 0.5rem 0.8rem; margin-bottom: 0.2rem; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
.nav-item.active { background: rgba(125, 211, 252, 0.1); color: var(--accent); font-weight: 600; border-left: none; border-radius: 8px; }
.alert-badge { 
    background: var(--risk-high); 
    color: white; 
    border-radius: 50%; 
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px; 
    font-weight: 900;
    margin-left: auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px var(--risk-high);
    animation: pulse-alert 2s infinite;
}



/* Top Bar Base */
.top-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.07); position: relative; z-index: 500; overflow: visible; }
.signal-feed { display: flex; align-items: center; gap: 1rem; overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; }
.feed-label { background: var(--purple); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 900; flex-shrink: 0; z-index: 2; }
.scroller-container { flex: 1; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 20px); -webkit-mask-image: linear-gradient(to right, transparent, black 20px); display: flex; align-items: center; }
.scroller { font-family: 'JetBrains Mono'; font-size: 0.85rem; animation: scroll 60s linear infinite; white-space: nowrap; }
@keyframes scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* Top Bar Actions & Groups */
.top-bar-actions { display: flex; align-items: center; gap: 1rem; }
.action-group { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    background: rgba(255, 255, 255, 0.02); 
    padding: 2px 4px; 
    border-radius: 12px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Styled Action Buttons */
.action-btn-styled {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Outfit', sans-serif;
    position: relative; /* Anchor for internal absolute elements if needed */
}

.action-btn-styled:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--text-dim); transform: translateY(-1.5px); }
.action-btn-styled:active { transform: translateY(0); }
.action-btn-styled.outline { border-color: var(--border); background: transparent; }
.action-btn-styled.primary { background: var(--accent); color: var(--on-accent); border: none; }
.action-btn-styled.primary:hover { background: var(--on-accent-inv);  }

/* Notification Wrapper & Badge */
.notif-wrapper { position: relative; display: flex; align-items: center; margin-right: 4px; }
#bell-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ef4444;
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px; /* Pill shape */
    display: none; /* Controlled by JS */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    border: 2px solid var(--bg-deep);
    z-index: 100;
    pointer-events: none;
}

/* Notification Dropdown */
.notif-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 340px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

/* Countdown Timer Enhancement */
.countdown-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(125, 211, 252, 0.05);
    border-radius: 6px;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Global Search */
.search-container { position: relative; flex: 1; max-width: 400px; margin: 0 2rem; }
#global-search { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 0.7rem 1.5rem; border-radius: 20px; color: var(--text-main); font-family: 'JetBrains Mono'; font-size: 0.8rem; outline: none; transition: 0.3s; }
#global-search:focus { border-color: rgba(125, 211, 252, 0.4); background: rgba(125, 211, 252, 0.04); }
.search-hint { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: var(--text-dim); font-weight: 700; pointer-events: none; }

/* Signals Grid */
.signal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.signal-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); padding: 1.5rem; border-radius: 16px; position: relative; transition: 0.3s; cursor: pointer; backdrop-filter: blur(8px); }
.signal-card:hover { transform: translateY(-4px); border-color: rgba(125, 211, 252, 0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(125,211,252,0.1); }
.card-controls { position: absolute; top: 1.25rem; right: 1.25rem; display: flex; gap: 12px; z-index: 10; }
.ai-trigger, .share-trigger { cursor: pointer; filter: grayscale(1); opacity: 0.6; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--text-dim); }
.ai-trigger:hover, .share-trigger:hover { filter: grayscale(0); opacity: 1; transform: scale(1.15); color: var(--accent); }

.ticker { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.2rem; }
.label-tag { font-size: 0.65rem; color: var(--accent); font-weight: 700; letter-spacing: 1px; }
.label-tag.cat-miners { color: #4ade80; }
.delta-stat { margin: 1.5rem 0; text-align: center; }
.delta-label { font-size: 0.65rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.delta-value { font-size: 2.5rem; font-weight: 900; color: var(--accent); font-family: 'JetBrains Mono'; }
.metric-line { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--text-dim); }

.pos { color: var(--risk-low) !important; }
.neg { color: var(--risk-high) !important; }
.dim { color: var(--text-dim) !important; }

/* Pack G5: AI Analyst Modal */
.ai-analyst-panel { max-width: 600px; border-top: 4px solid #8b5cf6; }
.ai-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ai-orb { width: 20px; height: 20px; background: var(--purple); border-radius: 50%; animation: pulse-ai 2s infinite; }
@keyframes pulse-ai { 0% { box-shadow: 0 0 0 0 rgba(188, 19, 254, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(188, 19, 254, 0); } 100% { box-shadow: 0 0 0 0 rgba(188, 19, 254, 0); } }
.ai-report-box { background: rgba(188, 19, 254, 0.05); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(188, 19, 254, 0.2); line-height: 1.8; font-size: 0.95rem; color: var(--text-main); }

/* Pack G2: Mindshare View */
.mindshare-container { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; margin-top: 2rem; min-width: 0; }
.mindshare-legend { background: rgba(255,255,255,0.04); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); }
.zone { margin-bottom: 1.5rem; padding-left: 1rem; border-left: 3px solid transparent; font-size: 0.85rem; color: var(--text-dim); }
.zone span { display: block; color: var(--text-main); font-weight: 700; margin-bottom: 0.2rem; }
.zone-alpha { border-color: var(--accent); }
.zone-hype { border-color: var(--purple); }
.zone-under { border-color: #ff9f00; }

/* Pack G3: Risk Dashboard */
.risk-dashboard { display: flex; gap: 2rem; }
.risk-stat { text-align: right; }
.risk-stat label { font-size: 0.6rem; color: var(--text-dim); display: block; margin-bottom: 0.3rem; }
.p-val { font-size: 1.2rem; font-weight: 900; font-family: 'JetBrains Mono'; }

/* Overlay System */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; transition: 0.3s; padding: 1rem; }
.overlay.hidden { display: none; }
.overlay-content { background: rgba(9,12,20,0.95); backdrop-filter: blur(24px); width: 100%; max-width: 1300px; max-height: 92vh; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); padding: 2rem; overflow-y: auto; position: relative; }
.close-overlay, .close-ai-modal { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; font-size: 2rem; color: var(--text-dim); cursor: pointer; }

/* Zoomable chart panels (click to expand into full-screen modal) */
.zoomable-panel {
    cursor: zoom-in;
    border-radius: 10px;
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.zoomable-panel::after {
    content: 'zoom_in';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: rgba(125,211,252,0);
    transition: color 0.2s ease;
    pointer-events: none;
    line-height: 1;
}
.zoomable-panel:hover {
    border-color: rgba(125,211,252,0.2);
    box-shadow: 0 0 16px rgba(125,211,252,0.05);
}
.zoomable-panel:hover::after {
    color: rgba(125,211,252,0.5);
}



/* Tooltips */
.chart-tooltip {
    width: 200px;
    height: auto;
    position: absolute;
    display: none;
    padding: 12px;
    box-sizing: border-box;
    font-size: 11px;
    text-align: left;
    z-index: 1000;
    top: 12px;
    left: 12px;
    pointer-events: none;
    border: 1px solid var(--accent);
    background: var(--glass);
    backdrop-filter: blur(12px);
    border-radius: 8px;
    color: var(--text-main);
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tooltip-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.tooltip-label { color: var(--text-dim); }
.tooltip-value { font-weight: 700; color: var(--accent); }
/* Skeletons */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.skeleton-card { background: var(--bg-card); border-radius: 16px; padding: 1.5rem; height: 350px; overflow: hidden; }
.sk-line { height: 20px; background: rgba(255,255,255,0.05); margin-bottom: 1rem; border-radius: 4px; overflow: hidden; position: relative; }
.sk-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); animation: shimmer 1.5s infinite; }
/* ============================================================
   EXECUTION INTELLIGENCE: HEATMAP & TAPE
   ============================================================ */

.gomm-container {
    display: grid;
    grid-template-columns: 350px 1fr 300px;
    gap: 20px;
    height: calc(100vh - 120px);
}

.heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    overflow: auto;
}

.heatmap-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
    align-items: center;
}

.heatmap-cells {
    display: flex;
    gap: 2px;
    height: 30px;
}

.hm-cell {
    flex: 1;
    border-radius: 2px;
    transition: transform 0.2s ease;
    min-width: 20px;
}

.hm-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Institutional Ledger (Tape) */
.tape-sidebar {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tape-header {
    background: rgba(255,255,255,0.03);
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.tape-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.tape-item {
    display: grid;
    grid-template-columns: 60px 1fr 80px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    align-items: center;
    animation: slideInTape 0.3s ease-out;
}

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

.tape-item.institutional {
    background: rgba(var(--accent-rgb), 0.05);
    border-left: 2px solid var(--accent);
}

.tape-val { font-weight: 700; }
.tape-buy { color: var(--risk-low); }
.tape-sell { color: var(--risk-high); }

/* AI Setup Generator */
.setup-generator-btn {
    width: 100%;
    background: rgba(125,211,252,0.12);
    color: #7dd3fc;
    border: 1px solid rgba(125,211,252,0.3);
    padding: 15px;
    border-radius: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    margin-top: 20px;
    
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.setup-generator-btn:hover {
    transform: translateY(-3px);
    
}
/* Trade Lab Expansion */
.trade-lab-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    margin-top: 20px;
}

.picks-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}

.picks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.pick-mini-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
    border-left: 3px solid var(--accent);
}

.pick-mini-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

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

.pick-header .ticker {
    font-weight: 900;
    font-size: 1.1rem;
}

.pick-header .rr-badge {
    font-size: 0.65rem;
    font-weight: 900;
    background: rgba(125, 211, 252, 0.1);
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 4px;
}

.pick-params {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.p-item label {
    display: block;
    font-size: 0.55rem;
    color: var(--text-dim);
    margin-bottom: 2px;
}

.p-item span {
    font-size: 0.8rem;
    font-weight: 700;
}

.generator-controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.lab-disclaimer {
    margin-top: 20px;
    font-size: 0.7rem;
    color: var(--text-dim);
    line-height: 1.4;
}

.risk-notice {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--risk-high);
    margin-top: 15px;
}

/* Trade Lab Feedback & Animations */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    color: var(--accent);
    animation: fadeIn 0.4s ease-out;
}

.spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(125,211,252,0.08);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-bottom: 20px;

}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.error-card {
    background: rgba(255, 59, 48, 0.05) !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
    border-left: 4px solid var(--neg) !important;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.rationale-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-header);
    font-size: 0.9rem;
    list-style-type: square;
}

.rationale-list li {
    margin-bottom: 10px;
    line-height: 1.5;
    color: var(--text-dim);
}

.animate-in {
    animation: slideUp 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

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

@media (max-width: 1200px) {
    .trade-lab-layout {
        grid-template-columns: 1fr;
    }
}

.setup-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    animation: fadeIn 0.5s ease;
}

.setup-param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

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

.setup-param .label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: 900;
}

.setup-param .value {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    :root {
    /* == Core backgrounds ============================================== */
    --bg-deep:    #090c14;
    --bg-body:    #090c14;
    --bg-card:    rgba(255,255,255,0.04);
    --bg-sidebar: rgba(9,12,20,0.92);
    --bg-modal:   #0d1117;
    --bg-input:   rgba(0,0,0,0.3);

    /* == Surfaces / Glass ============================================== */
    --glass:     rgba(255,255,255,0.04);
    --surface-1: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);

    /* == Accent ======================================================== */
    --accent:      #7dd3fc;
    --accent-glow: rgba(125,211,252,0.15);

    /* == Risk / Status ================================================= */
    --risk-high: #f87171;
    --risk-med:  #fb923c;
    --risk-low:  #4ade80;

    /* == Text ========================================================== */
    --text-main: #e2e8f0;
    --text-dim:  #94a3b8;
    --text:      var(--text-main);

    /* == On-colour text (text placed ON a coloured surface) ============ */
    --on-accent:     #000;
    --on-accent-inv: #fff;
    --btn-text:      rgb(121, 204, 244); /* text on gradient CTA buttons */

    /* == Border and Shadow ============================================= */
    --border:       rgba(255,255,255,0.08);
    --shadow-color: rgba(0,0,0,0.5);

    /* == Purple secondary accent ======================================= */
    --purple:      #8b5cf6;
    --purple-glow: rgba(139,92,246,0.15);

    /* == Aliases ======================================================= */
    --card-bg:  var(--bg-card);

    /* == Layout ======================================================== */
    --sidebar-w: 260px;

    /* == Market regime colours ========================================= */
    --regime-accumulation: #818cf8;
    --regime-trending:     #7dd3fc;
    --regime-distribution: #fb923c;
    --regime-volatile:     #f87171;
}
}

@media (max-width: 768px) {
    :root {
    /* == Core backgrounds ============================================== */
    --bg-deep:    #090c14;
    --bg-body:    #090c14;
    --bg-card:    rgba(255,255,255,0.04);
    --bg-sidebar: rgba(9,12,20,0.92);
    --bg-modal:   #0d1117;
    --bg-input:   rgba(0,0,0,0.3);

    /* == Surfaces / Glass ============================================== */
    --glass:     rgba(255,255,255,0.04);
    --surface-1: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);

    /* == Accent ======================================================== */
    --accent:      #7dd3fc;
    --accent-glow: rgba(125,211,252,0.15);

    /* == Risk / Status ================================================= */
    --risk-high: #f87171;
    --risk-med:  #fb923c;
    --risk-low:  #4ade80;

    /* == Text ========================================================== */
    --text-main: #e2e8f0;
    --text-dim:  #94a3b8;
    --text:      var(--text-main);

    /* == On-colour text (text placed ON a coloured surface) ============ */
    --on-accent:     #000;
    --on-accent-inv: #fff;
    --btn-text:      rgb(121, 204, 244); /* text on gradient CTA buttons */

    /* == Border and Shadow ============================================= */
    --border:       rgba(255,255,255,0.08);
    --shadow-color: rgba(0,0,0,0.5);

    /* == Purple secondary accent ======================================= */
    --purple:      #8b5cf6;
    --purple-glow: rgba(139,92,246,0.15);

    /* == Aliases ======================================================= */
    --card-bg:  var(--bg-card);

    /* == Layout ======================================================== */
    --sidebar-w: 260px;

    /* == Market regime colours ========================================= */
    --regime-accumulation: #818cf8;
    --regime-trending:     #7dd3fc;
    --regime-distribution: #fb923c;
    --regime-volatile:     #f87171;
}
    .sidebar {
        position: fixed;
        left: -100%;
        width: 260px;
        transition: left 0.3s ease;
        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
    }
    .sidebar.open { left: 0; }
    .content { padding: 1rem; }
    .top-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.8rem; }
    .top-bar-actions { justify-content: space-between; }
    .feed-label { display: none; }
    
    .grid-1-2, .grid-2-1, .grid-3 { grid-template-columns: 1fr !important; }
    .glass-card { height: auto !important; }
    canvas { max-height: 250px !important; }
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .mobile-toggle { display: flex; align-items: center; justify-content: center; }
}
/* Mobile Adjustments for GOMM Expansion */
@media (max-width: 1200px) {
    .gomm-container {
        grid-template-columns: 1fr;
    }
    .tape-sidebar {
        display: none;
    }
}
/* ============================================================ */
/* MOBILE RESPONSIVE ENHANCEMENTS */
/* ============================================================ */

.mobile-nav { display: none; }

@media (max-width: 900px) {
    :root {
    /* == Core backgrounds ============================================== */
    --bg-deep:    #090c14;
    --bg-body:    #090c14;
    --bg-card:    rgba(255,255,255,0.04);
    --bg-sidebar: rgba(9,12,20,0.92);
    --bg-modal:   #0d1117;
    --bg-input:   rgba(0,0,0,0.3);

    /* == Surfaces / Glass ============================================== */
    --glass:     rgba(255,255,255,0.04);
    --surface-1: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);

    /* == Accent ======================================================== */
    --accent:      #7dd3fc;
    --accent-glow: rgba(125,211,252,0.15);

    /* == Risk / Status ================================================= */
    --risk-high: #f87171;
    --risk-med:  #fb923c;
    --risk-low:  #4ade80;

    /* == Text ========================================================== */
    --text-main: #e2e8f0;
    --text-dim:  #94a3b8;
    --text:      var(--text-main);

    /* == On-colour text (text placed ON a coloured surface) ============ */
    --on-accent:     #000;
    --on-accent-inv: #fff;
    --btn-text:      rgb(121, 204, 244); /* text on gradient CTA buttons */

    /* == Border and Shadow ============================================= */
    --border:       rgba(255,255,255,0.08);
    --shadow-color: rgba(0,0,0,0.5);

    /* == Purple secondary accent ======================================= */
    --purple:      #8b5cf6;
    --purple-glow: rgba(139,92,246,0.15);

    /* == Aliases ======================================================= */
    --card-bg:  var(--bg-card);

    /* == Layout ======================================================== */
    --sidebar-w: 260px;

    /* == Market regime colours ========================================= */
    --regime-accumulation: #818cf8;
    --regime-trending:     #7dd3fc;
    --regime-distribution: #fb923c;
    --regime-volatile:     #f87171;
}
    
    .sidebar { 
        position: fixed; 
        left: 0;
        top: 0;
        width: 100vw !important;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2000;
        background: var(--bg-deep);
        padding: 2rem;
        display: block; /* Ensure it's not hidden */
    }
    .sidebar.open { transform: translateX(0); }
    
    .close-sidebar-mobile {
        display: block !important;
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: 2.5rem;
        margin-left: auto;
        cursor: pointer;
    }
    
    .sidebar .brand { justify-content: center; margin-bottom: 3rem; }
    .sidebar .brand-title { font-size: 1.2rem; }
    .sidebar .hamburger { display: none; } /* Hide hamburger inside sidebar */

    /* Grid layout for menu items on mobile */
    .nav-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-height: 70vh;
        overflow-y: auto;
        padding-bottom: 2rem;
    }
    
    .nav-item {
        padding: 0.8rem 1rem;
        margin-bottom: 0.4rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 8px;
        font-size: 0.9rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        color: var(--text-dim);
    }

    .nav-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: var(--accent);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }

    .nav-item.active::before {
        transform: scaleY(1);
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-main);
    }
    .nav-item.active { background: rgba(125, 211, 252, 0.1); color: var(--accent); font-weight: 600; border-left: none; border-radius: 8px; }
    
    .nav-item {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--border);
        padding: 1.2rem 0.5rem;
        font-size: 0.75rem;
        gap: 8px;
        min-height: 100px;
    }
    .nav-item .icon { font-size: 1.5rem; display: block; margin: 0 auto; }
    .nav-item.active { border-left: none; border-bottom: 3px solid var(--accent); }
    
    .user-profile-card {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        right: 2rem;
        border-top: 1px solid var(--border);
        padding-top: 1.5rem;
        background: var(--bg-deep);
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    
    .content { padding: 1rem; padding-bottom: 80px; } /* Space for bottom nav */
    
    /* Top bar completely hidden on mobile - bottom nav handles navigation */
    .top-bar { display: none !important; }
    
    .signal-grid, .heatmap-grid, .skeleton-grid,
    .signal-analytics-grid {
        grid-template-columns: 1fr !important;
    }
    
    .overlay { padding: 0.5rem; }
    .overlay-content { 
        padding: 1.5rem; 
        max-height: 95vh;
        border-radius: 12px;
    }
    
    .delta-value { font-size: 2rem; }
    .big-val { font-size: 3rem; }
    
    /* Bottom Navigation */
    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(13, 17, 23, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border);
        height: 70px;
        z-index: 1001;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--text-dim);
        font-size: 0.7rem;
        font-weight: 700;
        cursor: pointer;
        padding: 10px;
        flex: 1;
        transition: 0.2s;
    }
    
    .m-icon { font-size: 1.2rem; }
    .mobile-nav-item.active { color: var(--accent); }
    
    .m-alert-badge {
        position: absolute;
        top: 8px;
        right: 25%;
        background: var(--risk-high);
        color: white;
        border-radius: 50%;
        min-width: 14px;
        height: 14px;
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
    }

    .mindshare-container { grid-template-columns: 1fr; }
    .analysis-grid { grid-template-columns: 1fr !important; }
    
    .whale-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    .w-actions { align-items: center; }
    
    .article-title { font-size: 1.5rem; }
    .news-article-panel { padding: 1.5rem; }
}

/* - Mobile: -600px - further tightening - */
@media (max-width: 600px) {
    /* Hub sub-tabs: horizontal scroll instead of clip */
    .hub-tabs, .sub-tabs, [class*="tab-row"], [class*="-tabs"] {
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .hub-tabs::-webkit-scrollbar,
    .sub-tabs::-webkit-scrollbar { display: none; }
}

/* - Mobile: -480px - hero & landing - */
@media (max-width: 480px) {
    .brand-title { font-size: 1.2rem; }
    .intel-action-btn.large { padding: 1rem; font-size: 0.9rem; }
    .auth-panel { padding: 2rem 1.5rem; }

    /* Full screen modals for mobile */
    .overlay { padding: 0; align-items: flex-start; }
    .overlay-content {
        height: 100%;
        width: 100%;
        max-height: 100vh;
        max-width: 100vw;
        border-radius: 0;
        border: none;
    }
    .close-overlay, .close-ai-modal { top: 1rem; right: 1rem; }

    /* Signal feed: hide on tiny screens */
    .signal-feed { display: none !important; }

    /* Landing hero: stack image below text */
    .hero-section {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    .hero-visual { display: none; } /* hide hero image on tiny screens */

    /* Hero CTA buttons: stack vertically, full width */
    .hero-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .hero-actions button, .hero-actions a {
        width: 100% !important;
        justify-content: center;
    }

    /* Landing stats grid: 2 cols */
    .stats-grid, .hub-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hub cards: single column */
    .hubs-grid, .hub-cards-grid, .features-grid {
        grid-template-columns: 1fr !important;
    }

    /* Typography scale down */
    .hero-section h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    .hero-subtitle, .section-subtitle { font-size: 0.85rem !important; }

    /* Hero: collapse padding, hide image so text fills screen */
    .hero-section { padding: 1.5rem !important; gap: 1rem !important; }
    .hero-visual { display: none !important; }
    .hero-content { text-align: left; }

    /* Bottom CTA flex wrap */
    .bottom-cta-group, [style*="display:flex"][style*="justify-content:center"] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Heatmap View */
.heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.heatmap-sector { background: var(--bg-card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 12px; height: 100%; }
.heatmap-sector h3 { font-size: 0.8rem; color: var(--accent); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
.heatmap-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 8px; }
.heatmap-box { height: 50px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; font-family: 'JetBrains Mono'; color: var(--on-accent); cursor: pointer; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--border); }
.heatmap-box:hover { transform: scale(1.1); z-index: 10; font-size: 0.8rem; border-color: var(--on-accent-inv) !important; }

.heatmap-legend { margin-bottom: 2rem; background: rgba(0,0,0,0.2); padding: 1.2rem; border-radius: 12px; border: 1px solid var(--border); }
.legend-labels { display: flex; justify-content: space-between; margin-bottom: 0.8rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; }
.legend-bar { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--risk-high), #333, var(--risk-low)); }

/* Catalyst Timeline */
.catalyst-list { margin-top: 2rem; position: relative; padding-left: 2rem; }
.catalyst-list::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border); }
.catalyst-item { margin-bottom: 2rem; position: relative; }
.catalyst-item::before { content: ''; position: absolute; left: -2.35rem; top: 0.5rem; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent-glow); }
.cat-date { font-size: 0.75rem; color: var(--accent); font-family: 'JetBrains Mono'; margin-bottom: 0.5rem; }
.cat-card { background: var(--bg-card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 12px; }
.cat-type { font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.05); margin-bottom: 0.5rem; display: inline-block; }

/* Whale Feed */
.whale-list { display: flex; flex-direction: column; gap: 0.75rem; }
.whale-row { background: var(--bg-card); border: 1px solid var(--border); padding: 1rem 1.5rem; border-radius: 12px; display: grid; grid-template-columns: 80px 1fr 1fr 100px; align-items: center; gap: 1rem; }
.w-amount { font-family: 'JetBrains Mono'; font-weight: 900; font-size: 1.1rem; }
.w-hash { color: var(--text-dim); font-size: 0.75rem; }

/* Pulse & Flows */
.pulse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; min-height: 200px; margin-top: 1rem; }
.pulse-card { background: var(--bg-card); border: 1px solid var(--border); padding: 2.5rem; border-radius: 20px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.big-val { font-size: 4rem; font-weight: 900; font-family: 'Outfit'; margin: 1rem 0; color: var(--accent); }
/* Premium Filter Systems */
.view-actions { display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem; }
.category-filters, .timeframe-bar { 
    display: inline-flex; 
    background: rgba(0, 0, 0, 0.3); 
    padding: 4px; 
    border-radius: 12px; 
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    margin-bottom: 1.5rem;
}
.filter-btn, .tf-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 0.6rem 1.25rem;
    border-radius: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.filter-btn:hover, .tf-btn:hover {
    color: var(--text-main);
}
.filter-btn.active, .tf-btn.active {
    background: var(--accent);
    color: var(--on-accent);
    
}

/* Advanced Quantitative Overlays */
.timeframe-btn { 
    background: rgba(255,255,255,0.05); 
    color: var(--text-dim); 
    border: 1px solid var(--border); 
    padding: 6px 12px; 
    border-radius: 8px; 
    cursor: pointer; 
    font-family: 'JetBrains Mono'; 
    font-size: 0.6rem; 
    font-weight: 800;
    transition: 0.2s; 
    text-transform: uppercase;
    letter-spacing: 1px;
}
.timeframe-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }
.timeframe-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

.z-outlier { border-color: var(--risk-high) !important; position: relative; }
.z-outlier::after { content: 'STAT OUTLIER'; position: absolute; top: -10px; right: 10px; font-size: 0.5rem; background: var(--risk-high); color: white; padding: 2px 6px; border-radius: 4px; font-weight: 900; box-shadow: 0 0 10px rgba(255, 62, 62, 0.4); z-index: 10; }

.export-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.2s;
}
.export-btn:hover { background: var(--border); }

/* Global Risk Intelligence */
.risk-summary-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; position: relative; overflow: hidden; }
.risk-gauge-container { text-align: center; }
.risk-label { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 2px; font-weight: 700; margin-bottom: 1rem; }
.risk-value { font-size: 5rem; font-weight: 800; font-family: 'Outfit'; line-height: 1; }
.risk-value span { font-size: 1.5rem; color: var(--text-dim); }
.risk-status { font-size: 1rem; font-weight: 700; letter-spacing: 3px; margin-top: 1rem; }

.stress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.stress-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem; transition: transform 0.2s ease; }
.stress-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.04); }
.s-top { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; }
.s-name { color: var(--accent); }
.s-impact { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; }
.s-outcome { font-size: 0.75rem; color: var(--text-dim); }

.risk-table-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 1rem; background: rgba(125, 211, 252, 0.05); font-size: 0.65rem; font-weight: 700; color: var(--accent); border-radius: 8px 8px 0 0; }
.risk-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 1rem; border-bottom: 1px solid var(--border); align-items: center; font-size: 0.85rem; }
.r-ticker { font-weight: 800; color: var(--text); }
.r-status { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; width: fit-content; }
.status-elevated { background: rgba(255, 62, 62, 0.1); color: var(--risk-high); border: 1px solid var(--risk-high); }
.status-stable { background: rgba(125, 211, 252, 0.1); color: var(--risk-low); border: 1px solid var(--risk-low); }

/* Category Specific Branding */
.label-tag.cat-defi { color: var(--accent); border-color: rgba(125,211,252,0.3); background: rgba(125,211,252,0.06); }
.label-tag.cat-exchange { color: #fffa00; border-color: rgba(255, 250, 0, 0.4); background: rgba(255, 250, 0, 0.05); }
.label-tag.cat-memes { color: #ff3e3e; border-color: rgba(255, 62, 62, 0.4); background: rgba(255, 62, 62, 0.05); }
.label-tag.cat-custom { color: var(--accent); border-color: rgba(125,211,252,0.3); background: rgba(125,211,252,0.06); }
.label-tag.cat-l1 { color: #a855f7; border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.05); }
.label-tag.cat-miners { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.05); }
.label-tag.cat-etf { color: #f97316; border-color: rgba(249, 115, 22, 0.4); background: rgba(249, 115, 22, 0.05); }
.label-tag.cat-stables { color: #94a3b8; border-color: rgba(148, 163, 184, 0.4); background: rgba(148, 163, 184, 0.05); }
.label-tag.cat-equity { color: #3b82f6; border-color: rgba(59, 130, 246, 0.4); background: rgba(59, 130, 246, 0.05); }
.label-tag.cat-crypto { color: #14b8a6; border-color: rgba(20, 184, 166, 0.4); background: rgba(20, 184, 166, 0.05); }

/* Rotation Matrix */
.rotation-matrix-container { overflow-x: auto; padding: 2rem; background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.matrix-grid { display: grid; gap: 6px; min-width: 900px; }
.matrix-cell { height: 60px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono'; font-size: 0.85rem; font-weight: 800; border-radius: 8px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: crosshair; }
.matrix-cell:hover { transform: scale(1.1); z-index: 10; box-shadow: 0 0 20px rgba(255,255,255,0.2); border-color: var(--on-accent-inv) !important; }
.matrix-label { display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
.matrix-label.vertical { justify-content: flex-end; padding-right: 1.5rem; color: var(--text-dim); }
.matrix-label.horizontal { padding-bottom: 1rem; }

/* Newsroom Styles */
.news-feed { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.news-card { background: var(--bg-card); border: 1px solid var(--border); padding: 1.5rem; border-radius: 12px; transition: 0.3s; position: relative; overflow: hidden; }
.news-card:hover { border-color: var(--accent); background: rgba(125, 211, 252, 0.02); }
.news-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.news-time { font-family: 'JetBrains Mono'; font-size: 0.7rem; color: var(--text-dim); }
.news-tag { font-size: 0.6rem; padding: 2px 8px; border-radius: 4px; font-weight: 900; letter-spacing: 1px; }
.tag-bullish { background: rgba(0, 255, 136, 0.1); color: var(--risk-low); border: 1px solid rgba(0, 255, 136, 0.2); }
.tag-bearish { background: rgba(255, 62, 62, 0.1); color: var(--risk-high); border: 1px solid rgba(255, 62, 62, 0.2); }
.tag-neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); border: 1px solid var(--border); }
.news-headline { font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: var(--text-main); margin-bottom: 0.5rem; }
.news-summary { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
.news-source { margin-top: 1rem; font-size: 0.65rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.live-indicator { width: 6px; height: 6px; background: var(--risk-high); border-radius: 50%; box-shadow: 0 0 10px var(--risk-high); animation: pulse-live 1s infinite; }
@keyframes pulse-live { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

/* Intelligence Guide Card */
.intel-guide-card { background: rgba(125, 211, 252, 0.05); border: 1px solid rgba(125, 211, 252, 0.2); padding: 1.5rem; border-radius: 12px; }
.guide-icon { font-size: 1.5rem; background: rgba(125, 211, 252, 0.1); padding: 0.5rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.guide-text h4 { font-family: 'Outfit'; letter-spacing: 1px; }

/* Tape Reader */
.tape-header { display: grid; grid-template-columns: 1fr 1.2fr 1fr 0.8fr; padding: 0.5rem; background: rgba(255,255,255,0.05); font-size: 0.65rem; color: var(--text-dim); font-weight: 800; border-radius: 4px; border: 1px solid var(--border); margin-bottom: 0.5rem; }
.tape-stream { height: 250px; overflow-y: hidden; display: flex; flex-direction: column; gap: 2px; mask-image: linear-gradient(to bottom, white 80%, transparent); }
.tape-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr 0.8fr; padding: 4px 8px; font-family: 'JetBrains Mono'; font-size: 0.75rem; font-weight: 700; border-radius: 4px; animation: slideInTape 0.2s ease-out; }
.tape-row.buy { color: var(--risk-low); background: rgba(0, 255, 136, 0.05); }
.tape-row.sell { color: var(--risk-high); background: rgba(255, 62, 62, 0.05); }
.tape-col { display: flex; align-items: center; }
@keyframes slideInTape { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Divergence Visuals */
.heatmap-box { position: relative; }
.divergence-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: var(--on-accent-inv); border-radius: 50%; box-shadow: 0 0 8px var(--on-accent-inv); animation: pulseDiv 1s infinite; }
@keyframes pulseDiv { 0% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.2; transform: scale(0.8); } }

.div-meter { width: 100%; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin-top: 5px; overflow: hidden; border: 1px solid var(--border); }
.div-fill { height: 100%; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* Mindshare Guide */
.mindshare-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; padding: 2rem; background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.mindshare-guide .guide-box { display: flex; flex-direction: column; gap: 0.8rem; }
.mindshare-guide .guide-box.full { grid-column: span 2; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 0.5rem; }
.mindshare-guide h4 { font-family: 'Outfit'; font-size: 0.8rem; letter-spacing: 2px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.mindshare-guide p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
.interpretation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 0.5rem; }
.inter-item { font-size: 0.75rem; color: var(--text-dim); line-height: 1.5; border-left: 2px solid var(--border); padding-left: 1rem; }
.inter-item strong { color: var(--text); display: block; margin-bottom: 2px; }

/* Strategy Lab & Labs */
.lab-workspace { margin-top: 1rem; }
.lab-controls { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.control-box { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.control-box:last-child { border: none; }
.control-box label { display: block; font-size: 0.65rem; font-weight: 700; color: var(--accent); letter-spacing: 1px; margin-bottom: 12px; }
.ctrl-val { font-family: 'JetBrains Mono'; color: white; font-weight: 700; }
.ctrl-desc { font-size: 0.7rem; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(125, 211, 252, 0.4);
}

.mini-stat { background: rgba(125, 211, 252, 0.05); border: 1px solid rgba(125, 211, 252, 0.1); border-radius: 8px; padding: 12px; text-align: center; }
.mini-stat label { display: block; font-size: 0.6rem; margin-bottom: 4px; color: var(--text-dim); }
.mini-stat .val { font-size: 1.2rem; font-weight: 800; font-family: 'Outfit'; }

/* Liquidity Map */
#liquidity-map { display: flex; flex-direction: column; gap: 4px; font-family: 'JetBrains Mono'; font-size: 0.7rem; }
.liq-level { display: grid; grid-template-columns: 80px 1fr 40px; gap: 10px; align-items: center; }
.liq-price { color: var(--text-dim); }
.liq-size { color: var(--text); font-weight: 700; text-align: right; }
.liq-bar-bg { height: 8px; background: rgba(255,255,255,0.03); border-radius: 4px; overflow: hidden; }
.liq-bar { height: 100%; transition: width 0.3s ease; }

/* Derivatives Monitor */
.derivatives-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.deriv-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 1rem; border-radius: 12px; }
.deriv-box label { display: block; font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.deriv-box span { font-size: 1.1rem; font-weight: 700; font-family: 'Outfit'; }

/* Macro Correlation Sync */
.macro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 1rem; }
.macro-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: transform 0.2s ease; }
.macro-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.04); }
.m-asset { font-size: 0.8rem; color: var(--text-dim); font-weight: 700; letter-spacing: 1px; }
.m-corr { font-size: 2.5rem; font-weight: 800; font-family: 'Outfit'; margin: 0.5rem 0; }
.m-status { font-size: 0.7rem; font-weight: 700; color: var(--accent); margin-bottom: 1rem; }
.m-interpretation { font-size: 0.8rem; line-height: 1.5; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 1rem; }

/* News Article Panel */
.news-article-panel {
    max-width: 800px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.8);
    overflow-y: auto;
    max-height: 90vh;
}
.article-header { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.article-meta { display: flex; gap: 15px; align-items:center; margin-bottom: 1rem; }
.article-title { font-family: 'Outfit'; font-size: 2.2rem; font-weight: 900; line-height: 1.2; color: var(--on-accent-inv); }
.article-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-main); font-family: 'Inter', sans-serif; }
.article-content p { margin-bottom: 1.5rem; }
.article-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--text-dim); font-size: 0.8rem; }
.news-card { cursor: pointer; transition: 0.2s; }
.news-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(125, 211, 252, 0.1); }

/* Alert System */

@keyframes pulse-alert {
    0% { transform: scale(1); box-shadow: 0 0 5px var(--risk-high); }
    50% { transform: scale(1.2); box-shadow: 0 0 15px var(--risk-high); }
    100% { transform: scale(1); box-shadow: 0 0 5px var(--risk-high); }
}

.alert-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.alert-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}
.alert-card.high { border-color: #ff8e3e; background: rgba(255, 142, 62, 0.03); }
.alert-card.extreme { border-color: var(--risk-high); background: rgba(255, 62, 62, 0.05); }

.alert-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,62,62,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.alert-card.extreme .alert-glow { animation: alert-sweep 3s infinite linear; }

@keyframes alert-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.alert-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.alert-type { font-family: 'JetBrains Mono'; font-size: 0.7rem; font-weight: 800; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; }
.alert-timestamp { font-size: 0.7rem; color: var(--text-dim); }
.alert-msg { font-size: 1.2rem; font-weight: 700; color: var(--on-accent-inv); margin-bottom: 1rem; line-height: 1.3; }
.alert-footer { display: flex; justify-content: space-between; align-items: center; }
.ticker-chip { background: var(--border); padding: 4px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 800; color: var(--text-main); }
.severity-status { font-size: 0.65rem; font-weight: 900; letter-spacing: 1px; }
.extreme .severity-status { color: var(--risk-high); }
.high .severity-status { color: #ff8e3e; }

/* Whale Pulse Refinement */
.whale-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.whale-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 1.5rem;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr;
    align-items: center;
    gap: 2rem;
    transition: 0.2s;
}
.whale-row:hover { border-color: var(--accent); background: rgba(125, 211, 252, 0.02); }
.w-amount { font-family: 'Outfit'; font-size: 1.3rem; font-weight: 900; color: var(--on-accent-inv); }
.usd-val { font-family: 'JetBrains Mono'; font-size: 0.8rem; color: var(--text-dim); margin-left: 10px; }
.w-meta { display: flex; gap: 15px; margin-top: 5px; font-size: 0.7rem; color: var(--text-dim); }
.w-hash { color: var(--accent); font-family: 'JetBrains Mono'; }
.w-paths { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; }
.w-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.impact-badge { font-size: 0.6rem; font-weight: 900; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px; border: 1px solid transparent; }
.impact-extreme { background: rgba(255, 62, 62, 0.1); color: var(--risk-high); border-color: rgba(255, 62, 62, 0.2); }

/* === Advanced Chart Zoom Modal Effect === */
.zoomable-panel {
    cursor: zoom-in;
    transition: all 0.3s ease;
}
.zoomable-panel:hover {
    filter: brightness(1.2);
}
.zoomable-panel.zoomed-chart {
    position: fixed !important;
    inset: 5vh 5vw !important;
    height: 90vh !important;
    width: 90vw !important;
    z-index: 9999 !important;
    background: rgba(10, 15, 25, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 242, 255, 0.5) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
    cursor: zoom-out !important;
    display: flex !important;
    flex-direction: column !important;
}
.zoomable-panel.zoomed-chart .chart-canvas-wrapper {
    flex: 1 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}
.zoomable-panel.zoomed-chart canvas {
    height: 100% !important;
    width: 100% !important;
}
.impact-high { background: rgba(255, 142, 62, 0.1); color: #ff8e3e; border-color: rgba(255, 142, 62, 0.2); }
.impact-medium { background: rgba(125, 211, 252, 0.1); color: var(--accent); border-color: rgba(125, 211, 252, 0.2); }

/* Trade Execution Styles */
.trade-panel { width: 500px; padding: 2.5rem; border: 1px solid var(--accent); background: linear-gradient(135deg, #0a0e14 0%, #05070a 100%); }
.trade-header { display: flex; align-items: center; gap: 15px; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.trading-icon { font-size: 2rem; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent)); }
.trade-flow { display: flex; flex-direction: column; gap: 20px; }
.status-stage { display: flex; align-items: center; gap: 15px; opacity: 0.3; transition: all 0.3s ease; }
.status-stage.active { opacity: 1; transform: translateX(5px); }
.status-stage.complete { opacity: 1; color: var(--risk-low); }
.stage-indicator { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; }
.stage-text { display: flex; flex-direction: column; }
.stage-title { font-weight: 800; font-size: 0.9rem; }
.stage-desc { font-size: 0.7rem; color: var(--text-dim); }
.loading-bar-mini { height: 2px; width: 0%; background: var(--accent); transition: width 1s ease; margin-top: 5px; }
.active .loading-bar-mini { width: 100%; }

/* ============= AUTHENTICATION SHELL ============= */
#auth-overlay {
    background: url('assets/auth_bg.png') no-repeat center center fixed;
    background-size: cover;
    z-index: 9999;
}

#auth-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(5, 7, 10, 0.4) 0%, rgba(5, 7, 10, 0.9) 100%);
    z-index: 1;
}

.auth-panel {
    position: relative;
    z-index: 10;
    background: rgba(13, 17, 23, 0.6);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 24px;
    padding: 3.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(125, 211, 252, 0.05);
    text-align: center;
}

.auth-header {
    margin-bottom: 2.5rem;
}

.logo-orb.large {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: radial-gradient(circle, var(--accent), #7000ff);
    box-shadow: 0 0 30px var(--accent-glow);
    filter: drop-shadow(0 0 10px var(--accent));
}

.auth-header h2 {
    font-family: 'Outfit';
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 0.5rem;
}

.auth-header h2 span {
    color: var(--accent);
    font-weight: 400;
    opacity: 0.8;
}

.auth-header p {
    font-family: 'JetBrains Mono';
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 3px;
    font-weight: 700;
}

.auth-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.input-group label {
    font-family: 'JetBrains Mono';
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.input-group input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 1rem 1.2rem;
    border-radius: 12px;
    color: var(--text-main);
    font-family: 'JetBrains Mono';
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.05);

}

.auth-error {
    background: rgba(255, 62, 62, 0.1);
    border: 1px solid rgba(255, 62, 62, 0.2);
    color: var(--risk-high);
    padding: 0.8rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'JetBrains Mono';
}

.intel-action-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #a855f7 100%);
    color: var(--on-accent-inv);
    border: none;
    padding: 0.8rem 1.5rem;
    margin: 1rem 0;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(125, 211, 252, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.intel-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(125, 211, 252, 0.4);
    background: linear-gradient(135deg, #00d2ff 0%, #9040e0 100%);
}

.intel-action-btn.large {
    background: var(--accent);
    color: var(--btn-text);
    border: none;
    padding: 1.2rem;
    border-radius: 12px;
    font-family: 'Outfit';
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.intel-action-btn.large:hover {
    transform: translateY(-3px);
    background: rgba(125,211,252,0.22);
    border-color: rgba(125,211,252,0.5);
    color: var(--text-main);
}

.intel-action-btn.large.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--border);
    box-shadow: none;
}

.intel-action-btn.large.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-dim);
    transform: translateY(-3px);
}

.auth-switch {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 600;
}

.auth-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 800;
    margin-left: 5px;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.auth-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.5;
}

.security-badge, .system-status {
    font-family: 'JetBrains Mono';
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.system-status {
    color: var(--risk-low);
}

/* Animations */
@keyframes orb-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.05); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

.logo-orb.large {
    animation: orb-pulse 4s infinite ease-in-out;
}

/* ============================================================ */
/* PREMIMUM PAYWALL UI */
/* ============================================================ */
.paywall-panel {
    max-width: 500px;
    background: rgba(13, 17, 23, 0.95);
    border: 1px solid var(--accent);
    box-shadow: 0 0 50px rgba(125, 211, 252, 0.2);
    backdrop-filter: blur(20px);
}

.premium-orb {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    border-radius: 50%;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 0 15px var(--accent));
}

.paywall-header {
    text-align: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
}

.paywall-header h2 span {
    color: var(--accent);
}

.benefit-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.benefit-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.benefit-text h4 {
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.benefit-text p {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.pricing-card {
    background: rgba(125, 211, 252, 0.05);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    margin-bottom: 1.5rem;
}

.pricing-card .price span {
    font-size: 1rem;
    color: var(--text-dim);
}

.paywall-footer-text {
    font-size: 0.6rem;
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 1px;
}

.premium-lock {
    font-size: 0.7rem;
    color: #fffa00;
    margin-left: 4px;
}

/* User Profile Card */
.user-profile-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.2rem;
    margin-top: auto;
    margin-bottom: 2rem;
    transition: 0.3s;
    position: relative;
    cursor: pointer;
}
.user-profile-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(125, 211, 252, 0.3);
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dropdown-caret {
    margin-left: auto;
    color: var(--text-dim);
    transition: transform 0.3s;
}
.profile-dropdown:hover .dropdown-caret,
.profile-dropdown.open .dropdown-caret {
    transform: rotate(180deg);
    color: var(--accent);
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: var(--on-accent);
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
#display-user-email {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tier-badge {
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    width: fit-content;
    letter-spacing: 1px;
}
.tier-badge.free { background: rgba(255, 255, 255, 0.1); color: var(--text-dim); }
.tier-badge.institutional { background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent); }

.profile-actions.dropdown-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 1001;
    flex-direction: column;
    gap: 8px;
    animation: menuFadeUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-dropdown:hover .dropdown-menu,
.profile-dropdown.open .dropdown-menu {
    display: flex;
}
@keyframes menuFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.profile-action-btn {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 0.7rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    font-family: 'JetBrains Mono';
}
.profile-action-btn:hover {
    background: var(--surface-2);
    border-color: var(--text-dim);
}
.profile-action-btn.logout-btn {
    background: transparent;
    border-color: transparent;
    color: var(--risk-high);
}
.profile-action-btn.logout-btn:hover {
    background: rgba(255, 62, 62, 0.1);
}
.btn-icon { font-size: 1rem; }

/* ============= MACRO COMPASS ============= */
.macro-grid { margin-top: 1rem; }
.macro-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border); 
    border-radius: 16px; 
    padding: 1.5rem; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.macro-event-item {
    transition: all 0.2s ease;
}
.macro-event-item:hover {
    background: rgba(255,255,255,0.05) !important;
    transform: translateX(5px);
}

.impact-critical { 
    background: rgba(255, 62, 62, 0.2); 
    color: var(--risk-high); 
    border: 1px solid var(--risk-high); 
    box-shadow: 0 0 10px rgba(255, 62, 62, 0.2);
}
.impact-low { 
    background: rgba(255, 255, 255, 0.05); 
    color: var(--text-dim); 
    border: 1px solid var(--border); 
}

/* GOMM Refinement */
.ob-visualization {
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.wall-list > div:hover {
    background: rgba(255,255,255,0.02);
}

/* ============= GOMM INSTITUTIONAL VISUAL SUITE ============= */
.gomm-container {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 0;
    height: calc(100vh - 100px);
    background: var(--bg-main);
}

.sidebar-panel {
    background: rgba(10, 11, 14, 0.4);
    border-right: 1px solid var(--border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
    backdrop-filter: blur(10px);
}

.liquidity-chart {
    padding: 1.5rem;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.liquidity-bar-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.2s ease;
    cursor: crosshair;
}

.liquidity-bar-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.price-label {
    width: 90px;
    font-size: 0.9rem;
    font-weight: 800;
    font-family: 'JetBrains Mono';
}
.price-label.ask { color: var(--risk-high); }
.price-label.bid { color: var(--risk-low); }

.bar-container {
    flex: 1;
    height: 28px;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.liquidity-bar {
    position: absolute;
    height: 100%;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.liquidity-bar.ask {
    right: 0;
    background: linear-gradient(to left, rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.05));
    border-right: 3px solid var(--risk-high);
}

.liquidity-bar.bid {
    left: 0;
    background: linear-gradient(to right, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.05));
    border-left: 3px solid var(--risk-low);
}

/* Exchange Branding */
.liquidity-bar.binance { border-color: #F3BA2F; }
.liquidity-bar.coinbase { border-color: #0052FF; }
.liquidity-bar.okx { border-color: #FFFFFF; }

.bar-val {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 900;
    z-index: 2;
    pointer-events: none;
}
.ask .bar-val { right: 10px; }
.bid .bar-val { left: 10px; }

.exch-tag {
    width: 60px;
    font-size: 0.6rem;
    font-weight: 900;
    text-align: right;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.mid-price-line {
    margin: 20px 0;
    padding: 12px;
    background: rgba(125, 211, 252, 0.04);
    border: 1px dashed var(--accent);
    color: var(--accent);
    text-align: center;
    font-weight: 950;
    font-size: 1rem;
    letter-spacing: 2px;
    border-radius: 8px;
    
}

/* Heatmap Grid */
.heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 1.5rem;
    overflow-y: auto;
}

.heatmap-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 18px;
}

.heatmap-cells {
    flex: 1;
    display: flex;
    gap: 1px;
    height: 100%;
}

.hm-cell {
    flex: 1;
    height: 100%;
    border-radius: 1px;
    transition: transform 0.2s;
}

.hm-cell:hover {
    transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Institutional Tape */
.tape-sidebar {
    background: rgba(10, 11, 14, 0.3);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tape-header {
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--text-dim);
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
}

.tape-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tape-item {
    display: grid;
    grid-template-columns: 50px 1fr 60px;
    align-items: center;
    padding: 8px;
    background: rgba(255,255,255,0.01);
    border-radius: 6px;
    font-family: 'JetBrains Mono';
    font-size: 0.8rem;
    border-left: 2px solid transparent;
}

.tape-item.institutional {
    background: rgba(125, 211, 252, 0.05);
    border-left-color: var(--accent);
    box-shadow: 0 0 15px rgba(125, 211, 252, 0.05);
}

.tape-buy { color: var(--risk-low); }
.tape-sell { color: var(--risk-high); }
/* Whale Watch Sidebar */
.whale-watch-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.whale-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: 0.2s;
}

.whale-item:hover {
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.03);
}

.whale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.whale-name { font-weight: 900; font-size: 0.85rem; color: var(--text-header); }
.whale-type { font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-dim); }

.whale-status {
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
}

.status-accumulating { color: var(--risk-low); }
.status-distributing { color: var(--risk-high); }
.status-neutral { color: var(--text-dim); }

.asset-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
    background: rgba(125, 211, 252, 0.1);
    color: var(--accent);
    border-radius: 4px;
    font-weight: 800;
}

.flow-badge {
    font-size: 0.65rem;
    font-weight: 950;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-align: center;
}

.flow-inflow { background: rgba(239, 68, 68, 0.1); color: var(--risk-high); border: 1px solid rgba(239, 68, 68, 0.2); }
.flow-outflow { background: rgba(34, 197, 94, 0.1); color: var(--risk-low); border: 1px solid rgba(34, 197, 94, 0.2); }
.flow-neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); }

/* Liquidation Flux */
.liq-flux-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 10px;
}

.liq-flux-bar {
    flex: 1;
    height: 100%;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.liq-intensity {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    transition: width 0.8s ease;
}

.liq-intensity.LONG {
    background: linear-gradient(to right, rgba(239, 68, 68, 0.6), rgba(239, 68, 68, 0.1));
    border-left: 4px solid var(--risk-high);
}

.liq-intensity.SHORT {
    background: linear-gradient(to right, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.1));
    border-left: 4px solid var(--risk-low);
}

.liq-val {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 950;
    color: var(--on-accent-inv);
}

/* Phase 5: Narrative Galaxy V2 Ticker */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hot-topics-ticker div {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}

/* Landing Page */
.landing-page {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.8s ease-out;
    position: relative;
}

.landing-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
    filter: saturate(1.5) blur(2px);
}

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

.hero-section {
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 10rem 2rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.hero-content {
    flex: 1.2;
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    perspective: 1500px;
}

.hero-img-wrapper {
    position: relative;
    transform: rotateY(-12deg) rotateX(5deg);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-img-wrapper:hover {
    transform: rotateY(-2deg) rotateX(2deg) scale(1.05);
}

.hero-img {
    max-width: 100%;
    border-radius: 24px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), 0 0 40px rgba(125, 211, 252, 0.2);
    border: 1px solid rgba(125, 211, 252, 0.2);
}

.hero-img-glow {
    position: absolute;
    top: -15%;
    left: -15%;
    right: -15%;
    bottom: -15%;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.hero-section h1 {
    font-size: 5rem;
    font-weight: 950;
    margin-bottom: 1.5rem;
    line-height: 0.95;
    letter-spacing: -3px;
    position: relative;
    z-index: 1;
}

.hero-section h1 span {
    background: linear-gradient(to right, #fff, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.6rem;
    color: var(--text-dim);
    max-width: 700px;
    margin: 0 0 4rem;
    line-height: 1.4;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.features-showcase {
    margin-top: 5rem;
}

.f-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.f-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.f-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.03);
    box-shadow: 0 10px 40px rgba(125, 211, 252, 0.1);
}

.f-icon {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: flex-start;
}

.f-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(125, 211, 252, 0.15);
}

.f-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 1px;
}

.f-card p {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.app-status-bar {
    margin-top: 6rem;
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 1.5rem 3rem;
    background: rgba(0,0,0,0.4);
    border-radius: 100px;
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.status-item {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: 'JetBrains Mono';
}

.s-label {
    color: var(--text-dim);
    opacity: 0.6;
}

.s-value {
    color: var(--text-main);
}

.status-online {
    color: var(--risk-low);
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Landing Page Expansion Styles */
.section-title-wrap {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title-wrap h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title-wrap p {
    color: var(--text-dim);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.faq-section h2 {
    font-size: 2.5rem;
    background: linear-gradient(to right, #fff, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-item {
    background: rgba(255,255,255,0.02);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: 0.3s;
}

.faq-item:hover {
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.03);
}

.seo-content-extra div h2 {
    position: relative;
    padding-bottom: 0.5rem;
}

.seo-content-extra div h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--accent);
}

/* Global Footer */
.global-footer {
    margin-top: 8rem;
    padding: 5rem 2rem 3rem;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4));
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto 4rem;
}

.footer-brand p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 1rem;
    max-width: 300px;
}

.footer-links h4, .footer-seo h4 {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.2s;
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 5px;
}

.footer-seo p {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.8;
}

.footer-seo strong {
    color: var(--text-main);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.7rem;
    color: var(--text-dim);
    font-family: 'JetBrains Mono';
}

.system-badges {
    display: flex;
    gap: 1.5rem;
}

.badge {
    padding: 2px 8px;
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 4px;
    color: var(--accent);
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .footer-brand p { margin: 1rem auto 0; }
    .footer-bottom { flex-direction: column; gap: 1.5rem; }
}

@media (max-width: 900px) {
    .hero-section { flex-direction: column; text-align: center; padding: 6rem 1.5rem; gap: 3rem; }
    .hero-section h1 { font-size: 3rem; letter-spacing: -1px; }
    .hero-subtitle { font-size: 1.2rem; margin: 0 auto 2.5rem; }
    .hero-actions { justify-content: center; }
    .hero-visual { order: -1; width: 100%; max-width: 500px; margin: 0 auto; }
    .hero-img-wrapper { transform: none; }
    .app-status-bar { flex-direction: column; gap: 1rem; border-radius: 20px; padding: 2rem; width: 90%; }
}

/* Institutional Pulse Sidebar */
.institutional-pulse-sidebar {
    margin: 1.5rem 1rem;
    padding: 1rem;
    background: rgba(125, 211, 252, 0.03);
    border: 1px solid rgba(125, 211, 252, 0.1);
    border-radius: 12px;
}

.pulse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(1); opacity: 0.5; }
}

.pulse-header label {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.pulse-item {
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}

.pulse-item:hover {
    transform: translateX(4px);
}

.pulse-pair {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.p-ticker {
    font-weight: 700;
    font-size: 0.85rem;
}

.p-alpha {
    font-size: 0.8rem;
}

.pulse-meta {
    font-size: 0.6rem;
    color: var(--text-dim);
}

/* Regime Hub Styles */
.regime-hero-card {
    padding: 2.5rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 2rem;
}

.regime-hero-card.accumulation { border-left: 6px solid var(--regime-accumulation); background: linear-gradient(135deg, rgba(123, 44, 191, 0.1), transparent); }
.regime-hero-card.steady-trending { border-left: 6px solid var(--regime-trending); background: linear-gradient(135deg, rgba(125, 211, 252, 0.1), transparent); }
.regime-hero-card.distribution { border-left: 6px solid var(--regime-distribution); background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), transparent); }
.regime-hero-card.volatile-breakout { border-left: 6px solid var(--regime-volatile); background: linear-gradient(135deg, rgba(255, 62, 62, 0.1), transparent); }

.regime-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.regime-main-stat {
    margin-bottom: 2rem;
}

.regime-label {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 4px;
}

.regime-confidence {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.regime-metrics-row {
    display: flex;
    gap: 3rem;
}

.r-metric label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.r-metric span {
    font-weight: 900;
    font-size: 1.1rem;
}

.regime-timeline {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.timeline-point {
    min-width: 140px;
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.tp-date {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.tp-label {
    font-weight: 700;
    font-size: 0.8rem;
}

.guide-card {
    padding: 1.5rem;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}

.guide-card h4 {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.9rem;
}

.guide-card p {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-dim);
}

.btc-live-ticker {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btc-live-ticker label {
    font-size: 0.7rem;
    font-weight: 900;
    color: var(--text-dim);
}

#btc-price {
    font-family: 'JetBrains Mono';
    font-weight: 700;
    font-size: 0.9rem;
}

/* Strategy Lab V2 */
.strategy-workspace {
    margin-top: 2rem;
    animation: fadeIn 0.4s ease-out;
}

.strat-select {
    background: #0d1117;
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 0.8rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    margin-top: 0.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b949e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
}

.strat-select option {
    background: #0d1117;
    color: var(--text-main);
    padding: 10px;
}

.strat-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.summary-card {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 1.5rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.summary-card label {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--text-dim);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.summary-card .val {
    font-size: 1.8rem;
    font-weight: 950;
    font-family: 'Outfit';
}

.main-return { border-left: 4px solid var(--accent); background: linear-gradient(135deg, rgba(125, 211, 252, 0.05), transparent); }
.bench-return { border-left: 4px solid #fff; }
.alpha-card { border-left: 4px solid var(--risk-low); }

.lab-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.mini-stat {
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

.mini-stat label {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--text-dim);
    margin-bottom: 4px;
    display: block;
}

.mini-stat .val {
    font-family: 'JetBrains Mono';
    font-weight: 900;
    font-size: 1rem;
}

/* Leaderboard Section */
.leaderboard-section {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-family: 'JetBrains Mono', monospace;
}

.leaderboard-table th {
    text-align: left;
    color: var(--text-dim);
    font-size: 0.7rem;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leaderboard-table td {
    padding: 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
}

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

.status-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge.hit_tp2, .status-badge.hit_tp1 { background: rgba(0, 255, 136, 0.1); color: var(--risk-low); }
.status-badge.active { background: rgba(125, 211, 252, 0.1); color: var(--accent); }
.status-badge.stopped { background: rgba(255, 62, 62, 0.1); color: var(--risk-high); }

.return.pos { color: var(--risk-low); font-weight: 700; }
.return.neg { color: var(--risk-high); font-weight: 700; }

/* ============================================================
   ENHANCEMENT: PREMIUM UI POLISH & TOASTS
   ============================================================ */

#toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
}

.toast {
    background: rgba(13, 17, 23, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    animation: toast-slide-in 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    transition: all 0.3s ease;
}

.toast.removing {
    animation: toast-slide-out 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.toast.regime { border-left-color: var(--purple); }
.toast.alert { border-left-color: var(--accent); }
.toast.error { border-left-color: var(--risk-high); }

.toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.toast-title {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #e2e8f0;
    opacity: 1;
    font-family: 'JetBrains Mono', monospace;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.live-dot {
    animation: pulse-opacity 1.5s infinite alternate;
}

@keyframes pulse-opacity {
    from { opacity: 0.3; shadow: 0 0 0px var(--accent-glow); }
    to { opacity: 1; shadow: 0 0 10px var(--accent-glow); }
}

/* Smoother Card Transitions */
.signal-card, .f-card, .card {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.premium-badge {
    background: linear-gradient(135deg, #8b5cf6 0%, #7000ff 100%);
    border: 1px solid rgba(139,92,246,0.3);
}

/* Phase 2: Terminal Expansion Styles */
.sector-puck {
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: default;
}
.sector-puck:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05) !important;
}

.intensity-bar {
    overflow: hidden;
}

.strat-select {
    background: #0d1117;
    border: 1px solid var(--border);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}
.strat-select:hover {
    border-color: var(--accent);
}

#portfolio-basket:focus {
    border-color: var(--accent) !important;
    outline: none;
    background: rgba(255, 255, 255, 0.08) !important;
}

.mini-stat label {
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 1px;
    margin-bottom: 4px;
    display: block;
}
.mini-stat .val {
    font-size: 1.2rem;
    font-weight: 900;
}

.impact-high { background: rgba(255, 62, 62, 0.1); color: var(--risk-high); border: 1px solid rgba(255, 62, 62, 0.2); }
.impact-medium { background: rgba(255, 171, 0, 0.1); color: #ffab00; border: 1px solid rgba(255, 171, 0, 0.2); }
.impact-extreme { background: var(--risk-high); color: white; font-weight: 900; }

.flow-inflow { color: var(--risk-low); }
.flow-outflow { color: var(--risk-high); }

.ai-report-body p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Phase 7.4: Trade Ticket Styles */
.trade-ticket { background: var(--bg-sidebar); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 1.5rem; border-radius: 8px; font-family: var(--font-mono), monospace; position: relative; overflow: hidden; margin-top: 1rem; }
.trade-ticket::before { content: " INSTITUTIONAL EXECUTION TICKET "; position: absolute; top: 10px; right: 10px; font-size: 0.5rem; opacity: 0.2; letter-spacing: 2px; }
.ticket-id { font-size: 0.65rem; color: var(--text-dim); margin-bottom: 1rem; }
.ticket-main { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.ticket-action { font-size: 1.5rem; font-weight: 900; }
.ticket-action.buy { color: var(--pos); }
.ticket-action.sell { color: var(--neg); }
.ticket-symbol { font-size: 1.5rem; font-weight: 900; color: var(--text-main); }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.ticket-item { display: flex; flex-direction: column; gap: 4px; }
.ticket-item label { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.ticket-item span { font-size: 1rem; color: var(--text-main); font-weight: 700; }
.ticket-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--border); padding-top: 1rem; }
.ticket-meta { font-size: 0.65rem; color: var(--text-dim); }
.ticket-copy-btn { background: var(--accent); color: white; border: none; padding: 0.4rem 1rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; transition: 0.2s; font-weight: 700; }
.ticket-copy-btn:hover { background: var(--purple); box-shadow: 0 0 10px var(--accent-glow); }
.ticket-copy-btn.copied { background: var(--pos); }


/* Phase 7.5: Locked Navigation Styles */
.locked-nav { opacity: 0.6; position: relative; cursor: not-allowed; transition: 0.3s; }
.locked-nav:hover { background: rgba(255,59,48,0.05) !important; color: var(--text-dim) !important; }
.premium-lock { font-size: 0.9rem !important; color: var(--accent); margin-left: auto; opacity: 0.8; }
.locked-nav .material-symbols-outlined:not(.premium-lock) { filter: grayscale(1) opacity(0.5); }


/* Trade Ledger View */
.ledger-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 1.5rem; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: var(--text); }
.ledger-table th { background: rgba(255, 255, 255, 0.03); padding: 1.5rem 2rem; text-align: left; font-size: 0.7rem; letter-spacing: 1px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.ledger-table td { padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ledger-table tr:hover { background: rgba(255, 255, 255, 0.02); }

/* Landing Ticker */
.landing-ticker-box { background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid var(--border); height: 40px; display: flex; align-items: center; overflow: hidden; position: relative; z-index: 10; }
#landing-ticker { display: flex; white-space: nowrap; animation: scroll-left-landing 60s linear infinite; }
#landing-ticker span { display: inline-block; padding-right: 3rem; font-family: 'JetBrains Mono'; font-size: 0.75rem; color: var(--text-dim); }
@keyframes scroll-left-landing { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Global Scrolling Ticker Layer */
.scroller-container { overflow: hidden; white-space: nowrap; flex: 1; display: flex; align-items: center; position: relative; margin-left: 1rem; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 1rem; }
.scroller { display: inline-block; white-space: nowrap; animation: scroll-left-global 40s linear infinite; font-family: 'JetBrains Mono'; font-size: 0.75rem; }
.scroller:hover { animation-play-state: paused; }
@keyframes scroll-left-global { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* - Phase 14: Chart Legend Clipping Fix -
   Prevents Chart.js bottom legend rows being cut off by fixed-height containers.
   Applies a minimum bottom padding to all chart card wrappers.               */
.card canvas,
.glass-card canvas,
.intel-card canvas {
    display: block;
    padding-bottom: 1.5rem !important;
    box-sizing: content-box;
}

/* Ensure card wrappers containing charts auto-expand rather than clip */
.card:has(canvas),
.glass-card:has(canvas) {
    overflow: visible;
    padding-bottom: 1.5rem;
}

/* Specific fix: advanced chart container must not clip 3D canvases */
#advanced-chart-container {
    overflow: visible !important;
}

/* New Phase 14 chart labels and legend text visibility */
canvas + div,
canvas ~ .chart-legend {
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Phase 15-D placeholder */

/* Phase 15-D: Mobile / PWA Polish */
* { -webkit-overflow-scrolling: touch; }
button, .intel-action-btn, .nav-item, .signal-card, .glass-card, .hub-tabs button { touch-action: manipulation; }
.hub-tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs button { min-height: 44px; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 900px) {
    .strategy-controls { flex-direction: column !important; gap: 12px !important; }
    .strategy-controls select, .strategy-controls input, .strategy-controls button { width: 100% !important; min-height: 44px; }
    .card-controls { gap: 12px !important; }
    .ai-trigger, .share-trigger { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    #ai-memo-card { padding: 1rem !important; margin-bottom: 1.2rem !important; }
    #ai-memo-body { font-size: 0.82rem !important; line-height: 1.6 !important; }
    #ask-terminal-input { font-size: 16px !important; }
    #ask-terminal-send { min-width: 64px; min-height: 44px; }
    #ask-terminal-history { max-height: 45vh !important; }
    .walk-forward-table, [id="walk-forward-panel"] table { display: block; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .glass-card, .intel-card { height: auto !important; min-height: 0 !important; }
    .view-header h1 { font-size: 1.3rem !important; }
    .view-header p { font-size: 0.8rem !important; }
    .brief-hero { padding: 1.5rem !important; }
    #thesis-modal > div { border-radius: 12px !important; padding: 1.5rem !important; max-height: 90vh; overflow-y: auto; }
    .intel-action-btn { min-height: 40px; }
    .intel-action-btn.mini { min-height: 36px; }
}

@media (max-width: 480px) {
    .signal-grid { overflow-x: hidden; }
    canvas { max-height: 220px !important; }
    .premium-badge { font-size: 0.6rem !important; padding: 2px 6px !important; }
    .hub-tabs button { font-size: 0.55rem !important; padding: 4px 8px !important; }
}

@media (display-mode: standalone) {
    .top-bar { padding-top: max(1rem, env(safe-area-inset-top)); }
    .mobile-nav { padding-bottom: max(10px, env(safe-area-inset-bottom)); height: calc(70px + env(safe-area-inset-bottom)); }
    .content { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* ===================================================
   HEADING HIERARCHY - Consistent across all views
   H1 = View/page title (one per view)
   H2 = Major chart / section heading within a view
   H3 = Panel / card / metric label within a section
   =================================================== */

/* View title: always styled as terminal header */
.view-header h1,
.landing-page h1,
h1 {
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

/* Section headings: chart titles, data panel labels */
h2 {
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Inside view-header, h2 used for sub-title line */
.view-header h2 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* Card / panel headings */
h3 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Stat/metric labels */
h4 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-top: 0;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* - Momentum Heatmap Table - */
#momentum-heatmap-grid table { min-width: 480px; }
#momentum-heatmap-grid { -webkit-overflow-scrolling: touch; }

/* Scrollable heatmap on mobile */
@media (max-width: 900px) {
    .macro-grid { grid-template-columns: 1fr !important; }
    #momentum-heatmap-grid table { font-size: 0.65rem !important; }
    #momentum-heatmap-grid td, #momentum-heatmap-grid th { padding: 5px 6px !important; }
    /* Whale flow bar chart full-width on mobile */
    #whaleSankeyCanvas { max-height: 180px; }
    /* Performance empty-state responsive grid */
    .perf-empty-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    #momentum-heatmap-grid table { font-size: 0.6rem !important; min-width: 360px; }
    /* Alert cards */
    .alert-card .intel-action-btn { font-size: 0.55rem !important; padding: 3px 8px !important; }
}

/* - AI Deep-Dive button glow - */
.intel-action-btn.ai-glow {
    background: linear-gradient(135deg, rgba(0,242,255,0.15), rgba(139,92,246,0.1));
    border-color: rgba(0,242,255,0.3);
    transition: all 0.2s ease;
}
.intel-action-btn.ai-glow:hover {
    box-shadow: 0 0 15px rgba(0,242,255,0.25), 0 0 30px rgba(139,92,246,0.1);
    border-color: var(--accent);
}

/* ============================================================ */
/* PHASE 17 - Alerts, Search Dropdown, Live Dot                 */
/* ============================================================ */

/* Live dot - animated green pulse dot */
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: live-dot-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
    vertical-align: middle;
}

@keyframes live-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); transform: scale(1); }
    50%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);  transform: scale(1.15); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);   transform: scale(1); }
}

/* Alert badge - high-severity pulse (red) */
.alert-badge {
    background: var(--risk-high);
    color: white;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 900;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px var(--risk-high);
    animation: badge-pulse 2s infinite;
}
.alert-badge.has-alerts {
    animation: badge-pulse-urgent 1s infinite;
    box-shadow: 0 0 12px rgba(255, 62, 62, 0.8);
}

@keyframes badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 62, 62, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 62, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 62, 62, 0); }
}
@keyframes badge-pulse-urgent {
    0%   { box-shadow: 0 0 0 0 rgba(255, 62, 62, 0.9); transform: scale(1); }
    50%  { box-shadow: 0 0 0 10px rgba(255, 62, 62, 0); transform: scale(1.12); }
    100% { box-shadow: 0 0 0 0 rgba(255, 62, 62, 0);   transform: scale(1); }
}

/* Global Search Dropdown */
.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(13, 17, 23, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(125, 211, 252, 0.25);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0,242,255,0.08);
    z-index: 10000;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

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

.search-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
}
.search-dd-item:last-child { border-bottom: none; }
.search-dd-item:hover { background: rgba(125, 211, 252, 0.07); }

.search-dd-ticker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
}
.search-dd-type {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Backtester export btn */
.auth-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Icon-wrapped input rows */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    color: var(--text-dim);
    pointer-events: none;
    transition: color 0.2s;
    z-index: 1;
}

.auth-input-wrap:focus-within .auth-input-icon {
    color: var(--accent);
}

.auth-input-wrap input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    padding: 0.9rem 2.8rem 0.9rem 2.8rem;
    border-radius: 12px;
    color: var(--text-main);
    font-family: 'JetBrains Mono';
    font-size: 0.875rem;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.auth-input-wrap input::placeholder {
    color: rgba(255,255,255,0.2);
    font-size: 0.82rem;
}

.auth-input-wrap input:focus {
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.05);
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.08);
}

/* Show/hide password button */
.auth-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    z-index: 1;
}
.auth-eye-btn:hover { color: var(--accent); }
.auth-eye-btn .material-symbols-outlined { font-size: 1rem; }

/* Legacy input-group (used in notification modal etc.) */
.input-group {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.input-group label {
    font-family: 'JetBrains Mono';
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.input-group input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    padding: 1rem 1.2rem;
    border-radius: 12px;
    color: var(--text-main);
    font-family: 'JetBrains Mono';
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    border-color: var(--accent);
    background: rgba(125, 211, 252, 0.05);

}

/* Submit button */
.intel-action-btn.auth-submit {
    background: var(--accent);
    color: var(--btn-text);
    border: none;
    padding: 1rem;
    border-radius: 12px;
    font-family: 'Outfit';
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 20px rgba(125, 211, 252, 0.25);
    margin: 0.25rem 0;
}
.intel-action-btn.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(125, 211, 252, 0.4);
    background: var(--on-accent-inv);
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-size: 0.7rem;
    font-family: 'JetBrains Mono';
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Trust strip */
.auth-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    opacity: 0.5;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'JetBrains Mono';
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.trust-item .material-symbols-outlined { font-size: 0.85rem; }
.trust-sep { width: 1px; height: 16px; background: var(--border); }

/* Auth switch */
.auth-switch {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-dim);
    font-family: 'JetBrains Mono';
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btv2-export-btn {
    background: linear-gradient(135deg, rgba(0,212,170,0.15), rgba(0,168,150,0.1));
    border: 1px solid rgba(0,212,170,0.35);
    color: #00d4aa;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.btv2-export-btn:hover {
    background: rgba(0,212,170,0.2);
    box-shadow: 0 0 12px rgba(0,212,170,0.3);
    transform: translateY(-1px);
}

/* ============================================================
   v1.56 - Signal Toast & Animation Additions
   ============================================================ */

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(100%) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-slide-out {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(100%) scale(0.9); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(110%) scale(0.9); }
}

/* Signal Alert Toast - premium wider variant */
.signal-toast {
    border-left: 4px solid #00d4aa !important;
    min-width: 340px;
    max-width: 440px;
    background: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(13,17,23,0.95)) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,170,0.15) !important;
}

/* pulse-live for top-bar LIVE dot (#signal-poller-dot) */
@keyframes pulse-live {
    0%   { opacity: 1; box-shadow: 0 0 0 0 rgba(0,212,170,0.7); }
    70%  { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0,212,170,0); }
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,212,170,0); }
}

/* -- Hub Tab Refinement: underline tabs, not pill buttons ------------------- */
.hub-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.07);
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}
.hub-tabs .intel-action-btn.mini,
.hub-tabs .intel-action-btn.outline {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-dim);
    padding: 8px 16px 10px;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.2s, border-color 0.2s;
    transform: none !important;
    box-shadow: none !important;
}
.hub-tabs .intel-action-btn.mini:not(.outline),
.hub-tabs button:not(.outline).intel-action-btn {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}
.hub-tabs .intel-action-btn.mini:hover,
.hub-tabs .intel-action-btn.outline:hover {
    color: var(--text-main);
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.2);
}

/* -- Delta values: white not accent-blue ------------------------------------ */
.delta-value { color: var(--text-main) !important; }

/* -- Feed label (LIVE ALPHA): less aggressive ------------------------------- */
.feed-label {
    background: rgba(139,92,246,0.15) !important;
    color: rgba(167,139,250,0.9) !important;
    border: 1px solid rgba(139,92,246,0.25) !important;
    font-size: 0.6rem !important;
}

/* -- Premium/LIVE badge: same treatment ------------------------------------- */
.premium-badge {
    background: rgba(139,92,246,0.15) !important;
    color: rgba(167,139,250,0.9) !important;
    border: 1px solid rgba(139,92,246,0.2) !important;
    box-shadow: none !important;
}

/* -- Signal card LONG/SHORT badges: muted ----------------------------------- */
.label-tag {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--text-dim) !important;
}
.label-tag[style*="color: var(--risk-low)"],
.label-tag[style*="LONG"] { color: var(--risk-low) !important; }

/* -- BTC correlation big numbers: white --------------------------------------*/
.correlation-val, .big-stat, .stat-hero { color: var(--text-main) !important; }

/* -- Action button (top bar): subtle --------------------------------------- */
.action-btn-styled.primary {
    background: rgba(125,211,252,0.12) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(125,211,252,0.3) !important;
    box-shadow: none !important;
}
.action-btn-styled.primary:hover {
    background: rgba(125,211,252,0.2) !important;
    box-shadow: none !important;
}
/* -- Landing hero: remove image glow, use clean gradient depth --------------*/
.landing-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99,102,241,0.06) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 80% 50%, rgba(125,211,252,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
/* === v1.65 DE-AI STRUCTURAL OVERRIDES === */

body, .nav-item, button, select, input, .brand-title, h1, h2, h3 {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Cards: less heavy, no move-on-hover */
.signal-card {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}
.signal-card:hover {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
    transform: none !important;
}
.card:hover, .glass-card:hover, .intel-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
.card, .glass-card, .intel-card, .signal-card, .f-card {
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

/* Big metric numbers: white, not accent */
.delta-value { color: var(--text-main) !important; font-weight: 500 !important; }

/* Headings: lighter weight, tighter tracking */
h1 { font-weight: 600 !important; letter-spacing: -0.025em; }
h2 { font-weight: 500 !important; letter-spacing: -0.015em; }

/* Nav items: normal weight, no forced caps */
.nav-item {
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}
.nav-item.active { font-weight: 550 !important; }

/* Top ticker bar: quieter */
.scroller { font-size: 0.75rem !important; opacity: 0.65; }
.top-bar { padding: 0.55rem 1.25rem !important; }

/* Hub page tabs: already underline via earlier rule, reinforce */
.hub-tabs .intel-action-btn.mini:not(.outline),
.hub-tabs button:not(.outline) {
    font-weight: 600 !important;
}

/* Reduce LONG/SHORT badge saturation */
.pos { color: rgba(74,222,128,0.8) !important; }
.neg { color: rgba(248,113,113,0.8) !important; }

/* Body: subtle top radial depth */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 300px;
    background: radial-gradient(ellipse 80% 100% at 50% -20%, rgba(99,102,241,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
/* ============================================================
   GLASSMORPHISM OVERHAUL - AlphaSignal v1.7
   Deep frosted glass, luminous borders, layered depth
   ============================================================ */

/* -- Background: richer deep navy with subtle nebula glow -- */
body {
    background: radial-gradient(ellipse 120% 80% at 10% -10%, rgba(14,18,40,1) 0%, #050710 60%, #020408 100%) !important;
}

/* Animated ambient orbs behind everything */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 500px at 15% 20%, rgba(125,211,252,0.045) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 85% 75%, rgba(99,102,241,0.055) 0%, transparent 70%),
        radial-gradient(ellipse 400px 350px at 50% 50%, rgba(188,19,254,0.025) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* -- Root variable upgrades -- */
:root {
    /* == Core backgrounds ============================================== */
    --bg-deep:    #090c14;
    --bg-body:    #090c14;
    --bg-card:    rgba(255,255,255,0.04);
    --bg-sidebar: rgba(9,12,20,0.92);
    --bg-modal:   #0d1117;
    --bg-input:   rgba(0,0,0,0.3);

    /* == Surfaces / Glass ============================================== */
    --glass:     rgba(255,255,255,0.04);
    --surface-1: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);

    /* == Accent ======================================================== */
    --accent:      #7dd3fc;
    --accent-glow: rgba(125,211,252,0.15);

    /* == Risk / Status ================================================= */
    --risk-high: #f87171;
    --risk-med:  #fb923c;
    --risk-low:  #4ade80;

    /* == Text ========================================================== */
    --text-main: #e2e8f0;
    --text-dim:  #94a3b8;
    --text:      var(--text-main);

    /* == On-colour text (text placed ON a coloured surface) ============ */
    --on-accent:     #000;
    --on-accent-inv: #fff;
    --btn-text:      rgb(121, 204, 244); /* text on gradient CTA buttons */

    /* == Border and Shadow ============================================= */
    --border:       rgba(255,255,255,0.08);
    --shadow-color: rgba(0,0,0,0.5);

    /* == Purple secondary accent ======================================= */
    --purple:      #8b5cf6;
    --purple-glow: rgba(139,92,246,0.15);

    /* == Aliases ======================================================= */
    --card-bg:  var(--bg-card);

    /* == Layout ======================================================== */
    --sidebar-w: 260px;

    /* == Market regime colours ========================================= */
    --regime-accumulation: #818cf8;
    --regime-trending:     #7dd3fc;
    --regime-distribution: #fb923c;
    --regime-volatile:     #f87171;
}

/* -- Sidebar: deep frosted glass -- */
.sidebar {
    background: rgba(4,6,18,0.72) !important;
    backdrop-filter: blur(48px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(48px) saturate(180%) !important;
    border-right: 1px solid rgba(125,211,252,0.08) !important;
    box-shadow: 4px 0 40px rgba(0,0,0,0.5), inset -1px 0 0 rgba(255,255,255,0.04) !important;
}

/* Sidebar inner glow top */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: radial-gradient(ellipse at top, rgba(125,211,252,0.06), transparent 70%);
    pointer-events: none;
}

/* -- Cards: true frosted glass with glow border -- */
.card, .glass-card, .intel-card, .signal-card, .f-card {
    background: rgba(255,255,255,0.048) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-top-color: rgba(255,255,255,0.16) !important;
    border-left-color: rgba(255,255,255,0.12) !important;
    box-shadow: var(--shadow-glass),
                inset 0 1px 0 rgba(255,255,255,0.08),
                inset 0 -1px 0 rgba(0,0,0,0.2) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease !important;
}

.card:hover, .glass-card:hover, .intel-card:hover {
    border-color: rgba(125,211,252,0.22) !important;
    border-top-color: rgba(125,211,252,0.30) !important;
    box-shadow: 0 0 0 1px rgba(125,211,252,0.10),
                0 12px 40px rgba(0,0,0,0.6),
                inset 0 1px 0 rgba(255,255,255,0.12),
                0 0 60px rgba(125,211,252,0.06) !important;
    transform: translateY(-1px) !important;
}

/* -- Top bar: heavy frosted glass -- */
.top-bar {
    background: rgba(4,6,18,0.65) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-top-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* -- Signal cards: deeper glass with accent tone -- */
.signal-card {
    background: linear-gradient(
        135deg,
        rgba(125,211,252,0.04) 0%,
        rgba(255,255,255,0.03) 50%,
        rgba(99,102,241,0.03) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-top-color: rgba(255,255,255,0.18) !important;
}

/* -- Hub tabs: frosted pill -- */
.hub-tabs {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.hub-tabs button.active,
.hub-tabs .intel-action-btn.active {
    background: rgba(125,211,252,0.15) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(125,211,252,0.25) !important;
    box-shadow: 0 0 20px rgba(125,211,252,0.12),
                inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* -- Nav active state: glowing pill -- */
.nav-item.active {
    background: rgba(125,211,252,0.10) !important;
    border-left: 2px solid var(--accent) !important;
    box-shadow: inset 0 0 20px rgba(125,211,252,0.06) !important;
}

/* -- Overlay modal: ultra frosted -- */
.overlay {
    background: rgba(2,4,12,0.80) !important;
    backdrop-filter: blur(20px) !important;
}
.overlay-content {
    background: rgba(6,9,22,0.92) !important;
    backdrop-filter: blur(40px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-top-color: rgba(255,255,255,0.20) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7),
                inset 0 1px 0 rgba(255,255,255,0.10),
                0 0 0 1px rgba(125,211,252,0.06) !important;
}

/* -- Data table rows: subtle glass rows -- */
.data-table tbody tr:hover {
    background: rgba(125,211,252,0.06) !important;
    backdrop-filter: blur(8px) !important;
}
.data-table th {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* -- Input fields and selects: glass inputs -- */
input, select, textarea {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(125,211,252,0.40) !important;
    box-shadow: 0 0 0 3px rgba(125,211,252,0.10),
                inset 0 1px 0 rgba(255,255,255,0.05) !important;
    outline: none !important;
}

/* -- Buttons: frosted glass pill -- */
.intel-action-btn, .action-btn-styled, .tf-btn {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
    transition: all 0.2s ease !important;
}
.intel-action-btn:hover, .action-btn-styled:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(125,211,252,0.30) !important;
    box-shadow: 0 0 16px rgba(125,211,252,0.10),
                inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.intel-action-btn.primary, .action-btn-styled.primary {
    background: linear-gradient(135deg, rgba(125,211,252,0.9), rgba(99,102,241,0.8)) !important;
    border: 1px solid rgba(125,211,252,0.5) !important;
    box-shadow: 0 4px 20px rgba(125,211,252,0.25),
                inset 0 1px 0 rgba(255,255,255,0.2) !important;
    color: var(--on-accent) !important;
}

/* -- Premium badge: luminous glass -- */
.premium-badge {
    background: rgba(125,211,252,0.12) !important;
    border: 1px solid rgba(125,211,252,0.30) !important;
    box-shadow: 0 0 12px rgba(125,211,252,0.15),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(8px) !important;
}

/* -- Stat / metric cards inner glow -- */
.stat-card, .heatmap-sector, .cat-card, .whale-row {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-top-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* -- Scrollbar: glass tinted -- */
::-webkit-scrollbar-thumb {
    background: rgba(125,211,252,0.15) !important;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(125,211,252,0.28) !important;
}

/* -- View header: subtle glass frosting -- */
.view-header {
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* H2 eyebrow must always appear ABOVE the H1 title, never inline.
   Force it to take full width so it breaks to its own line in any
   flex row parent, and reset any font-weight override from the
   de-AI rule set above so the small-caps dim style is preserved. */
.view-header > h2:first-child,
.view-header > div > h2:first-child {
    display: block;
    width: 100%;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    letter-spacing: 2px;
    color: var(--text-dim) !important;
    text-transform: uppercase;
    margin: 0 0 4px !important;
}

/* ============================================================
   SIDEBAR GLASSMORPHISM - Premium Frosted Glass Sidebar
   ============================================================ */

/* Reset sidebar to true glass */
.sidebar {
    background: rgba(6, 8, 20, 0.55) !important;
    backdrop-filter: blur(60px) saturate(200%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.1) !important;
    border-right: 1px solid rgba(125,211,252,0.10) !important;
    box-shadow:
        4px 0 60px rgba(0,0,0,0.6),
        inset -1px 0 0 rgba(255,255,255,0.05),
        inset 1px 0 0 rgba(255,255,255,0.02) !important;
    position: relative !important;
}

/* Ambient glow bands inside the sidebar */
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 180px 300px at 50% 0%, rgba(125,211,252,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 160px 200px at 30% 85%, rgba(99,102,241,0.06) 0%, transparent 70%),
        linear-gradient(180deg, rgba(125,211,252,0.025) 0%, transparent 30%, rgba(99,102,241,0.02) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Sidebar content above pseudo-elements */
.sidebar > * { position: relative; z-index: 1; }

/* Brand logo orb - glowing glass sphere */
.logo-orb {
    width: 34px !important;
    height: 34px !important;
    background: radial-gradient(circle at 35% 35%, rgba(125,211,252,0.9), rgba(99,102,241,0.6)) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(125,211,252,0.4) !important;
    box-shadow:
        0 0 20px rgba(125,211,252,0.35),
        0 0 60px rgba(125,211,252,0.15),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* Section labels */
.sidebar .nav-section-label,
.sidebar [style*="letter-spacing"][style*="font-size:0.6"] {
    color: rgba(125,211,252,0.5) !important;
    letter-spacing: 2.5px !important;
}

/* Nav items: glass pill on hover and active */
.nav-item {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    position: relative !important;
}

.nav-item:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),
                0 2px 8px rgba(0,0,0,0.2) !important;
    backdrop-filter: blur(8px) !important;
}

.nav-item.active {
    background: linear-gradient(
        135deg,
        rgba(125,211,252,0.14) 0%,
        rgba(99,102,241,0.08) 100%
    ) !important;
    border-color: rgba(125,211,252,0.22) !important;
    border-top-color: rgba(125,211,252,0.30) !important;
    color: var(--accent) !important;
    box-shadow:
        0 0 20px rgba(125,211,252,0.10),
        inset 0 1px 0 rgba(125,211,252,0.15),
        inset 0 0 12px rgba(125,211,252,0.04) !important;
    backdrop-filter: blur(12px) !important;
}

/* Active indicator - glowing left accent line */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: linear-gradient(180deg, rgba(125,211,252,0) 0%, var(--accent) 50%, rgba(125,211,252,0) 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(125,211,252,0.6), 0 0 20px rgba(125,211,252,0.3);
}

/* Hub section separators: frosted divider */
.sidebar hr,
.sidebar [style*="border-top"] {
    border-color: rgba(255,255,255,0.06) !important;
}

/* Section header labels in sidebar */
.sidebar .nav-section {
    font-size: 0.58rem !important;
    letter-spacing: 2px;
    color: rgba(125,211,252,0.40) !important;
    padding: 0.8rem 0.8rem 0.3rem !important;
    text-transform: uppercase;
}

/* User account card at bottom: glass pill */
.sidebar [class*="user"],
.sidebar [style*="border-radius:12px"][style*="background"] {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-top-color: rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* Fear & Greed at bottom: glowing glass badge */
.sidebar [style*="FEAR"] {
    text-shadow: 0 0 12px currentColor !important;
}

/* Sidebar scrollbar: accent-tinted */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(125,211,252,0.20) !important;
    border-radius: 4px !important;
}
.sidebar::-webkit-scrollbar-track { background: transparent !important; }


/* ================================================================== */
/* LIGHT THEME                                                         */
/* ================================================================== */
[data-theme="light"] {
    --bg-body:    #f0f4f8;
    --bg-deep:    #e8edf3;
    --bg-card:    rgba(0,0,0,0.04);
    --bg-sidebar: rgba(240,244,248,0.97);
    --bg-modal:   #ffffff;
    --bg-input:   rgba(0,0,0,0.05);

    --glass:     rgba(0,0,0,0.03);
    --surface-1: rgba(0,0,0,0.03);
    --surface-2: rgba(0,0,0,0.06);

    --text-main: #0f172a;
    --text-dim:  #475569;
    --text:      var(--text-main);

    --border:    rgba(0,0,0,0.1);

    --on-accent:     #000;
    --on-accent-inv: #ffffff;
    --btn-text:      #0a3a5c;

    --shadow-color:  rgba(0,0,0,0.12);

    --accent:      #0ea5e9;
    --accent-glow: rgba(14,165,233,0.2);
    --purple:      #7c3aed;
    --purple-glow: rgba(124,58,237,0.2);

    --risk-high: #dc2626;
    --risk-med:  #ea580c;
    --risk-low:  #16a34a;

    --card-bg: var(--bg-card);

    --regime-accumulation: #6366f1;
    --regime-trending:     #0ea5e9;
    --regime-distribution: #ea580c;
    --regime-volatile:     #dc2626;
}

/* Light mode overrides for elements with hardcoded dark colours */
[data-theme="light"] body {
    background: var(--bg-body) !important;
}

[data-theme="light"] .sidebar {
    background: rgba(240,244,248,0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right-color: rgba(0,0,0,0.08);
    box-shadow: 2px 0 20px rgba(0,0,0,0.06);
}

[data-theme="light"] .card,
[data-theme="light"] .glass-card {
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .nav-item:hover {
    background: rgba(0,0,0,0.05);
}

[data-theme="light"] .nav-item.active {
    background: rgba(14,165,233,0.12);
}

[data-theme="light"] .top-bar {
    border-bottom-color: rgba(0,0,0,0.08);
    background: rgba(240,244,248,0.9);
}

[data-theme="light"] select,
[data-theme="light"] option {
    background-color: var(--bg-input);
    color: var(--text-main);
}

[data-theme="light"] .input-group input,
[data-theme="light"] .auth-input-wrap input {
    background: var(--bg-input);
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .intel-action-btn.outline {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

[data-theme="light"] .heatmap-box {
    color: var(--on-accent-inv);
}

[data-theme="light"] .fear-greed-value,
[data-theme="light"] #fearGreedValue {
    color: var(--text-main) !important;
    text-shadow: none;
}

[data-theme="light"] .theme-toggle-btn {
    background: rgba(14,165,233,0.1);
    color: var(--accent);
}

[data-theme="light"] body::before,
[data-theme="light"] body::after {
    display: none !important;
}

[data-theme="light"] .sidebar::before {
    display: none !important;
}

[data-theme="light"] .nav-item:hover {
    background: rgba(0,0,0,0.06) !important;
    border-color: rgba(0,0,0,0.1) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .nav-item.active {
    background: rgba(14,165,233,0.15) !important;
    border-color: rgba(14,165,233,0.3) !important;
    box-shadow: none !important;
    color: var(--accent) !important;
}

[data-theme="light"] .nav-item.active::before {
    background: var(--accent) !important;
    box-shadow: 0 0 8px rgba(14,165,233,0.4) !important;
}

/* Strategy dropdowns: force solid dark bg */
.strat-select, select.strat-select, .strat-select option {
    background-color: #0d1117 !important;
    color: var(--text-main) !important;
}

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

/* ============================================================
   MOBILE RESPONSIVE MASTER FIX - v2.03
   Critical: sidebar must be position:absolute on mobile so
   .content fills full viewport width (root cause of blank screen)
   ============================================================ */

@media (max-width: 900px) {

    /* - ROOT FIX: sidebar out of flex flow - */
    .layout {
        display: block !important;   /* kill flex so sidebar doesn't consume space */
        position: relative;
    }
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 85vw !important;
        max-width: 320px;
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        background: var(--bg-deep) !important;
        padding: 1.5rem !important;
    }
    .sidebar.open { transform: translateX(0) !important; }

    /* Content fills full width - no more margin-left */
    .content {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0.75rem 0.75rem 90px !important; /* bottom: space for mobile nav */
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Hub tab rows: MUST scroll not clip - needs own scroll context */
    .hub-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding-bottom: 8px !important;
        /* Escape parent overflow-x:hidden by using margin trick */
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .hub-tabs::-webkit-scrollbar { display: none; }
    .hub-tabs button, .hub-tabs .intel-action-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.58rem !important;
        padding: 5px 9px !important;
    }

    /* - View header: stack on mobile - */
    .view-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .view-header h1 {
        font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
    }
    .view-header > button,
    .view-header > a,
    .view-header .intel-action-btn {
        align-self: flex-start;
    }

    /* - Hub tab rows: horizontal scroll - */
    .hub-tabs,
    [class*="tab-bar"],
    [class*="hub-nav"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .hub-tabs::-webkit-scrollbar { display: none; }
    .hub-tabs button, .hub-tabs .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.6rem !important;
        padding: 5px 10px !important;
    }

    /* - Filter bars: wrap - */
    #archive-filters,
    [id$="-filters"],
    .view-actions,
    .category-filters {
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
    }

    /* - Strategy workspace: single column - */
    .strategy-workspace {
        grid-template-columns: 1fr !important;
    }

    /* - Risk top grid: single column - */
    .risk-top-grid {
        grid-template-columns: 1fr !important;
    }

    /* - All inline grids with 2+ cols: collapse - */
    [style*="grid-template-columns: 1fr 1.5fr"],
    [style*="grid-template-columns: 1.5fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns: 320px"],
    [style*="grid-template-columns: 3fr"],
    [style*="grid-template-columns: 2fr"] {
        grid-template-columns: 1fr !important;
    }

    /* - Tables: horizontal scroll wrapper - */
    .card table,
    .glass-card table,
    [style*="overflow-x:auto"] table,
    table {
        min-width: 520px;
    }
    .card,
    .glass-card {
        -webkit-overflow-scrolling: touch;
    }

    /* - Backtest V2 KPI grid: 2 cols on mobile - */
    .btv2-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* - Charts: allow taller canvases for specific module interfaces - */
    canvas:not(#riskScatterChart, #ivSmileChart, #gexChart, .profile-chart) { max-height: 250px !important; }
    #riskScatterChart { max-height: 400px !important; }
    #ivSmileChart, #gexChart { max-height: 350px !important; }

    /* - Matrix container: scroll - */
    .rotation-matrix-container,
    .matrix-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* - Sidebar backdrop overlay - */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1999;
        backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.active { display: block; }
}

/* - 480px: tighten further - */
@media (max-width: 480px) {
    .content { padding: 0.5rem 0.5rem 90px !important; }

    .btv2-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tables: tighter font so more fits */
    table { font-size: 0.65rem !important; }
    th, td { padding: 6px 8px !important; }

    /* Signal cards: single column */
    .signal-grid { grid-template-columns: 1fr !important; }

    /* Hide secondary chart decorations that don't matter on phone */
    .backtest-summary-cards {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Ticker tables: hide less important columns via opacity/display */
    .col-hide-mobile { display: none !important; }
}

/* - Global: view-header always wraps gracefully - */
/* Prevents H1 + badge + button collision on any view at any width */
.view-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}
.view-header h1 {
    min-width: 0;
    word-break: break-word;
}
/* Premium badge inside H1: always stays on same line as title text */
.view-header h1 .premium-badge,
.view-header .premium-badge {
    flex-shrink: 0;
    vertical-align: middle;
    font-size: 0.75rem !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
}


/* PWA Touch & Navigation Behaviors */

body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; touch-action: pan-x pan-y; }

.nav-item, .intel-action-btn, .action-btn-styled, .tab-btn, button, .signal-card, .glass-card, .tape-item { user-select: none; -webkit-user-select: none; }




/* Mobile Viewport Constraints Hardenning - Table Wrapper */
.table-responsive-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.table-responsive-wrapper::-webkit-scrollbar { height: 4px; }
.table-responsive-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }