*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--orange-50: #FFF8F0;--orange-100: #FFECD2;--orange-200: #FFDFC0;--orange-300: #F7B267;--orange-400: #F39C12;--orange-500: #E67E22;--orange-600: #D35400;--orange-700: #A04000;--text-dark: #2c2216;--text-body: #3a2a1a;--text-muted: #8a7a6a;--text-label: #b09a8a;--glass-bg: rgba(255, 255, 255, .45);--glass-border: rgba(230, 126, 34, .06);--glass-blur: 16px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px}body{font-family:Poppins,sans-serif;background:linear-gradient(160deg,var(--orange-50) 0%,var(--orange-100) 40%,var(--orange-200) 100%);min-height:100vh;color:var(--text-body);overflow:hidden}.top-nav{background:#ffffffb8;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-border);padding:8px 24px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100;height:48px}.logo{display:flex;align-items:center;gap:8px}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--orange-500),var(--orange-400));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;box-shadow:0 2px 8px #e67e2240}.logo-text{font-size:16px;font-weight:700;background:linear-gradient(90deg,var(--orange-600),var(--orange-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.nav-links{display:flex;gap:2px;margin-left:24px}.nav-link{padding:6px 14px;border-radius:7px;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:5px;transition:all .15s;border:none;background:none;font-family:Poppins,sans-serif}.nav-link:hover{background:#e67e220f;color:var(--orange-600)}.nav-link.active{background:#e67e221a;color:var(--orange-600);font-weight:600}.app-layout{display:flex;height:calc(100vh - 48px);overflow:hidden}.sidebar{width:240px;background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-right:1px solid var(--glass-border);padding:14px 10px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.sidebar-header h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-label)}.btn-new{background:linear-gradient(135deg,var(--orange-500),var(--orange-400));color:#fff;border:none;border-radius:var(--radius-sm);padding:5px 10px;font-size:10px;font-weight:600;cursor:pointer;font-family:Poppins,sans-serif;display:flex;align-items:center;gap:4px;box-shadow:0 2px 6px #e67e2233;transition:all .15s}.btn-new:hover{transform:translateY(-1px);box-shadow:0 3px 10px #e67e224d}.search-wrap{position:relative;margin-bottom:8px}.search-wrap i{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-label)}.sidebar-search{width:100%;padding:6px 8px 6px 27px;border:1px solid rgba(230,126,34,.08);border-radius:var(--radius-md);font-family:Poppins,sans-serif;font-size:11px;background:#fff6;color:var(--text-body)}.sidebar-search:focus{outline:none;border-color:var(--orange-500)}.listing-card{background:#ffffff73;border:1px solid rgba(230,126,34,.05);border-radius:var(--radius-md);padding:9px;margin-bottom:5px;cursor:pointer;display:flex;gap:8px;align-items:center;transition:all .15s}.listing-card:hover{border-color:#e67e222e;background:#fff9}.listing-card.active{border-color:var(--orange-500);background:#e67e220a;box-shadow:0 2px 8px #e67e221a}.listing-thumb{width:36px;height:36px;border-radius:7px;background:linear-gradient(135deg,var(--orange-100),var(--orange-200));display:flex;align-items:center;justify-content:center;color:var(--orange-500);font-size:14px;flex-shrink:0}.listing-info{flex:1;min-width:0}.listing-info .name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.listing-info .meta{font-size:9px;color:var(--text-label);margin-top:1px}.listing-actions{display:flex;gap:3px;opacity:0;transition:opacity .1s}.listing-card:hover .listing-actions{opacity:1}.listing-action-btn{background:none;border:none;color:var(--text-label);cursor:pointer;font-size:10px;padding:2px;font-family:Poppins,sans-serif}.listing-action-btn:hover{color:var(--orange-500)}.listing-action-btn.delete:hover{color:#e74c3c}.sidebar-empty{text-align:center;padding:20px 10px;color:var(--text-label);font-size:11px}.canvas-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 16px;overflow-y:auto}.canvas-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;width:100%;max-width:580px}.mode-toggle{display:flex;background:#ffffff8c;border:1px solid rgba(230,126,34,.1);border-radius:var(--radius-md);overflow:hidden}.mode-btn{padding:6px 12px;font-size:10px;font-weight:600;font-family:Poppins,sans-serif;border:none;cursor:pointer;background:transparent;color:var(--text-label);display:flex;align-items:center;gap:4px;transition:all .15s}.mode-btn.active{background:linear-gradient(135deg,var(--orange-500),var(--orange-400));color:#fff}.toolbar-actions{display:flex;gap:5px;margin-left:auto}.btn-action{padding:6px 12px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;font-family:Poppins,sans-serif;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s}.btn-save{background:#e67e2212;color:var(--orange-600);border:1px solid rgba(230,126,34,.12)}.btn-save:hover{background:#e67e2224}.btn-download{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff;box-shadow:0 2px 6px #27ae6033}.btn-download:hover{box-shadow:0 3px 10px #27ae604d}.canvas-preview-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;align-items:center;width:100%;max-width:580px}.canvas-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-label);margin-bottom:8px;display:flex;align-items:center;gap:5px}.canvas-label .badge{background:#e67e221a;color:var(--orange-500);padding:1px 6px;border-radius:4px;font-size:9px}.canvas-wrapper{width:100%;aspect-ratio:1;position:relative}.bg-presets{display:flex;gap:5px;margin-top:8px;align-items:center}.bg-preset-label{font-size:9px;color:var(--text-label);margin-right:2px}.bg-preset{width:24px;height:24px;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:all .15s}.bg-preset:hover{transform:scale(1.1)}.bg-preset.active{border-color:var(--orange-500);box-shadow:0 0 0 2px #e67e2226}.bg-preset.warm{background:linear-gradient(135deg,#fff2e4,#ffdfc0)}.bg-preset.cool{background:linear-gradient(135deg,#e8f4fd,#b8dbf2)}.bg-preset.white{background:linear-gradient(135deg,#fafafa,#ededed)}.bg-preset.dark{background:linear-gradient(135deg,#1a1a2e,#16213e)}.bg-preset.custom{background:linear-gradient(135deg,#e0e0e0,silver);display:flex;align-items:center;justify-content:center;font-size:9px;color:#999;position:relative;overflow:hidden}.bg-preset.custom input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.spec-warning{background:#f39c1214;border:1px solid rgba(243,156,18,.2);border-radius:var(--radius-md);padding:7px 12px;margin-top:8px;font-size:10px;color:var(--orange-600);display:flex;align-items:center;gap:6px;width:100%}.spec-warning button{margin-left:auto;background:#e67e221a;border:1px solid rgba(230,126,34,.2);border-radius:5px;padding:3px 8px;font-size:9px;font-weight:600;color:var(--orange-600);cursor:pointer;font-family:Poppins,sans-serif}.editor-panel{width:340px;background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-left:1px solid var(--glass-border);padding:14px;overflow-y:auto;flex-shrink:0}.editor-section{margin-bottom:12px}.editor-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.editor-section-header h3{font-size:11px;font-weight:600;color:var(--orange-600);display:flex;align-items:center;gap:5px}.text-input{width:100%;padding:7px 10px;border:1px solid rgba(230,126,34,.1);border-radius:var(--radius-md);font-family:Poppins,sans-serif;font-size:12px;background:#ffffff73;color:var(--text-body);margin-bottom:4px}.text-input:focus{outline:none;border-color:var(--orange-500)}.text-input.name{font-weight:600}.text-input.product-name{font-size:11px;color:#6a5a4a}.import-tabs{display:flex;gap:1px;margin-bottom:6px;background:#ffffff73;border-radius:var(--radius-md);padding:2px}.import-tab{flex:1;padding:5px 6px;font-size:9px;font-weight:600;font-family:Poppins,sans-serif;border:none;cursor:pointer;background:transparent;color:var(--text-label);border-radius:var(--radius-sm);text-align:center;transition:all .15s}.import-tab.active{background:#e67e221a;color:var(--orange-600)}.import-tab:hover:not(.active){background:#e67e220a}.upload-zone{border:1.5px dashed rgba(230,126,34,.15);border-radius:var(--radius-md);padding:14px 10px;text-align:center;cursor:pointer;background:#e67e2203;transition:all .15s;position:relative;overflow:hidden}.upload-zone:hover{border-color:var(--orange-500);background:#e67e2208}.upload-zone i{font-size:18px;color:var(--orange-500);margin-bottom:3px}.upload-zone p{font-size:10px;color:var(--text-label)}.upload-zone p span{color:var(--orange-500);font-weight:600}.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.paste-area{width:100%;height:80px;padding:8px;border:1px solid rgba(230,126,34,.1);border-radius:var(--radius-md);font-family:Poppins,sans-serif;font-size:10px;background:#ffffff73;color:var(--text-body);resize:none}.paste-area:focus{outline:none;border-color:var(--orange-500)}.paste-area+button{margin-top:4px}.btn-parse{width:100%;padding:6px;background:#e67e2214;color:var(--orange-600);border:1px solid rgba(230,126,34,.15);border-radius:var(--radius-sm);font-family:Poppins,sans-serif;font-size:10px;font-weight:600;cursor:pointer;margin-top:4px}.spec-count{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px}.spec-count.green{background:#27ae601a;color:#27ae60}.spec-count.yellow{background:#f39c121a;color:var(--orange-600)}.spec-row{display:flex;align-items:center;gap:5px;padding:7px 8px;background:#ffffff73;border:1px solid rgba(230,126,34,.05);border-radius:var(--radius-md);margin-bottom:3px;transition:all .15s}.spec-row:hover{border-color:#e67e2226}.spec-drag{color:#dbc;cursor:grab;font-size:10px}.spec-icon-box{width:24px;height:24px;background:#e67e220d;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--orange-500);font-size:10px;flex-shrink:0}.spec-fields{flex:1;display:flex;flex-direction:column;gap:0}.spec-label-input{border:none;background:transparent;font-family:Poppins,sans-serif;font-size:9px;font-weight:700;color:var(--orange-600);text-transform:uppercase;letter-spacing:.3px;padding:1px 0;width:100%}.spec-value-input{border:none;background:transparent;font-family:Poppins,sans-serif;font-size:10px;color:var(--text-body);padding:1px 0;width:100%}.spec-label-input:focus,.spec-value-input:focus{outline:none}.spec-delete{background:none;border:none;color:#ddd;cursor:pointer;font-size:10px;padding:2px;transition:color .15s}.spec-delete:hover{color:#e74c3c}.btn-add-spec{width:100%;padding:7px;border:1px dashed rgba(230,126,34,.12);border-radius:var(--radius-md);background:transparent;color:var(--orange-500);font-family:Poppins,sans-serif;font-size:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;margin-top:5px}.btn-add-spec:hover{background:#e67e2208}.btn-generate{width:100%;padding:11px;background:linear-gradient(135deg,var(--orange-500),var(--orange-400));color:#fff;border:none;border-radius:var(--radius-md);font-family:Poppins,sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 3px 14px #e67e2238;margin-top:10px;transition:all .15s}.btn-generate:hover{box-shadow:0 4px 18px #e67e224d;transform:translateY(-1px)}.settings-panel{flex:1;padding:30px;overflow-y:auto;max-width:600px;margin:0 auto}.settings-section{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px}.settings-section h3{font-size:13px;font-weight:600;color:var(--orange-600);margin-bottom:12px;display:flex;align-items:center;gap:8px}.settings-section label{display:block;font-size:11px;font-weight:500;color:var(--text-muted);margin-bottom:4px;margin-top:10px}.settings-section label:first-of-type{margin-top:0}.settings-section input[type=text],.settings-section select{width:100%;padding:7px 10px;border:1px solid rgba(230,126,34,.1);border-radius:var(--radius-md);font-family:Poppins,sans-serif;font-size:12px;background:#ffffff73;color:var(--text-body)}.settings-section input:focus,.settings-section select:focus{outline:none;border-color:var(--orange-500)}.logo-upload-area{border:1.5px dashed rgba(230,126,34,.15);border-radius:var(--radius-md);padding:16px;text-align:center;cursor:pointer;position:relative;transition:all .15s}.logo-upload-area:hover{border-color:var(--orange-500)}.logo-upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.logo-upload-area img{max-width:120px;max-height:60px;margin-bottom:6px}.logo-upload-area p{font-size:10px;color:var(--text-label)}.logo-upload-area p span{color:var(--orange-500);font-weight:600}.dual-canvas-wrapper{width:100%;display:flex;flex-direction:column;gap:12px}.dual-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-label);text-align:center;margin-bottom:2px}.spec-badge{width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0;border-radius:50%}.spec-badge.ok{color:#27ae60}.spec-badge.warning{color:#f39c12}.spec-badge.error{color:#e74c3c}.spec-row-error{border-color:#e74c3c33!important;background:#e74c3c05!important}.spec-row-warning{border-color:#f39c1233!important;background:#f39c1205!important}.bg-preset.custom-img{position:relative;overflow:hidden;border-radius:5px}.bg-preset.custom-img .bg-remove{position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:#e74c3cd9;color:#fff;border:none;font-size:6px;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;line-height:1}.bg-preset.custom-img:hover .bg-remove{display:flex}.canvas-editable:hover{outline:1.5px dashed rgba(230,126,34,.3);background:#ffffff14}.canvas-editable-input{display:block}