*{box-sizing:border-box}[hidden]{display:none!important}
:root{--bg:#eef1f6;--card:#ffffff;--ink:#0b1220;--muted:#6b7280;--line:#e5e9f0;--accent:#0b1220;--amber:#f59e0b;--danger:#dc2626;--green-bg:#ecfdf5;--green-line:#6ee7b7;--r:20px}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom)}
.appbar{position:sticky;top:0;z-index:10;background:rgba(11,18,32,.92);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:calc(14px + env(safe-area-inset-top)) 16px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.appbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:680px;margin:0 auto}
.appbar-title{display:flex;align-items:center;gap:12px}
.appbar-actions{display:flex;align-items:center;gap:12px}
.appbar-emoji{font-size:2rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.appbar h1{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.sub{margin:2px 0 0;opacity:.65;font-size:.82rem}
.offline-pill{font-size:.75rem;font-weight:700;background:#451a03;color:#fbbf24;border:1px solid #b45309;border-radius:999px;padding:5px 12px;white-space:nowrap}
main{max-width:680px;margin:0 auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border-radius:var(--r);box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.18);padding:18px;border:1px solid var(--line)}
.eyebrow{margin:0 0 2px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h2{margin:0 0 14px;font-size:1.35rem;letter-spacing:-.02em}
form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:700}
.field span{font-size:.85rem}
input{padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;font-size:1.02rem;width:100%;background:#f8fafc;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,18,32,.12);background:#fff}
button{padding:14px;border:0;border-radius:16px;font-size:1.02rem;font-weight:700;cursor:pointer;transition:transform .06s,filter .15s}
button:active{transform:scale(.97)}
button:disabled{opacity:.6}
.btn-primary,.btn-danger,.btn-push{width:100%}
#register-btn,.btn-primary{background:var(--accent);color:#fff}
.btn-push{background:#fef3c7;color:#92400e;border:1.5px solid #fcd34d}
.banner{background:var(--green-bg);border:1.5px solid var(--green-line);display:flex;flex-direction:column;gap:12px}
.banner-row{display:flex;align-items:center;gap:10px;font-size:1.02rem}
.car-dot{width:10px;height:10px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.2);flex:none}
.muted{color:var(--muted);font-weight:400}
#leave-btn,.btn-danger{background:var(--danger);color:#fff}
.search-wrap{position:sticky;top:0;background:var(--card);padding:2px 0 10px;z-index:1}
#search{margin:0;background:#eef1f6;border-color:transparent}
.offline-note{font-size:.82rem;font-weight:600;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:12px;padding:8px 12px;margin-bottom:10px}
#directory{display:flex;flex-direction:column;gap:10px}
.car-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--card)}
.car-card:active{filter:brightness(.97)}
.plate{font-weight:800;font-size:1.12rem;letter-spacing:.01em}
.owner{color:var(--muted);margin:4px 0 12px;font-size:.92rem}
.actions{display:flex;gap:8px}
.actions .copy{flex:1.2;background:#eef1f6;color:var(--ink)}
.actions .push{flex:1;background:var(--amber);color:#231603}
.empty{color:var(--muted);text-align:center;padding:18px 0}
.preview{color:var(--muted);font-weight:400;min-height:1.2em;font-size:.82rem}
.foot{text-align:center;color:var(--muted);font-size:.75rem;padding:14px 0 calc(20px + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.tabbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:0;font-size:1.25rem;color:var(--muted);font-weight:700;padding:6px;position:relative}
.tabbtn>.tab-icon{font-size:1.25rem;line-height:1}
.tabbtn>span:not(.tab-icon):not(.badge){font-size:.68rem}
.tabbtn.active{color:var(--ink)}
.tabbtn.active::before{content:"";position:absolute;top:-9px;width:36px;height:3px;border-radius:2px;background:var(--amber)}
.badge{position:absolute;top:2px;right:calc(50% - 26px);min-width:19px;height:19px;border-radius:10px;background:#dc2626;color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
main{padding-bottom:86px}
.ptr{text-align:center;font-size:.82rem;font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;margin:0 auto;max-width:240px;transition:transform .1s}
.alert-item{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.alert-item .when{font-weight:800}
.alert-item .meta{color:var(--muted);font-size:.82rem}
@media (prefers-color-scheme:dark){
:root{--bg:#0b1220;--card:#131c2e;--ink:#f1f5f9;--muted:#94a3b8;--line:#24314b}
.tabbar{background:rgba(11,18,32,.9)}
input{background:#0b1220;color:var(--ink)}
input:focus{background:#0b1220}
.actions .copy{background:#24314b;color:#f1f5f9}
.car-card{background:#131c2e}.car-card:active{background:#182342}
.search-wrap{background:var(--card)}
#search{background:#0b1220}
.banner{background:#052e22;border-color:#065f46;color:#d1fae5}
.banner .muted,.banner .preview{color:#6ee7b7}
.btn-push{background:#451a03;color:#fbbf24;border-color:#b45309}
.offline-note{background:#451a03;color:#fbbf24;border-color:#b45309}
}
.onboarding{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,7,18,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:16px}
.onboarding-card{width:100%;max-width:480px;background:#ffffff;border:1px solid #e5e9f0;border-radius:24px;padding:24px;text-align:center;color:#0b1220;box-shadow:0 24px 64px -16px rgba(0,0,0,.5)}
.onboarding-emoji{font-size:3.4rem;line-height:1}
.onboarding-card h2{margin:12px 0 4px;font-size:1.4rem;letter-spacing:-.02em;color:#0b1220}
.onboarding-card p{color:#6b7280;font-size:.92rem;margin:0 0 16px}
.steps{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;text-align:left}
.step{display:flex;gap:12px;align-items:center;background:#f8fafc;border:1px solid #e5e9f0;border-radius:14px;padding:12px 14px;font-size:.92rem;font-weight:600;color:#0b1220}
.step-num{flex:none;width:26px;height:26px;border-radius:50%;background:#0b1220;color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.onboarding-card .btn-primary{margin-bottom:8px;background:#0b1220;color:#fff}
.btn-ghost{background:transparent;color:#6b7280;font-weight:600}
.linkbtn{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font-size:inherit;font-weight:600;cursor:pointer}
.linkbtn:disabled{opacity:.6}
@media (prefers-color-scheme:dark){
.onboarding-card{background:#131c2e;border-color:#24314b;color:#f1f5f9}
.onboarding-card h2{color:#f1f5f9}
.onboarding-card p{color:#94a3b8}
.step{background:#0b1220;border-color:#24314b;color:#f1f5f9}
.step-num{background:#f1f5f9;color:#0b1220}
.onboarding-card .btn-primary{background:#f1f5f9;color:#0b1220}
.btn-ghost{color:#94a3b8}
}
