:root { --bg:#f6f7f9; --card:#fff; --fg:#1b1f24; --dim:#6b7280; --line:#e5e7eb; --up:#16a34a; --down:#dc2626; --warn:#d97706; --pri:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --card:#181b22; --fg:#e6e8ec; --dim:#9aa3b2; --line:#2a2f3a; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; }
body.center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
header.top { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; gap:8px; }
nav a { margin-right:14px; text-decoration:none; color:var(--fg); font-weight:500; }
nav a.on { color:var(--pri); border-bottom:2px solid var(--pri); }
nav a.dim, .dim { color:var(--dim); }
main { padding:16px; max-width:1400px; margin:0 auto; }
footer { color:var(--dim); text-align:center; padding:24px 16px; font-size:12px; }
h2 { font-size:16px; margin:20px 0 8px; } h3 { font-size:15px; margin:18px 0 6px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.card.warn { border-color:var(--warn); }
.card .k { color:var(--dim); font-size:12px; } .card .v { font-size:18px; font-weight:600; } .card .sub { font-size:12px; color:var(--dim); }
.login { width:320px; max-width:100%; } .login h1 { font-size:18px; margin:0 0 12px; }
.login label, .login input { display:block; width:100%; } .login input { margin:6px 0 12px; }
.flash { padding:8px 12px; border-radius:6px; margin-bottom:10px; } .flash.ok { background:#dcfce7; color:#166534; } .flash.bad { background:#fee2e2; color:#991b1b; }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; }
form.inline { display:inline; } form.row { display:flex; gap:10px; flex-wrap:wrap; align-items:end; background:var(--card); padding:12px; border:1px solid var(--line); border-radius:8px; }
form.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px; background:var(--card); padding:12px; border:1px solid var(--line); border-radius:8px; }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dim); }
input, select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
button { font:inherit; padding:6px 12px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer; }
button.primary { background:var(--pri); color:#fff; border-color:var(--pri); } button.ghost { background:transparent; } button.small { padding:2px 8px; font-size:12px; }
.tablewrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:13px; } th, td { padding:7px 9px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top; }
th:first-child, td:first-child { text-align:left; } th { color:var(--dim); font-weight:500; font-size:12px; }
td .sub, .sub { font-size:11px; color:var(--dim); }
.up { color:var(--up); } .down { color:var(--down); }
.tag { display:inline-block; font-size:11px; padding:1px 6px; border-radius:4px; background:var(--line); margin-top:2px; }
.tag.ok { background:#dcfce7; color:#166534; } .tag.warn { background:#fef3c7; color:#92400e; } .tag.bad { background:#fee2e2; color:#991b1b; }
.pill { font-size:11px; padding:1px 8px; border-radius:10px; margin-left:6px; } .pill.open { background:#dcfce7; color:#166534; } .pill.closed { background:var(--line); color:var(--dim); }
.act { font-size:11px; padding:1px 7px; border-radius:4px; text-transform:uppercase; font-weight:600; }
.act.hold { background:#e0e7ff; color:#3730a3; } .act.add { background:#dcfce7; color:#166534; } .act.trim { background:#fee2e2; color:#991b1b; } .act.watch { background:#fef3c7; color:#92400e; }
.run { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:12px; }
.run .view { color:var(--dim); } .advice { border-top:1px solid var(--line); padding:8px 0; } .advice .head { margin-bottom:2px; }
.gfvrow { background:#fee2e233; } ul.plain { list-style:none; padding:0; margin:6px 0; } ul.plain li { padding:3px 0; }
.empty { color:var(--dim); text-align:center; padding:20px; } .small { font-size:12px; }
