/* eazyICON v0.08 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');
:root,[data-theme="light"]{--bg-primary:#f4f5f7;--bg-secondary:#fff;--bg-tertiary:#ebedf0;--bg-elevated:#f9fafb;--bg-inset:#e8eaed;--border:#d1d5db;--border-hover:#9ca3af;--text-primary:#1f2937;--text-secondary:#6b7280;--text-muted:#9ca3af;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-muted:rgba(37,99,235,.08);--accent-text:#2563eb;--success:#16a34a;--danger:#dc2626;--warning:#d97706;--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--checker-a:#e0e0e0;--checker-b:#fff;--panel-shadow:0 1px 3px rgba(0,0,0,.06)}
[data-theme="dark"]{--bg-primary:#0e1117;--bg-secondary:#161b22;--bg-tertiary:#1c2333;--bg-elevated:#222a3a;--bg-inset:#0d1017;--border:#2d3548;--border-hover:#3d4f6e;--text-primary:#e6edf3;--text-secondary:#8b949e;--text-muted:#5a6270;--accent:#58a6ff;--accent-hover:#79bbff;--accent-muted:rgba(88,166,255,.12);--accent-text:#58a6ff;--success:#3fb950;--danger:#f85149;--warning:#d29922;--shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.4);--shadow-lg:0 8px 32px rgba(0,0,0,.5);--checker-a:#1c2333;--checker-b:#0e1117;--panel-shadow:0 1px 3px rgba(0,0,0,.3)}
:root{--r-sm:6px;--r-md:10px;--r-lg:14px;--tr:150ms ease;--f-sans:'DM Sans',-apple-system,sans-serif;--f-mono:'JetBrains Mono',monospace}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--f-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;transition:background .2s,color .2s}
.app{max-width:1280px;margin:0 auto;padding:1rem 1.5rem}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.app-header .header-left{display:flex;align-items:center;gap:1.5rem}
.app-header .header-right{display:flex;align-items:center;gap:.75rem}
.app-header .logo{height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.app-header .logo img{height:40px;width:auto;display:none}
[data-theme="light"] .app-header .logo .logo-light{display:block}
[data-theme="dark"] .app-header .logo .logo-dark{display:block}
.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:.9rem;transition:var(--tr);padding:.5rem .75rem;border-radius:var(--r-md)}
.nav-link:hover{color:var(--accent);background:var(--accent-muted)}
.trial-banner{display:flex;align-items:center;gap:1rem;background:var(--accent-muted);color:var(--accent-text);padding:.5rem 1rem;border-radius:var(--r-md);font-size:.85rem;font-weight:600}
.trial-banner .subscribe-btn{background:var(--accent);color:white;border:none;padding:.4rem .8rem;border-radius:var(--r-sm);cursor:pointer;font-weight:600;font-size:.85rem;transition:var(--tr)}
.trial-banner .subscribe-btn:hover{opacity:.9;transform:scale(1.05)}
.trial-banner .pro-badge{display:flex;align-items:center;gap:.4rem}
.trial-banner .admin-badge{display:flex;align-items:center;gap:.4rem;color:#f59e0b}
.hamburger{display:none;width:40px;height:40px;background:transparent;border:2px solid var(--border);border-radius:50%;cursor:pointer;align-items:center;justify-content:center;color:var(--text-secondary);font-size:1.1rem;transition:var(--tr)}
.hamburger:hover{border-color:var(--accent);color:var(--accent)}
.hamburger-menu{display:none;position:absolute;top:70px;right:1rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 8px 16px rgba(0,0,0,.2);min-width:200px;z-index:1000;flex-direction:column;overflow:hidden}
.hamburger-menu.active{display:flex}
.hamburger-menu a,.hamburger-menu button{padding:.75rem 1.25rem;text-decoration:none;color:var(--text-primary);background:transparent;border:none;text-align:left;font-size:.95rem;font-weight:500;cursor:pointer;transition:var(--tr);display:flex;align-items:center;gap:.75rem;width:100%;font-family:inherit}
.hamburger-menu a:hover,.hamburger-menu button:hover{background:var(--accent-muted);color:var(--accent)}
.hamburger-menu a.active{background:var(--accent-muted);color:var(--accent)}
.hamburger-menu i{width:1.2rem;text-align:center;color:var(--text-muted)}
.hamburger-menu a:hover i,.hamburger-menu button:hover i,.hamburger-menu a.active i{color:var(--accent)}
.desktop-only{display:flex}
.header-spacer{flex:1}
.theme-toggle{width:40px;height:40px;background:transparent;border:2px solid var(--border);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:1.2rem;transition:all .3s ease}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.1)}
.workspace{display:grid;grid-template-columns:1fr 300px;gap:1.25rem;align-items:start}
.col-left{display:flex;flex-direction:column;gap:1.25rem}
.col-right{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}
.col-right::-webkit-scrollbar{width:4px}.col-right::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.panel{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--panel-shadow)}
.panel-header{padding:.65rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.78rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:.4rem}
.panel-header .spacer{flex:1}
.panel-header .reset-btn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer;font-size:.65rem;font-family:inherit;font-weight:600;padding:2px 8px;transition:var(--tr);text-transform:uppercase;letter-spacing:.03em}
.panel-header .reset-btn:hover{border-color:var(--danger);color:var(--danger)}
.panel-body{padding:1rem}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tab-btn{flex:1;padding:.65rem .75rem;background:none;border:none;color:var(--text-muted);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--tr);position:relative;display:flex;align-items:center;justify-content:center;gap:.3rem}
.tab-btn:hover{color:var(--text-secondary)}.tab-btn.active{color:var(--accent-text)}
.tab-btn.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.tab-panel{display:none}.tab-panel.active{display:block}
.icon-search-wrapper{position:relative;margin-bottom:.5rem}
.icon-search-wrapper .search-icon{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.78rem;pointer-events:none}
.icon-search{width:100%;padding:.5rem .6rem .5rem 2rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-primary);font-family:inherit;font-size:.78rem;outline:none;transition:var(--tr)}
.icon-search:focus{border-color:var(--accent)}.icon-search::placeholder{color:var(--text-muted)}
.search-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:2px 4px;border-radius:3px;display:none;transition:var(--tr)}.search-clear.show{display:block}.search-clear:hover{color:var(--danger)}
.style-filters{display:flex;gap:.2rem;margin-bottom:.5rem;flex-wrap:wrap;align-items:center}
.pill-btn{padding:.22rem .5rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:99px;color:var(--text-muted);font-family:inherit;font-size:.65rem;font-weight:600;cursor:pointer;transition:var(--tr)}
.pill-btn:hover{border-color:var(--border-hover);color:var(--text-secondary)}
.pill-btn.active{background:var(--accent-muted);border-color:var(--accent);color:var(--accent-text)}
.pill-btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.pill-btn.accent:hover{border-color:var(--accent);color:var(--accent)}
.filters-spacer{flex:1}
.icon-count{font-size:.65rem;color:var(--text-muted);font-family:var(--f-mono);white-space:nowrap;margin-right:.25rem}
.icon-grid-scroll{height:220px;min-height:120px;max-height:600px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-inset);resize:vertical}
.icon-grid-scroll::-webkit-scrollbar{width:5px}.icon-grid-scroll::-webkit-scrollbar-track{background:transparent}.icon-grid-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.icon-grid{display:grid;gap:2px;padding:3px}
.icon-grid.zoom-1{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}.icon-grid.zoom-2{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.icon-grid.zoom-3{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.icon-grid.zoom-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.icon-grid.zoom-5{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.icon-grid-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.35rem .15rem;background:none;border:2px solid transparent;border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);color:var(--text-secondary);min-height:56px;font-family:inherit}
.icon-grid-item:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.icon-grid-item.selected{background:var(--accent-muted);border-color:var(--accent);color:var(--accent-text)}
.icon-grid-item.disabled{opacity:.3;pointer-events:none;cursor:default}
.icon-grid-item svg{width:1.15rem;height:1.15rem;margin-bottom:.15rem;fill:currentColor}
.zoom-2 .icon-grid-item svg{width:1.5rem;height:1.5rem}.zoom-3 .icon-grid-item svg{width:2rem;height:2rem}.zoom-4 .icon-grid-item svg{width:2.75rem;height:2.75rem}.zoom-5 .icon-grid-item svg{width:3.75rem;height:3.75rem}
.icon-grid-item .icon-label{font-size:.5rem;text-align:center;line-height:1.15;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;color:var(--text-muted)}
.zoom-2 .icon-grid-item .icon-label{font-size:.6rem}.zoom-3 .icon-grid-item .icon-label{font-size:.7rem}.zoom-4 .icon-grid-item .icon-label{font-size:.85rem}.zoom-5 .icon-grid-item .icon-label{font-size:1rem}
.icon-grid-item.selected .icon-label{color:var(--accent-text)}
.icon-grid-sentinel{height:1px;grid-column:1/-1}
.selected-layers{margin-top:.65rem;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.selected-layers-header{padding:.4rem .65rem;background:var(--bg-tertiary);font-size:.7rem;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:.3rem}
.selected-layers-header .spacer{flex:1}
.swap-btn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer;font-size:.6rem;font-family:inherit;font-weight:600;padding:1px 6px;transition:var(--tr)}.swap-btn:hover{border-color:var(--accent);color:var(--accent)}
.layer-block{border-top:1px solid var(--border)}
.layer-header{padding:.45rem .65rem;display:flex;align-items:center;gap:.4rem;background:var(--bg-secondary)}
.layer-icon-chip{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--accent-muted);border-radius:4px;color:var(--accent-text);font-size:.7rem;flex-shrink:0;overflow:hidden}
.layer-icon-chip svg{width:16px;height:16px;fill:currentColor}
.layer-icon-chip img{width:18px;height:18px;object-fit:contain}
.layer-name{flex:1;font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-badge{font-size:.58rem;color:var(--text-muted);background:var(--bg-tertiary);padding:1px 5px;border-radius:99px;font-family:var(--f-mono)}
.layer-remove{width:24px;height:24px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0}
.layer-remove:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.layer-controls{padding:.5rem .65rem;background:var(--bg-elevated);display:flex;flex-direction:column;gap:.3rem}
.lct{font-size:.58rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding-top:.1rem}
.color-fill-row{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;font-size:.62rem}
.toggle-label-inline{font-size:.58rem;color:var(--text-muted);font-weight:600;margin-right:2px}
.hex-input{font-family:var(--f-mono);font-size:.62rem;color:var(--text-secondary);background:var(--bg-inset);border:1px solid transparent;border-radius:3px;padding:1px 4px;width:62px;outline:none;transition:var(--tr)}
.hex-input:hover{border-color:var(--border)}.hex-input:focus{border-color:var(--accent);color:var(--text-primary)}
.color-fill-row .grad-arrow{color:var(--text-muted);font-size:.65rem;display:none}
.color-fill-row .grad-arrow.show{display:inline}
.color-fill-row .grad-c2{display:none;align-items:center;gap:.3rem}
.color-fill-row .grad-c2.show{display:flex}
.color-fill-row select{padding:.15rem .3rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-primary);font-family:inherit;font-size:.6rem;outline:none;cursor:pointer}
.ctrl-row{display:grid;grid-template-columns:42px 1fr 46px;gap:.25rem;align-items:center}
.ctrl-lbl{font-size:.62rem;color:var(--text-muted);font-weight:600}
.ctrl-row input[type="range"]{width:100%;height:3px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.ctrl-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}
.ev{font-family:var(--f-mono);font-size:.6rem;color:var(--text-secondary);text-align:right;background:var(--bg-inset);border:1px solid transparent;border-radius:3px;padding:1px 3px;width:46px;outline:none;transition:var(--tr);cursor:text}
.ev:hover{border-color:var(--border)}.ev:focus{border-color:var(--accent);color:var(--text-primary)}
.toggle-row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.knockout-toggle{position:relative;width:30px;height:16px;background:var(--border);border-radius:8px;cursor:pointer;transition:var(--tr);flex-shrink:0;border:none}
.knockout-toggle::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:var(--tr)}
.knockout-toggle.active{background:var(--accent)}.knockout-toggle.active::after{left:16px}
.toggle-label{font-size:.62rem;color:var(--text-muted);font-weight:600}
.upload-zone{border:2px dashed var(--border);border-radius:var(--r-md);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:var(--tr);background:var(--bg-inset)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:var(--accent-muted)}
.upload-zone i{font-size:1.3rem;color:var(--text-muted);margin-bottom:.35rem}.upload-zone p{color:var(--text-secondary);font-size:.78rem}
.upload-zone .upload-hint{font-size:.68rem;color:var(--text-muted);margin-top:.15rem}
/* BGR flush corners */
.bgr-section{margin-top:.5rem}
.bgr-toggle-bar{display:flex;align-items:center;gap:.35rem;padding:.4rem .65rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer}
.bgr-toggle-bar.open{border-radius:var(--r-md) var(--r-md) 0 0}
.bgr-dropdown{display:none;padding:.5rem .65rem;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);background:var(--bg-elevated);flex-direction:column;gap:.4rem}
.bgr-dropdown.show{display:flex}
.bgr-help{font-size:.62rem;color:var(--text-muted)}
.bgr-color-row{display:flex;align-items:center;gap:.4rem}
.bgr-swatch{width:28px;height:28px;border:2px solid var(--border);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.7rem;transition:var(--tr);background:#fff}
.bgr-swatch:hover{border-color:var(--accent)}.bgr-swatch.picking{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-muted)}
.bgr-btns{display:flex;gap:.3rem}
.bgr-btns button{padding:.25rem .6rem;font-family:inherit;font-size:.65rem;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:var(--tr)}
.bgr-undo{background:var(--bg-inset);color:var(--text-secondary);border:1px solid var(--border)}.bgr-undo:hover{border-color:var(--danger);color:var(--danger)}
/* Eyedropper cursor using data URI */
body.eyedropper-mode #livePreview{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M20.71 5.63l-2.34-2.34a1 1 0 0 0-1.41 0l-3.54 3.54-1.41-1.41-1.41 1.41 1.06 1.06-6.24 6.24a2 2 0 0 0-.59 1.42V18h2.45a2 2 0 0 0 1.42-.59l6.24-6.24 1.06 1.06 1.41-1.41-1.41-1.41 3.54-3.54a1 1 0 0 0 0-1.24z'/%3E%3C/svg%3E") 2 22, pointer !important}
.controls-divider{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--border)}
.control-section{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:.65rem}.control-section:last-child{margin-bottom:0}
.control-section-header{padding:.45rem .65rem;background:var(--bg-tertiary);font-size:.68rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:.3rem}
.control-section-body{padding:.65rem}
.control-group{margin-bottom:.6rem}.control-group:last-child{margin-bottom:0}
.control-label{display:block;font-size:.68rem;font-weight:600;color:var(--text-secondary);margin-bottom:.25rem}
.format-selector{display:flex;gap:.5rem;margin-bottom:.75rem}
.format-option{flex:1;position:relative;cursor:pointer}
.format-option input[type="radio"]{position:absolute;opacity:0;width:0;height:0}
.format-label{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.5rem;border:2px solid var(--border);border-radius:var(--r-md);background:var(--bg-elevated);transition:var(--tr);font-size:.72rem;font-weight:600;color:var(--text-secondary);flex:1;min-width:0;flex-wrap:wrap}
.format-option input:checked + .format-label{border-color:var(--accent);background:var(--accent-muted);color:var(--accent)}
.format-option:hover .format-label{border-color:var(--accent-light)}
.experimental-note{font-size:.58rem;opacity:.7;font-weight:600;font-style:normal;display:block;width:100%;text-align:center;margin-top:2px}
#pngSizesSection{transition:all 0.3s ease}
#pngSizesSection.hidden{display:none}
.corner-mode-row{display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem}
.corner-individual{display:none;gap:.25rem}.corner-individual.show{display:flex;flex-direction:column}
.corner-row{display:grid;grid-template-columns:28px 1fr 46px;gap:.25rem;align-items:center}
.corner-row-label{display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--text-muted);font-weight:600}
.corner-icon{width:14px;height:14px;fill:var(--text-muted)}
.corner-row input[type="range"]{width:100%;height:3px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.corner-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}
.slider-control{display:flex;align-items:center;gap:.4rem}
.slider-control input[type="range"]{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}
.slider-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 2px var(--bg-secondary)}
.text-input{width:100%;padding:.45rem .6rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-primary);font-family:var(--f-mono);font-size:.78rem;outline:none;transition:var(--tr)}
.text-input:focus{border-color:var(--accent)}.text-input::placeholder{color:var(--text-muted)}
.help-text{font-size:.65rem;color:var(--text-muted);margin-top:.15rem}
.confirm-btn{width:100%;padding:.6rem;background:var(--accent);color:#fff;border:none;border-radius:var(--r-md);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:.65rem}.confirm-btn:hover{background:var(--accent-hover)}
.preview-area{display:flex;flex-direction:column;align-items:center;padding:1rem}
.preview-canvas-wrap{position:relative;width:160px;height:160px;background:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%) 0 0/14px 14px;border-radius:0;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:var(--tr)}
.preview-canvas-wrap:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-muted)}
.preview-canvas-wrap canvas{width:100%;height:100%;display:block}
.preview-size-label{margin-top:.45rem;font-size:.65rem;color:var(--text-muted);font-family:var(--f-mono)}
.sizes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:.35rem}
.size-chip{display:flex;align-items:center;gap:.3rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);background:var(--bg-inset);user-select:none;font-size:.72rem}
.size-chip:hover{border-color:var(--border-hover)}.size-chip.checked{border-color:var(--accent);background:var(--accent-muted);color:var(--accent-text)}
.size-chip input[type="checkbox"]{width:12px;height:12px;accent-color:var(--accent);cursor:pointer}
.size-actions{display:flex;gap:.3rem;margin-bottom:.5rem}
.size-action-btn{padding:.22rem .5rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-secondary);font-family:inherit;font-size:.65rem;font-weight:600;cursor:pointer;transition:var(--tr)}
.size-action-btn:hover{border-color:var(--accent);color:var(--accent-text)}
.queue-grid{display:flex;flex-direction:column;gap:.4rem}
.queue-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:.5rem;position:relative;display:flex;gap:.5rem;align-items:center}
.queue-item canvas{width:44px;height:44px;border-radius:0;flex-shrink:0;background:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%) 0 0/5px 5px}
.queue-item-info{flex:1;min-width:0}.queue-item-name{font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-item-meta{font-size:.6rem;color:var(--text-muted);font-family:var(--f-mono)}
.queue-item .queue-edit{position:absolute;top:4px;right:26px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-muted);width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:.6rem;display:flex;align-items:center;justify-content:center;transition:var(--tr)}.queue-item .queue-edit:hover{color:var(--accent);border-color:var(--accent)}
.queue-item .queue-remove{position:absolute;top:4px;right:4px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-muted);width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:.65rem;display:flex;align-items:center;justify-content:center;transition:var(--tr)}.queue-item .queue-remove:hover{color:var(--danger);border-color:var(--danger)}
.queue-format-badge{display:inline-block;background:var(--accent-muted);color:var(--accent-text);padding:2px 6px;border-radius:4px;font-size:.65rem;font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.02em}
.queue-svg-badge{background:var(--bg-tertiary);color:var(--text-secondary)}
.queue-empty{text-align:center;padding:1.25rem;color:var(--text-muted);font-size:.75rem}
.queue-empty i{font-size:1.3rem;display:block;margin-bottom:.35rem;opacity:.3}
.generate-bar{display:flex;gap:.5rem;padding:.65rem 0 0}
.btn-generate{flex:1;padding:.65rem 1.25rem;background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;border:none;border-radius:var(--r-md);font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;justify-content:center;gap:.35rem;box-shadow:0 2px 10px rgba(37,99,235,.2)}.btn-generate:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,99,235,.3)}.btn-generate:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-clear{padding:.65rem .85rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-secondary);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--tr);display:none;align-items:center;gap:.3rem}.btn-clear:hover{border-color:var(--danger);color:var(--danger)}.btn-clear.show{display:inline-flex}
/* Pickr: ensure popup stays in view */
.pickr .pcr-button{width:24px!important;height:24px!important;border-radius:var(--r-sm)!important;border:1px solid var(--border)!important;overflow:hidden}
.pcr-app{background:var(--bg-secondary)!important;border:1px solid var(--border)!important;border-radius:var(--r-md)!important;box-shadow:var(--shadow-lg)!important;z-index:9999!important;position:fixed!important}
.pcr-app .pcr-interaction input{background:var(--bg-inset)!important;border:1px solid var(--border)!important;color:var(--text-primary)!important;border-radius:var(--r-sm)!important;font-family:var(--f-mono)!important}
.pcr-app .pcr-interaction .pcr-result{color:var(--text-primary)!important}
/* Mobile: preview panel pinned to bottom of viewport */
@media(max-width:900px){
.workspace{grid-template-columns:1fr}
.col-right{position:static;max-height:none;overflow:visible}
.app{padding:.75rem}.app-header h1{font-size:1.05rem}
body.mobile-preview{padding-bottom:280px}
#previewPanel.mobile-fixed{position:fixed;bottom:0;left:0;right:0;z-index:200;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.18);border:none;border-top:2px solid var(--border)}
}
@media(max-width:600px){
.icon-grid.zoom-1{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
.sizes-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}
.generate-bar{flex-direction:column}.btn-generate,.btn-clear{justify-content:center;width:100%}
}
.hidden{display:none!important}
.gen-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.gen-modal-box{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem 2.5rem;text-align:center;box-shadow:var(--shadow-lg);max-width:320px}
.gen-modal-box i{font-size:2rem;color:var(--accent);margin-bottom:.75rem;display:block}
.gen-modal-box h3{font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.gen-modal-box p{font-size:.72rem;color:var(--text-muted)}
.gen-modal-progress{width:100%;height:4px;background:var(--bg-inset);border-radius:2px;margin-top:.75rem;overflow:hidden}
.gen-modal-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#7c3aed);border-radius:2px;transition:width .2s;width:0%}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
/* Trial badge and sign out button */
.trial-badge{position:relative;padding:.4rem .75rem;border-radius:15px;font-size:.72rem;font-weight:600;background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;margin-right:.5rem;cursor:pointer;transition:var(--tr)}
.trial-badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(118,75,162,0.3)}
.trial-badge-popup{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-md);padding:.65rem .85rem;box-shadow:var(--shadow-lg);white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-10px);transition:all 0.2s ease;z-index:100}
.trial-badge:hover .trial-badge-popup{opacity:1;pointer-events:auto;transform:translateY(0)}
.trial-subscribe-btn{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:var(--r-sm);font-size:.75rem;font-weight:600;cursor:pointer;transition:var(--tr);display:flex;align-items:center;gap:.35rem}
.trial-subscribe-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-signout{background:transparent;border:2px solid var(--border);width:40px;height:40px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:1.2rem;transition:all .3s ease;margin-left:.5rem}
.btn-signout:hover{border-color:var(--danger);color:var(--danger);transform:scale(1.1)}
/* Presets Bar */
.presets-bar{display:flex;align-items:center;justify-content:space-between;padding:.65rem .75rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);margin:.65rem 0}
.presets-label{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--text-secondary)}
.presets-label i{color:var(--accent)}
.presets-actions{display:flex;gap:.4rem}
.preset-btn{padding:.4rem .75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-secondary);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:.3rem}
.preset-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}
.preset-btn i{font-size:.7rem}
/* Preset Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px)}
.modal-overlay.active{display:flex}
.preset-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-lg);width:90%;max-width:450px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.preset-modal-large{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-lg);width:90%;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:.5rem;margin:0}
.modal-header i{color:var(--accent)}
.preset-import-btn{background:transparent;border:1px solid var(--border);color:var(--text-secondary);padding:.5rem 1rem;border-radius:var(--r-md);cursor:pointer;font-size:.85rem;font-family:inherit;font-weight:500;transition:var(--tr);margin-right:auto;margin-left:1rem;display:inline-flex;align-items:center;gap:.4rem}
.preset-import-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}
.modal-close{background:transparent;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:.25rem;line-height:1;transition:var(--tr)}
.modal-close:hover{color:var(--danger)}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;gap:.5rem;justify-content:flex-end}
.btn-modal-primary{padding:.65rem 1.25rem;background:linear-gradient(135deg,var(--accent),#7c3aed);color:#fff;border:none;border-radius:var(--r-md);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:.4rem}
.btn-modal-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.btn-modal-secondary{padding:.65rem 1.25rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-secondary);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--tr)}
.btn-modal-secondary:hover{border-color:var(--accent);color:var(--accent)}
.preset-thumbnail-preview{width:120px;height:120px;margin:0 auto 1.25rem;background:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%) 0 0/10px 10px;border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden}
.preset-thumbnail-preview canvas{width:100%;height:100%;display:block}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.4rem;color:var(--text-secondary)}
.form-group input[type="text"],.form-group textarea{width:100%;padding:.65rem;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-primary);font-family:inherit;font-size:.85rem;transition:var(--tr);resize:vertical}
.form-group input[type="text"]:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-secondary)}
.preset-error{background:#fee;color:#c33;padding:.65rem;border-radius:var(--r-sm);font-size:.78rem;display:none;margin-top:1rem}
.preset-error.active{display:block}
.preset-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}
.preset-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--text-muted)}
.preset-empty i{font-size:2.5rem;display:block;margin-bottom:.75rem;opacity:.3}
.preset-empty p{font-size:.85rem;margin-bottom:.25rem}
.preset-empty-hint{font-size:.72rem;opacity:.7}
.preset-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem;cursor:pointer;transition:var(--tr);position:relative}
.preset-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.preset-thumbnail{width:100%;aspect-ratio:1;background:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%) 0 0/8px 8px;border-radius:var(--r-sm);margin-bottom:.5rem;overflow:hidden}
.preset-thumbnail canvas{width:100%;height:100%;display:block}
.preset-info{font-size:.75rem}
.preset-name{font-weight:700;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.preset-date{color:var(--text-muted);font-size:.68rem;font-family:var(--f-mono);margin-bottom:.25rem}
.preset-notes{color:var(--text-secondary);font-size:.7rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--border)}
.preset-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:var(--tr)}
.preset-card:hover .preset-actions{opacity:1}
.preset-share,.preset-delete{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.preset-share:hover{color:var(--accent);border-color:var(--accent);background:var(--bg-elevated)}
.preset-delete:hover{color:var(--danger);border-color:var(--danger);background:var(--bg-elevated)}

/* Custom Notifications */
.custom-notification{position:fixed;top:20px;right:20px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem 1rem;display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-lg);z-index:10000;transform:translateX(400px);opacity:0;transition:all 0.3s ease;min-width:250px;max-width:400px}
.custom-notification.show{transform:translateX(0);opacity:1}
.custom-notification i{font-size:1.2rem;flex-shrink:0}
.custom-notification.success{border-color:var(--success);color:var(--success)}
.custom-notification.error{border-color:var(--danger);color:var(--danger)}
.custom-notification.info{border-color:var(--accent);color:var(--accent)}
.custom-notification span{color:var(--text-primary);font-size:.85rem}

/* Confirm Modal */
.confirm-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity 0.3s ease}
.confirm-modal-overlay.show{opacity:1}
.confirm-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;max-width:400px;width:90%;box-shadow:var(--shadow-lg);transform:scale(0.9);transition:transform 0.3s ease}
.confirm-modal-overlay.show .confirm-modal{transform:scale(1)}
.confirm-icon{text-align:center;font-size:3rem;color:var(--accent);margin-bottom:1rem}
.confirm-message{text-align:center;font-size:1rem;color:var(--text-primary);margin-bottom:1.5rem;line-height:1.4}
.confirm-actions{display:flex;gap:.75rem;justify-content:center}
.confirm-btn{padding:.65rem 1.5rem;border-radius:var(--r-md);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--tr);border:none}
.confirm-btn.cancel{background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border)}
.confirm-btn.cancel:hover{background:var(--bg-inset);border-color:var(--border-hover)}
.confirm-btn.confirm{background:var(--accent);color:#fff}
.confirm-btn.confirm:hover{background:var(--accent-hover)}

/* Large Preview Modal */
.large-preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9998;opacity:0;transition:opacity 0.3s ease}
.large-preview-modal.show{opacity:1}
.large-preview-content{position:relative;max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center}
.large-preview-close{position:absolute;top:-40px;right:-40px;background:var(--bg-secondary);border:2px solid var(--border);color:var(--text-primary);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:var(--tr);font-weight:300;line-height:1}
.large-preview-close:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
#largePreviewCanvas{max-width:100%;max-height:100%;border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(0,0,0,0.5);background:repeating-conic-gradient(var(--checker-a) 0% 25%,var(--checker-b) 0% 50%) 0 0/12px 12px}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .hamburger { display: flex; }
  .app-header .header-left { gap: 0.75rem; }
  .trial-banner { font-size: 0.75rem; padding: 0.4rem 0.75rem; gap: 0.5rem; }
  .trial-banner .subscribe-btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
}