/**
 * ============================================
 * COMPOUND GROWTH PAGE
 * File: css/components/compound-growth.css
 * ============================================
 * Standalone page "QUẢN LÝ LÃI KÉP" — 5 tabs
 * Variable bridge from variables.css
 */

:root {
    --cg-bg: var(--color-bg-primary);
    --cg-bg-card: var(--color-bg-secondary);
    --cg-bg-muted: var(--color-bg-tertiary);
    --cg-text: var(--color-text-primary);
    --cg-text-sub: var(--color-text-secondary);
    --cg-border: var(--color-border);
    --cg-green: #10b981;
    --cg-red: #ef4444;
    --cg-amber: #f59e0b;
    --cg-blue: #3b82f6;
    --cg-indigo: #6366f1;
}

[data-theme="dark"] {
    --cg-border: var(--color-border);
}

/* ─── Container (full-width) ──────────────── */
.cg-container {
    max-width: 100%;
    color: var(--cg-text);
}

/* ─── Section Title ────────────────────────── */
.cg-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 20px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cg-blue);
    color: var(--cg-text);
}

/* ─── Section Divider (prominent) ─────────── */
.cg-section-divider {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 28px 0 16px;
    padding: 12px 16px;
    background: var(--cg-bg-muted);
    border-radius: 8px;
    border-left: 4px solid var(--cg-blue);
    color: var(--cg-text);
}
.cg-section-divider:first-child { margin-top: 0; }

/* ─── Hero Strip ───────────────────────────── */
.cg-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cg-hero-grade {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cg-hero-grade--A { background: var(--cg-green); }
.cg-hero-grade--B { background: var(--cg-blue); }
.cg-hero-grade--C { background: var(--cg-amber); }
.cg-hero-grade--D,
.cg-hero-grade--F { background: var(--cg-red); }

.cg-hero-return {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}
.cg-hero-return.positive { color: var(--cg-green); }
.cg-hero-return.negative { color: var(--cg-red); }

.cg-hero-metrics {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.cg-hero-metric {
    min-width: 120px;
    text-align: center;
}
.cg-hero-metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cg-text-sub);
    margin-bottom: 2px;
}
.cg-hero-metric-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cg-text);
}
.cg-hero-metric-value.positive { color: var(--cg-green); }
.cg-hero-metric-value.negative { color: var(--cg-red); }
.cg-hero-metric-desc {
    font-size: 0.6rem;
    color: var(--cg-text-sub);
    opacity: 0.7;
    margin-top: 2px;
}

/* ─── Chart ────────────────────────────────── */
.cg-chart {
    height: 300px;
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    margin-bottom: 4px;
    overflow: hidden;
}
.cg-chart-placeholder {
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    margin-bottom: 16px;
    text-align: center;
    padding: 40px 20px;
    opacity: 0.6;
}

/* ─── Chart Legend ─────────────────────────── */
.cg-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 8px 0 16px;
    font-size: 12px;
    color: var(--cg-text-sub);
}
.cg-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cg-chart-legend-line {
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    vertical-align: middle;
}
.cg-chart-legend-line--dashed {
    height: 0;
    background: none;
    border-top: 2px dashed;
}

/* ─── Stacked Layout ──────────────────────── */
.cg-2col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

/* ─── Mini Boxes (Overview bottom) ─────────── */
.cg-mini-box {
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    padding: 16px;
}
.cg-mini-box-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cg-text-sub);
    margin-bottom: 10px;
}
.cg-mini-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--cg-border);
}
.cg-mini-row:last-child { border-bottom: none; }

/* ─── Table ────────────────────────────────── */
.cg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cg-table th {
    background: var(--cg-bg-muted);
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 2px solid var(--cg-border);
    text-align: left;
}
.cg-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cg-border);
}
.cg-table tr.current {
    background: rgba(59, 130, 246, 0.08);
}
[data-theme="dark"] .cg-table tr.current {
    background: rgba(59, 130, 246, 0.15);
}
.cg-table .positive { color: var(--cg-green); }
.cg-table .negative { color: var(--cg-red); }

/* ─── Grade Badge (reusable) ───────────────── */
.cg-grade {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cg-grade--A { background: var(--cg-green); }
.cg-grade--B { background: var(--cg-blue); }
.cg-grade--C { background: var(--cg-amber); }
.cg-grade--D,
.cg-grade--F { background: var(--cg-red); }

/* ─── Leader Cards Grid ────────────────────── */
.cg-leader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cg-leader-card {
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    border-left: 4px solid var(--cg-border);
    padding: 16px;
    transition: box-shadow var(--transition-fast);
}
.cg-leader-card:hover {
    box-shadow: var(--shadow-md);
}
.cg-leader-card--high {
    border-left-color: var(--cg-green);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), var(--cg-bg-card));
}
.cg-leader-card--mid {
    border-left-color: var(--cg-blue);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), var(--cg-bg-card));
}
.cg-leader-card--low {
    border-left-color: var(--cg-amber);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), var(--cg-bg-card));
}
[data-theme="dark"] .cg-leader-card--high {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), var(--cg-bg-card));
}
[data-theme="dark"] .cg-leader-card--mid {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), var(--cg-bg-card));
}
[data-theme="dark"] .cg-leader-card--low {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), var(--cg-bg-card));
}

.cg-leader-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.cg-leader-card-symbol {
    font-weight: 700;
    font-size: 15px;
}
.cg-leader-card-score {
    font-size: 18px;
    font-weight: 700;
}

.cg-leader-score-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--cg-bg-muted);
    margin-bottom: 8px;
}
.cg-leader-score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.cg-leader-meta {
    font-size: 12px;
    color: var(--cg-text-sub);
}
.cg-leader-sources {
    font-size: 11px;
    color: var(--cg-text-sub);
    opacity: 0.7;
    margin-top: 4px;
}

.cg-leader-btn {
    margin-top: 10px;
    padding: 6px 14px;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    background: var(--cg-bg-card);
    color: var(--cg-text);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.cg-leader-btn:hover {
    background: var(--cg-blue);
    color: #fff;
    border-color: var(--cg-blue);
}

/* ─── Conclusion Box (sentiment variants) ──── */
.cg-conclusion-box {
    padding: 1.1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    border-left: 5px solid var(--cg-blue);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.cg-conclusion-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}
.cg-conclusion-box:hover::before { opacity: 1; }

.cg-conclusion-box.positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.07) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-left-color: var(--cg-green);
}
.cg-conclusion-box.positive::before { box-shadow: 0 0 20px rgba(16, 185, 129, 0.08); }

.cg-conclusion-box.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.07) 0%, rgba(239, 68, 68, 0.02) 100%);
    border-left-color: var(--cg-red);
}
.cg-conclusion-box.negative::before { box-shadow: 0 0 20px rgba(239, 68, 68, 0.08); }

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

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

.cg-conclusion-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--cg-text);
}
.cg-conclusion-text ul {
    margin: 4px 0;
    padding-left: 20px;
}
.cg-conclusion-text li {
    margin-bottom: 4px;
}

[data-theme="dark"] .cg-conclusion-box.positive { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.03) 100%); }
[data-theme="dark"] .cg-conclusion-box.negative { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.03) 100%); }
[data-theme="dark"] .cg-conclusion-box.neutral { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.03) 100%); }

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

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

/* ─── AI Intro Text ────────────────────────── */
.cg-ai-intro {
    font-size: 13px;
    color: var(--cg-text-sub);
    margin-bottom: 16px;
    padding: 8px 0;
}

/* ─── AI Stock Cards Grid (1-col stacked) ──── */
.cg-ai-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.cg-ai-card {
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    border-left: 5px solid var(--cg-blue);
    padding: 16px 20px;
    transition: box-shadow 0.2s;
}
.cg-ai-card:hover {
    box-shadow: var(--shadow-md);
}

.cg-ai-card--positive {
    border-left-color: var(--cg-green);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, var(--cg-bg-card) 100%);
}
.cg-ai-card--negative {
    border-left-color: var(--cg-red);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, var(--cg-bg-card) 100%);
}
.cg-ai-card--neutral {
    border-left-color: var(--cg-blue);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, var(--cg-bg-card) 100%);
}

.cg-ai-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cg-ai-card-icon {
    font-size: 1.3rem;
}
.cg-ai-card-symbol {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cg-text);
}
.cg-ai-card-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}
.cg-ai-card-badge--positive {
    background: rgba(16, 185, 129, 0.15);
    color: var(--cg-green);
}
.cg-ai-card-badge--negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--cg-red);
}
.cg-ai-card-badge--neutral {
    background: rgba(59, 130, 246, 0.15);
    color: var(--cg-blue);
}

.cg-ai-card-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cg-text);
}
.cg-ai-card-body ul {
    margin: 4px 0;
    padding-left: 20px;
}
.cg-ai-card-body li {
    margin-bottom: 3px;
}

/* Conclusion card — most prominent, full width */
.cg-ai-card--conclusion {
    border-left: 5px solid var(--cg-indigo);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(56, 189, 248, 0.04) 100%);
    border-width: 2px;
    border-left-width: 5px;
}
.cg-ai-card--conclusion .cg-ai-card-symbol {
    font-size: 1.1rem;
    color: var(--cg-indigo);
}
.cg-ai-card--conclusion .cg-ai-card-body {
    font-size: 0.95rem;
}

[data-theme="dark"] .cg-ai-card--positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--cg-bg-card) 100%);
}
[data-theme="dark"] .cg-ai-card--negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--cg-bg-card) 100%);
}
[data-theme="dark"] .cg-ai-card--neutral {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--cg-bg-card) 100%);
}
[data-theme="dark"] .cg-ai-card--conclusion {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(56, 189, 248, 0.06) 100%);
}
[data-theme="dark"] .cg-ai-card-badge--positive { background: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .cg-ai-card-badge--negative { background: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .cg-ai-card-badge--neutral { background: rgba(59, 130, 246, 0.2); }

/* ─── Learning Metrics Hero ────────────────── */
.cg-learn-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.cg-learn-card {
    flex: 1;
    min-width: 140px;
    padding: 16px;
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    text-align: center;
}
.cg-learn-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cg-text-sub);
    margin-bottom: 4px;
}
.cg-learn-card-value {
    font-size: 1.4rem;
    font-weight: 700;
}
.cg-learn-card-value.positive { color: var(--cg-green); }
.cg-learn-card-value.negative { color: var(--cg-red); }

/* ─── Milestone Progress Bar ───────────────── */
.cg-milestone-bar {
    margin-bottom: 12px;
}
.cg-milestone-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--cg-text-sub);
}
.cg-milestone-track {
    height: 10px;
    border-radius: 5px;
    background: var(--cg-bg-muted);
    overflow: hidden;
}
.cg-milestone-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--cg-blue);
    transition: width 0.4s ease;
}
.cg-milestone-fill.reached { background: var(--cg-green); }

/* ─── Milestone Explanation Box ────────────── */
.cg-milestone-explain {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--cg-bg-card);
    border-radius: 8px;
    border: 1px solid var(--cg-border);
    font-size: 13px;
    line-height: 1.6;
}
.cg-milestone-explain-status {
    font-weight: 600;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.cg-milestone-explain-status.positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--cg-green);
}
.cg-milestone-explain-status.negative {
    background: rgba(239, 68, 68, 0.1);
    color: var(--cg-red);
}
.cg-milestone-explain-status.neutral {
    background: rgba(59, 130, 246, 0.1);
    color: var(--cg-blue);
}
.cg-milestone-explain-help {
    color: var(--cg-text-sub);
    font-size: 12px;
}

[data-theme="dark"] .cg-milestone-explain-status.positive { background: rgba(16, 185, 129, 0.15); }
[data-theme="dark"] .cg-milestone-explain-status.negative { background: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .cg-milestone-explain-status.neutral { background: rgba(59, 130, 246, 0.15); }

/* ─── Candidates Table ─────────────────────── */
.cg-candidates-wrap {
    margin-top: 16px;
}

/* ─── Empty State ──────────────────────────── */
.cg-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.cg-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.cg-empty-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--cg-text);
}
.cg-empty-desc {
    font-size: 14px;
    color: var(--cg-text-sub);
}

/* ─── Stock Blocks (full-width redesign) ──── */
.cg-stock-blocks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cg-stock-block {
    background: var(--cg-bg-card);
    border-radius: 8px;
    border: 1px solid var(--cg-border);
    border-left: 4px solid var(--cg-blue);
    padding: 10px 14px;
    transition: box-shadow 0.2s;
}
.cg-stock-block:hover {
    box-shadow: var(--shadow-md);
}

.cg-stock-block--positive {
    border-left-color: var(--cg-green);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04) 0%, var(--cg-bg-card) 100%);
}
.cg-stock-block--negative {
    border-left-color: var(--cg-red);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, var(--cg-bg-card) 100%);
}
.cg-stock-block--neutral {
    border-left-color: var(--cg-blue);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, var(--cg-bg-card) 100%);
}
.cg-stock-block--warning {
    border-left-color: var(--cg-amber);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, var(--cg-bg-card) 100%);
}
.cg-stock-block--conclusion {
    border-left: 5px solid var(--cg-indigo);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(56, 189, 248, 0.04) 100%);
    border-width: 2px;
    border-left-width: 5px;
}

[data-theme="dark"] .cg-stock-block--positive { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--cg-bg-card) 100%); }
[data-theme="dark"] .cg-stock-block--negative { background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--cg-bg-card) 100%); }
[data-theme="dark"] .cg-stock-block--neutral { background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--cg-bg-card) 100%); }
[data-theme="dark"] .cg-stock-block--warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, var(--cg-bg-card) 100%); }
[data-theme="dark"] .cg-stock-block--conclusion { background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(56, 189, 248, 0.06) 100%); }

/* Header row — single-line flex */
.cg-stock-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.cg-stock-block-icon {
    font-size: 1rem;
    flex-shrink: 0;
}
.cg-stock-block-symbol {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cg-blue);
    flex-shrink: 0;
}
.cg-stock-block-symbol[onclick] {
    cursor: pointer;
}
.cg-stock-block-symbol[onclick]:hover {
    text-decoration: underline;
    color: var(--cg-indigo);
}
.cg-stock-block-summary {
    flex: 1;
    font-size: 0.8rem;
    color: var(--cg-text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cg-stock-block-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.cg-stock-block-badge--positive { background: rgba(16, 185, 129, 0.15); color: var(--cg-green); }
.cg-stock-block-badge--negative { background: rgba(239, 68, 68, 0.15); color: var(--cg-red); }
.cg-stock-block-badge--neutral { background: rgba(59, 130, 246, 0.15); color: var(--cg-blue); }
.cg-stock-block-badge--warning { background: rgba(245, 158, 11, 0.15); color: var(--cg-amber); }
.cg-stock-block-badge--conclusion { background: rgba(99, 102, 241, 0.15); color: var(--cg-indigo); }

[data-theme="dark"] .cg-stock-block-badge--positive { background: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .cg-stock-block-badge--negative { background: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .cg-stock-block-badge--neutral { background: rgba(59, 130, 246, 0.2); }
[data-theme="dark"] .cg-stock-block-badge--warning { background: rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .cg-stock-block-badge--conclusion { background: rgba(99, 102, 241, 0.2); }

/* Body — signal rows + content */
.cg-stock-block-body {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--cg-text);
}
.cg-stock-block-content ul {
    margin: 2px 0;
    padding-left: 18px;
}
.cg-stock-block-content li {
    margin-bottom: 2px;
}

.cg-stock-block-signal {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--cg-border);
}
.cg-stock-block-signal:last-child {
    border-bottom: none;
}
.cg-stock-block-signal-label {
    flex-shrink: 0;
    width: 85px;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--cg-text-sub);
}
.cg-stock-block-signal-text {
    flex: 1;
    font-size: 0.83rem;
    min-width: 0;
}
.cg-stock-block-signal-text ul {
    margin: 2px 0;
    padding-left: 16px;
}

/* Conclusion block in stock-block style */
.cg-stock-block--conclusion .cg-stock-block-symbol {
    font-size: 1rem;
    color: var(--cg-indigo);
}
.cg-stock-block--conclusion .cg-stock-block-body {
    font-size: 0.88rem;
}

/* ─── Entry Signal Strip & Pill ────────────── */
.cg-signal-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 2px;
}
.cg-signal-label {
    font-size: 0.72rem;
    color: var(--cg-text-sub);
    font-weight: 500;
}
.cg-signal-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.cg-signal-pill--strong-buy {
    background: var(--cg-green);
    color: #fff;
}
.cg-signal-pill--buy {
    background: rgba(16, 185, 129, 0.18);
    color: var(--cg-green);
    border: 1.5px solid var(--cg-green);
}
.cg-signal-pill--pullback {
    background: rgba(59, 130, 246, 0.18);
    color: var(--cg-blue);
    border: 1.5px solid var(--cg-blue);
}
.cg-signal-pill--watch {
    background: rgba(99, 102, 241, 0.12);
    color: var(--cg-indigo);
    border: 1.5px solid var(--cg-indigo);
}
.cg-signal-pill--wait {
    background: rgba(245, 158, 11, 0.15);
    color: var(--cg-amber);
    border: 1.5px solid var(--cg-amber);
}
.cg-signal-pill--hold {
    background: var(--cg-bg-muted);
    color: var(--cg-text-sub);
    border: 1.5px solid var(--cg-border);
}
.cg-signal-pill--exit {
    background: rgba(239, 68, 68, 0.18);
    color: var(--cg-red);
    border: 1.5px solid var(--cg-red);
}

[data-theme="dark"] .cg-signal-pill--strong-buy { background: var(--cg-green); color: #fff; }
[data-theme="dark"] .cg-signal-pill--buy { background: rgba(16, 185, 129, 0.25); }
[data-theme="dark"] .cg-signal-pill--pullback { background: rgba(59, 130, 246, 0.25); }
[data-theme="dark"] .cg-signal-pill--watch { background: rgba(99, 102, 241, 0.18); }
[data-theme="dark"] .cg-signal-pill--wait { background: rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .cg-signal-pill--exit { background: rgba(239, 68, 68, 0.25); }

/* ─── Discovery Sub-tabs (Tab 2) ──────────── */
.cg-disc-subtabs {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--cg-border);
}
.cg-disc-subtab {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--cg-border);
    background: var(--cg-bg-card);
    color: var(--cg-text);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cg-disc-subtab.active {
    background: var(--cg-indigo);
    color: #fff;
    border-color: var(--cg-indigo);
}
.cg-disc-subtab:hover:not(.active) {
    background: var(--cg-bg-muted);
    border-color: var(--cg-indigo);
}
.cg-disc-sub {
    min-height: 100px;
}

/* AI Phân Tích panels — vertical stack */
.cg-disc-ai-panels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cg-disc-ai-panels .cg-ai-card {
    margin-bottom: 0;
}

/* ─── AI Report (mirrors pf-ai-report) ────── */
.cg-ai-report {
    background: var(--cg-bg-card);
    border-radius: 12px;
    border: 1px solid var(--cg-border);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .cg-ai-report {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.cg-ai-report-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cg-text);
    background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.02) 100%);
    border-bottom: 2px solid rgba(99,102,241,0.15);
}
[data-theme="dark"] .cg-ai-report-header {
    background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(99,102,241,0.04) 100%);
}
.cg-ai-report-body {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Sub-section within report */
.cg-ai-section {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--cg-border);
    border-left: 4px solid var(--cg-blue);
    background: var(--cg-bg-muted, rgba(0,0,0,0.02));
}
.cg-ai-section-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--cg-text);
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.cg-ai-section-body {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--cg-text);
}
.cg-ai-section-body strong { color: var(--cg-text); }
.cg-ai-section-body ul { margin: 0.25rem 0; padding-left: 1.25rem; }
.cg-ai-section-body li { margin-bottom: 0.15rem; }
.cg-ai-section-body p { margin: 0.2rem 0; }

/* Highlight (indigo — conclusion/summary) */
.cg-ai-section--highlight {
    border-left-color: var(--cg-indigo);
    background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.03) 100%);
    border-color: rgba(99,102,241,0.2);
    border-left-width: 4px;
    box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}
.cg-ai-section--highlight .cg-ai-section-title { font-size: 0.85rem; }
.cg-ai-section--highlight .cg-ai-section-body { font-size: 0.85rem; font-weight: 500; }
[data-theme="dark"] .cg-ai-section--highlight {
    background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(99,102,241,0.05) 100%);
}

/* Warning (amber — risks/swap) */
.cg-ai-section--warning {
    border-left-color: var(--cg-amber);
    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.2);
}
[data-theme="dark"] .cg-ai-section--warning {
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.03) 100%);
}

/* Positive (green — opportunities/buy) */
.cg-ai-section--positive {
    border-left-color: var(--cg-green);
    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.02) 100%);
    border-color: rgba(16,185,129,0.2);
}
[data-theme="dark"] .cg-ai-section--positive {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.03) 100%);
}

/* Negative (red — sell/cut) */
.cg-ai-section--negative {
    border-left-color: var(--cg-red);
    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.2);
}
[data-theme="dark"] .cg-ai-section--negative {
    background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.03) 100%);
}

/* Per-stock badge within section */
.cg-ai-section-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}
.cg-ai-section-badge--positive { background: rgba(16,185,129,0.15); color: var(--cg-green); }
.cg-ai-section-badge--negative { background: rgba(239,68,68,0.15); color: var(--cg-red); }
.cg-ai-section-badge--neutral { background: rgba(59,130,246,0.15); color: var(--cg-blue); }
[data-theme="dark"] .cg-ai-section-badge--positive { background: rgba(16,185,129,0.2); }
[data-theme="dark"] .cg-ai-section-badge--negative { background: rgba(239,68,68,0.2); }
[data-theme="dark"] .cg-ai-section-badge--neutral { background: rgba(59,130,246,0.2); }

/* ─── Ranking Tab — AI Eval + Layout ─────── */
.cg-ranking-ai-eval {
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    border-left: 4px solid var(--cg-indigo);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.cg-ranking-ai-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.cg-ranking-ai-title {
    flex: 1;
    min-width: 0;
}
.cg-ranking-ai-body {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--cg-text);
    padding-top: 0.5rem;
    border-top: 1px solid var(--cg-border);
}
.cg-ranking-ai-body ul { margin: 0.25rem 0; padding-left: 1.25rem; }
.cg-ranking-ai-body li { margin-bottom: 0.15rem; }
.cg-ranking-ai-body p { margin: 0.2rem 0; }
[data-theme="dark"] .cg-ranking-ai-eval {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, var(--cg-bg-card) 100%);
}

/* Weekly table — wider rows */
.cg-ranking-weekly-wrap {
    margin-bottom: 1rem;
}
.cg-ranking-table td,
.cg-ranking-table th {
    padding: 10px 14px;
}
.cg-ranking-table td {
    font-size: 0.88rem;
}

/* Stacked layout for positions + milestones */
.cg-ranking-2col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cg-ranking-col {
    background: var(--cg-bg-card);
    border-radius: 10px;
    border: 1px solid var(--cg-border);
    padding: 1rem;
}
.cg-ranking-col .cg-section-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.cg-ranking-col .cg-table td,
.cg-ranking-col .cg-table th {
    padding: 8px 12px;
}
.cg-ranking-col .cg-milestone-bar {
    margin-bottom: 0.75rem;
}

/* .cg-ranking-2col already 1-col by default */

/* ─── Discovery Metrics Strip (Tab 3) ─────── */
.cg-disc-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--cg-border);
    margin-bottom: 4px;
}
.cg-disc-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--cg-bg-muted);
    border: 1px solid var(--cg-border);
}
.cg-disc-metric-label {
    color: var(--cg-text-sub);
    font-weight: 500;
}
.cg-disc-metric-value {
    font-weight: 700;
    color: var(--cg-text);
}
.cg-disc-metric-value--positive { color: var(--cg-green); }
.cg-disc-metric-value--neutral { color: var(--cg-blue); }
.cg-disc-metric-value--warning { color: var(--cg-amber); }
.cg-disc-metric-value--negative { color: var(--cg-red); }

.cg-disc-sources {
    font-size: 0.68rem;
    color: var(--cg-text-sub);
    opacity: 0.7;
    margin-left: 4px;
}

/* Score bar (thin) */
.cg-disc-score-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--cg-bg-muted);
    margin-bottom: 6px;
}
.cg-disc-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ─── Rank badge in top-3 block header ────── */
.cg-stock-block-rank {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cg-indigo);
    background: rgba(99, 102, 241, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
[data-theme="dark"] .cg-stock-block-rank {
    background: rgba(99, 102, 241, 0.2);
}

/* ─── Compact Cards Grid (rank 4+) ──────── */
.cg-disc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.cg-disc-card {
    background: var(--cg-bg-card);
    border-radius: 8px;
    border: 1px solid var(--cg-border);
    border-left: 3px solid var(--cg-blue);
    padding: 10px 12px;
    transition: box-shadow 0.2s;
}
.cg-disc-card:hover {
    box-shadow: var(--shadow-md);
}
.cg-disc-card--positive { border-left-color: var(--cg-green); }
.cg-disc-card--negative { border-left-color: var(--cg-red); }
.cg-disc-card--neutral  { border-left-color: var(--cg-blue); }
.cg-disc-card--warning  { border-left-color: var(--cg-amber); }

.cg-disc-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.cg-disc-card-rank {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cg-text-sub);
    opacity: 0.7;
}
.cg-disc-card-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cg-blue);
}
.cg-disc-card-symbol[onclick] { cursor: pointer; }
.cg-disc-card-symbol[onclick]:hover { text-decoration: underline; color: var(--cg-indigo); }

.cg-disc-card-badge {
    font-size: 0.58rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: auto;
}
.cg-disc-card-badge--positive { background: rgba(16, 185, 129, 0.15); color: var(--cg-green); }
.cg-disc-card-badge--negative { background: rgba(239, 68, 68, 0.15); color: var(--cg-red); }
.cg-disc-card-badge--neutral  { background: rgba(59, 130, 246, 0.15); color: var(--cg-blue); }
.cg-disc-card-badge--warning  { background: rgba(245, 158, 11, 0.15); color: var(--cg-amber); }

.cg-disc-card-scores {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.cg-disc-card-score {
    font-size: 1.1rem;
    font-weight: 700;
}
.cg-disc-card-score--positive { color: var(--cg-green); }
.cg-disc-card-score--neutral  { color: var(--cg-blue); }
.cg-disc-card-score--warning  { color: var(--cg-amber); }
.cg-disc-card-score--negative { color: var(--cg-red); }

.cg-disc-card-src {
    font-size: 0.7rem;
    color: var(--cg-text-sub);
}

.cg-disc-card-summary {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--cg-text-sub);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .cg-disc-card-badge--positive { background: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .cg-disc-card-badge--negative { background: rgba(239, 68, 68, 0.2); }
[data-theme="dark"] .cg-disc-card-badge--neutral  { background: rgba(59, 130, 246, 0.2); }
[data-theme="dark"] .cg-disc-card-badge--warning  { background: rgba(245, 158, 11, 0.2); }

/* ═══════════════════════════════════════════
   WATCHLIST — 2-Track System
   ═══════════════════════════════════════════ */

:root {
    --cg-green-bg: rgba(16, 185, 129, 0.1);
    --cg-blue-bg: rgba(59, 130, 246, 0.1);
    --cg-indigo-bg: rgba(99, 102, 241, 0.1);
    --cg-amber-bg: rgba(245, 158, 11, 0.1);
}

/* Summary Strip */
.cg-wl-summary {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    background: var(--cg-bg-card);
    border: 1px solid var(--cg-border);
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.cg-wl-track-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--cg-text-sub);
}
.cg-wl-track-stat strong {
    color: var(--cg-text);
}

/* Ready Section (prominent) */
.cg-wl-ready-section {
    border: 2px solid var(--cg-green);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--cg-green-bg);
}
.cg-wl-ready-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--cg-green);
}
.cg-wl-ready-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cg-wl-ready-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--cg-bg-card);
    border-radius: 6px;
    border: 1px solid var(--cg-border);
}
.cg-wl-ready-item-symbol {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cg-text);
    cursor: pointer;
    min-width: 50px;
}
.cg-wl-ready-item-symbol:hover { text-decoration: underline; }
.cg-wl-ready-item-info {
    flex: 1;
    font-size: 0.8rem;
    color: var(--cg-text-sub);
}
.cg-wl-ready-item-score {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Status Pills */
.cg-wl-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.cg-wl-status--watching { background: var(--cg-blue-bg); color: var(--cg-blue); }
.cg-wl-status--ready { background: var(--cg-green-bg); color: var(--cg-green); font-weight: 600; }
.cg-wl-status--entered { background: var(--cg-indigo-bg); color: var(--cg-indigo); }
.cg-wl-status--expired { background: var(--color-bg-tertiary); color: var(--color-text-muted); text-decoration: line-through; }

/* Track Badge */
.cg-wl-track {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}
.cg-wl-track--a { background: var(--cg-indigo-bg); color: var(--cg-indigo); }
.cg-wl-track--b { background: var(--cg-amber-bg); color: var(--cg-amber); }

/* Watching Section */
.cg-wl-watching-section {
    margin-bottom: 16px;
}
.cg-wl-watching-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--cg-text-sub);
}
.cg-wl-watching-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.cg-wl-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--cg-bg-card);
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    border-left: 3px solid var(--cg-blue);
}
.cg-wl-card--b { border-left-color: var(--cg-amber); }
.cg-wl-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cg-wl-card-symbol {
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--cg-text);
}
.cg-wl-card-symbol:hover { text-decoration: underline; }
.cg-wl-card-meta {
    font-size: 0.75rem;
    color: var(--cg-text-sub);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cg-wl-sessions {
    font-size: 11px;
    color: var(--color-text-muted);
}

/* Add-to-watchlist button */
.cg-wl-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.7rem;
    border: 1px solid var(--cg-border);
    border-radius: 4px;
    background: var(--cg-bg-card);
    color: var(--cg-text-sub);
    cursor: pointer;
    transition: all 0.15s;
}
.cg-wl-add-btn:hover {
    background: var(--cg-blue-bg);
    border-color: var(--cg-blue);
    color: var(--cg-blue);
}

/* Remove button */
.cg-wl-remove-btn {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
    margin-left: auto;
}
.cg-wl-remove-btn:hover { opacity: 1; color: var(--cg-red); }

/* Portfolio Tab 5 watchlist badge */
.pf-wl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.7rem;
    border-radius: 4px;
    background: var(--cg-green-bg);
    color: var(--cg-green);
    font-weight: 500;
}

/* Dark mode overrides */
[data-theme="dark"] .cg-wl-ready-section {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}
[data-theme="dark"] .cg-wl-card {
    background: var(--color-bg-secondary);
}
[data-theme="dark"] .cg-wl-ready-item {
    background: var(--color-bg-secondary);
}
[data-theme="dark"] .cg-wl-add-btn {
    background: var(--color-bg-tertiary);
}

/* ─── Strategy Tab — Sub-tab containers ──── */
.cg-strat-sub {
    min-height: 100px;
}

/* ─── Strategy — Info rows ─────────────────── */
.cg-strat-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--cg-text-sub);
    margin: 0.375rem 0;
}
.cg-strat-info-row strong {
    color: var(--cg-text);
}

/* ─── Strategy — Action buttons ────────────── */
.cg-strat-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--cg-green);
    color: #fff;
    margin-top: 0.5rem;
    transition: opacity 0.2s;
}
.cg-strat-buy-btn:hover { opacity: 0.85; }
.cg-strat-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cg-strat-sell-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--cg-red);
    color: #fff;
    margin-top: 0.5rem;
    transition: opacity 0.2s;
}
.cg-strat-sell-btn:hover { opacity: 0.85; }

/* ─── Strategy Report (readable research report) ── */
.cg-strategy-report {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--cg-text);
}
.cg-strategy-report strong {
    color: var(--cg-accent-blue, #3b82f6);
}
.cg-strategy-report em {
    color: var(--cg-text-sub);
    font-style: italic;
}
.cg-strategy-report ul, .cg-strategy-report ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}
.cg-strategy-report li {
    margin-bottom: 0.25rem;
}
[data-theme="dark"] .cg-strategy-report strong {
    color: var(--cg-accent-blue, #60a5fa);
}

/* ─── Ideal Portfolio Table ────────────────── */
.cg-ideal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cg-ideal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    background: var(--cg-bg-card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cg-border);
}
.cg-ideal-table th {
    background: var(--cg-bg-muted);
    color: var(--cg-text-sub);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    padding: 6px 5px;
    text-align: left;
    border-bottom: 2px solid var(--cg-border);
    white-space: nowrap;
}
.cg-ideal-table td {
    padding: 6px 5px;
    border-bottom: 1px solid var(--cg-border);
    color: var(--cg-text);
    font-size: 0.78rem;
}
.cg-ideal-row--owned {
    background: rgba(59, 130, 246, 0.06);
}
.cg-ideal-row--new {
    background: rgba(16, 185, 129, 0.06);
}
[data-theme="dark"] .cg-ideal-row--owned {
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .cg-ideal-row--new {
    background: rgba(16, 185, 129, 0.1);
}
[data-theme="dark"] .cg-ideal-table th {
    background: var(--color-bg-tertiary);
}

/* ─── Buy Modal ────────────────────────────── */
.cg-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cg-modal-content {
    background: var(--cg-bg-card);
    border-radius: 12px;
    width: 420px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--cg-border);
}
.cg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cg-border);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--cg-text);
}
.cg-modal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--cg-text-sub);
    padding: 0 4px;
}
.cg-modal-close:hover { color: var(--cg-red); }
.cg-modal-body {
    padding: 1rem;
}
.cg-modal-field {
    margin-bottom: 0.625rem;
}
.cg-modal-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cg-text-sub);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}
.cg-modal-field input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--cg-bg-muted);
    color: var(--cg-text);
    box-sizing: border-box;
}
.cg-modal-field input:disabled {
    opacity: 0.6;
}
.cg-modal-field select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--cg-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--cg-bg-muted);
    color: var(--cg-text);
    box-sizing: border-box;
    cursor: pointer;
}
.cg-modal-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--cg-text-sub);
    padding: 0.5rem 0;
    border-top: 1px solid var(--cg-border);
}
[data-theme="dark"] .cg-modal-content {
    background: var(--color-bg-secondary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .cg-modal-field input,
[data-theme="dark"] .cg-modal-field select {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
}

/* ─── Toast Notifications ──────────────────── */
.cg-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 10000;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    color: #fff;
}
.cg-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.cg-toast-success {
    background: var(--cg-green);
}
.cg-toast-error {
    background: var(--cg-red);
}

/* ─── Wave Context Strip ────── */
.cg-wave-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 14px; margin-bottom: 10px;
    background: var(--cg-bg-card);
    border: 1px solid var(--cg-border);
    border-radius: 8px; font-size: 12px;
}
.cg-wave-regime {
    padding: 2px 8px; border-radius: 4px;
    font-weight: 700; font-size: 11px; color: #fff;
}
.cg-wave-regime--bull { background: var(--cg-accent-green, #22c55e); }
.cg-wave-regime--early-bull { background: var(--cg-accent-green, #22c55e); opacity: 0.8; }
.cg-wave-regime--accumulation { background: var(--cg-text-muted, #6b7280); }
.cg-wave-regime--distribution { background: var(--cg-accent-amber, #f59e0b); }
.cg-wave-regime--bear { background: var(--cg-accent-red, #ef4444); }
.cg-wave-regime--unknown { background: var(--cg-text-muted, #6b7280); }
.cg-wave-detail { color: var(--cg-text-muted); }
.cg-wave-avg { color: var(--cg-text-muted); font-style: italic; }
.cg-wave-advice {
    color: var(--cg-text); font-style: italic; font-size: 11px;
    margin-left: auto; opacity: 0.85;
}

/* ─── Action Badges (MUA/TĂNG/GIẢM/GIỮ) ─── */
.cg-action-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cg-action-badge--buy { background: rgba(16, 185, 129, 0.15); color: var(--cg-green); }
.cg-action-badge--increase { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.cg-action-badge--decrease { background: rgba(245, 158, 11, 0.15); color: var(--cg-amber); }
.cg-action-badge--hold { background: var(--cg-bg-muted); color: var(--cg-text-sub); }
[data-theme="dark"] .cg-action-badge--buy { background: rgba(16, 185, 129, 0.2); }
[data-theme="dark"] .cg-action-badge--increase { background: rgba(20, 184, 166, 0.2); }
[data-theme="dark"] .cg-action-badge--decrease { background: rgba(245, 158, 11, 0.2); }
[data-theme="dark"] .cg-action-badge--hold { background: var(--color-bg-tertiary); }

/* ─── Buy Recs 2-column layout ────────────── */
.cg-buyrec-zone { margin-bottom: 12px; }
.cg-buyrec-zone-title {
    font-size: 13px; font-weight: 700;
    padding: 6px 0; margin-bottom: 8px;
    border-bottom: 2px solid var(--cg-border);
    color: var(--cg-text);
}
.cg-buyrec-card {
    display: flex; gap: 0; margin-bottom: 8px;
    border: 1px solid var(--cg-border);
    border-radius: 8px; overflow: hidden;
}
.cg-buyrec-left {
    flex: 0 0 340px; padding: 10px 14px;
    background: var(--cg-bg-card);
}
.cg-buyrec-left .cg-strat-info-row {
    display: inline; margin: 0;
}
.cg-buyrec-left .cg-strat-info-row + .cg-strat-info-row::before {
    content: ' | ';
    color: var(--cg-text-sub);
    font-size: 0.75rem;
}
.cg-buyrec-right {
    flex: 1; padding: 10px 14px;
    border-left: 1px solid var(--cg-border);
    font-size: 12px; line-height: 1.5;
    color: var(--cg-text);
    max-height: 120px;
    overflow-y: auto;
}
.cg-buyrec-right p { margin: 0 0 4px; }
.cg-buyrec-right ul { margin: 2px 0; padding-left: 16px; }
.cg-buyrec-right li { margin-bottom: 1px; }
.cg-capital-mgmt {
    background: var(--cg-bg-card);
    border: 1px solid var(--cg-border);
    border-radius: 8px; padding: 10px 14px;
    font-size: 12px; line-height: 1.6;
    color: var(--cg-text);
}
.cg-capital-mgmt strong { color: var(--cg-text); }

/* ─── Responsive — Discovery Sub-tabs ────── */
@media (max-width: 992px) {
    .cg-table,
    .cg-ideal-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cg-ideal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
    .cg-disc-subtabs { gap: 0.25rem; }
    .cg-disc-subtab { padding: 5px 10px; font-size: 0.8rem; }
    .cg-ideal-table { font-size: 0.7rem; }
    .cg-ideal-table th, .cg-ideal-table td { padding: 5px 3px; }
    .cg-modal-content { width: 95vw; }
    .cg-buyrec-card { flex-direction: column; }
    .cg-buyrec-left { flex: none; }
    .cg-buyrec-right { border-left: none; border-top: 1px solid var(--cg-border); max-height: none; }
    .cg-leader-grid { grid-template-columns: 1fr !important; }
    .cg-ai-cards-grid { grid-template-columns: 1fr; }
}

/* ─── Optimization Monitor ───────────────────────── */
.cg-optmon-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cg-optmon-row { display: grid; grid-template-columns: 1fr 120px 60px; align-items: center; gap: 8px; }
.cg-optmon-label { font-size: 0.72rem; color: var(--cg-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-optmon-bar { height: 7px; background: var(--cg-bg-muted); border-radius: 4px; overflow: hidden; }
.cg-optmon-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.cg-optmon-fill--ready        { background: var(--cg-green); }
.cg-optmon-fill--progress     { background: var(--cg-amber); }
.cg-optmon-fill--insufficient { background: var(--cg-red); opacity: 0.65; }
.cg-optmon-count { font-size: 0.68rem; color: var(--cg-text-sub); text-align: right; white-space: nowrap; }
.cg-optmon-pending {
    background: var(--cg-bg-card);
    border: 1px solid var(--cg-amber);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.72rem;
    margin-bottom: 8px;
    line-height: 1.6;
}
.cg-optmon-applied { font-size: 0.72rem; color: var(--cg-green); margin-bottom: 8px; }
.cg-optmon-delta { display: inline-block; margin-right: 8px; }
.cg-optmon-table { font-size: 0.7rem; }
.cg-optmon-table th { font-size: 0.68rem; }
.cg-optmon-drift-hi { color: var(--cg-amber); font-weight: 600; }
.cg-optmon-drift-lo { color: var(--cg-text-sub); }