:root{
  --paper:#F7F7F3; --ink:#15171A; --ink2:#5B5E60; --line:#DCDCD4; --line2:#EBEBE5; --white:#fff;
  --sold:#2E7A58; --partial:#DFA84A; --reserved:#E3E3DE;
  --gold:#F2C400; --red:#C8321E; --amber:#D98B14; --blue:#1F5FBF; --green:#1E7B4D; --violet:#6B4FA0;
  --cw:58px; --ch:66px;
  /* superficie / elevación — se suman al sistema anterior, no lo reemplazan */
  --surface:#fff; --surface-2:#F1F1EB;
  --accent:#1F5FBF; --accent-ink:#15408A; --accent-soft:#E8EFFB;
  --radius-sm:7px; --radius-md:11px; --radius-lg:16px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(21,23,26,.05), 0 1px 1px rgba(21,23,26,.04);
  --shadow-2:0 3px 10px rgba(21,23,26,.08), 0 1px 3px rgba(21,23,26,.05);
  --shadow-3:0 14px 32px rgba(21,23,26,.16), 0 3px 8px rgba(21,23,26,.08);
  --ring:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
input{font:inherit}
svg.ico{flex:0 0 auto;display:inline-block;vertical-align:-3px}
header{position:sticky;top:0;z-index:5;background:var(--paper);display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:11px 18px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:17px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.brand::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.brand small{display:block;font-weight:500;font-size:11px;color:var(--ink2);letter-spacing:.01em}
.tabs{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--radius-md);padding:3px;border:1px solid var(--line2)}
.tabs button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:calc(var(--radius-md) - 4px);font-weight:600;font-size:13px;color:var(--ink2);transition:background .15s var(--ease),color .15s var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button.active{background:var(--ink);color:#fff;box-shadow:var(--shadow-1)}
.hactions{margin-left:auto;display:flex;gap:8px;align-items:center}
.whoami{font-size:12px;color:var(--ink2);white-space:nowrap;padding:0 2px}
.hactions input{height:34px;border:1px solid var(--line);border-radius:var(--radius-md);padding:0 10px 0 32px;background:var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="15" height="15" fill="none" stroke="%235B5E60" stroke-width="1.8"><circle cx="8.3" cy="8.3" r="5.3"/><line x1="16.3" y1="16.3" x2="12.6" y2="12.6" stroke-linecap="round"/></svg>') no-repeat 10px center;width:210px;transition:border-color .15s,box-shadow .15s}
.hactions input:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}
.btn{height:34px;padding:0 13px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font-weight:600;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-1);transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),color .15s var(--ease),transform .1s var(--ease)}
.btn:hover{border-color:#C7C7BE;box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-1)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:#26282c}
.btn.sm{height:29px;padding:0 10px;font-size:12px;gap:5px}
.btn:disabled{opacity:.4;box-shadow:none;cursor:default}
.btn.danger{border-color:#E7C3BB;color:var(--red);background:#FCF4F2}
.btn.danger:hover{border-color:var(--red);background:#FBEAE6}
main{padding:16px 18px 64px}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:20px}
.kpi{position:relative;border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 15px;background:var(--surface);box-shadow:var(--shadow-1);transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.kpi:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.kpi .kpi-ico{position:absolute;top:13px;right:13px;color:var(--ink2);opacity:.35}
.kpi b{display:block;font-size:23px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--ink2);line-height:1.35}
.kpi .kpi-sub{display:block;font-style:normal;opacity:.75}
.kpi.kpi-warn{border-color:#EBC7BE;background:#FDF6F4}
.kpi.kpi-warn b{color:var(--red)}
.kpi.kpi-warn .kpi-ico{color:var(--red);opacity:.55}
.grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:15px 16px;margin-bottom:16px;box-shadow:var(--shadow-1)}
.card h3{margin:0 0 11px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);font-weight:700;display:flex;align-items:center;gap:7px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;color:var(--ink2);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line);padding:7px 8px;background:var(--surface-2)}
table.tbl th:first-child{border-top-left-radius:7px}
table.tbl th:last-child{border-top-right-radius:7px}
table.tbl td{padding:7px 8px;border-bottom:1px solid var(--line2)}
table.tbl tbody tr:hover td{background:var(--surface-2)}
table.tbl td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--line2);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.bar .b1{background:var(--sold)} .bar .b2{background:var(--partial)} .bar .b3{background:var(--reserved)}
.bar .b4{background:repeating-linear-gradient(135deg,#fff 0 3px,#bbb 3px 4px)}
.legend.inline{justify-content:flex-start;padding:0 0 10px}
.pill{display:inline-block;padding:3px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.01em}
.pill.ok{background:#E6F2EA;color:var(--green)} .pill.warn{background:#FCEFD9;color:var(--amber)} .pill.bad{background:#FBE6E2;color:var(--red)}

/* ---------- plano ---------- */
.plan{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;gap:7px;width:100%;max-width:420px;margin:6px auto 6px}
.side{border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 10px;text-align:center;font-weight:700;font-size:13px;background:var(--surface);box-shadow:var(--shadow-1);transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
.side:hover{box-shadow:var(--shadow-2)}
.side b{display:block;font-size:11px;font-weight:500;color:var(--ink2)}
.side.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.side.active b{color:#C8C8C4}
.side.top{grid-column:2;grid-row:1}
.side.bottom{grid-column:2;grid-row:3}
.side.left{grid-column:1;grid-row:2;writing-mode:vertical-rl;transform:rotate(180deg);padding:18px 8px;min-height:120px}
.side.right{grid-column:3;grid-row:2;writing-mode:vertical-rl;padding:18px 8px;min-height:120px}
.pitch{grid-column:2;grid-row:2;min-height:110px;border:1px solid var(--line);border-radius:var(--radius-sm);background:repeating-linear-gradient(0deg,#E4EBDD 0 14px,#DCE4D4 14px 28px);display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:9px 12px;margin:0 0 4px;font-size:12px;color:var(--ink2);background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-md)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border:1px solid var(--line);border-radius:4px;background:var(--white)}
.sw.res{background:var(--reserved)} .sw.par{background:var(--partial)} .sw.tot{background:var(--sold)}
.sw.nd{background:repeating-linear-gradient(135deg,#fff 0 3px,#bbb 3px 4px)}
.sw.red{border-bottom:4px solid var(--red)} .sw.amb{border-bottom:4px solid var(--amber)} .sw.cap{border-bottom:4px solid var(--violet)}
.fpill .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.movebar{position:sticky;top:0;z-index:6;background:var(--ink);color:#fff;padding:9px 14px;border-radius:var(--radius-md);margin:0 auto 10px;max-width:460px;font-size:13px;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;box-shadow:var(--shadow-2)}
.movebar[hidden]{display:none}
.movebar b{font-weight:800}
.movebar .btn{background:#fff;color:var(--ink);height:27px;padding:0 10px;font-size:12px;border-color:#fff;box-shadow:none}
.stats{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--ink2);padding:3px 0 10px}
.stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.compass{display:flex;justify-content:space-between;padding:0 0 0 118px;font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.elev-wrap{overflow-x:auto;overflow-y:hidden;padding:8px 0 14px;-webkit-overflow-scrolling:touch}
.elev{display:table;margin:0 auto}
.zoomctl{position:fixed;top:68px;right:16px;z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px;display:flex;align-items:center;gap:2px;box-shadow:var(--shadow-2)}
.zoomctl button{width:28px;height:28px;border-radius:50%;font-size:16px;font-weight:700;line-height:1;transition:background .12s}
.zoomctl button:hover{background:var(--surface-2)}
.zoomctl span{font-size:12px;color:var(--ink2);width:38px;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer;font-variant-numeric:tabular-nums}
.cardtip{position:fixed;pointer-events:none;z-index:15;background:var(--ink);color:#fff;padding:7px 12px;border-radius:var(--radius-sm);font-size:13px;line-height:1.35;max-width:280px;box-shadow:var(--shadow-3)}
.cardtip[hidden]{display:none}
.lasso{position:fixed;pointer-events:none;z-index:20;background:rgba(31,95,191,.1);border:1.5px dashed var(--blue);border-radius:3px}
.lasso[hidden]{display:none}
.elev{cursor:crosshair}
.card2{cursor:pointer}
.cardtip div:first-child{font-size:15px;font-weight:700}
.modetoggle{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;background:var(--surface-2);border-radius:var(--radius-md);padding:3px;width:fit-content;max-width:100%;margin:8px auto;border:1px solid var(--line2)}
.modetoggle button{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:calc(var(--radius-md) - 4px);font-weight:600;font-size:12px;color:var(--ink2);white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)}
.modetoggle button:hover{color:var(--ink)}
.modetoggle button.active{background:var(--ink);color:#fff}
.card2.obra-mode .cap{color:var(--violet);font-weight:700}
.card2.obra-mode.tot .cap,.card2.obra-mode.par .cap{color:#D9C6F0}
.tray{max-width:900px;margin:0 auto 10px;padding:11px 13px;border:1px dashed #B79AD9;border-radius:var(--radius-md);background:#F7F3FC}
.tray[hidden]{display:none}
.traylabel{font-size:12px;color:var(--ink2);margin-bottom:8px;font-weight:600}
.traycards{display:flex;flex-wrap:wrap;gap:7px}
.traycard{position:relative;background:var(--white);border:1px solid var(--violet);border-radius:var(--radius-sm);padding:6px 10px;font-size:12px;font-weight:600;text-align:left;line-height:1.3;cursor:grab;box-shadow:var(--shadow-1);transition:box-shadow .15s}
.traycard:hover{box-shadow:var(--shadow-2)}
.traycard small{display:block;font-weight:400;color:var(--ink2);font-size:10px}
.traycard.dragging{opacity:.4}
.traycard .unpool{position:absolute;top:-7px;right:-7px;width:16px;height:16px;background:var(--ink);color:#fff;border-radius:50%;font-size:11px;font-style:normal;line-height:16px;text-align:center;cursor:pointer}
.floor{display:flex;align-items:stretch;border-bottom:1px solid var(--line2);padding:7px 0}
.floor:first-child{border-top:1px solid var(--line2)}
.flabel{position:sticky;left:0;z-index:2;background:var(--paper);flex:0 0 96px;display:flex;flex-direction:column;justify-content:center;padding-right:10px;border-right:1px solid var(--line);margin-right:10px}
.flabel strong{font-size:15px}
.flabel span{font-size:11px;color:var(--ink2)}
.cards{display:flex;gap:4px;align-items:center;justify-content:center;flex:1 1 auto;min-width:max-content}
.gap{width:10px;flex:0 0 10px}
.card2{position:relative;width:var(--cw);height:var(--ch);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--white);text-align:left;padding:4px 5px 8px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.card2:hover{box-shadow:var(--shadow-2)}
.card2 .num{font-size:15px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.card2 .cli{font-size:9px;line-height:1.15;color:var(--ink2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.card2 .cap{position:absolute;right:4px;top:4px;font-size:9px;color:var(--ink2)}
.card2.res{background:var(--reserved)}
.card2.par{background:var(--partial);border-color:var(--partial);color:var(--ink)}
.card2.par .cli,.card2.par .cap{color:var(--ink2)}
.card2.tot{background:var(--sold);border-color:var(--sold);color:#fff}
.card2.tot .cli,.card2.tot .cap{color:#C8C8C4}
.card2.nd{background:repeating-linear-gradient(135deg,#fff 0 4px,#D8D8D3 4px 5px);color:var(--ink2)}
.card2.unido{background:repeating-linear-gradient(135deg,#fff 0 4px,#E3E3DE 4px 5px);color:var(--ink2);opacity:.6}
.card2.doble{border-width:2px;z-index:1}
.card2 .dblmark{opacity:.7;vertical-align:-2px}
.card2 .dblmark svg{width:10px;height:10px}
.card2.reub-red::after,.card2.reub-amb::after,.card2.reub-cap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red)}
.card2.reub-amb::after{background:var(--amber)}
.card2.reub-cap::after{background:var(--violet)}
.card2.sel{outline:3px solid var(--gold);outline-offset:1px;transform:translateY(-3px)}
.card2.hit{outline:3px solid var(--blue);outline-offset:1px}
.card2.dim{opacity:.28}
.card2.over{outline:3px dashed var(--gold);outline-offset:1px}
.card2.dragging{opacity:.4}
.card2:active{transform:scale(.97)}
.card2.picked{outline:3px solid var(--green);outline-offset:1px}
.card2.picked::before{content:"✓";position:absolute;top:2px;left:2px;width:15px;height:15px;background:var(--green);color:#fff;border-radius:50%;font-size:10px;line-height:15px;text-align:center;font-weight:700;z-index:1}
.selectbar{position:sticky;top:0;z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 14px;margin:0 auto 10px;max-width:640px;font-size:13px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-3)}
.selectbar[hidden]{display:none}
.selectbar b{font-weight:800}
.selectbar-row{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap}
.selectbar-row:last-child{border-top:1px solid var(--line2);padding-top:8px}
.selectbar select,.selectbar input[type=number]{height:30px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 8px;font:inherit;font-size:12px;background:var(--surface)}
.selectbar input[type=number]{width:160px}
.filterpanel{max-width:640px;margin:0 auto 10px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-1)}
.filterpanel[hidden]{display:none}
.filtergroup{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;font-size:12px}
.filtergroup b{color:var(--ink2);font-weight:700;margin-right:2px;min-width:64px}
.fpill{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:var(--radius-pill);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .12s,color .12s,border-color .12s}
.fpill:hover{border-color:#C7C7BE}
.fpill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filteractions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-3);padding:8px 18px 20px;transform:translateY(105%);transition:transform .22s var(--ease);z-index:10;max-height:75vh;overflow:auto}
.sheet::before{content:"";display:block;width:36px;height:4px;border-radius:3px;background:var(--line);margin:6px auto 10px}
.sheet.open{transform:none}
.sheet h2{margin:0 0 2px;font-size:18px;letter-spacing:-.01em}
.sheet h2 small{font-weight:600;font-size:13px;color:var(--ink2)}
.sheet .meta{color:var(--ink2);font-size:12px;margin-bottom:8px}
.sublabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin:12px 0 4px;border-top:1px solid var(--line2);padding-top:10px}
.sublabel:first-of-type{border-top:0;padding-top:0;margin-top:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px;margin:6px 0 10px}
.kv dt{color:var(--ink2)} .kv dd{margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hint{font-size:12px;color:var(--ink2)}
.warn{color:var(--red)}
.formrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.formrow label{display:flex;flex-direction:column;font-size:11px;color:var(--ink2);gap:3px;font-weight:600}
.formrow input,.formrow select{height:32px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 9px;font:inherit;background:var(--surface)}
.formrow input:focus,.formrow select:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}

/* ---------- movimientos tab ---------- */
.movtable{max-width:900px;margin:0 auto}

.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 16px;border-radius:var(--radius-md);font-size:13px;opacity:0;transition:.2s var(--ease);z-index:20;pointer-events:none;max-width:90vw;text-align:center;box-shadow:var(--shadow-3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ---- selector de nivel, sólo en vista de planta ---- */
.nivelpick{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:10px auto 2px}
.nivelpick button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 13px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);font-weight:700;font-size:13px;color:var(--ink);box-shadow:var(--shadow-1);transition:box-shadow .15s,background .15s,color .15s,border-color .15s}
.nivelpick button:hover{box-shadow:var(--shadow-2)}
.nivelpick button b{font-weight:500;font-size:10px;color:var(--ink2)}
.nivelpick button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.nivelpick button.active b{color:#cfcfc9}

/* ---- vista de planta: el anillo octogonal ---- */
.elev.as-planta{display:block}
.pring{position:relative;margin:0 auto}
.poutline{position:absolute;left:0;top:0;pointer-events:none}
.poutline .banda{fill:#E4E4DD;stroke:#CFCFC7;stroke-width:1.5}
.poutline .cesped{fill:#CFDDBF}
.poutline .raya{fill:#C6D6B4}
.poutline .lineas>*{fill:none;stroke:#fff;stroke-opacity:1;stroke-width:1.8}
.pfield{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#5F6E55;pointer-events:none}
.pfield strong{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#414D38}
.pfield span{font-size:11px;letter-spacing:.04em}
.pfield .pfuera{margin-top:2px;font-size:10px;letter-spacing:.02em;color:var(--red);font-weight:600}
.card2.pcard{position:absolute;z-index:2;padding:0;border-radius:4px;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(23,24,26,.1);transition:box-shadow .12s var(--ease)}
.card2.pcard:hover{box-shadow:0 2px 6px rgba(23,24,26,.2);z-index:4}
.card2.pcard .num{font-size:11px;line-height:1;font-weight:600}
.card2.pcard .cap,.card2.pcard .cli{display:none}
.card2.pcard .pcod{position:absolute;left:2px;right:2px;bottom:2px;text-align:center;font-style:normal;
  font-size:8px;letter-spacing:.03em;opacity:.7;white-space:nowrap;overflow:hidden}
.card2.pcard.dis{background:#fff;border-color:#CBCBC5}
.plabel{position:absolute;z-index:3;font-size:10.5px;font-weight:600;color:var(--ink2);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.plabel.top{top:16px;left:50%;transform:translateX(-50%)}
.plabel.bottom{bottom:16px;left:50%;transform:translateX(-50%)}
.plabel.left{left:6px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.plabel.right{right:6px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%)}

@media (max-width:600px){:root{--cw:50px;--ch:58px} .hactions input{width:120px} .grid2{gap:10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}