
:root { --fg:#111827; --muted:#6b7280; --brand:#2563eb; --bg:#ffffff; --panel:#f9fafb; --line:#e5e7eb;}
*{box-sizing:border-box} body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,Microsoft YaHei,Segoe UI Emoji; color:var(--fg); margin:0; background:var(--bg)}
header,footer{padding:16px 20px; border-bottom:1px solid var(--line)}
header a{color:var(--fg); text-decoration:none; font-weight:600}
main{max-width:1100px; margin:24px auto 48px; padding:0 16px}
h1{font-size:28px; margin:8px 0 4px}
p.lead{color:var(--muted); margin:0 0 20px}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:900px){ .grid{grid-template-columns: 1.2fr 1fr} }
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
button{appearance:none; border:0; background:var(--brand); color:#fff; padding:12px 16px; border-radius:10px; font-weight:600; cursor:pointer}
.muted{color:var(--muted)}
.stat{display:flex; align-items:baseline; gap:8px; padding:10px 0; border-bottom:1px dashed var(--line)}
.stat:last-child{border-bottom:0}
.stat .label{color:var(--muted); font-size:13px; min-width:180px}
.stat .value{font-variant-numeric: tabular-nums; font-size:18px; font-weight:700}
.pill{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:600}
table{width:100%; border-collapse:collapse; margin-top:12px; font-size:13px}
th, td{border-bottom:1px solid var(--line); text-align:right; padding:8px 6px}
th:first-child, td:first-child{text-align:left}
.note{font-size:12px; color:var(--muted)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px}
.link{color:#1f2937; text-decoration:none; border-bottom:1px dashed #1f2937}
