:root{--bg:#0f172a;--card:#1e293b;--line:#334155;--txt:#e2e8f0;--dim:#94a3b8;
--green:#34d399;--blue:#60a5fa;--amber:#fbbf24;--red:#f87171}
*{box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--txt);margin:0;padding:1rem}
header{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:1rem}
h1{font-size:1.25rem;margin:0;flex:1}
input[type=date]{background:var(--card);border:1px solid var(--line);color:var(--txt);
padding:.45rem .6rem;border-radius:8px}
.btn{background:var(--card);border:1px solid var(--line);color:var(--dim);padding:.45rem .8rem;
border-radius:8px;cursor:pointer;text-decoration:none;font-size:.85rem}
.muted{color:var(--dim);font-size:.8rem}
.grid{display:grid;gap:1rem}
.kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.kpi .lbl{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.kpi .val{font-size:1.45rem;font-weight:700;margin-top:.2rem}
.kpi .sub{font-size:.75rem;color:var(--dim);margin-top:.2rem}
.stores{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1rem}
.store{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem}
.store h2{font-size:1rem;margin:0 0 .6rem;display:flex;justify-content:space-between}
.store table{width:100%;border-collapse:collapse;font-size:.85rem}
.store td{padding:.28rem 0;border-bottom:1px solid var(--line)}
.store td:last-child{text-align:right;font-weight:600}
.store .foot{display:flex;justify-content:space-between;margin-top:.6rem;font-size:.78rem;color:var(--dim)}
.offline{border-color:var(--red)}
.offline .errmsg{color:var(--red);font-size:.8rem;word-break:break-all}
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:1rem;margin-top:1rem;height:340px}
.g{color:var(--green)}.b{color:var(--blue)}.a{color:var(--amber)}
@media(max-width:600px){.kpi .val{font-size:1.15rem}}

/* login page */
body.login{display:flex;align-items:center;justify-content:center;height:100vh;padding:0}
body.login form{background:var(--card);padding:2rem;border-radius:12px;width:300px;
box-shadow:0 8px 30px #0008}
body.login h1{font-size:1.1rem;margin:0 0 1rem}
body.login input{width:100%;padding:.6rem;border-radius:8px;border:1px solid var(--line);
background:var(--bg);color:var(--txt);margin-bottom:.8rem}
body.login button{width:100%;padding:.6rem;border:0;border-radius:8px;background:#3b82f6;
color:#fff;font-weight:600;cursor:pointer}
.err{color:var(--red);font-size:.85rem;margin-bottom:.6rem}