:root{--bg-color-main: #f0f2f5;--bg-color-sidebar: #ffffff;--bg-color-main-view: #e7eaf2;--primary-color: #2c64f7;--text-color-dark: #333;--text-color-light: #555;--border-radius-base: 12px;--hover-color: #D7FF64}body{font-family:Poppins,sans-serif;margin:0;padding:0;background-color:var(--bg-color-main);display:flex;justify-content:center;align-items:center;min-height:100vh}.container{display:flex;width:90%;max-width:1200px;height:80vh;box-shadow:0 4px 20px #0000001a;border-radius:var(--border-radius-base);overflow:hidden}.sidebar{width:350px;padding:30px;background-color:var(--bg-color-sidebar);display:flex;flex-direction:column}.header-logo{margin-bottom:30px}.header-logo img{max-width:100%;height:auto;max-height:40px}.image-design-dropdown,.color-palette-dropdown{margin-bottom:20px;background-color:#f7f9fc;border-radius:var(--border-radius-base);overflow:hidden;color:var(--text-color-dark)}.image-design-dropdown.content-visible{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}.dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:15px;font-weight:600;cursor:pointer;background-color:#f7f9fc;border-radius:var(--border-radius-base);transition:background-color .2s}.dropdown-header:hover{background-color:#edf2f8}.dropdown-arrow{transition:transform .3s ease}.dropdown-header.expanded .dropdown-arrow{transform:rotate(180deg)}.dropdown-content{max-height:0;overflow:hidden;transition:max-height .5s ease-in-out,padding .3s ease-out;background-color:#fff;border-top:1px solid #eee}.dropdown-content.show{padding:15px}.image-design-dropdown .dropdown-content.show{max-height:100vh;flex:1 1 auto;display:flex;min-height:0}.color-palette-dropdown .dropdown-content.show{max-height:250px}.image-upload-area{position:relative;height:100%;aspect-ratio:200 / 485;background-color:#e0e0e0;border-radius:var(--border-radius-base);overflow:hidden;margin:0 auto;border:2px dashed #cccccc;cursor:pointer}.upload-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.canvas-icon-button{position:absolute;width:32px;height:32px;padding:0;background-color:#ffffffb3;color:var(--text-color-dark);border:none;border-radius:6px;cursor:pointer;font-size:1em;display:flex;justify-content:center;align-items:center;z-index:5;box-shadow:0 1px 3px #00000026;transition:background-color .1s,color .1s}.canvas-icon-button:hover{background-color:var(--primary-color);color:#fff}.canvas-expand-button{top:10px;right:10px}.canvas-upload-button{bottom:10px;right:10px}.color-picker-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.color-picker-item:last-child{margin-bottom:0}.color-picker-item label{font-size:.95em;color:var(--text-color-light)}input.custom-color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:35px;height:35px;border-radius:5px;cursor:pointer;padding:0;background:none}input.custom-color-input::-webkit-color-swatch-wrapper{padding:0}input.custom-color-input::-webkit-color-swatch{border:1px solid #ddd;border-radius:5px}input.custom-color-input::-moz-color-swatch-wrapper{padding:0}input.custom-color-input::-moz-color-swatch{border:1px solid #ddd;border-radius:5px}.color-match-controls{display:flex;gap:10px;margin-top:10px}.match-cuff-button{width:100%;padding:8px 10px;background-color:#f0f0f0;color:var(--text-color-dark);border:1px solid #e0e0e0;border-radius:8px;font-size:.9em;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;font-weight:500;display:flex;align-items:center;justify-content:center}.match-cuff-button i{margin-right:6px}.match-cuff-button:hover{background-color:var(--hover-color);color:var(--text-color-dark);border-color:var(--hover-color)}.thumbnail-selector{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:auto;margin-bottom:20px;min-height:60px}.views-container{display:flex;flex-wrap:wrap;gap:10px;flex-grow:1}.thumb{width:60px;height:60px;border-radius:8px;background-color:#f0f0f0;display:flex;justify-content:center;align-items:center;cursor:pointer;overflow:hidden;position:relative;border:1px solid #ccc}@keyframes pulse-highlight{0%{transform:scale(1);box-shadow:0 0 #2c64f766}50%{transform:scale(1.05);box-shadow:0 0 0 4px #2c64f733}to{transform:scale(1);box-shadow:0 0 #2c64f766}}#captureViewButton{cursor:pointer;font-size:1.5em;color:var(--primary-color);border:1px solid var(--primary-color)}#captureViewButton.highlight-pulse{animation:pulse-highlight 2s infinite ease-in-out}#captureViewButton.disabled{color:#999;border:1px solid #ccc;animation:none;cursor:not-allowed;opacity:.5}.captured-image{width:100%;height:100%;object-fit:cover}.remove-thumb{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:20px;background-color:var(--primary-color);color:#fff;z-index:10;font-size:1em;cursor:pointer;display:flex;justify-content:center;align-items:center;line-height:1;text-shadow:0 0 2px black}.remove-thumb:hover{background-color:#ff2469}.save-button{background-color:var(--primary-color);color:#fff;border:none;padding:15px 20px;border-radius:var(--border-radius-base);font-size:1.1em;font-weight:700;cursor:pointer;transition:background-color .2s,opacity .2s;width:100%}#saveViewsButton[disabled]{opacity:.5;cursor:not-allowed;background-color:var(--primary-color);pointer-events:none}.save-button:hover{background-color:#101828}.main-view{flex-grow:1;background-color:var(--bg-color-main-view);position:relative;overflow:hidden;border-top-right-radius:var(--border-radius-base);border-bottom-right-radius:var(--border-radius-base)}#threejs-container{width:100%;height:100%}#threejs-container canvas{display:block}.view-selector{position:absolute;top:20px;right:20px;display:flex;flex-direction:row;gap:10px;z-index:10;padding-right:0}.selector-button{width:52.5px;height:52.5px;padding:7.5px;background-color:#ffffff80;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 5px #0000001a;transition:all .3s ease-in-out;position:relative;order:initial;opacity:1;transform:translate(0)}.selector-button:hover{background-color:#fffc}.selector-button.selected-view{background-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color)}.selector-button img{height:100%;width:auto;object-fit:contain;filter:invert(0);transition:filter .2s}.selector-button.selected-view img{filter:invert(1)}.view-controls{position:absolute;bottom:20px;right:20px;display:flex;gap:15px;z-index:10}.view-controls i{font-size:1.5em;color:#999;cursor:pointer;padding:10px;background-color:#ffffff80;border-radius:50%;box-shadow:0 2px 5px #0000001a;transition:color .2s,background-color .2s}.view-controls i:hover{color:var(--primary-color);background-color:#fffc}.view-controls i.active-control{color:#fff;background-color:var(--primary-color)}.info-modal{z-index:1010}.info-modal-content{background-color:var(--bg-color-sidebar);margin:5% auto;padding:30px;border-radius:var(--border-radius-base);width:80%;max-width:500px;position:relative;box-shadow:0 5px 15px #0000004d;text-align:left;font-size:.95em;line-height:1.4}.info-title{color:var(--primary-color);margin-top:0;padding-bottom:10px;border-bottom:2px solid #f0f0f0}.info-section{margin-bottom:20px;padding-bottom:10px;border-bottom:1px dashed #eee}.info-section h3{margin-top:0;color:var(--text-color-dark);font-weight:600;font-size:1.1em}.info-item-grid{display:grid;grid-template-columns:80px 1fr;gap:15px;align-items:center;margin-bottom:10px;padding:5px 0;border-bottom:1px dotted #eee}.info-item-grid:last-child{border-bottom:none}.info-icon-cell{font-size:1.2em;font-weight:700;color:var(--primary-color);text-align:center}.info-icon-cell i{font-size:1.5em}.info-text-cell{color:var(--text-color-light);font-size:.9em}.info-section ul{list-style:none;padding-left:0;display:none}.info-section ul li{margin-bottom:5px;color:var(--text-color-light)}.info-section ul li i{color:var(--primary-color);margin-right:5px}.control-icons-grid{display:none}.close-info-button{color:#aaa;float:right;font-size:28px;font-weight:700;cursor:pointer}.close-info-button:hover{color:red}:root{--editor-border-color: #d1d5db;--editor-border-color-hover: #a0a7b1;--editor-primary-light-bg: #eff2fe;--editor-icon-color: #6b7280}.modal{display:none;align-items:center;justify-content:center;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;padding:2rem;box-sizing:border-box;background-color:#00000080;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.modal-content{background-color:var(--bg-color-sidebar);padding:32px;border-radius:var(--border-radius-base);width:100%;max-width:720px;max-height:100%;position:relative;box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a;text-align:center;display:flex;flex-direction:column}.modal-content h2{font-size:1.5em;font-weight:600;color:var(--text-color-dark);margin-bottom:24px;flex-shrink:0}.editor-main-area{display:flex;justify-content:center;align-items:stretch;gap:24px;margin-top:20px;flex:1 1 auto;min-height:0}.modal-canvas-controls{display:flex;flex-direction:column;gap:12px;width:50%;text-align:left;flex-shrink:0}.editor-control-label{font-size:.8em;font-weight:600;color:var(--text-color-light);text-transform:uppercase;letter-spacing:.05em;margin-bottom:-4px;padding-left:4px}.editor-option{display:flex;align-items:center;gap:12px;padding:12px;background-color:#fff;border:1px solid var(--editor-border-color);border-radius:8px;cursor:pointer;transition:all .2s ease-in-out}.editor-option:hover{border-color:var(--editor-border-color-hover);background-color:#f9fafb}.editor-option i{font-size:1.5em;color:var(--editor-icon-color);width:32px;text-align:center;flex-shrink:0}.editor-option-text{flex-grow:1}.editor-option-text strong{display:block;font-weight:600;color:var(--text-color-dark)}.editor-option-text span{font-size:.85em;color:var(--text-color-light)}.editor-option.active{border-color:var(--primary-color);background-color:var(--editor-primary-light-bg)}.editor-option.active i{color:var(--primary-color)}.editor-option--primary{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff;margin-top:auto}.editor-option--primary:hover{background-color:#1d4ed8;border-color:#1d4ed8}.editor-option--primary i,.editor-option--primary .editor-option-text strong,.editor-option--primary .editor-option-text span{color:#fff}.editor-option--danger i,.editor-option--danger .editor-option-text strong{color:#ff2469}.editor-option--danger:hover{border-color:#ff2469;background-color:#fff5f8}.color-picker-option{justify-content:space-between}.editor-option-details{padding:8px 12px;background-color:#f9fafb;border:1px solid var(--editor-border-color);border-radius:8px;display:flex;align-items:center;gap:10px}.editor-option-details label{font-size:.9em;font-weight:500;color:var(--text-color-light)}.editor-option-details input[type=range]{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;border-radius:8px;height:8px;background:linear-gradient(to right,#ff2469 0%,#ffc700 var(--slider-progress, 25%),#e7eaf2 var(--slider-progress, 25%),#e7eaf2 100%)}.editor-option-details input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:20px;width:20px;background-color:#ff2469;border-radius:50%;border:2px solid white;box-shadow:0 1px 4px #0003;margin-top:-6px}.editor-option-details input[type=range]::-moz-range-thumb{height:20px;width:20px;background-color:#ff2469;border-radius:50%;border:2px solid white;box-shadow:0 1px 4px #0003}.modal-canvas-container{flex-grow:1;min-width:0;position:relative;overflow:hidden;background-color:#f9fafb;border-radius:12px;max-height:100%;display:flex;justify-content:center;align-items:center}#modalCanvas{z-index:1;max-width:100%;max-height:100%}.drop-zone-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;border:2px dashed var(--editor-border-color);border-radius:12px;box-sizing:border-box;transition:border-color .2s;pointer-events:none}.modal-canvas-container:hover .drop-zone-overlay{border-color:var(--primary-color)}.drop-zone-overlay i{font-size:3em;color:var(--editor-icon-color)}.drop-zone-overlay .drop-zone-text{font-weight:600;color:var(--text-color-dark)}.close-button{position:absolute;top:16px;right:16px;color:#9ca3af;font-size:1.5em;font-weight:400;background-color:transparent;border:none;cursor:pointer;padding:8px;line-height:1;border-radius:50%;transition:background-color .2s,color .2s}.close-button:hover{color:var(--text-color-dark);background-color:#f3f4f6}@media (max-width: 768px){.modal-content{padding:24px;overflow-y:auto}.editor-main-area{flex-direction:column;gap:20px}.modal-canvas-controls{width:100%;order:2}.modal-canvas-container{width:100%;max-width:500px;margin:0 auto;order:1;flex-grow:0}}