:root{--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
body{background:var(--paper)}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:calc(.75rem + var(--safe-t)) 1rem .75rem;background:var(--ink);color:#fff}
.top .who small{display:block;color:#c7c9cf;font-size:.78rem}
.pill{padding:.3rem .75rem;border-radius:999px;font-weight:700;font-size:.82rem;background:#6B6F76;color:#fff;white-space:nowrap}
.pill.available{background:var(--ok)}.pill.busy{background:var(--brand)}
main{flex:1;padding:1rem 1rem 8rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin:0 0 1rem;box-shadow:var(--shadow-sm)}
.card.offer{border:2px solid var(--warn)}
.card.mission{border:2px solid var(--brand)}
.card.notif{border:2px solid var(--danger)}
.card .veh{font-size:1.25rem;font-weight:800;margin:.6rem 0 0}
.card .sub{color:var(--mute);font-size:.95rem}
.walk{font-size:1.5rem;font-weight:800}
.count{font-weight:800;color:var(--danger)}
.btns{display:grid;gap:.6rem;margin-top:1rem}
.btns.two{grid-template-columns:1fr 1fr}
.plate{display:inline-flex;border:3px solid var(--ink);border-radius:8px;background:#fff;font-weight:800;letter-spacing:.1em;font-size:1.5rem;overflow:hidden}
.plate i{background:#1857C4;color:#fff;font-style:normal;font-size:.65rem;padding:.4rem .4rem;display:flex;align-items:flex-end;font-weight:700}
.plate b{padding:.5rem .7rem}
.mmap{height:190px;border-radius:10px;margin:.8rem 0 0;background:#E7E8E4;border:1px solid var(--line)}
.mk-v{background:var(--brand);color:var(--brand-ink);border-radius:6px;padding:3px 7px;font-size:12px;font-weight:800;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap;transform:translate(-50%,-100%)}
.mk-me{width:18px;height:18px;border-radius:50%;background:#1857C4;border:3px solid #fff;box-shadow:0 0 0 3px rgba(24,87,196,.3)}
.mk-stand{background:var(--ok);color:#fff;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:800;white-space:nowrap;transform:translate(-50%,-100%)}
.handoff{max-width:100%;border-radius:10px;margin:.7rem 0 0;border:1px solid var(--line)}
.idle{text-align:center;color:var(--mute);padding:2rem 1rem}
.idle strong{display:block;color:var(--ink);font-size:1.25rem;margin-bottom:.4rem;font-family:var(--font)}
.hist{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.hist .plate{font-size:1rem}.hist .plate b{padding:.3rem .45rem}
.tag{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;border:1.5px solid currentColor}
.tag.red{color:var(--danger)}.tag.amber{color:var(--warn)}.tag.olive{color:var(--ok)}.tag.mute{color:var(--mute)}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:9;padding:.75rem 1rem calc(.75rem + var(--safe-b));background:rgba(246,246,244,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line)}
.dock>div{max-width:560px;margin:0 auto}
.abtn{display:block;text-align:center;text-decoration:none}
.link{all:unset;color:var(--brand);text-decoration:underline;cursor:pointer;font-weight:700}
.auth{padding:calc(2.2rem + var(--safe-t)) 1.3rem 2rem}
.auth .brand-logo{height:32px;margin-bottom:1rem}
.auth h1{font-size:1.7rem}
.auth p.lead{color:var(--mute)}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;margin:1rem 0}
.seg button{flex:1;border:0;background:#fff;padding:.6rem;font:600 .9rem var(--font);cursor:pointer}
.seg button.active{background:var(--brand);color:var(--brand-ink)}