/* Mobile-First Symbol Page Styles */
/* Optimized for touch interactions and mobile viewing */

:root {
    --symbol-primary: var(--primary);
    --symbol-success: #22c55e;
    --symbol-danger: #ef4444;
    --symbol-warning: #f59e0b;
    --symbol-info: #3b82f6;
    /* Text on saturated non-red badge/indicator fills (not white) */
    --symbol-on-accent-text: #0f172a;
    /*
     * Green metric tiles (stage-2, BUY signal, positive SATA/Mansfield, early substage):
     * change gradient and label/number color in one place.
     */
    --symbol-green-badge-gradient: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --symbol-text-on-green-badge: #14532d;

    /*
     * Technical indicator tiles (#indicators-section-modern): label/value on colored gradients.
     * Positive reuses green badge text for one place to edit.
     */
    --indicator-text-on-default: var(--symbol-on-accent-text);
    --indicator-text-on-positive: var(--symbol-text-on-green-badge);
    --indicator-text-on-negative: #7f1d1d;
    --indicator-text-on-neutral: #1f2937;
    --indicator-text-on-warning: #78350f;

    --symbol-bg-glass: rgba(255, 255, 255, 0.8);
    --symbol-bg-glass-dark: rgba(30, 41, 59, 0.8);
    --symbol-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --symbol-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    /* Hero glass + main symbol cards + market ribbon (portfolio list uses --portfolio-surface-radius) */
    --symbol-page-surface-radius: var(--glass-panel-radius);
}

[data-theme="dark"] {
    --symbol-bg-glass: rgba(30, 41, 59, 0.8);
    --symbol-bg-glass-dark: rgba(15, 23, 42, 0.9);
}

/* App Header - Mobile Optimized */
.symbol-app-header {
    position: relative; /* Start in normal flow below navbar */
    z-index: 101; /* Higher than navbar (100) so it covers when sticky */
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
    width: 100%;
    transition: all 0.2s ease;
}

.header-back {
    flex-shrink: 0;
}

.back-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.back-button::before {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition);
    pointer-events: none;
}

.back-button:hover::before {
    transform: translate(-50%, -50%) scale(1.05);
}

.back-button i {
    position: relative;
    z-index: 1;
    font-size: 18px;
}

/* Symbol / portfolio detail app header: sticky on scroll */
/* z-index: 101 to stay below mobile menu (102) when open */
#symbol-header-container,
#portfolio-header-container {
    position: sticky;
    top: 0;
    z-index: 101;
    background: var(--bg-secondary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: none;
    box-shadow: none;
    padding: 0;
}

/* App header bar: 50px tall */
#symbol-header-container .watchlist-app-header-inner,
#portfolio-header-container .watchlist-app-header-inner {
    min-height: 50px;
    height: 50px;
}

/* Back button: 50px × 50px, icon only (no background circle) */
#portfolio-header-container .header-back .back-button {
    min-width: 50px !important;
    min-height: 50px !important;
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
    margin-left: -10pt;
}

/* Symbol page: same inset as nav; icon flush-left like `a.logo > i` (not centered in the tap target) */
#symbol-header-container .header-back .back-button {
    min-width: 50px !important;
    min-height: 50px !important;
    width: 50px !important;
    height: 50px !important;
    background: transparent !important;
    margin-left: 0;
    justify-content: flex-start !important;
    padding-left: 0;
    padding-right: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body.symbol-content-loaded #symbol-header-container .header-back .back-button {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

#symbol-header-container .back-button:hover,
#portfolio-header-container .back-button:hover {
    background: transparent !important;
}

/* Remove background circle - show only the centered icon */
#symbol-header-container .back-button::before,
#portfolio-header-container .back-button::before {
    display: none !important;
}

#symbol-header-container .back-button i,
#portfolio-header-container .back-button i {
    font-size: 23px; /* 20% larger than 19.2px */
}

/* Symbol header: share (right); match back control — 50×50 tap target, 23px icon, no background tile */
#symbol-header-container .header-share {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

#symbol-header-container .header-share .btn-portfolio-action-modern {
    position: relative;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    isolation: auto;
}

#symbol-header-container .header-share .btn-portfolio-action-modern::before {
    display: none !important;
}

#symbol-header-container .header-share .btn-portfolio-action-modern i {
    position: relative;
    z-index: 1;
    font-size: 23px;
    line-height: 1;
}

#symbol-header-container .header-share .btn-portfolio-action-modern:hover {
    background: transparent !important;
    transform: none;
    box-shadow: none !important;
}

#symbol-header-container .header-share .btn-portfolio-action-modern:hover::before {
    display: none !important;
}

#symbol-header-container.show-compact-header .header-share {
    display: none;
}

/* Header actions: shift 5pt right, 2px toward title (portfolio detail) */
#portfolio-header-container .header-actions {
    margin-right: -5pt;
    margin-left: -2px;
}

/* Symbol page: keep actions inside same horizontal band as main */
#symbol-header-container .header-actions {
    margin-right: 0;
    margin-left: 0;
}

/* Refresh button: 50px × 50px, icon only (no background circle) */
#symbol-header-container .header-action-btn,
#portfolio-header-container .header-action-btn {
    width: 50px;
    height: 50px;
    background: transparent !important;
}

#symbol-header-container .header-action-btn:hover,
#portfolio-header-container .header-action-btn:hover {
    background: transparent !important;
}

#symbol-header-container .header-action-btn i,
#portfolio-header-container .header-action-btn i {
    font-size: 23px; /* 20% larger than 19.2px */
}

/* Hidden temporarily – will be replaced; keeping selector for layout reference */
#symbol-refresh-btn {
    display: none;
}

#symbol-header-container .watchlist-header-title {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-header-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-header-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reduce gap between title and subtitle in symbol header */
#symbol-header-container .watchlist-header-subtitle,
#portfolio-header-container .watchlist-header-subtitle {
    margin-top: 1px;
}

/* Match symbol main column: `body.symbol-page .symbol-app-container` uses 16px horizontal padding */
#symbol-header-container .watchlist-app-header-inner {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.symbol-header-compact-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

#symbol-header-container.show-compact-header .symbol-header-compact-overlay {
    opacity: 1;
}

.symbol-header-compact-symbol {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(18px, 4.2vw, 22px);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: calc(100% - 180px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol-header-compact-change {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    text-align: right;
}

@media (min-width: 768px) {
    #symbol-header-container .symbol-header-compact-change {
        right: 24px;
    }
}

.symbol-header-compact-change.positive {
    color: var(--symbol-success);
}

.symbol-header-compact-change.negative {
    color: var(--symbol-danger);
}

#portfolio-header-container .header-title-section {
    margin-left: -20px;
    text-align: right;
}

.header-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}

.header-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.header-action-btn:hover {
    background: var(--bg-tertiary);
    transform: scale(1.05);
}

/* Loading State */
.loading-container-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.loading-spinner-modern {
    font-size: 48px;
    color: var(--symbol-primary);
    margin-bottom: 20px;
}

.loading-text-modern {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
}

.loading-text-modern span {
    font-weight: 700;
    color: var(--text-primary);
}

/* Symbol Analysis Waiting State - Immersive Premium Fintech */
/* Mobile-first: centered card. Desktop: full-width bento layout. */
/* Full-bleed: span full viewport width regardless of parent max-width */
.symbol-analysis-waiting-wrap {
    position: relative;
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    margin-top: -16px;
    min-height: min(85vh, 700px);
    padding: 40px 20px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Animated mesh gradient - organic, premium feel */
    background:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
        var(--bg-primary);
    background-size: 200% 200%;
    animation: mesh-drift 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .symbol-analysis-waiting-wrap {
        animation: none;
    }
}

@keyframes mesh-drift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Subtle grid overlay for fintech data-viz feel */
.symbol-analysis-waiting-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

[data-theme="dark"] .symbol-analysis-waiting-wrap {
    background:
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 60%),
        var(--bg-primary);
}

[data-theme="dark"] .symbol-analysis-waiting-wrap::before {
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.06) 1px, transparent 1px);
}

/* Glass card - premium centerpiece (mobile: narrow centered) */
.symbol-analysis-waiting {
    position: relative;
    width: 100%;
    max-width: 580px;
    padding: 40px 36px 44px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(99, 102, 241, 0.06) inset;
}

@media (min-width: 768px) {
    .symbol-analysis-waiting-wrap {
        margin-top: -24px;
    }
}

/* Desktop (1024px+): centered card */
@media (min-width: 1024px) {
    .symbol-analysis-waiting-wrap {
        min-height: 80vh;
        padding: 48px 40px 56px;
    }
    .symbol-analysis-waiting {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 580px;
        width: 100%;
        margin: 0 auto;
        padding: 52px 56px 56px;
    }
    .symbol-analysis-waiting .waiting-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }
    .symbol-analysis-waiting .waiting-hero .waiting-subline {
        margin-left: auto;
        margin-right: auto;
    }
    .symbol-analysis-waiting .waiting-hero .waiting-progress-wrap {
        margin-left: auto;
        margin-right: auto;
    }
    .symbol-analysis-waiting .waiting-hero .waiting-reassurance {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .symbol-analysis-waiting .waiting-headline {
        font-size: clamp(28px, 3.5vw, 38px);
    }
    .symbol-analysis-waiting .waiting-spinner-wrap {
        width: 100px;
        height: 100px;
        margin: 0 0 36px 0;
    }
    .symbol-analysis-waiting .waiting-spinner-wrap i {
        font-size: 42px;
    }
}

[data-theme="dark"] .symbol-analysis-waiting {
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(99, 102, 241, 0.15);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(139, 92, 246, 0.12) inset;
}

/* Glowing top accent bar */
.symbol-analysis-waiting::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4, #6366f1);
    background-size: 200% 100%;
    border-radius: 24px 24px 0 0;
    animation: accent-shimmer 4s linear infinite;
}

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

/* Badge */
.symbol-analysis-waiting .waiting-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8b5cf6;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.1));
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    margin-bottom: 28px;
}

.symbol-analysis-waiting .waiting-badge i {
    font-size: 14px;
    animation: pulse-glow 2.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4)); }
    50% { opacity: 0.75; filter: drop-shadow(0 0 2px rgba(139, 92, 246, 0.2)); }
}

/* Spinner - larger, more dramatic */
.symbol-analysis-waiting .waiting-spinner-wrap {
    width: 88px;
    height: 88px;
    margin: 0 auto 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.12));
    border: 2px solid rgba(139, 92, 246, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.08),
        0 8px 32px rgba(99, 102, 241, 0.2);
}

.symbol-analysis-waiting .waiting-spinner-wrap i {
    font-size: 36px;
    color: #6366f1;
    animation: spin 1s linear infinite;
}

/* Headline - bigger, bolder */
.symbol-analysis-waiting .waiting-headline {
    font-size: clamp(26px, 6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-primary);
    margin: 0 0 14px;
    line-height: 1.15;
    text-align: center;
}

.symbol-analysis-waiting .waiting-headline .symbol-ticker {
    display: block;
    font-size: 1.6em;
    font-weight: 700;
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    color: var(--text-primary);
    margin-top: 4px;
}

.symbol-analysis-waiting .waiting-subline {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile: center hero content */
.symbol-analysis-waiting .waiting-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Bento-style timeline steps */
.symbol-analysis-waiting .waiting-timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.symbol-analysis-waiting .timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: 16px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.symbol-analysis-waiting .timeline-step.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}

.symbol-analysis-waiting .timeline-step.done {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}

.symbol-analysis-waiting .timeline-step .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.04);
}

.symbol-analysis-waiting .timeline-step.active .step-icon {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
}

.symbol-analysis-waiting .timeline-step.done .step-icon {
    color: var(--symbol-success);
    background: rgba(34, 197, 94, 0.12);
}

.symbol-analysis-waiting .timeline-step .step-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.symbol-analysis-waiting .timeline-step.active .step-label {
    color: #6366f1;
}

.symbol-analysis-waiting .timeline-step.done .step-label {
    color: var(--symbol-success);
}

.symbol-analysis-waiting .timeline-connector {
    width: 24px;
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
}

.symbol-analysis-waiting .timeline-connector.active {
    background: linear-gradient(90deg, var(--symbol-success), #6366f1);
}

/* Progress bar with shimmer */
.symbol-analysis-waiting .waiting-progress-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
}

.symbol-analysis-waiting .waiting-progress-bar {
    height: 8px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.symbol-analysis-waiting .waiting-progress-fill {
    position: relative;
    height: 100%;
    width: 10%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.symbol-analysis-waiting .waiting-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    background-size: 100% 100%;
    animation: progress-shimmer 2s ease-in-out infinite;
}

@keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.symbol-analysis-waiting .waiting-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 14px;
    min-height: 22px;
}

/* Reassurance footer */
.symbol-analysis-waiting .waiting-reassurance {
    font-size: 14px;
    color: var(--text-tertiary, var(--text-light));
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.symbol-analysis-waiting .waiting-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.symbol-analysis-waiting .waiting-refresh-btn:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
}

/* Timeline responsive - stack on narrow screens */
@media (max-width: 480px) {
    .symbol-analysis-waiting .waiting-timeline {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 8px;
    }
    .symbol-analysis-waiting .timeline-connector {
        width: 2px;
        height: 16px;
        margin: 0 auto;
    }
    .symbol-analysis-waiting .timeline-step:nth-child(1) { grid-row: 1; }
    .symbol-analysis-waiting .timeline-connector:nth-of-type(1) { grid-row: 2; }
    .symbol-analysis-waiting .timeline-step:nth-child(3) { grid-row: 3; }
    .symbol-analysis-waiting .timeline-connector:nth-of-type(2) { grid-row: 4; }
    .symbol-analysis-waiting .timeline-step:nth-child(5) { grid-row: 5; }
}

/* Dark mode tweaks for spinner glow */
[data-theme="dark"] .symbol-analysis-waiting .waiting-spinner-wrap {
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Main Container */
.symbol-app-container {
    padding: 16px;
    padding-bottom: 80px;
    max-width: 100%;
    margin: 0 auto;
}

/* Hero Price Card */
.symbol-hero-card {
    margin-bottom: 16px;
    padding: 12px 20px;
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--symbol-page-surface-radius);
    box-shadow: var(--symbol-shadow);
}

.symbol-hero-card .price-display-modern {
    margin-bottom: 0;
    justify-content: space-between;
    align-items: stretch;
}

/* Market status row (directly below hero card) */
.symbol-market-status-ribbon {
    margin-bottom: 16px;
}

.symbol-hero-market-status {
    margin-top: 0;
}

.symbol-hero-market-status .market-status-modern {
    margin: 0;
}

.hero-company-description-slot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.hero-company-description-modern {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: color 0.15s ease;
}

.hero-company-description-modern:hover,
.hero-company-description-modern:focus-visible {
    color: var(--text-primary);
}

.hero-company-description-modern:focus-visible {
    box-shadow: 0 0 0 2px var(--symbol-accent, var(--primary));
    border-radius: 4px;
}

.hero-company-description-modern.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    cursor: pointer;
    user-select: text;
}

.price-display-modern {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

/* Left column: company title top-left, symbol bottom-left, gap between them */
.price-display-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.symbol-label-modern {
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* Company title on left (moved from company-info) – truncates to avoid clipping price */
.hero-company-title-modern {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price stack on right: price, change value, percent – right-aligned, bottom-aligned with symbol */
.symbol-hero-card .price-stack-modern {
    justify-content: flex-end;
}

.price-stack-modern {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.price-stack-modern .price-value-modern {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.price-stack-modern .price-change-modern,
#symbol-header-container .symbol-header-compact-overlay .symbol-header-compact-change {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--font-sans);
}

.price-stack-modern .price-change-modern {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.price-change-modern.positive {
    color: var(--symbol-success);
}

.price-change-modern.negative {
    color: var(--symbol-danger);
}

.change-value {
    display: block;
}

.change-percent {
    display: block;
    font-size: 16px;
}

.signal-badge-modern {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.signal-badge-modern.buy {
    background: #22c55e;
    color: var(--symbol-on-accent-text);
}

.signal-badge-modern.sell {
    background: #ef4444;
    color: white;
}

.signal-badge-modern.hold {
    background: #f59e0b;
    color: var(--symbol-on-accent-text);
}

.signal-badge-modern.neutral {
    background: #6b7280;
    color: var(--symbol-on-accent-text);
}

.signal-badge-modern i {
    font-size: 8px;
}

/* OHLC Grid */
.ohlc-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

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

.ohlc-label {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.ohlc-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* AI Signal Card */
.ai-signal-modern {
    margin-bottom: 16px;
    padding: 20px;
    background: linear-gradient(135deg, var(--symbol-primary) 0%, var(--secondary) 100%);
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--symbol-shadow-lg);
    position: relative;
    overflow: hidden;
}

.ai-signal-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 0;
}

.ai-signal-modern > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .ai-signal-modern {
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
}

[data-theme="dark"] .ai-signal-modern::before {
    background: rgba(0, 0, 0, 0.2);
}

.signal-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.signal-title-modern {
    display: flex;
    align-items: center;
    gap: 10px;
}

.signal-title-modern i {
    font-size: 24px;
}

.signal-title-modern h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: white;
}

.confidence-badge-modern {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.confidence-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: white;
}

.confidence-label {
    font-size: 11px;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    color: white;
}

.signal-badge-backfill-modern {
    display: inline-flex;
    align-items: center;
}

.signal-badge-backfill-modern .signal-text-modern {
    font-size: 18px;
    font-weight: 700;
    padding: 12px 20px;
}

.signal-content-modern {
    margin-bottom: 20px;
}

.signal-row-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

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

.signal-text-modern {
    font-size: 32px;
    font-weight: 800;
    display: inline-block;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: white;
}

.signal-description-modern {
    font-size: 14px;
    opacity: 0.98;
    line-height: 1.5;
    margin: 0 0 20px 0;
    color: white;
}

/* Signal Metrics Row (Volume, Market Regime) */
.signal-metrics-row-modern {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.signal-metric-badge-modern {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 70px;
}

.signal-metric-badge-modern.positive {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.signal-metric-badge-modern.negative {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.signal-metric-badge-modern.neutral {
    background: rgba(107, 114, 128, 0.3);
    border-color: rgba(107, 114, 128, 0.5);
}

.signal-metric-badge-modern.warning {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
}

.vibe-badge-row {
    display: block;
    width: 100%;
    text-align: center;
}

/* Vibe badges: neutral fintech type; dynamic entity + vibe emphasized over category label */
.vibe-badge-headline-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: 100%;
}

.vibe-badge-vibe-text {
    font-size: clamp(12px, 2.6vw, 14px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vibe-badge-category-text {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.company-regime-modern.vibes-grid-modern .vibe-badge-cell-modern {
    min-height: 0;
    padding: 12px 10px;
    gap: 8px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Flatten headline so category / entity / vibe share one column; order = MARKET → S&P500 → BULLISH */
.company-regime-modern.vibes-grid-modern .vibe-badge-headline-modern {
    display: contents;
}

.company-regime-modern.vibes-grid-modern .vibe-badge-cell-modern .vibe-badge-category-text {
    order: 1;
}

.company-regime-modern.vibes-grid-modern .vibe-badge-cell-modern > .signal-metric-strength-modern {
    order: 2;
}

.company-regime-modern.vibes-grid-modern .vibe-badge-cell-modern .vibe-badge-vibe-text {
    order: 3;
}

.company-regime-modern.vibes-grid-modern .vibe-badge-cell-modern .vibe-entity-label-modern {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.signal-metric-value-modern {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.signal-metric-strength-modern {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    opacity: 0.9;
}

/* Dynamic entity (S&P500, sector, industry): primary emphasis */
.company-regime-modern .signal-metric-strength-modern.vibe-entity-label-modern {
    font-family: inherit;
    font-size: clamp(17px, 3.6vw, 21px);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.025em;
    line-height: 1.25;
    opacity: 1;
    color: var(--text-primary);
    text-shadow: none;
    max-width: 100%;
    word-break: break-word;
}

.signal-metric-label-modern {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    font-weight: 600;
    color: white;
}

/* Risk Parameters Section in Signal Card */
.signal-risk-params-modern {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* 2x2 Grid for Risk Parameters */
.risk-params-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
}

.risk-param-group-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.risk-param-label-modern {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
}

.risk-param-label-modern i {
    font-size: 17.5px;
    opacity: 0.8;
}

.risk-param-value-modern {
    font-size: clamp(20px, 5vw, 30px);
    font-weight: 700;
    color: white;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
}

.risk-param-values-modern {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: clamp(14px, 3.5vw, 20px);
    font-weight: 600;
    color: white;
    line-height: 1.4;
    text-align: center;
}

.risk-param-value-item-modern {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.risk-param-value-item-modern:last-child {
    border-bottom: none;
}

.risk-param-placeholder-modern {
    opacity: 0.6;
    font-style: italic;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
    .stage-content-modern {
        min-width: 0; /* allow flex child to shrink, prevent overflow */
    }
}

/* Mobile (≤639px): stage metric tiles slightly tighter; type still matches vibe badge scale */
@media (max-width: 639px) {
    .stage-metric-badge-modern {
        padding: 10px 8px;
        gap: 6px;
        min-height: 64px;
    }

    .stage-metric-badge-modern .stage-metric-number-modern {
        font-size: clamp(14px, 3.2vw, 19px);
    }

    .stage-metric-badge-modern .stage-metric-label-modern {
        font-size: 9px;
        letter-spacing: 0.14em;
    }

    @supports (container-type: inline-size) {
        .stage-metric-badge-modern .stage-metric-number-modern {
            font-size: clamp(14px, 24cqi, 19px);
        }

        .stage-metric-badge-modern .stage-metric-label-modern {
            font-size: clamp(8px, 7cqi, 10px);
        }
    }

    /* Keep 2x2 grid for risk parameters even on mobile */
    .risk-params-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 8px;
    }
    
    .risk-param-value-modern {
        font-size: clamp(15px, 4.375vw, 22.5px);
    }
    
    .risk-param-values-modern {
        font-size: clamp(10px, 3vw, 16px);
    }
}

.confidence-meter-modern {
    margin-top: 16px;
}

.confidence-bar-modern {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.confidence-fill-modern {
    height: 100%;
    background: white;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Stage Analysis (Latest) placeholder - uses shared stage-card-modern structure */
.stage-analysis-placeholder {
    color: var(--text-secondary);
    font-size: 16px;
    min-height: 28px;
}

.stage-card-backfill-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

#stage-analysis-latest .stage-card-backfill-subtitle {
    font-size: 16px;
}

.stage-card-modern {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--symbol-page-surface-radius);
    box-shadow: var(--symbol-shadow);
}

.stage-header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.stage-header-modern i {
    font-size: 24px;
    color: var(--symbol-primary);
}

.stage-header-modern h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.stage-content-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Stage metrics row (e.g. inside #stage-card-modern): 4 cols desktop/tablet, 2 cols mobile */
.stage-metrics-row-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .stage-metrics-row-modern:not(.stage-metrics-row-modern-2col) {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .stage-metrics-row-modern:not(.stage-metrics-row-modern-2col) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stage-metrics-row-modern .stage-metric-badge-modern {
    min-width: 0;
}

/* Stage Analysis (Latest) row: always 3 badges per row on all viewports */
#stage-analysis-latest .stage-metrics-row-modern.stage-metrics-row-latest {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Latest row: show label (e.g. Signal) above the value (e.g. BULLISH); DOM stays number then label */
#stage-analysis-latest .stage-metrics-row-modern.stage-metrics-row-latest .stage-metric-badge-modern {
    flex-direction: column-reverse;
}

/* TRINITY backfill card: same label-above-value stacking for Stage / Strength / Signal / Sub Stage */
#stage-card-modern .stage-metrics-row-modern .stage-metric-badge-modern {
    flex-direction: column-reverse;
}

/* When Smart Signal stage is hidden, keep a tighter centered 2-badge layout */
#stage-analysis-latest .stage-metrics-row-modern.stage-metrics-row-latest.stage-metrics-row-modern-2col {
    grid-template-columns: repeat(2, 1fr) !important;
    width: min(100%, 560px);
    margin-left: auto;
    margin-right: auto;
}

#stage-analysis-latest .stage-metrics-row-modern.stage-metrics-row-latest.stage-metrics-row-modern-2col .stage-metric-badge-modern {
    min-width: 160px;
}

#stage-analysis-latest .stage-metrics-row-modern.stage-metrics-row-latest.stage-metrics-row-modern-2col .stage-metric-number-modern {
    display: block;
    -webkit-line-clamp: unset;
    word-break: normal;
    overflow-wrap: normal;
    white-space: nowrap;
}

#stage-analysis-latest .stage-metrics-row-modern.stage-metrics-row-latest.stage-metrics-row-modern-2col .stage-metric-label-modern {
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
}

#stage-analysis-latest .signal-risk-params-modern {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

#stage-analysis-latest .risk-param-group-modern {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

#stage-analysis-latest .risk-param-label-modern {
    color: var(--text-secondary);
    justify-content: center;
    text-align: center;
}

#stage-analysis-latest .risk-param-value-modern {
    color: var(--text-primary);
}

/* Match latest-stage badge typography to primary stage card styling */
#stage-analysis-latest .stage-metric-badge-modern .stage-metric-number-modern {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

#stage-analysis-latest .stage-metric-badge-modern.stage-1-bg .stage-metric-number-modern,
#stage-analysis-latest .stage-metric-badge-modern.stage-2-bg .stage-metric-number-modern,
#stage-analysis-latest .stage-metric-badge-modern.stage-3-bg .stage-metric-number-modern,
#stage-analysis-latest .stage-metric-badge-modern.stage-4-bg .stage-metric-number-modern {
    font-size: clamp(32px, 3.2vw, 42px);
}

/* 2-column variant for Stage Strength + Signal badges in Backfill card */
.stage-metrics-row-modern-2col {
    grid-template-columns: repeat(2, 1fr);
}

/*
 * Stage metric tiles: same glass + semantic tint pattern as .signal-metric-badge-modern
 * (company regime vibe cells). Text uses --text-primary / --text-secondary like vibe badges.
 */
.stage-metric-badge-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 70px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--text-primary);
    container-type: inline-size;
}

/* Weinstein stage → same semantic mapping as vibe positive / negative / warning / neutral */
.stage-metric-badge-modern.stage-1-bg {
    background: rgba(107, 114, 128, 0.3);
    border-color: rgba(107, 114, 128, 0.5);
}

.stage-metric-badge-modern.stage-2-bg {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.stage-metric-badge-modern.stage-3-bg {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
}

.stage-metric-badge-modern.stage-4-bg {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.stage-metric-badge-modern.signal-buy-bg {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.stage-metric-badge-modern.signal-sell-bg {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.stage-metric-badge-modern.signal-hold-bg {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
}

/* SATA / Mansfield / substage: tinted glass only (no heavy gradients); optional pos/neg classes */
.stage-metric-badge-modern.sata-badge-modern.sata-positive {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.stage-metric-badge-modern.sata-badge-modern.sata-negative {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Moderate stage strength: amber glass (aligned with HOLD / substage-middle) */
.stage-metric-badge-modern.sata-badge-modern.sata-moderate {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
}

.stage-metric-badge-modern.mansfield-badge-modern.mansfield-positive {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.stage-metric-badge-modern.mansfield-badge-modern.mansfield-negative {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.stage-metric-badge-modern.substage-badge-modern.substage-early {
    background: rgba(34, 197, 94, 0.32);
    border-color: rgba(22, 163, 74, 0.55);
}

.stage-metric-badge-modern.substage-badge-modern.substage-middle {
    background: rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.5);
}

.stage-metric-badge-modern.substage-badge-modern.substage-late {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Primary value: match .company-regime-modern .signal-metric-strength-modern.vibe-entity-label-modern */
.stage-metric-badge-modern .stage-metric-number-modern {
    font-family: inherit;
    font-size: clamp(17px, 3.6vw, 21px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--text-primary);
    text-align: center;
    word-break: break-word;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 1;
    min-height: 0;
    margin-bottom: 0;
}

#stage-card-modern #signal-value-backfill-modern,
#stage-card-modern #stage-strength-value-modern {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* Footer label: match .vibe-badge-category-text */
.stage-metric-badge-modern .stage-metric-label-modern {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: center;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex-shrink: 1;
    min-height: 0;
    opacity: 1;
}

@media (min-width: 640px) {
    @supports (container-type: inline-size) {
        .stage-metric-badge-modern .stage-metric-number-modern {
            font-size: clamp(15px, 28cqi, 21px);
        }

        .stage-metric-badge-modern .stage-metric-label-modern {
            font-size: clamp(9px, 8cqi, 10px);
        }
    }
}

.stage-badge-modern {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--symbol-primary) 0%, var(--secondary) 100%);
    color: var(--symbol-on-accent-text);
    border-radius: var(--radius-lg);
    width: fit-content;
}

/* Stage-specific background colors */
.stage-badge-modern.stage-1-bg {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.stage-badge-modern.stage-2-bg {
    background: var(--symbol-green-badge-gradient);
    color: var(--symbol-text-on-green-badge);
}

.stage-badge-modern.stage-2-bg .stage-number,
.stage-badge-modern.stage-2-bg .stage-label {
    color: var(--symbol-text-on-green-badge);
}

.stage-badge-modern.stage-3-bg {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}

.stage-badge-modern.stage-4-bg {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
}

.stage-badge-modern.stage-4-bg .stage-number,
.stage-badge-modern.stage-4-bg .stage-label {
    color: white;
}

.stage-number {
    font-size: clamp(28px, 6vw, 52px);
    font-weight: 900;
    line-height: 1;
    color: inherit;
}

.stage-label {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
    opacity: 0.9;
    color: inherit;
}

.stage-description-modern {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Technical Indicators Section */
.indicators-section-modern {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--symbol-shadow);
}

/* Header row with hide/show toggle (Technical Indicators, Key levels & risk) */
.symbol-section-collapsible-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.symbol-section-collapsible-top-main {
    flex: 1;
    min-width: 0;
}

#indicators-section-modern .symbol-section-collapsible-top {
    margin-bottom: 20px;
}

#indicators-section-modern .symbol-section-collapsible-top .indicators-header-modern {
    margin-bottom: 0;
}

#indicators-section-modern.indicators-section-collapsed .symbol-section-collapsible-top {
    margin-bottom: 0;
}

#indicators-section-modern.indicators-section-collapsed {
    padding-bottom: 14px;
}

#ai-signal-modern .symbol-section-collapsible-top {
    margin-bottom: 28px;
}

#ai-signal-modern .symbol-section-collapsible-top .ml-prediction-header {
    margin-bottom: 0;
}

#ai-signal-modern.ai-signal-collapsed .symbol-section-collapsible-top {
    margin-bottom: 0;
}

#ai-signal-modern.ai-signal-collapsed {
    padding-bottom: 14px;
}

.indicators-header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.indicators-header-modern i {
    font-size: 24px;
    color: var(--symbol-primary);
}

.indicators-header-modern h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.indicators-content-modern {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.indicators-group-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.indicators-group-title-modern {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.indicators-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.indicator-box-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-height: 70px;
    text-align: center;
}

.indicator-box-modern.positive {
    background: #16a34a;
    color: #ecfdf5;
}

.indicator-box-modern.negative {
    background: #dc2626;
    color: #ffffff;
}

.indicator-box-modern.neutral {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.indicator-box-modern.warning {
    background: #fca5a5;
    color: #7f1d1d;
}

.indicator-box-modern.range-very-bad {
    background: rgba(239, 68, 68, 1);
    color: #ffffff;
}

.indicator-box-modern.range-bad {
    background: rgba(245, 158, 11, 0.3);
    color: #ffffff;
}

.indicator-box-modern.range-neutral {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.indicator-box-modern.range-good {
    background: #22c55e;
    color: #14532d;
}

.indicator-box-modern.range-very-good {
    background: rgba(34, 197, 94, 1);
    color: #ffffff;
}

.indicator-value-modern {
    font-size: clamp(15px, 4vw, 22px);
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.indicator-label-modern {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.95;
    font-weight: 600;
    color: inherit;
    margin-top: 6px;
    line-height: 1.2;
}

/* Mobile responsive for indicators */
@media (max-width: 480px) {
    .indicators-grid-modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .indicator-box-modern {
        padding: 12px 8px;
        min-height: 60px;
    }
    
    .indicator-value-modern {
        font-size: clamp(14px, 3.5vw, 18px);
    }
    
    .indicator-label-modern {
        font-size: 10px;
    }
}

/* Tablet and Desktop responsive for indicators */
@media (min-width: 768px) {
    .indicators-grid-modern {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .indicator-box-modern {
        padding: 18px 12px;
        min-height: 80px;
    }
    
    .indicator-value-modern {
        font-size: 22px;
    }
    
    .indicator-label-modern {
        font-size: 11px;
    }
}

/* Dark mode for indicators */
[data-theme="dark"] .indicators-section-modern {
    background: var(--symbol-bg-glass-dark);
}

/* Chart Section */
.chart-section-modern {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--symbol-shadow);
}

.chart-header-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.chart-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.chart-pct-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.chart-header-modern h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.chart-controls-modern {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chart-period-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.chart-period-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-dark);
}

.chart-period-btn.active {
    background: var(--symbol-primary);
    color: white;
    border-color: var(--symbol-primary);
}

.chart-period-pct {
    font-size: 14px;
    font-weight: 600;
    min-width: 60px;
    text-align: right;
}

.chart-period-pct.chart-period-pct-positive {
    color: var(--success-color, #22c55e);
}

.chart-period-pct.chart-period-pct-negative {
    color: var(--danger-color, #ef4444);
}

/* ApexCharts legend: override default dark gray for dark mode readability */
.chart-section-modern .apexcharts-legend-text {
    color: var(--text-primary) !important;
}

.chart-container-modern {
    width: 100%;
    height: 300px;
    margin-top: 16px;
    position: relative;
}

/* Symbol price chart — mobile layout (matches ApexCharts breakpoint <768px) */
@media (max-width: 767px) {
    #symbol-container-modern .chart-section-modern .chart-header-modern .chart-title-row h2 {
        display: none;
    }

    #symbol-container-modern .chart-section-modern .chart-header-modern .chart-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    #symbol-container-modern .chart-section-modern .chart-controls-modern {
        width: 100%;
        gap: 6px;
    }

    #symbol-container-modern .chart-section-modern .chart-controls-modern .chart-period-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 4px;
        font-size: 11px;
        text-align: center;
    }

    /* Hide BB/EMA y-axis annotation labels (foreignObject) so the plot can use full width */
    #price-chart-container-modern .apexcharts-yaxis-annotations foreignObject {
        display: none !important;
    }
}

/* Chart Loading Indicator */
.chart-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 50px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--bg-primary-rgb, 26, 26, 46), 0.7);
    z-index: 10;
    backdrop-filter: blur(2px);
}

.chart-loading p {
    font-size: 14px;
    color: var(--text-primary);
    margin-top: 10px;
    text-align: center;
}

.chart-loading .loading-spinner,
.chart-loading .fa-spinner {
    font-size: 32px;
    color: var(--symbol-primary);
    animation: spin 1s linear infinite;
}

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

/* Metrics Grid */
.metrics-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.metric-card-modern {
    padding: 16px;
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.metric-label-modern {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.metric-value-modern {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-value-modern.positive {
    color: var(--symbol-success);
}

.metric-value-modern.negative {
    color: var(--symbol-danger);
}

/* Insights Section - standalone (legacy, kept for compatibility) */
.insights-section-modern {
    margin-bottom: 16px;
    padding: 20px;
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--symbol-shadow);
}

/* Key Insights: standalone section (between ML prediction and Smart Call) */
.key-insights-section-modern {
    margin-bottom: 16px;
    padding: 20px 22px 22px;
    position: relative;
    overflow: hidden;
}

.key-insights-section-modern .insights-modern-prominent {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

[data-theme="dark"] .key-insights-section-modern .insights-modern-prominent {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Insights - prominent panel (nested in key-insights section or legacy placement) */
.insights-modern-prominent {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.04));
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.08);
}

[data-theme="dark"] .insights-modern-prominent {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.05));
    border-color: rgba(96, 165, 250, 0.25);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.insights-modern-prominent .insight-item-modern {
    padding: clamp(16px, 4vw, 22px);
    font-size: clamp(15px, 3.8vw, 17px);
    border-left-width: 4px;
}

.insights-modern-prominent .insight-item-modern.insight-item-modern--substage-only {
    padding-top: clamp(12px, 3vw, 16px);
    padding-bottom: clamp(12px, 3vw, 16px);
}

.insights-modern-prominent .insight-title-modern {
    font-size: clamp(15px, 3.8vw, 18px);
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.insights-modern-prominent .insight-description-modern {
    font-size: clamp(15px, 3.8vw, 17px);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.55;
}

.insights-modern-prominent .insights-header-modern {
    margin-bottom: clamp(14px, 3vw, 20px);
}

.insights-modern-prominent .insights-header-modern h2 {
    font-size: clamp(1.15rem, 4.2vw, 1.35rem);
    font-weight: 700;
}

.insights-header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(14px, 3vw, 18px);
}

.insights-header-modern i {
    font-size: clamp(22px, 5vw, 28px);
    color: var(--symbol-primary);
    flex-shrink: 0;
}

.insights-header-modern h2 {
    font-size: clamp(1.15rem, 4.2vw, 1.35rem);
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.25;
}

.insights-content-modern {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3vw, 18px);
}

.insight-item-modern {
    padding: clamp(16px, 4vw, 22px);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--symbol-primary);
}

.insight-item-modern--pattern {
    border-left-color: #8b5cf6;
}

.insight-item-modern--transition {
    border-left-color: #3b82f6;
}

.insight-item-modern--substage-only {
    border-left-color: #8b5cf6;
    padding-top: clamp(12px, 3vw, 16px);
    padding-bottom: clamp(12px, 3vw, 16px);
}

/* Sub-stage-only fallback card (no transition pie): right-aligned badge */
.insight-transition-substage-wrap {
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 100%;
}

.insight-transition-substage-wrap .stage-metric-badge-modern {
    width: min(147px, 42vw);
    max-width: 147px;
    aspect-ratio: 1;
    margin: 0;
}

.insight-title-modern {
    font-size: clamp(15px, 3.8vw, 18px);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.insight-description-modern {
    font-size: clamp(14px, 3.5vw, 16px);
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* Insights: pattern / transition narrative (mobile-first type scale) */
.insight-body-modern {
    font-size: clamp(16px, 4vw, 18px);
    line-height: 1.55;
    color: var(--text-primary);
    margin: 0 0 14px 0;
    font-weight: 500;
}

.insight-transition-text {
    margin-bottom: 12px;
}

.insights-empty-modern {
    font-size: clamp(15px, 3.8vw, 17px);
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    padding: 8px 0;
}

/* Transition insight: pie + sub-stage on one row; legend lines below (larger type) */
.insight-binary-pie-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(14px, 3vw, 18px);
    margin-top: 4px;
    width: 100%;
}

.insight-binary-pie-wrap--substage-only .insight-binary-pie-row {
    justify-content: flex-end;
}

.insight-binary-pie-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 4vw, 28px);
    width: 100%;
}

.insight-binary-substage-slot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-binary-substage-slot .stage-metric-badge-modern {
    width: min(143px, 38vw);
    max-width: 143px;
    aspect-ratio: 1;
    margin: 0;
}

.insight-binary-pie-svg {
    width: clamp(112px, 28vw, 140px);
    height: auto;
    flex-shrink: 0;
}

.insight-binary-legend {
    margin: 0;
    width: 100%;
    font-size: clamp(17px, 4.2vw, 20px);
    line-height: 1.5;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.insight-binary-legend-line {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    font-size: clamp(17px, 4.2vw, 20px);
}

.insight-binary-legend-line strong {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: clamp(18px, 4.5vw, 22px);
}

.insight-binary-swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.insight-binary-swatch--remain {
    background: #22c55e;
}

.insight-binary-swatch--move {
    background: #94a3b8;
}

/* Targets Section */
.targets-section-modern {
    margin-bottom: 16px;
    padding: 20px;
}

.targets-header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.targets-header-modern i {
    font-size: 24px;
    color: var(--symbol-primary);
}

.targets-header-modern h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

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

.target-card-modern {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    text-align: center;
    transition: var(--transition);
}

.target-card-modern:hover {
    border-color: var(--symbol-primary);
    transform: translateY(-2px);
}

.target-price-modern {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.target-type-modern {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.target-confidence-modern {
    font-size: 12px;
    font-weight: 600;
    color: var(--symbol-success);
}

/* Levels Section */
.levels-section-modern {
    margin-bottom: 16px;
    padding: 20px;
}

.levels-header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.levels-header-modern i {
    font-size: 24px;
    color: var(--symbol-primary);
}

.levels-header-modern h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.levels-content-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.level-group-modern {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.level-badge-modern {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.level-badge-modern.support {
    background: linear-gradient(135deg, var(--symbol-success), var(--symbol-info));
}

.level-badge-modern.resistance {
    background: linear-gradient(135deg, var(--symbol-danger), var(--symbol-warning));
}

/* Company Info */
.company-info-modern {
    margin-bottom: 16px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.company-header-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.company-header-modern i {
    font-size: 24px;
    color: var(--symbol-primary);
}

.company-header-modern h2,
.company-header-label-modern {
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.2;
}

.company-details-modern {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Market status: one row, compact, mobile-first */
.market-status-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--symbol-page-surface-radius);
    border: 1px solid var(--border-color);
}

.market-status-left,
.market-status-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.market-status-left {
    flex: 1;
    min-width: 0;
}

.market-status-right {
    flex-shrink: 0;
}

.market-status-modern.market-open {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.market-status-modern.market-closed {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-color: rgba(239, 68, 68, 0.25);
}

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

.market-status-modern.market-open .market-status-dot {
    background: var(--success-color, #22c55e);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    animation: market-dot-pulse 2s ease-in-out infinite;
}

.market-status-modern.market-closed .market-status-dot {
    background: var(--danger-color, #ef4444);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

@keyframes market-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.market-status-sep {
    color: var(--text-light);
    font-size: 11px;
    flex-shrink: 0;
}

.market-status-label {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.market-status-modern.market-open .market-status-label {
    color: var(--success-color, #22c55e);
}

.market-status-modern.market-closed .market-status-label {
    color: var(--danger-color, #ef4444);
}

.market-status-time,
.market-status-countdown {
    font-size: 12px;
    color: var(--text-secondary);
}

.market-status-countdown {
    min-width: 0;
}

.company-detail-item-modern {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.company-detail-item-modern:last-child {
    border-bottom: none;
}

.detail-label-modern {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 600;
}

.detail-value-modern {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

.company-description-modern {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.company-regime-modern {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.company-regime-modern.vibes-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    font-family: var(--font-body, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

.company-regime-modern .signal-metric-badge-modern {
    max-width: 200px;
}

.vibes-grid-modern .signal-metric-badge-modern {
    max-width: none;
    min-width: 0;
}

/* Responsive - Tablet and Desktop */
@media (min-width: 768px) {
    .symbol-app-container {
        max-width: 800px;
        padding: 24px;
    }
    
    .symbol-hero-card,
    .symbol-market-status-ribbon,
    .ai-signal-modern,
    .stage-card-modern,
    .key-insights-section-modern,
    .chart-section-modern,
    .insights-section-modern,
    .targets-section-modern,
    .levels-section-modern,
    .company-info-modern {
        margin-bottom: 24px;
    }
    
    .price-stack-modern .price-value-modern {
        font-size: 48px;
    }
    
    .ohlc-grid-modern {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .metrics-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .targets-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .chart-container-modern {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .symbol-app-container {
        max-width: 1000px;
    }
    
    .metrics-grid-modern {
        grid-template-columns: repeat(4, 1fr);
    }

    .company-regime-modern.vibes-grid-modern {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .symbol-hero-card,
[data-theme="dark"] .stage-card-modern,
[data-theme="dark"] .key-insights-section-modern,
[data-theme="dark"] .chart-section-modern,
[data-theme="dark"] .insights-section-modern,
[data-theme="dark"] .targets-section-modern,
[data-theme="dark"] .levels-section-modern,
[data-theme="dark"] .company-info-modern {
    background: var(--symbol-bg-glass-dark);
}

[data-theme="dark"] .metric-card-modern {
    background: var(--symbol-bg-glass-dark);
}

[data-theme="dark"] .insight-item-modern,
[data-theme="dark"] .target-card-modern {
    background: var(--bg-tertiary);
}

/* Vibe badges: light text in dark mode for contrast on colored glass backgrounds */
[data-theme="dark"] .vibe-badge-vibe-text {
    color: rgba(255, 255, 255, 0.92);
}
[data-theme="dark"] .vibe-badge-category-text {
    color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .vibe-badge-cell-modern .signal-metric-value-modern,
[data-theme="dark"] .vibe-badge-cell-modern .signal-metric-strength-modern {
    color: white;
}
[data-theme="dark"] .company-regime-modern .signal-metric-strength-modern.vibe-entity-label-modern {
    color: #fff;
}

/* Color Coding for Signals - Enhanced for readability on gradient background */
.signal-text-modern.signal-buy {
    color: #a7f3d0 !important; /* Bright mint green for better contrast */
}

.signal-text-modern.signal-sell {
    color: #fecaca !important; /* Bright light red for better contrast */
}

.signal-text-modern.signal-hold {
    color: #fde68a !important; /* Bright light yellow/amber for better contrast */
}

.signal-text-modern.signal-neutral {
    color: #e5e7eb !important; /* Light gray for better contrast */
}

/* Dark mode adjustments for signal colors */
[data-theme="dark"] .signal-text-modern.signal-buy {
    color: #6ee7b7 !important; /* Even brighter for dark mode */
}

[data-theme="dark"] .signal-text-modern.signal-sell {
    color: #fca5a5 !important; /* Even brighter for dark mode */
}

[data-theme="dark"] .signal-text-modern.signal-hold {
    color: #fcd34d !important; /* Even brighter for dark mode */
}

[data-theme="dark"] .signal-text-modern.signal-neutral {
    color: #f3f4f6 !important; /* Even brighter for dark mode */
}

/* Color Coding for Stages */
.stage-number.stage-1 {
    color: #d97706 !important;
}

.stage-number.stage-2 {
    color: #16a34a !important;
}

.stage-number.stage-3 {
    color: #f97316 !important;
}

.stage-number.stage-4 {
    color: #ef4444 !important;
}

/* Color Coding for Stage Strength - Enhanced for readability */
.confidence-value.strength-strong,
.stage-strength-value-modern.strength-strong {
    color: #a7f3d0 !important; /* Bright mint green for better contrast on blue */
    font-weight: 700;
}

.confidence-value.strength-moderate,
.stage-strength-value-modern.strength-moderate {
    color: #fde68a !important; /* Bright light yellow/amber for better contrast on blue */
    font-weight: 700;
}

.confidence-value.strength-weak,
.stage-strength-value-modern.strength-weak {
    color: #fecaca !important; /* Bright light red for better contrast on blue */
    font-weight: 700;
}

/* Dark mode adjustments for stage strength */
[data-theme="dark"] .confidence-value.strength-strong,
[data-theme="dark"] .stage-strength-value-modern.strength-strong {
    color: #6ee7b7 !important; /* Even brighter for dark mode */
}

[data-theme="dark"] .confidence-value.strength-moderate,
[data-theme="dark"] .stage-strength-value-modern.strength-moderate {
    color: #fcd34d !important; /* Even brighter for dark mode */
}

[data-theme="dark"] .confidence-value.strength-weak,
[data-theme="dark"] .stage-strength-value-modern.strength-weak {
    color: #fca5a5 !important; /* Even brighter for dark mode */
}

/* ==============================================
   ML Prediction Section - Standalone
   ============================================== */
.ml-prediction-section {
    padding: 28px 32px;
    margin-bottom: 28px;
    background: linear-gradient(145deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.ml-prediction-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
    opacity: 0.9;
}

.ml-prediction-header {
    margin-bottom: 28px;
}

.ml-prediction-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ml-prediction-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #a78bfa;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.ml-prediction-badge i {
    font-size: 14px;
}

/* Badge copy is lowercase; base .ml-prediction-badge uses uppercase */
#ml-prediction-section .ml-prediction-badge {
    text-transform: none;
}

.ml-prediction-headline {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.ml-prediction-headline #ml-prediction-symbol,
.ml-prediction-headline #stage-analysis-symbol,
.ml-prediction-headline #stage-card-symbol,
.ml-prediction-headline #ai-signal-symbol {
    color: var(--symbol-primary);
    font-weight: 800;
}

.ml-prediction-subtitle {
    font-size: 17px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ml-prediction-info {
    display: inline-flex;
}

.ml-prediction-info .info-icon-modern {
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.ml-prediction-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.ml-cycle-summary-text {
    flex: 1;
    min-width: min(100%, 220px);
}

#stage-card-modern .stage-card-cycle-narrative.ml-cycle-summary-text {
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

.ml-cycle-headline {
    margin: 0;
    font-size: clamp(1.15rem, 2.8vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
}

.ml-cycle-subline {
    margin: 8px 0 0;
    font-size: 28px;
    line-height: 1.45;
    color: var(--text-secondary);
    width: 100%;
}

#stage-card-cycle-narrative.ml-cycle-summary-expandable {
    cursor: pointer;
}

.ml-cycle-subline.stage-subline-expandable {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.ml-cycle-model-hint {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-secondary);
    padding: 0 2px;
}

/* #stage-analysis-latest, then #ml-prediction-section, chart, #stage-card-modern (includes #stage-card-cycle-n narrative); #stage-analysis-latest above #ai-signal-modern */
#stage-analysis-latest .ml-prediction-header .ml-cycle-model-hint {
    margin-top: 10px;
    margin-bottom: 0;
}

.ml-prediction-probs .transition-probabilities-section {
    border-top: none !important;
    padding-top: 0 !important;
}

.ml-prediction-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 24px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
}

.ml-prediction-placeholder i {
    font-size: 32px;
    opacity: 0.5;
}

.ml-prediction-placeholder p {
    margin: 0;
    font-size: 16px;
}

.ml-prediction-probs .most-likely-callout {
    border-width: 2px;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
}

.ml-prediction-probs .most-likely-callout::before {
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.ml-prediction-probs .transition-prob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ml-prediction-probs .transition-prob-item {
    padding: 14px 16px;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .ml-prediction-section {
        padding: 20px 18px;
    }
    
    .ml-prediction-headline {
        font-size: 20px;
    }
    
    .ml-prediction-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ml-prediction-probs .transition-prob-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Pattern Visualization Styles (legacy - used in ML section) */
.pattern-visualization-modern {
    padding: 20px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-top: 15px;
    text-align: center;
}

.pattern-stage-modern {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 2;
    position: relative;
    min-width: 0;
}

.ml-stage-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 8px 12px;
    min-height: 148px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ml-stage-cell--current .ml-stage-card {
    border-color: rgba(99, 102, 241, 0.65);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 6px 20px rgba(99, 102, 241, 0.12);
}

.ml-stage-cell--model-peak .ml-stage-card {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
}

.ml-stage-cell--current.ml-stage-cell--model-peak .ml-stage-card {
    border-color: rgba(99, 102, 241, 0.7);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 6px 20px rgba(99, 102, 241, 0.1);
}

.ml-stage-now-pill {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.ml-stage-dot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.ml-stage-num {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.ml-stage-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-secondary);
    word-break: break-word;
    hyphens: auto;
}

.ml-stage-model-row {
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
    border-top: 1px dashed var(--border-color);
}

.ml-stage-model-pct {
    display: block;
    font-size: clamp(1.05rem, 3vw, 1.25rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.2;
}

.ml-stage-model-sublabel {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 2px;
}

.ml-stage-cell--model-peak .ml-stage-model-pct {
    color: #f59e0b;
}

.stage-dot-modern {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

.stage-dot-modern.stage-1-dot {
    background-color: #f59e0b;
}

.stage-dot-modern.stage-2-dot {
    background-color: #22c55e;
}

.stage-dot-modern.stage-3-dot {
    background-color: #f97316;
}

.stage-dot-modern.stage-4-dot {
    background-color: #ef4444;
}

.stage-dot-modern.stage-active {
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3);
    transform: scale(1.2);
}

.stage-line-modern {
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

/* Tooltip Styles */
.tooltip-container-modern {
    position: relative;
    cursor: help;
}

.tooltip-modern {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    width: 250px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    z-index: 1000;
    margin-bottom: 8px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.tooltip-container-modern:hover .tooltip-modern,
.tooltip-container-modern:focus .tooltip-modern {
    visibility: visible;
    opacity: 1;
}

.tooltip-modern strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-weight: 700;
}

/* Stage Strength Progress Bar */
.stage-strength-label-modern {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.stage-strength-value-modern {
    font-size: 14px;
    font-weight: 700;
}

.progress-bar-modern {
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

.progress-value-modern {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-value-modern.confidence-high {
    background-color: #22c55e;
}

.progress-value-modern.confidence-medium {
    background-color: #f59e0b;
}

.progress-value-modern.confidence-low {
    background-color: #ef4444;
}

/* ==========================================
   REUSABLE INDICATOR INFO MODAL
   ========================================== */

/* Make indicators clickable */
.indicator-info-trigger {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.indicator-info-trigger:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.indicator-info-trigger:active {
    transform: scale(0.98);
}

/* Add subtle info icon indicator */
.indicator-info-trigger::after {
    content: "\f05a"; /* Font Awesome info-circle */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    opacity: 0.5;
    color: var(--text-secondary);
    transition: opacity 0.2s ease;
}

.indicator-info-trigger:hover::after {
    opacity: 0.9;
}

/* Metric row badges: no corner glyph; help cursor (?) on hover instead of pointer */
.stage-metric-badge-modern.indicator-info-trigger {
    cursor: help;
}

.stage-metric-badge-modern.indicator-info-trigger::after {
    content: none;
    display: none;
}

.stage-metric-badge-modern.indicator-info-trigger:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.stage-metric-badge-modern.indicator-info-trigger:active {
    transform: scale(0.97);
}

/* Technical indicators: no corner glyph; help cursor + hover/active like before */
#indicators-section-modern .indicator-box-modern.indicator-info-trigger {
    cursor: help;
}

#indicators-section-modern .indicator-box-modern.indicator-info-trigger::after {
    content: none;
    display: none;
}

#indicators-section-modern .indicator-box-modern.indicator-info-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

#indicators-section-modern .indicator-box-modern.indicator-info-trigger:active {
    transform: scale(0.97);
}

/* Signal metric badge info trigger (corner icon) */
.signal-metric-badge-modern.indicator-info-trigger::after {
    font-size: 12px;
    top: 6px;
    right: 6px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.signal-metric-badge-modern.indicator-info-trigger:hover::after {
    opacity: 1;
}

.signal-metric-badge-modern.indicator-info-trigger:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.signal-metric-badge-modern.indicator-info-trigger:active {
    transform: scale(0.98);
}

/* Risk param tiles: no corner glyph; help cursor + hover/active like before */
.risk-param-group-modern.indicator-info-trigger {
    cursor: help;
}

.risk-param-group-modern.indicator-info-trigger::after {
    content: none;
    display: none;
}

.risk-param-group-modern.indicator-info-trigger:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.risk-param-group-modern.indicator-info-trigger:active {
    transform: scale(0.98);
}

/* Company regime vibe badges: same affordance as stage-metric row (help cursor, no corner glyph, stronger hover) */
.vibe-badge-cell-modern.indicator-info-trigger {
    cursor: help;
}

.vibe-badge-cell-modern.indicator-info-trigger::after {
    content: none;
    display: none;
}

.vibe-badge-cell-modern.indicator-info-trigger:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.vibe-badge-cell-modern.indicator-info-trigger:active {
    transform: scale(0.97);
}

/* Modal Overlay */
.indicator-info-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

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

/* Modal Container */
.indicator-info-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.25s ease;
    border: 1px solid var(--border-color);
}

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

/* Modal Header */
.indicator-info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.indicator-info-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.indicator-info-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.indicator-info-modal-close:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
    transform: scale(1.05);
}

.indicator-info-modal-close i {
    font-size: 16px;
}

/* Modal Body */
.indicator-info-modal-body {
    padding: 24px 20px;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

/* Value Container */
.indicator-info-value-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.indicator-info-value-container.indicator-info-value-hidden {
    display: none;
}

.indicator-info-value {
    display: inline-block;
    font-size: 32px;
    font-weight: 800;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(147, 51, 234, 0.15));
    color: var(--text-primary);
    border: 2px solid rgba(96, 165, 250, 0.3);
    text-align: center;
}

/* Value color variants */
.indicator-info-value.positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.28));
    border-color: rgba(22, 163, 74, 0.45);
    color: #16a34a;
}

.indicator-info-value.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.indicator-info-value.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.25));
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.indicator-info-value.neutral {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.25));
    border-color: rgba(107, 114, 128, 0.5);
    color: var(--text-secondary);
}

/* Description */
.indicator-info-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: center;
}

.indicator-info-description strong {
    color: var(--text-primary);
}

/* Dark mode adjustments */
[data-theme="dark"] .indicator-info-modal {
    background: var(--bg-secondary);
}

[data-theme="dark"] .indicator-info-modal-header {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .indicator-info-value {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(147, 51, 234, 0.2));
}

/* Mobile responsive */
@media (max-width: 480px) {
    .indicator-info-modal-overlay {
        padding: 16px;
        align-items: flex-end;
    }
    
    .indicator-info-modal {
        max-height: 70vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        animation: modalSlideUpMobile 0.25s ease;
    }
    
    @keyframes modalSlideUpMobile {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .indicator-info-modal-title {
        font-size: 16px;
    }
    
    .indicator-info-value {
        font-size: 28px;
        padding: 14px 28px;
    }
    
    .indicator-info-description {
        font-size: 14px;
    }
}

/* ==============================================
   Key Insights Modal
   ============================================== */
.key-insights-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2200;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.key-insights-modal {
    width: min(940px, 100%);
    max-height: 85vh;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.key-insights-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.key-insights-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.key-insights-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.key-insights-modal-body {
    padding: 16px;
    overflow: auto;
}

.key-insights-modal-body #key-insights-section {
    margin: 0;
}

.most-likely-callout {
    cursor: pointer;
}

@media (max-width: 480px) {
    .key-insights-modal-overlay {
        align-items: flex-end;
        padding: 12px;
    }

    .key-insights-modal {
        max-height: 82vh;
        border-radius: 14px 14px 0 0;
    }
}

/* ==============================================
   Stage Transition Probabilities
   ============================================== */
.transition-probabilities-section {
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
}

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

.next-stage-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.next-stage-title i {
    color: var(--symbol-primary);
    font-size: 16px;
}

/* Most Likely Stage Callout */
.most-likely-callout {
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    border: 2px solid var(--stage-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.most-likely-callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--stage-color);
}

.most-likely-badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--stage-color);
    background: rgba(96, 165, 250, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.most-likely-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.most-likely-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.most-likely-stage i {
    font-size: 24px;
}

.most-likely-prob {
    font-size: 32px;
    font-weight: 800;
    color: var(--stage-color);
    font-variant-numeric: tabular-nums;
}

.most-likely-desc {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.transition-prob-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.transition-prob-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    text-align: center;
}

.transition-prob-item:hover {
    border-color: var(--stage-color);
}

.transition-prob-item.most-likely {
    border-color: var(--stage-color);
    background: linear-gradient(135deg, var(--bg-primary), rgba(96, 165, 250, 0.03));
}

.transition-prob-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.transition-prob-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.transition-prob-label .stage-name {
    font-weight: 500;
    font-size: 18px;
    color: var(--text-primary);
}

.transition-prob-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.transition-prob-bar-container {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.transition-prob-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease-out;
    min-width: 2px;
}

/* Mobile adjustments for transition probabilities */
@media (max-width: 600px) {
    .transition-prob-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .most-likely-callout {
        padding: 14px 16px;
    }
    
    .most-likely-stage {
        font-size: 20px;
    }
    
    .most-likely-stage i {
        font-size: 20px;
    }
    
    .most-likely-prob {
        font-size: 26px;
    }
    
    .transition-prob-item {
        padding: 8px 10px;
    }
    
    .transition-prob-label .stage-name {
        font-size: 17px;
    }
    
    .transition-prob-value {
        font-size: 21px;
    }
    
    .next-stage-title {
        font-size: 14px;
    }
}

/* ==============================================
   FULLSCREEN CHART MODAL
   ============================================== */

/* Tap hint in header */
.chart-tap-hint {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.chart-tap-hint i {
    font-size: 14px;
}

.chart-section-modern:hover .chart-tap-hint {
    opacity: 1;
}

/* Clickable chart container */
.chart-clickable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chart-clickable:hover {
    transform: scale(1.005);
}

.chart-clickable:active {
    transform: scale(0.995);
}

/* Fullscreen overlay */
.chart-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    overflow: hidden;
    animation: fullscreenFadeIn 0.25s ease;
}

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

/* Fullscreen chart container */
.browser-fullscreen {
    width: 100% !important;
    height: 85vh !important;
    max-width: 1600px;
    background-color: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 20px;
    position: relative;
    z-index: 10000;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: fullscreenSlideIn 0.3s ease;
}

@keyframes fullscreenSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.browser-fullscreen .apexcharts-canvas {
    height: 95% !important;
    width: 100% !important;
}

/* Close button */
.chart-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.chart-fullscreen-close:hover {
    background: var(--symbol-primary);
    color: white;
    border-color: var(--symbol-primary);
    transform: scale(1.05);
}

.chart-fullscreen-close:active {
    transform: scale(0.95);
}

/* Prevent body scrolling when fullscreen is open */
.overflow-hidden {
    overflow: hidden !important;
}

/* Mobile responsive fullscreen */
@media (max-width: 768px) {
    .chart-fullscreen-overlay {
        padding: 8px;
    }
    
    .browser-fullscreen {
        height: 90vh !important;
        padding: 12px;
        border-radius: 12px;
    }
    
    .chart-fullscreen-close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .chart-tap-hint {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .browser-fullscreen {
        height: 92vh !important;
        padding: 8px;
        border-radius: 8px;
    }
    
    .chart-fullscreen-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .chart-fullscreen-overlay {
    background-color: rgba(0, 0, 0, 0.95);
}

[data-theme="dark"] .browser-fullscreen {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

/* Back to Top - sticky at bottom when scrolling */
.symbol-back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 200;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--symbol-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

.symbol-back-to-top:hover {
    color: var(--symbol-primary);
    border-color: var(--symbol-primary);
}

.symbol-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.symbol-back-to-top i {
    font-size: 16px;
}

/* —— Your positions (cached portfolios) —— align with symbol hero glass-card —— */
.symbol-your-positions-card {
    margin-bottom: 16px;
    padding: 14px 18px 16px;
    border-radius: var(--symbol-page-surface-radius);
    border: 1px solid var(--border-color);
    background: var(--symbol-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--symbol-shadow);
    overflow: hidden;
}

[data-theme="dark"] .symbol-your-positions-card {
    border-color: var(--border-color);
    background: var(--symbol-bg-glass-dark);
}

/* Collapsed (list hidden): drop header↔body margin and extra bottom padding — was empty gap */
#symbol-your-positions-root.symbol-your-positions-collapsed .symbol-your-positions-header {
    margin-bottom: 0;
}

#symbol-your-positions-root.symbol-your-positions-collapsed {
    padding-bottom: 14px;
}

.symbol-your-positions-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.symbol-your-positions-header-actions {
    flex-shrink: 0;
}

/* Eye toggle: match portfolio action base (14px) + panel typography bump */
#symbol-your-positions-root .btn-portfolio-action-modern {
    font-size: calc(14px + 4pt);
}

.symbol-your-positions-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.symbol-your-positions-icon-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: var(--symbol-primary);
    font-size: calc(16px + 4pt);
}

[data-theme="dark"] .symbol-your-positions-icon-wrap {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

.symbol-your-positions-headlines {
    min-width: 0;
}

.symbol-your-positions-title {
    margin: 0;
    font-size: calc(1.05rem + 4pt);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.symbol-your-positions-sub {
    margin: 4px 0 0;
    font-size: calc(0.78rem + 4pt);
    color: var(--text-secondary);
    opacity: 0.92;
}

.symbol-your-positions-body {
    min-height: 0;
}

.symbol-your-positions-empty {
    padding: 12px 4px 8px;
    text-align: left;
}

.symbol-your-positions-empty-title {
    margin: 0 0 8px;
    font-size: calc(0.95rem + 4pt);
    font-weight: 600;
    color: var(--text-primary);
}

.symbol-your-positions-empty-hint {
    margin: 0;
    font-size: calc(0.82rem + 4pt);
    line-height: 1.45;
    color: var(--text-secondary);
}

.symbol-your-positions-empty-hint a {
    color: var(--symbol-primary);
    font-weight: 600;
    text-decoration: none;
}

.symbol-your-positions-empty-hint a:hover {
    text-decoration: underline;
}

.symbol-your-positions-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .symbol-your-positions-rows {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.symbol-your-positions-row {
    padding: 12px 14px 12px;
    border-radius: var(--radius-lg);
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .symbol-your-positions-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
}

.symbol-your-positions-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.symbol-your-positions-portfolio-link {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 650;
    font-size: calc(0.92rem + 4pt);
}

.symbol-your-positions-portfolio-link:hover {
    color: var(--symbol-primary);
}

.symbol-your-positions-portfolio-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-your-positions-chevron {
    flex-shrink: 0;
    font-size: calc(10px + 4pt);
    opacity: 0.45;
}

a.symbol-your-positions-row-sell {
    flex-shrink: 0;
    align-self: center;
}

a.symbol-your-positions-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: calc(0.72rem + 4pt);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-primary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

[data-theme="dark"] a.symbol-your-positions-action {
    background: rgba(255, 255, 255, 0.06);
}

a.symbol-your-positions-action:hover {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.35);
    color: var(--symbol-primary);
}

a.symbol-your-positions-action-sell {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: var(--symbol-danger, #ef4444);
}

a.symbol-your-positions-action-sell:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--symbol-danger, #ef4444);
}

a.symbol-your-positions-action.symbol-your-positions-row-sell {
    width: 60px;
    height: 44px;
    padding: 0;
    box-sizing: border-box;
    font-size: calc(0.62rem + 4pt);
    line-height: 1;
}

.symbol-your-positions-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

/* Tablet and up: 3 metrics per row (mobile stays 2). */
@media (min-width: 768px) {
    .symbol-your-positions-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.symbol-your-positions-metric-label {
    display: block;
    font-size: calc(0.65rem + 4pt);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 4px;
    opacity: 0.85;
}

.symbol-your-positions-metric-value {
    font-size: calc(0.9rem + 4pt);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

a.symbol-your-positions-metric-hit {
    display: block;
    margin: 2px -8px -2px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.symbol-your-positions-metric-hit:hover {
    background-color: rgba(96, 165, 250, 0.1);
}

a.symbol-your-positions-metric-hit:focus-visible {
    box-shadow: 0 0 0 2px var(--symbol-primary);
}

[data-theme="dark"] a.symbol-your-positions-metric-hit:hover {
    background-color: rgba(96, 165, 250, 0.14);
}

.symbol-your-positions-pnl.gain {
    color: var(--symbol-success);
}

.symbol-your-positions-pnl.loss {
    color: var(--symbol-danger);
}

/* ==============================================
   Flagship Symbol Page Refresh
   ============================================== */

body.symbol-page {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(79, 70, 229, 0.20), transparent 34%),
        radial-gradient(circle at top right, rgba(6, 182, 212, 0.12), transparent 28%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-primary) 86%, #020617 14%) 0%,
            var(--bg-primary) 52%,
            color-mix(in srgb, var(--bg-primary) 92%, #020617 8%) 100%
        );
}

body.symbol-page::before,
body.symbol-page::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.65;
}

body.symbol-page::before {
    top: 88px;
    left: -120px;
    width: 320px;
    height: 320px;
    background: rgba(79, 70, 229, 0.20);
}

body.symbol-page::after {
    top: 220px;
    right: -90px;
    width: 280px;
    height: 280px;
    background: rgba(8, 145, 178, 0.16);
}

body.symbol-page .loading-container-modern,
body.symbol-page #symbol-container-modern,
body.symbol-page #toast-container-symbol,
body.symbol-page #symbol-back-to-top {
    position: relative;
    z-index: 1;
}

/* Keep #symbol-header-container out of the rule above: position:relative breaks
   sticky and drops z-index below the earlier #symbol-header-container (101). */

body.symbol-page #symbol-header-container {
    background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

body.symbol-page .symbol-app-container {
    max-width: 1180px;
    padding: 20px 16px 96px;
}

/* Layout only — no outer “card”; copy + panel-card carry the glass styling */
.symbol-page-hero-shell {
    margin-bottom: 18px;
    display: grid;
    gap: 20px;
}

.symbol-page-hero-copy,
.symbol-page-hero-panel-card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, rgba(255, 255, 255, 0.16) 24%);
    background: color-mix(in srgb, var(--bg-glass) 82%, rgba(255, 255, 255, 0.12) 18%);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-radius: var(--symbol-page-surface-radius);
}

.symbol-page-hero-copy {
    padding: 24px;
}

.symbol-page-hero-badge,
.symbol-page-hero-panel-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.symbol-page-hero-badge {
    margin-bottom: 14px;
    color: color-mix(in srgb, var(--text-primary) 72%, var(--primary) 28%);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(8, 145, 178, 0.12));
    border: 1px solid rgba(79, 70, 229, 0.18);
}

.symbol-page-hero-title {
    margin: 0 0 12px;
    max-width: 14ch;
    font-family: var(--landing-font-display, var(--font-display));
    font-size: clamp(2rem, 4.6vw, 3.35rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.symbol-page-hero-description {
    margin: 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.symbol-page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.symbol-page-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.symbol-page-hero-btn:hover {
    transform: translateY(-1px);
}

.symbol-page-hero-btn-primary {
    color: #eff6ff;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 74%, #312e81 26%),
        color-mix(in srgb, var(--secondary) 76%, #164e63 24%)
    );
    box-shadow: 0 18px 34px rgba(59, 130, 246, 0.20);
}

.symbol-page-hero-btn-secondary {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 82%, rgba(255, 255, 255, 0.2) 18%);
}

.symbol-page-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.symbol-page-hero-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 82%, rgba(255, 255, 255, 0.12) 18%);
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, rgba(255, 255, 255, 0.14) 22%);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
}

.symbol-page-hero-panel-card {
    height: 100%;
    padding: 22px;
}

.symbol-page-hero-panel-label {
    margin-bottom: 16px;
    color: color-mix(in srgb, var(--text-primary) 62%, var(--primary) 38%);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.symbol-page-hero-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.symbol-page-hero-panel-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: start;
}

.symbol-page-hero-panel-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(8, 145, 178, 0.14));
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.symbol-page-hero-panel-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 0.98rem;
}

.symbol-page-hero-panel-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

body.symbol-page .symbol-hero-card,
body.symbol-page .stage-card-modern,
body.symbol-page .key-insights-section-modern,
body.symbol-page .chart-section-modern,
body.symbol-page .indicators-section-modern,
body.symbol-page .targets-section-modern,
body.symbol-page .levels-section-modern,
body.symbol-page .ml-prediction-section,
body.symbol-page #symbol-your-positions-root {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg-glass) 84%, rgba(255, 255, 255, 0.10) 16%),
        color-mix(in srgb, var(--bg-secondary) 90%, rgba(15, 23, 42, 0.06) 10%)
    );
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, rgba(255, 255, 255, 0.16) 26%);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.symbol-page .symbol-hero-card {
    position: relative;
    padding: 18px 22px 20px;
    overflow: hidden;
}

body.symbol-page .symbol-hero-card::before,
body.symbol-page .stage-card-modern::before,
body.symbol-page #symbol-your-positions-root::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent);
    pointer-events: none;
}

body.symbol-page .symbol-hero-card::after {
    content: "";
    position: absolute;
    top: -42px;
    right: -36px;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 70%);
    pointer-events: none;
}

body.symbol-page .symbol-market-status-ribbon .market-status-modern {
    background: color-mix(in srgb, var(--bg-glass) 84%, rgba(255, 255, 255, 0.10) 16%);
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, rgba(255, 255, 255, 0.16) 26%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

body.symbol-page .price-stack-modern .price-value-modern {
    font-size: clamp(2.3rem, 5vw, 3.25rem);
    letter-spacing: -0.04em;
}

body.symbol-page .ml-prediction-section {
    background:
        radial-gradient(circle at top right, rgba(79, 70, 229, 0.12), transparent 28%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--bg-primary) 92%, rgba(15, 23, 42, 0.08) 8%),
            color-mix(in srgb, var(--bg-secondary) 94%, rgba(15, 23, 42, 0.06) 6%)
        );
}

body.symbol-page .ml-prediction-section::before {
    height: 3px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--primary) 72%, #4338ca 28%),
        color-mix(in srgb, var(--secondary) 78%, #0f766e 22%),
        rgba(255, 255, 255, 0.6)
    );
}

body.symbol-page .chart-period-btn {
    background: color-mix(in srgb, var(--bg-secondary) 74%, rgba(255, 255, 255, 0.10) 26%);
    border-color: color-mix(in srgb, var(--border-color) 78%, rgba(255, 255, 255, 0.12) 22%);
}

body.symbol-page .chart-period-btn.active {
    color: #eff6ff;
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.16);
}

body.symbol-page .key-insights-section-modern {
    padding: 22px 24px 24px;
}

body.symbol-page .insights-modern-prominent {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(8, 145, 178, 0.08));
    border-color: rgba(79, 70, 229, 0.18);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
}

body.symbol-page .indicators-group-title-modern,
body.symbol-page .chart-header-modern h2,
body.symbol-page .insights-header-modern h2,
body.symbol-page .levels-header-modern h2,
body.symbol-page .targets-header-modern h2 {
    letter-spacing: -0.02em;
}

@media (min-width: 960px) {
    .symbol-page-hero-shell {
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
        align-items: stretch;
    }

    body.symbol-page .symbol-app-container {
        padding-top: 26px;
    }
}

@media (max-width: 959px) {
    .symbol-page-hero-title {
        max-width: none;
    }
}

@media (max-width: 767px) {
    body.symbol-page .symbol-app-container {
        padding: 16px 14px 88px;
    }

    .symbol-page-hero-shell {
        gap: 16px;
    }

    .symbol-page-hero-copy,
    .symbol-page-hero-panel-card {
        padding: 18px;
    }

    .symbol-page-hero-actions {
        flex-direction: column;
    }

    .symbol-page-hero-btn {
        width: 100%;
    }

    body.symbol-page .symbol-hero-card,
    body.symbol-page .stage-card-modern,
    body.symbol-page .key-insights-section-modern,
    body.symbol-page .chart-section-modern,
    body.symbol-page .indicators-section-modern,
    body.symbol-page .targets-section-modern,
    body.symbol-page .levels-section-modern,
    body.symbol-page .ml-prediction-section,
    body.symbol-page #symbol-your-positions-root {
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    }
}