/* /custom-map/style.css */
:root{
  --bg:#0b0f14;
  --panel:#0f1622cc;
  --panel-solid:#0f1622;
  --btn:#1b2636;
  --btn-active:#26354b;
  --accent:#3ea6ff;
  --danger:#dc3545;
  --ok:#35dc95;
  --text:#e7eef7;
  --muted:#9fb4d6;
  --grid:#233048;
  --chunk:#2b3b57;
  --rad:14px;
  --pad:clamp(.4rem,1.2vw,.75rem);
  --fz:clamp(14px,2.2vw,17px);
  --fz-ico:clamp(18px,3vw,22px);
  --ctrl-h:min(48px,8vh);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Noto Sans",Arial}
.wrap{position:fixed;inset:0}

/* Auth */
.auth-body{display:grid;place-items:center}
.auth-card{background:#0f1622; border:1px solid #22344a; border-radius:18px; padding:2rem; width:min(520px,92vw)}
.brand{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.brand-logo{font-size:2.2rem}
.brand-text h1{margin:0}
.alert{background:#2a1b20; border:1px solid #6e2a38; padding:.6rem .8rem; border-radius:10px; margin-bottom:.7rem}
.auth-form{display:grid;gap:.6rem}
.auth-form input{background:#0b1320;border:1px solid #23344a;border-radius:10px;color:var(--text);padding:.7rem .9rem}
.btn{background:var(--btn);color:var(--text);border:none;border-radius:var(--rad);padding:.65rem .9rem;font-size:var(--fz);cursor:pointer;min-height:var(--ctrl-h)}
.btn:hover{background:var(--btn-active)}
.btn.primary{background:var(--accent);color:#002}
.auth-foot{margin-top:1rem;color:var(--muted);font-size:.9rem}
.divider{margin:.8rem 0;color:var(--muted);text-align:center}
.user-list{display:flex;gap:.5rem;flex-wrap:wrap}
.user-pill button{background:#142033;border:1px solid #2b3c58;border-radius:999px;color:#cfe1ff;padding:.45rem .75rem;cursor:pointer}
.auth-foot a { color:#3fb950; text-decoration:underline; } .auth-foot a:hover { color:#2ea043; }
.auth-foot{ text-align:center !important; }

/* App */
.topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:linear-gradient(to bottom,#000a,transparent);padding:.4rem var(--pad);z-index:20}
.badge{font-size:13px;color:var(--muted);background:#0e1a2b;border:1px solid #22344a;border-radius:999px;padding:.25rem .7rem}
.seg{display:flex;border-radius:999px;overflow:hidden;border:1px solid #22344a;background:#0e1a2b}
.seg>button{min-width:var(--ctrl-h);height:var(--ctrl-h);border:none;background:#0000;color:var(--text);font-size:var(--fz-ico);cursor:pointer}
.seg>button.active{background:var(--accent);color:#002}
.zmeta{color:var(--muted);font-size:.95rem;margin-left:.6rem}
.left,.middle,.right{display:flex;align-items:center;gap:.5rem}

.viewport{position:absolute;inset:0}
.map{position:absolute;inset:0;width:100%;height:100%;border:none;background:#000}
.overlay{position:absolute;inset:0;contain:layout paint;touch-action:none}
.grid,.chunkgrid{position:absolute;inset:0;pointer-events:none;display:none}
.grid.on,.chunkgrid.on{display:block}
.shield{position:absolute;inset:0;pointer-events:none;background:transparent}

.toolbar{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:center;
  background:var(--panel);backdrop-filter:blur(10px);
  padding:calc(.6rem + env(safe-area-inset-bottom)) var(--pad) var(--pad) var(--pad);
}
.group{display:flex;align-items:center;gap:.6rem}
.chk{display:flex;align-items:center;gap:.35rem}

/* Side panel */
.side{position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);background:var(--panel);backdrop-filter:blur(10px);border-left:1px solid #22344a;transform:translateX(100%);transition:transform .2s;z-index:22}
.side.open{transform:translateX(0)}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;border-bottom:1px solid #213146}
.tabs{display:flex;border-bottom:1px solid #213146}
.tabs>button{flex:1;background:#0e1a2b;border:none;color:#cfe1ff;padding:.7rem;cursor:pointer}
.tabs>button.active{background:#1a2940}
.tab{padding:.8rem}
.tab.hide{display:none}
.list{display:grid;gap:.5rem;max-height:45vh;overflow:auto}
.props{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.field{display:grid;gap:.3rem}
.field.full{grid-column:1/-1}
.row-inline{display:flex;gap:.6rem}
.help ul{margin:.3rem 0 .8rem .9rem}

/* Shapes */
.shape{position:absolute;user-select:none;transform-origin:top left;border:3px solid #dc3545;background-color:rgba(220,53,69,.15)}
.shape.sel{outline:2px dashed var(--accent);outline-offset:2px}
.shape.locked{opacity:.6}
.shape.hide{display:none}
.shape .handle{position:absolute;width:14px;height:14px;border:1px solid #000;background:#fff;border-radius:3px}
.handle.nw{left:-9px;top:-9px;cursor:nwse-resize}
.handle.ne{right:-9px;top:-9px;cursor:nesw-resize}
.handle.sw{left:-9px;bottom:-9px;cursor:nesw-resize}
.handle.se{right:-9px;bottom:-9px;cursor:nwse-resize}
.handle.rot{left:50%;top:-32px;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;cursor:grab}
.shape.circle{border-radius:50%}
.shape.text{min-width:64px;min-height:32px;display:flex;align-items:center;justify-content:center;padding:8px 10px;white-space:pre-wrap;background:rgba(0,0,0,0.65);color:#fff}
.len-badge{position:absolute;transform:translate(-50%,-100%);padding:4px 8px;background:#000c;border:1px solid #fff3;border-radius:10px;font-size:13px;color:#fff;pointer-events:none}