:root { --bg:#f3f6fa; --surface:#fff; --ink:#182230; --muted:#718096; --line:#e2e8f0; --blue:#2563eb; --blue-soft:#eaf1ff; --up:#c53b43; --down:#16846d; --shadow:0 10px 28px rgba(29,48,78,.06); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:Inter,"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif; letter-spacing:0; }
button,input,select { font:inherit; }
.ladder-shell { width:min(1480px,100%); margin:0 auto; padding:30px clamp(14px,4vw,52px) 0; }
.page-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.eyebrow,.section-kicker { margin:0 0 6px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
h1,h2 { margin:0; line-height:1.2; } h1 { font-size:28px; } h2 { font-size:17px; }
.page-header p:not(.eyebrow),.panel-note,.toolbar > span { color:var(--muted); font-size:13px; } .page-header p:not(.eyebrow) { margin:8px 0 0; }
.page-actions { display:flex; flex-wrap:wrap; justify-content:end; gap:8px; }
.page-actions a,.toolbar button { border:1px solid var(--blue); border-radius:6px; padding:8px 11px; color:var(--blue); background:var(--surface); font-size:12px; font-weight:800; text-decoration:none; }
.page-actions a:hover,.toolbar button:hover { color:#fff; background:var(--blue); }
.toolbar,.panel { border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); }
.toolbar { display:flex; align-items:end; gap:12px; padding:14px; margin-bottom:16px; }
.toolbar label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:800; } .toolbar input,.toolbar select { min-height:38px; border:1px solid var(--line); border-radius:6px; padding:0 10px; color:var(--ink); background:var(--surface); } .toolbar button { min-height:38px; cursor:pointer; } .toolbar button:disabled { opacity:.55; cursor:default; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); margin-bottom:16px; } .summary-grid > div { display:grid; gap:5px; min-width:0; padding:16px; } .summary-grid > div+div { border-left:1px solid var(--line); } .summary-grid span { color:var(--muted); font-size:11px; } .summary-grid strong { font-size:18px; }
.up { color:var(--up)!important; } .down { color:var(--down)!important; }
.panel { overflow:hidden; margin-bottom:16px; } .panel-heading { display:flex; align-items:start; justify-content:space-between; gap:15px; padding:18px 20px 14px; } .panel-heading .section-kicker { margin-bottom:5px; }
.table-wrap { overflow-x:auto; } table { width:100%; min-width:900px; border-collapse:collapse; } th,td { border-top:1px solid #edf1f5; padding:12px 14px; font-size:12px; text-align:left; } th { color:var(--muted); background:#f8fafc; font-size:11px; white-space:nowrap; } td.numeric,th.numeric { text-align:right; font-variant-numeric:tabular-nums; } td strong,td small { display:block; } td small { margin-top:4px; color:var(--muted); font-size:10px; }
.current-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); } .ladder-group { min-width:0; padding:15px 16px; } .ladder-group+ .ladder-group { border-left:1px solid var(--line); } .ladder-group h3 { margin:0 0 9px; font-size:14px; } .ladder-group p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; } .ladder-symbol { display:inline-block; margin:7px 5px 0 0; padding:4px 6px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#fbfdff; font-size:10px; }
.method-body { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); } .method-body>div { display:grid; gap:5px; padding:14px 20px; } .method-body>div+div { border-left:1px solid var(--line); } .method-body strong { font-size:12px; } .method-body span { color:var(--muted); font-size:11px; line-height:1.6; }
.loading-state,.error-state,.empty-state { padding:28px 20px; color:var(--muted); font-size:12px; } .error-state { color:var(--down); }
.legal-footer { margin:24px calc(clamp(14px,4vw,52px) * -1) 0; }
@media(max-width:900px) { .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .summary-grid>div:nth-child(odd) { border-left:0; } .summary-grid>div:nth-child(n+3) { border-top:1px solid var(--line); } .current-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .current-grid .ladder-group:nth-child(4) { border-left:0; border-top:1px solid var(--line); } .current-grid .ladder-group:nth-child(5) { border-top:1px solid var(--line); } }
@media(max-width:680px) { .ladder-shell { padding-top:20px; } .page-header { align-items:stretch; flex-direction:column; } .page-actions { justify-content:start; } .toolbar { align-items:stretch; flex-wrap:wrap; } .toolbar label { flex:1 1 150px; } .toolbar button { flex:0 0 auto; } .current-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .current-grid .ladder-group:nth-child(3) { border-left:0; border-top:1px solid var(--line); } .current-grid .ladder-group:nth-child(4) { border-left:1px solid var(--line); } .method-body { grid-template-columns:1fr; } .method-body>div+div { border-left:0; border-top:1px solid var(--line); } .legal-footer { margin-right:-14px; margin-left:-14px; } }