:root{
  --bg:#F1F4F6;
  --surface:#FFFFFF;
  --surface-2:#F7F9FA;
  --primary:#0F3D5C;
  --primary-light:#1D5A82;
  --primary-softer:#E5EEF3;
  --accent:#E8A33D;
  --accent-soft:#FCEEDA;
  --good:#12805F;
  --good-soft:#E1F5EE;
  --warn:#B94A24;
  --warn-soft:#FAECE7;
  --text:#181C20;
  --text-secondary:#5F6B76;
  --text-muted:#8A959E;
  --border:#E3E7EA;
  --radius:16px;
  --radius-sm:10px;
}
[data-theme="dark"]{
  --bg:#10151A;
  --surface:#1B222A;
  --surface-2:#222B33;
  --primary:#4FA3D1;
  --primary-light:#6FB8DE;
  --primary-softer:#1E2E39;
  --accent:#E8A33D;
  --accent-soft:#3A2E17;
  --good:#3FCB9B;
  --good-soft:#123529;
  --warn:#E37A54;
  --warn-soft:#3A2019;
  --text:#EDEFF2;
  --text-secondary:#A9B4BD;
  --text-muted:#79838C;
  --border:#2B343C;
}
body, .card, .surface-2, input, select, button{ transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  overscroll-behavior-y:none;
}
h1,h2,h3,.num,.mono{font-family:'Space Grotesk',sans-serif;}
.mono-digit{font-family:'JetBrains Mono',monospace;}
button{font-family:inherit;}
input,select{font-family:inherit;}

/* ---------- layout shells ---------- */
.viewport{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  display:flex;
  flex-direction:column;
}
.hidden{display:none !important;}
.spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--primary);
  animation:spin 0.8s linear infinite;margin:0 auto;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- auth screens ---------- */
.auth-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px 28px;
}
.auth-mark{
  width:56px;height:56px;border-radius:14px;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.auth-mark svg{width:28px;height:28px;}
.auth-wrap h1{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:-0.02em;}
.auth-sub{color:var(--text-secondary);font-size:14px;margin:0 0 28px;line-height:1.5;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;}
.field input,.field select{
  width:100%;height:48px;border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  padding:0 14px;font-size:15px;color:var(--text);
  outline:none;
}
.field input:focus,.field select:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px var(--primary-softer);}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.field input[type="file"]{padding:0 8px;font-size:12px;line-height:48px;}
.station-picker-btn{
  width:100%;height:48px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  padding:0 12px;font-size:14px;color:var(--text);
  display:flex;align-items:center;gap:8px;cursor:pointer;
  overflow:hidden;white-space:nowrap;
}
.station-picker-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.station-logo{border-radius:6px;object-fit:contain;flex-shrink:0;background:#fff;}
.station-badge{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;flex-shrink:0;font-family:'Space Grotesk',sans-serif;
}
.station-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.station-grid-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 3px;border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;text-align:center;
}
.station-grid-item:hover{background:var(--surface-2);}
.station-grid-item span{font-size:10px;font-weight:500;line-height:1.2;}
.bill-btn{
  width:100%;height:48px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;font-size:12.5px;color:var(--text-secondary);
  overflow:hidden;white-space:nowrap;padding:0 6px;
}
.bill-btn:hover{background:var(--surface-2);}
.otp-row{display:flex;gap:8px;margin-bottom:8px;}
.otp-row input{
  width:100%;height:52px;text-align:center;font-size:20px;font-weight:600;
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);
  font-family:'JetBrains Mono',monospace;
}
.btn-primary{
  width:100%;height:48px;border-radius:var(--radius-sm);border:none;
  background:var(--primary);color:#fff;font-size:15px;font-weight:500;
  cursor:pointer;margin-top:6px;
}
.btn-primary:active{transform:scale(0.99);}
.btn-ghost{
  width:100%;height:44px;border-radius:var(--radius-sm);
  background:transparent;border:1px solid var(--border);color:var(--text);
  font-size:14px;font-weight:500;cursor:pointer;margin-top:10px;
}
.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--text-secondary);}
.auth-switch a{color:var(--primary-light);font-weight:500;text-decoration:none;cursor:pointer;}
.demo-note{
  margin-top:18px;padding:12px 14px;background:var(--accent-soft);border-radius:var(--radius-sm);
  font-size:12.5px;color:#6B4A18;line-height:1.5;
}
.demo-note b{color:#4A3210;}

/* ---------- app shell ---------- */
#app{flex:1;display:flex;flex-direction:column;padding-bottom:74px;}
#app.ads-visible{padding-bottom:134px;}
#app.ads-visible .fab{bottom:148px;}
.ad-banner{
  position:fixed;left:50%;transform:translateX(-50%);bottom:62px;
  width:100%;max-width:480px;height:60px;
  background:var(--surface-2);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--text-muted);z-index:4;
  padding-bottom:env(safe-area-inset-bottom);
}
.ad-rail{
  --rail-width:160px;
  position:fixed;top:0;bottom:0;width:var(--rail-width);
  background:var(--surface-2);border:1px solid var(--border);
  display:none;align-items:center;justify-content:center;
  font-size:12px;color:var(--text-muted);z-index:3;
}
.ad-rail-left{ left:calc(50vw - 240px - var(--rail-width) - 10px); }
.ad-rail-right{ right:calc(50vw - 240px - var(--rail-width) - 10px); }

/* Wide desktop / tablet viewports: free space either side of the centered
   app column is used for side rails instead of a bottom banner. */
@media (min-width:900px){
  .ad-rail{ display:flex; }
  .ad-banner{ display:none !important; }
  #app.ads-visible{ padding-bottom:74px; }
  #app.ads-visible .fab{ bottom:88px; }
}
/* Phone/tablet rotated to landscape: not enough vertical room for a bottom
   banner without covering content, so use narrower side rails instead. */
@media (max-width:899px) and (orientation:landscape) and (min-width:640px){
  .ad-rail{ display:flex; --rail-width:90px; }
  .ad-banner{ display:none !important; }
  #app.ads-visible{ padding-bottom:74px; }
  #app.ads-visible .fab{ bottom:88px; }
}
.topbar{
  position:sticky;top:0;z-index:5;
  background:var(--bg);
  padding:18px 20px 8px;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar h2{font-size:20px;font-weight:700;margin:0;letter-spacing:-0.01em;}
.topbar .sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;font-family:'Inter';}
.avatar-btn{
  width:38px;height:38px;border-radius:50%;background:var(--primary-softer);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;border:none;cursor:pointer;
}
.view{padding:8px 20px 20px;}

/* vehicle selector chips */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:4px 20px 14px;scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;padding:9px 16px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface);font-size:13.5px;font-weight:500;color:var(--text-secondary);
  cursor:pointer;white-space:nowrap;
}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}

/* cards */
.card{
  background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);
  padding:18px 18px;margin-bottom:14px;
}
.card-title{font-size:13px;font-weight:500;color:var(--text-secondary);margin:0 0 2px;}

/* gauge */
.gauge-card{text-align:center;padding-top:20px;}
.gauge-wrap{position:relative;width:220px;margin:0 auto;}
.gauge-readout{position:absolute;left:0;right:0;bottom:14px;text-align:center;}
.gauge-readout .val{font-size:30px;font-weight:700;letter-spacing:-0.02em;}
.gauge-readout .unit{font-size:12px;color:var(--text-muted);font-family:'Inter';}
.gauge-tag{
  display:inline-block;margin-top:10px;padding:5px 12px;border-radius:20px;
  font-size:12.5px;font-weight:500;
}
.tag-good{background:var(--good-soft);color:var(--good);}
.tag-warn{background:var(--warn-soft);color:var(--warn);}
.tag-neutral{background:var(--surface-2);color:var(--text-secondary);}

/* stat grid */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.stat-tile{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px;}
.stat-tile .label{font-size:12px;color:var(--text-secondary);margin:0 0 6px;}
.stat-tile .value{font-size:20px;font-weight:700;margin:0;}

/* chart card */
.chart-card canvas{width:100% !important;}

/* forms */
.form-row{display:flex;gap:10px;}
.form-row .field{flex:1;}
.segmented{display:flex;background:var(--surface-2);border-radius:var(--radius-sm);padding:4px;margin-bottom:16px;}
.segmented button{
  flex:1;border:none;background:transparent;padding:10px 0;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--text-secondary);cursor:pointer;
}
.segmented button.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,0.06);}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.type-grid-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px;}
.type-card{
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 12px;
  cursor:pointer;background:var(--surface);text-align:center;
}
.type-card.active{border-color:var(--primary);background:var(--primary-softer);}
.type-card svg{width:26px;height:26px;margin-bottom:6px;color:var(--primary);}
.type-card .lbl{font-size:12.5px;font-weight:500;}
.type-card.small{padding:9px 4px;}
.type-card.small svg{width:19px;height:19px;margin-bottom:4px;}
.type-card.small .lbl{font-size:10.5px;font-weight:500;line-height:1.2;}
.computed-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;
  font-size:13.5px;color:var(--text-secondary);
}
.computed-row .amt{font-weight:600;color:var(--text);font-family:'JetBrains Mono',monospace;}

/* history list */
.log-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--border);
}
.log-item:last-child{border-bottom:none;}
.log-left .date{font-size:13.5px;font-weight:500;}
.log-left .odo{font-size:12px;color:var(--text-muted);margin-top:2px;}
.log-right{text-align:right;}
.log-right .mileage{font-size:15px;font-weight:600;font-family:'JetBrains Mono',monospace;}
.log-right .cost{font-size:12px;color:var(--text-muted);margin-top:2px;}
.badge-pill{font-size:10.5px;font-weight:500;padding:2px 8px;border-radius:10px;margin-left:6px;}

/* empty state */
.empty-state{text-align:center;padding:50px 20px;color:var(--text-secondary);}
.empty-state svg{width:44px;height:44px;color:var(--text-muted);margin-bottom:14px;}
.empty-state h3{font-size:16px;margin:0 0 6px;color:var(--text);}
.empty-state p{font-size:13.5px;margin:0 0 18px;line-height:1.5;}
.empty-state button{
  border:none;background:var(--primary);color:#fff;padding:11px 22px;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;
}

/* fab */
.fab{
  position:absolute;right:20px;bottom:88px;width:52px;height:52px;border-radius:50%;
  background:var(--accent);border:none;color:#4A3210;display:flex;align-items:center;
  justify-content:center;cursor:pointer;z-index:6;
}
.fab svg{width:22px;height:22px;}

/* bottom nav */
.tabbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;background:var(--surface);
  border-top:1px solid var(--border);display:flex;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:5;
}
.tab-btn{
  flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;
  gap:3px;color:var(--text-muted);cursor:pointer;padding:6px 0;
}
.tab-btn svg{width:22px;height:22px;}
.tab-btn span{font-size:10.5px;font-weight:500;}
.tab-btn.active{color:var(--primary);}

/* modal sheet */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(10,14,18,0.45);z-index:20;
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet{
  width:100%;max-width:480px;background:var(--surface);border-radius:20px 20px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto;
}
.sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px;}
.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.sheet-header h3{margin:0;font-size:17px;font-weight:700;}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:4px;}
.icon-btn svg{width:20px;height:20px;}

/* vehicle card */
.vehicle-card{display:flex;align-items:center;gap:12px;}
.vehicle-icon{width:44px;height:44px;border-radius:12px;background:var(--primary-softer);color:var(--primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.vehicle-icon svg{width:22px;height:22px;}
.vehicle-meta{flex:1;}
.vehicle-meta .name{font-size:15px;font-weight:600;}
.vehicle-meta .type{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.vehicle-claim{text-align:right;font-size:12px;color:var(--text-secondary);}