:root{--bg:#f3f2ee;--panel:#fbfaf7;--line:#dfddd5;--line2:#eae8e1;--fg:#14151a;--mut:#62656d;--faint:#8f9198;--acc:#2f5bea;--acc-bg:#e6ebfc;--up:#0f8a5f;--up-bg:#dff3ea;--down:#c8443a;--down-bg:#f9e6e3;--warn:#a86f12;--gold:#a67c1c;--ink:#14161b;--r:14px;--sh:0 1px 0 rgba(20,21,26,.04),0 8px 24px -18px rgba(20,21,26,.25);--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
@media(prefers-color-scheme:dark){:root{--bg:#0c0d10;--panel:#14161a;--line:#262930;--line2:#1c1f25;--fg:#ecebe6;--mut:#9b9ea6;--faint:#6b6f78;--acc:#7f9cff;--acc-bg:#18213f;--up:#3fcf95;--up-bg:#10271e;--down:#f0776d;--down-bg:#2e1a18;--warn:#e0a74a;--gold:#e0b84f;--ink:#191c22;--sh:none;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.5 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}button{cursor:pointer}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em}h1{font-size:26px}h2{font-size:15px}h3{font-size:13px}
.mut{color:var(--mut)}.faint{color:var(--faint)}.sm{font-size:12px}.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.93em}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:10px}.grow{flex:1;min-width:0}
/* layout */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;background:var(--bg)}
.brand{font:700 13px var(--mono);letter-spacing:.22em;padding:6px 10px 16px;display:flex;align-items:center;gap:8px}
.brand i{width:16px;height:16px;border-radius:5px;background:var(--fg);display:inline-block;position:relative}.brand i:after{content:'';position:absolute;left:4px;top:4px;width:8px;height:8px;border-top:2px solid var(--bg);border-right:2px solid var(--bg);transform:rotate(-45deg) translate(-1px,2px)}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:0;background:none;color:var(--mut);font-weight:500;text-align:left;width:100%}
.nav:hover{background:var(--line2);color:var(--fg)}.nav.on{background:var(--panel);color:var(--fg);box-shadow:var(--sh);outline:1px solid var(--line)}
.nav svg{width:16px;height:16px;flex:none}
.side .foot{margin-top:auto;padding:10px;font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:6px}
.main{padding:28px max(20px,env(safe-area-inset-right)) 60px max(20px,env(safe-area-inset-left));max-width:1080px;width:100%;margin:0 auto}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.grid{display:grid;gap:16px}.g2{grid-template-columns:minmax(0,340px) minmax(0,1fr)}.g2e{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh);min-width:0}
.card>h2{margin-bottom:12px}
.label{font:500 10.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:500;background:var(--line2);color:var(--mut);white-space:nowrap}
.pill.acc{background:var(--acc-bg);color:var(--acc)}.pill.up{background:var(--up-bg);color:var(--up)}.pill.down{background:var(--down-bg);color:var(--down)}.pill.gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 14px;font-weight:600;transition:background .12s,border-color .12s}
.btn:hover{background:var(--line2)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--fg);border-color:var(--fg);color:var(--bg)}.btn.pri:hover{background:var(--acc);border-color:var(--acc);color:#fff}

.btn.big{padding:11px 18px;font-size:15px;font-weight:600}.btn.block{width:100%}.btn.ghost{border-color:transparent;background:none;color:var(--mut)}.btn.danger{color:var(--down)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* driver card */
.dcard{padding:0;overflow:hidden;position:relative;background:var(--ink);border-color:var(--ink);--fg:#f1f0eb;--mut:#a4a7b0;--faint:#7c8089;--line2:rgba(255,255,255,.11);--up-bg:rgba(63,207,149,.16);--up:#4fd8a0;--down-bg:rgba(240,119,109,.16);--down:#f58a80;color:var(--fg);
 background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px}
.dcard:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dc,var(--acc))}
.dcard .pill{background:rgba(255,255,255,.1);color:#d9d9d4}.dcard .pill.acc{background:var(--dc,var(--acc));color:#fff}
.dcard .tag{position:absolute;right:16px;bottom:9px;font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--faint)}
.dtop{padding:20px 20px 16px;display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--line2)}
.ovr{font:700 58px/1 var(--mono);letter-spacing:-.06em}
.ovr.flash{animation:flash 1.2s ease}
@keyframes flash{0%{color:var(--acc);transform:scale(1.12)}100%{transform:scale(1)}}
.avatar{flex:none;display:grid;place-items:center}.av{display:block;border-radius:50%;flex:none}
.dname{font-size:17px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.stats{padding:16px 20px 30px;display:flex;flex-direction:column;gap:11px}
.stat{display:grid;grid-template-columns:118px 1fr 30px 44px;align-items:center;gap:10px}
.stat .v{font:600 13px var(--mono);text-align:right}
.bar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden}.bar>i{display:block;height:100%;border-radius:99px;background:var(--fg);opacity:.8;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar.acc>i{background:var(--acc);opacity:1}.bar.up>i{background:var(--up);opacity:1}.bar.warn>i{background:var(--warn);opacity:1}.bar.down>i{background:var(--down);opacity:1}
.dl{font-size:11px;font-weight:600;border-radius:6px;padding:1px 5px;justify-self:start;animation:pop .5s ease}
.dl.up{color:var(--up);background:var(--up-bg)}.dl.down{color:var(--down);background:var(--down-bg)}
@keyframes pop{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* misc */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}.kpi b{display:block;font:600 21px/1.35 var(--mono);letter-spacing:-.03em}
.seg{display:flex;background:var(--line2);border-radius:9px;padding:3px;gap:2px}.seg button{flex:1;border:0;background:none;border-radius:7px;padding:7px 8px;font-weight:500;color:var(--mut)}
.seg button.on{background:var(--panel);color:var(--fg);box-shadow:var(--sh)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:500}
.chip:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}.chip.on{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}.chip:disabled{opacity:.5;cursor:default}
table{width:100%;border-collapse:collapse}th{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}tr:last-child td{border-bottom:0}td.r,th.r{text-align:right}
tr.me td{background:var(--acc-bg)}tr.me td:first-child{border-radius:8px 0 0 8px}tr.me td:last-child{border-radius:0 8px 8px 0}
tr.click{cursor:pointer}tr.click:hover td{background:var(--line2)}
.tw{overflow-x:auto}
.offer{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.offer:hover{border-color:var(--acc)}
.log{display:flex;flex-direction:column;gap:8px;font-size:13px}.log div{display:flex;gap:10px}.log span{color:var(--faint);flex:none;width:34px;font-variant-numeric:tabular-nums}
.banner{border:1px solid var(--line);border-left:3px solid var(--acc);background:var(--panel);border-radius:10px;padding:12px 14px}
.banner.gold{border-left-color:var(--gold)}
/* auth */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.authbox{width:100%;max-width:380px}
.field{display:flex;flex-direction:column;gap:6px}.field input{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:10px 12px;width:100%}
.err{color:var(--down);font-size:13px;min-height:18px}
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.arch button{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px}.arch button.on{border-color:var(--acc);background:var(--acc-bg)}
.sw{width:34px;height:34px;border-radius:8px;border:2px solid transparent}.sw.on{border-color:var(--fg)}
/* modal */
#modal{position:fixed;inset:0;background:rgba(10,11,14,.45);display:grid;place-items:center;padding:16px;z-index:20;overflow:auto}
#modal[hidden],#toast[hidden]{display:none}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:560px;width:100%;padding:22px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;animation:pop .25s ease}
.opt{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px 14px}.opt:hover{border-color:var(--acc);background:var(--acc-bg)}
.opt b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);margin-bottom:2px}
.pos{font:700 46px/1 var(--mono);letter-spacing:-.05em}
#toast{position:fixed;max-width:calc(100vw - 32px);text-align:center;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:99px;font-size:13px;z-index:30}
.tabs{display:none}
@media(max-width:820px){
 .shell{display:block}.side{display:none}
 .main{padding:18px 16px calc(90px + env(safe-area-inset-bottom))}
 .g2,.g2e{grid-template-columns:minmax(0,1fr)}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:10}
 .tabs button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--faint);padding:6px 0;font-weight:500}
 .tabs button.on{color:var(--acc)}.tabs svg{width:20px;height:20px}
 .stat{grid-template-columns:104px 1fr 28px 40px}
 #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
 .blue .carsvg{min-width:0}.blue .c-x{font-size:11px;letter-spacing:.04em}.blue .c-v{font-size:14px}
 .field input,input,select,textarea{font-size:16px}
 .btn,.chip{min-height:40px}.avs button{padding:4px}
 .stat{font-size:13px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ilustraciones */
.blue{background-image:radial-gradient(var(--line) 1px,transparent 1.2px);background-size:14px 14px;border-radius:10px;border:1px solid var(--line2)}
.track{display:block;width:100%;height:auto}
.t-out{fill:none;stroke:var(--fg);stroke-width:5.2;stroke-linejoin:round;stroke-linecap:round}
.t-in{fill:none;stroke:var(--panel);stroke-width:2.6;stroke-linejoin:round}
.t-sf{fill:var(--acc)}.t-s{fill:var(--panel);stroke:var(--fg);stroke-width:1.2}.t-car{fill:var(--acc);stroke:var(--panel);stroke-width:1}
.carsvg{display:block;width:100%;height:auto;min-width:520px;max-width:780px;margin:0 auto}
.c-l{fill:var(--panel);stroke:var(--fg);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.c-t{fill:none;stroke:var(--fg);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.c-w{fill:var(--fg);stroke:var(--fg);stroke-width:1.5}.c-d{fill:var(--acc)}
.c-g{stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 4}
.c-a{fill:none;stroke:var(--acc);stroke-width:.8;stroke-dasharray:2 2.5}
.c-x{font:500 8.5px var(--mono);letter-spacing:.1em;fill:var(--faint)}.c-v{font:600 11px var(--mono);fill:var(--acc)}
.avs{display:flex;gap:10px;flex-wrap:wrap}.avs button{border:2px solid transparent;border-radius:50%;padding:2px;background:none;line-height:0}.avs button.on{border-color:var(--fg)}.avs button:hover{border-color:var(--acc)}
.who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.card>h2,.card h2{letter-spacing:-.01em}
body.busy{cursor:progress}body.busy .btn,body.busy .chip,body.busy .opt{pointer-events:none;opacity:.7}
.racing{display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.rtitle{font:700 24px/1.2 var(--mono);letter-spacing:-.03em;display:flex;align-items:baseline;gap:4px}
.rtitle i{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:blink 1s infinite}.rtitle i:nth-child(2){animation-delay:.18s}.rtitle i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.2}40%{opacity:1}}
.rbar{height:8px;border-radius:99px;background:var(--line2);overflow:hidden}
.rbar b{display:block;height:100%;width:8%;border-radius:99px;background:var(--acc);animation:rfill 6s cubic-bezier(.1,.7,.2,1) forwards;transition:width .2s}
@keyframes rfill{to{width:92%}}