/* Eight-point orbital camera */
/* Minimal rectangular system: no rounded frames */
.sidebar,.brand-mark,.segmented button,.mini-options,.mini-options button,.mood-row,.mood-row button,.material-card,.style-grid button,.select-wrap select,.camera-angle-list button,.render-button,.topbar .icon-btn,.export-btn,.language-toggle,.language-toggle button,.discipline-nav,.discipline-nav button,.zone-card,.panel-reveal,.canvas-toolbar button,.canvas-tools-toggle,.utility-card,.utility-chips button{border-radius:0!important}.sidebar{border-radius:0!important}.canvas-tools-toggle{width:34px;height:30px}.panel-reveal{border-radius:0!important}
.projection-options{grid-template-columns:repeat(2,1fr)!important}.projection-options button{min-height:34px}.projection-options button:last-child{grid-column:2}
.pov-readout{margin-top:8px;padding-left:11px;border-left:1px solid #4c4c4c;max-width:none}.pov-readout b{display:block;color:#f0f0f0;font-size:12px;margin-bottom:4px}.pov-readout small{display:block;color:#959595;font-size:10px;line-height:1.35}
.lighting-scenarios{display:grid!important;grid-template-columns:repeat(2,1fr);border:0!important;padding:0!important;gap:5px!important;background:transparent!important}.lighting-scenarios button{border:1px solid #555!important;border-radius:12px!important;min-height:32px}.lighting-controls{margin-top:11px}.lighting-controls label{margin-top:10px!important}
.controls{display:flex;flex-direction:column}.utility-card{padding:9px;margin-top:8px;border:1px solid #393939;border-radius:9px;background:#0c0c0c}.utility-card>b{display:block;margin-bottom:7px;color:#dedede;font-size:11px}.utility-card small{display:block;margin-top:7px;color:#878787;font-size:9px;line-height:1.4}.utility-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.utility-chips:has(>button:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}.utility-chips button{padding:9px 2px;border:1px solid #505050;border-radius:0;background:#111;color:#c8c8c8;font-size:11px}.utility-chips button.active{border-color:#ddd;background:#ddd;color:#121212}.creative-hint{margin:0 0 4px;color:#9b9b9b;font-size:11px;line-height:1.5}.creative-action-row{display:flex;align-items:center;gap:6px}.creative-action-row #randomLevelGrid{flex:1}.creative-action-row #randomizeBtn{padding:5px 10px;border:1px solid #e5e5e5;border-radius:6px;background:#e5e5e5;color:#121212;font-size:10px;font-weight:700;white-space:nowrap}
.material-card[data-tone=travertine] i{background:linear-gradient(135deg,#e2d3ba,#9d8564)}.material-card[data-tone=walnut] i{background:repeating-linear-gradient(10deg,#4d3023,#4d3023 3px,#9a6d44 4px)}.material-card[data-tone=concrete] i{background:radial-gradient(#878984 1px,transparent 1px),#a5a7a4;background-size:5px 5px}.material-card[data-tone=marble] i{background:linear-gradient(135deg,#efede6 39%,#8e8e8b 41%,#efede6 45%,#b6aca1 48%,#efede6 51%)}.material-card[data-tone=limestone] i{background:linear-gradient(115deg,#dfd2b8,#aa9678)}.material-card[data-tone=terrazzo] i{background:radial-gradient(circle at 20% 35%,#6b655a 0 2px,transparent 2.5px),radial-gradient(circle at 75% 68%,#b87867 0 2px,transparent 2.5px),radial-gradient(circle at 60% 20%,#d5b671 0 2px,transparent 2.5px),#d3ccbd}.material-card[data-tone=oak] i{background:repeating-linear-gradient(8deg,#b48b59,#b48b59 3px,#e4c791 4px)}.material-card[data-tone=metal] i{background:linear-gradient(100deg,#4e5356,#d3d6d4 44%,#63686a 50%,#c0c4c2 62%,#414649)}.material-card[data-tone=glass] i{background:linear-gradient(135deg,#294850,#8ec2c6 45%,#d7e4df 47%,#4d7c82)}.material-card[data-tone=tile] i{background:linear-gradient(90deg,transparent 48%,#8c8272 49% 51%,transparent 52%),linear-gradient(transparent 48%,#8c8272 49% 51%,transparent 52%),#c5a787;background-size:12px 12px}.material-card[data-tone=plaster] i{background:radial-gradient(#d4c8b5 1px,transparent 1px),#bdae96;background-size:5px 5px}.material-card[data-tone=bamboo] i{background:repeating-linear-gradient(90deg,#8a7546,#8a7546 5px,#c3a968 6px,#c3a968 9px)}
.material-card[data-tone=porcelain] i{background:linear-gradient(135deg,#d9d7d1,#f5f4f0 45%,#b6b4ad)}.material-card[data-tone=fabric] i{background:repeating-linear-gradient(45deg,#777d78,#777d78 2px,#9fa59d 3px,#9fa59d 4px)}.material-card[data-tone=brass] i{background:linear-gradient(105deg,#6e5721,#d8b65b 45%,#766020)}.material-card[data-tone=brick] i{background:linear-gradient(90deg,transparent 47%,#6c4534 48% 52%,transparent 53%),linear-gradient(transparent 47%,#6c4534 48% 52%,transparent 53%),#b56d4f;background-size:15px 8px}.material-card[data-tone=terracotta] i{background:repeating-linear-gradient(90deg,#ad5838,#ad5838 5px,#d3865d 6px,#d3865d 8px)}.material-card[data-tone=zinc] i{background:linear-gradient(90deg,#4d5960,#a8b0b0 30%,#525e63 31%,#a8b0b0 62%,#4d5960)}.material-card[data-tone=fiber] i{background:repeating-linear-gradient(0deg,#8a8c88,#8a8c88 6px,#aeb0ab 7px)}.material-card[data-tone=granite] i{background:radial-gradient(#5c5d5b 1px,transparent 1px),#90918c;background-size:4px 4px}.material-card[data-tone=permeable] i{background:radial-gradient(circle,#484d48 0 2px,transparent 2.5px),#a5a798;background-size:8px 8px}.material-card[data-tone=basalt] i{background:linear-gradient(135deg,#303233,#777b78)}.material-card[data-tone=aggregate] i{background:radial-gradient(#9f8d72 1px,transparent 2px),radial-gradient(#696255 1px,transparent 2px),#c7b69b;background-size:7px 7px,9px 9px}.material-card[data-tone=corten] i{background:linear-gradient(125deg,#633323,#b75d35,#6a3424)}.material-card[data-tone=water] i{background:linear-gradient(135deg,#173c51,#72a7b1 48%,#244c61)}.material-card[data-tone=planting] i{background:radial-gradient(#31543b 1px,transparent 2px),#66815b;background-size:6px 6px}.material-card[data-tone=asphalt] i{background:radial-gradient(#2b2c2c 1px,transparent 2px),#464847;background-size:5px 5px}.material-card[data-tone=tactile] i{background:radial-gradient(circle,#d9bc3e 0 2px,transparent 2.5px),#edcf49;background-size:7px 7px}
.material-card[data-tone=leather] i{background:linear-gradient(120deg,#5c3a28,#8a5a3c 55%,#4a2f20)}
.material-card[data-tone=copper] i{background:linear-gradient(120deg,#8a4a2f,#c97a4a 50%,#6b3820)}
#materialGrid{display:block;column-count:2;column-gap:8px}
.material-group{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;break-inside:avoid}
.material-group:last-child{margin-bottom:0}
.material-group-label{color:#8f8f8f;font-size:9px;letter-spacing:.5px;text-transform:uppercase}
.material-group-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
/* 8 chế độ góc máy (thay lưới "8 hướng quỹ đạo" cũ, xem app.js CAMERA_ANGLE_MODES) — danh sách nút
   2 cột, không còn ý nghĩa "la bàn" nên không cần bố cục lưới 3x3 quanh 1 tâm như trước. */
.camera-angle-list{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:6px 0}
.camera-angle-list button{padding:7px 8px;border:1px solid #4a4a4a;background:#151515;color:#bababa;font-size:11px;text-align:left;line-height:1.3;cursor:pointer;font-family:inherit}
.camera-angle-list button.active-camera{border-color:#e5e5e5;background:#e5e5e5;color:#121212}

/* Fixed lower-right canvas controls */
.canvas-toolbar{position:fixed!important;z-index:12!important;right:68px!important;bottom:22px!important;left:auto!important;top:auto!important;display:flex!important;align-items:center;opacity:1!important;transform:translateX(0);transition:opacity .22s,transform .22s!important}.canvas-toolbar.is-closed{opacity:0!important;pointer-events:none;transform:translateX(12px)}.canvas-tools-toggle{position:fixed;z-index:13;right:24px;bottom:21px;width:34px;height:34px;border:1px solid #616161;border-radius:50%;background:#111d;color:#f5f5f5;font-size:15px;box-shadow:0 5px 16px #0008;transition:transform .2s,background .2s}.canvas-tools-toggle:hover{background:#ededed;color:#111}.canvas-tools-toggle.is-closed{transform:rotate(45deg);background:#242424}@media(max-width:700px){.canvas-toolbar{right:63px!important}.canvas-tools-toggle{right:18px}}

/* Reference image upload */
.reference-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.dropzone{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.dropzone.drag-over{background:#ffffff14}
.dropzone-hint{text-align:center;color:#eee;background:#000000a8;padding:22px 28px;border:1px dashed #ffffff55;border-radius:10px;cursor:pointer}
.dropzone{cursor:default}
.dropzone-hint b{display:block;font-size:22px;margin-bottom:6px;font-style:normal}
.dropzone-hint strong{display:block;font-size:13px;margin-bottom:5px}
.dropzone-hint small{display:block;color:#bbb;font-size:11px}
.remove-image-btn{position:absolute;top:16px;right:16px;z-index:2;width:28px;height:28px;border:1px solid #555;border-radius:50%!important;background:#111c;color:#eee;font-size:13px;display:none}
.remove-image-btn:hover{background:#333c}
.render-overlay{z-index:3}
.render-stage.has-image .dropzone-hint{display:none}
.render-stage.has-image .arch-scene{display:none}
.render-stage.has-image .reference-preview{display:block}
.render-stage.has-image .remove-image-btn{display:block}
/* Badge vẫn tồn tại trong DOM và ảnh phụ vẫn được set/upload/gửi AI bình thường (xem
   setSecondaryReferenceImage() trong app.js) — chỉ ẨN HIỂN THỊ theo yêu cầu (khung ảnh tham chiếu
   để so sánh gọn/đẹp hơn), không đụng vào thuật toán 2-ảnh-tham-chiếu. */
.secondary-ref-badge{display:none!important}
.secondary-ref-badge img{width:34px;height:34px;object-fit:cover;border-radius:5px;flex:none;display:block}
.secondary-ref-badge small{color:#eee;font-size:12px;line-height:1.3;flex:1 1 auto}
.secondary-ref-badge button{border:none;background:transparent;color:#ccc;cursor:pointer;font-size:13px;flex:none;padding:2px;border-radius:50%}
.secondary-ref-badge button:hover{color:#ff8080;background:#ffffff1a}
.render-button:disabled,#randomizeBtn:disabled{opacity:.4;cursor:not-allowed}
.reference-preview{transform-origin:center center}
.grid-overlay{position:absolute;inset:0;pointer-events:none;display:none;z-index:1;background-image:linear-gradient(to right,#ffffff66 1px,transparent 1px),linear-gradient(to bottom,#ffffff66 1px,transparent 1px);background-size:33.3333% 33.3333%}
.render-stage.show-grid .grid-overlay{display:block}
.render-stage.panning{cursor:grabbing!important}
.top-actions{margin-right:40px}
/* Collapsible sidebar sections */
.section-title button{transition:transform .2s}
.control-section.collapsed>*:not(.section-title){display:none}
.control-section.collapsed .section-title button{transform:rotate(180deg)}
/* Inspector panel: was permanently display:none, now a real toggleable overlay */
.inspector{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:280px;z-index:25;background:#101010;border-left:1px solid #242424;color:#f3f3f3;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow-y:auto;box-shadow:-10px 0 35px #0008}
.inspector.show{transform:translateX(0)}
.inspector-head button{color:#9b9b9b}
.prompt-card{background:#0c0c0c;border-left:2px solid #fff}
#promptText{white-space:pre-line}
.prompt-card button{color:#9b9b9b}
.inspector-reveal{position:fixed;z-index:26;top:50%;right:0;translate:100% -50%;width:27px;height:58px;background:#151515;color:#eee;border:1px solid #555;border-right:0;border-radius:9px 0 0 9px!important;font-size:20px;opacity:0;transition:opacity .2s,translate .32s}
.inspector-reveal.active{translate:0 -50%;opacity:.85}
.inspector-reveal:hover{opacity:1}
@media(max-width:700px){.inspector{width:85vw;max-width:280px}}
#projectName{cursor:text;border-radius:3px!important;display:block;max-width:100%;overflow-wrap:break-word;word-break:break-word}
#projectName:hover{background:#ffffff0d}
#projectName:focus{outline:1px dashed #777;outline-offset:3px;background:#ffffff12}
.preset-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.preset-list:empty{display:none;margin:0}
.preset-list button{position:relative;padding:5px 20px 5px 8px;border:1px solid #4a4a4a;border-radius:12px!important;background:#151515;color:#c6c6c6;font-size:10px}
.preset-list button .preset-remove{position:absolute;right:4px;top:50%;transform:translateY(-50%);opacity:.7}
.preset-list button:hover .preset-remove{opacity:1}
.history-thumb.has-image{background-size:cover!important;background-position:center!important}
#projectName:empty::before{content:attr(data-placeholder);color:#8a8a8a;font-weight:400;font-style:italic;font-size:10px}
.project-row{align-items:flex-start!important}
/* Keep top/bottom-right toolbars clear of the inspector panel while it's open */
.app-shell:has(.inspector.show) .topbar{width:calc(100vw - 372px - 280px)}
.app-shell:has(.inspector.show) .sidebar.panel-hidden+.workspace .topbar{width:calc(100vw - 280px)}
.app-shell:has(.inspector.show) .canvas-area{right:280px}
.app-shell:has(.inspector.show) .canvas-toolbar{right:348px!important}
.app-shell:has(.inspector.show) .canvas-tools-toggle{right:304px}
@media(max-width:700px){.app-shell:has(.inspector.show) .topbar{width:100vw}.app-shell:has(.inspector.show) .canvas-area{right:0}.app-shell:has(.inspector.show) .canvas-toolbar{right:68px!important}.app-shell:has(.inspector.show) .canvas-tools-toggle{right:24px}}
/* Prevent the outer document from attempting to auto-scroll during a
   text-selection drag inside position:fixed panels (causes visible jitter) */
html,body{height:100%;overflow:hidden}
/* Giữ nguyên khu vực: text-only hint, no paint/mask UI */
.lock-hint{margin:0 0 7px;color:#9b9b9b;font-size:10px;line-height:1.5}
/* Batch render results (2x/4x) */
.batch-result-strip{position:absolute;left:25px;bottom:21px;z-index:4;display:none;gap:6px}
.batch-result-strip.show{display:flex}
.batch-result-strip button{width:44px;height:44px;border:2px solid #555;background-size:cover!important;background-position:center!important;background-color:#111}
.batch-result-strip button.active{border-color:#eee}
#upscaleBtn:disabled{opacity:.4;cursor:not-allowed}
.quality-bars i.dim{opacity:.25}
.brand-link{display:block;text-decoration:none;color:inherit}
.brand-link:hover b{color:#ffd08a}
/* Account menu */
.account-menu{position:relative}
#accountBtn{overflow:hidden;padding:0;font-size:15px}
#accountBtn img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.account-dropdown{position:absolute;top:38px;right:0;z-index:40;display:none;flex-direction:column;gap:8px;width:200px;padding:12px;background:#151515;border:1px solid #444;box-shadow:0 10px 30px #0009;border-radius:10px!important}
.account-dropdown.show{display:flex}
.account-info{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid #333}
.account-info b{font-size:13px;color:#f0f0f0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-info small{font-size:11px;color:#9b9b9b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-dropdown button,.account-dropdown a{padding:8px;border:1px solid #4a4a4a;border-radius:6px!important;background:#1e1e1e;color:#dedede;font-size:12px;text-align:center;text-decoration:none;box-sizing:border-box;cursor:pointer}
.account-dropdown button:hover,.account-dropdown a:hover{background:#292929}

/* Cost / credit balance + QC warning */
.budget-card{padding:9px;margin-top:8px;border:1px solid #393939;border-radius:9px;background:#0c0c0c}
.budget-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.budget-row span{color:#878787;font-size:10px;letter-spacing:.5px}
.budget-row b{color:#dedede;font-size:11px;font-weight:600}
.buy-credit-btn{width:100%;padding:6px;border:1px solid #4a4a4a;border-radius:6px;background:#1e1e1e;color:#dedede;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:11px;cursor:pointer}
.buy-credit-btn:hover{background:#292929}
.flagged-cost-badge{display:block;margin-top:8px;padding:5px 7px;border:1px solid #5a3a2a;border-radius:4px;background:#241a12;color:#e0a862;font-size:10px;letter-spacing:.2px}
.qc-warning-badge{position:absolute;top:12px;right:12px;z-index:4;display:none;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;background:#e2534adc;color:#fff;font-size:11px;letter-spacing:.3px}
.custom-prompt-label{display:block;margin-top:12px;margin-bottom:6px;color:#878787;font-size:10px;letter-spacing:.5px}
.custom-prompt-input{width:100%;resize:none;overflow:hidden;min-height:64px;padding:8px;border:1px solid #393939;border-radius:6px;background:#0c0c0c;color:#dedede;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:13px;line-height:1.5}
.custom-prompt-input:focus{outline:1px solid #4a4a4a;background:#151515}
.custom-prompt-input::placeholder{color:#5a5a5a}
.lock-region-label-wrap{display:block;margin-top:8px;margin-bottom:6px;color:#878787;font-size:10px;letter-spacing:.5px}
.lock-region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:6px}
.lock-region-btn{position:relative;padding:9px 2px;border:1px solid #505050;border-radius:0;background:#111;color:#c8c8c8;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:11px;cursor:pointer}
.lock-region-btn.active{border-color:#ddd;background:#ddd;color:#121212}

/* History browsing / comparison / client presentation board */
.history-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.history-head .quiet-btn{padding:0;width:auto;font-size:10px}
.presentation-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:#000c;padding:24px}
.presentation-modal-inner{width:min(1100px,100%);max-height:88vh;display:flex;flex-direction:column;background:#111;border:1px solid #3d3d3d;overflow:hidden}
.presentation-modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #333;color:#f0f0f0;font-size:13px}
.presentation-modal-header button{border:0;background:transparent;color:#9b9b9b;font-size:18px;line-height:1;cursor:pointer}
.presentation-toolbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #292929}
.presentation-toolbar span{color:#9b9b9b;font-size:12px;margin-right:auto}
.buy-credit-modal-inner{width:min(560px,100%);padding:16px}
.buy-credit-modal-inner .lock-hint{margin-bottom:14px}
.credit-package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.credit-package-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border:1px solid #393939;border-radius:9px;background:#0c0c0c;text-align:center}
.credit-package-card b{color:#f0f0f0;font-size:13px}
.credit-package-price{color:#e5e5e5;font-size:15px;font-weight:700}
.credit-package-card small{color:#9b9b9b;font-size:11px}
.credit-package-card button{margin-top:6px;width:100%;padding:7px;border:1px solid #4a4a4a;border-radius:6px;background:#1e1e1e;color:#dedede;font-family:"Be Vietnam Pro",Arial,sans-serif;font-size:12px;cursor:pointer}
.credit-package-card button:hover{background:#292929}
.credit-package-card button:disabled{opacity:.6;cursor:progress}
.presentation-toolbar button{padding:8px 12px;border:1px solid #4a4a4a;background:#1e1e1e;color:#dedede;font-size:12px;cursor:pointer}
.presentation-toolbar button:disabled{opacity:.4;cursor:not-allowed}
.presentation-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:16px}
.presentation-card{position:relative;cursor:pointer;border:2px solid transparent;background:#000}
.presentation-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.presentation-card.selected{border-color:#e5e5e5}
.presentation-card-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;border:1px solid #bbb;background:#000a;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center}
.presentation-card.selected .presentation-card-check{background:#e5e5e5;color:#121212;border-color:#e5e5e5}
.presentation-card small{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;background:linear-gradient(transparent,#000d);color:#ccc;font-size:10px}
.presentation-card.broken{cursor:not-allowed;border-color:#3d2323}
.presentation-card.broken img{visibility:hidden}
.presentation-card.broken::before{content:'⚠ Ảnh đã hết hạn';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1a1414;color:#c97a7a;font-size:11px;text-align:center;padding:10px}
.presentation-card.broken small{display:none}
.presentation-compare{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.presentation-compare-item img{width:100%;display:block;border:1px solid #333}
.presentation-compare-item small{display:block;margin-top:6px;color:#9b9b9b;font-size:10px;line-height:1.5}
.presentation-back-btn{margin:10px 0 0 16px;border:0;background:transparent;color:#9b9b9b;font-size:11px;cursor:pointer;text-decoration:underline}
.presentation-share-result{padding:16px;border-top:1px solid #292929;display:flex;align-items:center;gap:10px}
.presentation-share-result input{flex:1;padding:8px;border:1px solid #4a4a4a;background:#0c0c0c;color:#dedede;font-size:12px}
.presentation-share-result button{padding:8px 12px;border:1px solid #4a4a4a;background:#1e1e1e;color:#dedede;font-size:12px;cursor:pointer}

/* Chế độ so sánh Trước/Sau: 2 ảnh hiển thị cùng lúc, chia bởi 1 đường kẻ kéo được (--compare-pos) */
.render-stage{--compare-pos:50%}
.render-stage.compare-mode #referencePreview{clip-path:inset(0 calc(100% - var(--compare-pos)) 0 0)}
.render-stage.compare-mode #resultPreview{clip-path:inset(0 0 0 var(--compare-pos))}
.render-stage.compare-mode:after{content:'';position:absolute;top:0;bottom:0;left:var(--compare-pos);width:2px;background:#fff;box-shadow:0 0 8px #000a;z-index:1;pointer-events:none}
.render-stage.compare-mode .compare-label{display:block}
.compare-label{display:none;position:absolute;top:16px;z-index:2;padding:4px 10px;background:#000c;color:#eee;font-size:11px;letter-spacing:1px;pointer-events:none}
.compare-label.before{left:16px}
.compare-label.after{right:16px}
.compare-handle{display:none;position:absolute;top:50%;left:var(--compare-pos);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:#111;border:2px solid #111;z-index:3;cursor:ew-resize;align-items:center;justify-content:center;font-size:15px;letter-spacing:1px;box-shadow:0 2px 10px #0007;touch-action:none;user-select:none}
.render-stage.compare-mode .compare-handle{display:flex}
.render-stage.compare-dragging{cursor:ew-resize}

/* Đặc trưng không gian theo phong cách — hiện dưới lưới chọn phong cách (mục 1) */
.style-spec-box{display:none;margin-top:10px;padding:9px 10px;border:1px solid #3a3a3a;background:#0c0c0c}
.style-spec-box b{display:block;color:#c9c9c9;font-size:10px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.style-spec-box ul{margin:0;padding-left:14px}
.style-spec-box li{color:#9b9b9b;font-size:11px;line-height:1.5;margin-bottom:3px}
.style-spec-box li:last-child{margin-bottom:0}

/* Icon minh hoạ thực tế cho từng thẻ vật liệu/nội thất, thay cho swatch màu trước đây */
.material-card svg{display:block;width:22px;height:22px;margin-bottom:5px;color:#8f8f8f}
.material-card.selected svg{color:#eee}