:root{
    --bg:#edf1f5; --panel:#fff; --border:#d9e0e7; --text:#253141;
    --muted:#6f7d8d; --accent:#1877c9; --accent-soft:#e8f3fc;
    --shadow:0 4px 16px rgba(34,52,72,.07);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;-webkit-text-size-adjust:100%;}
  body{
    font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
    background:var(--bg); color:var(--text); display:flex; flex-direction:column;
    overflow:hidden; font-size:13px;
  }
  header{display:flex; align-items:center; gap:8px; padding:6px 10px;
    background:linear-gradient(135deg,#213044,#2b4057); color:#fff;
    min-height:54px; box-shadow:0 3px 14px rgba(20,34,49,.2); z-index:80;
    overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;}
  header h1{font-size:16px; font-weight:650; margin-right:4px; letter-spacing:.5px; white-space:nowrap;}
  header h1.brand-logo{width:174px;height:46px;margin-right:5px;padding:4px 7px;overflow:hidden;
    position:relative;align-self:center;flex:0 0 174px;background:#fff;border-radius:5px;
    box-shadow:0 2px 7px rgba(0,0,0,.2);}
  header h1.brand-logo img{width:100%;height:100%;object-fit:contain;display:block;}
  .topbar-main,.topbar-secondary{display:flex;align-items:center;gap:6px;min-width:max-content;flex:0 0 auto;scrollbar-width:none;}
  .topbar-main,.topbar-secondary{overflow:visible;}
  body.house-mode .topbar-secondary{overflow:visible;}
  .topbar-main::-webkit-scrollbar,.topbar-secondary::-webkit-scrollbar{display:none;}
  .toolbar-group{display:flex; align-items:center; gap:4px; padding:2px 5px;
    border:1px solid rgba(255,255,255,.10); border-radius:7px;
    background:rgba(255,255,255,.035); white-space:nowrap; flex:0 0 auto;}
  header .face-note{padding:3px 7px; border:1px solid #57718c; border-radius:4px;
    color:#cdeeff; background:#2c4055; font-size:11px;}
  header .spacer{flex:1;}
  button{border:1px solid var(--border); background:#fff; color:var(--text);
    padding:7px 10px; min-height:34px; border-radius:7px; cursor:pointer; font-size:12.5px;
    transition:background .14s,border-color .14s,transform .1s,box-shadow .14s;touch-action:manipulation;}
  button:hover{background:var(--accent-soft); border-color:var(--accent); box-shadow:0 2px 8px rgba(24,119,201,.1);}
  button:active{transform:translateY(1px);}
  header button{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff;}
  header button:hover{background:#3f5572;}
  header button.active{background:#1769aa; border-color:#58a9e7;}
  header button:disabled{opacity:.42; cursor:not-allowed; background:#33455c; border-color:#46586f;}
  header button.warn:hover{background:#7a3a3a;}
  header button.recording{background:#8b2f46;border-color:#f08aa2;color:#fff;}
  .mode-tabs{border:0;background:transparent;padding:0;}
  .mode-tabs button{font-weight:650;}
  .mode-tabs button.active{background:#0f8a68;border-color:#6dd3b9;color:#fff;}
  #schemeTabs{background:rgba(22,119,189,.13);border-color:rgba(95,180,238,.24);}
  .toolbar-history{background:rgba(255,255,255,.03);}
  .toolbar-view{background:rgba(255,255,255,.045);}
  .toolbar-demo{background:rgba(15,138,104,.08);border-color:rgba(109,211,185,.16);}
  .toolbar-demo select{width:70px;min-width:70px;}
  .open-control{
    display:grid;
    grid-template-columns:auto 108px 36px;
    align-items:center;
    gap:6px;
    min-height:34px;
    padding:4px 8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:7px;
    background:rgba(255,255,255,.065);
    color:#d7e6f3;
    font-size:12px;
    font-weight:650;
    white-space:nowrap;
  }
  .open-control input[type=range]{
    width:108px;
    min-height:0;
    padding:0;
    accent-color:#6dd3b9;
    cursor:pointer;
  }
  .open-control output{
    min-width:34px;
    color:#ffffff;
    text-align:right;
    font-variant-numeric:tabular-nums;
  }
  .open-control.disabled{
    opacity:.45;
  }
  .open-control.disabled input{cursor:not-allowed;}
  .toolbar-file{margin-left:0;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10);}
  .toolbar-menu{position:relative;display:block;white-space:nowrap;border:1px solid rgba(255,255,255,.10);
    border-radius:7px;background:rgba(255,255,255,.035);}
  .toolbar-menu summary{display:flex;align-items:center;gap:6px;min-height:30px;padding:5px 9px;
    border-radius:6px;color:#fff;cursor:pointer;user-select:none;}
  .toolbar-menu summary::-webkit-details-marker{display:none;}
  .toolbar-menu summary::after{content:"▾";font-size:10px;opacity:.75;}
  .toolbar-menu[open] summary{background:#1677bd;}
  .toolbar-menu:not([open]) > .toolbar-popover{display:none;}
  .toolbar-popover{position:fixed;left:var(--toolbar-menu-left,12px);top:var(--toolbar-menu-top,58px);z-index:120;
    display:grid;grid-template-columns:repeat(2,minmax(112px,auto));gap:6px;
    width:max-content;max-width:min(460px,calc(100vw - 24px));padding:8px;
    border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#24364b;
    box-shadow:0 12px 30px rgba(12,22,34,.34);}
  .toolbar-popover button,.toolbar-popover select{width:100%;min-width:0;}
  .toolbar-popover-view{grid-template-columns:repeat(2,minmax(128px,auto));}
  .toolbar-popover-view .window-camera-track-controls{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .toolbar-popover-view .window-camera-track-controls button{min-width:0;}
  .toolbar-popover-view #windowTrackWindowAnim{grid-column:1/-1;}
  .toolbar-popover-demo{grid-template-columns:minmax(128px,auto);}
  .toolbar-popover-house-view{
    grid-template-columns:minmax(142px,auto) auto;
    align-items:stretch;
  }
  .toolbar-popover-house-view #houseViewIso,
  .toolbar-popover-house-view #houseViewTop,
  .toolbar-popover-house-view #houseViewFps,
  .toolbar-popover-house-view #houseToggleWallDims,
  .toolbar-popover-house-view #houseToggleOpeningDims,
  .toolbar-popover-house-view #houseAnimAll,
  .toolbar-popover-house-view .house-fps-speed-control,
  .toolbar-popover-house-view .house-open-control{grid-column:1;}
  .toolbar-popover-house-view .floor-visibility{
    grid-column:2;
    grid-row:1 / span 6;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-left:2px;
    padding-left:7px;
    border-left:1px solid rgba(255,255,255,.14);
  }
  .toolbar-popover-house-view .floor-visibility:empty{display:none;}
  .toolbar-popover-house-view .floor-visibility button{
    width:56px;
    min-height:0;
    flex:1 1 30px;
    padding:5px 4px;
  }
  .toolbar-popover-house-view .house-open-control{
    grid-template-columns:auto 88px 34px;
    width:100%;
  }
  .toolbar-popover-house-view .house-open-control input[type=range]{width:88px;}
  .toolbar-popover-house-view .house-camera-track-controls{
    grid-column:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .toolbar-popover-house-view .house-camera-track-controls button{min-width:0;}
  .toolbar-popover-house-view #houseTrackWindowAnim{grid-column:1/-1;}
  #sunroomTrackMenu{align-self:stretch;flex:0 0 auto;}
  #sunroomTrackMenu > summary{height:100%;min-height:34px;}
  .toolbar-popover.toolbar-popover-sunroom-track{grid-template-columns:minmax(220px,260px);}
  .sunroom-camera-track-controls{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .sunroom-camera-track-controls button{min-width:0;}
  .sunroom-camera-track-controls #sunroomTrackWindowAnim{grid-column:1/-1;}
  .record-controls.sunroom-record-controls{grid-template-columns:minmax(132px,1fr) 38px;}
  .toolbar-popover-house-file{grid-template-columns:repeat(2,minmax(112px,auto));}
  .toolbar-popover-house-file #houseBtnPng,
  .toolbar-popover-house-file .house-record-controls{grid-column:1/-1;}
  .house-record-controls{grid-template-columns:94px 38px minmax(112px,1fr);}
  .toolbar-popover-house-floor{
    grid-template-columns:auto minmax(128px,1fr);
    align-items:center;
    min-width:300px;
  }
  .toolbar-popover-house-floor label{color:#d7e6f3;font-weight:650;}
  .toolbar-popover-house-floor button{min-width:0;}
  .toolbar-popover-house-floor #houseViewAllFloors,
  .toolbar-popover-house-floor #houseAddFloor,
  .toolbar-popover-house-floor #houseCloneFloorBelow,
  .toolbar-popover-house-floor #houseCloneFloorAbove,
  .toolbar-popover-house-floor #houseDeleteFloor,
  .toolbar-popover-house-floor .floor-visibility{grid-column:1/-1;}
  .toolbar-popover #btnPng,.toolbar-popover #btnNew,.toolbar-popover .record-controls,.toolbar-popover .record-meta-fields{grid-column:1/-1;}
  .record-meta-fields{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  header .record-meta-fields input{
    width:100%;
    min-width:0;
    min-height:34px;
    padding:6px 9px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:7px;
    background:#f8fbff;
    color:#253141;
    font-size:12.5px;
  }
  .record-controls{
    display:grid;
    grid-template-columns:94px 38px minmax(112px,1fr);
    gap:6px;
    align-items:center;
  }
  .record-controls .record-aspect{width:100%;}
  .record-frame-toggle{
    min-width:38px;
    padding-left:0;
    padding-right:0;
    font-size:15px;
    line-height:1;
  }
  header button.record-frame-toggle.active{
    background:#0f8a68;
    border-color:#6dd3b9;
    color:#fff;
    box-shadow:0 0 0 1px rgba(109,211,185,.28) inset;
  }
  body.house-mode .window-only{display:none !important;}
  .house-only{display:none !important;}
  body.house-mode .house-only{display:flex !important;}
  body.house-mode .toolbar-menu.house-only{display:block !important;}
  header select{min-height:34px;padding:6px 28px 6px 9px;border-color:rgba(255,255,255,.22);
    background:#f8fbff;color:#253141;border-radius:7px;font-size:12.5px;}
  header select.record-aspect{width:94px;}
  header .toolbar-group label{color:#d7e6f3;font-size:12px;font-weight:650;}
  #houseFloorSelect{width:76px;}
  .floor-visibility{display:inline-flex;align-items:center;gap:4px;margin-left:3px;}
  .floor-visibility button{min-height:28px;padding:4px 7px;font-size:11.5px;border-radius:6px;}
  .floor-visibility button:not(.active){opacity:.5;background:rgba(255,255,255,.04);}
  main{flex:1; display:flex; min-height:0; gap:0;}
  aside{width:310px; background:#f6f8fa; border-right:1px solid #ccd5de;
    overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px;
    scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#b7c2cc transparent;}
  #houseAside{display:none;}
  body.house-mode #windowAside{display:none;}
  body.house-mode #houseAside{display:flex;}
  body.house-mode #projectStats,
  body.house-mode .brand-signature{display:none !important;}
  body.house-mode header{background:#172333;}
  body.house-mode #stage{
    background:
      radial-gradient(circle at 52% 38%,rgba(250,253,255,.98) 0%,rgba(242,247,250,.98) 48%,rgba(228,237,243,.96) 100%);
  }
  body.house-mode #houseAside{
    background:#eef4f7;
    border-right-color:#b9c9d6;
  }
  body.house-mode #houseAside .sidebar-tabs{background:#eef4f7;}
  aside::-webkit-scrollbar{width:7px;} aside::-webkit-scrollbar-thumb{background:#b7c2cc;border-radius:8px;}
  .sidebar-tabs{position:sticky;top:-12px;z-index:8;display:grid;
    grid-template-columns:repeat(4,1fr);gap:5px;padding:12px 0 8px;background:#f6f8fa;}
  .sidebar-tabs button{padding:6px 2px;min-height:31px;font-size:12px;}
  .sidebar-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff;
    box-shadow:0 2px 8px rgba(24,119,201,.2);}
  [data-sidebar-tab]{display:none;}
  [data-sidebar-tab].sidebar-visible{display:block;}
  .group{border:1px solid var(--border); border-radius:10px; padding:10px 11px 11px;
    background:var(--panel); box-shadow:var(--shadow);}
  .group h3{font-size:12.5px; color:#536273; font-weight:650; margin-bottom:9px;
    display:flex; align-items:center; gap:6px;}
  .group h3::before{content:""; width:3px; height:12px; background:var(--accent); border-radius:2px;}
  .house-panel-section{padding-top:9px;margin-top:9px;border-top:1px solid #edf1f4;}
  .house-panel-section:first-of-type{padding-top:0;margin-top:0;border-top:0;}
  .house-panel-section h4{font-size:12px;font-weight:650;color:#3f5567;margin-bottom:7px;
    display:flex;align-items:center;gap:6px;}
  .house-panel-section h4::before{content:"";width:5px;height:5px;border-radius:50%;background:#83a9c8;}
  .house-panel-section .modes{margin-top:2px;}
  .house-window-scheme-box{
    display:grid;
    gap:6px;
    margin-bottom:8px;
    padding:7px;
    border:1px solid #dde7ee;
    border-radius:8px;
    background:#fbfdff;
  }
  .house-window-scheme-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:#3f5567;
    font-weight:650;
    font-size:12px;
  }
  .house-window-scheme-title small{
    color:#7a8795;
    font-weight:500;
    font-size:11px;
  }
  .house-window-scheme-tabs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  .house-window-scheme-tabs button{
    min-width:0;
    min-height:30px;
    padding:5px 4px;
    border-radius:7px;
    font-size:12px;
  }
  .house-window-scheme-tabs button.active{
    background:#eaf5f2;
    border-color:#3b9c85;
    color:#176c5a;
    font-weight:700;
  }
  .house-window-scheme-tabs button.is-empty{
    color:#7b8794;
    background:#fff;
  }
  .house-window-scheme-box.disabled{
    opacity:.58;
  }
  .row{display:flex; align-items:center; gap:6px; margin-bottom:7px; flex-wrap:wrap;}
  .row:last-child{margin-bottom:0;}
  .row label{color:var(--muted); white-space:nowrap;}
  .preset-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-bottom:7px;}
  .preset-grid select,.preset-grid input{width:100%;min-width:0;}
  .preset-grid button{padding:6px 8px;min-height:32px;}
  .preset-grid.preset-edit{grid-template-columns:minmax(0,1fr) auto auto;margin-bottom:10px;}
  .notch-grid{display:grid;gap:6px;margin-bottom:8px;}
  .notch-row{display:grid;grid-template-columns:58px 1fr 12px 1fr;align-items:center;gap:5px;
    padding:6px 7px;border:1px solid #e0e6ec;border-radius:7px;background:#fafcfd;}
  .notch-row label{color:#536273;white-space:nowrap;}
  .notch-row input[type=number]{width:100%;min-width:0;}
  .notch-row span{text-align:center;color:var(--muted);}
  .notch-row.disabled input[type=number]{opacity:.45;background:#f0f2f4;}
  .notch-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px;}
  .notch-actions button{padding:6px 5px;min-height:32px;}
  .arch-info{display:none;margin:-1px 0 8px;padding:7px 8px;border-radius:7px;
    background:#eef7fd;color:#37657f;border:1px solid #d0e6f4;line-height:1.55;font-size:12px;}
  .viewport-stats{position:absolute;left:14px;top:12px;z-index:12;pointer-events:none;
    color:#405061;font-size:12px;font-weight:600;line-height:1.55;white-space:pre;
    text-shadow:-1px -1px 0 rgba(255,255,255,.9),1px -1px 0 rgba(255,255,255,.9),
      -1px 1px 0 rgba(255,255,255,.9),1px 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(255,255,255,.95);}
  .brand-signature{position:absolute;right:16px;bottom:14px;z-index:12;pointer-events:none;
    color:rgba(54,70,86,.62);font-size:12px;font-weight:600;letter-spacing:1.5px;
    text-shadow:0 1px 2px rgba(255,255,255,.95);}
  .color-chip{width:22px; height:22px; display:inline-block; border:1px solid #aeb5bd;
    border-radius:50%; box-shadow:inset 0 1px 2px rgba(255,255,255,.55),0 1px 2px rgba(0,0,0,.12);}
  input[type=number],input[type=text],select{width:78px; min-height:32px; padding:5px 7px;
    border:1px solid #cfd8e1; border-radius:7px; font-size:12.5px; background:#fff; color:var(--text);
    transition:border-color .14s,box-shadow .14s;touch-action:manipulation;}
  input[type=text]{flex:1; min-width:130px;}
  select{width:auto;}
  input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(24,119,201,.11);}
  .modes{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .modes button.active, .palette button.active{
    background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}
  .house-tools button,.house-view-tools button{min-width:0;}
  .house-floor-scope .house-view-tools #houseDeleteFloor{grid-column:1/-1;}
  .house-locked-tool{display:none !important;}
  .house-wall-builder{padding-bottom:12px;}
  .house-mode-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    margin-bottom:10px;
  }
  .house-mode-row button{min-width:0;padding:7px 4px;}
  .house-mode-row button.active{
    background:#eef6fb;
    border-color:#7faeca;
    color:#255d78;
    font-weight:650;
    box-shadow:inset 0 0 0 1px rgba(127,174,202,.16);
  }
  .sunroom-post-slope-card .house-mode-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sunroom-post-slope-card .house-mode-row button{white-space:nowrap;}
  .sunroom-readonly-value{display:inline-flex;align-items:center;width:78px;min-height:32px;
    padding:5px 7px;border:1px solid #d8e2ea;border-radius:7px;background:#f4f8fa;
    color:#244f66;font-weight:700;box-sizing:border-box;}
  .house-field-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:10px;
  }
  .house-field{
    min-width:0;
    padding:7px;
    border:1px solid #e0e8ef;
    border-radius:8px;
    background:#f9fcfe;
  }
  .house-field label{
    display:block;
    margin-bottom:4px;
    color:#667587;
    font-size:11.5px;
    white-space:nowrap;
  }
  .house-field input,.house-field select{width:100%;min-width:0;}
  .house-field.hidden{display:none!important;}
  .house-style-field{display:none!important;}
  .house-material-select-field{display:none!important;}
  .house-material-section{margin-bottom:7px;}
  .house-material-drawer{
    padding:0;
    overflow:hidden;
    border:1px solid #ded5c8;
    border-radius:8px;
    background:#fffdf8;
  }
  .house-material-drawer summary{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:8px 9px;
    cursor:pointer;
    user-select:none;
    color:#3f5567;
    font-weight:650;
    list-style:none;
  }
  .house-material-drawer summary::-webkit-details-marker{display:none;}
  .house-material-drawer summary::before{
    content:"";
    width:0;
    height:0;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:5px solid #8a734d;
    margin-left:-1px;
  }
  .house-material-drawer[open] summary::before{
    transform:rotate(90deg);
  }
  .house-material-drawer summary span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .house-material-drawer summary small{
    min-width:0;
    max-width:124px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#6f7d8d;
    font-size:11px;
    font-weight:650;
  }
  .house-material-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    padding:0 8px 8px;
  }
  .house-material-subtitle{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 8px 6px;
    color:#53636f;
    font-size:11.5px;
    font-weight:750;
  }
  .house-material-subtitle::before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#2f806f;
    box-shadow:0 0 0 3px rgba(47,128,111,.10);
  }
  .house-material-card{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-height:48px;
    padding:6px;
    border-radius:7px;
    text-align:left;
    background:#fff;
    border-color:#d8e1e8;
    color:#3d4c59;
    overflow:hidden;
  }
  .house-material-card span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11.5px;
    font-weight:650;
  }
  .house-material-card.active{
    border-color:#2f806f;
    background:#edf8f4;
    color:#246b5d;
    box-shadow:0 0 0 1px rgba(47,128,111,.16) inset;
  }
  .material-chip{
    width:38px;
    height:30px;
    border-radius:6px;
    border:1px solid rgba(80,92,98,.20);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.55),0 1px 2px rgba(39,48,55,.08);
    background-color:#eee;
    background-size:cover;
  }
  .material-plaster{background:
    radial-gradient(circle at 24% 28%,rgba(255,255,255,.42),transparent 28%),
    linear-gradient(110deg,#efe2ce,#fffaf0 44%,#eadac1);}
  .material-microcement{background:
    radial-gradient(circle at 70% 34%,rgba(255,255,255,.35),transparent 26%),
    linear-gradient(135deg,#cbd3d1,#eef1ed 48%,#d7ddda);}
  .material-limewash{background:
    linear-gradient(130deg,rgba(255,255,255,.45),transparent 28%),
    radial-gradient(circle at 30% 70%,#e8dcc9,#fff7eb 46%,#dacbb4);}
  .material-travertine{background:
    repeating-linear-gradient(174deg,rgba(128,101,66,.20) 0 1px,transparent 1px 9px),
    linear-gradient(135deg,#d7c2a0,#f5e8cf 50%,#cdb58f);}
  .material-marble{background:
    linear-gradient(150deg,transparent 0 36%,rgba(95,102,101,.22) 37%,transparent 41%),
    linear-gradient(25deg,transparent 0 54%,rgba(174,148,116,.18) 55%,transparent 60%),
    linear-gradient(135deg,#d9d9d3,#f8f7f2 52%,#cfd1cc);}
  .material-wood{background:
    repeating-linear-gradient(90deg,rgba(96,62,29,.18) 0 1px,transparent 1px 18px),
    linear-gradient(135deg,#c99b5c,#ead0a2 47%,#b8874b);}
  .material-ashwood{background:
    repeating-linear-gradient(90deg,rgba(89,86,78,.16) 0 1px,transparent 1px 18px),
    linear-gradient(135deg,#bdb4a4,#e0d8ca 48%,#aaa293);}
  .material-fluted{background:
    repeating-linear-gradient(90deg,rgba(92,78,58,.20) 0 2px,rgba(255,255,255,.25) 4px 8px,transparent 8px 20px),
    linear-gradient(135deg,#d5ccbd,#f1eadf);}
  .material-zellige{background:
    repeating-linear-gradient(0deg,rgba(73,100,90,.16) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(90deg,rgba(73,100,90,.14) 0 1px,transparent 1px 12px),
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.40),transparent 34%),
    linear-gradient(135deg,#c7d7d0,#e8f1eb);}
  .material-terrazzo{background:
    radial-gradient(circle at 22% 38%,rgba(128,105,82,.36) 0 2px,transparent 3px),
    radial-gradient(circle at 62% 28%,rgba(101,129,118,.30) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 72%,rgba(188,163,124,.34) 0 3px,transparent 4px),
    linear-gradient(135deg,#e5ddcd,#fbf6eb);}
  .material-clay{background:
    repeating-linear-gradient(176deg,rgba(123,82,52,.14) 0 1px,transparent 1px 13px),
    linear-gradient(135deg,#d6b092,#f2d6bd 50%,#c99676);}
  .material-blush{background:
    radial-gradient(circle at 28% 32%,rgba(255,255,255,.42),transparent 30%),
    linear-gradient(135deg,#dfc0bd,#f5dfdc 52%,#d6aba8);}
  .material-linen{background:
    repeating-linear-gradient(90deg,rgba(111,92,70,.14) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.20) 0 1px,transparent 1px 9px),
    linear-gradient(135deg,#d6c8b5,#f0e7d8);}
  .material-gridpanel{background:
    linear-gradient(90deg,transparent 0 28%,rgba(105,85,58,.18) 29%,transparent 30% 72%,rgba(105,85,58,.18) 73%,transparent 74%),
    linear-gradient(0deg,transparent 0 34%,rgba(105,85,58,.15) 35%,transparent 36% 70%,rgba(105,85,58,.15) 71%,transparent 72%),
    linear-gradient(135deg,#eee5d8,#fff8ee);}
  .material-reed{background:
    repeating-linear-gradient(90deg,rgba(95,70,35,.22) 0 2px,rgba(255,255,255,.18) 3px 5px,transparent 5px 14px),
    linear-gradient(135deg,#c8a96d,#ead4a4);}
  .material-stucco{background:
    radial-gradient(circle at 20% 38%,rgba(168,135,91,.20) 0 1px,transparent 2px),
    radial-gradient(circle at 68% 58%,rgba(255,255,255,.38) 0 1px,transparent 2px),
    linear-gradient(135deg,#d7c7ae,#f0e3ce);}
  .material-stonepanel{background:
    linear-gradient(90deg,transparent 0 48%,rgba(92,97,94,.15) 49%,transparent 50%),
    linear-gradient(0deg,transparent 0 48%,rgba(92,97,94,.13) 49%,transparent 50%),
    linear-gradient(135deg,#d2d3cf,#f0eee6);}
  .material-charcoal{background:
    linear-gradient(145deg,transparent 0 44%,rgba(220,228,224,.20) 45%,transparent 48%),
    linear-gradient(135deg,#333a3c,#687071 52%,#242a2c);}
  .material-plain{background:linear-gradient(135deg,#f6f6f1,#fff);}
  .material-tilecream{background:
    linear-gradient(90deg,transparent 0 48%,rgba(150,126,92,.16) 49%,transparent 50%),
    linear-gradient(0deg,transparent 0 48%,rgba(150,126,92,.16) 49%,transparent 50%),
    linear-gradient(135deg,#eadcc4,#fff0d9);}
  .material-tilelight{background:
    linear-gradient(90deg,transparent 0 48%,rgba(112,126,126,.15) 49%,transparent 50%),
    linear-gradient(0deg,transparent 0 48%,rgba(112,126,126,.15) 49%,transparent 50%),
    linear-gradient(135deg,#d9dbd4,#f4f2ec);}
  .material-chevron{background:
    repeating-linear-gradient(135deg,rgba(103,70,38,.16) 0 2px,transparent 2px 12px),
    repeating-linear-gradient(45deg,rgba(103,70,38,.16) 0 2px,transparent 2px 12px),
    linear-gradient(135deg,#c99a5a,#eed3a0);}
  .material-slate{background:
    linear-gradient(145deg,transparent 0 46%,rgba(222,231,229,.16) 47%,transparent 51%),
    linear-gradient(135deg,#596164,#858c8c 48%,#3d4547);}
  .material-oat{background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 30%),
    linear-gradient(135deg,#dccfb8,#efe5d2 52%,#d3c4ab);}
  .material-greige{background:
    radial-gradient(circle at 66% 36%,rgba(255,255,255,.30),transparent 28%),
    linear-gradient(135deg,#c9c3b8,#e3ded4 50%,#bcb5a9);}
  .material-fog{background:
    radial-gradient(circle at 30% 62%,rgba(255,255,255,.30),transparent 30%),
    linear-gradient(135deg,#b7c3cb,#d5dee3 52%,#a9b6be);}
  .material-inkgreen{background:
    linear-gradient(145deg,transparent 0 44%,rgba(226,236,229,.16) 45%,transparent 49%),
    linear-gradient(135deg,#3f4f47,#617a6d 52%,#33423b);}
  .material-warmwhite{background:
    radial-gradient(circle at 26% 30%,rgba(255,255,255,.5),transparent 32%),
    linear-gradient(135deg,#e4ddcd,#f6f0e3);}
  .material-darkstone{background:
    linear-gradient(90deg,transparent 0 48%,rgba(214,222,226,.14) 49%,transparent 50%),
    linear-gradient(135deg,#464d52,#6a7278 50%,#393f44);}
  .material-brick{background:
    repeating-linear-gradient(0deg,rgba(78,44,32,.35) 0 1.5px,transparent 1.5px 9px),
    linear-gradient(90deg,transparent 0 46%,rgba(78,44,32,.28) 47%,transparent 48%),
    linear-gradient(135deg,#a2604a,#c48468 50%,#8e5340);}
  .material-greyoak{background:
    repeating-linear-gradient(90deg,rgba(84,78,68,.15) 0 1px,transparent 1px 18px),
    linear-gradient(135deg,#ab9f8d,#cfc4b2 50%,#9c9080);}
  .material-walnut{background:
    repeating-linear-gradient(90deg,rgba(48,30,16,.25) 0 1px,transparent 1px 16px),
    linear-gradient(135deg,#84592f,#a8794a 50%,#6d4826);}
  .material-creamcement{background:
    radial-gradient(circle at 62% 40%,rgba(255,255,255,.32),transparent 30%),
    linear-gradient(135deg,#dcd5c6,#f0ebdf 52%,#d0c9ba);}
  .material-darktile{background:
    linear-gradient(90deg,transparent 0 48%,rgba(230,235,232,.14) 49%,transparent 50%),
    linear-gradient(0deg,transparent 0 48%,rgba(230,235,232,.12) 49%,transparent 50%),
    linear-gradient(135deg,#767b78,#989d99 50%,#646966);}
  .house-wall-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .house-wall-actions button{min-width:0;}
  .house-wall-actions .wide{grid-column:1/-1;}
  .house-wall-actions button.warn{grid-column:1/-1;}
  .house-tools #houseDrawTool.active{
    background:#0f8a68;
    border-color:#0f8a68;
    color:#fff;
  }
  .house-readout{
    min-height:108px;padding:9px;border:1px solid #d5dee7;border-radius:7px;background:#fff;
    color:#405061;line-height:1.6;white-space:pre-line;font-size:12px;
  }
  .screen-options{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; width:100%;}
  .screen-options.two{grid-template-columns:repeat(2,1fr);}
  .screen-options button{padding:6px 4px; min-height:32px;}
  .screen-options button.active{background:var(--accent-soft); border-color:var(--accent);
    color:var(--accent); font-weight:650;}
  #handleAdjustPanel{margin-top:8px; padding-top:8px; border-top:1px solid #eadfce;}
  #handleAdjustPanel .row{display:grid; grid-template-columns:82px minmax(0,1fr) 68px; align-items:center;}
  #handleAdjustPanel input[type=range]{width:100%; min-width:0;}
  #translateSafetyGuardBarGapRow{display:grid; grid-template-columns:82px minmax(0,1fr) 68px; align-items:center;}
  #translateSafetyGuardBarGapRow input[type=range]{width:100%; min-width:0;}
  #translateSafetyGuardBarGapRow input[type=number]{width:68px; min-width:0;}
  #translateSafetyGuardBarGapRow:has(input:disabled){opacity:.5;}
  #handleAdjustPanel input[type=number]{width:68px; min-width:0; padding:5px 4px; text-align:center;}
  .palette{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
  .palette button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 3px;}
  .balcony-presets{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:8px;}
  .direct-card{padding:9px; border:1px solid #c9dbea; border-radius:9px; background:#f6fbff;}
  .direct-title{font-weight:650; color:#1f628e; margin-bottom:9px; padding-bottom:7px;
    border-bottom:1px solid #dbe8f2; line-height:1.5;}
  .direct-card input,.direct-card select{min-width:0;}
  .attach-tip{padding:7px 8px; margin:8px 0; border-radius:7px; color:#37657f; background:#e7f5fb;
    border:1px dashed #72b8d6; line-height:1.55;}
  .direct-actions{display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:6px;}
  .direct-actions .wide{grid-column:1/-1;}
  .hint{color:var(--muted); line-height:1.7; font-size:12px;}
  details.guide{padding:0; overflow:hidden;}
  details.guide summary{cursor:pointer; list-style:none; padding:11px; color:#536273;
    font-weight:650; user-select:none;}
  details.guide summary::-webkit-details-marker{display:none;}
  details.guide summary::before{content:"＋"; display:inline-grid; place-items:center; width:18px; height:18px;
    margin-right:7px; border-radius:5px; color:var(--accent); background:var(--accent-soft);}
  details.guide[open] summary::before{content:"－";}
  details.guide .hint{padding:0 11px 12px; border-top:1px solid #edf0f3; padding-top:9px;}
  #stage{flex:1; position:relative; min-width:0; user-select:none; -webkit-user-select:none;
    touch-action:none;
    background:linear-gradient(#dce6ee 0%, #f5f7f9 58%, #e8edf1 100%);
    box-shadow:inset 0 0 0 1px rgba(100,120,140,.08);}
  #stage canvas{display:block; user-select:none; -webkit-user-select:none; touch-action:none;}
  #stage canvas.camera-grabbing{cursor:grabbing !important;}
  .opening-quick-bar{
    position:absolute;
    left:0;
    top:0;
    z-index:26;
    display:none;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    max-width:min(620px,calc(100% - 18px));
    padding:6px;
    border:1px solid rgba(92,117,137,.24);
    border-radius:8px;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 26px rgba(26,42,58,.16);
    pointer-events:auto;
    backdrop-filter:blur(8px);
  }
  .opening-quick-bar.show{display:flex;}
  .opening-quick-bar button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:44px;
    min-height:32px;
    padding:5px 7px;
    border-radius:6px;
    border-color:#c9d8e4;
    background:#f8fbfd;
    color:#31475a;
    font-size:11.5px;
    font-weight:650;
    white-space:nowrap;
  }
  .opening-quick-bar button svg{width:22px;height:18px;display:block;flex:0 0 auto;}
  .opening-quick-bar button.active{
    background:#e7f2fb;
    border-color:#1677bd;
    color:#12639e;
    box-shadow:inset 0 0 0 1px rgba(22,119,189,.18);
  }
  body.house-mode .opening-quick-bar,
  .opening-quick-bar.is-hidden{display:none !important;}
  .record-frame-overlay{
    position:absolute;
    inset:0;
    z-index:18;
    display:none;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  .record-frame-overlay.show{display:flex;}
  .record-frame-box{
    position:relative;
    width:60%;
    height:60%;
    border:2px solid rgba(255,255,255,.96);
    border-radius:2px;
    box-shadow:
      0 0 0 1px rgba(24,119,201,.88) inset,
      0 0 0 9999px rgba(17,27,39,.24),
      0 8px 26px rgba(13,25,38,.20);
    background:
      linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
      linear-gradient(to right,transparent calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
      linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% - .5px),rgba(255,255,255,.55) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
      linear-gradient(to bottom,transparent calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% - .5px),rgba(255,255,255,.55) calc(66.666% + .5px),transparent calc(66.666% + .5px));
  }
  .record-frame-label{
    position:absolute;
    left:8px;
    top:8px;
    padding:4px 7px;
    border-radius:5px;
    background:rgba(31,48,66,.84);
    color:#fff;
    font-size:12px;
    font-weight:650;
    letter-spacing:0;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
  }
  .house-scene-label{
    position:absolute;left:16px;bottom:16px;z-index:14;display:none;flex-direction:column;gap:3px;
    max-width:min(560px,calc(100% - 32px));padding:10px 12px;border:1px solid rgba(93,113,126,.28);
    border-radius:7px;background:rgba(255,255,255,.86);box-shadow:0 8px 26px rgba(36,49,64,.12);
    color:#324254;pointer-events:none;
  }
  .house-scene-label strong{font-size:13px;}
  .house-scene-label span{font-size:12px;color:#667587;line-height:1.5;}
  body.house-mode .house-scene-label{
    display:flex;
    top:14px;
    bottom:auto;
    border-color:rgba(22,119,189,.30);
    background:rgba(250,253,255,.92);
  }
  #dimEditor{position:absolute; display:none; z-index:20; align-items:center; gap:5px;
    padding:6px; border:1px solid #8bbce7; border-radius:7px; background:#fff;
    box-shadow:0 5px 18px rgba(36,49,64,.22);}
  #dimEditor.show{display:flex;}
  #dimEditor input{width:92px; padding:5px 7px; border:1px solid #8bbce7; border-radius:5px;}
  #dimEditor button{padding:5px 9px; background:var(--accent); border-color:var(--accent); color:#fff;}
  .house-viewport-actions{
    position:absolute;right:16px;top:14px;z-index:24;display:none;align-items:center;gap:8px;
    padding:7px;border:1px solid rgba(91,112,126,.2);border-radius:8px;
    background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(31,48,66,.16);
    pointer-events:auto;
  }
  .house-viewport-actions.show{display:flex;}
  .house-viewport-actions button{min-height:36px;padding:7px 13px;border-radius:7px;font-weight:650;}
  #houseViewportEditWindow{background:#ffffff;border-color:#93bfe0;color:#1d5d87;}
  #houseViewportApplyWindowEdit{background:#0f8a68;border-color:#0f8a68;color:#fff;
    box-shadow:0 4px 14px rgba(15,138,104,.24);}
  #houseViewportCancelWindowEdit{background:#f6f8fa;border-color:#c9d4df;color:#506173;}
  .prop-transform-actions{top:66px;}
  .prop-transform-actions button{background:#ffffff;border-color:#9dbbd2;color:#344b5c;}
  .prop-transform-actions button.active{background:#1677bd;border-color:#1677bd;color:#fff;
    box-shadow:0 4px 14px rgba(22,119,189,.24);}
  footer{padding:7px 14px; background:#fff; border-top:1px solid var(--border);
    color:var(--muted); display:flex; gap:18px; box-shadow:0 -2px 10px rgba(40,55,72,.04);}
  #selInfo{font-weight:600; color:var(--accent);}
  #toast{position:fixed; left:50%; bottom:54px; transform:translateX(-50%);
    background:#2c3340; color:#fff; padding:8px 18px; border-radius:6px; opacity:0;
    pointer-events:none; transition:opacity .25s; font-size:13px; z-index:99; max-width:80%;}
  #toast.show{opacity:.95;}

  /* UI polish: compact sales-workbench layout. */
  :root{
    --bg:#eef3f7; --border:#d5dee7; --text:#243141;
    --muted:#697789; --accent:#1677bd; --accent-soft:#e7f2fb;
    --shadow:0 2px 10px rgba(34,52,72,.055);
  }
  header{
    display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:54px;background:#24364b;
    overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
    z-index:80;
    box-shadow:0 2px 12px rgba(20,34,49,.18);
  }
  header .spacer{display:none;}
  header h1.brand-logo{
    width:152px;height:40px;flex-basis:152px;margin-right:4px;border-radius:6px;
    align-self:center;
    box-shadow:0 1px 5px rgba(0,0,0,.18);
  }
  .topbar-main,.topbar-secondary{
    gap:6px;min-width:max-content;flex:0 0 auto;scrollbar-width:none;
  }
  .topbar-main,.topbar-secondary{overflow:visible;}
  body.house-mode .topbar-secondary{overflow:visible;}
  .topbar-main::-webkit-scrollbar,.topbar-secondary::-webkit-scrollbar{display:none;}
  .toolbar-group{
    gap:4px;padding:2px 5px;border:1px solid rgba(255,255,255,.10);
    border-radius:7px;background:rgba(255,255,255,.035);
  }
  .mode-tabs{border:0;background:transparent;padding:0;}
  #schemeTabs{background:rgba(22,119,189,.13);border-color:rgba(95,180,238,.24);}
  .toolbar-history{background:rgba(255,255,255,.03);}
  .toolbar-view{background:rgba(255,255,255,.045);}
  .toolbar-demo{background:rgba(15,138,104,.08);border-color:rgba(109,211,185,.16);}
  .toolbar-demo select{width:70px;min-width:70px;}
  .toolbar-file{margin-left:0;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.10);}
  .toolbar-menu{position:relative;display:block;white-space:nowrap;border:1px solid rgba(255,255,255,.10);
    border-radius:7px;background:rgba(255,255,255,.035);}
  .toolbar-menu summary{display:flex;align-items:center;gap:6px;min-height:30px;padding:5px 9px;
    border-radius:6px;color:#fff;cursor:pointer;user-select:none;}
  .toolbar-menu summary::-webkit-details-marker{display:none;}
  .toolbar-menu summary::after{content:"▾";font-size:10px;opacity:.75;}
  .toolbar-menu[open] summary{background:#1677bd;}
  .toolbar-menu:not([open]) > .toolbar-popover{display:none;}
  .toolbar-popover{position:fixed;left:var(--toolbar-menu-left,12px);top:var(--toolbar-menu-top,58px);z-index:120;
    display:grid;grid-template-columns:repeat(2,minmax(112px,auto));gap:6px;
    width:max-content;max-width:min(460px,calc(100vw - 24px));padding:8px;
    border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#24364b;
    box-shadow:0 12px 30px rgba(12,22,34,.34);}
  .toolbar-popover button,.toolbar-popover select{width:100%;min-width:0;}
  .toolbar-popover-view{grid-template-columns:repeat(2,minmax(128px,auto));}
  .toolbar-popover-demo{grid-template-columns:minmax(128px,auto);}
  .toolbar-popover-house-view{
    grid-template-columns:minmax(142px,auto) auto;
    align-items:stretch;
  }
  .toolbar-popover-house-view #houseViewIso,
  .toolbar-popover-house-view #houseViewTop,
  .toolbar-popover-house-view #houseViewFps,
  .toolbar-popover-house-view #houseToggleWallDims,
  .toolbar-popover-house-view #houseToggleOpeningDims,
  .toolbar-popover-house-view #houseAnimAll,
  .toolbar-popover-house-view .house-fps-speed-control,
  .toolbar-popover-house-view .house-open-control{grid-column:1;}
  .toolbar-popover-house-view .floor-visibility{
    grid-column:2;
    grid-row:1 / span 6;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-left:2px;
    padding-left:7px;
    border-left:1px solid rgba(255,255,255,.14);
  }
  .toolbar-popover-house-view .floor-visibility:empty{display:none;}
  .toolbar-popover-house-view .floor-visibility button{
    width:56px;
    min-height:0;
    flex:1 1 30px;
    padding:5px 4px;
  }
  .toolbar-popover-house-view .house-open-control{
    grid-template-columns:auto 88px 34px;
    width:100%;
  }
  .toolbar-popover-house-view .house-open-control input[type=range]{width:88px;}
  .toolbar-popover-house-file{grid-template-columns:repeat(2,minmax(112px,auto));}
  .toolbar-popover-house-floor{
    grid-template-columns:auto minmax(128px,1fr);
    align-items:center;
    min-width:300px;
  }
  .toolbar-popover-house-floor label{color:#d7e6f3;font-weight:650;}
  .toolbar-popover-house-floor button{min-width:0;}
  .toolbar-popover-house-floor #houseViewAllFloors,
  .toolbar-popover-house-floor #houseAddFloor,
  .toolbar-popover-house-floor #houseCloneFloorBelow,
  .toolbar-popover-house-floor #houseCloneFloorAbove,
  .toolbar-popover-house-floor #houseDeleteFloor,
  .toolbar-popover-house-floor .floor-visibility{grid-column:1/-1;}
  .toolbar-popover #btnPng,.toolbar-popover #btnNew,.toolbar-popover .record-controls,.toolbar-popover .record-meta-fields{grid-column:1/-1;}
  button{padding:5px 9px;min-height:30px;border-radius:6px;}
  header button{background:rgba(255,255,255,.075);}
  header button:hover{background:#38506a;}
  header button.active{background:#1677bd;border-color:#5fb4ee;}
  header select{min-height:30px;padding:4px 26px 4px 8px;border-radius:6px;}
  header select.record-aspect{width:88px;}
  aside{
    width:318px;background:#f4f7fa;border-right-color:#cbd6e0;
    padding:10px;gap:9px;
  }
  .sidebar-tabs{top:-10px;padding:10px 0 8px;background:#f4f7fa;}
  .sidebar-tabs button{background:#fff;}
  .sidebar-tabs button.active{box-shadow:0 1px 7px rgba(22,119,189,.2);}
  .group{border-radius:8px;padding:9px 10px 10px;}
  .group h3{color:#4f5f70;margin-bottom:8px;}
  .group h3::before{flex:0 0 3px;}
  .row label{min-width:26px;}
  input[type=number],input[type=text],select{
    min-height:31px;border-color:#cbd6df;border-radius:6px;
  }
  aside .row input[type=number][style]{width:64px !important;}
  .direct-card{padding:8px;border-color:#d4e1ec;border-radius:6px;background:#f7fbfe;}
  #stage{background:linear-gradient(#dde8f0 0%,#f7f9fb 58%,#e9eef3 100%);}
  .viewport-stats{
    padding:0;border:0;border-radius:0;background:transparent;color:#314154;
    box-shadow:none;text-shadow:0 1px 2px rgba(255,255,255,.96),0 0 5px rgba(255,255,255,.9);
    backdrop-filter:none;
  }
  footer{padding:6px 14px;}

  /* House mode neutral workbench background. */
  body.house-mode #stage{
    background:
      radial-gradient(circle at 52% 38%,rgba(250,253,255,.98) 0%,rgba(242,247,250,.98) 48%,rgba(228,237,243,.96) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(116,141,156,.16),
      inset 18px 0 30px rgba(121,145,160,.04),
      inset 0 22px 46px rgba(255,255,255,.46);
  }
  body.house-mode #houseAside{
    background:#f4f1ea;
    border-right-color:#cfc7ba;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.72),4px 0 18px rgba(80,72,60,.055);
  }
  body.house-mode #houseAside .sidebar-tabs{
    background:linear-gradient(#f4f1ea 68%,rgba(244,241,234,.88));
    border-bottom:1px solid rgba(198,189,176,.58);
  }
  body.house-mode #houseAside .sidebar-tabs button{
    border-color:#d6cec2;
    background:#fffdf8;
  }
  body.house-mode #houseAside .sidebar-tabs button.active{
    background:#2f806f;
    border-color:#2f806f;
    color:#fff;
    box-shadow:0 2px 9px rgba(47,128,111,.22);
  }
  body.house-mode #houseAside .group{
    border-color:#d8d0c4;
    background:rgba(255,253,248,.94);
    box-shadow:0 2px 12px rgba(84,74,62,.07);
  }
  body.house-mode #houseAside .group h3{
    color:#4d5b5b;
  }
  body.house-mode #houseAside .group h3::before{
    background:#2f806f;
  }
  body.house-mode .house-panel-section{
    border-top-color:#e1d8cc;
  }
  body.house-mode .house-panel-section h4{
    color:#516463;
  }
  body.house-mode .house-panel-section h4::before{
    background:#b98745;
  }
  body.house-mode .house-field,
  body.house-mode .notch-row,
  body.house-mode .direct-card,
  body.house-mode .house-window-scheme-box,
  body.house-mode .house-readout{
    border-color:#ded5c8;
    background:#fffdf8;
  }
  body.house-mode .attach-tip,
  body.house-mode .arch-info{
    border-color:#b8d7d2;
    background:#eef8f5;
    color:#376760;
  }
  body.house-mode .house-scene-label{
    border-color:rgba(123,145,158,.22);
    background:rgba(255,255,255,.82);
    box-shadow:0 10px 26px rgba(70,86,98,.10);
    backdrop-filter:blur(8px);
  }
  body.house-mode .house-scene-label strong{color:#2f434a;}
  body.house-mode .house-scene-label span{color:#5f7078;}
  body.house-mode .house-viewport-actions{
    border-color:rgba(141,126,105,.24);
    background:rgba(255,253,248,.94);
    box-shadow:0 10px 28px rgba(72,64,52,.16);
    backdrop-filter:blur(8px);
  }
  body.house-mode #houseViewportEditWindow{
    border-color:#9dc4bd;
    color:#2d6f64;
  }
  body.house-mode #houseViewportApplyWindowEdit{
    background:#2f806f;
    border-color:#2f806f;
    box-shadow:0 4px 14px rgba(47,128,111,.24);
  }
  body.house-mode .prop-transform-actions button.active{
    background:#2f806f;
    border-color:#2f806f;
    box-shadow:0 4px 14px rgba(47,128,111,.24);
  }

  @media (max-width: 760px){
    body{font-size:12px;}
    #schemeTabs,#btnCompare,#btnSave,#btnOpen,#btnRedo{display:none !important;}
    header{
      display:flex;min-height:48px;padding:5px 7px;gap:5px;overflow-x:auto;overflow-y:hidden;
      max-width:100vw;flex-wrap:nowrap;
    }
    header h1.brand-logo{width:112px;height:34px;flex-basis:112px;padding:3px 5px;}
    .topbar-main,.topbar-secondary{gap:5px;min-width:max-content;overflow:visible;}
    header .face-note{display:none;}
    .toolbar-group{gap:4px;padding:3px 4px;flex:0 0 auto;border-radius:7px;}
    .toolbar-file{margin-left:0;}
    .toolbar-menu summary{min-height:34px;padding:6px 8px;}
    .toolbar-popover{
      position:fixed;left:var(--toolbar-menu-left,8px);top:var(--toolbar-menu-top,56px);
      grid-template-columns:minmax(150px,1fr);
      width:min(260px,calc(100vw - 16px));
    }
    .toolbar-popover-house-view{
      grid-template-columns:minmax(150px,1fr) auto;
    }
    .toolbar-popover-house-view .floor-visibility button{width:54px;}
    .toolbar-popover-house-floor{
      min-width:0;
      grid-template-columns:minmax(150px,1fr);
    }
    .toolbar-popover-house-floor label{display:none;}
    .toolbar-popover #btnPng,.toolbar-popover #btnNew,.toolbar-popover .record-controls,.toolbar-popover .record-meta-fields{grid-column:auto;}
    .toolbar-popover-house-file #houseBtnPng,
    .toolbar-popover-house-file .house-record-controls{grid-column:1/-1;}
    .record-controls{grid-template-columns:minmax(78px,1fr) 40px minmax(104px,1.1fr);}
    .toolbar-group:empty{display:none;}
    button{min-height:34px;padding:6px 8px;font-size:12px;}
    header button,header select{font-size:13px;}
    main{flex-direction:column;}
    #stage{order:1;flex:1 1 auto;width:100%;min-height:390px;}
    aside{
      order:2;width:100%;flex:0 0 min(34vh,280px);max-height:34vh;
      border-right:0;border-top:1px solid #ccd5de;padding:8px;
    }
    body.house-mode #houseAside{flex-basis:min(38vh,310px);max-height:38vh;}
    .sidebar-tabs{top:-8px;padding:8px 0 7px;grid-template-columns:repeat(4,minmax(64px,1fr));}
    .sidebar-tabs button{min-height:34px;font-size:13px;}
    .group{border-radius:8px;padding:8px 9px;}
    .group h3{font-size:12px;margin-bottom:7px;}
    .row{gap:5px;}
    input[type=number],input[type=text],select{min-height:36px;font-size:16px;}
    aside .row input[type=number][style]{width:76px !important;}
    .preset-grid button,.notch-actions button,.screen-options button,.direct-actions button{min-height:34px;}
    .viewport-stats{left:10px;top:8px;font-size:10px;}
    .brand-signature{right:10px;bottom:10px;font-size:10px;letter-spacing:1px;}
    .house-scene-label{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:8px 9px;}
    .house-scene-label strong{font-size:12px;}
    .house-scene-label span{font-size:11px;}
    .house-viewport-actions{right:10px;top:10px;gap:5px;padding:5px;max-width:calc(100% - 20px);}
    .house-viewport-actions button{min-height:34px;padding:6px 9px;font-size:12px;}
    footer{padding:6px 9px;gap:10px;overflow-x:auto;white-space:nowrap;font-size:12px;}
    #toast{bottom:calc(min(34vh,280px) + 46px);max-width:88%;}
  }

  @media (max-width: 760px){
    body.house-mode .house-scene-label{
      top:10px;
      bottom:auto;
    }
    body.house-mode #houseAside{
      border-top-color:#cfc7ba;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 -6px 18px rgba(80,72,60,.055);
    }
  }


/* ============================================================
   §2026 皮肤层(2026-07-03 UI 升级)
   规则:只覆盖外观(颜色/圆角/阴影/字重/动效),布局冻结区
   (尺寸/定位/显隐机制/媒体查询数值)一律不碰。
   统一 token 于此重定义,旧的两套 :root 与 house-mode 硬编码
   被本层按级联覆盖。
   ============================================================ */
:root{
  --bg:#eef2f6; --panel:#ffffff; --panel-2:#f7fafc;
  --border:#dbe3ea; --border-strong:#c3cfda;
  --text:#1f2b3a; --muted:#64748b; --ink-inverse:#f2f7fa;
  --accent-700:#20707e; --accent-600:#28879b; --accent:#2f9eb0;
  --accent-300:#7cc4d0; --accent-soft:#e6f4f6; --accent-ring:rgba(47,158,176,.28);
  --ok:#2e8b6d; --ok-soft:#e8f5ef;
  --danger:#c0504d; --danger-strong:#a83a3a; --danger-soft:#fbeeed;
  --hd-bg-1:#1b2b3a; --hd-bg-2:#24394c; --hd-line:rgba(255,255,255,.10);
  --hd-btn:rgba(255,255,255,.07); --hd-btn-hover:rgba(255,255,255,.15); --hd-text:#e8f1f7;
  --radius-s:6px; --radius:8px; --radius-l:12px;
  --shadow-1:0 1px 3px rgba(23,38,54,.06);
  --shadow-2:0 4px 14px rgba(23,38,54,.10);
  --shadow-pop:0 12px 32px rgba(12,24,36,.28);
  --focus-ring:0 0 0 3px var(--accent-ring);
}

/* ================= 阳光房设计模式 ================= */
.sunroom-only{display:none !important;}
#sunroomAside{display:none;}
.sunroom-scene-label{display:none;}
body.sunroom-mode .window-only,
body.sunroom-mode .house-only{display:none !important;}
body.sunroom-mode .sunroom-only{display:flex !important;}
body.sunroom-mode #windowAside,
body.sunroom-mode #houseAside{display:none !important;}
body.sunroom-mode #sunroomAside{display:flex;}
body.sunroom-mode #projectStats,
body.sunroom-mode .brand-signature,
body.sunroom-mode #houseSceneLabel,
body.house-mode #sunroomSceneLabel{display:none !important;}
body.sunroom-mode header{
  background:linear-gradient(135deg,#17323b 0%,#1f4650 56%,#1b3d47 100%);
}
body.sunroom-mode #stage{
  background:radial-gradient(circle at 52% 34%,#f8fcfd 0%,#edf5f6 52%,#d9e7e9 100%);
}
body.sunroom-mode #sunroomAside{
  background:#eef6f5;
  border-right-color:#b9cfcb;
}
body.sunroom-mode #sunroomAside .sidebar-tabs{background:#eef6f5;}
body.sunroom-mode .sunroom-scene-label{
  display:flex;
  top:14px;
  bottom:auto;
  border-color:rgba(15,138,104,.30);
  background:rgba(248,253,252,.93);
}
body.sunroom-mode .sunroom-scene-label strong{color:#245248;}
body.sunroom-mode .sunroom-scene-label span{color:#55746e;}
body.sunroom-mode #sunroomRoofPickTool.active,
body.sunroom-mode #sunroomRoofPanelPickTool.active,
body.sunroom-mode #sunroomRoofPanelVTool.active,
body.sunroom-mode #sunroomRoofPanelHTool.active,
body.sunroom-mode #sunroomRoofVTool.active,
body.sunroom-mode #sunroomRoofHTool.active,
body.sunroom-mode #sunroomRoofDropTool.active,
body.sunroom-mode #sunroomDrawTool.active,
body.sunroom-mode #sunroomSelectTool.active,
body.sunroom-mode #sunroomViewTop.active,
body.sunroom-mode #sunroomViewIso.active{
  background:#0f8a68;
  border-color:#0f8a68;
  color:#fff;
}
#sunroomAside .row > span{font-size:12px;color:#61737b;}
#sunroomAside .modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
#sunroomAside .modes button{min-width:0;}
#sunroomAside .house-readout{white-space:pre-line;line-height:1.6;}
#sunroomAside .sunroom-draw-card{border-color:#b9d9d3;background:#f7fbfa;}
#sunroomAside .sunroom-inline-status,
#sunroomAside .sunroom-roof-pick-status{
  margin-top:7px;padding:7px 9px;border-radius:7px;background:#e8f4f2;
  color:#315f58;font-size:12px;line-height:1.5;
}
#sunroomAside .sunroom-roof-pick-status.has-selection{
  background:#e2f2f8;color:#176782;box-shadow:inset 3px 0 #1b91b6;
}
#sunroomAside .sunroom-roof-panel-card{margin-top:9px;padding:9px;border-color:#b8d7df;
  background:linear-gradient(180deg,#f9fdfe,#f1f8fa);}
#sunroomAside .sunroom-roof-panel-heading{display:flex;align-items:flex-start;
  justify-content:space-between;gap:8px;margin-bottom:7px;}
#sunroomAside .sunroom-roof-panel-heading .direct-title{margin:0;color:#245f73;}
#sunroomAside .sunroom-roof-panel-heading small{display:block;margin-top:2px;color:#688087;
  font-size:11px;line-height:1.35;}
#sunroomAside .sunroom-roof-panel-heading > span{flex:0 0 auto;padding:2px 7px;
  border-radius:999px;background:#dff0f5;color:#24728a;font-size:10px;font-weight:800;}
#sunroomAside .sunroom-roof-panel-actions{grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:6px;}
#sunroomAside .sunroom-roof-panel-card button{min-height:44px;}
#sunroomAside .sunroom-roof-panel-actions button{min-width:0;padding:7px 6px;}
#sunroomAside .sunroom-roof-panel-material{margin:0 0 6px;}
#sunroomAside .sunroom-roof-panel-material label{min-width:52px;}
#sunroomAside .sunroom-roof-panel-status{padding:7px 8px;border-radius:6px;
  background:#e5f2f5;color:#376873;font-size:11px;line-height:1.45;}
#sunroomAside .sunroom-roof-panel-status.has-selection{background:#dff0f8;color:#176b87;
  box-shadow:inset 3px 0 #2294b7;}
#sunroomAside .sunroom-roof-panel-status.is-invalid{background:#fff0ef;color:#8a3633;
  box-shadow:inset 3px 0 #d45c55;}
#sunroomAside .sunroom-roof-panel-mullion{margin-top:7px;padding-top:7px;
  border-top:1px solid #cfe0e5;}
#sunroomAside .sunroom-roof-panel-mullion > .direct-title{margin:0 0 6px;color:#456c78;}
#sunroomAside .sunroom-roof-panel-mullion-actions{grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:6px;}
#sunroomAside .sunroom-roof-panel-mullion-actions button{min-width:0;padding:7px 6px;}
#sunroomAside #sunroomRoofPanelDeleteMullion{grid-column:1/-1;}
#sunroomAside .sunroom-roof-panel-mullion-status{padding:6px 7px;border-radius:6px;
  background:#f2f6f7;color:#60777e;font-size:11px;line-height:1.45;}
#sunroomAside .sunroom-roof-panel-mullion-status.is-disabled{background:#f5f3f1;color:#856f60;}
#sunroomAside .sunroom-facade-measurements{margin:8px 0;padding:8px;}
#sunroomAside .sunroom-facade-measurements[hidden]{display:none;}
#sunroomAside .sunroom-facade-card-heading{display:flex;align-items:center;
  justify-content:space-between;gap:8px;margin-bottom:7px;}
#sunroomAside .sunroom-facade-card-heading .direct-title{margin:0;}
#sunroomAside .sunroom-facade-card-heading > span{flex:0 0 auto;padding:2px 7px;
  border-radius:999px;background:#e4f2f7;color:#276d83;font-size:11px;font-weight:700;}
#sunroomAside .sunroom-measure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
#sunroomAside .sunroom-measure-item{display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:7px;border:1px solid #d7e3ec;border-radius:6px;background:#fbfdff;}
#sunroomAside .sunroom-measure-item > span{font-size:12px;color:#61737b;}
#sunroomAside .sunroom-measure-item > strong{font-size:16px;line-height:1.25;color:#1f628e;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
#sunroomAside .sunroom-measure-wide{grid-column:1/-1;flex-direction:row;align-items:center;
  justify-content:space-between;}
#sunroomAside .sunroom-roof-tools{grid-template-columns:repeat(3,minmax(0,1fr));}
#sunroomAside button.wide{width:100%;margin-top:7px;}
#sunroomAside select:disabled,
#sunroomAside button:disabled{opacity:.45;cursor:not-allowed;}
body.presenting #sunroomAside{display:none !important;}

@media (max-width:760px){
  body.sunroom-mode #sunroomAside{flex-basis:min(42vh,350px);max-height:42vh;}
  body.sunroom-mode .sunroom-scene-label{top:10px;bottom:auto;}
}

body.house-mode{
  --accent-700:#1f6152; --accent-600:#2a7463; --accent:#2f806f;
  --accent-300:#7fbfae; --accent-soft:#eaf5f1; --accent-ring:rgba(47,128,111,.26);
  --hd-bg-1:#18302b; --hd-bg-2:#224238;
}

/* ---------- 头部 ---------- */
header{
  background:linear-gradient(160deg,var(--hd-bg-1),var(--hd-bg-2));
  border-bottom:1px solid rgba(127,199,214,.20);
  color:var(--hd-text);
}
body.house-mode header{
  background:linear-gradient(160deg,var(--hd-bg-1),var(--hd-bg-2));
  border-bottom-color:rgba(127,214,186,.22);
}
.brand-logo{
  background:rgba(255,255,255,.94);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
header .toolbar-group{
  background:rgba(255,255,255,.045);
  border-color:var(--hd-line);
  border-radius:var(--radius);
}
header button, header summary{
  background:var(--hd-btn);
  border-color:transparent;
  color:var(--hd-text);
  border-radius:var(--radius-s);
  transition:background .15s ease, box-shadow .15s ease;
}
header button:hover, header summary:hover{ background:var(--hd-btn-hover); }
header button.active, body.house-mode header button.active{
  background:var(--accent-600);
  border-color:var(--accent-300);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.mode-tabs button.active, body.house-mode .mode-tabs button.active{
  background:var(--accent-600);
  border-color:var(--accent-300);
  color:#fff;
}
header button.recording{
  background:#b3364f;
  border-color:#ff9db3;
  animation:skin-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes skin-rec-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,110,140,.45); }
  50%{ box-shadow:0 0 0 6px rgba(255,110,140,0); }
}
header button:disabled{ opacity:.45; filter:saturate(.4); cursor:not-allowed; }

/* 折叠菜单箭头随开合旋转 */
.toolbar-menu summary::after{ transition:transform .18s ease; }
.toolbar-menu[open] summary::after{ transform:rotate(180deg); }
.toolbar-menu[open] summary{ background:var(--accent-600); color:#fff; }

/* ---------- 浮层菜单 ---------- */
.toolbar-popover{
  background:linear-gradient(170deg,#233a4b,#1d3140);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-pop);
  transform-origin:top left;
  animation:skin-pop-in .13s ease;
}
body.house-mode .toolbar-popover{
  background:linear-gradient(170deg,#22453c,#1b3830);
}
@keyframes skin-pop-in{
  from{ opacity:0; transform:translateY(-4px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .toolbar-popover{ animation:none; }
  header button, header summary{ transition:none; }
}

/* ---------- 侧栏 ---------- */
aside{ background:var(--bg); }
aside .group, .house-panel-section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-1);
  transition:box-shadow .18s ease;
}
aside .group:hover, .house-panel-section:hover{ box-shadow:var(--shadow-2); }
aside .group h3{
  color:#475b6e;
  letter-spacing:.3px;
}
aside .group h3::before{
  background:var(--accent);
}
.sidebar-tabs button{
  border-radius:var(--radius-s);
  transition:background .15s ease,color .15s ease;
}
.sidebar-tabs button.active,
body.house-mode .sidebar-tabs button.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  font-weight:650;
}

/* ---------- 浅色区按钮体系 ---------- */
aside button, footer button, #dimEditor button{
  border-radius:var(--radius-s);
  border:1px solid var(--border-strong);
  background:var(--panel);
  color:var(--text);
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
aside button:hover:not(:disabled){
  background:var(--accent-soft);
  border-color:var(--accent-300);
}
aside button.active,
body.house-mode aside button.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-700);
  font-weight:650;
  box-shadow:inset 0 0 0 1px var(--accent-ring);
}
/* 危险按钮:常态即红系,hover 实底 */
aside button.warn, footer button.warn, button.warn{
  color:var(--danger);
  border-color:#e4b6b4;
  background:var(--danger-soft);
}
aside button.warn:hover:not(:disabled), button.warn:hover:not(:disabled){
  background:var(--danger);
  border-color:var(--danger-strong);
  color:#fff;
}
aside button:disabled, footer button:disabled{
  opacity:.5; filter:saturate(.3); cursor:not-allowed;
}
/* 键盘焦点可见性(全局新增) */
button:focus-visible, summary:focus-visible, select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- 输入/下拉 ---------- */
aside input[type=number], aside input[type=text], aside select,
#dimEditor input, header select, footer select{
  border:1px solid var(--border-strong);
  border-radius:var(--radius-s);
  background:var(--panel);
  color:var(--text);
  transition:border-color .14s ease, box-shadow .14s ease;
}
aside input:focus, aside select:focus, #dimEditor input:focus{
  border-color:var(--accent);
  box-shadow:var(--focus-ring);
}
.open-control input[type=range]{ accent-color:var(--accent-300); }

/* ---------- 表单行标签对齐 ---------- */
aside .row label{ min-width:52px; color:var(--muted); }

/* ---------- 提示与小字 ---------- */
.hint, .attach-tip{
  color:var(--muted);
  background:var(--panel-2);
  border-radius:var(--radius-s);
}
.hint::before{ content:"ⓘ "; color:var(--accent-300); }

/* ---------- toast ---------- */
#toast{
  background:rgba(28,40,52,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(127,199,214,.28);
  border-radius:10px;
  box-shadow:var(--shadow-pop);
  color:#eef6f9;
  transition:opacity .22s ease, transform .22s ease;
  transform:translate(-50%,6px);
}
#toast.show{ transform:translate(-50%,0); }

/* ---------- 底部状态栏 ---------- */
footer{
  background:var(--panel);
  border-top:1px solid var(--border);
  font-variant-numeric:tabular-nums;
}
#selInfo{
  color:var(--accent-700);
  background:var(--accent-soft);
  padding:1px 10px;
  border-radius:99px;
}

/* ---------- 尺寸编辑框 ---------- */
#dimEditor{
  border:1px solid var(--accent-300);
  border-radius:10px;
  box-shadow:var(--shadow-pop);
  background:var(--panel);
}
#dimEditorOk{
  background:var(--accent);
  border-color:var(--accent-600);
  color:#fff;
}
#dimEditorOk:hover{ background:var(--accent-600); }

/* ---------- 画布玻璃浮层 ---------- */
.opening-quick-bar, .house-viewport-actions, .prop-transform-actions, .house-scene-label{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(120,145,165,.22);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-2);
}
.viewport-stats{
  background:rgba(255,255,255,.85);
  border-radius:var(--radius-s);
  color:var(--muted);
}

/* ---------- 滚动条 ---------- */
aside::-webkit-scrollbar, .toolbar-popover::-webkit-scrollbar, footer::-webkit-scrollbar{
  width:8px; height:8px;
}
aside::-webkit-scrollbar-thumb, .toolbar-popover::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
aside::-webkit-scrollbar-thumb:hover{ background:var(--accent-300); background-clip:content-box; }
aside{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }

/* ---------- 户型模式差异微调 ---------- */
body.house-mode aside .group h3::before,
body.house-mode .house-panel-section h4::before{
  background:var(--accent);
}

/* ============================================================
   §重构层(2026-07-10):SVG 线性图标系统 + 顶栏排布语言
   在 2026 皮肤层之后按级联覆盖;只动外观与排布,不动显隐机制。
   ============================================================ */
/* 图标基础:随文字色,细描边,不吃事件 */
.ic{
  width:15px;height:15px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
header button,header summary,.toolbar-popover button,
aside .modes button,footer button,#presentOverlay button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
/* 弹出菜单里的条目左对齐,读起来像菜单而不是按钮堆 */
.toolbar-popover button{justify-content:flex-start;text-align:left;}
.toolbar-popover .ic{opacity:.85;}

/* 顶栏:一行安静的胶囊簇,统一 30px 控件节奏。
 * 尺寸类规则只作用于桌面端(>760px),移动端保持基础层媒体查询的
 * 触控目标(34px)与紧凑排布不被级联覆盖。 */
@media (min-width:761px){
  header{min-height:50px;padding:5px 12px;gap:8px;}
  header h1.brand-logo{width:150px;height:40px;flex-basis:150px;padding:3px 6px;}
  header button,header summary{min-height:30px;padding:5px 10px;font-size:12px;}
  .mode-tabs button,#schemeTabs button{min-height:26px;}
}
header .toolbar-group,header .toolbar-menu{
  border-color:transparent;
  background:rgba(255,255,255,.05);
  border-radius:9px;
}
.icon-btn{width:32px;flex:0 0 32px;padding:5px 0;}
.record-frame-toggle{width:34px;flex:0 0 34px;padding:5px 0;justify-content:center !important;}

/* 模式切换与方案:分段控件(joined segments)。
 * #schemeTabs button 是 (1,0,1) 特异性,必须显式补回 hover/active,
 * 否则会压掉 header button.active 的选中高亮。 */
.mode-tabs,#schemeTabs{
  background:rgba(255,255,255,.09);
  border-color:transparent;border-radius:9px;padding:2px;gap:2px;
}
.mode-tabs button,#schemeTabs button{
  border:none;background:transparent;border-radius:7px;
}
.mode-tabs button{font-weight:650;}
#schemeTabs button:hover{background:var(--hd-btn-hover);}
#schemeTabs button.active{
  background:var(--accent-600);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* 客户演示:顶栏唯一的主行动按钮 */
header .btn-hero{
  background:var(--accent-600);
  border-color:transparent;
  font-weight:650;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
header .btn-hero:hover{background:var(--accent-700);}

/* 录轨道进行中的 REC 角标:画布右上角红色呼吸点+计时 */
#trackRecIndicator{
  position:absolute; top:12px; right:14px; z-index:30;
  display:none; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  background:rgba(24,14,16,.72); color:#ffd9de;
  font-size:12px; font-weight:700; letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#trackRecIndicator.show{ display:inline-flex; }
#trackRecIndicator .rec-dot{
  width:9px; height:9px; border-radius:50%;
  background:#ff4d67;
  animation:rec-dot-pulse 1.1s ease-in-out infinite;
}
@keyframes rec-dot-pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,77,103,.5); }
  50%{ opacity:.55; box-shadow:0 0 0 5px rgba(255,77,103,0); }
}
@media (prefers-reduced-motion: reduce){
  #trackRecIndicator .rec-dot{ animation:none; }
}

/* 自动运镜:与运镜轨道同款分区 */
.house-auto-motion-controls{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:7px; margin-top:3px;
}
.house-auto-motion-controls::before{
  content:"自动运镜";
  grid-column:1/-1;
  font-size:11px; letter-spacing:.12em;
  color:rgba(232,241,247,.5);
  padding-left:2px;
}

/* 视图菜单里的运镜轨道:分区+小节标题 */
.window-camera-track-controls,.house-camera-track-controls,.sunroom-camera-track-controls{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:7px;margin-top:3px;
}
.house-camera-track-controls{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
}
.window-camera-track-controls::before,.house-camera-track-controls::before,
.sunroom-camera-track-controls::before{
  content:"运镜轨道";
  grid-column:1/-1;
  font-size:11px;letter-spacing:.12em;
  color:rgba(232,241,247,.5);
  padding-left:2px;
}
.house-camera-track-controls #houseTrackWindowAnim{grid-column:1/-1;}

/* 销售视觉环境：门窗与户型共用同一组紧凑预设。 */
.sales-visual-preset-control{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:34px;
  padding:3px 6px 3px 9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:#d7e6f3;
  font-size:12px;
  font-weight:650;
}
.sales-visual-preset-control > span{white-space:nowrap;}
.sales-visual-preset-control .sales-visual-preset-select{
  width:100%;
  min-width:0;
  min-height:30px;
  padding-top:4px;
  padding-bottom:4px;
}
.toolbar-popover-view > .sales-visual-preset-control{grid-column:1/-1;}
.toolbar-popover-house-view > .sales-visual-preset-control{grid-column:1;}

/* 日照方向：两种设计模式展示同构控件，状态由销售视觉模块统一同步。 */
.toolbar-popover{
  max-height:calc(100vh - var(--toolbar-menu-top,58px) - 12px);
  max-height:calc(100dvh - var(--toolbar-menu-top,58px) - 12px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.sales-sun-control{
  display:grid;
  gap:6px;
  min-width:0;
  padding:7px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  background:rgba(7,20,28,.22);
  color:#d7e6f3;
}
.toolbar-popover-view > .sales-sun-control{grid-column:1/-1;}
.toolbar-popover-house-view > .sales-sun-control{grid-column:1;}
.sales-sun-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-width:0;
}
.sales-sun-heading strong{
  color:#f2f7fa;
  font-size:12px;
  letter-spacing:.04em;
}
.sales-sun-status{
  min-width:0;
  overflow:hidden;
  color:rgba(226,239,247,.64);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.toolbar-popover .sales-sun-reset{
  width:auto;
  min-height:27px;
  padding:3px 7px;
  border-color:rgba(255,255,255,.14);
  font-size:11px;
}
.sales-sun-row{
  display:grid;
  grid-template-columns:34px 42px minmax(72px,1fr) 42px 40px;
  align-items:center;
  gap:4px;
  min-width:0;
}
.sales-sun-axis-label{
  color:#d7e6f3;
  font-size:11.5px;
  font-weight:650;
  white-space:nowrap;
}
.sales-sun-row input[type=range]{
  width:100%;
  min-width:0;
  min-height:24px;
  padding:0;
  accent-color:var(--accent-300,#7fbfae);
  cursor:pointer;
}
.toolbar-popover .sales-sun-nudge{
  width:100%;
  min-width:0;
  min-height:28px;
  padding:3px 2px;
  border-color:rgba(255,255,255,.13);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.sales-sun-value{
  min-width:0;
  color:#fff;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* 三个设计板块共用的六向视角器：三组轴向并排，少占一行但仍能一眼看懂。 */
.standard-view-picker{
  grid-column:1/-1;
  min-width:276px;
  padding:7px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  background:rgba(7,20,28,.22);
}
.standard-view-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:18px;
  margin:0 2px 6px;
  color:#f2f7fa;
  font-size:11px;
  line-height:1;
}
.standard-view-caption strong{font-size:12px;letter-spacing:.04em;}
.standard-view-caption span{color:rgba(226,239,247,.58);font-weight:500;}
.standard-view-pairs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.standard-view-pair{
  display:grid;
  grid-template-columns:21px repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:3px;
  min-width:0;
  padding:3px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:7px;
  background:rgba(255,255,255,.035);
}
.standard-view-axis{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
}
.axis-x .standard-view-axis{background:#b75c66;}
.axis-y .standard-view-axis{background:#3f9a75;}
.axis-z .standard-view-axis{background:#3f7fb4;}
.standard-view-pair > button{
  min-width:0;
  min-height:29px;
  padding:4px 5px;
  border-color:rgba(255,255,255,.12);
  border-radius:5px;
  background:rgba(255,255,255,.06);
  color:#eaf2f7;
  font-size:12px;
  font-weight:750;
}
.standard-view-pair > button:hover{
  border-color:rgba(122,221,195,.58);
  background:rgba(110,209,183,.16);
}
.standard-view-pair > button.active,
.standard-view-pair > button[aria-pressed="true"]{
  border-color:#85e4ca;
  background:#138568;
  color:#fff;
  box-shadow:0 0 0 1px rgba(133,228,202,.15) inset;
}
.toolbar-popover-standard-view{grid-template-columns:minmax(276px,1fr);}
.toolbar-popover-house-view > .standard-view-picker{grid-column:1/-1;grid-row:1;}
.toolbar-popover-house-view .floor-visibility{grid-row:2 / span 6;}
#sunroomAxisViewMenu{align-self:stretch;flex:0 0 auto;}
#sunroomAxisViewMenu > summary{height:100%;min-height:34px;}

/* 户型“视图”：常用视角首屏直达，低频选项按任务折叠。 */
.toolbar-popover-house-view{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  width:min(420px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
}
.house-view-primary{
  grid-column:1;
  grid-row:1;
  display:grid;
  gap:6px;
  min-width:0;
}
.toolbar-popover-house-view .house-view-primary > .standard-view-picker{
  grid-column:auto;
  grid-row:auto;
  width:100%;
  min-width:0;
}
.house-view-mode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  min-width:0;
}
.toolbar-popover-house-view .house-view-mode-grid > #houseViewIso,
.toolbar-popover-house-view .house-view-mode-grid > #houseViewTop,
.toolbar-popover-house-view .house-view-mode-grid > #houseViewFps{
  grid-column:auto;
  justify-content:center;
  text-align:center;
}
.toolbar-popover-house-view > .floor-visibility{
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:5px;
  max-height:154px;
  margin-left:2px;
  padding-left:7px;
  overflow-x:hidden;
  overflow-y:auto;
  border-top:0;
  border-left:1px solid rgba(255,255,255,.14);
}
.toolbar-popover-house-view > .floor-visibility button{
  width:56px;
  min-height:30px;
  flex:0 0 auto;
  padding:5px 4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.house-view-section{
  grid-column:1/-1;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(7,20,28,.16);
  white-space:normal;
}
.toolbar-popover-house-view .house-view-section > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:36px;
  padding:7px 9px;
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:#eef6fa;
  list-style:none;
}
.toolbar-popover-house-view .house-view-section > summary::-webkit-details-marker{display:none;}
.toolbar-popover-house-view .house-view-section > summary:hover{
  background:rgba(110,209,183,.12);
}
.toolbar-popover-house-view .house-view-section > summary > span{
  min-width:0;
  font-size:12px;
  font-weight:750;
  letter-spacing:.02em;
}
.toolbar-popover-house-view .house-view-section > summary > small{
  color:rgba(226,239,247,.58);
  font-size:10.5px;
  font-weight:500;
  white-space:nowrap;
}
.toolbar-popover-house-view .house-view-section > summary::after{
  content:"›";
  font-size:17px;
  line-height:1;
  opacity:.72;
  transform:rotate(0deg);
}
.toolbar-popover-house-view .house-view-section[open] > summary{
  border-radius:7px 7px 0 0;
  background:rgba(47,128,111,.24);
  color:#fff;
}
.toolbar-popover-house-view .house-view-section[open] > summary::after{
  transform:rotate(90deg);
}
.house-view-section-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  min-width:0;
  padding:7px;
  border-top:1px solid rgba(255,255,255,.08);
}
.house-view-display-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  min-width:0;
}
.house-view-display-actions > button{
  justify-content:center;
  text-align:center;
}
.house-view-display-actions > #houseToggleWallDims,
.house-view-display-actions > #houseToggleOpeningDims{grid-column:auto;}
.house-view-display-actions > #houseQualityToggle{grid-column:1/-1;}
.house-view-section-body > .sales-visual-preset-control,
.house-view-section-body > .sales-sun-control{width:100%;min-width:0;}
.toolbar-popover-house-view .house-view-demo-body > #houseAnimAll{
  grid-column:1/-1;
  justify-content:center;
  text-align:center;
}
.toolbar-popover-house-view .house-view-demo-body > .house-fps-speed-control,
.toolbar-popover-house-view .house-view-demo-body > .house-open-control{
  grid-column:1/-1;
  grid-template-columns:auto minmax(0,1fr) 54px;
  width:100%;
  min-width:0;
}
.toolbar-popover-house-view .house-view-demo-body > .open-control input[type=range]{
  width:100%;
  min-width:0;
}
.house-view-track-body > .house-auto-motion-controls,
.house-view-track-body > .house-camera-track-controls{
  grid-column:1/-1;
  min-width:0;
}
.house-view-track-body > .house-auto-motion-controls{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

/* ---------- 客户演示模式(纯净全屏,08-present.js) ---------- */
body.presenting header, body.presenting footer,
body.presenting #windowAside, body.presenting #houseAside{ display:none !important; }
body.presenting #openingQuickBar, body.presenting #projectStats,
body.presenting #dimEditor, body.presenting .record-frame-overlay,
body.presenting .house-viewport-actions{ display:none !important; }
#presentOverlay{ position:absolute; inset:0; pointer-events:none; z-index:40; }
#presentOverlay .present-logo{
  position:absolute; top:20px; left:24px; width:150px; max-width:32vw;
  opacity:.94; filter:drop-shadow(0 2px 8px rgba(20,40,60,.20));
}
#presentOverlay button{
  pointer-events:auto; border:none; color:#fff; cursor:pointer;
  background:rgba(30,44,60,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s ease;
}
#presentOverlay button:hover{ background:rgba(30,44,60,.55); }
#presentExit{
  position:absolute; top:18px; right:20px; width:42px; height:42px;
  border-radius:50%; font-size:17px; line-height:1;
}
.present-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:72px; border-radius:14px;
  font-size:32px; line-height:1; padding-bottom:6px;
}
#presentPrev{ left:16px; }
#presentNext{ right:16px; }
#presentSash{
  position:absolute; right:20px; bottom:28px;
  height:44px; padding:0 20px; border-radius:999px;
  font-size:14px; letter-spacing:.5px;
}
#presentHint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  background:rgba(24,36,50,.58); color:#fff; padding:9px 20px;
  border-radius:999px; font-size:13px; letter-spacing:.6px; white-space:nowrap;
  opacity:0; transition:opacity .45s ease; pointer-events:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
#presentHint.show{ opacity:1; }
@media (max-width:768px){
  #presentOverlay .present-logo{ width:110px; top:12px; left:14px; }
  .present-nav{ width:40px; height:60px; font-size:26px; }
  #presentHint{ font-size:12px; padding:7px 14px; bottom:18px; }
  #presentSash{ height:40px; padding:0 16px; bottom:16px; right:14px; }
}

/* PWA 更新征询按钮:出现在左下角,点它才保存工程并切新版本 */
.pwa-update-ready{
  position:fixed;
  left:12px;
  bottom:44px;
  z-index:1200;
  min-height:44px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:7px;
  background:#256f63;
  color:#fff;
  box-shadow:0 5px 18px rgba(19,50,48,.24);
  font-weight:650;
}
.pwa-update-ready:disabled{opacity:.72;cursor:wait;}

/* 移动端(≤760px):顶栏换行 + 44px 触控目标,覆盖桌面 30px 节奏 */
@media (max-width:760px){
  header{
    min-height:0;
    padding:6px 8px;
    gap:6px;
    flex-wrap:wrap;
    overflow:visible;
  }
  header h1.brand-logo{
    width:96px;
    height:44px;
    flex:0 0 96px;
    padding:3px 4px;
  }
  .topbar-main{
    flex:1 1 220px;
    min-width:0;
    gap:4px;
    overflow:visible;
  }
  .topbar-secondary{
    flex:1 0 100%;
    width:100%;
    min-width:0;
    gap:5px;
    justify-content:flex-end;
    overflow:visible;
  }
  header button,header summary,
  .mode-tabs button,#schemeTabs button{
    min-height:44px;
    padding:8px 9px;
  }
  .mode-tabs button{min-width:60px;}
  .icon-btn{
    width:44px;
    min-width:44px;
    flex-basis:44px;
    padding:8px 0;
  }
  .toolbar-group{padding:2px;}
  .toolbar-demo #demoModeSelect,
  .toolbar-demo .open-control{display:none;}
  .toolbar-demo{padding:0;background:transparent;}
  #btnPresent{
    width:44px;
    min-width:44px;
    padding:8px 0;
    font-size:0;
  }
  #btnPresent .ic{width:17px;height:17px;}
  #houseTopViewTools > summary{
    width:44px;
    min-width:44px;
    padding:8px 0;
    font-size:0;
    justify-content:center;
  }
  button,
  .sidebar-tabs button,
  .preset-grid button,.notch-actions button,.screen-options button,.direct-actions button,
  .house-viewport-actions button{
    min-height:44px;
  }
  input[type=number],input[type=text],input[type=range],select{min-height:44px;}
  .sales-visual-preset-control{
    min-height:44px;
    padding:3px 5px 3px 9px;
  }
  .sales-visual-preset-control .sales-visual-preset-select{
    min-height:44px;
    font-size:14px;
  }
  .toolbar-popover{
    max-height:calc(100vh - var(--toolbar-menu-top,56px) - 8px);
    max-height:calc(100dvh - var(--toolbar-menu-top,56px) - 8px);
  }
  .sales-sun-control{gap:5px;padding:6px;}
  .sales-sun-heading{gap:5px;}
  .sales-sun-row{
    grid-template-columns:32px 40px minmax(36px,1fr) 40px 36px;
    gap:3px;
  }
  .toolbar-popover .sales-sun-reset,
  .toolbar-popover .sales-sun-nudge{min-height:44px;}
  .toolbar-popover .sales-sun-reset{padding:5px 6px;}
  .toolbar-popover .sales-sun-nudge{padding:5px 1px;font-size:11px;}
  .sales-sun-row input[type=range]{min-height:44px;}
  .sales-sun-axis-label,.sales-sun-value{font-size:11px;}
  .notch-row label{min-height:44px;display:flex;align-items:center;gap:6px;}
  .notch-row input[type=checkbox]{width:22px;height:22px;}
  #stage{min-height:340px;}
  aside{flex-basis:min(40vh,330px);max-height:40vh;}
  body.house-mode #houseAside{flex-basis:min(42vh,350px);max-height:42vh;}

  /* 户型移动顶栏固定分行，避免模式按钮把“视图”入口推到屏幕外。 */
  body.house-mode header{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    align-items:center;
  }
  body.house-mode header h1.brand-logo{
    grid-column:1;
    grid-row:1;
  }
  body.house-mode .topbar-main{display:contents;}
  body.house-mode #appModeTabs{
    grid-column:2;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    min-width:0;
  }
  body.house-mode #appModeTabs button{
    min-width:0;
    padding-left:2px;
    padding-right:2px;
    font-size:12px;
    white-space:nowrap;
  }
  body.house-mode .toolbar-history{
    grid-column:1;
    grid-row:2;
    width:96px;
  }
  body.house-mode #houseTopViewTools{
    grid-column:2;
    grid-row:2;
    justify-self:start;
  }
  body.house-mode .topbar-secondary{
    grid-column:1/-1;
    grid-row:3;
  }

  /* 阳光房的工具区占 42vh；解除通用画布 340px 下限，让画布使用主区域
   * 的剩余高度，避免常见 360×640/667 设备上侧栏越过底部状态栏。 */
  body.sunroom-mode #stage{min-height:0;}

  /* 阳光房移动顶栏固定为两行：三个模式切换在首行，视图与历史在次行。
   * 仅作用于 sunroom-mode，门窗和户型继续沿用既有移动端排布。 */
  body.sunroom-mode header{
    display:grid;
    grid-template-columns:96px minmax(0,1fr) 98px;
    grid-template-rows:auto auto;
    align-items:center;
    overflow:hidden;
  }
  body.sunroom-mode header h1.brand-logo{
    grid-column:1;
    grid-row:1;
  }
  body.sunroom-mode .topbar-main{display:contents;}
  body.sunroom-mode #appModeTabs{
    grid-column:2 / 4;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    min-width:0;
  }
  body.sunroom-mode #appModeTabs button{
    min-width:0;
    padding-left:2px;
    padding-right:2px;
    font-size:12px;
    white-space:nowrap;
  }
  body.sunroom-mode #sunroomViewTools{
    grid-column:1 / 3;
    grid-row:2;
    width:100%;
    min-width:0;
  }
  body.sunroom-mode #sunroomViewTools > button,
  body.sunroom-mode #sunroomAxisViewMenu,
  body.sunroom-mode #sunroomTrackMenu{
    flex:1 1 0;
    min-width:0;
  }
  body.sunroom-mode #sunroomViewTools > button,
  body.sunroom-mode #sunroomAxisViewMenu > summary,
  body.sunroom-mode #sunroomTrackMenu > summary{
    padding-left:4px;
    padding-right:4px;
  }
  body.sunroom-mode #sunroomAxisViewMenu > summary,
  body.sunroom-mode #sunroomTrackMenu > summary{
    height:44px;
    min-height:44px;
  }
  .standard-view-picker{
    width:min(300px,calc(100vw - 32px));
    min-width:0;
  }
  .standard-view-caption{margin-bottom:7px;}
  .standard-view-pair > button{min-height:40px;padding:7px 4px;}
  body.sunroom-mode .toolbar-history{
    grid-column:3;
    grid-row:2;
    width:98px;
    justify-self:end;
  }
  body.sunroom-mode #btnUndo,
  body.sunroom-mode #btnRedo{display:inline-flex !important;}
  body.sunroom-mode .topbar-secondary{display:none;}

  .pwa-update-ready{left:8px;right:8px;bottom:48px;width:calc(100% - 16px);}
}

@media (max-width:760px){
  .toolbar-popover-house-view{
    width:min(420px,calc(100vw - 16px));
    max-width:calc(100vw - 16px);
  }
  .toolbar-popover-house-view button,
  .toolbar-popover-house-view .house-view-section > summary{
    min-height:44px;
  }
  .toolbar-popover-house-view > .floor-visibility button{min-height:44px;}
  .toolbar-popover-house-view .house-view-demo-body > .open-control input[type=range]{
    min-height:44px;
  }
}

@media (max-width:520px){
  .toolbar-popover-house-view{grid-template-columns:minmax(0,1fr);}
  .toolbar-popover-house-view > .house-view-primary{
    grid-column:1;
    grid-row:1;
  }
  .toolbar-popover-house-view > .floor-visibility{
    grid-column:1;
    grid-row:2;
    flex-direction:row;
    flex-wrap:wrap;
    max-height:none;
    margin-left:0;
    padding-top:7px;
    padding-left:0;
    overflow:visible;
    border-top:1px solid rgba(255,255,255,.14);
    border-left:0;
  }
  .toolbar-popover-house-view > .floor-visibility button{
    width:auto;
    min-width:54px;
    flex:1 1 54px;
  }
}

@media (max-width:340px){
  .toolbar-popover-house-view .house-view-section > summary > small{display:none;}
}
/* Persistent autosave warnings must survive ordinary status/toast updates. */
.project-autosave-warning{position:fixed;z-index:12000;left:16px;bottom:16px;max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border:1px solid #c78a2d;border-radius:10px;background:#fff5de;color:#704500;box-shadow:0 3px 18px #0002;font:13px/1.6 system-ui;white-space:pre-line}
.project-autosave-warning[hidden]{display:none}

/* Compact house status and its one-click dimension control. */
body.house-mode #houseSceneLabel{
  flex-direction:row;align-items:center;gap:8px;left:12px;top:10px;
  max-width:calc(100% - 24px);padding:4px 6px 4px 9px;border-radius:8px;
  box-shadow:0 3px 10px rgba(36,49,64,.08);
}
#houseSceneLabel .house-status-copy{min-width:0;max-width:168px;pointer-events:auto;}
#houseSceneLabel #houseStatusTitle{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:20px;
}
#houseSceneLabel #houseStatus{display:none;}
#houseSceneLabel #houseToggleDims{
  flex:0 0 auto;pointer-events:auto;min-height:28px;padding:4px 9px;font-size:12px;line-height:18px;
  border-radius:6px;white-space:nowrap;touch-action:manipulation;
}
@media (max-width:520px){
  #houseSceneLabel .house-status-copy{max-width:128px;}
}