:root{
  --bg:#E4EADF; --grid-minor:rgba(36,62,44,.09); --grid-major:rgba(36,62,44,.22);
  --panel:#FBFCF8; --panel-2:#EFF3EA; --line:#D2DACB; --ink:#1C2A20; --muted:#5D6C60;
  --leaf:#2F6B3F; --leaf-ink:#FFFFFF; --leaf-soft:#DCEBD9;
  --soil:#B99470; --soil-edge:#7B5B3D; --soil-dot:rgba(90,60,35,.25);
  --bed:#6E4D33; --bed-edge:#40291A; --gravel:#D3CDC0; --gravel-dot:rgba(80,70,55,.35);
  --glass:rgba(160,205,225,.45); --glass-edge:#4F8BA5; --water:#5E9FCB; --compost:#5A4030;
  --sel:#E09A12; --warn:#B8431F; --warn-soft:#F8E3DA; --good:#2F6B3F;
  --shadow:0 1px 2px rgba(20,35,25,.08),0 6px 20px rgba(20,35,25,.08);
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121813; --grid-minor:rgba(200,225,200,.06); --grid-major:rgba(200,225,200,.15);
    --panel:#1B231D; --panel-2:#222C25; --line:#334038; --ink:#E3EBE1; --muted:#9CAB9F;
    --leaf:#78BE86; --leaf-ink:#0F1A12; --leaf-soft:#243A2A;
    --soil:#6A5038; --soil-edge:#A0805C; --soil-dot:rgba(0,0,0,.25);
    --bed:#4A3323; --bed-edge:#8A6A4C; --gravel:#57534B; --gravel-dot:rgba(0,0,0,.3);
    --glass:rgba(90,150,175,.35); --glass-edge:#7FB6CF; --water:#3F7FA8; --compost:#3E2C20;
    --sel:#F2B63A; --warn:#F08A62; --warn-soft:#3A2419; --good:#78BE86;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121813; --grid-minor:rgba(200,225,200,.06); --grid-major:rgba(200,225,200,.15);
  --panel:#1B231D; --panel-2:#222C25; --line:#334038; --ink:#E3EBE1; --muted:#9CAB9F;
  --leaf:#78BE86; --leaf-ink:#0F1A12; --leaf-soft:#243A2A;
  --soil:#6A5038; --soil-edge:#A0805C; --soil-dot:rgba(0,0,0,.25);
  --bed:#4A3323; --bed-edge:#8A6A4C; --gravel:#57534B; --gravel-dot:rgba(0,0,0,.3);
  --glass:rgba(90,150,175,.35); --glass-edge:#7FB6CF; --water:#3F7FA8; --compost:#3E2C20;
  --sel:#F2B63A; --warn:#F08A62; --warn-soft:#3A2419; --good:#78BE86;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.4;
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}

/* top bar */
.top{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);min-height:54px;flex-wrap:wrap;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand svg{flex:none}
.pname{border:1px solid transparent;background:transparent;border-radius:6px;padding:5px 8px;font-weight:500;min-width:80px;width:190px;max-width:32vw}
.pname:hover{border-color:var(--line)}
.pname:focus{border-color:var(--leaf);background:var(--panel-2);outline:none}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:2px}
.seg button{border:0;background:transparent;border-radius:6px;padding:5px 9px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--panel);box-shadow:var(--shadow);color:var(--leaf);font-weight:500}
.ibtn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 9px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ibtn:hover{background:var(--panel-2)}
.ibtn:disabled{opacity:.4;cursor:default}
.ibtn.primary{background:var(--leaf);color:var(--leaf-ink);border-color:var(--leaf)}
.spacer{flex:1}
.status{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
.status[data-s="saved"] i{background:var(--good)}
.status[data-s="saving"] i,.status[data-s="unsaved"] i{background:var(--sel)}
.status[data-s="error"] i{background:var(--warn)}
.who{display:flex;align-items:center;gap:8px;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--leaf-soft);color:var(--leaf);display:grid;place-items:center;font-weight:700;font-size:12px}
select.lang{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:5px 6px}
.lbl-hide{display:inline}

/* main */
.main{display:grid;grid-template-columns:1fr 300px;min-height:0;position:relative}
.stage{position:relative;min-width:0;min-height:0;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;user-select:none;-webkit-user-select:none}
#cv.pan{cursor:grab}#cv.panning{cursor:grabbing}#cv.draw{cursor:crosshair}
.floaty{position:absolute;display:flex;gap:6px;z-index:2}
.floaty.tl{left:12px;top:12px}.floaty.br{right:12px;bottom:12px}
.floaty .seg,.floaty .ibtn{box-shadow:var(--shadow)}

/* grid & objects */
.g-minor{stroke:var(--grid-minor);stroke-width:1;fill:none}
.g-major{stroke:var(--grid-major);stroke-width:1;fill:none}
.o-land{fill:var(--soil);stroke:var(--soil-edge);stroke-width:2}
.o-bed{fill:var(--bed);stroke:var(--bed-edge);stroke-width:2}
.o-path{fill:var(--gravel);stroke:none}
.o-greenhouse{fill:var(--glass);stroke:var(--glass-edge);stroke-width:2}
.o-compost{fill:var(--compost);stroke:var(--bed-edge);stroke-width:1.5}
.o-water{fill:var(--water);stroke:var(--glass-edge);stroke-width:1.5}
.o-tree{stroke-width:1.5}
.pat-soil{fill:var(--soil-dot)}.pat-gravel{fill:var(--gravel-dot)}.pat-glass{stroke:var(--glass-edge);stroke-width:1;opacity:.45}
.pat-bed{fill:rgba(0,0,0,.12)}
.hit{cursor:move}
.draft{fill:rgba(224,154,18,.12);stroke:var(--sel);stroke-width:1.5;stroke-dasharray:6 4}
.selbox{fill:none;stroke:var(--sel);stroke-width:2}
.handle{fill:var(--panel);stroke:var(--sel);stroke-width:2}
.dim{font-size:11.5px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.pill rect{fill:var(--panel);opacity:.93}
.pill text{font-size:11.5px;fill:var(--ink)}
.pill.land rect{fill:transparent}
.pill.land text{font-weight:700;font-size:12.5px;paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.pill.empty rect{fill:transparent;stroke:var(--panel);stroke-dasharray:3 3;opacity:.8}
.pill.empty text{fill:#F4EDE4}
.pill.warn rect{fill:var(--warn-soft);stroke:var(--warn)}
.scale text{font-size:11px;fill:var(--muted)}
.scale path{stroke:var(--muted);stroke-width:1.5;fill:none}
#ov{pointer-events:none}#ov .handle{pointer-events:all;cursor:nwse-resize}
#ov .handle[data-h="n"],#ov .handle[data-h="s"]{cursor:ns-resize}
#ov .handle[data-h="e"],#ov .handle[data-h="w"]{cursor:ew-resize}
#ov .handle[data-h="ne"],#ov .handle[data-h="sw"]{cursor:nesw-resize}

/* inspector */
.insp{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:16px 16px 24px;min-height:0}
.insp h2{font-size:17px;margin:0 0 2px;letter-spacing:-.01em}
.insp h3{font-size:13px;margin:18px 0 8px;color:var(--muted);font-weight:500}
.insp .sub{color:var(--muted);font-size:12.5px;margin:0 0 12px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.field{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.field.full{grid-column:1/-1}
.field input,.field select{border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:6px 8px;color:var(--ink);font-size:14px;width:100%;min-width:0}
.inwrap{position:relative;display:flex}
.inwrap input{padding-right:30px}
.inwrap span{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11.5px;color:var(--muted);pointer-events:none}
.stat{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.stat b{font-weight:500}
.big{display:flex;align-items:baseline;gap:8px;margin:10px 0 2px}
.big strong{font-size:30px;letter-spacing:-.03em;line-height:1}
.big span{color:var(--muted);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:var(--leaf-soft);color:var(--ink);border-radius:20px;padding:2px 9px;font-size:12.5px}
.chip.bad{background:var(--warn-soft)}
.alert{background:var(--warn-soft);border-left:3px solid var(--warn);padding:8px 10px;border-radius:0 7px 7px 0;font-size:13px;margin-top:10px}
.row-btns{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.plist{list-style:none;padding:0;margin:0}
.plist li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.plist li small{color:var(--muted);display:block;font-size:11.5px}
.dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1}
.hint{background:var(--panel-2);border-radius:10px;padding:12px 12px 12px 14px;font-size:13px;color:var(--muted);margin-top:14px}
.hint p{margin:0 0 6px}.hint p:last-child{margin:0}
.hint kbd{font-family:inherit;font-size:11.5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--panel);color:var(--ink)}
.closeInsp{display:none}

/* dock */
.dock{background:var(--panel);border-top:1px solid var(--line);padding:8px 12px calc(10px + env(safe-area-inset-bottom));min-width:0;position:relative;z-index:4}
.dock-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;min-width:0}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tab{border:1px solid transparent;background:transparent;border-radius:20px;padding:4px 11px;white-space:nowrap;color:var(--muted);font-size:13px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--leaf);color:var(--leaf-ink);font-weight:500}
.search{border:1px solid var(--line);background:var(--panel-2);border-radius:20px;padding:5px 12px;width:180px;font-size:13px}
.tiles{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tile{flex:none;width:92px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:8px 6px 7px;display:flex;flex-direction:column;align-items:center;gap:4px;touch-action:pan-x;user-select:none;-webkit-user-select:none;cursor:grab;text-align:center}
.tile:hover{border-color:var(--leaf)}
.tile.active{border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel)}
.tile .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1}
.tile .nm{font-size:12px;line-height:1.15;font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.3em}
.tile .sp{font-size:10.5px;color:var(--muted)}
.ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:28px;box-shadow:0 8px 24px rgba(0,0,0,.25);border:2px solid var(--sel)}
.empty-tiles{color:var(--muted);font-size:13px;padding:14px 4px}

/* dialog, toast */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:0;width:min(560px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(15,25,18,.45)}
.dlg{padding:20px}
.dlg h2{margin:0 0 4px;font-size:20px;letter-spacing:-.02em}
.dlg .sub{color:var(--muted);margin:0 0 14px;font-size:13px}
.projlist{list-style:none;margin:0 0 16px;padding:0;max-height:44vh;overflow:auto;border-top:1px solid var(--line)}
.projlist li{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.projlist li.cur{background:var(--leaf-soft);border-radius:6px;padding-inline:8px}
.projlist .pn{flex:1;min-width:0}
.projlist .pn b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projlist .pn small{color:var(--muted)}
.newp{border-top:1px solid var(--line);padding-top:14px;display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end}
.dlg-foot{display:flex;justify-content:flex-end;margin-top:14px}
.toast{position:fixed;left:50%;bottom:170px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--panel);padding:8px 14px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:60;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:860px){
  .main{grid-template-columns:1fr}
  .insp{position:absolute;right:0;top:0;bottom:0;width:min(320px,88vw);z-index:6;box-shadow:-10px 0 30px rgba(0,0,0,.18);transform:translateX(105%);transition:transform .2s}
  .insp.open{transform:none}
  .closeInsp{display:inline-flex;float:right}
  .lbl-hide{display:none}
  .pname{width:130px}
  .search{width:120px}
  .newp{grid-template-columns:1fr 1fr}
  .newp .field:first-child{grid-column:1/-1}
}
@media (min-width:861px){ .inspToggle{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---------- v2 additions: accounts, archive, export ---------- */
.yearbtn{border:1px solid var(--line);background:var(--panel-2);border-radius:20px;padding:3px 10px;font-size:12.5px;font-weight:500;color:var(--muted);display:inline-flex;gap:5px;align-items:center}
.yearbtn:hover{color:var(--ink);border-color:var(--leaf)}
.acct{border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:3px 10px 3px 3px;display:inline-flex;align-items:center;gap:7px;font-size:13px}
.acct.guest{background:var(--leaf);color:var(--leaf-ink);border-color:var(--leaf);padding:6px 12px;font-weight:500}
.guestbar{background:var(--leaf-soft);border-radius:10px;padding:10px 12px;font-size:13px;margin:0 0 14px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.guestbar button{border:0;background:var(--leaf);color:var(--leaf-ink);border-radius:7px;padding:5px 10px;font-weight:500;white-space:nowrap}
.dlg .tabsline{display:flex;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.dlg .tabsline button{border:0;background:transparent;padding:8px 12px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.dlg .tabsline button[aria-selected="true"]{color:var(--ink);border-color:var(--leaf);font-weight:500}
.form{display:grid;gap:10px}
.form .field input{font-size:15px;padding:9px 10px}
.form .actions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:6px;flex-wrap:wrap}
.linkbtn{border:0;background:none;color:var(--leaf);padding:0;text-decoration:underline;text-underline-offset:2px}
.msg{padding:9px 11px;border-radius:0 8px 8px 0;font-size:13.5px}
.msg.err{background:var(--warn-soft);border-left:3px solid var(--warn)}
.msg.ok{background:var(--leaf-soft);border-left:3px solid var(--leaf)}
dialog.wide{width:min(820px,96vw)}
.arch{display:grid;grid-template-columns:180px 1fr;gap:16px;min-height:280px}
.years{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:12px;max-height:48vh;overflow:auto}
.years button{width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:8px}
.years button:hover{background:var(--panel-2)}
.years button[aria-current="true"]{background:var(--leaf-soft);font-weight:500}
.years .cnt{margin-left:auto;color:var(--muted);font-size:12px}
.addyear{display:flex;gap:6px;margin-top:8px}
.addyear input{width:80px;border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:5px 7px}
.plistA{list-style:none;margin:0;padding:0;max-height:48vh;overflow:auto}
.plistA li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.plistA li.cur{background:var(--leaf-soft);border-radius:8px;padding-inline:10px}
.plistA .pn b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plistA .pn small{color:var(--muted)}
.plistA .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.plistA .acts .ibtn{padding:4px 8px;font-size:12.5px}
.plistA select{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:4px 6px;font-size:12.5px}
.emptyA{color:var(--muted);padding:24px 4px}
.dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.newp{grid-template-columns:2fr 90px 1fr 1fr auto}
#printSheet{display:none}
.busy{position:fixed;inset:0;background:rgba(15,25,18,.35);display:none;place-items:center;z-index:80;color:#fff;font-weight:500}
.busy.on{display:grid}
@media (max-width:860px){
  .arch{grid-template-columns:1fr}
  .years{border-right:0;padding-right:0;flex-direction:row;flex-wrap:wrap;max-height:none}
  .years button{width:auto}
  .newp{grid-template-columns:1fr 1fr}
  .top .export .lbl-hide{display:none}
}
@media print{
  @page{size:A4 landscape;margin:0}
  html,body{height:auto;overflow:visible;background:#fff;display:block}
  body>*:not(#printSheet){display:none!important}
  #printSheet{display:block}
  #printSheet img{display:block;width:100%;height:auto;page-break-after:always;break-after:page}
  #printSheet img:last-child{page-break-after:auto;break-after:auto}
}

@media (max-width:1500px){ #tools .lbl-hide, .export .lbl-hide{display:none} .pname{width:150px} }
@media (max-width:1180px){ #acctBtn .lbl-hide, #openArchive .lbl-hide{display:none} .status span{display:none} }

/* plant icons */
.icsvg{width:100%;height:100%;display:block;overflow:visible}
.tile .ic{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);padding:3px;width:44px;height:44px}
.dot{padding:0;background:none}
.ghost{background:var(--panel);padding:4px}

/* ---------- v3: vegetable-garden planner ---------- */
.o-bedsoil{fill:var(--bed)}
.o-frame{fill:none;stroke:#C9A36B}
:root[data-theme="dark"] .o-frame{stroke:#A8844E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .o-frame{stroke:#A8844E}}
.twine{stroke:rgba(245,235,210,.6);stroke-width:1.2;fill:none;pointer-events:none}
.prevbed{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:7 5;opacity:.75;pointer-events:none}
.pill.prev rect{fill:var(--ink);opacity:.8}.pill.prev text{fill:var(--panel)}
.pill.empty2 rect{fill:var(--panel);opacity:.85}.pill.empty2 text{fill:var(--muted)}
.hovercell{fill:rgba(224,154,18,.22);stroke:var(--sel);stroke-width:2}
.hovercell.erase{fill:rgba(184,67,31,.2);stroke:var(--warn)}
#cv.paint,#cv.paint .hit.painting{cursor:cell}
.gchip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:2px 9px 2px 7px;font-size:12px;background:color-mix(in srgb,var(--g) 18%,transparent);color:var(--ink);white-space:nowrap}
.gchip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g)}
.gdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.fact{display:inline-block;font-size:12px;color:var(--muted);margin:0 8px 0 2px;white-space:nowrap}
.factsbox{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.factrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12.5px}
.factrow b{font-weight:500;margin-right:4px}
.brush{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;margin:4px 0 12px}
.brush-cur{display:flex;align-items:center;gap:10px}
.brush-cur .dot{width:40px;height:40px;background:var(--panel);border-radius:50%;padding:3px;font-size:20px}
.brush-cur .dot.erase{display:grid;place-items:center;color:var(--warn)}
.brush-cur b{display:block;font-weight:500}.brush-cur small{color:var(--muted);font-size:12px}
.brush-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.brush-btns .ibtn{padding:5px 9px;font-size:12.5px}
.brush-btns .ibtn[aria-pressed="true"]{border-color:var(--warn);color:var(--warn)}
.check{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line);cursor:pointer;grid-column:1/-1}
.check input{margin-top:3px;accent-color:var(--leaf);width:16px;height:16px}
.check b{display:block;font-weight:500;font-size:13.5px}.check small{color:var(--muted);font-size:12px}
.okbox{background:var(--leaf-soft);border-left:3px solid var(--leaf);padding:8px 10px;border-radius:0 7px 7px 0;font-size:13px;margin-top:6px}
.rotnote{margin-top:10px;font-size:12px}
.tpls{display:grid;gap:8px;margin:4px 0 20px}
.tpl{text-align:left;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px 12px}
.tpl:hover{border-color:var(--leaf);background:var(--leaf-soft)}
.tpl b{display:block;font-weight:500}.tpl small{color:var(--muted);font-size:12px}
.warnitem{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:0 8px 8px 0;padding:7px 10px;margin-bottom:6px;font-size:12.5px}
.warnitem b{display:block;font-weight:500;font-size:13px}
.rotlegend{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);flex-direction:column;gap:5px;font-size:12.5px;max-width:260px}
.rotlegend:not([hidden]){display:flex}
.rotlegend span{display:flex;align-items:center;gap:7px}
.rotlegend i{width:12px;height:12px;border-radius:3px;display:inline-block;opacity:.8}
.rotlegend small{color:var(--muted);margin-top:4px}
#rotBtn[aria-pressed="true"]{background:var(--leaf);color:var(--leaf-ink);border-color:var(--leaf)}
.field select{border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:6px 8px;color:var(--ink);font-size:14px;width:100%}
.newp{grid-template-columns:2fr 80px 1.4fr 1fr 1fr auto}
@media (max-width:860px){ .newp{grid-template-columns:1fr 1fr} }
.rotlegend[hidden]{display:none!important}
.floaty.bl{left:12px;bottom:40px}

/* ---------- v4: realistic look & spacing ---------- */
.board{stroke:#6E5030;stroke-width:1}
.board.post{fill:#B08A55}
.landedge{stroke:rgba(40,60,30,.55);stroke-width:1.5}
.twine{stroke:rgba(245,235,210,.55)}
.spacering{fill:none;stroke:#FFF6D8;stroke-width:1.3;stroke-dasharray:4 3;opacity:.9;pointer-events:none}
.spacering.short{stroke:#FF8A5C;stroke-width:2}
#spaceBtn[aria-pressed="true"]{background:var(--leaf);color:var(--leaf-ink);border-color:var(--leaf)}