:root{ color-scheme: dark; --bg:#0f141b; --panel:#171f2a; --line:#2a3645; --txt:#e6edf3; --muted:#8b9bb0; --accent:#3b82f6; --green:#22c55e; --danger:#ef4444; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--txt); font-family:system-ui,sans-serif; font-size:13px; }
body{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
#plan,#xsec{ touch-action:none; }   /* let pointer-draw work on touch without page scroll/zoom */

#bar{ display:flex; align-items:center; gap:6px; padding:6px 10px; background:#0c1117; border-bottom:1px solid var(--line); flex-wrap:wrap; }
#bar strong{ font-size:14px; margin-right:6px; }
#bar .sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
#status{ color:var(--muted); margin-left:auto; }
button{ background:#222c39; color:var(--txt); border:1px solid var(--line); border-radius:7px; padding:6px 10px; cursor:pointer; font-size:13px; }
button:hover{ border-color:#3a4a5e; }
button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.danger{ background:#3a1f24; border-color:#5a2a30; color:#ffb4b4; }
button.small{ padding:4px 8px; font-size:12px; }
button.mode.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
input,select{ background:#0e141c; color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:5px 7px; font-size:13px; }
#projName{ width:120px; }

main{ flex:1; display:flex; min-height:0; }
#planWrap{ flex:1; position:relative; min-width:0; }
#plan{ width:100%; height:100%; display:block; cursor:crosshair; }
#planHud{ position:absolute; left:10px; bottom:10px; background:rgba(8,12,18,.8); padding:5px 10px; border-radius:8px; color:var(--muted); border:1px solid var(--line); }
#coord{ color:var(--txt); font-variant-numeric:tabular-nums; }

#side{ width:330px; border-left:1px solid var(--line); overflow-y:auto; background:var(--bg); }
.panel{ padding:10px 12px; border-bottom:1px solid var(--line); }
.panel h3{ margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.panel label{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); margin-bottom:6px; }
.panel label input,.panel label select{ color:var(--txt); }
.row{ display:flex; gap:8px; }
.row label{ flex:1; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
#segInfo,#wpInfo{ margin-bottom:8px; }
#xsec{ width:100%; background:#0a0f15; border:1px solid var(--line); border-radius:8px; margin-top:8px; display:block; cursor:pointer; image-rendering:pixelated; }

#threeWrap{ position:fixed; inset:0; background:#06090d; z-index:10; display:flex; flex-direction:column; }
#threeWrap[hidden]{ display:none; }   /* [hidden] must beat the display:flex above */
[hidden]{ display:none !important; }
#threeBar{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#0c1117; border-bottom:1px solid var(--line); }
#three{ flex:1; display:block; width:100%; }

/* mobile / narrow: stack the panel under the plan so the canvas isn't squeezed to a sliver */
@media (max-width: 820px){
  main{ flex-direction:column; }
  #planWrap{ flex:none; width:100%; height:48dvh; }
  #side{ width:100%; flex:1; min-height:0; border-left:none; border-top:1px solid var(--line); }
  #bar{ overflow-x:auto; }
  #xsec{ max-width:420px; }
}