:root {
  --bg: #f3f5f9; --card: #ffffff; --ink: #1a2133; --muted: #626b7c; --line: #e1e6ef;
  --brand: #15324D; --brand-soft: #e4f3fb; --accent: #0B7FBF; --cyan: #49CDED; --navy-deep: #11263A; --amber: #d98a1f;
  --good: #1f7a4a; --bad: #b4372f; --warn: #a76a06; --warn-soft: #fcf3e1; --bad-soft: #f9e6e4;
  --radius: 10px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: var(--brand); }
.topbar { background: linear-gradient(180deg, #1F3F5E, #11263A); color: #fff; border-bottom: 2px solid var(--cyan); }
.topbar .inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.topbar .logo { font-weight: 700; letter-spacing: .2px; margin-right: 12px; color: #fff; text-decoration: none; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.topbar nav a { color: #d4e9f5; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.topbar nav a:hover, .topbar nav a.on { background: rgba(255,255,255,.14); color: #fff; }
.topbar .who { font-size: 13px; color: #bfdcee; }
.topbar .who a { color: #fff; margin-left: 8px; }
main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 24px; margin: 4px 0 14px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.sub { color: var(--muted); margin: -8px 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.kpi .label { color: var(--muted); font-size: 13px; }
.kpi .value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .delta { font-size: 12.5px; margin-top: 2px; color: var(--muted); }
.up { color: var(--good); } .down { color: var(--bad); }
.kpi.hero { background: var(--brand); color: #fff; border-color: var(--brand); }
.kpi.hero .label, .kpi.hero .delta { color: #bfdcee; }
.two { grid-template-columns: 2fr 1fr; }
.half { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .two, .half { grid-template-columns: 1fr; } }
.chartbox { position: relative; height: 290px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; background: #f7f9fc; }
td.r, th.r { text-align: right; }
tr:hover td { background: #f8faff; }
.scroll { overflow-x: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 16px; }
.filters label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pills a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); font-size: 14px; }
.pills a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid #cdd4e0; border-radius: 7px; background: #fff; color: var(--ink); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 7px; border: 1px solid var(--brand); background: var(--brand); color: #fff; cursor: pointer; text-decoration: none; }
.btn.ghost { background: #fff; color: var(--brand); }
.btn.danger { background: #fff; color: var(--bad); border-color: #e3b5b0; }
.btn.warn { background: var(--amber); border-color: var(--amber); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.form label span.hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.form .full { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 14px; background: #fff; }
legend { font-weight: 700; padding: 0 6px; }
.errors { background: var(--bad-soft); border: 1px solid #ecc3be; color: var(--bad); border-radius: var(--radius); padding: 10px 14px 10px 30px; margin-bottom: 14px; }
.warnings { background: var(--warn-soft); border: 1px solid #f0d9a8; color: #6d4705; border-radius: var(--radius); padding: 10px 14px 10px 30px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.badge.submitted { background: #e8eefb; color: #2b4f9e; }
.badge.approved { background: #e1f2e8; color: var(--good); }
.badge.rejected { background: var(--bad-soft); color: var(--bad); }
.badge.flag { background: var(--warn-soft); color: var(--warn); }
.badge.inactive, .badge.retired { background: #eceeeb; color: var(--muted); }
.badge.repair { background: var(--warn-soft); color: var(--warn); }
.calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; background: var(--brand-soft); border-radius: var(--radius); padding: 12px 14px; }
.calc div { font-size: 13px; color: var(--muted); }
.calc b { display: block; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.exp-row { display: grid; grid-template-columns: 1.3fr .8fr 1.6fr auto; gap: 8px; margin-bottom: 8px; }
@media (max-width: 600px) { .exp-row { grid-template-columns: 1fr 1fr; } .exp-row .note { grid-column: 1 / -1; } }
.alert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.alert-list li { padding: 9px 12px; border-radius: 8px; background: var(--warn-soft); border-left: 4px solid var(--amber); font-size: 14px; }
.alert-list li.bad { background: var(--bad-soft); border-left-color: var(--bad); }
.alert-list li.ok { background: var(--brand-soft); border-left-color: var(--good); }
.muted { color: var(--muted); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, #1F3F5E, #11263A); }
.login { width: 100%; max-width: 380px; }
.login h1 { margin-bottom: 4px; }
.bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; min-width: 60px; }
.bar i { display: block; height: 100%; background: var(--brand); }
.bar i.low { background: var(--bad); } .bar i.mid { background: var(--amber); }
.mt { margin-top: 14px; }
.flags { font-size: 12.5px; color: var(--warn); }
@media print { .topbar, .filters, .pills, .btn, .actions { display: none !important; } body { background: #fff; } .card { border: none; } }
.kpi.hero .up, .kpi.hero .down { color: #fff; font-weight: 600; }
td.nowrap, .nowrap { white-space: nowrap; }
.topbar .logo { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.topbar .logo img { display: block; }
.topbar .logo > span { letter-spacing: .08em; font-weight: 800; text-transform: uppercase; }
.topbar nav a.on { box-shadow: inset 0 -2px 0 var(--cyan); }
.topbar .logo small { font-weight: 500; font-size: 13px; color: #bfdcee; border-left: 1px solid rgba(255,255,255,.3); padding-left: 8px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.wordmark { font-size: 28px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); line-height: 1.1; }

/* ---- accounts, notices ---- */
.notice { background: var(--brand-soft); border: 1px solid #b5ddf1; color: #0d3654; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
.center { text-align: center; }
.spread { justify-content: space-between; }
.mt-b { margin-bottom: 14px; }
.btn.block { display: block; width: 100%; text-align: center; }
.form.one { grid-template-columns: 1fr; }
.login.wide { max-width: 720px; }
.login .brand { text-decoration: none; margin-bottom: 14px; }
.login h2 { margin-top: 6px; }
.login fieldset { padding: 12px; }
.split { display: grid; gap: 8px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.split .btn { text-align: center; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 14px; }
.check input { margin-top: 3px; width: 18px; height: 18px; }
.choice { display: grid; gap: 10px; margin: 10px 0 14px; }
.choice-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.choice-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.choice-card span { color: var(--muted); font-size: 14px; }
.joinbox .code { font: 800 38px/1.1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 8px; color: var(--brand); background: var(--brand-soft); border-radius: 10px; padding: 12px; text-align: center; margin: 6px 0 10px; }
.linkbox { width: 100%; font-size: 13px; color: var(--muted); margin-top: 6px; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.viewing { color: #fff; background: var(--accent); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.menu-btn { display: none; }
.m-only { display: none !important; }
.fab { display: none; }
code { background: var(--brand-soft); padding: 2px 6px; border-radius: 5px; font-weight: 700; letter-spacing: 1px; }
details > summary { cursor: pointer; }

/* ---- phones ---- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  main { padding: 14px 12px 96px; }
  h1 { font-size: 21px; }
  .topbar .inner { padding: 10px 12px; flex-wrap: wrap; }
  .topbar .logo { flex: 1; min-width: 0; }
  .topbar .logo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; }
  .menu-btn { display: grid; gap: 4px; background: rgba(255,255,255,.12); border: 0; border-radius: 8px; padding: 10px 9px; cursor: pointer; }
  .menu-btn span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; }
  .topbar nav, .topbar .who { display: none; width: 100%; flex: 0 0 100%; }
  .topbar.open nav { display: grid; gap: 2px; padding: 8px 0 4px; }
  .topbar.open nav a { padding: 12px 10px; font-size: 16px; }
  .topbar.open .m-only { display: block !important; }
  .viewing { display: block; }
  input, select, textarea { font-size: 16px; padding: 11px 12px; }
  .btn { padding: 12px 18px; }
  .btn.small { padding: 8px 12px; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters .btn { text-align: center; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi .value { font-size: 20px; }
  .card { padding: 13px; }
  .chartbox { height: 240px; }
  .pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pills a { white-space: nowrap; }
  .actions.spread { align-items: flex-start; }
  .fab { display: block; position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); background: var(--accent); color: #fff; font-weight: 700; padding: 15px 20px; border-radius: 99px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 20; }
  table.cards, table.cards tbody { display: block; }
  table.cards tr:first-child:has(th) { display: none; }
  table.cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); position: relative; }
  table.cards td { display: block; border: 0; padding: 2px 0; text-align: left !important; }
  table.cards td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
  table.cards td.actions { grid-column: 1 / -1; padding-top: 6px; }
  table.cards td.pickcell { position: absolute; right: 4px; top: 12px; }
  table.cards .hide-m { display: none; }
  table.cards tr.totalrow { display: grid; background: var(--brand-soft); border-radius: 8px; padding: 10px; }
  table.cards tr.totalrow th { background: none; text-align: left; padding: 2px 0; }
  .login-wrap { place-items: start center; padding: 18px 12px; }
}

/* ---- download page ---- */
body.dl { background: var(--bg); }
.dl-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.dl-hero { background: linear-gradient(180deg, #1F3F5E, #11263A); color: #fff; padding: 22px 0 64px; }
.dl-hero h1 { font-size: 34px; line-height: 1.15; margin: 30px 0 10px; max-width: 640px; }
.dl-hero p { margin: 0 0 20px; color: #d4e9f5; font-size: 17px; max-width: 600px; }
.brand.light { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand.light .wordmark { color: #fff; font-size: 24px; }
.brand.light img { display: block; }
.dl-main { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; min-height: 52px; }
.btn.big { font-size: 18px; padding: 14px 28px; border-radius: 12px; background: var(--accent); border-color: var(--accent); }
.dl-status { color: #fff; font-weight: 600; }
.dl-status a { color: #ffd38a; }
.dl-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.dl-platforms span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 5px 12px; font-size: 13.5px; }
body.dl main.dl-wrap { margin-top: -38px; padding-bottom: 50px; }
.dl-warn { padding-left: 14px; }
.dl-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dl-card { position: relative; }
.dl-card h2 { font-size: 17px; margin: 6px 0 8px; }
.dl-card ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.dl-card .dl-icon { font-size: 28px; }
.dl-card.mine { border: 2px solid var(--brand); box-shadow: 0 8px 24px rgba(24,73,169,.15); }
.mine-tag { position: absolute; top: 12px; right: 12px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.ios-share { display: inline-block; border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; background: #fff; color: var(--brand); font-weight: 700; }
.qrbox { width: 180px; margin: 4px auto 8px; }
.qrbox svg { width: 100%; height: auto; display: block; }
.dl-faq ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.topbar nav a.getapp { color: var(--cyan); }
@media (max-width: 760px) {
  .dl-hero { padding-bottom: 54px; }
  .dl-hero h1 { font-size: 26px; margin-top: 20px; }
  .btn.big { width: 100%; }
  .dl-qr { display: none; }
}
.dl-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.dl-banner img { border-radius: 9px; }
.dl-banner small { color: var(--muted); }
.dl-banner > span:last-child { font-size: 24px; color: var(--brand); }

/* ---- GPS & map ---- */
.small { font-size: 13px; }
code.wrap { display: inline-block; word-break: break-all; letter-spacing: 0; font-weight: 600; margin: 3px 0; }
.tracker-help { background: var(--brand-soft); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.tracker-help ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 8px; }
.map-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.map-card { padding: 0; overflow: hidden; }
#map { height: 640px; width: 100%; }
.map-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; background: #b8c0cc; flex: none; }
.dot.moving { background: #1f9d55; } .dot.idle { background: var(--amber); } .dot.offline, .dot.none { background: #b8c0cc; }
.veh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 470px; overflow-y: auto; }
.veh-list li[data-id] { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 9px 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.veh-list li[data-id]:hover { background: var(--brand-soft); }
.veh-list li.on { border-color: var(--brand); background: var(--brand-soft); }
.veh-list .km { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.route-info { margin-top: 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 14px; }
.veh-pin { background: #fff; border: 2px solid var(--brand); border-radius: 99px; padding: 2px 8px 2px 4px; font: 700 12px/1.4 var(--font); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); transform: translate(-50%, -50%); display: inline-flex; gap: 4px; align-items: center; }
.veh-pin .arrow { display: inline-block; color: var(--brand); font-size: 10px; }
.veh-pin.moving { border-color: #1f9d55; } .veh-pin.moving .arrow { color: #1f9d55; }
.veh-pin.idle { border-color: var(--amber); } .veh-pin.idle .arrow { color: var(--amber); }
.veh-pin.offline { border-color: #9aa3b2; color: #6b7280; }
.shift { margin-bottom: 14px; border-left: 4px solid var(--brand); }
.shift-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.shift-head h2 { margin-bottom: 2px; }
.shift-head p { margin: 0 0 10px; font-size: 14px; }
.shift-row { display: flex; gap: 10px; align-items: center; }
.shift-row select { flex: 1; }
.shift-stats { flex: 1; display: grid; }
.shift-stats b { font-size: 20px; }
.gps-pill { position: fixed; left: 12px; bottom: calc(18px + env(safe-area-inset-bottom)); background: #1f9d55; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 13px; border-radius: 99px; text-decoration: none; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
@media (max-width: 900px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-card { order: -1; }
  #map { height: 52vh; }
  .veh-list { max-height: none; }
}

/* ---- plans & billing ---- */
.plan-banner { display: block; background: var(--warn-soft); border: 1px solid #f0d9a8; color: #6d4705; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; text-decoration: none; }
.plan-banner.bad { background: var(--bad-soft); border-color: #ecc3be; color: var(--bad); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan-card { position: relative; display: grid; gap: 4px; border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; background: #fff; }
.plan-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.plan-card input { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; accent-color: var(--brand); }
.plan-name { font-weight: 800; font-size: 18px; }
.plan-price { font-size: 22px; font-weight: 700; color: var(--brand); }
.plan-price small { font-size: 13px; color: var(--muted); font-weight: 500; }
.plan-card ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink); }
.total-box { display: grid; gap: 2px; background: var(--brand-soft); border-radius: var(--radius); padding: 12px 14px; }
.total-box b { font-size: 26px; color: var(--brand); }
.pay-info { white-space: pre-wrap; font: 14px/1.6 var(--font); background: #f7f9fc; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }

[hidden] { display: none !important; }
.loc-help, .loc-lost { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--bad-soft); border: 1px solid #ecc3be; color: #7a241d; display: grid; gap: 6px; }
.loc-help p, .loc-lost p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.loc-help .btn { justify-self: start; }
.btn:disabled { opacity: .65; cursor: wait; }
.gps-pill.bad { background: var(--bad); }
.legal-links { text-align: center; font-size: 13px; color: #bfdcee; margin: 14px 0 0; }
.legal-links a { color: #fff; }
.legal-links.in { color: var(--muted); margin-top: 28px; }
.legal-links.in a { color: var(--muted); }
.legal .auth-panel { max-width: 820px; }
.legal .auth-panel h2 { font-size: 17px; margin: 20px 0 6px; }
.legal .auth-panel p, .login.legal li { font-size: 14.5px; line-height: 1.6; }
.legal .auth-panel table { font-size: 14px; margin: 6px 0; }
.check.consent { margin: 10px 0 0; }

/* ---- live tracking, zones, alerts, fleet ---- */
.live-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #b8c0cc; vertical-align: middle; margin-left: 4px; }
.live-dot.on { background: #1f9d55; box-shadow: 0 0 0 0 rgba(31,157,85,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); } 70% { box-shadow: 0 0 0 10px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot.on { animation: none; } }
.live-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 12px; font-size: 14px; }
.veh-pin.sel { box-shadow: 0 0 0 3px #f0a43a, 0 2px 6px rgba(0,0,0,.25); }
.replay { margin-top: 10px; display: grid; gap: 6px; }
.replay input[type=range] { width: 100%; accent-color: var(--brand); }
.alert-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; font-size: 13.5px; }
.alert-feed li { padding: 7px 9px; border-radius: 8px; background: #f7f9fc; border-left: 3px solid var(--brand); cursor: pointer; }
.alert-feed li.exit { border-left-color: var(--amber); }
.alert-feed li.speeding { border-left-color: var(--bad); }
.alert-feed li.new { background: var(--brand-soft); }
.alert-feed li.muted { cursor: default; border-left-color: transparent; }
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 18px; }
.alert-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.alert-ico.exit { background: var(--warn-soft); color: var(--warn); }
.alert-ico.speeding, .alert-ico.nogo { background: var(--bad-soft); color: var(--bad); }
tr.new-alert td { background: #f5f8ff; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg label { display: flex !important; gap: 6px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-weight: 600; cursor: pointer; }
.seg label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.seg input { accent-color: var(--brand); }
.radius-row { display: flex; gap: 8px; align-items: center; }
.radius-row input[type=range] { flex: 1; accent-color: var(--brand); }
.radius-row input[type=number] { width: 96px; }
.zones-layout .map-side h2 { margin-bottom: 8px; }
.zone-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--brand-soft); color: var(--brand); }
.zone-tag.rank { background: #efe8fa; color: #6b3fb8; } .zone-tag.customer { background: #e1f2e8; color: var(--good); }
.zone-tag.route { background: #dff4f6; color: #157a83; } .zone-tag.no_go { background: var(--bad-soft); color: var(--bad); }
.zone-label { font-weight: 700; }
.fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fleet-card { display: grid; gap: 7px; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fleet-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(24,73,169,.1); }
.fleet-card.retired { opacity: .6; }
.fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fc-head .plate { font-size: 18px; }
.fc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.fc-row > span:first-child { color: var(--muted); }
.fc-bar { display: grid; gap: 2px; justify-items: end; min-width: 150px; }
.fc-bar .bar { width: 150px; }
.fc-docs { display: flex; flex-wrap: wrap; gap: 5px; }
.doc { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #e1f2e8; color: var(--good); font-weight: 600; }
.doc.warn { background: var(--warn-soft); color: var(--warn); } .doc.bad { background: var(--bad-soft); color: var(--bad); }
.fc-money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.fc-money small { display: block; color: var(--muted); font-size: 11.5px; }
.fc-money b { font-size: 14px; font-variant-numeric: tabular-nums; }
.maint-form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 760px) { .fc-money { grid-template-columns: 1fr 1fr; } .live-bar { font-size: 13px; } }
.topbar nav a.locked { opacity: .7; }
.upsell { max-width: 640px; }
.upsell-icon { font-size: 44px; }
.upsell h1 { margin-top: 4px; }
.upsell-plan { background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; }
.feat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 99px; }
.chip.on { background: #e1f2e8; color: var(--good); }
.chip.off { background: #eceeeb; color: var(--muted); }
.plan-tag { position: absolute; top: -10px; left: 14px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.plan-card.popular { border-color: #f0c98a; }
.plan-card { margin-top: 8px; }
table.compare th.c, table.compare td.c { text-align: center; }
table.compare .yes { color: var(--good); font-weight: 800; font-size: 16px; }
.lock-note { background: #f3f5f9; border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--muted); }
.period-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 2px; }
.period-prices > span { background: #f3f6fc; border-radius: 7px; padding: 5px 8px; font-weight: 700; font-size: 14px; line-height: 1.3; }
.period-prices small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.period-prices em { display: block; font-style: normal; font-size: 11px; color: var(--good); font-weight: 600; }
.period-note { font-size: 11.5px; color: var(--muted); }
.field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.period-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.period-opt { position: relative; cursor: pointer; }
.period-opt input { position: absolute; opacity: 0; pointer-events: none; }
.period-opt span { display: grid; gap: 2px; text-align: center; border: 2px solid var(--line); border-radius: 10px; padding: 10px 6px; background: #fff; }
.period-opt small { color: var(--good); font-weight: 600; font-size: 11.5px; }
.period-opt input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.period-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
table.compare tr.price-row td { border-top: 2px solid var(--line); }
@media (max-width: 600px) { .period-pick { grid-template-columns: 1fr 1fr; } }
fieldset { min-width: 0; }
.period-table { width: 100%; margin: 6px 0 4px; font-size: 13.5px; }
.period-table th, .period-table td { padding: 4px 2px; border-bottom: 1px solid var(--line); background: none; }
.period-table th { font-size: 11px; }
.period-table em, .save { font-style: normal; font-weight: 700; color: var(--good); }
.period-opt .save { color: var(--good); }
.veh-pick { display: grid; gap: 4px; margin: 8px 0 10px; }
.small { font-size: 13px; }
.form label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form label.check b { font-weight: 700; }

/* ---- simple mode: menu, driver home, question form ---- */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; color: #d4e9f5; padding: 6px 10px; border-radius: 6px; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu[open] > summary, .more-menu.on > summary, .more-menu > summary:hover { background: rgba(255,255,255,.14); color: #fff; }
.more-list { position: absolute; right: 0; top: 36px; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; z-index: 30; display: grid; }
.more-list a { color: var(--ink) !important; padding: 10px 12px !important; border-radius: 7px; }
.more-list a:hover { background: var(--brand-soft) !important; }
.today h1 { font-size: 26px; }
.step-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.step-no { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; }
.step-body h2 { margin: 6px 0 10px; }
.step-body .card.shift { border: 0; padding: 0; margin: 0; background: none; }
.step-body .card.shift .shift-head h2 { display: none; }
.big-btn { display: block; width: 100%; text-align: center; font-size: 18px; padding: 16px 20px; border-radius: 12px; margin-top: 10px; }
.msg { background: var(--brand-soft); border: 1px solid #b5ddf1; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.msg.ok { background: #e6f4ec; border-color: #b9dfc8; }
.msg.bad { background: var(--bad-soft); border-color: #ecc3be; }
.msg p { margin: 4px 0 8px; }
.tile { display: grid; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--ink); }
.tile span { font-size: 28px; }
.tile small { color: var(--muted); }
.tile:hover { border-color: var(--brand); }
.simple-form .q { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.simple-form .q h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 10px; }
.qn { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 15px; }
.simple-form .hint { margin: -4px 0 10px; }
.big-input { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; color: var(--muted); }
.big-input input { font-size: 26px; font-weight: 700; padding: 12px 14px; width: 100%; max-width: 280px; color: var(--ink); }
.calc .hand { background: var(--brand); color: #fff; border-radius: 8px; padding: 6px 10px; }
.calc .hand b { color: #fff; }
details.q.more summary { font-weight: 700; cursor: pointer; }
.send-row { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 14px 0 6px; }
.send-row .big-btn { width: auto; flex: 1; margin: 0; }
.page-help { color: var(--muted); margin: -8px 0 14px; font-size: 14.5px; }
@media (max-width: 760px) {
  .more-menu > summary { padding: 12px 10px; color: #fff; font-size: 16px; }
  .more-list { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; }
  .more-list a { color: #fff !important; }
  .more-list a:hover { background: rgba(255,255,255,.14) !important; }
  .step-card { grid-template-columns: 36px 1fr; padding: 14px; }
  .step-no { width: 34px; height: 34px; font-size: 17px; }
}
.setup { margin-bottom: 14px; border: 2px solid var(--brand); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 16px; }
.checklist li.done { color: var(--muted); text-decoration: line-through; }
.more-numbers { margin: -4px 0 14px; }
.more-numbers > summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.actions.spread .page-help { flex-basis: 100%; order: 3; margin: 0; }
.step-body .shift-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.step-body .shift-row select { width: 100%; }
.step-body #shiftStart { font-size: 18px; padding: 15px; border-radius: 12px; }
.step-body #shiftStopRow { grid-template-columns: 1fr auto; align-items: center; }
.gps-pill.on-today { display: none !important; }
.alert-list.short li:nth-child(n+6) { display: none; }
.empty-note { border-style: dashed; text-align: center; padding: 28px 16px; }
.card.mt-b, .grid.kpis + .more-numbers + div { }
.staff-filters label.grow { flex: 1; min-width: 180px; }
.sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
.sortlink.on { color: var(--brand); }
.chartbox.short { height: 200px; }
.small-val { font-size: 18px !important; line-height: 1.3; }
.privacy-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #fff7e6; border: 1px solid #f0d9a8; color: #6d4705; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.privacy-bar.open { background: #fdecea; border-color: #ecc3be; color: #7a241d; }
.reveal-form { display: flex; gap: 8px; flex: 1; min-width: 260px; justify-content: flex-end; }
.reveal-form input { flex: 1; max-width: 360px; }
.private { color: var(--muted); font-style: italic; }
.service-box { border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #f3f5f9; }
.service-box.ok { background: #e6f4ec; }
.service-box.soon { background: var(--warn-soft); }
.service-box.overdue { background: var(--bad-soft); color: #7a241d; }
.service-box p { margin: 4px 0 0; }
.warn-text { color: var(--warn); }

/* ---- shift start check / end ---- */
.req { font-size: 11px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .3px; margin-left: 4px; }
.start-form, .shift.running { border: 0; padding: 0; margin: 0; background: none; }
.start-form .field { display: grid; gap: 5px; font-weight: 600; margin-bottom: 14px; }
.start-form .field select, .start-form .field input { font-size: 18px; padding: 12px; }
.checklist-box { padding: 12px 12px 6px; margin-bottom: 14px; }
.check-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.check-item:last-of-type { border-bottom: 0; }
.check-item small { display: block; color: var(--muted); font-size: 12.5px; }
.check-item.missing { background: var(--bad-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.okbad { display: flex; gap: 6px; }
.okbad label, .fuel-pick label { position: relative; }
.okbad input, .fuel-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.okbad span, .fuel-pick span { display: inline-block; padding: 9px 12px; border: 2px solid var(--line); border-radius: 9px; font-weight: 700; font-size: 14px; white-space: nowrap; background: #fff; }
.okbad .ok input:checked + span { background: #e1f2e8; border-color: var(--good); color: var(--good); }
.okbad .bad input:checked + span { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.okbad input:focus-visible + span, .fuel-pick input:focus-visible + span { outline: 3px solid var(--brand-soft); }
.fuel-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.fuel-pick input:checked + span { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.check.fit { background: #f3f5f9; border-radius: 10px; padding: 12px; margin: 0 0 12px; }
.run-line { font-size: 17px; margin: 0 0 4px; }
.service-line { border-radius: 8px; padding: 8px 10px; background: #f3f5f9; font-size: 14px; }
.service-line.overdue { background: var(--bad-soft); color: #7a241d; }
.service-line.soon { background: var(--warn-soft); }
.end-form { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.end-form h3 { margin: 0; }
.end-form label { display: grid; gap: 5px; font-weight: 600; }
.end-form input { font-size: 18px; padding: 12px; }
.step-card.dim { opacity: .75; }
.handover-due .big-btn { margin-top: 6px; }
.my-work { margin-bottom: 14px; }
@media (max-width: 760px) { .check-item { grid-template-columns: 1fr; gap: 6px; } .okbad label { flex: 1; } .okbad span { width: 100%; text-align: center; } }
.locked { background: #f3f5f9 !important; color: var(--ink); pointer-events: none; }
.section-title { font-size: 19px; margin: 18px 0 4px; }
.glance { margin-bottom: 18px; }
.glance > .actions h2 { margin: 0; }
.plan-save { font-size: 13px; color: var(--good); font-weight: 600; }

/* Handova logo (traced exactly from the brand image: cyan infinity-handshake mark + white HANDOVA on navy) */
.topbar .logo img.logo-full { height: 28px; width: auto; }
.brand-band { display: flex; justify-content: center; align-items: center; margin: -16px -16px 12px; padding: 22px 16px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(180deg, #1F3F5E, #11263A); text-decoration: none; }
.brand-band img { display: block; height: 40px; width: auto; max-width: 100%; }
.brand-tag { text-align: center; margin: 0 0 14px; }
.brand.light img { height: 40px; width: auto; }
@media (max-width: 420px) { .topbar .logo img.logo-full { height: 22px; } }

/* Profit by vehicle (financial intelligence) */
.alert-list li.info { background: #eef4fa; border-left-color: var(--accent); }
.fin-table tr.loss td { background: #fdf3f2; }
.fin-table small { font-size: 12px; }
.payback { height: 8px; border-radius: 99px; background: #e6ebf2; overflow: hidden; min-width: 90px; margin: 3px 0; }
.payback span { display: block; height: 100%; background: linear-gradient(90deg, #2a8f5c, #49CDED); }
.payback.big { height: 12px; }
table.money-split { width: 100%; }
table.money-split th { text-align: left; font-weight: 600; }
table.money-split tr.sub-row td { font-size: 13px; color: var(--muted); padding-top: 2px; padding-bottom: 2px; }
table.money-split tr.totalrow th, table.money-split tr.totalrow td { border-top: 2px solid var(--ink); }
.pl-table td.r, .pl-table th.r { text-align: right; }
.pl-table tr.totalrow td, .pl-table tr.totalrow th { border-top: 2px solid var(--ink); font-weight: 700; }
.cost-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
/* Handova network */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.partner { display: flex; flex-direction: column; gap: 6px; }
.partner .offer { background: #e9f8ee; color: var(--good); border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 14px; }
.partner .cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.partner h3 { margin: 0; }
.partner .actions { margin-top: auto; }
.cat-pills a { white-space: nowrap; }
.net-link { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; }

/* ---------- Log-in and sign-up pages: brand panel on the left, form on the right ---------- */
.auth-body { background: var(--bg); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 44%) 1fr; }
.auth-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 36px 44px 0; overflow: hidden;
  background: radial-gradient(120% 70% at 100% 100%, rgba(73,205,237,.22), transparent 60%), linear-gradient(160deg, #1F3F5E, #11263A); color: #fff; }
.auth-logo { align-self: flex-start; display: block; padding: 6px 0; }
.auth-logo img { display: block; height: 34px; width: auto; }
.auth-pitch { max-width: 470px; }
.auth-tagline { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin: 18px 0 14px; }
.auth-tagline span { color: var(--cyan); }
.auth-lead { color: #cfe3f1; font-size: 16px; margin: 0 0 20px; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-points li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: #e3eef6; font-size: 14.5px; line-height: 1.45; }
.auth-points .ic { width: 19px; height: 19px; color: var(--cyan); margin-top: 1px; }
.auth-devices { position: relative; margin-top: auto; height: 300px; }
.dev-laptop { position: absolute; left: 0; bottom: 34px; width: 82%; }
.dev-laptop .dev-screen { border: 9px solid #0b1a28; border-bottom-width: 12px; border-radius: 12px 12px 0 0; background: #fff; aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.dev-laptop .dev-base { height: 12px; margin: 0 -6%; background: linear-gradient(#c9d3dd, #8e9aa6); border-radius: 0 0 14px 14px; }
.dev-phone { position: absolute; right: 2%; bottom: 0; width: 27%; }
.dev-phone .dev-screen { border: 7px solid #0b1a28; border-radius: 22px; background: #fff; aspect-ratio: 9 / 18.5; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.dev-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 20px; background: #fff; }
.auth-panel { width: 100%; max-width: 400px; }
.wide .auth-panel { max-width: 680px; }
.legal .auth-panel { max-width: 780px; }
.auth-main .legal-links { margin-top: 28px; text-align: center; font-size: 13px; color: var(--muted); }
.auth-main .legal-links a { color: var(--muted); }
.auth-title { font-size: 27px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
.auth-sub { color: var(--muted); margin: 0 0 26px; }

.auth-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > label { font-weight: 600; font-size: 14px; }
.auth-form input:not([type=checkbox]), .auth-panel .field input, .auth-panel .field select { padding: 11px 13px; border-radius: 8px; width: 100%; }
.field.has-error input { border-color: var(--bad); background: #fffafa; }
.field-error { display: flex; gap: 6px; align-items: flex-start; margin: 0; color: var(--bad); font-size: 13.5px; line-height: 1.4; }
.field-error .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px !important; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; background: none; color: var(--muted); border-radius: 6px; cursor: pointer; }
.pw-toggle:hover { color: var(--brand); background: var(--bg); }
.pw-toggle .ic { width: 19px; height: 19px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: -4px; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.remember input { width: 17px; height: 17px; accent-color: var(--brand); margin: 0; }
.forgot { color: var(--bad); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.forgot:hover { text-decoration: underline; }
.auth-btn { padding: 12px 16px; font-size: 15.5px; border-radius: 8px; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border-color: #cdd4e0; color: var(--ink); border-radius: 8px; }
.google-btn:hover { background: #f7f9fc; }
.google-btn .ic { width: 18px; height: 18px; }
.auth-switch { text-align: center; margin: 22px 0 0; font-size: 14.5px; }
.auth-switch a { font-weight: 700; text-decoration: none; color: var(--accent); margin-left: 4px; }

/* Get the app */
.get-app { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.get-app h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; }
.get-app-body { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.store-buttons { display: grid; gap: 8px; }
.store-btn { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 9px; background: #000; color: #fff; text-decoration: none; border: 1px solid #000; min-height: 46px; }
.store-btn .ic { width: 22px; height: 22px; flex: none; }
.store-btn span { display: grid; line-height: 1.1; font-size: 16px; font-weight: 600; }
.store-btn small { font-size: 10.5px; font-weight: 500; letter-spacing: .02em; opacity: .9; }
.store-btn:hover { background: #222; }
.store-btn.light { background: #fff; color: var(--brand); border-color: #cdd4e0; }
.store-btn.light span { font-size: 14.5px; }
.store-btn.light:hover { background: var(--brand-soft); }
.qr-mini { margin: 0; text-align: center; }
.qr-mini .qrbox { width: 124px; height: 124px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qr-mini .qrbox svg { width: 100%; height: 100%; display: block; }
.qr-mini figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 124px; }
.get-app-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 960px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { position: static; height: auto; padding: 18px 20px 20px; gap: 0; }
  .auth-logo img { height: 28px; }
  .auth-tagline { font-size: 24px; margin: 12px 0 0; }
  .auth-tagline br { display: none; }
  .auth-lead, .auth-points, .auth-devices { display: none; }
  .auth-main { justify-content: flex-start; padding: 26px 18px 18px; }
  .auth-title { font-size: 23px; }
}
@media (max-width: 760px) { .qr-mini { display: none; } .get-app-body { grid-template-columns: 1fr; } }

/* Form group used by pickers and phone fields (same look as a .form label) */
.fg { display: grid; gap: 4px; align-content: start; min-width: 0; }
.fg > label { font-weight: 600; font-size: 14px; }
.fg .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.form .fg.full { grid-column: 1 / -1; }

/* Searchable picker with flags (country, currency, dialling code) */
.pk { position: relative; min-width: 0; }
.pk-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; bottom: 0; left: 12px; }
.pk-btn { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-weight: 400; text-align: left; padding: 8px 10px;
  border: 1px solid #cdd4e0; border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; min-height: 40px; }
.pk-btn:focus-visible, .pk-btn[aria-expanded=true] { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.pk-btn.pk-invalid { border-color: var(--bad); }
.pk-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-ph { flex: 1; color: var(--muted); }
.pk-chev { width: 16px; height: 16px; flex: none; color: var(--muted); }
.pk-flag { width: 22px; height: 16px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); background: var(--bg); }
.pk-flag.none { display: inline-block; }
.pk-pop { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: max(100%, 300px); max-width: min(380px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(17,38,58,.18); padding: 8px; }
.pk-search { width: 100%; margin-bottom: 6px; }
.pk-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.pk-list li { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 7px; cursor: pointer; font-size: 14.5px; }
.pk-list li.on, .pk-list li:hover { background: var(--brand-soft); }
.pk-list li[aria-selected=true] .pk-name { font-weight: 700; }
.pk-name { flex: 1; min-width: 0; }
.pk-meta { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.pk-empty { color: var(--muted); cursor: default !important; }
.phone-field { display: grid; grid-template-columns: 118px 1fr; gap: 6px; }
.phone-field .pk-pop { width: 300px; }
.phone-field > select { width: 118px; }
.filters .pk { min-width: 200px; }

/* Sign-up: choose your role */
.role-cards { display: grid; gap: 14px; }
.role-card { display: grid; grid-template-columns: 52px 1fr 24px; gap: 16px; align-items: center; padding: 18px; border: 1.5px solid var(--line);
  border-radius: 14px; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.role-card:hover, .role-card:focus-visible { box-shadow: 0 10px 26px rgba(17,38,58,.12); transform: translateY(-1px); }
.role-icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; }
.role-icon .ic { width: 26px; height: 26px; }
.role-card.driver .role-icon { background: #e1f6fc; color: #0a7fa3; }
.role-card.driver:hover { border-color: var(--cyan); }
.role-card.company .role-icon { background: var(--brand); color: #fff; }
.role-card.company:hover { border-color: var(--brand); }
.role-text { display: grid; gap: 3px; min-width: 0; }
.role-text b { font-size: 16.5px; }
.role-text > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.45; }
.role-kicker { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.role-kicker .ic { width: 13px; height: 13px; }
.driver .role-kicker { color: #0a7fa3; }
.company .role-kicker { color: var(--brand); }
.role-go { color: var(--muted); }
.role-go .ic { width: 20px; height: 20px; }
.role-card:hover .role-go { color: var(--brand); }

/* Icons */
.ic { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; }
main.auth-main { max-width: none; margin: 0; }
.btn.google-btn { display: flex; }

/* Daily report: line the boxes up, and keep short answers (dates, readings, amounts) in short boxes */
.simple-form .form.tight { grid-template-columns: repeat(auto-fill, minmax(170px, 200px)); align-items: start; gap: 14px 18px; }
.simple-form .form.tight > label { grid-template-rows: 20px auto; align-content: start; }
.simple-form .form.tight > label.w-wide { grid-column: span 2; }
.simple-form .form.tight > label.full { grid-column: 1 / -1; }
.simple-form .form.tight .lt { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.simple-form .form.tight .req { margin-left: 0; }
.simple-form .form.tight input, .simple-form .form.tight select, .simple-form label.handed input { height: 44px; padding: 0 12px; width: 100%; font-size: 15.5px; }
.simple-form .form.tight .hint { margin: 2px 0 0; white-space: normal; }
.simple-form label.handed { display: grid; gap: 4px; max-width: 320px; font-weight: 600; }
@media (max-width: 480px) {
  .simple-form .form.tight { grid-template-columns: 1fr 1fr; gap: 12px; }
  .simple-form .form.tight > label.w-wide { grid-column: 1 / -1; }
  .simple-form .form.tight .lt { white-space: normal; }
  .simple-form .form.tight > label { grid-template-rows: minmax(20px, auto) auto; }
}
@media (max-width: 480px) { .simple-form .form.tight > label.w-num .lt, .simple-form .form.tight > label.w-date .lt { min-height: 40px; align-items: flex-end; } }

/* Header: a little lower, with more room around the logo; line icons in the menu */
.topbar .inner { padding: 6px 20px; min-height: 54px; gap: 4px 22px; }
.topbar .logo { padding: 6px 14px 6px 0; margin-right: 6px; }
.topbar .logo img.logo-full { height: 26px; }
.topbar nav a, .more-menu summary { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; }
.topbar nav a .ic, .more-menu summary .ic { width: 16px; height: 16px; opacity: .85; }
.more-list a { display: flex !important; }
.more-list a .ic { color: var(--brand); opacity: 1; }
@media (max-width: 760px) { .topbar .inner { padding: 6px 14px; min-height: 50px; } .topbar .logo img.logo-full { height: 22px; } }
/* Icons inside headings, buttons, lists and notes */
h1 .ic, h2 .ic { color: var(--accent); width: .95em; height: .95em; margin-right: 2px; }
.btn .ic { width: 16px; height: 16px; vertical-align: -3px; }
.lock-note .ic, .private .ic { width: 14px; height: 14px; vertical-align: -2px; }
#attn li > .ic:first-child { color: var(--muted); margin-right: 3px; }
#attn li.bad > .ic:first-child { color: var(--bad); }
.tile > span .ic { width: 28px; height: 28px; color: var(--accent); }
.dl-icon .ic { width: 34px; height: 34px; color: var(--brand); }
.cat-pills a .ic, .cat .ic { width: 15px; height: 15px; vertical-align: -2px; }
.upsell-icon .ic { width: 40px; height: 40px; color: var(--accent); }
.run-line .ic { color: var(--good); width: 12px; height: 12px; }
.chip .ic { width: 13px; height: 13px; vertical-align: -2px; }

/* Download page */
.dl-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.dl-kicker { color: var(--cyan) !important; font-weight: 700; letter-spacing: .04em; margin: 26px 0 4px !important; font-size: 15px !important; }
.dl-hero h1 { margin-top: 0; }
.store-buttons.row { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.dl-hero .store-btn { border-color: rgba(255,255,255,.35); }
.dl-hero .store-btn.light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.dl-hero .store-btn.light:hover { background: rgba(255,255,255,.16); }
.dl-note { font-size: 13.5px !important; color: #b9d3e6 !important; margin: 8px 0 0 !important; }
.dl-hero-qr { margin: 0; background: #fff; color: var(--ink); border-radius: 16px; padding: 16px; text-align: center; width: 210px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.dl-hero-qr .qrbox { width: 176px; margin: 0 auto 8px; }
.dl-hero-qr figcaption { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; justify-content: center; }
.dl-card { scroll-margin-top: 16px; }
.dl-card:target { outline: 2px solid var(--cyan); }
@media (max-width: 760px) { .dl-hero-grid { grid-template-columns: 1fr; } .dl-hero-qr { display: none; } .store-buttons.row .store-btn { flex: 1 1 150px; } }
.simple-form label.handed .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.form { align-items: start; }
.form > label { align-content: start; }
.auth-shell { background: #11263A; }
.auth-side { align-self: start; }
@media (max-width: 960px) { .auth-shell { background: #fff; } }
@media (min-width: 761px) {
  .topbar .inner { max-width: 1320px; flex-wrap: nowrap; gap: 4px 16px; }
  .topbar nav { flex-wrap: nowrap; gap: 2px; min-width: 0; }
  .topbar nav a, .more-menu summary { padding: 6px 9px; gap: 6px; font-size: 14.5px; white-space: nowrap; }
  .topbar .who { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1180px) { .topbar .who .me-link { display: none; } .topbar nav a .ic { display: none; } }
.auth-sectors { margin: 18px 0 0; font-size: 12.5px; letter-spacing: .03em; color: #9fc3da; line-height: 1.7; }
.dev-screen img[src$=".svg"] { object-position: center; }
/* Laptop and phone shrink on short screens so they never cover the text */
.auth-devices { --h: clamp(140px, calc(100vh - 590px), 300px); height: var(--h); flex: none; }
.dev-laptop { width: min(82%, calc(var(--h) * 1.28)); }
.dev-phone { width: min(27%, calc(var(--h) * .42)); left: calc(min(82%, var(--h) * 1.28) - min(27%, var(--h) * .42) * .55); right: auto; }

/* A realistic phone: titanium frame, thin black bezel, camera cut-out, side buttons and a glass reflection */
.dev-phone { padding: 2.2%; border-radius: 17% / 8%; background: linear-gradient(135deg, #6b7580, #d5dbe1 18%, #59626c 38%, #9aa4ae 62%, #e2e7ec 80%, #5e6771);
  box-shadow: 0 24px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.35); }
.dev-phone .dev-screen { position: relative; border: none; border-radius: 15% / 7.1%; aspect-ratio: 9 / 19.5; padding: 3.6%; background: #020406; box-shadow: none; overflow: hidden; }
.dev-phone .dev-screen img { border-radius: 12.5% / 5.9%; }
.dev-phone .dev-screen::before { content: ""; position: absolute; z-index: 2; top: 5.2%; left: 50%; transform: translateX(-50%); width: 31%; height: 3.4%;
  background: #000; border-radius: 99px; box-shadow: inset -6px 0 0 -3px #0c1b2a; }
.dev-phone .dev-screen::after { content: ""; position: absolute; inset: 3.6%; border-radius: 12.5% / 5.9%; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0 26%, rgba(255,255,255,0) 26.5%); }
.dev-phone::before, .dev-phone::after { content: ""; position: absolute; width: 1.6%; min-width: 3px; border-radius: 3px; background: linear-gradient(90deg, #4f5862, #c9d0d7, #4f5862); }
.dev-phone::before { right: -1.2%; top: 25%; height: 12%; }
.dev-phone::after { left: -1.2%; top: 20%; height: 18%; box-shadow: 0 0 0 0 transparent; background: linear-gradient(90deg, #4f5862, #c9d0d7, #4f5862);
  -webkit-mask: linear-gradient(#000 0 40%, transparent 40% 55%, #000 55% 100%); mask: linear-gradient(#000 0 40%, transparent 40% 55%, #000 55% 100%); }
.dev-phone { container-type: inline-size; padding: 1.3cqw; border-radius: 15cqw;
  background: linear-gradient(140deg, #3a4048, #a7afb7 14%, #2f353c 32%, #545c65 60%, #b9c0c7 82%, #3b4249); }
.dev-phone .dev-screen { border-radius: 13.8cqw; padding: 3.2cqw; }
.dev-phone .dev-screen img { border-radius: 11cqw; }
.dev-phone .dev-screen::before { top: 5.6cqw; height: 7.2cqw; width: 30%; }
.dev-phone .dev-screen::after { inset: 3.2cqw; border-radius: 11cqw; background: linear-gradient(118deg, rgba(255,255,255,.09) 0 24%, rgba(255,255,255,0) 24.5%); }
.dev-phone::before, .dev-phone::after { width: 1.4cqw; min-width: 2px; background: linear-gradient(90deg, #2f353c, #9aa2aa, #2f353c); }
.dev-phone::before { right: -0.9cqw; }
.dev-phone::after { left: -0.9cqw; }
/* .dev-phone is only the size box; .dev-frame draws the phone, sized from the phone's width (cqw) */
.dev-phone { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.dev-phone::before, .dev-phone::after { content: none; }
.dev-frame { position: relative; padding: 1.4cqw; border-radius: 16cqw; box-shadow: 0 24px 50px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.3);
  background: linear-gradient(140deg, #3a4048, #a7afb7 14%, #2f353c 32%, #545c65 60%, #b9c0c7 82%, #3b4249); }
.dev-frame::before, .dev-frame::after { content: ""; position: absolute; width: 1.5cqw; border-radius: 2cqw; background: linear-gradient(90deg, #2f353c, #a3abb3, #2f353c); }
.dev-frame::before { right: -1cqw; top: 26%; height: 13%; }
.dev-frame::after { left: -1cqw; top: 19%; height: 20%; -webkit-mask: linear-gradient(#000 0 42%, transparent 42% 56%, #000 56%); mask: linear-gradient(#000 0 42%, transparent 42% 56%, #000 56%); }
.dev-phone .dev-screen { border-radius: 14.6cqw; }
.auth-side { padding-bottom: 30px; }
.auth-devices { --h: clamp(140px, calc(100vh - 620px), 300px); }
@media (max-width: 960px) { .auth-side { padding-bottom: 20px; } }

/* Legal centre */
.legal-crumb { margin: 0 0 6px; font-size: 13.5px; }
.legal-crumb a { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.legal-meta { margin-top: -6px; font-size: 13.5px; }
.legal-summary { background: var(--brand-soft); border: 1px solid #b5ddf1; border-radius: var(--radius); padding: 12px 14px; margin: 14px 0 6px; font-size: 14.5px; line-height: 1.55; }
.legal-body h2 { font-size: 17px; margin: 24px 0 6px; }
.legal-body h3 { font-size: 15px; margin: 16px 0 4px; }
.legal-body p, .legal-body li { font-size: 14.5px; line-height: 1.62; }
.legal-body li { margin-bottom: 4px; }
.legal-body table { font-size: 13.5px; margin: 8px 0; }
.legal-body .caps { text-transform: uppercase; font-size: 13.5px; }
.legal-contact { margin-top: 26px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.legal-nav a { font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; color: var(--ink); }
.legal-nav a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
.legal-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.legal-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.legal-card b { display: block; font-size: 15.5px; }
.legal-card small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 3px; }
.legal-card em { display: block; font-style: normal; font-size: 12px; color: var(--accent); margin-top: 6px; font-weight: 600; }
.legal-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.legal-icon .ic { width: 20px; height: 20px; }
.consent-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fafbfd; font-size: 14px; }
.accept-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.accept-list li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.accept-list a { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.accept-list small { display: block; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.legal-crumb { margin: 0 0 6px; font-size: 13.5px; } .legal-crumb a { text-decoration: none; }
.check-legal { font-size: 14px; line-height: 1.5; }
.remember.accept { align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.remember.accept input { margin-top: 2px; flex: none; }
.billing-accept { margin: 4px 0 14px; display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.billing-accept input { margin-top: 3px; }

/* People's photos */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; background: var(--brand-soft); }
.avatar.none { background: linear-gradient(135deg, #1F3F5E, #11263A); color: #fff; font-weight: 700; letter-spacing: .02em; }
.name-cell { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.person-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hello-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.hello-row h1 { margin: 0; } .hello-row .sub { margin: 0; }
.photo-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
.photo-card.need { border-color: var(--amber); background: var(--warn-soft); }
.photo-card h2 { margin: 0 0 4px; }
.photo-card p { margin: 0 0 10px; }
.photo-box .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.photo-needed { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: var(--ink); margin: 10px 0; }
@media (max-width: 480px) { .photo-card { grid-template-columns: 1fr; justify-items: start; } }
.msg.warn { background: var(--warn-soft); border-color: #eccf94; }

/* Billing: plan cards look like the website's pricing cards */
.site-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 14px; }
.site-plans .s-plan { position: relative; display: flex; flex-direction: column; padding: 24px 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; cursor: pointer; margin: 0; transition: border-color .15s, box-shadow .15s; }
.site-plans .s-plan:hover { border-color: #b9c6d6; }
.site-plans .s-plan.pop { border: 2px solid var(--accent); box-shadow: 0 18px 40px rgba(11,127,191,.12); }
.site-plans .s-plan:has(input:checked) { border: 2px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); background: #fff; }
.site-plans .s-plan input { position: absolute; opacity: 0; pointer-events: none; }
.site-plans .s-tag { position: absolute; top: -12px; left: 20px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.site-plans .s-tag.mine { background: var(--good); }
.site-plans h3 { margin: 0 0 8px; font-size: 18px; }
.site-plans .s-price { font-size: 30px; font-weight: 800; margin: 0 0 6px; line-height: 1.1; color: var(--ink); }
.site-plans .s-price small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 4px; }
.site-plans .s-year { font-size: 12.5px; color: var(--good); margin: 0 0 8px; font-weight: 600; }
.site-plans ul { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; flex: 1; }
.site-plans li { display: flex; gap: 7px; align-items: flex-start; }
.site-plans li .ic { color: var(--good); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.site-plans .s-pick { display: flex; justify-content: center; gap: 6px; background: #fff; color: var(--brand); border-color: #cdd4e0; pointer-events: none; }
.site-plans .s-pick .ic, .site-plans .s-pick .when-on { display: none; }
.site-plans .s-plan:has(input:checked) .s-pick { background: var(--brand); color: #fff; border-color: var(--brand); }
.site-plans .s-plan:has(input:checked) .s-pick .ic, .site-plans .s-plan:has(input:checked) .s-pick .when-on { display: inline; }
.site-plans .s-plan:has(input:checked) .s-pick .when-off { display: none; }

/* Cookie notice */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; display: flex; justify-content: center; pointer-events: none; }
.cookie-bar[hidden] { display: none; }
.cookie-in { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; max-width: 980px; width: 100%;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(17,38,58,.25); }
.cookie-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.cookie-ic .ic { width: 20px; height: 20px; }
.cookie-in p { margin: 0; font-size: 14px; line-height: 1.5; }
.cookie-btns { display: flex; gap: 8px; white-space: nowrap; }
@media (max-width: 700px) { .cookie-in { grid-template-columns: 1fr; } .cookie-ic { display: none; } .cookie-btns .btn { flex: 1; } }
body.in .cookie-bar { bottom: 84px; }
@media (min-width: 761px) { body.in .cookie-bar { bottom: 16px; } }
.biz-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 4px; }
.biz-type { position: relative; cursor: pointer; }
.biz-type input { position: absolute; opacity: 0; }
.biz-type span { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 14px; background: #fff; }
.biz-type span .ic { color: var(--accent); width: 18px; height: 18px; }
.biz-type input:checked + span { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); }
.biz-type input:focus-visible + span { outline: 2px solid var(--brand); }
form.inline { display: inline; }
.garage-band { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); margin-bottom: 14px; border-left: 4px solid var(--accent); }
.garage-band .s-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.garage-band .s-ic .ic { width: 24px; height: 24px; }
.garage-band small { display: block; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .garage-band { grid-template-columns: 1fr; } }
.reply-box { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--brand-soft); font-size: 14px; }
.garage-cta { margin: 16px 0 4px; }
.topbar nav a.mode-switch { color: var(--cyan); }
.role-card.owner .role-icon { background: #e7f6ee; color: var(--good); }
.role-card.owner:hover { border-color: var(--good); }
.owner .role-kicker { color: var(--good); }
.drive-q { margin-top: 4px; }
.drive-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
@media (max-width: 480px) { .drive-choice { grid-template-columns: 1fr; } }

/* Checkboxes and radios keep their normal size next to long text */
input[type=checkbox], input[type=radio] { flex: none; width: 20px; height: 20px; min-width: 20px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
label.check, .form label.check { display: flex; gap: 12px; align-items: flex-start; }
.check-legal { font-size: 14.5px; line-height: 1.55; padding: 14px 16px; border: 1px solid var(--line, #dfe5ee); border-radius: 12px; background: #f7f9fc; cursor: pointer; }
.check-legal:has(input:checked) { border-color: var(--brand); background: #eefaff; }
.check-legal small { display: block; margin-top: 4px; color: var(--muted, #64748b); font-size: 13px; }
.check-legal a { font-weight: 600; }

/* Shift: background tracking note */
.bg-note { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: 14px; line-height: 1.5; }
.bg-note p { margin: 0; }
.bg-note .bg-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--accent); }
.bg-note.ok { background: #e8f6ee; } .bg-note.ok .bg-ic { color: var(--good); }
.bg-note.warn { background: var(--warn-soft); } .bg-note.warn .bg-ic { color: var(--warn); }

/* Download page: every card installs */
.dl-card { cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dl-card:hover, .dl-card:focus-visible { border-color: var(--brand); box-shadow: 0 10px 26px rgba(21,50,77,.14); transform: translateY(-2px); outline: none; }
.dl-card ol { flex: 1; }
.dl-card .dl-get { margin-top: 16px; align-self: flex-start; }
.dl-card.focus { border: 2px solid var(--accent, #18b5d8); box-shadow: 0 0 0 4px rgba(24,181,216,.18); }
.store-btn { cursor: pointer; transition: transform .15s, opacity .15s; } .store-btn:hover { transform: translateY(-1px); opacity: .92; }

/* Launch offer and referral programme */
.offer-note { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #f6d58b; color: var(--ink); font-size: 14px; line-height: 1.5; }
.offer-note .ic { flex: none; width: 22px; height: 22px; color: #b7791f; margin-top: 1px; }
.offer-note.invite { background: #eefaff; border-color: #a5e3f5; } .offer-note.invite .ic { color: var(--accent, #0891b2); }
.refer-card h2 { display: flex; align-items: center; gap: 8px; }
.refer-link { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.refer-link input { flex: 1 1 260px; min-width: 0; font-weight: 600; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.steps-list { padding-left: 20px; line-height: 1.6; } .steps-list li { margin: 6px 0; }
.pill.ok { background: #e8f6ee; color: #166534; } .pill.warn { background: #fff7e6; color: #92400e; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: #eef2f7; font-size: 13px; font-weight: 600; }

/* Delete account */
.danger-zone { border-color: #e3b5b0; margin-top: 18px; }
.danger-zone h2 { color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.del-what { margin: 12px 0; font-size: .95em; }
.del-what summary { font-weight: 600; cursor: pointer; }
.del-what li { margin: 6px 0; }

/* Staff: website chat */
.topbar nav .count, .chat-item .count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--cyan); color: #0b2235; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.chat-staff { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.chat-list { padding: 8px; max-height: 72vh; overflow: auto; }
.chat-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.chat-tabs a { flex: 1; text-align: center; padding: 6px; border-radius: 8px; text-decoration: none; color: var(--muted); }
.chat-tabs a.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.chat-item { display: block; padding: 10px; border-radius: 8px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.chat-item small { display: block; }
.chat-item.on { background: var(--brand-soft); }
.chat-item.unread b { color: var(--accent); }
.chat-prev { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread { display: flex; flex-direction: column; min-height: 60vh; }
.chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.chat-msgs { flex: 1; overflow: auto; max-height: 52vh; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.cm { max-width: 78%; }
.cm p { margin: 0; padding: 9px 12px; border-radius: 14px; background: #eef1f6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm small { color: var(--muted); font-size: 11px; padding: 0 6px; }
.cm.staff { align-self: flex-end; text-align: right; }
.cm.staff p { background: var(--brand); color: #fff; text-align: left; }
.cm.bot p { background: var(--warn-soft); font-size: 13px; }
.chat-reply { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.chat-reply textarea { flex: 1; resize: vertical; }
@media (max-width: 760px) { .chat-staff { grid-template-columns: 1fr; } .chat-list { max-height: 40vh; } }