:root {
  --bg: #f4f0e7;
  --surface: #fffdf8;
  --surface-2: #ece6d9;
  --ink: #17212b;
  --muted: #69717a;
  --line: #d7cfc0;
  --navy: #132b43;
  --blue: #265d84;
  --rust: #b54a25;
  --gold: #c9963c;
  --green: #327052;
  --red: #a63f38;
  --shadow: 0 18px 55px rgba(22, 33, 43, 0.08);
  --sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); }
body.dark {
  --bg: #101820; --surface: #17232e; --surface-2: #202f3b; --ink: #f2eee5;
  --muted: #a9b1b8; --line: #344451; --navy: #0b1722; --blue: #74acd1;
  --rust: #eb825c; --gold: #e3b35b; --green: #72bf96; --red: #ef8079;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: white; color: black; }
.skip-link:focus { top: 12px; }

.etf-header { position:relative; z-index:40; overflow:visible; background: var(--navy); color: #f7f1e6; border-bottom: 5px solid var(--rust); }
.etf-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 340px; pointer-events: none; background: radial-gradient(circle at 82% 16%, rgba(181,74,37,.36), transparent 38%), linear-gradient(120deg, transparent 48%, rgba(255,255,255,.035) 48% 50%, transparent 50%); }
.etf-nav, .etf-hero, .etf-shell, .etf-footer { position: relative; width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
.etf-nav { min-height: 76px; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); }
.etf-brand { display: flex; align-items: baseline; gap: 10px; font-weight: 800; font-size: 22px; }
.etf-brand small { color: #d8a758; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; }
.etf-nav-links { justify-self: center; display: flex; height: 76px; }
.etf-nav-links a { display: grid; place-items: center; min-width: 88px; padding: 0 18px; border-left: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.68); font-weight: 700; }
.etf-nav-links a:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.etf-nav-links a.active { color: #f1b861; background: rgba(255,255,255,.05); }
.nav-us-menu { position:relative; height:100%; }
.nav-us-menu > a { display:flex; height:100%; align-items:center; justify-content:center; }
.nav-us-dropdown { position:absolute; z-index:60; top:calc(100% - 1px); left:50%; width:340px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.16); border-top:3px solid var(--gold); background:var(--surface); color:var(--ink); box-shadow:0 24px 70px rgba(4,12,20,.35); }
.etf-nav-links .nav-us-dropdown > a { display:grid; grid-template-columns:32px 1fr auto; place-items:initial; align-items:center; gap:10px; min-width:0; min-height:52px; height:auto; padding:0 14px; border:0; border-bottom:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:400; }
.etf-nav-links .nav-us-dropdown > a:hover { background:var(--surface-2); }
.etf-nav-links .nav-us-dropdown > a:last-child { border-bottom:0; }
.nav-us-dropdown > a > span { color:var(--rust); font:800 11px var(--mono); }
.nav-us-dropdown > a > b { font-size:13px; }
.nav-us-dropdown > a > small { color:var(--muted); font-size:10px; }
.etf-nav-links .nav-us-dropdown > a.ready { background:color-mix(in srgb,var(--gold) 10%,var(--surface)); }
.etf-nav-links .nav-us-dropdown > a.ready small { color:var(--rust); font-weight:900; }
.nav-menu-pending { display:flex; min-height:68px; align-items:center; justify-content:space-between; gap:18px; padding:0 18px; background:var(--surface); }
.nav-menu-pending b { font-size:13px; }
.nav-menu-pending small { color:var(--gold); font:800 9px var(--mono); letter-spacing:.12em; }
.theme-button { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.24); background: transparent; color: white; }
.market-ticker { position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); background: rgba(4,13,22,.3); color: #f7f1e6; }
.market-ticker::before,.market-ticker::after { content:""; position:absolute; z-index:2; inset:0 auto 0; width:72px; pointer-events:none; background:linear-gradient(90deg,var(--navy),transparent); }
.market-ticker::after { left:auto; right:0; transform:scaleX(-1); }
.market-ticker-track { display:flex; width:max-content; min-height:42px; align-items:center; animation:market-scroll 68s linear infinite; will-change:transform; }
.market-ticker:hover .market-ticker-track { animation-play-state:paused; }
.market-ticker-group { display:flex; flex:none; align-items:center; }
.market-ticker-item { display:flex; flex:none; align-items:baseline; gap:9px; padding:0 26px; border-right:1px solid rgba(255,255,255,.12); font-family:var(--mono); font-size:11px; white-space:nowrap; }
.market-ticker-item b { color:rgba(255,255,255,.58); font-family:var(--sans); font-size:11px; }
.market-ticker-item strong { color:#f7f1e6; font-size:13px; }
.market-ticker-item em { font-style:normal; font-weight:800; }
.market-ticker-item em.positive { color:#72bf96; }.market-ticker-item em.negative { color:#ef8079; }.market-ticker-item em.flat { color:#d8a758; }
@keyframes market-scroll { to { transform:translateX(-50%); } }
.etf-hero { padding: 58px 0 64px; }
.hero-kicker, .eyebrow { margin: 0 0 12px; color: var(--gold); font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hero-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.hero-heading h1 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 6vw, 72px); line-height: 1.1; }
.hero-heading > div > p { max-width: 720px; margin: 20px 0 0; color: rgba(255,255,255,.7); font-family: var(--serif); font-size: 17px; line-height: 1.8; }
.freshness { min-width: 250px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.freshness b, .freshness small { display: block; }
.freshness b { font-size: 13px; }.freshness small { margin-top: 3px; color: rgba(255,255,255,.58); font-size: 11px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(114,191,150,.15); }
.status-dot.loading { background: var(--gold); animation: pulse 1.2s infinite; }.status-dot.error { background: var(--red); }
@keyframes pulse { 50% { opacity: .35; } }

.etf-shell { padding: 38px 0 80px; }
.notice { margin-bottom: 20px; border-left: 4px solid var(--gold); padding: 13px 16px; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); color: var(--ink); font-size: 13px; line-height: 1.7; }
.notice.error { border-color: var(--red); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }
.metric-card { min-height: 145px; padding: 19px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.metric-card span, .metric-card small { display: block; color: var(--muted); font-size: 12px; }.metric-card b { display: block; margin: 15px 0 8px; font-family: var(--mono); font-size: 29px; }.metric-card small { line-height: 1.45; }
.metric-card.skeleton { background: linear-gradient(100deg, var(--surface) 20%, var(--surface-2) 40%, var(--surface) 60%); background-size: 220% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.workspace { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.view-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.view-tabs button { flex: 0 0 auto; min-height: 52px; padding: 0 20px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; }
.view-tabs button[aria-selected="true"] { background: var(--surface); color: var(--rust); box-shadow: inset 0 3px var(--rust); }
.toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) 190px auto; gap: 14px; align-items: end; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.search-field, .filter-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.search-field input, .filter-field select { min-width: 0; height: 42px; border: 1px solid var(--line); padding: 0 12px; background: var(--bg); color: var(--ink); outline: 0; }
.search-field input:focus, .filter-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.primary-button, .secondary-button { min-height: 42px; border: 1px solid var(--ink); padding: 0 16px; font-size: 12px; font-weight: 800; }
.primary-button { background: var(--ink); color: var(--surface); }.secondary-button { background: transparent; color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
.table-summary { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 22px 20px 14px; }
.table-summary h2 { margin: 0; font-family: var(--serif); font-size: 27px; }.table-summary > p { margin: 0; color: var(--muted); font-size: 12px; }
.table-wrap { position: relative; min-height: 310px; overflow-x: auto; }
.fund-table { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.fund-table th { position: sticky; top: 0; z-index: 1; padding: 11px 12px; border: 1px solid var(--line); border-left: 0; background: var(--surface-2); color: var(--muted); text-align: left; font-weight: 800; }
.fund-table th.sortable { cursor: pointer; }.fund-table th.is-number, .fund-table td.is-number { text-align: right; font-family: var(--mono); }
.fund-table td { padding: 13px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fund-table tbody tr:hover { background: color-mix(in srgb, var(--blue) 6%, var(--surface)); }
.fund-name { min-width: 250px; white-space: normal; font-weight: 800; line-height: 1.45; }.fund-code { font-family: var(--mono); color: var(--rust); }
.icon-button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); font-size: 18px; }.icon-button.on { color: var(--gold); }
.badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 8px; border: 1px solid currentColor; font-size: 10px; font-weight: 800; }
.badge.open { color: var(--green); }.badge.limited { color: var(--gold); }.badge.suspended, .negative { color: var(--red); }.positive { color: var(--green); }
.dataset-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 12%, var(--surface-2)); color: var(--blue); font-size: 10px; font-weight: 900; }
.empty-state { display: grid; place-items: center; align-content: center; min-height: 310px; padding: 40px; text-align: center; }.empty-state strong { font-family: var(--serif); font-size: 24px; }.empty-state p { max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.7; }

.method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 28px; }
.method-grid article { padding: 22px; border-top: 3px solid var(--ink); background: var(--surface); }.method-grid article > span { color: var(--rust); font-family: var(--mono); font-size: 36px; }.method-grid h2 { margin: 12px 0 8px; font-family: var(--serif); font-size: 21px; }.method-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.guide-tab-panel { padding: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white), var(--surface)); }
.guide-section { padding: 8px; }
.guide-head { display: grid; gap: 10px; max-width: 920px; margin-bottom: 22px; }
.guide-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); line-height: 1.18; }
.guide-head p, .index-card p, .holdings-panel p, .ways-grid p, .account-guide li { color: var(--muted); font-size: 14px; line-height: 1.8; }
.index-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.index-card, .holdings-panel, .ways-grid article, .account-guide { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 84%, var(--surface-2)); }
.index-card { padding: 24px; border-radius: 18px; }
.lift-card, .route-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.lift-card:hover, .route-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); box-shadow: 0 20px 55px rgba(22,33,43,.12); }
.index-tag { display: inline-flex; margin-bottom: 14px; padding: 6px 9px; background: var(--navy); color: #f7f1e6; font-family: var(--mono); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.index-card h3, .holdings-panel h3, .ways-grid h3, .account-guide h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; }
.index-card ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.holdings-panel { display: grid; grid-template-columns: minmax(260px, .75fr) 1.25fr; gap: 22px; margin-top: 16px; padding: 24px; border-radius: 18px; }
.holding-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.holding-list > div { padding: 16px; border-left: 3px solid var(--rust); background: var(--surface); }
.holding-list h4 { margin: 0 0 8px; font-size: 15px; }
.holding-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.holding-columns article { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.holding-columns h4 { margin: 0 0 13px; font-size: 15px; }
.holding-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(70px, .7fr) 58px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.holding-row:first-of-type { border-top: 0; }
.holding-row b, .holding-row span { display: block; }
.holding-row b { font-size: 12px; }
.holding-row span { margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.holding-row strong { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--rust); }
.holding-bar { height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line) 50%, transparent); }
.holding-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.source-note { grid-column: 1 / -1; margin: 0; font-size: 12px !important; }
.index-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.index-profile { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding:26px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface) 88%,var(--surface-2)); }
.index-profile-copy h2 { margin:0; font-family:var(--serif); font-size:clamp(32px,4vw,48px); line-height:1.08; }
.index-profile-copy h3 { margin:8px 0 12px; color:var(--rust); font-family:var(--serif); font-size:20px; }
.index-profile-copy p,.index-profile-copy li,.index-source { color:var(--muted); font-size:13px; line-height:1.8; }
.index-profile-copy ul { margin:14px 0 0; padding-left:19px; }
.holding-donut-wrap { display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center; gap:20px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.holding-donut { position:relative; width:176px; aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent); }
.holding-donut::after { content:""; position:absolute; inset:29%; border-radius:50%; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.holding-donut > span { position:absolute; z-index:1; inset:34%; display:grid; place-content:center; text-align:center; }
.holding-donut b,.holding-donut small { display:block; }.holding-donut b { font-family:var(--mono); font-size:16px; }.holding-donut small { margin-top:2px; color:var(--muted); font-size:9px; }
.holding-legend { display:grid; gap:7px; }
.holding-legend span { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:7px; font-size:10px; }
.holding-legend i { width:8px; height:8px; border-radius:50%; }.holding-legend b { font-family:var(--mono); }.holding-legend em { color:var(--muted); font-family:var(--mono); font-style:normal; }
.index-holding-list { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.index-holding-list h4 { margin:0 0 10px; font-size:15px; }
.index-source { margin:0; padding-top:2px; border-top:1px dashed var(--line); font-size:11px; }
.ways-intro { margin: 22px 0 12px; max-width: 760px; }
.ways-intro h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 28px; }
.ways-intro p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ways-grid article { padding: 22px; border-top: 3px solid var(--gold); border-radius: 18px; position: relative; overflow: hidden; }
.ways-grid article::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--rust), var(--gold), var(--blue)); opacity: .65; }
.ways-grid article.featured { background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 9%, var(--surface)), color-mix(in srgb, var(--gold) 13%, var(--surface))); }
.ways-grid article > span { color: var(--rust); font-family: var(--mono); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.ways-grid ul { margin: 14px 0 18px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.ways-grid a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 900; }
.account-guide { display: grid; grid-template-columns: 270px 1fr; gap: 18px; margin-top: 16px; padding: 24px; }
.account-guide { border-radius: 18px; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 32%), color-mix(in srgb, var(--surface) 88%, var(--surface-2)); }
.account-guide p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.account-guide ol { margin: 0; padding-left: 22px; }
.account-guide li + li { margin-top: 8px; }
.lazy-panel { color: #1e293b; }
.lazy-hero { padding: 30px; border-radius: 22px; background: radial-gradient(circle at 82% 10%, rgba(124,58,237,.14), transparent 36%), linear-gradient(135deg,#f8fafc,#fff); border: 1px solid #e2e8f0; }
.lazy-hero h2 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 5vw, 56px); }
.lazy-hero > p { max-width: 880px; color: #64748b; line-height: 1.85; }
.lazy-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }
.lazy-stats article { padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; }
.lazy-stats span, .lazy-stats b { display:block; }.lazy-stats span { color:#94a3b8; font-size:11px; font-weight:800; letter-spacing:.08em; }.lazy-stats b { margin:7px 0; font-size:14px; }.lazy-stats strong { color:#16a34a; font-family:var(--mono); font-size:24px; }
.lazy-card-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; }
.lazy-card { position:relative; display:flex; flex-direction:column; min-height:360px; padding:20px; overflow:hidden; border:1px solid #f1f5f9; border-radius:16px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.07); cursor:pointer; transition:.2s ease; }
.lazy-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.13); border-color:color-mix(in srgb,var(--lazy-color) 35%,#f1f5f9); }
.lazy-card-top { position:absolute; inset:0 0 auto; height:4px; background:var(--lazy-color); }
.lazy-card-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.lazy-card-head > span { min-width:28px; height:28px; display:grid; place-items:center; border-radius:999px; color:var(--lazy-color); background:color-mix(in srgb,var(--lazy-color) 13%,#fff); font-size:11px; font-weight:900; }
.lazy-card h3 { margin:0; font-size:15px; line-height:1.35; }.lazy-card-head p { margin:2px 0 0; color:#94a3b8; font-size:11px; }.lazy-card small { color:#64748b; font-size:11px; }.lazy-card > p { color:#64748b; line-height:1.65; font-size:12px; }
.lazy-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin: 8px 0 10px; }
.lazy-kpis div { padding:8px 6px; border-radius:8px; background:#f8fafc; text-align:center; }.lazy-kpis b,.lazy-kpis span { display:block; }.lazy-kpis b { font-size:13px; }.lazy-kpis span { margin-top:2px; color:#94a3b8; font-size:10px; }
.lazy-mini-line { width:100%; height:70px; margin: 2px 0 12px; }.lazy-mini-line path { fill:none; stroke-width:3; }
.lazy-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }.lazy-tags span { padding:2px 8px; border:1px solid color-mix(in srgb,var(--lazy-color) 25%,#e2e8f0); border-radius:999px; color:var(--lazy-color); background:color-mix(in srgb,var(--lazy-color) 7%,#fff); font-size:11px; font-weight:700; }
.lazy-card button { margin-top:auto; width:100%; min-height:38px; border:1px solid color-mix(in srgb,var(--lazy-color) 35%,#e2e8f0); border-radius:8px; color:var(--lazy-color); background:color-mix(in srgb,var(--lazy-color) 8%,#fff); font-size:13px; font-weight:800; }
.lazy-card:hover button { background:var(--lazy-color); color:#fff; }
.lazy-section { margin-top:22px; padding:26px 30px; border:1px solid #f1f5f9; border-radius:16px; background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.04); }
.lazy-section-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:18px; }.lazy-section h3 { margin:0; font-family:var(--serif); font-size:26px; }.lazy-section p { margin:0; color:#64748b; font-size:13px; line-height:1.7; }
.lazy-growth-chart svg { width:100%; min-height:320px; }.lazy-growth-chart line { stroke:#f1f5f9; stroke-dasharray:3 3; }.lazy-growth-chart path { fill:none; stroke-width:3; opacity:.85; }.lazy-growth-chart text { fill:#94a3b8; font-size:12px; text-anchor:middle; }
.lazy-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.lazy-legend button { display:inline-flex; gap:6px; align-items:center; min-height:30px; padding:0 10px; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; color:#64748b; font-size:11px; font-weight:800; }.lazy-legend i { width:7px; height:7px; border-radius:50%; }
.lazy-table-wrap { overflow-x:auto; border:1px solid #e2e8f0; border-radius:14px; }.lazy-table { width:100%; min-width:760px; border-collapse:collapse; font-size:12px; }.lazy-table th { padding:12px 16px; background:linear-gradient(135deg,#1a56db,#7c3aed); color:#fff; text-align:center; }.lazy-table th:first-child { text-align:left; }.lazy-table td { padding:11px 16px; border-bottom:1px solid #f1f5f9; text-align:center; }.lazy-table tr { cursor:pointer; }.lazy-table tbody tr:hover { background:#f0f4ff; }.lazy-table td:first-child { text-align:left; display:flex; align-items:center; gap:8px; }.lazy-table i { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }.lazy-table b,.lazy-table small { display:block; }.lazy-table small { color:#94a3b8; margin-top:2px; }
.lazy-detail-panel { scroll-margin-top:20px; }
.lazy-detail { margin-top:22px; border-radius:18px; overflow:hidden; border:1px solid #e2e8f0; background:#fff; }
.lazy-detail-head { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:28px 30px; color:#fff; background:linear-gradient(135deg,var(--lazy-color),color-mix(in srgb,var(--lazy-color) 78%,#111)); }
.lazy-detail-head span { font-size:11px; font-weight:900; letter-spacing:.12em; }.lazy-detail-head h3 { margin:6px 0; font-family:var(--serif); font-size:34px; }.lazy-detail-head p { margin:0; color:rgba(255,255,255,.85); }
.lazy-detail-kpis { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; border-radius:14px; background:#fff; color:#1e293b; box-shadow:0 8px 32px rgba(0,0,0,.18); }.lazy-detail-kpis b { min-width:110px; padding:14px 16px; text-align:center; color:var(--lazy-color); font-size:22px; }.lazy-detail-kpis small { display:block; margin-top:4px; color:#64748b; font-size:10px; }
.lazy-detail-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; padding:28px 30px; }.lazy-story h4,.lazy-alloc h4 { margin:0 0 14px; font-size:18px; }.lazy-story p { color:#475569; font-size:14px; line-height:1.85; }.lazy-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid #f1f5f9; }.lazy-chip-row span { padding:5px 12px; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; color:#64748b; font-size:12px; }
.lazy-allocation-row { display:grid; grid-template-columns:10px 44px 1fr 90px 44px; gap:9px; align-items:center; padding:9px 0; border-bottom:1px solid #f8fafc; }.lazy-dot { width:10px; height:10px; border-radius:50%; }.lazy-allocation-row b { color:var(--lazy-color); font-size:12px; }.lazy-allocation-row em { color:#64748b; font-size:12px; font-style:normal; }.lazy-allocation-row i { height:6px; border-radius:999px; background:#f1f5f9; overflow:hidden; }.lazy-allocation-row i span { display:block; height:100%; background:var(--lazy-color); }.lazy-allocation-row strong { text-align:right; font-size:13px; }
.lazy-year-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:1px; padding:0 30px 28px; }.lazy-year-grid div { padding:12px 8px; background:#f8fafc; text-align:center; }.lazy-year-grid span,.lazy-year-grid b,.lazy-year-grid small { display:block; }.lazy-year-grid span { color:#64748b; font-size:11px; }.lazy-year-grid b { margin:5px 0; font-size:13px; }.lazy-year-grid small { color:#94a3b8; }
.lazy-source { margin:18px 4px 0; color:#94a3b8 !important; }
.compare-tray { position: fixed; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(900px, calc(100% - 32px)); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 16px 60px rgba(0,0,0,.22); }.compare-tray > div:first-child b, .compare-tray > div:first-child span { display:block; }.compare-tray span { color:var(--muted); font-size:11px; }.compare-items { display:flex; gap:7px; overflow-x:auto; }.compare-chip { padding:6px 9px; background:var(--surface-2); font-size:11px; white-space:nowrap; }
.compare-dialog { width:min(1040px,calc(100% - 30px)); max-height:86vh; border:1px solid var(--line); padding:0; background:var(--surface); color:var(--ink); }.compare-dialog::backdrop { background:rgba(5,13,20,.72); }.dialog-shell { padding:22px; }.dialog-head { display:flex; justify-content:space-between; align-items:start; }.dialog-head h2 { margin:0; font-family:var(--serif); }.dialog-head button { border:0; background:transparent; color:var(--ink); font-size:28px; }.compare-table { width:100%; margin-top:18px; border-collapse:collapse; font-size:12px; }.compare-table th,.compare-table td { padding:12px; border:1px solid var(--line); text-align:left; }.compare-table th { background:var(--surface-2); }
.etf-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:28px 0 80px; color:var(--muted); font-size:12px; }.etf-footer a { color:var(--rust); font-weight:800; }

/* Shared site frame: the home and research categories use the ETF visual system. */
.unified-header { position: relative; overflow: visible; }
.unified-header + .page-shell,
.category-layout { width: min(1280px, calc(100% - 48px)); }
.unified-header + .page-shell { padding-top: 38px; }
.unified-header .hero-heading { min-height: 86px; }
.unified-header .hero-heading > div { max-width: 920px; }
.unified-header .hero-heading h1 { color: #f7f1e6; }
.unified-header .hero-heading p { color: rgba(255,255,255,.7); }
.category-page { background: var(--bg); color: var(--ink); font-family: var(--sans); }
.category-page .category-layout { padding-top: 38px; }
.category-page .category-header { border-top-color: var(--rust); }
.category-page .category-header h1 { font-family: var(--serif); color: var(--ink); }
.category-page .category-header p { color: var(--muted); }
.page-shell .research-card,
.page-shell .article-card,
.page-shell .sidebar-card,
.category-layout .article-card { border-color: var(--line); background-color: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.page-shell .research-card p,
.page-shell .article-card p,
.page-shell .sidebar-card p,
.category-layout .article-card p { color: var(--muted); }
.page-shell .ticker-bar { border-color: var(--line); background: var(--surface-2); }
.page-shell .section-heading,
.page-shell .sidebar-card,
.page-shell .research-card { border-color: var(--line); }
.site-footer { width: min(1280px, calc(100% - 48px)); color: var(--muted); border-color: var(--line); }

@media (max-width: 920px) { .metric-grid { grid-template-columns: repeat(2,1fr); }.method-grid,.index-compare-grid,.index-profile-grid,.ways-grid,.lazy-card-grid { grid-template-columns:1fr; }.holdings-panel,.account-guide,.lazy-detail-grid { grid-template-columns: 1fr; }.lazy-stats,.lazy-year-grid { grid-template-columns:1fr; }.hero-heading { align-items:start; flex-direction:column; }.freshness { width:100%; }.compare-tray { grid-template-columns:1fr auto auto; }.compare-items { grid-column:1/-1; grid-row:2; } }
@media (max-width: 640px) { .etf-nav,.etf-hero,.etf-shell,.etf-footer,.unified-header + .page-shell,.category-layout,.site-footer { width:min(100% - 24px,1280px); }.etf-nav { grid-template-columns:1fr auto; }.etf-nav-links { order:3; grid-column:1/-1; justify-self:stretch; height:48px; }.etf-nav-links > a,.etf-nav-links > .nav-us-menu { flex:1; min-width:0; }.etf-nav-links > a,.nav-us-menu > a { min-width:0; padding: 0 8px; }.nav-us-dropdown { position:fixed; top:124px; left:12px; right:12px; width:auto; transform:none; }.etf-header::before { height:430px; }.etf-hero { padding:38px 0 44px; }.hero-heading h1 { font-size:40px; }.metric-grid { grid-template-columns:1fr; }.metric-card { min-height:112px; }.toolbar { grid-template-columns:1fr; }.table-summary { align-items:start; flex-direction:column; }.holding-list { grid-template-columns:1fr; }.guide-section { padding:14px; }.holding-donut-wrap { grid-template-columns:1fr; justify-items:center; }.holding-legend { width:100%; }.compare-tray { grid-template-columns:1fr 1fr; }.compare-tray > div:first-child { grid-column:1/-1; }.compare-items { grid-column:1/-1; }.etf-footer { flex-direction:column; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; }.market-ticker-track { transform:translateX(0); } }