/* =====================================================================
   W-SCANNER AGENT - DESIGN SYSTEM v2.0
   Modern, responsive UI. Mobile-first with collapsible sidebar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
    /* Surfaces */
    --bg-darker: #05070c;
    --bg-dark: #090d16;
    --bg-secondary: #0f1421;
    --bg-card: rgba(17, 23, 38, 0.72);
    --bg-card-hover: rgba(24, 32, 53, 0.9);
    --bg-input: rgba(255, 255, 255, 0.035);
    --bg-widget: rgba(255, 255, 255, 0.025);
    --bg-badge: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.03);
    --bg-hover-row: rgba(255, 255, 255, 0.02);
    --bg-tooltip: #1c2438;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-active: rgba(99, 102, 241, 0.45);
    --border-table: rgba(255, 255, 255, 0.04);

    /* Brand colors */
    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-glow: rgba(99, 102, 241, 0.15);
    --color-emerald: #10b981;
    --color-emerald-hover: #059669;
    --color-emerald-glow: rgba(16, 185, 129, 0.12);
    --color-crimson: #ef4444;
    --color-crimson-glow: rgba(239, 68, 68, 0.12);
    --color-rose: #f43f5e;
    --color-amber: #f59e0b;
    --color-indigo: #818cf8;
    --color-blue: #3b82f6;
    --color-purple: #a855f7;
    --accent-green: #10b981;
    --accent-indigo: #818cf8;
    --accent-purple: #a855f7;

    /* Text */
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-emerald: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-accent: linear-gradient(90deg, #6366f1, #a855f7);

    /* Layout */
    --sidebar-w: 256px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 72px;

    /* Radii */
    --r-xl: 18px;
    --r-lg: 14px;
    --r-md: 10px;
    --r-sm: 7px;
    --border-radius-lg: 14px;
    --border-radius-md: 10px;
    --border-radius-sm: 7px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.4);

    /* Motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-speed: 0.22s;

    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(circle at 82% 12%, rgba(99, 102, 241, 0.07) 0%, transparent 42%),
        radial-gradient(circle at 8% 88%, rgba(16, 185, 129, 0.04) 0%, transparent 38%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5;
}

body.no-scroll {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

a { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------------
   3. APP LAYOUT
   --------------------------------------------------------------------- */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   4. SIDEBAR
   --------------------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    background-color: var(--bg-darker);
    border-right: 1px solid var(--border-color);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width var(--transition-speed) var(--ease), transform var(--transition-speed) var(--ease);
    z-index: 60;
    overflow: visible;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding: 0 6px;
    min-height: 40px;
    position: relative;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-brand);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-primary);
    white-space: nowrap;
    transition: opacity var(--transition-speed) var(--ease);
}

.logo-text span {
    font-weight: 400;
    color: var(--text-secondary);
}

/* Sidebar collapse toggle button — pinned on the sidebar's right border */
.btn-sidebar-toggle {
    position: absolute;
    right: -14px;
    top: 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 70;
    transition: background var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                right var(--transition-speed) var(--ease);
    font-size: 0.78rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.btn-sidebar-toggle:hover {
    color: var(--text-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-glow);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

.btn-sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.btn-sidebar-close:hover { color: var(--text-primary); }

/* ---------------------------------------------------------------------
   5. NAVIGATION
   --------------------------------------------------------------------- */
.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -4px;
    padding: 0 4px;
}
.nav-menu::-webkit-scrollbar { width: 4px; }

.nav-search-wrap {
    position: relative;
    margin: 2px 4px 6px;
    flex-shrink: 0;
}
.nav-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: var(--text-muted);
    pointer-events: none;
}
.nav-search-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 8px 10px 8px 30px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    outline: none;
}
.nav-search-input:focus { border-color: var(--color-primary); }
.nav-search-empty {
    flex-shrink: 0;
    padding: 6px 12px 10px;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}
/* Marks where a section's specialist/legacy tools start, below its current front-door
   items (e.g. Agents & System: Decisions/Portfolio/Control Room, then this divider,
   then Agent Control/Trade Agent/etc). Non-interactive — not a .nav-item, so it's
   excluded from search matching on its own text. */
.nav-subdivider {
    padding: 10px 14px 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.7;
}
.sidebar.is-collapsed .nav-search-wrap,
.sidebar.is-collapsed .nav-subdivider { display: none; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: var(--r-md);
    transition: all var(--transition-speed) ease;
    position: relative;
    white-space: nowrap;
}

.nav-item i {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.nav-item span {
    transition: opacity var(--transition-speed) var(--ease);
}

.nav-item:hover {
    color: var(--text-primary);
    background-color: var(--bg-widget);
}

.nav-item.active {
    color: white;
    background: var(--gradient-brand);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

/* ---------------------------------------------------------------------
   6. SCANNER STATUS WIDGET
   --------------------------------------------------------------------- */
.scanner-status-widget {
    background-color: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    transition: opacity var(--transition-speed) var(--ease);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-muted);
}
.status-indicator.running {
    background-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    animation: pulse 1.5s infinite;
}
.status-indicator.completed { background-color: var(--color-emerald); }
.status-indicator.failed { background-color: var(--color-crimson); }

.status-text {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.progress-bar-container {
    height: 6px;
    background-color: var(--bg-badge);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gradient-accent);
    transition: width 0.4s ease;
}

/* ---------------------------------------------------------------------
   7. SIDEBAR FOOTER & USER BLOCK
   --------------------------------------------------------------------- */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    white-space: nowrap;
    transition: opacity var(--transition-speed) var(--ease);
}

.sidebar-user-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.btn-logout {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 6px;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}
.btn-logout:hover {
    color: var(--color-crimson);
    background: rgba(239, 68, 68, 0.08);
}

/* ---------------------------------------------------------------------
   8. COLLAPSED SIDEBAR STATE
   --------------------------------------------------------------------- */
.sidebar.is-collapsed {
    width: var(--sidebar-w-collapsed);
    padding-left: 12px;
    padding-right: 12px;
}
.sidebar.is-collapsed .logo-text,
.sidebar.is-collapsed .nav-item > span,
.sidebar.is-collapsed .scanner-status-widget,
.sidebar.is-collapsed .sidebar-footer,
.sidebar.is-collapsed .sidebar-user-block,
.sidebar.is-collapsed .nav-section-title {
    opacity: 0;
    visibility: hidden;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: 0;
}

.nav-section-title {
    padding: 18px 14px 6px 14px;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity var(--transition-speed) var(--ease), color var(--transition-speed) var(--ease);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-section-title:hover {
    color: var(--text-primary, #ffffff);
    opacity: 0.9;
}
.section-chevron {
    font-size: 0.6rem;
    transition: transform 0.22s var(--ease);
    opacity: 0.5;
}
.section-chevron.expanded {
    transform: rotate(90deg);
}
.nav-section-content {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    margin-left: 20px;
    padding-left: 4px;
}


.sidebar.is-collapsed .logo-area {
    justify-content: center;
    margin-bottom: 20px;
}
.sidebar.is-collapsed .btn-sidebar-toggle {
    right: -14px;
}
.sidebar.is-collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;
}
.sidebar.is-collapsed .nav-item i {
    width: auto;
}
/* Tooltip when collapsed */
.sidebar.is-collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-tooltip);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.sidebar.is-collapsed .nav-item:hover::after {
    opacity: 1;
}

/* ---------------------------------------------------------------------
   9. MOBILE SIDEBAR OVERLAY
   --------------------------------------------------------------------- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 10, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 650;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}
.sidebar-overlay.is-open {
    display: block;
    opacity: 1;
}

/* Mobile hamburger button */
.btn-mobile-menu {
    display: none;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: all var(--transition-speed) ease;
}
.btn-mobile-menu:hover {
    border-color: var(--border-color-active);
    background: var(--color-primary-glow);
}

/* ---------------------------------------------------------------------
   10. MAIN CONTENT
   --------------------------------------------------------------------- */
.main-content {
    /* Padding lives in vars so edge-to-edge children (e.g. #tab-visualizer)
       can cancel it exactly at every breakpoint. Only override these two
       vars in media queries — never set .main-content padding directly. */
    --mc-pad-y: 26px;
    --mc-pad-x: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    padding: var(--mc-pad-y) var(--mc-pad-x);
    background-color: transparent;
    min-width: 0;
}

/* ---------------------------------------------------------------------
   11. TOP BAR
   --------------------------------------------------------------------- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Execution safety bar — lives inside the Control Room tab only. State-derived
   background/border; content is set by safety_bar.js from GET /api/trade/execution/summary. */
.exec-safety-bar {
    display: none; /* flex, set by JS once data has loaded */
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 16px;
    margin: 0 0 18px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-widget);
    backdrop-filter: blur(10px);
    font-size: 0.8rem;
}
.exec-safety-bar.exec-safety-loading { opacity: 0.7; }
.exec-safety-bar.exec-safety-idle {
    border-color: var(--border-color);
    background: var(--bg-widget);
}
.exec-safety-bar.exec-safety-shadow {
    border-color: rgba(129, 140, 248, 0.32);
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.1), rgba(129, 140, 248, 0.03));
}
.exec-safety-bar.exec-safety-approval {
    border-color: rgba(245, 158, 11, 0.32);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.11), rgba(245, 158, 11, 0.03));
}
.exec-safety-bar.exec-safety-armed {
    border-color: rgba(239, 68, 68, 0.36);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
}
.exec-safety-bar.exec-safety-halted {
    border-color: var(--border-color);
    background: var(--bg-card);
}

.exec-safety-state {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    white-space: nowrap;
}
.exec-safety-idle .exec-safety-state,
.exec-safety-loading .exec-safety-state { color: var(--text-muted); }
.exec-safety-shadow .exec-safety-state { color: var(--color-indigo); }
.exec-safety-approval .exec-safety-state { color: var(--color-amber); }
.exec-safety-armed .exec-safety-state { color: var(--color-crimson); }
.exec-safety-halted .exec-safety-state { color: var(--text-muted); }

.exec-safety-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.exec-safety-approval .exec-safety-dot,
.exec-safety-armed .exec-safety-dot {
    animation: exec-safety-pulse 2.4s ease-in-out infinite;
}
@keyframes exec-safety-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .exec-safety-dot { animation: none !important; }
}

.exec-safety-sentence {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.exec-safety-spacer { flex: 1; }

.exec-safety-details-btn,
.exec-safety-kill-btn {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.74rem;
    padding: 6px 12px;
    white-space: nowrap;
}
.exec-safety-kill-btn {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.exec-safety-kill-btn:hover:not(:disabled) { background: rgba(239, 68, 68, 0.22); }
.exec-safety-kill-btn:disabled { opacity: 0.6; cursor: default; }
.exec-safety-kill-btn.exec-safety-resume-btn {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}
.exec-safety-kill-btn.exec-safety-resume-btn:hover:not(:disabled) { background: rgba(16, 185, 129, 0.22); }

body.light-theme .exec-safety-bar { background: var(--bg-widget); }
body.light-theme .exec-safety-bar.exec-safety-shadow { background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02)); }
body.light-theme .exec-safety-bar.exec-safety-approval { background: linear-gradient(180deg, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0.02)); }
body.light-theme .exec-safety-bar.exec-safety-armed { background: linear-gradient(180deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02)); }

@media (max-width: 768px) {
    .exec-safety-bar { font-size: 0.75rem; padding: 8px 12px; }
    .exec-safety-sentence { flex-basis: 100%; order: 3; }
    .exec-safety-spacer { display: none; }
}

/* ───── Decisions stage rail ───── */
.decisions-rail-group-h {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 7px 14px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}
.decisions-stage {
    flex: 1;
    min-width: 108px;
    padding: 11px 13px;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.15s;
    background: none;
    text-align: left;
    color: var(--text-primary);
    font-family: inherit;
}
.decisions-stage:last-child { border-right: 0; }
.decisions-stage:hover { background: rgba(255, 255, 255, 0.03); }
.decisions-stage.on { background: rgba(99, 102, 241, 0.12); box-shadow: inset 0 -2px 0 var(--color-indigo); }
.decisions-stage .n {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: block;
}
.decisions-stage .c { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; margin-top: 3px; display: block; }
.decisions-stage .d { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; display: block; }
.decisions-stage.warn .c { color: var(--color-amber); }
.decisions-stage.warn { background: rgba(245, 158, 11, 0.06); }
.decisions-stage.ok .c { color: var(--accent-green); }
.decisions-stage.bad .c { color: var(--color-crimson); }

.decisions-detail-row td { padding: 0 !important; border-bottom: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.015); }
.decisions-detail { padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.decisions-detail-group h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.decisions-detail-field { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); color: var(--text-secondary); }
.decisions-detail-field b { color: var(--text-primary); font-weight: 600; }
.decisions-row-toggle { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.decisions-row-toggle:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.decisions-basis-chip { font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.decisions-basis-chip.modeled { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid var(--border-color); }
.decisions-basis-chip.fill { background: rgba(16, 185, 129, 0.13); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }

/* Broker capability chips (Account -> Brokers) — a struck-through chip is a faster answer than
   a paragraph for "can this broker place orders right now". */
.broker-cap-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.broker-cap-chip { font-size: 0.67rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-muted); white-space: nowrap; }
.broker-cap-chip.on { background: rgba(99, 102, 241, 0.13); border-color: rgba(99, 102, 241, 0.3); color: #c7d2fe; }
.broker-cap-chip.off { text-decoration: line-through; opacity: 0.55; }
.broker-conn-chip { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border-color); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.broker-conn-chip.ok { border-color: rgba(16, 185, 129, 0.32); background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }
.broker-conn-chip.warn { border-color: rgba(245, 158, 11, 0.32); background: rgba(245, 158, 11, 0.1); color: #fcd34d; }
.broker-conn-chip.bad { border-color: rgba(239, 68, 68, 0.32); background: rgba(239, 68, 68, 0.1); color: #fca5a5; }

/* Shared clickable-ticker link (ticker_meta.js) — used anywhere a ticker opens the chart. */
.ticker-chart-link { color: var(--color-indigo); font-weight: 700; text-decoration: none; cursor: pointer; }
.ticker-chart-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .decisions-stage { min-width: 92px; }
    .decisions-detail { grid-template-columns: 1fr; padding: 14px 16px; }
}

.portfolio-ledgers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
@media (max-width: 900px) {
    .portfolio-ledgers-grid { grid-template-columns: 1fr; }
}

.page-title-section {
    min-width: 0;
}
.page-title-section h1 {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 3px;
}
.subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.top-bar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    overflow: visible;
}

.last-scan-badge {
    background-color: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   12. TABS
   --------------------------------------------------------------------- */
.tab-content {
    display: none;
    animation: fadeIn 0.35s var(--ease);
}
.tab-content.active {
    display: block;
}

/* ---------------------------------------------------------------------
   13. KPI CARDS
   --------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.kpi-card {
    position: relative;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: transform var(--transition-speed) var(--ease), border-color var(--transition-speed) ease;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}
.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-color-active);
    box-shadow: var(--shadow-md);
}
.kpi-card:hover::before { opacity: 1; }

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.icon-indigo { background-color: var(--color-primary-glow); color: var(--color-indigo); }
.icon-emerald { background-color: var(--color-emerald-glow); color: var(--color-emerald); }
.icon-blue { background-color: rgba(59, 130, 246, 0.1); color: var(--color-blue); }
.icon-purple { background-color: rgba(168, 85, 247, 0.1); color: var(--color-purple); }

.kpi-info { display: flex; flex-direction: column; }
.kpi-label {
    font-size: 0.76rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.kpi-value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
}

/* ---------------------------------------------------------------------
   14. CONTENT ROWS & CARDS
   --------------------------------------------------------------------- */
.content-row {
    margin-bottom: 22px;
    display: flex;
    gap: 20px;
}
.flex-row-responsive { flex-direction: row; }
.flex-grow-3 { flex-grow: 3; flex-basis: 0; }
.flex-grow-2 { flex-grow: 2; flex-basis: 0; }

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.card-full-width { width: 100%; }

.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}
.card-subtitle {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.card-body { padding: 22px; }
.card-body.pt-0 { padding-top: 0; }

/* ---------------------------------------------------------------------
   15. BUTTONS
   --------------------------------------------------------------------- */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--r-md);
    cursor: pointer;
    border: none;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--transition-speed) ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--gradient-brand);
    color: white;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
}
.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    background: var(--bg-widget);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--border-color-active);
    background: var(--color-primary-glow);
}

.btn-indigo { background-color: var(--color-primary); color: white; }
.btn-indigo:hover { background-color: var(--color-primary-hover); }
.btn-emerald { background: var(--gradient-emerald); color: white; }
.btn-emerald:hover { filter: brightness(1.08); }

.btn-full-width { width: 100%; }
.btn-sm { padding: 5px 11px; font-size: 0.78rem; }

.btn-tab {
    background-color: var(--bg-widget);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 7px 14px;
    border-radius: var(--r-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}
.btn-tab:hover { color: var(--text-primary); border-color: var(--border-color-active); }
.btn-tab.active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.filter-group { display: flex; gap: 6px; }

/* ---------------------------------------------------------------------
   16. FILTER PILLS
   --------------------------------------------------------------------- */
.filter-group-pill {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.pill-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-secondary);
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    font-family: var(--font-body);
    box-shadow: none !important;
}
.pill-btn:hover { color: var(--text-primary); }
.pill-btn.active {
    background: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4) !important;
}

.pill-btn-group {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm);
    padding: 2px;
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.pill-btn-sm {
    flex: 1;
    text-align: center;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text-secondary);
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    font-family: var(--font-body);
    box-shadow: none !important;
}
.pill-btn-sm:hover { color: var(--text-primary); }
.pill-btn-sm.active {
    background: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35) !important;
}

#btn-filter-dir-bullish { color: var(--color-emerald); }
#btn-filter-dir-bearish { color: var(--color-crimson); }
#btn-filter-dir-bullish.active {
    background: var(--color-emerald) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}
#btn-filter-dir-bearish.active {
    background: var(--color-crimson) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
}

/* ---------------------------------------------------------------------
   17. DASHBOARD FILTERS CONSOLE
   --------------------------------------------------------------------- */
.dashboard-filters-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.filters-active-badge {
    background-color: var(--color-emerald) !important;
    color: white !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin-left: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

/* Advanced drawer */
#advanced-filters-drawer {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.4s var(--ease), opacity 0.3s ease, padding 0.4s var(--ease), margin 0.4s var(--ease), visibility 0.4s;
    padding: 0 22px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.12);
}
#advanced-filters-drawer.open {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
    padding: 22px;
    margin: 12px 22px 22px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-color);
    background: rgba(16, 23, 38, 0.65);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2), var(--shadow-md);
    backdrop-filter: blur(12px);
}
#btn-toggle-advanced-filters.active {
    background: var(--color-primary-glow) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-indigo) !important;
}

.filter-card-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--r-md);
    padding: 18px;
    height: 100%;
}
.filter-col-title {
    margin: 0 0 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-indigo);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
}
.filter-card-content { display: flex; flex-direction: column; gap: 18px; }
.filter-control-item { display: flex; flex-direction: column; gap: 6px; }
.filter-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.filter-value-text { font-weight: 600; color: var(--text-primary); }
.filter-value-highlight { font-weight: 700; color: var(--color-emerald); }
.slider-dual-container { display: flex; align-items: center; gap: 12px; }
.slider-divider { color: var(--text-muted); font-size: 0.8rem; font-weight: 700; }

/* ---------------------------------------------------------------------
   18. SELECTS & SLIDERS
   --------------------------------------------------------------------- */
.dash-select-container { position: relative; width: 100%; }
.dash-select-container::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.dash-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--r-sm) !important;
    padding: 7px 30px 7px 12px !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: 0.78rem !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.dash-select option,
.dash-select optgroup {
    background-color: #0f1223 !important;
    color: #e2e8f0 !important;
}
body.light-theme .dash-select option,
body.light-theme .dash-select optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
.dash-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.dash-range-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}
.dash-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-primary) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5) !important;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.dash-range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.dash-range-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-primary) !important;
    border: 2px solid #fff !important;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   19. TOGGLE SWITCH
   --------------------------------------------------------------------- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    border-radius: 24px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background-color: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* Small Toggle Switch for Toolbar */
.toggle-switch-sm {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 18px;
}
.toggle-switch-sm input { opacity: 0; width: 0; height: 0; }
.toggle-slider-sm {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    border-radius: 18px;
}
.toggle-slider-sm:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.toggle-switch-sm input:checked + .toggle-slider-sm { background-color: var(--color-primary); }
.toggle-switch-sm input:checked + .toggle-slider-sm:before { transform: translateX(14px); }


/* ---------------------------------------------------------------------
   SCAN ACTIONS WIDGET (sidebar)
   --------------------------------------------------------------------- */
.scan-actions-widget {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}
.scan-actions-widget .widget-header {
    margin-bottom: 10px;
}
.scan-actions-widget .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   19b. SCAN LOGS WIDGET (sidebar)
   --------------------------------------------------------------------- */
.scan-logs-widget {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
}
.scan-logs-widget .widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.scan-logs-refresh {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px;
    transition: color 0.2s ease;
}
.scan-logs-refresh:hover {
    color: var(--color-primary);
}
.scan-logs-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.scan-logs-empty {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
    padding: 10px 0;
}
.scan-log-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font-size: 0.72rem;
}
.scan-log-item.failed {
    border-left: 3px solid #f87171;
}
.scan-log-item.completed {
    border-left: 3px solid #34d399;
}
.scan-log-item.scanning {
    border-left: 3px solid #818cf8;
}
.scan-log-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.scan-log-mode {
    font-weight: 600;
    color: var(--text-secondary);
}
.scan-log-time {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.scan-log-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.scan-log-error {
    margin-top: 4px;
    padding: 5px 7px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    color: #f87171;
    font-size: 0.68rem;
    line-height: 1.3;
}
.scan-last-error {
    margin-top: 12px;
    padding: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--r-sm);
}
.scan-error-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #f87171;
    margin-bottom: 6px;
}
.scan-error-message {
    font-size: 0.72rem;
    color: #fca5a5;
    line-height: 1.4;
    margin-bottom: 6px;
}
.scan-error-details {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.scan-error-details summary {
    cursor: pointer;
    user-select: none;
}
.scan-error-details pre {
    margin-top: 6px;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    font-size: 0.65rem;
    color: #fca5a5;
    overflow-x: auto;
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------
   20. SEARCH BOX
   --------------------------------------------------------------------- */
.search-box { position: relative; margin-bottom: 16px; }
.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.search-box input {
    width: 100%;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 10px 16px 10px 38px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.search-box input:focus { border-color: var(--color-primary); }

/* ---------------------------------------------------------------------
   21. DASHBOARD COLUMNS & PATTERN CARDS
   --------------------------------------------------------------------- */
.dashboard-columns-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.dashboard-col { display: flex; flex-direction: column; }
.col-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.col-header-bar h3 {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
}
.col-grid { grid-template-columns: 1fr !important; gap: 14px; }

.patterns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    min-height: 100px;
}

.pattern-card {
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-color);
    border-left: 3px solid rgba(99, 102, 241, 0.5);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-speed) var(--ease);
}
.pattern-card:hover {
    background-color: var(--bg-card-hover);
    transform: translateY(-4px);
    border-color: var(--border-color-active);
    border-left-color: var(--color-primary);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(99, 102, 241, 0.1);
}
.pattern-card.card-confirmed { border-left-color: rgba(16, 185, 129, 0.6); }
.pattern-card.card-confirmed:hover { border-left-color: var(--color-emerald); }
.pattern-card.direction-bearish { border-left-color: rgba(239, 68, 68, 0.6) !important; }
.pattern-card.direction-bearish:hover {
    border-left-color: var(--color-rose) !important;
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(239, 68, 68, 0.15) !important;
}

.pattern-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ticker-symbol {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
}
.pattern-card-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pattern-metric-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.84rem;
    color: var(--text-secondary);
}
.pattern-metric-row strong { color: var(--text-primary); }
.pattern-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    font-size: 0.8rem;
}
.success-rate-badge { color: var(--color-emerald); font-weight: 600; }
.view-chart-link {
    color: var(--color-primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tp-ratio-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-emerald);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.tp-ratio-badge.ratio-low {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-amber);
    border-color: rgba(245, 158, 11, 0.25);
}
.cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------
   22. BADGES
   --------------------------------------------------------------------- */
.badge {
    padding: 4px 9px;
    border-radius: 30px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-confirmed {
    background-color: var(--color-emerald-glow);
    color: var(--color-emerald);
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-forming {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--color-blue);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-failed {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-crimson);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ---------------------------------------------------------------------
   23. DATE GROUP HEADERS
   --------------------------------------------------------------------- */
.date-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    grid-column: 1 / -1;
    cursor: pointer;
    user-select: none;
    border-radius: var(--r-sm);
    transition: background var(--transition-speed) ease;
}
.date-group-header:hover { background: rgba(255, 255, 255, 0.03); }
.date-group-header .date-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.date-group-header .date-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--border-color), transparent);
}
.date-group-header .date-count { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }

/* ---------------------------------------------------------------------
   24. DATA TABLES
   --------------------------------------------------------------------- */
.table-container { overflow-x: auto; width: 100%; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}
.data-table th {
    padding: 13px 16px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.73rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}
.data-table th:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--text-primary); }
.data-table td {
    padding: 13px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-table);
}
.data-table tbody tr { transition: background-color 0.2s ease; }
.data-table tbody tr:hover { background-color: var(--bg-hover-row); }
.small-table th, .small-table td { padding: 10px 12px; font-size: 0.84rem; }

.text-center { text-align: center; }
.text-success { color: var(--color-emerald) !important; }
.text-danger { color: var(--color-crimson) !important; }
.text-indigo { color: var(--color-indigo) !important; }
.text-muted { color: var(--text-muted); }
.max-height-350 { max-height: 350px; }
.overflow-y { overflow-y: auto; }
.mt-3 { margin-top: 16px; }
.p-3 { padding: 16px; }
.pt-0 { padding-top: 0 !important; }

/* ---------------------------------------------------------------------
   25. NO DATA STATE
   --------------------------------------------------------------------- */
.no-data-msg {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: var(--text-muted);
    font-size: 0.92rem;
    gap: 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--r-lg);
    text-align: center;
    padding: 20px;
}
.no-data-msg i { font-size: 2.2rem; }

/* ---------------------------------------------------------------------
   26. VISUALIZER (legacy kept for reference)
   --------------------------------------------------------------------- */
.visualizer-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
}

/* ---------------------------------------------------------------------
   26b. VISUALIZER V2 REDESIGN
   --------------------------------------------------------------------- */

/* Full-height two-column layout */
.vis-layout-v2 {
    display: grid;
    grid-template-columns: 272px 1fr;
    height: calc(100vh - 68px);
    overflow: hidden;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-dark);
}

/* Sidebar collapse toggle */
.vis-layout-v2.sidebar-collapsed {
    grid-template-columns: 36px 1fr;
}
.vis-sidebar-v2.collapsed {
    display: none;
}
.vis-sidebar-collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 14px;
    gap: 8px;
    border-right: 1px solid var(--border-color);
    background: var(--card-bg);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.15s;
    width: 36px;
    overflow: hidden;
}
.vis-sidebar-collapsed:hover { background: rgba(99,102,241,0.06); color: var(--color-primary); }
.vis-sidebar-collapsed i { font-size: 0.85rem; }
.vis-sidebar-collapsed span { writing-mode: vertical-lr; font-size: 0.58rem; margin-top: 4px; }

/* Sidebar header row */
.vsb-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 0;
}
.vsb-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.vsb-collapse-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-hover);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.65rem;
    transition: all 0.15s;
    flex-shrink: 0;
}
.vsb-collapse-btn:hover { background: rgba(99,102,241,0.12); color: var(--color-primary); border-color: rgba(99,102,241,0.3); }

/* ---- Sidebar ---- */
.vis-sidebar-v2 {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--card-bg);
    overflow: hidden;
}
.vsb-head {
    padding: 0 0 4px 0;
    flex-shrink: 0;
}
.vsb-search {
    position: relative;
    margin-bottom: 8px;
    padding: 0 12px;
}
.vsb-search input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    transition: border 0.2s;
    font-family: var(--font-body);
}
.vsb-search input:focus { border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.05); }
.vsb-search input::placeholder { color: var(--text-muted); }
.vsb-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.75rem; }
.vsb-search-clear {
    position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    border: none; background: rgba(255,255,255,0.08); color: var(--text-muted);
    width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
    display: none; align-items: center; justify-content: center;
    font-size: 0.8rem; line-height: 1; padding: 0; transition: all 0.15s;
}
.vsb-search-clear:hover { background: rgba(255,255,255,0.18); color: var(--text-primary); }
.vsb-search-clear.visible { display: flex; }
.vsb-search kbd {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-color); font-size: 0.58rem; color: var(--text-muted); font-family: inherit;
}
.vsb-pills {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 0 12px 8px;
}
.vsb-pills button {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
    text-align: center;
    font-family: var(--font-body);
}
.vsb-pills button:hover:not(.active) { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.vsb-index-filter { margin: 0 12px 8px; }
.vsb-index-select {
    width: 100%;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    outline: none;
}
.vsb-index-select:focus { border-color: rgba(99,102,241,0.5); }
.vsb-pills button.active {
    color: var(--color-primary);
    background: rgba(99,102,241,0.12);
    border-bottom: 2px solid var(--color-primary);
}

/* Visualizer tab goes edge-to-edge (no main-content padding) */
#tab-visualizer {
    /* Edge-to-edge: cancel main-content padding. Derived from the same vars
       so it stays in sync with the padding at every breakpoint. */
    margin: calc(-1 * var(--mc-pad-y)) calc(-1 * var(--mc-pad-x));
}
.vis-sidebar-v2 .ticker-list-group {
    padding: 4px 8px 8px;
}

/* ---- Main content column ---- */
.vis-main-v2 {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-bottom: 0px;
}
.vis-main-v2::-webkit-scrollbar { width: 5px; }
.vis-main-v2::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ---- Hero Header ---- */
.vis-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(17,23,38,0.6) 0%, transparent 100%);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.vis-hero-ticker {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
}
.vis-hero-price {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.vis-hero-ohlc {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-family: var(--font-mono, monospace);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.vis-hero-ohlc .ohlc-label { color: var(--text-muted); font-weight: 500; margin-right: 2px; }
.vis-hero-ohlc .ohlc-up { color: #10b981; }
.vis-hero-ohlc .ohlc-down { color: #ef4444; }
.vis-hero-company {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.vis-hero-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}
.vis-badge {
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vis-badge-pattern { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
.vis-badge-tf      { background: rgba(168,85,247,0.15); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
.vis-badge-status  { background: rgba(16,185,129,0.12); color: #10b981; border: 1px solid rgba(16,185,129,0.25); }
.vis-badge-momentum{ background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.vis-badge-index   { background: rgba(56,189,248,0.12); color: #38bdf8; border: 1px solid rgba(56,189,248,0.28); text-transform: none; letter-spacing: 0.01em; }
.vis-pattern-sel {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 4px 10px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.76rem;
    outline: none;
    cursor: pointer;
}

/* ---- Toolbar ---- */
.vis-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 20px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* NOTE: the visualizer renders the toolbar as two fixed rows (identity + controls)
   so the controls sit at the same position on every chart. That layout is owned
   by the `#tab-visualizer .vis-toolbar` / `.vis-tb-row` block further down. */
.vis-tb-row > .vis-tb-group,
.vis-tb-row > .vis-dd,
.vis-tb-row > .chart-tb-btn,
.vis-tb-row > .vis-tb-hero,
.vis-tb-row > .vis-tb-badge { flex-shrink: 0; }
/* Hero merged into the toolbar (Stage 1): compact ticker + price + badges. */
.vis-tb-hero { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vis-tb-hero .vis-hero-ticker { font-size: 1.15rem; }
.vis-tb-hero .vis-hero-price { font-size: 0.92rem; padding: 2px 9px; }
.vis-tb-hero .vis-hero-company {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vis-tb-group { display: flex; align-items: center; gap: 4px; }
.vis-tb-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 2px;
}
.vis-tb-sep { width: 1px; height: 20px; background: var(--border-color); margin: 0 6px; }
.vis-tb-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.vis-tb-badge-green { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #10b981; }
.vis-tb-badge-amber { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: #f59e0b; }
.vis-tb-badge-gold  { background: rgba(251,191,36,0.14);  border: 1px solid rgba(251,191,36,0.45); color: #fbbf24; }
.vis-tb-badge-indigo { background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3); color: #6366f1; }

/* ---- Chart canvas area ---- */
.vis-chart-wrap {
    flex: 1;
    min-height: 360px;
    max-height: 500px; /* leave room for insight panel below */
    position: relative;
    background: #0b0f19;
    overflow: hidden;
}
/* When insights are collapsed, chart expands to fill freed space */
.vis-main-v2.insights-hidden .vis-chart-wrap {
    max-height: none;
    flex: 1;
    height: 100%;
}
.vis-chart-wrap #stock-chart-container {
    height: 100%;
    transition: opacity 0.12s ease-out;
}

/* ---- Toolbar dropdowns (mobile-only; desktop keeps the button groups) ---- */
/* Compact interval/style dropdowns — now the control on EVERY size (Stage 1).
   They replace the long D/W/4H/1H/15M/5M + Candles/Heikin-Ashi/Line button rows,
   which wrapped the merged-hero toolbar onto 3 lines (147px) on desktop. */
.vis-dd {
    display: inline-block;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 22px 0 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
}
/* Retire the redundant button groups everywhere (the dropdowns drive the same
   setChartInterval()/setChartStyle() setters). */
.vis-toolbar .vis-tb-group-interval,
.vis-toolbar .vis-tb-group-style,
.vis-toolbar .vis-tb-sep-style { display: none; }

/* ---- Pivot-formula dropdown (always visible on both breakpoints) ---- */
.vis-pivot-dd {
    height: 28px;
    padding: 0 24px 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.vis-pivot-dd:hover { border-color: var(--border-color-active); color: var(--text-primary); }
@media (max-width: 768px) {
    .vis-pivot-dd { height: 36px; font-size: 0.74rem; }
}

/* ---- Similar-setups rail: same-pattern tickers, in-place navigation ---- */
.vis-sim-rail-wrap {
    border-bottom: 1px solid var(--border-color);
    background: rgba(99, 102, 241, 0.04);
    flex-shrink: 0;
}
.vis-sim-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px 0;
}
.vis-sim-title {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-secondary);
}
.vis-sim-title b { color: var(--color-indigo); }
.vis-sim-count { font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }
.vis-sim-rail {
    display: flex; gap: 8px; padding: 7px 16px 10px;
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.vis-sim-rail::-webkit-scrollbar { display: none; }
/* Similar-setups rail toggle (chart toolbar). Now on EVERY size: the rail costs
   ~105px of chart height, so it is collapsed by default and revealed on demand.
   renderSimilarSetupsRail() shows the toggle only when there are matches. */
.vis-sim-toggle .vis-sim-toggle-count {
    font-weight: 700;
    color: var(--color-indigo);
    margin-left: 1px;
}
#tab-visualizer:not(.vis-sim-open) #vis-sim-rail-wrap { display: none !important; }
.vis-sim-card {
    flex: 0 0 auto; min-width: 132px; position: relative;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 6px 10px 7px; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.vis-sim-card:hover { border-color: var(--border-color-active); }
.vis-sim-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    border-radius: 10px 0 0 10px; background: var(--color-emerald);
}
.vis-sim-card.bear::before { background: var(--color-crimson); }
.vis-sim-card.active {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
    cursor: default;
}
.vis-sim-tk { font-size: 0.76rem; font-weight: 800; color: var(--text-primary); }
.vis-sim-tk small { font-size: 0.56rem; color: var(--color-indigo); font-weight: 700; margin-left: 3px; }
.vis-sim-nm {
    font-size: 0.58rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 132px;
}
.vis-sim-px { font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); margin-top: 2px; }
.vis-sim-up { color: var(--color-emerald); margin-left: 5px; }
.vis-sim-up.dn { color: var(--color-crimson); }
.vis-sim-conf {
    position: absolute; top: 6px; right: 8px;
    font-size: 0.56rem; font-weight: 800; color: var(--color-indigo);
}

@media (max-width: 768px) {
    /* Toolbar: swap the interval/style button groups for compact dropdowns.
       Scoped under .vis-toolbar (0,2,0) so it beats the generic
       `.vis-tb-group { display:inline-flex !important }` mobile rule below. */
    .vis-toolbar .vis-tb-group-interval,
    .vis-toolbar .vis-tb-group-style,
    .vis-toolbar .vis-tb-sep-style { display: none !important; }
    .vis-dd {
        display: inline-block !important;
        flex: 0 0 auto !important;
        height: 36px;
        padding: 0 22px 0 10px;
        font-size: 0.74rem; font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-widget);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        outline: none;
        -webkit-appearance: none; appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 7px center;
    }
    /* Similar-setups rail: collapsed by default on mobile so it doesn't steal
       ~99px from the chart (and cause the "chart moves up on reopen" shift).
       The toolbar toggle (#btn-toggle-sim-rail) adds .vis-sim-open to reveal it
       on demand. On tablet/desktop it always shows (no gate here). */
    #tab-visualizer:not(.vis-sim-open) #vis-sim-rail-wrap { display: none !important; }
    .vis-sim-head { padding: 5px 12px 0; }
    .vis-sim-rail { padding: 6px 12px 8px; gap: 7px; }
    .vis-sim-card { min-width: 98px; padding: 5px 8px 6px; }
    .vis-sim-nm { display: none; }
    .vis-sim-tk { font-size: 0.72rem; }
    .vis-sim-px { font-size: 0.62rem; }
}

/* ---- Legend ---- */
.vis-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 20px;
    background: rgba(255,255,255,0.015);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: 0;
}
.vis-legend-label { font-size: 0.65rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
/* Daily Signal history/overlay panel — deliberately its own class, not .vis-legend:
   .vis-legend is force-hidden on mobile ("to match mockup", see the mobile block
   below), and a Daily Signal's trade plan/history must stay visible on the exact
   phone-width viewport most of this app's live monitoring happens from. */
.ds-signal-panel {
    padding: 8px 20px;
    background: rgba(255,255,255,0.015);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.vis-lg-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--text-secondary); }
.vis-lg-sep  { width: 1px; height: 14px; background: var(--border-color); }
.vis-lg-dot  {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    font-size: 0.55rem; font-weight: 700; border-width: 1.5px; border-style: solid;
}
.sma-legend-item:hover .sma-gear-icon {
    opacity: 1 !important;
    transform: rotate(45deg);
    color: var(--accent-blue, #3b82f6);
}

/* ---- Insight Panel Toggle Bar ---- */
.vis-panel-toggle-bar {
    display: none; /* shown by JS when pattern loaded */
    align-items: center;
    justify-content: space-between;
    padding: 5px 16px;
    background: rgba(99,102,241,0.04);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: background 0.15s;
}
.vis-panel-toggle-bar:hover { background: rgba(99,102,241,0.08); }
.vis-ptb-left {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #818cf8;
}
.vis-ptb-left i { font-size: 0.7rem; transition: transform 0.2s; }
.vis-ptb-right {
    font-size: 0.62rem;
    color: var(--text-muted);
}
/* When insight panel is collapsed — hide both panel + fund strip */
.vis-main-v2.insights-collapsed #chart-pattern-details-row,
.vis-main-v2.insights-collapsed #det-fundamentals-card {
    display: none !important;
}
.vis-main-v2.insights-collapsed .vis-ptb-left i {
    transform: rotate(180deg);
}
.vis-main-v2.insights-collapsed .vis-ptb-right {
    content: 'Click to expand';
}
body.light-theme .vis-panel-toggle-bar { background: rgba(99,102,241,0.03); border-color: var(--border-color); }
body.light-theme .vis-panel-toggle-bar:hover { background: rgba(99,102,241,0.07); }

/* ---- Insight Panel (2-col below chart) ---- */
.vis-insight-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Pattern edu collapse button */
.vis-edu-collapse-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(99,102,241,0.35);
    background: rgba(99,102,241,0.1);
    color: #818cf8;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
    flex-shrink: 0;
    margin-bottom: 6px;
}
.vis-edu-collapse-btn:hover {
    background: rgba(99,102,241,0.08);
    color: var(--color-primary);
    border-color: rgba(99,102,241,0.3);
}
body.light-theme .vis-edu-collapse-btn {
    background: rgba(15,23,42,0.03);
}

/* Collapsed state — only header row visible */
.vis-edu-card.edu-collapsed .vis-edu-header,
.vis-edu-card.edu-collapsed .vis-geo-rows {
    display: none;
}
.vis-edu-card.edu-collapsed {
    padding: 10px 20px;
}

/* Pattern Education card (left) */
.vis-edu-card {
    padding: 16px 20px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vis-edu-header { display: flex; gap: 16px; align-items: flex-start; }
.vis-edu-diagram {
    width: 300px;
    height: 200px;
    flex-shrink: 0;
    border-radius: var(--border-radius-md);
    background: rgba(99,102,241,0.06);
    border: 1px solid rgba(99,102,241,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 4px;
}
.vis-edu-diagram svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.vis-edu-meta { flex: 1; min-width: 0; }
.vis-edu-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.vis-edu-text { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 8px; }
.vis-edu-stats { display: flex; gap: 16px; margin-bottom: 8px; }
.vis-edu-stat { display: flex; flex-direction: column; }
.ves-lbl { font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.ves-val { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; }
.vis-edu-target-logic { display: flex; gap: 6px; align-items: flex-start; }
.vis-edu-target-text { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.55; }

/* Expand button on edu card title */
.vis-edu-expand-btn {
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 6px;
    color: #818cf8;
    font-size: 0.65rem;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.vis-edu-expand-btn:hover { background: rgba(99,102,241,0.25); color: #fff; }

/* Pattern Education Modal */
.edu-modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    max-width: 720px;
    width: 92vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.edu-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(11,15,25,0.5);
}
.edu-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.edu-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
}
.edu-modal-top {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.edu-modal-diagram {
    width: 280px;
    height: 190px;
    flex-shrink: 0;
    border-radius: var(--border-radius-md);
    background: rgba(99,102,241,0.04);
    border: 1px solid rgba(99,102,241,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 6px;
}
.edu-modal-diagram svg { width: 100%; height: 100%; display: block; overflow: visible; }
.edu-modal-meta { flex: 1; min-width: 0; }
@media (max-width: 640px) {
    .edu-modal-top { flex-direction: column; }
    .edu-modal-diagram { width: 100%; height: 160px; }
}

/* Geometry rows under pattern card */
.vis-geo-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}
.vis-geo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 0.74rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.vis-geo-item span { color: var(--text-secondary); }
.vis-geo-item strong { color: var(--text-primary); font-weight: 600; text-align: right; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Right panel — trade timeline */
.vis-right-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
}

/* Timeline wrap */
.vis-timeline-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.vis-tl-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: rgba(99,102,241,0.03);
    flex-shrink: 0;
}
.vis-tl-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    font-size: 0.72rem;
}
.vis-tl-toggle:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
}

/* Timeline items */
.vis-timeline {
    position: relative;
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.vis-timeline::before {
    content: '';
    position: absolute;
    left: 29px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg, #6366f1, #10b981);
    border-radius: 2px;
    opacity: 0.25;
}
.vt-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    position: relative;
}
.vt-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    border: 2px solid;
    background: var(--bg-dark);
}
.vt-dot-point  { border-color: #818cf8; color: #818cf8; }
.vt-dot-buy    { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.1); }
.vt-dot-current{ border-color: #f59e0b; color: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
.vt-dot-stop   { border-color: #ef4444; color: #ef4444; }
.vt-dot-target { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.08); }
.vt-dot-exit   { border-color: #818cf8; color: #818cf8; }
.vt-body {
    flex: 1;
    min-width: 0;
}
.vt-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.vt-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.vt-price {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    text-align: right;
    padding-top: 3px;
}

/* Fundamentals strip — full-width bottom row */
.vis-fund-grid {
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-bottom: 0px;
}
/* .vis-fund-head removed — header not shown per sample design */

/* Insight panel toggle bar — sticky to bottom of scroll column, always visible */
.vis-panel-expand-bar {
    display: none; /* shown by JS */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(15, 18, 35, 0.97);
    border-top: 1px solid rgba(99,102,241,0.35);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    transition: background 0.15s;
    margin-top: 0px;
}
.vis-panel-expand-bar:hover { background: rgba(99,102,241,0.12); }
.vis-panel-expand-bar i {
    font-size: 0.75rem;
    color: #818cf8;
    transition: transform 0.2s;
}
.vis-panel-expand-bar span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #818cf8;
}
.vis-ptb-hint {
    font-size: 0.62rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted) !important;
    margin-left: auto;
}
body.light-theme .vis-panel-expand-bar { background: rgba(248,250,252,0.97); border-color: rgba(99,102,241,0.3); }
body.light-theme .vis-panel-expand-bar:hover { background: rgba(99,102,241,0.08); }
.vis-squeeze-badge {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.4);
    color: #ef4444;
}
.vis-fund-cells {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
}
.vis-fund-cell {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 10px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    transition: background 0.15s;
}
.vis-fund-cell:hover { background: rgba(255,255,255,0.025); }
.vis-fund-cell:last-child { border-right: none; }
.vis-fund-cell-wide { grid-column: span 2; align-items: flex-start; padding: 14px 18px; }
.vfc-green  { background: rgba(16,185,129,0.03); }
.vfc-indigo { background: rgba(99,102,241,0.03); }
.vfc-red    { background: rgba(239,68,68,0.03); }
.vfc-lbl { font-size: 0.55rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; display: flex; align-items: center; gap: 3px; white-space: nowrap; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; }
.vfc-val { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.vfc-sub { font-size: 0.55rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* 52-week range bar inside fundamentals */
.vis-range-bar {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    position: relative;
    margin: 4px 0 2px;
}
.vis-range-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
}
.vis-range-dot {
    position: absolute;
    top: -4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #818cf8;
    border: 2px solid white;
    transform: translateX(-50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.vis-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    font-weight: 600;
    margin-top: 2px;
    width: 100%;
    gap: 2px;
}
.vis-range-labels span { white-space: nowrap; }

/* Responsive */
@media (max-width: 960px) {
    .vis-layout-v2 { grid-template-columns: 1fr; height: auto; }
    .vis-sidebar-v2 { height: auto; max-height: 340px; border-right: none; border-bottom: 1px solid var(--border-color); }
    .vis-insight-panel { grid-template-columns: 1fr; }
    .vis-edu-card { border-right: none; border-bottom: 1px solid var(--border-color); }
    .vis-fund-cells { flex-wrap: wrap; }
    .vis-fund-cell { flex: 1 1 45%; min-width: 120px; }
    .vis-sim-strip { grid-template-columns: repeat(2, 1fr); }
}
.visualizer-control-card {
    height: calc(100vh - 180px);
    overflow: hidden;
}
.visualizer-control-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}
.ticker-list-group {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ticker-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ticker-list-item:hover { background-color: var(--bg-hover); }
.ticker-list-item.selected {
    background-color: var(--color-primary-glow);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: white;
}
.ticker-list-item .symbol { font-weight: 700; font-family: var(--font-heading); }
.ticker-list-item .signal-count {
    background-color: var(--bg-badge);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.72rem;
    font-weight: 600;
}
.visualizer-main { display: flex; flex-direction: column; gap: 20px; }
.chart-card { border: 1px solid var(--border-color); }
.chart-header-details { padding: 16px 22px; }
.chart-header-left { display: flex; align-items: center; gap: 12px; }
.chart-ticker-badge { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; }
.chart-stats-small { display: none; }
.chart-body-plotly { padding: 0; background-color: var(--bg-dark); }

/* Pattern Guide trigger button in chart header */
.pattern-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 10px;
    border: 1px solid rgba(99,102,241,0.35);
    background: rgba(99,102,241,0.08);
    cursor: pointer;
    transition: all 0.18s ease;
    color: var(--text-primary);
    text-align: left;
    flex-shrink: 0;
}
.pattern-guide-btn:hover {
    background: rgba(99,102,241,0.16);
    border-color: rgba(99,102,241,0.6);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.pattern-guide-btn.open {
    background: rgba(99,102,241,0.2);
    border-color: #6366f1;
}
.pattern-guide-thumb {
    width: 52px;
    height: 38px;
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(99,102,241,0.3);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pattern-guide-thumb svg { width: 100%; height: 100%; }
.pattern-guide-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pattern-guide-btn-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #818cf8;
    white-space: nowrap;
}
.pattern-guide-btn-sub {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pattern-guide-chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.pattern-guide-btn.open .pattern-guide-chevron { transform: rotate(180deg); }

/* Enlarged variant that absorbs the stats row */
.pattern-guide-btn-lg {
    padding: 8px 14px 8px 8px;
    gap: 12px;
    min-width: 230px;
    border-radius: 12px;
}
.pattern-guide-btn-lg .pattern-guide-thumb {
    width: 76px;
    height: 56px;
    border-radius: 8px;
    flex-shrink: 0;
}
.pattern-guide-btn-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.pattern-guide-btn-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.pgs-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
}
.pgs-lbl {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pgs-item strong {
    color: var(--text-primary);
    font-weight: 700;
}
.pgs-sep {
    color: var(--border-color);
    font-size: 0.75rem;
    line-height: 1;
}

/* Pattern Explanation Modal */
.pattern-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}
.pattern-modal-backdrop.open { display: block; }
.pattern-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    z-index: 1000;
    width: min(740px, 94vw);
    max-height: 82vh;
    overflow-y: auto;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(99,102,241,0.25);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pattern-modal.open {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.chart-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.chart-tb-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}
.chart-tb-btn-active {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--color-primary) !important;
    color: #c7d2fe !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
}
.chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: var(--text-muted);
    gap: 16px;
}
.chart-placeholder i { font-size: 3.5rem; }
/* Chart Hover Tooltip Overlay */
.chart-hover-tooltip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    pointer-events: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    width: 260px;
    max-width: calc(100% - 24px);
    display: none;
    line-height: 1.7;
    backdrop-filter: blur(8px);
}
.chart-hover-tooltip .tooltip-date {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.8rem;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}
.chart-hover-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.chart-hover-tooltip .tooltip-row span:first-child {
    color: var(--text-muted);
}
.chart-hover-tooltip .tooltip-row span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}
.chart-hover-tooltip .tooltip-event {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--border-color);
    font-size: 0.7rem;
    color: #818cf8;
    font-weight: 600;
}

/* Trade Levels Strip — modern compact bar inside chart card */
.trend-prediction-strip {
    display: none;
    flex-direction: row;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(99,102,241,0.02));
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: thin;
    flex-shrink: 0;   /* never let chart canvas crush the strip */
    min-height: 58px; /* consistent height regardless of content */
    z-index: 1;
}
.trend-prediction-strip.visible { display: flex; }

.chart-risk-alert {
    position: absolute;
    top: 62px;
    right: 72px;
    z-index: 18;
    width: min(340px, calc(100% - 32px));
    padding: 16px 18px;
    border: 1px solid rgba(249, 115, 22, 0.58);
    border-radius: 16px;
    color: #fff7ed;
    background: linear-gradient(145deg, rgba(31, 20, 20, 0.96), rgba(17, 24, 39, 0.94));
    box-shadow: 0 18px 50px rgba(127, 29, 29, 0.28), 0 0 0 1px rgba(249, 115, 22, 0.08) inset;
    backdrop-filter: blur(16px);
    pointer-events: none;
}

.chart-risk-alert.is-warning,
.chart-risk-alert.is-invalidated { border-color: rgba(239, 68, 68, 0.72); }
.chart-risk-alert.is-invalidated { background: linear-gradient(145deg, rgba(55, 18, 25, 0.97), rgba(17, 24, 39, 0.96)); }

.chart-risk-alert-head,
.chart-risk-alert-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-risk-alert-head span { color: #fb7185; font-size: .9rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.chart-risk-alert.is-watch .chart-risk-alert-head span { color: #fb923c; }
.chart-risk-alert-head strong { min-width: 36px; padding: 4px 8px; border-radius: 999px; color: #fecaca; background: rgba(239, 68, 68, .16); text-align: center; }
.chart-risk-alert ul { margin: 13px 0; padding-left: 18px; color: #e5e7eb; font-size: .8rem; line-height: 1.55; }
.chart-risk-alert li::marker { color: #ef4444; }
.chart-risk-alert-foot { padding-top: 10px; border-top: 1px solid rgba(248, 113, 113, .2); }
.chart-risk-alert-foot span { color: #fca5a5; font-size: .75rem; font-weight: 750; }
.chart-risk-alert-foot small { color: #9ca3af; font-size: .65rem; }

body.light-theme .chart-risk-alert { color: #7f1d1d; background: rgba(255, 247, 237, .96); box-shadow: 0 18px 50px rgba(127, 29, 29, .18); }
body.light-theme .chart-risk-alert ul { color: #374151; }

.chart-risk-history {
    position: absolute;
    top: 62px;
    right: 72px;
    left: auto;
    z-index: 22;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #f8fafc;
}
.chart-risk-history summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(245, 158, 11, .52);
    border-radius: 999px;
    background: rgba(17, 24, 39, .92);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
    color: #fbbf24;
    font-size: .72rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    backdrop-filter: blur(12px);
}
.chart-risk-history summary::-webkit-details-marker { display: none; }
.chart-risk-history summary strong {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #111827;
    background: #fbbf24;
    text-align: center;
}
.chart-risk-history[open] summary { border-radius: 12px 12px 0 0; }
.chart-risk-history-list {
    width: min(390px, calc(100vw - 48px));
    max-height: 330px;
    overflow-y: auto;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 14px 0 14px 14px;
    background: rgba(15, 23, 42, .97);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .42);
    backdrop-filter: blur(16px);
}
.chart-risk-history-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    font-size: .75rem;
    font-weight: 850;
}
.chart-risk-history-title small { color: #94a3b8; font-size: .62rem; font-weight: 600; }
.chart-risk-history-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.chart-risk-history-item:last-child { border-bottom: 0; }
.chart-risk-history-icon { color: #f59e0b; text-align: center; }
.chart-risk-history-item.is-warning .chart-risk-history-icon { color: #f97316; }
.chart-risk-history-item.is-invalidated .chart-risk-history-icon { color: #ef4444; }
.chart-risk-history-item strong { display: block; color: #f8fafc; font-size: .72rem; }
.chart-risk-history-item small { display: block; margin-top: 2px; color: #94a3b8; font-size: .61rem; }
.chart-risk-history-item ul { margin: 6px 0 0; padding-left: 15px; color: #cbd5e1; font-size: .65rem; line-height: 1.4; }
.chart-risk-history-item li::marker { color: #f59e0b; }
.chart-risk-history-item.is-invalidated li::marker { color: #ef4444; }
.chart-risk-history-item .chart-risk-history-patterns {
    margin: 5px 0 0;
    color: #94a3b8;
    font-size: .62rem;
    line-height: 1.35;
}
.chart-risk-history-item .chart-risk-history-action {
    margin: 7px 0 0;
    color: #fbbf24;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
}
.chart-risk-history-item.is-invalidated .chart-risk-history-action { color: #f87171; }
.chart-risk-history-item > b { color: #fbbf24; font-size: .76rem; }
.chart-risk-history-item.is-invalidated > b { color: #f87171; }

body.light-theme .chart-risk-history { color: #1f2937; }
body.light-theme .chart-risk-history summary,
body.light-theme .chart-risk-history-list { background: rgba(255, 251, 235, .97); }
body.light-theme .chart-risk-history-item strong { color: #1f2937; }
body.light-theme .chart-risk-history-item ul { color: #475569; }

@media (max-width: 768px) {
    .chart-risk-alert { top: 48px; right: 12px; left: 12px; width: auto; padding: 12px 14px; }
    .chart-risk-alert ul { margin: 9px 0; }
    .chart-risk-history { top: 8px; right: 8px; left: auto; }
    .chart-risk-history-list { max-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
    .chart-risk-alert,
    .chart-risk-history { animation: none !important; transition: none !important; }
}

/* Lead badge */
.tps-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #818cf8;
    background: rgba(99,102,241,0.07);
    white-space: nowrap;
    flex-shrink: 0;
}
.tps-lead i { font-size: 0.9rem; }

.tps-section {
    padding: 12px 18px;
    min-width: 116px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    transition: background 0.18s ease;
}
.tps-section:hover { background: rgba(255,255,255,0.03); }
.tps-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}
.tps-value {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.tps-sub {
    font-size: 0.64rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.tps-divider {
    width: 1px;
    background: var(--border-color);
    align-self: stretch;
    flex-shrink: 0;
}
.tps-value.bullish   { color: #10b981; }
.tps-value.bearish   { color: #ef4444; }
.tps-value.neutral   { color: #818cf8; }  /* neutral = historical: indigo/muted purple */

.trend-confidence-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--border-color);
    margin-top: 6px;
    overflow: hidden;
    max-width: 110px;
}
.trend-confidence-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.pattern-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.84rem;
    color: var(--text-secondary);
}
.detail-row strong { color: var(--text-primary); }
.detail-row:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   27. BACKTEST
   --------------------------------------------------------------------- */
.backtest-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.backtest-stat-card {
    padding: 22px;
    text-align: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
}
.backtest-stat-card .stat-number {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.backtest-stat-card .stat-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   28. SETTINGS
   --------------------------------------------------------------------- */
.settings-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 16px;
    width: 100%;
}
.settings-sidebar-card {
    flex: 0 0 250px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 16px 10px;
    backdrop-filter: blur(10px);
}
.settings-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-tab-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.22s var(--ease);
}
.settings-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.settings-tab-btn.active {
    color: white;
    background: var(--gradient-brand);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.settings-panes-card {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
}
.settings-tab-pane {
    display: none;
    animation: fadeIn 0.25s var(--ease);
}
.settings-tab-pane.active {
    display: block;
}
.pane-header {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}
.pane-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    font-family: var(--font-heading);
}
.pane-header .pane-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.form-actions-settings-global {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-top: auto;
}

/* Account tab: mirrors .settings-tab-btn / .settings-tab-pane exactly, kept as separate
   classes so its click handler (initAccountTabs in account.js) doesn't share global state
   with the Configuration tab's settings-tab-btn handler. */
.account-tab-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.22s var(--ease);
}
.account-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.account-tab-btn.active {
    color: white;
    background: var(--gradient-brand);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.account-tab-pane {
    display: none;
    animation: fadeIn 0.25s var(--ease);
}
.account-tab-pane.active {
    display: block;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 11px 15px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    outline: none;
    transition: all 0.2s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    .settings-layout {
        flex-direction: column;
    }
    .settings-sidebar-card {
        flex: 1;
        width: 100%;
    }
    .settings-nav-list {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .settings-tab-btn {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}
.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label {
    font-size: 0.84rem;
    color: var(--text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.form-group label span.tooltip { color: var(--text-muted); cursor: help; }
.form-group input[type="number"], .form-group textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 11px 15px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    outline: none;
    transition: all 0.2s ease;
}
.form-group input[type="number"]:focus, .form-group textarea:focus {
    border-color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.05);
}
.form-actions-settings {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}
textarea { resize: vertical; line-height: 1.5; }

/* ---------------------------------------------------------------------
   29. ANIMATIONS
   --------------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   30. MARKET SENTIMENT WIDGET
   --------------------------------------------------------------------- */
.market-sentiment-header-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
}
.market-sentiment-header-widget:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
}
.sentiment-pill-status {
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sentiment-pill-status.bullish {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-emerald);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.sentiment-pill-status.bearish {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-crimson);
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.sentiment-pill-status.neutral {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-amber);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Scan history selector restyle */
#scan-history-selector, #scan-history-container select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--r-md) !important;
    padding: 8px 12px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 0.84rem !important;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ---------------------------------------------------------------------
   MARKET REGION TOGGLE (top bar, prominent)
   --------------------------------------------------------------------- */
.market-region-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 3px;
}
.market-region-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.market-region-btn:hover {
    color: var(--text-primary);
}
.market-region-btn.active {
    background: rgba(99,102,241,0.22);
    color: #c7c3ff;
    box-shadow: 0 0 8px rgba(99,102,241,0.15);
}

/* ---------------------------------------------------------------------
   COMPACT SCAN BADGE + DROPDOWN
   --------------------------------------------------------------------- */
.scan-badge-wrap {
    position: relative;
}
.scan-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 5px 7px 5px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: default;
}
.scan-badge-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 2px;
}
.scan-badge-arrow:hover {
    background: rgba(99,102,241,0.15);
    color: var(--color-primary);
}
.scan-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 340px;
    max-width: 380px;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 200;
}
.scan-dropdown-panel select {
    border: none !important;
    background: transparent !important;
    padding: 4px !important;
    font-size: 0.82rem !important;
}
.scan-dropdown-panel select option {
    padding: 6px 8px !important;
}

/* ---------------------------------------------------------------------
   SEARCHABLE / GROUPED SCAN PICKER (replaces the flat ~80-option select
   above, which stays in the DOM hidden as the source of truth other code
   reads/writes — see the comment on it in index.html)
   --------------------------------------------------------------------- */
.scan-picker-search-wrap {
    position: relative;
    margin-bottom: 8px;
}
.scan-picker-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: var(--text-muted);
    pointer-events: none;
}
.scan-picker-search {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 7px 10px 7px 28px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    outline: none;
}
.scan-picker-search:focus {
    border-color: var(--color-primary);
}
.scan-picker-list {
    max-height: 340px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}
.scan-picker-pinned-row {
    padding: 7px 8px;
    border-radius: var(--r-md);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: #818cf8;
}
.scan-picker-pinned-row.is-consolidated {
    color: var(--color-emerald);
}
.scan-picker-divider {
    border-top: 1px solid var(--border-color);
    margin: 6px 0;
}
.scan-picker-market-header {
    padding: 8px 8px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.scan-picker-market-header .spr-count {
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.75;
}
.scan-picker-date-header {
    padding: 5px 8px 3px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0.75;
}
.scan-picker-row {
    padding: 6px 8px 6px 16px;
    border-radius: var(--r-md);
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.35;
}
.scan-picker-pinned-row:hover,
.scan-picker-row:hover {
    background: rgba(255,255,255,0.06);
}
.scan-picker-pinned-row.is-active,
.scan-picker-row.is-active {
    background: rgba(99,102,241,0.18);
}
.scan-picker-empty,
.scan-picker-no-results {
    padding: 16px 8px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   31. WINNING SECTORS STRIP
   --------------------------------------------------------------------- */
.winning-sectors-strip {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    animation: fadeSlideIn 0.4s ease;
}
.winning-sectors-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.winning-sectors-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
.winning-sector-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}
.winning-sector-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-accent);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.winning-sector-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12);
}
.winning-sector-card:hover::before { opacity: 1; }
.winning-sector-card.active {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.06);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}
.winning-sector-card.active::before { opacity: 1; }
.ws-card-rank { position: absolute; top: 10px; right: 12px; font-size: 1.3rem; opacity: 0.85; }
.ws-card-sector-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-right: 28px;
    line-height: 1.3;
}
.ws-card-metrics { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ws-card-metric { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; }
.ws-card-metric-label { color: var(--text-muted); font-weight: 500; }
.ws-card-metric-value { font-weight: 700; color: var(--text-primary); }
.ws-card-metric-value.text-emerald { color: var(--color-emerald); }
.ws-card-metric-value.text-indigo { color: var(--color-indigo); }
.ws-card-metric-value.text-amber { color: var(--color-amber); }
.ws-card-score-bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-top: 4px;
}
.ws-card-score-bar-fill { height: 100%; border-radius: 4px; background: var(--gradient-accent); transition: width 0.5s ease; }
.ws-card-signal-pills { display: flex; gap: 6px; margin-bottom: 8px; }
.ws-signal-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}
.ws-signal-pill.confirmed { background: rgba(16, 185, 129, 0.12); color: var(--color-emerald); border: 1px solid rgba(16, 185, 129, 0.2); }
.ws-signal-pill.forming { background: rgba(245, 158, 11, 0.12); color: var(--color-amber); border: 1px solid rgba(245, 158, 11, 0.2); }
.ws-signal-pill.active { background: rgba(99, 102, 241, 0.15); color: var(--color-indigo); border: 1px solid rgba(99, 102, 241, 0.3); }

.heatmap-block { transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.heatmap-block:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); filter: brightness(1.18); }

/* ---------------------------------------------------------------------
   32. SIGNAL DIRECTORY (redesigned)
   --------------------------------------------------------------------- */
.dir-section { display: flex; flex-direction: column; gap: 10px; }
.dir-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dir-pills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.dir-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dir-filter-group .pill-btn {
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.dir-filter-group .pill-btn i {
    font-size: 0.7rem;
}
.dir-section.hidden-dir { display: none !important; }
.dir-signal-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}
.dir-signal-pill:hover:not(.inactive) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px);
}
.dir-signal-pill.inactive {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.008) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
}
.dir-signal-pill .pill-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: all 0.2s ease;
}
/* Resting directional colors (match section headers) */
.dir-signal-pill.bullish-pill:not(.inactive):not(.active) {
    color: var(--color-emerald) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}
.dir-signal-pill.bearish-pill:not(.inactive):not(.active) {
    color: var(--color-rose) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}
.dir-signal-pill.bullish-pill:hover:not(.inactive):not(.active) {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
.dir-signal-pill.bearish-pill:hover:not(.inactive):not(.active) {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}
.dir-signal-pill.bullish-pill.active {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: var(--accent-green) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
}
.dir-signal-pill.bearish-pill.active {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: var(--color-rose) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
}
.dir-signal-pill.bullish-pill.active .pill-count { background: rgba(16, 185, 129, 0.25) !important; color: white !important; }
.dir-signal-pill.bearish-pill.active .pill-count { background: rgba(239, 68, 68, 0.25) !important; color: white !important; }

/* ---------------------------------------------------------------------
   33. MOMENTUM SCANNER
   --------------------------------------------------------------------- */
.momentum-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
}
.momentum-toolbar-left { display: flex; flex-direction: column; gap: 4px; }
.momentum-toolbar-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.momentum-toolbar-subtitle { font-size: 0.78rem; color: var(--text-muted); }
.momentum-last-updated {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}
.momentum-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 20px 22px; }
.momentum-stat-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.momentum-stat-card:hover { border-color: rgba(99, 102, 241, 0.4); transform: translateY(-1px); }
.momentum-stat-number { font-size: 2rem; font-weight: 800; font-family: var(--font-heading); line-height: 1; }
.momentum-stat-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.momentum-leaderboard-wrap { padding: 0 22px 22px; overflow-x: auto; }
.momentum-leaderboard { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.momentum-leaderboard thead th {
    position: sticky;
    top: 0;
    padding: 10px 14px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    z-index: 2;
}
.momentum-leaderboard thead th.col-right, .momentum-leaderboard tbody td.col-right { text-align: right; }
.momentum-leaderboard tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.15s ease; cursor: pointer; }
.momentum-leaderboard tbody tr:hover { background: rgba(99, 102, 241, 0.07); }
.momentum-leaderboard tbody tr.row-strong-bull { background: rgba(99, 102, 241, 0.05); }
.momentum-leaderboard tbody tr.row-bull { background: rgba(16, 185, 129, 0.03); }
.momentum-leaderboard tbody tr.row-bear { background: rgba(239, 68, 68, 0.03); }
.momentum-leaderboard tbody td { padding: 11px 14px; vertical-align: middle; color: var(--text-primary); }
.momentum-rank-cell { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); width: 36px; text-align: center; }
.momentum-ticker-cell { display: flex; flex-direction: column; gap: 1px; }
.momentum-ticker-symbol { font-weight: 700; font-size: 0.9rem; color: var(--accent-indigo); letter-spacing: 0.02em; }
.momentum-ticker-company { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.momentum-score-cell { min-width: 140px; }
.momentum-score-bar-wrap { display: flex; align-items: center; gap: 8px; }
.momentum-score-bar-track { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.07); border-radius: 4px; overflow: hidden; }
.momentum-score-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s var(--ease); background: var(--gradient-accent); }
.momentum-score-value { font-size: 0.8rem; font-weight: 700; min-width: 36px; text-align: right; color: var(--text-primary); }
.momentum-return-pos { color: var(--color-emerald); font-weight: 600; }
.momentum-return-neg { color: var(--color-crimson); font-weight: 600; }
.momentum-return-neu { color: var(--text-secondary); }
.momentum-rsi-pill, .momentum-sma-pill, .momentum-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    font-weight: 700;
    justify-content: center;
}
.momentum-rsi-pill { padding: 3px 9px; font-size: 0.75rem; min-width: 46px; }
.momentum-rsi-pill.rsi-hot { background: rgba(239, 68, 68, 0.18); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); }
.momentum-rsi-pill.rsi-warm { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.momentum-rsi-pill.rsi-ok { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.momentum-rsi-pill.rsi-cold { background: rgba(255, 255, 255, 0.06); color: var(--text-muted); border: 1px solid var(--border-color); }
.momentum-sma-pill { padding: 3px 9px; font-size: 0.75rem; }
.momentum-sma-pill.sma-above { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.momentum-sma-pill.sma-below { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.momentum-sma-pill.sma-na { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border: 1px solid var(--border-color); }
.momentum-signal-badge { padding: 4px 10px; font-size: 0.72rem; white-space: nowrap; gap: 5px; }
.momentum-signal-badge.sig-strong-bull { background: rgba(99, 102, 241, 0.18); color: var(--color-indigo); border: 1px solid rgba(99, 102, 241, 0.4); }
.momentum-signal-badge.sig-bull { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.momentum-signal-badge.sig-neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid var(--border-color); }
.momentum-signal-badge.sig-bear { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.momentum-skeleton-row td { padding: 12px 14px; }
.momentum-skeleton-bar {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.momentum-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.momentum-empty-state i { font-size: 2.5rem; opacity: 0.35; }

/* ---------------------------------------------------------------------
   34. MODALS
   --------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 780px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s var(--ease);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-overlay.open .modal-card { transform: scale(1) translateY(0); }
.onboarding-field { margin-bottom: 20px; }
.onboarding-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.onboarding-options { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.btn-close-modal { background: transparent; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 4px; transition: color 0.2s ease; }
.btn-close-modal:hover { color: var(--color-crimson); }
.modal-body { padding: 22px; max-height: 70vh; overflow-y: auto; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.15); }

.overall-sentiment-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.overall-sentiment-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--text-muted); }
.overall-sentiment-banner.bullish::before { background: var(--color-emerald); }
.overall-sentiment-banner.bearish::before { background: var(--color-crimson); }
.overall-sentiment-banner.neutral::before { background: var(--color-amber); }
.banner-gauge-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); }
.banner-info { display: flex; flex-direction: column; gap: 3px; }
.banner-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.banner-value { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin: 0; line-height: 1.1; }
.banner-desc { font-size: 0.8rem; color: var(--text-secondary); margin: 4px 0 0; }
.indexes-details-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.index-details-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.index-details-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.15); }
.index-details-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.index-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.index-card-title { display: flex; flex-direction: column; gap: 2px; }
.index-card-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: white; }
.index-card-region { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }
.index-card-sentiment-pill { padding: 3px 8px; border-radius: 12px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.index-card-sentiment-pill.bullish { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.index-card-sentiment-pill.bearish { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); }
.index-card-sentiment-pill.neutral { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.index-card-metrics { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4px; }
.index-card-price { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-primary); }
.index-card-ticker { font-size: 0.72rem; color: var(--text-muted); font-family: monospace; }
.index-card-change-pill { padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; }
.index-card-change-pill.positive { background: rgba(16, 185, 129, 0.15); color: var(--color-emerald); }
.index-card-change-pill.negative { background: rgba(239, 68, 68, 0.15); color: var(--color-crimson); }
.index-card-change-pill.flat { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
.index-card-technical-list { display: flex; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.03); font-size: 0.72rem; }
.technical-indicator { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.technical-indicator.above { color: var(--color-emerald); }
.technical-indicator.below { color: var(--color-crimson); }
.technical-indicator.na { color: var(--text-muted); }
.index-card-chart-hint { color: var(--accent-primary); font-size: 0.72rem; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; }
.index-details-card:hover .index-card-chart-hint,
.index-details-card:focus-visible .index-card-chart-hint { opacity: 1; }

/* ---------------------------------------------------------------------
   35. STAR FAVORITES
   --------------------------------------------------------------------- */
.favorite-star-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 2px 6px;
    transition: transform 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.favorite-star-btn:hover { transform: scale(1.2); color: var(--color-amber); }
.favorite-star-btn.starred { color: var(--color-amber); filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4)); }

/* ---------------------------------------------------------------------
   36. LOGIN OVERLAY (disabled by default)
   --------------------------------------------------------------------- */
#login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 16, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#login-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.login-card {
    background: rgba(17, 20, 28, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    width: 90%;
    max-width: 420px;
    padding: 36px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.login-header { text-align: center; }
.login-logo { font-size: 2.2rem; color: var(--color-primary); margin-bottom: 12px; }
.login-header h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.login-header p { font-size: 0.85rem; color: var(--text-secondary); }
.login-step input, .login-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-step input:focus, .login-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.login-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--r-md); padding: 12px 16px; color: var(--color-crimson); font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   37. DAY / LIGHT THEME
   --------------------------------------------------------------------- */
body.light-theme {
    --bg-darker: #eef2f7;
    --bg-dark: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: rgba(255, 255, 255, 0.97);
    --border-color: rgba(15, 23, 42, 0.1);
    --border-color-active: rgba(99, 102, 241, 0.55);
    --border-table: rgba(15, 23, 42, 0.06);
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-glow: rgba(99, 102, 241, 0.12);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --bg-input: rgba(15, 23, 42, 0.03);
    --bg-hover-row: rgba(15, 23, 42, 0.02);
    --bg-widget: rgba(15, 23, 42, 0.03);
    --bg-badge: rgba(15, 23, 42, 0.06);
    --bg-hover: rgba(15, 23, 42, 0.03);
    --bg-tooltip: #1e293b;
    background-image:
        radial-gradient(circle at 82% 12%, rgba(99, 102, 241, 0.05) 0%, transparent 42%),
        radial-gradient(circle at 8% 88%, rgba(16, 185, 129, 0.03) 0%, transparent 38%) !important;
}
body.light-theme input, body.light-theme select, body.light-theme textarea, body.light-theme button.btn-tab {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}
body.light-theme input::placeholder, body.light-theme textarea::placeholder { color: var(--text-muted) !important; }
body.light-theme .kpi-value, body.light-theme .ticker-symbol, body.light-theme .index-card-name { color: var(--text-primary) !important; }
body.light-theme .nav-item.active { color: white !important; }
body.light-theme .toggle-slider { background-color: rgba(15, 23, 42, 0.12); }
body.light-theme .toggle-slider:before { background-color: #fff; }
body.light-theme .modal-card { background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); }
body.light-theme .dir-signal-pill {
    background: rgba(15, 23, 42, 0.015) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
body.light-theme .dash-select {
    background: rgba(15, 23, 42, 0.03) !important;
    color: var(--text-primary) !important;
}
/* Safety net: any element with hardcoded inline white/light text adapts in light mode */
body.light-theme [style*="color: white"],
body.light-theme [style*="color:white"],
body.light-theme [style*="color: #fff"],
body.light-theme [style*="color:#fff"],
body.light-theme [style*="color: #ffffff"],
body.light-theme [style*="color:#ffffff"],
body.light-theme [style*="color: #e2e8f0"],
body.light-theme [style*="color:#e2e8f0"],
body.light-theme [style*="color: #cbd5e1"],
body.light-theme [style*="color:#cbd5e1"],
body.light-theme [style*="color: #a5b4fc"],
body.light-theme [style*="color:#a5b4fc"],
body.light-theme [style*="color: #c4b5fd"],
body.light-theme [style*="color:#c4b5fd"] {
    color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONVICTION RECOMMENDATIONS — Modern Redesign
   ───────────────────────────────────────────────────────────────────────── */

/* Hero Header */
.recs-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px 18px;
    background: linear-gradient(135deg, rgba(129,140,248,0.06) 0%, rgba(245,158,11,0.04) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.recs-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.recs-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(239,68,68,0.15));
    border: 1px solid rgba(245,158,11,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #fbbf24;
    flex-shrink: 0;
}
.recs-hero-text { display: flex; flex-direction: column; }
.recs-hero-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.recs-hero-subtitle {
    margin: 3px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.recs-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.recs-last-updated {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.07);
}

/* Legend Bar */
.recs-legend-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
}
.recs-legend-signals {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.recs-signal-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.recs-signal-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-color);
    display: inline-block;
    flex-shrink: 0;
}
.recs-threshold-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.recs-thresh-pill {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}
.recs-thresh-pill.thresh-fire {
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border-color: rgba(239,68,68,0.2);
}
.recs-thresh-pill.thresh-buy {
    background: rgba(16,185,129,0.1);
    color: #34d399;
    border-color: rgba(16,185,129,0.2);
}
.recs-thresh-pill.thresh-watch {
    background: rgba(245,158,11,0.1);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.2);
}

/* Country Filter Tab Bar */
.recs-country-tabs-bar {
    display: flex;
    gap: 6px;
    padding: 10px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.01);
    flex-wrap: wrap;
}

/* Tab button styles for recommendations tab */
.recs-country-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
    transition: all 0.18s;
    white-space: nowrap;
}
.recs-country-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255,255,255,0.14);
    color: var(--text-primary);
}
.recs-country-btn.active {
    border-color: rgba(129, 140, 248, 0.4) !important;
    background: rgba(129, 140, 248, 0.14) !important;
    color: #818cf8 !important;
    box-shadow: 0 0 0 1px rgba(129,140,248,0.12);
}

/* Card body */
.recs-card-body { padding: 24px; }
.recs-investor-profile {
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(129, 140, 248, 0.25);
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.07);
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.recs-investor-profile strong { color: var(--text-primary); margin-right: 5px; }
.recs-profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recs-profile-heading button { border: 0; background: none; color: #818cf8; cursor: pointer; font-weight: 700; }
.recs-profile-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.recs-profile-pills span {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.12);
    color: var(--text-primary);
    text-transform: capitalize;
}
.investor-profile-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.investor-profile-card-header h3 { margin: 0 0 5px; font-size: 0.95rem; }
.investor-profile-card-header p { margin: 0; color: var(--text-muted); font-size: 0.78rem; }
.investor-profile-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.investor-profile-field { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(255,255,255,0.02); }
.investor-profile-field span { display: block; color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.investor-profile-field strong { display: block; color: var(--text-primary); font-size: 0.82rem; }

/* Page-level section layout */
.recs-page-section { margin-bottom: 32px; }
.recs-page-section-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.recs-page-section-bar {
    width: 3px;
    height: 20px;
    border-radius: 2px;
    flex-shrink: 0;
}
.recs-page-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.recs-page-section-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Conviction group headers (within picks table rendering) */
.recs-section-wrap { margin-bottom: 24px; }
.recs-section-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    border-left: 3px solid;
}
.recs-section-hdr--conviction {
    background: rgba(239,68,68,0.07);
    border-color: #ef4444;
}
.recs-section-hdr--buy {
    background: rgba(16,185,129,0.07);
    border-color: #10b981;
}
.recs-section-hdr--watch {
    background: rgba(245,158,11,0.07);
    border-color: #f59e0b;
}
.recs-section-hdr-label {
    font-size: 0.88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
}
.recs-picks-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}

/* Picks table */
.recs-picks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.recs-picks-table thead th {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    white-space: nowrap;
    background: rgba(255,255,255,0.02);
}
.recs-picks-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.15s;
}
.recs-picks-table tbody td {
    padding: 9px 10px;
    vertical-align: middle;
}

/* Cell components */
.recs-ticker-chip {
    font-weight: 800;
    font-size: 0.84rem;
    color: #e2e8f0;
    letter-spacing: 0.02em;
}
.recs-company-name {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.78rem;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.recs-pattern-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.recs-pattern-chip {
    display: inline-block;
    font-size: 0.7rem;
    background: rgba(196,181,253,0.1);
    color: #c4b5fd;
    border: 1px solid rgba(196,181,253,0.15);
    border-radius: 5px;
    padding: 2px 8px;
    white-space: nowrap;
}
.recs-tf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.recs-tf-daily {
    background: rgba(99,102,241,0.14);
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.22);
}
.recs-tf-weekly {
    background: rgba(245,158,11,0.14);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.22);
}
.recs-tf-split {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.recs-signal-buy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(16,185,129,0.12);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.22);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.recs-signal-sell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.22);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.recs-score-bar-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 90px;
}
.recs-score-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}
.recs-score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.recs-score-val {
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 24px;
    text-align: right;
}

/* ── Light theme overrides ────────────────────────────────────────────── */
body.light-theme .recs-hero-header {
    background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, rgba(245,158,11,0.03) 100%);
    border-color: rgba(15,23,42,0.07);
}
body.light-theme .recs-hero-icon {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(239,68,68,0.08));
    border-color: rgba(245,158,11,0.2);
}
body.light-theme .recs-last-updated {
    background: rgba(15,23,42,0.03);
    border-color: rgba(15,23,42,0.07);
}
body.light-theme .recs-legend-bar {
    background: rgba(15,23,42,0.01);
    border-color: rgba(15,23,42,0.06);
}
body.light-theme .recs-thresh-pill.thresh-fire { color: #dc2626; background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.14); }
body.light-theme .recs-thresh-pill.thresh-buy  { color: #059669; background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.14); }
body.light-theme .recs-thresh-pill.thresh-watch { color: #d97706; background: rgba(217,119,6,0.07); border-color: rgba(217,119,6,0.14); }
body.light-theme .recs-country-tabs-bar {
    background: rgba(15,23,42,0.01);
    border-color: rgba(15,23,42,0.06);
}
body.light-theme .recs-country-btn {
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: var(--text-muted) !important;
    background: transparent !important;
}
body.light-theme .recs-country-btn:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: var(--text-primary) !important;
    border-color: rgba(15,23,42,0.18) !important;
}
body.light-theme .recs-country-btn.active {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: rgba(99, 102, 241, 0.1) !important;
    color: #4f46e5 !important;
    box-shadow: 0 0 0 1px rgba(99,102,241,0.1);
}
body.light-theme .recs-picks-table thead th {
    background: rgba(15,23,42,0.025);
    border-color: rgba(15,23,42,0.07);
}
body.light-theme .recs-picks-table tbody tr { border-color: rgba(15,23,42,0.05); }
body.light-theme .recs-ticker-chip { color: var(--text-primary); }
body.light-theme .recs-pattern-chip {
    background: rgba(99,102,241,0.07);
    color: #4f46e5;
    border-color: rgba(99,102,241,0.12);
}
body.light-theme .recs-signal-buy {
    background: rgba(5,150,105,0.08);
    color: #059669;
    border-color: rgba(5,150,105,0.15);
}
body.light-theme .recs-signal-sell {
    background: rgba(220,38,38,0.08);
    color: #dc2626;
    border-color: rgba(220,38,38,0.15);
}
body.light-theme .recs-score-track { background: rgba(15,23,42,0.08); }
body.light-theme .recs-section-hdr--conviction { background: rgba(239,68,68,0.05); }
body.light-theme .recs-section-hdr--buy { background: rgba(16,185,129,0.05); }
body.light-theme .recs-section-hdr--watch { background: rgba(245,158,11,0.05); }
/* Chart toolbar buttons in light theme */
body.light-theme .chart-tb-btn {
    background: rgba(15, 23, 42, 0.03);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
body.light-theme .chart-tb-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.45);
    color: var(--color-primary);
}
body.light-theme .chart-tb-btn-active {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
}

/* ---------------------------------------------------------------------
   37b. LIGHT THEME — VISUALIZER V2 OVERRIDES
   --------------------------------------------------------------------- */

/* Hero header */
body.light-theme .vis-hero {
    background: linear-gradient(180deg, rgba(99,102,241,0.04) 0%, transparent 100%);
}
body.light-theme .vis-hero-price {
    background: rgba(15,23,42,0.04);
    border-color: var(--border-color);
}

/* Toolbar */
body.light-theme .vis-toolbar {
    background: rgba(15,23,42,0.02);
    border-color: var(--border-color);
}

/* Pattern selector dropdown */
body.light-theme .vis-pattern-sel {
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Shared direction badge classes used in hero + ticker list */
.dir-badge-bull {
    background-color: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.28);
    color: var(--accent-green);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dir-badge-bear {
    background-color: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.28);
    color: var(--color-rose);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dir-badge-neutral {
    background-color: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.light-theme .dir-badge-bull     { background-color: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); color: #059669; }
body.light-theme .dir-badge-bear     { background-color: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.35);  color: #dc2626; }
body.light-theme .dir-badge-neutral  { background-color: rgba(15,23,42,0.05);   border-color: rgba(15,23,42,0.12);   color: var(--text-muted); }

/* Hero badges — boost opacity on light so bg is visible */
body.light-theme .vis-badge-pattern {
    background: rgba(99,102,241,0.10);
    color: #4f46e5;
    border-color: rgba(99,102,241,0.35);
}
body.light-theme .vis-badge-tf {
    background: rgba(168,85,247,0.10);
    color: #7c3aed;
    border-color: rgba(168,85,247,0.35);
}
body.light-theme .vis-badge-status {
    background: rgba(16,185,129,0.10);
    color: #059669;
    border-color: rgba(16,185,129,0.35);
}
body.light-theme .vis-badge-momentum {
    background: rgba(245,158,11,0.10);
    color: #d97706;
    border-color: rgba(245,158,11,0.35);
}

/* Sidebar */
body.light-theme .vis-sidebar-v2 {
    background: #fff;
    border-color: var(--border-color);
}
body.light-theme .vis-sidebar-collapsed {
    background: #fff;
    border-color: var(--border-color);
}
body.light-theme .vsb-search input {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}
body.light-theme .vsb-search-clear {
    background: rgba(0,0,0,0.06);
    color: var(--text-muted);
}
body.light-theme .vsb-search-clear:hover {
    background: rgba(0,0,0,0.12);
    color: var(--text-primary);
}
body.light-theme .vsb-pills {
    background: rgba(15,23,42,0.03);
    border-color: var(--border-color);
}
body.light-theme .vsb-pills button.active {
    background: rgba(99,102,241,0.10);
    color: var(--color-primary);
}
body.light-theme .ticker-list-item:hover  { background: rgba(15,23,42,0.03); }
body.light-theme .ticker-list-item.selected {
    background: rgba(99,102,241,0.12);
    color: var(--text-primary) !important;
    border-color: rgba(99,102,241,0.35);
}

/* Trade strip cells */
body.light-theme .trade-levels-strip {
    background: rgba(15,23,42,0.02);
}

/* Timeline */
body.light-theme .vis-tl-head {
    background: rgba(99,102,241,0.04);
}
body.light-theme .vt-dot {
    background: #fff;
}

/* Fund strip */
body.light-theme .vis-fund-cell {
    border-color: var(--border-color);
}
body.light-theme .vfc-green  { background: rgba(16,185,129,0.05); }
body.light-theme .vfc-indigo { background: rgba(99,102,241,0.05); }
body.light-theme .vfc-red    { background: rgba(239,68,68,0.05); }

/* Pattern edu card */
body.light-theme .btn-pattern-insights {
    background: rgba(15,23,42,0.02);
    border-color: var(--border-color);
}

/* Geometry rows */
body.light-theme .vis-geo-rows {
    background: rgba(15,23,42,0.01);
}
body.light-theme .vis-geo-item {
    border-color: var(--border-color);
}

/* Sim strip gradient wash on light */
body.light-theme .vis-sim-strip {
    background: rgba(15,23,42,0.015);
}
body.light-theme .vis-sim-cell {
    border-color: var(--border-color);
}

/* Main content panels */
body.light-theme .vis-main-v2 { background: var(--bg-dark); }
body.light-theme .vis-layout-v2 { background: var(--bg-dark); }
body.light-theme .vis-right-panel { border-color: var(--border-color); }
body.light-theme .vis-fund-grid { border-color: var(--border-color); }
body.light-theme .vis-chart-wrap { background: #f1f5f9; }
body.light-theme .trend-prediction-strip {
    background: linear-gradient(180deg, rgba(99,102,241,0.04), rgba(99,102,241,0.01));
}
body.light-theme .tps-lead {
    background: rgba(99,102,241,0.07);
    color: var(--color-primary);
}
body.light-theme .tps-section:hover { background: rgba(15,23,42,0.02); }
body.light-theme .tps-divider { background: var(--border-color); }

/* Direction inline badge (set via JS inline styles — override via class) */
body.light-theme .badge-confirmed {
    background-color: rgba(16,185,129,0.12) !important;
    border-color: rgba(16,185,129,0.35) !important;
    color: #059669 !important;
}
body.light-theme .badge-forming {
    background-color: rgba(99,102,241,0.12) !important;
    border-color: rgba(99,102,241,0.35) !important;
    color: #4f46e5 !important;
}
body.light-theme .badge-failed {
    background-color: rgba(239,68,68,0.12) !important;
    border-color: rgba(239,68,68,0.35) !important;
    color: #dc2626 !important;
}

/* ---------------------------------------------------------------------
   38. RESPONSIVE BREAKPOINTS
   --------------------------------------------------------------------- */

/* Large desktop down: auto-collapse sidebar to icons */
@media (max-width: 1180px) {
    .sidebar {
        width: var(--sidebar-w-collapsed);
        padding-left: 12px;
        padding-right: 12px;
    }
    .sidebar .logo-text,
    .sidebar .nav-item > span,
    .sidebar .scanner-status-widget,
    .sidebar .sidebar-footer,
    .sidebar .sidebar-user-block {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .sidebar .logo-area { justify-content: center; }
    .sidebar .btn-sidebar-toggle { display: none; }
    .sidebar .nav-item { justify-content: center; padding: 12px 0; }
    .sidebar .nav-item i { width: auto; }
    .sidebar .nav-item::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--bg-tooltip);
        color: #fff;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.8rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 100;
        box-shadow: var(--shadow-md);
    }
    .sidebar .nav-item:hover::after { opacity: 1; }
    .dashboard-columns-container { grid-template-columns: 1fr; gap: 28px; }
    .winning-sectors-grid { grid-template-columns: repeat(3, 1fr); }
    .momentum-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .visualizer-grid { grid-template-columns: 1fr; }
    .visualizer-control-card { height: auto; max-height: 420px; }
}

/* Flex rows stack */
@media (max-width: 992px) {
    .flex-row-responsive { flex-direction: column; }
    .dir-grid-layout { grid-template-columns: 1fr !important; }
    .form-group-row { grid-template-columns: 1fr; }
    .content-row { flex-direction: column; }
}

/* Tablet / mobile: switch sidebar to off-canvas drawer */
@media (max-width: 768px) {
    .main-content { --mc-pad-y: 18px; --mc-pad-x: 16px; }

    .btn-mobile-menu { display: inline-flex; }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--sidebar-w);
        padding: 20px 16px;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
        z-index: 700;
    }
    .sidebar.mobile-open { transform: translateX(0); }
    /* Override is-collapsed when mobile-open so all labels/sections are visible */
    .sidebar.mobile-open.is-collapsed {
        width: var(--sidebar-w);
        padding-left: 16px;
        padding-right: 16px;
    }
    .sidebar.mobile-open.is-collapsed .logo-text,
    .sidebar.mobile-open.is-collapsed .nav-item > span,
    .sidebar.mobile-open.is-collapsed .scanner-status-widget,
    .sidebar.mobile-open.is-collapsed .sidebar-footer,
    .sidebar.mobile-open.is-collapsed .sidebar-user-block,
    .sidebar.mobile-open.is-collapsed .nav-section-title {
        opacity: 1;
        visibility: visible;
        max-width: none;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
    }
    .sidebar.mobile-open.is-collapsed .nav-item {
        justify-content: flex-start;
        padding: 11px 14px;
    }
    .sidebar.mobile-open.is-collapsed .nav-item::after { display: none; }
    .sidebar.mobile-open.is-collapsed .logo-area { justify-content: flex-start; }
    /* Restore full labels inside mobile drawer */
    .sidebar .logo-text,
    .sidebar .nav-item > span,
    .sidebar .scanner-status-widget,
    .sidebar .sidebar-footer,
    .sidebar .sidebar-user-block {
        opacity: 1;
        visibility: visible;
        max-width: none;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
    }
    .sidebar .scanner-status-widget { padding: 16px; margin: 16px 0; }
    .sidebar .sidebar-footer { padding-top: 14px; border-top: 1px solid var(--border-color); }
    .sidebar .nav-item { justify-content: flex-start; padding: 11px 14px; }
    .sidebar .nav-item i { width: 22px; }
    .sidebar .nav-item::after { display: none; }
    .sidebar .logo-area { justify-content: flex-start; }
    .sidebar .btn-sidebar-toggle { display: none; }
    .sidebar .btn-sidebar-close { display: inline-flex; }

    .top-bar { gap: 12px; }
    .page-title-section h1 { font-size: 1.35rem; }
    .top-bar-actions { gap: 8px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .kpi-card { padding: 16px; gap: 12px; }
    .kpi-icon { width: 40px; height: 40px; font-size: 1.05rem; }
    .kpi-value { font-size: 1.35rem; }
    .winning-sectors-grid { grid-template-columns: repeat(2, 1fr); }
    .momentum-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .indexes-details-grid { grid-template-columns: 1fr; }
    .dashboard-filters-layout { grid-template-columns: 1fr; }
    .card-header { flex-wrap: wrap; gap: 12px; }
    .patterns-grid { grid-template-columns: 1fr; }
}

/* Small mobile */
@media (max-width: 480px) {
    .main-content { --mc-pad-y: 14px; --mc-pad-x: 12px; }
    .kpi-grid { grid-template-columns: 1fr; }
    .winning-sectors-grid { grid-template-columns: 1fr; }
    .momentum-stats-grid { grid-template-columns: 1fr; }
    .page-title-section h1 { font-size: 1.2rem; }
    .subtitle { font-size: 0.82rem; }
    .last-scan-badge { display: none; }
    .card-body { padding: 16px; }
    .modal-body { padding: 16px; }
}

/* ─── Agent Search (AI Goal Search Tab) ───────────────────────────────────── */

.agent-example-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: var(--font-body);
}
.agent-example-pill:hover {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.35);
    color: var(--accent-blue);
    transform: translateY(-1px);
}

#agent-search-input:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}

#table-agent-results tbody tr {
    transition: background 0.15s ease;
}
#table-agent-results tbody tr:hover {
    background: rgba(99,102,241,0.06);
}

.agent-filter-pill {
    transition: opacity 0.15s ease;
}
.agent-filter-pill:hover {
    opacity: 0.8;
}

/* ---------------------------------------------------------------------
   40. DASHBOARD REDESIGN (data-first landing)
   --------------------------------------------------------------------- */

/* Slim KPI strip */
.kpi-strip {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 16px;
    backdrop-filter: blur(12px);
}
.kpi-strip .kpi-cell {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 22px;
    border-right: 1px solid var(--border-color);
    transition: background var(--transition-speed) ease;
}
.kpi-strip .kpi-cell:last-child { border-right: none; }
.kpi-strip .kpi-cell:hover { background: var(--bg-hover); }
.kpi-strip .kpi-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
.kpi-strip .kpi-value { font-size: 1.4rem; }
.kpi-strip .kpi-label { font-size: 0.7rem; }

/* Spotlight strip */
.spotlight-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.spot-card {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform var(--transition-speed) var(--ease), border-color var(--transition-speed) ease;
}
.spot-card:hover { transform: translateY(-3px); border-color: var(--border-color-active); }
.spot-card .spot-glow {
    position: absolute; right: -30px; top: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    filter: blur(40px); opacity: 0.16; pointer-events: none;
}
.spot-card.hot .spot-glow { background: var(--color-amber); }
.spot-card.momentum .spot-glow { background: var(--color-emerald); }
.spot-card.rr .spot-glow { background: var(--color-blue); }
.spot-card .spot-tag {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.spot-card.hot .spot-tag { color: var(--color-amber); }
.spot-card.momentum .spot-tag { color: var(--color-emerald); }
.spot-card.rr .spot-tag { color: var(--color-blue); }
.spot-card .spot-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spot-card .spot-tick { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; }
.spot-card .spot-sub { font-size: 0.74rem; color: var(--text-secondary); margin-top: 2px; }
.spot-card .spot-num { text-align: right; flex-shrink: 0; }
.spot-card .spot-num b { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; display: block; }
.spot-card .spot-num b.pos { color: var(--color-emerald); }
.spot-card .spot-num b.neg { color: var(--color-crimson); }
.spot-card .spot-num span { font-size: 0.7rem; color: var(--text-muted); }

/* Filter command bar + collapsible drawer */
.fcb-toggle.active { background: var(--color-primary-glow) !important; border-color: var(--border-color-active) !important; color: var(--color-indigo) !important; }
.main-filters-collapse { display: none; }
.main-filters-collapse.open { display: block; animation: filtersReveal 0.25s var(--ease); }
@keyframes filtersReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Backdrop for the mobile bottom-sheet below. Hidden on desktop; shown/hidden in
   sync with #main-filters-collapse.open by the toggle handler in core.js. */
.main-filters-backdrop { display: none; }
.filter-drawer-sheet-handle { display: none; }

@media (max-width: 768px) {
    /* item #20: on mobile, #main-filters-collapse.open renders as a ~1,000px inline
       block that shoves the page far down when opened. Style it as a fixed bottom
       sheet instead — a tap-to-dismiss backdrop plus an in-sheet Close affordance,
       since the toolbar toggle button that opened it ends up covered by the sheet. */
    .main-filters-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        animation: filtersBackdropReveal 0.2s var(--ease);
    }
    @keyframes filtersBackdropReveal {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    .main-filters-collapse.open {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 2000;
        max-height: 80vh;
        overflow-y: auto;
        margin: 0;
        border-top-left-radius: var(--r-xl, 16px);
        border-top-right-radius: var(--r-xl, 16px);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
        animation: filtersSheetReveal 0.25s var(--ease);
    }
    @keyframes filtersSheetReveal {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .main-filters-collapse.open .filter-drawer-card {
        border-radius: 0;
        border-bottom: none;
    }
    .filter-drawer-sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 10px 16px 4px;
    }
    .filter-drawer-sheet-handle .sheet-grip {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-color);
    }
    .filter-drawer-sheet-handle .sheet-close-btn {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-badge, rgba(255,255,255,0.06));
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-size: 0.8rem;
        font-weight: 600;
        padding: 6px 12px;
        border-radius: var(--border-radius-md, 8px);
        cursor: pointer;
    }
}

/* Winning sectors -> slim horizontal rail */
.winning-sectors-strip { padding: 16px 18px; }
.winning-sectors-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.winning-sectors-grid .winning-sector-card {
    flex: 0 0 248px;
}

@media (max-width: 900px) {
    .kpi-strip { flex-wrap: wrap; }
    .kpi-strip .kpi-cell { flex: 1 1 45%; }
    .spotlight-strip { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   41. RESULTS TAB REDESIGN (data-first detailed view)
   --------------------------------------------------------------------- */

/* Quality metrics strip */
.results-quality-strip {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.results-quality-strip::-webkit-scrollbar { height: 5px; }
.quality-card {
    flex: 0 0 210px;
    padding: 13px 16px;
    border-radius: var(--r-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
}
.quality-card .q-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.quality-card .q-value {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.quality-card .q-bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.quality-card .q-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
}

/* Dashboard standalone command bar */
.dashboard-cmdbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    backdrop-filter: blur(12px);
}
/* D7a: one command bar on desktop — .cmdbar-v2 (in the Active Patterns card)
   is the single visible search+Filters+Reset entry point there. On mobile
   this row is repurposed into a compact Filters+Reset bar instead (see the
   #tab-dashboard media query further down), so only hide it at desktop
   widths. */
@media (min-width: 769px) {
    #tab-dashboard .dashboard-cmdbar { display: none; }
}

/* Filter drawer card (replaces .card-body inside collapsed drawer) */
.filter-drawer-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 14px;
    backdrop-filter: blur(12px);
}
.filter-drawer-body {
    padding: 20px 24px;
}

/* Active Patterns column headers (clean, minimal) */
.col-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
}
.col-header-bar h3 {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Context chips */
.results-context-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.ctx-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s var(--ease);
    user-select: none;
    background: var(--bg-card);
}
.ctx-chip:hover {
    border-color: var(--border-color-active);
    background: var(--color-primary-glow);
}
.ctx-chip.active {
    border-color: var(--border-color-active);
    background: var(--color-primary-glow);
    color: var(--color-indigo);
}

/* Command bar */
.results-command-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rcb-search {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    backdrop-filter: blur(12px);
}

/* Results table redesign */
.results-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.results-card-head h2 {
    font-size: 1.02rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}
.results-card-head .meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
}
.results-table th {
    text-align: left;
    padding: 10px 18px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.results-table th.r,
.results-table td.r { text-align: right; }
.results-table td {
    padding: 11px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.82rem;
    vertical-align: middle;
}
.results-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}
.results-table tbody tr:hover { background: rgba(255,255,255,0.025); }

/* Ticker avatar cell */
.rt-tick {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rt-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--bg-badge);
    color: var(--color-indigo);
    flex-shrink: 0;
}
.rt-avatar.bull { background: rgba(16,185,129,0.12); color: var(--color-emerald); }
.rt-avatar.bear { background: rgba(239,68,68,0.12); color: var(--color-crimson); }
.rt-name b { font-weight: 600; }
.rt-name span { display: block; font-size: 0.7rem; color: var(--text-muted); }

/* Tag pills */
.rt-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.rt-tag.bull { color: var(--color-emerald); background: rgba(16,185,129,0.12); }
.rt-tag.bear { color: var(--color-crimson); background: rgba(239,68,68,0.12); }
.rt-tag.conf { color: var(--color-blue); background: rgba(59,130,246,0.12); }
.rt-tag.form { color: var(--color-amber); background: rgba(245,158,11,0.12); }
.rt-tag.time { color: var(--color-indigo); background: rgba(99,102,241,0.12); }

/* Confidence bar */
.rt-confbar {
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
.rt-confbar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-brand);
}
.rt-confwrap {
    display: flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 600;
}

/* Value colors */
.rt-up   { color: var(--color-emerald); font-weight: 600; }
.rt-down { color: var(--color-crimson); font-weight: 600; }
.rt-muted { color: var(--text-muted); }

/* Action button */
.rt-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: rgba(99,102,241,0.08);
    color: var(--color-indigo);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}
.rt-action:hover {
    background: var(--color-primary-glow);
    border-color: var(--border-color-active);
}

/* Advanced filters drawer */
.results-advanced-filters {
    display: none;
}
.results-advanced-filters.open {
    display: block;
    animation: filtersReveal 0.25s var(--ease);
}
.results-advanced-filters .card-full-width {
    margin-bottom: 14px;
}

/* Pattern card polish (redesign-compatible) */
.pattern-card {
    padding: 14px 16px !important;
    border-radius: var(--r-md) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    transition: transform 0.15s ease, border-color 0.2s ease;
}
.pattern-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-active) !important;
}
.pattern-card .ticker-symbol {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}
.pattern-card .company-name {
    max-width: 160px !important;
}
.pattern-card-header {
    margin-bottom: 6px;
}
.pattern-card-body .pattern-metric-row {
    font-size: 0.78rem;
    padding: 3px 0;
}
.pattern-card-body .pattern-metric-row span:first-child {
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   42. DASHBOARD V2 REDESIGN (data-first hero table)
   --------------------------------------------------------------------- */

/* Slim inline KPI strip */
.kpi-strip-v2 {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 16px;
    backdrop-filter: blur(12px);
}
.kpi-strip-v2 .k {
    flex: 1;
    padding: 14px 20px;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 13px;
}
.kpi-strip-v2 .k:last-child { border-right: none; }
.k-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.k-meta .lbl {
    color: var(--text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.k-meta .val {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.k-meta .val small { font-size: 0.7rem; font-weight: 600; }
/* Desktop KPI tiers (v3 stage 2): sub-line, tappable status filters, side tile */
.k-meta .k-sub {
    color: var(--text-muted);
    font-size: 0.68rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-strip-v2 .k.k-tappable {
    cursor: pointer;
    position: relative;
    transition: background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.kpi-strip-v2 .k.k-tappable:hover { background: rgba(99, 102, 241, 0.06); }
.kpi-strip-v2 .k.k-tappable.is-active { background: rgba(99, 102, 241, 0.08); }
.kpi-strip-v2 .k.k-tappable.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--color-primary);
}
.kpi-strip-v2 .k.k-side {
    flex: 0 0 auto;
    min-width: 190px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    background: var(--bg-subtle, rgba(127, 127, 127, 0.04));
}
.kpi-strip-v2 .k.k-side .k-side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.74rem;
    color: var(--text-secondary);
}
.kpi-strip-v2 .k.k-side .k-side-row b {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Smart command bar */
.cmdbar-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.cmdbar-v2 .search-box {
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    backdrop-filter: blur(12px);
}
.cmdbar-v2 .search-box input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    font-family: var(--font-body);
}
.cmdbar-v2 .search-box i { color: var(--text-muted); }
.cmdbar-v2 .seg {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 3px;
    backdrop-filter: blur(12px);
}
.cmdbar-v2 .seg button {
    padding: 7px 13px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.18s var(--ease);
    font-family: var(--font-body);
}
.cmdbar-v2 .seg button.active {
    background: var(--gradient-brand);
    color: #fff;
}
.cmdbar-v2 .seg.green button.active {
    background: var(--gradient-emerald);
}
.cmdbar-v2 .filter-btn { position: relative; }
.cmdbar-v2 .filter-btn .badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    padding: 0 4px;
}

/* Spotlight cards */
.spotlight-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.spot-v2 {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    border-radius: var(--r-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: 0.2s var(--ease);
}
.spot-v2:hover {
    transform: translateY(-3px);
    border-color: var(--border-color-active);
}
.spot-v2 .s-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.spot-v2.hot .s-tag { color: var(--color-amber); }
.spot-v2.momentum .s-tag { color: var(--color-emerald); }
.spot-v2.risk .s-tag { color: var(--color-blue); }
.spot-v2 .s-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.spot-v2 .s-tick {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}
.spot-v2 .s-sub {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 2px;
}
.spot-v2 .s-num { text-align: right; }
.spot-v2 .s-num b {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
}
.spot-v2 .s-num span {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.spot-v2 .glow {
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.18;
}
.spot-v2.hot .glow { background: var(--color-amber); }
.spot-v2.momentum .glow { background: var(--color-emerald); }
.spot-v2.risk .glow { background: var(--color-blue); }

/* Sector rail */
.rail-v2 {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 6px;
}
.rail-v2::-webkit-scrollbar { height: 5px; }
.schip-v2 {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border-radius: var(--r-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.18s var(--ease);
}
.schip-v2:hover { border-color: var(--border-color-active); }
.schip-v2 .rk {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.schip-v2 .sn b { font-weight: 600; font-size: 0.84rem; }
.schip-v2 .sn span { display: block; font-size: 0.7rem; color: var(--text-muted); }
.schip-v2 .wr {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-emerald);
    font-size: 0.95rem;
}
.rail-lbl-v2 {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px 2px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Reconciling equation under the KPI strip */
.equation-v2 {
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: -8px 0 16px;
}
.equation-v2 b { color: var(--text-secondary); font-weight: 700; }

/* Dashboard search fallback: shown when the search box matches no currently
   active pattern, listing matches from the full scanned-stock database. */
.dashboard-search-fallback {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 12px 16px;
    margin-bottom: 16px;
}
.dsf-loading, .dsf-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dsf-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dsf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dsf-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.dsf-chip:hover {
    border-color: var(--color-indigo);
    background: rgba(99,102,241,0.08);
}
.dsf-chip-ticker {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, var(--text-secondary));
}
.dsf-chip-name {
    font-size: 0.68rem;
    color: var(--text-muted);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Market Intelligence collapsed bar (v3 redesign) */
.mi-bar-v3 {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
}
.mi-bar-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.mi-bar-header:hover { background: rgba(255,255,255,0.03); }
.mi-bar-header h2 {
    margin: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.mi-bar-pills {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.mi-pill-v3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.mi-bar-expand {
    font-size: 0.78rem;
    color: var(--color-indigo);
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}
.mi-bar-expand i { transition: transform 0.2s; }
.mi-bar-v3.expanded .mi-bar-expand i { transform: rotate(180deg); }
.mi-bar-content {
    padding: 0 20px 20px;
    border-top: 1px solid var(--border-color);
}

/* Two-column hero zone: Pattern Explorer (left) | Signals + Sector Rail (right) */
.zone-v2 {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
}
.zone-v2 > * { min-width: 0; }
.zone-v2-main { display: flex; flex-direction: column; min-width: 0; }

/* Pattern Explorer card */
.pattern-explorer-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    backdrop-filter: blur(12px);
    overflow: hidden;
}
.pattern-explorer-v2 .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.pattern-explorer-v2 .card-head h2 {
    font-size: 0.96rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.pattern-explorer-v2 .card-head .meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 400;
}
/* Direction filter pills: ▲ bullish / ▼ bearish, tap to filter, tap again to
   clear. Replaces the old informational boxed "tabs" counter. */
.pxg-dir-filter { display: inline-flex; gap: 5px; align-items: center; }
.pxg-dir-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pxg-dir-btn.pxg-dir-bull { color: #10b981; }
.pxg-dir-btn.pxg-dir-bear { color: #ef4444; }
.pxg-dir-btn.pxg-dir-bull.active {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.55);
}
.pxg-dir-btn.pxg-dir-bear.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.55);
}

.pattern-explorer-v2 .tabs {
    display: inline-flex;
    gap: 2px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 3px;
}
.pattern-explorer-v2 .tabs button {
    padding: 5px 11px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
}
.pattern-explorer-v2 .tabs button.active {
    background: var(--bg-badge);
    color: var(--text-primary);
}
.pxg-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 640px;
    overflow-y: auto;
}
/* Desktop category grouping (see renderPatternExplorerV2) — not used on mobile,
   which keeps its own flat horizontal rail. */
.pxg-category-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 6px 5px;
    cursor: pointer;
    user-select: none;
}
.pxg-category-header:first-child { padding-top: 1px; }
.pxg-category-header:hover .pxg-cat-label { color: var(--text-primary); }
.pxg-cat-chevron { font-size: 0.6rem; color: var(--text-muted); width: 9px; }
.pxg-cat-icon { font-size: 0.72rem; color: var(--color-indigo); }
.pxg-cat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.pxg-cat-count {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-muted);
}
.pxg-category-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 3px;
}
.pxg {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 11px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.16s var(--ease);
    position: relative;
}
.pxg:hover { border-color: var(--border-color-active); transform: translateX(2px); }
.pxg.active { border-color: var(--color-indigo); background: rgba(99, 102, 241, 0.09); }
.pxg.inactive { opacity: 0.4; cursor: not-allowed; }
.pxg .pxg-glyph {
    width: 50px;
    height: 24px;
    flex-shrink: 0;
    background: var(--bg-input);
    border-radius: 6px;
    padding: 2px 3px;
}
.pxg .pxg-glyph polyline {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pxg.bull .pxg-glyph polyline { stroke: var(--color-emerald); }
.pxg.bear .pxg-glyph polyline { stroke: var(--color-rose); }
.pxg .pxg-mid { flex: 1; min-width: 0; }
.pxg .pxg-name { font-size: 0.76rem; font-weight: 600; color: var(--text-primary); }
.pxg .pxg-meta { font-size: 0.62rem; color: var(--text-muted); margin-top: 1px; }
.pxg .pxg-count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 2px 8px;
    border-radius: 8px;
    flex-shrink: 0;
}
.pxg.bull .pxg-count { color: var(--color-emerald); background: rgba(16, 185, 129, 0.1); }
.pxg.bear .pxg-count { color: var(--color-rose); background: rgba(239, 68, 68, 0.1); }
/* D7b: direction glyph on the merged chip rail (replaces the separate bull/bear tabs) */
.pxg.bull .pxg-dir-glyph { color: var(--color-emerald); }
.pxg.bear .pxg-dir-glyph { color: var(--color-rose); }
.pxg .pxg-info {
    color: var(--text-muted);
    font-size: 0.72rem;
    flex-shrink: 0;
    padding: 4px;
    cursor: pointer;
}
.pxg .pxg-info:hover { color: var(--color-indigo); }
/* Info popover */
.pxg-pop {
    position: relative;
    margin: 2px 4px 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--color-indigo);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.pxg-pop h4 {
    font-size: 0.76rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.pxg-pop .pxg-pop-stats { display: flex; gap: 14px; margin: 8px 0; flex-wrap: wrap; }
.pxg-pop .pxg-pop-stat { font-size: 0.62rem; color: var(--text-muted); }
.pxg-pop .pxg-pop-stat b {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.84rem;
    color: var(--text-primary);
    margin-top: 1px;
}
.pxg-pop .pxg-pop-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--color-indigo);
    font-weight: 600;
    font-size: 0.7rem;
    cursor: pointer;
}
@media (max-width: 1100px) {
    .zone-v2 { grid-template-columns: 1fr; }
    .pxg-list { max-height: 320px; }
}

/* Mobile Pattern-rail popover bottom sheet: relocated to <body> by
   renderPatternExplorerV2 so the rail's horizontal overflow can't clip it.
   Only shown on mobile (display toggled by JS). */
#pxg-pop-sheet { display: none; }
#pxg-pop-sheet .pxg-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
}
#pxg-pop-sheet .pxg-sheet-body {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2000;
    max-height: 65vh;
    overflow-y: auto;
}
#pxg-pop-sheet .pxg-pop {
    margin: 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

/* Hero results table card */
.hero-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--r-xl);
    backdrop-filter: blur(12px);
    overflow: hidden;
    margin-bottom: 18px;
}
.hero-table-card .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.hero-table-card .card-head h2 {
    font-size: 1.02rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}
.hero-table-card .card-head .meta {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.hero-table-card .tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.hero-table-card .tabs button {
    padding: 6px 13px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--font-body);
}
.hero-table-card .tabs button.active {
    background: var(--bg-badge);
    color: var(--text-primary);
}

/* Hero table */
.hero-table {
    width: 100%;
    border-collapse: collapse;
}
.hero-table th {
    text-align: left;
    padding: 11px 22px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.hero-table th.r,
.hero-table td.r { text-align: right; }
.hero-table td {
    padding: 13px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.82rem;
    vertical-align: middle;
}
.hero-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}
.hero-table tbody tr:hover { background: rgba(255,255,255,0.025); }

/* Ticker cell in hero table */
.hero-tick {
    display: flex;
    align-items: center;
    gap: 11px;
}
.hero-tick .av {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    background: var(--bg-badge);
    color: var(--color-indigo);
    flex-shrink: 0;
}
.hero-tick .av.bull { background: rgba(16,185,129,0.12); color: var(--color-emerald); }
.hero-tick .av.bear { background: rgba(239,68,68,0.12); color: var(--color-crimson); }
.hero-tick .nm b { font-weight: 600; }
.hero-tick .nm span { display: block; font-size: 0.7rem; color: var(--text-muted); }
/* Rows from different markets share one table (default "All Scans" view) — this
   makes the $ / ₹ mix read as intentional instead of a data-quality glitch. */
.hero-mkt-flag { display: inline; font-size: 0.72rem; margin-right: 1px; }
/* Muted em-dash instead of a bare "N/A" for metrics that genuinely don't apply
   to a pattern type (e.g. R:R for patterns with no stop-loss concept). */
.hero-na { color: var(--text-muted); opacity: 0.55; }
/* Price/upside chip lives in the ticker cell only on mobile; on desktop the
   table has dedicated Price/Upside columns, so hide it here. */
.hero-tick .nm .nm-quote { display: none; }
/* Mobile sort dropdown — desktop uses the sortable column headers instead. */
.hero-mobile-sort { display: none; }
/* Responsive column-header labels: full word on desktop, abbreviation on
   mobile (the narrow Confidence column clips "Confidence"). */
.hero-table th .th-sm { display: none; }
.hero-table th .th-lg { display: inline; }

/* Sortable table headers */
.hero-table th.sortable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    padding-right: 18px;
}
.hero-table th.sortable::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid var(--text-muted);
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-table th.sortable.asc::after,
.hero-table th.sortable.desc::after {
    opacity: 1;
    border-bottom-color: var(--color-primary);
}
.hero-table th.sortable.asc::after {
    transform: translateY(-50%) rotate(180deg);
}
.hero-table th.sortable:hover::after {
    opacity: 0.7;
}

/* Tags in hero table */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.hero-tag.bull { color: var(--color-emerald); background: rgba(16,185,129,0.12); }
.hero-tag.bear { color: var(--color-crimson); background: rgba(239,68,68,0.12); }
.hero-tag.conf { color: var(--color-blue); background: rgba(59,130,246,0.12); }
.hero-tag.form { color: var(--color-amber); background: rgba(245,158,11,0.12); }

/* Sparkline bars */
.spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 26px;
    width: 64px;
}
.spark i {
    flex: 1;
    border-radius: 1px;
    background: var(--color-emerald);
    opacity: 0.55;
}
.spark.bear i { background: var(--color-crimson); }
/* The Pattern-cell sparkline is mobile-only; desktop uses the dedicated
   Trend column, so hide it here. */
.pattern-cell-spark { display: none; }

/* Confidence bar in hero table */
.hero-confbar {
    width: 74px;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-badge);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.hero-confbar b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-brand);
}
.hero-confwrap {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Upside column: three fixed slots — move % · target price · progress-to-target meter.
   The column minimums are the whole point: without them each row sizes to its own
   price string ($1.67 vs ₹1165.04), so the meters land at a different x-position on
   every row and read as scattered marks instead of a scale you can compare down the
   column. Tabular figures keep the digits from shifting for the same reason. */
.hero-upside {
    display: inline-grid;
    grid-template-columns: minmax(3.5rem, auto) minmax(4.6rem, auto) 42px;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-align: right;
}
.hero-upside .hu-pct {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hero-upside .hu-tgt {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.hero-upside .hu-meter {
    width: 42px;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-badge);
    /* Inset ring instead of a border: a border on an empty meter reads as an
       empty input field, which is what made the old bar look like a stray line. */
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    overflow: hidden;
    justify-self: end;
}
.hero-upside .hu-meter b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--hu-fill, var(--color-emerald));
    min-width: 2px; /* a 1% fill stays visible as a dot rather than vanishing */
}
.hero-upside.is-hit .hu-pct {
    color: var(--color-emerald);
    font-weight: 700;
}

/* D7d: row-expansion (T2 Date/Price/Target/Trend), replaces always-visible/
   responsively-hidden columns with a tap-to-reveal strip. */
.hero-expand-th { width: 32px; }
.hero-expand-td { text-align: center; color: var(--text-muted); cursor: pointer; width: 32px; }
.hero-expand-td:hover { color: var(--text-primary); }
.hero-row-expand td { background: rgba(99, 102, 241, 0.04); border-left: 2px solid var(--color-indigo); padding: 8px 18px; }
.hero-expand-strip {
    display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
    font-size: 0.74rem; color: var(--text-secondary);
}
.hero-expand-strip b { color: var(--text-primary); font-weight: 700; }
.hero-expand-open { margin-left: auto; color: var(--color-indigo); font-weight: 700; cursor: pointer; }

/* Text trend utilities */
.up { color: var(--color-emerald); }
.down { color: var(--color-crimson); }

/* Hide on small screens */
@media (max-width: 1000px) {
    .spotlight-v2 { grid-template-columns: 1fr; }
    .kpi-strip-v2 { flex-wrap: wrap; }
    .kpi-strip-v2 .k { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border-color); }
    .hide-sm { display: none !important; }
}

/* ============================================================
   Macro Intelligence Tab
   ============================================================ */

/* Theme filter buttons */
.macro-theme-btn {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.macro-theme-btn:hover {
    background: rgba(129,140,248,0.1);
    border-color: rgba(129,140,248,0.3);
    color: #818cf8;
}
.macro-theme-btn.active {
    background: rgba(129,140,248,0.15);
    border-color: rgba(129,140,248,0.4);
    color: #818cf8;
}

/* Macro signal pill */
.macro-signal-pill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}
.macro-signal-pill .sp-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
}
.macro-signal-pill .sp-value {
    font-size: 0.9rem;
    font-weight: 700;
}
.macro-signal-pill .sp-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.macro-signal-pill.bullish  { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.05); }
.macro-signal-pill.bearish  { border-color: rgba(239,68,68,0.25);  background: rgba(239,68,68,0.05); }
.macro-signal-pill.neutral  { border-color: rgba(148,163,184,0.2); background: rgba(148,163,184,0.04); }
.macro-signal-pill.risk-off { border-color: rgba(251,191,36,0.25); background: rgba(251,191,36,0.05); }
.macro-signal-pill.risk-on  { border-color: rgba(16,185,129,0.2);  background: rgba(16,185,129,0.04); }

/* Sector badge */
.macro-sector-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    cursor: default;
    border: 1px solid;
    transition: transform 0.15s;
}
.macro-sector-badge:hover { transform: translateY(-2px); }
.macro-sector-badge.buy  { background: rgba(16,185,129,0.08);  border-color: rgba(16,185,129,0.3);  color: #34d399; }
.macro-sector-badge.hold { background: rgba(148,163,184,0.07); border-color: rgba(148,163,184,0.2); color: #94a3b8; }
.macro-sector-badge.sell { background: rgba(239,68,68,0.08);   border-color: rgba(239,68,68,0.25);  color: #f87171; }
.macro-sector-badge .msd-action { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

/* Thematic ETF table rows */
#macro-themes-tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s;
}
#macro-themes-tbody tr:hover { background: rgba(255,255,255,0.03); }
#macro-themes-tbody td { padding: 10px; }

/* Score bar inside table */
.macro-score-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.macro-score-bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
}
.macro-score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.macro-score-num {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 30px;
    text-align: right;
}

body.light-theme .macro-theme-btn {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.03);
    color: var(--text-secondary);
}
body.light-theme .macro-signal-pill {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}
body.light-theme #macro-themes-tbody tr:hover { background: rgba(0,0,0,0.02); }

/* Floating Control Bar for Visualizer Chart */
/* Docked BELOW the chart, not floating over it. It measures ~407px against a 472px
   chart (86% of the width), so as an absolute overlay pinned to the chart's bottom
   there was no position inside the plot area that could clear the projected-candle
   H/L chips: those are placed from priceToCoordinate, so they enter the bottom band
   whenever the forecast price maps low, and sliding the bar sideways only had ~65px
   of slack. It was also covering the "Projected Peak" / "RISK WARNING" labels.
   Static flow + auto margins keeps it centred and costs ~60px of page height.
   Untouched paths: <=768px hides this bar outright, and body.chart-fullscreen
   re-pins it with position:fixed !important — both still win over this rule. */
.vis-floating-bar {
    position: static;
    margin: 10px auto 0;
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(15, 18, 35, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.vis-floating-bar:hover {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 8px 32px 0 rgba(99, 102, 241, 0.15);
}

.vis-float-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vis-float-btn i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.vis-float-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

/* Active State styles for floating buttons */
.vis-float-btn.active {
    color: #818cf8;
    background: rgba(99, 102, 241, 0.15);
}

.vis-float-btn.active:hover {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.25);
}

.vis-float-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
}

/* Light Theme overrides */
body.light-theme .vis-floating-bar {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(99, 102, 241, 0.2);
    box-shadow: 0 8px 32px 0 rgba(99, 102, 241, 0.1);
}

body.light-theme .vis-float-btn {
    color: var(--text-secondary);
}

body.light-theme .vis-float-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .vis-float-btn.active {
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.1);
}

body.light-theme .vis-float-btn.active:hover {
    color: #3730a3;
    background: rgba(99, 102, 241, 0.15);
}

body.light-theme .vis-float-divider {
    background: rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   Pattern Analytics Tab
   ===================================================================== */
.pattern-analytics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}
.pa-summary-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.2s ease;
}
.pa-summary-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.12);
}
.pa-summary-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.pa-summary-value {
    font-size: clamp(1.05rem, 1.45vw, 1.55rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.pa-summary-sub {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 2px;
}

#table-pattern-analytics .pa-value,
#table-pattern-analytics .pa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}
#table-pattern-analytics .pa-value {
    color: var(--text-primary);
}
#table-pattern-analytics .pa-value.pa-high  { color: #10b981; background: rgba(16, 185, 129, 0.12); }
#table-pattern-analytics .pa-value.pa-mid   { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
#table-pattern-analytics .pa-value.pa-low   { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
#table-pattern-analytics .pa-badge {
    font-size: 0.68rem;
    font-weight: 600;
}
#table-pattern-analytics .pa-badge-forming   { color: #818cf8; background: rgba(99, 102, 241, 0.12); }
#table-pattern-analytics .pa-badge-confirmed { color: #34d399; background: rgba(16, 185, 129, 0.12); }
#table-pattern-analytics .pa-badge-win      { color: #10b981; background: rgba(16, 185, 129, 0.12); }
#table-pattern-analytics .pa-badge-loss      { color: #ef4444; background: rgba(239, 68, 68, 0.12); }

body.light-theme .pattern-analytics-summary .pa-summary-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.07);
}
body.light-theme .pattern-analytics-summary .pa-summary-card:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}
body.light-theme #table-pattern-analytics .pa-value.pa-high  { color: #059669; background: rgba(5, 150, 105, 0.1); }
body.light-theme #table-pattern-analytics .pa-value.pa-mid   { color: #d97706; background: rgba(217, 119, 6, 0.1); }
body.light-theme #table-pattern-analytics .pa-value.pa-low   { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
body.light-theme #table-pattern-analytics .pa-badge-forming   { color: #4f46e5; background: rgba(99, 102, 241, 0.1); }
body.light-theme #table-pattern-analytics .pa-badge-confirmed { color: #059669; background: rgba(5, 150, 105, 0.1); }

/* =====================================================================
   Options Trading Tab
   ===================================================================== */
.options-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.options-strategy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px;
    transition: all 0.2s ease;
}
.options-strategy-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.14);
}
.options-strategy-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.options-strategy-view {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-warning);
    margin-bottom: 10px;
}
.options-strategy-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}
.options-strategy-greek,
.options-strategy-risk {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.options-rules-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 24px;
}
.options-rules-card h3 {
    margin: 0 0 14px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.options-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.options-rule {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}
.options-rule-key {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-indigo);
}
.options-rule-val {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.options-warning {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    padding: 18px;
    margin-top: 24px;
}
.options-warning h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.options-warning ul {
    margin: 0 0 10px 18px;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.options-warning-sub {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

.options-filter-bar {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
body.light-theme .options-filter-bar {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}

.options-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.options-filter-group label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.options-filter-group select {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.78rem;
    padding: 6px 8px;
    min-width: 130px;
    cursor: pointer;
}
body.light-theme .options-filter-group select {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.options-filter-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

#table-options-ideas .options-country-header td {
    background: rgba(59, 130, 246, 0.08);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    padding: 8px 12px;
}

#table-options-ideas .options-country-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#table-options-ideas .options-country-badge {
    font-size: 1rem;
    line-height: 1;
}

#table-options-ideas .options-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
}
#table-options-ideas .options-dir-bull { color: #10b981; background: rgba(16, 185, 129, 0.12); }
#table-options-ideas .options-dir-bear { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
#table-options-ideas .options-status-confirmed { color: #34d399; background: rgba(16, 185, 129, 0.12); }
#table-options-ideas .options-status-forming { color: #818cf8; background: rgba(99, 102, 241, 0.12); }

body.light-theme .options-strategy-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
}
body.light-theme .options-strategy-card:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
}
body.light-theme .options-rules-card {
    background: rgba(15, 23, 42, 0.01);
    border-color: rgba(15, 23, 42, 0.07);
}
body.light-theme .options-rule {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.06);
}
body.light-theme .options-warning {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.15);
}
body.light-theme .options-warning h4 { color: #dc2626; }
body.light-theme #table-options-ideas .options-dir-bull { color: #059669; background: rgba(5, 150, 105, 0.1); }
body.light-theme #table-options-ideas .options-dir-bear { color: #dc2626; background: rgba(220, 38, 38, 0.1); }
body.light-theme #table-options-ideas .options-status-confirmed { color: #059669; background: rgba(5, 150, 105, 0.1); }
body.light-theme #table-options-ideas .options-status-forming { color: #4f46e5; background: rgba(99, 102, 241, 0.1); }

/* Visualizer Tabs */
.vis-tl-head .vis-tl-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-muted);
}
.vis-tl-head .vis-tl-tab:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.03);
}
.vis-tl-head .vis-tl-tab.active {
    color: var(--text-primary) !important;
    background: rgba(99, 102, 241, 0.08);
    border-bottom: 2px solid var(--accent-indigo);
    font-weight: 700;
}

/* Options Strategies Card for Visualizer */
.vis-options-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, background-color 0.2s;
}
.vis-options-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(99, 102, 241, 0.3);
}
.vis-options-strategy-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: #818cf8;
}
.vis-options-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.vis-options-detail-item {
    background: rgba(5, 7, 18, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
}
.vis-options-detail-lbl {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.vis-options-detail-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}
.vis-options-card-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.72rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 8px;
}
.vis-options-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vis-options-footer-lbl {
    color: var(--text-muted);
}
.vis-options-footer-val {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Light Theme Overrides */
body.light-theme .vis-tl-head .vis-tl-tab:hover {
    background: rgba(0, 0, 0, 0.03);
}
body.light-theme .vis-tl-head .vis-tl-tab.active {
    background: rgba(99, 102, 241, 0.08);
}
body.light-theme .vis-options-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
}
body.light-theme .vis-options-card:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(99, 102, 241, 0.3);
}
body.light-theme .vis-options-detail-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.08);
}
body.light-theme .vis-options-card-footer {
    border-top-color: rgba(15, 23, 42, 0.06);
}


/* =====================================================================
   Opportunity Dashboard
   ===================================================================== */
.opp-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.opp-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}
.opp-kpi-card:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.12);
}
.opp-kpi-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1rem;
    flex-shrink: 0;
}
.opp-kpi-info { display: flex; flex-direction: column; }
.opp-kpi-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.opp-kpi-value { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }

.opp-weekly-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(129,140,248,0.03));
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.opp-weekly-left { flex: 1; min-width: 280px; }
.opp-weekly-left h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.opp-weekly-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opp-pattern-pill {
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.72rem;
    color: #818cf8;
    font-weight: 600;
}
.opp-pattern-pill b { color: #a5b4fc; }

.opp-guidance-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.opp-guidance-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 18px 20px;
}
.opp-guidance-card h3 { margin: 0; font-size: 0.92rem; font-weight: 700; }

.opp-rank-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.82rem;
}
.opp-rank-medal { font-size: 1rem; width: 20px; text-align: center; }
.opp-rank-flag { font-size: 1.1rem; }
.opp-rank-name { font-weight: 600; min-width: 50px; }
.opp-rank-bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.opp-rank-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 3px; transition: width 0.5s ease; }
.opp-rank-score { font-weight: 700; color: #10b981; min-width: 40px; text-align: right; }
.opp-rank-count { font-size: 0.72rem; color: var(--text-muted); min-width: 80px; }

.opp-sector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.8rem;
}
.opp-sector-rank { width: 18px; text-align: center; color: var(--text-muted); font-weight: 700; }
.opp-sector-name { min-width: 90px; font-weight: 500; }
.opp-sector-bar-bg { flex: 1; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.opp-sector-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 3px; }
.opp-sector-count { font-weight: 700; min-width: 30px; text-align: right; }

.opp-rec-stat { display: flex; justify-content: center; margin-bottom: 12px; }
.opp-rec-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 3px solid;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.opp-rec-details { display: flex; flex-direction: column; gap: 4px; }
.opp-rec-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-secondary); }
.opp-rec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.opp-country-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}
.opp-country-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    flex-wrap: wrap;
    gap: 12px;
}
.opp-country-title { display: flex; align-items: center; gap: 10px; }
.opp-country-title h2 { margin: 0; font-size: 1.1rem; color: white; }
.opp-country-flag { font-size: 1.4rem; }
.opp-country-count {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.72rem;
    color: white;
    font-weight: 600;
}
.opp-country-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.opp-country-stat { display: flex; flex-direction: column; align-items: center; }
.opp-stat-label { font-size: 0.6rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.4px; }
.opp-stat-value { font-size: 1.05rem; font-weight: 800; color: white; }

.opp-country-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    padding: 18px 22px;
}
@media (max-width: 900px) {
    .opp-country-body { grid-template-columns: 1fr; }
}

.opp-sector-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.78rem;
}
.opp-sector-bar-label { min-width: 80px; color: var(--text-secondary); font-weight: 500; }
.opp-sector-bar-stack {
    flex: 1; height: 8px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    background: rgba(255,255,255,0.04);
}
.opp-sector-bar-bull { background: #10b981; transition: width 0.5s; }
.opp-sector-bar-bear { background: #ef4444; transition: width 0.5s; }
.opp-sector-bar-count { font-weight: 700; min-width: 24px; text-align: right; }

.opp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.opp-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
.opp-table th.r { text-align: right; }
.opp-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.opp-table td.r { text-align: right; }
.opp-ticker-row:hover {
    background: rgba(99,102,241,0.06);
}
.opp-status-confirmed {
    color: #10b981;
    background: rgba(16,185,129,0.1);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.opp-status-forming {
    color: #818cf8;
    background: rgba(99,102,241,0.1);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Light theme overrides */
body.light-theme .opp-kpi-card {
    background: rgba(15,23,42,0.02);
    border-color: rgba(15,23,42,0.07);
}
body.light-theme .opp-kpi-card:hover {
    background: rgba(15,23,42,0.04);
    border-color: rgba(15,23,42,0.12);
}
body.light-theme .opp-guidance-card {
    background: rgba(15,23,42,0.02);
    border-color: rgba(15,23,42,0.07);
}
body.light-theme .opp-country-card {
    background: rgba(15,23,42,0.01);
    border-color: rgba(15,23,42,0.06);
}
body.light-theme .opp-rank-bar-bg { background: rgba(15,23,42,0.06); }
body.light-theme .opp-sector-bar-bg { background: rgba(15,23,42,0.06); }
body.light-theme .opp-sector-bar-stack { background: rgba(15,23,42,0.04); }
body.light-theme .opp-table td { border-bottom-color: rgba(15,23,42,0.04); }
body.light-theme .opp-table th { border-bottom-color: rgba(15,23,42,0.1); }

/* AI Investment Picks */
.opp-ai-pick-item { transition: background 0.15s ease; }
.opp-ai-pick-item:hover { background: rgba(139,92,246,0.06); }
.opp-ai-pick-item:last-child { border-bottom: none !important; }
.opp-ai-ctx-card { transition: border-color 0.15s ease; }
.opp-ai-ctx-card:hover { border-color: rgba(139,92,246,0.3); }
body.light-theme .opp-ai-picks-card { background: rgba(15,23,42,0.01); }
body.light-theme .opp-ai-ctx-card { background: rgba(15,23,42,0.02); border-color: rgba(15,23,42,0.07); }
body.light-theme .opp-ai-pick-item:hover { background: rgba(139,92,246,0.04); }

/* =====================================================================
   GLOBAL MARKET SENTIMENT BAR
   Always-visible strip above the KPI row on the Home tab.
   ===================================================================== */
.global-sentiment-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    backdrop-filter: blur(12px);
}
.gsb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.gsb-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.gsb-title i { margin-right: 5px; }
.gsb-overall-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gsb-overall-pill.bullish  { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.gsb-overall-pill.bearish  { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.gsb-overall-pill.neutral  { background: rgba(234,179,8,0.13);  color: #ca8a04; border: 1px solid rgba(234,179,8,0.3); }
.gsb-meter-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 120px;
    max-width: 260px;
}
.gsb-meter-track {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 6px;
    overflow: hidden;
}
.gsb-meter-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease, background 0.4s ease;
}
.gsb-meter-fill.bullish { background: linear-gradient(90deg, #10b981, #34d399); }
.gsb-meter-fill.bearish { background: linear-gradient(90deg, #ef4444, #f87171); }
.gsb-meter-fill.neutral { background: linear-gradient(90deg, #eab308, #facc15); }
.gsb-score-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 22px;
    text-align: right;
}
/* Index cards row */
.gsb-indexes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.gsb-indexes::-webkit-scrollbar { height: 3px; }
.gsb-indexes::-webkit-scrollbar-track { background: transparent; }
.gsb-indexes::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.gsb-index-card {
    flex: 1 1 0;
    min-width: 120px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    position: relative;
    overflow: hidden;
}
.gsb-index-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 9px 9px 0 0;
}
.gsb-index-card.bullish::before,
.gsb-index-card.positive::before  { background: linear-gradient(90deg,#10b981,#34d399); }
.gsb-index-card.bearish::before,
.gsb-index-card.negative::before  { background: linear-gradient(90deg,#ef4444,#f87171); }
.gsb-index-card.neutral::before,
.gsb-index-card.flat::before      { background: linear-gradient(90deg,#eab308,#facc15); }
.gsb-index-card:hover { transform: translateY(-2px); border-color: var(--accent-primary); background: var(--bg-hover); }
.gsb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.gsb-card-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px;
}
.gsb-card-region {
    font-size: 0.62rem;
    color: var(--text-muted);
    background: var(--bg-card);
    border-radius: 4px;
    padding: 1px 5px;
}
.gsb-card-price {
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
    line-height: 1.15;
}
.gsb-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.gsb-card-change {
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 1px 6px;
}
.gsb-card-change.positive { color: #10b981; background: rgba(16,185,129,0.1); }
.gsb-card-change.negative { color: #ef4444; background: rgba(239,68,68,0.1); }
.gsb-card-change.flat     { color: var(--text-muted); background: var(--bg-secondary); }
.gsb-card-sma {
    display: flex;
    gap: 3px;
}
.gsb-card-sma span {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}
.gsb-card-sma .above { background: rgba(16,185,129,0.13); color: #10b981; }
.gsb-card-sma .below { background: rgba(239,68,68,0.13);  color: #ef4444; }
.gsb-card-chart-hint {
    font-size: 0.6rem;
    color: var(--accent-primary);
    margin-top: 5px;
    opacity: 0;
    transition: opacity 0.15s;
    text-align: right;
}
.gsb-index-card:hover .gsb-card-chart-hint { opacity: 1; }
.gsb-loading {
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 6px 0;
}

/* Light-theme overrides */
body.light-theme .global-sentiment-bar { background: #fff; }
body.light-theme .gsb-index-card { background: #f8fafc; }
body.light-theme .gsb-card-region { background: #e2e8f0; }

@media (max-width: 900px) {
    .gsb-header { gap: 8px; }
    .gsb-meter-wrap { max-width: 140px; }
}


/* =====================================================================
   LEADER DASHBOARD — Premium Redesign
   ===================================================================== */

/* ── KPI Cards ─────────────────────────────────────────────────────── */
.ld-kpi-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.ld-kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--kpi-color) 6%, transparent), transparent 70%);
    pointer-events: none;
}
.ld-kpi-card:hover {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.13);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.ld-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--kpi-color) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.ld-kpi-icon i { color: var(--kpi-color); font-size: 0.92rem; }
.ld-kpi-label {
    font-size: 0.61rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
}
.ld-kpi-value {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.ld-kpi-sub {
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 5px;
    opacity: 0.8;
}

/* ── Conviction Badges ─────────────────────────────────────────────── */
.ld-badge-hc {
    font-size: 0.62rem;
    background: rgba(239,68,68,0.12);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.28);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    font-weight: 600;
}
.ld-badge-buy {
    font-size: 0.62rem;
    background: rgba(16,185,129,0.1);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.22);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    font-weight: 600;
}
.ld-badge-watch {
    font-size: 0.62rem;
    background: rgba(245,158,11,0.1);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.22);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
    font-weight: 600;
}
.ld-dedup-badge {
    background: rgba(129,140,248,0.12);
    color: #818cf8;
    border: 1px solid rgba(129,140,248,0.25);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 6px;
}

/* ── Picks table row hover ─────────────────────────────────────────── */
.ld-picks-row {
    cursor: pointer;
    transition: background 0.15s;
}
.ld-picks-row:hover { background: rgba(99,102,241,0.07) !important; }

/* ── Trade Log — outcome row tints ────────────────────────────────── */
.ld-row-win  { background: rgba(16,185,129,0.04) !important; }
.ld-row-loss { background: rgba(239,68,68,0.04) !important; }
.ld-row-win:hover  { background: rgba(16,185,129,0.09) !important; }
.ld-row-loss:hover { background: rgba(239,68,68,0.09) !important; }

/* ── Trade Log filter / controls bar ──────────────────────────────── */
.ld-trade-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Performance Breakdown Grid ────────────────────────────────────── */
.ld-breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 16px;
}
@media (max-width: 1100px) {
    .ld-breakdown-grid { grid-template-columns: 1fr 1fr; }
    .ld-breakdown-wide { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .ld-breakdown-grid { grid-template-columns: 1fr; }
}
.ld-breakdown-card {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
}
.ld-bd-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── Outcome bar ────────────────────────────────────────────────────── */
.ld-outcome-bar {
    display: flex;
    height: 10px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    margin-bottom: 12px;
}
.ld-outcome-seg { transition: width 0.4s ease; }
.ld-outcome-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    align-items: center;
}
.ld-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Best/Worst trade callouts ─────────────────────────────────────── */
.ld-trade-callout {
    border-radius: 8px;
    padding: 10px 12px;
}
.ld-trade-callout-win  { background: rgba(16,185,129,0.07);  border-left: 3px solid #10b981; }
.ld-trade-callout-loss { background: rgba(239,68,68,0.07);   border-left: 3px solid #ef4444; }

/* ── Sector P&L bars ───────────────────────────────────────────────── */
.ld-sector-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ld-sector-row:last-child { border-bottom: none; }
.ld-sector-name { font-size: 0.76rem; color: #e2e8f0; font-weight: 500; }
.ld-sector-bar-wrap { height: 22px; display: flex; align-items: center; }
.ld-sector-bar { height: 18px; min-width: 4px; border-radius: 0 4px 4px 0; transition: width 0.4s ease; }
.ld-sector-stats { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.76rem; gap: 2px; white-space: nowrap; }

/* ── Sidebar rows ───────────────────────────────────────────────────── */
.ld-sidebar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ld-sidebar-row:last-child { border-bottom: none; }

/* ── Mobile Layout Optimization ────────────────────────────────────── */
@media (max-width: 500px) {
    .hide-xs { display: none !important; }
}

@media (max-width: 768px) {
    /* ── Top bar: hide all action widgets — bottom nav replaces them ── */
    #btn-mobile-menu { display: none !important; }
    .page-title-section .subtitle { display: none !important; }
    .top-bar-actions { display: none !important; }

    /* On chart tab: hide the top-bar entirely — vis-hero provides all context */
    body.vis-tab-active .top-bar {
        display: none !important;
    }

    /* Hide macro intelligence, sentiment widget, spotlight, and KPI blocks on Dashboard */
    #tab-dashboard #global-sentiment-bar,
    #tab-dashboard .kpi-strip,
    #tab-dashboard #dashboard-spotlight,
    #tab-dashboard #sectors-dashboard-row,
    #tab-dashboard #dashboard-view-toggle,
    #tab-dashboard #dashboard-cards-view,
    #tab-dashboard #dashboard-heatmap-view,
    #tab-dashboard #dashboard-spotlight,
    #tab-dashboard #dashboard-sector-rail,
    #tab-dashboard #dashboard-rail-label,
    #tab-dashboard .dashboard-cmdbar,
    #tab-dashboard #signal-directory-row,
    #tab-dashboard .spotlight-v2,
    #tab-dashboard .rail-lbl-v2,
    #tab-dashboard .rail-v2,
    #tab-dashboard .equation-v2 {
        display: none !important;
    }
    /* MI bar: keep the collapsed header visible on mobile, hide pills */
    #tab-dashboard .mi-bar-v3 { margin-bottom: 12px; }
    #tab-dashboard .mi-bar-pills { display: none; }
    /* Collapse the two-column hero zone to a single column on mobile. */
    #tab-dashboard .zone-v2 { display: block !important; }

    /* Mobile Pattern rail: the Pattern Explorer restyled as a horizontal
       scroll of compact glyph chips (tap to filter, ⓘ opens a bottom sheet). */
    #tab-dashboard .pattern-explorer-v2 {
        background: none;
        border: none;
        backdrop-filter: none;
        overflow: visible;
        margin-bottom: 12px;
    }
    #tab-dashboard .pattern-explorer-v2 .card-head {
        padding: 0 2px 8px;
        border-bottom: none;
        flex-wrap: nowrap;
        align-items: center;
    }
    #tab-dashboard .pattern-explorer-v2 .card-head > div:first-child { min-width: 0; }
    #tab-dashboard .pattern-explorer-v2 .card-head h2 {
        font-size: 0.88rem;
        white-space: nowrap;
    }
    #tab-dashboard .pattern-explorer-v2 .card-head .meta {
        font-size: 0.62rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #tab-dashboard .pxg-dir-filter { flex-shrink: 0; }
    #tab-dashboard .pxg-dir-btn { padding: 3px 8px; font-size: 0.68rem; }
    #tab-dashboard .pxg-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        gap: 8px;
        padding: 2px;
        scrollbar-width: none;
    }
    #tab-dashboard .pxg-list::-webkit-scrollbar { display: none; }
    /* Compact horizontal pill instead of a tall vertical card — same tap-to-
       filter rail, ~1/3 the height, so Pattern Explorer stops eating the
       screen before the user even reaches the signals table. */
    #tab-dashboard .pxg {
        flex: 0 0 auto;
        width: auto;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 18px;
    }
    #tab-dashboard .pxg:hover { transform: none; }
    #tab-dashboard .pxg .pxg-glyph { display: none; } /* direction is already the ▲/▼ glyph in pxg-name */
    #tab-dashboard .pxg .pxg-mid { flex: 0 1 auto; width: auto; min-width: 0; }
    #tab-dashboard .pxg .pxg-name {
        font-size: 0.7rem;
        line-height: 1.2;
        white-space: nowrap;
        display: block;
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #tab-dashboard .pxg .pxg-meta { display: none; }
    #tab-dashboard .pxg .pxg-count { font-size: 0.68rem; padding: 1px 7px; flex-shrink: 0; }
    #tab-dashboard .pxg .pxg-info { position: static; padding: 2px; flex-shrink: 0; }

    /* Force Table view of signals on mobile */
    #tab-dashboard #dashboard-table-view {
        display: block !important;
    }

    /* Dashboard filter console on mobile: compact button bar + single-column drawer */
    #tab-dashboard #dashboard-global-filter-row {
        display: block !important;
        margin-bottom: 6px !important;
    }
    /* Declutter the Signals top area: the descriptive "Active Patterns /
       Confirmed breakouts and forming setups" header is pure fluff that pushes
       the actual signals table down — hide it on mobile. */
    #tab-dashboard .results-card-head { display: none !important; }
    /* The card wrapper adds heavy padding on desktop; trim it on mobile so the
       table sits directly under the command bar. */
    #tab-dashboard .card-full-width > .card-body { padding: 0 !important; }
    #tab-dashboard #dashboard-kpi-strip { margin-top: 2px !important; }
    #tab-dashboard .dashboard-cmdbar {
        display: flex !important;
        gap: 8px !important;
        padding: 0 14px 10px !important;
        align-items: center !important;
    }
    #tab-dashboard .dashboard-cmdbar .fcb-search {
        display: none !important;
    }
    #tab-dashboard .dashboard-cmdbar #btn-toggle-main-filters,
    #tab-dashboard .dashboard-cmdbar #btn-reset-dashboard-filters {
        flex: 1 !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
    }
    #tab-dashboard .dashboard-filters-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    #tab-dashboard .filter-drawer-body {
        padding: 14px !important;
    }

    /* cmdbar-v2: search full-width on top, BOTH segment groups share one
       compact scrollable row below (was stacking into 3 tall rows). */
    .cmdbar-v2 {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 12px !important;
    }
    .cmdbar-v2 .search-box {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    /* Slim the search input (was ~61px tall) */
    .cmdbar-v2 .search-box input {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        height: auto !important;
        font-size: 0.82rem !important;
    }
    .cmdbar-v2 .seg {
        flex: 0 0 auto !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .cmdbar-v2 .seg::-webkit-scrollbar { display: none !important; }
    /* Compact segment pills — horizontally tight so both groups fit on one row,
       but tall enough (~34px) to be a comfortable tap target. */
    .cmdbar-v2 .seg button {
        padding: 10px 7px !important;
        font-size: 0.68rem !important;
        white-space: nowrap !important;
    }
    .cmdbar-v2 .seg { padding: 2px !important; }
    .cmdbar-v2 #v2-toggle-filters {
        display: none !important;
    }
    /* D7a: the legacy bar's Filters+Reset pair is the mobile entry point
       (see .dashboard-cmdbar rules above) — hide cmdbar-v2's desktop-only
       Reset copy here so mobile doesn't show two Reset buttons. */
    .cmdbar-v2 #btn-reset-dashboard-filters-v2 {
        display: none !important;
    }

    /* "Top Signals" header: one slim row (title + scrollable tabs + count) */
    #tab-dashboard .hero-table-card .card-head {
        flex-wrap: nowrap !important;
        /* Left-align: with the inherited `space-between` a nowrap row whose
           content overflows spills to the LEFT, pushing "Top Signals" off the
           edge (only "ignals" shows). flex-start keeps it pinned left. */
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        align-items: center !important;
    }
    #tab-dashboard .hero-table-card .card-head > div:first-child {
        /* The head is a column flex with align-items:center; without a width
           this row sizes to its content (~494px) and centers, clipping
           "Top Signals" off the left edge. Fill the column width so the row's
           own overflow-x scroll engages and the title stays pinned left. */
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    #tab-dashboard .hero-table-card .card-head > div:first-child::-webkit-scrollbar { display: none !important; }
    #tab-dashboard .hero-table-card .card-head h2 {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    #tab-dashboard .hero-table-card .card-head .tabs button {
        padding: 9px 12px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }
    #tab-dashboard .hero-table-card #hero-table-meta {
        font-size: 0.68rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    /* Mobile sort dropdown: compact pill next to the result count */
    #tab-dashboard .hero-mobile-sort {
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        padding: 5px 8px !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        background: var(--bg-widget) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 7px !important;
        outline: none !important;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 6px center !important;
        padding-right: 20px !important;
    }

    /* KPI strip: show on mobile, compact 4-column grid */
    #tab-dashboard #dashboard-kpi-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: hidden !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    #tab-dashboard #dashboard-kpi-strip .k {
        flex: 1 1 0 !important;
        padding: 8px 6px !important;
        gap: 6px !important;
        border-right: 1px solid var(--border-color) !important;
    }
    #tab-dashboard #dashboard-kpi-strip .k:last-child {
        border-right: none !important;
    }
    /* Tappable KPI chips (Confirmed / Forming / Signals) filter the table.
       Show a pointer, press feedback, and an underline on the active one. */
    #tab-dashboard #dashboard-kpi-strip .k.k-tappable {
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    #tab-dashboard #dashboard-kpi-strip .k.k-tappable:active {
        background: rgba(99, 102, 241, 0.08) !important;
    }
    #tab-dashboard #dashboard-kpi-strip .k.k-tappable.is-active::after {
        content: '';
        position: absolute;
        left: 8px; right: 8px; bottom: 0;
        height: 2px;
        background: var(--color-primary);
        border-radius: 2px 2px 0 0;
    }
    #tab-dashboard #dashboard-kpi-strip .k.k-tappable.is-active .lbl {
        color: var(--text-primary) !important;
    }
    #tab-dashboard #dashboard-kpi-strip .k-ic {
        display: none !important;
    }
    #tab-dashboard #dashboard-kpi-strip .k-meta .lbl {
        font-size: 0.64rem !important;
    }
    #tab-dashboard #dashboard-kpi-strip .k-meta .val {
        font-size: 1rem !important;
    }

    /* Hero table tabs: wrap to as many rows as needed so every filter —
       including the S&P 500 / Nasdaq 100 / Nifty 50 index tabs — is reachable
       without a hidden horizontal scroll. */
    #hero-table-tabs {
        display: flex !important;
        overflow-x: visible !important;
        scrollbar-width: none !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    #hero-table-tabs::-webkit-scrollbar { display: none !important; }
    #hero-table-tabs button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 4px 10px !important;
        font-size: 0.68rem !important;
    }
    .hero-table-card .card-head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #hero-table-meta {
        font-size: 0.65rem !important;
    }

    /* Hero table: fit without horizontal scrolling on mobile */
    .table-responsive-wrapper { overflow-x: visible !important; }
    .hero-table-card {
        border-radius: 8px !important;
        margin-bottom: 10px;
    }
    .hero-table-card .card-head {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* ── Hero table: clean 4-column layout matching mockup ── */
    .hero-table {
        table-layout: fixed !important;
        width: 100% !important;
    }
    /* Mobile: show only Ticker(1), Pattern(2), Status(3), Confidence(10) */
    .hero-table th:nth-child(4),
    .hero-table td:nth-child(4),
    .hero-table th:nth-child(5),
    .hero-table td:nth-child(5),
    .hero-table th:nth-child(6),
    .hero-table td:nth-child(6),
    .hero-table th:nth-child(7),
    .hero-table td:nth-child(7),
    .hero-table th:nth-child(8),
    .hero-table td:nth-child(8),
    .hero-table th:nth-child(9),
    .hero-table td:nth-child(9) {
        display: none !important;
    }
    /* Column widths: must total 100% across the 4 visible columns.
       Ticker gets the most room because Indian symbols (e.g. AAREYDRUGS.BO)
       are long. */
    .hero-table th:nth-child(1),
    .hero-table td:nth-child(1) { width: 39% !important; }
    .hero-table th:nth-child(2),
    .hero-table td:nth-child(2) { width: 24% !important; }
    .hero-table th:nth-child(3),
    .hero-table td:nth-child(3) { width: 18% !important; }
    .hero-table th:nth-child(10),
    .hero-table td:nth-child(10) { width: 19% !important; }
    .hero-table th,
    .hero-table td {
        padding: 10px 5px !important;
        overflow: hidden !important;
        font-size: 0.75rem !important;
    }
    .hero-table th { font-size: 0.68rem !important; white-space: nowrap !important; padding-right: 12px !important; }
    .hero-table th .th-lg { display: none !important; }
    .hero-table th .th-sm { display: inline !important; }
    .hero-table th.sortable::after { right: 2px !important; }
    /* Ticker cell */
    .hero-table td:nth-child(1) { padding-left: 10px !important; }
    .hero-table td .hero-tick {
        gap: 6px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    /* Hide the avatar on mobile — it consumed ~34px and left the ticker/sector
       text only ~18px, clipping long symbols to "AA…". */
    .hero-table td .hero-tick .av {
        display: none !important;
    }
    .hero-table td .hero-tick .nm {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .hero-table td .hero-tick .nm b,
    .hero-table td .hero-tick .nm span {
        display: block !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .hero-table td .hero-tick .nm span { font-size: 0.6rem !important; }
    /* Mobile: replace the sector sub-line with a live price + upside chip so
       the price is visible without tapping into the chart. */
    .hero-table td .hero-tick .nm .nm-sector { display: none !important; }
    .hero-table td .hero-tick .nm .nm-quote {
        display: flex !important;
        align-items: baseline !important;
        gap: 6px !important;
        overflow: visible !important;
        margin-top: 1px !important;
    }
    .hero-table td .hero-tick .nm .nm-quote .nm-price {
        display: inline-block !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        overflow: visible !important;
    }
    .hero-table td .hero-tick .nm .nm-quote .nm-chg {
        display: inline-block !important;
        font-size: 0.66rem !important;
        font-weight: 700 !important;
        overflow: visible !important;
    }
    /* Row tap affordance: a chevron on the right edge + a clear pressed state
       so it's obvious each row opens the chart. */
    #tab-dashboard .hero-table tbody tr:active {
        background: rgba(99, 102, 241, 0.12) !important;
    }
    #tab-dashboard .hero-table td:nth-child(10) {
        position: relative !important;
        padding-right: 14px !important;
    }
    #tab-dashboard .hero-table td:nth-child(10)::after {
        content: '\203A';
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0.6;
    }
    /* Pattern cell: name + real pattern-shape sparkline (the bull/bear tag is
       redundant on mobile — the sparkline colour already conveys direction). */
    .hero-table td:nth-child(2) > div { flex-direction: column !important; gap: 3px !important; }
    .hero-table td .hero-tag.bull,
    .hero-table td .hero-tag.bear { display: none !important; }
    .hero-table td .pattern-cell-tag { display: none !important; }
    .hero-table td .pattern-cell-spark { display: block !important; }
    .hero-table td .pattern-cell-spark .spark {
        height: 16px !important;
        width: 100% !important;
        max-width: 64px !important;
        gap: 1.5px !important;
    }
    .hero-table td .pattern-cell-spark .spark i { opacity: 0.8 !important; }
    .hero-table td:nth-child(2) span { font-size: 0.72rem !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: break-word !important; }
    .hero-table td .company-name {
        display: block !important;
        font-size: 0.6rem !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    /* Status badge: compact */
    .hero-table td .hero-tag {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
        gap: 3px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .hero-table td .hero-tag i { display: none !important; } /* hide icon inside badge on mobile */
    /* Upside cell */
    .hero-table td:nth-child(6) {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        padding-right: 8px !important;
    }
    .hero-table tbody tr { cursor: pointer; }

    /* ── Visualizer: hide insight panel + sidebar + right panel on mobile for max chart space ── */
    #tab-visualizer .vis-insight-panel,
    #tab-visualizer .vis-fund-grid,
    #tab-visualizer #vis-panel-expand-bar,
    #tab-visualizer .vis-panel-toggle-bar,
    #tab-visualizer .vis-sidebar-collapsed,
    #tab-visualizer .vis-right-panel,
    #vis-sidebar-collapsed,
    #vis-sidebar {
        display: none !important;
    }
    #tab-visualizer .vis-main-v2 {
        overflow-y: auto !important;
    }
    /* Layout: single column so chart takes 100% width AND full height.
       Must be flex-column (not block) so .vis-main-v2 (flex:1) stretches to
       fill the available height — otherwise it collapses to its content height
       and leaves a large empty gap below the chart. Sidebar/right-panel are
       display:none on mobile, so only .vis-main-v2 occupies the column. */
    #tab-visualizer .vis-layout-v2 {
        display: flex !important;
        flex-direction: column !important;
    }
    #tab-visualizer .vis-main-v2 {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    /* Float bar: compact horizontal bar at top-left of chart so it doesn't overlap the price scale */
    .vis-floating-bar {
        flex-direction: row !important;
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding: 4px 6px !important;
        gap: 4px !important;
        border-radius: 10px !important;
        z-index: 50 !important;
    }
    .vis-floating-bar .vis-float-divider {
        display: none !important;
    }
    /* Insights panel is hidden on mobile — no point showing its toggle button */
    #btn-float-insights {
        display: none !important;
    }
    /* Compact icon-only buttons so the bar overlaps far less of the chart's
       top-left. 34px keeps them a comfortable tap target. */
    .vis-floating-bar .vis-float-btn {
        width: 34px !important;
        height: 34px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        gap: 0 !important;
        padding: 0 !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }
    .vis-floating-bar .vis-float-btn i {
        font-size: 0.9rem !important;
    }
    .vis-floating-bar .vis-float-btn span {
        display: none !important; /* icon-only on mobile */
    }
    /* Trade plan strip: compact horizontal strip below chart (matches mockup) */
    .trend-prediction-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding: 6px 8px !important;
        gap: 0 !important;
        border-top: 1px solid var(--border-color) !important;
        border-bottom: 1px solid var(--border-color) !important;
        background: var(--bg-card) !important;
        min-height: 48px !important;
        -webkit-overflow-scrolling: touch;
    }
    .trend-prediction-strip::-webkit-scrollbar { display: none !important; }
    .trend-prediction-strip .tps-lead {
        display: none !important;
    }
    .trend-prediction-strip .tps-divider {
        display: none !important;
    }
    .trend-prediction-strip .tps-section {
        flex-shrink: 0 !important;
        padding: 4px 10px !important;
        min-width: auto !important;
        border-right: 1px solid var(--border-color) !important;
    }
    .trend-prediction-strip .tps-section:last-child {
        border-right: none !important;
    }
    .trend-prediction-strip .tps-label {
        font-size: 0.52rem !important;
    }
    .trend-prediction-strip .tps-value {
        font-size: 0.82rem !important;
    }
    .trend-prediction-strip .tps-sub {
        display: none !important;
    }
    .trend-prediction-strip .trend-confidence-bar {
        display: none !important;
    }
}

/* ======================================================= */
/* ====== CHART FULL-VIEW MODE ============================ */
/* ======================================================= */
body.chart-fullscreen .top-bar,
body.chart-fullscreen .mobile-bottom-nav,
body.chart-fullscreen #tab-visualizer .vis-hero,
body.chart-fullscreen #tab-visualizer .vis-toolbar,
body.chart-fullscreen #tab-visualizer .trend-prediction-strip,
body.chart-fullscreen #tab-visualizer .vis-legend,
body.chart-fullscreen #tab-visualizer .vis-fund-grid,
body.chart-fullscreen #tab-visualizer .mobile-vis-search-wrap,
body.chart-fullscreen #tab-visualizer .vis-panel-toggle-bar,
body.chart-fullscreen #tab-visualizer .vis-insight-panel,
body.chart-fullscreen #tab-visualizer .vis-sidebar,
body.chart-fullscreen #tab-visualizer .vis-right-panel,
body.chart-fullscreen #tab-visualizer .vis-edu-card,
body.chart-fullscreen #tab-visualizer .page-title-section {
    display: none !important;
}
body.chart-fullscreen #tab-visualizer .vis-chart-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: none !important;
    min-height: auto !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.chart-fullscreen #tab-visualizer .vis-chart-wrap #stock-chart-container {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
}
/* Keep floating bar visible in fullscreen, anchored to top-left.
   Bug fix: z-index must beat the sidebar panel below (1010) — otherwise
   opening the ticker sidebar buries this bar's own "Tickers" button under
   the now-open panel, and the button becomes permanently unclickable ("the
   ticker icon gets stuck") since there's no longer any way to close it. */
body.chart-fullscreen #tab-visualizer .vis-floating-bar {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1020 !important;
    flex-direction: row !important;
}
/* Bug fix: clicking "Tickers" in Full View correctly re-expands #vis-sidebar
   (toggleVisSidebar() clears its display:none and the "collapsed" class),
   but the sidebar was left in normal static document flow while the chart
   itself becomes position:fixed/z-index:1000 covering the whole viewport —
   so the sidebar was rendering, just entirely hidden underneath the chart.
   Float it above the fullscreen chart instead, matching the floating bar's
   own z-index convention. Capped to a sane max-width (not full viewport
   width) so it reads as a panel over the chart rather than swallowing the
   whole screen on wider phones/tablets. */
body.chart-fullscreen #tab-visualizer #vis-sidebar:not(.collapsed) {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(100%, 320px) !important;
    height: 100vh !important;
    height: 100svh !important;
    z-index: 1010 !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
}
/* Fullscreen exit pill — shown only in fullscreen mode */
.chart-fullscreen-exit-btn {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 22px;
    padding: 8px 16px;
    color: #f1f5f9;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.55);
    transition: background 0.18s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.chart-fullscreen-exit-btn:hover,
.chart-fullscreen-exit-btn:active { background: rgba(99,102,241,0.85); }
body.chart-fullscreen .chart-fullscreen-exit-btn {
    display: flex;
}

/* ======================================================= */
/* ====== VISUALIZER MOBILE VIEWPORT OPTIMIZATIONS ======= */
/* ======================================================= */
@media (max-width: 768px) {
    /* 1. Hero Header Mobile Optimizations */
    .vis-hero {
        padding: 8px 12px 8px 20px !important;
        gap: 0 8px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
    }
    .vis-hero-ticker {
        font-size: 1.25rem !important; /* compact ticker */
        font-weight: 900 !important;
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    #tab-visualizer .vis-hero-ticker > span {
        display: none !important; /* hide inline direction/trend badges; they appear in the badges row */
    }
    /* Hide chart legend on mobile to match mockup */
    #tab-visualizer .vis-legend {
        display: none !important;
    }
    .vis-hero-price {
        font-size: 1rem !important;
        padding: 0 !important;
        margin-left: 0 !important;
        display: inline-flex !important;
        align-items: baseline !important;
        color: var(--text-primary) !important;
    }
    .vis-hero-ohlc {
        font-size: 0.66rem !important;
        gap: 5px !important;
    }
    .vis-hero-company {
        font-size: 0.68rem !important;
        display: block !important;
        width: 100% !important;
        color: var(--text-muted) !important;
        margin-top: 2px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
    }
    .vis-hero-badges {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 4px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* horizontal swipeable badges */
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
        gap: 4px !important;
        -webkit-overflow-scrolling: touch;
    }
    .vis-hero-badges::-webkit-scrollbar {
        display: none !important;
    }
    .vis-hero-badges .vis-badge {
        font-size: 0.62rem !important;
        padding: 3px 8px !important;
        flex-shrink: 0 !important;
    }
    .vis-hero-badges .vis-pattern-sel {
        display: none !important;
    }
    .vis-hero-badges .badge {
        font-size: 0.62rem !important;
        padding: 3px 8px !important;
        flex-shrink: 0 !important;
        border-radius: 12px !important;
    }

    /* 2. Toolbar Mobile Optimizations (Swipeable row) */
    .vis-toolbar {
        padding: 6px 12px !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important; /* horizontal swipeable bar */
        scrollbar-width: none !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .vis-toolbar::-webkit-scrollbar { display: none !important; }
    .vis-tb-group {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    .vis-tb-label {
        display: none !important; /* hide labels on mobile, icons/text are enough */
    }
    .chart-tb-btn {
        padding: 4px 10px !important;
        height: 36px !important; /* comfortable tap target (base is 28px) */
        font-size: 0.72rem !important;
        min-width: 30px !important;
    }
    .chart-tb-btn i {
        display: none !important; /* hide icons inside interval buttons to save space */
    }
    .vis-tb-sep {
        margin: 0 4px !important;
        flex-shrink: 0 !important;
    }
    /* ── Horizontal-scroll affordance ──────────────────────────────────────
       Fade the right edge of rows that scroll sideways so it's obvious there's
       more to swipe to (chart toolbar controls, trade-plan metrics like Target
       Date, the signals table tabs, and the pick-category pills). A small
       right pad lets the last item clear the fade once fully scrolled. */
    #chart-toolbar,
    .trend-prediction-strip,
    #tab-dashboard .hero-table-card .card-head > div:first-child,
    #recs-country-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
        padding-right: 22px !important;
    }
    .vis-tb-badge {
        flex-shrink: 0 !important;
    }

    /* 3. Trade Plan Strip Mobile Optimizations */
    .trend-prediction-strip {
        min-height: 52px !important;
    }
    .tps-lead {
        padding: 0 10px !important;
        font-size: 0.65rem !important;
    }
    .tps-section {
        padding: 8px 12px !important;
        min-width: 90px !important;
    }
    .tps-label {
        font-size: 0.58rem !important;
    }
    .tps-value {
        font-size: 0.9rem !important;
    }
    .tps-sub {
        font-size: 0.58rem !important;
        max-width: 110px !important;
    }

    /* 4. Chart layout — flex-based so chart fills all remaining space without overflow under bottom nav */
    .vis-hero {
        padding: 8px 14px 6px 14px !important;
        margin-top: 0 !important;
    }

    body.vis-tab-active .main-content {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100svh - 58px) !important; /* full viewport minus fixed bottom nav */
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        /* Full-bleed via zero padding (not negative child margins) so the
           visualizer column fits the viewport exactly. Negative vertical
           margins on #tab-visualizer used to push the trade strip ~14px
           below the fold, under the bottom nav. */
        padding: 0 !important;
    }
    body.vis-tab-active #tab-visualizer.active {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        margin: 0 !important; /* cancel the edge-to-edge negative margins on the chart tab */
        overflow: visible !important; /* do NOT clip children — toolbar needs full width */
    }
    body.vis-tab-active #tab-visualizer .vis-layout-v2 {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    body.vis-tab-active #tab-visualizer .vis-main-v2 {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    /* Toolbar: never shrink or clip — always shows all buttons */
    body.vis-tab-active #tab-visualizer .vis-toolbar {
        flex-shrink: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        /* Bug fix: this toolbar (holding .vis-tb-hero, the ticker/price/badge
           row) is the actual first element at the top of the mobile chart
           page — not .vis-hero, which isn't even in the DOM here. iOS PWA
           standalone mode + viewport-fit=cover extends content under the
           status bar/notch, so without reserving that space the status bar
           visually overlaps this row when the page is scrolled to the top. */
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
    /* Trade Plan strip (Target / Stop / R:R / Expected Move): never shrink —
       fixed height, scrolls horizontally. Always shown (it's core trade info). */
    body.vis-tab-active #tab-visualizer .trend-prediction-strip {
        flex-shrink: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        min-height: 48px !important;
        max-height: 54px !important;
    }
    .vis-chart-wrap {
        flex: 1 1 0 !important;
        min-height: 220px !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }
    #chart-canvas {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 220px !important;
    }
    .vis-main-v2.insights-hidden .vis-chart-wrap {
        max-height: none !important;
        height: auto !important;
    }

    /* 5. Legend Row scrollable */
    .vis-legend {
        padding: 6px 12px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        gap: 10px !important;
        -webkit-overflow-scrolling: touch;
    }
    .vis-legend::-webkit-scrollbar {
        display: none !important;
    }
    .vis-lg-item {
        flex-shrink: 0 !important;
    }
    .vis-lg-sep {
        flex-shrink: 0 !important;
    }

    /* 6. Lower Insight Grid - stack columns vertically */
    .vis-main-v2 #chart-pattern-details-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    .vis-main-v2 #det-fundamentals-card {
        padding: 12px !important;
    }
}

/* Extra small mobile viewports (e.g. iPhone 14 Pro portrait) */
@media (max-width: 400px) {
    .vis-hero-ticker {
        font-size: 1.2rem !important;
    }
    .tps-section {
        padding: 6px 8px !important;
        min-width: 80px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE VISUALIZER SEARCH BAR
   Only shown on ≤768px; hidden on desktop. Sits at top of vis-main-v2.
   ──────────────────────────────────────────────────────────────────────── */
/* Mobile visualizer search bar – hidden globally, shown only on mobile when on chart tab */
.mobile-vis-search-wrap {
    display: none;
}
@media (max-width: 768px) {
    /* Shown only when the visualizer is in search-focused mode (triggered by tapping ticker/search) */
    body.vis-tab-active #tab-visualizer.search-focused .mobile-vis-search-wrap {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 600;
        background: var(--bg-page);
        border-bottom: 1px solid var(--border-color);
        padding: 10px 12px 6px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    }
    /* Push the page header content down so it's not hidden behind the fixed search bar */
    body.vis-tab-active #tab-visualizer.search-focused .page-title-section {
        padding-top: 56px !important;
    }

    /* Search-focused mode: dedicated search screen matching mockup */
    #tab-visualizer.search-focused .page-title-section,
    #tab-visualizer.search-focused .vis-hero,
    #tab-visualizer.search-focused .vis-toolbar,
    #tab-visualizer.search-focused .vis-chart-wrap,
    #tab-visualizer.search-focused .trend-prediction-strip,
    #tab-visualizer.search-focused .vis-legend,
    #tab-visualizer.search-focused .vis-floating-bar,
    #tab-visualizer.search-focused .vis-panel-toggle-bar,
    #tab-visualizer.search-focused .vis-right-panel,
    #tab-visualizer.search-focused .vis-insight-panel,
    #tab-visualizer.search-focused .vis-fund-grid,
    #tab-visualizer.search-focused .vis-lifecycle,
    #tab-visualizer.search-focused .vis-sim-rail-wrap,
    #tab-visualizer.search-focused .chart-placeholder {
        display: none !important;
    }
    #tab-visualizer.search-focused .mobile-vis-search-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: none !important;
        padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 6px !important;
        margin-top: 8px !important;
    }
    #tab-visualizer.search-focused .mobile-vis-dropdown {
        margin: 6px 12px 0 !important;
        max-height: none !important;
    }
    #tab-visualizer.search-focused .vis-main-v2 {
        padding-top: 0 !important;
    }
    #tab-visualizer.search-focused .vis-layout-v2 {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100% !important;
    }
    .mobile-vis-search-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-widget);
        border: 1.5px solid var(--border-color);
        border-radius: 12px;
        padding: 10px 12px;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }
    .mobile-vis-search-bar:focus-within {
        border-color: var(--color-primary, #6366f1);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
    }
    .mobile-vis-search-bar i {
        color: var(--text-muted);
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    #mobile-vis-search {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: var(--text-primary);
        font-size: 0.88rem;
        font-family: var(--font-body, sans-serif);
        min-width: 0;
    }
    #mobile-vis-search::placeholder { color: var(--text-muted); }
    .mobile-vis-clear,
    .mobile-vis-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        padding: 0 2px;
        flex-shrink: 0;
    }
    .mobile-vis-close {
        display: none;
    }
    #tab-visualizer.search-focused .mobile-vis-close {
        display: block;
    }
    #tab-visualizer.search-focused .mobile-vis-clear[style*="block"] ~ .mobile-vis-close {
        display: none;
    }

    /* Dropdown */
    .mobile-vis-dropdown {
        background: var(--bg-widget);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin-top: 6px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    .mobile-vis-dropdown:empty { display: none; }
    .mvd-section-label {
        font-size: 0.58rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 8px 12px 4px;
    }
    .mvd-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-top: 1px solid rgba(255,255,255,0.04);
        cursor: pointer;
        transition: background 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mvd-item:first-child { border-top: none; }
    .mvd-item:active { background: rgba(99, 102, 241, 0.07); }
    .mvd-avatar {
        width: 32px; height: 32px;
        border-radius: 9px;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.62rem; font-weight: 800;
        flex-shrink: 0;
    }
    .mvd-av-bull { background: rgba(16,185,129,0.15); color: #10b981; }
    .mvd-av-bear { background: rgba(239,68,68,0.12); color: #ef4444; }
    .mvd-av-form { background: rgba(245,158,11,0.14); color: #f59e0b; }
    .mvd-av-neu  { background: rgba(148,163,184,0.12); color: #94a3b8; }
    .mvd-info { flex: 1; min-width: 0; }
    .mvd-ticker { font-size: 0.85rem; font-weight: 800; color: var(--text-primary); }
    .mvd-name {
        font-size: 0.62rem; color: var(--text-muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mvd-badge {
        font-size: 0.58rem; padding: 2px 7px; border-radius: 10px;
        font-weight: 700; flex-shrink: 0;
    }
    .mvd-badge-conf { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
    .mvd-badge-form { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
    .mvd-badge-none { background: rgba(148,163,184,0.08); color: var(--text-muted); border: 1px solid var(--border-color); }

    /* Clock/recent icon */
    .mvd-recent-icon { color: var(--text-muted); font-size: 0.78rem; flex-shrink: 0; }
}

/* ── D8/D9: unified search overlay ────────────────────────────────────
   Self-contained (doesn't rely on the mobile-only .mvd-item rules above)
   so the same row component reads correctly at any viewport width — the
   desktop "/"/Ctrl+Cmd+K palette and the mobile SEARCH tab both render here. */
#search-overlay {
    position: fixed; inset: 0; z-index: 2100;
    /* Bug fix: --bg-primary doesn't exist anywhere in this file (dark or
       light), so this always fell back to the hardcoded dark value below,
       regardless of the app's actual theme — showing a dark overlay (with
       correctly light-theme-colored, often dark-on-dark, text) even when
       the user has Light mode on. --bg-dark is the real theme-aware page
       background variable used elsewhere in the app. */
    background: var(--bg-dark, #0b0f19);
    display: none; flex-direction: column;
}
.search-overlay-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
    color: var(--text-muted); flex-shrink: 0;
}
.search-overlay-bar input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--text-primary); font-size: 0.92rem; font-family: var(--font-body);
}
.search-overlay-cancel {
    background: none; border: none; color: var(--color-indigo);
    font-size: 0.8rem; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.search-overlay-ai-hint {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.03em; color: #a78bfa; background: rgba(139, 92, 246, 0.08);
    border-bottom: 1px solid rgba(139, 92, 246, 0.18); flex-shrink: 0;
}
.search-overlay-results { flex: 1; overflow-y: auto; }
.search-overlay-empty { padding: 24px 16px; color: var(--text-muted); font-size: 0.8rem; text-align: center; }
#search-overlay .mvd-section-label {
    font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 16px 4px;
}
#search-overlay .mvd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: background 0.12s ease;
}
#search-overlay .mvd-item:hover, #search-overlay .mvd-item:active { background: rgba(99, 102, 241, 0.07); }
#search-overlay .mvd-avatar {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: 800; flex-shrink: 0;
}
#search-overlay .mvd-info { flex: 1; min-width: 0; }
#search-overlay .mvd-ticker { font-size: 0.88rem; font-weight: 800; color: var(--text-primary); }
#search-overlay .mvd-name { font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#search-overlay .mvd-badge { font-size: 0.62rem; padding: 3px 8px; border-radius: 10px; font-weight: 700; flex-shrink: 0; }
#search-overlay .mvd-recent-icon { color: var(--text-muted); font-size: 0.8rem; flex-shrink: 0; }
.search-overlay-ask-ai {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-top: 1px solid rgba(99, 102, 241, 0.25); background: rgba(99, 102, 241, 0.06);
    cursor: pointer; flex-shrink: 0;
}
.soaa-icon { color: var(--color-indigo); font-size: 1rem; }
.soaa-mid { flex: 1; min-width: 0; }
.soaa-title { color: #a5b4fc; font-weight: 700; font-size: 0.82rem; }
.soaa-sub { font-size: 0.66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-overlay-ask-ai > i:last-child { color: var(--text-muted); }
@media (min-width: 769px) {
    #search-overlay { align-items: center; padding-top: 12vh; background: rgba(4,7,14,0.6); }
    #search-overlay > * { width: 100%; max-width: 560px; }
    .search-overlay-bar, .search-overlay-ai-hint, .search-overlay-results, .search-overlay-ask-ai {
        border-radius: 0; background: var(--bg-card, #111827);
    }
    .search-overlay-bar { border-radius: 14px 14px 0 0; border: 1px solid var(--border-color); border-bottom: none; }
    .search-overlay-results { max-height: 60vh; border: 1px solid var(--border-color); border-top: none; border-bottom: none; }
    .search-overlay-ask-ai { border-radius: 0 0 14px 14px; border: 1px solid var(--border-color); border-top: 1px solid rgba(99,102,241,0.25); }
}

/* Stage 2: the four confluence badges collapse into #chart-confluence-chip.
   Hiding only (never force-showing) so the chip's own JS stays authoritative. */
#chart-rsi-badge,
#chart-macd-badge,
#chart-obv-badge,
#chart-retest-badge { display: none !important; }
#chart-confluence-chip { cursor: help; }

/* Stage 2: pattern pills replace the hidden <select> when a ticker has >1 pattern. */
#chart-pattern-selector { display: none !important; }
.vis-pattern-pills {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    max-width: 460px;
}
.vis-pattern-pills::-webkit-scrollbar { display: none; }
/* "There's more to scroll to" hint: fades out the row's own content near the
   right edge via mask-image (not a pseudo-element, which would scroll away
   with the content it's meant to sit on top of). JS toggles `.has-more` only
   while there's unscrolled content — see _syncPillScrollHint() in
   renderers.js — so a fully-visible pill row never gets falsely dimmed. */
.vis-pattern-pills.has-more {
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.vis-pat-pill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.66rem; font-weight: 700;
    white-space: nowrap; cursor: pointer;
    transition: 0.14s var(--ease);
}
.vis-pat-pill i { font-size: 0.5rem; }
.vis-pat-pill:hover { color: var(--text-primary); border-color: var(--border-color-active); }
.vis-pat-pill.active {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.42);
}
.vis-pat-pill.bear.active {
    background: rgba(244, 63, 94, 0.14);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.42);
}
.vis-pat-pill.outcome-win.active {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.42);
}
.vis-pat-pill.outcome-loss.active {
    background: rgba(244, 63, 94, 0.14);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.42);
}
/* improvement-opportunities.md #41 piece 5: a 'forming' pattern whose neckline
   breakout was replayed live (not yet confirmed by the scanner's own next full
   scan) gets the same win/loss coloring as a real outcome, but dashed -- same
   "not fully settled" visual convention as .historical above -- so it reads as
   provisional at a glance, never mistaken for an official result. */
.vis-pat-pill.outcome-win-provisional {
    background: rgba(16, 185, 129, 0.08);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.32);
    border-style: dashed;
}
.vis-pat-pill.outcome-loss-provisional {
    background: rgba(244, 63, 94, 0.08);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.32);
    border-style: dashed;
}
.vis-pat-pill.outcome-win-provisional.active {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.42);
    border-style: dashed;
}
.vis-pat-pill.outcome-loss-provisional.active {
    background: rgba(244, 63, 94, 0.14);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.42);
    border-style: dashed;
}
/* Historical (won/lost/failed) pills are reference, not actionable — dim them
   relative to Active so the group you can actually trade reads first. */
.vis-pat-pill.historical {
    opacity: 0.62;
    border-style: dashed;
}
.vis-pat-pill.historical.active { opacity: 1; }
/* Group headers ("Active" / "History") separating tradeable patterns from
   closed/failed ones — answers "which of these do I refer to". */
.vis-pat-group-lbl {
    flex: 0 0 auto;
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0 2px;
    align-self: center;
}
.vis-pat-group-lbl:not(:first-child) {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--border-color);
}
.vis-pattern-history-toggle {
    align-items: center;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.64rem;
    font-weight: 750;
    gap: 5px;
    padding: 4px 8px;
    white-space: nowrap;
}
.vis-pattern-history-toggle span {
    align-items: center;
    background: rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.58rem;
    justify-content: center;
    min-width: 16px;
    padding: 1px 4px;
}
.vis-pattern-history-toggle i { font-size: 0.54rem; transition: transform 0.18s ease; }
.vis-pattern-pills.history-open .vis-pattern-history-toggle i { transform: rotate(180deg); }
.vis-pattern-history-list {
    align-items: center;
    display: none;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px 0 1px;
}
.vis-pattern-pills.history-open .vis-pattern-history-list { display: flex; }
@media (max-width: 768px) {
    .vis-pattern-pills { max-width: 200px; }
    .vis-pattern-history-toggle { min-height: 30px; }
}

/* ---- Side-rail tabs (Stage 1): Anatomy · Timeline · Options · Fundamentals.
   Everything that used to stack below the chart now lives behind these tabs.
   Rules only HIDE inactive panels so each panel's own show/hide logic wins. --- */
.vis-rail-tabs {
    display: flex; gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-card);
    overflow-x: auto; scrollbar-width: none;
}
.vis-rail-tabs::-webkit-scrollbar { display: none; }
.vis-rail-tab {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
}
.vis-rail-tab:hover { color: var(--text-primary); }
.vis-rail-tab.active {
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.35);
}
#vis-side-panel[data-tab="forecast"] .vis-edu-card,
#vis-side-panel[data-tab="forecast"] .vis-right-panel,
#vis-side-panel[data-tab="forecast"] #det-fundamentals-card,
#vis-side-panel[data-tab="forecast"] #vis-alerts-inline,
#vis-side-panel[data-tab="anatomy"] #vis-forecast-body,
#vis-side-panel[data-tab="anatomy"] .vis-right-panel,
#vis-side-panel[data-tab="anatomy"] #det-fundamentals-card,
#vis-side-panel[data-tab="anatomy"] #vis-alerts-inline,
#vis-side-panel[data-tab="alerts"] #vis-forecast-body,
#vis-side-panel[data-tab="alerts"] .vis-edu-card,
#vis-side-panel[data-tab="alerts"] .vis-right-panel,
#vis-side-panel[data-tab="alerts"] #det-fundamentals-card,
#vis-side-panel[data-tab="timeline"] #vis-forecast-body,
#vis-side-panel[data-tab="timeline"] .vis-edu-card,
#vis-side-panel[data-tab="timeline"] #det-fundamentals-card,
#vis-side-panel[data-tab="timeline"] #vis-alerts-inline,
#vis-side-panel[data-tab="options"] #vis-forecast-body,
#vis-side-panel[data-tab="options"] .vis-edu-card,
#vis-side-panel[data-tab="options"] #det-fundamentals-card,
#vis-side-panel[data-tab="options"] #vis-alerts-inline,
#vis-side-panel[data-tab="fundamentals"] #vis-forecast-body,
#vis-side-panel[data-tab="fundamentals"] .vis-edu-card,
#vis-side-panel[data-tab="fundamentals"] .vis-right-panel,
#vis-side-panel[data-tab="fundamentals"] #vis-alerts-inline,
#vis-side-panel:not([data-tab="explain"]) #vis-explain-body,
#vis-side-panel[data-tab="explain"] #vis-forecast-body,
#vis-side-panel[data-tab="explain"] .vis-edu-card,
#vis-side-panel[data-tab="explain"] .vis-right-panel,
#vis-side-panel[data-tab="explain"] #det-fundamentals-card,
#vis-side-panel[data-tab="explain"] #vis-alerts-inline { display: none !important; }
#vis-side-panel[data-tab="explain"] #vis-explain-body { display: block !important; }
/* Alerts inline pane only shows for the Alerts tab. */
#vis-alerts-inline { display: none; }
#vis-side-panel[data-tab="alerts"] #vis-alerts-inline { display: block; }
/* News inline pane only shows for the News tab (default hidden). When it's the
   active tab, hide the other panes so the rail shows news alone. */
#vis-news-inline { display: none; }
#vis-side-panel[data-tab="news"] #vis-news-inline { display: block; }
#vis-side-panel[data-tab="news"] #vis-forecast-body,
#vis-side-panel[data-tab="news"] #vis-alerts-inline,
#vis-side-panel[data-tab="news"] .vis-edu-card,
#vis-side-panel[data-tab="news"] .vis-right-panel,
#vis-side-panel[data-tab="news"] #det-fundamentals-card { display: none !important; }
#vis-news-inline #vis-news-inline-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
/* More▾ dropdown menu */
.vis-rail-more-wrap { position: relative; }
/* Bug fix: #vis-rail-tabs has overflow:auto (for horizontal tab scrolling on
   mobile), which clipped this menu when it was position:absolute inside it —
   it "toggled open" per JS/DOM state but never actually appeared. Fixed
   positioning (top/left set by toggleVisRailMoreMenu()) escapes that clip. */
.vis-rail-more-menu {
    position: fixed; z-index: 2050;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); min-width: 160px; overflow: hidden;
}
.vis-rail-more-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 9px 12px; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
    background: transparent; border: none; border-top: 1px solid var(--border-color); cursor: pointer;
}
.vis-rail-more-menu button:first-child { border-top: none; }
.vis-rail-more-menu button:hover { background: rgba(99, 102, 241, 0.1); color: var(--text-primary); }

/* ── Anatomy + Fundamentals inside the narrow side rail ──────────────────────
   Both panels were designed for the old full-width area below the chart (wide
   2-col geometry grid, a 300px pattern diagram beside its text, and a single
   horizontal strip of fundamental tiles). Inside the ~380px rail that all
   collides. These overrides are scoped to #vis-side-panel so the fullscreen /
   below-chart layouts (if ever used) are untouched — they re-flow everything
   into one readable vertical column. ── */
#vis-side-panel .vis-edu-card,
#vis-side-panel .vis-fund-grid { border-top: none; }

/* Pattern diagram: stack above its text, full rail width, shorter. */
#vis-side-panel .vis-edu-header { flex-direction: column; gap: 10px; }
#vis-side-panel .vis-edu-diagram { width: 100%; height: 150px; }
#vis-side-panel .vis-edu-stats { flex-wrap: wrap; gap: 10px 18px; }

/* Geometry rows: one per line, label left / value right, value may wrap. */
#vis-side-panel .vis-geo-rows { grid-template-columns: 1fr; gap: 0; }
#vis-side-panel .vis-geo-item { gap: 12px; padding: 5px 0; }
#vis-side-panel .vis-geo-item strong { max-width: 60%; white-space: normal; text-align: right; }

/* Fundamentals: turn the horizontal strip into a 2-col tile grid that wraps,
   with left-aligned, wrappable labels instead of a crushed single row. */
#vis-side-panel .vis-fund-cells {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow-x: visible;
}
#vis-side-panel .vis-fund-cell {
    flex: none;
    align-items: flex-start;
    text-align: left;
    padding: 9px 11px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
}
#vis-side-panel .vis-fund-cell-wide { grid-column: span 2; }
#vis-side-panel .vfc-lbl { white-space: normal; line-height: 1.25; }

/* ---- Lifecycle timeline (Stage 4) ---- */
.vis-lifecycle {
    padding: 4px 22px 10px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
    flex-shrink: 0;
}
.vlt-track {
    position: relative;
    height: 4px;
    background: rgba(148, 163, 184, 0.16);
    border-radius: 2px;
    /* Top/bottom clear the two label lanes: lane-1 label sits at -31px and its
       date at +22px (~31px tall inc. text), so the original 26px/4px clipped them
       into the meta line. Bottom is measured against the collapsed sibling margin
       with .vlt-meta, which is why it exceeds the 22px offset. */
    margin: 36px 6px 38px;
}
.vlt-fill {
    position: absolute; left: 0; top: 0; height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #6366f1, #10b981);
}
.vlt-node {
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--bg-card);
    border: 2.5px solid var(--color-indigo);
}
.vlt-node.done { background: var(--color-indigo); }
.vlt-node.breakout { border-color: var(--color-emerald); background: var(--color-emerald); }
.vlt-node.today {
    width: 15px; height: 15px;
    border-color: var(--color-emerald); background: var(--color-emerald);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.18);
}
.vlt-node.now-forming {
    border-color: var(--color-amber); background: var(--color-amber);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18);
}
.vlt-node.future { border-style: dashed; background: var(--bg-card); }
.vlt-node.future.amber { border-color: var(--color-amber); }
.vlt-node.future.target { border-color: var(--color-emerald); }
.vlt-lab {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; font-weight: 700; color: var(--text-secondary);
    white-space: nowrap;
}
.vlt-node.today .vlt-lab, .vlt-node.breakout .vlt-lab { color: var(--color-emerald); }
.vlt-node.now-forming .vlt-lab { color: var(--color-amber); }
.vlt-node.future .vlt-lab { color: var(--text-muted); }
.vlt-sub {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    font-size: 0.56rem; color: var(--text-muted); white-space: nowrap;
}
/* Alternate vertical lanes so neighbouring pins don't collide. renderLifecycleTimeline()
   has always computed `data-lane`, but the only rule consuming it lived inside the
   max-width:768px block — so on desktop every label sat on one line and ran together
   whenever the pivots cluster (T1/PK/T2 within weeks, on a rail stretching months out
   to the target). Defined here so it applies at every width; the mobile block still
   overrides the offset for its own tighter spacing. */
.vlt-node[data-lane="1"] .vlt-lab { top: -31px; }
.vlt-node[data-lane="1"] .vlt-sub { top: 22px; }
.vlt-meta {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 0.64rem; color: var(--text-muted);
    margin-top: 18px;
}
.vlt-meta b { color: var(--text-primary); }
.vis-lifecycle-toggle { display: none; }
/* D6: mobile-only merged trade strip lives inside #vis-lifecycle; hidden on
   desktop by default, shown via the mobile media query below. */
.vlt-mobile-chips { display: none; }

/* ── D2/D3 (Chart Visualizer v4 "Calm") ───────────────────────────────
   Toolbar chips (Alerts, Regime), the Alerts bottom sheet, and the event
   lane strip that replaces per-date on-candle text markers. */
.vis-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700; padding: 4px 10px;
    border-radius: 20px; border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-secondary);
    cursor: default; white-space: nowrap;
}
.vis-chip-alert { cursor: pointer; }
.vis-chip-alert:hover { border-color: rgba(245, 158, 11, 0.45); }
.vis-chip-news { cursor: pointer; }
.vis-chip-news:hover { border-color: rgba(56, 189, 248, 0.45); }
/* Auto-trendline verdict chip. Colour carries the direction so the chip is
   readable at a glance; the full read (structure, window, R2, live support
   and resistance levels) lives in its title tooltip. */
.vis-chip-trend.is-up   { color: #22c55e; border-color: rgba(34, 197, 94, 0.40); }
.vis-chip-trend.is-down { color: #f97316; border-color: rgba(249, 115, 22, 0.40); }
.vis-chip-trend.is-flat { color: var(--text-muted); }
/* "All" criteria: the short/medium/long direction stack (e.g. "S↑ M↑ L↓"),
   set apart from the headline word so a Mixed read is scannable. */
.vis-chip-stack {
    font-family: Consolas, monospace; font-weight: 800; font-size: 0.68rem;
    letter-spacing: 0.02em; opacity: 0.75;
    padding-left: 6px; margin-left: 2px;
    border-left: 1px solid var(--border-color);
}
.vis-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; flex-shrink: 0; }
.vis-chip-count { font-family: Consolas, monospace; font-weight: 800; }

.alerts-sheet { position: fixed; inset: 0; z-index: 2000; display: none; align-items: flex-end; justify-content: center; }
.alerts-sheet-backdrop { position: absolute; inset: 0; background: rgba(4, 7, 14, 0.55); }
.alerts-sheet-body {
    position: relative; width: 100%; max-width: 420px;
    max-height: 70vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}
@media (min-width: 769px) {
    /* Bug fix: the parent's justify-content:center (set for the mobile
       bottom-sheet case) was overriding this margin/align-self, leaving the
       sheet centered at the bottom of the whole viewport instead of anchored
       near the toolbar Alerts chip that opened it. Pin the sheet to the
       right edge on desktop instead. */
    .alerts-sheet { justify-content: flex-end; }
    .alerts-sheet-body { width: auto; margin: 0 24px 24px 0; border-radius: 14px; align-self: flex-end; }
}
.alerts-sheet-grabber { width: 38px; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.35); margin: 8px auto 4px; }
.alerts-sheet-head {
    font-size: 0.86rem; font-weight: 700; padding: 4px 16px 8px;
    display: flex; align-items: center; color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.alerts-sheet-close { margin-left: auto; color: var(--text-muted); cursor: pointer; font-weight: 400; padding: 2px 6px; }
.alerts-sheet-heading {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 9px 16px 3px;
}
.alerts-sheet-row {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px;
    border-top: 1px solid var(--border-color); min-height: 44px; font-size: 0.74rem;
}
.alerts-sheet-stripe { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; min-height: 28px; }
.alerts-sheet-row-body { flex: 1; min-width: 0; }
.alerts-sheet-row-title { font-weight: 700; color: var(--text-primary); }
.alerts-sheet-row-sub { font-size: 0.64rem; color: var(--text-muted); }
/* D2 evidence: the risk engine's own reasons behind an alert (restores what
   the pre-redesign panel showed per entry, e.g. "Price momentum divergence"). */
.alerts-sheet-evidence {
    margin: 4px 0 0; padding-left: 15px; font-size: 0.64rem;
    color: var(--text-secondary, #cbd5e1); line-height: 1.5;
}
.alerts-sheet-show { margin-left: auto; font-size: 0.66rem; font-weight: 700; color: var(--color-indigo); cursor: pointer; flex-shrink: 0; padding-top: 2px; }
.alerts-sheet-empty { padding: 20px 16px; color: var(--text-muted); font-size: 0.78rem; text-align: center; }
/* Source-pattern tag on each alert row (e.g. "Double Bottom") */
.alerts-sheet-pattern {
    display: inline-block; margin-left: 7px; padding: 1px 7px;
    font-size: 0.6rem; font-weight: 700; border-radius: 9px;
    background: rgba(99, 102, 241, 0.12); color: var(--color-indigo);
    border: 1px solid rgba(99, 102, 241, 0.28); vertical-align: 1px;
    white-space: nowrap;
}

/* Mobile-only maximize button in the toolbar utility cluster — desktop keeps
   the floating bar's Full View button instead (mobile rules re-show this). */
#btn-chart-fullscreen { display: none; }
/* In Full View the on-chart utility cluster drops below the Minimize pill
   (top-right) so the two don't overlap. */
body.chart-fullscreen #tab-visualizer .vis-chart-overlay-controls {
    top: calc(48px + env(safe-area-inset-top, 0px));
}

/* Event lane: an overlay strip INSIDE .vis-chart-wrap, sitting just above the
   chart's time-axis labels (~28px tall in LightweightCharts). Dots are placed
   in chart-pixel space via timeScale().timeToCoordinate() so each event lines
   up with its date on the x-axis, and re-anchored on pan/zoom. */
.vis-event-lane {
    display: none; position: absolute; left: 0; right: 0; bottom: 28px;
    height: 20px; z-index: 6; pointer-events: none;
}
.vis-event-lane-label {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 0.54rem; font-weight: 800; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--text-muted); opacity: 0.75;
}
.vis-event-dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%; cursor: pointer; opacity: 0.85;
    pointer-events: auto; border: 1.5px solid rgba(11, 15, 25, 0.55);
}
body.light-theme .vis-event-dot { border-color: rgba(255, 255, 255, 0.75); }
.vis-event-dot:hover { opacity: 1; }

/* D2 "Show" spotlight: dim ambient chrome for 3s so the revealed level/dot stands out. */
.chart-spotlight-active .vis-legend,
.chart-spotlight-active .vis-lifecycle,
.chart-spotlight-active .vis-event-lane {
    opacity: 0.35; transition: opacity 0.3s;
}
/* D2 "Show" on a date-only alert (no price): a vertical marker flashed at
   that date, since most alerts (risk-watch/invalidated) aren't tied to a
   specific price line. Positioned by _flashDateOnChart() in renderers.js. */
.chart-date-flash {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #818cf8; transform: translateX(-1px);
    pointer-events: none; z-index: 6; display: none;
}
.chart-date-flash.is-flashing {
    animation: chartDateFlashPulse 3s ease-out forwards;
}
@keyframes chartDateFlashPulse {
    0%   { opacity: 0.9; box-shadow: 0 0 14px 3px currentColor; }
    70%  { opacity: 0.7; box-shadow: 0 0 14px 3px currentColor; }
    100% { opacity: 0; box-shadow: 0 0 0 0 transparent; }
}
/* D2 "Show": the alert's own message, color-coded bullish (green) /
   bearish (red) / neutral (severity color), anchored beside the flash line. */
.chart-date-flash-label {
    position: absolute; top: 8px; left: 6px; max-width: 210px;
    background: rgba(11, 15, 25, 0.92); border: 1px solid; border-radius: 6px;
    padding: 5px 9px; pointer-events: none; display: none;
}
/* Mobile: the persistent OHLC readout card occupies the chart's top-left —
   drop the flash label below it so "Show" is never covered by the readout. */
@media (max-width: 768px) {
    .chart-date-flash-label { top: 108px; }
}
.chart-date-flash-title { font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.chart-date-flash-evidence {
    font-size: 0.6rem; font-weight: 600; color: var(--text-secondary, #cbd5e1);
    margin-top: 2px; white-space: normal; line-height: 1.35;
}

/* D4: Layers & density sheet (reuses .alerts-sheet shell) */
.layers-sheet-density {
    display: flex; background: rgba(148, 163, 184, 0.1); border-radius: 9px;
    padding: 2px; margin: 8px 16px 4px; font-size: 0.7rem; font-weight: 700;
}
.layers-sheet-density span {
    flex: 1; text-align: center; padding: 6px 0; border-radius: 7px;
    color: var(--text-muted); cursor: pointer;
}
.layers-sheet-density span.on { background: var(--color-indigo); color: #fff; }
.layers-sheet-note { font-size: 0.62rem; color: var(--text-muted); padding: 2px 16px 8px; }
.layers-sheet-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 16px;
    font-size: 0.78rem; min-height: 44px; border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}
.layers-toggle {
    margin-left: auto; font-size: 0.66rem; font-weight: 700; padding: 3px 10px;
    border-radius: 10px; border: 1px solid var(--border-color); color: var(--text-muted);
}
.layers-toggle.on { background: rgba(16, 185, 129, 0.14); color: #10b981; border-color: rgba(16, 185, 129, 0.35); }

@media (max-width: 768px) {
    .vis-lifecycle { padding: 2px 14px 7px; }
    .vlt-track { margin-top: 24px; }
    .vlt-lab { font-size: 0.55rem; }
    .vlt-sub { display: none; }
    .vlt-meta { margin-top: 10px; font-size: 0.6rem; }
    /* Toggle only exists to reclaim mobile chart height, so it only shows there
       — desktop always renders the timeline in full (see .vis-lifecycle-toggle). */
    .vis-lifecycle-toggle { display: inline-flex; }
    .vis-lifecycle.vlt-collapsed .vlt-track,
    .vis-lifecycle.vlt-collapsed .vlt-meta { display: none; }
    .vis-lifecycle.vlt-collapsed { padding-top: 2px; padding-bottom: 2px; }
}

/* ---- Forecast pane (Stage 3) ---- */
.vis-forecast-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 13px; }
.vfc-empty { color: var(--text-muted); font-size: 0.76rem; padding: 14px 2px; }
.vis-explain-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.vis-explain-headline { font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vis-explain-rows { display: flex; flex-direction: column; gap: 9px; }
.vis-explain-row { display: flex; align-items: flex-start; gap: 8px; }
.vis-explain-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; }
.vis-explain-text { font-size: 0.76rem; line-height: 1.45; color: var(--text-secondary, var(--text-primary)); }
.vis-explain-footnote { font-size: 0.66rem; color: var(--text-muted); border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); padding-top: 8px; display: flex; align-items: center; gap: 6px; }
.vfc-h {
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px;
}
.vfc-phase {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 0.76rem; color: var(--text-primary);
}
.vfc-phase .vfc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 22%, transparent);
}
.vfc-note { font-size: 0.68rem; color: var(--text-muted); font-weight: 400; }
.vfc-odds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vfc-odds.has-stall { grid-template-columns: 1fr 1fr 1fr; }
.vfc-odd {
    display: flex; flex-direction: column; gap: 1px;
    padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border-color);
}
.vfc-odd.up { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.3); }
.vfc-odd.dn { background: rgba(239,68,68,0.06);  border-color: rgba(239,68,68,0.28); }
.vfc-odd.stall { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.3); }
.vfc-odd-l { font-size: 0.62rem; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.vfc-odd-v { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; }
.vfc-odd.up .vfc-odd-v { color: var(--color-emerald); }
.vfc-odd.dn .vfc-odd-v { color: var(--color-crimson); }
.vfc-odd.stall .vfc-odd-v { color: var(--color-amber); }
.vfc-odd-p { font-size: 0.66rem; color: var(--text-secondary); font-family: monospace; }
.vfc-prob { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; padding: 3px 0; }
.vfc-prob-name { width: 104px; flex-shrink: 0; color: var(--text-secondary); }
.vfc-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
.vfc-bar i { display: block; height: 100%; border-radius: 3px; }
.vfc-prob-val { width: 32px; text-align: right; font-weight: 700; }
.vfc-watch {
    border: 1px solid rgba(99,102,241,0.35); background: rgba(99,102,241,0.06);
    border-radius: 10px; padding: 10px 12px;
}
.vfc-watch-row { display: flex; align-items: baseline; gap: 8px; }
.vfc-watch-row b { font-family: monospace; font-size: 1.05rem; font-weight: 800; color: #818cf8; }
.vfc-watch-row span { font-size: 0.72rem; font-weight: 600; color: #a5b4fc; }
.vfc-ev { list-style: none; margin: 0; padding: 0; }
.vfc-ev li { font-size: 0.7rem; line-height: 1.5; display: flex; gap: 6px; margin: 3px 0; }
.vfc-ev li.ok { color: var(--color-emerald); }
.vfc-ev li.warn { color: var(--color-amber); }
.vfc-src {
    font-size: 0.66rem; color: var(--text-muted); line-height: 1.5;
    border-top: 1px solid var(--border-color); padding-top: 9px;
}
.vfc-src b { color: var(--text-secondary); }
.vfc-fallback { color: var(--color-amber); }
.vfc-path { border: 1px solid rgba(129,140,248,0.24); border-radius: 8px; padding: 9px 10px; background: rgba(99,102,241,0.045); }
.vfc-path-hint { float: right; font-size: 0.6rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.vfc-path-flow { display: flex; align-items: stretch; gap: 5px; margin-top: 7px; }
.vfc-path-node { flex: 1; min-width: 0; padding: 6px 5px; border: 1px solid rgba(148,163,184,0.22); border-radius: 6px; background: rgba(15,23,42,0.22); }
.vfc-path-node.trigger { border-color: rgba(245,158,11,0.35); }
.vfc-path-node.trigger.cleared { border-color: rgba(16,185,129,0.35); }
.vfc-path-node.target { border-color: rgba(16,185,129,0.35); }
.vfc-path-node-label { display: block; font-size: 0.57rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfc-path-node b { display: block; font: 800 0.82rem var(--font-heading); margin-top: 2px; }
.vfc-path-node.now b { color: var(--text-secondary); }
.vfc-path-node.trigger b { color: var(--color-amber); }
.vfc-path-node.trigger.cleared b, .vfc-path-node.target b { color: var(--color-emerald); }
.vfc-path-node small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.58rem; line-height: 1.2; }
.vfc-path-arrow { align-self: center; color: #818cf8; font-size: 0.9rem; }
.vfc-path-risk { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(239,68,68,0.28); font-size: 0.62rem; color: var(--text-muted); }
.vfc-path-risk span:first-child { color: var(--color-crimson); font-weight: 700; text-transform: uppercase; }
.vfc-path-risk b { color: var(--color-crimson); font-family: monospace; }
.vfc-context { padding-top: 1px; }
.vfc-context-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 0.66rem; color: var(--text-muted); }
.vfc-context-grid b { color: var(--text-secondary); text-align: right; font-weight: 700; }
.vfc-summary { margin: 7px 0 0; font-size: 0.68rem; line-height: 1.4; color: var(--text-secondary); }
.vfc-indicators { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vfc-indicators span { padding: 3px 5px; border-radius: 4px; background: rgba(148,163,184,0.09); color: var(--text-muted); font: 0.6rem monospace; }
@media (max-width: 600px) { .vfc-path-flow { gap: 2px; } .vfc-path-arrow { font-size: 0.75rem; } .vfc-path-node small { font-size: 0.52rem; } }
/* The right panel's own Timeline/Options tab strip is now redundant — the rail
   tabs drive it. */
#vis-side-panel .vis-tl-head { display: none; }
/* When insights are collapsed the whole rail (tab bar included) must go, on
   every size — otherwise the tab bar alone still eats ~40px of chart height. */
.vis-main-v2.insights-hidden #vis-side-panel { display: none; }

/* =====================================================================
   VISUALIZER STAGE 1 — desktop split: chart fills, insights move to a
   collapsible RIGHT column.
   Before: .vis-main-v2 was an 830px scrolling column whose children summed to
   ~1400px, so the chart was pinned at 440px (max-height:500px) and everything
   below it (legend, insight panel, fundamentals) pushed it off-screen.
   After: a grid — chart takes the 1fr row and grows to fill the viewport; the
   insight/fundamentals/events panels live in a 380px side rail that collapses
   to 0 via the existing `insights-hidden` class.
   ===================================================================== */
@media (min-width: 769px) {
    #tab-visualizer .vis-main-v2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 0px;
        /* rows: toolbar · sim-rail · CHART (1fr) · control-bar · lifecycle · trade-plan · legend · expand-bar
           The control bar got its own row (4) when it stopped being an absolute overlay
           on the chart -- as a plain grid child it would otherwise auto-place into the
           first free cell, which put it ABOVE the chart. */
        /* Chart row carries the floor now that #stock-chart-container no longer forces
           440px and simply fills this row. 180px, not the 220px the mobile wrap rule
           uses: .vis-main-v2 is overflow:hidden on desktop, so the floor is also what
           decides when the LAST row starts getting cut. Measured at 1440x600 (an
           unusually short desktop), 220px pushed 17px of #vis-panel-expand-bar past the
           grid; 180px leaves every row intact there. */
        grid-template-rows: auto auto minmax(180px, 1fr) auto auto auto auto auto;
        overflow: hidden;
    }
    /* Side rail only occupies width when insights are expanded. */
    #tab-visualizer .vis-main-v2:not(.insights-hidden) {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    #tab-visualizer #chart-toolbar        { grid-column: 1 / -1; grid-row: 1; }
    #tab-visualizer #vis-sim-rail-wrap    { grid-column: 1 / -1; grid-row: 2; }

    #tab-visualizer .vis-tb-label { display: none; }
    #tab-visualizer .vis-tb-group { flex-shrink: 0; }
    #tab-visualizer .vis-tb-hero { flex-wrap: nowrap; flex-shrink: 0; }
    #tab-visualizer .vis-tb-hero .vis-hero-badges { flex-wrap: nowrap; }
    #tab-visualizer .vis-tb-hero .vis-hero-company { max-width: 190px; }

    /* Static legend row deleted — it was identical on every chart. Its only
       functional part (SMA settings) moves to the toolbar gear button. */
    #tab-visualizer #chart-legend-row { display: none !important; }
    #tab-visualizer .vis-chart-wrap {
        grid-column: 1; grid-row: 3;
        min-height: 0; max-height: none; height: auto;
    }
    #tab-visualizer #vis-floating-bar       { grid-column: 1; grid-row: 4; }
    #tab-visualizer #vis-lifecycle          { grid-column: 1; grid-row: 5; }
    #tab-visualizer #trend-prediction-panel { grid-column: 1; grid-row: 6; }
    #tab-visualizer #chart-legend-row       { grid-column: 1; grid-row: 7; }
    #tab-visualizer #vis-panel-expand-bar   { grid-column: 1; grid-row: 8; }

    #tab-visualizer #vis-side-panel {
        grid-column: 2; grid-row: 3 / span 6;
        overflow-y: auto; min-height: 0;
        border-left: 1px solid var(--border-color);
    }
    #tab-visualizer .vis-main-v2.insights-hidden #vis-side-panel { display: none; }

    /* The insight panel is a 2-col grid below the chart by default; stack it
       to one column inside the narrow rail. */
    #tab-visualizer #chart-pattern-details-row { grid-template-columns: 1fr; border-top: none; }
    #tab-visualizer .vis-right-panel { border-left: none; }
    #tab-visualizer #mobile-vis-search-wrap { display: none; }
}

/* =====================================================================
   TOOLBAR SPLIT — identity row + controls row (all sizes).
   One combined strip made the interval/candle/pivot controls land at a
   different x-position on every chart (their spot depended on how long the
   ticker/company/badges/pills happened to be). Row 1 holds the variable
   identity content and scrolls on its own; Row 2 holds the controls, which
   now start at the same left edge on every chart.
   `!important` because an older mobile block styles .vis-toolbar with
   !important paddings/overflow that would otherwise double up.
   ===================================================================== */
#tab-visualizer .vis-toolbar {
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}
#tab-visualizer .vis-tb-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 5px 20px;
    min-height: 38px;
}
#tab-visualizer .vis-tb-row::-webkit-scrollbar { display: none; }
#tab-visualizer .vis-tb-row-identity {
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.015);
}
/* Keep the desktop identity row compact. Long pattern history remains available
   through horizontal scrolling instead of pushing the chart down several rows. */
/* When pattern pills are present they supersede the standalone active-pattern
   badges (type · timeframe · status) — hide those to keep the identity row short. */
.vis-hero-badges.has-pattern-pills .vis-badge-pattern,
.vis-hero-badges.has-pattern-pills .vis-badge-tf,
.vis-hero-badges.has-pattern-pills .chart-pattern-status { display: none !important; }

@media (min-width: 769px) {
    #tab-visualizer .vis-tb-row-identity {
        flex-wrap: nowrap;
        overflow-x: auto;
        row-gap: 0;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #tab-visualizer .vis-tb-row-identity .vis-tb-hero {
        flex: 0 0 auto;
        min-width: 0;
        flex-wrap: nowrap;
    }
    #tab-visualizer .vis-tb-row-identity .vis-hero-badges { flex-wrap: nowrap; margin-left: 0; }
    #tab-visualizer .vis-tb-row-identity .vis-hero-company { max-width: 260px; }
    #tab-visualizer .vis-tb-row-identity .vis-pattern-pills { max-width: none; flex-wrap: nowrap; }
}
@media (max-width: 768px) {
    #tab-visualizer .vis-tb-row { padding: 3px 12px; gap: 5px; min-height: 34px; }
}

/* =====================================================================
   MOBILE UX PASS — dashboard density + chart readability
   Audit finding: on 375x812 the first signal row sat at y=643 (79% of the
   screen was chrome). These rules reclaim vertical space and fix sub-10px
   labels. `body` prefixes lift specificity to win over older mobile rules.
   ===================================================================== */
@media (max-width: 768px) {
    /* Top Signals header → a single row: title + tabs scroll together, Sort
       pinned right and always visible. The "Showing X of Y" meta is redundant
       with the "All · N" tab, so it's hidden. Reclaims ~60px (3 rows → 1). */
    body #tab-dashboard .hero-table-card .card-head {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
    }
    body #tab-dashboard .hero-table-card .card-head > div:first-child {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    body #tab-dashboard .hero-table-card .card-head > div:first-child::-webkit-scrollbar { display: none !important; }
    body #tab-dashboard .hero-table-card #hero-table-meta { display: none !important; }
    body #tab-dashboard .hero-mobile-sort { flex-shrink: 0 !important; margin-left: 0 !important; }

    /* Readability: enlarge sub-10px text. */
    /* Trade Plan strip labels were 8.3px → ~10.5px. */
    body #tab-visualizer .trend-prediction-strip .tps-label { font-size: 0.66rem !important; }
    /* Signal ticker is the primary identifier: 12 → 13px. */
    body #tab-dashboard #hero-signals-tbody .nm b { font-size: 0.82rem !important; }

    /* One Filters entry point: the cmdbar's Filters button duplicates the top
       filter row's toggle (both open the same panel), so hide the cmdbar copy. */
    #tab-dashboard .cmdbar-v2 #v2-toggle-filters { display: none !important; }

    /* Merged hero in the toolbar (Stage 1): collapse to ONE compact row so it
       saves height vs the old separate hero. Hide company + secondary badges,
       keep it on a single non-wrapping line (ticker · price · pattern · status). */
    #tab-visualizer .vis-tb-hero {
        flex-wrap: nowrap !important;
        gap: 6px; padding-right: 4px;
    }
    #tab-visualizer .vis-tb-hero .vis-hero-badges { flex-wrap: nowrap !important; gap: 4px; }
    #tab-visualizer .vis-tb-hero .vis-hero-ticker { font-size: 1rem !important; }
    #tab-visualizer .vis-tb-hero .vis-hero-price { font-size: 0.82rem !important; padding: 1px 7px; }
    #tab-visualizer .vis-tb-hero .vis-hero-company { display: none !important; }
    #tab-visualizer .vis-tb-hero .vis-badge-tf,
    #tab-visualizer .vis-tb-hero .vis-badge-momentum { display: none !important; }
    /* Keep the whole toolbar to a compact two-row max on mobile. */
    #tab-visualizer .vis-toolbar { row-gap: 4px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   RECOMMENDATIONS MOBILE LAYOUT
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hide the large hero header, date browser, score legend on mobile */
    #tab-recommendations #recs-date-browser,
    #tab-recommendations .recs-legend-bar,
    #tab-recommendations .recs-perf-section,
    #tab-recommendations .recs-active-section,
    #tab-recommendations .recs-hero-left,
    #tab-recommendations #recs-last-updated,
    #tab-recommendations #recs-spinner {
        display: none !important;
    }

    /* Compact the hero header to only show the action buttons */
    #tab-recommendations .recs-hero-header {
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    #tab-recommendations .recs-hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #tab-recommendations #btn-recs-generate {
        flex: 1 !important;
        font-size: 0.75rem !important;
        padding: 8px 10px !important;
    }
    #tab-recommendations #btn-recs-evaluate,
    #tab-recommendations #btn-recs-refresh {
        font-size: 0.72rem !important;
        padding: 8px 10px !important;
    }

    /* Country filter tabs: horizontal scroll */
    #recs-country-tabs {
        overflow-x: auto !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    #recs-country-tabs::-webkit-scrollbar { display: none !important; }
    #recs-country-tabs .recs-country-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }

    /* Compact section headers */
    #tab-recommendations .recs-page-section-hdr {
        padding: 10px 12px 6px !important;
    }
    #tab-recommendations .recs-page-section-title {
        font-size: 0.78rem !important;
    }
    #tab-recommendations .recs-page-section-meta {
        display: none !important;
    }

    /* Card body: no extra padding */
    #tab-recommendations .recs-card-body {
        padding: 0 !important;
    }

    /* The outer card: no rounded corners on mobile */
    #tab-recommendations .card.card-full-width {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   RECOMMENDATIONS MOBILE CARDS
   ──────────────────────────────────────────────────────────────────────── */
.rec-mobile-card {
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin: 0 12px 10px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.rec-mobile-card:active {
    background: rgba(99, 102, 241, 0.06);
}
.rec-mobile-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}
.rec-mobile-score {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 900;
    flex-shrink: 0;
}
.rec-mobile-card-stats {
    display: flex;
    justify-content: space-around;
    padding: 8px 12px;
    gap: 4px;
}
.rec-mobile-stat {
    text-align: center;
    flex: 1;
    border-right: 1px solid var(--border-color);
    padding: 0 4px;
}
.rec-mobile-stat:last-child { border-right: none; }
.rms-lbl {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.rms-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}

/* ── Sidebar day/night toggle (accessible on mobile via the Menu drawer) ── */
.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 8px 0 4px;
    padding: 11px 14px;
    background: var(--bg-widget);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-theme-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.sidebar-theme-toggle i {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-amber);
}

/* ── Picks card polish ── */
.rec-mobile-card { position: relative; }
.rec-mobile-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 12px 0 0 12px;
}
.rec-mobile-card.is-buy::before  { background: var(--color-emerald); }
.rec-mobile-card.is-sell::before { background: var(--color-crimson); }
.rec-mobile-card-head { padding-left: 14px; }
.rec-tk-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rec-tk {
    font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--text-primary);
}
.rec-sig {
    font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em;
    padding: 2px 7px; border-radius: 6px; line-height: 1.5;
}
.rec-sig-buy  { color: #10b981; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); }
.rec-sig-sell { color: #ef4444; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); }
.rec-tf { font-size: 0.55rem; font-weight: 700; padding: 1px 5px; border-radius: 5px; }
.rec-tf-w { color: #818cf8; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); }
.rec-tf-d { color: #34d399; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); }
.rec-sub {
    font-size: 0.64rem; color: var(--text-muted); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-upside { text-align: right; flex-shrink: 0; }
.rec-upside-lbl {
    font-size: 0.62rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
.rec-upside-val { font-size: 1rem; font-weight: 800; margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE BOTTOM NAVIGATION BAR
   Visible only on ≤768px viewports. Provides thumb-friendly access to
   the 4 primary destinations + a menu button to open the sidebar drawer.
   ──────────────────────────────────────────────────────────────────────── */
.mobile-bottom-nav {
    display: none;
}

/* PWA connection and installation affordances. These are deliberately small
   and stay above the mobile navigation so they never block page actions. */
.pwa-connection-status {
    background: #334155;
    border-radius: 999px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    left: 50%;
    opacity: 0;
    padding: 9px 14px;
    pointer-events: none;
    position: fixed;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1200;
}

.pwa-connection-status.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pwa-connection-status.is-offline {
    background: #b45309;
}

.pwa-install-prompt {
    align-items: center;
    background: var(--bg-widget, #fff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
    display: flex;
    gap: 10px;
    left: 16px;
    padding: 12px;
    position: fixed;
    right: 16px;
    z-index: 1200;
}

.pwa-install-prompt div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.pwa-install-prompt strong { color: var(--text-primary, #0f172a); font-size: 0.82rem; }
.pwa-install-prompt span { color: var(--text-muted, #64748b); font-size: 0.7rem; line-height: 1.25; }
.pwa-install-prompt button { min-height: 40px; }
.pwa-install-button { background: var(--color-primary, #4f46e5); border: 0; border-radius: 10px; color: #fff; font-weight: 700; padding: 0 12px; }
.pwa-dismiss-button { background: transparent; border: 0; color: var(--text-muted, #64748b); font-size: 0.72rem; padding: 0 4px; }

@media (max-width: 768px) {
    /* Show the bar */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Bug fix: a fixed 58px height combined with padding-bottom:
           env(safe-area-inset-bottom) below ate into the same 58px instead of
           adding to it, squeezing out room for the icon+label — on a device
           with a real inset (e.g. iPhone home indicator) the labels got
           clipped/hidden, leaving what looked like an icon-only, "cut off"
           nav bar. Let the safe area add to the total height instead. */
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: 1100;
        align-items: stretch;
        justify-content: space-around;
        background: var(--bg-widget);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 0 2px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Give main content room so bottom nav never overlaps last row */
    .main-content {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Each nav button */
    .mbn-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 6px 2px 4px;
        border-radius: 10px;
        transition: color 0.18s ease, background 0.18s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        min-width: 0;
    }
    .mbn-btn i {
        font-size: 1.1rem;
        line-height: 1;
        transition: transform 0.18s ease;
    }
    .mbn-btn span {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 56px;
    }

    /* Active state */
    .mbn-btn.active {
        color: var(--color-primary, #6366f1);
    }
    .mbn-btn.active i {
        transform: translateY(-1px);
        color: var(--color-primary, #6366f1);
    }

    /* Chart button — slightly larger center icon. Color follows the active
       state like every other button (was permanently indigo, which made it
       look selected on every tab). */
    .mbn-chart-btn i {
        font-size: 1.2rem;
    }
    .mbn-chart-btn.active {
        background: rgba(99, 102, 241, 0.12);
        border-radius: 12px;
    }

    /* Search button accent */
    .mbn-btn#mbn-search-btn.active {
        color: var(--color-emerald, #10b981);
    }
    .mbn-btn#mbn-search-btn.active i {
        color: var(--color-emerald, #10b981);
    }

    /* Light theme overrides */
    body.light-theme .mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.1);
    }
    body.light-theme .mbn-btn {
        color: var(--text-muted);
    }
    body.light-theme .mbn-btn.active {
        color: var(--color-primary, #4f46e5);
    }
}


/* =====================================================================
   DASHBOARD REORDER (redesign v3, stage 1)
   Audit (1440x900, real data): signals sat at y~2,327 of ~2,690 - beneath
   1,137px of market-intelligence panels. Reorder via flex `order` so the
   signal feed comes right after the filters; Signal Directory and the
   intelligence row are demoted below it. DOM stays untouched (JS ids all
   keep working); mobile (<=768px) already hides the demoted rows.
   ===================================================================== */
@media (min-width: 769px) {
    #tab-dashboard.active { display: flex; flex-direction: column; }
    #tab-dashboard > #global-sentiment-bar      { order: 1; }
    #tab-dashboard > #dashboard-kpi-strip        { order: 2; }
    #tab-dashboard > #dashboard-equation         { order: 2; }
    #tab-dashboard > .kpi-strip                 { order: 2; }
    #tab-dashboard > #dashboard-spotlight       { order: 3; }
    #tab-dashboard > #dashboard-global-filter-row { order: 4; }
    #tab-dashboard > #active-patterns-row       { order: 5; }
    #tab-dashboard > #mi-bar-v3                 { order: 6; }
    #tab-dashboard > #signal-directory-row      { order: 7; }
    #tab-dashboard > #sectors-dashboard-row     { order: 8; }
}

/* =====================================================================
   INTERACTIVE FILTERS PREMIUM OPTIMIZATIONS & MICRO-ANIMATIONS
   ===================================================================== */

/* KPI Strip Tappable Cards: scale, inner shadow & border-glow */
.kpi-strip-v2 .k.k-tappable {
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), 
                background 0.2s ease, 
                box-shadow 0.2s ease;
}
.kpi-strip-v2 .k.k-tappable:hover {
    transform: translateY(-2px);
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.kpi-strip-v2 .k.k-tappable:active {
    transform: translateY(0);
}
.kpi-strip-v2 .k.k-tappable.is-active {
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: inset 0 0 8px rgba(99, 102, 241, 0.25), 0 2px 10px rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4) !important;
}
.kpi-strip-v2 .k.k-tappable.is-active::after {
    height: 3px;
    box-shadow: 0 0 10px var(--color-primary);
}

/* Segment Selectors (.seg buttons): smooth hover scale, custom active status glows */
.seg button {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.seg button::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%; width: 120%; height: 120%;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease;
    pointer-events: none;
}
.seg button:hover {
    transform: scale(1.03);
    color: var(--text-primary) !important;
}
.seg button:hover::before {
    transform: translate(-50%, -50%) scale(1);
}
.seg button.active {
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
    font-weight: 700;
}
.seg.green button.active {
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
    background: var(--color-emerald) !important;
}
.seg:not(.green) button.active {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.35);
    background: var(--color-primary) !important;
}

/* Global Country buttons (Sidebar): premium HSL background transitions */
.global-country-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.global-country-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    transform: scale(1.02);
}
.global-country-btn.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
}

/* Pattern Explorer items (.pxg): active state glow and interactive scale */
.pxg {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.pxg:hover {
    transform: translateY(-2px) scale(1.01) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.pxg.active {
    border-color: var(--color-primary) !important;
    background: rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2), inset 0 0 6px rgba(99, 102, 241, 0.15);
}

/* ── Zerodha Portfolio Pattern Intelligence ───────────────────────────── */
.zerodha-scan-progress { max-width:720px; margin:12px 0 18px; padding:13px 15px; border:1px solid rgba(99,102,241,.25); border-radius:13px; background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(6,182,212,.04)); box-shadow:0 12px 30px rgba(99,102,241,.08); }
.zerodha-chart-link { display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:4px 8px; border:1px solid rgba(99,102,241,.24); border-radius:7px; color:#6366f1; background:rgba(99,102,241,.07); font:700 .64rem/1 Inter,sans-serif; cursor:pointer; transition:transform .18s,border-color .18s,background .18s; }
.zerodha-chart-link:hover { transform:translateY(-1px); border-color:rgba(99,102,241,.55); background:rgba(99,102,241,.13); }
.zerodha-chart-link i { font-size:.6rem; }
.zerodha-progress-head,.zerodha-progress-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.zerodha-progress-head { color:var(--text-primary); font-size:.78rem; font-weight:700; }
.zerodha-progress-head strong { color:#818cf8; font-variant-numeric:tabular-nums; }
.zerodha-progress-track { position:relative; overflow:hidden; height:8px; margin:10px 0 8px; border-radius:999px; background:rgba(99,102,241,.12); }
.zerodha-progress-track>div { position:relative; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6366f1,#8b5cf6,#06b6d4); box-shadow:0 0 14px rgba(99,102,241,.45); transition:width .5s ease; }
.zerodha-progress-track>div::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%); animation:zerodhaProgressShimmer 1.4s infinite; }
.zerodha-progress-foot { color:var(--text-secondary); font-size:.64rem; }
.zerodha-progress-foot i { margin-right:5px; color:#818cf8; }
#zerodha-scan-btn:disabled { cursor:not-allowed; opacity:.62; }
@keyframes zerodhaProgressShimmer { to { transform:translateX(100%); } }
.portfolio-intelligence-shell { position:relative; overflow:hidden; padding:24px; border:1px solid color-mix(in srgb,var(--color-indigo) 24%,var(--border-color)); border-radius:20px; background:linear-gradient(145deg,color-mix(in srgb,var(--bg-card) 94%,#6366f1 6%),var(--bg-card)); box-shadow:0 24px 70px rgba(15,23,42,.10); }
.pis-collapse-toggle { width:100%; display:grid; grid-template-columns:minmax(260px,1fr) auto auto; align-items:center; gap:20px; margin-bottom:10px; padding:13px 15px; border:1px solid rgba(99,102,241,.25); border-radius:14px; color:var(--text-primary); background:linear-gradient(135deg,color-mix(in srgb,var(--bg-card) 94%,#6366f1 6%),var(--bg-card)); cursor:pointer; text-align:left; box-shadow:0 10px 30px rgba(15,23,42,.06); transition:border-color .2s,transform .2s,box-shadow .2s; }
.pis-collapse-toggle:hover { transform:translateY(-1px); border-color:rgba(99,102,241,.52); box-shadow:0 14px 34px rgba(99,102,241,.10); }
.pis-toggle-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.pis-toggle-brand>span { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:11px; color:#818cf8; background:rgba(99,102,241,.12); }
.pis-toggle-brand strong,.pis-toggle-brand small { display:block; }
.pis-toggle-brand strong { font-size:.85rem; }
.pis-toggle-brand small { margin-top:3px; color:var(--text-secondary); font-size:.66rem; }
.pis-toggle-metrics { display:flex; align-items:center; gap:18px; }
.pis-toggle-metrics>div { min-width:72px; padding-left:17px; border-left:1px solid var(--border-color); }
.pis-toggle-metrics span,.pis-toggle-metrics strong { display:block; }
.pis-toggle-metrics span { color:var(--text-secondary); font-size:.58rem; text-transform:uppercase; letter-spacing:.07em; }
.pis-toggle-metrics strong { margin-top:3px; color:var(--text-primary); font-size:.82rem; }
.pis-toggle-action { display:inline-flex; align-items:center; gap:9px; padding:8px 11px; border-radius:9px; color:#6366f1; background:rgba(99,102,241,.09); font-size:.68rem; white-space:nowrap; }
.pis-toggle-action i { transition:transform .25s; }
.pis-collapse-toggle[aria-expanded="true"] .pis-toggle-action i { transform:rotate(180deg); }
.pis-detail-collapsed { display:none; }
#zerodha-insights-detail { scroll-margin-top:18px; }
.zerodha-results-toggle { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 10px; padding:12px 14px; border:1px solid var(--border-color); border-radius:13px; color:var(--text-primary); background:color-mix(in srgb,var(--bg-secondary) 78%,transparent); cursor:pointer; text-align:left; transition:border-color .2s,background .2s,transform .2s; }
.zerodha-results-toggle:hover { transform:translateY(-1px); border-color:rgba(99,102,241,.42); background:color-mix(in srgb,var(--bg-secondary) 88%,#6366f1 4%); }
.zerodha-results-toggle>div { display:flex; align-items:center; gap:10px; min-width:0; }
.zerodha-results-toggle>div>span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:10px; color:#818cf8; background:rgba(99,102,241,.11); }
.zerodha-results-toggle strong,.zerodha-results-toggle small { display:block; }
.zerodha-results-toggle strong { font-size:.8rem; }
.zerodha-results-toggle small { margin-top:3px; color:var(--text-secondary); font-size:.64rem; }
.zerodha-results-toggle>span { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; color:#6366f1; background:rgba(99,102,241,.08); font-size:.66rem; white-space:nowrap; }
.zerodha-results-toggle>span i { transition:transform .25s; }
.zerodha-results-toggle[aria-expanded="true"]>span i { transform:rotate(180deg); }
#zerodha-results-table-detail { scroll-margin-top:18px; }
.broker-accordion-header { width:100%; appearance:none; border:0; border-bottom:1px solid var(--border-color); cursor:pointer; color:var(--text-primary); background:transparent; font:inherit; text-align:left; }
.broker-accordion-header:hover { background:color-mix(in srgb,var(--bg-secondary) 55%,transparent); }
.broker-accordion-state { display:inline-flex; align-items:center; gap:12px; }
.broker-accordion-state>i { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#818cf8; background:rgba(99,102,241,.09); font-size:.68rem; transition:transform .25s; }
.broker-accordion-header[aria-expanded="false"] .broker-accordion-state>i { transform:rotate(180deg); }
.broker-accordion-body { overflow:visible; }
.broker-accordion-body.broker-accordion-collapsed { display:none; }
.portfolio-insights-action { color:#6366f1 !important; border-color:rgba(99,102,241,.30) !important; background:rgba(99,102,241,.08) !important; }
.portfolio-insights-action:hover { border-color:rgba(99,102,241,.55) !important; background:rgba(99,102,241,.14) !important; }
.portfolio-intelligence-shell::before { content:""; position:absolute; width:420px; height:420px; top:-260px; right:-120px; border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,.20),transparent 68%); pointer-events:none; }
.pis-hero { position:relative; display:flex; justify-content:space-between; align-items:center; gap:28px; padding:18px 8px 28px; }
.pis-hero-copy { max-width:760px; }
.pis-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid rgba(99,102,241,.28); border-radius:999px; color:#818cf8; background:rgba(99,102,241,.09); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pis-hero h2 { margin:14px 0 10px; color:var(--text-primary); font-family:Outfit,Inter,sans-serif; font-size:clamp(1.9rem,3vw,3.15rem); line-height:1.02; letter-spacing:-.035em; }
.pis-hero h2 span { background:linear-gradient(90deg,#6366f1,#a855f7,#06b6d4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pis-hero p { max-width:700px; margin:0; color:var(--text-secondary); font-size:.92rem; line-height:1.7; }
.pis-score-ring { --score:0; width:150px; height:150px; flex:0 0 150px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#6366f1 calc(var(--score)*1%),rgba(99,102,241,.12) 0); box-shadow:0 0 45px rgba(99,102,241,.16); }
.pis-score-ring::before { content:""; grid-area:1/1; width:122px; height:122px; border-radius:50%; background:var(--bg-card); box-shadow:inset 0 0 0 1px var(--border-color); }
.pis-score-ring>div { position:relative; grid-area:1/1; text-align:center; }
.pis-score-ring strong { display:block; font:800 1.75rem/1 Outfit,sans-serif; color:var(--text-primary); }
.pis-score-ring span { display:block; margin-top:6px; color:var(--text-secondary); font-size:.67rem; line-height:1.15; text-transform:uppercase; letter-spacing:.1em; }
.pis-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:30px; }
.pis-kpi { position:relative; min-height:128px; padding:16px; border:1px solid var(--border-color); border-radius:14px; background:color-mix(in srgb,var(--bg-secondary) 78%,transparent); transition:transform .2s,border-color .2s; }
.pis-kpi:hover { transform:translateY(-3px); border-color:rgba(99,102,241,.45); }
.pis-kpi>i { float:right; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#818cf8; background:rgba(99,102,241,.12); }
.pis-kpi.positive>i { color:#10b981; background:rgba(16,185,129,.12); }
.pis-kpi.negative>i { color:#ef4444; background:rgba(239,68,68,.12); }
.pis-kpi>span,.pis-kpi>small { display:block; color:var(--text-secondary); font-size:.69rem; text-transform:uppercase; letter-spacing:.07em; }
.pis-kpi>strong { display:block; margin:16px 0 5px; color:var(--text-primary); font:750 1.35rem/1 Outfit,sans-serif; }
.pis-kpi>small { font-size:.64rem; text-transform:none; letter-spacing:0; }
.pis-section-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:28px 0 12px; }
.pis-section-heading>div { display:flex; align-items:center; gap:10px; }
.pis-section-heading span { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:#a5b4fc; background:rgba(99,102,241,.13); font-size:.68rem; font-weight:800; }
.pis-section-heading h3 { margin:0; color:var(--text-primary); font-size:1rem; }
.pis-section-heading p { margin:0; color:var(--text-secondary); font-size:.72rem; }
.pis-scenario-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pis-scenario-card { padding:18px; border:1px solid var(--border-color); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--bg-secondary) 85%,#6366f1 5%),var(--bg-secondary)); }
.pis-card-label { color:var(--text-secondary); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.pis-scenario-value { margin:8px 0 2px; color:var(--text-primary); font:750 1.55rem/1.2 Outfit,sans-serif; }
.pis-scenario-growth { font-size:.9rem; font-weight:800; }
.pis-scenario-growth span { color:var(--text-secondary); font-size:.67rem; font-weight:500; }
.pis-range { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; margin-top:16px; color:var(--text-secondary); font-size:.66rem; }
.pis-range>div { position:relative; height:5px; border-radius:4px; background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981); }
.pis-range i { position:absolute; top:50%; width:11px; height:11px; border:2px solid var(--bg-card); border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.pis-rupee-range { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:13px; padding-top:12px; border-top:1px solid var(--border-color); }
.pis-rupee-range>div:last-child { text-align:right; }
.pis-rupee-range span,.pis-rupee-range strong { display:block; }
.pis-rupee-range span { color:var(--text-secondary); font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.pis-rupee-range strong { margin-top:3px; color:var(--text-primary); font:750 .92rem/1.2 Outfit,sans-serif; }
.pis-rupee-range>i { color:#818cf8; font-size:.7rem; opacity:.75; }
.pis-chart-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr); gap:12px; }
.pis-chart-exposure { grid-column:1/-1; }
.pis-chart-card { min-width:0; padding:16px; border:1px solid var(--border-color); border-radius:15px; background:color-mix(in srgb,var(--bg-secondary) 82%,transparent); }
.pis-chart-title { display:flex; justify-content:space-between; align-items:center; }
.pis-chart-title small { color:#818cf8; font-size:.6rem; font-weight:800; letter-spacing:.13em; }
.pis-chart-title h4 { margin:2px 0 0; color:var(--text-primary); font-size:.86rem; }
.pis-chart-title p { margin:3px 0 0; color:var(--text-secondary); font-size:.66rem; }
.pis-chart-title>i { color:var(--text-secondary); opacity:.55; }
.pis-allocation-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:-2px; }
.pis-allocation-metrics>div { position:relative; padding:10px 9px 9px 14px; border:1px solid var(--border-color); border-radius:10px; background:color-mix(in srgb,var(--bg-card) 70%,transparent); }
.pis-allocation-metrics i { position:absolute; left:7px; top:13px; width:3px; height:27px; border-radius:3px; }
.pis-allocation-metrics i.bullish { background:#10b981; }.pis-allocation-metrics i.bearish { background:#ef4444; }.pis-allocation-metrics i.uncovered { background:#94a3b8; }
.pis-allocation-metrics span,.pis-allocation-metrics small { display:block; color:var(--text-secondary); font-size:.58rem; }
.pis-allocation-metrics strong { display:block; margin:3px 0 1px; color:var(--text-primary); font-size:.92rem; }
.pis-concentration-badge { align-self:flex-start; padding:6px 9px; border:1px solid rgba(99,102,241,.24); border-radius:999px; color:#818cf8; background:rgba(99,102,241,.08); font-size:.64rem; font-weight:800; white-space:nowrap; }
.pis-pattern-panel { overflow:hidden; padding:4px 16px; border:1px solid var(--border-color); border-radius:15px; background:color-mix(in srgb,var(--bg-secondary) 76%,transparent); }
.pis-pattern-row { display:grid; grid-template-columns:minmax(180px,1.6fr) .75fr .8fr 1fr; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--border-color); font-size:.8rem; }
.pis-pattern-row:last-child { border-bottom:0; }
.pis-pattern-symbol { display:flex; align-items:center; gap:10px; min-width:0; }
.pis-pattern-symbol>span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:10px; color:#a5b4fc; background:rgba(99,102,241,.13); font-size:.7rem; font-weight:800; }
.pis-pattern-symbol strong,.pis-pattern-symbol small,.pis-confidence span,.pis-target span { display:block; }
.pis-pattern-symbol small,.pis-confidence span,.pis-target span { margin-top:2px; color:var(--text-secondary); font-size:.66rem; }
.pis-signal-pill { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:.66rem; font-weight:800; }
.pis-signal-pill.favorable { color:#10b981; background:rgba(16,185,129,.12); }
.pis-signal-pill.risk { color:#ef4444; background:rgba(239,68,68,.12); }
.pis-confidence strong,.pis-target strong { color:var(--text-primary); }
.pis-risk-callout,.pis-method { display:flex; align-items:flex-start; gap:12px; margin-top:12px; padding:14px 16px; border-radius:13px; }
.pis-risk-callout { color:#f59e0b; border:1px solid rgba(245,158,11,.25); background:rgba(245,158,11,.07); }
.pis-risk-callout strong,.pis-risk-callout span { display:block; }
.pis-risk-callout span { margin-top:3px; color:var(--text-secondary); font-size:.75rem; }
.pis-method { margin-top:18px; color:#818cf8; background:rgba(99,102,241,.07); }
.pis-method strong { color:var(--text-primary); font-size:.82rem; }
.pis-method p,.pis-method small { display:block; margin:4px 0 0; color:var(--text-secondary); font-size:.7rem; line-height:1.55; }
.pis-method small { opacity:.8; }
@media(max-width:900px){.pis-collapse-toggle{grid-template-columns:1fr auto}.pis-toggle-metrics{grid-column:1/-1;grid-row:2}.pis-kpi-grid{grid-template-columns:repeat(2,1fr)}.pis-chart-grid{grid-template-columns:1fr}.pis-chart-exposure{grid-column:auto}.pis-pattern-row{grid-template-columns:1.4fr .7fr .8fr}.pis-target{display:none}}
@media(max-width:600px){.pis-collapse-toggle{gap:10px;padding:11px}.pis-toggle-action b{display:none}.pis-toggle-metrics{gap:8px;justify-content:space-between}.pis-toggle-metrics>div{min-width:0;padding-left:8px}.portfolio-intelligence-shell{padding:14px;border-radius:15px}.pis-hero{align-items:flex-start}.pis-score-ring{width:100px;height:100px;flex-basis:100px}.pis-score-ring::before{width:80px;height:80px}.pis-score-ring strong{font-size:1.2rem}.pis-hero h2{font-size:1.65rem}.pis-kpi-grid,.pis-scenario-grid{grid-template-columns:1fr}.pis-section-heading{align-items:flex-start;flex-direction:column}.pis-pattern-row{grid-template-columns:1fr auto}.pis-confidence{display:none}}

/* Inline chart price tape: clear on touch screens without covering the setup. */
.chart-price-readout { position:absolute; z-index:10; top:10px; left:10px; width:194px; padding:8px 10px; pointer-events:none; color:var(--text-primary); background:color-mix(in srgb,var(--bg-card) 42%,transparent); border:1px solid color-mix(in srgb,var(--border-color) 60%,transparent); border-radius:10px; box-shadow:0 5px 18px rgba(0,0,0,.14); backdrop-filter:blur(6px) saturate(1.3); -webkit-backdrop-filter:blur(6px) saturate(1.3); }
.chart-price-date { display:flex; align-items:center; gap:5px; color:var(--text-muted); font-size:.62rem; font-weight:700; letter-spacing:.02em; }
.chart-price-main { display:flex; align-items:baseline; gap:6px; margin-top:3px; }
.chart-price-main span { color:var(--text-secondary); font-size:.66rem; }
.chart-price-main strong { font-size:.92rem; line-height:1.1; }
.chart-price-main em { margin-left:auto; font-size:.68rem; font-style:normal; font-weight:800; }
.chart-price-range { display:flex; justify-content:space-between; gap:5px; margin-top:5px; padding-top:5px; border-top:1px solid var(--border-color); color:var(--text-muted); font-size:.6rem; font-weight:600; }

/* Stage 3 fan hover tooltip: the probability-fan branches carry no permanent
   axis label by design, so this is the only place their odds/target surface —
   follows the cursor, shown only when hovering within a few px of a branch. */
.chart-fan-tooltip { position:absolute; z-index:12; padding:5px 9px; white-space:nowrap; pointer-events:none; color:var(--text-primary); background:color-mix(in srgb,var(--bg-card) 92%,transparent); border:1px solid var(--border-color); border-radius:8px; box-shadow:0 5px 18px rgba(0,0,0,.25); backdrop-filter:blur(10px); font-size:.7rem; font-weight:600; }
.chart-fan-tooltip-eta { margin-left:4px; color:var(--text-muted); font-size:.62rem; font-weight:600; }

/* Icon-first regime status: short visual context instead of a sentence across the chart. */
.chart-transition-banner { position:absolute; z-index:8; top:10px; left:50%; display:flex; align-items:center; gap:7px; min-width:154px; padding:6px 8px; border:1px solid; border-radius:11px; transform:translateX(-50%); pointer-events:none; box-shadow:0 6px 20px rgba(0,0,0,.2); backdrop-filter:blur(10px); }
.chart-transition-banner.is-bullish { color:#a7f3d0; background:rgba(6,78,59,.88); border-color:rgba(52,211,153,.58); }
.chart-transition-banner.is-bearish { color:#fecdd3; background:rgba(127,29,29,.88); border-color:rgba(251,113,133,.58); }
.chart-transition-banner.is-neutral { color:#e2e8f0; background:rgba(51,65,85,.9); border-color:rgba(148,163,184,.58); }
.chart-regime-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:rgba(255,255,255,.13); font-size:.72rem; }
.chart-regime-copy { display:flex; flex-direction:column; line-height:1.05; }
.chart-regime-copy small { opacity:.75; font-size:.55rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.chart-regime-copy strong { margin-top:2px; font-size:.7rem; white-space:nowrap; }
.chart-regime-score { display:grid; place-items:center; width:22px; height:22px; margin-left:auto; border-radius:999px; color:inherit; background:rgba(255,255,255,.14); font-size:.62rem; font-weight:800; }
.chart-regime-animal { display:none; }

/* Final mobile pass for the scanner signal list: favour ticker, setup, state, and conviction. */
@media (max-width:768px) {
    #tab-dashboard .hero-table-card { border-radius:12px !important; box-shadow:0 6px 20px rgba(15,23,42,.05); }
    #tab-dashboard .hero-table thead { background:color-mix(in srgb,var(--bg-secondary) 82%,transparent); }
    #tab-dashboard .hero-table th { height:38px; font-size:.6rem !important; letter-spacing:.07em; }
    #tab-dashboard .hero-table td { padding-top:12px !important; padding-bottom:12px !important; }
    #tab-dashboard .hero-table tbody tr { position:relative; }
    #tab-dashboard .hero-table tbody tr:not(:last-child)::after { content:''; position:absolute; right:10px; bottom:0; left:10px; border-bottom:1px solid var(--border-color); opacity:.7; }
    #tab-dashboard .hero-table td:nth-child(1) { width:37% !important; }
    #tab-dashboard .hero-table td:nth-child(2) { width:27% !important; }
    #tab-dashboard .hero-table td:nth-child(3) { width:18% !important; }
    #tab-dashboard .hero-table td:nth-child(10) { width:18% !important; }
    #tab-dashboard .hero-table td .hero-tick .nm b { font-size:.82rem !important; letter-spacing:-.01em; }
    #tab-dashboard .hero-table td .hero-tick .nm .nm-quote { gap:5px !important; margin-top:3px !important; }
    #tab-dashboard .hero-table td .pattern-cell-spark { margin-top:2px; }
    #tab-dashboard .hero-table td .hero-tag { padding:4px 6px !important; border-radius:7px !important; font-size:.58rem !important; }
    #tab-dashboard .hero-confwrap { flex-direction:column; align-items:flex-start; gap:4px; font-size:.72rem !important; line-height:1; }
    #tab-dashboard .hero-confbar { width:100% !important; max-width:48px; height:5px !important; margin:0 !important; }
    /* Upside cell: the desktop grid's fixed column minimums (3.5rem+4.6rem+42px+gaps)
       overflow a phone-width column, so drop to intrinsic widths and stack. Cross-row
       meter alignment is the tradeoff, but it buys little in a column this narrow. */
    #tab-dashboard .hero-upside { grid-template-columns:auto auto; gap:2px 6px; font-size:.72rem !important; }
    #tab-dashboard .hero-upside .hu-meter { width:100%; max-width:48px; height:5px; grid-column:1 / -1; justify-self:start; }
    #tab-dashboard .hero-upside .hu-tgt { font-size:.62rem !important; }
    .chart-price-readout { width:168px; padding:7px 8px; }
    .chart-price-range { font-size:.56rem; }
    .chart-transition-banner { top:92px; left:auto; right:9px; min-width:0; transform:none; }
    .chart-regime-copy strong { font-size:.64rem; }
    .chart-regime-score { display:none; }
}

/* =====================================================================
   MOBILE TASK SURFACES — the phone layout deliberately uses cards and
   progressive disclosure instead of squeezing the desktop table/toolbar.
   ===================================================================== */
.mobile-signal-list,
.mobile-trade-plan-toggle { display: none; }

@media (max-width:768px) {
    /* Signals: preserve the desktop table for wide screens, but expose an
       accessible, single-action feed on a phone. */
    #tab-dashboard .table-responsive-wrapper { display: none !important; }
    #tab-dashboard .mobile-signal-list {
        display: grid;
        gap: 8px;
        padding: 8px 12px 12px;
    }
    #tab-dashboard .mobile-signal-empty {
        color: var(--text-muted);
        font-size: .84rem;
        margin: 18px 0;
        text-align: center;
    }
    #tab-dashboard .mobile-signal-card {
        background: var(--bg-widget);
        border: 1px solid var(--border-color);
        border-left: 3px solid var(--color-emerald, #10b981);
        border-radius: 12px;
        color: var(--text-primary);
        display: grid;
        font: inherit;
        gap: 10px;
        min-height: 132px;
        padding: 13px 15px;
        position: relative;
        text-align: left;
        touch-action: manipulation;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    #tab-dashboard .mobile-signal-card.is-bearish { border-left-color: var(--color-crimson, #ef4444); }
    /* 2nd+ card in a same-ticker run: the ticker + company + price are unchanged from
       the card above it, so drop them and tighten — the run reads as one grouped block. */
    #tab-dashboard .mobile-signal-card.is-repeat {
        border-top-left-radius: 0; border-top-right-radius: 0;
        margin-top: -8px; min-height: 0; padding-top: 10px;
    }
    #tab-dashboard .mobile-signal-card.is-repeat .mobile-signal-identity span,
    #tab-dashboard .mobile-signal-card.is-repeat .mobile-signal-price { display: none; }
    #tab-dashboard .mobile-signal-card.is-repeat .mobile-signal-identity strong { opacity: 0.45; font-size: 0.8rem; }
    #tab-dashboard .mobile-signal-card:active { background: rgba(99, 102, 241, .10); transform: scale(.995); }
    #tab-dashboard .mobile-signal-card:focus-visible { outline: 3px solid rgba(99, 102, 241, .42); outline-offset: 2px; }
    #tab-dashboard .mobile-signal-card-top { align-items: start; display: flex; gap: 10px; justify-content: space-between; min-width: 0; }
    #tab-dashboard .mobile-signal-identity { display: grid; gap: 2px; min-width: 0; }
    #tab-dashboard .mobile-signal-identity strong { font-size: 1rem; line-height: 1.1; }
    #tab-dashboard .mobile-signal-identity span { color: var(--text-muted); font-size: .69rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #tab-dashboard .mobile-signal-status { border-radius: 999px; font-size: .66rem; font-weight: 800; padding: 5px 8px; white-space: nowrap; }
    #tab-dashboard .mobile-signal-status.is-confirmed { background: rgba(16,185,129,.14); color: var(--color-emerald, #10b981); }
    #tab-dashboard .mobile-signal-status.is-forming { background: rgba(99,102,241,.13); color: var(--color-primary, #6366f1); }
    #tab-dashboard .mobile-signal-price { align-items: baseline; display: flex; gap: 8px; }
    #tab-dashboard .mobile-signal-price strong { font-size: .92rem; }
    #tab-dashboard .mobile-signal-price span { color: var(--color-emerald, #10b981); font-size: .76rem; font-weight: 800; }
    #tab-dashboard .mobile-signal-card.is-bearish .mobile-signal-price span { color: var(--color-crimson, #ef4444); }
    #tab-dashboard .mobile-signal-metrics { border-top: 1px solid var(--border-color); display: grid; gap: 8px; grid-template-columns: minmax(0, 1.45fr) .8fr .55fr; padding-top: 9px; }
    #tab-dashboard .mobile-signal-metric { display: grid; gap: 2px; min-width: 0; }
    #tab-dashboard .mobile-signal-metric span { color: var(--text-muted); font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
    #tab-dashboard .mobile-signal-metric strong { font-size: .73rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #tab-dashboard .mobile-signal-chevron { color: var(--text-muted); font-size: .72rem; position: absolute; right: 14px; top: 52px; }
    #tab-dashboard #hero-table-pagination { padding: 6px 12px 12px !important; }

    /* Chart: compact control rail. The duplicate desktop buttons are removed;
       dropdowns provide the same choices without obscuring the chart. */
    /* One control line: with the utility cluster (Bull/Alerts/Layers/Gear/
       Maximize) relocated onto the chart as an overlay (see
       .vis-chart-overlay-controls), the remaining controls (interval/style/
       pivot dropdowns + Patterns toggle + Timeline) fit a single 375px row —
       so the toolbar consolidates to exactly two lines: hero + this row. */
    #tab-visualizer .vis-tb-row-controls {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 36px !important;
        padding: 4px 12px !important;
    }
    #tab-visualizer .vis-tb-row-controls .vis-tb-group-interval,
    #tab-visualizer .vis-tb-row-controls .vis-tb-group-style,
    #tab-visualizer .vis-tb-row-controls .vis-tb-sep,
    #tab-visualizer #btn-toggle-sim-rail,
    #tab-visualizer #chart-confluence-chip,
    #tab-visualizer #chart-rsi-badge,
    #tab-visualizer #chart-macd-badge,
    #tab-visualizer #chart-obv-badge,
    #tab-visualizer #chart-retest-badge,
    #tab-visualizer #chart-fundamental-boost-badge { display: none !important; }
    /* The utility cluster (Regime/Alerts/Layers/Gear/Maximize) is relocated
       by ui.js into .vis-chart-wrap on mobile and floats over the chart's
       top-right corner, styled as translucent on-chart controls. */
    #tab-visualizer .vis-chart-overlay-controls {
        display: flex !important;
        position: absolute;
        top: 8px;
        /* Top-right corner above the price scale's first label — the only
           strip that clears both the OHLC readout card (left) and the axis
           numbers (right). */
        right: 4px;
        z-index: 7;
        margin-left: 0 !important;
        gap: 5px !important;
        padding: 3px 5px;
        border-radius: 12px;
        background: rgba(11, 15, 25, 0.35);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    body.light-theme #tab-visualizer .vis-chart-overlay-controls {
        background: rgba(248, 250, 252, 0.55);
    }
    /* Compact the chips on the overlay so the cluster never reaches the OHLC
       readout card: regime shows its colored dot only (full word in the
       tooltip), alerts shows bell + severity dot (details are one tap away
       in the sheet). */
    #tab-visualizer .vis-chart-overlay-controls #chart-regime-chip .vis-chip-label,
    #tab-visualizer .vis-chart-overlay-controls #chart-alerts-chip .vis-chip-count,
    #tab-visualizer .vis-chart-overlay-controls #chart-news-chip .vis-chip-count {
        display: none !important;
    }
    #tab-visualizer #btn-chart-open-new-tab,
    #tab-visualizer #btn-collapse-insights { display: none !important; }
    #tab-visualizer .vis-tb-row-controls .vis-tb-label { display: none !important; }
    #tab-visualizer #chart-interval-dd,
    #tab-visualizer #chart-style-dd,
    #tab-visualizer #chart-pivot-dd,
    #tab-visualizer #btn-toggle-lifecycle { display: inline-flex !important; flex: 0 0 auto; min-height: 44px; }
    #tab-visualizer #chart-interval-dd,
    #tab-visualizer #chart-style-dd,
    #tab-visualizer #chart-pivot-dd { max-width: 118px; padding: 0 26px 0 10px !important; }
    #tab-visualizer .vis-tb-row-controls .vis-tb-group { align-items: center; display: flex; min-height: 44px; }
    #tab-visualizer .vis-tb-row-controls .toggle-switch-sm { min-height: 44px; min-width: 48px; }

    /* The trade plan is intentionally an in-flow disclosure. It saves chart
       height by default and never becomes a permanently clipped horizontal row. */
    #tab-visualizer .mobile-trade-plan-toggle {
        align-items: center;
        background: var(--bg-widget);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        color: var(--text-primary);
        display: flex;
        font: inherit;
        font-size: .78rem;
        font-weight: 800;
        gap: 8px;
        justify-content: space-between;
        margin: 8px 12px;
        min-height: 48px;
        padding: 0 14px;
        text-align: left;
        touch-action: manipulation;
        width: calc(100% - 24px);
    }
    #tab-visualizer .mobile-trade-plan-toggle span:first-child { display: inline-flex; gap: 7px; }
    #tab-visualizer .mobile-trade-plan-hint { color: var(--text-muted); font-size: .68rem; font-weight: 600; margin-left: auto; }
    #tab-visualizer .mobile-trade-plan-toggle > i { transition: transform .18s ease; }
    #tab-visualizer .mobile-trade-plan-toggle.is-expanded > i { transform: rotate(180deg); }
    /* D6: the merged trade strip (inside #vis-lifecycle) replaces this
       standalone toggle row on mobile — its caret still expands the same
       #trend-prediction-panel via a programmatic click, so no logic is
       duplicated. Desktop is unaffected (outside this media query). */
    #tab-visualizer .mobile-trade-plan-toggle { display: none !important; }
    #tab-visualizer #trend-prediction-panel { display: none !important; }
    #tab-visualizer #trend-prediction-panel.mobile-trade-plan-expanded {
        background: var(--bg-widget) !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-top: 1px solid var(--border-color) !important;
        display: grid !important;
        gap: 1px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto !important;
        margin: 0 0 calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 8px 12px !important;
    }
    #tab-visualizer #trend-prediction-panel.mobile-trade-plan-expanded .tps-lead,
    #tab-visualizer #trend-prediction-panel.mobile-trade-plan-expanded .tps-divider { display: none !important; }
    #tab-visualizer #trend-prediction-panel.mobile-trade-plan-expanded .tps-section { border: 1px solid var(--border-color); border-radius: 8px; min-width: 0 !important; padding: 9px !important; }
    #tab-visualizer #trend-prediction-panel.mobile-trade-plan-expanded .tps-label { font-size: .65rem !important; }
    #tab-visualizer #trend-prediction-panel.mobile-trade-plan-expanded .tps-value { font-size: .92rem !important; }

    /* D6: merged mobile trade strip — timeline track (already in #vis-lifecycle)
       + 4 key chips + a caret that expands the full #trend-prediction-panel. */
    .vlt-mobile-chips {
        display: flex; align-items: center; gap: 6px; overflow-x: auto;
        padding: 4px 10px 2px; font-size: 0.62rem;
    }
    .vmts-chip {
        display: flex; gap: 4px; align-items: baseline; padding: 3px 8px;
        border: 1px solid var(--border-color); border-radius: 8px; flex-shrink: 0;
    }
    .vmts-chip .l { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.03em; }
    .vmts-chip .v { font-family: Consolas, monospace; font-weight: 800; font-size: 0.68rem; color: var(--text-primary); }
    .vlt-mobile-caret { margin-left: auto; color: var(--text-muted); font-size: 0.7rem; padding: 2px 6px; flex-shrink: 0; cursor: pointer; }

    /* Focused search is a standalone task. Trade data belongs to the selected
       chart, not behind a ticker-search result list. */
    #tab-visualizer.search-focused .mobile-trade-plan-toggle { display: none !important; }

    /* Dashboard polish: use one calm, consistent top rhythm instead of a
       desktop heading and four compressed metric cells. */
    .top-bar { margin-bottom: 10px !important; padding: 0 2px; }
    .page-title-section h1 { font-size: 1.14rem !important; letter-spacing: -0.025em; margin: 0 !important; }
    #tab-dashboard #dashboard-kpi-strip {
        border: 1px solid var(--border-color) !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
        margin: 0 0 10px !important;
        overflow: hidden;
    }
    #tab-dashboard #dashboard-kpi-strip .k { min-height: 58px; padding: 10px 7px !important; }
    #tab-dashboard #dashboard-kpi-strip .k-meta .lbl { font-size: 0.57rem !important; letter-spacing: 0.06em; }
    #tab-dashboard #dashboard-kpi-strip .k-meta .val { font-size: 0.94rem !important; letter-spacing: -0.04em; }
    #tab-dashboard #dashboard-kpi-strip .k.k-tappable.is-active {
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.13), rgba(99, 102, 241, 0.05)) !important;
    }
    #tab-dashboard #dashboard-global-filter-row { margin: 0 0 10px !important; }
    #tab-dashboard .dashboard-cmdbar {
        background: color-mix(in srgb, var(--bg-widget) 92%, transparent);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
        padding: 5px !important;
    }
    #tab-dashboard .dashboard-cmdbar #btn-toggle-main-filters,
    #tab-dashboard .dashboard-cmdbar #btn-reset-dashboard-filters { min-height: 42px; }
}

/* Mobile hero pass: chart and pattern discovery take priority over secondary rails. */
@media (max-width:768px) {
    /* iOS only auto-zooms focused controls that render below 16px. */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    textarea { font-size: 16px !important; }

    /* Anatomy, Forecast, Timeline, Options, and Fundamentals remain desktop views. */
    #tab-visualizer #vis-side-panel,
    #tab-visualizer #vis-rail-tabs,
    #tab-visualizer .vis-rail-tabs,
    #tab-visualizer .vis-right-panel { display: none !important; }

    /* Compact regime overlay inside the plot, clear of the right price axis. */
    #tab-visualizer .chart-transition-banner {
        align-items: center;
        border-radius: 14px;
        height: 46px;
        justify-content: center;
        left: auto;
        min-width: 46px;
        padding: 0;
        right: 78px;
        top: 12px;
        transform: none;
    }
    #tab-visualizer .chart-transition-banner.is-bullish {
        background: rgba(5, 150, 105, 0.50);
        border-color: rgba(52, 211, 153, 0.62);
    }
    #tab-visualizer .chart-transition-banner.is-bearish {
        background: rgba(225, 29, 72, 0.50);
        border-color: rgba(253, 164, 175, 0.62);
    }
    #tab-visualizer .chart-regime-animal {
        color: #fff;
        display: block;
        height: 34px;
        object-fit: contain;
        width: 34px;
    }
    #tab-visualizer .chart-regime-icon,
    #tab-visualizer .chart-regime-copy,
    #tab-visualizer .chart-regime-score { display: none; }

    /* Pattern discovery stays a single thumb-friendly horizontal rail. */
    #tab-dashboard .pxg-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 12px 7px 0 !important;
        scroll-padding-inline: 0 12px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    #tab-dashboard .pxg-list::-webkit-scrollbar { display: none; }
    /* Bug fix: this later, more specific block (!important width/flex) was
       overriding the compact horizontal-pill redesign above, forcing every
       chip back to a 122x124px tall box regardless of its (now much
       shorter) content — leaving a wide empty box under each pill. Match
       the compact pill sizing instead of a fixed card footprint. */
    #tab-dashboard .pxg {
        align-items: center !important;
        box-sizing: border-box;
        flex: 0 0 auto !important;
        min-height: 0;
        scroll-snap-align: start;
        text-align: left !important;
        width: auto !important;
    }
    #tab-dashboard .pxg .pxg-mid { align-items: center; text-align: left; }
    #tab-dashboard .pxg .pxg-name { font-size: .7rem; }
    #tab-dashboard .pxg .pxg-count { align-self: center; font-size: .68rem; }

    /* Keep the complete signal filters on a second row rather than clipping them. */
    #tab-dashboard .hero-table-card .card-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 12px !important;
    }
    #tab-dashboard .hero-table-card .card-head > div:first-child { display: contents !important; }
    #tab-dashboard .hero-table-card .card-head h2 { grid-column: 1; grid-row: 1; }
    #tab-dashboard .hero-table-card #hero-table-tabs {
        grid-column: 1 / -1;
    }
    #tab-dashboard .hero-mobile-sort { grid-column: 2; grid-row: 1; }

    /* Pattern history is now an explicit control; the old scroll-fade made
       the space after the controlling pill look disabled or unfinished. */
    #tab-visualizer .vis-pattern-pills.has-more {
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    /* Chart controls are compact selectors, not large form fields. */
    #tab-visualizer .vis-tb-row-controls {
        gap: 4px !important;
        min-height: 36px !important;
        padding: 3px 10px !important;
    }
    #tab-visualizer #chart-interval-dd,
    #tab-visualizer #chart-style-dd,
    #tab-visualizer #chart-pivot-dd,
    #tab-visualizer #btn-toggle-lifecycle {
        font-size: .68rem !important;
        min-height: 28px !important;
        height: 28px !important;
    }
    #tab-visualizer #chart-interval-dd { max-width: 68px !important; }
    #tab-visualizer #chart-style-dd { max-width: 92px !important; }
    #tab-visualizer #chart-pivot-dd { max-width: 74px !important; }
    #tab-visualizer #chart-interval-dd,
    #tab-visualizer #chart-style-dd,
    #tab-visualizer #chart-pivot-dd { padding: 0 18px 0 7px !important; }
    #tab-visualizer #btn-toggle-lifecycle { padding: 0 8px !important; }
    #tab-visualizer .vis-tb-row-controls .vis-tb-group {
        min-height: 28px !important;
    }
    /* Keep the Patterns switch at its designed 32x18 proportions — stretching
       it (earlier 48x44 tap-target rule) inflates the track but not the 12px
       knob, so it reads as an oversized blank blob. The 28px-tall padded row
       provides the tap target instead. */
    #tab-visualizer .vis-tb-row-controls .toggle-switch-sm {
        width: 32px !important;
        height: 18px !important;
        min-width: 32px !important;
        min-height: 18px !important;
        align-self: center !important;
    }
    /* Regime / Alerts chips: match the 28px control height */
    #tab-visualizer #chart-regime-chip,
    #tab-visualizer #chart-alerts-chip {
        min-height: 24px !important;
        padding: 2px 8px !important;
        font-size: .66rem !important;
    }
    /* Layers + SMA-gear are icon-ONLY buttons — the blanket
       ".chart-tb-btn i { display:none }" space-saver (written for text+icon
       buttons like Timeline) left them as empty blank squares on mobile.
       Restore their icons and size them as compact 28px squares. */
    #tab-visualizer #btn-chart-layers i,
    #tab-visualizer #btn-chart-sma-settings i,
    #tab-visualizer #btn-chart-fullscreen i { display: inline-block !important; }
    #tab-visualizer #btn-chart-layers,
    #tab-visualizer #btn-chart-sma-settings,
    #tab-visualizer #btn-chart-fullscreen {
        height: 28px !important;
        min-height: 28px !important;
        width: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* The floating Tickers/Patterns/Full-View bar is retired on mobile: the
       ticker list opens via SEARCH / hero tap, the Patterns toggle already
       lives in the control row, and maximize moved into the on-chart utility
       cluster. Hidden in fullscreen too (this block is later in the cascade
       than the body.chart-fullscreen display:flex rule, so it wins). */
    #tab-visualizer .vis-floating-bar,
    body.chart-fullscreen #tab-visualizer .vis-floating-bar { display: none !important; }
}

/* Final mobile chart geometry: keep controls off both data gutters. */
@media (max-width:768px) {
    #tab-visualizer .vis-floating-bar {
        flex-direction: column !important;
        gap: 3px !important;
        left: auto !important;
        padding: 4px !important;
        right: 78px !important;
        top: 66px !important;
    }
    #tab-visualizer .vis-floating-bar .vis-float-divider { display: none !important; }
    #tab-visualizer .vis-floating-bar .vis-float-btn {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 34px !important;
        width: 34px !important;
    }

    #tab-visualizer .vis-lifecycle {
        padding: 4px 16px 8px !important;
    }
    #tab-visualizer .vlt-track {
        margin: 38px 7px 5px !important;
    }
    #tab-visualizer .vlt-node[data-lane="1"] .vlt-lab { top: -34px; }
    #tab-visualizer .vlt-lab {
        font-size: .59rem !important;
        font-weight: 800;
        letter-spacing: .01em;
        line-height: 1.1;
    }
    #tab-visualizer .vlt-meta {
        align-items: start;
        display: grid;
        font-size: .66rem !important;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
        line-height: 1.3;
        margin-top: 12px !important;
    }
    #tab-visualizer .vlt-meta > span:last-child { text-align: right; }

    /* The visualizer already reserves space for the fixed nav in its viewport. */
    body.vis-tab-active .main-content { padding-bottom: 0 !important; }
    #tab-visualizer .mobile-trade-plan-toggle { margin-bottom: 6px !important; }
}
#tab-visualizer .chart-news-intelligence {
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.08), rgba(99, 102, 241, 0.05));
    margin: 6px 0;
    overflow: hidden;
}

#tab-visualizer .news-intel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#tab-visualizer .news-intel-heading i {
    color: #38bdf8;
    margin-right: 6px;
}

#tab-visualizer #chart-news-intelligence-summary {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: none;
}

#tab-visualizer .news-intel-items {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 9px 10px 7px;
    scrollbar-width: thin;
}

#tab-visualizer .news-intel-card {
    flex: 0 0 min(360px, 78vw);
    min-width: 250px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-left: 3px solid #38bdf8;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card, #111827) 92%, transparent);
}

#tab-visualizer .news-intel-news_triggered_breakout { border-left-color: #f59e0b; }
#tab-visualizer .news-intel-pattern_destroyer { border-left-color: #ef4444; }
#tab-visualizer .news-intel-pre_news_setup { border-left-color: #a78bfa; }
#tab-visualizer .news-intel-post_news_continuation { border-left-color: #10b981; }

/* Inside the News sheet / rail tab the cards stack full-width (they scroll
   horizontally only in the retired inline strip layout). */
#news-sheet-body, #vis-news-inline-body { display: flex; flex-direction: column; gap: 8px; }
#news-sheet-body .news-intel-card,
#vis-news-inline-body .news-intel-card { flex: 1 1 auto; min-width: 0; width: 100%; }
#news-sheet-body { padding: 4px 2px 2px; }

#tab-visualizer .news-intel-card-head,
#tab-visualizer .news-intel-evidence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

#tab-visualizer .news-intel-card-head { justify-content: space-between; }

#tab-visualizer .news-intel-tag {
    color: #7dd3fc;
    font-size: 0.59rem;
    font-weight: 900;
    letter-spacing: 0.045em;
}

#tab-visualizer .news-intel-time,
#tab-visualizer .news-intel-source {
    color: var(--text-muted);
    font-size: 0.62rem;
}

#tab-visualizer .news-source-badge,
#tab-visualizer .news-verification-badge {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 4px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.035em;
}

#tab-visualizer .news-source-official {
    border-color: rgba(16, 185, 129, 0.55);
    color: #34d399;
}

#tab-visualizer .news-intel-title {
    margin: 6px 0 3px;
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

#tab-visualizer .news-intel-title a {
    color: inherit;
    text-decoration: none;
}

#tab-visualizer .news-intel-title a:hover { color: #38bdf8; }
#tab-visualizer .news-intel-title i { margin-left: 5px; font-size: 0.58rem; }

#tab-visualizer .news-intel-evidence { margin-top: 7px; }

#tab-visualizer .news-intel-evidence span {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
    padding: 2px 6px;
    font-size: 0.61rem;
    font-weight: 700;
}

#tab-visualizer .news-intel-reason {
    margin-top: 6px;
    color: #c4b5fd;
    font-size: 0.65rem;
    font-weight: 700;
}

#tab-visualizer .news-intel-reason i { margin-right: 5px; }

#tab-visualizer .news-intel-caution,
#tab-visualizer .news-intel-disclaimer {
    color: var(--text-muted);
    font-size: 0.59rem;
    line-height: 1.35;
}

#tab-visualizer .news-intel-caution { margin-top: 5px; color: #fbbf24; }

#tab-visualizer .news-intel-disclaimer {
    border-top: 1px solid rgba(56, 189, 248, 0.1);
    padding: 5px 11px 6px;
}

/* Light mode overrides for news intelligence cards */
body.light-theme #tab-visualizer .news-intel-card {
    background: var(--bg-card);
}
body.light-theme #tab-visualizer .news-intel-tag {
    color: var(--color-primary);
}
body.light-theme #tab-visualizer .news-source-badge,
body.light-theme #tab-visualizer .news-verification-badge {
    color: var(--text-secondary);
    border-color: var(--border-color);
}
body.light-theme #tab-visualizer .news-source-official {
    color: var(--color-emerald);
    border-color: rgba(16, 185, 129, 0.35);
}
body.light-theme #tab-visualizer .news-intel-reason {
    color: #7c3aed;
}
body.light-theme #tab-visualizer .news-intel-caution {
    color: #d97706;
}

@media (max-width: 768px) {
    #tab-visualizer .chart-news-intelligence { margin: 4px 0; }
    #tab-visualizer .news-intel-heading { padding: 7px 9px; }
    #tab-visualizer .news-intel-items { padding: 7px; }
    #tab-visualizer .news-intel-card { flex-basis: 86vw; }
    #tab-visualizer .news-intel-disclaimer { display: none; }
}
/* Ticker-level early-warning rows inside the visualizer's Alerts section.
   These replaced the old global toast tray: the same risk deliveries now
   render only for the ticker on the chart, using the Alerts-sheet row
   anatomy plus a fragility gauge. */
.alerts-sheet-gauge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 0.64rem;
    color: var(--text-muted);
}
.alerts-sheet-gauge-row strong {
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
}
.alerts-sheet-gauge {
    flex: 1;
    min-width: 40px;
    height: 5px;
    border-radius: 999px;
    background-color: var(--bg-widget);
    overflow: hidden;
}
.alerts-sheet-gauge-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────
   NAVIGATION BRANDING LOADING BAR & TRANSITIONS
   ───────────────────────────────────────────────────────────────────── */
.branding-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--gradient-accent, linear-gradient(90deg, #6366f1, #a855f7));
    z-index: 999999;
    opacity: 0;
    transition: width 0.4s cubic-bezier(0.08, 0.82, 0.17, 1), opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

.main-content {
    transition: opacity 0.25s ease;
}

.main-content.page-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Alert Center ─────────────────────────────────────────────────────────
   Triage surface for risk alerts. Sized for a real backlog (hundreds of
   deliveries), so the summary and filters stay put while the list scrolls.
   Summary tiles reuse .kpi-strip-v2/.k/.k-ic/.k-meta (see renderKpiStripV2 in
   renderers.js) and filters reuse .dash-select so this reads as the same
   component system as the Dashboard tab, not a one-off widget. */
.alert-center-summary {
    margin-bottom: 12px;
}

.alert-center-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.alert-filter-container {
    width: auto;
    min-width: 150px;
}

.alert-search-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--r-sm, 4px);
    padding: 7px 12px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.78rem;
    outline: none;
    min-width: 140px;
    transition: all 0.2s ease;
}

.alert-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.alert-row {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--r-sm, 4px);
    transition: background 0.12s ease;
}

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

.alert-row-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.alert-sev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Repeat count is the honest signal that one ticker keeps re-crossing a
   threshold, rather than many separate problems. */
.alert-repeat {
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
    color: var(--text-muted);
}

.alert-age {
    margin-left: auto;
}

.alert-action-text {
    margin-top: 4px;
    font-size: 0.86rem;
}

.alert-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

@media (max-width: 640px) {
    .alert-center-controls { gap: 6px; }
    .alert-filter-container { flex: 1 1 130px; min-width: 0; }
    .alert-search-input { flex: 1 1 130px; }
    .alert-age { margin-left: 0; }
}

/* ── AI Goal Search ───────────────────────────────────────────────────────
   Mirrors the Dashboard's search/filter visual language (search-box border +
   radius, .dash-select filter pills) instead of one-off inline styles. */
.agent-search-bar {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.agent-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid var(--border-color);
    border-radius: var(--r-md);
    padding: 0 16px 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.agent-search-input-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.agent-search-input-wrap i {
    color: var(--accent-blue);
    font-size: 0.9rem;
    flex: 0 0 auto;
    margin-right: 10px;
}

.agent-search-input {
    flex: 1;
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 14px 0;
    outline: none;
}

.agent-monitor-status { margin-top: 8px; }

.agent-examples {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.agent-panel {
    display: none;
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: var(--r-md);
}

.agent-panel-goal {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

.agent-panel-suggestions {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.18);
    padding: 12px 16px;
}

.agent-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.agent-panel-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agent-panel-label.goal { color: var(--accent-blue); }
.agent-panel-label.suggestions { color: #f59e0b; margin-bottom: 6px; display: block; }

#agent-parser-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-blue);
}

#agent-parsed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#agent-suggestion-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.agent-state {
    text-align: center;
    padding: 40px 0;
}

.agent-state i { font-size: 1.6rem; color: var(--accent-blue); }
.agent-state p { margin-top: 12px; color: var(--text-secondary); font-size: 0.9rem; }

.agent-empty-state { text-align: center; padding: 50px 20px; }
.agent-empty-state i { font-size: 2.5rem; color: var(--text-muted); margin-bottom: 16px; }
.agent-empty-state h3 { color: var(--text-primary); margin-bottom: 8px; font-weight: 600; }
.agent-empty-state p.agent-empty-lead {
    color: var(--text-secondary);
    font-size: 0.88rem;
    max-width: 500px;
    margin: 0 auto 20px;
}
.agent-empty-state p.agent-empty-hint { color: var(--text-muted); font-size: 0.8rem; }

.agent-result-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md);
    align-items: center;
}

.agent-result-filters .agent-filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agent-result-filters .dash-select-container {
    width: auto;
    min-width: 130px;
}

.agent-filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.agent-filter-range label { font-size: 0.75rem; color: var(--text-muted); }
.agent-filter-range input[type="range"] { width: 80px; accent-color: var(--accent-blue); }
.agent-filter-range span { font-size: 0.72rem; color: var(--text-secondary); min-width: 24px; }

/* ─── Index Forecast Scorecard (dashboard) ──────────────────────────────────
   Weekly S&P 500 forecast + its own track record. See js/prediction_tracker.js. */
.ifc-loading, .ifc-empty { padding: 18px 4px; color: var(--text-muted, rgba(255,255,255,0.55)); font-size: 0.85rem; }
.ifc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
.ifc-panel { min-width: 0; }
.ifc-panel-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.55)); margin-bottom: 10px;
}
.pa-scope-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 15px;
    margin-bottom: 16px;
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.11), rgba(99, 102, 241, 0.025));
}
.pa-scope-copy { display: flex; flex-direction: column; gap: 2px; color: var(--text-secondary); font-size: 0.72rem; }
.pa-scope-copy strong { color: var(--text-primary); font-size: 0.96rem; }
.pa-scope-eyebrow { color: #818cf8; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pa-scope-controls, .pa-profile-control { display: flex; align-items: center; gap: 9px; }
.pa-profile-control > span { color: var(--text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pa-segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border-color); border-radius: 8px; background: rgba(0, 0, 0, 0.16); }
.pa-segment-btn { border: 0; border-radius: 6px; padding: 6px 13px; color: var(--text-secondary); background: transparent; font: 700 0.72rem 'Outfit', sans-serif; cursor: pointer; }
.pa-segment-btn.active { color: #fff; background: #6366f1; box-shadow: 0 3px 12px rgba(99, 102, 241, 0.3); }
.pa-profile-aggressive.active { background: #f97316; box-shadow: 0 3px 12px rgba(249, 115, 22, 0.28); }
.pa-improvement-panel { margin-bottom: 14px; padding: 14px; border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 10px; background: rgba(16, 185, 129, 0.035); }
.pa-improvement-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 11px; color: var(--text-primary); font-size: 0.84rem; font-weight: 750; }
.pa-improvement-heading i { color: #34d399; margin-right: 5px; }
.pa-improvement-heading span { padding: 3px 8px; border-radius: 999px; color: #818cf8; background: rgba(99, 102, 241, 0.1); font-size: 0.64rem; }
.pa-improvement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pa-insight-card { padding: 10px 11px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: rgba(255,255,255,0.025); }
.pa-insight-card > span { color: var(--text-muted); font-size: 0.61rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pa-insight-card p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.73rem; line-height: 1.45; }
.pa-insight-caution { margin: 10px 0 0; color: var(--text-muted); font-size: 0.66rem; }
@media (max-width: 900px) {
    .pa-scope-toolbar, .pa-scope-controls { align-items: flex-start; flex-direction: column; }
    .pa-improvement-grid { grid-template-columns: 1fr; }
}
.ifc-chip {
    font-size: 0.66rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(99,102,241,0.15); color: #a5b4fc; letter-spacing: 0.03em;
}
.ifc-headline { font-size: 2.0rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; }
.ifc-headline.up { color: var(--color-emerald); }
.ifc-headline.down { color: var(--color-crimson); }
.ifc-sub { font-size: 0.82rem; color: var(--text-muted, rgba(255,255,255,0.55)); margin-top: 4px; }

.ifc-band { margin: 18px 0 12px; }
.ifc-band-track {
    position: relative; height: 26px; border-radius: 6px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
}
.ifc-band-90 { position: absolute; top: 6px; height: 14px; border-radius: 4px; background: rgba(99,102,241,0.18); }
.ifc-band-50 { position: absolute; top: 3px; height: 20px; border-radius: 4px; background: rgba(99,102,241,0.38); }
.ifc-band-median { position: absolute; top: 0; width: 2px; height: 26px; background: #a5b4fc; }
.ifc-band-actual { position: absolute; top: -3px; width: 3px; height: 32px; border-radius: 2px; }
.ifc-band-actual.inside { background: var(--color-emerald); box-shadow: 0 0 8px var(--color-emerald-glow); }
.ifc-band-actual.outside { background: var(--color-crimson); box-shadow: 0 0 8px var(--color-crimson-glow); }
.ifc-band-labels {
    display: flex; justify-content: space-between; margin-top: 5px;
    font-size: 0.7rem; color: var(--text-muted, rgba(255,255,255,0.45));
}

.ifc-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ifc-meta {
    display: inline-flex; flex-direction: column; gap: 2px;
    padding: 6px 10px; border-radius: var(--border-radius-md, 8px);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
}
.ifc-meta em { font-style: normal; font-size: 0.66rem; color: var(--text-muted, rgba(255,255,255,0.5)); }
.ifc-meta b { font-size: 0.8rem; font-weight: 600; }

.ifc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.ifc-stat {
    padding: 10px 12px; border-radius: var(--border-radius-md, 8px);
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
}
.ifc-stat-label { font-size: 0.68rem; color: var(--text-muted, rgba(255,255,255,0.5)); }
.ifc-stat-value { font-size: 1.25rem; font-weight: 640; margin-top: 2px; letter-spacing: -0.01em; }
.ifc-stat-value.up { color: var(--color-emerald); }
.ifc-stat-value.down { color: var(--color-crimson); }
.ifc-stat-note { font-size: 0.64rem; color: var(--text-muted, rgba(255,255,255,0.4)); margin-top: 2px; }
.ifc-stat-empty { font-size: 0.82rem; color: var(--text-muted, rgba(255,255,255,0.5)); padding: 8px 0; }

.ifc-calib { margin-top: 12px; }
.ifc-calib-box {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 0.76rem; line-height: 1.45; padding: 10px 12px;
    border-radius: var(--border-radius-md, 8px); border: 1px solid var(--border-color);
}
.ifc-calib-box.ok { background: var(--color-emerald-glow); border-color: rgba(16,185,129,0.28); }
.ifc-calib-box.warn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.3); }
.ifc-caveat { font-size: 0.7rem; color: var(--color-amber); margin-top: 7px; }

.ifc-history-wrap { margin-top: 22px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.ifc-table-scroll { overflow-x: auto; }
.ifc-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; }
.ifc-table th {
    text-align: left; font-weight: 500; padding: 6px 10px; white-space: nowrap;
    color: var(--text-muted, rgba(255,255,255,0.5)); border-bottom: 1px solid var(--border-color);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.ifc-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: nowrap; }
.ifc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ifc-table td.up { color: var(--color-emerald); }
.ifc-table td.down { color: var(--color-crimson); }
.ifc-pill { display: inline-block; font-size: 0.62rem; padding: 1px 6px; border-radius: 999px; }
.ifc-pill.ok { background: var(--color-emerald-glow); color: var(--color-emerald); }
.ifc-pill.miss { background: var(--color-crimson-glow); color: var(--color-crimson); }

@media (max-width: 900px) {
    .ifc-grid { grid-template-columns: 1fr; gap: 18px; }
    .ifc-headline { font-size: 1.65rem; }
}

/* ─── Index Forecast: the call banner ─────────────────────────────────────── */
.ifc-call {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 16px; margin-bottom: 20px;
    border-radius: var(--border-radius-md, 10px);
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    border-left-width: 3px;
}
.ifc-call.tone-up { border-left-color: var(--color-emerald); background: var(--color-emerald-glow); }
.ifc-call.tone-down { border-left-color: var(--color-crimson); background: var(--color-crimson-glow); }
.ifc-call.tone-flat { border-left-color: var(--color-amber); background: rgba(245,158,11,0.08); }
.ifc-call-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ifc-call-dir {
    font-size: 1.02rem; font-weight: 680; letter-spacing: -0.01em; white-space: nowrap;
}
.ifc-call-dir.tone-up { color: var(--color-emerald); }
.ifc-call-dir.tone-down { color: var(--color-crimson); }
.ifc-call-dir.tone-flat { color: var(--color-amber); }
.ifc-call-head { font-size: 0.85rem; line-height: 1.45; }
.ifc-call-lines {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 0.775rem; line-height: 1.5; color: var(--text-muted, rgba(255,255,255,0.6));
}
/* Theme-aware: a hardcoded rgba(255,255,255,0.42) was near-invisible on the light
   theme's pale verdict background. */
.ifc-call-falsify { color: var(--text-muted); opacity: 0.8; font-style: italic; }
@media (max-width: 900px) {
    .ifc-call-dir { font-size: 0.95rem; }
    .ifc-call-head { font-size: 0.8rem; }
}

/* ─── Index Forecast: collapsible ─────────────────────────────────────────── */
.ifc-head { cursor: pointer; user-select: none; }
.ifc-head:hover { background: rgba(255,255,255,0.02); }
.ifc-head:focus-visible { outline: 2px solid var(--border-color-active); outline-offset: -2px; }
.ifc-chevron {
    font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.5));
    transition: transform var(--transition-speed, 0.22s) ease; flex-shrink: 0;
}
#ifc-card.ifc-collapsed .ifc-chevron { transform: rotate(-90deg); }
/* Collapse by clipping a max-height rather than display:none, so the chevron and the
   peek line animate together instead of the body vanishing in one frame. */
#ifc-body {
    overflow: hidden; max-height: 2400px; opacity: 1;
    transition: max-height 0.28s ease, opacity 0.18s ease, padding 0.28s ease;
}
#ifc-card.ifc-collapsed #ifc-body {
    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;
}
#ifc-card.ifc-collapsed .results-card-head { border-bottom: none; }
.ifc-peek { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.8rem; min-width: 0; }
.ifc-peek-dir { font-weight: 640; }
.ifc-peek-dir.tone-up { color: var(--color-emerald); }
.ifc-peek-dir.tone-down { color: var(--color-crimson); }
.ifc-peek-dir.tone-flat { color: var(--color-amber); }
.ifc-peek-sep { color: rgba(255,255,255,0.25); }
@media (prefers-reduced-motion: reduce) {
    #ifc-body, .ifc-chevron { transition: none; }
}
/* When collapsed, the static subtitle is the least useful thing in the header and the
   first to wrap — which silently inflated the collapsed height. The peek line carries
   more information in less space, so the subtitle is dropped at every width. */
#ifc-card.ifc-collapsed #ifc-subtitle { display: none; }

/* Weeks forecast by an earlier model vintage — graded under their own distribution, so
   their percentiles are not on the same scale as current rows. */
.ifc-row-legacy { opacity: 0.72; }
.ifc-legacy-mark { color: var(--color-amber); margin-left: 5px; font-size: 0.7rem; cursor: help; }

/* =====================================================================
   VISUALIZER — compact bottom stack on desktop.
   The rows under the chart (control bar, lifecycle timeline, trade plan, expand
   bar) are fixed-height, so on an ordinary ~950px-tall window they took ~280px
   and left the chart ~485px. Same content, tighter padding/margins only -- every
   label lane in the lifecycle track keeps its clearance (lane-1 label sits at
   -31px, its date at +22px; the track margins below still exceed both).
   Desktop only: mobile has its own rules above and is not touched.
   ===================================================================== */
@media (min-width: 769px) {
    #tab-visualizer .vis-floating-bar { margin-top: 4px; padding: 3px 12px; }
    #tab-visualizer .vis-lifecycle { padding: 2px 22px 4px; }
    #tab-visualizer .vis-lifecycle .vlt-track { margin: 33px 6px 32px; }
    #tab-visualizer .vis-lifecycle .vlt-meta { margin-top: 8px; }
    #tab-visualizer .trend-prediction-strip { min-height: 48px; }
    #tab-visualizer .trend-prediction-strip .tps-section { padding: 7px 16px; }
    #tab-visualizer .vis-panel-expand-bar { padding: 4px 16px; }
    /* Lifecycle timeline starts collapsed on desktop (renderers.js, _lifecycleWantsCollapsed).
       Collapsed = the whole strip is gone, not a thin empty bar; the toolbar Timeline button
       (hidden on desktop until now) brings it back. */
    #tab-visualizer .vis-lifecycle-toggle { display: inline-flex; }
    #tab-visualizer .vis-lifecycle.vlt-collapsed { display: none !important; }
}