/* RideHub v1 — mobile-first, keep it simple */
:root{
  --bg:#f7f7f5; --card:#ffffff; --ink:#161616; --muted:#6b6b6b;
  --line:#e6e4de; --accent:#161616; --accent-ink:#fff;
  --green:#1a7f37; --amber:#9a6a00; --red:#c0392b;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
}
.page{max-width:520px; margin:0 auto; padding:0 16px 48px}
.hidden{display:none !important}

/* header / brand */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 0 8px}
.brandmark{text-decoration:none; color:var(--ink)}
.brandmark .logo{font-weight:800; font-size:22px; letter-spacing:-0.5px}
.brandmark .tag{font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted)}
.rolelink{font-size:13px; color:var(--muted); text-decoration:none; border:1px solid var(--line);
  padding:8px 12px; border-radius:999px; background:#fff}
.rolelink:active{transform:scale(.97)}

header.brand{padding:28px 0 4px}
header.brand .logo{font-weight:800; font-size:34px; letter-spacing:-1px}
header.brand .tagline{font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--muted); margin-top:2px}

/* hero */
.hero h1{font-size:34px; line-height:1.12; letter-spacing:-1px; margin:18px 0 10px}
.lede{font-size:16px; color:#333; margin:0 0 20px}
.cta-row{display:flex; gap:10px}
.btn{display:inline-block; flex:1; text-align:center; text-decoration:none; font-weight:700;
  padding:15px 12px; border-radius:var(--radius); font-size:16px; border:1px solid var(--ink)}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.secondary{background:#fff; color:var(--ink)}
.btn.block{width:100%; margin-top:12px}
.btn.ghost{background:#fff; color:var(--muted); border-color:var(--line); font-weight:600}
.btn.danger{background:#fff; color:var(--red); border-color:#f0c9c4}
.btn.small{flex:0 0 auto; padding:10px 16px; font-size:14px}
.btn:active{transform:scale(.98)}
button.btn{cursor:pointer; font-family:inherit}

/* sections & cards */
section{margin-top:26px}
h2{font-size:20px; letter-spacing:-.3px; margin:0 0 10px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin:0 0 12px}
.card h3{margin:0 0 6px; font-size:16px}
.muted{color:var(--muted); font-size:14px}
.small{font-size:13px}

/* steps */
.steps ol{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.steps li{display:flex; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px}
.steps .n{flex:0 0 30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px}
.steps p{margin:4px 0 0; color:var(--muted); font-size:14px}

/* fee pitch */
.fee-card{background:#161616; color:#f5f5f2; border-radius:var(--radius); padding:20px 18px}
.fee-card h2{color:#fff}
.fee-card p{color:#cfcfc9; margin:0}
.fee-card strong{color:#fff}

/* forms */
label{display:block; font-size:13px; font-weight:700; margin:14px 0 6px}
input[type=text],input[type=datetime-local],select{
  width:100%; padding:14px; font-size:16px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-family:inherit; color:var(--ink)}
input:focus,select:focus{outline:2px solid #16161633; border-color:var(--ink)}
.seg{display:flex; background:#eceae5; border-radius:12px; padding:4px; gap:4px}
.seg button{flex:1; border:0; background:transparent; padding:12px; border-radius:9px;
  font-size:15px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit}
.seg button.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px #0002}
.veh-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.veh{border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px 8px;
  text-align:center; cursor:pointer; font-family:inherit}
.veh.on{border:2px solid var(--ink); padding:11px 7px}
.veh .t{font-weight:800; font-size:14px}
.veh .r{font-size:12px; color:var(--muted); margin-top:2px}

/* fare breakdown */
.rows{margin:6px 0}
.row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:15px}
.row:last-child{border-bottom:0}
.row.fee .k{color:var(--green); font-weight:600}
.row.fee .v{color:var(--green); font-weight:700}
.row.total{font-weight:800; font-size:17px; padding-top:12px}
.row .note{display:block; font-size:12px; color:var(--muted); font-weight:400}
.feeline{background:#eef7ee; border:1px solid #cfe6cf; border-radius:10px; padding:10px 12px;
  font-size:13px; color:#1a5c22; margin-top:10px}

/* trip timeline */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{display:flex; gap:12px; padding:10px 0; color:var(--muted); font-size:15px}
.timeline li .dot{flex:0 0 12px; height:12px; border-radius:50%; background:#d8d5cd; margin-top:5px}
.timeline li.done{color:var(--ink)}
.timeline li.done .dot{background:var(--green)}
.timeline li.now{color:var(--ink); font-weight:700}
.timeline li.now .dot{background:var(--ink); box-shadow:0 0 0 4px #16161622}
.driver-card{display:flex; gap:12px; align-items:center}
.avatar{flex:0 0 48px; height:48px; border-radius:50%; background:#161616; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px}
.stars{color:#b98a00; font-size:13px}

/* driver */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.switch{position:relative; width:64px; height:36px; flex:0 0 64px}
.switch input{opacity:0; width:0; height:0}
.knob{position:absolute; inset:0; background:#d8d5cd; border-radius:999px; transition:.15s; cursor:pointer}
.knob:before{content:""; position:absolute; width:28px; height:28px; border-radius:50%;
  background:#fff; top:4px; left:4px; transition:.15s; box-shadow:0 1px 3px #0003}
.switch input:checked + .knob{background:var(--green)}
.switch input:checked + .knob:before{transform:translateX(28px)}
.status-pill{font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px}
.status-pill.on{background:#e5f3e8; color:var(--green)}
.status-pill.off{background:#eee; color:var(--muted)}
.req .meta{display:flex; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin:6px 0}
.req .fare{font-size:20px; font-weight:800; margin:4px 0}
.req .actions{display:flex; gap:8px; margin-top:10px}
.accept{background:var(--green); color:#fff; border:1px solid var(--green)}
.decline{background:#fff; color:var(--muted); border-color:var(--line)}
.stat-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center}
.stat .v{font-size:20px; font-weight:800}
.stat .k{font-size:12px; color:var(--muted)}
.payout{color:var(--green); font-weight:800}

footer{margin-top:36px; font-size:12px; color:var(--muted); text-align:center}
footer a{color:var(--muted)}
.empty{text-align:center; color:var(--muted); padding:28px 12px; font-size:14px}
.chip{display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:#eee; color:var(--muted)}
.chip.live{background:#e5f3e8; color:var(--green)}