.app{width:100%;min-height:100vh;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden}.block-a{width:100%;padding:16px;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.main-content{display:flex;flex:1;overflow:hidden;gap:16px;padding:16px}.block-b{width:100%;flex-shrink:0;background:#fff;border-radius:8px;padding:16px;overflow-x:auto}.block-c{flex:1;min-width:0;background:#fff;border-radius:8px;overflow:hidden;position:relative}.right-panel{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto}.block-d,.block-e,.block-f{background:#fff;border-radius:8px;padding:16px;flex-shrink:0}@media (max-width: 1024px){.main-content{flex-direction:column}.right-panel{width:100%;flex-direction:row;overflow-x:auto}.block-d,.block-e,.block-f{min-width:250px}}@media (max-width: 768px){.app-layout{height:100vh;height:100dvh}.block-a,.block-b{padding:12px}.main-content{flex-direction:column;gap:12px;padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch}.block-c{min-height:300px;height:50vh;height:50dvh}.right-panel{width:100%;flex-direction:column;gap:12px;overflow-x:visible;overflow-y:visible}.block-d,.block-e,.block-f{min-width:auto;width:100%;padding:12px}}@media (max-width: 480px){.block-a{padding:8px}.main-content{padding:8px;gap:8px}.block-b,.block-d,.block-e,.block-f{padding:12px 8px}.block-c{min-height:250px;height:40vh;height:40dvh}}.interior-selector{width:100%}.interior-selector-title{font-size:14px;font-weight:600;color:#333;margin-bottom:12px}.interior-slider{display:flex;gap:12px;overflow-x:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:#ccc transparent}.interior-slider::-webkit-scrollbar{height:6px}.interior-slider::-webkit-scrollbar-track{background:transparent}.interior-slider::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.interior-add-btn{width:80px;height:80px;min-width:80px;border:2px dashed #ccc;border-radius:8px;background:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s}.interior-add-btn:hover{border-color:#667eea;color:#667eea;background:#f0f0ff}.interior-thumbnail{width:80px;height:80px;min-width:80px;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;padding:0;background:#f5f5f5;transition:all .2s}.interior-thumbnail img{width:100%;height:100%;object-fit:cover}.interior-thumbnail:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.interior-thumbnail.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.upload-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.upload-modal{background:#fff;border-radius:12px;padding:24px;max-width:500px;width:90%;box-shadow:0 10px 40px #0003}.upload-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.upload-modal-header h3{font-size:18px;color:#333}.upload-modal-close{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:24px;color:#666;display:flex;align-items:center;justify-content:center;transition:all .2s}.upload-modal-close:hover{background:#e0e0e0}.upload-modal-content{display:flex;flex-direction:column;align-items:center;gap:16px}.upload-modal-button{padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.upload-modal-button:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.upload-modal-hint{font-size:14px;color:#666;text-align:center}@media (max-width: 768px){.interior-selector-title{font-size:12px;margin-bottom:8px}.interior-add-btn,.interior-thumbnail{width:60px;height:60px;min-width:60px}.interior-slider{gap:8px}.upload-modal{padding:20px;margin:20px;max-width:calc(100% - 40px)}.upload-modal-header h3{font-size:16px}.upload-modal-button{padding:10px 20px;font-size:14px}}@media (max-width: 480px){.interior-add-btn,.interior-thumbnail{width:50px;height:50px;min-width:50px}.upload-modal{padding:16px;margin:16px;max-width:calc(100% - 32px)}}.wall-color-selector{width:100%}.wall-color-title{font-size:14px;font-weight:600;color:#333;margin-bottom:12px}.wall-color-list{display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:#ccc transparent}.wall-color-list::-webkit-scrollbar{height:6px}.wall-color-list::-webkit-scrollbar-track{background:transparent}.wall-color-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.wall-color-btn{width:50px;height:50px;min-width:50px;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#666;flex-shrink:0}.wall-color-btn:hover{border-color:#667eea;transform:scale(1.05)}.wall-color-btn.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.custom-color-btn,.pattern-btn{background:#fafafa;border:2px dashed #ccc}.custom-color-btn:hover,.pattern-btn:hover{border-color:#667eea;color:#667eea;background:#f0f0ff}.color-picker-overlay,.pattern-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.color-picker-modal,.pattern-picker-modal{background:#fff;border-radius:12px;padding:24px;max-width:400px;width:90%;box-shadow:0 10px 40px #0003}.color-picker-header,.pattern-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.color-picker-header h3,.pattern-picker-header h3{font-size:18px;color:#333}.color-picker-close,.pattern-picker-close{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:24px;color:#666;display:flex;align-items:center;justify-content:center;transition:all .2s}.color-picker-close:hover,.pattern-picker-close:hover{background:#e0e0e0}.color-picker-content,.pattern-picker-content{display:flex;flex-direction:column;gap:16px}.pattern-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.pattern-item{aspect-ratio:1;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;padding:0;background:#f5f5f5;transition:all .2s}.pattern-item img{width:100%;height:100%;object-fit:cover}.pattern-item:hover{border-color:#667eea;transform:scale(1.05)}.pattern-item.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}@media (max-width: 768px){.wall-color-title{font-size:12px;margin-bottom:8px}.wall-color-btn{width:44px;height:44px;min-width:44px}.color-picker-modal,.pattern-picker-modal{padding:20px;margin:20px;max-width:calc(100% - 40px)}.color-picker-header h3,.pattern-picker-header h3{font-size:16px}.pattern-grid{gap:8px}}@media (max-width: 480px){.wall-color-btn{width:40px;height:40px;min-width:40px}.color-picker-modal,.pattern-picker-modal{padding:16px;margin:16px;max-width:calc(100% - 32px)}}.painting-viewer{width:100%;height:100%;position:relative;background:#f5f5f5;cursor:default;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.painting-viewer:not(.fullscreen){cursor:move}.painting-canvas{width:100%;height:100%;display:block}.fullscreen-toggle{position:absolute;top:16px;left:16px;width:40px;height:40px;border:none;background:#ffffffe6;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;box-shadow:0 2px 8px #0000001a;transition:all .2s;z-index:10}.fullscreen-toggle:hover{background:#fff;box-shadow:0 4px 12px #00000026;transform:scale(1.05)}.size-toggle{position:absolute;top:64px;left:16px;width:40px;height:40px;border:none;background:#ffffffe6;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;box-shadow:0 2px 8px #0000001a;transition:all .2s;z-index:10}.size-toggle:hover{background:#fff;box-shadow:0 4px 12px #00000026;transform:scale(1.05)}.painting-upload-prompt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}.painting-upload-btn{padding:24px 32px;background:#fff;border:2px dashed #ccc;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;color:#666;transition:all .2s}.painting-upload-btn:hover{border-color:#667eea;color:#667eea;background:#f0f0ff}.painting-upload-btn p{margin:0;font-size:14px;font-weight:500}.dragging-indicator{position:absolute;top:16px;right:16px;padding:8px 16px;background:#667eeae6;color:#fff;border-radius:8px;font-size:14px;z-index:10;pointer-events:none}.size-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.size-modal{background:#fff;border-radius:12px;padding:24px;max-width:400px;width:90%;box-shadow:0 10px 40px #0003}.size-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.size-modal-header h3{font-size:18px;color:#333}.size-modal-close{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:24px;color:#666;display:flex;align-items:center;justify-content:center;transition:all .2s}.size-modal-close:hover{background:#e0e0e0}.size-modal-content{display:flex;flex-direction:column;gap:20px}.size-input-group{display:flex;flex-direction:column;gap:16px}.size-input-group label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#333;font-weight:500}.size-input-group input{padding:10px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:all .2s}.size-input-group input:focus{outline:none;border-color:#667eea}.size-modal-buttons{display:flex;gap:12px;justify-content:flex-end}.size-modal-button{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.size-modal-button-cancel{background:#f5f5f5;color:#666}.size-modal-button-cancel:hover{background:#e0e0e0}.size-modal-button-save{background:#667eea;color:#fff}.size-modal-button-save:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}@media (max-width: 768px){.fullscreen-toggle{width:36px;height:36px;top:12px;left:12px}.fullscreen-toggle svg{width:20px;height:20px}.size-toggle{width:36px;height:36px;top:60px;left:12px}.size-toggle svg{width:20px;height:20px}.painting-upload-btn{padding:20px 24px}.painting-upload-btn svg{width:40px;height:40px}.painting-upload-btn p{font-size:12px}.dragging-indicator{top:12px;right:12px;padding:6px 12px;font-size:12px}}@media (max-width: 480px){.fullscreen-toggle{width:32px;height:32px;top:8px;left:8px}.fullscreen-toggle svg{width:18px;height:18px}.size-toggle{width:32px;height:32px;top:56px;left:8px}.size-toggle svg{width:18px;height:18px}.painting-upload-btn{padding:16px 20px}.painting-upload-btn svg{width:36px;height:36px}}.frame-display{width:100%}.frame-display-title{font-size:14px;font-weight:600;color:#333;margin-bottom:16px}.frame-preview{width:100%;aspect-ratio:1;margin-bottom:16px;display:flex;align-items:flex-start;justify-content:flex-end;background:#fafafa;border-radius:8px;padding:12px;position:relative;overflow:hidden}.frame-corner-container{width:100%;height:100%;position:relative}.frame-corner-outer{width:100%;height:100%;position:absolute;top:0;right:0;transition:all .2s;box-sizing:border-box;background:transparent;z-index:3;pointer-events:none}.frame-corner-gap{position:absolute;transition:all .2s;box-sizing:border-box;z-index:2;pointer-events:none}.frame-corner-inner{position:absolute;width:calc(100% - 36px);height:calc(100% - 36px);background:#fff;background-size:800% 800%;background-position:top right;background-repeat:no-repeat;overflow:hidden;box-sizing:border-box;z-index:1}.frame-corner-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#ccc;padding:8px}.frame-gap-control{display:flex;flex-direction:column;gap:8px}.frame-gap-label{font-size:12px;color:#666;font-weight:500}.frame-gap-slider{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none}.frame-gap-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;transition:all .2s}.frame-gap-slider::-webkit-slider-thumb:hover{background:#5568d3;transform:scale(1.1)}.frame-gap-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:all .2s}.frame-gap-slider::-moz-range-thumb:hover{background:#5568d3;transform:scale(1.1)}.frame-gap-buttons{display:flex;gap:8px}.frame-gap-btn{flex:1;padding:8px;border:1px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer;font-size:18px;color:#666;transition:all .2s}.frame-gap-btn:hover:not(:disabled){background:#f0f0ff;border-color:#667eea;color:#667eea}.frame-gap-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.frame-display-title{font-size:12px;margin-bottom:12px}.frame-preview{padding:12px;margin-bottom:12px}.frame-gap-slider::-webkit-slider-thumb{width:20px;height:20px}.frame-gap-slider::-moz-range-thumb{width:20px;height:20px}.frame-gap-btn{padding:10px;font-size:16px}}@media (max-width: 480px){.frame-preview{padding:8px}.frame-gap-label{font-size:11px}}.frame-type-selector{width:100%}.frame-type-title{font-size:14px;font-weight:600;color:#333;margin-bottom:12px}.frame-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.frame-type-item{aspect-ratio:1;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;padding:0;background:#f5f5f5;transition:all .2s}.frame-type-item img{width:100%;height:100%;object-fit:cover}.frame-type-item:hover{border-color:#667eea;transform:scale(1.05)}.frame-type-item.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}@media (max-width: 768px){.frame-type-title{font-size:12px;margin-bottom:8px}.frame-type-grid{gap:6px}}@media (max-width: 480px){.frame-type-grid{gap:4px}}.frame-color-selector{width:100%}.frame-color-title{font-size:14px;font-weight:600;color:#333;margin-bottom:12px}.frame-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.frame-color-btn{aspect-ratio:1;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#666;min-height:30px}.frame-color-btn:hover{border-color:#667eea;transform:scale(1.05)}.frame-color-btn.selected{border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.custom-color-btn{background:#fafafa;border:1px dashed #ccc}.custom-color-btn:hover{border-color:#667eea;color:#667eea;background:#f0f0ff}.color-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.color-picker-modal{background:#fff;border-radius:12px;padding:24px;max-width:400px;width:90%;box-shadow:0 10px 40px #0003}.color-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.color-picker-header h3{font-size:18px;color:#333}.color-picker-close{width:32px;height:32px;border:none;background:#f5f5f5;border-radius:50%;cursor:pointer;font-size:24px;color:#666;display:flex;align-items:center;justify-content:center;transition:all .2s}.color-picker-close:hover{background:#e0e0e0}.color-picker-content{display:flex;flex-direction:column;gap:16px}@media (max-width: 768px){.frame-color-title{font-size:12px;margin-bottom:8px}.frame-color-grid{gap:4px;grid-template-columns:repeat(4,1fr)}.frame-color-btn{min-height:25px}.color-picker-modal{padding:20px;margin:20px;max-width:calc(100% - 40px)}.color-picker-header h3{font-size:16px}}@media (max-width: 480px){.frame-color-grid{gap:4px;grid-template-columns:repeat(4,1fr)}.frame-color-btn{min-height:22px}.color-picker-modal{padding:16px;margin:16px;max-width:calc(100% - 32px)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8f9fa;min-height:100vh;min-height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}#root{width:100%;height:100vh;height:100dvh;overflow:hidden}@media (max-width: 768px){*{-webkit-tap-highlight-color:transparent}button,input[type=file],input[type=range]{touch-action:manipulation}}