/**
 * ============================================
 * QUANTITATIVE SUMMARY PAGE COMPONENTS
 * File: css/components/quantitative.css
 * ============================================
 * Styles for "Tổng hợp định lượng" page
 */

/* ==========================================
   QUANTITATIVE SCORE DASHBOARD
   ========================================== */
.quant-dashboard-block {
    margin-bottom: 1rem;
}

/* Compact Score Grid - horizontal layout */
.quant-score-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.quant-score-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.quant-score-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--border-color);
}

.quant-score-card.very-strong::before { background: var(--color-accent-secondary); }
.quant-score-card.positive::before { background: var(--color-positive); }
.quant-score-card.neutral::before { background: var(--color-warning); }
.quant-score-card.negative::before { background: var(--color-neutral); }
.quant-score-card.very-weak::before { background: var(--color-negative); }

.quant-score-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quant-score-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.quant-score-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.quant-score-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quant-score-desc {
    font-size: 0.6rem;
    color: var(--text-muted);
    display: none; /* Hide on compact mode */
}

.quant-score-value {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    flex-shrink: 0;
}

.quant-score-value .score-number {
    font-size: 1.1rem;
    font-weight: 700;
}

.quant-score-card.very-strong .score-number { color: var(--color-accent-secondary); }
.quant-score-card.positive .score-number { color: var(--color-positive); }
.quant-score-card.neutral .score-number { color: var(--color-warning); }
.quant-score-card.negative .score-number { color: var(--color-neutral); }
.quant-score-card.very-weak .score-number { color: var(--color-negative); }

.quant-score-value .score-max {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.quant-score-bar {
    display: none; /* Hide bar in compact mode */
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.quant-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.quant-score-card.very-strong .quant-score-fill { background: var(--color-accent-secondary); }
.quant-score-card.positive .quant-score-fill { background: var(--color-positive); }
.quant-score-card.neutral .quant-score-fill { background: var(--color-warning); }
.quant-score-card.negative .quant-score-fill { background: var(--color-neutral); }
.quant-score-card.very-weak .quant-score-fill { background: var(--color-negative); }

/* Composite Score Box - Compact */
.quant-composite-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--surface-tertiary) 0%, var(--surface-secondary) 100%);
    border: 2px solid var(--border-color);
    position: relative;
}

.quant-composite-box.very-strong {
    border-color: var(--color-accent-secondary);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, var(--surface-secondary) 100%);
}

.quant-composite-box.positive {
    border-color: var(--color-positive);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, var(--surface-secondary) 100%);
}

.quant-composite-box.neutral {
    border-color: var(--color-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, var(--surface-secondary) 100%);
}

.quant-composite-box.negative {
    border-color: var(--color-neutral);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, var(--surface-secondary) 100%);
}

.quant-composite-box.very-weak {
    border-color: var(--color-negative);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, var(--surface-secondary) 100%);
}

.composite-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.composite-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.composite-grade {
    font-size: 1.25rem;
    font-weight: 800;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: white;
}

.quant-composite-box.very-strong .composite-grade { background: var(--color-accent-secondary); }
.quant-composite-box.positive .composite-grade { background: var(--color-positive); }
.quant-composite-box.neutral .composite-grade { background: var(--color-warning); }
.quant-composite-box.negative .composite-grade { background: var(--color-neutral); }
.quant-composite-box.very-weak .composite-grade { background: var(--color-negative); }

.composite-score {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.composite-score .score-big {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.quant-composite-box.very-strong .score-big { color: var(--color-accent-secondary); }
.quant-composite-box.positive .score-big { color: var(--color-positive); }
.quant-composite-box.neutral .score-big { color: var(--color-warning); }
.quant-composite-box.negative .score-big { color: var(--color-neutral); }
.quant-composite-box.very-weak .score-big { color: var(--color-negative); }

.composite-score .score-suffix {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.composite-status {
    font-size: 0.85rem;
    font-weight: 600;
}

.composite-bar {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: visible;
    position: relative;
}

.composite-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.quant-composite-box.very-strong .composite-fill { background: linear-gradient(90deg, #10b981 0%, var(--color-accent-secondary) 100%); }
.quant-composite-box.positive .composite-fill { background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%); }
.quant-composite-box.neutral .composite-fill { background: linear-gradient(90deg, #ef4444 0%, #f59e0b 100%); }
.quant-composite-box.negative .composite-fill { background: linear-gradient(90deg, #dc2626 0%, var(--color-neutral) 100%); }
.quant-composite-box.very-weak .composite-fill { background: #ef4444; }

.composite-markers {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
}

.composite-markers .marker {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    transform: translateX(-50%);
}

/* ==========================================
   ENTRY ANALYSIS WITH TREND (84 stocks, backtest 2016-2025)
   Compact Version
   ========================================== */
.entry-analysis-block {
    margin-bottom: 1rem;
}

/* Method Notice - Inline compact */
.method-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-left: 2px solid var(--color-info);
    margin: 0.5rem 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.method-icon {
    font-size: 0.85rem;
}

.method-text {
    font-weight: 500;
}

/* Entry Headline Box - Compact */
.entry-headline-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    margin: 0 1rem 0.75rem 1rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-info);
}

.entry-headline-box .headline-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

/* Win Rate Badge - Compact */
.win-rate-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius);
}

.win-rate-icon {
    font-size: 0.85rem;
}

.win-rate-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent-secondary);
}

.sharpe-text {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-positive);
    padding-left: 0.35rem;
    border-left: 1px solid var(--border-color);
}

/* Entry Action - Compact */
.entry-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
    text-align: center;
}

.entry-action .action-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.entry-action .action-value {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Risk Note - Compact */
.risk-note {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.risk-icon {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.risk-text {
    font-size: 0.7rem;
    color: var(--color-warning);
    line-height: 1.3;
}

/* Evidence list colors */
.evidence-list li.positive {
    color: var(--color-positive);
}

.evidence-list li.warning {
    color: var(--color-warning);
}

/* Entry Grid - Compact */
.entry-analysis-grid-v2 {
    display: grid;
    grid-template-columns: 160px 1fr 220px;
    gap: 0.75rem;
}

/* Current Box - Compact */
.entry-current-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.entry-gauge {
    margin-bottom: 0.5rem;
}

.gauge-circle-large {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 6px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-primary);
    transition: border-color 0.3s ease;
}

.gauge-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.gauge-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.entry-exposure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.entry-exposure .exposure-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.entry-exposure .exposure-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-info);
}

.signal-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

/* Trend Box - Compact */
.entry-trend-box {
    padding: 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.entry-trend-box h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.trend-chart-mini {
    margin-bottom: 0.5rem;
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 35px;
    padding: 0.35rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    margin-bottom: 0.15rem;
}

.trend-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    transition: all 0.3s ease;
    min-height: 4px;
}

.trend-bar.positive { background: linear-gradient(180deg, #34d399 0%, #10b981 100%); }
.trend-bar.neutral { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); }
.trend-bar.negative { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); }

.trend-bar.current {
    box-shadow: 0 0 0 1px var(--surface-primary), 0 0 0 2px var(--color-info);
}

.trend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.trend-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.trend-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
}

.trend-stat .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.trend-stat .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.trend-direction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

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

.direction-text {
    font-size: 0.85rem;
    font-weight: 500;
}

.trend-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--color-info);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 0;
}

/* Quality Box */
.entry-quality-box {
    padding: 1.25rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.entry-quality-box h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.quality-score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quality-gauge {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-primary);
}

.quality-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.quality-max {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.quality-grade {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
}

.quality-evidence h5 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.evidence-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.evidence-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.evidence-list li.warning {
    color: var(--color-warning);
}

/* ==========================================
   SIGNAL SUMMARY GRID
   ========================================== */
.signal-summary-block {
    margin-bottom: 1.5rem;
}

.signal-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.signal-summary-card {
    padding: 1rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--border-color);
    transition: all 0.2s ease;
}

.signal-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.signal-summary-card.positive { border-top-color: var(--color-positive); }
.signal-summary-card.negative { border-top-color: var(--color-negative); }
.signal-summary-card.neutral { border-top-color: var(--color-warning); }
.signal-summary-card.warning {
    border-top-color: var(--color-neutral);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, var(--surface-secondary) 100%);
}

.signal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.signal-icon {
    font-size: 1.1rem;
}

.signal-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.signal-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.signal-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.signal-warning {
    font-size: 0.75rem;
    color: var(--color-neutral);
    background: rgba(249, 115, 22, 0.1);
    padding: 0.5rem;
    border-radius: calc(var(--radius) / 2);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.signal-evidence {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* ==========================================
   INVESTMENT STRATEGY
   ========================================== */
.strategy-block {
    margin-bottom: 1.5rem;
}

.highlight-block {
    border: 2px solid rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, var(--surface-primary) 100%);
}

.highlight-block .block-header {
    border-bottom-color: rgba(59, 130, 246, 0.2);
}

/* Exposure Section */
.strategy-exposure-section {
    padding: 1.25rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}

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

.exposure-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.exposure-value-big {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-info);
}

.exposure-bar-container {
    margin-bottom: 1rem;
}

/* Full range exposure bar with all zones visible */
.exposure-bar-full {
    height: 40px;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    position: relative;
    border: 2px solid var(--border-color);
    overflow: visible;
}

/* Zone backgrounds */
.exposure-zone-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exposure-zone-bg.zone-defensive {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.08) 100%);
    border-right: 1px dashed rgba(239, 68, 68, 0.3);
}

.exposure-zone-bg.zone-balanced {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-right: 1px dashed rgba(245, 158, 11, 0.3);
}

.exposure-zone-bg.zone-aggressive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.exposure-zone-bg .zone-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Recommended range highlight */
.exposure-recommended {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    z-index: 2;
}

.exposure-recommended .recommended-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    opacity: 0.9;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Min/Max markers */
.exposure-marker {
    position: absolute;
    top: -8px;
    transform: translateX(-50%);
    z-index: 3;
}

.exposure-marker .marker-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-info);
    background: var(--surface-primary);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid var(--color-info);
}

.exposure-marker::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: var(--color-info);
}

.exposure-marker.marker-max .marker-label {
    color: var(--color-accent-secondary);
    border-color: var(--color-accent-secondary);
}

.exposure-marker.marker-max::after {
    background: var(--color-accent-secondary);
}

/* Legacy exposure bar (keep for backward compatibility) */
.exposure-bar {
    height: 24px;
    background: var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.exposure-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-positive) 0%, var(--color-accent-primary) 50%, var(--color-accent-secondary) 100%);
    border-radius: var(--radius);
    transition: width 0.5s ease;
}

.exposure-zones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.exposure-zones .zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    border-right: 1px dashed var(--border-subtle);
}

.exposure-zones .zone:last-child {
    border-right: none;
}

.exposure-labels {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.25rem 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.exposure-labels span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.exposure-labels .label-defensive { color: var(--color-negative); }
.exposure-labels .label-balanced { color: var(--color-neutral); }
.exposure-labels .label-aggressive { color: var(--color-positive); }

.exposure-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.exposure-detail .detail-label {
    color: var(--text-muted);
}

.exposure-detail .detail-value {
    font-weight: 600;
    color: var(--text-primary);
}

.exposure-detail .detail-note {
    color: var(--text-secondary);
    font-style: italic;
}

/* Focus Grid */
.strategy-focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.focus-card {
    padding: 1rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.focus-card.primary {
    border-left: 4px solid var(--color-positive);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--surface-secondary) 100%);
}

.focus-card.secondary {
    border-left: 4px solid var(--color-info);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--surface-secondary) 100%);
}

.focus-card.avoid {
    border-left: 4px solid var(--color-negative);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--surface-secondary) 100%);
}

.focus-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

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

.focus-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.focus-what {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.focus-why,
.focus-criteria {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

.focus-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
}

/* Action Items */
.strategy-actions {
    padding: 1rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
}

.strategy-actions h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.action-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.action-item.buy {
    border-left: 3px solid var(--color-positive);
}

.action-item.focus {
    border-left: 3px solid var(--color-info);
}

.action-item.avoid {
    border-left: 3px solid var(--color-negative);
}

.action-item.caution {
    border-left: 3px solid var(--color-neutral);
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.08) 0%, var(--surface-primary) 100%);
}

.action-item.hold {
    border-left: 3px solid var(--color-warning);
}

.action-item.sell {
    border-left: 3px solid var(--color-negative);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, var(--surface-primary) 100%);
}

.action-item.buy_small {
    border-left: 3px solid #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, var(--surface-primary) 100%);
}

.action-item.wait {
    border-left: 3px solid var(--color-info);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0%, var(--surface-primary) 100%);
}

.action-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.action-text {
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ==========================================
   CONCLUSION BOX
   ========================================== */
.conclusion-block {
    margin-bottom: 1.5rem;
}

.conclusion-headline {
    padding: 1rem 1.25rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-info);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.headline-icon {
    font-size: 1.25rem;
}

.headline-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.conclusion-summary {
    padding: 1rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.conclusion-summary p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Key Points */
.conclusion-key-points {
    margin-bottom: 1rem;
}

.conclusion-key-points h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.key-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
}

.key-point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.key-point.positive {
    border-left: 3px solid var(--color-positive);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, var(--surface-secondary) 100%);
}

.key-point.negative {
    border-left: 3px solid var(--color-negative);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, var(--surface-secondary) 100%);
}

.key-point.neutral {
    border-left: 3px solid var(--color-warning);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, var(--surface-secondary) 100%);
}

.point-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.point-text {
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* Invalidation Box */
.conclusion-invalidation {
    padding: 1rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius);
}

.conclusion-invalidation h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-warning);
}

.invalidation-intro {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.invalidation-list {
    margin: 0 0 0.75rem 0;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.invalidation-list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

/* ==========================================
   CONCLUSION V2 - Enhanced with Detailed Recommendations
   ========================================== */
.conclusion-block-v2 {
    margin-bottom: 1.5rem;
}

/* Main Verdict Box */
.verdict-box {
    display: flex;
    padding: 1rem 1.25rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 2px solid var(--border-color);
    margin-bottom: 1rem;
}

.verdict-box.buy { border-color: var(--color-positive); background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, var(--surface-secondary) 100%); }
.verdict-box.reduce { border-color: var(--color-negative); background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--surface-secondary) 100%); }
.verdict-box.caution { border-color: var(--color-neutral); background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, var(--surface-secondary) 100%); }
.verdict-box.hold { border-color: var(--color-warning); background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--surface-secondary) 100%); }

.verdict-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.verdict-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.verdict-content {
    flex: 1;
}

.verdict-action {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.verdict-box.buy .verdict-action { color: var(--color-positive); }
.verdict-box.reduce .verdict-action { color: var(--color-negative); }
.verdict-box.caution .verdict-action { color: var(--color-neutral); }
.verdict-box.hold .verdict-action { color: var(--color-warning); }

.verdict-headline {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.verdict-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
}

.verdict-score .score-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.verdict-score .score-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Signals Strip */
.signals-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.signal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.7rem;
    border: 1px solid var(--border-subtle);
    background: var(--surface-secondary);
}

.signal-chip.positive { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); }
.signal-chip.negative { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); }
.signal-chip.warning { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.3); }
.signal-chip.neutral { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); }

.chip-icon { font-size: 0.8rem; }
.chip-text { color: var(--text-primary); font-weight: 500; }

/* Signal Conflict Analysis Box */
.signal-conflict-box {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(249, 115, 22, 0.05));
    border-color: rgba(245, 158, 11, 0.4);
}

.signal-conflict-box.bull_but_foreign_selling {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.05));
    border-color: rgba(249, 115, 22, 0.5);
}

.signal-conflict-box.mixed_signals {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(245, 158, 11, 0.05));
    border-color: rgba(59, 130, 246, 0.4);
}

.conflict-header {
    margin-bottom: 0.75rem;
}

.conflict-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.conflict-body {
    margin-bottom: 1rem;
}

.conflict-explanation {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.conflict-advice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-sm);
    border-left: 3px solid #10b981;
}

.advice-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.advice-text {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
}

/* Score Breakdown Grid */
.conflict-breakdown {
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.breakdown-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.score-breakdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
}

.breakdown-item.positive {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

.breakdown-item.negative {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

.breakdown-item.neutral {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
}

.breakdown-item .item-label {
    font-weight: 600;
    color: var(--text-muted);
}

.breakdown-item .item-value {
    font-weight: 700;
    color: var(--text-primary);
}

.breakdown-item.positive .item-value { color: #10b981; }
.breakdown-item.negative .item-value { color: #ef4444; }
.breakdown-item.neutral .item-value { color: #f59e0b; }

.breakdown-item .item-weight {
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Dark theme */
[data-theme="dark"] .signal-conflict-box {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(249, 115, 22, 0.08));
}

[data-theme="dark"] .signal-conflict-box.bull_but_foreign_selling {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.08));
}

[data-theme="dark"] .signal-conflict-box.mixed_signals {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(245, 158, 11, 0.08));
}

[data-theme="dark"] .conflict-advice {
    background: rgba(16, 185, 129, 0.15);
}

/* Responsive */
@media (max-width: 600px) {
    .score-breakdown-grid {
        gap: 0.35rem;
    }

    .breakdown-item {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* Recommendations Section */
.recommendations-section {
    margin-bottom: 1rem;
}

.recommendations-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

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

.recommendation-item {
    padding: 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.rec-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

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

.rec-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rec-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.rec-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Action Checklist */
.action-checklist {
    margin-bottom: 1rem;
}

.action-checklist h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    padding: 0.5rem 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--border-color);
}

.checklist li.buy { border-left-color: var(--color-positive); }
.checklist li.focus { border-left-color: var(--color-info); }
.checklist li.caution { border-left-color: var(--color-neutral); }
.checklist li.avoid { border-left-color: var(--color-negative); }
.checklist li.hold { border-left-color: var(--color-warning); }

/* Risk Management */
.risk-management {
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius);
}

.risk-management h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-negative);
}

.risk-intro {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.risk-management .invalidation-list {
    margin: 0;
    padding-left: 1rem;
}

.risk-management .invalidation-list li {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1200px) {
    .quant-score-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .entry-analysis-grid-v2 {
        grid-template-columns: 1fr 1fr;
    }

    .entry-quality-box {
        grid-column: span 2;
    }

    .signal-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .entry-analysis-grid-v2 {
        grid-template-columns: 1fr;
    }

    .entry-quality-box {
        grid-column: span 1;
    }

    .strategy-focus-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .quant-score-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .signal-summary-grid {
        grid-template-columns: 1fr;
    }

    .key-points-grid {
        grid-template-columns: 1fr;
    }

    .exposure-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ==========================================
   AI UNIFIED MODE STYLES (Phase 2-3)
   ========================================== */

/* AI Badge indicator for blocks */
.ai-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-accent-secondary);
    letter-spacing: 0.3px;
}

/* AI-generated block indicator */
.block.ai-generated {
    position: relative;
}

.block.ai-generated::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, transparent 50%, rgba(139, 92, 246, 0.1) 50%);
    border-radius: 0 var(--border-radius-md) 0 0;
}

/* Header badges container */
.block-header .header-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Stance badge in header */
.stance-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* AI Conclusion Block */
.conclusion-block.ai-generated .conclusion-sentiment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.sentiment-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.sentiment-indicator .sentiment-icon {
    font-size: 1.25rem;
}

.sentiment-indicator .sentiment-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.composite-score-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.composite-score-mini .score-label {
    font-size: 0.6rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.composite-score-mini .score-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text-primary);
}

.composite-score-mini .score-value.positive {
    color: var(--color-positive);
}

.composite-score-mini .score-value.negative {
    color: var(--color-negative);
}

/* Key Points Grid */
.conclusion-key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Action Box */
.conclusion-action-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--color-accent-primary);
}

.conclusion-action-box .action-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.conclusion-action-box .action-text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* AI Strategy Block enhancements */
.strategy-block.ai-generated .block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* AI Invalidation Block */
.invalidation-block.ai-generated .invalidation-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.invalidation-block.ai-generated .invalidation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.invalidation-block.ai-generated .invalidation-item:last-child {
    border-bottom: none;
}

.invalidation-block.ai-generated .invalidation-icon {
    flex-shrink: 0;
}

.invalidation-block.ai-generated .invalidation-exposure {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.invalidation-block.ai-generated .exposure-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.invalidation-block.ai-generated .exposure-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-negative);
}

/* Responsive adjustments for AI blocks */
@media (max-width: 768px) {
    .conclusion-sentiment-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sentiment-indicator {
        justify-content: center;
    }

    .composite-score-mini {
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* ==========================================
   NEW LAYOUT V2: Unified Conclusion + Compact Components
   ========================================== */

/* --- Strategy Position Alerts Strip --- */
.strategy-position-alerts {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--border-radius-md);
    border-left: 3px solid var(--color-negative);
}
.spa-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-negative);
    margin-bottom: var(--space-xs);
}
.spa-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.spa-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
}
.spa-urgency-5 { background: rgba(239, 68, 68, 0.08); }
.spa-urgency-4 { background: rgba(245, 158, 11, 0.08); }
.spa-urgency-3 { background: rgba(16, 185, 129, 0.08); }
.spa-symbol {
    font-weight: 700;
    min-width: 50px;
    color: var(--color-text-primary);
}
.spa-action {
    font-weight: 600;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-negative);
    color: white;
    white-space: nowrap;
}
.spa-urgency-3 .spa-action {
    background: var(--color-positive);
}
.spa-urgency-4 .spa-action {
    background: #f59e0b;
}
.spa-pnl {
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}
.spa-pnl.positive { color: var(--color-positive); }
.spa-pnl.negative { color: var(--color-negative); }
.spa-reason {
    color: var(--color-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .strategy-position-alerts {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ==========================================
   STRATEGY TỔNG HỢP — Compact Layout (stg-*)
   Inspired by Macro Tab 0 (mc-signal-banner)
   ========================================== */

/* --- Signal Banner: stance + action + mode in 1 element --- */
.stg-signal-banner {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    margin-bottom: var(--space-sm);
}
.stg-signal-main {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.stg-signal-icon { font-size: 1.5rem; flex-shrink: 0; }
.stg-signal-info { min-width: 85px; }
.stg-signal-label {
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.stg-signal-value {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}
.stg-signal-action {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.4;
    min-width: 180px;
}
.stg-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 3px var(--space-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid;
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    background: transparent;
}
.stg-mode-icon { font-size: 0.9rem; }
.stg-mode-label { text-transform: uppercase; letter-spacing: 0.03em; }
.stg-signal-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.stg-meta-phase { font-weight: 600; color: var(--color-accent-secondary); }
.stg-meta-sep { opacity: 0.3; }

/* Stance color variants */
.stg-signal-positive {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--color-bg-secondary) 100%);
}
.stg-signal-positive .stg-signal-value { color: var(--color-positive); }
.stg-signal-cautious {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, var(--color-bg-secondary) 100%);
}
.stg-signal-cautious .stg-signal-value { color: #f59e0b; }
.stg-signal-defensive {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--color-bg-secondary) 100%);
}
.stg-signal-defensive .stg-signal-value { color: var(--color-negative); }
.stg-signal-opportunity {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--color-bg-secondary) 100%);
}
.stg-signal-opportunity .stg-signal-value { color: #3b82f6; }
.stg-signal-neutral { border-color: var(--color-border); }
.stg-signal-neutral .stg-signal-value { color: var(--color-text-secondary); }

/* --- Section 1: Structured Strategy Display (.stg-str-*) --- */
.stg-str-context-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.stg-str-mini {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 10px;
    text-align: center;
    border-top: 2px solid var(--color-border);
}
.stg-str-mini--positive { border-top-color: var(--color-positive); }
.stg-str-mini--negative { border-top-color: var(--color-negative); }
.stg-str-mini--warning { border-top-color: #f59e0b; }
.stg-str-mini-label { font-size: 0.65rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.stg-str-mini-value { font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin-top: 2px; }

.stg-str-flow-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.stg-str-flow-item {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    padding: 3px 8px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    border-left: 2px solid var(--color-border);
}
.stg-str-flow--positive { border-left-color: var(--color-positive); }
.stg-str-flow--negative { border-left-color: var(--color-negative); }
.stg-str-flow--warning { border-left-color: #f59e0b; }

.stg-str-summary {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    font-style: italic;
    padding: 6px 10px;
    border-left: 2px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: 0 4px 4px 0;
}

.stg-str-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.stg-str-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.stg-str-pill--exposure { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); }
.stg-str-pill--position { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.3); }

/* KPI row: Hành động / Tỷ trọng cổ phiếu / Tỷ trọng danh mục */
.stg-kv-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: var(--space-sm);
}
.stg-kv-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 18px;
}
.stg-kv-item:first-child { padding-left: 4px; }
.stg-kv-sep {
    width: 1px;
    height: 44px;
    background: var(--color-border);
    flex-shrink: 0;
}
.stg-kv-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}
.stg-kv-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
}
@media (max-width: 600px) {
    .stg-kv-sep { display: none; }
    .stg-kv-item { padding: 4px 0 4px 4px; }
}

.stg-str-sectors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.stg-str-sector-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.stg-str-sector-label {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-right: 2px;
}
.stg-str-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}
.stg-str-tag--green { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.stg-str-tag--red { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }

.stg-str-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stg-str-action {
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--color-bg-secondary);
    color: var(--color-text);
    line-height: 1.4;
}
.stg-str-action--buy { border-left: 3px solid var(--color-positive); }
.stg-str-action--hold { border-left: 3px solid #f59e0b; }
.stg-str-action--sell, .stg-str-action--cut { border-left: 3px solid var(--color-negative); }

@media (max-width: 768px) {
    .stg-str-context-row { grid-template-columns: 1fr; }
    .stg-str-pills { flex-direction: column; }
    .stg-str-sectors { flex-direction: column; }
}

/* --- KPI Cards Row (5 cards) --- */
/* ── Rate Cycle Context Strip (Strategy Section 0) ─── */
.stg-rc-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--space-sm);
    font-size: 11px;
    flex-wrap: wrap;
    cursor: default;
}
.stg-rc-icon { font-size: 0.85rem; }
.stg-rc-label { color: var(--color-text-secondary); font-weight: 600; }
.stg-rc-badge {
    padding: 2px 8px; border-radius: 4px;
    font-weight: 700; font-size: 10.5px; letter-spacing: 0.02em;
}
.stg-rc-badge--cut  { background: rgba(34,197,94,0.15);  color: #22c55e; }
.stg-rc-badge--hike { background: rgba(239,68,68,0.15);  color: #ef4444; }
.stg-rc-badge--flat { background: rgba(148,163,184,0.12); color: var(--color-text-secondary); }
.stg-rc-stat  { color: var(--color-text-primary); }
.stg-rc-warn  { color: #f59e0b; font-weight: 600; }
.stg-rc-sep   { color: var(--color-border); }
.stg-rc-prob  { color: var(--color-text-secondary); }
.stg-rc-prob b { color: var(--color-text-primary); }
.stg-rc-hint  {
    margin-left: auto; font-size: 10px;
    color: var(--color-text-muted, var(--color-text-secondary));
    opacity: 0.6;
}

.stg-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}
.stg-kpi-card {
    padding: var(--space-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    text-align: center;
}
.stg-kpi-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-bottom: 2px;
}
.stg-kpi-icon { font-size: 0.8rem; }
.stg-kpi-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.stg-kpi-value {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
}
.stg-kpi-grade {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}
/* KPI color variants */
.stg-kpi-positive { border-left-color: var(--color-positive); }
.stg-kpi-positive .stg-kpi-value { color: var(--color-positive); }
.stg-kpi-negative { border-left-color: var(--color-negative); }
.stg-kpi-negative .stg-kpi-value { color: var(--color-negative); }
.stg-kpi-warning { border-left-color: #f59e0b; }
.stg-kpi-warning .stg-kpi-value { color: #f59e0b; }
.stg-kpi-accent { border-left-color: var(--color-accent-secondary); }
.stg-kpi-accent .stg-kpi-value { color: var(--color-accent-secondary); }

/* --- Body Grid: detail cards (left) + chart (right) --- */
.stg-body-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-md);
}
.stg-body-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.stg-detail-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
}
.stg-detail-icon { font-size: 1rem; flex-shrink: 0; }
.stg-detail-body { flex: 1; min-width: 0; }
.stg-detail-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.stg-detail-value {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stg-detail-positive { border-left-color: var(--color-positive); }
.stg-detail-positive .stg-detail-value { color: var(--color-positive); }
.stg-detail-negative { border-left-color: var(--color-negative); }
.stg-detail-negative .stg-detail-value { color: var(--color-negative); }
.stg-detail-warning { border-left-color: #f59e0b; }
.stg-detail-warning .stg-detail-value { color: #f59e0b; }
.stg-detail-neutral { border-left-color: var(--color-text-secondary); }

.stg-chart-full {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stg-body-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stg-chart-header {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 4px;
}
/* Dual chart grid: VNINDEX (left 3fr) + Breadth (right 2fr) */
.stg-dual-chart-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 10px;
    width: 100%;
}
.stg-chart-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stg-chart-container {
    flex: 1;
    min-height: 280px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.stg-chart-candle  { min-height: 300px; }
.stg-chart-breadth { min-height: 300px; }
@media (max-width: 900px) {
    .stg-dual-chart-grid { grid-template-columns: 1fr; }
}
.stg-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    padding-top: 4px;
    border-top: 1px dashed var(--color-border);
    margin-top: 4px;
}
/* Reuse existing .legend-item, .legend-dot, .legend-line-ref from quantitative.css */

/* --- Dark mode (tokens handle most, just ensure bg) --- */
[data-theme="dark"] .stg-signal-banner,
[data-theme="dark"] .stg-kpi-card,
[data-theme="dark"] .stg-detail-card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .stg-kpi-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .stg-signal-main { flex-direction: column; align-items: flex-start; }
    .stg-signal-action { min-width: unset; }
    .stg-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .stg-body-grid { grid-template-columns: 1fr; }
    .stg-body-left { flex-direction: row; flex-wrap: wrap; gap: var(--space-xs); }
    .stg-detail-card { flex: 1 1 calc(50% - 4px); min-width: 130px; }
    .stg-chart-container { min-height: 180px; }
}

/* --- Section 4: AI Learning Trend Chart + Stance Table --- */
.stg-ai-trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 8px 0;
}
.stg-ai-trend-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
    cursor: default;
}
.stg-ai-trend-wr {
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
}
.stg-ai-trend-bar {
    width: 100%;
    max-width: 28px;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: opacity 0.2s;
}
.stg-ai-trend-bar-wrap:hover .stg-ai-trend-bar { opacity: 0.75; }
.stg-ai-trend-count {
    font-size: 9px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.stg-ai-trend-date {
    font-size: 8px;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-top: 1px;
}

.stg-ai-stance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.stg-ai-stance-table th {
    text-align: left;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border);
}
.stg-ai-stance-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

@media (max-width: 768px) {
    .stg-ai-trend-chart { height: 90px; }
    .stg-ai-trend-wr { font-size: 8px; }
    .stg-ai-trend-date { display: none; }
}

/* --- Legacy (kept for other consumers) --- */
.unified-conclusion-v2 {
    margin-bottom: 1rem;
}

.unified-conclusion-v2 .header-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phase-badge {
    padding: 0.25rem 0.6rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
    color: var(--color-accent-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius);
    text-transform: uppercase;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ROW 1: Indicator Stats Row - Single line with cards */
.indicator-stats-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.indicator-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-color);
    transition: all 0.2s ease;
}

.indicator-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.indicator-card.positive { border-left-color: var(--color-positive); }
.indicator-card.negative { border-left-color: var(--color-negative); }
.indicator-card.warning { border-left-color: var(--color-warning); }
.indicator-card.neutral { border-left-color: #6b7280; }

.indicator-card .ind-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.indicator-card .ind-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.indicator-card .ind-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.indicator-card .ind-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.indicator-card .ind-value.positive { color: var(--color-positive); }
.indicator-card .ind-value.negative { color: var(--color-negative); }

.indicator-card .ind-grade {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.3rem;
    background: var(--surface-tertiary);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* ROW 2: Main Conclusion Box - PROMINENT */
.main-conclusion-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 2px solid;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.conclusion-stance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    min-width: 80px;
}

.conclusion-stance .stance-icon {
    font-size: 1.5rem;
}

.conclusion-stance .stance-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conclusion-content {
    flex: 1;
}

.conclusion-content .conclusion-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.conclusion-content .conclusion-text strong {
    color: inherit;
    font-weight: 700;
}

/* Sub-Section Blocks - Independent blocks that fit content */
.sub-section-block {
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-subtle);
}

.sub-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.sub-section-icon {
    font-size: 1.1rem;
}

.sub-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sub-section-body {
    padding: 0.75rem 1rem;
}

.sub-section-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.sub-section-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Assessment Block - Blue accent */
.sub-section-block.assessment-block {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    border-left: 4px solid #3b82f6;
}

.sub-section-block.assessment-block .sub-section-header {
    background: rgba(59, 130, 246, 0.05);
    border-bottom-color: rgba(59, 130, 246, 0.15);
}

.sub-section-block.assessment-block .sub-section-icon {
    color: #3b82f6;
}

/* Risk Block - Orange/Yellow accent */
.sub-section-block.risk-block {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
    border-color: rgba(245, 158, 11, 0.3);
    border-left: 4px solid #f59e0b;
}

.sub-section-block.risk-block .sub-section-header {
    background: rgba(245, 158, 11, 0.05);
    border-bottom-color: rgba(245, 158, 11, 0.15);
}

.sub-section-block.risk-block .sub-section-icon {
    color: #f59e0b;
}

/* Invalidation Block V2 - Red accent */
.sub-section-block.invalidation-block-v2 {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
}

.sub-section-block.invalidation-block-v2 .sub-section-header {
    background: rgba(239, 68, 68, 0.05);
    border-bottom-color: rgba(239, 68, 68, 0.15);
}

.sub-section-block.invalidation-block-v2 .sub-section-icon {
    color: #ef4444;
}

/* ==========================================
   MARKET STATS BLOCK - With Gauges
   ========================================== */
.sub-section-block.market-stats-block {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(139, 92, 246, 0.03) 100%);
    border-color: rgba(59, 130, 246, 0.25);
    border-left: 4px solid #3b82f6;
}

.sub-section-block.market-stats-block .sub-section-header {
    background: rgba(59, 130, 246, 0.05);
    border-bottom-color: rgba(59, 130, 246, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sub-section-block.market-stats-block .sub-section-icon {
    color: #3b82f6;
}

.method-note {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--surface-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Market Gauges Row */
.market-gauges-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--border-subtle);
}

.market-gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
}

.market-gauge-item .gauge-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-align: center;
}

.mini-gauge-svg {
    width: 80px;
    height: 50px;
}

.market-gauge-item .gauge-score {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: -0.25rem;
}

.market-gauge-item .gauge-sublabel {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--surface-secondary);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-top: 0.15rem;
}

/* Market Indicators Row */
.market-indicators-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.market-ind-card {
    flex: 1;
    min-width: 110px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-color);
}

.market-ind-card.positive {
    border-left-color: var(--color-positive);
}

.market-ind-card.negative {
    border-left-color: var(--color-negative);
}

.market-ind-card.warning,
.market-ind-card.neutral {
    border-left-color: var(--color-warning);
}

.market-ind-card.exposure-card {
    border-left-color: var(--color-accent-secondary);
}

.mind-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.mind-content {
    flex: 1;
    min-width: 0;
}

.mind-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.mind-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-ind-card.positive .mind-value {
    color: var(--color-positive);
}

.market-ind-card.negative .mind-value {
    color: var(--color-negative);
}

/* Market Stats 2-Column Grid */
.market-stats-grid {
    display: grid;
    grid-template-columns: 35% 1fr;
    gap: 1rem;
    min-height: 300px;
}

.market-stats-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.market-stats-left .market-gauges-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}

.market-indicators-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.market-indicators-col .market-ind-card {
    min-width: unset;
    flex: unset;
}

/* 5 cards: 3+2, last 2 span center */
.market-indicators-col .market-ind-card:nth-child(4) {
    grid-column: 1 / 2;
}
.market-indicators-col .market-ind-card:nth-child(5) {
    grid-column: 2 / 3;
}

.market-stats-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.comparison-chart-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 0.35rem;
}

.comparison-chart-container {
    flex: 1;
    min-height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
}

.comparison-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border-subtle);
    margin-top: 0.35rem;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

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

.legend-dot-area {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.legend-dot-dashed {
    border: 1.5px dashed;
    background: transparent !important;
    border-color: #f59e0b;
}

.legend-line-ref {
    width: 14px;
    height: 0;
    border-top: 1.5px dashed;
    flex-shrink: 0;
}

.legend-line-green {
    border-color: rgba(16, 185, 129, 0.6);
}

.legend-line-red {
    border-color: rgba(239, 68, 68, 0.6);
}

/* Chart floating tooltip */
.comparison-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    background: var(--surface-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.68rem;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
    transition: opacity 0.1s;
}

.comparison-tooltip .tt-date {
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.2rem;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.comparison-tooltip .tt-zone {
    font-size: 0.63rem;
    font-weight: 600;
    margin-left: auto;
}

.comparison-tooltip .tt-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.comparison-tooltip .tt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comparison-tooltip .tt-label {
    color: var(--text-muted);
    min-width: 72px;
}

.comparison-tooltip .tt-val {
    font-weight: 700;
    color: var(--text-primary);
    margin-left: auto;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .market-stats-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .market-indicators-col {
        grid-template-columns: repeat(3, 1fr);
    }

    .comparison-chart-container {
        min-height: 220px;
    }
}

/* ==========================================
   ENTRY ANALYSIS BLOCK - New Clean Layout
   ========================================== */
.sub-section-block.entry-block {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(59, 130, 246, 0.03) 100%);
    border-color: rgba(139, 92, 246, 0.25);
    border-left: 4px solid var(--color-accent-secondary);
}

.sub-section-block.entry-block .sub-section-header {
    background: rgba(139, 92, 246, 0.05);
    border-bottom-color: rgba(139, 92, 246, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sub-section-block.entry-block .sub-section-icon {
    color: var(--color-accent-secondary);
}

.entry-signal-badge {
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: auto;
}

/* Entry Stats Grid */
.entry-stats-grid {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.entry-stat-card {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    text-align: center;
}

.entry-stat-card.main {
    border-width: 2px;
    min-width: 100px;
}

.entry-stat-card .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.entry-stat-card .stat-value.positive {
    color: var(--color-positive);
}

.entry-stat-card .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.entry-stat-card.trend {
    min-width: 120px;
}

.trend-mini-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 20px;
    margin-bottom: 0.25rem;
}

.mini-bar {
    width: 10px;
    height: 12px;
    border-radius: 2px;
    background: var(--border-color);
}

.mini-bar.positive { background: var(--color-positive); height: 18px; }
.mini-bar.neutral { background: var(--color-warning); height: 14px; }
.mini-bar.negative { background: var(--color-negative); height: 10px; }
.mini-bar.current { box-shadow: 0 0 4px currentColor; }

/* Entry Headline */
.entry-headline {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Entry Footer */
.entry-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
}

.entry-action {
    flex: 1;
}

.entry-method {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ==========================================
   STRATEGY BLOCK - New Clean Layout
   ========================================== */
.sub-section-block.strategy-block {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-color: rgba(59, 130, 246, 0.25);
    border-left: 4px solid #3b82f6;
}

.sub-section-block.strategy-block .sub-section-header {
    background: rgba(59, 130, 246, 0.05);
    border-bottom-color: rgba(59, 130, 246, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sub-section-block.strategy-block .sub-section-icon {
    color: #3b82f6;
}

.stance-badge {
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: auto;
}

.ai-badge-mini {
    padding: 0.15rem 0.4rem;
    background: rgba(139, 92, 246, 0.15);
    color: var(--color-accent-secondary);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Strategy Detail Block (Investment Strategy Section) */
.sub-section-block.strategy-detail-block {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

.sub-section-block.strategy-detail-block .sub-section-header {
    background: rgba(59, 130, 246, 0.05);
    border-bottom-color: rgba(59, 130, 246, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.strategy-parsed-content {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.strategy-parsed-content .strategy-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.strategy-parsed-content .strategy-row:last-child {
    border-bottom: none;
}

.strategy-parsed-content .strategy-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    min-width: 140px;
}

.strategy-parsed-content .strategy-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.strategy-parsed-content .strategy-value.highlight {
    color: #10b981;
    font-weight: 700;
}

.sector-tag.positive {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.sector-tag.negative {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.strategy-actions-compact {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.action-item-compact {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
}

.action-item-compact.buy {
    color: #10b981;
}

.action-item-compact.hold {
    color: #3b82f6;
}

.action-item-compact.sell {
    color: #ef4444;
}

/* Strategy Stats Grid */
.strategy-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.strategy-stat-card {
    padding: 0.5rem 0.75rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.strategy-stat-card.exposure-card {
    border-width: 2px;
}

.strategy-stat-card .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.strategy-stat-card .stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.strategy-stat-card .stat-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Exposure Mini Bar */
.exposure-mini-bar {
    margin-top: 0.35rem;
}

.mini-bar-track {
    position: relative;
    height: 6px;
    background: var(--surface-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.mini-bar-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
    opacity: 0.8;
}

/* Focus/Avoid Cards */
.strategy-stat-card.focus-card {
    border-left: 3px solid var(--color-positive);
}

.strategy-stat-card.avoid-card {
    border-left: 3px solid var(--color-negative);
}

/* Strategy Actions List */
.strategy-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle);
}

.strategy-action-item {
    padding: 0.4rem 0.6rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--border-color);
}

.strategy-action-item.buy {
    border-left-color: var(--color-positive);
    background: rgba(16, 185, 129, 0.05);
}

.strategy-action-item.sell {
    border-left-color: var(--color-negative);
    background: rgba(239, 68, 68, 0.05);
}

.strategy-action-item.hold {
    border-left-color: var(--color-warning);
    background: rgba(245, 158, 11, 0.05);
}

.invalidation-list-v2 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invalidation-list-v2 li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(239, 68, 68, 0.2);
}

.invalidation-list-v2 li:last-child {
    border-bottom: none;
}

.invalidation-list-v2 .inv-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.invalidation-list-v2 .inv-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.invalidation-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.12);
    border-radius: var(--radius);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.invalidation-action .action-arrow {
    font-size: 1rem;
    color: var(--color-negative);
}

.invalidation-action .action-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.invalidation-action .action-text strong {
    color: var(--color-negative);
    font-weight: 700;
}

/* Legacy support for old classes */
.stance-badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius);
}

/* --- Entry Analysis Compact --- */
.entry-analysis-compact {
    margin-bottom: 1rem;
}

.entry-compact-grid {
    display: grid;
    grid-template-columns: 140px 1fr 180px;
    gap: 0.75rem;
    align-items: stretch;
}

/* Gauge Section */
.entry-gauge-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
}

.gauge-mini {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-primary);
}

.gauge-value-mini {
    font-size: 1.1rem;
    font-weight: 700;
}

.entry-key-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.key-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.4rem;
    background: var(--surface-primary);
    border-radius: 4px;
}

.key-stat .ks-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.key-stat .ks-value {
    font-size: 0.7rem;
    font-weight: 700;
}

.key-stat .ks-value.positive { color: var(--color-positive); }

/* Center Section */
.entry-center-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.entry-headline-compact {
    padding: 0.5rem 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border-left: 3px solid var(--color-info);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.entry-trend-compact {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
}

.trend-chart-compact {
    flex-shrink: 0;
}

.trend-bars-mini {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px;
    padding: 0 0.25rem;
}

.trend-bar-mini {
    width: 12px;
    min-height: 5px;
    border-radius: 2px 2px 0 0;
    transition: all 0.2s ease;
}

.trend-bar-mini.positive { background: var(--color-positive); }
.trend-bar-mini.neutral { background: var(--color-warning); }
.trend-bar-mini.negative { background: var(--color-negative); }
.trend-bar-mini.current { opacity: 1; box-shadow: 0 0 4px currentColor; }

.trend-labels-mini {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    font-size: 0.5rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.trend-info-compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.trend-direction {
    font-size: 0.75rem;
    font-weight: 600;
}

.trend-avgs {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Action Section */
.entry-action-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
}

.exposure-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.exposure-compact .exposure-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.exposure-value-compact {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-info);
}

.method-compact {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}

/* --- Investment Strategy Compact --- */
.strategy-compact {
    margin-bottom: 1rem;
}

/* Exposure Section Compact */
.exposure-section-compact {
    padding: 0.75rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.exposure-header-compact {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.exposure-header-compact .exposure-title {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.exposure-header-compact .exposure-value-big {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-info);
}

.exposure-header-compact .position-size {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Exposure Bar Compact */
.exposure-bar-compact {
    margin-bottom: 0.35rem;
}

.exposure-track {
    position: relative;
    height: 20px;
    background: var(--surface-primary);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}

.exposure-zone {
    height: 100%;
}

.exposure-zone.zone-low {
    width: 30%;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.3), rgba(249, 115, 22, 0.3));
}

.exposure-zone.zone-mid {
    width: 30%;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.3), rgba(245, 158, 11, 0.3));
}

.exposure-zone.zone-high {
    width: 40%;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(16, 185, 129, 0.3));
}

.exposure-range {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background: linear-gradient(90deg, #3b82f6, var(--color-accent-secondary));
    border-radius: 8px;
    opacity: 0.9;
}

.exposure-marker-min,
.exposure-marker-max {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: white;
    border: 1px solid rgba(0,0,0,0.3);
}

.exposure-scale {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Focus Compact */
.strategy-focus-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.focus-item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border-left: 3px solid var(--border-color);
}

.focus-item.focus-primary { border-left-color: var(--color-positive); }
.focus-item.focus-avoid { border-left-color: var(--color-negative); }

.focus-item .focus-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.focus-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.focus-content .focus-label {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.focus-content .focus-text {
    font-size: 0.7rem;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Actions Compact */
.actions-compact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.action-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--surface-secondary);
    border-radius: var(--radius);
    font-size: 0.65rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.action-group.buy .action-tag { border-left: 2px solid var(--color-positive); }
.action-group.hold .action-tag { border-left: 2px solid var(--color-warning); }
.action-group.sell .action-tag { border-left: 2px solid var(--color-negative); }

/* --- TOP 5 AI Picks Cards --- */
.ai-picks-block {
    margin-bottom: 1rem;
}

.ai-picks-block .view-all-link {
    font-size: 0.75rem;
    color: var(--color-info);
    text-decoration: none;
}

.ai-picks-block .view-all-link:hover {
    text-decoration: underline;
}

.picks-intro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.picks-intro .intro-icon {
    font-size: 1rem;
}

.picks-intro .intro-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Cards Grid */
.ai-picks-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.ai-pick-card {
    background: var(--surface-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
}

.ai-pick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ============================================
   TRADING CARD LAYOUT (TOP 5 AI Picks)
   Larger fonts + Visible Grid lines + Tag styles
   ============================================ */

/* Card Header - Clean design */
.pick-card-header {
    padding: 0.75rem;
    background: var(--surface-tertiary);
    border-bottom: 2px solid rgba(255,255,255,0.08);
}

.pick-header-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.pick-rank {
    font-size: 1.4rem;
}

.pick-symbol {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
}

.pick-symbol:hover {
    color: var(--color-info);
}

/* Action Signal Tag - Prominent */
.pick-signal {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Signal classes - high contrast solid colors */
.pick-signal.signal-strong-buy {
    background: #059669;
    color: #fff;
    border: 1px solid #10b981;
}

.pick-signal.signal-buy {
    background: #2563eb;
    color: #fff;
    border: 1px solid #3b82f6;
}

.pick-signal.signal-wait {
    background: #d97706;
    color: #fff;
    border: 1px solid #f59e0b;
}

/* Tags Row - Same height */
.pick-header-sub {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

/* Sector Tag - Dark bg, light text */
.pick-sector {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    color: #e2e8f0;
    background: #334155;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
    font-weight: 700;
    border: 1px solid #475569;
}

/* Setup/Stage Tag - Accent color */
.pick-setup {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: #0ea5e9;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #38bdf8;
}

/* Card Body */
.pick-card-body {
    padding: 0.75rem;
}

.pick-reason-only {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--surface-primary);
    border-radius: 8px;
    border: 1px dashed var(--border-color, rgba(148, 163, 184, 0.3));
}
.pick-reason-only .reason-text {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Trading Grid with VISIBLE Borders */
.pick-trading-compact {
    background: var(--surface-primary);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 2px solid rgba(148, 163, 184, 0.3);
}

.trading-main,
.trading-targets {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.trading-main {
    border-bottom: 2px solid rgba(148, 163, 184, 0.3);
}

.trading-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.5rem;
}

/* Vertical divider between cells */
.trading-cell:first-child {
    border-right: 2px solid rgba(148, 163, 184, 0.3);
}

.trading-cell .t-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.trading-cell .t-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.trading-cell .t-pct {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

.trading-cell .t-value.text-success,
.trading-cell .t-pct.text-success {
    color: var(--color-positive);
}

.trading-cell .t-value.text-danger,
.trading-cell .t-pct.text-danger {
    color: var(--color-negative);
}

/* AI Analysis Section */
.pick-ai-analysis {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
}

.ai-analysis-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.ai-analysis-header .ai-icon {
    font-size: 0.9rem;
}

.ai-analysis-header .ai-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-accent-secondary);
}

.ai-analysis-content {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Dark mode */
[data-theme="dark"] .pick-ai-analysis {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .ai-analysis-content {
    color: var(--text-primary);
}

/* ==========================================
   INVESTMENT RECOMMENDATIONS DETAILED BLOCK
   ========================================== */
.investment-recommendations-detailed-block {
    background: var(--surface-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    margin-bottom: 1rem;
}

.investment-recommendations-detailed-block .block-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(139, 92, 246, 0.08));
    border-bottom: 1px solid var(--border-subtle);
}

.investment-recommendations-detailed-block .block-header .header-icon {
    font-size: 1.2rem;
}

.investment-recommendations-detailed-block .block-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    text-align: left;
}

.investment-recommendations-detailed-block .block-body {
    padding: 1rem 1.2rem;
}

/* Sector Recommendation Rows */
.rec-sector-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.6;
    font-size: 0.9rem;
}

.rec-sector-row:last-of-type {
    margin-bottom: 0.8rem;
}

.rec-sector-label {
    font-weight: 700;
    color: var(--text-primary);
}

.rec-sector-list {
    font-weight: 700;
}

.rec-sector-list.priority {
    color: #10b981;
}

.rec-sector-list.avoid {
    color: #f59e0b;
}

.rec-sector-reason {
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.rec-sector-reason em {
    color: var(--text-muted);
}

/* TOP 5 Header */
.rec-top5-header {
    margin: 1rem 0 0.8rem 0;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    border-top: 2px solid var(--border-subtle);
}

.rec-top5-header strong {
    font-weight: 700;
}

/* Stock Rows Container */
.rec-stocks-container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Individual Stock Row */
.rec-stock-row {
    padding: 0.7rem 0.8rem;
    background: var(--surface-primary);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    margin-bottom: 0.5rem;
}

.rec-stock-row:hover {
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, var(--surface-primary), rgba(139, 92, 246, 0.03));
}

.rec-stock-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}

.rec-symbol {
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-accent-secondary);
    letter-spacing: 0.5px;
}

.rec-separator {
    color: var(--text-muted);
    margin: 0 0.1rem;
}

.rec-sector {
    font-weight: 600;
    color: var(--text-secondary);
}

.rec-label {
    color: var(--text-muted);
}

.rec-conviction {
    font-weight: 700;
}

.rec-stock-detail {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    padding-left: 0.2rem;
}

.rec-stock-detail strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Dark mode adjustments */
[data-theme="dark"] .investment-recommendations-detailed-block {
    background: var(--surface-secondary);
}

[data-theme="dark"] .investment-recommendations-detailed-block .block-header {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(139, 92, 246, 0.12));
}

[data-theme="dark"] .rec-stock-row {
    background: rgba(30, 41, 59, 0.6);
}

[data-theme="dark"] .rec-stock-row:hover {
    background: rgba(30, 41, 59, 0.8);
}

[data-theme="dark"] .rec-symbol {
    color: var(--color-accent-secondary);
}

[data-theme="dark"] .rec-stock-detail {
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .investment-recommendations-detailed-block .block-body {
        padding: 0.8rem;
    }

    .rec-stock-main {
        font-size: 0.85rem;
    }

    .rec-symbol {
        font-size: 0.95rem;
    }

    .rec-stock-detail {
        font-size: 0.82rem;
    }
}

/* Footer Metrics with VISIBLE Grid */
.pick-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-primary);
}

.footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.4rem;
}

/* Vertical dividers */
.footer-item:not(:last-child) {
    border-right: 2px solid rgba(148, 163, 184, 0.3);
}

.footer-item .f-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.footer-item .f-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.footer-item .f-value.badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    font-weight: 700;
}

.footer-item .f-value.text-success {
    color: var(--color-positive);
}

/* Warnings section */
.pick-warnings {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 6px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-left: 4px solid var(--color-warning);
}

.warning-item {
    display: block;
    font-size: 0.75rem;
    color: var(--color-warning);
    line-height: 1.4;
    font-weight: 600;
}

/* Responsive for new layout */
@media (max-width: 1400px) {
    .indicator-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .indicator-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .ai-picks-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .entry-compact-grid {
        grid-template-columns: 120px 1fr 160px;
    }
}

@media (max-width: 992px) {
    .indicator-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-conclusion-box {
        flex-direction: column;
        align-items: stretch;
    }

    .conclusion-stance {
        flex-direction: row;
        min-width: auto;
        justify-content: center;
    }
}

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

    .indicator-card {
        padding: 0.5rem;
    }

    .indicator-card .ind-label {
        font-size: 0.55rem;
    }

    .indicator-card .ind-value {
        font-size: 0.75rem;
    }

    .ai-picks-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Trading cells responsive - larger on 2-col layout */
    .pick-symbol {
        font-size: 1.8rem;
    }

    .pick-rank {
        font-size: 1.6rem;
    }

    .pick-sector,
    .pick-setup {
        font-size: 0.85rem;
        padding: 0.45rem 0.75rem;
    }

    .pick-signal {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .trading-cell .t-value {
        font-size: 1.5rem;
    }

    .trading-cell .t-label {
        font-size: 0.9rem;
    }

    .trading-cell .t-pct {
        font-size: 0.95rem;
    }

    .footer-item .f-value {
        font-size: 1.15rem;
    }

    .footer-item .f-label {
        font-size: 0.85rem;
    }

    .entry-compact-grid {
        grid-template-columns: 1fr;
    }

    .entry-gauge-section {
        flex-direction: row;
        justify-content: space-around;
    }

    .strategy-focus-compact {
        grid-template-columns: 1fr;
    }

    /* Entry Stats Grid Responsive */
    .entry-stats-grid {
        flex-wrap: wrap;
    }

    .entry-stat-card {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 70px;
    }

    .entry-stat-card.trend {
        flex: 1 1 100%;
    }

    /* Strategy Stats Grid Responsive */
    .strategy-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Market Stats Block Responsive */
    .market-gauges-row {
        gap: 1rem;
    }

    .mini-gauge-svg {
        width: 70px;
        height: 45px;
    }

    .market-gauge-item .gauge-score {
        font-size: 1rem;
    }

    .market-indicators-row {
        gap: 0.4rem;
    }

    .market-ind-card {
        flex: 1 1 calc(50% - 0.2rem);
        min-width: 100px;
        padding: 0.4rem 0.5rem;
    }

    .method-note {
        flex: 1 1 100%;
        margin-left: 0;
        margin-top: 0.25rem;
        text-align: center;
    }

    .sub-section-block .sub-section-body {
        padding: 0.5rem 0.75rem;
    }

    .sub-section-block .sub-section-text {
        font-size: 0.8rem;
    }

    .sub-section-block .sub-section-header {
        padding: 0.5rem 0.75rem;
    }

    .sub-section-block .sub-section-title {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .indicator-stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }

    .indicator-card {
        padding: 0.4rem 0.5rem;
    }

    .ai-picks-cards-grid {
        grid-template-columns: 1fr;
    }

    .main-conclusion-box {
        padding: 0.75rem;
    }

    .conclusion-stance .stance-icon {
        font-size: 1.2rem;
    }

    .conclusion-stance .stance-label {
        font-size: 0.7rem;
    }

    /* Market Stats Block Mobile */
    .market-gauges-row {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .market-gauge-item {
        min-width: 80px;
    }

    .mini-gauge-svg {
        width: 65px;
        height: 42px;
    }

    .market-gauge-item .gauge-score {
        font-size: 0.95rem;
    }

    .market-gauge-item .gauge-label {
        font-size: 0.65rem;
    }

    .market-indicators-row {
        gap: 0.35rem;
    }

    .market-ind-card {
        flex: 1 1 calc(50% - 0.18rem);
        min-width: 90px;
        padding: 0.35rem 0.4rem;
    }

    .mind-label {
        font-size: 0.6rem;
    }

    .mind-value {
        font-size: 0.75rem;
    }

    /* Entry Stats Grid Mobile */
    .entry-stat-card {
        flex: 1 1 calc(50% - 0.25rem);
        padding: 0.4rem 0.5rem;
    }

    .entry-stat-card .stat-value {
        font-size: 0.95rem;
    }

    /* Strategy Stats Grid Mobile */
    .strategy-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }

    .strategy-stat-card {
        padding: 0.4rem 0.5rem;
    }

    .strategy-stat-card .stat-value {
        font-size: 0.9rem;
    }

    .strategy-stat-card .stat-text {
        font-size: 0.75rem;
    }

    .strategy-action-item {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ==========================================
   MARKET CONTEXT DETAIL - 3 sub-section blocks
   (Breadth, VN-Index Forecast, System Confirmation)
   ========================================== */

/* ── Block 1: Breadth Detail — Teal accent ── */
.sub-section-block.mcc-breadth-block {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(20, 184, 166, 0.02) 100%);
    border-color: rgba(20, 184, 166, 0.3);
    border-left: 4px solid #14b8a6;
}

.sub-section-block.mcc-breadth-block .sub-section-header {
    background: rgba(20, 184, 166, 0.05);
    border-bottom-color: rgba(20, 184, 166, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sub-section-block.mcc-breadth-block .sub-section-icon {
    color: #14b8a6;
}

.mcc-header-badges {
    margin-left: auto;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mcc-stat-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.mcc-stat-badge.mcc-badge-green {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.mcc-stat-badge.mcc-badge-red {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mcc-stat-badge.mcc-badge-gray {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.25);
}

/* Breadth cards grid */
.mcc-breadth-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.mcc-breadth-card {
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

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

.mcc-breadth-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mcc-breadth-pct {
    font-size: 0.8rem;
    font-weight: 800;
}

.mcc-breadth-bar-track {
    width: 100%;
    height: 5px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.mcc-breadth-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.mcc-breadth-detail {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Breadth summary row */
.mcc-breadth-summary {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mcc-summary-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.mcc-summary-card.mcc-summary-high {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.mcc-summary-card.mcc-summary-low {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

.mcc-summary-icon {
    font-size: 0.9rem;
}

.mcc-summary-content {
    display: flex;
    flex-direction: column;
}

.mcc-summary-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 500;
}

.mcc-summary-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Insight box */
.mcc-insight-box {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    background: rgba(20, 184, 166, 0.06);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: var(--radius);
}

.mcc-insight-arrow {
    color: #14b8a6;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.mcc-insight-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.mcc-insight-text strong {
    color: var(--text-primary);
    font-weight: 600;
}


/* ── Block 2: VN-Index Forecast — Indigo/Blue accent ── */
.sub-section-block.mcc-vnindex-block {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
    border-color: rgba(99, 102, 241, 0.3);
    border-left: 4px solid #6366f1;
}

.sub-section-block.mcc-vnindex-block .sub-section-header {
    background: rgba(99, 102, 241, 0.05);
    border-bottom-color: rgba(99, 102, 241, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sub-section-block.mcc-vnindex-block .sub-section-icon {
    color: #6366f1;
}

.mcc-bias-badge {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Headline */
.mcc-vni-headline {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* Support / Resistance grid */
.mcc-sr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.mcc-sr-card {
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    text-align: center;
}

.mcc-sr-card-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 0.15rem;
}

.mcc-sr-card-value {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mcc-sr-support-card {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

.mcc-sr-support-card .mcc-sr-card-value {
    color: #10b981;
}

.mcc-sr-resist-card {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

.mcc-sr-resist-card .mcc-sr-card-value {
    color: #ef4444;
}

.mcc-sr-strong {
    opacity: 0.75;
}

/* Scenario box */
.mcc-scenario-box {
    padding: 0.5rem 0.7rem;
    background: var(--surface-tertiary);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mcc-scenario-main {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mcc-scenario-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mcc-scenario-desc {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mcc-scenario-prob {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
}

.mcc-scenario-action {
    font-size: 0.78rem;
    color: #3b82f6;
    font-weight: 600;
}

.mcc-scenario-risk {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 600;
}

/* Key Factors + Sectors */
.mcc-factors-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mcc-factors-group {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mcc-factors-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    padding-top: 0.1rem;
}

.mcc-factors-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mcc-factor-tag {
    padding: 0.12rem 0.4rem;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.mcc-factor-tag.mcc-sector-tag {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
}


/* ── Block 3: System Confirmation — Purple accent ── */
.sub-section-block.mcc-confirm-block {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%);
    border-color: rgba(139, 92, 246, 0.3);
    border-left: 4px solid var(--color-accent-secondary);
}

.sub-section-block.mcc-confirm-block .sub-section-header {
    background: rgba(139, 92, 246, 0.05);
    border-bottom-color: rgba(139, 92, 246, 0.15);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sub-section-block.mcc-confirm-block .sub-section-icon {
    color: var(--color-accent-secondary);
}

.mcc-confirm-badge {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Confirmation main box */
.mcc-confirm-main {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius);
    margin-bottom: 0.6rem;
}

.mcc-confirm-main .mcc-confirm-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.mcc-confirm-detail {
    flex: 1;
}

.mcc-confirm-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.mcc-confirm-text strong {
    font-weight: 700;
}

/* Metrics grid */
.mcc-confirm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}

.mcc-confirm-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    background: var(--surface-primary);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.mcc-card-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.mcc-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mcc-card-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.mcc-card-value {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── Responsive: Market Context Detail ── */

@media (max-width: 900px) {
    .mcc-breadth-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .mcc-sr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mcc-confirm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mcc-header-badges {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .mcc-bias-badge,
    .mcc-confirm-badge {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .mcc-breadth-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mcc-breadth-summary {
        flex-direction: column;
        gap: 0.35rem;
    }

    .mcc-sr-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mcc-confirm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mcc-scenario-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .mcc-factors-group {
        flex-direction: column;
        gap: 0.2rem;
    }
}

@media (max-width: 480px) {
    .mcc-breadth-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }

    .mcc-breadth-card {
        padding: 0.4rem 0.5rem;
    }

    .mcc-sr-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }

    .mcc-confirm-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }

    .mcc-confirm-card {
        padding: 0.35rem 0.4rem;
    }

    .mcc-vni-headline {
        font-size: 0.82rem;
    }

    .mcc-stat-badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }
}

/* ============================================
 * DEFENSIVE MODE BANNER
 * Used in: Strategy page, Stock picks, Expert picks
 * ============================================ */
.defensive-mode-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 10px 0;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% { border-color: rgba(239, 68, 68, 0.3); }
    50% { border-color: rgba(239, 68, 68, 0.6); }
}

.defensive-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.defensive-text {
    color: #fca5a5;
    font-weight: 700;
    font-size: 0.8rem;
    flex: 1;
}

.defensive-label {
    color: #f87171;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.defensive-detail {
    color: #fca5a5;
    font-size: 0.7rem;
    opacity: 0.8;
}

/* ============================================
 * POSITION MANAGEMENT BLOCK
 * ============================================ */
.position-mgmt-block {
    margin-top: 1rem;
}

.position-mgmt-block .sub-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pm-row {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pm-row:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
 * MARKET MODE BANNER
 * ============================================ */
.market-mode-banner {
    transition: all 0.3s ease;
}

.mode-suppress {
    white-space: nowrap;
}

/* ============================================
 * AI PICKS (.aip-*)
 * Compact cards grid → click → 4-block 2-col detail
 * ============================================ */

/* ─── Card grid (5 compact cards) ─────────── */
.aip-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm);
}
.aip-no-picks {
    text-align: center;
    padding: var(--space-md) var(--space-lg);
    color: var(--color-text-secondary);
}
.aip-no-picks-icon {
    font-size: 1.6rem;
    margin-bottom: var(--space-xs);
}
.aip-no-picks-title {
    font-size: var(--font-size-md, 0.95rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}
.aip-no-picks-reason {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.aip-no-picks-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.aip-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.aip-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-primary);
}
.aip-card-top {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.aip-card-identity { flex: 1; min-width: 0; }
.aip-sym-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: space-between;
}
.aip-symbol {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--color-text-primary);
}
.aip-company {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.aip-card-mid {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.aip-card-score {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.aip-score-bar {
    flex: 1;
    height: 6px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.aip-score-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-accent-secondary);
    transition: width 0.3s ease;
}
.aip-score-val {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent-secondary);
    min-width: 28px;
    text-align: right;
}
.aip-reason-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.aip-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}
.aip-f-item { display: flex; align-items: center; gap: 4px; }
.aip-f-label { color: var(--color-text-muted); font-weight: 600; }
.aip-f-value { font-weight: 700; color: var(--color-text-primary); }
/* ─── Unified Data Freshness Banner ──────────────────────────
 * Single freshness indicator for an entire section/page block.
 * Pattern: one banner at block-body top, checks all data sources.
 * States: --fresh (all sources current), --stale (one or more stale).
 * Template for other pages — see memory/timestamp_guide.md
 * ──────────────────────────────────────────────────────────── */
.aip-freshness-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.76rem;
    line-height: 1.4;
    margin-bottom: var(--space-sm, 8px);
}
.aip-freshness-banner.--fresh {
    background: color-mix(in srgb, var(--color-positive, #10b981) 8%, transparent);
    color: var(--color-positive, #10b981);
    border: 1px solid color-mix(in srgb, var(--color-positive, #10b981) 20%, transparent);
}
.aip-freshness-banner.--stale {
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, transparent);
    color: var(--color-warning, #f59e0b);
    border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 20%, transparent);
}
.afb-icon { flex-shrink: 0; }
.afb-text b { font-weight: 700; }
/* Compact inline freshness badge — used in block-headers across all strategy sections */
.stg-fresh-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--radius-full, 999px);
    font-size: 0.70rem; font-weight: 600; letter-spacing: 0.2px;
    vertical-align: middle; white-space: nowrap; cursor: default;
    margin-left: 8px;
}
.stg-fresh-badge.--fresh {
    background: color-mix(in srgb, var(--color-positive, #10b981) 12%, transparent);
    color: var(--color-positive, #10b981);
}
.stg-fresh-badge.--stale {
    background: var(--color-negative, #ef4444);
    color: #fef08a;
    font-size: 0.80rem;
    font-weight: 800;
    padding: 5px 14px;
    letter-spacing: 0.4px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-negative, #ef4444) 60%, transparent),
                0 2px 4px rgba(0,0,0,0.3);
    animation: stg-badge-pulse 2s ease-in-out infinite;
}
@keyframes stg-badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.72; }
}
.aip-card-arrow {
    color: var(--color-text-muted);
    margin-left: auto;
    font-size: var(--font-size-sm);
    transition: transform var(--transition-fast);
}
.aip-card:hover .aip-card-arrow { transform: translateX(3px); color: var(--color-accent-primary); }
.aip-card-price {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-left: auto;
    white-space: nowrap;
}

/* ─── Detail: nav bar ─────────────────────── */
.aip-detail { animation: fadeIn 0.2s ease; }
.aip-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.aip-back-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}
.aip-back-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-secondary); }
.aip-session-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ─── Detail: 2-column grid ───────────────── */
.aip-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ─── Block (shared) ──────────────────────── */
.aip-block {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}
.aip-block-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border);
}
.aip-block-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-md) 0;
}

/* ─── Rank badge ──────────────────────────── */
.aip-rank-badge {
    width: 28px; height: 28px;
    border-radius: var(--border-radius-full);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.aip-rank-1 { background: #eab308; }
.aip-rank-2 { background: #94a3b8; }
.aip-rank-3 { background: #cd7f32; }
.aip-rank-4, .aip-rank-5 { background: var(--color-text-muted); }

/* ─── Block 1: Thông tin cơ bản ───────────── */
.aip-b1-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.aip-b1-symbol {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text-primary);
}
.aip-b1-score {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent-secondary);
    margin-left: auto;
}
.aip-b1-company {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 1px;
}
.aip-b1-tags {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: 3px;
    flex-wrap: wrap;
}
.aip-b1-exchange {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}
.aip-b1-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    margin-top: 5px;
}
.aip-b1-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--font-size-xs);
    padding: 1px 0;
}
.aip-b1-sl {
    color: var(--color-text-muted);
    font-weight: 600;
    min-width: 52px;
}
.aip-b1-sv {
    font-weight: 700;
    color: var(--color-text-primary);
}
.aip-b1-ss {
    font-size: 0.68rem;
    color: var(--color-text-secondary);
}
.aip-b1-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.aip-b1-chip, .aip-b3-chip {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.aip-chip-bull { background: var(--color-positive-bg); color: var(--color-positive); }
.aip-chip-bear { background: var(--color-negative-bg); color: var(--color-negative); }
.aip-chip-neutral { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
/* ─── Unified conclusion bar (bottom of each block) ─── */
.aip-conclusion {
    margin-top: auto;
    padding: 5px 10px;
    background: color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-bg-tertiary));
    border-left: 3px solid var(--color-accent-primary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.5;
}
.aip-conclusion .aip-conc-icon { font-style: normal; margin-right: 6px; }
.aip-conclusion .aip-conc-label {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 2px;
}
.aip-b1-ai-line {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 5px;
    padding: 4px 8px;
    border-left: 3px solid var(--color-accent-primary);
    background: var(--color-bg-tertiary);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    line-height: 1.4;
    font-style: italic;
}
.aip-ai-icon { font-style: normal; }
.aip-signal {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.aip-signal-strong-buy, .aip-signal-strong_buy { background: var(--color-positive); color: #fff; }
.aip-signal-buy { background: var(--color-accent-primary); color: #fff; }
.aip-signal-wait, .aip-signal-wait-pullback, .aip-signal-wait_pullback { background: var(--color-neutral); color: #fff; }
.aip-signal-hold { background: var(--color-text-muted); color: #fff; }

/* ─── Shared: sector/setup/tag ────────────── */
.aip-sector {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
}
.aip-setup {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
}

/* ─── Shared: badges ──────────────────────── */
.aip-f-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
}
.aip-risk-low { background: var(--color-positive-bg); color: var(--color-positive); }
.aip-risk-medium { background: var(--color-neutral-bg); color: var(--color-neutral); }
.aip-risk-high { background: var(--color-negative-bg); color: var(--color-negative); }

.aip-tag-sep {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Color utilities */
.aip-clr-pos { color: var(--color-positive); }
.aip-clr-neg { color: var(--color-negative); }
.aip-clr-accent { color: var(--color-accent-secondary); }

/* ─── Block 2: Thông tin định giá ─────────── */
.aip-b2-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.aip-b2-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    min-width: 32px;
}
.aip-b2-score {
    font-size: var(--font-size-sm);
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
}
.aip-sc-hot { background: var(--color-positive); color: #fff; }
.aip-sc-good { background: var(--color-positive-bg); color: var(--color-positive); }
.aip-sc-ok { background: var(--color-neutral-bg); color: var(--color-neutral); }
.aip-sc-warn { background: var(--color-negative-bg); color: var(--color-negative); }
.aip-sc-bad { background: var(--color-negative); color: #fff; }
.aip-b2-tag {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.aip-b2-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.aip-b2-breakdown {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    padding-left: 40px;
    margin-bottom: 3px;
}
.aip-b2-tvs {
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.aip-tvs-trending_value { background: var(--color-positive); color: #fff; }
.aip-tvs-quality_value { background: var(--color-positive); color: #fff; }
.aip-tvs-deep_value { background: var(--color-positive-bg); color: var(--color-positive); }
.aip-tvs-value_trap { background: var(--color-negative-bg); color: var(--color-negative); }
.aip-tvs-overvalued { background: var(--color-negative); color: #fff; }
.aip-b2-detail {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    padding-left: 40px;
    margin-bottom: 3px;
}
.aip-eas-high { background: var(--color-positive); color: #fff; }
.aip-eas-mid { background: var(--color-neutral-bg); color: var(--color-neutral); }
.aip-eas-low { background: var(--color-negative-bg); color: var(--color-negative); }
.aip-b2-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-left: 40px;
    margin-bottom: 3px;
}
.aip-b2-flag {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-negative);
}
.aip-b2-fair {
    font-weight: 700;
    color: var(--color-text-primary);
}
.aip-b2-conclusion { /* now uses .aip-conclusion base */ }
.aip-b2-verdict {
    font-size: var(--font-size-xs);
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
}
.aip-verdict-great { background: var(--color-positive); color: #fff; }
.aip-verdict-good { background: var(--color-positive-bg); color: var(--color-positive); }
.aip-verdict-ok { background: var(--color-neutral-bg); color: var(--color-text-primary); }
.aip-verdict-warn { background: var(--color-negative-bg); color: var(--color-negative); }
.aip-verdict-bad { background: var(--color-negative); color: #fff; }
.aip-verdict-unknown { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.aip-b2-conc-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ─── Block 3: Thông tin kỹ thuật ─────────── */
.aip-b3-trend {
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    margin-bottom: 3px;
}
.aip-b3-signal-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-bottom: 3px;
}
.aip-b3-cnt { color: var(--color-text-secondary); }
.aip-b3-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}
.aip-b3-ai-text { /* now uses .aip-conclusion base */
    margin-bottom: 6px;
}
.aip-b3-warning {
    font-size: var(--font-size-xs);
    color: var(--color-negative);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-negative-bg);
    border-radius: var(--border-radius-sm);
}
.aip-b3-fallback {
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.aip-b3-note {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-sm) 0;
    font-style: italic;
}

/* ─── Block 4: Thông tin vào lệnh ─────────── */
.aip-b4-no-entry {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    padding: var(--space-md) 0;
    justify-content: center;
}
.aip-b4-wait-icon { font-size: 1.5rem; }
.aip-b4-data { margin-top: 5px; }
.aip-b4-prices {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
}
.aip-b4-p { display: inline-flex; align-items: baseline; gap: 4px; }
.aip-b4-pl {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-muted);
}
.aip-b4-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: 4px;
    flex-wrap: wrap;
}
.aip-b4-warnings {
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.aip-b4-warn {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    font-weight: 600;
}

/* ─── Entry Ruler Chart ───────────────────── */
.aip-ruler-track {
    position: relative;
    height: 28px;
    background: color-mix(in srgb, var(--color-border) 30%, transparent);
    border-radius: 14px;
    margin: 24px 0 30px;
    overflow: visible;
}
.aip-ruler-zone {
    position: absolute;
    top: 2px; bottom: 2px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}
.aip-ruler-point {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
.aip-ruler-marker {
    display: flex;
    align-items: center;
    justify-content: center;
}
.aip-rm-sl {
    width: 0; height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--color-negative);
}
.aip-rm-current {
    width: 14px; height: 14px;
    background: var(--color-accent-secondary);
    border: 2px solid var(--color-bg-secondary);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--color-accent-secondary);
}
.aip-rm-tp {
    width: 12px; height: 12px;
    background: var(--color-positive);
    border-radius: 2px;
    transform: rotate(45deg);
}
.aip-ruler-label {
    position: absolute;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 600;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 1.3;
}
.aip-rl-above { bottom: calc(100% + 4px); color: var(--color-accent-secondary); }
.aip-rl-below { top: calc(100% + 4px); color: var(--color-text-secondary); }
.aip-rl-tp { color: var(--color-positive); }
.aip-rl-sl { left: 0; transform: none; color: var(--color-negative); }
.aip-rl-pct { font-size: 0.62rem; font-weight: 700; opacity: 0.9; }
.aip-ruler-rr {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: -20px;
    margin-bottom: var(--space-xs);
}

/* ─── Section actions ─────────────────────── */
.aip-section-actions { margin-top: var(--space-sm); }
.aip-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    color: #fff;
    border: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}
.aip-action-btn:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Conviction badge */
.aip-conviction {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* ==========================================
   WATCHLIST CANDIDATES (.aip-wl-*)
   ========================================== */
.aip-wl-section {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}
.aip-wl-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 4px;
}
.aip-wl-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.aip-wl-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
    padding: 1px 8px;
    border-radius: 10px;
}
.aip-wl-desc {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.aip-wl-dca-note {
    font-size: 0.75rem;
    color: #ca8a04;
    background: rgba(234,179,8,0.08);
    border-left: 3px solid rgba(234,179,8,0.45);
    padding: 0.3rem 0.6rem;
    border-radius: 0 4px 4px 0;
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.aip-wl-ss-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.18rem 0.55rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.aip-wl-ss-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
/* ─── Action Bucket Groups ─────────────────────────────── */
.aip-bucket {
    margin-bottom: 10px;
}
.aip-bucket + .aip-bucket {
    margin-top: 4px;
}
.aip-bucket-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    border-left: 3px solid transparent;
}
.aip-bucket-hdr.--core {
    background: rgba(34, 197, 94, 0.07);
    border-left-color: var(--color-positive, #22c55e);
}
.aip-bucket-hdr.--buy-small {
    background: rgba(245, 158, 11, 0.07);
    border-left-color: #f59e0b;
}
.aip-bucket-hdr.--hold {
    background: rgba(107, 114, 128, 0.06);
    border-left-color: var(--color-text-muted);
}
.aip-bucket-icon {
    font-size: 0.85rem;
    line-height: 1;
}
.aip-bucket-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.aip-bucket-sub {
    font-size: 0.67rem;
    color: var(--color-text-muted);
    flex: 1;
}
.aip-wait-banner {
    margin-top: 8px;
    padding: 7px 12px;
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid var(--color-info, #3b82f6);
    border-radius: 0 4px 4px 0;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}
/* ─────────────────────────────────────────────────────── */
.aip-wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}
.aip-wl-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md, 8px);
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.aip-wl-card:hover {
    border-color: var(--color-accent-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}
/* --- Watchlist card redesign v20260325e --- */
/* Row 1: Symbol (left) + SCP badge (right) */
.aip-wl-r1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
/* Row 2: Signal (left) + % change (right) */
.aip-wl-r2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.aip-wl-change {
    font-size: 0.75rem;
    font-weight: 700;
}
.aip-wl-company {
    font-size: 0.62rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
/* Stats: 1 compact row — Score · SEPA · R:R · Vol */
.aip-wl-stats-row {
    font-size: 0.67rem;
    color: var(--color-text-secondary);
    margin: 3px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
}
.aip-wl-sl {
    color: var(--color-text-muted);
    font-weight: 600;
    margin-right: 2px;
}
.aip-wl-dot {
    color: var(--color-text-muted);
    margin: 0 4px;
    opacity: 0.5;
}
.aip-wl-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.aip-wl-price {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.aip-wl-ai-rec {
    font-size: 0.62rem;
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.3;
    border-top: 1px solid var(--color-border);
    padding-top: 3px;
    margin-top: 3px;
}
/* Legacy — kept for any remaining references */
.aip-wl-card-top { display: flex; align-items: center; justify-content: space-between; }
.aip-wl-card-identity { display: flex; align-items: center; gap: 6px; }
.aip-wl-stats { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.aip-wl-stat { font-size: 0.68rem; color: var(--color-text-secondary); }

/* ─── Responsive ──────────────────────────── */
@media (max-width: 1200px) {
    .aip-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .aip-grid { grid-template-columns: repeat(2, 1fr); }
    .aip-grid-2col { grid-template-columns: 1fr; }
    .aip-b1-stats { grid-template-columns: 1fr; }
    .aip-b4-prices { flex-direction: column; gap: var(--space-xs); }
    .aip-wl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .aip-grid { grid-template-columns: 1fr; }
    .aip-wl-grid { grid-template-columns: 1fr; }
}

/* ─── Synthesis Block (redesigned) ──────────────────────── */
.aip-synthesis {
    margin-top: var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--syn-c, var(--color-accent-primary)) 35%, var(--color-border));
    border-top: 3px solid var(--syn-c, var(--color-accent-primary));
    overflow: hidden;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--syn-c, #6366f1) 5%, var(--color-bg-secondary)),
        var(--color-bg-secondary));
}
/* Hero row */
.aip-syn-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 8px 13px;
    background: color-mix(in srgb, var(--syn-c, #6366f1) 9%, var(--color-bg-tertiary));
    border-bottom: 1px solid color-mix(in srgb, var(--syn-c, #6366f1) 22%, var(--color-border));
}
.aip-syn-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.aip-syn-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary);
}
.aip-syn-mm-tag {
    font-size: 0.63rem;
    color: var(--color-text-muted);
}
.aip-syn-verdict-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.aip-syn-verdict {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 3px 14px;
    border-radius: 99px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.syn-strong-buy { background: #052e16; color: #4ade80; border: 1px solid #16a34a; }
.syn-buy        { background: #064e3b; color: #6ee7b7; border: 1px solid #059669; }
.syn-wait       { background: #451a03; color: #fbbf24; border: 1px solid #d97706; }
.syn-watch      { background: #431407; color: #fb923c; border: 1px solid #ea580c; }
.syn-avoid      { background: #450a0a; color: #f87171; border: 1px solid #dc2626; }
.aip-syn-weighted-score {
    font-size: 0.67rem;
    color: color-mix(in srgb, var(--syn-c, #6366f1) 85%, var(--color-text-muted));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
/* Score chips row — 4 equal columns */
.aip-syn-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.aip-syn-chip {
    background: var(--color-bg-secondary);
    padding: 6px 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aip-syn-chip-lbl {
    font-size: 0.63rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aip-syn-chip-bar-wrap {
    height: 4px;
    background: var(--color-bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}
.aip-syn-chip-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.aip-syn-chip-meta {
    font-size: 0.62rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aip-syn-chip-wt { color: var(--color-text-muted); opacity: 0.7; }
/* AI rec row */
.aip-syn-rec-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 12px;
    border-bottom: 1px solid var(--color-border);
}
.aip-syn-rec-icon { font-size: 0.85rem; flex-shrink: 0; margin-top: 1px; }
.aip-syn-rec-text {
    font-size: 0.71rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
/* Action strip */
.aip-syn-action {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.71rem;
}
.aip-syn-action span { display: flex; align-items: center; gap: 4px; color: var(--color-text-primary); }
.aip-syn-action span b { color: var(--color-accent-primary); font-weight: 700; }
.aip-syn-act-buy   { background: color-mix(in srgb, #22c55e 8%, transparent); border-top: 1px solid color-mix(in srgb, #22c55e 18%, transparent); }
.aip-syn-act-wait  { background: color-mix(in srgb, #f59e0b 8%, transparent); border-top: 1px solid color-mix(in srgb, #f59e0b 18%, transparent); }
.aip-syn-act-watch { background: color-mix(in srgb, #f97316 8%, transparent); border-top: 1px solid color-mix(in srgb, #f97316 18%, transparent); }
.aip-syn-act-avoid { background: color-mix(in srgb, #ef4444 8%, transparent); border-top: 1px solid color-mix(in srgb, #ef4444 18%, transparent); }

/* ─── Quick Search (compact inline in header) ────────────── */
.aip-qs-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border));
    border-radius: 20px;
    background: var(--color-bg-tertiary);
    transition: border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    overflow: hidden;
}
.aip-qs-wrap:focus-within {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}
.aip-qs-icon {
    display: flex;
    align-items: center;
    padding: 0 4px 0 9px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.aip-qs-input {
    border: none;
    background: transparent;
    width: 90px;
    padding: 5px 4px;
    font-size: 0.73rem;
    outline: none;
    color: var(--color-text-primary);
    transition: width 0.25s ease;
}
.aip-qs-input::placeholder { color: var(--color-text-muted); }
.aip-qs-input:focus { width: 140px; }
.aip-qs-btn {
    border: none;
    background: var(--color-accent-primary);
    color: #fff;
    padding: 0 14px;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.aip-qs-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.aip-qs-btn:not(:disabled):hover { opacity: 0.82; }
/* Dropdown — shared base */
.aip-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0; left: auto;
    min-width: 130px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    z-index: 300;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.aip-search-dropdown.active { display: block; }
.aip-dd-item {
    padding: 7px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--color-text-primary);
    letter-spacing: 0.03em;
    font-weight: 500;
}
.aip-dd-item:hover { background: var(--color-bg-tertiary); color: var(--color-accent-primary); }

/* ─── SSE Loading State ──────────────────────────────────── */
.aip-sse-loading { width: 100%; }
.aip-sse-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 20px;
    text-align: center;
}
.aip-sse-spinner { font-size: 2.2rem; animation: pulse 1.5s ease-in-out infinite; }
.aip-sse-sym { font-size: 1.5rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: 0.05em; }
.aip-sse-status {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    min-height: 18px;
    max-width: 280px;
}
.aip-sse-track {
    width: 80%;
    max-width: 300px;
    height: 6px;
    background: var(--color-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.aip-sse-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-accent-primary);
    transition: width 0.4s ease;
}
.aip-sse-pct {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.aip-sse-note {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    max-width: 280px;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .aip-syn-chips { grid-template-columns: repeat(2, 1fr); }
    .aip-syn-hero { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
    .aip-syn-verdict-center { flex-direction: row; align-items: center; gap: 8px; }
    .aip-search-row { flex-direction: column; }
    .aip-search-btn { width: 100%; text-align: center; }
}

/* ─── Strategy AI TỰ HỌC — Lịch tự cải thiện AI ─────────────── */
.stg-optmon-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.stg-optmon-card--alert { border-color: #f59e0b; }
.stg-optmon-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; gap: 8px;
}
.stg-optmon-card-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
.stg-optmon-card-status { font-size: 11px; white-space: nowrap; }
.stg-optmon-progress-row {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 6px;
}
.stg-optmon-bar { height: 6px; background: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden; }
.stg-optmon-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.stg-optmon-count { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.stg-optmon-action { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 2px; }
.stg-optmon-action--ready { color: #10b981; font-weight: 500; }
.stg-optmon-eta { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }

/* ─── AI TỰ HỌC compact wrapper — giảm khoảng trắng toàn trang ─ */
.stg-al-compact .block            { margin-bottom: 8px; }
.stg-al-compact .block-header     { padding: 6px 14px; }
.stg-al-compact .block-header h3  { font-size: 13px; }
.stg-al-compact .block-body       { padding: 10px 14px; }
.stg-al-compact .panel-two-col    { gap: 8px; }
.stg-al-compact .sub-section-block          { margin-bottom: 6px; }
.stg-al-compact .sub-section-header         { padding: 4px 10px; font-size: 12px; }
.stg-al-compact .sub-section-body           { padding: 6px 10px; }
.stg-al-compact .market-ind-card            { padding: 5px 8px; min-width: 90px; }
.stg-al-compact .mic-label                  { font-size: 10px; }
.stg-al-compact .mic-value                  { font-size: 14px; }
.stg-al-compact .stg-ai-trend-chart         { height: 70px; gap: 2px; }
.stg-al-compact .stg-ai-trend-wr            { font-size: 9px; }
.stg-al-compact .stg-ai-trend-count         { font-size: 8px; }
.stg-al-compact .stg-ai-trend-date          { font-size: 8px; }
.stg-al-compact .stg-ai-stance-table th     { padding: 4px 8px; font-size: 11px; }
.stg-al-compact .stg-ai-stance-table td     { padding: 3px 8px; font-size: 11px; }
.stg-al-compact .stg-optmon-card            { padding: 7px 12px; margin-bottom: 6px; }
.stg-al-compact .stg-optmon-card-title      { font-size: 12px; }
.stg-al-compact .stg-optmon-card-header     { margin-bottom: 4px; }
.stg-al-compact .stg-optmon-progress-row    { margin-bottom: 4px; }
.stg-al-compact .stg-optmon-action          { font-size: 11px; }
.stg-al-compact .stg-optmon-eta             { margin-top: 2px; }
.stg-al-compact p                           { margin-bottom: 6px; font-size: 12px; }

/* ═══════════════════════════════════════════════════
   RADAR PHỤ HỒI — Recovery Candidate Screen (.rph-*)
   Hiển thị trong SÀNG LỌC khi mode TÍCH LŨY DẦN / PHÒNG THỦ
   ═══════════════════════════════════════════════════ */
.rph-block { margin-top: var(--space-md, 16px); }
.rph-trigger-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    margin-left: 8px;
}
.rph-desc {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
    border-left: 3px solid rgba(59, 130, 246, 0.4);
    padding-left: 10px;
}
.rph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 8px;
}
.rph-card {
    padding: 10px;
    background: var(--color-bg-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.rph-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
}
.rph-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 4px;
}
.rph-symbol {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.rph-phase {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    white-space: nowrap;
}
.rph-card-metrics {
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
}
.rph-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rph-metric-label {
    font-size: 9px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rph-metric-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.rph-rs-corr { font-size: 13px; font-weight: 700; }
.rph-pos  { color: var(--color-positive, #10b981); }
.rph-neg  { color: var(--color-negative, #ef4444); }
.rph-neutral { color: var(--color-text-secondary); }
.rph-vcp-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    .rph-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── InfoCard — Info button & clickable indicator styles ──────────────────── */
.stg-info-btn {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    opacity: 0.55;
    vertical-align: middle;
    margin-left: 2px;
    transition: opacity 0.15s, color 0.15s;
    pointer-events: none;
}
.stg-info-clickable {
    cursor: pointer;
    transition: opacity 0.15s;
}
.stg-info-clickable:hover {
    opacity: 0.82;
}
.stg-info-clickable:hover .stg-info-btn {
    opacity: 1;
    color: var(--color-accent-primary);
}
/* KPI card hover */
.stg-kpi-card.stg-info-clickable:hover {
    border-left-width: 3px;
    filter: brightness(1.08);
}
/* Mode badge hover */
.stg-mode-badge.stg-info-clickable:hover {
    filter: brightness(1.15);
}
/* Signal banner info hover */
.stg-signal-info.stg-info-clickable:hover {
    opacity: 0.85;
}
/* Mini cards in Section 1 */
.stg-str-mini.stg-info-clickable:hover {
    filter: brightness(1.1);
}
/* Flow items */
.stg-str-flow-item.stg-info-clickable:hover {
    text-decoration: underline dotted;
}
/* rph phase + metric labels */
.rph-phase.stg-info-clickable:hover,
.rph-metric-label.stg-info-clickable:hover {
    text-decoration: underline dotted;
    opacity: 0.85;
}
/* Source badges */
.sloc-badge.stg-info-clickable:hover {
    filter: brightness(1.18);
}

/* ─── Strategy Page Bar — compact header replacing strategy-page-header ──── */
.stg-page-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 18px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.stg-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.stg-bar-icon { font-size: 1.3rem; }
.stg-bar-title {
    font-size: 1.17rem;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}
.stg-bar-date {
    font-size: 0.94rem;
    color: var(--color-text-secondary);
    padding: 3px 8px;
    background: var(--color-bg-tertiary, rgba(255,255,255,.05));
    border-radius: 4px;
}
.stg-bar-mode {
    font-size: 0.91rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid currentColor;
    cursor: pointer;
    white-space: nowrap;
}
.stg-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.stg-bar-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 14px;
    background: var(--color-bg-tertiary, rgba(255,255,255,.04));
    border-radius: 8px;
    border: 1px solid var(--color-border);
    min-width: 140px;
    cursor: pointer;
}
.stg-bar-chip:hover { filter: brightness(1.1); }
.stg-bar-chip--positive {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.45);
}
.stg-bar-chip--neutral {
    background: rgba(217, 119, 6, 0.12);
    border-color: rgba(217, 119, 6, 0.45);
}
.stg-bar-chip--negative {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.45);
}
.stg-bar-chip-label {
    font-size: 0.81rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
    font-weight: 600;
}
.stg-bar-chip-val {
    font-size: 1.07rem;
    font-weight: 700;
    white-space: nowrap;
}
.stg-bar-chip-val.positive { color: var(--color-positive); }
.stg-bar-chip-val.negative { color: var(--color-negative); }
.stg-bar-chip-val.neutral  { color: var(--color-neutral, #d97706); }
.stg-bar-grade {
    font-size: 0.88rem;
    opacity: .85;
    margin-left: 3px;
}
@media (max-width: 600px) {
    .stg-page-bar { padding: 7px 12px; }
    .stg-bar-chip { min-width: 100px; }
}