/**
 * Lucid-Scope Design System v3.2 — UI Fixes Pass
 * Changes from v3.1:
 *  - Logo: pure white (no gradient)
 *  - Action buttons: white text + white underline only (no background box)
 *  - Sub-boxes: transparent fill, white-stroke only
 *  - Background: darker neutral blacks
 *  - Status colors: bolder
 *  - Dropdowns: match container bg, white text
 *  - Sub-headers: font-weight 300
 *  - Search focus: single border glow only (kills double-border bug)
 *  - Disclaimer: italic, smaller, lighter
 *  - lt-signal-badge: stroke-only, no fill
 *  - Tooltips: fully visible, solid CSS
 *  - Main-app top spacing: increased (boxes no longer stuck to header)
 */

/* ============================================================== */
/* 0. FONTS                                                        */
/* ============================================================== */

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

/* ============================================================== */
/* 1. DESIGN TOKENS                                                */
/* ============================================================== */

:root {
    /* ── Backgrounds — V4 terminal glass ─────────────────────── */
    --bg-base:            #050505;
    --bg-surface:         rgba(18, 18, 20, 0.4);
    --bg-elevated:        rgba(18, 18, 20, 0.4);
    --bg-input:           transparent;           /* Sub-boxes: no fill        */
    --bg-hover:           rgba(255, 255, 255, 0.04);

    /* ── PRIMARY: Blue — interactive / focus only ─────────────── */
    --accent-blue:        #3b82f6;
    --accent-blue-dim:    rgba(59, 130, 246, 0.1);
    --accent-blue-glow:   rgba(59, 130, 246, 0.35);
    --accent-blue-hover:  #60a5fa;

    /* ── Status ───────────────────────────────────────────────── */
    --status-up:          #10b981;
    --status-up-bg:       transparent;
    --status-up-border:   rgba(32, 212, 194, 0.45);
    --status-down:        #ef4444;   /* Brighter red                          */
    --status-down-bg:     transparent;
    --status-down-border: rgba(240, 82, 106, 0.45);
    --status-warn:        #e0b84a;   /* Richer gold                           */
    --status-warn-bg:     transparent;
    --status-warn-border: rgba(224, 184, 74, 0.45);
    --status-neu:         #7a90a8;
    --status-neu-bg:      transparent;
    --status-neu-border:  rgba(122, 144, 168, 0.35);

    /* ── Text ────────────────────────────────────────────────── */
    --text-primary:       #e4e4e7;
    --text-secondary:     #a1a1aa;
    --text-tertiary:      #71717a;
    --text-heading:       #e4e4e7;
    --text-white:         #ffffff;

    /* ── Borders ─────────────────────────────────────────────── */
    --border-subtle:      rgba(255, 255, 255, 0.10);
    --border-default:     rgba(255, 255, 255, 0.22);  /* Brighter white stroke */
    --border-bright:      rgba(255, 255, 255, 0.35);
    --border-highlight:   rgba(58, 123, 213, 0.5);

    /* ── Typography ──────────────────────────────────────────── */
    --font-headlines:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-text:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:          'JetBrains Mono', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* ── Geometry ────────────────────────────────────────────── */
    --radius-sm:          4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          18px;
    --radius-pill:        999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-card:        0 4px 40px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6);
    --shadow-glow-sm:     0 0 14px rgba(58, 123, 213, 0.15);
    --shadow-orange-glow: 0 0 20px rgba(232, 98, 26, 0.3);

    /* ── Transitions ─────────────────────────────────────────── */
    --ease:               cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur-fast:           140ms;
    --dur-base:           240ms;
    --dur-slow:           420ms;
}

/* ============================================================== */
/* 2. RESET & BASE                                                 */
/* ============================================================== */

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

body {
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: var(--bg-base) !important;
    background-image:
        radial-gradient(ellipse 60% 40% at 50% 32%,
            rgba(12, 32, 80, 0.2) 0%,
            rgba(232, 98, 26, 0.025) 65%,
            transparent 100%) !important;
    background-attachment: fixed;
}

.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar               { width: 4px; height: 4px; }
::-webkit-scrollbar-track         { background: var(--bg-base); }
::-webkit-scrollbar-thumb         { background: rgba(255,255,255,0.08); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover   { background: rgba(255,255,255,0.16); }

h1, h2, h3, h4, h5, h6,
.font-brand, .font-headline {
    font-family: var(--font-headlines);
    letter-spacing: 0.04em;
}

/* ============================================================== */
/* 3. LANDING PAGE                                                 */
/* ============================================================== */

#landing-view {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 100;
    background: var(--bg-base);
    background-image:
        radial-gradient(ellipse 75% 50% at 50% 42%,
            rgba(10, 28, 75, 0.5) 0%,
            transparent 100%);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

/* ── Logo: pure white, no gradient ─────────────────────────────── */
.gradient-brand-master {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    color: #ffffff !important;
    filter: none !important;
}

.glow-effect { filter: none; }

/* Landing h1 */
#landing-view h1 {
    font-family: var(--font-headlines);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    color: #ffffff;
}

/* Subtitle — white, light weight */
#landing-view p {
    font-family: var(--font-text);
    font-weight: 300;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* ── BEGIN TO EXPLORE — white text + underline, no box ─────────── */
#beginBtn {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--font-headlines);
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    height: auto;
    padding: 0 0 8px 0 !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: color var(--dur-base), border-color var(--dur-base),
                text-shadow var(--dur-base);
}

#beginBtn:hover {
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* Persistent header — white */
#persistentHeader {
    font-family: var(--font-headlines);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 1rem;
    color: rgba(255,255,255,0.85) !important;
    background: none !important;
    -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
    filter: none;
}

/* ============================================================== */
/* 4. GLASS CARDS — outer containers                              */
/* ============================================================== */

.glass-card {
    background: rgba(18, 18, 20, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(24, 24, 27, 0.6);
}

/* ============================================================== */
/* 5. MODULE SECTION HEADERS                                      */
/* ============================================================== */

/* Section toggle button — Observe Market */
#observeToggleBtn {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: none !important;
    padding: 20px 24px;
    transition: background var(--dur-fast);
}
#observeToggleBtn:hover {
    background: rgba(255,255,255,0.02) !important;
    color: rgba(255,255,255,0.7);
}

/* Section h2 — light weight headings */
.glass-card h2 {
    font-family: var(--font-headlines);
    font-size: 1rem;
    font-weight: 300;                /* e — sub-headers light weight */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-heading);
}

/* Sub-headers (p tags under section titles) — light weight */
.glass-card p,
.glass-card .text-sm.text-gray-400,
#longTermContent p,
#analysisResults p {
    font-weight: 300;
    color: var(--text-secondary);
}

/* ============================================================== */
/* MARKET TOGGLE — US / IL Switcher                               */
/* ============================================================== */

.market-toggle-container {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.market-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.market-toggle-btn {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    position: relative;
    z-index: 2;
}

.market-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.market-toggle-btn.active {
    color: rgba(255, 255, 255, 0.98);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.market-toggle-sep {
    display: block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.market-toggle.loading {
    pointer-events: none;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .market-toggle-btn {
        padding: 6px 10px;
    }
    .market-toggle-btn .toggle-label {
        font-size: 12px;
    }
}

/* ============================================================== */
/* 6. ACTION BUTTONS — white text + white underline, glow hover   */
/* g. all features action buttons                                  */
/* ============================================================== */

/* Master rule — all feature action buttons become text-link style */
button#searchBtn,
button#analyzeBtn,
button#longTermAnalyzeBtn,
button#loadContextBtn,
.btn-primary {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.75) !important;
    font-family: var(--font-headlines);
    font-weight: 300;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    height: auto;
    padding: 0 0 6px 0 !important;
    transition: color var(--dur-base), border-color var(--dur-base),
                text-shadow var(--dur-base);
}

button#searchBtn:hover,
button#analyzeBtn:hover,
button#longTermAnalyzeBtn:hover,
button#loadContextBtn:hover,
.btn-primary:hover {
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.75) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: 0 0 18px rgba(255,255,255,0.35);
}

button:active {
    transform: none !important;
    box-shadow: none !important;
}

/* Ghost/toggle buttons */
button#toggleContextBtn,
button#toggleHistoryBtn {
    color: var(--text-tertiary);
    background: transparent !important;
    border: none !important;
    transition: color var(--dur-fast);
}
button#toggleContextBtn:hover,
button#toggleHistoryBtn:hover {
    color: rgba(255,255,255,0.6);
    background: transparent !important;
}

/* ============================================================== */
/* 7. INPUTS & SEARCH BARS                                        */
/* ============================================================== */

/* Pill wrapper — white stroke, transparent fill */
.floating-pill {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-pill) !important;
    padding: 4px 6px !important;
    display: flex;
    align-items: center;
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
    box-shadow: none;
}

/* Focus: only the pill border glows — no inner border appears */
.floating-pill:focus-within {
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 18px rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.04) !important;
}

/* Kill ALL native browser focus rings on the input itself */
input[type="text"] {
    font-family: var(--font-headlines);
    font-weight: 300;
    color: var(--text-heading) !important;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    caret-color: rgba(255,255,255,0.7);
}

input[type="text"]:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

input::placeholder {
    color: var(--text-tertiary) !important;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    font-weight: 300;
}

/* ── Select dropdowns ─────────────────────────────────────────── */
/* d. same background as container, stretched appearance           */
select {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(8, 8, 14, 0.98) !important; /* matches bg-surface */
    border: 1px solid var(--border-default) !important;
    color: rgba(255,255,255,0.85) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 40px 10px 16px !important;
    font-family: var(--font-headlines);
    font-size: 0.78rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    width: 100%;
    max-width: 260px;
}

select:focus {
    border-color: rgba(255,255,255,0.4) !important;
    outline: none;
    box-shadow: 0 0 12px rgba(255,255,255,0.06);
}

/* Option items — white text on dark background */
select option {
    background-color: #080812;
    color: rgba(255,255,255,0.9);
    font-family: var(--font-headlines);
    font-weight: 300;
    letter-spacing: 0.08em;
    padding: 10px 16px;
}

select option:checked,
select option:hover {
    background-color: #111128;
    color: #ffffff;
}

/* ============================================================== */
/* 8. METRIC BOXES & KPI GRID                                     */
/* a. White stroke only, no color fill                            */
/* ============================================================== */

.metric-box {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color var(--dur-fast);
    position: relative;
}

.metric-box:hover {
    background: rgba(255,255,255,0.02) !important;
    border-color: var(--border-bright) !important;
}

.box-label {
    font-family: var(--font-headlines);
    font-size: 0.58rem;
    font-weight: 300;             /* e — light weight sub-labels */
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.box-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Quick Metrics 4-col KPI grid */
.quick-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

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

.quick-metric-box {
    background: transparent;
    padding: 20px 16px;
    position: relative;
    overflow: hidden;
    transition: background var(--dur-fast);
}

.quick-metric-box:hover { background: rgba(255,255,255,0.025); }

.quick-metric-label {
    font-family: var(--font-headlines);
    font-size: 0.58rem;
    font-weight: 300;             /* e — light weight */
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    margin-bottom: 10px;
    display: block;
}

.quick-metric-value {
    font-family: var(--font-mono);
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ============================================================== */
/* 9. PILLS & STATUS BADGES                                       */
/* ============================================================== */

.signal-pill, .score-tag-pill {
    border-radius: var(--radius-pill);
    font-family: var(--font-headlines);
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;          /* Never break text inside a pill */
    flex-shrink: 0;               /* Don't compress — move to next row instead */
    display: inline-flex;
    align-items: center;
}

/* JS-generated Tailwind class overrides */
.bg-green-900\/50, .bg-green-900\/20 {
    background: transparent !important;
    border: 1px solid var(--status-up-border) !important;
    color: var(--status-up) !important;
}

.bg-red-900\/50, .bg-red-900\/20 {
    background: transparent !important;
    border: 1px solid var(--status-down-border) !important;
    color: var(--status-down) !important;
}

.bg-yellow-900\/50, .bg-yellow-900\/20, .text-yellow-400 {
    background: transparent !important;
    border: 1px solid var(--status-warn-border) !important;
    color: var(--status-warn) !important;
}

/* ============================================================== */
/* 10. SENTIMENT BOX                                               */
/* ============================================================== */

#sentimentBox {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#ctxSentiment {
    font-family: var(--font-headlines);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: var(--text-heading);
}

#ctxRegion {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

/* ============================================================== */
/* 11. GRADE BOX                                                   */
/* ============================================================== */

.grade-box-v2 {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#gradeBadge {
    font-family: var(--font-headlines);
    font-weight: 800;
    letter-spacing: 0.02em;
    filter: drop-shadow(0 0 18px currentColor);
    line-height: 1;
}

#execStance {
    font-family: var(--font-headlines);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 18px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: border-color var(--dur-base), color var(--dur-base),
                text-shadow var(--dur-base);
}

/* execStance as text-link button — g. */
#execStance:hover {
    color: #ffffff;
    border-bottom-color: rgba(255,255,255,0.6);
    text-shadow: 0 0 16px rgba(255,255,255,0.3);
}

#execStance.bullish, #execStance.buy {
    border-color: var(--accent-orange-border);
    color: var(--accent-orange);
}

/* ============================================================== */
/* 12. AI SUMMARY BOX                                             */
/* ============================================================== */

#ai-summary-box {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-orange);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
}

#lt-ai-summary-box {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--status-up);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 24px;
}

.ai-header-title {
    font-family: var(--font-headlines);
    font-size: 0.65rem;
    font-weight: 300;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 14px;
}

/* ============================================================== */
/* 13. SCORE BARS                                                  */
/* ============================================================== */

.score-rect { display: flex; flex-direction: column; gap: 6px; }

/* Tags row: wraps between pills, never inside one */
.score-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 4px;
}

.score-rect-label {
    font-family: var(--font-headlines);
    font-size: 0.58rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-align: center;
}

.score-rect-box {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    height: 40px;
    position: relative;
    overflow: hidden;
}

.score-rect-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: rgba(58, 123, 213, 0.28);   /* single solid blue — no gradient */
    transition: width 0.5s var(--ease);
}

/* Per-category score bar colors — one solid color each */
.score-breakdown-grid > div:nth-child(1) .score-rect-fill { background: rgba(58, 123, 213, 0.32); }   /* Fundamental — blue   */
.score-breakdown-grid > div:nth-child(2) .score-rect-fill { background: rgba(29, 184, 168, 0.32); }   /* Technical   — teal   */
.score-breakdown-grid > div:nth-child(3) .score-rect-fill { background: rgba(232, 98, 26, 0.32); }    /* Momentum    — orange */
.score-breakdown-grid > div:nth-child(4) .score-rect-fill { background: rgba(58, 123, 213, 0.22); }   /* Volume      — dim bl */
.score-breakdown-grid > div:nth-child(5) .score-rect-fill { background: rgba(224, 90, 110, 0.32); }   /* Volatility  — red    */

.score-rect-value {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* ============================================================== */
/* 14. ANALYSIS RESULT INNER PANELS                               */
/* a. White stroke, no fill                                        */
/* ============================================================== */

#analysisResults .bg-gray-800\/50,
#longTermContent .bg-gray-800\/50 {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}

#analysisResults .bg-gray-800\/30,
#analysisResults .bg-gray-800\/50 {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}

/* Sub-section header colors */
.text-blue-400   { color: var(--accent-blue)  !important; }
.text-teal-400   { color: var(--status-up)    !important; }
.text-purple-400 { color: #9b9fdd              !important; }
.text-yellow-500 { color: var(--status-warn)  !important; }

/* ============================================================== */
/* 15. LONG-TERM ANALYSIS (legacy #longTermContent only)          */
/* c. Signal badges — stroke only, no fill                        */
/* ============================================================== */

#longTermContent { animation: fadeIn 0.5s var(--ease); }

#longTermContent .lt-signal-badge {
    font-family: var(--font-headlines);
    font-weight: 800;
    font-size: 2rem;
    padding: 14px 32px;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: transparent !important;   /* c — no fill */
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#longTermContent .lt-signal-badge.buy  {
    border: 2px solid var(--accent-orange);
    color: var(--accent-orange);
    box-shadow: 0 0 24px rgba(232, 98, 26, 0.2);
}
#longTermContent .lt-signal-badge.hold {
    border: 2px solid var(--status-warn);
    color: var(--status-warn);
    box-shadow: 0 0 24px rgba(224, 184, 74, 0.2);
}
#longTermContent .lt-signal-badge.sell {
    border: 2px solid var(--status-down);
    color: var(--status-down);
    box-shadow: 0 0 24px rgba(240, 82, 106, 0.2);
}
#longTermContent .lt-signal-badge.watch {
    border: 2px solid var(--status-neu);
    color: var(--status-neu);
    box-shadow: 0 0 24px rgba(122, 144, 168, 0.15);
}

/* ============================================================================
   LONG TERM ANALYSIS — Two-Column Layout (#lt-content)
   Top row: [Composite + Risk] above left column | Signal on right (same row)
   ============================================================================ */

.lt-analysis-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.lt-top-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.lt-top-row-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.lt-top-row-right {
    display: flex;
    flex-direction: column;
}

.lt-card {
    background: var(--glass-bg, rgba(18, 18, 20, 0.4));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(var(--glass-blur, 12px));
}

.lt-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.lt-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, var(--text-tertiary));
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lt-card-icon {
    font-size: 0.7rem;
    color: var(--text-dim, var(--text-tertiary));
    cursor: pointer;
}
.lt-card-icon svg { width: 12px; height: 12px; display: block; }

.lt-composite-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
    color: #eab308;
    text-align: center;
    line-height: 1;
    margin-bottom: 8px;
}

.lt-composite-label {
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

.lt-risk-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #eab308;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.lt-risk-position {
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 16px;
}

.lt-warnings {
    text-align: center;
}

.lt-warning-title {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.lt-warning-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    color: var(--accent-red);
}

.lt-bottom-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.lt-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, var(--text-tertiary));
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 16px;
}

.lt-score-breakdown {
    background: var(--glass-bg, rgba(18, 18, 20, 0.4));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(var(--glass-blur, 12px));
}

.lt-factor-row {
    margin-bottom: 20px;
}

.lt-factor-row:last-child {
    margin-bottom: 0;
}

.lt-factor-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 16px;
}

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

.lt-factor-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, var(--text-tertiary));
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lt-factor-icon {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    cursor: pointer;
}
.lt-factor-icon svg { width: 10px; height: 10px; display: block; }

.lt-factor-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    background: transparent;
    border-radius: 6px;
    padding: 0;
}

/* Full-width track; inner .lt-factor-bar width = score % (0–100) */
.lt-factor-bar-track {
    flex: 1;
    min-width: 0;
    height: 8px;
    align-self: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.lt-factor-bar {
    height: 100%;
    max-width: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #eab308, #f59e0b);
    transition: width 0.45s ease;
    box-sizing: border-box;
}

.lt-factor-bar.positive {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.lt-factor-bar.negative {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.lt-factor-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 32px;
    text-align: right;
}

.lt-factor-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 28px;
}

.lt-pill {
    font-family: 'Barlow', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lt-pill.positive {
    color: var(--accent-green);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.1);
}

.lt-pill.warning {
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.3);
    background: rgba(234, 179, 8, 0.1);
}

.lt-pill.negative {
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.lt-pill .ai-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--accent-blue);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
}

.lt-position-management {
    background: var(--glass-bg, rgba(18, 18, 20, 0.4));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(var(--glass-blur, 12px));
    display: flex;
    flex-direction: column;
}

.lt-setup-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    text-align: center;
}

.lt-setup-card:last-child {
    margin-bottom: 0;
}

.lt-setup-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.lt-setup-title {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, var(--text-tertiary));
}

.lt-setup-icon {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    cursor: pointer;
}
.lt-setup-icon svg { width: 10px; height: 10px; display: block; }

.lt-setup-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.lt-setup-value.positive { color: var(--accent-green); }
.lt-setup-value.negative { color: var(--accent-red); }
.lt-setup-value.entry { color: var(--accent-blue); }

.lt-setup-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.lt-setup-sub.positive { color: var(--accent-green); }
.lt-setup-sub.negative { color: var(--accent-red); }

.lt-signal-card {
    background: rgba(255, 255, 255, 0.03);
}

/* Signal section: centered under headline, colored text only (no pill background) */
#lt-content .lt-top-row-right {
    align-items: center;
    width: 100%;
}

#lt-content .lt-signal-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

#lt-content .lt-signal-card .lt-setup-header {
    justify-content: center;
}

#lt-content .lt-signal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    margin-bottom: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#lt-content .lt-signal-badge.buy,
#lt-content .lt-signal-badge.buy .lt-signal-icon,
#lt-content .lt-signal-badge.buy .lt-signal-text { color: var(--accent-green); }
#lt-content .lt-signal-badge.sell,
#lt-content .lt-signal-badge.sell .lt-signal-icon,
#lt-content .lt-signal-badge.sell .lt-signal-text { color: var(--accent-red); }
#lt-content .lt-signal-badge.hold,
#lt-content .lt-signal-badge.hold .lt-signal-icon,
#lt-content .lt-signal-badge.hold .lt-signal-text { color: #eab308; }
#lt-content .lt-signal-badge.watch,
#lt-content .lt-signal-badge.watch .lt-signal-icon,
#lt-content .lt-signal-badge.watch .lt-signal-text { color: #f97316; }

.lt-signal-icon { font-size: 1rem; }
.lt-signal-text { font-family: inherit; }

#lt-content .lt-signal-card .lt-signal-confidence {
    text-align: center;
    width: 100%;
}

.lt-signal-confidence {
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ============================================
   LONG TERM — MINIMAL LINE-BASED STYLE (no glass)
   ============================================ */

/* Composite Score & Risk Category — match Signal card text size, reduce height 15% */
#lt-content .lt-top-row-left .lt-card {
    padding: 12px;
    border-radius: 10px;
}

#lt-content .lt-top-row-left .lt-card .lt-card-header {
    margin-bottom: 8px;
    gap: 6px;
}

#lt-content .lt-top-row-left .lt-card .lt-card-title {
    font-size: 0.6rem;
}

#lt-content .lt-top-row-left .lt-card .lt-card-icon svg {
    width: 9px;
    height: 9px;
}

#lt-content .lt-top-row-left .lt-card .lt-composite-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

#lt-content .lt-top-row-left .lt-card .lt-composite-label {
    font-size: 0.8rem;
}

#lt-content .lt-top-row-left .lt-card .lt-risk-value {
    font-size: 1.1rem;
    margin-bottom: 2px;
}

#lt-content .lt-top-row-left .lt-card .lt-risk-position {
    font-size: 0.8rem;
    margin-bottom: 8px;
}

#lt-content .lt-top-row-left .lt-card .lt-warning-title {
    font-size: 0.55rem;
    margin-bottom: 4px;
}

#lt-content .lt-top-row-left .lt-card .lt-warning-text {
    font-size: 0.65rem;
}

#lt-content .lt-summary-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 20px;
}

#lt-content .lt-warning-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    margin: 12px 0;
}

#lt-content .lt-warning-bar .lt-warning-icon {
    font-size: 0.85rem;
    color: #fbbf24;
}

#lt-content .lt-warning-bar .lt-warning-text,
#lt-content .lt-warnings-container .lt-warning-text {
    font-size: 0.8rem;
    color: #fbbf24;
    opacity: 0.9;
}

#lt-content .lt-warnings-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    margin-top: 8px;
}

#lt-content .lt-warnings-container .lt-warning-title {
    display: none;
}

#lt-content .lt-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
}

#lt-content .lt-panel-header,
#lt-content .lt-section-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Factor panel — no glass */
#lt-content .lt-factors-panel,
#lt-content .lt-score-breakdown {
    background: transparent;
    border: none;
    padding: 0;
    backdrop-filter: none;
}

#lt-content .lt-score-breakdown .lt-section-title,
#lt-content .lt-position-management .lt-section-title {
    padding-bottom: 8px;
}

/* Factor rows — tighter spacing so volatility pills align with Target on right */
#lt-content .lt-factor-row {
    padding: 8px 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#lt-content .lt-factor-row:last-child {
    border-bottom: none;
}

#lt-content .lt-factor-card {
    background: transparent;
    border: none;
    padding: 0;
}

#lt-content .lt-factor-list .lt-factor-row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#lt-content .lt-factor-list .lt-factor-row:last-child {
    border-bottom: none;
}

#lt-content .lt-factor-header {
    margin-bottom: 4px;
}

#lt-content .lt-factor-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

#lt-content .lt-factor-name .info-tooltip-trigger {
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s;
}

#lt-content .lt-factor-name .info-tooltip-trigger:hover {
    opacity: 1;
}

#lt-content .lt-factor-score {
    font-size: 1.1rem;
}

/* Progress bar — track full width, fill length = score % */
#lt-content .lt-factor-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    margin-bottom: 4px;
    padding: 0;
    background: transparent;
}

#lt-content .lt-factor-bar-track {
    flex: 1;
    min-width: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

#lt-content .lt-factor-bar-container .lt-factor-bar {
    display: block;
    height: 100%;
    min-height: 6px;
    width: 0%;
    max-width: 100%;
    border-radius: 2px;
    transition: width 0.45s ease;
}

#lt-content .lt-factor-bar-container .lt-factor-score {
    flex-shrink: 0;
}

#lt-content .lt-factor-list .lt-factor-bar-container {
    min-height: 24px;
}

#lt-content .lt-factor-list .lt-factor-bar-container .lt-factor-bar-track {
    height: 6px;
}

#lt-content .lt-factor-list .lt-factor-bar-container .lt-factor-bar {
    height: 100%;
    min-height: 6px;
}

#lt-content .lt-bar-green,
#lt-content .lt-factor-bar.positive {
    background: linear-gradient(90deg, #10b981, #34d399);
}

#lt-content .lt-bar-yellow {
    background: linear-gradient(90deg, #eab308, #fbbf24);
}

#lt-content .lt-bar-red,
#lt-content .lt-factor-bar.negative {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Pills — text only, no box; tighter so breakdown bottom aligns with Target */
#lt-content .lt-factor-tags,
#lt-content .lt-factor-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 16px;
    margin-top: 4px;
}

#lt-content .lt-factor-tags .lt-pill,
#lt-content .lt-factor-pills .lt-pill,
#lt-content .lt-tag,
#lt-content .lt-pill,
#lt-content .score-tag-pill {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: 'Barlow', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    transition: opacity 0.2s;
}

#lt-content .lt-pill:hover,
#lt-content .score-tag-pill:hover {
    opacity: 0.7;
}

#lt-content .lt-factor-tags .lt-pill.positive,
#lt-content .lt-pill.positive,
#lt-content .score-tag-pill.bg-green-900\/50 {
    color: #6ee7b7 !important;
    background: transparent !important;
    border: none !important;
}

#lt-content .lt-factor-tags .lt-pill.negative,
#lt-content .lt-factor-tags .lt-pill.warning,
#lt-content .lt-pill.negative,
#lt-content .lt-pill.warning,
#lt-content .score-tag-pill.bg-red-900\/50 {
    color: #fca5a5 !important;
    background: transparent !important;
    border: none !important;
}

#lt-content .lt-pill.warning {
    color: #94a3b8 !important;
}

#lt-content .lt-pill .info-tooltip-trigger,
#lt-content .score-tag-pill .info-tooltip-trigger {
    opacity: 0.5;
}

#lt-content .lt-pill:hover .info-tooltip-trigger,
#lt-content .score-tag-pill:hover .info-tooltip-trigger {
    opacity: 1;
}

/* Position panel — no glass, line divider */
#lt-content .lt-position-panel,
#lt-content .lt-position-management {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 0 0 24px;
    backdrop-filter: none;
}

#lt-content .lt-position-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#lt-content .lt-position-card,
#lt-content .lt-setup-card {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 10px 0;
    margin-bottom: 0;
    text-align: left;
}

#lt-content .lt-position-card:last-child,
#lt-content .lt-setup-card:last-child {
    border-bottom: none;
}

#lt-content .lt-position-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#lt-content .lt-setup-header {
    margin-bottom: 6px;
}

#lt-content .lt-setup-header .lt-setup-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Position Management — left-aligned labels + semantic value colors */
#lt-content .lt-position-management .lt-setup-header {
    justify-content: flex-start;
    text-align: left;
}

#lt-content .lt-position-management .lt-setup-card {
    text-align: left;
}

#lt-content .lt-position-management .lt-setup-value,
#lt-content .lt-position-management .lt-setup-sub {
    text-align: left;
}

#lt-content #lt-current-price {
    color: var(--text-primary) !important;
}

#lt-content #lt-entry-zone {
    color: #60a5fa !important;
}

#lt-content #lt-stop-loss {
    color: #f87171 !important;
}

#lt-content #lt-stop-loss-pct {
    color: #fca5a5 !important;
}

#lt-content #lt-target {
    color: #34d399 !important;
}

#lt-content #lt-target-pct {
    color: #6ee7b7 !important;
}

#lt-content #lt-position-size,
#lt-content #lt-shares {
    color: var(--text-muted, var(--text-tertiary)) !important;
}

#lt-content .lt-position-label .info-tooltip-trigger,
#lt-content .lt-setup-header .info-tooltip-trigger {
    opacity: 0.4;
}

#lt-content .lt-position-label:hover .info-tooltip-trigger {
    opacity: 1;
}

#lt-content .lt-position-value,
#lt-content .lt-setup-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

#lt-content .lt-value-blue {
    color: #60a5fa;
}

#lt-content .lt-value-green {
    color: #34d399;
}

#lt-content .lt-position-sub,
#lt-content .lt-setup-sub,
#lt-content .lt-position-delta {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

#lt-content .lt-delta-positive {
    color: #6ee7b7;
}

#lt-content .lt-delta-negative {
    color: #fca5a5;
}

@media (max-width: 900px) {
    .lt-bottom-section { grid-template-columns: 1fr; }
    .lt-top-row { grid-template-columns: 1fr; }
    .lt-top-row-left { grid-template-columns: 1fr; }
    .lt-summary-row { grid-template-columns: 1fr; }
    .lt-main-grid { grid-template-columns: 1fr; }
    #lt-content .lt-position-panel,
    #lt-content .lt-position-management {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 24px 0 0;
        margin-top: 16px;
    }
}

/* ── Pill AI badge icon ──────────────────────────────────────────────────── */
.pill-ai-icon {
    font-family: var(--font-headlines);
    font-size: 0.46rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(58, 123, 213, 0.6);
    border-radius: 3px;
    padding: 1px 4px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 5px;
    vertical-align: middle;
    pointer-events: none;  /* click goes to pill, not badge */
}

/* Pill hover — subtle brighten */
.score-tag-pill:hover {
    opacity: 0.85;
    border-color: rgba(255,255,255,0.35) !important;
    transition: opacity 0.15s, border-color 0.15s;
}
#lt-content .bg-gray-900\/50,
#lt-content [class*="bg-gray-900"] {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}
#lt-content .bg-gray-800\/70,
#lt-content [class*="bg-gray-800"] {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}
/* Explicit override for position-management grid cells */
#lt-content .border-gray-600,
#lt-content .border-gray-700 {
    border-color: rgba(255,255,255,0.22) !important;
}

/* ── Signal badge: strip Tailwind bg classes injected by JS ──────────── */
/* JS injects: bg-blue-600 | bg-green-600 | bg-yellow-600 | bg-red-600 | bg-gray-600 */
#lt-content .bg-blue-600,
#lt-content .bg-green-600,
#lt-content .bg-yellow-600,
#lt-content .bg-red-600,
#lt-content .bg-gray-600 {
    background: transparent !important;
    border: 1.5px solid currentColor !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}
/* Color each signal type via text color (border inherits currentColor) */
#lt-content .bg-blue-600   { color: #6fa3ef !important; }
#lt-content .bg-green-600  { color: var(--accent-orange) !important; }
#lt-content .bg-yellow-600 { color: var(--status-warn) !important; }
#lt-content .bg-red-600    { color: var(--status-down) !important; }
#lt-content .bg-gray-600   { color: var(--text-secondary) !important; }

/* Long-term sub-parameter boxes — c. stroke with gapped fill */
#longTermContent .metric-box,
#lt-content .metric-box {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
}

/* Long-term colored status boxes (risk category, warnings etc) */
#longTermContent .bg-gray-900\/50,
#lt-content .bg-gray-900\/50 {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
}

/* ============================================================== */
/* 16. TECH ANALYSIS CARDS                                        */
/* ============================================================== */

.tech-hybrid-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;   /* wider right col for radar */
    gap: 20px;
    align-items: stretch;               /* equal height columns */
}
@media (max-width: 768px) { .tech-hybrid-grid { grid-template-columns: 1fr; } }

.tech-data-cards   { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.tech-radar-column { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; height: 100%; }

/* radar-chart-wrapper: fill the remaining height, make canvas fill it */
.radar-chart-wrapper {
    width: 100%;
    flex: 1;
    min-height: 320px;
}

.tech-data-card {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: border-color var(--dur-fast);
}

.tech-data-card:hover { border-color: var(--border-bright); }

.tech-card-centered { text-align: center; }

.tech-card-label-centered {
    font-family: var(--font-headlines);
    font-size: 0.56rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.tech-card-value-main {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-heading);
    letter-spacing: -0.02em;
}

.tech-card-value-main.bullish { color: var(--accent-orange); }
.tech-card-value-main.bearish { color: var(--status-down); }
.tech-card-value-main.neutral { color: var(--status-neu); }

.tech-card-context {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-tertiary);
    margin-top: 3px;
}

.tech-card-context.bullish { color: var(--accent-orange); }
.tech-card-context.bearish { color: var(--status-down); }

/* S/R Pills */
.tech-support-resistance-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.sr-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-weight: 400;
    background: transparent;
}

.sr-support    { border: 1px solid var(--status-up-border);   color: var(--status-up);   }
.sr-resistance { border: 1px solid var(--status-down-border); color: var(--status-down); }

/* Price Action Banner — label on top, value under it, left-aligned */
.price-action-banner {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 0;
    gap: 4px;
}

.pa-label {
    font-family: var(--font-headlines);
    font-size: 0.58rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    white-space: nowrap;
    margin-bottom: 0;
}

.pa-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--text-heading);
    line-height: 1.25;
    text-align: left;
}

/* Price Hero Box */
.price-hero-box {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.price-hero-lbl {
    font-family: var(--font-headlines);
    font-size: 0.58rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.price-hero-val {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-heading);
    letter-spacing: -0.02em;
}

.radar-chart-wrapper { width: 100%; max-width: 504px; min-height: 384px; }

/* Technical Analysis section — 40% height reduction, all elements scaled proportionally */
.tech-analysis-section {
    padding: 11px 14px;
}

.tech-analysis-section .tech-analysis-section-title {
    font-family: var(--font-headlines);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-blue);
    text-align: center;
    margin-bottom: 10px;
}

.tech-analysis-section .tech-hybrid-grid {
    gap: 12px;
}

.tech-analysis-section .tech-data-cards {
    gap: 7px;
}

.tech-analysis-section .tech-data-card {
    padding: 8px 10px;
}

.tech-analysis-section .tech-card-label-centered {
    font-size: 0.45rem;
    margin-bottom: 4px;
}

.tech-analysis-section .tech-card-value-main {
    font-size: 0.95rem;
}

.tech-analysis-section .tech-card-context {
    font-size: 0.52rem;
    margin-top: 2px;
}

.tech-analysis-section .tech-card-icon-centered {
    transform: scale(0.65);
}

.tech-analysis-section .tech-support-resistance-row {
    margin-top: 6px;
    gap: 6px;
}

.tech-analysis-section .sr-pill {
    padding: 4px 10px;
    font-size: 0.6rem;
}

.tech-analysis-section .tech-radar-column {
    gap: 8px;
}

.tech-analysis-section .price-action-banner,
.tech-analysis-section .price-hero-box {
    padding: 8px 12px;
    min-height: 0;
    margin-bottom: 6px;
    gap: 2px;
}

.tech-analysis-section .pa-label,
.tech-analysis-section .price-hero-lbl {
    font-size: 0.46rem;
    margin-bottom: 2px;
}

.tech-analysis-section .pa-value,
.tech-analysis-section .price-hero-val {
    font-size: 1rem;
    text-align: left;
}

/* Radar chart 20% larger (within same card): 192*1.2≈230, 252*1.2≈302 */
.tech-analysis-section .radar-chart-wrapper {
    min-height: 230px;
    max-width: 302px;
}

/* ============================================================== */
/* 17a. STAKE INPUT + AMOUNT LINES                                */
/* ============================================================== */

.stake-input {
    background-color: rgba(8, 8, 14, 0.98);
    border: 1px solid var(--border-default);
    color: var(--text-heading);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    width: 110px;
}

.stake-input::placeholder {
    color: var(--text-tertiary);
}

.stake-hint {
    font-family: var(--font-text);
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

.stake-warning {
    font-family: var(--font-text);
    font-size: 0.7rem;
    color: var(--status-warn);
}

.stake-amount-separator {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 6px;
    padding-top: 4px;
}

.stake-amount-text {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.stake-amount-profit {
    color: var(--status-up);
}

.stake-amount-loss {
    color: var(--status-down);
}

/* ============================================================== */
/* 17. UTILITIES                                                   */
/* ============================================================== */

/* text-pos → orange (momentum/bullish energy) */
.text-pos { color: var(--accent-orange) !important; }
.text-neg { color: var(--status-down)   !important; }
.text-neu { color: var(--status-neu)    !important; }

/* Chart */
.chart-wrapper {
    background: rgba(4,4,7,0.9);
    border-top: 1px solid var(--border-subtle);
}

/* History table */
#historyContainer table { font-family: var(--font-mono); font-size: 0.78rem; }
#historyContainer td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

/* ── Disclaimer — d. italic, smaller, lighter ────────────────── */
.dashboard-disclaimer {
    text-align: left;
    padding: 20px 4px 12px;
    font-family: var(--font-text);
    font-size: 0.68rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
    line-height: 1.7;
    border-top: 1px solid var(--border-subtle);
}

/* ============================================================== */
/* 18. LAYOUT HELPERS — preserved, used by JS                     */
/* ============================================================== */

.equal-height-row { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
@media (min-width: 768px) { .equal-height-row { grid-template-columns: repeat(3, 1fr); } }

.vertical-stack { display: flex; flex-direction: column; gap: 8px; height: 100%; }

.trade-setup-container-v2 { display: flex; gap: 20px; width: 100%; }
.setup-column    { flex: 0 0 50%; display: flex; flex-direction: column; gap: 10px; }
.right-column-v2 { flex: 0 0 50%; display: flex; flex-direction: column; gap: 15px; }
.context-row     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

@media (max-width: 1024px) {
    .trade-setup-container-v2 { flex-direction: column; }
    .setup-column, .right-column-v2 { flex: none; width: 100%; }
}

.score-breakdown-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 768px) { .score-breakdown-grid { grid-template-columns: repeat(2, 1fr); } }

.st-three-col-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 768px) { .st-three-col-row { grid-template-columns: 1fr; } }

/* ============================================
   SHORT TERM ANALYSIS — COMPLETE REDESIGN
   3-Column Layout with Refined Typography
   ============================================ */

.st-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    width: 100%;
    align-items: stretch;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.st-column {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.st-column:last-child { border-right: none; }

.st-column-header {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

.st-column-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    gap: 0;
}

.st-row {
    padding: 12px 0 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
    position: relative;
    transition: background 0.2s ease;
}

.st-row:last-child { border-bottom: none; }

.st-row:hover { background: rgba(255, 255, 255, 0.02); }

.st-row-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-row-label::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.st-row-entry .st-row-label::before,
.st-row-target .st-row-label::before {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.st-row-exit .st-row-label::before,
.st-row-stop .st-row-label::before {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

.st-row-warning .st-row-label::before {
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

.st-row-entry::before,
.st-row-exit::before,
.st-row-stop::before,
.st-row-target::before,
.st-row-warning::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 65%;
    border-radius: 1px;
}

.st-row-entry::before,
.st-row-target::before { background: #34d399; }

.st-row-exit::before,
.st-row-stop::before { background: #f87171; }

.st-row-warning::before { background: #fbbf24; }

.st-row-warning {
    background: rgba(251, 191, 36, 0.03);
    border-radius: 0 4px 4px 0;
}

.st-row-value {
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    transition: color 0.2s ease;
}

.st-row:hover .st-row-value { color: rgba(255, 255, 255, 0.9); }

.st-row-exit .st-row-value {
    color: #f87171;
    text-shadow: 0 0 20px rgba(248, 113, 113, 0.25);
}

/* Execution column only: colored headlines, all value text same white */
.st-column:first-child .st-row-entry .st-row-label { color: #34d399; }
.st-column:first-child .st-row-exit .st-row-label { color: #f87171; }
.st-column:first-child .st-row-warning .st-row-label { color: #fbbf24; }
.st-column:first-child .st-row-value,
.st-column:first-child .st-row-exit .st-row-value,
.st-column:first-child .st-value-warning,
.st-column:first-child .st-flag {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: none;
}

.st-column-trade-setup .st-row-value {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.st-column-trade-setup #entry-zone,
.st-column-trade-setup #target-zone,
.st-column-trade-setup #stop-loss-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
}

.st-row-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    letter-spacing: 0.01em;
}

.st-value-green {
    color: #34d399 !important;
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.3);
}

.st-sub-green { color: #6ee7b7 !important; }

.st-value-red {
    color: #f87171 !important;
    text-shadow: 0 0 20px rgba(248, 113, 113, 0.25);
}

.st-sub-red { color: #fca5a5 !important; }

.st-value-muted { color: rgba(255, 255, 255, 0.5) !important; }

.st-value-warning {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-flag {
    font-size: 13px;
    font-weight: 300;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.st-flag-ok {
    font-size: 13px;
    font-weight: 300;
    color: #6ee7b7;
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-grade-section {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.st-grade-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.st-grade-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
    padding-bottom: 2px;
}

.st-grade-circle.grade-a {
    border-color: #22c55e;
    color: #22c55e;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3), inset 0 0 20px rgba(34, 197, 94, 0.1);
}

.st-grade-circle.grade-b {
    border-color: #84cc16;
    color: #84cc16;
    box-shadow: 0 0 30px rgba(132, 204, 22, 0.3), inset 0 0 20px rgba(132, 204, 22, 0.1);
}

.st-grade-circle.grade-c {
    border-color: #f59e0b;
    color: #f59e0b;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3), inset 0 0 20px rgba(245, 158, 11, 0.1);
}

.st-grade-circle.grade-d {
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.3), inset 0 0 20px rgba(239, 68, 68, 0.1);
}

.st-grade-circle.grade-f {
    border-color: #dc2626;
    color: #dc2626;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.3), inset 0 0 20px rgba(220, 38, 38, 0.1);
}

.st-grade-status {
    font-size: 12px;
    font-weight: 400;
    color: #34d399;
    margin-bottom: 12px;
}

.st-grade-button {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 4px;
    color: #34d399;
    cursor: pointer;
    transition: all 0.25s ease;
}

.st-grade-button:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: #34d399;
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.2);
}

.st-disclaimer {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    padding: 14px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-style: italic;
}

@media (max-width: 900px) {
    .st-results-grid { grid-template-columns: 1fr; }
    .st-column {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 16px;
    }
    .st-column:last-child { border-bottom: none; }
    .st-grade-section { margin-top: 16px; }
}

/* ============================================================== */
/* 19. LOADING STATES                                             */
/* ============================================================== */

#tradeAnalysisLoading,
#longTermLoading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px;
    color: var(--text-tertiary);
    font-family: var(--font-headlines);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#tradeAnalysisLoading.hidden,
#longTermLoading.hidden { display: none !important; }

.animate-spin {
    border-color: var(--border-subtle) !important;
    border-top-color: rgba(255,255,255,0.4) !important;
    animation: spin 0.9s linear infinite;
}

/* ============================================================== */
/* 20. TOOLTIPS — CRITICAL FIX: fully visible, reliable           */
/* ============================================================== */

/* Trigger icon — eye icon next to parameters */
.info-tooltip-trigger {
    cursor: help;
    opacity: 0.55;                    /* more visible than v3.1's 0.45 */
    transition: opacity var(--dur-fast), color var(--dur-fast);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 5px;
    flex-shrink: 0;
}

.info-tooltip-trigger:hover { opacity: 1; }

.info-tooltip-trigger svg {
    width: 12px;
    height: 12px;
    stroke: rgba(255,255,255,0.5);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.info-tooltip-trigger:hover svg {
    stroke: rgba(255,255,255,0.9);
}

/* Tooltip card popup */
.info-tooltip-card {
    position: fixed;
    background: rgba(8, 8, 18, 0.98);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 16px 56px rgba(0,0,0,0.9),
                0 0 0 1px rgba(58,123,213,0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 9999;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    max-width: 300px;
    pointer-events: none;
}

.info-tooltip-card h4 {
    font-family: var(--font-headlines);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.info-tooltip-card p {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================================== */
/* 21. ORANGE ACCENT SYSTEM                                       */
/* Orange = live / active / momentum / signal energy              */
/* ============================================================== */

/* ● LIVE badge */
.badge-live {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: var(--accent-orange);
    text-shadow: 0 0 8px var(--accent-orange-glow);
}

/* RVOL value */
#tech-rvol { color: var(--accent-orange) !important; }

/* Score bar colors — handled by per-category nth-child rules above */

/* Grade glow for A/B */
#gradeBadge.grade-a,
#gradeBadge.grade-b {
    filter: drop-shadow(0 0 20px var(--accent-orange));
}

/* ============================================================== */
/* 22. ANIMATIONS                                                  */
/* ============================================================== */

.animate-fade-in { animation: fadeIn 0.5s var(--ease) both; }

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

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

.animate-spin { animation: spin 0.9s linear infinite; }

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.animate-bounce { animation: bounce 1.4s infinite; }
@keyframes bounce {
    0%, 100% { transform: translateY(-20%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* ============================================================== */
/* 23. HISTORY + SPACING                                          */
/* ============================================================== */

#historySection .border-white\/10 { border-color: var(--border-subtle) !important; }
#historySection h3 {
    font-family: var(--font-headlines);
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ── Main app: push content down so header doesn't overlap ──── */
/* a. Observe Market box too high — fixed by increasing top padding */
#main-app {
    padding-top: 100px !important;   /* was 80px — extra 20px clears persistent header */
}

#main-app.opacity-0 { opacity: 0; }

/* ============================================================== */
/* 24. TREND-BOX LABEL: orange                                    */
/* ============================================================== */

.trend-box .quick-metric-label { color: var(--accent-orange) !important; }

/* ============================================================== */
/* 25. EMOJI STRIP — prevent any emoji chars from rendering       */
/* Covers dynamically injected content from JS                    */
/* ============================================================== */

/* Suppress common emoji ranges via font override on data display elements */
.quick-metric-value,
#tech-trend,
#tech-rvol,
#tech-rsi,
#tech-macd,
.lt-signal-badge,
.ai-header-title,
[id^="list-"] .item-label,
[id^="list-"] .item-value {
    font-variant-emoji: text;
}

/* Live Metrics — Trend value colored by sentiment (bullish=green, bearish=red, neutral=white) */
#tech-trend.text-pos { color: var(--status-up) !important; }
#tech-trend.text-neg { color: var(--status-down) !important; }
#tech-trend.text-gray-400 { color: #fff !important; }

/* AI header — plain text, no emoji span wrapper */
.ai-header-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    text-align: center;
}

/* ============================================================== */
/* WARNINGS HEADER — center text, hide emoji ℹ️, eye icon right  */
/* ============================================================== */

/* The div wrapping "⚠️ Warnings" text */
#lt-content .text-yellow-400.uppercase {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: var(--font-headlines) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: var(--status-warn) !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
}

/* Hide the emoji ⚠️ before "Warnings" — rendered as text node, suppress visually */
#lt-content .text-yellow-400.uppercase {
    font-variant-emoji: text;
    unicode-variant: text;
}

/* Warning list item text — proper left-align, readable */
#lt-content ul li {
    font-family: var(--font-text) !important;
    font-size: 0.72rem !important;
    color: var(--status-warn) !important;
    background: transparent !important;
    border: none !important;
    padding: 3px 0 !important;
    gap: 0 !important;
    list-style: none !important;
}

/* Remove default ul indent so items sit centered */
#lt-content ul {
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ============================================================== */
/* UNMATCHED TAGS — keep attached to score-breakdown, flex-wrap   */
/* ============================================================== */

/* The standalone unmatched tags row (outside score-breakdown)    */
#lt-content .flex.flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
}

/* ============================================================== */
/* 28. DRIVER CARDS — 220-char truncation + READ MORE link        */
/* ============================================================== */

.driver-card {
    position: relative;
}

/* READ MORE link — full width, bottom of card */
.driver-read-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 8px;
    padding: 5px 0;
    background: transparent;
    border: 1px solid rgba(58, 123, 213, 0.2);
    border-radius: 4px;
    color: rgba(58, 123, 213, 0.6);
    font-family: var(--font-headlines);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.driver-read-more:hover {
    background: rgba(58, 123, 213, 0.1);
    border-color: rgba(58, 123, 213, 0.5);
    color: var(--accent-blue);
    text-decoration: none;
}

.driver-read-more svg {
    flex-shrink: 0;
    opacity: 0.8;
}
/* ============================================================== */
/* 29. OBSERVE MARKET — 3-col layout, key levels, sectors, spline */
/* ============================================================== */

.ctx-three-col-row {
    display: grid;
    grid-template-columns: 1.3fr 1.2fr 1.2fr;
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .ctx-three-col-row { grid-template-columns: 1fr; }
}

.ctx-sentiment-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.ctx-drivers-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
}

.ctx-key-levels-divider {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 14px 0 10px;
}

.ctx-key-levels-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-bottom: 16px;
}

.ctx-level-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid;
    min-width: 70px;
    flex: 1;
}

.ctx-level-pill.ctx-level-pos {
    background: rgba(32, 212, 194, 0.06);
    border-color: rgba(32, 212, 194, 0.22);
}

.ctx-level-pill.ctx-level-neg {
    background: rgba(232, 98, 26, 0.06);
    border-color: rgba(232, 98, 26, 0.22);
}

.ctx-level-label {
    font-family: var(--font-headlines);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 3px;
    text-align: center;
    white-space: nowrap;
}

.ctx-level-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
}

.ctx-level-pos .ctx-level-value { color: var(--status-up); }
.ctx-level-neg .ctx-level-value { color: var(--accent-orange); }

.ctx-chart-container {
    width: 100%;
    margin-top: 4px;
    flex: 1;
    display: flex;
    align-items: stretch;
}

.ctx-chart-container svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Center column: US sectors list */
.ctx-sectors-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 200px;
}

.ctx-sectors-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.ctx-sector-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(10, 10, 18, 0.96);
    border: 1px solid rgba(255,255,255,0.06);
}

.ctx-sector-name {
    font-family: var(--font-headlines);
    font-size: 0.85rem;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctx-sector-price {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: right;
}

.ctx-sector-change {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-align: right;
}

.ctx-sector-change.pos { color: var(--status-up); }
.ctx-sector-change.neg { color: var(--status-down); }

/* ============================================================== */
/* 30. DRIVERS — 2-column grid (3 rows × 2 cards)                 */
/* ============================================================== */

.drivers-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.drivers-grid-2col .driver-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.drivers-grid-2col .box-value {
    font-size: 0.78rem !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/*
=============================================================================
STYLE.CSS ADDITIONS FOR PHASE 3 (User Experience)
=============================================================================
Add these CSS rules to your existing style.css file.
These styles support the onboarding modal and recent tickers sidebar.
=============================================================================
*/

/* ==========================================================================
   SECTION 1: RECENT TICKERS SIDEBAR
   ========================================================================== */

   .recent-tickers-panel {
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color, #2d2d44);
}

.recent-tickers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #2d2d44);
}

.recent-tickers-header h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #a0a0b0);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recent-tickers-header .icon {
    font-size: 1rem;
}

.recent-tickers-header .btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted, #666);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.recent-tickers-header .btn-icon:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

.recent-tickers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
}

.recent-ticker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--bg-primary, #0f0f1a);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.recent-ticker-item:hover {
    background: var(--bg-hover, #252540);
    border-color: var(--primary, #6366f1);
    transform: translateX(4px);
}

.recent-ticker-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.recent-ticker-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #ffffff);
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.recent-ticker-name {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-ticker-signal {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Signal colors */
.signal-BUY {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.signal-SELL {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.signal-HOLD {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.signal-WATCH {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.signal-SKIP {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}


/* ==========================================================================
   SECTION 2: ONBOARDING MODAL
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

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

.modal-content {
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    border: 1px solid var(--border-color, #2d2d44);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s ease;
}

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

.onboarding-modal {
    padding: 2rem;
}

/* Header */
.onboarding-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.logo-badge {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary, #6366f1), #8b5cf6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.logo-icon {
    font-size: 2rem;
}

.onboarding-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    margin: 0 0 0.5rem;
}

.onboarding-header .subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary, #a0a0b0);
    margin: 0;
}

/* Steps */
.onboarding-steps {
    margin-bottom: 1.5rem;
}

.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary, #0f0f1a);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    position: relative;
    border: 1px solid var(--border-color, #2d2d44);
    transition: all 0.2s ease;
}

.onboarding-step:hover {
    border-color: var(--primary, #6366f1);
    transform: translateX(4px);
}

.step-number {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    background: var(--primary, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.step-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
}

.step-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin: 0 0 0.375rem;
}

.step-content p {
    font-size: 0.8rem;
    color: var(--text-secondary, #a0a0b0);
    margin: 0;
    line-height: 1.5;
}

.step-content code {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary, #6366f1);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
}

/* Features Grid */
.onboarding-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: var(--bg-primary, #0f0f1a);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #a0a0b0);
}

.feature-icon {
    font-size: 1rem;
}

/* Footer */
.onboarding-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dont-show-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    cursor: pointer;
}

.dont-show-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary, #6366f1);
}

/* Close Button */
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-primary, #0f0f1a);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #666);
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger, #ef4444);
}


/* ==========================================================================
   SECTION 3: QUICK START TICKERS
   ========================================================================== */

.quick-start-panel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.quick-start-label {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
}

.quick-ticker-btn {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, #2d2d44);
    color: var(--text-secondary, #a0a0b0);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-ticker-btn:hover {
    background: var(--primary, #6366f1);
    color: white;
    border-color: var(--primary, #6366f1);
}


/* ==========================================================================
   SECTION 4: SYSTEM STATUS BADGE
   ========================================================================== */

.system-status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #22c55e;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

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

/* (profile selector styles removed) */


/* ==========================================================================
   SECTION 5: RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 640px) {
    .onboarding-modal {
        padding: 1.5rem;
    }
    
    .onboarding-header h2 {
        font-size: 1.25rem;
    }
    
    .onboarding-features {
        grid-template-columns: 1fr;
    }
    
    .onboarding-step {
        padding: 0.875rem;
    }
    
    .step-icon {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }
    
    .recent-tickers-panel {
        padding: 0.75rem;
    }
}

/* ============================================================================
   PREMIUM INSTITUTIONAL ONBOARDING — v4.2 (UI Fixes)
   ============================================================================
   Changes from v4.0:
   - Hero headlines positioned higher (40% from top instead of center)
   - Step headlines increased 75%+ in size
   - Each phase occupies full viewport height (isolated pages)
   - Timeline line REMOVED completely
   - Platform capabilities: floating text with hover glow, no boxes
   ============================================================================ */

/* ==========================================================================
   ONBOARDING OVERLAY — Fullscreen dark container
   ========================================================================== */

   .onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #040407;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 20%, rgba(10, 28, 75, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 80%, rgba(232, 98, 26, 0.05) 0%, transparent 60%);
    overflow: hidden;
}

.onboarding-scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.onboarding-scroll-container::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* ==========================================================================
   HERO SECTION — Opening view (POSITIONED HIGHER)
   ========================================================================== */

.onboarding-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Changed from center */
    padding-top: 18vh; /* Position content at ~18% from top */
    text-align: center;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
}

.ob-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.ob-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(4rem, 14vw, 10rem); /* Increased */
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-title-light {
    font-weight: 200;
}

.ob-title-bold {
    font-weight: 800;
}

.ob-subtitle {
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem; /* Slightly increased */
    font-weight: 300;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-top: 2rem;
}

/* Scroll indicator */
.ob-scroll-indicator {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: ob-fade-pulse 3s ease-in-out infinite;
}

.ob-scroll-indicator span {
    font-family: 'Barlow', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.ob-scroll-dot {
    animation: ob-scroll-bounce 2s ease-in-out infinite;
}

@keyframes ob-scroll-bounce {
    0%, 100% { cy: 8; }
    50% { cy: 14; }
}

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

/* ==========================================================================
   TIMELINE SECTION — NO LINE, FULL VIEWPORT PER STEP
   ========================================================================== */

.onboarding-timeline {
    position: relative;
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
}

/* REMOVED: Timeline line completely */
.ob-timeline-line {
    display: none !important;
}

/* Individual step — FULL VIEWPORT HEIGHT, CENTERED */
.ob-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically center content */
    text-align: center;
    min-height: 100vh; /* Each step = full viewport */
    padding: 4rem 2rem;
    margin-bottom: 0; /* No gap between - scroll handles separation */
}

/* Step marker (the numbered node) — Centered above content */
.ob-step-marker {
    position: relative;
    width: 72px; /* Slightly larger */
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    z-index: 2;
}

.ob-step-marker::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(58, 123, 213, 0.4);
    background: rgba(4, 4, 7, 0.95);
}

.ob-step-marker::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(58, 123, 213, 0.15);
}

.ob-step-number {
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem; /* Slightly larger */
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(58, 123, 213, 0.95);
    z-index: 1;
}

/* Step content — 75%+ LARGER TYPOGRAPHY */
.ob-step-content {
    max-width: 800px; /* Wider for larger text */
    padding: 0 1rem;
}

/* ============================================================================
   ONBOARDING — Main Headline (generic selectors)
   ============================================================================ */

.onboarding-headline,
.hero-title,
.lucid-scope-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);  /* smaller single-line headline */
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    white-space: nowrap;
    text-align: center;
}

.onboarding-header,
.hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
}

.ob-step-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem); /* ~75% increase from 1.4rem */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 1.5rem;
}

.ob-step-desc {
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem; /* ~10% larger, still below headline */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

/* ============================================================================
   ONBOARDING — Step Headlines (Light + Bold Keyword)
   ============================================================================ */

.step-headline {
    font-family: 'Barlow', sans-serif;
    font-size: 1.65rem;             /* ~10% larger than previous */
    font-weight: 300;               /* light */
    color: var(--text-primary);
    text-transform: uppercase;      /* ALL CAPS */
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.step-keyword {
    font-weight: 600;               /* bold last word */
    color: var(--text-primary);     /* keep same white color as headline */
}

/* Optional description text under each step */
.step-description {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;                /* smaller than headline */
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Code snippets — scaled up */
.ob-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em; /* Relative to parent */
    color: rgba(58, 123, 213, 0.95);
    background: rgba(58, 123, 213, 0.12);
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    border: 1px solid rgba(58, 123, 213, 0.25);
}

/* Highlighted text */
.ob-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* ==========================================================================
   FEATURES SECTION — FLOATING TEXT, NO BOXES, HOVER GLOW
   ========================================================================== */

.onboarding-features-section {
    min-height: 100vh; /* Full viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.ob-features-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    margin-bottom: 4rem;
}

/* ============================================================================
   ONBOARDING — Feature Cards
   ============================================================================ */

.onboarding-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two columns per row on desktop */
    gap: 24px;
    padding: 2rem 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Feature cards - clean, no borders, minimal look */
.feature-card {
    padding: 20px;
    text-align: center;
    background: transparent;
    border: none;
}

.feature-card:hover {
    /* No visual change on hover (keep minimal) */
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.feature-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.feature-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--accent-blue);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.feature-description {
    font-family: 'Barlow', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .onboarding-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .onboarding-features {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   ONBOARDING STEP DEMOS — Under Headlines at 80% Opacity
   ============================================================================ */

.step-demo {
    margin: 2rem auto 0;
    max-width: 320px;
    width: 100%;
    opacity: 0.8;              /* 80% OPACITY */
}

/* --- STEP 1: Search Demo --- */

.demo-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(18, 18, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
}

.demo-search-icon {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.demo-ticker-cycle {
    position: relative;
    height: 24px;
    flex: 1;
    overflow: hidden;
}

.demo-ticker {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0;
    animation: tickerCycle 8s infinite;
}

.demo-ticker[data-index="0"] { animation-delay: 0s; }
.demo-ticker[data-index="1"] { animation-delay: 2s; }
.demo-ticker[data-index="2"] { animation-delay: 4s; }
.demo-ticker[data-index="3"] { animation-delay: 6s; }

@keyframes tickerCycle {
    0%, 5% { opacity: 0; transform: translateY(10px); }
    10%, 20% { opacity: 1; transform: translateY(0); }
    25%, 100% { opacity: 0; transform: translateY(-10px); }
}

.demo-cursor {
    width: 2px;
    height: 18px;
    background: var(--accent-blue);
    animation: cursorBlink 1s infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.demo-suggestions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    animation: suggestionsAppear 8s infinite;
}

@keyframes suggestionsAppear {
    0%, 10% { opacity: 0; transform: translateY(-5px); }
    15%, 22% { opacity: 1; transform: translateY(0); }
    25%, 100% { opacity: 0; }
}

.demo-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(18, 18, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.demo-suggestion-ticker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    min-width: 70px;
}

.demo-suggestion-name {
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex: 1;
}

.demo-suggestion-exchange {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* --- STEP 2: Horizon Demo --- */

.step-demo-horizon {
    text-align: center;
}

.demo-horizon-selector {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: rgba(18, 18, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    margin-bottom: 12px;
}

.demo-horizon-option {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 8px 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
    z-index: 1;
}

.demo-horizon-option.active {
    color: var(--text-primary);
}

.demo-horizon-slider {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(33.33% - 5px);
    height: calc(100% - 16px);
    background: var(--accent-blue);
    border-radius: 6px;
    opacity: 0.2;
    animation: horizonSlide 6s infinite ease-in-out;
}

@keyframes horizonSlide {
    0%, 20% { left: 8px; }
    35%, 55% { left: calc(33.33% + 4px); }
    70%, 90% { left: calc(66.66%); }
    100% { left: 8px; }
}

.demo-horizon-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    margin-bottom: 16px;
}

.demo-label-left,
.demo-label-right {
    font-family: 'Barlow', sans-serif;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.demo-horizon-output {
    background: rgba(18, 18, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 16px;
}

.demo-output-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.demo-output-label {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.demo-output-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
}

/* --- STEP 3: Intelligence Demo --- */

.demo-intel-card {
    background: rgba(18, 18, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    animation: cardPulse 4s infinite ease-in-out;
}

@keyframes cardPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    50% { box-shadow: 0 0 20px 2px rgba(59, 130, 246, 0.15); }
}

.demo-intel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.demo-intel-ticker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.demo-intel-signal {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 6px;
    animation: signalPulse 2s infinite;
}

.demo-signal-buy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-up);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

@keyframes signalPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.demo-intel-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.demo-score-ring {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 8px;
}

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

.demo-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 8;
}

.demo-ring-fill {
    fill: none;
    stroke: var(--accent-blue);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 62;
    animation: ringFill 3s ease-out infinite;
}

@keyframes ringFill {
    0% { stroke-dashoffset: 283; }
    40%, 100% { stroke-dashoffset: 62; }
}

.demo-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.demo-score-label {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.demo-intel-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.demo-metric {
    text-align: center;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}

.demo-metric-label {
    display: block;
    font-family: 'Barlow', sans-serif;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.demo-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.demo-metric-risk {
    color: var(--status-down);
}

.demo-metric-upside {
    color: var(--status-up);
}

@media (max-width: 768px) {
    .step-demo {
        max-width: 280px;
    }

    .demo-intel-metrics {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ==========================================================================
   CTA SECTION — Final action
   ========================================================================== */

.onboarding-cta {
    min-height: 60vh; /* Shorter, just enough for CTA */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.ob-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 3rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.ob-cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.ob-cta-button:hover::before {
    transform: translateX(100%);
}

.ob-cta-button:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 40px rgba(58, 123, 213, 0.2);
}

.ob-cta-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
}

.ob-cta-arrow {
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease, color 0.3s ease;
    position: relative;
    z-index: 1;
}

.ob-cta-button:hover .ob-cta-arrow {
    transform: translateX(6px);
    color: rgba(255, 255, 255, 0.85);
}

/* Don't show again checkbox */
.ob-dont-show {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2.5rem;
    cursor: pointer;
}

.ob-dont-show input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3a7bd5;
    cursor: pointer;
}

.ob-dont-show span {
    font-family: 'Barlow', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

/* ==========================================================================
   CLOSE BUTTON — Fixed position
   ========================================================================== */

.ob-close-btn {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    z-index: 10001;
}

.ob-close-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   REVEAL ANIMATIONS — Scroll-triggered (with higher threshold)
   ========================================================================== */

.ob-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ob-reveal.ob-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for step elements */
.ob-step .ob-step-marker {
    transition-delay: 0s;
}

.ob-step .ob-step-content {
    transition-delay: 0.15s;
}

/* ==========================================================================
   RESPONSIVE — Mobile adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .onboarding-hero {
        padding-top: 15vh;
    }
    
    .ob-title {
        font-size: clamp(2.8rem, 16vw, 6rem);
    }
    
    .ob-subtitle {
        font-size: 0.85rem;
        letter-spacing: 0.15em;
    }
    
    .ob-step {
        padding: 3rem 1.5rem;
    }
    
    .ob-step-marker {
        width: 56px;
        height: 56px;
    }
    
    .ob-step-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }
    
    .ob-step-desc {
        font-size: clamp(0.95rem, 3.5vw, 1.25rem);
    }
    
    .ob-features-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .ob-feature {
        padding: 1.5rem 1rem;
    }
    
    .ob-cta-button {
        padding: 1rem 2rem;
    }
    
    .ob-close-btn {
        top: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .onboarding-hero {
        padding-top: 12vh;
    }
    
    .ob-step-content {
        padding: 0 0.5rem;
    }
    
    .ob-features-label {
        margin-bottom: 2.5rem;
    }
}

/* ==========================================================================
   OVERRIDE OLD ONBOARDING STYLES (cleanup)
   ========================================================================== */

.modal-overlay.onboarding-overlay {
    backdrop-filter: none;
}

.onboarding-modal,
.modal-content.onboarding-modal {
    display: none !important;
}

/* Hide old onboarding elements if any */
.onboarding-header,
.onboarding-steps .onboarding-step,
.onboarding-features .feature-item,
.onboarding-footer .btn-lg,
.logo-badge,
.step-icon {
    /* These are from old design - hide if present */
}

/* ============================================================================
   ANALYSIS RECORDS TAB + SHORT-TERM 2×3 GRID LAYOUT
   ============================================================================
   Version: 350
   ============================================================================ */

/* ==========================================================================
   SECTION: ANALYSIS RECORDS TAB (Closed State)
   ========================================================================== */

.analysis-records-tab {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

.analysis-records-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(10, 10, 18, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.analysis-records-trigger:hover {
    background: rgba(20, 20, 35, 0.95);
    border-color: rgba(58, 123, 213, 0.4);
}

.analysis-records-trigger .tab-icon {
    width: 14px;
    height: 14px;
    color: rgba(58, 123, 213, 0.8);
}

.analysis-records-trigger .tab-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.analysis-records-trigger .tab-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(58, 123, 213, 0.9);
    background: rgba(58, 123, 213, 0.15);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.analysis-records-trigger .tab-arrow {
    width: 10px;
    height: 10px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.25s ease;
}

.analysis-records-trigger.active .tab-arrow {
    transform: rotate(180deg);
}

/* ==========================================================================
   SECTION: ANALYSIS RECORDS OVERLAY (Open State)
   ========================================================================== */

.analysis-records-overlay {
    display: none;
    position: absolute;
    top: 50px;
    left: 12px;
    z-index: 100;
    min-width: 340px;
    max-width: 720px;
    background: rgba(8, 8, 14, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(58, 123, 213, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}

.analysis-records-overlay.visible {
    display: block;
    animation: recordsSlideIn 0.3s ease;
}

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

.records-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.records-overlay-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.records-overlay-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}

.records-overlay-close:hover {
    background: rgba(240, 82, 106, 0.15);
    border-color: rgba(240, 82, 106, 0.3);
    color: #f0526a;
}

.records-overlay-body {
    padding: 16px;
    max-height: 450px;
    overflow-y: auto;
}

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

.records-grid.single-column {
    grid-template-columns: 1fr;
    max-width: 320px;
}

.records-empty {
    text-align: center;
    padding: 32px 20px;
    color: rgba(255, 255, 255, 0.35);
}

.records-empty-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.records-empty-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
}

/* ==========================================================================
   SECTION: INDIVIDUAL RECORD CARD
   ========================================================================== */

.record-card {
    background: rgba(15, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.record-card:hover {
    background: rgba(20, 20, 35, 0.8);
    border-color: rgba(58, 123, 213, 0.3);
    transform: translateY(-2px);
}

.record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.record-ticker {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ffffff;
}

.record-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(58, 123, 213, 0.15);
    color: rgba(58, 123, 213, 0.9);
}

.record-type.short-term {
    background: rgba(232, 98, 26, 0.15);
    color: rgba(232, 98, 26, 0.9);
}

.record-type.long-term {
    background: rgba(32, 212, 194, 0.15);
    color: rgba(32, 212, 194, 0.9);
}

.record-outputs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.record-output {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

.record-output.signal-buy {
    background: rgba(32, 212, 194, 0.15);
    color: #20d4c2;
}

.record-output.signal-sell {
    background: rgba(240, 82, 106, 0.15);
    color: #f0526a;
}

.record-output.signal-hold {
    background: rgba(224, 184, 74, 0.15);
    color: #e0b84a;
}

.record-output.grade {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
}

.record-output.grade-a { background: rgba(32, 212, 194, 0.2); color: #20d4c2; }
.record-output.grade-b { background: rgba(58, 123, 213, 0.2); color: #5a9cf5; }
.record-output.grade-c { background: rgba(224, 184, 74, 0.2); color: #e0b84a; }
.record-output.grade-d { background: rgba(232, 98, 26, 0.2); color: #e8621a; }
.record-output.grade-f { background: rgba(240, 82, 106, 0.2); color: #f0526a; }

.record-output.risk-high {
    background: rgba(240, 82, 106, 0.15);
    color: #f0526a;
}

.record-output.risk-medium {
    background: rgba(224, 184, 74, 0.15);
    color: #e0b84a;
}

.record-output.risk-low {
    background: rgba(32, 212, 194, 0.15);
    color: #20d4c2;
}

/* Trade setup info in record card */
.record-setup {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.record-setup-item {
    text-align: center;
}

.record-setup-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 2px;
}

.record-setup-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.record-setup-value.text-pos {
    color: #20d4c2;
}

.record-setup-value.text-neg {
    color: #f0526a;
}

.record-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
}

/* ==========================================================================
   SECTION: SHORT-TERM TRADE SETUP - 2×3 GRID LAYOUT
   ========================================================================== */

/* Override the setup-column to use 2×3 grid */
#list-setup {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 10px !important;
}

/* Remove the vertical-stack wrapper styling */
#list-setup .vertical-stack {
    display: contents !important;
}

/* Style the metric-box elements inside setup */
#list-setup .metric-box {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 16px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 80px !important;
}

/* Label styling - smaller */
#list-setup .metric-box .box-label {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 8px !important;
}

/* Value styling - BIGGER & BOLDER */
#list-setup .metric-box .box-value {
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

/* Sub-values (like dollar amounts) */
#list-setup .metric-box .box-sub {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.7rem !important;
    margin-top: 6px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Positive values */
#list-setup .text-pos,
#list-setup .box-sub.text-pos {
    color: #20d4c2 !important;
}

/* Negative values */
#list-setup .text-neg,
#list-setup .box-sub.text-neg {
    color: #f0526a !important;
}

/* ==========================================================================
   SECTION: RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 900px) {
    #list-setup {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
    }
    
    .records-grid {
        grid-template-columns: 1fr;
    }
    
    .analysis-records-overlay {
        left: 8px;
        right: 8px;
        max-width: calc(100% - 16px);
    }
    
    .record-setup {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #list-setup {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    
    .analysis-records-trigger .tab-label {
        display: none;
    }
    
    .record-setup {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar Styling */
.records-overlay-body::-webkit-scrollbar {
    width: 4px;
}

.records-overlay-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.records-overlay-body::-webkit-scrollbar-thumb {
    background: rgba(58, 123, 213, 0.3);
    border-radius: 2px;
}

.records-overlay-body::-webkit-scrollbar-thumb:hover {
    background: rgba(58, 123, 213, 0.5);
}

/* ==========================================================================
   SECTION: ONBOARDING SCROLL FIX
   ========================================================================== */

#onboarding-modal .ob-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#onboarding-modal[style*="display: block"] .ob-reveal,
#onboarding-modal:not([style*="display: none"]) .ob-reveal {
    opacity: 1;
    transform: translateY(0);
}

#onboarding-modal .onboarding-hero { transition-delay: 0.1s; }
#onboarding-modal .ob-step[data-step="01"] { transition-delay: 0.2s; }
#onboarding-modal .ob-step[data-step="02"] { transition-delay: 0.3s; }
#onboarding-modal .ob-step[data-step="03"] { transition-delay: 0.4s; }
#onboarding-modal .onboarding-features-section { transition-delay: 0.5s; }
#onboarding-modal .onboarding-cta { transition-delay: 0.6s; }

/* END ANALYSIS RECORDS + SHORT-TERM 2×3 GRID LAYOUT */

/* ============================================================================
   V3 LAZY-LOADED FUNNEL STYLES
   ============================================================================ */

.v3-funnel-container {
    padding: 20px 24px;
    margin-bottom: 24px;
}

/* --- HERO SECTION --- */
.v3-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 16px;
}

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

.v3-hero-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 1;
}

.v3-sentiment-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.v3-sentiment-badge.bullish {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.v3-sentiment-badge.bullish .sentiment-icon {
    color: #22c55e;
}

.v3-sentiment-badge.bearish {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.v3-sentiment-badge.bearish .sentiment-icon {
    color: #ef4444;
}

.v3-sentiment-badge.neutral {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.2);
    color: #fbbf24;
}

.v3-sentiment-badge.neutral .sentiment-icon {
    color: #eab308;
}

.v3-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Terminal live clock */
.terminal-live {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.terminal-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #52525b;
}
.terminal-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #a1a1aa;
}

/* --- KEY LEVELS --- */
.v3-key-levels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    column-gap: 16px;
    row-gap: 24px;
    /* Align left edge with sector carousel below (after left nav 36px + gap 8px) */
    margin-left: 44px;
}

.key-level-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 2px;
}

.v3-market-row {
    display: grid;
    grid-template-columns: 1.1fr 1.9fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 18px;
}

/* ============================================================================
   MARKET OVERVIEW — Index Cards (Left Side)
   ============================================================================ */

.market-indices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.index-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.index-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.index-name-wrap .index-tooltip-icon {
    display: inline-flex;
    cursor: pointer;
    opacity: 0.5;
    flex-shrink: 0;
}
.index-name-wrap .index-tooltip-icon:hover {
    opacity: 1;
}
.index-name-wrap .index-tooltip-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

.index-name {
    font-family: 'Barlow', sans-serif;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.index-values {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.index-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4rem;  /* 15% smaller than 1.65rem */
    font-weight: 600;
    color: var(--text-primary);
}

.index-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 500;
}

.index-change.positive {
    color: var(--status-up) !important;
}

.index-change.negative {
    color: var(--status-down) !important;
}

/* Index card — only headline (name) colored to match chart; price white; % red/green */
.index-card[data-index="sp500"] .index-name { color: #ff4444; }
.index-card[data-index="qqq"] .index-name { color: #00d4ff; }
.index-card[data-index="vix"] .index-name { color: #00ff88; }
.index-card[data-index="rut2000"] .index-name { color: #c4b5fd; }
.index-card .index-price { color: #fff; }

/* Key Level / Index Card — Unavailable (N/A) state */
.key-level-card.unavailable,
.index-card.unavailable {
    opacity: 0.6;
}

.key-level-na,
.index-price.index-na {
    color: rgba(255, 255, 255, 0.4) !important;
    font-style: italic;
}

.key-level-change.muted,
.index-change.muted {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================================
   MARKET OVERVIEW — Correlation Graph (Fixed Axis Alignment)
   ============================================================================ */

.market-graph-container {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 280px;
    align-items: stretch;
    min-height: 0;
    padding-right: 0;
}

/* Y-Axis — Aligned with chart area */
.graph-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 32px;
    padding-bottom: 20px;  /* Space for X-axis row */
}

.y-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--text-dim);
    text-align: right;
    line-height: 1;
}

/* Main Graph Area */
.graph-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.graph-chart-area {
    flex: 1;
    position: relative;
    min-height: 100px;
}

.correlation-chart {
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: block;
}

/* Grid lines */
.grid-line {
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
}

.zero-line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-dasharray: 4 4;
}

/* Spark lines — thin curved spline, bold neon, minimal glow */
.spark-line {
    fill: none;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spx-line { stroke: #ff4444; filter: drop-shadow(0 0 2px rgba(255, 68, 68, 0.25)); }
.qqq-line { stroke: #00d4ff; filter: drop-shadow(0 0 2px rgba(0, 212, 255, 0.25)); }
.vix-line { stroke: #00ff88; filter: drop-shadow(0 0 2px rgba(0, 255, 136, 0.25)); }

/* X-Axis — Same height as -2% label */
.graph-x-axis {
    display: flex;
    justify-content: space-between;
    height: 20px;
    align-items: center;
    padding-right: 8px;
}

.x-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: var(--text-dim);
}

/* Line Labels (right side, vertically distributed) */
.graph-line-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom: 20px;  /* Align with chart area, not X-axis */
    min-width: 36px;
}

.line-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.spx-label { color: #ff4444; }
.qqq-label { color: #00d4ff; }
.vix-label { color: #00ff88; }

/* Index correlation legend */
.index-legend {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.legend-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #52525b;
}
.legend-items {
    display: flex;
    gap: 16px;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    color: #52525b;
}

/* Sparkline pulse dot in sentiment badge */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.key-level-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 500;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.key-level-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: #e4e4e7;
}

.key-level-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    margin-top: 2px;
}

.key-level-change.positive { color: #4ade80; }
.key-level-change.negative { color: #f87171; }

.key-level-skeleton {
    width: 90px;
    height: 60px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- SECTOR CAROUSEL --- */
.v3-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.carousel-nav {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.carousel-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.v3-sector-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 4px 0;
}

.v3-sector-carousel::-webkit-scrollbar {
    display: none;
}

.sector-card {
    flex: 0 0 calc(25% - 9px);
    min-width: 160px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.sector-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sector-card:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.sector-card:hover::before {
    opacity: 1;
}

.sector-card.selected {
    border-color: rgba(58, 123, 213, 0.5);
    background: rgba(58, 123, 213, 0.1);
}

.sector-card.selected::before {
    opacity: 1;
    background: #3a7bd5;
}

.sector-card-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-card-etf {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 10px;
}

.sector-card-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
}

.sector-card-change.positive { color: #4ade80; }
.sector-card-change.negative { color: #f87171; }

/* Sector card active glow */
.sector-card.active,
.v4-sector-card.active {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(145deg, rgba(30, 58, 95, 0.3) 0%, rgba(15, 23, 42, 0.3) 100%);
    box-shadow: 0 0 30px -10px rgba(59, 130, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sector-card.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 70% 70%, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.sector-sparkline {
    height: 28px;
    width: 100%;
    margin-top: 16px;
}
.sector-sparkline svg {
    width: 100%;
    height: 100%;
}

.sector-expand-label {
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #52525b;
}

.sector-card-skeleton {
    flex: 0 0 calc(25% - 9px);
    min-width: 160px;
    height: 100px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 10px;
}

/* Mobile: 2 cards visible */
@media (max-width: 768px) {
    .sector-card {
        flex: 0 0 calc(50% - 6px);
        min-width: 140px;
    }
    
    .sector-card-skeleton {
        flex: 0 0 calc(50% - 6px);
    }
    
    .v3-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .v3-key-levels {
        width: 100%;
        justify-content: space-between;
    }
    
    .key-level-item {
        flex: 1;
        min-width: 70px;
    }
}

/* --- DRILL-DOWN PANEL --- */
.v3-drilldown {
    margin-top: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(58, 123, 213, 0.2);
    border-radius: 12px;
    animation: drilldownOpen 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top center;
}

@keyframes drilldownOpen {
    0% {
        opacity: 0;
        transform: translateY(-15px) scaleY(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.drilldown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drilldown-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.drilldown-sector-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #3a7bd5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drilldown-subtitle {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.drilldown-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.drilldown-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.drilldown-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .drilldown-content {
        grid-template-columns: 1fr;
    }
}

/* --- MOVERS LIST --- */
.drilldown-movers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mover-row:hover {
    background: rgba(58, 123, 213, 0.1);
    border-color: rgba(58, 123, 213, 0.2);
}

.mover-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mover-ticker {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    min-width: 55px;
}

.mover-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.mover-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.mover-change.positive {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.mover-change.negative {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.mover-skeleton {
    height: 44px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

/* --- Movers Group Labels --- */
.movers-group-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 0 4px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.movers-group-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.movers-group-label.gainers {
    color: rgba(16, 185, 129, 0.7);
}

.movers-group-label.losers {
    color: rgba(239, 68, 68, 0.7);
}

/* ============================================================================
   MOVER ROW — Left-aligned ticker/company, right-aligned price/change
   ============================================================================ */

.mover-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(18, 18, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mover-row:hover {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.08);
}

.mover-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.mover-ticker-headline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-align: left;
}

.mover-company-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.mover-data {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.mover-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.mover-change-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mover-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

.mover-badge.positive {
    color: var(--status-up);
    background: rgba(16, 185, 129, 0.12);
}

.mover-badge.negative {
    color: var(--status-down);
    background: rgba(239, 68, 68, 0.12);
}

.mover-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* --- Movers Group Labels --- */
.movers-group-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 0 4px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.movers-group-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.movers-group-label.gainers {
    color: rgba(16, 185, 129, 0.7);
}

.movers-group-label.losers {
    color: rgba(239, 68, 68, 0.7);
}

/* --- AI NEWS SECTION --- */
.drilldown-news {
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

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

.news-title {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.news-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    padding: 2px 6px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-radius: 4px;
    text-transform: uppercase;
}

.news-badge.disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
}

.news-badge.loading {
    background: rgba(234, 179, 8, 0.2);
    color: #fbbf24;
}

.news-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-item {
    font-family: 'Barlow', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item .news-sentiment {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.news-sentiment.bullish { background: #22c55e; }
.news-sentiment.bearish { background: #ef4444; }
.news-sentiment.neutral { background: #eab308; }

.news-disabled {
    text-align: center;
    padding: 16px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.news-skeleton {
    height: 20px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Intel / Sector Intelligence panel offline state */
.intel-panel {
    background: rgba(18, 18, 20, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.intel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.intel-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.intel-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    color: #3b82f6;
}
.intel-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a1a1aa;
}

.intel-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.intel-status-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: #52525b;
}
.intel-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    background: rgba(24, 24, 27, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.8);
    border-radius: 4px;
    color: #52525b;
}

.intel-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    min-height: 280px;
}

.intel-grid-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.03;
    pointer-events: none;
}

.intel-orb {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
}
.orb-outer {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(63, 63, 70, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.orb-inner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2.5s infinite ease-in-out;
}
.orb-core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    box-shadow: 0 0 20px 4px rgba(59, 130, 246, 0.4);
}

.intel-message {
    position: relative;
    z-index: 1;
    text-align: center;
}
.intel-msg-primary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #52525b;
    margin-bottom: 6px;
}
.intel-msg-secondary {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #3f3f46;
}

.intel-connect-btn {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #52525b;
    cursor: pointer;
    transition: all 0.25s ease;
}
.intel-connect-btn:hover {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.4);
}

.intel-logs {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #27272a;
    line-height: 1.6;
}

/* END V3 LAZY-LOADED FUNNEL STYLES */
/* (Old Observe Market styles removed in favor of V3 Funnel) */