:root{
  --blue:#014b72; --brown:#85431a; --ink:#102a43; --muted:#6b7280;
  --border:#e6ebef; --card:#ffffff; --bg:#f8fafc; --danger:#b42318;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff;color:var(--ink)}
button,input,select{font:inherit}
button{cursor:pointer}
#app{min-height:100dvh;padding-bottom:calc(76px + var(--safe-bottom));position:relative;overflow-x:hidden}
.home-bg{position:fixed;inset:0;pointer-events:none;background:url('assets/home_background.png') center/cover no-repeat;opacity:.08;z-index:0}
.screen{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:14px 16px 22px}
.brand-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;margin:2px auto 4px;max-width:560px}
.brand-row img{width:100%;height:64px;object-fit:contain}
.hero{display:flex;justify-content:center;align-items:center;height:190px;margin-top:-4px}
.hero img{max-height:180px;max-width:min(90vw,440px);width:auto;object-fit:contain}
.status-card{border:1px solid var(--border);background:rgba(255,255,255,.94);border-radius:22px;padding:14px 16px;text-align:center;box-shadow:0 5px 18px rgba(16,42,67,.06)}
.status-card.drive{border-color:#b8d4e2;background:#f5fbfe}
.status-card.work{border-color:#ddc2b2;background:#fffaf6}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.status-title{font-size:23px;font-weight:850;margin-top:3px;color:var(--blue)}
.status-card.work .status-title{color:var(--brown)}
.timer{font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;letter-spacing:.02em;margin-top:2px}
.customer-current{font-size:14px;color:var(--muted);font-weight:700;margin-top:2px}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.action{min-height:68px;border:0;border-radius:18px;color:#fff;font-size:17px;font-weight:850;padding:10px 8px;box-shadow:0 5px 13px rgba(16,42,67,.10)}
.action.drive{background:var(--blue)} .action.work{background:var(--brown)} .action.pause{background:#5f6b76;grid-column:1/-1}
.day-end{width:100%;margin-top:10px;height:52px;border-radius:16px;border:2px solid var(--ink);background:rgba(255,255,255,.96);font-weight:850;color:var(--ink);font-size:16px}
.section-title{font-weight:900;font-size:17px;margin:18px 2px 9px}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metric{background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:17px;padding:12px 8px;text-align:center}
.metric .label{font-size:11px;color:var(--muted);font-weight:800;min-height:28px}.metric .value{font-size:20px;font-weight:900;margin-top:3px}.metric.drive .value{color:var(--blue)}.metric.work .value{color:var(--brown)}
.customer-summary{display:grid;gap:7px;margin-top:10px}.customer-summary-row{background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.customer-summary-row strong{font-size:14px}.times{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.nav{position:fixed;left:0;right:0;bottom:0;height:calc(70px + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:rgba(255,255,255,.98);border-top:1px solid var(--border);display:flex;justify-content:center;z-index:20;box-shadow:0 -2px 15px rgba(16,42,67,.06)}
.nav-inner{width:min(760px,100%);display:grid;grid-template-columns:repeat(3,1fr)}.nav button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800}.nav button.active{color:var(--blue)}.nav-icon{font-size:22px;display:block;line-height:1.2}
.page-title{font-size:28px;font-weight:900;margin:8px 0 3px}.page-sub{color:var(--muted);font-size:14px;margin-bottom:16px}.primary{border:0;background:var(--blue);color:#fff;border-radius:14px;padding:14px 16px;font-weight:850}.secondary{border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:13px;padding:12px 14px;font-weight:800}.danger{border:1px solid #f3c2bc;background:#fff7f6;color:var(--danger);border-radius:13px;padding:12px 14px;font-weight:850}
.list{display:grid;gap:9px}.list-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:13px 14px;box-shadow:0 3px 10px rgba(16,42,67,.03)}.customer-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.customer-line button{border:0;background:#f3f6f8;border-radius:10px;padding:8px 10px;font-weight:800;color:var(--blue)}
.history-day{width:100%;text-align:left;border:1px solid var(--border);background:#fff;border-radius:17px;padding:14px}.history-day h3{margin:0 0 7px;font-size:16px}.history-day .totals{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:750}.history-day .totals span:nth-child(1){color:var(--blue)}.history-day .totals span:nth-child(2){color:var(--brown)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.36);z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:calc(12px + var(--safe-bottom))}.modal{background:#fff;border-radius:24px 24px 18px 18px;width:min(680px,100%);max-height:88dvh;overflow:auto;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.modal h2{margin:0 0 4px}.modal .hint{margin:0 0 14px;color:var(--muted);font-size:13px}.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}.field{display:grid;gap:5px;margin:10px 0}.field label{font-size:12px;font-weight:800;color:var(--muted)}.field input,.field select{width:100%;padding:12px;border:1px solid #ccd5dc;border-radius:12px;background:#fff}.search{margin:8px 0 10px}.customer-picker{display:grid;gap:8px}.customer-pick{width:100%;text-align:left;padding:14px;border:1px solid var(--border);background:#fff;border-radius:13px;font-weight:800}.customer-pick:hover{background:#f7fafc}.add-inline{width:100%;padding:14px;border:2px dashed #b5c8d2;background:#f8fcfe;border-radius:13px;color:var(--blue);font-weight:900}.booking{border:1px solid var(--border);border-radius:14px;padding:11px;margin-top:8px}.booking-head{display:flex;justify-content:space-between;gap:10px}.booking .type-drive{color:var(--blue);font-weight:900}.booking .type-work{color:var(--brown);font-weight:900}.booking button{margin-top:8px}
.toast{position:fixed;z-index:200;left:50%;bottom:calc(86px + var(--safe-bottom));transform:translateX(-50%);width:min(92vw,560px);background:#102a43;color:#fff;padding:12px 14px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 9px 26px rgba(0,0,0,.22)}.toast button{border:0;border-radius:10px;background:#fff;color:var(--blue);font-weight:900;padding:8px 10px}
.empty{color:var(--muted);text-align:center;padding:34px 10px}.tiny{font-size:12px;color:var(--muted)}
@media (max-height:780px){.hero{height:126px}.hero img{max-height:122px}.brand-row img{height:48px}.status-card{padding:9px 14px}.timer{font-size:29px}.action{min-height:60px}.section-title{margin-top:12px}.metric{padding:9px 6px}.customer-summary-row:nth-child(n+3){display:none}}
@media (min-width:740px){.modal-backdrop{align-items:center}.modal{border-radius:24px}.hero{height:210px}.hero img{max-height:200px}}

.error-card{margin:22px 0;padding:18px;border:1px solid #e6b8b8;border-radius:16px;background:#fff7f7;color:#7a1d1d;line-height:1.45}

.startup-fallback{padding:40px 22px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#102a43}
.startup-fallback h1{font-size:28px;margin:0 0 10px}.startup-fallback p{color:#6b7280;line-height:1.45}
.error-card{margin:22px;padding:18px;border:1px solid #e6b8b8;border-radius:16px;background:#fff7f7;color:#7a1d1d;line-height:1.45}