:root { --bg:#f6f8fc; --card:#fff; --ink:#13243d; --muted:#6b7a93; --line:#e4eaf3; --navy:#14365c; --cyan:#29abe2; --green:#16a35f; --green-bg:#e4f7ec; --yellow:#d99216; --yellow-bg:#fdf4d9; --shadow:0 6px 24px rgba(19,36,61,.07); --radius:16px; }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; background:var(--bg); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.dashboard-shell { width:min(1280px,calc(100% - 32px)); margin:0 auto 40px; }.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px 18px; }.brand-logo { width:auto; height:52px; display:block; }.date-block { text-align:right; }
.range-label,.eyebrow,.kpi span,.daily-section h3 { display:block; color:var(--muted); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.range-select { min-width:150px; margin-top:4px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); font-size:15px; font-weight:800; box-shadow:var(--shadow); }
.dashboard-intro { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:4px 0 16px; }.eyebrow { margin:0 0 4px; color:var(--cyan); } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:3px; font-size:26px; line-height:1.15; }.subtitle,.data-notice,.latest-date { margin-bottom:0; color:var(--muted); font-size:13px; font-weight:600; }.data-notice { max-width:430px; padding:9px 12px; border-radius:10px; background:#fff7df; color:#816012; }
.customer-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.customer-card { min-width:0; padding:21px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); }.customer-card-header { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:15px; border-bottom:1px solid var(--line); } h2 { margin-bottom:7px; font-size:18px; }
.customer-status { display:flex; align-items:center; gap:7px; margin-bottom:0; color:var(--green); font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.customer-status span { width:10px; height:10px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px var(--green-bg); }.customer-status.idle { color:var(--yellow); }.customer-status.idle span { box-shadow:0 0 0 3px var(--yellow-bg); }.latest-date { text-align:right; white-space:nowrap; }
.kpi-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:15px 0 18px; }.kpi { padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fafd; }.kpi strong { display:block; margin-top:3px; font-size:23px; font-variant-numeric:tabular-nums; }.daily-section h3 { margin:0 0 11px; }
.daily-timeline { display:flex; align-items:end; gap:7px; min-height:135px; padding:0 2px 2px; overflow-x:auto; scrollbar-color:#c5d3e5 transparent; }.day-block { display:flex; flex:0 0 42px; flex-direction:column; align-items:center; justify-content:end; min-height:130px; text-align:center; }.day-value { min-height:28px; color:var(--navy); font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; }.day-bar-track { display:flex; align-items:end; justify-content:center; width:100%; height:88px; padding:0 4px; border-radius:7px 7px 2px 2px; background:#f1f5fa; }.day-bar { width:100%; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,var(--cyan),var(--navy)); }.day-block time { margin-top:6px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; } footer { margin-top:18px; text-align:center; color:var(--muted); font-size:12px; font-weight:600; }
@media (max-width:860px) { .customer-cards { grid-template-columns:1fr; } } @media (max-width:560px) { .dashboard-shell { width:min(100% - 24px,1280px); }.topbar,.dashboard-intro { align-items:flex-start; flex-direction:column; }.date-block { text-align:left; }.customer-card { padding:16px; }.customer-card-header { flex-direction:column; }.latest-date { text-align:left; }.data-notice { max-width:none; }.day-block { flex-basis:39px; } }