:root{
    color-scheme: light;
    --bg: #f6f3f7;
    --bg-elev: #ffffff;
    --panel: #fbf9fc;
    --border: #e2dbe6;
    --text: #241f28;
    --text-dim: #6b6270;
    --text-faint: #948b9a;
    --accent: #8a3f6e;
    --accent-hover: #7a3560;
    --accent-soft: #f1e3ec;
    --danger: #c23b3b;
    --danger-soft: #fbe6e6;
    --ok: #3b8a5c;
    --shadow: 0 2px 10px rgba(50,20,45,0.08);
    --scene-bg-top: #ded3e2;
    --scene-bg-bottom: #f3eef4;
    --scene-floor: #cfc2d4;
    --scene-wall: #efe9f1;
    --scene-grid: #b9a9c0;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg: #1b171d;
      --bg-elev: #221d25;
      --panel: #201b23;
      --border: #382f3d;
      --text: #ede8ef;
      --text-dim: #a99fae;
      --text-faint: #786f7d;
      --accent: #b8659a;
      --accent-hover: #c67aab;
      --accent-soft: #3a2432;
      --danger: #e06868;
      --danger-soft: #3a2222;
      --ok: #5fbf87;
      --shadow: 0 2px 14px rgba(0,0,0,0.4);
      --scene-bg-top: #131015;
      --scene-bg-bottom: #211c26;
      --scene-floor: #2a232e;
      --scene-wall: #241f28;
      --scene-grid: #453a4b;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg: #1b171d;
    --bg-elev: #221d25;
    --panel: #201b23;
    --border: #382f3d;
    --text: #ede8ef;
    --text-dim: #a99fae;
    --text-faint: #786f7d;
    --accent: #b8659a;
    --accent-hover: #c67aab;
    --accent-soft: #3a2432;
    --danger: #e06868;
    --danger-soft: #3a2222;
    --ok: #5fbf87;
    --shadow: 0 2px 14px rgba(0,0,0,0.4);
    --scene-bg-top: #131015;
    --scene-bg-bottom: #211c26;
    --scene-floor: #2a232e;
    --scene-wall: #241f28;
    --scene-grid: #453a4b;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    font-size:13px;
    overflow:hidden;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  h1,h2,h3,.brand,.section-title{ font-family:'Sora', sans-serif; }
  input[type=number], input[type=text], .mono{ font-family:'IBM Plex Mono', monospace; }
  button, input, select{ font-family:inherit; font-size:inherit; color:inherit; }
  img{ max-width:100%; }
  [hidden]{ display:none !important; }

  #app{ display:flex; flex-direction:column; height:100vh; }

  /* Top bar */
  #topbar{
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; background:var(--bg-elev); border-bottom:1px solid var(--border);
    flex-wrap:wrap; z-index:5;
  }
  .brand{ font-weight:700; font-size:15px; color:var(--accent); white-space:nowrap; margin-right:4px; }
  .tabs{ display:flex; gap:4px; }
  .tab-btn{
    background:transparent; border:1px solid transparent; border-radius:8px;
    padding:6px 10px; cursor:pointer; color:var(--text-dim); font-weight:500; white-space:nowrap;
  }
  .tab-btn.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
  .tab-btn:hover:not(.active){ background:var(--panel); color:var(--text); }
  .spacer{ flex:1; }
  .seg{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .seg button{
    background:var(--bg-elev); border:none; padding:6px 10px; cursor:pointer; color:var(--text-dim);
    border-right:1px solid var(--border);
  }
  .seg button:last-child{ border-right:none; }
  .seg button.active{ background:var(--accent); color:#fff; }
  .icon-btn{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; padding:6px 9px;
    cursor:pointer; color:var(--text-dim); display:flex; align-items:center; gap:5px;
  }
  .icon-btn:hover{ color:var(--text); border-color:var(--accent); }
  .icon-btn.on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }

  /* Body layout */
  #body{ flex:1; display:flex; min-height:0; }
  #left, #right{
    background:var(--panel); border-color:var(--border); overflow-y:auto; flex-shrink:0;
  }
  #left{ width:250px; border-right:1px solid var(--border); padding:10px; }
  #right{ width:290px; border-left:1px solid var(--border); padding:12px; }
  #center{ flex:1; position:relative; min-width:0; background:var(--scene-bg-bottom); }
  #canvas-wrap{ position:absolute; inset:0; }
  canvas{ display:block; width:100%; height:100%; }

  .section-title{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
    margin:14px 0 6px; font-weight:600;
  }
  .section-title:first-child{ margin-top:0; }
  .cat-btn{
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    background:var(--bg-elev); border:1px solid var(--border); border-radius:8px;
    padding:7px 9px; margin-bottom:6px; cursor:pointer; color:var(--text);
  }
  .cat-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .cat-btn .dim{ margin-left:auto; font-size:10.5px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; }
  .cat-swatch{ width:9px; height:9px; border-radius:2px; background:var(--accent); flex-shrink:0; opacity:.55; }

  .note-banner{
    background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);
    border-radius:8px; padding:7px 10px; font-size:11.5px; margin-bottom:10px; line-height:1.4;
  }

  .field{ margin-bottom:10px; }
  .field label{ display:block; font-size:11px; color:var(--text-dim); margin-bottom:3px; }
  .field input[type=text], .field input[type=number], .field select{
    width:100%; background:var(--bg-elev); border:1px solid var(--border); border-radius:6px;
    padding:6px 7px; color:var(--text);
  }
  .field input[type=color]{ width:100%; height:30px; border:1px solid var(--border); border-radius:6px; background:var(--bg-elev); padding:2px; cursor:pointer; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .btn{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:7px; padding:7px 10px;
    cursor:pointer; color:var(--text); font-weight:500;
  }
  .btn:hover{ border-color:var(--accent); color:var(--accent); }
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .btn.primary:hover{ background:var(--accent-hover); }
  .btn.danger{ color:var(--danger); border-color:var(--danger); }
  .btn.danger:hover{ background:var(--danger-soft); }
  .btn.block{ width:100%; }
  .btn-row{ display:flex; gap:8px; margin-top:4px; }
  .btn-row .btn{ flex:1; }

  .hint{ color:var(--text-dim); line-height:1.6; font-size:12px; }
  .hint kbd{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:4px; padding:1px 5px;
    font-family:'IBM Plex Mono',monospace; font-size:11px;
  }
  .measure-row{ display:flex; justify-content:space-between; padding:3px 0; font-size:12px; color:var(--text-dim); border-bottom:1px dashed var(--border); }
  .measure-row span:last-child{ font-family:'IBM Plex Mono',monospace; color:var(--text); }
  .warn{
    background:var(--danger-soft); color:var(--danger); border:1px solid var(--danger);
    border-radius:7px; padding:7px 9px; font-size:11.5px; margin-top:8px; line-height:1.4;
  }

  #labels-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .obj-label{
    position:absolute; transform:translate(-50%,-100%); background:rgba(20,14,18,0.72); color:#fff;
    padding:2px 7px; border-radius:5px; font-size:10.5px; white-space:nowrap; font-family:'IBM Plex Sans',sans-serif;
    top:0; left:0;
  }
  :root[data-theme="dark"] .obj-label, @media (prefers-color-scheme: dark){ .obj-label{ background:rgba(240,235,242,0.85); color:#1a1520; } }

  #statusbar{
    position:absolute; left:12px; bottom:12px; display:flex; gap:14px;
    background:var(--bg-elev); border:1px solid var(--border); border-radius:9px;
    padding:8px 14px; box-shadow:var(--shadow); font-size:11.5px; color:var(--text-dim);
  }
  #statusbar b{ color:var(--text); font-family:'IBM Plex Mono',monospace; font-weight:600; }
  #statusbar .stat{ display:flex; flex-direction:column; gap:1px; }
  #statusbar .stat small{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }

  #floor-settings-toggle{ position:absolute; right:12px; top:12px; }
  #floor-settings{
    position:absolute; right:12px; top:50px; width:260px; max-height:calc(100% - 64px); overflow-y:auto;
    background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:12px; box-shadow:var(--shadow); z-index:4;
  }

  #modal-overlay{
    position:fixed; inset:0; background:rgba(10,6,10,0.5); display:flex; align-items:center; justify-content:center; z-index:100;
  }
  #modal{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:18px;
    width:520px; max-width:92vw; max-height:82vh; overflow-y:auto; box-shadow:var(--shadow);
  }
  #modal h3{ margin:0 0 10px; font-size:15px; }
  #modal textarea{
    width:100%; height:220px; background:var(--panel); border:1px solid var(--border); border-radius:7px;
    color:var(--text); padding:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; resize:vertical;
  }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }

  #sh-editor-overlay{
    position:fixed; inset:0; background:var(--bg); z-index:60; display:flex; flex-direction:column;
  }
  #sh-editor-topbar{
    display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-elev);
    border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  #sh-editor-topbar select{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:6px; padding:6px 8px; color:var(--text);
  }
  #sh-editor-palette{
    display:flex; gap:8px; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  .sh-pal-item{
    background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; padding:8px 12px;
    cursor:grab; font-size:12px; color:var(--text); user-select:none;
  }
  .sh-pal-item:active{ cursor:grabbing; }
  #sh-editor-body{ flex:1; display:flex; overflow:auto; padding:24px; gap:0; }
  #sh-ruler{ position:relative; width:44px; flex-shrink:0; }
  .sh-ruler-tick{ position:absolute; left:0; right:0; border-top:1px solid var(--border); font-size:9px; color:var(--text-faint); text-align:right; padding-right:6px; }
  .sh-ruler-tick.major{ border-top:1px solid var(--text-dim); font-weight:600; color:var(--text-dim); }
  #sh-bays{ display:flex; position:relative; border-bottom:3px solid var(--text); }
  .sh-bay{
    position:relative; border-left:4px solid #161616; border-right:4px solid #161616; background:var(--bg-elev);
    flex-shrink:0;
  }
  .sh-bay-header{
    position:absolute; top:-30px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:4px; font-size:10.5px; color:var(--text-dim);
  }
  .sh-bay-header button{
    background:none; border:none; cursor:pointer; color:var(--text-faint); font-size:12px; padding:1px 4px;
  }
  .sh-bay-header button:hover{ color:var(--accent); }
  .sh-bay.dragover{ background:var(--accent-soft); }
  .sh-part{
    position:absolute; left:2px; right:2px; border-radius:4px; cursor:grab; font-size:10px; color:#fff;
    display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;
    border:1px solid rgba(0,0,0,0.3); box-shadow:0 1px 3px rgba(0,0,0,0.25);
  }
  .sh-part:active{ cursor:grabbing; }
  .sh-part.collide{ outline:2px solid var(--danger); outline-offset:-1px; }
  .sh-part .sh-span{
    position:absolute; left:0; right:0; background:currentColor; opacity:0.15; pointer-events:none;
  }
  #sh-part-card{
    position:fixed; right:18px; bottom:18px; width:270px; background:var(--bg-elev); border:1px solid var(--border);
    border-radius:10px; padding:14px; box-shadow:var(--shadow); z-index:70;
  }

  @media (max-width:900px){
    #body{ flex-direction:column; overflow-y:auto; }
    #center{ flex:none; height:60vh; order:-1; }
    #left, #right{ width:100%; max-height:34vh; border:none; border-top:1px solid var(--border); }
    #floor-settings{ right:8px; left:8px; width:auto; }
  }