:root { --ink:#17252c; --soft:#5d6f77; --line:#dce5e8; --bg:#f4f7f8; --card:#fff; --accent:#13795b; --accent-dark:#0b5e45; --accent-pale:#e7f5ef; --warn:#b96a10; --danger:#b42318; --radius:13px; --sidebar:390px; font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #8dd6bc; outline-offset:2px; }
.mobile-bar { display:none; } .app-shell { display:grid; grid-template-columns:clamp(340px,30vw,var(--sidebar)) minmax(0,1fr); height:100dvh; overflow:hidden; }
.config-pane { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-width:0; background:var(--card); border-right:1px solid var(--line); overflow:hidden; } .pane-header { display:flex; align-items:center; justify-content:space-between; padding:22px 22px 18px; border-bottom:1px solid var(--line); } h1,h2,h3,p { margin:0; } h1 { font-size:21px; letter-spacing:-.03em; } h2 { margin-top:3px; font-size:27px; letter-spacing:-.035em; } h3 { font-size:16px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .config-scroll { overflow-y:auto; } .beginner-note { display:grid; gap:3px; margin:14px 18px 4px; padding:11px 12px; color:#245244; background:var(--accent-pale); border-radius:9px; font-size:11px; line-height:1.45; } .beginner-note strong { font-size:12px; } .config-section { border-bottom:1px solid var(--line); } .config-section summary { display:flex; align-items:flex-start; gap:10px; padding:15px 22px; cursor:pointer; list-style:none; } .config-section summary::-webkit-details-marker,.advanced summary::-webkit-details-marker { display:none; } .config-section summary>span { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; color:var(--accent); background:var(--accent-pale); border-radius:50%; font-size:10px; font-weight:800; } .config-section summary strong { display:block; font-size:13px; } .config-section summary small,.help { display:block; margin-top:2px; color:var(--soft); font-size:11px; line-height:1.45; } .section-body { padding:0 22px 18px; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .span-2 { grid-column:1 / -1; }
label { display:grid; gap:5px; color:#43545b; font-size:11px; font-weight:700; } input,select,textarea { width:100%; min-height:39px; padding:8px 9px; color:var(--ink); background:#fff; border:1px solid #cbd8dc; border-radius:8px; } textarea { min-height:90px; resize:vertical; line-height:1.35; } input[type="range"] { min-height:auto; padding:0; accent-color:var(--accent); } .date-preset,.mode-buttons,.inline-actions,.quick-values { display:flex; gap:7px; flex-wrap:wrap; } .date-preset button,.mode-buttons button,.quick-values button { min-height:33px; padding:6px 8px; color:#44616a; background:#f6f9fa; border:1px solid var(--line); border-radius:7px; font-size:11px; font-weight:700; } .mode-buttons button.active,.quick-values button:hover { color:var(--accent-dark); background:var(--accent-pale); border-color:#91cdb7; } .visually-secondary { opacity:.86; }
.tolerance-control { padding:12px; background:#f7fbf9; border:1px solid #bdd9cf; border-radius:10px; } .control-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .control-heading label { font-size:12px; } .control-heading strong { display:flex; align-items:center; gap:3px; color:var(--accent-dark); font-size:14px; } .control-heading input { width:72px; min-height:34px; padding:5px 7px; text-align:right; } .tolerance-control>input[type="range"] { margin:12px 0 9px; } .quick-values { margin-bottom:8px; } .quick-values button { min-height:29px; padding:4px 8px; }
.range-label { display:block; margin-top:2px; } .range-label strong { float:right; color:var(--accent); } .range-label input { margin:9px 0 4px; } .range-label small { color:var(--soft); font-size:10.5px; font-weight:500; } .target-preview,.compact-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:12px; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:8px; } .preview-item,.summary-item { padding:7px 8px; background:#f8fbfb; } .preview-item span,.summary-item span { display:block; color:var(--soft); font-size:10px; } .preview-item strong,.summary-item strong { display:block; margin-top:3px; font-size:11px; }
.repo-control { margin-top:12px; padding:11px; background:#f0f7ff; border:1px solid #bfd5ea; border-radius:9px; } .repo-control label { color:#244e70; } .repo-control .help { margin-top:7px; color:#526c80; }
.asset-editor { display:grid; gap:9px; margin-top:10px; } .asset-card { padding:10px; background:#fbfcfc; border:1px solid var(--line); border-radius:9px; } .asset-title { display:flex; justify-content:space-between; gap:8px; align-items:baseline; } .asset-title strong { font-size:12px; } .asset-title small { color:var(--soft); font-size:10px; text-align:right; } .asset-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; } .asset-row label { font-size:10px; } .asset-row input { min-height:34px; padding:6px; } .asset-chain { margin-top:8px; padding:7px; color:#52646c; background:#f1f6f5; border-radius:6px; font-size:10px; line-height:1.45; } .checkbox { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:8px; background:#fff7e9; border:1px solid #f3d19c; border-radius:8px; color:#7b4d08; font-weight:600; } .checkbox input { width:16px; min-height:16px; }
.advanced { padding:10px; border:1px dashed #c8d8db; border-radius:8px; } .advanced summary { padding:0; color:#43545b; cursor:pointer; font-size:11px; font-weight:750; } .advanced-content { margin-top:10px; } .run-dock { padding:13px 18px 17px; background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 22px rgb(18 49 41 / 5%); } .data-source-status { margin-bottom:7px; color:var(--accent-dark); font-size:10.5px; font-weight:700; line-height:1.35; } .data-source-status.warning { color:var(--warn); } .validation { min-height:28px; margin-bottom:9px; color:var(--soft); font-size:10.5px; line-height:1.35; } .validation.error { color:var(--danger); } .validation.warning { color:var(--warn); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:39px; padding:8px 12px; border:1px solid transparent; border-radius:8px; font-size:12px; font-weight:750; } .primary { width:100%; color:#fff; background:var(--accent); box-shadow:0 4px 10px rgb(19 121 91 / 20%); } .primary:hover:not(:disabled) { background:var(--accent-dark); } .secondary { color:var(--accent-dark); background:#fff; border-color:#9bc9b9; } .secondary:hover:not(:disabled) { background:var(--accent-pale); } .full { width:100%; margin-top:8px; } .button:disabled { cursor:not-allowed; opacity:.5; } .icon-button { display:grid; place-items:center; width:32px; height:32px; padding:0; color:#4a5c64; background:#f1f5f5; border:1px solid var(--line); border-radius:7px; font-size:22px; line-height:1; }
.results-pane { min-width:0; overflow-y:auto; padding:25px 28px 32px; } .results-header,.workflow-strip,.config-summary,.metric-grid,.card,.disclaimer { max-width:1500px; margin-right:auto; margin-left:auto; } .results-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; } .results-header p { margin-top:4px; color:var(--soft); font-size:12px; } .header-actions { display:flex; align-items:center; gap:8px; } .badge { padding:5px 7px; color:#875400; background:#fff3dc; border-radius:5px; font-size:11px; font-weight:750; white-space:nowrap; }
.workflow-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:15px; } .workflow-strip>div { display:grid; grid-template-columns:28px 1fr; column-gap:8px; padding:11px 12px; background:#eef7f3; border:1px solid #d2e8df; border-radius:10px; } .workflow-strip span { grid-row:1 / 3; display:grid; place-items:center; width:25px; height:25px; color:#fff; background:var(--accent); border-radius:50%; font-size:11px; font-weight:800; } .workflow-strip strong { font-size:11px; } .workflow-strip small { margin-top:2px; color:var(--soft); font-size:10px; }
.config-summary { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-top:15px; padding:14px 17px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); } .summary-items { display:flex; flex-wrap:wrap; gap:8px 0; } .summary-items>div { padding:0 12px; border-right:1px solid var(--line); } .summary-items>div:first-child { padding-left:0; } .summary-items>div:last-child { border:0; } .run-status { display:flex; align-items:center; gap:7px; color:var(--soft); font-size:11px; white-space:nowrap; } .dot { width:8px; height:8px; background:#a2b3b8; border-radius:50%; } .dot.running { background:var(--warn); box-shadow:0 0 0 3px #fff0d8; animation:pulse 1.2s infinite; } .dot.success { background:var(--accent); box-shadow:0 0 0 3px var(--accent-pale); } .dot.error { background:var(--danger); box-shadow:0 0 0 3px #fdecea; } @keyframes pulse {50%{opacity:.45}}
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; } .metric,.empty-metrics { padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); } .metric span { color:var(--soft); font-size:11px; } .metric strong { display:block; margin-top:8px; font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; } .metric.negative strong { color:var(--danger); } .metric.positive strong { color:var(--accent); } .empty-metrics { grid-column:1 / -1; color:var(--soft); font-size:12px; }
.card { margin-top:14px; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); } .card-heading { display:flex; justify-content:space-between; align-items:center; padding:16px 18px 8px; } .card-heading p { margin-top:3px; color:var(--soft); font-size:11px; } .tabs { display:flex; gap:22px; padding:0 18px; overflow-x:auto; border-bottom:1px solid var(--line); scrollbar-width:none; } .tabs button { position:relative; flex:0 0 auto; min-height:39px; padding:0; color:var(--soft); background:transparent; border:0; font-size:12px; font-weight:700; } .tabs button.active { color:var(--accent); } .tabs button.active::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; content:""; background:var(--accent); } .chart { min-height:410px; } .records-card { min-height:260px; } .table-wrap { overflow:auto; max-height:450px; padding:0 16px; } table { width:100%; border-collapse:collapse; color:#3d4f56; font-size:11px; } th,td { padding:10px; border-bottom:1px solid #edf1f2; text-align:right; white-space:nowrap; } th { position:sticky; top:0; z-index:1; color:#53666e; background:#f8fafb; font-size:10.5px; } th:first-child,td:first-child { text-align:left; } tbody tr { cursor:pointer; } tbody tr:hover td { background:#f5faf8; } .empty-row { color:var(--soft); text-align:center!important; } .disclaimer { margin-top:14px; padding:13px 15px; color:#76552a; background:#fff9ee; border:1px solid #f2dcac; border-radius:9px; font-size:11px; line-height:1.55; }
.record-pagination { display:none; align-items:center; justify-content:flex-end; gap:10px; padding:10px 18px 14px; color:var(--soft); font-size:11px; } .record-pagination.visible { display:flex; } .record-pagination button { min-height:30px; padding:0 12px; color:var(--accent); background:#f3faf7; border:1px solid #cce4da; border-radius:7px; font-size:11px; font-weight:700; } .record-pagination button:disabled { color:#9aa8ad; background:#f5f7f8; border-color:#e2e8ea; cursor:not-allowed; }
.detail-drawer { position:fixed; top:0; right:0; z-index:30; width:min(480px,94vw); height:100dvh; padding:20px; overflow-y:auto; background:#fff; box-shadow:-16px 0 35px rgb(14 32 39 / 20%); transform:translateX(105%); transition:transform .2s ease; } .detail-drawer.open { transform:translateX(0); } .drawer-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line); } .drawer-list { display:grid; gap:8px; margin-top:14px; } .drawer-list div { padding:9px; background:#f7faf9; border-radius:7px; font-size:11px; } .drawer-list span { display:block; color:var(--soft); } .drawer-list strong { display:block; margin-top:3px; overflow-wrap:anywhere; }
@media (max-width:1179px) { .results-pane { padding:20px; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .config-summary { align-items:flex-start; flex-direction:column; } .workflow-strip { grid-template-columns:1fr; } }
@media (max-width:899px) { .mobile-bar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:59px; padding:9px 14px; background:rgb(255 255 255 / 96%); border-bottom:1px solid var(--line); backdrop-filter:blur(9px); } .mobile-bar strong { font-size:16px; } .mobile-bar span { display:block; margin-top:2px; color:var(--soft); font-size:10px; } .app-shell { display:block; height:auto; min-height:calc(100dvh - 59px); overflow:visible; } .config-pane { position:fixed; inset:0 auto 0 0; z-index:40; width:min(390px,92vw); height:100dvh; box-shadow:10px 0 30px rgb(14 32 39 / 20%); transform:translateX(-105%); transition:transform .2s ease; } body.config-open .config-pane { transform:translateX(0); } .backdrop { position:fixed; inset:0; z-index:35; display:none; width:100%; height:100%; padding:0; background:rgb(14 32 39 / 42%); border:0; } body.config-open .backdrop { display:block; } .results-pane { min-height:calc(100dvh - 59px); padding:16px; overflow:visible; } .closeConfig { display:block; } }
@media (min-width:900px) { .backdrop,.pane-header .icon-button { display:none; } }
@media (max-width:639px) { .results-pane { padding:13px 10px 24px; } .results-header { align-items:flex-start; flex-direction:column; gap:10px; } h2 { font-size:23px; } .metric-grid { gap:8px; } .metric { padding:13px; } .metric strong { font-size:18px; } .chart { min-height:320px; } .tabs { gap:18px; padding:0 13px; } .card-heading { padding:14px 13px 8px; } .table-wrap { padding:0; } .two-col { grid-template-columns:1fr; } .span-2 { grid-column:auto; } .config-summary { padding:13px; } .summary-items { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; } .summary-items>div { padding:0; border:0; } }

/* Benchmark comparison and historical-run workspace. */
.header-actions { flex-wrap:wrap; justify-content:flex-end; }
.history-button { color:#fff; background:#2864a7; border-color:#2864a7; }
.history-button:hover { background:#1f518b; }
.history-button span { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:5px; padding:0 5px; color:#1f518b; background:#fff; border-radius:10px; font-size:10px; }
.chart-card .card-heading { gap:16px; }
.benchmark-note { max-width:360px; padding:6px 9px; color:#28547d; background:#edf5fc; border-radius:6px; font-size:10px; line-height:1.4; text-align:right; }
.history-backdrop { position:fixed; inset:0; z-index:41; display:none; width:100%; height:100%; padding:0; background:rgb(14 32 39 / 36%); border:0; }
body.history-open .history-backdrop { display:block; }
.history-sidebar { position:fixed; top:0; right:0; z-index:42; display:flex; flex-direction:column; width:min(520px,96vw); height:100dvh; background:#f7fafb; box-shadow:-18px 0 38px rgb(14 32 39 / 24%); transform:translateX(105%); transition:transform .22s ease; }
body.history-open .history-sidebar { transform:translateX(0); }
.history-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px; background:#fff; border-bottom:1px solid var(--line); }
.history-heading h3 { margin-top:3px; font-size:21px; }
.history-heading p { margin-top:5px; color:var(--soft); font-size:11px; }
.history-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; color:#38515c; background:#eef4f6; border-bottom:1px solid var(--line); font-size:11px; }
.history-toolbar button { padding:4px 7px; color:#2864a7; background:transparent; border:0; font-size:10px; font-weight:750; }
.history-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:42vh; padding:12px 14px; overflow:auto; background:#fff; border-bottom:1px solid var(--line); }
.history-compare-card { min-width:0; padding:10px; background:#f7fbfa; border:1px solid #cfe3dc; border-radius:9px; }
.history-compare-card header { display:flex; justify-content:space-between; gap:8px; }
.history-compare-card header strong { font-size:11px; }
.history-compare-card header span { color:var(--soft); font-size:9px; }
.history-compare-card dl { display:grid; grid-template-columns:1fr auto; gap:5px 8px; margin:9px 0 0; font-size:10px; }
.history-compare-card dt { color:var(--soft); }
.history-compare-card dd { margin:0; font-weight:750; text-align:right; }
.history-list-heading { display:flex; justify-content:space-between; padding:13px 16px 8px; font-size:11px; }
.history-list-heading span { color:var(--soft); font-size:10px; }
.history-list { display:grid; gap:9px; padding:0 14px 18px; overflow-y:auto; }
.history-run-card { padding:12px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.history-run-card.current { border-color:#56aa8d; box-shadow:0 0 0 2px #e1f3ec; }
.history-run-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.history-run-top strong { display:block; font-size:12px; }
.history-run-top small { display:block; margin-top:3px; color:var(--soft); font-size:9.5px; }
.history-run-top span { padding:3px 6px; color:#246046; background:#e8f5ef; border-radius:5px; font-size:9px; font-weight:750; white-space:nowrap; }
.history-run-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.history-run-metrics div { min-width:0; padding:7px 5px; background:#f5f8f9; border-radius:6px; text-align:center; }
.history-run-metrics span { display:block; overflow:hidden; color:var(--soft); font-size:8.5px; text-overflow:ellipsis; white-space:nowrap; }
.history-run-metrics strong { display:block; margin-top:3px; font-size:10px; font-variant-numeric:tabular-nums; }
.history-parameters { margin-top:9px; color:#50636b; font-size:9.5px; line-height:1.5; }
.history-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.history-actions button { min-height:32px; border-radius:6px; font-size:10px; font-weight:750; }
.history-load { color:#fff; background:#13795b; border:1px solid #13795b; }
.history-compare { color:#2864a7; background:#fff; border:1px solid #8db3d8; }
.history-compare.selected { color:#fff; background:#2864a7; }
.history-empty { grid-column:1 / -1; margin:0; padding:16px; color:var(--soft); font-size:11px; text-align:center; }

@media (max-width:639px) {
  .header-actions { justify-content:flex-start; }
  .chart-card .card-heading { align-items:flex-start; flex-direction:column; }
  .benchmark-note { max-width:none; text-align:left; }
  .history-sidebar { width:100vw; }
  .history-comparison { grid-template-columns:1fr; max-height:36vh; }
}
.asset-card { padding:12px; }
.asset-title { min-height:22px; }
.asset-title strong { font-size:13px; line-height:1.35; }
.asset-title small { font-size:11px; line-height:1.35; }
.asset-row { gap:10px 8px; margin-top:11px; }
.asset-row label { align-content:start; gap:6px; font-size:11px; line-height:1.35; }
.asset-row label > span { min-height:15px; }
.ratio-input { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:stretch; min-height:38px; }
.ratio-input input { min-width:0; min-height:38px; padding:7px 8px; border-radius:8px 0 0 8px; font-size:13px; font-weight:700; line-height:1; text-align:right; font-variant-numeric:tabular-nums; }
.ratio-unit { display:grid; place-items:center; color:#527068; background:#edf6f2; border:1px solid #cbd8dc; border-left:0; border-radius:0 8px 8px 0; font-size:12px; font-weight:800; }
.target-input { grid-template-columns:30px minmax(0,1fr) 28px 30px; }
.target-input input { border-radius:0; text-align:center; }
.target-input button { min-width:30px; padding:0; color:#176a52; background:#edf8f3; border:1px solid #bdd9cf; font-size:18px; font-weight:700; line-height:1; }
.target-input button:first-child { border-radius:8px 0 0 8px; }
.target-input button:last-child { border-radius:0 8px 8px 0; }
.target-input button:hover { background:#d9f0e6; }
.target-input .ratio-unit { border-radius:0; }
.asset-help { margin:12px 0 0; text-align:left; font-size:11px; line-height:1.55; }

/* UI redesign: configuration first, audit details after a run. */
.config-scroll { display:flex; flex-direction:column; }
.config-scroll > .beginner-note { order:0; }
.config-scroll > .config-assets { order:1; }
.config-scroll > .config-range { order:2; }
.config-scroll > .config-mode { order:3; }
.config-scroll > .config-rebalance { order:4; }
.config-scroll > .config-advanced-section { order:5; }
.config-scroll > .config-basics { order:2; }
.config-scroll > .config-advanced-section { order:3; }
.config-assets .section-heading { display:flex; align-items:flex-start; gap:10px; padding:15px 22px; }
.config-basics .section-heading { display:flex; align-items:flex-start; gap:10px; padding:15px 22px; }
.config-basics .section-heading > span { display:grid; flex:0 0 22px; width:22px; height:22px; place-items:center; color:#fff; background:#13795b; border-radius:50%; font-size:11px; font-weight:800; }
.config-assets .section-heading > span { display:grid; flex:0 0 22px; width:22px; height:22px; place-items:center; color:#fff; background:#13795b; border-radius:50%; font-size:11px; font-weight:800; }
.asset-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; padding:10px 11px; background:#f2faf6; border:1px solid #d1e9de; border-radius:10px; }
.asset-toolbar div { display:grid; min-width:0; gap:2px; }
.asset-toolbar strong { color:var(--accent-dark); font-size:12px; }
.asset-toolbar span { color:var(--soft); font-size:10px; line-height:1.35; }
.compact-button { flex:0 0 auto; min-height:32px; padding:6px 9px; font-size:11px; white-space:nowrap; }
.compact-summary { margin-top:0; }
.compact-summary.has-error { border-color:#efc7c2; }
.compact-summary .summary-item { position:relative; padding:9px 10px; }
.compact-summary .summary-item strong { font-size:13px; }
.compact-summary .summary-item em { display:block; margin-top:2px; color:var(--soft); font-size:10px; font-style:normal; }
.compact-summary .summary-item.is-error { background:#fff7f5; }
.compact-summary .summary-item.is-error strong, .compact-summary .summary-item.is-error em { color:var(--danger); }
.compact-summary .summary-item.is-valid em { color:var(--accent-dark); }
.validation-inline { min-height:0; margin:10px 0 0; padding:8px 10px; border-radius:8px; background:#f5f8f8; font-size:11px; }
.validation-inline.success { color:var(--accent-dark); background:var(--accent-pale); }
.validation-inline.error { color:var(--danger); background:#fff3f1; }
.validation-inline.warning { color:var(--warn); background:#fff8e9; }
.run-dock { padding:12px 18px 14px; }
.run-actions { display:grid; grid-template-columns:1.15fr 1fr; gap:8px; }
.run-actions .button { width:100%; min-height:43px; }
.run-dock-hint { margin-top:8px; color:var(--soft); text-align:center; font-size:10px; line-height:1.4; }
.empty-metrics { display:grid; gap:5px; padding:25px; }
.empty-metrics strong { color:var(--ink); font-size:14px; }
.empty-metrics span { color:var(--soft); font-size:12px; line-height:1.5; }
.basic-block { padding:13px 0; border-bottom:1px solid #edf1f2; }
.basic-block:first-child { padding-top:0; }
.basic-block:last-of-type { border-bottom:0; }
.basic-block-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
.basic-block-heading strong { color:#38545a; font-size:11px; }
.basic-block-heading span { color:#829196; font-size:9.5px; }
.field-hint { display:block; margin-top:2px; color:var(--soft); font-size:10px; line-height:1.4; }
.basic-help { margin-top:10px; padding-top:9px; border-top:1px dashed #dce5e8; }
.basic-help summary { color:#607279; cursor:pointer; font-size:10px; font-weight:700; }
.basic-help p { margin-top:7px; }
.basic-advanced { margin-top:12px; }
.metric-primary-grid { display:grid; grid-column:1 / -1; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.metric-secondary { grid-column:1 / -1; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.metric-secondary summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; color:#435b62; cursor:pointer; list-style:none; font-size:11px; }
.metric-secondary summary::-webkit-details-marker { display:none; }
.metric-secondary summary::after { content:"＋"; color:var(--soft); font-size:14px; }
.metric-secondary[open] summary::after { content:"－"; }
.metric-secondary summary span { margin-left:auto; color:var(--soft); font-size:9.5px; font-weight:500; }
.metric-secondary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0 10px 10px; border-top:1px solid #edf1f2; }
.metric-secondary-grid .metric { padding:11px; border:0; border-radius:7px; background:#f7faf9; }
.metric-secondary-grid .metric strong { margin-top:5px; font-size:15px; }
.weight-distribution { margin-bottom:12px; padding:11px; background:#fbfdfc; border:1px solid #dbe8e3; border-radius:10px; }
.weight-distribution-title { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--soft); font-size:10px; line-height:1.35; }
.weight-distribution-title strong { color:var(--ink); font-size:11px; }
.weight-track { position:relative; display:flex; height:42px; overflow:visible; border-radius:9px; touch-action:none; user-select:none; }
.weight-segment { display:flex; min-width:0; align-items:center; justify-content:center; flex-direction:column; gap:1px; overflow:hidden; color:#fff; font-size:9px; line-height:1.1; transition:width .12s ease; }
.weight-segment:first-child { border-radius:9px 0 0 9px; }
.weight-segment:nth-child(4) { border-radius:0 9px 9px 0; }
.weight-segment span, .weight-segment b { overflow:hidden; max-width:100%; padding:0 3px; text-overflow:ellipsis; white-space:nowrap; }
.weight-segment b { font-size:10px; }
.weight-segment-0 { background:#147a5c; }
.weight-segment-1 { background:#3476a8; }
.weight-segment-2 { background:#bc7a27; }
.weight-segment-3 { background:#7b5aa6; }
.weight-handle { position:absolute; top:-5px; bottom:-5px; z-index:2; width:18px; padding:0; transform:translateX(-50%); cursor:ew-resize; background:transparent; border:0; touch-action:none; }
.weight-handle::before { position:absolute; top:0; bottom:0; left:7px; width:4px; content:""; background:#fff; border:1px solid rgba(24,55,62,.45); border-radius:4px; box-shadow:0 1px 4px rgba(18,48,50,.22); }
.weight-handle::after { position:absolute; top:50%; left:2px; width:14px; height:14px; content:""; transform:translateY(-50%); background:#fff; border:2px solid #176a52; border-radius:50%; box-shadow:0 1px 4px rgba(18,48,50,.25); }
.weight-handle:focus-visible { outline:2px solid #4e9fe0; outline-offset:2px; }
.weight-legend { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:9px; color:var(--soft); font-size:9px; }
.weight-legend span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.weight-legend b { color:var(--ink); font-variant-numeric:tabular-nums; }
.legend-dot { display:inline-block; width:7px; height:7px; margin-right:3px; border-radius:50%; }
.legend-dot-0 { background:#147a5c; }
.legend-dot-1 { background:#3476a8; }
.legend-dot-2 { background:#bc7a27; }
.legend-dot-3 { background:#7b5aa6; }
@media (min-width:1180px) {
  .app-shell { grid-template-columns:clamp(380px,34vw,460px) minmax(0,1fr); }
  .asset-editor { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
@media (max-width:899px) {
  .config-pane { width:min(430px,94vw); }
  .run-dock { padding:12px 14px calc(14px + env(safe-area-inset-bottom)); }
  .run-actions { grid-template-columns:1fr 1fr; }
  .metric-primary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .metric-secondary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .asset-toolbar { align-items:flex-start; flex-direction:column; }
  .compact-button { width:100%; }
  .asset-editor { gap:10px; }
  .asset-card { padding:13px; }
  .asset-row { gap:11px 8px; }
  .target-input { grid-template-columns:32px minmax(0,1fr) 28px 32px; }
  .weight-distribution { padding:10px 9px; }
  .weight-distribution-title { align-items:flex-start; flex-direction:column; }
  .weight-track { height:48px; }
  .weight-segment { font-size:8px; }
  .weight-segment b { font-size:10px; }
  .weight-legend { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:6px; }
  .metric-primary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .metric-secondary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 8px 8px; }
  .metric-secondary summary { padding:10px 11px; }
}

/* Desktop allocation rail: quiet, compact, and consistent with the config cards. */
@media (min-width:900px) {
  .weight-distribution { margin:10px 0 13px; padding:11px 12px 9px; background:#f8fbfa; border-color:#e0e9e7; border-radius:9px; box-shadow:0 1px 2px rgb(23 55 48 / 3%); }
  .weight-distribution-title { align-items:baseline; margin-bottom:7px; }
  .weight-distribution-title strong { color:#38545a; font-size:10.5px; font-weight:750; }
  .weight-distribution-title span { font-size:9.5px; }
  .weight-track { height:29px; background:#edf2f2; border:1px solid #dce6e5; border-radius:7px; }
  .weight-segment { color:#31525a; font-size:8.5px; font-weight:650; }
  .weight-segment b { color:#213d45; font-size:9px; font-weight:800; }
  .weight-segment-0 { background:#d7eee5; }
  .weight-segment-1 { background:#dceaf4; }
  .weight-segment-2 { background:#f3e6ce; }
  .weight-segment-3 { background:#e8def1; }
  .weight-handle { top:-4px; bottom:-4px; width:16px; }
  .weight-handle::before { top:2px; bottom:2px; left:7px; width:2px; background:#fff; border-color:#a6b8b7; box-shadow:0 1px 3px rgb(23 55 48 / 16%); }
  .weight-handle::after { left:3px; width:10px; height:10px; border-width:1px; border-color:#4b8977; box-shadow:0 1px 3px rgb(23 55 48 / 18%); }
  .weight-legend { margin-top:7px; color:#6a7b80; font-size:8.5px; }
  .weight-legend b { color:#41565c; font-size:9px; }
  .legend-dot { width:6px; height:6px; margin-right:2px; }
  .legend-dot-0 { background:#74b99f; }
  .legend-dot-1 { background:#80a9c6; }
  .legend-dot-2 { background:#c9a262; }
  .legend-dot-3 { background:#a388bd; }
  .asset-editor { grid-template-columns:1fr; gap:0; margin-top:12px; }
  .asset-list-heading { display:grid; grid-template-columns:minmax(125px,1.05fr) minmax(0,2fr); column-gap:14px; padding:0 0 6px; color:#829196; font-size:9px; font-weight:750; letter-spacing:.03em; }
  .asset-card { display:grid; grid-template-columns:minmax(125px,1.05fr) minmax(0,2fr); column-gap:14px; align-items:start; padding:12px 0; background:transparent; border:0; border-top:1px solid #edf1f2; border-radius:0; box-shadow:none; }
  .asset-card:last-of-type { border-bottom:1px solid #edf1f2; }
  .asset-title { min-height:40px; align-items:flex-start; flex-direction:column; gap:3px; }
  .asset-title small { color:#829196; text-align:left; }
  .asset-row { grid-template-columns:1fr 1fr; gap:7px; margin-top:0; }
  .asset-chain { grid-column:1 / -1; margin-top:9px; padding:7px 8px; background:#f7faf9; border-left:2px solid #d9e8e2; border-radius:0 6px 6px 0; }
  .target-preview { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width:899px) {
  .asset-list-heading { display:none; }
  .asset-card { background:transparent; border:0; border-top:1px solid #edf1f2; border-radius:0; box-shadow:none; }
  .asset-card:last-of-type { border-bottom:1px solid #edf1f2; }
}