*{box-sizing:border-box}body{color:#f2f3f5;background:#313338;margin:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{padding:20px 28px}.dock{flex-direction:column;gap:8px;display:flex}main{grid-template-columns:1fr 420px;align-items:start;gap:24px;display:grid}.grid-wrap{flex-direction:column;gap:10px;display:flex;position:sticky;top:20px}.grid{scrollbar-width:none;background:#2b2d31;border-radius:14px;grid-template-columns:repeat(6,1fr);align-content:start;gap:6px;max-height:calc(100vh - 120px);padding:14px;animation:.4s both rise;display:grid;overflow-y:auto}.grid::-webkit-scrollbar{display:none}.cell{aspect-ratio:1;cursor:pointer;background:#2b2d31;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:border-color .2s,background .2s,transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex}.cell:hover{background:#3a3c42;transform:translateY(-2px)scale(1.08);box-shadow:0 6px 16px #00000059}.cell:active{transform:scale(.94)}.cell.selected,.cell.checked{background:#3a3c42;border-color:#fff}.cell.checked:after{content:"✓";color:#1e1f22;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:15px;height:15px;font-size:10px;font-weight:700;display:flex;position:absolute;top:3px;right:3px}.cell{position:relative}.cell img{object-fit:contain;width:100%;height:100%;transition:transform .18s}.cell:hover img{transform:scale(1.1)}.panel{background:linear-gradient(#2f3136,#2b2d31);border:1px solid #3a3c42;border-radius:16px;flex-direction:column;gap:14px;padding:18px;animation:.4s both rise;display:flex;position:sticky;top:20px;box-shadow:0 12px 40px #00000059}.empty{color:#b5bac1;text-align:center;justify-content:center;align-items:center;height:240px;font-size:14px;animation:2.4s ease-in-out infinite pulse;display:flex}.preview{border-radius:10px;justify-content:center;align-items:center;height:150px;display:flex}.preview.checker{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.preview.dark{background:#1e1f22}.preview.light{background:#f2f3f5}.icon-render{justify-content:center;align-items:center;display:flex;position:relative}.icon-render .glow-layer,.icon-render .icon-shape{position:absolute;inset:0}.icon-render .icon-transform{transition:transform .18s;position:absolute;inset:0}.icon-render .icon-shape{-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-render .glow-layer{pointer-events:none}.bg-toggle{gap:6px;display:flex}.bg-toggle button{color:#b5bac1;text-transform:capitalize;cursor:pointer;background:#1e1f22;border:none;border-radius:7px;flex:1;padding:7px;font-size:12px;transition:background .18s,color .18s,transform .12s}.bg-toggle button:hover{color:#f2f3f5;background:#2b2d31}.bg-toggle button:active{transform:scale(.95)}.bg-toggle button.active{color:#1e1f22;background:#fff}.section{background:#232428;border-radius:10px;flex-direction:column;gap:12px;padding:14px;animation:.35s both rise;display:flex}.accordion{gap:0;padding:0;overflow:hidden}.section-row{grid-template-columns:1fr 1fr;align-items:start;gap:12px;display:grid}.section-row .accordion{animation:.35s both rise}.section-row .accordion-head{padding:12px}.section-row .accordion-body{padding:0 12px 12px}.section-row .modes button{padding:5px 8px;font-size:11px}.section-row .hex{width:100%;min-width:0}.section-row .color-input{flex:2;min-width:0}.accordion-head{align-items:center;gap:10px;padding:12px 14px;display:flex}.accordion-toggle{cursor:pointer;min-width:0;color:inherit;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:0;display:flex}.chevron{color:#949ba4;flex-shrink:0;transition:transform .2s}.accordion.open .chevron{transform:rotate(90deg)}.accordion-hint{color:#6d7178;white-space:nowrap;text-overflow:ellipsis;margin-left:auto;font-size:12px;overflow:hidden}.accordion-body{flex-direction:column;gap:12px;padding:0 14px 14px;animation:.25s both rise;display:flex}.muted-hint{color:#6d7178;font-size:12px}.section-title{text-transform:uppercase;letter-spacing:.04em;color:#949ba4;font-size:11px;font-weight:700}.row{align-items:center;gap:10px;display:flex}.row .section-title{flex:1}.label{color:#dbdee1;flex:1;font-size:13px}.modes{gap:6px;display:flex}.modes button{color:#b5bac1;cursor:pointer;background:#1e1f22;border:none;border-radius:6px;padding:6px 12px;font-size:12px;transition:background .18s,color .18s,transform .12s}.modes button:hover{color:#f2f3f5;background:#2b2d31}.modes button:active{transform:scale(.95)}.modes button.active{color:#1e1f22;background:#fff}.color-input{align-items:center;gap:6px;display:flex}input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:6px;width:38px;height:30px;padding:0}.hex{color:#f2f3f5;background:#1e1f22;border:1px solid #1e1f22;border-radius:6px;width:84px;padding:6px 8px;font-family:monospace;font-size:12px}input[type=range]{accent-color:#fff;cursor:pointer;flex:2;height:5px}.mini-reset{color:#b5bac1;cursor:pointer;background:#1e1f22;border:none;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;transition:background .18s,color .18s,transform .12s}.mini-reset:hover{color:#1e1f22;background:#fff}.mini-reset:active{transform:scale(.94)}.value{color:#b5bac1;text-align:right;width:34px;font-size:12px}.swatches{flex-wrap:wrap;gap:7px;display:flex}.swatch{cursor:pointer;border:2px solid #1e1f22;border-radius:6px;width:24px;height:24px;padding:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}.swatch:hover{transform:scale(1.18);box-shadow:0 3px 8px #0006}.swatch:active{transform:scale(.9)}.presets{flex-wrap:wrap;gap:8px;display:flex}.preset{cursor:pointer;border:2px solid #1e1f22;border-radius:8px;width:34px;height:34px;padding:0;transition:border-color .15s,transform .15s cubic-bezier(.34,1.56,.64,1);position:relative}.preset:hover{border-color:#fff;transform:scale(1.12)}.preset:active{transform:scale(.92)}.preset-glow{border-radius:4px;position:absolute;inset:4px}.switch{width:40px;height:22px;position:relative}.switch input{opacity:0;width:0;height:0}.switch .slider{cursor:pointer;background:#1e1f22;border-radius:22px;transition:background .15s;position:absolute;inset:0}.switch .slider:before{content:"";background:#b5bac1;border-radius:50%;width:16px;height:16px;transition:transform .15s,background .15s;position:absolute;top:3px;left:3px}.switch input:checked+.slider{background:#fff}.switch input:checked+.slider:before{background:#1e1f22;transform:translate(18px)}.actions{gap:10px;display:flex}.reset{color:#fff;cursor:pointer;background:#4e5058;border:none;border-radius:8px;flex:1;padding:12px;font-size:14px;font-weight:600;transition:background .18s,transform .12s}.reset:hover{background:#6d6f78}.reset:active{transform:scale(.97)}.download{color:#1e1f22;cursor:pointer;background:#fff;border:none;border-radius:8px;flex:2;padding:12px;font-size:15px;font-weight:600;transition:transform .12s,box-shadow .2s,background .2s}.download:hover{background:#e3e5e8;transform:translateY(-1px);box-shadow:0 6px 20px #ffffff40}.download:active{transform:scale(.97)}.download-alt{color:#f2f3f5;cursor:pointer;background:#1e1f22;border:none;border-radius:8px;flex:1;padding:12px;font-size:14px;font-weight:600;transition:background .18s,transform .12s}.download-alt:hover{background:#2b2d31}.download-alt:active{transform:scale(.97)}.upload-icon{color:#b5bac1;cursor:pointer;background:#1e1f22;border:1px dashed #4e5058;border-radius:8px;width:100%;padding:11px;font-size:13px;font-weight:600;transition:background .18s,border-color .18s,color .18s}.upload-icon:hover{color:#f2f3f5;background:#2b2d31;border-color:#fff}.anim-grid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.section-row .anim-grid{grid-template-columns:repeat(2,1fr)}.anim-cell{color:#b5bac1;cursor:pointer;background:#1e1f22;border:none;border-radius:6px;padding:8px 6px;font-size:12px;transition:background .18s,color .18s,transform .12s}.anim-cell:hover{color:#f2f3f5;background:#2b2d31}.anim-cell:active{transform:scale(.95)}.anim-cell.active{color:#1e1f22;background:#fff}.discord{background:#313338;border-radius:8px;gap:12px;padding:12px;display:flex}.discord-avatar{object-fit:cover;border-radius:50%;flex-shrink:0;width:40px;height:40px}.discord-body{min-width:0}.discord-head{align-items:center;gap:6px;display:flex}.discord-name{color:#f23f43;font-size:15px;font-weight:600}.discord-badge{justify-content:center;align-items:center;display:inline-flex}.discord-time{color:#949ba4;font-size:11px}.discord-text{color:#dbdee1;margin-top:2px;font-size:14px;line-height:1.3}.ai-upload{color:#b5bac1;cursor:pointer;background:#1e1f22;border:1px dashed #4e5058;border-radius:8px;width:100%;padding:11px;font-size:13px;font-weight:600;transition:background .18s,border-color .18s,color .18s}.ai-upload:hover:not(:disabled){color:#f2f3f5;background:#2b2d31;border-color:#fff}.ai-upload:disabled{cursor:default;opacity:.7}.ai-error{color:#f23f43;font-size:12px}.ai-colors{flex-direction:column;gap:8px;display:flex}.ai-color{background:#232428;border-radius:8px;align-items:center;gap:10px;padding:6px 8px;display:flex}.ai-swatch{cursor:pointer;border:2px solid #2b2d31;border-radius:8px;flex-shrink:0;width:40px;height:40px;padding:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,border-color .15s;position:relative}.ai-swatch:after{content:"Apply";color:#fff;text-transform:uppercase;opacity:0;background:#0000008c;border-radius:6px;justify-content:center;align-items:center;font-size:9px;font-weight:700;transition:opacity .15s;display:flex;position:absolute;inset:0}.ai-swatch:hover{border-color:#fff;box-shadow:0 3px 8px #0006}.ai-swatch:hover:after{opacity:1}.ai-swatch:active{transform:scale(.92)}.ai-meta{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.ai-label{color:#dbdee1;font-size:13px}.ai-hex{color:#949ba4;text-transform:uppercase;font-family:monospace;font-size:11px}.ai-copy{color:#b5bac1;cursor:pointer;background:#2b2d31;border:none;border-radius:6px;padding:7px 14px;font-size:11px;font-weight:600;transition:background .18s,color .18s,transform .12s}.ai-copy:hover{color:#1e1f22;background:#fff}.ai-copy:active{transform:scale(.94)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.select-bar{background:#232428;border:1px solid #3a3c42;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;animation:.3s both rise;display:flex}.select-bar span{color:#dbdee1;flex:1;font-size:13px;font-weight:600}.bar-download{color:#1e1f22;cursor:pointer;background:#fff;border:none;border-radius:7px;padding:8px 14px;font-size:13px;font-weight:600;transition:transform .12s,box-shadow .2s,background .2s}.bar-download:hover{background:#e3e5e8;transform:translateY(-1px);box-shadow:0 5px 16px #ffffff40}.bar-download:active{transform:scale(.96)}.bar-clear{color:#fff;cursor:pointer;background:#4e5058;border:none;border-radius:7px;padding:8px 12px;font-size:13px;font-weight:600;transition:background .18s,transform .12s}.bar-clear:hover{background:#6d6f78}.bar-clear:active{transform:scale(.96)}.ctx-menu{z-index:50;background:#1e1f22;border:1px solid #3a3c42;border-radius:10px;flex-direction:column;min-width:140px;padding:6px;animation:.15s both rise;display:flex;position:fixed;box-shadow:0 12px 32px #00000080}.ctx-menu button{color:#dbdee1;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px;padding:9px 12px;font-size:13px;transition:background .15s,color .15s}.ctx-menu button:hover{color:#1e1f22;background:#fff}.ai-palettes{flex-direction:column;gap:10px;display:flex}.ai-palette{background:#1e1f22;border-radius:8px;flex-direction:column;gap:8px;padding:10px;animation:.3s both rise;display:flex}.ai-palette-head{align-items:center;gap:10px;display:flex}.ai-palette-swatches{flex:1;gap:4px;display:flex}.ai-dot{border:2px solid #2b2d31;border-radius:6px;width:22px;height:22px}.ai-apply{color:#1e1f22;cursor:pointer;background:#fff;border:none;border-radius:6px;padding:7px 16px;font-size:12px;font-weight:600;transition:transform .12s,box-shadow .2s,background .2s}.ai-apply:hover{background:#e3e5e8;transform:translateY(-1px);box-shadow:0 4px 12px #ffffff40}.ai-apply:active{transform:scale(.95)}.ai-palette-list{flex-direction:column;gap:6px;display:flex}.ai-swatch-static{border:2px solid #2b2d31;border-radius:8px;flex-shrink:0;width:32px;height:32px}@media (width<=900px){.app{padding:14px}main{grid-template-columns:1fr;gap:16px}.panel{order:2;position:static}.grid-wrap{order:1;position:static}.grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-height:340px}}@media (width<=480px){.app{padding:10px}.grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:5px;padding:10px}.select-bar{flex-wrap:wrap}.select-bar span{flex-basis:100%}}