:root {
  --bg:#f4f1ea; --panel:#fffdf8; --ink:#1d211f; --muted:#6f7771; --line:#ded7c9;
  --green:#0f6f63; --green-dark:#123229; --gold:#b67a14; --red:#b4483f;
  --shadow:0 12px 32px rgba(38,32,22,.08);
  font-family:"Segoe UI","Microsoft JhengHei",sans-serif;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--bg); }
button,input { font:inherit; }
button { cursor:pointer; }
.login-view { min-height:100vh; display:grid; place-items:center; padding:22px; }
.login-card { width:min(430px,100%); padding:30px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:var(--shadow); }
.login-card img { width:82px; height:82px; object-fit:contain; border-radius:10px; background:#f8f1df; }
.login-card h1 { margin:18px 0 8px; font-size:27px; }
.login-card p { margin:0 0 22px; color:var(--muted); line-height:1.55; }
.login-card label { display:grid; gap:7px; margin-bottom:14px; color:var(--muted); font-size:13px; font-weight:900; }
.login-card input { height:46px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.login-card button { width:100%; height:48px; border:0; border-radius:6px; color:#fff; background:var(--green); font-weight:900; }
.login-card small { display:block; min-height:20px; margin-top:12px; color:var(--red); }
.topbar {
  position:sticky; top:0; z-index:5; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px;
  padding:16px 24px; border-bottom:1px solid var(--line); background:rgba(255,253,248,.94); backdrop-filter:blur(10px);
}
.brand { display:flex; align-items:center; gap:14px; min-width:220px; }
.brand img { width:58px; height:58px; object-fit:contain; border-radius:8px; background:#f8f1df; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:24px; line-height:1; }
.brand span { margin-top:5px; color:var(--muted); font-size:13px; font-weight:700; }
.toolbar { display:flex; align-items:end; justify-content:flex-end; gap:10px; }
.toolbar label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:800; }
.toolbar input { height:42px; min-width:118px; padding:0 12px; border:1px solid var(--line); border-radius:6px; background:#fff; }
main { max-width:1280px; margin:0 auto; padding:22px; }
.summary-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:14px; margin-bottom:14px; }
.summary-card { min-height:138px; padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); }
.summary-card.main { color:#fff; border-color:var(--green-dark); background:linear-gradient(135deg,var(--green-dark),var(--green)); }
.summary-card span,.summary-card strong,.summary-card small { display:block; }
.summary-card span { color:var(--muted); font-size:13px; font-weight:900; }
.summary-card.main span,.summary-card.main small { color:#dbeee9; }
.summary-card strong { margin:18px 0 8px; font-size:31px; line-height:1; }
.summary-card small { color:var(--muted); font-size:13px; }
.panel-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:14px; margin-bottom:14px; }
.panel { min-width:0; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-head h2 { margin:0; font-size:20px; }
.panel-head span { color:var(--muted); font-size:12px; font-weight:800; }
.bar-list { display:grid; gap:12px; }
.bar-row { display:grid; grid-template-columns:112px 1fr 86px; align-items:center; gap:10px; font-size:13px; }
.bar-row .label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:800; }
.bar-row .track { height:10px; overflow:hidden; border-radius:999px; background:#ece6d9; }
.bar-row .track i { display:block; height:100%; border-radius:999px; background:var(--green); }
.bar-row strong { text-align:right; }
.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:11px 9px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; }
th { color:var(--muted); font-size:11px; }
td:nth-last-child(-n+2),th:nth-last-child(-n+2) { text-align:right; }
.daily-list { display:grid; gap:9px; max-height:330px; overflow:auto; }
.daily-row { display:grid; grid-template-columns:86px 1fr 92px; align-items:center; gap:10px; font-size:13px; }
.daily-row span { color:var(--muted); font-weight:800; }
.daily-row i { height:9px; overflow:hidden; border-radius:999px; background:#ece6d9; }
.daily-row b { display:block; height:100%; border-radius:999px; background:var(--gold); }
.daily-row strong { text-align:right; }
.sync-latest { display:grid; grid-template-columns:repeat(3,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); background:#fff; }
.sync-item { min-width:0; }
.sync-item span,.sync-item strong { display:block; }
.sync-item span { color:var(--muted); font-size:12px; font-weight:800; }
.sync-item strong { margin-top:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:15px; }
.sync-badge { min-width:72px; padding:8px 10px; border-radius:999px; color:#fff; background:var(--green); text-align:center; font-size:12px; font-weight:900; }
.sync-badge.empty { color:var(--muted); background:#ece6d9; }
.empty { padding:28px 10px; color:var(--muted); text-align:center; }
.status {
  position:fixed; right:20px; bottom:20px; max-width:320px; padding:12px 15px; border-radius:8px;
  color:#fff; background:var(--green-dark); opacity:0; transform:translateY(8px); transition:.2s;
}
.status.show { opacity:1; transform:none; }
.status.error { background:var(--red); }
@media(max-width:980px) {
  .topbar { grid-template-columns:1fr; align-items:center; }
  .toolbar { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .toolbar input { width:100%; min-width:0; }
  .summary-grid { grid-template-columns:1fr 1fr; }
  .panel-grid { grid-template-columns:1fr; }
  .sync-latest { grid-template-columns:1fr 1fr; }
}
@media(max-width:620px) {
  .topbar { grid-template-columns:1fr; align-items:center; gap:10px; padding:10px 14px; }
  .brand { min-width:0; gap:10px; }
  .brand img { width:44px; height:44px; }
  .brand strong { font-size:19px; }
  .brand span { font-size:11px; }
  .toolbar { width:100%; justify-self:stretch; grid-template-columns:1fr 1fr; gap:8px; }
  .toolbar label { min-width:0; }
  .toolbar input { height:36px; padding:0 7px; font-size:12px; }
  main { padding:14px; }
  .update-panel { margin-bottom:0; }
  .summary-grid { grid-template-columns:1fr; }
  .summary-card { min-height:112px; }
  .summary-card strong { font-size:28px; }
  .bar-row { grid-template-columns:94px 1fr 76px; }
  .daily-row { grid-template-columns:74px 1fr 82px; }
  .sync-latest { grid-template-columns:1fr; }
  .sync-badge { justify-self:start; }
}
@media(max-width:430px) {
  .brand span { display:none; }
}