/* Shared presentation layer for the eight dashboard pages. */
:root {
    --ui-bg: #f4f6fa;
    --ui-surface: #ffffff;
    --ui-soft: #f7f9fc;
    --ui-hover: #f0f5ff;
    --ui-text: #182338;
    --ui-muted: #67758b;
    --ui-line: #e3e9f2;
    --ui-accent: #2563eb;
    --ui-violet: #7c3aed;
    --ui-shadow: 0 4px 20px rgba(30, 50, 85, .045), 0 1px 3px rgba(30, 50, 85, .025);
    --ui-raised: 0 10px 28px rgba(30, 50, 85, .10);
}

:root[data-theme="dark"] {
    --ui-bg: #0d1117;
    --ui-surface: #161d28;
    --ui-soft: #1c2533;
    --ui-hover: #202d40;
    --ui-text: #e6edf7;
    --ui-muted: #9aa9bf;
    --ui-line: #2b3748;
    --ui-accent: #78acff;
    --ui-violet: #a78bfa;
    --ui-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    --ui-raised: 0 10px 30px rgba(0, 0, 0, .28);
}

/* Map existing page variables without changing their rendering scripts. */
:root, :root[data-theme="dark"] {
    --bg: var(--ui-bg);
    --bg-body: var(--ui-bg);
    --bg-color: var(--ui-bg);
    --card: var(--ui-surface);
    --panel: var(--ui-surface);
    --card-bg: var(--ui-surface);
    --bg-card: var(--ui-surface);
    --bg-panel: var(--ui-surface);
    --panel-soft: var(--ui-soft);
    --card-soft: var(--ui-soft);
    --muted-bg: var(--ui-soft);
    --hover: var(--ui-hover);
    --hover-color: var(--ui-hover);
    --bg-card-hover: var(--ui-soft);
    --text: var(--ui-text);
    --text-primary: var(--ui-text);
    --text-main: var(--ui-text);
    --muted: var(--ui-muted);
    --text-secondary: var(--ui-muted);
    --line: var(--ui-line);
    --border-color: var(--ui-line);
    --card-shadow: var(--ui-shadow);
    --shadow: var(--ui-shadow);
    --shadow-md: var(--ui-shadow);
    --radius: 18px;
    --radius-lg: 18px;
    --radius-md: 10px;
}

html { min-height: 100%; scrollbar-gutter: stable; }
body {
    box-sizing: border-box;
    min-height: 100vh;
    margin: 0;
    padding: 28px 24px 40px;
    background-color: var(--ui-bg);
    background-image:
        radial-gradient(circle at 10% 0, color-mix(in srgb, var(--ui-accent) 9%, transparent), transparent 34%),
        radial-gradient(circle at 96% 14%, color-mix(in srgb, var(--ui-violet) 8%, transparent), transparent 30%);
    color: var(--ui-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
button, input, select { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [role="link"]:focus-visible,
input:focus-visible, select:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
}
button:disabled { cursor: wait; opacity: .6; }
::selection { background: color-mix(in srgb, var(--ui-accent) 20%, transparent); }
.container { min-width: 0; }

/* Header and navigation */
.container > .header, .container > .topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ui-line);
    gap: 16px;
    flex-wrap: wrap;
}
.header h1, .logo { font-size: 23px; font-weight: 700; letter-spacing: -.6px; }
.header-right, .header-actions, .topbar-left, .topbar-right { min-width: 0; max-width: 100%; }
.header-right, .header-actions, .topbar-right {
    margin-inline-start: auto;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.header-nav, .header-tools { display: flex; align-items: center; gap: 8px; }
.header-nav { min-width: 0; flex-wrap: wrap; }
.header-nav > a { justify-content: center; white-space: nowrap; }
.header-tools { flex: 0 0 auto; flex-wrap: nowrap; }
.page-holdings .header-right {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 16px;
}
.page-holdings .header-right > .update-time { grid-column: 1 / -1; text-align: right; }
.topbar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-market .topbar-right, .page-fund-market .topbar-right,
.page-fund .header-right, .page-api .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}
.topbar-right .update-time, .header-actions .update-time { white-space: normal; text-align: right; }
.logo-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; }
.update-time, .sub { color: var(--ui-muted); line-height: 1.6; }
.update-time { font-size: 12px; overflow-wrap: anywhere; }
.theme-toggle, .icon-btn, .refresh-button {
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
    border: 1px solid var(--ui-line);
    border-radius: 50%;
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 2px 5px rgba(20, 40, 70, .035);
    font-size: 17px;
}
.pill, .market-link, .back-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ui-line);
    border-radius: 10px;
    padding: 6px 12px;
    background: var(--ui-surface);
    color: var(--ui-muted);
    font-size: 12px;
    text-decoration: none;
}

/* Surface hierarchy: prominent summaries, quieter content cards. */
.summary-panel, .sector-head, .stock-head, .fund-head,
.panel, .fund-card, .index-card, .rank-card, .stock-card,
.today-profit-section, .table-container, .page-api .card {
    min-width: 0;
    border: 1px solid var(--ui-line);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
}
.summary-panel, .sector-head, .stock-head, .fund-head, .hero {
    background: linear-gradient(120deg, var(--ui-surface) 35%, color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface)));
    border-color: color-mix(in srgb, var(--ui-accent) 20%, var(--ui-line));
}
.summary-panel { padding: 28px; }
.summary-left .value { font-size: clamp(30px, 3.5vw, 40px); letter-spacing: -1.2px; }
.summary-right { gap: 32px; }
.summary-left .sub-cost { color: var(--ui-muted); font-size: 12px; margin-top: 6px; }
.summary-item .value, .data-val, .metric .value, .stat-value,
.card-value, .ic-value, .sc-price, td.num { font-variant-numeric: tabular-nums; }
.panel-title, .panel-head, .section-title, .rank-head { letter-spacing: -.2px; }
.panel-title { gap: 8px; flex-wrap: wrap; }
.panel-title span, .card-tag { background: var(--ui-soft); border-radius: 8px; }
.panel-hint { line-height: 1.6; }
.metric, .stat, .manager, .timeline-item, .valuation-card, .crowd-card, .fund-rank-card {
    min-width: 0;
    border-color: var(--ui-line);
    border-radius: 12px;
    box-shadow: none;
}
.metric { background: var(--ui-soft); }
.metric .label, .stat-label, .data-label { color: var(--ui-muted); font-size: 12px; }
.chart { border-radius: 12px; }

/* Holdings: keep the two centered columns and the existing density. */
.fund-card { padding: 18px; gap: 16px; }
.card-header { gap: 12px; }
.fund-info { min-width: 0; }
.fund-name { line-height: 1.5; overflow-wrap: anywhere; }
.fund-code { font-size: 11px; line-height: 1.6; }
.card-tag { font-size: 10px; line-height: 1.6; padding: 5px 8px; }
.card-data { padding-block: 4px; }
.card-footer { border-top: 1px solid var(--ui-line); padding-top: 12px; margin-top: auto; }
.card-fund-link { border-radius: 7px; padding: 3px 8px; font-size: 11px; }
.data-sub { font-size: 11px; }
.data-item { min-width: 0; }
.tab-group { padding: 4px; background: var(--ui-soft); border: 1px solid var(--ui-line); border-radius: 12px; gap: 4px; }
.tab-btn { border-color: transparent; background: transparent; border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.tab-btn.active { box-shadow: 0 2px 6px rgba(37, 99, 235, .16); }
.tab, .level-pill { border-radius: 8px; min-height: 32px; }
.search, .select { min-height: 38px; border-radius: 9px; }

/* Tables and feedback states */
table { font-variant-numeric: tabular-nums; }
th { background: var(--ui-soft); font-size: 12px; line-height: 1.5; }
td { line-height: 1.6; }
tbody tr:hover td { background-color: var(--ui-soft); }
.rank-item { padding-block: 10px; }
.json-modal { border: 1px solid var(--ui-line); border-radius: 18px; box-shadow: var(--ui-raised); }
.json-modal-overlay { backdrop-filter: blur(5px); }
.json-btn { min-height: 36px; border-radius: 8px; }
.warning, .warn-banner { border-radius: 12px; line-height: 1.7; }
.status { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.profit-empty { box-sizing: border-box; }
.today-profit-head { flex-wrap: wrap; }
.today-profit-title { font-size: 16px; }
.profit-tile { border-radius: 10px; flex-basis: 64px; }
.profit-row { min-height: 0; }
.profit-tile.up .profit-tile-code, .profit-tile.down .profit-tile-code { color: inherit; opacity: .85; }
.page-api .card-title { font-size: 12px; }
.page-api .card-value { font-size: clamp(20px, 2.4vw, 28px); }
.page-fund .panel { overflow-x: auto; }
.page-fund .hero { overflow: visible; }

/* Allow content to shrink inside a column; wide tables scroll within panels. */
.grid > *, .two-col > *, .summary-grid > *, .stats > *, .stat-grid > * { min-width: 0; }
.panel-head > div, .rank-head > .rh-title { min-width: 0; }
.panel-head { flex-wrap: wrap; }
.chart-legend, .sector-meta, .fund-meta { flex-wrap: wrap; gap: 6px 12px; }
.page-fund-market .toolbar { flex-wrap: wrap; }
.page-fund-market .search, .page-fund-market .select { max-width: 100%; min-width: 0; }

@media (hover: hover) {
    .fund-card:hover, .stock-card.stk-card:hover {
        background: var(--ui-surface);
        border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line));
        box-shadow: var(--ui-raised);
        transform: translateY(-3px);
    }
    .pill:hover, .market-link:hover, .back-link:hover {
        background: var(--ui-hover);
        color: var(--ui-accent);
        border-color: var(--ui-accent);
    }
}

@media (max-width: 768px) {
    body { padding: 16px 14px 28px; }
    .container > .header, .container > .topbar { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
    .header h1, .logo { font-size: 20px; }
    .summary-panel { padding: 20px; gap: 20px; }
    .summary-right { width: 100%; gap: 16px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
    .summary-item { min-width: 0; }
    .summary-item .value { font-size: clamp(17px, 4.6vw, 22px); overflow-wrap: anywhere; }
    .fund-card { padding: 16px; border-radius: 14px; gap: 14px; }
    .card-grid { gap: 12px; }
    .panel, .today-profit-section, .table-container, .index-card, .rank-card, .stock-card { border-radius: 14px; }
    .tab-group { width: 100%; }
    .tab-btn { flex: 1 0 auto; padding: 6px 8px; }
    .page-fund .header-right, .page-api .header-actions { width: 100%; }
    .page-fund .status { min-width: 0; }
    .page-fund .panel { padding: 16px; }
    .page-fund .fund-title .name { font-size: 23px; }
    .page-api .summary-grid { gap: 8px; }
    .page-api .card { padding: 14px 12px; border-radius: 12px; }
    .page-api .today-profit-section { padding: 14px; }
    .page-market .rank-grid { grid-template-columns: minmax(0, 1fr); }
    .page-market .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-market .index-card { padding: 14px; }
    .page-market .ic-head { flex-wrap: wrap; gap: 4px; }
    .page-market .ic-value { font-size: 21px; }
    .page-market .ic-change { display: block; margin-left: 0; }
    .page-detail .panel, .page-stock .panel, .page-sector .panel { overflow-x: auto; }
}

/* Complex headers use explicit rows on tablets and phones. */
@media (max-width: 1000px) {
    .page-holdings .container > .header,
    .page-market .container > .topbar,
    .page-fund-market .container > .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        align-items: center;
    }
    .page-holdings .header-right,
    .page-market .topbar-left, .page-market .topbar-right,
    .page-fund-market .topbar-left, .page-fund-market .topbar-right { display: contents; }
    :is(.page-holdings, .page-market, .page-fund-market) .logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        font-size: clamp(17px, 2.6vw, 23px);
    }
    :is(.page-holdings, .page-market, .page-fund-market) .header-tools {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    :is(.page-holdings, .page-market, .page-fund-market) .header-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .page-holdings .header-right > .update-time,
    .page-market .topbar-right > .update-time,
    .page-fund-market .topbar-right > .update-time {
        grid-column: 1 / -1;
        grid-row: 3;
        width: auto;
        order: initial;
        text-align: right;
        white-space: normal;
        overflow: visible;
        font-size: 11px;
    }
    .page-fund-market .topbar-right .icon-btn { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
    .header-tools { gap: 6px; }
    .header-tools > :is(.theme-toggle, .icon-btn, .refresh-button),
    .page-fund-market .topbar-right .icon-btn {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .page-fund-market .logo { font-size: 17px; gap: 6px; }
    .page-fund-market .logo-icon { width: 25px; height: 25px; }
    .page-market .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
    .card-data { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 12px; gap: 12px; }
    .data-val, .data-sub { white-space: normal; overflow-wrap: anywhere; }
    .data-val { font-size: 15px; }
    .page-api .card-value { font-size: 19px; overflow-wrap: anywhere; }
    .page-api .profit-legend { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}