/* Viewport chrome: one camera control, a consistent icon language and real material palettes. */
.studio-icon{width:21px;height:21px;display:block;flex-shrink:0;pointer-events:none}.studio-top,.studio-camera,.vertical.tools,.bottom-bar{background:#ffffffec;border:1px solid #fff;border-radius:18px;box-shadow:0 8px 28px #153d2e17;backdrop-filter:blur(18px)}.studio-top{left:50%;right:auto;top:18px;transform:translateX(-50%);padding:5px;gap:3px;max-width:calc(100% - 360px);flex-wrap:nowrap}.studio-top button{display:grid;place-items:center;gap:5px;min-width:65px;padding:9px 10px;font-size:10px;font-weight:600;color:#53695e;line-height:1.25;border:1px solid transparent}.studio-top button:hover,.studio-top button[aria-pressed=true]{background:#e7f1eb;border-color:#cde2d5;color:#13775b}.studio-top .studio-icon{width:20px;height:20px}.vertical.tools{left:16px;top:18px;padding:5px;gap:3px}.vertical.tools button{display:grid;justify-items:center;gap:5px;min-height:56px;width:61px;padding:9px 5px;font-size:10px;color:#5a7062;line-height:1.2}.vertical.tools button.active{background:#e5f2eb;color:#0e7f61}.vertical.tools .studio-icon{width:23px;height:23px}.view-top{display:none}.orientation{display:none!important}.bottom-bar{bottom:44px;padding:6px 8px;gap:4px;max-width:calc(100% - 48px);overflow:auto}.bottom-bar button{display:grid;justify-items:center;gap:5px;font-size:10px;min-width:72px;min-height:56px;padding:8px 10px;line-height:1.2;color:#536b5d}.bottom-bar button.primary{display:flex;align-items:center;gap:8px;background:#087f6c;color:white;padding:12px 16px;min-width:135px;border-radius:12px}.bottom-bar .divider{margin:0 4px}.bottom-bar .studio-icon{width:21px;height:21px}.studio-camera{top:18px;right:16px;bottom:auto;left:auto;display:grid;grid-template-columns:1fr;width:150px;max-width:none;padding:12px;border-radius:18px;gap:6px}.camera-widget-heading{display:flex;justify-content:space-between;align-items:center;gap:5px}.camera-widget-heading>span{font-size:8px;letter-spacing:1px;color:#718276;font-weight:700}.camera-widget-heading output{font-size:10px;color:#17765d;font-weight:750}.camera-gizmo{position:relative;width:112px;height:112px;margin:0 auto;background:radial-gradient(circle,#edf4ef 0,transparent 65%)}.camera-gizmo>svg{position:absolute;inset:0;width:112px;height:112px}.studio-camera .camera-gizmo [data-axis]{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border:1px solid var(--axis-color);border-radius:50%;background:#fdfefe;color:var(--axis-color);box-shadow:0 2px 7px #28493419;font-size:11px;font-weight:750}.studio-camera .camera-gizmo [data-axis]:hover{background:#e8f0eb}.studio-camera .camera-home{position:absolute;left:44px;top:44px;z-index:1;padding:3px;width:25px;height:25px;border-radius:50%;background:#fff;border:1px solid #cfddd5;display:grid;place-items:center}.camera-home .studio-icon{width:17px;height:17px}.camera-view-picker{display:grid;gap:4px;font-size:9px;color:#708273;font-weight:650}.camera-view-picker select{width:100%;height:35px;min-width:0;padding:5px 7px;border:1px solid #d4e1d8;background:#f8fbf9;border-radius:8px;font-size:11px;color:#385b49}.studio-camera .camera-fit{display:flex;justify-content:center;gap:7px;align-items:center;width:100%;padding:8px;font-size:11px;background:#e8f2ec;border:1px solid #d0e2d7;color:#256849;min-height:35px}.camera-fit .studio-icon{width:16px;height:16px}.viewport-mouse-guide{position:absolute;z-index:6;bottom:14px;right:18px;display:flex;align-items:center;gap:8px;font-size:10px;color:#5a7162;background:#ffffffcf;padding:7px 10px;border:1px solid #e0e9e1;border-radius:10px;backdrop-filter:blur(10px)}.viewport-mouse-guide .studio-icon{width:17px;height:20px}.viewport-mouse-guide kbd{font:600 10px system-ui;padding:1px 5px;background:#e7efe9;border:1px solid #d3ded6;border-radius:4px}.scene-footer{right:auto;max-width:48%;bottom:17px}.scene-footer #sceneStats{display:none}.mouse-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mouse-help-grid article{display:flex;gap:14px;padding:16px;background:#f6faf7;border:1px solid #d9e7dd;border-radius:14px}.mouse-help-grid .studio-icon{width:24px;height:28px;color:#398366}.mouse-help-grid strong{font-size:13px}.mouse-help-grid p{font-size:12px;color:#607568;line-height:1.6;margin:6px 0 0}.finish-gallery-heading{display:flex;gap:16px;justify-content:space-between;align-items:center;margin:20px 0 16px}.finish-gallery-heading h3{font-size:19px;margin:0 0 7px}.finish-gallery-heading p{font-size:12px;color:#627668;margin:0}.finish-gallery-heading input{max-width:240px;flex:1}.finish-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}.finish-palette{position:relative;display:block;text-align:left;padding:0;border:1px solid #d1dfd5;border-radius:15px;overflow:hidden;background:#fff;transition:box-shadow .15s,border-color .15s}.finish-palette:hover{background:#fff;border-color:#83b59b;box-shadow:0 5px 17px #2e65411a}.finish-palette.is-selected{outline:2px solid #07856b;outline-offset:2px;border-color:#07856b;background:#f4fbf6}.palette-strip{display:grid;grid-template-columns:1fr 1fr .8fr;height:110px;gap:2px;background:white}.palette-sample{display:block;background-size:cover;background-position:center;min-height:42px}.palette-original{background:repeating-linear-gradient(45deg,#f1f4f1,#f1f4f1 5px,#e4ebe5 5px,#e4ebe5 10px)}.palette-meta{display:grid;gap:4px;padding:13px 15px 32px}.palette-meta strong{font-size:14px;color:#304e3c}.palette-meta small{font-size:11px;color:#768577}.palette-chip{position:absolute;bottom:10px;left:15px;font-size:9px;background:#eaf3ed;color:#437453;border-radius:12px;padding:3px 7px}.finish-preview{margin-top:18px;padding:18px;border:1px solid #cfe2d5;background:#f5faf6;border-radius:16px;position:sticky;bottom:-24px;z-index:2;box-shadow:0 -7px 18px #f5faf6e8}.finish-preview h4{font-size:16px;margin:0 0 12px}.finish-preview>p{font-size:12px;color:#627668;margin:12px 0}.finish-preview>button{width:100%;min-height:44px}.finish-preview-materials{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.finish-preview-materials>div{display:flex;gap:9px;align-items:center;min-width:0}.finish-preview-materials .palette-sample{width:42px;height:42px;flex:none;border:1px solid #d6e2d9;border-radius:9px}.finish-preview-materials small,.finish-preview-materials strong{display:block;font-size:10px;line-height:1.5}.finish-preview-materials small{font-weight:400;color:#748575}.finish-preview-materials strong{color:#32523d;overflow-wrap:anywhere}.finish-manual>summary{color:#357153}.studio-finish-samples{margin-top:14px}dialog:has(#studioFinishCombinations){width:min(980px,96vw);max-width:980px}#studioCard{border-radius:16px;box-shadow:0 8px 28px #21453125;border:1px solid white;background:#fffffff0}.studio-presentation .viewport-mouse-guide{display:none}
@media(min-width:851px) and (max-width:1250px){.studio-top{left:95px;transform:none;max-width:calc(100% - 265px)}.studio-top button{min-width:46px;padding:8px 6px;font-size:9px}.bottom-bar button{min-width:56px;font-size:9px;padding:8px 6px}.bottom-bar button.primary{min-width:115px}.studio-camera{width:140px;right:10px}.viewport-mouse-guide span{display:none}}
@media(max-width:850px){.studio-camera{left:auto;right:10px;top:12px;bottom:auto;width:138px;padding:10px;gap:6px;max-width:calc(100% - 20px);background:#ffffffed}.camera-gizmo{display:none}.camera-widget-heading{gap:7px}.camera-view-picker>span{display:none}.camera-view-picker select{height:40px;font-size:12px!important}.studio-camera .camera-fit{min-height:38px;font-size:11px}.viewport-mouse-guide{bottom:14px;right:10px;min-height:40px;padding:8px}.viewport-mouse-guide span,.viewport-mouse-guide kbd{display:none}.scene-footer{bottom:24px;left:12px;max-width:calc(100% - 70px)}.mouse-help-grid,.finish-gallery{grid-template-columns:1fr}.finish-gallery-heading{display:grid;gap:12px}.finish-gallery-heading input{max-width:100%;width:100%}.palette-strip{height:105px}.finish-preview-materials{grid-template-columns:1fr}.finish-preview{bottom:-16px;padding:14px}.finish-preview-materials .palette-sample{width:34px;height:34px;min-height:34px}.finish-preview-materials strong{font-size:11px}.finish-preview-materials small{font-size:10px}}
@media(prefers-reduced-transparency:reduce){.studio-top,.studio-camera,.bottom-bar,.vertical.tools,.viewport-mouse-guide{backdrop-filter:none;background:#fff}}
@media(max-width:850px){body:has(#inspector:not(.hidden)) .viewport-mouse-guide{top:12px;bottom:auto;left:10px;right:auto}body:has(#inspector:not(.hidden)) .studio-camera .camera-widget-heading,body:has(#inspector:not(.hidden)) .studio-camera .camera-fit{display:none}}
#save{display:flex;align-items:center;justify-content:center;gap:7px}#save .studio-icon,#undo .studio-icon,#redo .studio-icon{width:20px;height:20px}#undo,#redo{display:grid;place-items:center}#mobileDock .studio-icon{width:23px;height:23px;margin:0 auto}.bottom-bar button[hidden]{display:none}
@media(max-width:850px){#undo,#redo{display:none}#save{gap:0}}

.end-panel-editor{max-width:100%}.end-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0}.end-panel-card{margin:0;min-width:0;padding:22px;border:1px solid #dce5e2;border-radius:20px;background:linear-gradient(145deg,#fff9,#eaf4ef80)}.end-panel-card legend{padding:0 8px;font-weight:700;color:#225d4d}.end-panel-card .field{margin:14px 0}.end-panel-card .field input,.end-panel-card .field select{width:100%;box-sizing:border-box}.end-panel-toggle{display:flex;align-items:center;gap:10px;font-weight:600;line-height:1.5}.end-panel-toggle input{width:20px;height:20px;accent-color:#008b72;flex-shrink:0}.end-panel-summary{padding:16px;border-radius:14px;background:#eaf2ef;line-height:1.7;color:#284d41}.end-panel-actions{display:flex;justify-content:flex-end;gap:12px;position:sticky;bottom:-1px;background:#f3f6fbf5;padding:18px 0 8px;z-index:2}.end-panel-actions button{padding:12px 20px;border-radius:12px;min-height:44px}.end-panel-editor [hidden]{display:none!important}@media(max-width:700px){.end-panel-grid{grid-template-columns:1fr}.end-panel-card{padding:16px}.end-panel-actions button{flex:1}}

#modal:has(.end-panel-editor){width:min(1040px,calc(100vw - 32px))}.end-panel-editor{padding-bottom:8px}.end-panel-actions{margin-top:18px}.end-panel-summary{margin-bottom:18px}@media(max-width:700px){#modal:has(.end-panel-editor){width:100%;max-width:100%}}