:root{--bg:rgba(255,255,255,.78);--fg:#1d2530;--mut:#5b6675;--ac:#2f6fed;--r:14px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;color:var(--fg);background:#cfe0f0}
#viewer{position:fixed;inset:0}#viewer canvas{display:block;touch-action:none}
#title,#panel,#info,#hint,#walkHint,#loader{background:var(--bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 30px rgba(20,40,70,.15);border-radius:var(--r)}
#title{position:fixed;top:16px;left:16px;padding:12px 18px;max-width:calc(100% - 300px)}#title h1{margin:0;font-size:18px;font-weight:650;letter-spacing:.2px}
#panel{position:fixed;top:16px;right:16px;width:250px;padding:14px;max-height:calc(100% - 32px);overflow:auto}
#panel h2{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);margin:4px 0 8px;display:flex;justify-content:space-between}
#panel section+section{margin-top:14px}#panel label{display:flex;gap:8px;align-items:center;font-size:14px;padding:4px 0;cursor:pointer}
input[type=checkbox]{accent-color:var(--ac);width:17px;height:17px}input[type=range]{width:100%;accent-color:#f0a020}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
button{font:inherit;font-size:13px;padding:8px 10px;border-radius:10px;border:1px solid #d6dde6;background:#fff;color:var(--fg);cursor:pointer;transition:.15s}
button:hover{border-color:var(--ac);color:var(--ac)}button.accent{grid-column:span 2;background:var(--ac);color:#fff;border-color:var(--ac)}button.accent:hover{filter:brightness(1.1);color:#fff}
button.ghost{border:none;background:none;font-size:18px;padding:2px 8px}#panelToggle{display:none;float:right}
#info{position:fixed;left:16px;bottom:16px;padding:12px 16px;min-width:220px;max-width:340px;font-size:14px}#info b{display:block;font-size:15px;margin-bottom:4px;word-break:break-all;padding-right:20px}#info .k{color:var(--mut);font-size:12px}
#infoClose{position:absolute;top:4px;right:4px}
#hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);padding:8px 14px;font-size:12px;color:var(--mut);white-space:nowrap}
#walkHint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:12px 18px;font-size:14px;pointer-events:none}
#loader{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:18px 22px;width:280px;transition:opacity .4s}
#loader .lt{font-size:14px;margin-bottom:10px;display:flex;justify-content:space-between}.bar{height:6px;background:#e3e8ef;border-radius:3px;overflow:hidden}#barFill{height:100%;width:0;background:linear-gradient(90deg,#2f6fed,#58a6ff);transition:width .2s}
.room-label{background:rgba(29,37,48,.86);color:#fff;padding:5px 10px;border-radius:999px;font-size:12px;white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 3px 10px rgba(0,0,0,.25);transition:background .15s}
.room-label{padding:3px 8px;font-size:11px;font-weight:600}.room-label em{display:none;font-style:normal;font-weight:400;margin-left:6px}.room-label:hover{background:var(--ac);z-index:10!important}.room-label:hover em{display:inline}
@media (max-width:760px){#title{top:10px;left:10px;padding:8px 12px;max-width:calc(100% - 80px)}#title h1{font-size:14px}
#panel{top:10px;right:10px;width:auto;max-width:calc(100% - 20px);padding:8px}#panelToggle{display:block}#panel:not(.open) #panelBody{display:none}#panel.open{width:240px;top:70px}
#hint{display:none}#info{left:10px;right:10px;bottom:10px;max-width:none}button{padding:10px}.room-label{font-size:11px;padding:4px 8px}}

#panel .note{font-size:11px;line-height:1.35;color:var(--mut);margin:6px 0 0}
/* 2026-10-22 final: grouped layer panel, compass */
#panel{width:300px}#title .sub{font-size:12px;color:var(--mut);margin-top:2px}
#title{max-width:calc(100% - 350px)}
#panel h2 .mini{display:flex;gap:4px;text-transform:none;letter-spacing:0}#panel h2 .mini button{font-size:11px;padding:3px 7px;border-radius:7px}
details.lg{border-top:1px solid rgba(0,0,0,.08);padding:4px 0}details.lg summary{font-size:13px;font-weight:650;cursor:pointer;display:flex;align-items:center;gap:8px;padding:3px 0;list-style:none}
details.lg summary::-webkit-details-marker{display:none}details.lg summary:before{content:'▸';font-size:10px;color:var(--mut);width:10px}details.lg[open] summary:before{content:'▾'}
details.lg summary .cnt{margin-left:auto;font-weight:400;font-size:11px;color:var(--mut)}
#panel details.lg label{font-size:12.5px;padding:2px 0 2px 18px;line-height:1.25}#panel details.lg label small{color:var(--mut)}
.sw{width:10px;height:10px;border-radius:2px;border:1px solid rgba(0,0,0,.25);flex:none}
#compass{position:fixed;left:16px;top:86px;width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid rgba(255,255,255,.6);box-shadow:0 4px 14px rgba(20,40,70,.15);display:flex;align-items:center;justify-content:center}
#needle{display:flex;flex-direction:column;align-items:center;line-height:1;color:#222;transition:transform .05s linear}#needle span{font-size:15px}#needle b{font-size:10px}
@media (max-width:760px){#compass{top:64px;left:10px}#panel.open{width:280px}}
/* 2026-10-23 room labels: number + name, B&W, shown only where the room's floor is visible (app.js updateRoomLabels) */
.room-label{display:flex;flex-direction:column;align-items:center;gap:0;background:rgba(255,255,255,.92);color:#111;border:1px solid #222;border-radius:4px;
  padding:2px 6px 3px;box-shadow:0 1px 3px rgba(0,0,0,.25);font:600 12px/1.15 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  white-space:nowrap;text-align:center;opacity:1;transition:opacity .3s ease}
.room-label b{font-weight:700;font-size:12px;letter-spacing:.02em}
.room-label span{display:block;font-weight:400;font-size:10px;color:#333}
.room-label em{display:none}
.room-label:hover{background:#111;color:#fff}.room-label:hover span{color:#ddd}
.room-label.hid{opacity:0;pointer-events:none!important}
@media (max-width:760px){.room-label{padding:2px 5px}.room-label b{font-size:11px}.room-label span{font-size:9px}}
/* 2026-10-23 Finishes panel (finishes.js) */
#finishes .fnote{font-size:11px;line-height:1.35;color:var(--mut);margin:2px 0 4px}
details.fin{border-top:1px solid rgba(0,0,0,.08);padding:3px 0}
details.fin summary{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;cursor:pointer;list-style:none;padding:3px 0}
details.fin summary::-webkit-details-marker{display:none}details.fin summary:before{content:'▸';font-size:10px;color:var(--mut);width:10px}details.fin[open] summary:before{content:'▾'}
details.fin .fcur{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:400;font-size:12px;color:var(--fg);max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
details.fin .fdot{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.3);flex:none;display:inline-block}
.fgh{font-size:10.5px;color:var(--mut);margin:5px 0 3px;text-transform:uppercase;letter-spacing:.5px}
.fgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.fgrid.tex{grid-template-columns:repeat(5,1fr)}
button.fsw{position:relative;padding:0;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.25);min-width:0}
button.fsw.frost{background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.2px),radial-gradient(rgba(0,0,0,.15) 1px,transparent 1.2px)!important;background-size:4px 4px,5px 5px!important;background-position:0 0,2px 2px!important}
button.fsw[data-ast]:after{content:'*';position:absolute;top:-3px;right:1px;font-size:11px;color:#c00}
.fgrid.tex button.fsw{height:34px;background-size:cover;background-position:center}
.fgrid.tex button.fsw span{position:absolute;left:0;right:0;bottom:0;font-size:9px;background:rgba(255,255,255,.8);color:#111;border-radius:0 0 3px 3px;line-height:1.3}
button.fsw:hover{border-color:var(--ac);transform:scale(1.08)}
button.fsw.on{outline:2px solid var(--ac);outline-offset:1px}
.fprof{display:flex;flex-wrap:wrap;gap:2px 12px;margin:2px 0 2px}#panel .fprof label{font-size:12.5px;padding:1px 0}
.fprof .fnote{flex-basis:100%}
.fhint{font-size:11.5px;line-height:1.35;background:#eef4ff;border:1px solid #cfe0ff;border-radius:8px;padding:5px 8px;margin-top:6px;word-break:break-word;white-space:pre-wrap}

/* 2026-10-23 v6: always-visible Colors / B&W chips (bottom centre on every screen size) + finishes flash + mobile panel sizing */
#colorChips{position:fixed;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:0;z-index:20;border-radius:999px;box-shadow:0 6px 22px rgba(20,40,70,.28);background:#fff;padding:4px}
#colorChips[hidden]{display:none}
#colorChips button{border:none;border-radius:999px;font-size:15px;font-weight:650;padding:10px 20px;background:transparent;color:var(--fg);white-space:nowrap}
#colorChips button#btnColors{background:linear-gradient(90deg,#2f6fed,#7a4fe0 55%,#d9682b);color:#fff}
#colorChips button#btnColors:not(.on){animation:chipPulse 2.4s ease-in-out 3}
#colorChips button#btnBW.on{background:#1d2530;color:#fff}
#colorChips button:hover{filter:brightness(1.08)}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,111,237,.0)}50%{box-shadow:0 0 0 7px rgba(47,111,237,.28)}}
#finishes.flash{animation:finFlash 1.6s ease-out 1}
@keyframes finFlash{0%{background:rgba(47,111,237,.22)}100%{background:transparent}}
#finishes{border-radius:10px;scroll-margin-top:6px}
@media (max-width:760px){
  #colorChips{bottom:calc(14px + env(safe-area-inset-bottom))}
  #colorChips button{font-size:16px;padding:12px 22px}
  #panelToggle{font-size:15px;font-weight:650}
  #panel.open{top:64px;width:min(330px,calc(100% - 20px));max-height:calc(100% - 64px - 86px - env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  #panel:not(.open){width:auto}
  #title{max-width:calc(100% - 140px)}#title .sub{display:none}#title h1{font-size:13px;line-height:1.25}
  #panel.open #panelToggle{position:sticky;top:0;z-index:2;display:block;float:none;margin:0 0 4px auto;background:#fff;border:1px solid #d6dde6;border-radius:8px;padding:6px 12px}
  #info{bottom:calc(84px + env(safe-area-inset-bottom))}
  .fgrid{grid-template-columns:repeat(7,1fr);gap:6px}button.fsw{height:30px}.fgrid.tex button.fsw{height:42px}
}
@media (min-width:761px){#panel{max-height:calc(100% - 32px)}}
/* v6 roof profile picker: shaded profile thumbnails */
.fprof.thumbs{display:grid;grid-template-columns:1fr;gap:2px}
.fprof.thumbs label{gap:6px}.fprof.thumbs .fgh{margin:2px 0 0}
i.pthumb{display:inline-block;width:56px;height:18px;border-radius:3px;border:1px solid rgba(0,0,0,.25);background-size:cover;flex:none}
/* 2026-10-23 v9: Rooms plan view, room view bar, Sherwin-Williams paint panel */
#colorChips button#btnRooms{background:#fff;color:var(--fg);border-right:1px solid #d6dde6;border-radius:999px 0 0 999px;margin-right:4px}
#colorChips button#btnRooms.on{background:#1d2530;color:#fff}
#roomBar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;max-width:min(760px,calc(100% - 700px));min-width:360px;
  background:var(--bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 30px rgba(20,40,70,.15);border-radius:var(--r)}
#roomBar[hidden]{display:none}
#roomBar .rbt{display:flex;flex-direction:column;min-width:0;flex:1}#roomBar .rbt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#roomBar .rbt small{font-size:11px;color:var(--mut);line-height:1.3}
#roomBar .rbb{display:flex;gap:6px;flex:none}#roomBar button{font-size:13px;padding:8px 12px;white-space:nowrap}
button.accent2{background:#1d2530;color:#fff;border-color:#1d2530}button.accent2:hover{color:#fff;filter:brightness(1.25)}
body.rooms-plan #rbPlan{display:none}
body.rooms-plan #title,body.room-view #title{display:none}
body.rooms-plan .room-label,body.room-view .room-label{cursor:pointer}
body.rooms-plan .room-label{padding:4px 9px 5px;border-width:1.5px}body.rooms-plan .room-label b{font-size:13px}body.rooms-plan .room-label span{font-size:11px}
#paintPanel{position:fixed;left:16px;bottom:16px;z-index:16;width:330px;max-height:calc(100% - 120px);overflow:auto;padding:10px 12px;font-size:13px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 30px rgba(20,40,70,.18);border-radius:var(--r)}
#paintPanel[hidden]{display:none}
.pp-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-10px;background:inherit;z-index:1}.pp-head b{font-size:14px}
.pp-target{font-size:12.5px;line-height:1.35;background:#f3f6fa;border-radius:8px;padding:6px 8px;margin:4px 0 6px}.pp-target small{display:block;color:var(--mut);font-size:11px}
.pp-seg{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 6px;border:1px solid #d6dde6;border-radius:10px;overflow:hidden}
.pp-seg button{border:none;border-radius:0;padding:7px 6px;font-size:13px}.pp-seg button.on{background:var(--ac);color:#fff}.pp-seg button:disabled{color:#aab3bf;cursor:default}
#ppSearch{width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid #d6dde6;border-radius:10px;margin:2px 0 4px}
.ppgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
button.ppsw{display:flex;flex-direction:column;align-items:stretch;padding:0;border-radius:7px;overflow:hidden;min-width:0;text-align:left;border:1px solid rgba(0,0,0,.18)}
button.ppsw i{display:block;height:30px;border-bottom:1px solid rgba(0,0,0,.08)}
button.ppsw span{font-size:10px;line-height:1.2;padding:2px 4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg)}button.ppsw span b{display:block;font-size:9.5px;color:var(--mut);font-weight:600}
button.ppsw.on{outline:2px solid var(--ac);outline-offset:1px}button.ppsw:hover{border-color:var(--ac)}
.pp-pick{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:12.5px}.pp-pick i{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.25);flex:none}.pp-pick small{color:var(--mut)}
.pp-list{font-size:12px;margin:4px 0}.pp-list div{display:flex;align-items:center;gap:6px;padding:2px 0}.pp-list i{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:none}
.pp-list .mut{color:var(--mut)}button.ppx{margin-left:auto;padding:0 7px;font-size:14px;line-height:20px;border-radius:6px}
.pp-btns{display:flex;gap:6px;margin-top:4px}.pp-btns button{flex:1;padding:7px 6px}
#paintPanel .note{font-size:10.5px;line-height:1.35;color:var(--mut);margin:6px 0 0}
@media (max-width:760px){
  #roomBar{top:58px;left:10px;right:10px;transform:none;min-width:0;max-width:none;padding:6px 6px 6px 10px;gap:6px}
  #roomBar .rbt b{font-size:13px}#roomBar .rbt small{font-size:10px;max-height:2.6em;overflow:hidden}#roomBar button{padding:8px 9px;font-size:12px}
  body.room-view #compass,body.rooms-plan #compass{top:118px}
  body.room-view #colorChips{display:none}
  #paintPanel{left:0;right:0;bottom:0;width:auto;max-height:min(46vh,calc(100% - 140px));border-radius:16px 16px 0 0;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .ppgrid{grid-template-columns:repeat(4,1fr)}button.ppsw i{height:34px}
  body.rooms-plan #roomBar .rbt small{display:none}
}
@media (min-width:761px) and (max-width:1200px){#roomBar{max-width:calc(100% - 360px);left:16px;transform:none}}

.demo-label{position:fixed;left:12px;bottom:12px;z-index:5;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:4px 8px;font:600 12px/1.3 system-ui,sans-serif;color:#2b4a1e;pointer-events:none}
@media (max-width:760px){.demo-label{bottom:auto;top:64px;left:8px;font-size:11px}}