/* ============================================
 * STOCK DETAIL ANALYSIS COMPONENTS
 * File: css/components/stock-detail.css
 * ============================================
 * Styles for stock detail 12-section analysis pages.
 * Uses --stk-* bridge to official variables.css
 * Reuses narrative pattern from index-analysis.css
 */

/* ==========================================
 * CSS VARIABLE BRIDGE
 * ========================================== */
:root {
    --stk-bg: var(--color-bg-primary);
    --stk-bg-card: var(--color-bg-secondary);
    --stk-bg-muted: var(--color-bg-tertiary);
    --stk-text: var(--color-text-primary);
    --stk-text-sub: var(--color-text-secondary);
    --stk-text-muted: var(--color-text-muted);
    --stk-border: var(--color-border);
    --stk-border-light: #f1f5f9;
    --stk-green: var(--color-positive);
    --stk-green-bg: var(--color-positive-bg);
    --stk-red: var(--color-negative);
    --stk-red-bg: var(--color-negative-bg);
    --stk-amber: var(--color-neutral);
    --stk-amber-bg: var(--color-neutral-bg);
    --stk-blue: var(--color-accent-primary);
    --stk-indigo: var(--color-accent-secondary);
}
[data-theme="dark"] {
    --stk-border-light: #334155;
}

/* ==========================================
 * NO DATA / ERROR
 * ========================================== */
.stk-no-data {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--stk-text-sub);
}
.stk-no-data-icon { font-size: 3rem; margin-bottom: 1rem; }
.stk-no-data h2 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--stk-text); }
.stk-no-data code { background: var(--stk-bg-muted); padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; }
.stk-error { color: var(--stk-red); padding: 2rem; text-align: center; }

/* ==========================================
 * SECTION CONTAINER
 * ========================================== */
.stk-section { margin-bottom: 1.5rem; }
.stk-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--stk-text);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--stk-border);
}

/* ==========================================
 * CONCLUSION BOX (same sentiment variants as index)
 * ========================================== */
.stk-conclusion-box {
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    border-left: 5px solid;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}
.stk-conclusion-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    border-radius: 10px;
    transition: opacity 0.3s;
}
.stk-conclusion-box:hover::before { opacity: 1; }

.stk-conclusion-box.bearish {
    background: linear-gradient(135deg, rgba(239,68,68,0.07) 0%, rgba(239,68,68,0.02) 100%);
    border-color: #ef4444;
}
.stk-conclusion-box.bearish::before { box-shadow: 0 0 20px rgba(239,68,68,0.08); }

.stk-conclusion-box.bullish {
    background: linear-gradient(135deg, rgba(34,197,94,0.07) 0%, rgba(34,197,94,0.02) 100%);
    border-color: #22c55e;
}
.stk-conclusion-box.bullish::before { box-shadow: 0 0 20px rgba(34,197,94,0.08); }

.stk-conclusion-box.neutral {
    background: linear-gradient(135deg, rgba(99,102,241,0.07) 0%, rgba(99,102,241,0.02) 100%);
    border-color: #6366f1;
}
.stk-conclusion-box.neutral::before { box-shadow: 0 0 20px rgba(99,102,241,0.08); }

.stk-conclusion-box.warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.07) 0%, rgba(245,158,11,0.02) 100%);
    border-color: #f59e0b;
}

.stk-conclusion-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.stk-conclusion-icon { font-size: 1.1rem; flex-shrink: 0; }
.stk-conclusion-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stk-conclusion-box.bearish .stk-conclusion-label { color: var(--stk-red); }
.stk-conclusion-box.bullish .stk-conclusion-label { color: var(--stk-green); }
.stk-conclusion-box.neutral .stk-conclusion-label { color: var(--stk-indigo); }
.stk-conclusion-box.warning .stk-conclusion-label { color: var(--stk-amber); }

.stk-conclusion-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--stk-text);
    font-weight: 500;
}

[data-theme="dark"] .stk-conclusion-box.bearish { background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.03) 100%); }
[data-theme="dark"] .stk-conclusion-box.bullish { background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(34,197,94,0.03) 100%); }
[data-theme="dark"] .stk-conclusion-box.neutral { background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.03) 100%); }
[data-theme="dark"] .stk-conclusion-box.warning { background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.03) 100%); }

/* ==========================================
 * EVIDENCE BLOCK
 * ========================================== */
.stk-evidence {
    background: var(--stk-bg-muted);
    border: 1px solid var(--stk-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.stk-evidence-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.75rem; font-weight: 600; font-size: 0.9rem; color: var(--stk-text-sub);
}
.stk-evidence-list { list-style: none; padding: 0; margin: 0; }
.stk-evidence-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--stk-border-light);
    font-size: 0.9rem; line-height: 1.6; color: var(--stk-text);
}
.stk-evidence-item:last-child { border-bottom: none; }
.stk-evidence-bullet {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--stk-text-muted); margin-right: 0.5rem; vertical-align: middle;
}

/* RS Correction — 2-column layout */
.stk-rs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
}
.stk-rs-two-col .stk-conclusion-box,
.stk-rs-two-col .stk-evidence { margin-bottom: 0; }
@media (max-width: 600px) {
    .stk-rs-two-col { grid-template-columns: 1fr; }
}

/* ==========================================
 * AI COMMENTARY BLOCK
 * ========================================== */
.stk-ai-block {
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(99,102,241,0.3);
    border-left: 4px solid #6366f1;
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.stk-ai-block-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem; font-weight: 600; font-size: 0.85rem; color: var(--stk-indigo);
}
.stk-ai-block-text { font-size: 0.93rem; line-height: 1.65; color: var(--stk-text); white-space: pre-line; }

[data-theme="dark"] .stk-ai-block {
    background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(56,189,248,0.05) 100%);
    border-color: rgba(99,102,241,0.3);
}

/* ==========================================
 * ACTION BOX
 * ========================================== */
.stk-action-box {
    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.02) 100%);
    border-left: 4px solid #3b82f6;
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.stk-action-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem; font-weight: 700; font-size: 0.85rem; color: var(--stk-blue);
}
.stk-action-text { font-size: 0.93rem; line-height: 1.6; color: var(--stk-text); font-weight: 500; }

[data-theme="dark"] .stk-action-box {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.02) 100%);
}

/* ==========================================
 * CONDITIONS BOX
 * ========================================== */
.stk-conditions-box {
    background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.stk-conditions-header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem; font-weight: 600; font-size: 0.85rem; color: var(--stk-amber);
}
.stk-conditions-text { font-size: 0.88rem; line-height: 1.55; color: var(--stk-text-sub); }

[data-theme="dark"] .stk-conditions-box { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.25); }

/* ==========================================
 * DATA HIGHLIGHT
 * ========================================== */
.stk-hl { font-weight: 700; }
.stk-hl-pos { color: #16a34a; font-weight: 700; }
.stk-hl-neg { color: #dc2626; font-weight: 700; }
.stk-hl-warn { color: #d97706; font-weight: 700; }
.stk-hl-info { color: #4f46e5; font-weight: 700; }
[data-theme="dark"] .stk-hl-pos { color: #4ade80; }
[data-theme="dark"] .stk-hl-neg { color: #f87171; }
[data-theme="dark"] .stk-hl-warn { color: #fbbf24; }
[data-theme="dark"] .stk-hl-info { color: #818cf8; }

/* ==========================================
 * CARDS & GRIDS
 * ========================================== */
.stk-card {
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem;
}
.stk-card-title {
    font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--stk-text-sub); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--stk-border);
}
.stk-card-green { border-left: 3px solid #22c55e; }
.stk-card-red { border-left: 3px solid #ef4444; }

.stk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.stk-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 768px) { .stk-grid-2, .stk-grid-3 { grid-template-columns: 1fr; } }

.stk-metric {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--stk-border-light);
}
.stk-metric:last-child { border-bottom: none; }
.stk-metric-label { color: var(--stk-text-sub); font-size: 0.875rem; }
.stk-metric-value { font-weight: 600; font-size: 0.9rem; color: var(--stk-text); }

/* ==========================================
 * TAGS & BADGES
 * ========================================== */
.stk-tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600;
}
.stk-tag-green { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-tag-red { background: var(--stk-red-bg); color: var(--stk-red); }
.stk-bullish { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-bearish { background: var(--stk-red-bg); color: var(--stk-red); }
.stk-neutral { background: var(--stk-bg-muted); color: var(--stk-text-sub); }

/* ==========================================
 * STOCK HEADER (Company info + price)
 * ========================================== */
.stk-hero {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 1rem;
}
.stk-hero-symbol { font-size: 1.5rem; font-weight: 800; color: var(--stk-text); }
.stk-hero-name { font-size: 0.9rem; color: var(--stk-text-sub); margin-top: 2px; }
.stk-hero-price { font-size: 2rem; font-weight: 700; margin: 4px 0; }
.stk-hero-change { font-size: 1.1rem; font-weight: 600; }
.stk-hero-right { text-align: right; }
.stk-hero-date { color: var(--stk-text-sub); font-size: 0.85rem; margin-bottom: 8px; }
.stk-hero-bias {
    display: inline-block; padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 0.9rem; margin-bottom: 4px;
}
.stk-hero-score { color: var(--stk-text-sub); font-size: 0.85rem; }

.stk-sector-badge {
    display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.8rem;
    font-weight: 600; background: rgba(99,102,241,0.1); color: var(--stk-indigo); margin-top: 4px;
}

/* ==========================================
 * AI HEADLINE
 * ========================================== */
.stk-ai-headline {
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 10px; padding: 0.6rem 1rem; margin-bottom: 0.5rem;
    font-size: 0.88rem; line-height: 1.45; color: var(--stk-text);
}
.stk-ai-icon { margin-right: 6px; }
[data-theme="dark"] .stk-ai-headline {
    background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(56,189,248,0.1) 100%);
    border-color: rgba(99,102,241,0.3);
}

/* ==========================================
 * QUICK STATS GRID
 * ========================================== */
.stk-quick-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin-bottom: 1rem;
}
@media (max-width: 768px) { .stk-quick-grid { grid-template-columns: repeat(3, 1fr); } }
.stk-quick-stat {
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 8px; padding: 0.75rem; text-align: center;
}
.stk-qs-label { font-size: 0.75rem; color: var(--stk-text-sub); text-transform: uppercase; }
.stk-qs-value { font-size: 1.1rem; font-weight: 700; color: var(--stk-text); margin: 4px 0; }
.stk-qs-sub { font-size: 0.75rem; color: var(--stk-text-muted); }

/* ==========================================
 * SIGNALS MINI GRID
 * ========================================== */
.stk-signals-mini { margin-bottom: 1rem; }
.stk-signals-mini h4 { font-size: 0.85rem; color: var(--stk-text-sub); margin-bottom: 0.5rem; }
.stk-signals-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.stk-signal-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 6px; font-size: 0.8rem;
}
.stk-sc-name { font-weight: 600; }
.stk-sc-signal { font-weight: 400; opacity: 0.85; }

/* ==========================================
 * ENTRY SIGNAL BADGE
 * ========================================== */
.stk-entry-signal {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px; border-radius: 8px; font-weight: 700; font-size: 1rem;
}
.stk-entry-signal-buy { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-entry-signal-strong-buy { background: #065f46; color: #d1fae5; }
.stk-entry-signal-wait { background: var(--stk-amber-bg); color: var(--stk-amber); }
.stk-entry-signal-hold { background: var(--stk-bg-muted); color: var(--stk-text-sub); }
.stk-entry-signal-avoid { background: var(--stk-red-bg); color: var(--stk-red); }

/* ==========================================
 * SEPA CHECKLIST
 * ========================================== */
.stk-sepa-checklist {
    list-style: none; padding: 0; margin: 0;
}
.stk-sepa-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--stk-border-light); font-size: 0.9rem;
}
.stk-sepa-item:last-child { border-bottom: none; }
.stk-sepa-check { font-size: 1rem; flex-shrink: 0; }
.stk-sepa-pass .stk-sepa-check { color: var(--stk-green); }
.stk-sepa-fail .stk-sepa-check { color: var(--stk-red); }
.stk-sepa-fail .stk-sepa-desc { color: var(--stk-text-muted); text-decoration: line-through; }

/* ==========================================
 * STAGE INDICATOR (4 dots)
 * ========================================== */
.stk-stage-indicator {
    display: inline-flex; gap: 6px; align-items: center; margin: 0 8px;
}
.stk-stage-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--stk-border); border: 2px solid var(--stk-border);
}
.stk-stage-dot.active { background: var(--stk-indigo); border-color: var(--stk-indigo); }
.stk-stage-dot.current { background: var(--stk-green); border-color: var(--stk-green); box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.stk-stage-label { font-size: 0.75rem; color: var(--stk-text-muted); }

/* ==========================================
 * ENTRY DIAGRAM (horizontal bar SL-Entry-TP)
 * ========================================== */
.stk-entry-diagram {
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem;
}
.stk-entry-bar {
    position: relative; height: 40px; background: var(--stk-bg-muted);
    border-radius: 6px; margin: 1rem 0; overflow: visible;
}
.stk-entry-marker {
    position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px;
}
.stk-entry-marker-sl { background: var(--stk-red); }
.stk-entry-marker-entry { background: var(--stk-blue); }
.stk-entry-marker-tp1 { background: var(--stk-green); }
.stk-entry-marker-tp2 { background: #059669; }
.stk-entry-label {
    position: absolute; top: -22px; font-size: 0.7rem; font-weight: 600;
    transform: translateX(-50%); white-space: nowrap;
}
.stk-entry-value {
    position: absolute; bottom: -22px; font-size: 0.75rem; font-weight: 700;
    transform: translateX(-50%); white-space: nowrap;
}
.stk-entry-rr {
    text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--stk-text);
    margin-top: 2rem;
}
.stk-entry-rr span { color: var(--stk-green); }

/* ==========================================
 * PEER COMPARISON TABLE
 * ========================================== */
.stk-peer-table {
    width: 100%; border-collapse: collapse; font-size: 0.875rem;
}
.stk-peer-table th {
    text-align: left; padding: 8px 12px;
    background: var(--stk-bg-muted); color: var(--stk-text-sub);
    font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
    border-bottom: 2px solid var(--stk-border);
}
.stk-peer-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--stk-border-light); color: var(--stk-text);
}
.stk-peer-table tr:last-child td { border-bottom: none; }

/* ==========================================
 * TRADING PLAN CARD
 * ========================================== */
.stk-trading-plan {
    border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem;
}
.stk-scenario-bull { background: #f0fdf4; border: 1px solid #bbf7d0; }
.stk-scenario-bear { background: #fef2f2; border: 1px solid #fecaca; }
.stk-scenario-header { font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.stk-scenario p { margin: 0 0 0.5rem 0; line-height: 1.6; color: var(--stk-text); }

[data-theme="dark"] .stk-scenario-bull { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); }
[data-theme="dark"] .stk-scenario-bear { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2); }

/* ==========================================
 * VSA PATTERNS
 * ========================================== */
.stk-vsa-patterns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.75rem 0; }
.stk-vsa-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
}
.stk-vsa-chip-bullish { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-vsa-chip-bearish { background: var(--stk-red-bg); color: var(--stk-red); }
.stk-vsa-chip-neutral { background: var(--stk-bg-muted); color: var(--stk-text-sub); }

/* ==========================================
 * MCDX ZONE INDICATOR
 * ========================================== */
.stk-mcdx-zone {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: 0.85rem;
}
.stk-mcdx-accumulation { background: rgba(34,197,94,0.1); color: #16a34a; }
.stk-mcdx-rising { background: rgba(59,130,246,0.1); color: #2563eb; }
.stk-mcdx-overbought { background: rgba(239,68,68,0.1); color: #dc2626; }
.stk-mcdx-bottom { background: rgba(245,158,11,0.1); color: #d97706; }
.stk-mcdx-collapse { background: rgba(239,68,68,0.15); color: #dc2626; }

/* ==========================================
 * RISK BADGE
 * ========================================== */
.stk-risk-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 6px 16px; border-radius: 8px; font-weight: 700; font-size: 1.1rem;
    margin-left: 0.75rem; vertical-align: middle;
}
.stk-risk-badge-low { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-risk-badge-mid { background: var(--stk-amber-bg); color: var(--stk-amber); }
.stk-risk-badge-high { background: var(--stk-red-bg); color: var(--stk-red); }

/* ==========================================
 * TECHNICAL SUMMARY
 * ========================================== */
.stk-summary-hero { text-align: center; margin-bottom: 1.5rem; }
.stk-summary-bias {
    display: inline-block; padding: 8px 24px; border-radius: 8px;
    font-size: 1.3rem; font-weight: 800; margin-bottom: 8px;
}
.stk-summary-counts { display: flex; justify-content: center; gap: 1rem; }
.stk-count { font-weight: 600; font-size: 0.9rem; padding: 4px 12px; border-radius: 6px; }
.stk-count-bull { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-count-bear { background: var(--stk-red-bg); color: var(--stk-red); }
.stk-count-neutral { background: var(--stk-bg-muted); color: var(--stk-text-sub); }

/* ==========================================
 * WARNING & ALERTS
 * ========================================== */
.stk-warning {
    background: var(--stk-amber-bg); border: 1px solid rgba(245,158,11,0.4);
    border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1rem;
    color: var(--stk-amber); font-size: 0.9rem;
}
.stk-alert { border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; font-size: 0.9rem; }
.stk-alert-green { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.stk-alert-red { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
[data-theme="dark"] .stk-alert-green { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); color: #4ade80; }
[data-theme="dark"] .stk-alert-red { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: #f87171; }

/* ==========================================
 * TIMEFRAME BADGES
 * ========================================== */
.stk-tf {
    display: inline-block; padding: 1px 8px; border-radius: 4px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em; margin-right: 0.4rem; vertical-align: middle;
}
.stk-tf-short { background: #dbeafe; color: #1e40af; }
.stk-tf-mid { background: #e0e7ff; color: #3730a3; }
.stk-tf-long { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .stk-tf-short { background: rgba(59,130,246,0.15); color: #60a5fa; }
[data-theme="dark"] .stk-tf-mid { background: rgba(99,102,241,0.15); color: #818cf8; }
[data-theme="dark"] .stk-tf-long { background: rgba(139,92,246,0.15); color: #a78bfa; }

/* ==========================================
 * SYMBOL TOOLBAR
 * ========================================== */
.stk-toolbar {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 10px; padding: 0.75rem 1.25rem; margin-bottom: 1.5rem;
}
.stk-toolbar-input {
    border: 1px solid var(--stk-border); border-radius: 6px; padding: 8px 12px;
    font-size: 0.95rem; font-weight: 600; text-transform: uppercase;
    width: 100px; color: var(--stk-text); background: var(--stk-bg);
}
.stk-toolbar-btn {
    background: var(--stk-indigo); color: white; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.stk-toolbar-btn:hover { opacity: 0.9; }
.stk-toolbar-label { font-size: 0.85rem; color: var(--stk-text-sub); }

/* Back navigation button */
.stk-btn-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--stk-border);
    background: var(--stk-bg-muted);
    color: var(--stk-text-sub);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-right: 0.25rem;
}
.stk-btn-nav-back:hover {
    background: var(--stk-indigo);
    color: #fff;
    border-color: var(--stk-indigo);
}

/* ==========================================
 * META FOOTER & UTILITIES
 * ========================================== */
.stk-meta {
    margin-top: 1.5rem; padding: 0.75rem 1rem; background: var(--stk-bg-muted);
    border-radius: 8px; font-size: 0.8rem; color: var(--stk-text-muted);
    text-align: center; font-style: italic;
}
.stk-divider { border: none; border-top: 1px solid var(--stk-border-light); margin: 8px 0; }
.stk-empty { color: var(--stk-text-muted); font-size: 0.85rem; padding: 8px 0; }

/* ==========================================
 * OVERVIEW — 2-COLUMN DASHBOARD
 * ========================================== */
.stk-ov-section { padding: 0 !important; }
.stk-ov-dashboard {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 12px; overflow: hidden; margin-bottom: 0.5rem;
}
@media (max-width: 800px) { .stk-ov-dashboard { grid-template-columns: 1fr; } }

/* Left column: identity + evaluations */
.stk-ov-left {
    padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem;
    border-right: 1px solid var(--stk-border);
}
@media (max-width: 800px) { .stk-ov-left { border-right: none; border-bottom: 1px solid var(--stk-border); } }

.stk-ov-sym-row {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.stk-ov-sym-row .stk-hero-symbol { font-size: 1.3rem; }
.stk-ov-sym-row .stk-hero-price { font-size: 1.5rem; margin: 0; }
.stk-ov-sym-row .stk-hero-change { font-size: 0.95rem; }
.stk-ov-name-row {
    font-size: 0.8rem; color: var(--stk-text-sub); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.stk-ov-name-row .stk-sector-badge { font-size: 0.7rem; padding: 2px 7px; margin: 0; }
.stk-ov-name-row .stk-hero-date { margin-left: auto; font-size: 0.75rem; color: var(--stk-text-muted); margin-bottom: 0; }

/* Evaluation badges row */
.stk-ov-eval-row {
    display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
}
.stk-ov-eval {
    display: flex; align-items: center; gap: 4px;
}
.stk-ov-eval-lbl {
    font-size: 0.65rem; color: var(--stk-text-muted); text-transform: uppercase;
    letter-spacing: 0.03em; font-weight: 600; white-space: nowrap;
}
.stk-ov-eval .stk-hero-bias { font-size: 0.8rem; padding: 2px 8px; margin: 0; }
.stk-ov-eval .stk-entry-signal { font-size: 0.75rem; padding: 2px 8px; }
.stk-ov-eval .stk-stage-indicator { font-size: 0.75rem; }
.stk-ov-risk { font-size: 0.85rem; font-weight: 700; color: var(--stk-text); }
.stk-ov-risk small { font-weight: 400; color: var(--stk-text-muted); }

/* Signal chips row */
.stk-ov-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.stk-ov-chip {
    font-size: 0.68rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
    white-space: nowrap; line-height: 1.3;
}

/* Right column: stats 2x4 grid */
.stk-ov-right { padding: 0.5rem 0.6rem; }
.stk-ov-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    height: 100%;
}
.stk-ov-st {
    display: flex; align-items: center; gap: 4px;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--stk-border-light);
}
.stk-ov-st:nth-last-child(-n+2) { border-bottom: none; }
.stk-ov-st:nth-child(odd) { border-right: 1px solid var(--stk-border-light); }
.stk-ov-st-l {
    font-size: 0.68rem; color: var(--stk-text-muted); text-transform: uppercase;
    font-weight: 600; min-width: 52px; white-space: nowrap;
}
.stk-ov-st-v { font-size: 0.88rem; font-weight: 700; color: var(--stk-text); white-space: nowrap; }
.stk-ov-st-s { font-size: 0.68rem; color: var(--stk-text-muted); margin-left: auto; white-space: nowrap; }

/* ==========================================
 * OVERVIEW — CHART (compact)
 * ========================================== */
.stk-chart-wrapper {
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 12px; overflow: hidden; margin-bottom: 0.5rem;
}
.stk-chart-header {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.4rem 1rem; font-weight: 600; font-size: 0.85rem;
    color: var(--stk-text-sub); border-bottom: 1px solid var(--stk-border);
}
.stk-chart-legend-inline { display: flex; gap: 0.6rem; margin-left: auto; }
.stk-chart-area { height: 320px; }
.stk-legend-item { display: inline-flex; align-items: center; gap: 3px; font-size: 0.7rem; color: var(--stk-text-muted); }
.stk-legend-dot { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

/* Action/warning below chart */
.stk-ov-action {
    font-size: 0.85rem; padding: 0.5rem 0.75rem; color: var(--stk-text);
    border-left: 3px solid var(--stk-indigo); margin-bottom: 0.35rem;
}
.stk-ov-warn { font-size: 0.82rem; padding: 0.4rem 0.75rem; margin-bottom: 0.35rem; }

/* ==========================================
 * KEY LEVELS — 2 COLUMN S/R
 * ========================================== */
.stk-levels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 640px) { .stk-levels-grid { grid-template-columns: 1fr; } }
.stk-levels-col {
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 10px; padding: 0.75rem 1rem;
}
.stk-levels-col-title {
    font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--stk-border-light);
}
.stk-level-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--stk-border-light);
}
.stk-level-item:last-child { border-bottom: none; }
.stk-level-icon { font-size: 0.85rem; flex-shrink: 0; }
.stk-level-info { flex: 1; display: flex; flex-direction: column; }
.stk-level-price { font-weight: 700; font-size: 0.95rem; color: var(--stk-text); }
.stk-level-name { font-size: 0.75rem; color: var(--stk-text-muted); }
.stk-level-dist { font-size: 0.8rem; font-weight: 600; color: var(--stk-text-sub); white-space: nowrap; }

/* Range bar */
.stk-range-bar-wrap { margin-bottom: 1rem; }
.stk-range-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--stk-text-muted); margin-bottom: 4px; }
.stk-range-bar { height: 8px; background: var(--stk-bg-muted); border-radius: 4px; overflow: hidden; }
.stk-range-fill { height: 100%; background: linear-gradient(90deg, var(--stk-red) 0%, var(--stk-amber) 50%, var(--stk-green) 100%); border-radius: 4px; transition: width 0.5s; }
.stk-range-pct { text-align: center; font-size: 0.8rem; color: var(--stk-text-sub); margin-top: 4px; }

/* ==========================================
 * SEPA — HERO LAYOUT
 * ========================================== */
.stk-sepa-hero {
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.stk-sepa-score-ring {
    width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--score-color) calc(var(--score-pct) * 3.6deg), var(--stk-bg-muted) 0);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
}
.stk-sepa-score-ring::before {
    content: ''; position: absolute; inset: 6px; border-radius: 50%;
    background: var(--stk-bg-card);
}
.stk-sepa-score-val {
    position: relative; z-index: 1; font-size: 1.4rem; font-weight: 800;
    color: var(--stk-text); line-height: 1;
}
.stk-sepa-score-lbl {
    position: relative; z-index: 1; font-size: 0.65rem; color: var(--stk-text-muted);
}
.stk-sepa-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; flex: 1; }
.stk-sepa-stat { display: flex; flex-direction: column; }
.stk-sepa-stat-lbl { font-size: 0.7rem; color: var(--stk-text-muted); text-transform: uppercase; }
.stk-sepa-stat-val { font-size: 0.9rem; font-weight: 600; color: var(--stk-text); }

/* SEPA criteria chips */
.stk-sepa-criteria { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1rem; }
.stk-sepa-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 6px; font-size: 0.8rem; font-weight: 500;
}
.stk-sepa-chip.stk-sepa-pass { background: var(--stk-green-bg); color: var(--stk-green); }
.stk-sepa-chip.stk-sepa-fail { background: var(--stk-red-bg); color: var(--stk-red); text-decoration: line-through; opacity: 0.7; }

/* ==========================================
 * TRADING PLAN — HEADLINE & SIGNAL ROW
 * ========================================== */
.stk-tp-headline {
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-left: 4px solid var(--stk-indigo);
    border-radius: 8px; padding: 0.85rem 1.25rem; margin-bottom: 0.75rem;
    font-size: 0.95rem; color: var(--stk-text); line-height: 1.5;
}
.stk-tp-headline-label {
    font-weight: 700; color: var(--stk-indigo); margin-right: 4px;
}
.stk-tp-signal-row {
    display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
    flex-wrap: wrap;
}
.stk-tp-signal-label { font-size: 0.85rem; font-weight: 600; color: var(--stk-text-sub); }

/* ==========================================
 * TRADING PLAN — SCENARIO CARDS
 * ========================================== */
.stk-scenario-card {
    border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden;
    border: 1px solid var(--stk-border);
}
.stk-scenario-card-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 700;
}
.stk-scenario-card-icon { font-size: 1.1rem; }
.stk-scenario-card-title { flex: 1; }
.stk-scenario-card-prob {
    font-size: 1rem; font-weight: 800; white-space: nowrap;
    padding: 2px 10px; border-radius: 12px; min-width: 48px; text-align: center;
}
.stk-scenario-card-body {
    padding: 0.65rem 1rem 0.75rem;
    font-size: 0.88rem; line-height: 1.55; color: var(--stk-text);
}

/* Main scenario — BULL */
.stk-scenario-main-bull .stk-scenario-card-header {
    background: var(--stk-green-bg); color: var(--stk-green);
}
.stk-scenario-main-bull .stk-scenario-card-prob {
    background: var(--stk-green); color: #fff;
}
.stk-scenario-main-bull .stk-scenario-card-body {
    border-left: 4px solid var(--stk-green);
}

/* Main scenario — BEAR */
.stk-scenario-main-bear .stk-scenario-card-header {
    background: var(--stk-red-bg); color: var(--stk-red);
}
.stk-scenario-main-bear .stk-scenario-card-prob {
    background: var(--stk-red); color: #fff;
}
.stk-scenario-main-bear .stk-scenario-card-body {
    border-left: 4px solid var(--stk-red);
}

/* Sub scenario — BULL (less prominent) */
.stk-scenario-sub-bull .stk-scenario-card-header {
    background: rgba(34, 197, 94, 0.05); color: var(--stk-text-sub);
}
.stk-scenario-sub-bull .stk-scenario-card-prob {
    background: var(--stk-bg-muted); color: var(--stk-green); font-size: 0.85rem;
}

/* Sub scenario — BEAR (less prominent) */
.stk-scenario-sub-bear .stk-scenario-card-header {
    background: rgba(239, 68, 68, 0.05); color: var(--stk-text-sub);
}
.stk-scenario-sub-bear .stk-scenario-card-prob {
    background: var(--stk-bg-muted); color: var(--stk-red); font-size: 0.85rem;
}

/* ==========================================
 * TRADING PLAN — ENTRY STRIP
 * ========================================== */
.stk-entry-strip {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
    border-radius: 10px; padding: 0.65rem 0.75rem; margin-bottom: 0.75rem;
    align-items: center; justify-content: center;
}
.stk-es-item {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; font-size: 0.85rem;
    background: var(--stk-bg-muted);
}
.stk-es-icon { font-size: 0.9rem; }
.stk-es-lbl { font-size: 0.7rem; color: var(--stk-text-muted); text-transform: uppercase; font-weight: 600; }
.stk-es-val { font-weight: 700; color: var(--stk-text); }
.stk-es-entry { background: rgba(59, 130, 246, 0.1); }
.stk-es-entry .stk-es-val { color: var(--stk-blue); }
.stk-es-sl { background: rgba(239, 68, 68, 0.1); }
.stk-es-sl .stk-es-val { color: var(--stk-red); }
.stk-es-tp1, .stk-es-tp2 { background: rgba(34, 197, 94, 0.1); }
.stk-es-tp1 .stk-es-val, .stk-es-tp2 .stk-es-val { color: var(--stk-green); }
.stk-es-rr { background: rgba(99, 102, 241, 0.1); }
.stk-es-rr .stk-es-val { color: var(--stk-indigo); font-weight: 800; }

/* Entry strip — Defense mode (bearish main scenario) */
.stk-entry-defense {
    border-left: 4px solid var(--stk-red);
    background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(239,68,68,0.02) 100%);
}
[data-theme="dark"] .stk-entry-defense {
    background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.03) 100%);
}

/* Entry strip — Observe mode (no clear buy signal) */
.stk-entry-observe {
    border-left: 4px solid var(--stk-amber);
    background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(245,158,11,0.02) 100%);
}
[data-theme="dark"] .stk-entry-observe {
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.03) 100%);
}

/* ==========================================
 * SECTOR COMPARISON — SELF HIGHLIGHT
 * ========================================== */
.stk-peer-self {
    background: rgba(99, 102, 241, 0.08) !important;
    font-weight: 600;
}
.stk-peer-self td { color: var(--stk-indigo) !important; }
[data-theme="dark"] .stk-peer-self { background: rgba(99, 102, 241, 0.12) !important; }
.stk-peer-sector-avg {
    background: rgba(245, 158, 11, 0.1);
    border-bottom: 2px solid rgba(245, 158, 11, 0.3);
    font-style: italic;
}
.stk-peer-sector-avg td { color: var(--stk-amber); font-weight: 600; }
[data-theme="dark"] .stk-peer-sector-avg { background: rgba(245, 158, 11, 0.08); }

/* ==========================================
 * LIVE ANALYSIS PROMPT (when no data)
 * ========================================== */
.stk-live-analysis-prompt {
    max-width: 600px;
    margin: 3rem auto;
    text-align: center;
    padding: 2rem;
}
.stk-live-analysis-prompt .stk-live-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    filter: grayscale(0.2);
}
.stk-live-analysis-prompt h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--stk-text);
    margin-bottom: 0.5rem;
}
.stk-live-analysis-prompt p {
    color: var(--stk-text-sub);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.stk-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.stk-live-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}
.stk-live-btn:active { transform: translateY(0); }
.stk-live-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.stk-live-error {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--stk-red-bg);
    color: var(--stk-red);
    border-radius: 8px;
    font-size: 0.85rem;
    display: none;
}
.stk-live-error.show { display: block; }

/* ==========================================
 * PROGRESS OVERLAY (during analysis)
 * ========================================== */
.stk-progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: stk-fade-in 0.2s ease;
}
@keyframes stk-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stk-progress-card {
    background: var(--stk-bg-card);
    border: 1px solid var(--stk-border);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    width: min(480px, 90vw);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}
.stk-progress-card .stk-progress-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--stk-text);
    margin-bottom: 1.5rem;
}
.stk-progress-card .stk-progress-symbol {
    color: var(--stk-indigo);
}

/* Progress bar */
.stk-progress-bar-container {
    width: 100%;
    height: 12px;
    background: var(--stk-bg-muted);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}
.stk-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    border-radius: 6px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.stk-progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    animation: stk-shimmer 2s infinite;
}
@keyframes stk-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.stk-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.stk-progress-pct {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--stk-indigo);
}
.stk-progress-step-label {
    font-size: 0.85rem;
    color: var(--stk-text-sub);
    font-weight: 500;
}

.stk-progress-timer {
    font-size: 0.8rem;
    color: var(--stk-text-muted);
    margin-bottom: 1.25rem;
}

.stk-progress-cancel {
    background: transparent;
    border: 1px solid var(--stk-border);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.85rem;
    color: var(--stk-text-sub);
    cursor: pointer;
    transition: background 0.15s;
}
.stk-progress-cancel:hover {
    background: var(--stk-bg-muted);
}

/* API offline message */
.stk-api-offline {
    max-width: 550px;
    margin: 2rem auto;
    text-align: center;
    padding: 2rem;
    background: var(--stk-red-bg);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
}
.stk-api-offline h3 {
    color: var(--stk-red);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.stk-api-offline p {
    color: var(--stk-text-sub);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.stk-api-offline code {
    display: inline-block;
    background: var(--stk-bg-muted);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--stk-text);
}

/* ==========================================
 * FRESHNESS BADGE
 * ========================================== */
.stk-fresh-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
.stk-fresh-ok {
    background: var(--stk-green-bg, rgba(34,197,94,0.1));
    color: var(--stk-green, #22c55e);
    border: 1px solid currentColor;
}
.stk-fresh-stale {
    background: var(--stk-amber-bg, rgba(245,158,11,0.1));
    color: var(--stk-amber, #f59e0b);
    border: 1px solid currentColor;
}

/* ==========================================
 * RE-ANALYZE BUTTON (gradient, prominent)
 * ========================================== */
.stk-btn-reanalyze {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 8px 16px;
    font-size: 0.85rem;
}
.stk-fresh-badge {
    margin-left: auto;
}

/* ==========================================
 * TOOLBAR META TIMESTAMP
 * ========================================== */
.stk-toolbar-meta {
    font-size: 0.7rem;
    color: var(--stk-text-muted);
    white-space: nowrap;
    margin-left: 0.5rem;
}

/* ==========================================
 * STALE DATA WARNING BANNER
 * ========================================== */
.stk-stale-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background: var(--stk-amber-bg, rgba(245,158,11,0.08));
    border: 1px solid var(--stk-amber, #f59e0b);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--stk-text);
    line-height: 1.5;
}
.stk-stale-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
[data-theme="dark"] .stk-stale-banner {
    background: rgba(245,158,11,0.1);
}

/* ==========================================
 * HISTORY SELECT DROPDOWN
 * ========================================== */
.stk-history-select {
    font-size: 0.85rem;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--stk-border);
    background: var(--stk-bg);
    color: var(--stk-text);
    cursor: pointer;
    min-width: 170px;
    font-weight: 500;
}
.stk-history-select:hover {
    border-color: var(--stk-indigo, #6366f1);
}
.stk-history-select:focus {
    outline: none;
    border-color: var(--stk-indigo);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

/* ==========================================
 * HISTORY VIEWING MODE
 * ========================================== */

/* History badge in toolbar */
.stk-fresh-history {
    background: rgba(99,102,241,0.1);
    color: var(--stk-indigo, #6366f1);
    border: 1px solid currentColor;
}

/* Back to current button */
.stk-btn-back-current {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    margin-left: auto;
    padding: 8px 16px;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(5,150,105,0.3);
}
.stk-btn-back-current:hover {
    box-shadow: 0 4px 14px rgba(5,150,105,0.4);
}

/* History banner (blue/indigo theme) */
.stk-history-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.05) 100%);
    border: 1px solid rgba(99,102,241,0.3);
    border-left: 4px solid var(--stk-indigo, #6366f1);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--stk-text);
    line-height: 1.5;
}
.stk-history-banner-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.stk-history-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.stk-history-banner-text strong {
    color: var(--stk-indigo, #6366f1);
}
.stk-history-banner-gen {
    font-size: 0.75rem;
    color: var(--stk-text-muted);
}
.stk-history-banner-hint {
    font-size: 0.75rem;
    color: var(--stk-text-muted);
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
}
[data-theme="dark"] .stk-history-banner {
    background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.06) 100%);
}

/* Dim re-analyze when viewing history */
.stk-history-banner + .stk-stale-banner {
    display: none;
}

/* ==========================================
 * SELL SIGNAL & BASE PATTERN CHIPS (Momentum Masters)
 * ========================================== */
.stk-sell-chip {
    display: inline-block; padding: 0.25rem 0.625rem; border-radius: 0.375rem;
    font-size: 0.78rem; font-weight: 500; margin: 0.25rem 0.25rem 0 0;
}
.stk-sell-chip--critical { background: var(--color-danger-bg, #fecaca); color: var(--color-danger, #dc2626); }
.stk-sell-chip--high { background: var(--color-warning-bg, #fed7aa); color: var(--color-warning, #ea580c); }
.stk-sell-chip--moderate { background: var(--color-info-bg, #fef9c3); color: var(--color-info-text, #ca8a04); }
.stk-sell-chip--low { background: var(--stk-bg-section); color: var(--stk-text-secondary); border: 1px solid var(--stk-border); }

.stk-base-chip {
    display: inline-block; padding: 0.25rem 0.625rem; border-radius: 0.375rem;
    font-size: 0.78rem; font-weight: 500; margin: 0.25rem 0.25rem 0 0;
}
.stk-base-chip--good { background: rgba(22, 163, 74, 0.08); color: var(--color-success, #16a34a); border: 1px solid rgba(22, 163, 74, 0.2); }
.stk-base-chip--ok { background: rgba(202, 138, 4, 0.08); color: var(--color-info-text, #ca8a04); border: 1px solid rgba(202, 138, 4, 0.2); }
.stk-base-chip--weak { background: var(--stk-bg-section); color: var(--stk-text-secondary); border: 1px solid var(--stk-border); }

[data-theme="dark"] .stk-sell-chip--critical { background: rgba(220, 38, 38, 0.15); }
[data-theme="dark"] .stk-sell-chip--high { background: rgba(234, 88, 12, 0.15); }
[data-theme="dark"] .stk-sell-chip--moderate { background: rgba(202, 138, 4, 0.15); }

/* ==========================================
 * AI SELF-LEARNING TAB — .stk-learn-* classes
 * ========================================== */
.stk-learn-section { margin-bottom: 1rem; }
.stk-learn-title {
    font-size: 0.8rem; font-weight: 700; margin-bottom: 0.5rem;
    color: var(--stk-text); display: flex; align-items: center; gap: 0.375rem;
}
.stk-learn-strip {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;
}
.stk-learn-card {
    flex: 1 1 100px; min-width: 80px; padding: 0.5rem; border-radius: 8px;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border); text-align: center;
}
.stk-learn-card-label { font-size: 0.6rem; opacity: 0.7; }
.stk-learn-card-value { font-size: 0.9rem; font-weight: 700; }
.stk-learn-card-value.positive { color: var(--stk-green); }
.stk-learn-card-value.negative { color: var(--stk-red); }
.stk-learn-card-value.warn { color: #f59e0b; }
.stk-learn-card-value.neutral { color: var(--stk-text-sub); }

/* Grade distribution bar */
.stk-grade-bar {
    display: flex; height: 22px; border-radius: 4px; overflow: hidden; margin: 0.375rem 0;
}
.stk-grade-bar span {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.55rem; font-weight: 600; color: #fff; min-width: 18px;
}
.stk-grade-a { background: var(--stk-green); }
.stk-grade-b { background: #3b82f6; }
.stk-grade-c { background: #6b7280; }
.stk-grade-d { background: #f59e0b; }
.stk-grade-f { background: var(--stk-red); }

/* Grade badges (inline) */
.stk-learn-grade-badge {
    display: inline-block; padding: 0.1rem 0.375rem; border-radius: 4px;
    font-size: 0.6rem; font-weight: 700; color: #fff;
}
.stk-learn-grade-a { background: var(--stk-green); }
.stk-learn-grade-b { background: #3b82f6; }
.stk-learn-grade-c { background: #6b7280; }
.stk-learn-grade-d { background: #f59e0b; color: #000; }
.stk-learn-grade-f { background: var(--stk-red); }
.stk-learn-grade-pending { background: var(--stk-border); color: var(--stk-text-sub); }

/* Timeline (rec evolution) */
.stk-learn-timeline { font-size: 0.7rem; }
.stk-learn-tl-header {
    display: grid; grid-template-columns: 80px 80px 60px 60px 40px; gap: 0.375rem;
    font-weight: 700; font-size: 0.6rem; opacity: 0.6;
    padding-bottom: 0.375rem; border-bottom: 2px solid var(--stk-border);
}
.stk-learn-tl-item {
    display: grid; grid-template-columns: 80px 80px 60px 60px 40px; gap: 0.375rem;
    padding: 0.3rem 0; border-bottom: 1px solid var(--stk-border); align-items: center;
}
.stk-learn-tl-item:last-child { border-bottom: none; }
.stk-learn-tl-date { font-size: 0.65rem; opacity: 0.7; }
.stk-learn-tl-rec { font-weight: 600; font-size: 0.65rem; }
.stk-learn-tl-rec.positive { color: var(--stk-green); }
.stk-learn-tl-rec.negative { color: var(--stk-red); }
.stk-learn-tl-rec.neutral { color: var(--stk-text-sub); }
.stk-learn-tl-price { font-size: 0.65rem; }
.stk-learn-tl-ret { font-size: 0.65rem; font-weight: 600; }
.stk-learn-tl-ret.positive { color: var(--stk-green); }
.stk-learn-tl-ret.negative { color: var(--stk-red); }

/* Section accuracy table */
.stk-learn-table {
    width: 100%; border-collapse: collapse; font-size: 0.7rem; margin-bottom: 0.5rem;
}
.stk-learn-table th {
    text-align: left; padding: 0.375rem 0.5rem; font-weight: 700;
    border-bottom: 2px solid var(--stk-border); font-size: 0.6rem; opacity: 0.7;
}
.stk-learn-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--stk-border); }
.stk-learn-table tr:last-child td { border-bottom: none; }
.stk-learn-table td.positive { color: var(--stk-green); font-weight: 600; }
.stk-learn-table td.negative { color: var(--stk-red); font-weight: 600; }
.stk-learn-table td.warn { color: #f59e0b; font-weight: 600; }

/* Recent recs cards */
.stk-learn-rec-card {
    padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.375rem;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border); font-size: 0.7rem;
}
.stk-learn-rec-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.stk-learn-rec-date { font-size: 0.6rem; opacity: 0.6; }
.stk-learn-rec-hl { font-size: 0.65rem; line-height: 1.4; opacity: 0.8; }
.stk-learn-rec-ret { font-size: 0.65rem; font-weight: 600; margin-top: 0.25rem; }
.stk-learn-rec-ret.positive { color: var(--stk-green); }
.stk-learn-rec-ret.negative { color: var(--stk-red); }

/* Consistency issues */
.stk-learn-issue {
    padding: 0.5rem 0.75rem; border-radius: 6px; margin-bottom: 0.375rem;
    border-left: 3px solid; font-size: 0.7rem; line-height: 1.4;
}
.stk-learn-issue.high {
    border-color: var(--stk-red);
    background: color-mix(in srgb, var(--stk-red) 8%, var(--stk-bg-card));
}
.stk-learn-issue.moderate {
    border-color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 8%, var(--stk-bg-card));
}
.stk-learn-issue.low {
    border-color: var(--stk-border);
    background: var(--stk-bg-card);
}
.stk-learn-issue-type {
    font-weight: 700; font-size: 0.65rem; text-transform: uppercase; margin-bottom: 0.125rem;
}

/* Empty state */
.stk-learn-empty {
    text-align: center; padding: 2rem 1rem; opacity: 0.5; font-size: 0.75rem;
}

/* Session comparison block */
.stk-learn-session-cmp {
    padding: 0.625rem 0.75rem; border-radius: 8px; margin: 0.5rem 0;
    background: color-mix(in srgb, var(--stk-blue) 6%, var(--stk-bg-card));
    border: 1px solid color-mix(in srgb, var(--stk-blue) 20%, var(--stk-border));
    font-size: 0.72rem; line-height: 1.5;
}
.stk-learn-cmp-icon { margin-right: 0.25rem; }

/* Overview rec history strip */
.stk-rec-hist-strip {
    display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
    padding: 0.375rem 0; font-size: 0.65rem;
}
.stk-rec-hist-label { opacity: 0.6; font-size: 0.6rem; white-space: nowrap; }
.stk-rec-hist-badge {
    display: inline-flex; align-items: center; gap: 0.125rem;
    padding: 0.15rem 0.375rem; border-radius: 4px; font-size: 0.6rem; font-weight: 600;
    background: var(--stk-bg-card); border: 1px solid var(--stk-border);
}
.stk-rec-hist-badge.stk-bullish { border-color: var(--stk-green); }
.stk-rec-hist-badge.stk-bearish { border-color: var(--stk-red); }
.stk-rec-hist-rec { font-size: 0.55rem; }
.stk-rec-hist-grade { font-size: 0.5rem; font-weight: 700; padding: 0 0.2rem; border-radius: 2px; }

/* Mobile responsive */
@media (max-width: 768px) {
    .stk-learn-tl-header, .stk-learn-tl-item {
        grid-template-columns: 65px 65px 50px 50px 35px; gap: 0.25rem; font-size: 0.6rem;
    }
    .stk-learn-table { display: block; overflow-x: auto; }
}

/* Scenario pair — side by side */
.stk-scenario-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    margin: 0.5rem 0;
}
@media (max-width: 640px) { .stk-scenario-pair { grid-template-columns: 1fr; } }

/* Adversarial reasoning — 2-sided debate block */
.stk-adversarial-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    margin: 0.5rem 0;
}
.stk-adversarial-bull, .stk-adversarial-bear {
    padding: 0.75rem 0.875rem; border-radius: 8px; font-size: 0.8rem; line-height: 1.6;
}
.stk-adversarial-bull {
    background: color-mix(in srgb, var(--stk-green) 6%, var(--stk-bg-card));
    border: 1px solid color-mix(in srgb, var(--stk-green) 25%, var(--stk-border));
}
.stk-adversarial-bear {
    background: color-mix(in srgb, var(--stk-red) 6%, var(--stk-bg-card));
    border: 1px solid color-mix(in srgb, var(--stk-red) 25%, var(--stk-border));
}
.stk-adversarial-header {
    font-weight: 700; font-size: 0.75rem; margin-bottom: 0.5rem;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.stk-adversarial-bull .stk-adversarial-header { color: var(--stk-green); }
.stk-adversarial-bear .stk-adversarial-header { color: var(--stk-red); }
.stk-adversarial-body { white-space: pre-line; }
@media (max-width: 600px) { .stk-adversarial-row { grid-template-columns: 1fr; } }

/* Holding advisory box */
.stk-holding-box {
    padding: 0.625rem 0.875rem; border-radius: 8px; margin: 0.375rem 0;
    background: color-mix(in srgb, var(--stk-blue) 6%, var(--stk-bg-card));
    border: 1px solid color-mix(in srgb, var(--stk-blue) 20%, var(--stk-border));
}
.stk-holding-header {
    font-weight: 700; font-size: 0.72rem; color: var(--stk-blue);
    margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.stk-holding-text { font-size: 0.8rem; line-height: 1.55; }

/* Risk badge in signal row */
.stk-risk-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.5rem; border-radius: 4px;
    font-size: 0.68rem; font-weight: 600;
}
.stk-risk-badge-high { background: rgba(239,68,68,0.12); color: var(--stk-red); border: 1px solid rgba(239,68,68,0.3); }
.stk-risk-badge-med  { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.stk-risk-badge-low  { background: rgba(34,197,94,0.12); color: var(--stk-green); border: 1px solid rgba(34,197,94,0.3); }

/* ==========================================
   VALUATION EMBED (Section 11)
   Hide back button & action when embedded in stock-detail
   ========================================== */
.stk-valuation-embed .mc-sv-l3-header button.mc-sv-back { display: none; }
.stk-valuation-embed .mc-sv-l3-actions { display: none; }


/* ==========================================
   VCP — Volatility Contraction Pattern
   ========================================== */
.stk-vcp-quality-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.15rem 0.5rem; border-radius: 4px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
    margin-left: 0.4rem; vertical-align: middle;
}
.stk-vcp-q-high   { background: rgba(234,179,8,0.15); color: #ca8a04; border: 1px solid rgba(234,179,8,0.3); }
.stk-vcp-q-medium { background: rgba(59,130,246,0.12); color: var(--stk-blue); border: 1px solid rgba(59,130,246,0.25); }
.stk-vcp-q-low    { background: rgba(148,163,184,0.12); color: var(--stk-text-sub); border: 1px solid rgba(148,163,184,0.25); }
.stk-vcp-q-none   { background: transparent; color: var(--stk-text-dim); border: 1px solid var(--stk-border); }
.stk-vcp-pb       { font-weight: 600; color: var(--stk-text-sub); }
.stk-vcp-pb-last  { color: var(--stk-green); }