*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  :root{
    --void:#070a0e;
    /* 面板底色比设计稿更实：不用 backdrop-filter 之后，靠不透明度撑住层次 */
    --panel:rgba(9,13,18,.965);
    --panel-2:rgba(17,22,30,.985);
    --line:rgba(255,255,255,.075);
    --line-2:rgba(255,255,255,.15);
    --t1:#e8edf3;
    --t2:#93a0af;
    --t3:#596574;
    --acc:#e9b76c;
    --acc-s:rgba(233,183,108,.12);
    --ok:#54c8a4;
    --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Consolas,monospace;
    --r:9px;
    /* 原来这里是 blur(18px) saturate(130%)。
       面板盖在实时 3D canvas 上，backdrop-filter 会让浏览器每帧
       重算一次背景模糊——11 个面板叠加，实测能把窄屏直接拖死，
       而且背景本来就是一整片深色，模糊后和纯色几乎看不出差别。
       改成不模糊，性能收益远大于视觉损失。 */
    --blur:none;
  }
  html,body{height:100%;margin:0;overflow:hidden;background:var(--void);color:var(--t1);
    font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
    font-size:13px;-webkit-font-smoothing:antialiased}
  #c{position:absolute;left:0;top:0;display:block;cursor:grab;touch-action:none}
  #c.drag{cursor:grabbing}

  .hud{position:absolute;z-index:5}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    }

  /* ---------- 品牌 ---------- */
  .brand{top:16px;left:16px;display:flex;align-items:center;gap:11px;padding:10px 15px 10px 11px}
  .mark{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;
    border:1px solid rgba(233,183,108,.28);border-radius:7px;background:rgba(233,183,108,.06)}
  .mark svg{width:17px;height:17px;stroke:var(--acc);fill:none;stroke-width:1.35;
    stroke-linejoin:round;stroke-linecap:round}
  .brand .tt{font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.15}
  .brand .tt span{font-weight:400;color:var(--t2);font-size:11.5px;letter-spacing:.02em}
  .brand .meta{margin-top:5px;font-size:10.5px;color:var(--t3);font-family:var(--mono);letter-spacing:.02em}

  /* ---------- 右上工具条 ---------- */
  .toolbar{top:16px;right:16px;display:flex;align-items:center;gap:8px}
  .env{display:flex;gap:2px;padding:4px}
  .env button{width:36px;height:31px;display:grid;place-items:center;appearance:none;cursor:pointer;
    border:1px solid transparent;background:transparent;color:var(--t2);border-radius:6px;
    padding:0;transition:color .16s,background .16s,border-color .16s}
  .env button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round}
  .env button:hover{color:var(--t1);background:rgba(255,255,255,.05)}
  .env button.on{color:var(--acc);background:var(--acc-s);border-color:rgba(233,183,108,.26)}

  .mob-only{display:none}
  .icobtn{width:39px;height:39px;display:grid;place-items:center;appearance:none;cursor:pointer;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--t2);
    padding:0;
    transition:color .16s,border-color .16s,background .16s}
  .icobtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.45;
    stroke-linecap:round;stroke-linejoin:round}
  .icobtn:hover{color:var(--t1);border-color:var(--line-2)}
  .icobtn.on{color:var(--acc);border-color:rgba(233,183,108,.26);background:rgba(233,183,108,.09)}

  .edit-toggle{height:39px;padding:0 15px;display:flex;align-items:center;gap:7px;appearance:none;
    cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    color:var(--t1);font-family:inherit;font-size:12.5px;letter-spacing:.02em;
    transition:.16s}
  .edit-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round}
  .edit-toggle:hover{border-color:var(--line-2);background:var(--panel-2)}
  body.editing .edit-toggle{background:var(--acc);border-color:var(--acc);color:#0a0d12;font-weight:600}

  /* ---------- 左侧悬浮轨 ---------- */
  .rail{left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
    gap:2px;padding:5px;z-index:6}
  .rail button{width:37px;height:37px;display:grid;place-items:center;appearance:none;cursor:pointer;
    border:0;background:transparent;color:var(--t2);border-radius:6px;padding:0;transition:.14s}
  .rail button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.45;
    stroke-linecap:round;stroke-linejoin:round}
  .rail button:hover{color:var(--t1);background:rgba(255,255,255,.06)}
  .rail button.on{color:var(--acc)}
  .rail .dv{height:1px;margin:3px 7px;background:var(--line)}

  /* ---------- 设备面板 ---------- */
  .devices{top:70px;right:16px;bottom:16px;width:312px;display:flex;flex-direction:column;
    overflow:hidden;background:#080c11}
  .devices.off{display:none}
  .devices header{padding:11px 13px 10px;display:flex;align-items:baseline;
    justify-content:space-between;border-bottom:1px solid var(--line)}
  .devices header b{font-size:12.5px;font-weight:600;letter-spacing:.05em}
  .devices header em{font-style:normal;font-size:10.5px;color:var(--t3);font-family:var(--mono);
    letter-spacing:.04em}
  .meter-top{height:2px;background:rgba(255,255,255,.05);flex:0 0 auto}
  .meter-top i{display:block;height:100%;background:var(--acc);opacity:.75;
    transition:width .34s cubic-bezier(.22,.9,.3,1)}

  .list{overflow-y:auto;padding:4px 7px 12px;flex:1;scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.14) transparent;overscroll-behavior:contain}
  .list::-webkit-scrollbar{width:6px}
  .list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:3px}

  .grp{display:flex;align-items:center;gap:9px;font-size:9.5px;color:var(--t3);
    letter-spacing:.16em;font-family:var(--mono);padding:12px 8px 6px}
  .grp:after{content:'';flex:1;height:1px;background:var(--line)}

  .row{display:flex;align-items:center;gap:9px;height:38px;padding:0 8px;border-radius:6px;
    cursor:pointer;transition:background .12s}
  .row:hover{background:rgba(255,255,255,.045)}
  .row .ico{width:22px;display:grid;place-items:center;flex:0 0 auto;color:var(--t3);transition:color .2s}
  .row .ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round}
  .row.on .ico{color:var(--acc)}
  .row.sn.on .ico{color:var(--ok)}
  .row .nm{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;font-size:12.5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .row .nm i{font-style:normal;color:var(--t3);font-size:10px;flex:0 0 auto}
  .row .meter{width:44px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);
    overflow:hidden;flex:0 0 auto;cursor:ew-resize}
  .row .meter b{display:block;height:100%;border-radius:2px;background:var(--acc);
    transition:width .22s}
  .row .st{font-family:var(--mono);font-size:10.5px;color:var(--t3);min-width:36px;text-align:right;
    font-variant-numeric:tabular-nums}
  .row.on .st{color:var(--t2)}
  .row .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.12);
    flex:0 0 auto;transition:.2s}
  .row.on .dot{background:var(--acc);box-shadow:0 0 0 3px rgba(233,183,108,.13)}
  .row.sn.on .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(84,200,164,.13)}

  /* ---------- 场景 ---------- */
  .scenes{left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:6px;z-index:6}
  .scenes button{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;appearance:none;
    cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--t2);
    border-radius:8px;font-family:inherit;font-size:12.5px;letter-spacing:.03em;
    transition:.16s}
  .scenes button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round}
  .scenes button:hover{color:var(--t1);border-color:var(--line-2);background:var(--panel-2)}
  .scenes button.on{color:var(--acc);border-color:rgba(233,183,108,.42);
    background:rgba(233,183,108,.10)}
  .scenes button:active{transform:translateY(1px)}

  /* ---------- 左下读数 ---------- */
  .foot{left:16px;bottom:18px;display:flex;flex-direction:column;gap:9px;pointer-events:none}
  .readout{display:flex;align-items:flex-end;padding:9px 3px;pointer-events:auto}
  .readout>div{padding:0 13px;border-left:1px solid var(--line)}
  .readout>div:first-child{border-left:0;padding-left:11px}
  .readout em{display:block;font-style:normal;font-family:var(--mono);font-size:9px;
    letter-spacing:.15em;color:var(--t3);margin-bottom:5px}
  .readout b{font-family:var(--mono);font-size:14.5px;font-weight:500;color:var(--t1);
    font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .readout u{font-family:var(--mono);font-size:9.5px;color:var(--t3);text-decoration:none;
    margin-left:2px}
  .hint{font-size:10.5px;color:var(--t3);padding-left:12px;letter-spacing:.02em;line-height:1.7}
  .hint kbd{font-family:var(--mono);font-size:9.5px;border:1px solid var(--line-2);
    border-radius:3px;padding:1px 4px;color:var(--t2);margin:0 2px}

  .tip{position:absolute;z-index:9;pointer-events:none;padding:5px 9px;border-radius:5px;
    background:rgba(8,11,15,.94);border:1px solid var(--line-2);font-family:var(--mono);
    font-size:11px;color:var(--t1);opacity:0;transition:opacity .12s;white-space:nowrap;
    letter-spacing:.02em}

  /* ---------- 加载 ---------- */
  .loading{position:fixed;inset:0;z-index:30;background:var(--void);display:flex;
    align-items:center;justify-content:center;flex-direction:column;gap:20px;
    transition:opacity .5s}
  .loading .logo{width:46px;height:46px;stroke:var(--acc);fill:none;stroke-width:1.05;
    stroke-linejoin:round;stroke-linecap:round;opacity:.85}
  .loading p{margin:0;font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.3em}
  .loading .bar{width:200px;height:1px;background:rgba(255,255,255,.09);position:relative;
    overflow:hidden}
  .loading .bar i{position:absolute;top:0;height:100%;width:32%;background:var(--acc);
    animation:load 1.25s cubic-bezier(.45,0,.55,1) infinite}
  @keyframes load{0%{left:-32%}100%{left:100%}}

  /* ---------- 2D 编排 ---------- */
  /* 不要在这里写 max-width：宽度完全由 layout() 用内联 style 控制。
     之前加了 max-width:820px，而 layout 仍按 innerWidth*0.56 设 canvas.left，
     窗口一宽就出现「编辑器只到 820、画布从 840 开始」的中间黑缝。 */
  .editor{position:absolute;left:0;top:0;bottom:0;width:56%;
    background:#080b10;border-right:1px solid var(--line-2);display:none;
    flex-direction:column;z-index:7}
  body.editing .editor{display:flex}
  .ed-head{padding:15px 16px 13px;border-bottom:1px solid var(--line);
    display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .ed-head b{font-size:13px;font-weight:600;letter-spacing:.04em}
  .ed-head span{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.01em;
    text-align:right}
  .ed-main{flex:1;display:flex;min-height:0;min-width:0}
  /* 侧栏 166px 太窄：户型模式有三个门窗按钮 + 应用按钮组，
     166px 下"推拉""重新画"都会被挤成竖排换行。
     200px 刚好够工具按钮横排放下，同时不挤压画布。 */
  .ed-side{overflow-y:auto;overflow-x:hidden;width:200px;flex:0 0 200px;
    border-right:1px solid var(--line);padding:9px 8px 12px;scrollbar-width:thin}
  .ed-side::-webkit-scrollbar{width:5px;background:transparent}
  .ed-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:3px}
  /* 灯具模式下这些家具操作全都不适用，隐藏掉避免误点 */
  body.lamp-mode .ed-bar button:not(#btnLampHint):not(#btnTopView){display:none}
  body.lamp-mode .ed-bar #btnLampHint{display:inline-flex}
  body.lamp-mode .ed-bar #btnTopView{display:inline-flex}

  /* 户型模式：底部工具栏只保留户型真正用得上的。
     框选/旋转/复制/删除/撤销/导入/导出/重置 这些全是家具操作 ——
     户型模式下留着它们，用户会以为能对墙做这些事，点了却没反应。 */
  body.plan-mode .ed-bar button{display:none}
  body.plan-mode .ed-bar #btnTopView{display:inline-flex}
  body.plan-mode .ed-bar #btnPlanHint{display:inline-flex}
  body.plan-mode .ed-bar .sp{display:none}
  .ed-bar #btnLampHint{display:none}
  .ed-tabs{display:flex;gap:4px;padding:8px 8px 2px;position:sticky;top:0;
    background:#0c1016;z-index:2}
  .ed-tabs button{flex:1;padding:6px 0;font-size:11.5px;border-radius:5px;cursor:pointer;
    background:rgba(255,255,255,.05);color:#8b96a4;border:1px solid rgba(255,255,255,.09);
    font-family:inherit;transition:.14s}
  .ed-tabs button:hover{color:#cfd7e0;background:rgba(255,255,255,.08)}
  .ed-tabs button.on{background:rgba(233,183,108,.16);color:#e9b76c;
    border-color:rgba(233,183,108,.42)}
  .lamp-grid{display:flex;flex-direction:column;gap:5px;padding:2px 8px 4px}
  .lamp-grid button{display:flex;align-items:center;gap:8px;padding:7px 9px;cursor:pointer;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
    border-radius:6px;color:#c3ccd7;font-family:inherit;font-size:12px;text-align:left;
    transition:.14s}
  .lamp-grid button:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
  .lamp-grid button .ico{flex:0 0 20px;height:20px;color:#e9b76c}
  .lamp-grid button .nm{flex:1;line-height:1.3}
  .lamp-grid button .nt{display:block;font-size:10px;color:#6b7684;margin-top:1px}
  /* ---------------- 户型编辑器面板 ----------------
     参照成熟工具（Figma / SketchUp / 酷家乐）的侧栏语言：
     · 工具按钮带图标 + 文字，不是光秃秃的两个字
     · 选中态用暖色描边 + 淡底，一眼看出当前在哪个模式
     · 统计做成三列小卡片，而不是一行挤在一起的文字
     之前那版是纯文字按钮 + 一行 "墙体：0 段"，
     信息密度低、也看不出当前激活的是哪个工具。 */
  .plan-tools{display:flex;gap:5px;padding:0 10px;margin-bottom:5px}
  .plan-tools .ptool{flex:1 1 0;min-width:0;display:flex;align-items:center;
    justify-content:center;gap:4px;padding:7px 2px;border-radius:7px;cursor:pointer;
    white-space:nowrap;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
    color:#a8b3bf;font-size:11px;transition:background .14s,color .14s,border-color .14s}
  .plan-tools .ptool span{overflow:hidden;text-overflow:ellipsis}
  .plan-tools .ptool svg{width:12px;height:12px;fill:none;stroke:currentColor;
    stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .plan-tools .ptool:hover{background:rgba(255,255,255,.085);color:#e4e9ee}
  .plan-tools .ptool.on{background:rgba(233,183,108,.15);
    border-color:rgba(233,183,108,.55);color:#e9b76c;
    box-shadow:inset 0 0 0 1px rgba(233,183,108,.12)}
  .plan-tools .ptool.danger:hover{background:rgba(215,85,85,.16);
    border-color:rgba(215,85,85,.5);color:#f08a8a}

  /* 吸附开关：方框 + 文字，和工具按钮视觉重量区分开 */
  .plan-chk{display:flex;align-items:center;gap:7px;padding:4px 12px;
    font-size:11.5px;color:#9aa5b2;cursor:pointer;user-select:none}
  .plan-chk:hover{color:#c8d2de}
  .plan-chk input{appearance:none;width:13px;height:13px;flex:none;
    border:1px solid rgba(255,255,255,.22);border-radius:3.5px;
    background:rgba(0,0,0,.25);cursor:pointer;position:relative;transition:.14s}
  .plan-chk input:checked{background:#e9b76c;border-color:#e9b76c}
  .plan-chk input:checked::after{content:'';position:absolute;
    left:4px;top:1px;width:3.5px;height:7px;
    border:solid #1a1f27;border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}

  /* 分组：每个功能区独立成块，块间留白。
     之前所有按钮平铺在一起，"画墙"和"导出"视觉权重一样，很难扫读。 */
  .plan-group{margin-bottom:7px}
  .plan-group .side-title{margin-bottom:5px}

  /* 主操作按钮：应用户型是这一屏唯一"往前走"的动作，
     给它实心暖色底，和其它工具按钮明显区分。 */
  .plan-apply{padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.07);
    margin-top:8px}
  .plan-apply .papply{width:100%;padding:9px 0;border-radius:7px;cursor:pointer;
    background:#e9b76c;border:1px solid #e9b76c;color:#1a1f27;
    font-size:12.5px;font-weight:600;letter-spacing:.02em;transition:.14s}
  .plan-apply .papply:hover{background:#f0c482}
  .plan-apply .papply:disabled{background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.09);color:#5e6874;cursor:not-allowed}
  .plan-apply .papply-row{display:flex;gap:6px;margin-top:7px}
  .plan-apply .papply-row .ptool{flex:1 1 0;min-width:0;padding:7px 2px;font-size:10.5px;
    white-space:nowrap}
  /* 侧栏窄的时候，三个按钮里的图标会让文字挤成竖排 —— 这里干脆不显示图标 */
  .plan-apply .papply-row .ptool svg{display:none}
  .plan-apply .plink{display:block;width:100%;margin-top:8px;padding:5px 0;
    background:none;border:none;color:#6f7a87;font-size:11px;cursor:pointer}
  .plan-apply .plink:hover{color:#a8b3bf;text-decoration:underline}

  /* 参数输入行（墙厚等） */
  .plan-field{display:flex;align-items:center;gap:6px;padding:5px 12px 2px;
    font-size:11px;color:#9aa5b2}
  .plan-field span{flex:none;width:28px}
  .plan-field input[type=range]{flex:1;min-width:0;height:3px;-webkit-appearance:none;
    background:rgba(255,255,255,.14);border-radius:2px;outline:none}
  .plan-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
    width:12px;height:12px;border-radius:50%;background:#e9b76c;cursor:pointer}
  .plan-field b{flex:none;width:44px;text-align:right;font-family:var(--mono);
    font-size:10.5px;color:#e9b76c;font-weight:600}

  /* 选中物体后的属性面板 */
  .plan-props{margin:6px 9px 0;padding:8px 9px;border-radius:7px;
    background:rgba(233,183,108,.07);border:1px solid rgba(233,183,108,.22)}
  .plan-props .pp-title{font-size:11px;color:#e9b76c;font-weight:600;margin-bottom:6px;
    display:flex;align-items:center;justify-content:space-between}
  .plan-props .pp-title button{background:none;border:none;color:#6f7a87;
    cursor:pointer;font-size:10px;padding:0}
  .plan-props .pp-title button:hover{color:#a8b3bf}
  .plan-props .pp-row{display:flex;align-items:center;gap:5px;margin-bottom:4px;
    font-size:10.5px;color:#9aa5b2}
  .plan-props .pp-row span{flex:none;width:34px}
  /* 数字输入框。
     ────────────────────────────────────────────────────────────────
     原生 input[type=number] 的上下箭头是浏览器画的，在深色主题下
     是两块白底小方块，和整体风格完全不搭（用户说的"加减 UI 不好看"）。

     这里三步改造：
       ① 去掉原生 spinner（appearance:none）
       ② 自绘步进按钮：右对齐的两个窄按钮，用 SVG 三角
       ③ 输入框本体只留数字，失焦时补全格式 */
  .plan-props .pp-row input[type=number]{flex:1;min-width:0;width:100%;
    background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.11);
    border-radius:4px;color:#e4e9ee;font-family:var(--mono);font-size:11px;
    padding:3px 5px;outline:none;
    -moz-appearance:textfield;appearance:textfield}
  .plan-props .pp-row input[type=number]::-webkit-outer-spin-button,
  .plan-props .pp-row input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0}

  /* 自绘步进器：包住 input，右上/右下两个小三角 */
  .pp-step{position:relative;flex:1;min-width:0;display:flex}
  .pp-step input{padding-right:17px}
  .pp-step .stp{position:absolute;right:1px;width:15px;height:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.045);border:none;cursor:pointer;
    color:#8b96a4;transition:background .12s,color .12s;padding:0}
  .pp-step .stp:hover{background:rgba(233,183,108,.22);color:#e9b76c}
  .pp-step .stp.up{top:1px;border-radius:0 3px 0 0}
  .pp-step .stp.dn{bottom:1px;border-radius:0 0 3px 0}
  .pp-step .stp svg{width:7px;height:7px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .plan-props .pp-row input[type=number]:focus{border-color:rgba(233,183,108,.5)}
  .plan-props .pp-row b{flex:none;font-size:10px;color:#6f7a87;width:16px}
  .plan-props .pp-ro{flex:1;font-style:normal;font-family:var(--mono);font-size:11px;
    color:#9aa5b2}
  .plan-props .pp-tip{margin:6px 0 2px;padding:5px 6px;border-radius:4px;
    background:rgba(233,183,108,.1);font-size:10px;line-height:1.5;color:#b9a583}
  .plan-props .pp-tip b{color:#e9b76c;font-weight:600}
  .plan-props .pp-actions{display:flex;gap:5px;margin-top:7px}
  .plan-props .pp-actions button{flex:1;padding:5px 0;border-radius:5px;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    color:#a8b3bf;font-size:10.5px}
  .plan-props .pp-actions button:hover{background:rgba(255,255,255,.09);color:#e4e9ee}
  .plan-props .pp-actions button.del:hover{background:rgba(215,85,85,.16);
    border-color:rgba(215,85,85,.45);color:#f08a8a}

  .plan-hint{padding:7px 12px 3px;font-size:10.5px;line-height:1.55;color:#78838f}
  .plan-hint b{color:#c3ccd6;font-weight:600}
  .plan-hint b{color:#c3ccd6;font-weight:600}

  /* 统计三列卡：墙数 / 房间数 / 尺寸，比一行文字好扫读 */
  .plan-stat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:3px 10px 6px}
  .plan-stat div{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
    border-radius:6px;padding:7px 4px 6px;text-align:center}
  .plan-stat em{display:block;font-style:normal;font-size:9.5px;color:#6f7a87;
    letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
  .plan-stat b{display:block;font-family:var(--mono);font-size:12.5px;
    font-weight:600;color:#e9b76c;letter-spacing:.02em}
  .lamp-bright{display:flex;align-items:center;gap:8px;margin-top:8px;width:100%;
    padding-top:8px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:#8b96a4}
  .lamp-bright input[type=range]{flex:1;min-width:80px;max-width:180px;height:3px;
    -webkit-appearance:none;background:rgba(255,255,255,.14);border-radius:2px;outline:none}
  .lamp-bright input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
    width:13px;height:13px;border-radius:50%;background:#e9b76c;cursor:pointer;
    box-shadow:0 0 6px rgba(233,183,108,.5)}
  .lamp-bright b{min-width:34px;text-align:right;color:#e9b76c;font-weight:600}
  .lamp-list{padding:0 8px 8px;display:flex;flex-direction:column;gap:3px}
  .lamp-list .li{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:4px;
    font-size:11px;color:#8f9aa8;cursor:pointer;transition:.12s}
  .lamp-list .li:hover{background:rgba(255,255,255,.06);color:#cfd7e0}
  .lamp-list .li.on{background:rgba(233,183,108,.14);color:#e9b76c}
  .lamp-list .li i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);flex:0 0 6px}
  .lamp-list .li.on i{background:#e9b76c;box-shadow:0 0 6px rgba(233,183,108,.7)}
  .side-title{font-family:var(--mono);font-size:9.5px;color:var(--t3);letter-spacing:.18em;
    padding:2px 3px 9px}
  .lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
  .lib-grp{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-family:var(--mono);
    font-size:9px;color:var(--t3);letter-spacing:.16em;padding:11px 3px 4px}
  .lib-grp:after{content:'';flex:1;height:1px;background:var(--line)}
  .lib-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 7px;
    border:1px solid rgba(255,255,255,.07);border-radius:7px;cursor:pointer;
    background:rgba(255,255,255,.018);transition:.13s}
  .lib-item:hover{background:rgba(255,255,255,.06);border-color:rgba(233,183,108,.45)}
  .lib-item:active{transform:translateY(1px)}
  .lib-item svg{width:24px;height:24px;stroke:#a9b3c0;fill:none;stroke-width:1.25;
    stroke-linecap:round;stroke-linejoin:round}
  .lib-item:hover svg{stroke:var(--acc)}
  .lib-item span{font-size:9.5px;color:var(--t2);white-space:nowrap}

  .ed-wrap{flex:1;position:relative;min-width:0;min-height:0;overflow:hidden}
  #ed{display:block;width:100%;height:100%;touch-action:none}

  .ed-bar{display:flex;gap:7px;padding:11px 14px;border-top:1px solid var(--line);
    align-items:center;flex-wrap:wrap}
  .ed-bar button,.ed-props input{font-family:inherit;font-size:12px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.11);color:#d3d9e2;border-radius:6px;padding:7px 11px;
    outline:none;transition:.13s}
  .ed-bar button{cursor:pointer}
  .ed-bar button:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2)}
  .ed-bar button.primary{background:var(--acc);color:#0a0d12;border-color:var(--acc);font-weight:600}
  .ed-bar .sp{flex:1}
  .ed-props{padding:11px 14px 13px;border-top:1px solid var(--line);font-size:12px;
    color:var(--t3);display:flex;gap:16px;align-items:center;flex-wrap:wrap;min-height:48px}
  .ed-props label{display:flex;align-items:center;gap:7px;color:var(--t3);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
  .ed-props input{width:66px;color:var(--t1);font-family:var(--mono);font-size:11.5px;
    padding:6px 8px;font-variant-numeric:tabular-nums}
  .ed-props .nm{color:var(--t1);font-size:12.5px;min-width:70px}
  .ed-props .hint2{color:var(--t3);font-size:11px}

  .selbar{position:absolute;left:10px;right:10px;bottom:10px;display:none;align-items:center;
    gap:7px;padding:8px 11px;background:rgba(16,21,28,.96);
    border:1px solid rgba(233,183,108,.34);border-radius:8px;font-size:12px;color:var(--t1);
    z-index:4;flex-wrap:wrap;box-shadow:0 10px 30px -12px rgba(0,0,0,.82)}
  .selbar.on{display:flex}
  .selbar b{font-weight:600;font-size:12.5px}
  .selbar .dim{color:var(--t3);font-family:var(--mono);font-size:10.5px;
    font-variant-numeric:tabular-nums}
  .selbar .sp{flex:1}
  .selbar button{appearance:none;border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);color:#cfd5de;font:inherit;font-size:11px;padding:5px 9px;
    border-radius:5px;cursor:pointer;transition:.12s;font-family:var(--mono)}
  .selbar button:hover{background:rgba(255,255,255,.12);color:#fff}
  .selbar input{width:64px;font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);color:var(--t1);border-radius:5px;padding:5px 7px;
    outline:none}

  .splitter{position:absolute;top:0;bottom:0;width:11px;margin-left:-5px;
    cursor:col-resize;z-index:10;display:none}
  body.editing .splitter{display:block}
  .splitter:after{content:'';position:absolute;left:5px;top:0;bottom:0;width:1px;
    background:var(--line-2);transition:.15s}
  .splitter:hover:after{background:var(--acc);width:2px;left:4.5px}

  body.editing .devices,body.editing .scenes,body.editing .env,
  body.editing .foot,body.editing .rail{display:none}

  /* ---------- 窄屏 ---------- */
  @media (max-width:900px){
    .rail,.foot{display:none}
    .devices{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:44vh}
    .scenes{left:12px;right:12px;transform:none;justify-content:center;flex-wrap:wrap;
      bottom:calc(44vh + 16px);gap:5px}
    .scenes button{flex:1;justify-content:center;min-width:0;padding:0 6px;font-size:12px;gap:5px}
    .scenes button svg{width:14px;height:14px}
    .brand{left:12px;top:12px;padding:8px 12px 8px 9px;gap:9px}
    .brand .tt{font-size:13px}
    .brand .tt span{display:none}
    .brand .mark{width:26px;height:26px}
    .brand .mark svg{width:15px;height:15px}
    .toolbar{right:12px;top:12px;gap:6px}
    .edit-toggle{padding:0 11px}
    .edit-toggle .lb{display:none}
    .env button{width:32px;height:29px}
    .icobtn{width:37px;height:37px}
    .editor{width:100%;max-width:none}
    body.editing .devices{display:none}
    .ed-side{width:150px;flex:0 0 150px}
    .lib-grid{grid-template-columns:1fr}
  }

  /* ---------- 主程序补充 ---------- */
  /* 剖切/灯具这类开关沿用 icobtn，但要在 env 组外独立排布 */
  .toolbar .icobtn{flex:0 0 auto}
  /* 设备行的图标列（灯光/窗帘/传感器各自一个线性图标） */
  .row .ico{width:22px;display:grid;place-items:center;flex:0 0 auto;color:var(--t3);transition:color .2s}
  .row .ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;
    stroke-linecap:round;stroke-linejoin:round}
  .row.on .ico{color:var(--acc)}
  .row.sn.on .ico{color:var(--ok)}
  /* 亮度条：可横向拖动，所以要比纯装饰条厚一点，便于命中 */
  .row .meter{width:44px;height:4px;border-radius:2px;background:rgba(255,255,255,.09);
    overflow:hidden;flex:0 0 auto;cursor:ew-resize;position:relative}
  .row .meter b{display:block;height:100%;border-radius:2px;background:var(--acc);
    transition:width .18s}
  /* 拖动时不跟手会很难受，取消过渡 */
  .row .meter.dragging b{transition:none}
  /* 灯关着时亮度条转灰：亮度值仍然是 100%，但视觉上必须能一眼区分
     「这盏灯是关的」和「这盏灯开满」——否则一列橙色条全是噪音。 */
  .row:not(.on) .meter b{background:rgba(255,255,255,.16)}
  /* 亮度条在暗态下也别太抢眼，指针移上去才提亮 */
  .row:not(.on) .meter:hover{background:rgba(255,255,255,.14)}
  /* 面板隐藏态（由左侧 rail 控制） */
  .devices.off{display:none}
  /* 编排模式下 2D 画布的空状态提示 */
  .ed-empty{position:absolute;inset:0;display:grid;place-items:center;
    color:var(--t3);font-size:12px;pointer-events:none}


  /* ══════════════════════════════════════════════════════════════════
     移动端适配
     ────────────────────────────────────────────────────────────────
     设计原则：
       · **只读**。编辑、户型绘制、家具编排全部屏蔽 —— 手机上没有
         精细拖拽的条件，硬做出来只会更糟。移动端就是"看"的工具。
       · 手势优先：单指旋转、双指缩放 + 平移、双击复位。
       · 竖屏 / 横屏两套布局：竖屏顶部信息条 + 底部横滑场景条；
         横屏把信息条收窄、场景条竖排到右侧。
       · 所有可点区域 ≥ 44px（Apple HIG 的最小触控尺寸）。
     ══════════════════════════════════════════════════════════════════ */

  html.is-mobile, html.is-mobile body{
    overscroll-behavior:none;      /* 禁止下拉刷新 / 橡皮筋 */
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }

  /* ---- 隐藏一切编辑入口 ---- */
  html.is-mobile .edit-toggle,
  html.is-mobile .editor,
  html.is-mobile .splitter,
  html.is-mobile .rail,          /* 左侧竖向工具栏（桌面才需要） */
  html.is-mobile .foot{          /* 底部快捷键说明 */
    display:none !important;
  }

  /* ---- 顶栏：品牌 + 环境切换，压缩成一行 ---- */
  html.is-mobile .brand{
    left:10px; top:calc(10px + env(safe-area-inset-top, 0px));
    padding:7px 10px 7px 8px; gap:7px;
    border-radius:12px; backdrop-filter:blur(18px);
    z-index:50;
  }
  html.is-mobile .brand .tt{font-size:12.5px; line-height:1.15}
  html.is-mobile .brand .tt span{display:none}
  html.is-mobile .brand .mark{width:26px; height:26px; border-radius:8px}
  html.is-mobile .brand .mark svg{width:14px; height:14px}

  /* 移动端工具栏：改成**底部浮动条**，不再挤在右上角。
     ────────────────────────────────────────────────────────────────
     原来放在右上角有三个问题：
       ① 和品牌块抢空间，390px 屏上必须缩到 34px 才能塞下
       ② 手机右手单手握持时，右上角是最难够到的区域
       ③ 视觉上"顶部一堆按钮 + 底部一堆按钮"，中间全是空的

     现在把「环境切换 + 剖切 + 灯 + 设备」全部收到底部，
     和场景按钮合成一条**底部操作栏** —— 拇指活动区内，单手可及。
     顶部只留品牌块和（右上角的）房间聚焦提示。 */
  html.is-mobile .toolbar{
    /* .hud 是 position:absolute，必须同时清掉 top 才能让 bottom 生效。
       上一版只写了 top:auto，而 .toolbar 桌面规则里是 top:16px，
       优先级冲突导致它其实还留在顶部、和品牌块叠在一起。
       底下用 !important 彻底压掉桌面值。 */
    left:50%;
    top:auto !important;
    right:auto !important;
    bottom:calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    transform:translateX(-50%);
    /* ★ 必须给死高度 ★
       .hud 是 position:absolute，同时设 top:auto + bottom 之后，
       如果高度没约束，浏览器会把块撑到"从 bottom 一直延伸上去" ——
       实测被撑成了 306x731 的巨型灰块，把整个画面盖住了。
       这里用 height + align-items 明确锁死。 */
    height:auto;
    max-height:56px;
    width:max-content;
    max-width:calc(100vw - 20px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px; padding:5px 6px;
    background:rgba(14,18,25,.78);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    box-shadow:0 8px 28px rgba(0,0,0,.45);
    flex-wrap:nowrap;
    overflow:visible;
    z-index:55;
  }
  html.is-mobile .env{
    gap:2px; padding:2px; border-radius:10px;
    background:rgba(255,255,255,.045);
  }
  html.is-mobile .env button{
    width:34px; height:34px; border-radius:8px;
  }
  html.is-mobile .env button svg{width:16px; height:16px}
  html.is-mobile .icobtn{
    width:42px; height:42px; border-radius:11px;
  }
  html.is-mobile .icobtn svg{width:17px; height:17px}

  /* ---- 设备面板：从底部升起的抽屉 ----
     ★ 默认必须收起 ★
     桌面版的 .devices 是常驻侧栏，移动端如果直接继承，
     面板会盖住大半个屏幕（用户反馈的"灰色大块"就是这个）。
     这里用 display:none 彻底移出布局，只有 .open 时才出现。 */
  html.is-mobile .devices{
    display:none;
    left:0; right:0; top:auto; bottom:0; width:auto;
    height:auto; max-height:56vh;
    border-radius:18px 18px 0 0;
    border-left:none; border-right:none; border-bottom:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    z-index:70;
  }
  html.is-mobile .devices.open{
    display:flex;
    animation:sheetUp .24s cubic-bezier(.32,.72,0,1);
  }
  @keyframes sheetUp{
    from{ transform:translateY(100%); opacity:.4 }
    to  { transform:translateY(0); opacity:1 }
  }
  /* 抽屉把手 */
  html.is-mobile .devices::before{
    content:''; display:block; width:38px; height:4px; border-radius:2px;
    background:rgba(255,255,255,.2); margin:8px auto 2px; flex:none;
  }
  html.is-mobile .devices .hd{
    padding:2px 14px 8px; font-size:12px;
  }
  /* 移动端设备行加大触控面积 */
  html.is-mobile .devrow{min-height:46px}
  html.is-mobile .devrow .sw{width:44px; height:26px}
  html.is-mobile .devrow .sw i{width:20px; height:20px}

  /* ---- 场景按钮：竖屏底部横滑，横屏右侧竖排 ---- */
  html.is-mobile .scenes{
    left:0; right:0; bottom:0; transform:none;
    padding:0 10px calc(12px + env(safe-area-inset-bottom, 0px));
    gap:6px; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    transition:bottom .28s cubic-bezier(.32,.72,0,1);
  }
  html.is-mobile .scenes::-webkit-scrollbar{display:none}
  html.is-mobile .scenes button{
    flex:0 0 auto; min-width:0; padding:0 13px; height:42px;
    font-size:12px; gap:6px; border-radius:12px;
    white-space:nowrap;
  }
  html.is-mobile .scenes button svg{width:15px; height:15px}

  /* 抽屉打开时：底部操作栏和场景条都要往上让位，
     否则会被抽屉压住（抽屉 z-index 更高，看起来像"按钮消失了"）。 */
  html.is-mobile.body-drawer .scenes{
    bottom:calc(56vh - 8px);
  }
  /* ⚠ 必须带 !important：上面的 html.is-mobile .toolbar 里
     bottom 用了 !important，这条不带的话会被压掉 ——
     结果抽屉打开时操作栏没上移、被抽屉完全盖住，
     用户点「设备」按钮关不掉（这是"打开就退不回去"的直接原因）。 */
  html.is-mobile.body-drawer .toolbar{
    bottom:calc(56vh + 62px) !important;
  }

  /* ══ 方案面板 ══ */
  .scheme-mask{
    position:fixed; inset:0; z-index:200;
    background:rgba(4,7,11,.55);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .18s;
  }
  .scheme-mask.on{ opacity:1; pointer-events:auto }

  .scheme-panel{
    position:fixed; z-index:201;
    top:50%; left:50%; transform:translate(-50%,-50%) scale(.97);
    width:min(370px, calc(100vw - 28px));
    max-height:min(76vh, 620px);
    display:flex; flex-direction:column;
    background:rgba(13,17,23,.97);
    border:1px solid rgba(255,255,255,.11);
    border-radius:16px;
    box-shadow:0 24px 64px rgba(0,0,0,.6);
    opacity:0; pointer-events:none;
    transition:opacity .18s, transform .18s cubic-bezier(.32,.72,0,1);
    overflow:hidden;
  }
  .scheme-panel.on{
    opacity:1; pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
  }
  .scheme-panel header{
    display:flex; align-items:center; justify-content:space-between;
    padding:13px 15px 12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    flex:0 0 auto;
  }
  .sc-hd-l{display:flex; align-items:center; gap:8px; color:#dfe6ee}
  .sc-hd-l b{font-size:13.5px; font-weight:600; letter-spacing:.03em}
  .sc-close{
    width:28px; height:28px; display:grid; place-items:center;
    border:none; border-radius:8px; background:rgba(255,255,255,.06);
    color:#9aa6b4; cursor:pointer;
  }
  .sc-close:hover{background:rgba(255,255,255,.13); color:#fff}

  .sc-body{
    padding:12px 15px 16px; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sc-cur{
    display:flex; align-items:baseline; gap:8px;
    margin-bottom:10px; padding:8px 10px;
    background:rgba(233,183,108,.10);
    border:1px solid rgba(233,183,108,.22);
    border-radius:9px;
  }
  .sc-cur-lb{font-size:10px; color:#9aa6b4; flex:0 0 auto}
  .sc-cur-nm{font-size:12.5px; color:#f0c98a; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  .sc-list{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
  .sc-item{
    display:flex; align-items:center; gap:9px;
    padding:9px 10px; border-radius:10px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    cursor:pointer; transition:background .14s, border-color .14s;
  }
  .sc-item:hover{background:rgba(255,255,255,.075)}
  .sc-item.active{
    background:rgba(120,170,230,.14);
    border-color:rgba(120,170,230,.4);
  }
  .sc-item-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
  .sc-item-nm{
    font-size:12.5px; color:#e6ecf3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sc-item-meta{font-size:10px; color:#7d8794; display:flex; gap:7px; align-items:center}
  .sc-tag{
    padding:1px 5px; border-radius:4px; font-size:9px;
    background:rgba(255,255,255,.09); color:#a8b3c0;
  }
  .sc-tag.builtin{background:rgba(233,183,108,.18); color:#e9b76c}
  .sc-tag.cur{background:rgba(120,170,230,.22); color:#9cc4ee}
  .sc-item-ops{display:flex; gap:4px; flex:0 0 auto}
  .sc-op{
    width:26px; height:26px; display:grid; place-items:center;
    border:none; border-radius:7px; background:transparent;
    color:#7d8794; cursor:pointer; font-size:13px; line-height:1;
  }
  .sc-op:hover{background:rgba(255,255,255,.11); color:#dfe6ee}
  .sc-op.del:hover{background:rgba(230,110,110,.2); color:#f09090}

  .sc-actions{display:flex; gap:7px}
  .sc-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:9px 10px; border-radius:9px;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.05);
    color:#d3dbe4; font-size:12px; cursor:pointer;
    transition:background .14s, border-color .14s;
  }
  .sc-btn:hover{background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.2)}
  .sc-btn.primary{
    background:rgba(120,170,230,.18);
    border-color:rgba(120,170,230,.42);
    color:#cfe2f7;
  }
  .sc-btn.primary:hover{background:rgba(120,170,230,.3)}
  .sc-sep{
    display:flex; align-items:center; gap:9px;
    margin:14px 0 9px; color:#6d7784; font-size:10px;
  }
  .sc-sep::before, .sc-sep::after{
    content:''; flex:1; height:1px; background:rgba(255,255,255,.08);
  }
  .sc-tip{
    margin:9px 0 0; font-size:10px; line-height:1.55; color:#6d7784;
  }

  /* 移动端：面板改成底部抽屉，避免居中弹窗被键盘/安全区挤压 */
  html.is-mobile .scheme-panel{
    top:auto; bottom:0; left:0; transform:translateY(100%);
    width:100%; max-height:78vh;
    border-radius:18px 18px 0 0;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  html.is-mobile .scheme-panel.on{ transform:translateY(0) }
  html.is-mobile .sc-btn{padding:12px 10px; font-size:12.5px}
  html.is-mobile .sc-op{width:32px; height:32px}

  /* 户型只读提示条 */
  .plan-ro-bar{
    margin:0 0 10px; padding:9px 10px;
    background:linear-gradient(180deg, rgba(233,183,108,.13), rgba(233,183,108,.06));
    border:1px solid rgba(233,183,108,.28);
    border-radius:9px;
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  }
  .plan-ro-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
  .plan-ro-txt b{font-size:11.5px; color:#e9b76c; font-weight:600}
  .plan-ro-txt span{font-size:10px; color:#8b96a4; line-height:1.35}
  .plan-ro-btn{
    flex:0 0 auto;
    padding:6px 10px; border-radius:7px;
    border:1px solid rgba(233,183,108,.45);
    background:rgba(233,183,108,.16);
    color:#f0c98a; font-size:10.5px; font-weight:600;
    cursor:pointer; white-space:nowrap;
  }
  .plan-ro-btn:hover{background:rgba(233,183,108,.28); color:#fff}
  .plan-ro-btn:active{transform:scale(.97)}

  /* 抽屉头部的关闭按钮 */
  html.is-mobile .devices .drawer-close{
    width:30px; height:30px; flex:0 0 auto;
    display:grid; place-items:center;
    border:none; border-radius:9px;
    background:rgba(255,255,255,.07);
    color:#aab4c0;
    margin-left:auto;
    cursor:pointer;
  }
  html.is-mobile .devices .drawer-close:active{
    background:rgba(255,255,255,.16); color:#fff;
  }

  /* ---- 房间标签：移动端缩小，避免糊满屏幕 ---- */
  /* 房间标签：移动端缩小到 9px，并把不透明度降一点，
     否则一块块深色胶囊糊满整个小屏幕，看不清户型。 */
  html.is-mobile .roomlabel{
    font-size:9px !important;
    padding:2px 6px !important;
    opacity:.82;
  }

  /* ---- 安全区 ---- */
  html.is-mobile .brand{top:calc(10px + env(safe-area-inset-top, 0px))}
  html.is-mobile .toolbar{top:calc(10px + env(safe-area-inset-top, 0px))}

  /* ══ 横屏：Landscape ══
     横屏时屏幕高度很小（通常 375–430px），顶部两个条 + 底部场景条
     一挤就没什么可视区了。所以：
       · 品牌块只留图标
       · 场景条改为右侧竖排（利用横向多出来的宽度）
       · 设备抽屉改成右侧侧栏 */
  @media (orientation:landscape) and (max-height:520px){
    html.is-mobile .brand{
      padding:6px; border-radius:10px;
      top:calc(6px + env(safe-area-inset-top, 0px));
    }
    /* 横屏时高度只有 ~390px，顶栏必须压扁，否则和场景条、品牌块挤在一起 */
    html.is-mobile .toolbar{
      top:calc(6px + env(safe-area-inset-top, 0px));
      right:8px; gap:3px;
      max-width:calc(100vw - 70px);
    }
    html.is-mobile .env button{width:32px; height:32px}
    html.is-mobile .icobtn{width:34px; height:34px}
    html.is-mobile .icobtn svg{width:15px; height:15px}
    html.is-mobile .brand .tt{display:none}
    html.is-mobile .brand .mark{width:30px; height:30px}

    html.is-mobile .scenes{
      left:auto; right:8px; bottom:auto;
      top:50%; transform:translateY(-50%);
      flex-direction:column; width:auto;
      padding:0; gap:5px;
      overflow:visible;
      max-height:calc(100vh - 20px);
    }
    html.is-mobile .scenes button{
      width:44px; height:44px; padding:0;
      justify-content:center; border-radius:11px;
    }
    html.is-mobile .scenes button span{display:none}
    html.is-mobile .scenes button svg{width:17px; height:17px}

    html.is-mobile .devices{
      left:auto; right:0; top:0; bottom:0;
      width:min(300px, 46vw); max-height:none;
      border-radius:14px 0 0 14px;
      transform:translateX(100%);
      transition:transform .26s cubic-bezier(.32,.72,0,1);
      padding-bottom:0;
    }
    html.is-mobile .devices.open{
      transform:translateX(0);
      max-height:none; overflow-y:auto;
    }
    html.is-mobile .devices::before{
      width:4px; height:34px; margin:auto 3px; float:left;
    }
    html.is-mobile.body-drawer .scenes{ bottom:auto; right:calc(min(300px,46vw) + 8px) }
  }

  /* 竖屏：禁止横滑整个页面（只允许内部滚动容器） */
  @media (orientation:portrait){
    html.is-mobile body{overflow:hidden}
  }

  /* ---- 极窄屏（<360px）再压一点 ---- */
  @media (max-width:359px){
    html.is-mobile .env button{width:34px; height:34px}
    html.is-mobile .icobtn{width:38px; height:38px}
    html.is-mobile .scenes button{padding:0 10px; font-size:11.5px}
  }