:root{
  --bg:#f3f1ea;--card:#fff;--ink:#16221a;--mut:#5d6b60;--line:#dcd8cc;
  --acc:#2f7a3a;--acc2:#e3f0de;--tgt:#d9661f;--me:#1f64c8;--warn:#b7791f;--bad:#b3261e;
  --top:#1c3a26;--r:14px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121714;--card:#1b221d;--ink:#e8efe9;--mut:#9aa89d;--line:#2d3830;--acc:#6cc27a;--acc2:#20352554;--tgt:#f08a45;--me:#5b9cff}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
#statusbar-shield{position:fixed;inset:0 0 auto 0;height:var(--safe-t);background:var(--top);z-index:50}
button,select,input{font:inherit;color:inherit}
i[data-i]{display:inline-flex;width:20px;height:20px;flex:none}
i[data-i] svg{width:100%;height:100%}

/* nagłówek */
.top{background:var(--top);color:#eef5ef;padding:calc(var(--safe-t) + 8px) 12px 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brand{font-weight:700;font-size:15px;white-space:nowrap}
.brand span{font-weight:400;opacity:.7}
.chips{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:99px;padding:5px 10px 5px 8px;background:#ffffff1f;color:#eef5ef;font-size:13px;font-weight:600;white-space:nowrap}
.chip i[data-i]{width:15px;height:15px}
.chip.ok{background:#3f9a4d}.chip.mid{background:#b7791f}.chip.bad{background:#b3261e}

main{flex:1;position:relative;min-height:0}
.view{position:absolute;inset:0;display:none;overflow:auto;-webkit-overflow-scrolling:touch}
.view.on{display:block}
#v-map.on{display:flex;flex-direction:column;overflow:hidden}
.pad{padding:14px 16px 24px;max-width:720px;margin:0 auto}
h2{font-size:18px;margin:22px 0 8px}
h2:first-child{margin-top:4px}
.lead{color:var(--mut);margin:0 0 12px;font-size:15px}

/* mapa */
.mapwrap{position:relative;flex:1;min-height:0;background:#e6e3d8;touch-action:none;overflow:hidden}
@media (prefers-color-scheme:dark){.mapwrap{background:#0d110e}}
#map{width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.north{position:absolute;top:10px;left:10px;width:44px;height:44px;border-radius:50%;background:var(--card);box-shadow:0 1px 4px #0003;display:grid;place-items:center}
.north svg{width:30px;height:30px;fill:var(--bad);transition:transform .3s}
.north b{position:absolute;font-size:10px;bottom:1px;color:var(--mut)}
.mapbtns{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:8px}
.mapbtns button{width:44px;height:44px;border-radius:12px;border:0;background:var(--card);box-shadow:0 1px 4px #0003;display:grid;place-items:center}
.mapbtns button.on{background:var(--me);color:#fff}
.simhint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#000b;color:#fff;font-size:13px;padding:6px 10px;border-radius:8px;display:none;white-space:nowrap}
body.sim .simhint{display:block}

/* karta nawigacji */
.navcard{background:var(--card);border-top:1px solid var(--line);padding:10px 14px 12px;box-shadow:0 -4px 14px #0002}
.navcard[hidden]{display:none}
.navhead{display:flex;align-items:center;gap:10px}
.navhead img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--line)}
.navtitle{flex:1;min-width:0;display:flex;flex-direction:column}
.navtitle b{font-size:20px;line-height:1.1}
.navtitle span{color:var(--mut);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbody{display:flex;align-items:center;gap:14px;margin:8px 0 4px}
.arrowbox{position:relative;width:118px;height:118px;flex:none}
#arrow{width:100%;height:100%}
#arrow .ring{fill:none;stroke:var(--line);stroke-width:3}
#arrow .arr{fill:var(--tgt);transition:transform .25s linear}
.navcard.here #arrow .arr{fill:var(--acc)}
.navcard.here #arrow .ring{stroke:var(--acc);stroke-width:5}
.arrowmode{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:11px;color:var(--mut)}
.navnums{flex:1;min-width:0}
.dist{display:flex;align-items:baseline;gap:4px}
.dist b{font-size:48px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.dist span{font-size:20px;color:var(--mut)}
.plan{font-size:15px;margin-top:4px;font-variant-numeric:tabular-nums}
.accnote{font-size:13px;color:var(--mut);margin-top:3px}
.accnote.here{color:var(--acc);font-weight:700}
.planb{font-size:13px;color:var(--mut);background:var(--bg);border-radius:10px;padding:7px 10px;margin:6px 0 10px}
.planb b{color:var(--ink)}
.navact{display:flex;gap:8px}
.navact button{flex:1}

/* przyciski */
.pri,.sec,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;min-height:46px;padding:0 14px;font-weight:650;border:0;cursor:pointer}
.pri{background:var(--acc);color:#fff}
.pri:disabled{opacity:.45}
.sec{background:var(--acc2);color:var(--ink);border:1px solid var(--line)}
.ghost{background:transparent;color:var(--ink)}
.ghost.icon{min-height:40px;width:40px;padding:0}
.danger{color:var(--bad)}
.btnlike{cursor:pointer}
.row{display:flex;flex-wrap:wrap;align-items:center}
.gap{gap:8px}
.end{justify-content:flex-end}

/* lista drzew */
.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:8px 4px;font-size:14px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--acc);color:#fff}
.sortrow{display:flex;justify-content:space-between;align-items:center;margin:10px 2px;color:var(--mut);font-size:14px}
.sortrow label{display:flex;gap:6px;align-items:center}
.trees{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.trees li{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px 8px 8px;cursor:pointer}
.trees img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:var(--line)}
.trees .tid{font-weight:800;font-size:18px;min-width:34px}
.trees .tx{flex:1;min-width:0}
.trees .tx b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trees .tx span{color:var(--mut);font-size:13px}
.trees .td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.badge.done{background:var(--acc);color:#fff}
.badge.e2{background:#f3e3c6;color:#7a4b06}
.badge.e3{background:#e7dcf3;color:#4d2f7a}
@media (prefers-color-scheme:dark){.badge.e2{background:#4a3715;color:#f3d49a}.badge.e3{background:#382a4d;color:#d8c4f5}}

/* kalibracja */
.calsum{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;font-size:15px}
.calsum .big{font-size:20px;font-weight:800}
.calsum table{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px;font-variant-numeric:tabular-nums}
.calsum td{padding:3px 0;border-top:1px solid var(--line)}
.calsum td:last-child{text-align:right}
.tog{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.tog input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--acc);flex:none}
.tog em{font-style:normal;color:var(--mut);font-size:13px;display:block}
.corners{list-style:none;padding:0;margin:12px 0 16px;display:flex;flex-direction:column;gap:8px}
.corners li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;align-items:center;gap:10px}
.corners .cid{font-weight:800;font-size:18px;min-width:40px}
.corners .cx{flex:1;min-width:0;font-size:13px;color:var(--mut)}
.corners .cx b{color:var(--ink);font-size:14px}
.corners .res.ok{color:var(--acc)}.corners .res.mid{color:var(--warn)}.corners .res.bad{color:var(--bad)}
.corners input[type=checkbox]{width:22px;height:22px;accent-color:var(--acc)}
.corners button{min-height:40px;padding:0 12px}

/* ustawienia */
.set{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px}
.set>label:not(.tog){display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.set select,.set input[type=number]{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.set input[type=number]{width:74px;text-align:right}
.inl{display:flex;align-items:center;gap:4px}
.info{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:4px 14px;font-size:15px}
.foot{color:var(--mut);font-size:12px;margin-top:22px}

/* dolna nawigacja */
.tabs{display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tabs button{flex:1;border:0;background:none;padding:8px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--mut)}
.tabs button.on{color:var(--acc)}
.tabs i[data-i]{width:23px;height:23px}

/* arkusz */
.sheet{position:fixed;inset:0;background:#0007;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheetbox{background:var(--card);width:100%;max-width:560px;border-radius:18px 18px 0 0;padding:18px 16px calc(16px + var(--safe-b))}
.sheetbox h3{margin:0 0 4px;font-size:20px}
.prog{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin:10px 0 12px}
.prog div{height:100%;width:0;background:var(--acc);transition:width .9s linear}
.avggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.avggrid div{background:var(--bg);border-radius:10px;padding:7px 9px}
.avggrid span{display:block;font-size:12px;color:var(--mut)}
.avggrid b{font-size:19px;font-variant-numeric:tabular-nums}
.verdict{font-weight:650;min-height:1.4em;margin:12px 0}
.verdict.ok{color:var(--acc)}.verdict.mid{color:var(--warn)}.verdict.bad{color:var(--bad)}

.toast{position:fixed;left:50%;bottom:calc(76px + var(--safe-b));transform:translateX(-50%);background:#16221aee;color:#fff;padding:10px 14px;border-radius:12px;font-size:14px;z-index:70;max-width:90vw;text-align:center}
.toast[hidden]{display:none}

/* svg mapy */
.m-fence{fill:none;stroke:#7b6f57;stroke-width:1.5;stroke-dasharray:6 4}
.m-house{stroke:#b5563a;stroke-width:3;stroke-linecap:round}
.m-park{fill:#cfe5bf88;stroke:#d99a2b;stroke-width:2;stroke-dasharray:5 3}
.m-glade{fill:#b8dc9a;stroke:#8fbf6c;stroke-width:1}
.m-path{fill:none;stroke:#efe2c2;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.m-crown{fill:#4e8f4a26;stroke:#4e8f4a66;stroke-width:1}
.m-tree{fill:#fff;stroke:#2f5d32;stroke-width:2}
.m-tree.done{fill:var(--acc);stroke:#fff}
.m-tree.tgt{fill:var(--tgt);stroke:#fff}
.m-lbl{font-weight:700;fill:#1d2a1f;paint-order:stroke;stroke:#fffc;stroke-linejoin:round}
.m-corner{fill:#d99a2b;stroke:#fff;stroke-width:1.5}
.m-corner.meas{fill:var(--me)}
.m-clbl{font-weight:700;fill:#8a5a06;paint-order:stroke;stroke:#fffd;stroke-linejoin:round}
.m-planted{fill:var(--acc);stroke:#fff;stroke-width:1.5}
.m-dev{stroke:var(--acc);stroke-width:1.5}
.m-acc{fill:#1f64c822;stroke:#1f64c8aa;stroke-width:1.2}
.m-me{fill:var(--me);stroke:#fff;stroke-width:3}
.m-cone{fill:#1f64c855}
.m-line{stroke:var(--tgt);stroke-width:2.5;stroke-dasharray:6 5}
.m-ring{fill:none;stroke:var(--tgt);stroke-width:2}

/* obiekty */
.wide{width:100%;margin:4px 0 12px}
.catchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.catchip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 10px;font-size:13px;font-weight:600}
.catchip input{width:16px;height:16px;margin:0;accent-color:var(--acc)}
.catchip i,.objs .sw{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.objs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.objs li{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:pointer}
.objs .sw{width:14px;height:36px;border-radius:5px}
.objs .tx{flex:1;min-width:0}.objs .tx b{display:block}.objs .tx span{color:var(--mut);font-size:13px}
.objs .td{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.back{padding-left:4px;margin:-4px 0 6px}
.form{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut);font-weight:600}
.form input,.form select,.form textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:16px;color:var(--ink);font-weight:400}
.seg.small button{padding:7px 4px}
.actgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}
.actgrid .pri{grid-column:1/-1}
.editbar{position:absolute;left:10px;right:10px;bottom:10px;background:var(--card);border-radius:14px;box-shadow:0 2px 10px #0004;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px}
.editbar[hidden]{display:none}
.editbar div{flex:1;font-size:14px;font-weight:650;min-width:0}
.editbar button{min-height:40px}
body.editing .simhint{display:none}
.planlink{display:flex;align-items:center;gap:12px;background:var(--top);color:#eef5ef;text-decoration:none;border-radius:var(--r);padding:14px 16px;margin:2px 0 6px}
.planlink span{flex:1}.planlink b{display:block;font-size:16px}.planlink em{font-style:normal;font-size:13px;opacity:.8}
.tabs button span{white-space:nowrap}
.install{display:flex;align-items:flex-start;gap:8px;background:#fff6dc;color:#3d2e05;padding:10px 8px 10px 14px;font-size:14px;line-height:1.35;border-bottom:1px solid #e9d9a6}
.install b{font-weight:700}
.install>div>b:first-child{display:block;font-size:15px;margin-bottom:2px}
.install .shr{display:inline-flex;vertical-align:-4px}
.install .shr i[data-i]{width:18px;height:18px}
.install .ghost{color:#3d2e05}