html,body{height:100%}*{box-sizing:border-box}:root{--font-family:"Inter", sans-serif;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:20px;--space-2xl:24px;--bg-dark:#0f172a;--bg-darker:#020617;--accent-blue:#3b82f6;--accent-blue-hover:#2563eb;--accent-green:#10b981;--accent-green-hover:#059669;--accent-red:#ef4444;--accent-red-hover:#dc2626;--text-main:#f8fafc;--text-muted:#94a3b8;--glass-bg:#0f172aa6;--glass-border:#ffffff14;--glass-blur:blur(16px);--glass-shadow:0 8px 32px 0 #0000005e;--input-bg:#ffffff0d;--input-border:#ffffff1a;--input-focus:#3b82f680;--transition-fast:.15s ease-in-out;--transition-base:.3s ease-in-out}body{width:100vw;height:100dvh;font-family:var(--font-family);background-color:var(--bg-darker);background:radial-gradient(circle at 50% 50%, var(--bg-dark) 0%, var(--bg-darker) 100%);color:var(--text-main);margin:0;padding:0;overflow:hidden}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border-left:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--text-main);flex-direction:column;height:100vh;display:flex;overflow:hidden auto}.glass-panel::-webkit-scrollbar{width:6px}.glass-panel::-webkit-scrollbar-track{background:0 0}.glass-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.glass-panel::-webkit-scrollbar-thumb:hover{background:#fff3}.app-layout{box-sizing:border-box;background:radial-gradient(circle at 50% 50%, var(--bg-dark) 0%, var(--bg-darker) 100%);gap:24px;width:100%;height:100dvh;padding:24px;display:flex;overflow:hidden}.left-panel-container,.right-panel-container,.canvas-container{-webkit-backdrop-filter:blur(16px);box-sizing:border-box;height:100%;transition:all var(--transition-base);background:#0f172a73;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 20px 40px -1px #00000080,inset 0 1px #ffffff1a}.left-panel-container,.right-panel-container{z-index:10;flex-shrink:0;width:340px}.canvas-container{flex:1;margin:0}.input-panel-inner,.handles-panel-inner{gap:var(--space-sm);height:100%;padding:var(--space-lg);box-sizing:border-box;flex-direction:column;display:flex;overflow:hidden auto}.panel-title-area{margin-bottom:20px}.panel-title-area h1{color:var(--text-main);letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:700}.panel-subtitle{color:var(--text-muted);margin:4px 0 0;font-size:.75rem}.product-grid{gap:var(--space-sm);grid-template-columns:1fr;display:grid}.product-card{background:var(--input-bg);border:1px solid var(--glass-border);padding:var(--space-sm) var(--space-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:var(--space-sm);text-align:left;border-radius:8px;width:100%;display:flex}.product-card:hover{color:var(--text-main);background:#ffffff14;border-color:#ffffff26}.product-card.active{border-color:var(--accent-blue);color:var(--text-main);background:#3b82f61a}.product-card-dot{background:var(--text-muted);width:8px;height:8px;transition:all var(--transition-fast);border-radius:50%}.product-card.active .product-card-dot{background:var(--accent-blue);box-shadow:0 0 8px var(--accent-blue)}.product-card-dot.upload{background:var(--accent-green)}.product-card.active .product-card-dot.upload{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.color-picker-wrapper{border:2px solid var(--glass-border);cursor:pointer;width:42px;height:42px;transition:all var(--transition-fast);border-radius:50%;flex-shrink:0;position:relative;overflow:hidden}.color-picker-wrapper:hover{border-color:#ffffff4d;transform:scale(1.05)}.color-circle-picker{cursor:pointer;background:0 0;border:none;width:140%;height:140%;margin:0;padding:0;position:absolute;top:-20%;left:-20%}.layer-stack{gap:var(--space-sm);flex-direction:column;display:flex}.layer-item{background:var(--input-bg);border:1px solid var(--glass-border);color:var(--text-main);cursor:pointer;text-align:left;width:100%;transition:all var(--transition-fast);border-radius:12px;align-items:center;gap:12px;padding:12px 16px;display:flex;position:relative}.layer-item:disabled{opacity:.35;cursor:not-allowed}.layer-item:not(:disabled):hover{background:#ffffff14;border-color:#ffffff26}.layer-item.active{background:#ffffff14}.layer-item.active.text{border-color:var(--accent-blue);box-shadow:0 0 12px #3b82f626}.layer-item.active.number{border-color:#f59e0b;box-shadow:0 0 12px #f59e0b26}.layer-item.active.logo{border-color:var(--accent-green);box-shadow:0 0 12px #10b98126}.layer-icon{width:28px;height:28px;color:var(--text-muted);background:#ffffff0f;border-radius:8px;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.layer-item.active .layer-icon{color:#fff}.layer-item.active.text .layer-icon{background:var(--accent-blue)}.layer-item.active.number .layer-icon{background:#f59e0b}.layer-item.active.logo .layer-icon{background:var(--accent-green)}.layer-meta{flex-direction:column;flex:1;display:flex}.layer-title{font-size:.85rem;font-weight:600}.layer-subtitle{color:var(--text-muted);margin-top:2px;font-size:.72rem}.layer-indicator{background:var(--accent-blue);width:6px;height:6px;box-shadow:0 0 6px var(--accent-blue);border-radius:50%}.layer-indicator.number{background:#f59e0b;box-shadow:0 0 6px #f59e0b}.layer-indicator.logo{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green)}.empty-selection-placeholder{text-align:center;color:var(--text-muted);border:1px dashed var(--glass-border);background:#00000026;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:40px 20px;display:flex}.placeholder-icon{color:var(--text-muted);opacity:.4;margin-bottom:16px;animation:2s ease-in-out infinite pulse}.placeholder-text{font-size:.75rem;line-height:1.55}.active-transform-group{border:1px solid var(--glass-border);padding:var(--space-md);background:#0000001a;border-radius:12px;flex-direction:column;display:flex}.active-transform-group .transform-slider-group+.transform-slider-group{margin-top:var(--space-sm)}.transform-group-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.transform-title-highlight{color:var(--text-main);font-size:.7rem;font-weight:700}.handles-footer{gap:var(--space-sm);flex-direction:column;flex-shrink:0;display:flex}.handles-footer .flex{width:100%}.btn-footer{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);cursor:pointer;transition:all var(--transition-fast);border-radius:8px;flex:1;font-size:.75rem;font-weight:600;display:flex}.btn-footer.secondary{border:1px solid var(--glass-border);color:var(--text-main);background:#ffffff0d}.btn-footer.secondary:hover:not(:disabled){background:#ffffff1a}.btn-footer.primary{background:var(--accent-blue);border:1px solid var(--accent-blue);color:#fff}.btn-footer.primary:hover:not(:disabled){background:var(--accent-blue-hover)}.btn-footer:disabled{opacity:.5;cursor:not-allowed}.library-mini-list{flex-direction:column;gap:8px;max-height:180px;padding-right:4px;display:flex;overflow-y:auto}.library-mini-list::-webkit-scrollbar{width:4px}.library-mini-list::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.library-mini-item{border:1px solid var(--glass-border);transition:all var(--transition-fast);background:#0000001f;border-radius:10px;align-items:center;display:flex;overflow:hidden}.library-mini-item:hover{background:#ffffff0d;border-color:#ffffff26}.library-mini-btn{color:var(--text-main);text-align:left;cursor:pointer;background:0 0;border:none;flex:1;justify-content:space-between;align-items:center;padding:10px 14px;font-size:.8rem;font-weight:600;display:flex}.library-mini-date{color:var(--text-muted);font-size:.7rem;font-weight:400}.library-mini-delete{color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:10px 12px;display:flex}.library-mini-delete:hover{color:var(--accent-red);background:#ef44441a}.upload-logo-btn{text-align:left;padding:12px 16px;font-size:.8rem;font-weight:600}.section-header{letter-spacing:-.02em;border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;margin:0 0 16px;padding-bottom:12px;font-size:1.1rem;font-weight:600;display:flex}.control-group{flex-direction:column;display:flex}.control-group .section-divider+.control-label,.control-group .section-divider+.control-header{margin-top:var(--space-md)}.control-group .control-label,.control-group .control-header{margin-bottom:var(--space-xs)}.control-header{margin-bottom:var(--space-xs);justify-content:space-between;align-items:center;display:flex}.control-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:600}.premium-input{box-sizing:border-box;background:var(--input-bg);border:1px solid var(--input-border);width:100%;color:var(--text-main);font-family:var(--font-family);transition:all var(--transition-fast);border-radius:6px;padding:10px 12px;font-size:.875rem}.premium-input:focus{border-color:var(--input-focus);background:#ffffff14;outline:none}.premium-input::placeholder{color:#ffffff4d}.premium-range{-webkit-appearance:none;background:var(--input-bg);width:100%;height:4px;margin:var(--space-xs) 0;border-radius:2px;outline:none}.premium-range::-webkit-slider-thumb{appearance:none;background:var(--text-main);cursor:pointer;width:14px;height:14px;transition:transform var(--transition-fast);border-radius:50%;box-shadow:0 2px 4px #00000080}.premium-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.btn-reset{color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #ffffff1a;border-radius:4px;padding:4px 8px;font-size:.65rem}.btn-reset:hover{color:var(--text-main);background:#ffffff1a}.btn-select{border:1px solid var(--glass-border);cursor:pointer;width:100%;transition:all var(--transition-base);border-radius:8px;justify-content:center;align-items:center;gap:8px;margin-bottom:12px;padding:10px;font-size:.85rem;font-weight:600;display:flex}.btn-select.inactive{background:var(--input-bg);color:var(--text-muted)}.btn-select.inactive:hover{background:#ffffff1a}.btn-select.active.text{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue);box-shadow:0 4px 12px #3b82f64d}.btn-select.active.number{color:#fff;background:#f59e0b;border-color:#f59e0b;box-shadow:0 4px 12px #f59e0b4d}.btn-select.active.logo{background:var(--accent-green);color:#fff;border-color:var(--accent-green);box-shadow:0 4px 12px #10b9814d}.mode-toggle-group{background:var(--input-bg);border:1px solid var(--glass-border);border-radius:8px;gap:8px;padding:4px;display:flex}.mode-btn{cursor:pointer;transition:all var(--transition-fast);color:var(--text-muted);background:0 0;border:none;border-radius:4px;flex:1;padding:6px;font-size:.75rem;font-weight:600}.mode-btn:hover:not(.active){background:#ffffff0d}.mode-btn.active.text{background:var(--accent-blue);color:#fff;box-shadow:0 2px 4px #0003}.mode-btn.active.logo{background:var(--accent-green);color:#fff;box-shadow:0 2px 4px #0003}.color-picker{-webkit-appearance:none;cursor:pointer;background:0 0;border:none;border-radius:6px;width:100%;height:40px;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid var(--input-border);border-radius:6px}.viewport-toolbar{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);z-index:50;pointer-events:auto;border-radius:99px;gap:12px;padding:8px 16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.toolbar-btn{color:var(--text-muted);cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.toolbar-btn:hover{color:var(--text-main);background:#ffffff1a;transform:translateY(-2px)}.toolbar-btn svg{width:20px;height:20px}.toolbar-divider{background:var(--glass-border);align-self:center;width:1px;height:20px}.tab-container{border-bottom:1px solid var(--glass-border);background:#ffffff08;margin-bottom:8px;padding:4px;display:flex}.tab-item{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all var(--transition-base);background:0 0;border:none;border-radius:4px;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:.75rem;font-weight:700;display:flex}.tab-item:hover:not(.active){color:var(--text-main);background:#ffffff0d}.tab-item.active{color:var(--text-main);background:var(--input-bg);box-shadow:0 2px 8px #0003}.tab-item.active.text{border-bottom:2px solid var(--accent-blue)}.tab-item.active.number{border-bottom:2px solid #f59e0b}.tab-item.active.image{border-bottom:2px solid var(--accent-green)}.tab-item.active.library{border-bottom:2px solid var(--accent-blue)}@media (width<=1024px){.app-layout{flex-direction:column;gap:16px;height:auto;min-height:100vh;padding:12px;overflow-y:auto}.left-panel-container,.right-panel-container,.canvas-container{border-radius:16px;flex:none;width:100%!important;height:auto!important}.canvas-container{order:-1;height:380px!important}.left-panel-container{order:1}.right-panel-container{order:2}.input-panel-inner,.handles-panel-inner{padding:16px}.viewport-toolbar{gap:8px;padding:6px 12px;bottom:12px}.toolbar-btn{width:32px;height:32px}.section-header{margin-bottom:12px;padding-bottom:8px;font-size:1rem}.control-group{margin-bottom:16px}.tab-item{gap:4px;padding:10px 4px;font-size:.7rem}.tab-item svg{width:14px;height:14px}}.flex-row{align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-column{flex-direction:column;display:flex}.flex{display:flex}.flex.spacing-sm{gap:var(--space-sm)}.flex.spacing-md{gap:var(--space-md)}.flex-1{flex:1}.spacing-xs{gap:var(--space-xs)}.spacing-sm{gap:var(--space-sm)}.spacing-md{gap:var(--space-md)}.spacing-lg{gap:var(--space-lg)}.spacing-xl{gap:var(--space-xl)}.spacing-2xl{gap:var(--space-2xl)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.pt-sm{padding-top:var(--space-sm)}.pt-md{padding-top:var(--space-md)}.pt-lg{padding-top:var(--space-lg)}.pb-sm{padding-bottom:var(--space-sm)}.pb-md{padding-bottom:var(--space-md)}.pb-lg{padding-bottom:var(--space-lg)}.w-full{width:100%}.h-full{height:100%}.m-0{margin:0}.mb-8{margin-bottom:8px}.mt-12{margin-top:12px}.ml-auto{margin-left:auto}.p-8{padding:8px}.p-10{padding:10px}.p-12{padding:12px}.p-24{padding:24px}.p-16{padding:16px}.rounded-8{border-radius:8px}.rounded-4{border-radius:4px}.overflow-y-auto{overflow-y:auto}.d-none{display:none}.d-block{display:block}.bg-input{background:var(--input-bg)}.border-input{border:1px solid var(--input-border)}.border-glass-top{border-top:1px solid var(--glass-border)}.bg-glass-subtle{background:#0000001a}.text-danger{color:var(--accent-red)}.border-danger-subtle{border-color:#ef44444d}.logo-preview-container{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;align-items:center;gap:12px;margin-top:12px;padding:8px;display:flex}.logo-preview-img{border-radius:4px;max-width:48px;max-height:48px;display:block}.configurator-footer{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--glass-border);background:#0000001a;flex-direction:column;flex-shrink:0;gap:12px;display:flex}.btn-secondary{border:1px solid var(--glass-border);color:#fff;background:#ffffff0d;flex:1;padding:10px;font-size:.8rem}.btn-primary-large{width:100%;padding:12px;font-size:.9rem}.library-grid{gap:10px;display:grid}.library-item{gap:8px;display:flex;position:relative}.library-btn{text-align:left;cursor:pointer;background:#ffffff05;flex:1;padding:12px;font-size:.8rem}.library-btn-title{color:var(--text-main);margin-bottom:4px;font-weight:600}.library-btn-meta{color:var(--text-muted);font-size:.65rem}.btn-delete-item{color:var(--accent-red);background:#ef44441a;border:1px solid #ef444433;margin-top:auto;margin-bottom:auto}.text-muted-sm{color:var(--text-muted);font-size:.8rem}.italic{font-style:italic}.premium-toast{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-family);font-size:.85rem;background:var(--bg-dark)!important;color:var(--text-main)!important;border:1px solid var(--glass-border)!important;border-radius:12px!important}