:root{--primary-color: #2c3e50;--bg-color: #F9F8F6;--card-bg: #ffffff;--text-color: #333333;--border-radius: 20px;--shadow: 0 10px 30px rgba(0, 0, 0, .08);--accent-color: #333;--progress-bar-color: #3498db;--selected-border: #3498db;--error-color: #e74c3c}body{font-family:Outfit,sans-serif;background-color:var(--bg-color);margin:0}.ag-customizer-wrapper{color:var(--text-color);padding:40px 20px;max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}.ag-preview-section{flex:1 1 500px;background:var(--card-bg);padding:20px;border-radius:var(--border-radius);box-shadow:var(--shadow);position:sticky;top:20px;min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100}#canvas-container{width:100%;height:500px;border-radius:12px;overflow:hidden;position:relative;background:radial-gradient(circle at center,#f0f0f0,#dcdcdc)}#canvas-container canvas{width:100%!important;height:100%!important;display:block}.view-controls{position:absolute;bottom:15px;right:15px;display:flex;gap:8px;background:#ffffffd9;padding:8px;border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 10px #0000001a;z-index:10}.view-btn{border:1px solid #ddd;background:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:600;font-family:Outfit,sans-serif;color:var(--primary-color);transition:all .2s}.view-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.spinner-overlay{position:absolute;inset:0;background:#ffffffe6;display:none;justify-content:center;align-items:center;z-index:50;flex-direction:column;font-weight:500;color:var(--primary-color)}.progress-container-wrapper{width:80%;max-width:300px;text-align:center}.progress-text{margin-bottom:10px;font-weight:600;font-size:.9rem}.progress-track{width:100%;height:20px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar{height:100%;width:0%;background-color:var(--progress-bar-color);border-radius:10px;transition:width .4s ease-in-out;background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:40px 40px;animation:move-stripes 2s linear infinite}@keyframes move-stripes{0%{background-position:40px 0}to{background-position:0 0}}.ag-controls-section{flex:1 1 350px;background:var(--card-bg);padding:30px;border-radius:var(--border-radius);box-shadow:var(--shadow);position:relative;z-index:1}.ag-title{font-family:Libre Baskerville,serif;font-size:1.8rem;margin-bottom:10px;color:var(--primary-color)}.ag-subtitle{font-size:.9rem;color:#666;margin-bottom:25px}.form-group{margin-bottom:25px}.form-label{display:block;margin-bottom:8px;font-weight:600;font-size:.9rem}.form-control,.form-select{width:100%;padding:12px;font-family:Outfit,sans-serif;border:1px solid #ddd;border-radius:8px;font-size:1rem;box-sizing:border-box}.color-options-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px}.color-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid rgba(0,0,0,.1);transition:all .2s ease;position:relative}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent-color);transform:scale(1.1)}.color-swatch.out-of-stock{opacity:.5;cursor:not-allowed;background-image:linear-gradient(45deg,transparent 40%,#c0392b 40%,#c0392b 60%,transparent 60%);border:1px solid #ddd}.color-swatch.out-of-stock:hover{transform:none}.image-upload-wrapper{display:flex;align-items:center;gap:15px;border:2px dashed #ddd;padding:15px;border-radius:12px;transition:all .3s ease;background-color:#fafafa;position:relative}.image-upload-wrapper.drag-over{border-color:var(--primary-color);background-color:#2c3e500d;transform:scale(1.02)}.image-upload-wrapper.disabled{opacity:.6;pointer-events:none;border-color:#eee;background:#f9f9f9}.file-input-container{flex:1}.selection-grid{display:flex;gap:10px;margin-top:15px;justify-content:flex-start;flex-wrap:wrap}.selection-item{width:70px;height:70px;border:2px solid #ddd;border-radius:8px;cursor:pointer;overflow:hidden;transition:all .2s;position:relative;background:#fff}.selection-item img{width:100%;height:100%;object-fit:contain}.selection-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.selection-item.selected{border-color:var(--selected-border);box-shadow:0 0 0 2px #3498db4d}.selection-item.selected:after{content:"✓";position:absolute;top:2px;right:2px;background:var(--selected-border);color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center}.quota-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem}.quota-badge{background:#eee;padding:4px 8px;border-radius:4px;font-weight:600;color:#555}.quota-badge.limit-reached{background:#ffebee;color:var(--error-color)}.retry-container{margin-top:15px;padding:15px;background:#f8f9fa;border-radius:10px;border:1px solid #e9ecef;display:none}.retry-text{font-size:.85rem;color:#555;margin-bottom:10px;line-height:1.4}.btn-retry{width:100%;padding:10px;background:#fff;border:1px solid var(--primary-color);color:var(--primary-color);border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.btn-retry:hover{background:#f0f4f8}.btn-retry:disabled{opacity:.5;cursor:not-allowed;border-color:#ccc;color:#999}.image-modal{display:none;position:fixed;inset:0;background:#000000d9;z-index:9999;justify-content:center;align-items:center;padding:20px;opacity:0;transition:opacity .3s ease}.image-modal.show{display:flex;opacity:1}.image-modal img{max-width:90%;max-height:90vh;border-radius:8px;box-shadow:0 5px 30px #0000004d;background:#fff;padding:10px}.modal-close{position:absolute;top:20px;right:20px;color:#fff;font-size:30px;cursor:pointer;font-weight:700;padding:10px}#admin-trigger{position:fixed;bottom:10px;right:10px;width:30px;height:30px;opacity:.1;cursor:pointer;transition:opacity .3s;display:flex;align-items:center;justify-content:center;font-size:1.2rem;z-index:9999}#admin-trigger:hover{opacity:1}.admin-modal-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:10000;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.admin-modal-overlay.show{display:flex}.admin-modal-card{background:#fff;padding:30px;border-radius:12px;width:90%;max-width:350px;box-shadow:0 10px 40px #0003;position:relative;text-align:center}.admin-modal-card.wide{max-width:900px;width:95%;text-align:left}.admin-close-btn{position:absolute;top:10px;right:15px;font-size:1.5rem;cursor:pointer;color:#aaa}.admin-close-btn:hover{color:#333}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.dash-item label{font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:5px}.dash-value{font-size:1.1rem;font-weight:600;color:var(--primary-color);font-family:Libre Baskerville,serif}@media(max-width:900px){.ag-customizer-wrapper{flex-direction:column;align-items:stretch}.ag-preview-section{width:100%;position:relative!important;top:0;z-index:1;min-height:400px;margin-bottom:20px}.ag-controls-section{z-index:2}#canvas-container{height:350px}}