:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#6b7280; --card:#fff; --line:#e5e7eb; --up:#d32f2f; --down:#2e7d32; --accent:#1f5fbf; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171c; --fg:#e6e8eb; --muted:#9aa3ae; --card:#1d2128; --line:#2c323b; --up:#ff6b6b; --down:#5fd38d; --accent:#7aa7ff; } }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,"Noto Sans TC","Microsoft JhengHei",sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; color:var(--fg); }
.user { display:flex; gap:10px; align-items:center; color:var(--muted); }
.user form { margin:0; }
main { max-width:1200px; margin:0 auto; padding:20px 16px; }
h1 { font-size:22px; margin:0 0 4px; }
.muted { color:var(--muted); font-size:13px; }
.up { color:var(--up); } .down { color:var(--down); }
button { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:8px 14px; cursor:pointer; font:inherit; }
button.link { background:none; color:var(--accent); padding:0; }
input, select { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
.flash { background:#fff4ce; color:#5c4400; padding:10px 14px; border-radius:6px; margin-bottom:12px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.toolbar form { margin:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin:16px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.big { font-size:24px; font-weight:700; margin:4px 0; font-variant-numeric:tabular-nums; }
.summary { margin:8px 0 16px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; white-space:nowrap; }
th, td { padding:8px 12px; border-bottom:1px solid var(--line); text-align:right; }
th:nth-child(-n+2), td:nth-child(-n+2) { text-align:left; }
th { font-size:13px; color:var(--muted); font-weight:600; }
tbody tr:hover { background:rgba(127,127,127,.06); }
.pager { display:flex; gap:16px; justify-content:center; margin:16px 0; }
.login { max-width:340px; margin:12vh auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:12px; }
.login label { display:flex; flex-direction:column; gap:4px; font-size:14px; }