:root{--bg-primary: #FAF9F6;--bg-secondary: #F4F1EA;--bg-white: #FFFFFF;--text-primary: #2C2A29;--text-muted: #6E685E;--text-light: #9B9386;--border-color: #E2DDD5;--border-focus: #B6AEA1;--accent-muji: #8E7F6A;--accent-sino-phuket: #8B2635;--accent-sino-thungsong: #BC6C25;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-sans: "Inter", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-serif: "Playfair Display", "Pridi", "Noto Serif Thai", Georgia, serif;--transition-smooth: all .3s cubic-bezier(.25, .8, .25, 1);--shadow-subtle: 0 4px 20px rgba(44, 42, 41, .03);--shadow-medium: 0 10px 30px rgba(44, 42, 41, .06)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-light)}.app-header{padding:1.5rem 3rem;background-color:var(--bg-white);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.header-logo{display:flex;align-items:center;gap:.75rem}.app-logo-img{height:38px;width:auto;object-fit:contain}.header-logo h1{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;letter-spacing:.15em;color:var(--text-primary)}.header-subtitle{font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted)}.app-footer{padding:1.5rem 3rem;background-color:var(--bg-white);border-top:1px solid var(--border-color);text-align:center;font-size:.75rem;color:var(--text-light);letter-spacing:.05em}.app-container{display:grid;grid-template-columns:320px 1fr 340px;flex:1;background-color:var(--bg-secondary);overflow:hidden;max-width:1920px;width:100%;margin:0 auto}.sidebar{background-color:var(--bg-white);padding:2rem 1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;height:calc(100vh - 120px)}.sidebar-left{border-right:1px solid var(--border-color)}.sidebar-right{border-left:1px solid var(--border-color)}.section-card{position:relative;background-color:var(--bg-white);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;transition:var(--transition-smooth)}.section-card:hover{box-shadow:var(--shadow-subtle)}.step-badge{position:absolute;top:-10px;left:15px;background-color:var(--text-primary);color:var(--bg-primary);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;border-radius:10px}.section-card h2{font-size:1rem;font-weight:600;color:var(--text-primary);letter-spacing:.02em;margin-top:.25rem}.field-desc{font-size:.75rem;color:var(--text-muted);line-height:1.4}.select-wrapper{position:relative}.select-wrapper:after{content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.8rem;color:var(--text-muted);pointer-events:none}select{width:100%;padding:10px 14px;font-family:var(--font-sans);font-size:.85rem;border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);border-radius:var(--radius-sm);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;transition:var(--transition-smooth)}select:focus{border-color:var(--border-focus);background-color:var(--bg-white)}.dropzone{border:1.5px dashed var(--border-color);border-radius:var(--radius-md);padding:1.5rem 1rem;text-align:center;cursor:pointer;background-color:var(--bg-primary);transition:var(--transition-smooth);position:relative;min-height:140px;display:flex;align-items:center;justify-content:center}.dropzone.dragover{border-color:var(--text-muted);background-color:#ece8de}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:.5rem}.dropzone-icon{font-size:1.5rem;color:var(--text-light)}.dropzone-text{font-size:.8rem;color:var(--text-primary);font-weight:500}.dropzone-or{font-size:.7rem;color:var(--text-light)}.dropzone-preview-container{display:flex;align-items:center;gap:1rem;width:100%;text-align:left}.preview-thumbnail{width:60px;height:60px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-color);background-color:var(--bg-white)}.preview-thumbnail img{width:100%;height:100%;object-fit:cover}.preview-info{display:flex;flex-direction:column;gap:.25rem;flex:1;overflow:hidden}.file-name{font-size:.8rem;color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-clear{align-self:flex-start;background:none;border:none;color:#c0392b;font-size:.75rem;cursor:pointer;padding:0;font-weight:500;text-decoration:underline}.btn-clear:hover{color:#962d22}.control-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.ratio-buttons{display:flex;gap:.5rem}.btn-ratio{flex:1;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-sans);font-size:.75rem;color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth)}.btn-ratio:hover{border-color:var(--border-focus);color:var(--text-primary)}.btn-ratio.active{border-color:var(--text-primary);background-color:var(--bg-white);color:var(--text-primary);font-weight:600}.ratio-box{border:1px solid currentColor;background:transparent;opacity:.7}.ratio-1-1{width:14px;height:14px}.ratio-4-5{width:14px;height:17px}.ratio-9-16{width:11px;height:19px}.transform-controls{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem;border-top:1px solid var(--border-color);padding-top:.75rem}.slider-group{display:flex;flex-direction:column;gap:.25rem}.slider-label{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted)}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border-color);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text-primary);border:1px solid var(--bg-white);cursor:pointer;transition:var(--transition-smooth)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]:disabled{opacity:.4;cursor:not-allowed}input[type=range]:disabled::-webkit-slider-thumb{background:var(--text-light);cursor:not-allowed}.canvas-workspace{display:flex;align-items:center;justify-content:center;padding:2.5rem;overflow:auto;min-height:calc(100vh - 120px)}.canvas-wrapper{position:relative;background-color:var(--bg-white);padding:1.5rem;border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-medium);display:flex;flex-direction:column;align-items:center}.canvas-container{position:relative;overflow:hidden;background-color:#efece6;border-radius:var(--radius-sm);box-shadow:inset 0 2px 8px #0000000d;display:flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none}.canvas-container:active{cursor:grabbing}#graphics-canvas{display:block;max-width:100%;max-height:70vh;object-fit:contain;background-color:#fff}.canvas-empty-state{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--bg-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;gap:1rem;z-index:10}.empty-icon{font-size:3rem;opacity:.8}.canvas-empty-state h3{font-family:var(--font-serif);font-size:1.25rem;font-weight:500}.canvas-empty-state p{font-size:.8rem;color:var(--text-muted);max-width:250px}.canvas-interactive-hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background-color:#2c2a29d9;color:var(--bg-primary);padding:6px 14px;border-radius:20px;font-size:.7rem;letter-spacing:.02em;pointer-events:none;z-index:5;box-shadow:0 4px 10px #0000001a;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.category-tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.tab-btn{background:none;border:none;padding:10px 12px;font-family:var(--font-sans);font-size:.8rem;font-weight:500;color:var(--text-muted);cursor:pointer;position:relative;white-space:nowrap;transition:var(--transition-smooth)}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{color:var(--text-primary);font-weight:600}.tab-btn.active:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background-color:var(--text-primary)}.template-grid-container{display:flex;flex-direction:column;gap:.5rem}.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:180px;overflow-y:auto;padding-right:4px}.template-item{border:1px solid var(--border-color);background-color:var(--bg-primary);border-radius:var(--radius-sm);padding:4px;cursor:pointer;transition:var(--transition-smooth);display:flex;flex-direction:column;gap:4px;height:80px}.template-item:hover{border-color:var(--border-focus)}.template-item.active{border-color:var(--text-primary);background-color:var(--bg-white);box-shadow:var(--shadow-subtle)}.template-thumbnail{flex:1;background-color:#e2ddd5;border-radius:2px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.03)}.template-thumb-title{font-size:.65rem;color:var(--text-muted);text-align:center;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-editor{display:flex;flex-direction:column;gap:.75rem}.input-group{display:flex;flex-direction:column;gap:.35rem}.input-group label{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.02em}textarea{width:100%;padding:10px 12px;font-family:var(--font-sans);font-size:.85rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-primary);color:var(--text-primary);outline:none;resize:vertical;transition:var(--transition-smooth);line-height:1.4}textarea:focus{border-color:var(--border-focus);background-color:var(--bg-white)}.styling-options{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem;border-top:1px solid var(--border-color);padding-top:.75rem;gap:1rem}.color-picker-group{display:flex;flex-direction:column;gap:.35rem}.color-picker-group label{font-size:.7rem;color:var(--text-muted);font-weight:600;text-transform:uppercase}.color-options{display:flex;gap:.35rem}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:var(--transition-smooth)}.color-dot:hover{transform:scale(1.15)}.color-dot.active{border-color:var(--text-primary);box-shadow:0 0 0 1px var(--bg-white) inset}.toggle-group{display:flex;align-items:center}.checkbox-container{display:flex;align-items:center;position:relative;padding-left:24px;cursor:pointer;font-size:.75rem;color:var(--text-muted);-webkit-user-select:none;user-select:none;font-weight:500}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:50%;left:0;transform:translateY(-50%);height:14px;width:14px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:2px;transition:var(--transition-smooth)}.checkbox-container:hover input~.checkmark{border-color:var(--border-focus)}.checkbox-container input:checked~.checkmark{background-color:var(--text-primary);border-color:var(--text-primary)}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{left:4px;top:1px;width:3px;height:7px;border:solid var(--bg-white);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.85rem;font-weight:500;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:var(--transition-smooth);outline:none;gap:.5rem}.btn-sm{padding:6px 12px;font-size:.75rem}.btn-primary{background-color:var(--text-primary);color:var(--bg-primary)}.btn-primary:hover{background-color:#1a1918;transform:translateY(-1px)}.btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover{background-color:#ece8de;border-color:var(--border-focus)}.btn-tertiary{background-color:transparent;color:var(--text-muted);font-size:.75rem;border-color:transparent;text-decoration:underline;padding:4px}.btn-tertiary:hover:not(:disabled){color:var(--text-primary)}.btn-outline{background-color:transparent;border-color:var(--border-color);color:var(--text-muted)}.btn-outline:hover{border-color:var(--text-primary);color:var(--text-primary)}.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed}.w-100{width:100%}.actions-card{margin-top:auto;border-color:#b6aea1}.actions-buttons{display:flex;flex-direction:column;gap:.5rem}.btn-icon{font-size:1rem;line-height:1}.action-note{font-size:.7rem;color:var(--text-light);line-height:1.3}.theme-muji select{border-left:3px solid var(--accent-muji)}.theme-sino select{border-left:3px solid var(--accent-sino-phuket)}.theme-thungsong select{border-left:3px solid var(--accent-sino-thungsong)}@media(max-width:1024px){.app-container{grid-template-columns:280px 1fr;grid-template-rows:auto}.sidebar-right{grid-column:1 / -1;height:auto;border-left:none;border-top:1px solid var(--border-color)}.sidebar-left,.canvas-workspace{height:calc(100vh - 120px)}}@media(max-width:768px){.app-header{padding:1rem 1.5rem;flex-direction:column;gap:.5rem;align-items:flex-start}.app-container{grid-template-columns:1fr}.sidebar-left{grid-column:1;height:auto;border-right:none;border-bottom:1px solid var(--border-color)}.canvas-workspace{min-height:400px;padding:1rem}.sidebar-right{grid-column:1}.app-footer{padding:1rem}}.property-setup-section{margin-top:1rem;border-top:1px solid var(--border-color);padding-top:1rem}.setup-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--transition-smooth)}.setup-header h3{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.setup-toggle-icon{font-size:.8rem;color:var(--text-muted);transition:transform .3s ease}.property-setup-section.collapsed .setup-toggle-icon{transform:rotate(-90deg)}.setup-content{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem;transition:max-height .3s ease,opacity .3s ease;max-height:500px;overflow:hidden;opacity:1}.property-setup-section.collapsed .setup-content{max-height:0;opacity:0;margin-top:0;pointer-events:none}.form-row{display:flex;gap:.5rem}.form-row .input-group{flex:1;min-width:0}.form-input-sm{width:100%;padding:6px 10px;font-family:var(--font-sans);font-size:.8rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-primary);color:var(--text-primary);outline:none;transition:var(--transition-smooth)}.form-input-sm:focus{border-color:var(--border-focus);background-color:var(--bg-white)}.color-picker-wrapper{display:flex;align-items:center;gap:.5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);padding:4px 8px;border-radius:var(--radius-sm)}.color-picker-wrapper input[type=color]{-webkit-appearance:none;border:none;width:24px;height:24px;border-radius:50%;cursor:pointer;background:none;padding:0}.color-picker-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-wrapper input[type=color]::-webkit-color-swatch{border:1px solid var(--border-color);border-radius:50%}#color-hex-val{font-family:monospace;font-size:.75rem;color:var(--text-muted)}.logo-uploader-box{display:flex;flex-direction:column;gap:.5rem}.logo-preview-container{display:flex;align-items:center;justify-content:space-between;background-color:var(--bg-secondary);padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.logo-preview-container .file-name{font-size:.7rem;color:var(--text-primary);font-weight:500;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}