:root{--bg:#0b0d10;--tile:#161b22;--tile2:#1e252e;--line:#2a323d;--tx:#e8edf2;--dim:#8a96a3;--acc:#2ed3b7;--warn:#fbbf24;--bad:#f87171;
--c-fuel:#fb923c;--c-repair:#4c9dff;--c-wash:#38bdf8;--c-fine:#f87171;--c-other:#a78bfa}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.3 system-ui,Roboto,sans-serif;overscroll-behavior:none}
body{padding-top:env(safe-area-inset-top)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.screen{min-height:100vh;display:flex;flex-direction:column;padding-bottom:24px}
.ic{display:block}

.hdr{display:flex;align-items:center;gap:4px;padding:8px 8px;position:sticky;top:0;background:var(--bg);z-index:5}
.htitle{flex:1;font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.hbtn{width:48px;height:48px;border-radius:24px;display:flex;align-items:center;justify-content:center;flex:none}
.hbtn:active{background:var(--tile2)}
.hbtn.ghost{pointer-events:none;width:8px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 16px}
.tile{background:var(--tile);border-radius:20px;padding:18px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:140px;justify-content:center}
.tile:active{background:var(--tile2)}
.tile.add{color:var(--dim);border:2px dashed var(--line);background:none}
.tname{font-size:18px;font-weight:600;text-align:center;overflow-wrap:anywhere}
.caricon{display:flex;flex:none}
.carsvg{display:block;height:auto}

.carhdr{display:flex;align-items:center;padding:10px 8px 6px 16px;gap:8px;position:sticky;top:0;background:var(--bg);z-index:5}
.carhdrmain{flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.carhdrtext{display:flex;flex-direction:column;min-width:0}
.carname{font-size:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carsub{color:var(--dim);font-size:15px}
.carto{font-size:15px;color:var(--dim)}
.carto.lvl1{color:var(--warn)}
.carto.lvl2{color:var(--bad)}

.addrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px 16px}
.addbtn{background:var(--tile);border-radius:16px;padding:12px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.addbtn:active{background:var(--tile2)}
.addic{display:flex}
.ev-fuel .addic,.rowic.ev-fuel,.chip.ev-fuel.on{color:var(--c-fuel)}
.ev-repair .addic,.rowic.ev-repair,.chip.ev-repair.on{color:var(--c-repair)}
.ev-wash .addic,.rowic.ev-wash,.chip.ev-wash.on{color:var(--c-wash)}
.ev-fine .addic,.rowic.ev-fine,.chip.ev-fine.on{color:var(--c-fine)}
.ev-other .addic,.rowic.ev-other,.chip.ev-other.on{color:var(--c-other)}

.chips{display:flex;gap:8px;padding:6px 16px 2px}
.chip{flex:1;height:34px;border-radius:20px;background:var(--tile);display:flex;align-items:center;justify-content:center;color:var(--dim);border:1.5px solid transparent}
.chip.on{border-color:currentColor;background:var(--tile2)}

.feed{display:flex;flex-direction:column;padding:6px 16px;gap:8px}
.month{display:flex;justify-content:space-between;color:var(--dim);font-size:14px;padding:10px 4px 0;text-transform:uppercase;letter-spacing:.04em}
.row{display:flex;align-items:center;gap:12px;background:var(--tile);border-radius:16px;padding:12px 14px;min-height:64px;width:100%;transition:transform .05s}
.row:active{background:var(--tile2)}
.rowic{width:40px;height:40px;border-radius:20px;background:var(--tile2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--dim)}
.rowmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rowtitle{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowsub{color:var(--dim);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowtitle.wrap,.rowsub.wrap{white-space:normal;overflow-wrap:anywhere}
.rowsub .badge{margin:0 6px 0 0}
.rowright{display:flex;flex-direction:column;align-items:flex-end;flex:none;gap:2px}
.rowright.dim{color:var(--dim)}
.rowsum{font-weight:600;white-space:nowrap}
.badge{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:8px;font-size:12px;font-weight:600;background:var(--tile2);color:var(--acc);vertical-align:2px}
.badge.warn{color:var(--warn)}

.form{display:flex;flex-direction:column;gap:14px;padding:8px 16px 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.flabel{color:var(--dim);font-size:14px;padding-left:4px}
.inp{width:100%;height:52px;border-radius:14px;border:1.5px solid var(--line);background:var(--tile);color:var(--tx);font:inherit;padding:0 14px;outline:none;min-width:0;color-scheme:dark}
.inp:focus{border-color:var(--acc)}
.inp.pick{display:flex;align-items:center;justify-content:space-between}
.inp.pick.empty{color:var(--dim)}
.pickic{color:var(--dim);display:flex}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;gap:5px;flex-wrap:wrap}
.seg button{flex:1;min-width:0;height:48px;border-radius:14px;background:var(--tile);border:1.5px solid var(--line);text-align:center;white-space:nowrap;padding:0 8px;overflow:hidden;text-overflow:ellipsis}
.seg button.withic{height:auto;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 1px 8px;color:var(--dim)}
.seg button.withic .segic{display:flex}
.seg button.withic .seglabel{font-size:10.5px;line-height:1.1;white-space:nowrap;color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.seg button.withic.on{color:var(--acc)}
.seg button.withic.on .seglabel{color:var(--acc);font-weight:600}
.seg button.on{border-color:var(--acc);color:var(--acc);background:var(--tile2);font-weight:600}
.toggle{display:flex;align-items:center;gap:12px;height:52px;padding:0 4px}
.tbox{width:28px;height:28px;border-radius:9px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent;flex:none}
.toggle.on .tbox{background:var(--acc);border-color:var(--acc);color:#04120f}

.suggwrap{position:relative;flex:1;min-width:0}
.sugg{position:absolute;left:0;right:0;top:56px;background:var(--tile2);border:1.5px solid var(--line);border-radius:14px;z-index:10;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.suggitem{display:block;width:100%;padding:13px 14px;border-bottom:1px solid var(--line)}
.suggitem:last-child{border-bottom:0}
.suggitem:active{background:var(--line)}

.partadd{display:flex;gap:8px}
.sqbtn{width:52px;height:52px;border-radius:14px;background:var(--tile2);display:flex;align-items:center;justify-content:center;flex:none;color:var(--acc)}
.plist{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.prow{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--tile);border-radius:12px;padding:6px 6px 6px 14px;min-height:46px}
.prow span{overflow-wrap:anywhere}
.pdel{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--dim);flex:none}

.icongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.iconopt{--tile:#161b22;background:var(--tile);border-radius:14px;border:1.5px solid transparent;display:flex;justify-content:center;padding:10px 4px}
.iconopt.on{border-color:var(--acc)}
.colorgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.coloropt{height:40px;border-radius:12px;border:3px solid transparent}
.coloropt.on{border-color:#fff}

.savebar{position:sticky;bottom:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%);margin-top:auto}
.btn{height:54px;border-radius:16px;padding:0 22px;font-weight:600;text-align:center}
.btn.primary{width:100%;background:var(--acc);color:#04120f}
.btn.primary:active{filter:brightness(.85)}
.btn.flat{color:var(--dim)}
.btn.danger{background:var(--bad);color:#1a0505}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:50;padding:24px}
.dlg{background:var(--tile);border-radius:20px;padding:22px 18px 14px;width:100%;max-width:360px}
.dlgtext{font-size:18px;padding:0 4px 18px}
.dlgbtns{display:flex;justify-content:flex-end;gap:8px}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 72px);bottom:auto;transform:translateX(-50%) translateY(-16px);background:#fff;color:#111;padding:12px 18px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:60;max-width:86vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}
.ver{color:var(--dim);font-size:13px;text-align:center;padding:24px}

.withbtn{display:flex;gap:8px}
.withbtn .inp{flex:1}
.mapscreen{position:fixed;inset:0;padding:0;min-height:0;z-index:20}
.mapbox{position:absolute;inset:0;background:#1b2027}
.mappin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:500;pointer-events:none;transition:transform .15s;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.mappin.moving{transform:translate(-50%,-125%)}
.maptop{position:absolute;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:600;display:flex;gap:10px;align-items:flex-start}
.mapplate{flex:1;min-height:48px;background:var(--bg);border-radius:16px;padding:13px 16px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.mapplate:empty{display:none}
.mapfab{width:48px;height:48px;border-radius:24px;background:var(--bg);color:var(--tx);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.mapfab.busy{color:var(--acc)}
.mapbottom{position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:600;display:flex;flex-direction:column;gap:12px}
.mapfabrow{display:flex;justify-content:flex-end}
.mapbottom .btn.primary{box-shadow:0 6px 20px rgba(0,0,0,.45)}
.inp.area{height:auto;min-height:52px;padding:13px 14px;resize:none;line-height:1.25;display:block}
.withbtn{align-items:flex-start}
.note{color:var(--dim);font-size:14px;padding:0 4px}
.note.bad,.hbtn.bad{color:var(--bad)}
.btn.second{background:var(--tile2);color:var(--tx);padding:0 8px;font-size:16px}
.btn:disabled{opacity:.5}

.rowsub.acc{color:var(--acc)}
.statbody{display:flex;flex-direction:column;gap:12px;padding:6px 16px}
.carpick{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.carpick::-webkit-scrollbar{display:none}
.carchip{flex:none;display:flex;align-items:center;gap:8px;background:var(--tile);border:1.5px solid transparent;border-radius:14px;padding:8px 12px 8px 8px;white-space:nowrap}
.carchip.on{border-color:var(--acc);background:var(--tile2)}
.carchip.arch{opacity:.6}
.pager{display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:18px}
.hbtn.off{opacity:.25}
.chips.flat{padding:0}
.total{display:flex;align-items:baseline;justify-content:space-between;padding:6px 4px 0}
.totalsum{font-size:30px;font-weight:700}
.statrow{display:flex;align-items:center;gap:12px;background:var(--tile);border-radius:16px;padding:12px 14px;width:100%}
.statrow.slim{padding:10px 14px}
.statrow:active{background:var(--tile2)}
.statmain{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.statline{display:flex;justify-content:space-between;gap:8px}
.bar{height:6px;border-radius:3px;background:var(--tile2);overflow:hidden;display:block}
.barfill{display:block;height:100%;border-radius:3px;background:var(--acc)}
.barfill.ev-fuel{background:var(--c-fuel)}.barfill.ev-repair{background:var(--c-repair)}.barfill.ev-wash{background:var(--c-wash)}.barfill.ev-fine{background:var(--c-fine)}.barfill.ev-other{background:var(--c-other)}
.statbody>*{min-width:0;max-width:100%}
.ocrrow{display:flex;align-items:center;gap:10px}
.ocrrow .tbox{width:30px;height:30px;flex:none}
.ocrrow.on .tbox{background:var(--acc);border-color:var(--acc);color:#04120f}
.ocrrow .inp{flex:1;height:46px;opacity:.5}
.ocrrow.on .inp{opacity:1}
.sqbtn.busy{color:var(--dim)}
.sqbtn:disabled{opacity:.5}