/* ── Fund Brain Web Dashboard — V4 Liquid Glass ──────────────────────── */
/*
 * TOKEN SINGLE SOURCE OF TRUTH:
 * - base.css owns reset/base, all theme tokens, light-theme overrides, and ambient environment styles.
 * - style.css owns only component/layout styles and must consume tokens from base.css.
 * - Do not redefine shared color tokens here; change them in base.css only.
 *
 * COLOR LAYERS:
 * 1) 行情色: --color-up / --color-down / their bg+dim variants. Only for 涨跌/利好利空/买卖方向.
 * 2) 系统状态色: --status-info / caution / blocked / anomaly. Only for 正常/提示/阻断/异常.
 * 3) 装饰色: --accent / --ai / --purple. Only for branding, decoration, and non-status emphasis.
 * 铁律: 行情色与系统状态色禁止混用。
 */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ── Glass Classes ────────────────────────────────────────────────────── */
/* 光折射: 顶部高光线 */
.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, var(--glass-highlight) 0%, var(--glass-sheen) 16%, transparent 42%);
    opacity: 0.72;
    pointer-events: none;
    z-index: 1;
}
.glass::after {
    content: '';
    position: absolute;
    top: 0; left: -38%; width: 32%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

@media (hover: hover) {
    .glass:hover {
        background: var(--glass-3);
        border-color: var(--glass-3-border);
        box-shadow: var(--shadow-card-hover), inset 0 1px 0 var(--glass-highlight);
        transform: translateY(-2px);
    }
    .glass:hover::after { animation: glass-sheen-pass 560ms var(--ease-out) 1; }
}
.glass:active {
    background: var(--glass-3);
    transform: translateY(0) scale(0.992);
    transition-duration: var(--motion-press);
}
@keyframes glass-sheen-pass {
    0% { left: -38%; opacity: 0; }
    22% { opacity: 0.7; }
    100% { left: 106%; opacity: 0; }
}
.glass-deep::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--glass-highlight), transparent 36%);
    pointer-events: none;
}
@keyframes glass-overlay-enter {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.glass-shallow {
    background: var(--glass-1);
    backdrop-filter: blur(var(--blur-nav)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--blur-nav)) saturate(120%);
    border-bottom: 1px solid var(--border-1);
}


/* ── Button Variants ──────────────────────────────────────────────────── */

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--glass-2);
    backdrop-filter: blur(var(--blur-nav));
    -webkit-backdrop-filter: blur(var(--blur-nav));
    border: 0.5px solid var(--glass-2-border);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.btn-secondary:hover {
    background: var(--glass-3);
}
.btn-secondary:active {
    transition-duration: 0.08s;
}

/* ── Navigation ───────────────────────────────────────────────────────── */
.nav-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
}

.nav-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.nav-right { display: flex; gap: var(--spacing-xs); align-items: center; }

.nav-pages {
    display: flex;
    gap: 2px;
}

.nav-page-link {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: var(--text-secondary);
    transition: transform var(--motion-press) var(--ease-out), background var(--motion-surface) var(--ease-out), color var(--motion-surface) var(--ease-out), box-shadow var(--motion-surface) var(--ease-out);
}

.nav-page-link:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.nav-page-link:active { transform: scale(0.96); }

.nav-page-link.active,
.nav-page-link[aria-current="page"] {
    background: var(--white-12);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 1px 2px rgba(0,0,0,0.08);
}

.type-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.type-tabs::-webkit-scrollbar { display: none; }

.type-tab {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    white-space: nowrap;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}

.type-tab:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.type-tab.active {
    background: var(--white-12);
    color: var(--text-primary);
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.main-content {
    padding: var(--spacing-md) 0;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}


.fresh-badge {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.7;
    white-space: nowrap;
}

.section-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

/* ── Homepage Cards Grid ──────────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--spacing-sm);
}

.report-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    color: var(--text-primary);
    transition: transform 0.2s var(--spring-smooth);
}

.report-card:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
}

.report-card-info { flex: 1; }
.report-card-type { font-size: 14px; font-weight: 500; }
.report-card-date { font-size: 11px; color: var(--text-secondary); }
.report-card-arrow { color: var(--text-tertiary); font-size: 18px; }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.timeline-group {
    margin-bottom: var(--spacing-lg);
}

.timeline-date {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    padding-left: 4px;
}

.timeline-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.timeline-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--glass-2);
    border: 0.5px solid var(--glass-2-border);
    color: var(--text-primary);
    font-size: 13px;
    transition: background 0.2s, transform 0.2s;
}

.timeline-pill:hover {
    background: var(--glass-3);
    transform: translateY(-1px);
}

/* ── Report Header ────────────────────────────────────────────────────── */
.report-header {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.header-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.header-emoji { font-size: 32px; }
.header-title { font-size: 22px; font-weight: 600; }
.header-date { font-size: 14px; color: var(--text-secondary); }

.header-meta {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.meta-badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

/* ── Highlight Card ───────────────────────────────────────────────────── */
.highlight-card {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.highlight-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.highlight-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.highlight-text { font-size: 15px; line-height: 1.6; color: var(--text-primary); }

.highlight-divider {
    height: 1px;
    background: var(--surface-2);
    margin: var(--spacing-sm) 0;
}

/* ── Charts ───────────────────────────────────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.chart-card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.chart-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.chart-container {
    width: 100%;
    height: 280px;
}

/* ── Module Navigation ────────────────────────────────────────────────── */
.module-nav {
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.module-nav-inner {
    display: flex;
    gap: 4px;
    padding: var(--spacing-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.module-nav-inner::-webkit-scrollbar { display: none; }

.module-nav-pill {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    white-space: nowrap;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}

.module-nav-pill:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* ── Module Cards ─────────────────────────────────────────────────────── */
.modules-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.module-card {
    overflow: hidden;
}

.module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
}

.module-title {
    font-size: 15px;
    font-weight: 500;
}

.toggle-icon {
    font-size: 14px;
    color: var(--text-tertiary);
    transition: transform 0.3s var(--spring-bounce);
}

.module-inner {
    overflow: hidden;
}

.module-header .toggle-icon {
    transform: rotate(0deg);
}

.module-card .module-body.expanded ~ .module-header .toggle-icon,
.module-header:has(+ .module-body.expanded) .toggle-icon {
    transform: rotate(180deg);
}

/* Content styling */
.code-block {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--white-85);
}

.text-content, .list-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
    font-size: 14px;
    line-height: 1.7;
    color: var(--white-85);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Source Info ───────────────────────────────────────────────────────── */
.source-info {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ── Empty State ──────────────────────────────────────────────────────── */

.empty-icon { font-size: 48px; margin-bottom: var(--spacing-sm); }
.empty-text { font-size: 16px; font-weight: 500; color: var(--text-secondary); }
.empty-hint { font-size: 13px; color: var(--text-tertiary); margin-top: var(--spacing-xs); }

/* ── Review / Strategy detail layouts ─────────────────────────────────── */
.score-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    text-align: center;
}

.score-flags,
.score-detail {
    text-align: center;
    line-height: 1.6;
}

.timeline-list,
.validation-list,
.learning-list,
.signal-list,
.bias-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline-item,
.validation-item,
.learning-item,
.signal-item,
.bias-item {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--glass-1);
    border: 0.5px solid var(--border-1);
}

.timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px 10px;
    align-items: center;
}

.timeline-action,
.timeline-amount,
.timeline-status {
    white-space: nowrap;
}

.validation-item,
.learning-item,
.signal-item,
.bias-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.validation-label,
.learning-content,
.signal-desc,
.signal-name {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.learning-tag {
    align-self: flex-start;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
}

/* ── Timeline action/status badges ────────────────────────────────────── */
.timeline-action {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.timeline-action.buy {
    background: var(--color-down-bg);
    color: var(--color-down);
}

.timeline-action.sell {
    background: var(--color-up-bg);
    color: var(--color-up);
}

.timeline-action.other {
    background: var(--bg-card-hover);
    color: var(--text-secondary);
}

.timeline-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-tertiary);
}

.timeline-status.confirmed {
    background: var(--status-info-dim);
    color: var(--status-info);
}

.timeline-status.pending {
    background: var(--status-caution-dim);
    color: var(--status-caution);
}

.timeline-amount {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.timeline-fund {
    font-size: 14px;
    color: var(--white-85);
}

/* ── Signal / Bias compact rows ───────────────────────────────────────── */
.signal-item,
.bias-item {
    padding: 14px 16px;
}

.signal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.signal-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--white-92);
    flex: 1;
    min-width: 0;
}

.signal-stats {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.signal-stats .stat-count {
    color: var(--text-tertiary);
}

.signal-stats .stat-wins {
    color: var(--color-down);
}

.signal-desc {
    font-size: 13px;
    color: var(--text-tertiary);
}

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

.bias-type {
    font-size: 14px;
    font-weight: 500;
    color: var(--white-92);
}

.bias-severity {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-tertiary);
}

.bias-severity.high {
    background: var(--status-anomaly-dim);
    color: var(--status-anomaly);
}

.bias-severity.mid {
    background: var(--status-caution-dim);
    color: var(--status-caution);
}

.bias-severity.low {
    background: var(--status-info-dim);
    color: var(--status-info);
}

.bias-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.bias-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.bias-correction {
    font-size: 13px;
    color: var(--accent-blue);
    margin-top: 4px;
    line-height: 1.5;
}

.bias-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-1);
    font-size: 13px;
    color: var(--text-tertiary);
}

.bias-summary .stat-val {
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Validation status badges ─────────────────────────────────────────── */
.validation-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.validation-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.validation-note {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin-top: 4px;
}

/* ── Mobile Responsive ────────────────────────────────────────────────── */
@media (max-width: 430px) {
    body { font-size: 14px; }

    .container { padding: 0 var(--spacing-sm); }

    .header-emoji { font-size: 24px; }
    .header-title { font-size: 18px; }

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

    .report-card { padding: var(--spacing-sm); }

    .chart-container { height: 220px; }

    .module-header { padding: var(--spacing-sm); }
    .module-title { font-size: 14px; }

    .score-number { font-size: 38px; }

    .timeline-item {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 6px 8px;
    }

    .timeline-amount,
    .timeline-status {
        grid-column: 2;
    }

    .timeline-action {
        grid-row: 1 / 3;
        align-self: start;
        font-size: 11px;
    }

    .timeline-fund {
        font-size: 13px;
        line-height: 1.4;
    }

    .timeline-amount {
        font-size: 13px;
    }

    .timeline-status {
        font-size: 11px;
    }

    .signal-item,
    .bias-item,
    .validation-item,
    .learning-item {
        padding: 10px 12px;
    }

    .signal-head,
    .bias-head,
    .validation-head {
        flex-wrap: wrap;
    }

    .signal-name,
    .bias-type,
    .validation-label {
        font-size: 13px;
    }

    .signal-desc,
    .bias-desc,
    .validation-note,
    .learning-content,
    .score-detail {
        font-size: 12px;
    }

    .empty-hint {
        font-size: 12px;
    }

    .type-tabs { max-width: 70vw; }
}

/* ── Card Stagger Entrance (desktop only) ────────────────────────────── */
@media (min-width: 768px) {
    .card-stagger {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .card-stagger.animate-in {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Reduced Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .module-body { transition: none; }
    .glass, .glass:hover { transition: none; }
    .card-stagger { opacity: 1 !important; transform: none !important; }
    .card-stagger:not(.animate-in) { opacity: 1 !important; }
}

/* Mobile: skip card entrance animation entirely */
@media (max-width: 767px) {
    .card-stagger { opacity: 1; transform: none; transition: none; }
    .card-stagger:not(.animate-in) { opacity: 1; transform: none; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
    .mesh-gradient { display: none; }
    body { background: white; color: #1a1a1a; }
    .glass, .glass-deep, .glass-shallow {
        background: white;
        backdrop-filter: none;
        border: 1px solid #ddd;
    }
    .toggle-icon { display: none; }
    .module-body { grid-template-rows: 1fr !important; opacity: 1 !important; }
}

/* ── Color Utility ────────────────────────────────────────────────────── */

/* ── Dashboard Summary Card ───────────────────────────────────────────── */
.dashboard-summary {
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.summary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.summary-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.summary-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

.summary-total {
    font-size: 36px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -1px;
    margin-bottom: var(--spacing-md);
}

.summary-row {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.summary-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Market Indices Strip ─────────────────────────────────────────────── */
.indices-strip {
    display: flex;
    gap: var(--spacing-xs);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.indices-strip::-webkit-scrollbar { display: none; }

.index-chip {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 8px 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.index-name {
    font-size: 12px;
    color: var(--text-secondary);
}

.index-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.index-change {
    font-size: 12px;
    font-weight: 600;
}

/* ── Holdings Grid ────────────────────────────────────────────────────── */
.holdings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-sm);
}

.holding-card {
    padding: var(--spacing-md);
    transition: transform 0.2s var(--spring-smooth);
}

.holding-card:hover {
    transform: translateY(-1px);
}

.holding-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.holding-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.holding-sector-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-card-hover);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.holding-nav {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
}

.holding-nav-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.holding-nav-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.holding-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.holding-change {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.holding-return {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.holding-pnl {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.holding-bar-wrap {
    width: 100%;
    height: 3px;
    background: var(--surface-2);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.holding-bar {
    height: 100%;
    background: var(--status-info-dim);
    border-radius: 2px;
    transition: width 0.5s var(--spring-smooth);
}

/* .holding-weight: index page uses .holding-weight-label instead;
   report.html uses .holding-weight defined below in Report Page section */

/* ── Sector Performance ───────────────────────────────────────────────── */
.sector-card {
    padding: var(--spacing-md);
}

.sector-subtitle {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--spacing-xs) 0 2px;
}

.sector-divider {
    height: 1px;
    background: var(--surface-2);
    margin: var(--spacing-xs) 0;
}

.sector-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 0;
}

.sector-row + .sector-row {
    border-top: 0.5px solid var(--glass-1);
}

.sector-label {
    display: flex;
    flex-direction: column;
    min-width: 60px;
    flex-shrink: 0;
}

.sector-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.sector-weight {
    font-size: 10px;
    color: var(--text-tertiary);
}

.sector-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--glass-1);
    border-radius: 3px;
    overflow: hidden;
}

.sector-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s var(--spring-smooth);
}

.sector-bar-up {
    background: linear-gradient(90deg, var(--color-up-shadow), color-mix(in srgb, var(--color-up) 70%, transparent));
}

.sector-bar-down {
    background: linear-gradient(90deg, var(--color-down-shadow), color-mix(in srgb, var(--color-down) 70%, transparent));
}

.sector-change {
    font-size: 13px;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Reports Row (compact) ────────────────────────────────────────────── */
.reports-row {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.report-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 13px;
    transition: background 0.2s, transform 0.2s;
}

.report-pill:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
}

.report-pill-emoji { font-size: 16px; }

/* ── Mobile Responsive for Dashboard ──────────────────────────────────── */
@media (max-width: 430px) {
    .summary-total { font-size: 28px; }
    .summary-row { gap: var(--spacing-md); }

    .holdings-grid {
        grid-template-columns: 1fr;
    }

    .indices-strip { gap: 6px; }
    .index-chip { padding: 6px 10px; }
    .index-name { font-size: 11px; }
    .index-price { font-size: 12px; }

    .sector-label { min-width: 50px; }
    .sector-change { min-width: 40px; font-size: 12px; }
}

/* ── Report Page: Summary Strip ──────────────────────────────────────── */
.summary-strip {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.summary-value {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Report Page: Data Modules Note ──────────────────────────────────── */
.data-modules-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
}

/* ── Report Page: Weight Bar (reuse from dashboard) ──────────────────── */
.holding-weight {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.weight-bar {
    flex: 1;
    height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    overflow: hidden;
}

.weight-fill {
    height: 100%;
    background: var(--status-info);
    border-radius: 2px;
    transition: width 0.5s var(--spring-smooth);
}

.weight-text {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Holding Weight Label (index page) ──────────────────────────────── */
.holding-weight-label {
    font-size: 10px;
    color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase A6: Liquid Glass Visual Deepening
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mesh Drift Background Animation ─────────────────────────────────── */
.mesh-gradient {
    animation: meshDrift 30s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mesh-gradient { animation: none; }
}

/* ── Card Three-Layer Shadow ─────────────────────────────────────────── */
.glass {
    box-shadow:
        0 0 0 0.5px var(--surface-2),
        0 4px 16px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 var(--bg-card);
}

.glass-deep {
    box-shadow:
        0 0 0 0.5px var(--bg-card-hover),
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 var(--separator);
}

/* ── Entrance Animation (Fade-in Up-slide) ───────────────────────────── */
.fade-in-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s var(--spring-smooth), transform 0.5s var(--spring-smooth);
}

.fade-in-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── PnL Glow Pulse ──────────────────────────────────────────────────── */
@keyframes glow-pulse-up {
    0%   { text-shadow: 0 0 0 transparent; }
    50%  { text-shadow: 0 0 8px var(--color-up-shadow); }
    100% { text-shadow: 0 0 0 transparent; }
}

@keyframes glow-pulse-down {
    0%   { text-shadow: 0 0 0 transparent; }
    50%  { text-shadow: 0 0 8px var(--color-down-shadow); }
    100% { text-shadow: 0 0 0 transparent; }
}

.pnl-glow.color-up {
    animation: glow-pulse-up 3s ease-in-out infinite;
}

.pnl-glow.color-down {
    animation: glow-pulse-down 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pnl-glow.color-up,
    .pnl-glow.color-down { animation: none; }
    .fade-in-card { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase A: New Component Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chart Nav Pills (NAV trend filter) ──────────────────────────────── */
.chart-nav-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pill-btn {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 0.5px solid var(--glass-3);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-family: inherit;
}

.pill-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.pill-btn.active {
    background: var(--white-12);
    color: var(--text-primary);
    border-color: var(--text-quaternary);
}

/* ── Risk Card (A4) ──────────────────────────────────────────────────── */
.risk-level-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.risk-低,
.risk-低风险 {
    background: var(--status-info-dim);
    color: var(--status-info);
}

.risk-中,
.risk-中等,
.risk-中风险 {
    background: var(--status-caution-dim);
    color: var(--status-caution);
}

.risk-高,
.risk-高风险 {
    background: var(--status-anomaly-dim);
    color: var(--status-anomaly);
}

.risk-card {
    padding: var(--spacing-lg);
}

.risk-advice {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.risk-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.risk-item {
    display: flex;
    gap: var(--spacing-xs);
    align-items: flex-start;
}

.risk-bullet {
    color: var(--status-anomaly);
    font-size: 8px;
    margin-top: 5px;
    flex-shrink: 0;
}

.risk-text {
    font-size: 13px;
    color: var(--white-85);
    line-height: 1.5;
}

.risk-insight {
    font-size: 12px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--glass-1);
    padding-top: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

/* ── Report Headline (A5) ────────────────────────────────────────────── */
.report-pill-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-headline {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 0 8px;
    line-height: 1.4;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Charts Grid (A1-A3) ─────────────────────────────────────────────── */
/* .chart-card already defined above with padding + margin-bottom */

/* ═══════════════════════════════════════════════════════════════════════
   Phase B: Page Component Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Portfolio: 4-metric layout ───────────────────────────────────────── */
.fund-4metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0;
}

.fund-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fund-metric-label {
    font-size: 10px;
    color: var(--text-tertiary);
}

.fund-metric-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ── Portfolio: Rank strip ────────────────────────────────────────────── */
.fund-rank-strip {
    display: flex;
    gap: 4px;
    margin-top: var(--spacing-xs);
    flex-wrap: wrap;
}

.rank-chip {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-secondary);
}

.rank-top {
    background: var(--color-down-bg);
    color: var(--color-down);
}

.rank-bottom {
    background: var(--color-up-bg);
    color: var(--color-up);
}

/* ── Portfolio: Sector detail table ───────────────────────────────────── */
.sector-detail-card {
    padding: var(--spacing-md);
}

.sector-detail-header {
    display: grid;
    grid-template-columns: 1fr 1fr 80px 80px;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-1);
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sector-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr 80px 80px;
    gap: var(--spacing-sm);
    padding: 8px 0;
    border-bottom: 0.5px solid var(--surface-0);
    font-size: 13px;
    align-items: center;
}

.sector-detail-row:last-child { border-bottom: none; }

.sector-detail-name {
    font-weight: 500;
    color: var(--text-primary);
}

.sector-detail-value {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.sector-detail-pct {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sector-detail-change {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Portfolio: Holding changes ───────────────────────────────────────── */
.changes-card {
    padding: var(--spacing-md);
}

.changes-section {
    margin-bottom: var(--spacing-sm);
}

.changes-section:last-child { margin-bottom: 0; }

.changes-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.change-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 0;
    font-size: 13px;
}

.change-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.change-new {
    background: var(--color-down-bg);
    color: var(--color-down);
}

.change-removed {
    background: var(--color-up-bg);
    color: var(--color-up);
}

.change-drift {
    background: var(--accent-dim, rgba(88, 166, 255, 0.12));
    color: var(--accent-blue);
}

.change-name {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.change-sector {
    font-size: 11px;
    color: var(--text-tertiary);
}

.change-value {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ── Portfolio: Rhythm ────────────────────────────────────────────────── */
.rhythm-card {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    flex-wrap: wrap;
}

.rhythm-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rhythm-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.rhythm-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Analysis: Market state badge ─────────────────────────────────────── */
.market-state-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.state-强化 { background: var(--status-info-dim); color: var(--status-info); }
.state-扩散 { background: var(--status-info-dim); color: var(--status-info); }
.state-分歧 { background: var(--status-caution-dim); color: var(--status-caution); }
.state-承压 { background: var(--status-anomaly-dim); color: var(--status-anomaly); }

.bias-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--danger-dim, rgba(255, 107, 107, 0.12));
    color: var(--danger, rgba(255, 107, 107, 0.9));
}

/* ── Analysis: Command card ───────────────────────────────────────────── */
.command-card {
    padding: var(--spacing-lg);
}

.command-line {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.7;
    padding: var(--spacing-xs) 0;
}

.command-line + .command-line {
    border-top: 0.5px solid var(--border-1);
}

/* ── Analysis: Triggers ───────────────────────────────────────────────── */
.triggers-card {
    padding: var(--spacing-md);
}

.trigger-line {
    font-size: 13px;
    color: var(--white-85);
    line-height: 1.6;
    padding: 6px 0;
}

.trigger-line + .trigger-line {
    border-top: 0.5px solid var(--glass-1);
}

/* ── Analysis: Themes ─────────────────────────────────────────────────── */
.themes-card {
    padding: var(--spacing-md);
}

.theme-line {
    font-size: 13px;
    color: var(--white-85);
    line-height: 1.6;
    padding: 6px 0;
}

.theme-line + .theme-line {
    border-top: 0.5px solid var(--glass-1);
}

/* ── Analysis: Attribution ────────────────────────────────────────────── */
.attribution-drivers {
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.driver-item {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.driver-positive {
    background: var(--color-down-bg-subtle);
    border: 0.5px solid var(--color-down-bg);
}

.driver-negative {
    background: var(--color-up-bg);
    border: 0.5px solid var(--color-up-bg);
}

.driver-label {
    font-size: 11px;
    color: var(--text-tertiary);
    display: block;
    margin-bottom: 4px;
}

.driver-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Analysis: Benchmark ──────────────────────────────────────────────── */
.benchmark-card {
    padding: var(--spacing-md);
}

.benchmark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    font-size: 12px;
    color: var(--text-tertiary);
}

.benchmark-portfolio {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.benchmark-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 0;
    border-bottom: 0.5px solid var(--surface-0);
    font-size: 13px;
}

.benchmark-row:last-child { border-bottom: none; }

.benchmark-name {
    min-width: 80px;
    color: var(--text-secondary);
}

.benchmark-return {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
}

.benchmark-excess {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.benchmark-icon { font-size: 12px; }

/* ── Analysis: Sector attribution ─────────────────────────────────────── */
.sector-attr-card {
    padding: var(--spacing-md);
}

.sector-attr-title {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sector-attr-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--surface-0);
    font-size: 13px;
}

.sector-attr-row:last-child { border-bottom: none; }

.sector-attr-name { color: var(--text-secondary); }
.sector-attr-pnl { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Analysis: Advice card ────────────────────────────────────────────── */
.advice-card {
    padding: var(--spacing-lg);
}

.advice-text {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.7;
}

/* ── Analysis: Score ──────────────────────────────────────────────────── */
.score-card {
    padding: var(--spacing-lg);
    text-align: center;
}

.score-main {
    margin-bottom: var(--spacing-xs);
}

.score-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.score-unit {
    font-size: 18px;
    color: var(--text-tertiary);
}

.score-verdict {
    font-size: 14px;
    color: var(--text-secondary);
}

.score-redflags {
    font-size: 13px;
    color: var(--color-up);
    margin-top: var(--spacing-xs);
}

/* ── Analysis: Fund analysis ──────────────────────────────────────────── */
.fund-analysis-card {
    padding: var(--spacing-md);
}

.fa-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--surface-0);
    font-size: 13px;
}

.fa-item:last-child { border-bottom: none; }

.fa-label { color: var(--text-secondary); }
.fa-value { font-weight: 500; color: var(--text-primary); }

/* ── Risk: Profile card ───────────────────────────────────────────────── */
.risk-profile-card {
    padding: var(--spacing-lg);
}

.risk-notes {
    font-size: 12px;
    color: var(--text-tertiary);
    border-top: 1px solid var(--glass-1);
    padding-top: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

/* ── Risk: Alerts ─────────────────────────────────────────────────────── */
.alerts-card {
    padding: var(--spacing-md);
}

.alert-item {
    display: flex;
    gap: var(--spacing-xs);
    padding: 8px 0;
    border-bottom: 0.5px solid var(--surface-0);
    align-items: flex-start;
}

.alert-item:last-child { border-bottom: none; }

.alert-high {
    background: var(--status-anomaly-dim);
    margin: 0 calc(var(--spacing-md) * -1);
    padding: 8px var(--spacing-md);
}

.alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

.alert-content { flex: 1; }

.alert-title {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.alert-detail {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.alerts-empty {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    justify-content: center;
}

.alerts-empty-icon { font-size: 20px; }
.alerts-empty-text { font-size: 14px; color: var(--text-secondary); }

/* ── Risk: Concentration ──────────────────────────────────────────────── */
.concentration-summary {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    flex-wrap: wrap;
}

.conc-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conc-label {
    font-size: 11px;
    color: var(--text-tertiary);
}

.conc-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.conc-warn { color: var(--status-caution); }

/* ── Risk: Analysis detail ────────────────────────────────────────────── */
.analysis-detail-card {
    padding: var(--spacing-md);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--surface-0);
    font-size: 13px;
}

.detail-row:last-child { border-bottom: none; }

.detail-label { color: var(--text-secondary); }
.detail-value { font-weight: 500; color: var(--text-primary); }

/* ── Risk: Fee table ──────────────────────────────────────────────────── */
.fee-table {
    margin-top: var(--spacing-sm);
}

.fee-table-header {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-1);
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fee-table-row {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: var(--spacing-sm);
    padding: 6px 0;
    border-bottom: 0.5px solid var(--surface-0);
    font-size: 13px;
}

.fee-table-row:last-child { border-bottom: none; }

.fee-fund-name {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fee-rate {
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Risk: Insights ───────────────────────────────────────────────────── */
.insights-card {
    padding: var(--spacing-md);
}

.insight-item {
    display: flex;
    gap: var(--spacing-xs);
    padding: 8px 0;
    border-bottom: 0.5px solid var(--surface-0);
    align-items: flex-start;
}

.insight-item:last-child { border-bottom: none; }

.insight-icon { font-size: 14px; flex-shrink: 0; }

.insight-text {
    font-size: 13px;
    color: var(--white-85);
    line-height: 1.5;
}

/* ── Risk: Calendar ───────────────────────────────────────────────────── */
.calendar-card {
    padding: var(--spacing-md);
}

.calendar-note {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
    line-height: 1.5;
}

.calendar-note + .calendar-note {
    border-top: 0.5px solid var(--surface-0);
}

/* ── Mobile responsive for Phase B ────────────────────────────────────── */
@media (max-width: 430px) {
    .fund-4metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .sector-detail-header,
    .sector-detail-row {
        grid-template-columns: 1fr 1fr 60px 60px;
        font-size: 12px;
    }

    .attribution-drivers {
        flex-direction: column;
    }

    .command-line { font-size: 14px; }

    .score-number { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   Phase 1: Navigation + New Component Styles
   ══════════════════════════════════════════════════════════════ */

/* ── Page Nav Bar (detail page back button) ────────────────── */
.page-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    margin-bottom: 8px;
}
.btn-back {
    padding: 8px 16px;
    border: 0.5px solid var(--white-12);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    backdrop-filter: blur(var(--blur-nav));
    -webkit-backdrop-filter: blur(var(--blur-nav));
}
.btn-back:active {
    background: var(--glass-3);
}
.page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Segmented Control ─────────────────────────────────────── */
.segment-control {
    display: flex;
    background: var(--surface-2);
    border: 0.5px solid var(--separator);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 16px;
}
.segment-item {
    flex: 1;
    text-align: center;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.segment-item.active {
    background: var(--white-12);
    color: var(--white-92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.segment-item:active {}
/* ── Tab Panel ─────────────────────────────────────────────── */
.tab-panel {
    margin-top: 4px;
    animation: tabSlideIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 200px;
}
.tab-panel.tab-exit {
    animation: tabSlideOut 0.15s ease-in forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tabSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes tabSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-12px); }
}

/* ── Fund Card (research page holdings list) ───────────────── */
.fund-card {
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
}
.fund-card:active {
    background: var(--glass-3);
}
.fund-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.fund-card-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}
.fund-card-nav {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fund-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.fund-card-code {
    font-size: 12px;
    color: var(--text-tertiary);
}
.fund-card-change {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Color utilities ───────────────────────────────────────── */
.color-flat { color: var(--text-tertiary); }

/* ── Holdings grid (report page vertical list) ─────────────── */
.container .holdings-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Skeleton shimmer ──────────────────────────────────────── */

/* ── Reading surface (high contrast for dense text) ────────── */
.reading-surface {
    background: var(--reading-surface);
    backdrop-filter: blur(var(--blur-modal));
    -webkit-backdrop-filter: blur(var(--blur-modal));
    border: 0.5px solid var(--border-1);
    border-radius: 16px;
    padding: 16px;
}

/* ── NavigationManager Push/Pop Animations ─────────────────── */
.nav-page {
    width: 100%;
}
@keyframes navPushIn {
    from { transform: translateX(100%); opacity: 0.8; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes navPushOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-30%); opacity: 0.5; }
}
@keyframes navPopIn {
    from { transform: translateX(-30%); opacity: 0.5; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes navPopOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(100%); opacity: 0.8; }
}
.nav-push-in  { animation: navPushIn 0.3s var(--spring-smooth) forwards; }
.nav-push-out { animation: navPushOut 0.25s ease-in forwards; }
.nav-pop-in   { animation: navPopIn 0.3s var(--spring-smooth) forwards; }
.nav-pop-out  { animation: navPopOut 0.25s ease-in forwards; }

/* ── Signal Grid (homepage 2x2 entry cards) ─────────────────── */

/* ── Context Menu (长按菜单) ──────────────────────────────────── */
.context-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-context-menu);
    background: var(--overlay-scrim);
    backdrop-filter: blur(var(--blur-overlay));
    -webkit-backdrop-filter: blur(var(--blur-overlay));
}
.context-menu {
    position: fixed;
    z-index: calc(var(--z-context-menu) + 1);
    background: var(--overlay-surface);
    backdrop-filter: blur(var(--blur-modal)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur-modal)) saturate(160%);
    border: 0.5px solid var(--glass-3-border);
    border-radius: 14px;
    padding: 6px;
    min-width: 180px;
    box-shadow: var(--shadow-overlay);
    animation: contextMenuPop 0.2s var(--spring-bounce);
}
@keyframes contextMenuPop {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.context-menu-item {
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.context-menu-item:active {
    background: var(--glass-3);
}
.context-menu-item .menu-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}
.context-menu-divider {
    height: 0.5px;
    background: var(--bg-card-hover);
    margin: 4px 10px;
}

/* ── Module Header Glow Bar ──────────────────────────────────── */
.module-header h2 {
    position: relative;
}
.module-header h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(88, 166, 255, 0.6), transparent);
    border-radius: 1px;
    transition: width 0.4s var(--spring-smooth);
}
.module-header:hover h2::after {
    width: 80px;
}


/* ═══ v24: Unified Design System ═══════════════════════════════ */

.page-wrap { min-height: 60vh; }

/* ── More hub ──────────────────────────────────────────────────────── */
.more-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 16px;
}

.more-card {
    min-width: 0;
    margin: 0;
}

.more-card-primary {
    min-height: 238px;
}

.more-card-secondary {
    min-height: 194px;
}

.more-card .section-title {
    margin-bottom: 8px;
}

.more-entry-list {
    border-top: 1px solid var(--surface-2);
}

.more-entry {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    column-gap: 8px;
    min-height: 60px;
    padding: 9px 0;
    border-bottom: 1px solid var(--surface-2);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}

.more-entry:last-child {
    border-bottom: 0;
}

.more-entry-icon,
.more-entry-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.more-entry-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.more-entry-title,
.more-entry-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.more-entry-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.more-entry-desc {
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 16px;
}

.more-entry-arrow {
    justify-content: flex-end;
}

@media (hover: hover) {
    .more-entry:hover {
        background: var(--glass-2);
        color: var(--text-primary);
    }

    .more-entry:hover .more-entry-icon,
    .more-entry:hover .more-entry-arrow {
        color: var(--accent);
    }
}

.more-entry:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.more-entry:active {
    background: var(--glass-2);
}

@media (max-width: 767px) {
    .more-hub {
        grid-template-columns: minmax(0, 1fr);
    }

    .more-card-primary,
    .more-card-secondary {
        min-height: 0;
    }
}

/* ── Card ──────────────────────────────────────────────────── */
.card {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    backdrop-filter: blur(var(--blur-card));
    -webkit-backdrop-filter: blur(var(--blur-card));
    border: 1px solid var(--border-1);
    overflow: hidden;
    transition: transform 0.2s var(--spring-smooth);
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-1px);
    }
}

.card:active {
    transform: translateY(0);
}

/* ── Ripple Effect ──────────────────────────────────────────────── */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Fund Row ──────────────────────────────────────────────── */
.fund-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-card);
    cursor: pointer;
    transition: background 0.15s;
}
.fund-row:last-child { border-bottom: none; }
.fund-row:active { background: var(--bg-card-hover); border-radius: 8px; }
.fund-name { font-size: 14px; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fund-right { text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 12px; }
.fund-mv { font-size: 12px; color: var(--text-tertiary); margin-left: 8px; }

/* ── Metric ────────────────────────────────────────────────── */
.metric { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 8px; }
.metric-label { font-size: 13px; color: var(--text-tertiary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-value { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 8px; }

/* ── Badge ─────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Button ────────────────────────────────────────────────── */
.btn-glass {
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent-glow);
    padding: 8px 20px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-glass:active { background: var(--accent-dim); }

/* ── 投资档案 ───────────────────────────────────────────────── */
.profile-progress { margin: 0 0 16px; }
.profile-progress-copy { display: flex; justify-content: space-between; gap: 12px; color: var(--text-tertiary); font-size: 12px; }
.profile-progress-track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.profile-progress-track > div { height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.profile-question { max-width: 720px; }
.profile-question h2 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
.profile-question > p { margin: 0 0 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.profile-field { margin: 0 0 16px; }
.profile-field > label:first-child, .profile-weight > span { display: block; margin-bottom: 7px; color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.profile-field b { margin-left: 3px; color: var(--status-anomaly); }
.profile-field input, .profile-field select, .profile-weight input, .profile-holding select { box-sizing: border-box; width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); font: inherit; }
.profile-check { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 11px; border: 1px solid var(--border-1); border-radius: 8px; color: var(--text-primary); cursor: pointer; }
.profile-check input { width: 18px; height: 18px; margin: 0; }
.profile-actions { display: flex; max-width: 720px; gap: 10px; }
.profile-actions .btn-glass { flex: 1; min-height: 44px; }
.profile-allocation { display: grid; gap: 16px; }
.profile-weight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-weight { min-width: 0; padding: 12px; border: 1px solid var(--border-1); border-radius: 8px; background: var(--surface-1); }
.profile-weight input { margin: 0 0 6px; }
.profile-weight small, .profile-note, .profile-holding small { display: block; color: var(--text-tertiary); font-size: 12px; line-height: 1.4; }
.profile-weight-fixed strong { display: block; margin: 7px 0; color: var(--text-primary); font-size: 20px; font-variant-numeric: tabular-nums; }
.profile-holding-list { border-top: 1px solid var(--border-1); }
.profile-holding-list h3 { margin: 14px 0 4px; color: var(--text-primary); font-size: 14px; }
.profile-holding { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-1); }
.profile-holding strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary-row { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--border-1); }
.profile-summary-row span { color: var(--text-tertiary); font-size: 13px; }
.profile-summary-row strong { max-width: 65%; color: var(--text-primary); font-size: 13px; text-align: right; word-break: break-word; }
.profile-summary-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-summary-title span { padding: 3px 8px; border-radius: 4px; background: var(--accent-dim); color: var(--accent); font-size: 12px; }

@media (max-width: 480px) {
    .profile-weight-grid { grid-template-columns: minmax(0, 1fr); }
    .profile-holding { grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .profile-holding select { width: 100%; }
    .profile-actions { position: sticky; bottom: 8px; padding: 8px; background: var(--bg-base); }
}

/* ── Section Card (clickable) ──────────────────────────────── */
.section-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid var(--border-1);
}
.section-card:active { background: var(--bg-card-hover); }
.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-link { font-size: 12px; color: var(--accent); font-weight: 400; }
/* Decision group title — mirrors section-title visual weight */
.decision-group-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 0 6px;
}
/* Module title icon standardization */
.section-title .section-icon,
.decision-group-title .section-icon {
    font-size: 16px;
    line-height: 1;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    width: 20px;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Icon Glow — Scheme E (图标光晕) ──────────────────────── */
.glow-icon { text-shadow: 0 0 12px currentColor; }
.glow-red    { color: var(--color-up); text-shadow: 0 0 14px var(--color-up-glow); }
.glow-green  { color: var(--color-down); text-shadow: 0 0 14px var(--color-down-glow); }
.glow-blue   { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.glow-purple { color: var(--purple); text-shadow: 0 0 14px var(--purple-dim); }
.glow-cyan   { color: var(--ai); text-shadow: 0 0 14px var(--ai-dim); }
.glow-amber  { color: var(--orange); text-shadow: 0 0 14px var(--orange-dim); }
/* Section title SVG icon glow */
.section-icon.glow-red svg    { filter: drop-shadow(0 0 6px var(--color-up-glow)); }
.section-icon.glow-green svg  { filter: drop-shadow(0 0 6px var(--color-down-glow)); }
.section-icon.glow-blue svg   { filter: drop-shadow(0 0 6px var(--accent-glow)); }
.section-icon.glow-purple svg { filter: drop-shadow(0 0 6px var(--purple-dim)); }
.section-icon.glow-cyan svg   { filter: drop-shadow(0 0 6px var(--ai-dim)); }
.section-icon.glow-amber svg  { filter: drop-shadow(0 0 6px var(--orange-dim)); }

/* ── Mini Fund Card (temperature) — glow variant ──────────── */
.fund-mini {
    padding: 12px;
    background: var(--surface-0);
    border-radius: 12px;
    border: 1px solid var(--glass-1);
    transition: background 0.15s;
}
.fund-mini:active { background: var(--surface-1); }
.fund-mini-name { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.fund-mini-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fund-mini-icon { font-size: 22px; line-height: 1; margin-bottom: 6px; }

/* ── Signal Grid (2x2) ─────────────────────────────────────── */
.signal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.signal-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid var(--border-1);
}
.signal-card:active { background: var(--bg-card-hover); }
.signal-card-icon { font-size: 20px; margin-bottom: 6px; }
.signal-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.signal-card-value { font-size: 12px; color: var(--text-secondary); }
.signal-card-link { font-size: 11px; color: var(--accent); margin-top: 6px; }

/* ── Big Number ────────────────────────────────────────────── */
.big-number { font-size: 32px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.change-number { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-text { font-size: 13px; color: var(--text-secondary); }

/* ═══ v24: Desktop Grid Layout ════════════════════════════════ */
@media (min-width: 768px) {
    /* 2-column card grid for homepage signal cards */
    .signal-grid { grid-template-columns: repeat(4, 1fr); }

    /* Fund rows: wider, more compact */
    .fund-row { padding: 14px 0; }

    /* Tab bar: full width, no scroll needed for most cases */
    .tabs { gap: 4px; }
    .tab-item { padding: 12px 20px; font-size: 15px; }

    /* Cards: slightly more padding on desktop */
    .card { padding: 20px; }

    /* Big numbers: larger on desktop */
    .big-number { font-size: 36px; }

    /* Section cards: hover effect */
    .section-card:hover, .card:hover {
        background: var(--glass-2);
    }
}

@media (min-width: 1280px) {
    /* 3-column for some grids on very wide screens */
    .signal-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

/* ═══ v3.0: AI指挥舱 ═══════════════════════════════════════════ */

/* ── 置信度环形图 ──────────────────────────────────────────────── */
.confidence-ring {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: conic-gradient(
        var(--status-info) 0% var(--pct, 0%),
        var(--bg-card-hover) var(--pct, 0%) 100%
    );
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.confidence-ring::after {
    content: attr(data-value);
    position: absolute;
    background: var(--bg-base);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── 迷你进度条 ────────────────────────────────────────────────── */
.mini-bar {
    height: 4px;
    background: var(--bg-card-hover);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}
.mini-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s var(--spring-smooth);
}
.mini-bar-fill.up { background: var(--color-up); }
.mini-bar-fill.down { background: var(--color-down); }

/* ── 状态badge (大号) ──────────────────────────────────────────── */
.state-badge-lg {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── 模块折叠 ──────────────────────────────────────────────────── */
.module-section {
    background: var(--bg-card);
    border-radius: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border-1);
    overflow: hidden;
    backdrop-filter: blur(var(--blur-card));
    -webkit-backdrop-filter: blur(var(--blur-card));
}
.module-header:active {
    background: var(--bg-card-hover);
}
.module-arrow {
    transition: transform 0.3s var(--spring-smooth);
    color: var(--text-tertiary);
    font-size: 12px;
}
.module-arrow.open {
    transform: rotate(90deg);
}
.module-body {
    max-height: none;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease;
    will-change: max-height, opacity;
}
.module-body > div {
    overflow: hidden;
}
.module-body-inner {
    padding: 0 16px 14px;
}

/* ── AI决策卡 ──────────────────────────────────────────────────── */
.ai-decision-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border-1);
    cursor: pointer;
    transition: background 0.15s;
    backdrop-filter: blur(var(--blur-card));
    -webkit-backdrop-filter: blur(var(--blur-card));
}
.ai-decision-card:active { background: var(--bg-card-hover); }

.ai-decision-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ai-decision-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-decision-time {
    font-size: 11px;
    color: var(--text-tertiary);
}

.ai-decision-body {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.ai-decision-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ai-decision-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ai-decision-confidence {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ai-decision-confidence-label {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.confidence-ring-svg {
    display: block;
}
.ai-decision-confidence-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ai-decision-verdict {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 12px;
    border-left: none;
}

.ai-decision-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.ai-decision-footer {
    font-size: 12px;
    color: var(--accent);
    text-align: right;
    margin-top: 8px;
}

/* ── AI Pill 操作标签 ──────────────────────────────────────── */
.ai-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.ai-pill-allowed {
    background: var(--status-info-dim);
    color: var(--status-info);
}
.ai-pill-forbidden {
    background: var(--status-anomaly-dim);
    color: var(--status-anomaly);
}

/* ── 新闻影响卡 ────────────────────────────────────────────── */
/* Overlay variant (homepage compact card) */
.news-overlay-item {
    padding: 6px 10px;
    background: var(--surface-1);
    border-radius: 8px;
    margin-bottom: 4px;
}
.news-overlay-item .news-overlay-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}
.news-overlay-item .news-overlay-label {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
}
.news-overlay-item .news-overlay-sector,
.news-overlay-item .news-overlay-effect {
    font-size: 10px;
    color: var(--text-tertiary);
}
.news-overlay-item .news-overlay-title {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
}
.news-overlay-item .news-overlay-affects {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Full list variant (research page) */
.news-impact-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--glass-1);
    -webkit-user-select: none;
    user-select: none;
    transition: none;
}
.news-impact-item:last-child { border-bottom: none; }
.news-impact-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.news-impact-content { flex: 1; min-width: 0; overflow: hidden; }
.news-impact-title {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-impact-funds {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ── 关注信号 ──────────────────────────────────────────────────── */
.signal-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.signal-check-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--text-tertiary);
}

/* ── 快捷入口 (4格) ────────────────────────────────────────────── */
.quick-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.quick-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--bg-card);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid var(--border-1);
    text-decoration: none;
}
.quick-nav-item:active { background: var(--bg-card-hover); }
.quick-nav-icon { font-size: 22px; }
.quick-nav-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── 风险预警卡 ────────────────────────────────────────────────── */
.risk-alert-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    font-size: 13px;
}
.risk-alert-item.critical {
    background: var(--status-anomaly-dim);
    border-left: none;
}
.risk-alert-item.warning {
    background: var(--status-caution-dim);
    border-left: none;
}
.risk-alert-icon { flex-shrink: 0; }
.risk-alert-text { flex: 1; color: var(--text-primary); }
.risk-alert-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; margin-left: 8px; }

/* 时间衰减样式 */
.decay-fresh .risk-alert-time { color: var(--status-info); font-weight: 600; }
.decay-recent .risk-alert-time { color: var(--orange); }
.decay-old .risk-alert-time { color: var(--text-tertiary); }
.decay-stale { opacity: 0.5; }
.decay-stale .risk-alert-time { color: var(--text-tertiary); font-size: 10px; }

/* ── Desktop responsive ────────────────────────────────────────── */
@media (min-width: 768px) {
    .ai-decision-body { gap: 24px; }
    .confidence-ring { width: 60px; height: 60px; }
    .confidence-ring::after { width: 46px; height: 46px; font-size: 14px; }
    .quick-nav { gap: 14px; }
}

/* ── Verdict Structured Highlights ─────────────────────────── */
.hl-number {
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hl-code {
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.92em;
    background: var(--status-info-dim);
    padding: 1px 4px;
    border-radius: 4px;
}
.hl-positive {
    color: var(--color-up);
    font-weight: 600;
}
.hl-negative {
    color: var(--color-down);
    font-weight: 600;
}
.hl-action {
    color: var(--orange);
    font-weight: 500;
    border-bottom: 1px dashed var(--orange);
}
.hl-theme {
    color: var(--purple);
    font-weight: 500;
}

/* ── iOS Sheet Panel ───────────────────────────────────────── */
.sheet-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-scrim, rgba(0,0,0,0.4));
    z-index: var(--z-context-menu);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.sheet-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.sheet-panel {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-context-menu) + 1);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sheet-panel.active {
    opacity: 1;
    pointer-events: auto;
}
.sheet-inner {
    width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    background: var(--overlay-surface);
    border: 0.5px solid var(--glass-2-border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

/* Shared sheets include inbox message details; each theme supplies its own material. */
[data-theme="light"] .sheet-inner {
    background: linear-gradient(155deg, rgba(255,255,255,0.92) 0%, rgba(241,248,255,0.84) 48%, rgba(228,237,248,0.84) 100%);
    border-color: rgba(255,255,255,0.94);
    box-shadow: 0 24px 58px rgba(45,57,76,0.24), 0 1px 0 rgba(255,255,255,0.88) inset;
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
}
[data-theme="light"] .sheet-overlay { background: rgba(43,55,72,0.26); }
[data-theme="light"] .sheet-header { border-bottom-color: rgba(126,145,169,0.16); }
[data-theme="light"] .inbox-detail-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.70), rgba(239,247,255,0.48));
    border-color: rgba(255,255,255,0.86);
    box-shadow: 0 8px 18px rgba(70,86,108,0.09), inset 0 1px 0 rgba(255,255,255,0.74);
}
[data-theme="light"] .inbox-detail-card.primary {
    background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(223,240,255,0.60));
    border-color: rgba(191,222,247,0.76);
}
[data-theme="light"] .inbox-detail-card.muted { background: rgba(255,255,255,0.52); }
[data-theme="light"] .inbox-detail-command .cmd-label,
[data-theme="light"] .inbox-detail-command .cmd-fund-tag { background: rgba(255,255,255,0.54); }

.sheet-panel.active .sheet-inner {
    transform: translateY(0);
}
.sheet-handle {
    width: 36px; height: 5px;
    background: var(--text-quaternary);
    border-radius: 3px;
    margin: 8px auto 0;
    flex-shrink: 0;
}
.sheet-header {
    padding: 12px 16px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-bottom: 0.5px solid var(--separator, rgba(84,84,88,0.65));
}
.sheet-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sheet-close {
    width: 44px; height: 44px;
    min-height: 44px;
    border-radius: 22px;
    background: var(--glass-3);
    border: none;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sheet-body {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 0%;
    min-height: 0;
    touch-action: pan-y;
}
.sheet-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sheet-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.sheet-badge-bull {
    background: var(--color-up-bg);
    color: var(--color-up);
}
.sheet-badge-bear {
    background: var(--color-down-bg);
    color: var(--color-down);
}
.sheet-badge-neutral {
    background: var(--bg-card-hover);
    color: var(--text-tertiary, var(--text-tertiary));
}
.sheet-content-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
}
.sheet-content-text p {
    margin-bottom: 12px;
}
.sheet-related {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 0.5px solid var(--separator, rgba(84,84,88,0.65));
}
.sheet-related-title {
    font-size: 12px;
    color: var(--text-tertiary, var(--text-tertiary));
    margin-bottom: 8px;
}
.sheet-fund-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
    border-radius: 8px;
    background: var(--status-info-dim);
    border: 0.5px solid var(--status-info);
    font-size: 12px;
    color: var(--status-info);
}
.inbox-detail-sheet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.inbox-detail-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.inbox-detail-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
}
.inbox-detail-headline {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-primary);
}
.inbox-detail-card {
    border-radius: 14px;
    background: var(--surface-1);
    border: 0.5px solid var(--separator, rgba(84,84,88,0.65));
    padding: 12px;
}
.inbox-detail-card.primary {
    background: linear-gradient(135deg, var(--surface-1), var(--status-info-dim));
}
.inbox-detail-card.muted {
    background: var(--bg-card-hover);
}
.inbox-detail-section-title {
    margin-bottom: 8px;
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.inbox-detail-command,
.inbox-detail-note {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.75;
}
.inbox-detail-command .cmd-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--separator, rgba(84,84,88,0.25));
}
.inbox-detail-command .cmd-line:last-child { border-bottom: none; }
.inbox-detail-command .cmd-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-2, rgba(120,120,128,0.08));
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.inbox-detail-command .cmd-label.risk { background: var(--status-anomaly-dim); color: var(--status-anomaly); }
.inbox-detail-command .cmd-label.warn { background: var(--status-caution-dim); color: var(--status-caution); }
.inbox-detail-command .cmd-label.positive { background: var(--color-down-bg); color: var(--color-down); }
.inbox-detail-command .cmd-label.info { background: var(--status-info-dim); color: var(--accent); }
.inbox-detail-command .cmd-body {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    word-break: break-word;
}
.inbox-detail-command .cmd-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.inbox-detail-command .cmd-fund-tag {
    display: inline-block;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--surface-2, rgba(120,120,128,0.08));
    color: var(--text-secondary);
    margin: 1px 2px;
}
.inbox-detail-command .cmd-divider {
    height: 1px;
    background: var(--separator, rgba(84,84,88,0.25));
    margin: 4px 0;
}
.inbox-detail-command .cmd-note {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 4px 0;
}
.inbox-detail-command .cmd-raw {
    white-space: pre-wrap;
    font-size: 13px;
    line-height: 1.6;
}
.inbox-detail-note {
    color: var(--text-secondary);
    font-size: 13px;
}
.inbox-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inbox-detail-action-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 0.5px solid var(--separator, rgba(84,84,88,0.65));
}
.inbox-detail-action-row:first-child {
    border-top: 0;
    padding-top: 0;
}
.inbox-detail-action-row:last-child {
    padding-bottom: 0;
}
.inbox-detail-action-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}
.inbox-detail-action-main span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.inbox-detail-action-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.inbox-detail-empty {
    padding: 28px 12px;
    color: var(--text-tertiary);
    text-align: center;
    font-size: 13px;
}
@media (max-width: 767px) {
    .inbox-detail-time {
        width: 100%;
        margin-left: 0;
    }
    .inbox-detail-action-row {
        align-items: flex-start;
    }
}
@media (min-width: 768px) {
    .sheet-overlay {
        background: var(--overlay-scrim);
    }
    .sheet-panel {
        align-items: center;
    }
    .sheet-inner {
        max-width: 520px;
        max-height: 75vh;
        border-radius: 16px;
        transform: scale(0.95);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
        opacity: 0;
    }
    .sheet-panel.active .sheet-inner {
        transform: scale(1);
        opacity: 1;
    }
    .sheet-handle {
        display: none;
    }
    .sheet-header {
        padding: 16px 20px 12px;
    }
    .sheet-title {
        font-size: 16px;
    }
    .sheet-close {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        font-size: 18px;
        background: var(--bg-card-hover);
    }
    .sheet-close:hover {
        background: var(--glass-3-border);
    }
    .sheet-body {
        padding: 16px 20px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── 新闻筛选栏 ────────────────────────────────────── */
.news-filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.news-filter-input {
    flex: 1;
    min-width: 120px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 0.5px solid var(--separator);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.news-filter-input:focus {
    border-color: var(--accent);
}
.news-filter-input::placeholder {
    color: var(--text-tertiary);
}
.news-filter-select {
    padding: 8px 10px;
    border-radius: 10px;
    border: 0.5px solid var(--separator);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='var(--text-tertiary)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.news-filter-select option {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    background-position: right 8px center;
}
.news-filter-select option:checked {
    background: var(--accent-bg) !important;
    color: var(--accent) !important;
}
.dir-opt:hover {
    background: var(--surface-1);
}

/* ── V4 New Components ────────────────────────────────────────────────── */

/* ── AI Active Card (渐变边框动画) ── */
.glass--ai-active {
    border: none;
    position: relative;
}
.glass--ai-active::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #00E5FF, #6CB4EE, #A78BFA, #00E5FF);
    background-size: 300% 300%;
    animation: gradientFlow 4s ease infinite;
    z-index: -1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Button System ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.btn-primary { background: var(--accent); color: var(--bg-base); }
.btn-primary:active { background: var(--accent-blue); }
.btn-ghost {
    background: var(--glass-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-1);
    backdrop-filter: blur(var(--blur-nav));
}
.btn-ghost:active { background: var(--glass-3); }
.btn-danger { background: var(--danger-dim); color: var(--danger); }

/* ── Tab System ── */
.tabs {
    display: flex;
    overflow-x: auto;
    gap: 0;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-item {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-tertiary);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--duration-fast), border-color var(--duration-fast);
}
.tab-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Toast ── */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    backdrop-filter: blur(var(--blur-nav));
    z-index: var(--z-update-banner);
    opacity: 0;
    transition: opacity var(--duration-normal);
}
.toast.show { opacity: 1; }
.toast-info { background: var(--status-info-dim); color: var(--status-info); border: 1px solid var(--status-info-dim); }
.toast-success { background: var(--color-down-bg); color: var(--color-down); border: 1px solid var(--color-down-bg); }
.toast-error { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(255,23,68,0.2); }

/* ── Skeleton Loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--glass-1) 25%, var(--glass-2) 50%, var(--glass-1) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* ── Typography ── */
.text-hero { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.text-h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.text-title { font-size: 20px; font-weight: 600; }
.text-body { font-size: 15px; font-weight: 400; }
.text-caption { font-size: 13px; font-weight: 500; }
.text-small { font-size: 12px; font-weight: 400; }
.text-micro { font-size: 11px; font-weight: 400; }
.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Utility ── */
.color-up { color: var(--color-up); }
.color-down { color: var(--color-down); }
.bg-up { background: var(--up-dim); }
.bg-down { background: var(--down-dim); }

/* ── Performance ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Responsive (unified breakpoints) ── */
@media (min-width: 768px) {
    .container { max-width: 900px; }
}
@media (min-width: 1024px) {
    .container { max-width: 1200px; }
}
@media (min-width: 1280px) {
    .container { max-width: 1400px; }
}

/* ═══ Migrated from base.html inline styles (V5) ═══════════════════════ */

/* ── Lock Screen ──────────────────────────────────────── */
.lock-screen { position:fixed; inset:0; z-index:var(--z-lock-screen); background:var(--lock-bg); display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
.lock-container { text-align:center; width:100%; max-width:320px; padding:20px; }
.lock-icon { font-size:48px; margin-bottom:16px; }
.lock-title { font-size:24px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.lock-subtitle { font-size:14px; color:var(--text-tertiary); margin-bottom:24px; }
.lock-dots { display:flex; justify-content:center; gap:12px; margin-bottom:16px; }
.lock-dots .dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--text-secondary); background:transparent; transition:all 0.15s ease; }
.lock-dots.shake { animation:shake 0.4s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.lock-error { color:var(--status-anomaly); font-size:13px; min-height:20px; margin-bottom:12px; }
.lock-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:240px; margin:0 auto; }
.lock-keypad .key { width:64px; height:64px; border-radius:50%; border:1px solid var(--glass-3-border); background:var(--bg-card); color:var(--text-primary); font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.lock-keypad .key:active { background:var(--glass-3-border); }
.lock-keypad .key-empty { visibility:hidden; }
.lock-keypad .key-del { font-size:20px; }

/* ── Lock Screen Animations ───────────────────────────── */
.lock-screen.unlocking { animation:unlockFade 0.4s ease forwards; }
@keyframes unlockFade { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.05)} }

.lock-dots .dot.filled { background:var(--accent, #3b82f6); border-color:var(--accent, #3b82f6); animation:dotFill 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dotFill { 0%{transform:scale(0.5);opacity:0.6} 50%{transform:scale(1.3)} 100%{transform:scale(1);opacity:1} }

.lock-dots.verifying .dot { animation:verifyingPulse 0.8s ease infinite; }
@keyframes verifyingPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* ── Skeleton Screen ──────────────────────────────────── */
.skeleton-page { padding:16px; }
.skeleton-card { background:var(--bg-card); border-radius:12px; padding:16px; margin-bottom:12px; }
.skeleton-line { height:16px; background:linear-gradient(90deg,var(--glass-3-border) 25%,var(--bg-card) 50%,var(--glass-3-border) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:4px; margin-bottom:8px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Inbox Panel ──────────────────────────────────────── */
.inbox-overlay { position:fixed; inset:0; background:var(--overlay-scrim); backdrop-filter:blur(var(--blur-overlay)); -webkit-backdrop-filter:blur(var(--blur-overlay)); z-index:var(--z-inbox); }
.inbox-panel {
    position:fixed;
    top:0;
    right:-320px;
    width:320px;
    max-width:85vw;
    bottom:0;
    height:auto;
    z-index:var(--z-inbox);
    display:flex;
    flex-direction:column;
    transition:right 0.3s ease;
}
.inbox-panel-inner {
    width:100%;
    height:100%;
    background:linear-gradient(155deg, rgba(74,87,111,0.90) 0%, var(--inbox-bg) 31%, rgba(20,24,34,0.98) 100%);
    border-left:1px solid rgba(220,234,255,0.17);
    backdrop-filter:blur(var(--blur-modal)) saturate(150%);
    -webkit-backdrop-filter:blur(var(--blur-modal)) saturate(150%);
    box-shadow:var(--shadow-overlay);
    display:flex;
    flex-direction:column;
    min-height:0;
}
.inbox-panel.open { right:0; }
@media (max-width: 767px) {
    .inbox-panel {
        inset:0;
        right:auto;
        width:100%;
        max-width:none;
        height:auto;
        flex-direction:row;
        align-items:flex-end;
        justify-content:center;
        pointer-events:none;
        transition:opacity 0.3s ease;
    }
    /* The panel owns the Home Indicator area, even while the sheet remains 85% tall. */
    .inbox-panel::after {
        content:'';
        position:absolute;
        z-index:0;
        left:0;
        right:0;
        bottom:calc(-1 * env(safe-area-inset-bottom, 0px));
        height:env(safe-area-inset-bottom, 0px);
        background:var(--inbox-bg);
        pointer-events:none;
    }
    .inbox-panel-inner {
        width:100%;
        /* The 85dvh sheet must include its own padding/border so iOS never
           appends the Home Indicator space below the visible drawer. */
        height:85vh;
        height:85dvh;
        max-height:85vh;
        max-height:85dvh;
        box-sizing:border-box;
        border-radius:16px 16px 0 0;
        border:1px solid rgba(220,234,255,0.17);
        border-bottom:0;
        overflow:hidden;
        transform:translateY(100%);
        transition:transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        will-change:transform;
    }
    .inbox-panel.open {
        right:auto;
        pointer-events:auto;
    }
    .inbox-panel.open .inbox-panel-inner {
        transform:translateY(0);
    }
    /* Keep the sheet surface above the panel's safe-area background. */
    .inbox-panel-inner {
        position:relative;
        z-index:1;
        background:linear-gradient(155deg, rgba(74,87,111,0.92) 0%, var(--inbox-bg) 34%, rgba(20,24,34,0.98) 100%);
        isolation:isolate;
    }
    .inbox-panel-inner > * {
        position:relative;
        z-index:1;
    }
}
.inbox-header { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid rgba(220,234,255,0.13); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10); }
.inbox-title { font-size:16px; font-weight:600; color:var(--text-primary); }
.inbox-actions { display:flex; gap:8px; }
.inbox-action-btn { background:none; border:none; color:var(--text-secondary); font-size:18px; cursor:pointer; padding:4px 8px; min-width:44px; min-height:44px; }
.inbox-list {
    flex:1;
    min-height:0;
    overflow-y:auto;
    box-sizing:border-box;
    padding:8px 8px calc(24px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior:contain;
}
.inbox-empty { text-align:center; color:var(--text-tertiary); padding:32px; font-size:14px; }
.inbox-empty.error { color:var(--status-anomaly); }
.inbox-summary-row { display:flex; flex-wrap:wrap; gap:6px; padding:4px 2px 8px; }
.inbox-summary-chip { padding:4px 8px; border-radius:999px; background:var(--surface-1); color:var(--text-secondary); font-size:11px; line-height:1.2; }
.inbox-summary-chip.risk { color:var(--status-anomaly); background:color-mix(in srgb, var(--status-anomaly) 10%, transparent); }
.inbox-filter-row { display:flex; gap:6px; padding:0 2px 10px; overflow-x:auto; scrollbar-width:none; }
.inbox-filter-row::-webkit-scrollbar { display:none; }
.inbox-filter-chip { flex-shrink:0; border:1px solid var(--glass-3); background:transparent; color:var(--text-secondary); border-radius:999px; padding:5px 10px; font-size:12px; line-height:1.2; cursor:pointer; }
.inbox-filter-chip.active { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); font-weight:600; }
.inbox-message-list { min-height:0; }
.inbox-date-group { padding:8px 4px 6px; color:var(--text-tertiary); font-size:11px; font-weight:600; }
.inbox-msg { padding:12px; border-radius:14px; margin-bottom:9px; cursor:pointer; background:var(--inbox-item-bg); border:1px solid var(--inbox-item-border); border-left:3px solid transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.14); position:relative; transition:transform var(--motion-press) var(--ease-out), background var(--motion-surface) var(--ease-out), border-color var(--motion-surface) var(--ease-out); }
.inbox-msg.unread { background:linear-gradient(135deg, rgba(82,141,201,0.22), var(--inbox-item-unread-bg)); border-color:rgba(139,195,255,0.28); box-shadow:inset 0 1px 0 rgba(235,247,255,0.12), 0 6px 16px rgba(0,0,0,0.18); }
.inbox-msg:active { transform:scale(0.985); background:var(--glass-3); }
.inbox-msg.unread::after { content:''; position:absolute; top:14px; right:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.inbox-msg.risk-critical,
.inbox-msg.risk-high { border-left-color:var(--status-anomaly); }
.inbox-msg.risk-medium { border-left-color:var(--status-caution); }
.inbox-msg-header { display:flex; justify-content:space-between; margin-bottom:4px; padding-right:10px; }
.inbox-msg-type { font-size:12px; color:var(--accent); }
.inbox-msg-time { font-size:11px; color:var(--text-tertiary); }
.inbox-msg-headline { font-size:13px; color:var(--text-primary); line-height:1.45; }
.inbox-msg-preview { margin-top:6px; color:var(--text-tertiary); font-size:12px; line-height:1.45; }
.inbox-msg.unread .inbox-msg-headline { font-weight:600; }
.inbox-risk-label { color:var(--status-caution); font-weight:600; }
.inbox-msg.risk-critical .inbox-risk-label,
.inbox-msg.risk-high .inbox-risk-label { color:var(--status-anomaly); }
.inbox-list-footer { padding:12px 8px 20px; text-align:center; color:var(--text-tertiary); font-size:12px; }
.inbox-badge { position:absolute; top:-4px; right:-4px; background:var(--status-anomaly); color: var(--text-primary, #fff); font-size:10px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; }

/* ── Desktop Sidebar ──────────────────────────────────── */
.sidebar { display:none; width:200px; background:var(--sidebar-bg); backdrop-filter:blur(var(--blur-nav)); -webkit-backdrop-filter:blur(var(--blur-nav)); border-right:0.5px solid var(--separator); flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:var(--z-nav); }
.sidebar-header { padding:16px; border-bottom:0.5px solid var(--separator); }
.sidebar-logo { font-size:16px; font-weight:600; color:var(--text-primary); text-decoration:none; }
.sidebar-nav { flex:1; padding:8px; display:flex; flex-direction:column; gap:2px; }
.sidebar-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--text-secondary); text-decoration:none; transition:all 0.2s; font-size:14px; }
.sidebar-item:hover { background:var(--bg-card); color:var(--text-primary); }
.sidebar-item.active { background:var(--accent-dim); color:var(--accent); }
.sidebar-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar-footer { padding:12px; border-top:0.5px solid var(--separator); display:flex; gap:8px; }
.sidebar-action { background:none; border:none; color:var(--text-secondary); font-size:18px; cursor:pointer; padding:6px; position:relative; border-radius:8px; }
.sidebar-action:hover { background:var(--bg-card); }

/* ── Mobile Top Nav ───────────────────────────────────── */
.top-nav { position:sticky; top:0; z-index:var(--z-nav); background:var(--nav-bg); backdrop-filter:blur(var(--blur-nav)); -webkit-backdrop-filter:blur(var(--blur-nav)); border-bottom:0.5px solid var(--separator); }
.top-nav-inner { display:flex; align-items:center; justify-content:space-between; height:48px; padding:0 16px; }
.top-nav-logo { font-size:16px; font-weight:600; color:var(--text-primary); text-decoration:none; }
.top-nav-right { display:flex; align-items:center; gap:8px; }
.nav-icon-btn {
    background:none;
    border:none;
    color:var(--text-secondary);
    cursor:pointer;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:8px;
    transition: background 0.2s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.nav-icon-btn:active {
    opacity: 0.7;
    background: var(--surface-1);
}
.nav-icon-btn svg {
    width:18px;
    height:18px;
}

/* ── Back Button (Mobile Sub-pages) ──────────────────────── */
.top-nav-back { display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--accent); cursor:pointer; padding:6px 8px 6px 2px; margin-left:-8px; border-radius:10px; transition:all 0.2s var(--spring-smooth); }
.top-nav-back:active { opacity:0.7; }
.top-nav-back svg { flex-shrink:0; stroke:var(--accent); }
.top-nav-back-text { font-size:15px; font-weight:500; color:var(--text-primary); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Shared Page Status ───────────────────────────────────── */
.page-status { position:sticky; top:48px; z-index:var(--z-page-status); background:var(--page-status-bg); border-bottom:0.5px solid var(--page-status-border); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); box-shadow:inset 0 1px 0 var(--page-status-highlight); transition:background .25s var(--spring-smooth), border-color .25s var(--spring-smooth), box-shadow .25s var(--spring-smooth); }
.page-status[hidden] { display:none; }
.page-status-inner { min-height:38px; max-width:960px; margin:0 auto; padding:7px 16px; display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:12px; line-height:1.35; }
.page-status-main { min-width:0; display:flex; align-items:center; gap:9px; flex:1; }
.page-status-rail { width:3px; height:16px; flex:0 0 auto; border-radius:2px; background:var(--status-info); box-shadow:0 0 8px var(--page-status-rail-glow); }
.page-status-summary { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; color:var(--text-secondary); }
.page-status-meta { color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%; font-variant-numeric:tabular-nums; }
.page-status-refresh { flex:0 0 36px; width:36px; height:36px; margin:-1px -4px -1px 0; padding:0; display:grid; place-items:center; appearance:none; -webkit-appearance:none; border:0; border-radius:50%; color:var(--text-tertiary); background:transparent; box-shadow:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s var(--spring-smooth), color .2s var(--spring-smooth), transform .2s var(--spring-smooth); }
.page-status-refresh:active { background:var(--page-status-button-active); color:var(--text-primary); transform:scale(0.94); }
.page-status-refresh:focus-visible { outline:2px solid var(--page-status-button-focus); outline-offset:2px; }
.page-status-refresh.is-refreshing svg { animation:page-status-spin .7s linear infinite; }
.page-status-warn .page-status-rail { background:var(--status-caution); }
.page-status-critical .page-status-rail { background:var(--status-anomaly); }
@keyframes page-status-spin { to { transform:rotate(360deg); } }

/* ── Breadcrumb (Desktop Sub-pages) ──────────────────────── */
.breadcrumb-bar { display:none; align-items:center; gap:8px; padding:12px 0 4px; font-size:13px; }
.breadcrumb-item { color:var(--accent); text-decoration:none; transition:opacity 0.2s; }
.breadcrumb-item:hover { opacity:0.8; }
.breadcrumb-sep { color:var(--text-tertiary); font-size:12px; }
.breadcrumb-current { color:var(--text-secondary); font-weight:500; }

/* ── Bottom Nav (Floating Pill) ──────────────────────────── */
.bottom-nav-shell {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-nav);
    display: none;
    padding-bottom: env(safe-area-inset-bottom);
    width: auto;
    max-width: calc(100vw - 32px);
}
.bottom-nav {
    position: relative;
    overflow: hidden;
    background: var(--bottom-nav-bg);
    backdrop-filter: blur(var(--blur-nav, 12px)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--blur-nav, 12px)) saturate(145%);
    border: 1px solid var(--glass-2-border);
    border-radius: 28px;
    padding: 6px;
    box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-highlight);
    display: inline-flex;
    align-items: center;
}
.bottom-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, var(--glass-highlight), transparent 42%);
    opacity: 0.56;
    pointer-events: none;
}
.bottom-nav-track { display:flex; gap:2px; align-items:center; position:relative; z-index:1; }
.bottom-nav-item {
    flex: 0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    padding:8px 10px;
    text-decoration:none;
    color:var(--text-tertiary);
    transition:transform var(--motion-press) var(--ease-out), color var(--motion-surface) var(--ease-out), background var(--motion-surface) var(--ease-out), box-shadow var(--motion-surface) var(--ease-out);
    border-radius:20px;
    position:relative;
    min-width: 48px;
}
.bottom-nav-item.active {
    color:var(--accent);
    background:var(--accent-dim);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    animation: nav-item-settle 260ms var(--spring-bounce) both;
}
.bottom-nav-item:active { transform:scale(0.93); }
@keyframes nav-item-settle {
    from { transform:scale(0.90); }
    to { transform:scale(1); }
}
.bottom-nav-icon { height:22px; display:flex; align-items:center; justify-content:center; }
.bottom-nav-label { font-size:10px; font-weight:500; }

/* ── Main Layout ──────────────────────────────────────── */
.main-area { flex:1; min-width:0; }

/* ═══ Responsive Layout (migrated from base.html) ═══ */
@media (max-width: 767px) {
    .sidebar { display:none !important; }
    .top-nav { display:block; }
    .bottom-nav-shell { display:block; }
    .main-content { max-width:100%; padding-bottom:96px; }
    .page-status { top:calc(48px + var(--safe-area-top)); }
    .page-status-inner { min-height:38px; padding:7px 16px; gap:8px; }
    .page-status-summary { font-size:12px; }
    .page-status-meta { display:none; }
    .page-status-refresh { width:44px; height:44px; margin:-4px -10px -4px 0; }
}
@media (prefers-reduced-motion: reduce) {
    .page-status, .page-status-refresh { transition:none; }
    .page-status-refresh:active { transform:none; }
}
@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
    .glass, .glass-deep, .glass-shallow, .top-nav, .bottom-nav, .page-status,
    .sidebar, .inbox-overlay, .inbox-panel-inner, .context-menu {
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }
    .glass::before, .glass::after, .glass-deep::before, .bottom-nav::before {
        display:none;
    }
    .page-status { background:var(--nav-bg); box-shadow:none; }
}
@media (min-width: 768px) {
    #app-content { display:flex; min-height:100vh; }
    .sidebar { display:flex; }
    .top-nav { display:none; }
    .bottom-nav-shell { display:none; }
    .main-area { margin-left:200px; flex:1; }
    .main-content { max-width:960px; margin:0 auto; padding:20px 24px 24px; }
    .breadcrumb-bar { display:flex; max-width:960px; margin:0 auto; padding:12px 24px 4px; }
    .page-status { position:static; border-bottom:0; background:transparent; }
    .page-status-inner { min-height:24px; padding:10px 24px 2px; border-left:1px solid var(--separator); }
    .page-status-rail { width:2px; height:12px; }
    .page-status-summary { font-size:12px; }
    .page-status-refresh { display:none; }
}
@media (min-width: 1280px) {
    .main-content { max-width:1100px; }
    .sidebar { width:220px; }
    .main-area { margin-left:220px; }
}

/* ═══ V5 Phase 2.3-2.5 + Phase 3 ═══════════════════════════════════ */

/* ── Interactive Micro-Animations (Phase 2.3) ── */
@media (hover: hover) {
    .interactive, .card, .section-card, .fund-row {
        transition: transform 0.15s var(--ease-out), background 0.15s var(--ease-out);
    }
    .interactive:hover, .card:hover, .section-card:hover {
        transform: translateY(-1px);
    }
    .interactive:active, .card:active, .section-card:active {}
    .fund-row:hover {
        background: var(--bg-card-hover);
        border-radius: 8px;
    }
}
@media (hover: none) {
    .interactive:hover, .card:hover, .section-card:hover {
        transform: none;
    }
    .glass:hover {
        background: var(--glass-2);
        border-color: var(--border-1);
        box-shadow: var(--shadow-card), inset 0 1px 0 var(--separator);
    }
    .glass:hover::after { animation: none; }
    .mesh-gradient { animation: none; }
    .pnl-glow { animation: none; }
    .freshness-dot { animation: none; }
}

/* ── Responsive Font Scaling (Phase 2.4) ── */
html { font-size: 16px; }
@media (max-width: 430px) {
    html { font-size: clamp(13px, 3.84vw, 16px); }
    input, select, textarea { font-size: 16px; } /* prevent iOS zoom */
}

/* ── iOS/Touch Adaptations (Phase 2.4) ── */
@supports (padding: env(safe-area-inset-top)) {
    .top-nav { padding-top: env(safe-area-inset-top); }
    .sidebar { padding-top: env(safe-area-inset-top); }
}
body { overscroll-behavior-y: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ── Custom Scrollbar (Phase 2.5) ── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
::-webkit-scrollbar-thumb:active { background: var(--accent); }

/* ── Loading Bar (Phase 3) ── */
.loading-bar {
    position: absolute; top: 0; left: 0;
    height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: loading-sweep 1.5s infinite;
    border-radius: 16px 16px 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}
.loading-bar.active { opacity: 1; }
@keyframes loading-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Empty State (Phase 3) ── */
.empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-tertiary);
}
.empty-state-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state-text { font-size: 14px; margin-bottom: 16px; }

/* ── Accessibility (Phase 3) ── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── System Status Bar (Phase 3.12) ── */
.system-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin-top: 12px;
    background: var(--surface-0);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-tertiary);
}
.status-ok { color: var(--status-info); font-weight: 600; }
.status-warn { color: var(--status-caution); font-weight: 600; }
.status-critical { color: var(--status-anomaly); font-weight: 600; }
.status-link {
    color: var(--accent);
    font-size: 12px;
    text-decoration: none;
}
.status-link:hover { color: var(--accent-blue); }

/* ── Freshness Dot (Phase 3.2) ── */
.freshness-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    animation: freshnessPulse 2s ease-in-out infinite;
}
@keyframes freshnessPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 4: 首页4模块重构 CSS (v4.0)
   交易信号卡 | 新闻验证卡 | 组合概览卡 | 决策导航卡
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 通用模块头 ──────────────────────────────────────────────────────── */
.ts-header, .news-header, .portfolio-header, .nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* ── 交易信号卡 ──────────────────────────────────────────────────────── */
.ts-card {
    background: var(--accent-bg);
    overflow: hidden;
}
.ts-metrics {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12px;
}
.ts-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.ts-critical, .ts-strong {
    margin-bottom: 12px;
}
.ts-critical-label, .ts-strong-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.ts-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--separator);
}
.ts-action-row:last-child {
    border-bottom: none;
}
.ts-action-code {
    font-family: 'SF Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}
.ts-action-pct {
    font-family: 'SF Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}
.ts-action-detail {
    font-size: 11px;
    color: var(--text-secondary);
}
.ts-footer, .news-footer, .portfolio-footer, .nav-footer {
    text-align: right;
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    margin-top: 8px;
}

/* ── MA5趋势指示器 ──────────────────────────────────────────────────── */
.ma5-trend {
    font-family: 'SF Mono', monospace;
    font-size: 12px;
}
.ma5-trend.up { color: var(--color-up); }
.ma5-trend.down { color: var(--color-down); }

/* ── 操作倒计时 ──────────────────────────────────────────────────────── */
.countdown {
    font-family: 'SF Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
}

/* ── 新闻验证卡 ──────────────────────────────────────────────────────── */
.news-card {
    border-left: none;
}
.news-positive, .news-negative {
    margin-bottom: 8px;
}
.news-group-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.news-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--separator);
    cursor: pointer;
}
.news-item-row:last-child {
    border-bottom: none;
}
.news-item-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}
.news-item-badge.positive {
    background: var(--color-up-bg);
    color: var(--color-up);
}
.news-item-badge.negative {
    background: var(--color-down-bg);
    color: var(--color-down);
}
.news-item-title {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news-item-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ── 组合概览卡 ──────────────────────────────────────────────────────── */
.portfolio-card {
    border-left: none;
}
.portfolio-assets {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.portfolio-temperature {
    margin-bottom: 8px;
}
.portfolio-temp-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-1);
    margin: 8px 0;
    position: relative;
}
.portfolio-temp-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.5s ease;
}
.portfolio-extremes {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

/* ── 决策导航卡 ──────────────────────────────────────────────────────── */
.nav-card {
    border-left: none;
}
.nav-decision {
    margin-bottom: 8px;
}
.nav-watch {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.nav-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.nav-links a {
    padding: 6px 12px;
    background: var(--surface-1);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 12px;
    transition: background 0.15s ease;
}
.nav-links a:active {
    background: var(--surface-2);
}

/* ── 数据时效性指示器 ────────────────────────────────────────────────── */
.data-freshness {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 11px;
}
.freshness-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
}
.freshness-item.fresh {
    background: var(--accent-dim, rgba(108, 180, 238, 0.1));
    color: var(--accent);
}
.freshness-item.recent {
    background: var(--status-caution-dim, rgba(212, 160, 23, 0.1));
    color: var(--status-caution);
}
.freshness-item.stale {
    background: var(--status-anomaly-dim, rgba(255, 100, 100, 0.1));
    color: var(--status-anomaly);
}

/* ── Retry Button (design system accent) ──────────────────────── */
.btn-retry {
    background: var(--accent-dim);
    border: 1px solid var(--accent-glow);
    color: var(--accent-blue);
    padding: 8px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}
.btn-retry:hover {
    background: var(--accent-glow);
}

/* ── Signal Color Classes (design system) ─────────────────────── */
.clr-signal-pos  { color: var(--color-up); }
.clr-signal-neg  { color: var(--color-down); }
.clr-signal-warn { color: var(--orange); }
.clr-accent      { color: var(--accent-blue); }
.clr-text-sec    { color: var(--text-secondary); }
.clr-text-tert   { color: var(--text-tertiary); }
.clr-text-quad   { color: var(--text-quaternary); }

/* ═══ PWA Mobile Fixes (2026-06-05) ═══════════════════════════════════ */

/* ── 1. Disable iOS Safari overscroll bounce (pull-to-refresh conflict) ── */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto; /* replaced by overflow: auto on containers */
}
/* Re-enable smooth scrolling on the main content area only */
.main-content, .main-area {
    -webkit-overflow-scrolling: touch;
}

/* ── 2. Pull-to-Refresh Indicator (was unstyled = giant SVG) ── */
.pull-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-3);
    backdrop-filter: blur(var(--blur-nav));
    -webkit-backdrop-filter: blur(var(--blur-nav));
    border-radius: 50%;
    border: 1px solid var(--border-2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: var(--z-inbox);
    opacity: 0;
    transition: transform 0.3s var(--spring-bounce), opacity 0.3s;
    pointer-events: none;
}
.pull-indicator svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
}
.pull-indicator.visible {
    transform: translateX(-50%) translateY(calc(var(--safe-area-top, 0px) + 16px));
    opacity: 1;
}
.pull-indicator.refreshing {
    transform: translateX(-50%) translateY(calc(var(--safe-area-top, 0px) + 16px));
    opacity: 1;
}
.pull-indicator.refreshing svg {
    animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── 3. Top Nav: PWA safe-area fix (prevents black bar above nav) ── */
@media (display-mode: standalone) {
    .top-nav {
        padding-top: var(--safe-area-top);
    }
    .top-nav-inner {
        height: 48px; /* keep inner height consistent */
    }
}
/* Also handle non-standalone Safari with notch */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 767px) {
        .top-nav {
            padding-top: env(safe-area-inset-top);
        }
    }
}

/* ── 4. Bottom Nav Pill: Fix icon/label width consistency ── */
@media (max-width: 767px) {
    .bottom-nav-track {
        display: flex;
        gap: 2px;
        justify-content: center;
    }
    .bottom-nav-item {
        flex: 0 0 auto;
        min-width: 48px;
        padding: 6px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .bottom-nav-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bottom-nav-icon svg {
        width: 22px;
        height: 22px;
    }
    .bottom-nav-label {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
        text-align: center;
    }
}

/* ── 5. Mobile Theme Toggle (in top-nav) ── */
.theme-toggle-mobile {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: background 0.2s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle-mobile:active {
    opacity: 0.7;
    background: var(--surface-1);
}
.theme-toggle-mobile svg {
    width: 18px;
    height: 18px;
}
/* Show sun in dark mode, moon in light mode */
[data-theme="dark"] .icon-moon-mobile { display: none; }
[data-theme="dark"] .icon-sun-mobile { display: inline; }
[data-theme="light"] .icon-sun-mobile { display: none; }
[data-theme="light"] .icon-moon-mobile { display: inline; }

/* ── 6. Performance: reduce backdrop-filter on mobile ── */
@media (max-width: 767px) {
    /* Simplify glass effects on mobile for smoother scrolling */
    .glass {
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
    }
    .bottom-nav {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .top-nav {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    /* Disable hover animations on touch devices */
    .glass:hover {
        transform: none;
        background: var(--glass-2);
    }
    .card-stagger {
        will-change: auto; /* remove will-change after animation */
    }
}

/* ── 7. body::before ambient glow: disable animation on mobile ── */
@media (max-width: 767px) {
    body::before {
        animation: none !important;
        will-change: auto;
    }
}

.home-action-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    margin-bottom: 5px;
    border-radius: 8px;
}
.home-action-main { flex: 1; min-width: 0; }
.home-action-fund { overflow: hidden; color: var(--text-primary); font-size: 13px; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.home-action-rationale { margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.home-action-boundary { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; line-height: 1.4; }
.home-action-disposition { flex: 0 0 106px; text-align: right; }
.home-action-label { font-size: 12px; font-weight: 700; line-height: 1.4; }
.home-action-base { margin-top: 2px; color: var(--text-tertiary); font-size: 10px; line-height: 1.35; }
.home-action-allocation { margin-top: 3px; color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; }

/* ── 操作信号：桌面四列 / 移动端信号卡 ───────────────────────── */
.sig-summary {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.sig-summary-item {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}
.sig-summary-handle,
.sig-summary-stop { color: var(--color-up); background: var(--color-up-bg); }
.sig-summary-buy { color: var(--color-down); background: var(--color-down-bg); }
.sig-summary-aux { color: var(--text-tertiary); font-size: 11px; }

.sig-header,
.sig-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) 88px 104px minmax(220px, 2fr);
    gap: 0 12px;
    align-items: center;
}
.sig-header {
    padding: 5px 10px 7px;
    border-bottom: 1px solid var(--border-1);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
}
.sig-row {
    padding: 10px 10px 10px 12px;
    border-bottom: 1px solid var(--border-1);
    border-left: 3px solid transparent;
    font-size: 13px;
    transition: background var(--duration-fast) var(--ease-out);
}
.sig-row > * { min-width: 0; }
.sig-row-exit { background: var(--color-up-bg); border-left-color: var(--color-up); }
.sig-row-sell { background: var(--up-dim); border-left-color: var(--color-up-glow); }
.sig-row-buy { background: var(--color-down-bg-subtle); border-left-color: var(--color-down); }
.sig-row-block { background: var(--surface-2, rgba(142,142,147,0.07)); border-left-color: var(--status-blocked); }

.sig-fund,
.sig-action,
.sig-allocation,
.sig-evidence { min-width: 0; }
.sig-fund { display: flex; flex-direction: column; gap: 2px; }
.sig-fund-name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.sig-fund-code { color: var(--text-secondary); font-size: 11px; letter-spacing: .04em; }
.sig-action { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sig-instruction { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.sig-base-action { color: var(--text-tertiary); font-size: 10px; line-height: 1.4; }
.sig-action-chip {
    display: inline-flex;
    justify-content: center;
    min-width: 58px;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.sig-action-exit_all,
.sig-action-reduce_half,
.sig-action-sell,
.sig-action-partial_sell { color: var(--color-up); background: var(--color-up-bg); }
.sig-action-add,
.sig-action-buy,
.sig-action-probe_buy { color: var(--color-down); background: var(--color-down-bg); }
.sig-action-block_buy { color: var(--status-blocked); background: var(--status-blocked-dim); }
.sig-urgency { color: var(--status-caution); font-size: 10px; }
.sig-allocation { display: flex; flex-direction: column; gap: 2px; color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.sig-allocation > span:first-child { font-weight: 600; color: var(--text-primary); }
.sig-allocation-reduce > span:first-child { color: var(--color-up); }
.sig-allocation-add > span:first-child { color: var(--color-down); }
.sig-allocation-trend { font-size: 11px; color: var(--text-secondary); }
.sig-trend-up { color: var(--color-up); }
.sig-trend-down { color: var(--color-down); }
.sig-trigger-type { display: inline-block; margin-right: 6px; color: var(--text-tertiary); font-size: 10px; font-weight: 600; }
.sig-evidence { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.sig-evidence-label { flex: 0 0 auto; margin-right: 7px; color: var(--text-tertiary); font-size: 10px; font-weight: 600; }
.sig-rationale,
.sig-boundary { color: var(--text-secondary); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.sig-boundary { color: var(--text-tertiary); }
.sig-reason {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.sig-badges { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.sig-badge { padding: 1px 5px; border-radius: 4px; font-size: 10px; white-space: nowrap; }
.sig-badge-breakout { color: var(--color-up); background: var(--color-up-dim); }
.sig-badge-breakdown { color: var(--color-down); background: var(--color-down-dim); }
.sig-badge-stop { color: var(--status-blocked); background: var(--status-blocked-dim); }
.sig-aux { grid-column: 1 / -1; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.sig-details { display: none; grid-column: 1 / -1; color: var(--text-secondary); font-size: 12px; }
.sig-details summary { color: var(--accent); cursor: pointer; list-style: none; }
.sig-details summary::-webkit-details-marker { display: none; }
.sig-details summary::after { content: ' ↓'; }
.sig-details[open] summary::after { content: ' ↑'; }
.sig-details div { margin-top: 5px; color: var(--text-secondary); line-height: 1.55; }
.sig-details div span { display: block; margin-top: 4px; color: var(--text-tertiary); }

/* 复盘验证使用独立契约：桌面四列，移动端单基金三段卡片。 */
#tab-quant-review .sig-header,
#tab-quant-review .quant-review-row {
    grid-template-columns: minmax(130px, 1.1fr) 76px minmax(180px, 1.5fr) minmax(92px, 0.8fr);
    gap: 0 8px;
}
#tab-quant-review .quant-review-row {
    padding: 8px 8px 8px 10px;
    font-size: 12px;
}
#tab-quant-review .sig-fund-name {
    font-size: 12px;
    -webkit-line-clamp: 2;
}
#tab-quant-review .sig-fund-code {
    font-size: 10px;
}
#tab-quant-review .sig-action-chip {
    font-size: 11px;
    padding: 2px 6px;
    min-width: 48px;
}
#tab-quant-review .sig-badge {
    font-size: 9px;
    padding: 1px 4px;
}
#tab-quant-review .sig-aux {
    font-size: 10px;
    line-height: 1.4;
}
#tab-quant-review .quant-review-result {
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
}
#tab-quant-review .quant-review-result-label { display: none; }
#tab-quant-review .quant-review-result-note {
    margin-top: 2px;
    color: var(--text-quaternary);
    font-size: 10px;
    line-height: 1.45;
}
#tab-quant-review .quant-review-result.is-blocked .quant-review-result-state { color: var(--status-caution); font-weight: 600; }
#tab-quant-review .quant-review-result.is-deviation .quant-review-result-state { color: var(--status-warn); }
#tab-quant-review .quant-review-result.is-pending .quant-review-result-state { color: var(--text-secondary); }

@media (max-width: 767px) {
    .home-action-row { align-items: flex-start; padding: 8px 9px; }
    .home-action-disposition { flex-basis: 92px; }
    .home-action-label { font-size: 11px; }
    .sig-summary { gap: 5px; margin-bottom: 8px; }
    .sig-summary-item { padding: 3px 7px; }
    .sig-summary-aux { flex-basis: 100%; }
    .sig-header { display: none; }
    .sig-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "fund action"
            "evidence evidence"
            "technical technical";
        gap: 7px 10px;
        align-items: start;
        margin-bottom: 7px;
        padding: 10px 9px 10px 11px;
        border: 1px solid var(--border-1);
        border-left-width: 3px;
        border-radius: 9px;
    }
    .sig-fund { grid-area: fund; }
    .sig-action { grid-area: action; align-items: flex-end; }
    .sig-allocation {
        grid-area: technical;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-top: 2px;
        border-top: 1px solid var(--border-1);
    }
    .sig-allocation-trend { font-size: 11px; }
    .sig-evidence { grid-area: evidence; grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .sig-reason { font-size: 12px; -webkit-line-clamp: 2; }
    .sig-badges { grid-row: 2; }
    .sig-aux { grid-column: 1; }
    .sig-details { display: block; grid-column: 1; }
    .sig-details summary {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        margin: -6px 0;
        padding: 6px 4px 6px 0;
    }
    .sig-details:not([open]) + * { display: none; }
    .sig-fund-code { font-size: 11px; }
    .sig-action-chip { min-width: 56px; }

    /* 决策页移动端适配 */
    .state-badge-lg { font-size: 13px; padding: 4px 12px; }
    .module-body-inner .badge {
        max-width: 100%;
        overflow: hidden;
        padding: 2px 6px;
        font-size: 11px;
        text-overflow: ellipsis;
    }
}

@media (max-width: 767px) {
    #tab-quant-review .sig-header { display: none; }
    #tab-quant-review .quant-review-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "fund action"
            "evidence evidence"
            "result result";
        gap: 7px 10px;
        align-items: start;
        margin-bottom: 7px;
        padding: 10px 9px 10px 11px;
        border: 1px solid var(--border-1);
        border-left-width: 3px;
        border-radius: 8px;
    }
    #tab-quant-review .quant-review-row .sig-fund { grid-area: fund; }
    #tab-quant-review .quant-review-row .sig-action { grid-area: action; align-items: flex-end; }
    #tab-quant-review .quant-review-row .sig-evidence {
        grid-area: evidence;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
    }
    #tab-quant-review .quant-review-row .quant-review-result {
        grid-area: result;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 8px;
        align-items: start;
        padding-top: 7px;
        border-top: 1px solid var(--border-1);
        text-align: left;
    }
    #tab-quant-review .quant-review-result-label {
        display: block;
        color: var(--text-tertiary);
        font-size: 10px;
        line-height: 1.5;
    }
    #tab-quant-review .quant-review-result-content { min-width: 0; }
}

/* Quant-review verification overview: stable across desktop and mobile widths. */
#tab-quant-review .quant-review-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
#tab-quant-review .quant-review-kicker { font-size: 11px; color: var(--text-tertiary); }
#tab-quant-review .quant-review-overview-title { font-size: 16px; font-weight: 650; color: var(--text-primary); margin-top: 2px; }
#tab-quant-review .quant-review-overview-meta { font-size: 10px; color: var(--text-tertiary); line-height: 1.55; text-align: right; }
#tab-quant-review .quant-review-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 12px;
}
#tab-quant-review .quant-review-status {
    min-height: 56px;
    padding: 8px;
    border: 1px solid var(--border-1);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
#tab-quant-review .quant-review-status strong { font-size: 20px; line-height: 1; }
#tab-quant-review .quant-review-status span { font-size: 11px; color: var(--text-secondary); }
#tab-quant-review .quant-review-status.is-evaluated strong { color: var(--color-up); }
#tab-quant-review .quant-review-status.is-blocked strong { color: var(--status-caution); }
#tab-quant-review .quant-review-status.is-pending strong { color: var(--text-secondary); }
#tab-quant-review .quant-review-status.is-neutral strong { color: var(--text-tertiary); }
#tab-quant-review .quant-review-overview-note { margin-top: 10px; font-size: 11px; color: var(--text-tertiary); line-height: 1.65; }

@media (max-width: 430px) {
    #tab-quant-review .quant-review-overview { padding: 12px; }
    #tab-quant-review .quant-review-overview-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    #tab-quant-review .quant-review-kicker { font-size: 11px; color: var(--text-tertiary); }
    #tab-quant-review .quant-review-overview-title { font-size: 16px; font-weight: 650; color: var(--text-primary); margin-top: 2px; }
    #tab-quant-review .quant-review-overview-meta { font-size: 10px; color: var(--text-tertiary); line-height: 1.55; text-align: right; }
    #tab-quant-review .quant-review-status-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }
    #tab-quant-review .quant-review-status {
        min-height: 56px;
        padding: 8px;
        border: 1px solid var(--border-1);
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }
    #tab-quant-review .quant-review-status strong { font-size: 20px; line-height: 1; }
    #tab-quant-review .quant-review-status span { font-size: 11px; color: var(--text-secondary); }
    #tab-quant-review .quant-review-status.is-evaluated strong { color: var(--color-up); }
    #tab-quant-review .quant-review-status.is-blocked strong { color: var(--status-caution); }
    #tab-quant-review .quant-review-status.is-pending strong { color: var(--text-secondary); }
    #tab-quant-review .quant-review-status.is-neutral strong { color: var(--text-tertiary); }
    #tab-quant-review .quant-review-overview-note { margin-top: 10px; font-size: 11px; color: var(--text-tertiary); line-height: 1.65; }
}

/* ═══ SPA Page Transition (2026-06-06) ═══════════════════════════════════ */

/* ── GPU-accelerated page exit/enter (will-change only during animation) ── */
/* page-exit/page-enter animations removed for smoother SPA transitions */