:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-primary:#090d16;--bg-surface:#121826bf;--bg-surface-elevated:#1c2438d9;--border-subtle:#ffffff14;--border-focus:#6366f180;--accent-primary:#6366f1;--accent-primary-hover:#4f46e5;--accent-secondary:#ec4899;--accent-glow:#6366f140;--accent-gold:#f59e0b;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--font-family:"Outfit", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--radius-lg:18px;--radius-md:12px;--radius-sm:8px;--radius-full:9999px;--shadow-lg:0 12px 32px -4px #00000080;--shadow-glow:0 0 20px #6366f159}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-primary);width:100%;height:100%;color:var(--text-main);font-family:var(--font-family);position:fixed;overflow:hidden}.app-container{background:radial-gradient(circle at 50% 10%,#161f36 0%,#090d16 100%);flex-direction:column;width:100vw;height:100dvh;display:flex;position:relative}.header-bar{background:var(--bg-surface);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);z-index:20;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.header-left,.header-right{align-items:center;gap:12px;display:flex}.artwork-meta{flex-direction:column;display:flex}.artwork-title{letter-spacing:-.01em;color:var(--text-main);white-space:nowrap;font-size:16px;font-weight:700}.artwork-artist{color:var(--text-muted);font-size:11px;font-weight:500}.header-center{flex:1;justify-content:center;max-width:240px;display:flex}.progress-pill{border:1px solid var(--border-subtle);border-radius:var(--radius-full);background:#00000059;align-items:center;gap:10px;width:100%;padding:6px 14px;transition:all .25s;display:flex}.progress-pill.completed{cursor:pointer;background:#f59e0b1f;border-color:#f59e0b99;box-shadow:0 0 14px #f59e0b59}.progress-pill.completed:hover{background:#f59e0b33;transform:translateY(-1px);box-shadow:0 0 18px #f59e0b80}.progress-track{border-radius:var(--radius-full);background:#ffffff1a;flex:1;height:6px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);height:100%;transition:width .3s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px #6366f199}.progress-text{color:var(--text-main);text-align:right;font-variant-numeric:tabular-nums;min-width:38px;font-size:12px;font-weight:700}.btn-icon{border-radius:var(--radius-md);border:1px solid var(--border-subtle);height:38px;color:var(--text-main);cursor:pointer;background:#ffffff0a;align-items:center;gap:6px;padding:0 12px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex;position:relative}.btn-icon:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.btn-icon:active{transform:translateY(1px)}.btn-icon.active{border-color:var(--accent-primary);color:#a5b4fc;background:#6366f133}#btn-mode-erase.active{color:#fca5a5;background:#ef444433;border-color:#ef4444;box-shadow:0 0 14px #ef444459}#btn-clear-canvas:hover{color:#fca5a5;background:#ef444426;border-color:#ef444466}#btn-hint{transition:all .25s}#btn-hint.active{color:#fef3c7;background:linear-gradient(135deg,#f59e0b47,#ea580c47);border-color:#f59e0b;box-shadow:0 0 16px #f59e0b8c}#btn-hint.active .badge{color:#1e1b4b;background:#f59e0b;box-shadow:0 0 8px #f59e0b}.btn-accent{background:linear-gradient(135deg,#ec489926,#a855f726);border-color:#ec48994d}.btn-accent:hover{border-color:var(--accent-secondary);background:linear-gradient(135deg,#ec489940,#a855f740)}.btn-glow{border-color:var(--border-focus);background:linear-gradient(135deg,#6366f133,#a855f733);box-shadow:0 0 12px #6366f140}.badge{color:var(--text-main);border-radius:var(--radius-full);background:#ffffff26;justify-content:center;align-items:center;min-width:22px;height:18px;padding:0 5px;font-size:10px;font-weight:800;transition:all .25s;display:inline-flex}.canvas-viewport{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:grab;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-viewport:active{cursor:grabbing}#game-canvas{width:100%;height:100%;image-rendering:-webkit-optimize-contrast;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:block}.floating-controls{z-index:10;flex-direction:column;gap:8px;display:flex;position:absolute;top:20px;right:20px}.btn-float{border-radius:var(--radius-md);background:var(--bg-surface-elevated);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);width:38px;height:38px;color:var(--text-main);cursor:pointer;box-shadow:var(--shadow-lg);justify-content:center;align-items:center;font-size:18px;font-weight:600;transition:all .2s;display:flex}.btn-float:hover{background:#ffffff26;transform:scale(1.05)}.btn-float:active{transform:scale(.95)}.palette-container{background:var(--bg-surface);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--border-subtle);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20}.palette-scroll-wrap{scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;padding:4px 0;overflow:auto hidden}.palette-scroll-wrap::-webkit-scrollbar{height:4px}.palette-scroll-wrap::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.palette-track{align-items:center;gap:14px;width:max-content;margin:0 auto;padding:2px 8px;display:flex}.palette-item{cursor:pointer;flex-direction:column;align-items:center;gap:4px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative}.palette-item:hover{transform:translateY(-3px)}.swatch-circle{border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .25s;display:flex;position:relative;box-shadow:0 4px 12px #00000059}.swatch-number{text-shadow:0 1px 3px #000c,0 0 2px #00000080;z-index:2;font-size:15px;font-weight:800}.palette-item.active .swatch-circle{box-shadow:0 0 0 3px var(--accent-primary), 0 8px 20px #6366f180;border-color:#fff;transform:scale(1.16)}.palette-item.completed .swatch-circle{opacity:.7;filter:grayscale(.2)}.palette-item.completed .swatch-number{display:none}.palette-item.completed .swatch-check{color:#10b981;filter:drop-shadow(0 2px 4px #0009);width:22px;height:22px;display:block}.swatch-check{display:none}.swatch-count{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:10px;font-weight:700}.palette-item.active .swatch-count{color:#a5b4fc;font-weight:800}.modal-overlay{-webkit-backdrop-filter:blur(14px);z-index:100;opacity:1;background:#04060cd1;justify-content:center;align-items:center;padding:20px;transition:opacity .25s;display:flex;position:fixed;inset:0}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#111827;flex-direction:column;gap:20px;width:100%;max-width:1080px;max-height:90vh;padding:26px 28px;display:flex;overflow-y:auto;box-shadow:0 25px 60px -12px #000c,0 0 40px #6366f11f}.modal-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.modal-header-titles{flex-direction:column;gap:4px;display:flex}.modal-header-badge{text-transform:uppercase;letter-spacing:.08em;color:#c084fc;align-items:center;gap:6px;font-size:11px;font-weight:700;display:inline-flex}.modal-header h2{color:var(--text-main);letter-spacing:-.02em;margin:0;font-size:24px;font-weight:800}.modal-header-subtitle{color:var(--text-muted);margin:0;font-size:13.5px}.btn-close{border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-full);background:#ffffff0f;justify-content:center;align-items:center;width:36px;height:36px;font-size:22px;line-height:1;transition:all .2s;display:flex}.btn-close:hover{color:var(--text-main);background:#ffffff1f;border-color:#fff3}.tool-mode-group{border:1px solid var(--border-subtle);border-radius:var(--radius-full);background:#ffffff0d;align-items:center;gap:2px;padding:2px;display:flex}.tool-mode-group .btn-icon{border-radius:var(--radius-full);background:0 0;border:none;padding:6px 12px;font-size:12px}.tool-mode-group .btn-icon.active{border:1px solid var(--accent-primary);color:#c7d2fe;background:linear-gradient(135deg,#6366f14d,#a855f74d);box-shadow:0 0 10px #6366f159}.btn-diamond-zoom{background:linear-gradient(135deg,#6366f140,#ec489940);border-color:#a855f766}.btn-diamond-zoom:hover{background:linear-gradient(135deg,#6366f173,#ec489973);box-shadow:0 0 12px #a855f780}.gallery-tabs{border-bottom:1px solid var(--border-subtle);scrollbar-width:none;gap:10px;padding-bottom:14px;display:flex}.gallery-tabs::-webkit-scrollbar{display:none}.gallery-tab{text-align:center;border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-full);cursor:pointer;white-space:nowrap;background:#ffffff0a;flex:1;padding:10px 14px;font-size:13px;font-weight:700;transition:all .2s}.gallery-tab:hover{color:var(--text-main);background:#ffffff14}.gallery-tab.active{color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);border-color:#818cf8;box-shadow:0 4px 14px #6366f166}.artwork-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.artwork-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;background:#151d30;flex-direction:column;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;overflow:hidden}.artwork-card:hover{border-color:var(--accent-primary);transform:translateY(-4px);box-shadow:0 12px 28px #00000080,0 0 16px #6366f14d}.artwork-thumb-wrap{background:#0b0f19;justify-content:center;align-items:center;width:100%;height:175px;display:flex;position:relative;overflow:hidden}.artwork-thumb-canvas{object-fit:contain;width:100%;height:100%;transition:transform .3s}.artwork-card:hover .artwork-thumb-canvas{transform:scale(1.05)}.artwork-badge{border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);z-index:2;padding:4px 10px;font-size:11px;font-weight:700;position:absolute;top:10px;left:10px;box-shadow:0 2px 8px #00000080}.artwork-badge.diamond{color:#fff;background:linear-gradient(135deg,#4f46e5e6,#d946efe6);border:1px solid #fff6}.artwork-badge.classic{color:#94a3b8;background:#0f172ad9;border:1px solid #fff3}.artwork-info{flex-direction:column;flex:1;gap:4px;padding:14px;display:flex}.artwork-info h4{color:var(--text-main);margin-bottom:2px;font-size:15px;font-weight:700}.artwork-artist-tag{color:#818cf8;font-size:11px;font-weight:600}.artwork-info p{color:var(--text-muted);margin-top:4px;font-size:12px;line-height:1.4}.artwork-footer{border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;display:flex}.artwork-pieces-count{color:#cbd5e1;align-items:center;gap:4px;font-size:11px;font-weight:700;display:flex}.btn-play-artwork{color:#a5b4fc;border-radius:var(--radius-sm);background:#6366f126;border:1px solid #6366f14d;padding:4px 10px;font-size:11px;font-weight:700}.artwork-card:hover .btn-play-artwork{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.custom-panel{flex-direction:column;gap:16px;display:flex}.custom-panel.hidden{display:none}.custom-studio-intro h3{color:var(--text-main);margin-bottom:4px;font-size:16px;font-weight:700}.custom-studio-grid{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:#ffffff05;grid-template-columns:1fr 1fr;gap:16px;padding:16px;display:grid}.section-label{color:#e2e8f0;margin-bottom:6px;font-size:13px;font-weight:600;display:block}.preset-pickers{flex-direction:column;gap:10px;display:flex}.preset-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.btn-preset{color:#f8fafc;border-radius:var(--radius-md);cursor:pointer;text-align:left;background:#ffffff0d;border:1px solid #ffffff1f;padding:10px;font-size:12px;font-weight:600;transition:all .2s}.btn-preset.active,.btn-preset:hover{border-color:var(--accent-primary);color:#e0e7ff;background:#6366f140;box-shadow:0 0 10px #6366f133}.upload-box{flex-direction:column;gap:6px;margin-top:6px;display:flex}.upload-btn{text-align:center;cursor:pointer;padding:8px 12px;font-size:12px}.upload-filename{color:#cbd5e1;font-size:11px}.custom-settings{flex-direction:column;gap:12px;display:flex}.custom-settings.hidden,.hidden{display:none!important}.setting-item{flex-direction:column;gap:6px;display:flex}.setting-item label{color:#e2e8f0;letter-spacing:.01em;font-size:13px;font-weight:600}.btn-sparkle{cursor:pointer;background:linear-gradient(135deg,#6366f1,#d946ef);border:none;margin-top:auto;padding:12px;font-size:13px;font-weight:700;box-shadow:0 4px 18px #d946ef59}.btn-sparkle:hover{background:linear-gradient(135deg,#4f46e5,#c026d3);transform:translateY(-1px);box-shadow:0 6px 24px #d946ef80}.generator-section{border-top:1px solid var(--border-subtle);padding-top:14px}.generator-section h4{color:#f8fafc;margin-bottom:8px;font-size:14px;font-weight:700}.subtitle{color:#cbd5e1;margin-bottom:12px;font-size:12px}.generator-controls{gap:12px;display:flex}.styled-select{color:#f8fafc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;border-radius:var(--radius-md);cursor:pointer;appearance:none;background-color:#1a2333;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:16px;border:1px solid #ffffff29;outline:none;flex:1;padding:10px 38px 10px 14px;font-family:inherit;font-size:13px;font-weight:500;transition:all .2s}.styled-select:hover{background-color:#222d42;border-color:#6366f180}.styled-select:focus{border-color:var(--accent-primary);background-color:#222d42;box-shadow:0 0 0 3px #6366f14d}.styled-select option{color:#f8fafc;background-color:#111827;padding:10px 14px;font-size:13px}.styled-select option:hover,.styled-select option:focus,.styled-select option:checked{color:#fff;background-color:#4338ca}.btn-primary{background:var(--accent-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;padding:10px 18px;font-family:inherit;font-size:13px;font-weight:700;transition:all .2s}.btn-primary:hover{background:var(--accent-primary-hover);transform:translateY(-1px)}.btn-secondary{border:1px solid var(--border-subtle);color:var(--text-main);border-radius:var(--radius-md);cursor:pointer;background:#ffffff14;align-items:center;gap:8px;padding:10px 18px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary:hover{background:#ffffff26}.celebration-card{text-align:center;align-items:center;max-width:480px;position:relative}.celebration-close-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);z-index:10;background:0 0;border:none;padding:4px;font-size:26px;line-height:1;transition:all .2s;position:absolute;top:14px;right:18px}.celebration-close-btn:hover{color:#fff;background:#ffffff1a;transform:scale(1.15)}.confetti-burst-icon{margin-bottom:4px;font-size:48px}.celebration-title{background:linear-gradient(135deg,#fbbf24,#f43f5e,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:24px;font-weight:800}.celebration-subtitle{color:var(--text-muted);font-size:14px}.stats-row{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:#ffffff08;justify-content:center;gap:24px;width:100%;margin:12px 0;padding:16px;display:flex}.stat-item{flex-direction:column;align-items:center;display:flex}.stat-val{color:var(--text-main);font-size:20px;font-weight:800}.stat-lbl{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;font-size:11px}.modal-actions{justify-content:center;gap:12px;width:100%;display:flex}.tab-badge{background:var(--accent-primary);color:#fff;border-radius:var(--radius-full);justify-content:center;align-items:center;margin-left:4px;padding:1px 6px;font-size:10px;font-weight:700;line-height:1.2;display:inline-flex}.artwork-badge.imported{color:#fff;background:linear-gradient(135deg,#059669 0%,#10b981 100%);border:1px solid #fff6}.artwork-thumb-img{object-fit:contain;width:100%;height:100%;transition:transform .3s}.artwork-card:hover .artwork-thumb-img{transform:scale(1.05)}.saved-empty-panel{text-align:center;border-radius:var(--radius-md);background:#ffffff05;border:1px dashed #ffffff26;flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:12px 0;padding:48px 24px;display:flex}.saved-empty-panel.hidden{display:none!important}.empty-gallery-icon{filter:drop-shadow(0 4px 12px #6366f14d);font-size:42px}.saved-empty-panel h3{color:var(--text-main);font-size:18px;font-weight:700}.saved-empty-panel p{color:var(--text-muted);max-width:440px;font-size:13px;line-height:1.5}.artwork-card-actions{align-items:center;gap:8px;display:flex}.btn-delete-saved{color:#f87171;border-radius:var(--radius-sm);cursor:pointer;background:#ef444426;border:1px solid #ef44444d;padding:4px 8px;font-size:11px;font-weight:600;transition:all .2s}.btn-delete-saved:hover{color:#fff;background:#ef4444;border-color:#ef4444}.saved-panel{flex-direction:column;gap:24px;width:100%;display:flex}.saved-panel.hidden{display:none!important}.saved-subsection{border-radius:var(--radius-lg);background:#ffffff05;border:1px solid #ffffff12;flex-direction:column;gap:14px;padding:18px 20px 22px;transition:all .25s;display:flex}#saved-in-progress-section{background:linear-gradient(#6366f10f 0%,#0f172a73 100%);border-color:#6366f140;box-shadow:0 4px 20px #0003}#saved-completed-section{background:linear-gradient(#10b9810d 0%,#0f172a73 100%);border-color:#10b98140}#saved-creations-section{background:linear-gradient(#f59e0b0a 0%,#0f172a73 100%);border-color:#f59e0b33}.saved-subsection.hidden{display:none!important}.saved-subsection-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.saved-subsection-title-wrap{align-items:center;gap:12px;display:flex}.saved-subsection-icon{border-radius:var(--radius-md);background:#ffffff0f;border:1px solid #ffffff1f;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:20px;display:flex}#saved-in-progress-section .saved-subsection-icon{background:#6366f126;border-color:#6366f159}#saved-completed-section .saved-subsection-icon{background:#10b98126;border-color:#10b98159}.saved-subsection-headings{flex-direction:column;gap:2px;display:flex}.saved-title-row{align-items:center;gap:10px;display:flex}.saved-subsection-title{color:#f8fafc;letter-spacing:-.01em;margin:0;font-size:17px;font-weight:700}.saved-subsection-badge{border-radius:var(--radius-full);color:#c7d2fe;background:#6366f140;border:1px solid #6366f166;padding:2px 8px;font-size:11px;font-weight:700}.saved-subsection-badge.completed{color:#a7f3d0;background:#10b98140;border-color:#10b98166}.saved-subsection-badge.creations{color:#fde68a;background:#f59e0b40;border-color:#f59e0b66}.saved-subsection-desc{color:var(--text-muted);margin:0;font-size:12px}.progress-pill-badge{border-radius:var(--radius-full);-webkit-backdrop-filter:blur(8px);z-index:2;color:#c7d2fe;background:#0f172ae0;border:1px solid #6366f180;align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:800;display:flex;position:absolute;top:10px;right:10px;box-shadow:0 2px 8px #00000080}.progress-pill-badge.completed{color:#6ee7b7;background:#064e3be0;border-color:#10b98180}.card-progress-bar-wrap{flex-direction:column;gap:4px;margin:8px 0 4px;display:flex}.card-progress-bar{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:6px;overflow:hidden}.card-progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);height:100%;transition:width .3s}.card-progress-fill.completed{background:linear-gradient(90deg,#059669,#10b981)}.card-progress-labels{color:#94a3b8;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;display:flex}.card-progress-percent{color:#a5b4fc;font-weight:700}.card-progress-labels .card-progress-percent.completed{color:#6ee7b7}.btn-resume-card{color:#fff;border-radius:var(--radius-sm);cursor:pointer;background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);border:1px solid #fff3;align-items:center;gap:5px;padding:5px 12px;font-size:11px;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex;box-shadow:0 2px 8px #4f46e54d}.btn-resume-card:hover{background:linear-gradient(135deg,#4f46e5 0%,#4338ca 100%);transform:translateY(-1px);box-shadow:0 4px 12px #4f46e580}.btn-resume-card.completed{background:linear-gradient(135deg,#059669 0%,#047857 100%);box-shadow:0 2px 8px #10b9814d}.btn-resume-card.completed:hover{background:linear-gradient(135deg,#047857 0%,#065f46 100%);box-shadow:0 4px 12px #10b98180}.btn-reset-card{color:#cbd5e1;border-radius:var(--radius-sm);cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex}.btn-reset-card:hover{color:#fff;background:#fff3;border-color:#ffffff4d}.btn-export-card{color:#6ee7b7;border-radius:var(--radius-sm);cursor:pointer;background:#10b98126;border:1px solid #10b9814d;align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-weight:700;transition:all .2s;display:inline-flex}.btn-export-card:hover{color:#fff;background:#10b981}.empty-in-progress-notice{border-radius:var(--radius-md);color:var(--text-muted);background:#ffffff08;border:1px dashed #ffffff1f;grid-column:1/-1;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;display:flex}.empty-notice-icon{flex-shrink:0;font-size:28px}.empty-notice-text{flex-direction:column;flex:1;gap:3px;font-size:13px;display:flex}.empty-notice-text strong{color:#e2e8f0;font-weight:600}.btn-sm-browse{color:#a5b4fc;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:#6366f126;border:1px solid #6366f14d;padding:6px 14px;font-size:12px;font-weight:700;transition:all .2s}.btn-sm-browse:hover{background:var(--accent-primary);color:#fff}.saved-empty-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px;display:flex}.studio-mode-toggle{border-radius:var(--radius-md);background:#0f172ab3;border:1px solid #ffffff1a;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px;padding:6px;display:grid}.btn-studio-mode{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:#ffffff08;border:1px solid #ffffff14;align-items:center;gap:12px;padding:12px 14px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex}.btn-studio-mode:hover{background:#ffffff12;border-color:#ffffff2e;transform:translateY(-1px)}.btn-studio-mode .mode-icon{background:#ffffff0d;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;transition:transform .2s;display:flex}.btn-studio-mode .mode-text{flex-direction:column;gap:2px;display:flex}.btn-studio-mode .mode-name{color:var(--text-main);letter-spacing:-.01em;font-size:14px;font-weight:700}.btn-studio-mode .mode-desc{color:var(--text-muted);font-size:11px;font-weight:500;line-height:1.25}.btn-studio-mode.active{color:var(--text-main);background:linear-gradient(135deg,#6366f140,#a855f733);border-color:#818cf899;box-shadow:0 4px 14px #6366f140,inset 0 0 0 1px #a855f740}.btn-studio-mode.active .mode-icon{background:#6366f14d;transform:scale(1.08)}.btn-studio-mode[data-mode=diamond].active{background:linear-gradient(135deg,#ec489940,#6366f133);border-color:#f472b699;box-shadow:0 4px 14px #ec489940,inset 0 0 0 1px #f472b640}.btn-studio-mode[data-mode=diamond].active .mode-icon{background:#ec48994d}.studio-mode-banner{border-radius:var(--radius-sm);background:#0f172a99;border:1px solid #6366f133;align-items:center;gap:10px;margin-top:6px;padding:8px 12px;font-size:12px;transition:all .3s;display:flex}.mode-banner-badge{color:#c7d2fe;white-space:nowrap;background:#6366f140;border:1px solid #818cf866;border-radius:9999px;align-items:center;padding:3px 8px;font-size:11px;font-weight:700;display:inline-flex}.mode-banner-text{color:var(--text-muted);font-size:12px;line-height:1.3}.settings-feature-badge{color:#a5b4fc;background:#6366f11a;border:1px solid #6366f133;border-radius:8px;align-items:center;gap:8px;margin-bottom:12px;padding:7px 12px;font-size:12px;font-weight:600;display:flex}.settings-feature-badge.diamond-badge{color:#f472b6;background:#ec48991a;border-color:#ec489940}.preview-header-bar{justify-content:flex-end;width:100%;margin-bottom:6px;display:flex}.preview-mode-tag{color:#a5b4fc;background:#6366f133;border:1px solid #6366f14d;border-radius:9999px;padding:2px 8px;font-size:11px;font-weight:700}.preview-mode-tag.diamond{color:#f472b6;background:#ec489933;border-color:#ec48994d}.styled-input{border-radius:var(--radius-sm);width:100%;color:var(--text-main);background:#0f172ab3;border:1px solid #ffffff1f;outline:none;padding:9px 12px;font-size:13px;transition:border-color .2s}.styled-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px #6366f140}.title-input-wrap{margin-top:10px}.studio-step-section{margin-bottom:16px}.studio-step-header{align-items:center;gap:8px;margin-bottom:10px;display:flex}.step-num{color:#fff;background:linear-gradient(135deg,#6366f1,#ec4899);border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:800;display:inline-flex}.step-title{color:var(--text-main);letter-spacing:-.01em;font-size:14px;font-weight:700}.studio-preview-box{border-radius:var(--radius-md);background:#0f172ab3;border:1px solid #ffffff1f;flex-direction:column;justify-content:center;align-items:center;margin:12px 0 6px;padding:10px;display:flex;box-shadow:inset 0 2px 6px #0000004d}.studio-preview-canvas{border-radius:var(--radius-sm);object-fit:contain;background:#0f172a;max-width:100%;max-height:180px}.preview-caption{color:var(--text-muted);margin-top:6px;font-size:12px;font-weight:600}.difficulty-picker{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.btn-diff-chip{border-radius:var(--radius-md);color:var(--text-main);cursor:pointer;text-align:left;background:#ffffff0a;border:1px solid #ffffff1a;align-items:center;gap:12px;padding:10px 14px;transition:all .2s;display:flex}.btn-diff-chip:hover{background:#ffffff14;border-color:#fff3}.btn-diff-chip.active{border-color:var(--accent-primary);background:#6366f126;box-shadow:0 0 12px #6366f140}.diff-icon{font-size:16px}.diff-name{color:#fff;flex:1;font-size:14px;font-weight:700}.diff-desc{color:var(--text-muted);font-size:12px}.btn-large-action{border-radius:var(--radius-md);cursor:pointer;width:100%;margin-top:10px;padding:14px 20px;font-size:15px;font-weight:700;box-shadow:0 4px 16px #6366f159}.generator-subtitle{color:var(--text-muted);margin-bottom:10px;font-size:13px}.conversion-card{text-align:center;flex-direction:column;align-items:center;gap:14px;max-width:440px;padding:32px 24px;display:flex}.conversion-spinner{border:3px solid #6366f133;border-top-color:var(--accent-primary);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.conversion-card h3{color:var(--text-main);font-size:18px;font-weight:700}.conversion-status{color:#94a3b8;min-height:20px;font-size:13px}.conversion-progress-bar{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:8px;margin-top:6px;overflow:hidden}.conversion-progress-fill{border-radius:var(--radius-full);background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);height:100%;transition:width .3s}.header-res-dropdown-wrap{align-items:center;display:inline-flex;position:relative}.btn-res-pill{color:#c7d2fe;border-radius:var(--radius-full);cursor:pointer;-webkit-user-select:none;user-select:none;background:#6366f129;border:1px solid #6366f166;align-items:center;gap:7px;margin-left:8px;padding:6px 14px;font-size:12px;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 2px 8px #00000040}.btn-res-pill:hover,.btn-res-pill.active{color:#fff;background:#6366f152;border-color:#818cf8;transform:translateY(-1px);box-shadow:0 4px 14px #6366f173}.btn-res-pill.diamond-mode{color:#fbcfe8;background:#ec489929;border-color:#ec489973}.btn-res-pill.diamond-mode:hover,.btn-res-pill.diamond-mode.active{color:#fff;background:#ec489952;border-color:#f472b6;box-shadow:0 4px 14px #ec489973}.btn-res-pill .res-icon{font-size:13px;line-height:1}.btn-res-pill .res-caret{opacity:.8;font-size:10px;transition:transform .2s}.btn-res-pill.active .res-caret{transform:rotate(180deg)}.quick-style-dropdown{-webkit-backdrop-filter:blur(24px);z-index:1000;background:linear-gradient(150deg,#0f172afa,#1a1740fa);border:1px solid #6366f161;border-radius:14px;flex-direction:column;gap:10px;min-width:320px;padding:12px;animation:.18s cubic-bezier(.16,1,.3,1) dropdownPop;display:flex;position:absolute;top:calc(100% + 8px);left:8px;box-shadow:0 16px 42px #000000bf,0 0 0 1px #ffffff14}@keyframes dropdownPop{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.quick-dropdown-header{border-bottom:1px solid #ffffff14;flex-direction:column;gap:2px;padding-bottom:8px;display:flex}.quick-dropdown-title-row{justify-content:space-between;align-items:center;width:100%;display:flex}.quick-dropdown-title{color:#f1f5f9;font-size:13px;font-weight:700}.btn-close-quick{color:#cbd5e1;border-radius:var(--radius-full);cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;justify-content:center;align-items:center;width:26px;height:26px;font-size:18px;line-height:1;transition:all .2s;display:none}.btn-close-quick:hover{color:#fff;background:#ffffff2e}.quick-dropdown-subtitle{color:#94a3b8;font-size:11px}.quick-dropdown-backdrop{display:none}.quick-dropdown-style-toggle{background:#0f172ab3;border:1px solid #ffffff14;border-radius:10px;grid-template-columns:1fr 1fr;gap:6px;padding:4px;display:grid}.btn-quick-style-toggle{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:8px 10px;font-size:12px;font-weight:600;transition:all .18s;display:flex}.btn-quick-style-toggle:hover{color:#f1f5f9;background:#ffffff0f}.btn-quick-style-toggle.active{color:#fff;background:linear-gradient(135deg,#6366f173,#a855f773);border-color:#a855f799;box-shadow:0 2px 10px #7c3aed59}.btn-quick-style-toggle[data-mode=diamond].active{background:linear-gradient(135deg,#ec489980,#a855f773);border-color:#f472b6b3;box-shadow:0 2px 10px #ec489959}.quick-dropdown-section-title{color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-top:2px;font-size:11px;font-weight:700}.quick-dropdown-options{flex-direction:column;gap:6px;display:flex}.quick-dropdown-item{cursor:pointer;text-align:left;background:#ffffff08;border:1px solid #ffffff0f;border-radius:10px;justify-content:space-between;align-items:center;padding:8px 12px;transition:all .16s;display:flex}.quick-dropdown-item:hover{background:#6366f12e;border-color:#6366f166;transform:translate(2px)}.quick-dropdown-item.active{background:#6366f147;border-color:#818cf8;box-shadow:0 0 12px #6366f14d}.quick-dropdown-item.diamond-item:hover{background:#ec48992e;border-color:#ec489966}.quick-dropdown-item.diamond-item.active{background:#ec489947;border-color:#f472b6;box-shadow:0 0 12px #ec48994d}.quick-item-left{align-items:center;gap:10px;display:flex}.quick-item-icon{font-size:16px;line-height:1}.quick-item-info{flex-direction:column;display:flex}.quick-item-title{color:#f1f5f9;font-size:12px;font-weight:700}.quick-item-subtitle{color:#94a3b8;font-size:11px}.quick-item-badge{border-radius:var(--radius-full);color:#cbd5e1;background:#ffffff14;padding:3px 8px;font-size:11px;font-weight:700}.quick-dropdown-item.active .quick-item-badge{color:#fff;background:#6366f180}.quick-dropdown-item.diamond-item.active .quick-item-badge{color:#fff;background:#ec489980}.artwork-resolution-selector{border-top:1px dashed #ffffff14;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;display:flex}.resolution-title{color:#94a3b8;letter-spacing:.3px;text-transform:uppercase;font-size:11px;font-weight:600}.resolution-pills{flex-wrap:wrap;gap:5px;display:flex}.res-pill{text-align:center;color:#cbd5e1;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:6px;flex:1;min-width:68px;padding:5px 6px;font-size:11px;font-weight:600;transition:all .18s}.res-pill:hover{color:#fff;background:#6366f126;border-color:#6366f166}.res-pill.active{color:#fff;background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:#a5b4fc;box-shadow:0 2px 8px #4f46e566}.res-pill-count{opacity:.85;margin-top:1px;font-size:10px;font-weight:500;display:block}.asset-collection-header{background:linear-gradient(135deg,#eab3081a,#6366f11a);border:1px solid #eab30840;border-radius:8px;flex-direction:column;gap:3px;margin-bottom:8px;padding:8px 12px;display:flex}.collection-tag{color:#fde047;font-size:13px;font-weight:700}.collection-hint{color:#cbd5e1;font-size:11px}.asset-preset-buttons{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:12px;display:grid}.asset-preset-buttons .btn-preset{text-align:left;white-space:normal;background:#1e293bd9;border:1px solid #eab30833;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.3}.asset-preset-buttons .btn-preset.active{color:#fff;background:linear-gradient(135deg,#eab30840,#6366f140);border-color:#facc15;box-shadow:0 0 12px #eab3084d}.preset-sub-header{color:#94a3b8;margin:6px 0 4px;font-size:11px;font-weight:600}.secondary-presets{margin-bottom:12px}.res-picker-card{background:#111827;border:1px solid #6366f14d;border-radius:16px;width:90%;max-width:480px;padding:24px}.res-picker-subtitle{color:#94a3b8;margin:8px 0 16px;font-size:13px}.res-picker-options{flex-direction:column;gap:10px;display:flex}.res-picker-item{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;justify-content:space-between;align-items:center;padding:14px 16px;transition:all .2s;display:flex}.res-picker-item:hover{background:#6366f126;border-color:#818cf8;transform:translateY(-2px)}.res-picker-item.active{background:linear-gradient(135deg,#4f46e540,#a855f740);border-color:#a5b4fc;box-shadow:0 4px 14px #6366f14d}.res-item-left{align-items:center;gap:12px;display:flex}.res-item-icon{font-size:22px}.res-item-name{color:#fff;font-size:15px;font-weight:700}.res-item-desc{color:#94a3b8;margin-top:2px;font-size:12px}.res-item-badge{border-radius:var(--radius-full);color:#e2e8f0;background:#ffffff14;padding:4px 10px;font-size:12px;font-weight:700}.res-picker-item.active .res-item-badge{color:#fff;background:#4f46e5}@media (width<=768px){.header-bar{background:#0f172af5;flex-wrap:wrap;gap:6px 8px;padding:8px 12px 6px}.header-left{flex:auto;order:1;gap:8px;min-width:0}.header-center{flex:none;order:2;justify-content:flex-end;min-width:65px;max-width:85px}.header-right{-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid #ffffff14;flex:0 0 100%;order:3;justify-content:space-between;align-items:center;gap:4px;width:100%;padding-top:6px;display:flex;overflow-x:auto}.header-right::-webkit-scrollbar{display:none}.btn-label{display:none!important}#btn-gallery{border-radius:8px;flex-shrink:0;height:32px;padding:0 8px}.artwork-meta{flex-shrink:1;min-width:0}.artwork-title{text-overflow:ellipsis;white-space:nowrap;max-width:125px;font-size:13px;font-weight:700;overflow:hidden}.artwork-artist{display:none}.header-res-dropdown-wrap{flex-shrink:0;min-width:0}.btn-res-pill{gap:4px;max-width:130px;height:30px;padding:0 8px;font-size:11px}#label-current-resolution{text-overflow:ellipsis;white-space:nowrap;max-width:75px;font-size:11px;overflow:hidden}.btn-res-pill .res-icon{font-size:13px}.btn-res-pill .res-caret{font-size:9px}.progress-pill{gap:6px;height:28px;padding:3px 8px}.progress-track{width:32px;height:4px}.progress-text{min-width:24px;font-size:11px}.tool-mode-group{border-radius:var(--radius-full);background:#00000073;border:1px solid #ffffff1f;flex-shrink:0;align-items:center;gap:2px;padding:2px;display:inline-flex}.tool-mode-group .btn-icon{border-radius:var(--radius-full);justify-content:center;align-items:center;width:32px;height:30px;padding:0;display:inline-flex}.header-right>.btn-icon{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;min-width:30px;height:30px;padding:0 6px;display:inline-flex}.header-right .btn-icon svg{width:16px;height:16px}#btn-hint{position:relative}#hint-badge{min-width:14px;height:14px;padding:0 2px;font-size:8px;line-height:14px;position:absolute;top:-3px;right:-3px}.quick-dropdown-backdrop{-webkit-backdrop-filter:blur(6px);z-index:998;background:#000000a6;animation:.2s fadeInBackdrop;display:block;position:fixed;inset:0}.quick-dropdown-backdrop.hidden{display:none!important}@keyframes fadeInBackdrop{0%{opacity:0}to{opacity:1}}.header-res-dropdown-wrap{position:static}.quick-style-dropdown{width:auto;min-width:0;max-width:calc(100vw - 16px);max-height:calc(85dvh - 100px);padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:999;background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 100%);border:1px solid #6366f173;border-radius:16px;animation:.18s cubic-bezier(.16,1,.3,1) dropdownPop;position:absolute;top:100%;left:8px;right:8px;overflow-y:auto;box-shadow:0 16px 48px #000c,0 0 0 1px #ffffff14}.quick-style-dropdown:before{content:"";background:#ffffff47;border-radius:4px;width:40px;height:4px;margin:0 auto 12px;display:block}.btn-close-quick{display:inline-flex}.btn-quick-style-toggle{padding:10px 8px;font-size:13px}.quick-dropdown-item{min-height:50px;padding:10px 14px}.modal-overlay{padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.modal-card{border-radius:16px;gap:14px;max-height:95dvh;padding:16px 14px;overflow-x:hidden}.modal-header-titles h2{font-size:20px}.modal-header-subtitle{font-size:12px}.btn-close{width:32px;height:32px;font-size:20px}.gallery-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;flex-shrink:0;gap:8px;width:100%;padding-bottom:8px;display:flex;overflow-x:auto}.gallery-tab{white-space:nowrap;border-radius:var(--radius-full);flex:none;justify-content:center;align-items:center;height:38px;padding:0 14px;font-size:12px;font-weight:700;display:inline-flex}.artwork-grid{grid-template-columns:1fr;gap:14px}.artwork-card .artwork-thumb-wrap{height:160px}.res-pill{min-width:0;padding:6px 4px;font-size:11px}.saved-subsection{border-radius:14px;gap:10px;padding:14px 12px}.saved-subsection-header{gap:8px}.saved-empty-panel{padding:32px 16px}.saved-empty-actions{flex-direction:column;gap:8px;width:100%}.saved-empty-actions button{justify-content:center;width:100%}.custom-studio-intro h3{font-size:17px}.custom-studio-intro .subtitle{font-size:12px}.studio-mode-toggle{grid-template-columns:1fr 1fr;gap:8px;display:grid}.btn-studio-mode{gap:8px;padding:10px 8px}.btn-studio-mode .mode-icon{font-size:20px}.btn-studio-mode .mode-name{font-size:12px;font-weight:700}.btn-studio-mode .mode-desc{font-size:10px}.studio-mode-banner{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px}.mode-banner-text{font-size:11px}.custom-studio-grid{grid-template-columns:1fr;gap:16px;padding:12px}.preset-buttons{grid-template-columns:1fr 1fr;gap:6px}.btn-preset{padding:8px 10px;font-size:11px}.studio-preview-box{max-width:100%;margin-top:6px}.studio-preview-canvas{max-width:100%;height:auto}.btn-diff-chip{padding:10px 12px}.diff-name{font-size:13px}.diff-desc{font-size:11px}.btn-large-action{padding:12px 14px;font-size:13px}.generator-controls{flex-direction:column;gap:8px}.generator-controls .btn-secondary{width:100%}.floating-controls{gap:6px;top:12px;right:12px}.btn-float{width:36px;height:36px;font-size:16px}.palette-container{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.swatch-circle{width:44px;height:44px}.swatch-number{font-size:13px}.res-picker-card{width:95%;max-width:400px;padding:18px 14px}.res-picker-item{padding:10px 12px}.res-item-name{font-size:13px}.res-item-desc{font-size:11px}.celebration-card{width:95%;max-width:380px;padding:20px 16px}.celebration-title{font-size:20px}.stats-row{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.stat-item{padding:8px 4px}.stat-val{font-size:16px}.modal-actions{flex-direction:column;gap:8px;width:100%}.modal-actions button{justify-content:center;width:100%;height:40px}}@media (width<=380px){.artwork-title{max-width:85px}.btn-res-pill{max-width:105px}#label-current-resolution{max-width:55px}.header-center{max-width:70px}.studio-mode-toggle,.preset-buttons{grid-template-columns:1fr}}