:root{
    --bg-0:#0e1116;
    --bg-1:#161b22;
    --bg-2:#1c232c;
    --bg-3:#232c37;
    --line:#2b333e;
    --line-strong:#3a4552;
    --text:#e6edf3;
    --text-dim:#8b96a3;
    --text-faint:#5b6672;
    --accent:#ff9f43;
    --accent-dim:#8a5a2a;
    --accent-soft:rgba(255,159,67,.14);
    --blue:#4fa3ff;
    --blue-soft:rgba(79,163,255,.14);
    --danger:#ff5f56;
    --danger-soft:rgba(255,95,86,.15);
    --success:#3ddc84;
    --radius:6px;
    --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Consolas,monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{
    background:var(--bg-0);
    color:var(--text);
    font-family:var(--sans);
    font-size:13px;
    overflow:hidden;
    user-select:none;
  }
  input, select, button{ font-family:inherit; font-size:inherit; }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:var(--bg-1); }
  ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:5px; }

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

  /* ---------- TOOLBAR ---------- */
  #toolbar{
    height:52px; flex:0 0 auto; display:flex; align-items:center; gap:6px;
    background:linear-gradient(var(--bg-2),var(--bg-1));
    border-bottom:1px solid var(--line); padding:0 10px; z-index:20;
  }
  .brand{ display:flex; align-items:center; gap:8px; margin-right:8px; }
  .brand .mark{
    width:26px;height:26px;border-radius:6px;
    background:conic-gradient(from 220deg,var(--accent),#ffd08a,var(--accent));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono); font-weight:700; color:#1a1200; font-size:13px;
  }
  .brand b{ font-weight:600; letter-spacing:.2px; }
  .brand span{ color:var(--text-faint); font-size:11px; }

  .tb-group{ display:flex; align-items:center; gap:2px; padding:0 6px; border-right:1px solid var(--line); height:32px; }
  .tb-group:last-of-type{ border-right:none; }
  .tb-btn{
    background:transparent; border:1px solid transparent; color:var(--text-dim);
    width:30px; height:30px; border-radius:var(--radius); cursor:pointer;
    display:flex;align-items:center;justify-content:center; font-size:15px;
    transition:background .12s,color .12s;
  }
  .tb-btn:hover{ background:var(--bg-3); color:var(--text); }
  .tb-btn.active{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-dim); }
  .tb-btn:disabled{ opacity:.3; cursor:default; }
  .tb-btn:disabled:hover{ background:transparent; color:var(--text-dim); }
  .tb-wide{ width:auto; padding:0 10px; gap:6px; font-size:12px; }
  .tb-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
  #zoomLabel{ font-family:var(--mono); color:var(--text-dim); font-size:11px; width:44px; text-align:center; }
  .spacer{ flex:1; }
  #projectNameInput{
    background:transparent;border:1px solid transparent;color:var(--text);
    font-size:13px;font-weight:600;padding:5px 8px;border-radius:var(--radius);width:180px;
  }
  #projectNameInput:hover, #projectNameInput:focus{ background:var(--bg-3); border-color:var(--line-strong); outline:none;}

  /* ---------- FLOOR BAR ---------- */
  #floorbar{
    height:36px; flex:0 0 auto; display:flex; align-items:center; gap:4px;
    background:var(--bg-1); border-bottom:1px solid var(--line); padding:0 10px; overflow-x:auto;
  }
  .floor-tab{
    display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:5px 5px 0 0;
    background:transparent; color:var(--text-dim); cursor:pointer; font-size:12px; border:1px solid transparent; border-bottom:none;
    white-space:nowrap;
  }
  .floor-tab.active{ background:var(--bg-2); color:var(--accent); border-color:var(--line); }
  .floor-tab .fnum{ font-family:var(--mono); color:var(--text-faint); font-size:10px; }
  .floor-rename-input{
    background:var(--bg-1); border:1px solid var(--accent-dim); color:var(--text);
    font-size:12px; font-family:inherit; padding:2px 5px; border-radius:3px; outline:none; width:120px;
  }
  .floor-tab.active .fnum{ color:var(--accent-dim); }
  #addFloorBtn{ color:var(--text-faint); }

  /* ---------- MAIN LAYOUT ---------- */
  #main{ flex:1; display:flex; min-height:0; }
  aside{ background:var(--bg-1); flex:0 0 auto; display:flex; flex-direction:column; min-height:0; }
  #leftPanel{ width:270px; border-right:1px solid var(--line); }
  #rightPanel{ width:288px; border-left:1px solid var(--line); }

  .panel-section{ border-bottom:1px solid var(--line); padding:12px; }
  .panel-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:700; margin-bottom:8px; }

  #searchBox{
    width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--text);
    padding:7px 9px; border-radius:var(--radius); outline:none;
  }
  #searchBox:focus{ border-color:var(--accent-dim); }

  .filter-row{ display:flex; align-items:center; gap:7px; padding:3px 0; font-size:12px; color:var(--text-dim); }
  .filter-row input{ accent-color:var(--accent); }
  .filter-row .dot{ width:8px;height:8px;border-radius:2px; }

  #libraryScroll{ flex:1; overflow-y:auto; padding:6px 10px 16px; }
  .lib-category{ margin-bottom:6px; }
  .lib-cat-head{
    display:flex; align-items:center; justify-content:space-between; padding:7px 4px;
    cursor:pointer; color:var(--text); font-weight:600; font-size:12px;
  }
  .lib-cat-head .chev{ color:var(--text-faint); transition:transform .15s; font-size:10px; }
  .lib-cat-head.collapsed .chev{ transform:rotate(-90deg); }
  .lib-items{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px 2px 8px; }
  .lib-items.collapsed{ display:none; }
  .lib-item{
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:8px 6px; display:flex; flex-direction:column; align-items:center; gap:5px;
    cursor:grab; text-align:center; position:relative;
  }
  .lib-stock{
    position:absolute; top:3px; right:4px; font-family:var(--mono); font-size:8.5px;
    color:var(--text-faint); background:var(--bg-3); border:1px solid var(--line);
    padding:1px 4px; border-radius:8px;
  }
  .lib-item:hover{ border-color:var(--accent-dim); background:var(--bg-3); }
  .lib-icon{ width:34px; height:26px; display:flex; align-items:center; justify-content:center; }
  .lib-item .lname{ font-size:10.5px; color:var(--text-dim); line-height:1.2; }

  /* ---------- CANVAS AREA ---------- */
  #canvasArea{ flex:1; position:relative; background:var(--bg-0); overflow:hidden; }
  #rulerCorner{ position:absolute; left:0; top:0; width:26px; height:22px; background:var(--bg-1); border-right:1px solid var(--line); border-bottom:1px solid var(--line); z-index:5; }
  #rulerTop{ position:absolute; left:26px; top:0; right:0; height:22px; background:var(--bg-1); border-bottom:1px solid var(--line); overflow:hidden; z-index:5; }
  #rulerLeft{ position:absolute; left:0; top:22px; bottom:0; width:26px; background:var(--bg-1); border-right:1px solid var(--line); overflow:hidden; z-index:5; }
  #canvasWrap{ position:absolute; left:26px; top:22px; right:0; bottom:0; overflow:hidden; }
  canvas{ display:block; position:absolute; left:0; top:0; }
  #hint{
    position:absolute; bottom:10px; left:36px; background:rgba(20,24,30,.85); border:1px solid var(--line);
    padding:6px 10px; border-radius:var(--radius); font-size:11px; color:var(--text-dim); font-family:var(--mono);
    pointer-events:none; z-index:6;
  }
  #collisionBanner{
    position:absolute; top:10px; left:50%; transform:translateX(-50%);
    background:var(--danger-soft); border:1px solid var(--danger); color:#ffb3ae;
    padding:6px 14px; border-radius:var(--radius); font-size:12px; display:none; z-index:6;
  }

  /* ---------- RIGHT PANEL ---------- */
  #rightPanel{ overflow-y:auto; }
  .prop-empty{ padding:20px 14px; color:var(--text-faint); font-size:12px; line-height:1.5; }
  .field{ margin-bottom:10px; }
  .field label{ display:block; font-size:10.5px; color:var(--text-faint); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
  .field input[type=text], .field input[type=number]{
    width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--text);
    padding:6px 8px; border-radius:var(--radius); outline:none; font-family:var(--mono); font-size:12.5px;
  }
  .field input[type=text]{ font-family:var(--sans); }
  .field textarea{
    width:100%; background:var(--bg-2); border:1px solid var(--line); color:var(--text);
    padding:6px 8px; border-radius:var(--radius); outline:none; font-family:var(--sans); font-size:12px;
    resize:vertical; min-height:44px;
  }
  .field textarea:focus{ border-color:var(--accent-dim); }
  .field input:focus{ border-color:var(--accent-dim); }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .field input[type=range]{ width:100%; accent-color:var(--accent); }
  .field input[type=color]{ width:100%; height:30px; border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); padding:2px; cursor:pointer; }
  .rangeval{ float:right; color:var(--text-dim); font-family:var(--mono); font-weight:400; text-transform:none; }
  .btn{
    background:var(--bg-2); border:1px solid var(--line); color:var(--text);
    padding:7px 10px; border-radius:var(--radius); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .btn:hover{ background:var(--bg-3); border-color:var(--line-strong); }
  .btn.primary{ background:var(--accent-soft); border-color:var(--accent-dim); color:var(--accent); }
  .btn.danger{ color:#ffb3ae; }
  .btn.danger:hover{ background:var(--danger-soft); border-color:var(--danger); }
  .btn.block{ width:100%; }
  .btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
  .btn-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:12px; color:var(--text-dim); }
  .switch{ position:relative; width:34px; height:19px; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider-tg{ position:absolute; inset:0; background:var(--bg-3); border:1px solid var(--line-strong); border-radius:20px; cursor:pointer; transition:.15s; }
  .slider-tg:before{ content:""; position:absolute; width:13px; height:13px; left:2px; top:2px; background:var(--text-dim); border-radius:50%; transition:.15s; }
  .switch input:checked + .slider-tg{ background:var(--accent-soft); border-color:var(--accent-dim); }
  .switch input:checked + .slider-tg:before{ transform:translateX(15px); background:var(--accent); }
  .multi-note{ padding:12px 14px; color:var(--text-dim); font-size:12px; background:var(--bg-2); margin:10px 12px; border-radius:var(--radius); border:1px solid var(--line); }
  .obj-title{ padding:12px 14px 4px; font-size:13px; font-weight:600; color:var(--text); display:flex; justify-content:space-between; align-items:center;}
  .cat-badge{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); background:var(--bg-3); padding:2px 6px; border-radius:4px; }

  /* ---------- PLAN LAYERS (multiple stacked reference images per floor) ---------- */
  .plan-layer{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:8px; background:var(--bg-2); overflow:hidden; }
  .plan-layer.active{ border-color:var(--accent-dim); box-shadow:0 0 0 1px var(--accent-dim) inset; }
  .plan-layer-head{ display:flex; align-items:center; gap:6px; padding:7px 8px; background:var(--bg-3); }
  .plan-layer-name{ flex:1; font-size:12px; font-weight:600; color:var(--text); cursor:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .plan-eye, .plan-move-btn, .plan-del, .plan-reorder-btn{
    background:transparent; border:1px solid var(--line); color:var(--text-dim); border-radius:4px;
    width:24px; height:24px; flex:0 0 auto; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center;
  }
  .plan-eye:hover, .plan-move-btn:hover, .plan-reorder-btn:hover{ background:var(--bg-1); color:var(--accent); }
  .plan-reorder-btn:disabled{ opacity:.3; cursor:default; }
  .plan-reorder-btn:disabled:hover{ background:transparent; color:var(--text-dim); }
  .plan-move-btn.primary{ background:var(--accent-soft); border-color:var(--accent-dim); color:var(--accent); }
  .plan-del:hover{ background:var(--danger-soft); border-color:var(--danger); color:#ffb3ae; }
  .plan-layer-body{ padding:9px 10px 4px; }

  /* ---------- INVENTORY INFO (from CSV import, editable) ---------- */
  .inv-table{ display:flex; flex-direction:column; gap:0; }
  .inv-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0;
    border-bottom:1px solid var(--line); font-size:11.5px;
  }
  .inv-row:last-child{ border-bottom:none; }
  .inv-label{ color:var(--text-faint); flex:0 0 auto; }
  .inv-input{
    flex:0 1 58%; min-width:0; text-align:right; background:var(--bg-2); border:1px solid var(--line);
    color:var(--text); font-family:var(--mono); font-size:11px; border-radius:4px; padding:4px 7px; outline:none;
  }
  .inv-input:focus{ border-color:var(--accent-dim); text-align:left; }
  .inv-input::placeholder{ color:var(--text-faint); }

  /* file input hidden */
  input[type=file]{ display:none; }

  .kbd{ font-family:var(--mono); background:var(--bg-3); border:1px solid var(--line-strong); border-radius:3px; padding:0 4px; font-size:10px; color:var(--text-dim); }

  /* ---------- LIGHT THEME ---------- */
  body.theme-light{
    --bg-0:#eef1f4;
    --bg-1:#ffffff;
    --bg-2:#f4f6f8;
    --bg-3:#e8ecf0;
    --line:#dde3e9;
    --line-strong:#c5ccd4;
    --text:#1c232c;
    --text-dim:#5b6672;
    --text-faint:#8b96a3;
    --accent:#c46a1b;
    --accent-dim:#e7b077;
    --accent-soft:rgba(196,106,27,.13);
    --blue:#2f6fd6;
    --blue-soft:rgba(47,111,214,.12);
    --danger:#d8433b;
    --danger-soft:rgba(216,67,59,.12);
    --success:#1f9e5c;
  }

  /* ---------- STATISTICS MODAL ---------- */
  .stats-overlay{
    position:fixed; inset:0; background:rgba(5,7,10,.55); display:none;
    align-items:center; justify-content:center; z-index:100;
  }
  .stats-overlay.open{ display:flex; }
  .stats-modal{
    width:560px; max-width:92vw; max-height:82vh; background:var(--bg-1);
    border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.5); overflow:hidden;
  }
  .stats-head{
    display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
    border-bottom:1px solid var(--line); background:var(--bg-2);
  }
  .stats-title{ font-size:15px; font-weight:700; }
  .stats-sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
  .stats-body{ padding:16px 18px; overflow-y:auto; }
  .stats-summary{
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;
  }
  .stats-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; text-align:center; }
  .stats-card .num{ font-family:var(--mono); font-size:20px; font-weight:700; color:var(--accent); }
  .stats-card .lbl{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
  .stats-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); }
  .stats-row:last-child{ border-bottom:none; }
  .stats-row .dot{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
  .stats-row .name{ flex:0 0 128px; font-size:12px; color:var(--text); }
  .stats-row .bar-wrap{ flex:1; background:var(--bg-3); border-radius:4px; height:8px; overflow:hidden; }
  .stats-row .bar{ height:100%; border-radius:4px; }
  .stats-row .count{ flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--text-dim); width:70px; text-align:right; }
  .stats-empty{ padding:24px 4px; text-align:center; color:var(--text-faint); font-size:12px; }

  /* ---------- SIDEBAR COLLAPSE ---------- */
  #leftPanel.collapsed, #rightPanel.collapsed{ display:none; }
  .edge-tab{
    flex:0 0 auto; width:14px; align-self:stretch; background:var(--bg-1); border:none;
    border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--text-faint);
    cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center;
    transition:background .12s,color .12s;
  }
  .edge-tab:hover{ background:var(--bg-3); color:var(--accent); }
  #leftEdgeTab{ border-left:none; }
  #rightEdgeTab{ border-right:none; }

  /* ---------- NAVIGATOR (pan control widget) ---------- */
  #navigator{
    position:absolute; bottom:12px; right:12px; z-index:7;
    background:rgba(20,24,30,.9); border:1px solid var(--line); border-radius:8px;
    padding:9px 10px 10px; width:150px; backdrop-filter:blur(2px);
  }
  body.theme-light #navigator{ background:rgba(255,255,255,.92); }
  .nav-title{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:6px; text-align:center; }
  .nav-pad{ display:grid; grid-template-columns:26px 26px 26px; grid-auto-rows:26px; gap:3px; justify-content:center; margin-bottom:8px; }
  .nav-btn{
    background:var(--bg-2); border:1px solid var(--line); color:var(--text-dim); border-radius:5px;
    cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; padding:0;
  }
  .nav-btn:hover{ background:var(--bg-3); color:var(--accent); border-color:var(--accent-dim); }
  #navHome{ font-size:13px; }
  .nav-coords{ display:flex; align-items:center; gap:5px; }
  .nav-coords label{ display:flex; align-items:center; gap:3px; font-size:10px; color:var(--text-faint); flex:1; min-width:0; }
  .nav-coords input{
    width:100%; min-width:0; background:var(--bg-2); border:1px solid var(--line); color:var(--text);
    font-family:var(--mono); font-size:10.5px; border-radius:4px; padding:3px 4px; outline:none;
  }
  .nav-coords input:focus{ border-color:var(--accent-dim); }
  .nav-unit{ font-size:9.5px; color:var(--text-faint); }

  /* ---------- FOCUS MODE (only the plan, no bars) ---------- */
  #focusExitBtn{
    display:none; position:absolute; top:12px; right:12px; z-index:30;
    background:rgba(20,24,30,.88); border:1px solid var(--line-strong); color:var(--text);
    padding:7px 12px; border-radius:6px; cursor:pointer; font-size:12px;
  }
  #focusExitBtn:hover{ background:var(--bg-3); border-color:var(--accent-dim); color:var(--accent); }
  body.focus-mode #toolbar,
  body.focus-mode #floorbar,
  body.focus-mode #leftPanel,
  body.focus-mode #rightPanel,
  body.focus-mode .edge-tab,
  body.focus-mode #hint,
  body.focus-mode #navigator,
  body.focus-mode #rulerCorner,
  body.focus-mode #rulerTop,
  body.focus-mode #rulerLeft{ display:none; }
  body.focus-mode #canvasWrap{ left:0; top:0; }
  body.focus-mode #focusExitBtn{ display:block; }