:root { --ink:#17211b; --muted:#68736c; --green:#176b4d; --green-dark:#0d4b35; --mint:#e8f2ed; --line:#dfe5e1; --paper:#f6f7f4; --white:#fff; --red:#ba3a2d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:0; }
button,input { font:inherit; }
button { cursor:pointer; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1180px)/2)); background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; background:var(--green); color:#fff; font-family:serif; }
.source { font-size:12px; color:var(--muted); }
main { width:min(1180px,calc(100% - 32px)); margin:0 auto; }
.intro { padding:52px 0 30px; }
.eyebrow,.result-label { margin:0 0 10px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:1.8px; }
h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:42px; font-weight:600; letter-spacing:0; }
.intro>p:last-child { margin:12px 0 0; color:var(--muted); }
.query-panel { background:#fff; border:1px solid var(--line); border-top:3px solid var(--green); padding:24px; box-shadow:0 8px 25px rgba(28,54,42,.05); }
form { display:grid; grid-template-columns:150px 1.35fr 1fr 1fr 150px; gap:16px; align-items:start; }
form>.primary { margin-top:26px; }
label { min-width:0; }
label span,.type-field>span { display:block; margin-bottom:8px; font-size:13px; font-weight:650; }
.type-switch { display:grid; grid-template-columns:1fr 1fr; height:44px; padding:3px; border:1px solid #cdd6d0; border-radius:4px; background:#f4f7f5; }
.type-switch button { border:0; border-radius:3px; background:transparent; color:var(--muted); font-weight:650; }
.type-switch button.active { background:#fff; color:var(--green); box-shadow:0 1px 4px rgba(23,50,38,.13); }
input { width:100%; min-width:0; height:44px; border:1px solid #cdd6d0; border-radius:4px; padding:0 12px; outline:none; background:#fcfdfc; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,77,.1); }
.code-field input { font-weight:700; letter-spacing:2px; }
.code-name { display:block; min-height:16px; margin-top:5px; color:var(--green); font-size:11px; font-weight:600; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.code-name.error { color:var(--red); }
.primary,.download { height:44px; border:0; border-radius:4px; color:#fff; background:var(--green); font-weight:700; }
.primary:hover,.download:hover { background:var(--green-dark); }
.primary:disabled,.download:disabled { cursor:not-allowed; opacity:.45; }
.search-icon { font-size:20px; margin-right:5px; }
.quick-range { display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid #edf0ee; }
.quick-range>span { margin-right:4px; color:var(--muted); font-size:12px; }
.quick-range button { padding:6px 12px; border:1px solid var(--line); border-radius:3px; background:#fff; color:#445048; font-size:12px; }
.quick-range button:hover,.quick-range button.active { border-color:var(--green); color:var(--green); background:var(--mint); }
.query-status { min-height:20px; margin-top:14px; color:var(--muted); font-size:12px; }
.query-status.loading { color:var(--green); }
.query-status.error { color:var(--red); }
.results { margin:28px 0 60px; background:#fff; border:1px solid var(--line); }
.result-head { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; }
.result-head h2 { margin:0; font-size:22px; }
.record-count { margin-left:8px; color:var(--muted); font-size:13px; font-weight:400; }
.download { padding:0 18px; background:#173d2f; }
.download span { font-size:19px; margin-right:5px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fafbf9; }
.stats div { padding:18px 24px; border-right:1px solid var(--line); }
.stats div:last-child { border-right:0; }
.stats span { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.stats strong { font-family:Georgia,serif; font-size:23px; font-weight:600; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:850px; }
th,td { padding:14px 18px; border-bottom:1px solid #e8ece9; text-align:right; font-size:13px; white-space:nowrap; }
th { background:#f4f7f5; color:#536158; font-size:12px; font-weight:650; }
th:first-child,td:first-child { text-align:left; padding-left:24px; }
td:nth-child(n+5) { color:#56615a; }
.up { color:var(--red)!important; font-weight:650; }.down { color:var(--green)!important; font-weight:650; }
.empty { padding:60px; text-align:center; color:var(--muted); }
.pagination { min-height:62px; display:flex; justify-content:center; align-items:center; gap:16px; }
.pagination button { width:34px; height:34px; border:1px solid var(--line); border-radius:3px; background:#fff; font-size:20px; }
.pagination button:disabled { opacity:.35; cursor:not-allowed; }
#page-info { color:var(--muted); font-size:12px; }
.welcome { min-height:280px; display:grid; place-content:center; text-align:center; color:var(--muted); }
.welcome h2 { margin:16px 0 5px; color:#4c5851; font-size:17px; }
.welcome p { margin:0; font-size:13px; }
.chart-icon { margin:auto; display:grid; place-items:center; width:58px; height:58px; border:1px solid #c9d7cf; color:var(--green); font-size:36px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); padding:12px 18px; border-radius:4px; background:#17211b; color:#fff; opacity:0; pointer-events:none; transition:.2s; font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }
footer { padding:22px; border-top:1px solid var(--line); color:#8a938d; text-align:center; font-size:11px; }
.workspace-tabs { display:flex; gap:22px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.workspace-tabs button { padding:0 2px 12px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-weight:700; }
.workspace-tabs button.active { border-color:var(--green); color:var(--green); }
.backtest-view,.index-compare-view,.portfolio-view { margin-bottom:60px; }
.backtest-config,.chart-panel,.comparison-table { background:#fff; border:1px solid var(--line); }
.backtest-config { border-top:3px solid var(--green); padding:24px; }
.backtest-heading,.chart-head { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.backtest-heading h2,.chart-head h2 { margin:0; font-size:22px; }
.backtest-heading .primary { width:140px; }
.backtest-grid { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:18px; margin-top:22px; }
.asset-config,.time-config { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; padding:16px; border:1px solid var(--line); background:#fafbf9; }
.asset-tag { grid-column:1/-1; display:block; font-size:12px; font-weight:800; }
.asset-amount { grid-column:1/-1; }
.asset-a { color:#176b4d; }.asset-b { color:#a34d2f; }
select { width:100%; min-width:0; height:44px; padding:0 10px; border:1px solid #cdd6d0; border-radius:4px; background:#fff; font:inherit; }
.time-config { grid-template-columns:1fr 1fr; }
.backtest-status { min-height:20px; margin-top:16px; color:var(--muted); font-size:12px; }
.backtest-status.loading { color:var(--green); }.backtest-status.error { color:var(--red); }
.strategy-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-top:22px; border:1px solid var(--line); background:#fff; }
.summary-item { padding:18px; border-right:1px solid var(--line); }
.summary-item:last-child { border-right:0; }
.summary-item span { display:block; color:var(--muted); font-size:11px; }
.summary-item strong { display:block; margin:8px 0 4px; font-family:Georgia,serif; font-size:24px; }
.summary-item small { color:var(--muted); font-size:11px; }
.chart-panel { margin-top:22px; padding:22px 24px 18px; }
.chart-head { margin-bottom:18px; }
.chart-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 16px; font-size:11px; color:var(--muted); }
.chart-legend span::before { content:""; display:inline-block; width:16px; height:3px; margin-right:6px; vertical-align:middle; background:var(--legend-color); }
#backtest-chart { display:block; width:100%; height:380px; }
.index-compare-grid { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:18px; margin-top:22px; }
.compare-index-card,.compare-date-card { display:grid; grid-template-columns:1fr; gap:12px; align-items:start; padding:16px; border:1px solid var(--line); background:#fafbf9; }
.compare-date-card { grid-template-columns:1fr 1fr; align-items:start; padding-top:45px; }
.compare-summary { display:grid; grid-template-columns:1fr 1fr; margin-top:22px; border:1px solid var(--line); background:#fff; }
.compare-summary-card { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:16px; align-items:center; padding:20px 24px; border-right:1px solid var(--line); }
.compare-summary-card:last-child { border-right:0; }
.compare-summary-card h3 { margin:0; font-size:16px; }.compare-summary-card h3 small { display:block; margin-top:5px; color:var(--muted); font-size:11px; font-weight:400; }
.compare-metric span { display:block; color:var(--muted); font-size:11px; }.compare-metric strong { display:block; margin-top:6px; font-family:Georgia,serif; font-size:20px; }
#index-compare-chart { display:block; width:100%; height:420px; }
.portfolio-assets { display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:18px; margin-top:22px; }
.allocation-card { padding:16px; border:1px solid var(--line); background:#fafbf9; }
.allocation-card>span { display:block; font-size:13px; font-weight:650; }
.allocation-display { display:flex; align-items:center; justify-content:center; gap:14px; margin:12px 0 8px; }.allocation-display strong { font-family:Georgia,serif; font-size:28px; color:var(--green); }.allocation-display strong:last-child { color:#a34d2f; }.allocation-display i { color:var(--muted); font-style:normal; }
.allocation-card input[type=range] { height:24px; padding:0; accent-color:var(--green); }
.allocation-presets { display:flex; gap:6px; justify-content:center; margin-top:8px; }.allocation-presets button { padding:5px 9px; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:3px; font-size:11px; }.allocation-presets button.active { border-color:var(--green); color:var(--green); background:var(--mint); }
.portfolio-settings { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px; padding:18px; border:1px solid var(--line); background:#fafbf9; }
.portfolio-kpis { display:grid; grid-template-columns:repeat(6,1fr); margin-top:22px; border:1px solid var(--line); background:#fff; }.portfolio-kpi { min-width:0; padding:18px; border-right:1px solid var(--line); }.portfolio-kpi:last-child { border-right:0; }.portfolio-kpi span { display:block; color:var(--muted); font-size:11px; }.portfolio-kpi strong { display:block; margin-top:8px; font-family:Georgia,serif; font-size:21px; white-space:nowrap; }
#portfolio-chart { display:block; width:100%; height:420px; }
.portfolio-holdings { margin-top:22px; padding:22px 24px; border:1px solid var(--line); background:#fff; }.portfolio-holdings h2 { margin:0; font-size:22px; }.holding-bar { display:flex; height:22px; margin-top:20px; overflow:hidden; border-radius:3px; background:#edf0ee; }.holding-bar span:first-child { background:var(--green); }.holding-bar span:last-child { background:#a34d2f; }.holding-labels { display:flex; justify-content:space-between; gap:20px; margin-top:10px; color:var(--muted); font-size:12px; }
.comparison-table { margin-top:22px; }
.comparison-table th:first-child,.comparison-table td:first-child { padding-left:24px; }
@media(max-width:760px){ .topbar{padding:0 16px}.source{display:none}.intro{padding:34px 0 22px}h1{font-size:32px}form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}form>.primary{margin-top:0}.type-field,.code-field,.primary{grid-column:1/-1}.primary{width:100%}.quick-range{overflow-x:auto}.query-panel{padding:18px}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}.result-head{padding:18px;gap:12px}.download{width:auto;min-width:112px;padding:0 12px}.download span{font-size:18px;margin-right:4px}.stats div{padding:15px 18px}.stats strong{font-size:19px}}
@media(max-width:760px){ .backtest-config{padding:18px}.backtest-heading{align-items:end}.backtest-heading .primary{width:110px}.backtest-grid{grid-template-columns:1fr}.strategy-summary{grid-template-columns:1fr 1fr}.summary-item:nth-child(2){border-right:0}.summary-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.chart-panel{padding:18px 14px}.chart-head{display:block}.chart-legend{justify-content:flex-start;margin-top:14px}.summary-item strong{font-size:20px}#backtest-chart{height:300px}}
@media(max-width:760px){ .workspace-tabs{gap:14px;overflow-x:auto;white-space:nowrap}.index-compare-grid{grid-template-columns:1fr}.compare-date-card{padding-top:16px}.compare-summary{grid-template-columns:1fr}.compare-summary-card{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line)}.compare-summary-card:last-child{border-bottom:0}.compare-summary-card h3{grid-column:1/-1}#index-compare-chart{height:320px}}
@media(max-width:760px){.portfolio-assets{grid-template-columns:1fr}.portfolio-settings{grid-template-columns:1fr 1fr}.portfolio-kpis{grid-template-columns:1fr 1fr}.portfolio-kpi:nth-child(2n){border-right:0}.portfolio-kpi:nth-child(-n+4){border-bottom:1px solid var(--line)}#portfolio-chart{height:320px}.portfolio-holdings{padding:18px}.holding-labels{display:block}.holding-labels span{display:block;margin-top:5px}}