@layer components{@keyframes gen-spin{0%{transform:rotateX(-30deg) rotateY(0)}to{transform:rotateX(-30deg) rotateY(360deg)}}@keyframes gen-pulse-dot{0%,to{opacity:1}50%{opacity:.3}}@keyframes gen-fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.gen-root{display:flex;flex-direction:column;flex:1}.gen-input-root{display:flex;flex-direction:column;max-width:1060px;margin:0 auto;width:100%;padding:var(--s-8) var(--s-6) var(--s-9);gap:var(--s-6);animation:gen-fade-up .35s var(--ease-out) both}.gen-input-header{display:flex;flex-direction:column;gap:var(--s-3);max-width:580px}.gen-input-title{font:var(--t-h1);margin:0;background:linear-gradient(135deg,var(--grass-top) 0%,var(--ice) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gen-input-desc{font:var(--t-body-lg);color:var(--fg-3);margin:0;line-height:1.55}.gen-layout{display:grid;grid-template-columns:1fr 300px;gap:var(--s-5);align-items:start}@media(max-width:760px){.gen-layout{grid-template-columns:1fr}}.gen-main-col,.gen-side-col{display:flex;flex-direction:column;gap:var(--s-4)}.gen-asset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}.gen-asset-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--s-3) var(--s-2);border-radius:var(--r-2);border:1px solid var(--line-1);background:var(--ink-800);cursor:pointer;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);text-align:center;user-select:none}.gen-asset-card:hover{border-color:var(--line-3);background:var(--ink-600)}.gen-asset-card[data-selected]{border-color:var(--grass);background:color-mix(in srgb,var(--grass) 10%,var(--ink-800));box-shadow:0 0 0 1px var(--grass),var(--glow-primary)}.gen-asset-icon{font-size:22px;line-height:1;display:block}.gen-asset-label{font:var(--t-label);color:var(--fg-1);text-transform:uppercase;letter-spacing:.08em;display:block}.gen-asset-desc{font:var(--t-caption);color:var(--fg-3);display:block}.gen-textarea{width:100%;min-height:130px;background:var(--ink-800);border:1px solid var(--line-2);border-radius:var(--r-2);color:var(--fg-1);font-size:15px;line-height:1.55;font-family:Hanken Grotesk,system-ui,sans-serif;padding:var(--s-3) var(--s-4);resize:vertical;outline:none;box-sizing:border-box;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}.gen-textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px #3da9ff2e}.gen-textarea::placeholder{color:var(--fg-4)}.gen-char-count{font:var(--t-caption);color:var(--fg-4)}.gen-char-count[data-warn]{color:var(--lava)}.gen-examples-label{font:var(--t-label);color:var(--fg-4);text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--s-2);display:block}.gen-examples{display:flex;flex-wrap:wrap;gap:var(--s-2)}.gen-example-chip{font:var(--t-caption);color:var(--fg-3);border:1px solid var(--line-1);border-radius:var(--r-full);padding:4px 12px;cursor:pointer;background:transparent;transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;text-align:left}.gen-example-chip:hover{color:var(--fg-1);border-color:var(--line-3);background:var(--ink-600)}.gen-drop-zone{border:1.5px dashed var(--line-2);border-radius:var(--r-2);padding:var(--s-6) var(--s-4);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);cursor:pointer;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out);background:var(--ink-800);text-align:center}.gen-drop-zone:hover,.gen-drop-zone[data-drag]{border-color:var(--grass);background:color-mix(in srgb,var(--grass) 5%,var(--ink-800))}.gen-drop-icon{font-size:30px;line-height:1}.gen-drop-text{font:var(--t-small);color:var(--fg-2);margin:0}.gen-drop-hint{font:var(--t-caption);color:var(--fg-4);margin:0;letter-spacing:.04em}.gen-preview-wrap{position:relative;border-radius:var(--r-2);overflow:hidden;aspect-ratio:4 / 3;background:var(--ink-900)}.gen-preview-img{width:100%;height:100%;object-fit:cover;display:block}.gen-remove-btn{position:absolute;top:var(--s-2);right:var(--s-2);padding:4px 10px;border-radius:var(--r-full);background:#000000a6;color:var(--fg-1);border:1px solid rgba(255,255,255,.12);cursor:pointer;font:var(--t-caption);backdrop-filter:blur(6px);transition:background var(--dur-1)}.gen-remove-btn:hover{background:#000000e0}.gen-coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);padding:var(--s-5) 0;text-align:center}.gen-coming-soon-icon{font-size:22px;color:var(--fg-4)}.gen-coming-soon-text{font:var(--t-small);color:var(--fg-4);margin:0}.gen-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-6);padding:var(--s-9) var(--s-6);min-height:72vh;text-align:center;animation:gen-fade-up .3s var(--ease-out) both}.gen-loading-text{display:flex;flex-direction:column;gap:var(--s-2)}.gen-loading-title{font:var(--t-h3);color:var(--fg-1);margin:0}.gen-loading-prompt{font:var(--t-small);color:var(--fg-3);margin:0;font-style:italic;max-width:380px}.gen-loading-cold-start{font:var(--t-small);color:var(--accent);margin:8px 0 0;animation:pulse 2s infinite ease-in-out}.gen-steps{display:flex;flex-direction:column;gap:var(--s-2);min-width:240px}.gen-step{display:flex;align-items:center;gap:var(--s-2);font:var(--t-small);color:var(--fg-4);transition:color var(--dur-2) var(--ease-out)}.gen-step[data-active]{color:var(--fg-1)}.gen-step[data-done]{color:var(--grass)}.gen-step-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.gen-step[data-active] .gen-step-dot{background:var(--grass);animation:gen-pulse-dot 1s ease-in-out infinite;box-shadow:0 0 8px var(--grass)}.gen-step-check{margin-left:auto;font-size:11px;color:var(--grass)}.gen-progress-track{width:260px;height:3px;background:var(--ink-500);border-radius:var(--r-full);overflow:hidden}.gen-progress-fill{height:100%;background:linear-gradient(90deg,var(--grass-dark),var(--grass) 55%,var(--sky));border-radius:var(--r-full);transition:width 60ms linear;box-shadow:0 0 8px var(--grass)}.gen-result-root{display:flex;flex-direction:column;max-width:1140px;margin:0 auto;width:100%;padding:var(--s-6) var(--s-6) var(--s-9);gap:var(--s-5);animation:gen-fade-up .35s var(--ease-out) both}.gen-result-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}.gen-result-title{font:var(--t-h3);color:var(--fg-1);margin:var(--s-2) 0 0}.gen-result-body{display:grid;grid-template-columns:1fr 340px;gap:var(--s-5);align-items:start}@media(max-width:860px){.gen-result-body{grid-template-columns:1fr}}.gen-viewer-panel{aspect-ratio:1;border-radius:var(--r-3);overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(ellipse at 40% 30%,var(--ink-600) 0%,var(--ink-900) 80%);position:relative;box-shadow:var(--shadow-3),0 0 80px #84e63c14}.gen-viewer-badge{position:absolute;top:var(--s-3);left:var(--s-3);z-index:2;pointer-events:none}.gen-viewer-overlay-bottom{position:absolute;bottom:var(--s-3);right:var(--s-3);z-index:2}.gen-dl-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--r-full);background:#0009;color:var(--fg-1);border:1px solid rgba(255,255,255,.12);cursor:pointer;font:var(--t-caption);backdrop-filter:blur(8px);transition:background var(--dur-1),border-color var(--dur-1)}.gen-dl-btn:hover{background:#000000d9;border-color:#ffffff38}.gen-result-sidebar{display:flex;flex-direction:column;gap:var(--s-3)}.gen-meta-list{display:flex;flex-direction:column;margin-bottom:var(--s-4)}.gen-meta-row{display:flex;align-items:center;justify-content:space-between;padding:var(--s-2) 0;border-bottom:1px solid var(--line-1);font:var(--t-small)}.gen-meta-row:last-child{border-bottom:none}.gen-meta-label{color:var(--fg-3)}.gen-meta-value{color:var(--fg-1);font-weight:600;font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px}.gen-prompt-preview{background:var(--ink-800);border-radius:var(--r-1);padding:var(--s-3);border:1px solid var(--line-1)}.gen-prompt-label{font:var(--t-label);color:var(--fg-4);text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--s-1);display:block}.gen-prompt-text{font:var(--t-small);color:var(--fg-2);margin:0;font-style:italic;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.gen-cta-stack{display:flex;flex-direction:column;gap:var(--s-2);width:100%}.gen-view-gallery-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--s-2) var(--s-4);border-radius:var(--radius-md, 6px);border:1px solid var(--fg-grass, #84e63c);background:transparent;color:var(--fg-grass, #84e63c);font:var(--t-small);font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s;box-sizing:border-box}.gen-view-gallery-btn:hover{background:color-mix(in srgb,var(--fg-grass, #84e63c) 12%,transparent)}@keyframes gen-cell-pulse{0%,to{opacity:.07}50%{opacity:.9}}.gen-loading2d-frame{width:162px;height:120px;display:grid;gap:3px;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--ink-800);flex-shrink:0;overflow:hidden}.gen-loading2d-cell{border-radius:2px;background:var(--cell-color, var(--berry));opacity:.07;animation:gen-cell-pulse 1.6s ease-in-out infinite}.gen-pick-root{display:flex;flex-direction:column;max-width:900px;margin:0 auto;width:100%;padding:var(--s-8) var(--s-6) var(--s-9);gap:var(--s-6);animation:gen-fade-up .35s var(--ease-out) both}.gen-pick-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4)}.gen-pick-title{font:var(--t-h2);color:var(--fg-1);margin:var(--s-2) 0 var(--s-1)}.gen-pick-desc{font:var(--t-body);color:var(--fg-3);margin:0;max-width:500px;line-height:1.55}.gen-pick-prompt-row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}.gen-pick-prompt-label{font:var(--t-label);color:var(--fg-4);text-transform:uppercase;letter-spacing:.08em}.gen-pick-prompt-text{font:var(--t-small);color:var(--fg-3);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:460px}.gen-ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}@media(max-width:680px){.gen-ref-grid{grid-template-columns:1fr}}.gen-ref-card{display:flex;flex-direction:column;border-radius:var(--r-3);border:2px solid var(--line-1);background:var(--ink-800);cursor:pointer;overflow:hidden;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);text-align:left;padding:0}.gen-ref-card:hover{border-color:var(--line-3);transform:translateY(-2px);box-shadow:var(--shadow-2)}.gen-ref-card[data-selected]{border-color:var(--ref-accent, var(--grass));box-shadow:0 0 0 1px var(--ref-accent, var(--grass)),0 0 24px color-mix(in srgb,var(--ref-accent, var(--grass)) 30%,transparent);transform:translateY(-2px)}.gen-ref-img{aspect-ratio:4 / 3;position:relative;overflow:hidden}.gen-ref-decor{position:absolute;inset:0;width:100%;height:100%}.gen-ref-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.gen-ref-check-badge{position:absolute;top:var(--s-2);right:var(--s-2);width:24px;height:24px;border-radius:50%;background:var(--ref-accent, var(--grass));color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0006}.gen-ref-info{padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:2px}.gen-ref-label{font:var(--t-label);color:var(--fg-1);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.gen-ref-desc{font:var(--t-caption);color:var(--fg-3)}.gen-pick-actions{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}.gen-pick-hint{font:var(--t-caption);color:var(--fg-4);margin:0;font-style:italic}.gen-sprite-picker{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}.gen-sprite-nav{display:flex;align-items:center;justify-content:center;gap:var(--s-3)}.gen-sprite-canvas{width:400px;height:220px;flex-shrink:0;border-radius:var(--r-2);background:radial-gradient(ellipse at 40% 35%,var(--ink-500) 0%,var(--ink-900) 80%);overflow:hidden;border:1px solid var(--line-1)}.gen-sprite-arrow{width:40px;height:40px;border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--ink-700);color:var(--fg-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;flex-shrink:0;transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);user-select:none}.gen-sprite-arrow:hover{border-color:var(--line-3);background:var(--ink-500);color:var(--fg-1)}.gen-sprite-arrow:active{background:var(--ink-400, var(--ink-500));transform:scale(.94)}.gen-sprite-meta{width:220px;display:flex;flex-direction:column;gap:var(--s-2)}.gen-sprite-name-row{display:flex;align-items:baseline;gap:var(--s-2)}.gen-sprite-name{font:var(--t-h4);color:var(--fg-1)}.gen-sprite-desc{font:var(--t-caption);color:var(--fg-3)}.gen-sprite-controls{display:flex;align-items:center;justify-content:space-between}.gen-sprite-dots{display:flex;gap:6px;align-items:center}.gen-sprite-dot{width:7px;height:7px;border-radius:50%;background:var(--ink-500);border:1px solid var(--line-2);cursor:pointer;padding:0;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-block)}.gen-sprite-dot[data-active]{background:var(--grass);border-color:var(--grass);transform:scale(1.3)}.gen-sprite-dot:hover:not([data-active]){background:var(--fg-3);border-color:var(--fg-3)}.gen-sprite-select-wrap{position:relative;display:inline-flex;align-items:center}.gen-sprite-select{appearance:none;-webkit-appearance:none;background:var(--ink-600);border:1px solid var(--line-2);border-radius:var(--r-full);color:var(--fg-1);font:var(--t-caption);padding:5px 28px 5px 12px;cursor:pointer;outline:none;transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}.gen-sprite-select:hover{border-color:var(--line-3);background:var(--ink-500)}.gen-sprite-select:focus{border-color:var(--sky);box-shadow:0 0 0 2px #3da9ff2e}.gen-sprite-select option{background:var(--ink-700);color:var(--fg-1)}.gen-sprite-chevron{position:absolute;right:10px;pointer-events:none;font-size:9px;color:var(--fg-3);line-height:1}.gen-card-divider{height:1px;background:var(--line-1);margin:var(--s-4) 0}.gen-prompt-section{display:flex;flex-direction:column;gap:var(--s-3)}.gen-prompt-section-header{display:flex;justify-content:space-between;align-items:center}.gen-prompt-section-label{font:var(--t-label);color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em}.gen-sub-styles-wrap{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3);animation:gen-fade-up .2s var(--ease-out) both}.gen-sub-styles-label{font:var(--t-label);color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em}.gen-sub-styles{display:flex;gap:var(--s-2)}.gen-sub-style-btn{flex:1;display:flex;flex-direction:column;gap:2px;padding:var(--s-3);border-radius:var(--r-2);border:1px solid var(--line-1);background:var(--ink-800);cursor:pointer;text-align:left;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);user-select:none}.gen-sub-style-btn:hover{border-color:var(--line-3);background:var(--ink-600)}.gen-sub-style-btn[data-selected]{border-color:var(--grass);background:color-mix(in srgb,var(--grass) 10%,var(--ink-800));box-shadow:0 0 0 1px var(--grass),var(--glow-primary)}.gen-sub-style-name{font:var(--t-label);color:var(--fg-1);font-weight:600}.gen-sub-style-desc{font:var(--t-caption);color:var(--fg-3)}.gen-size-section{display:flex;flex-direction:column;gap:var(--s-2)}.gen-size-header{display:flex;justify-content:space-between;align-items:center}.gen-size-section-label{font:var(--t-label);color:var(--fg-3);text-transform:uppercase;letter-spacing:.1em}.gen-size-value{font-family:JetBrains Mono,ui-monospace,monospace;font-size:13px;font-weight:600;color:var(--fg-1);letter-spacing:.02em}.gen-size-hints{display:flex;justify-content:space-between;font:var(--t-caption);color:var(--fg-4)}.gen-locked-upload{border:1.5px dashed var(--line-1);border-radius:var(--r-2);padding:var(--s-6) var(--s-4);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);background:var(--ink-900);text-align:center}.gen-locked-lock{font-size:26px;line-height:1;opacity:.5}.gen-locked-title{font:var(--t-small);color:var(--fg-3);font-weight:600;margin:0}.gen-locked-desc{font:var(--t-caption);color:var(--fg-4);margin:0;line-height:1.45}.gen-upgrade-btn{display:inline-flex;align-items:center;padding:5px 16px;border-radius:var(--r-full);background:color-mix(in srgb,#ffbe4d 12%,transparent);border:1px solid #ffbe4d;color:#ffbe4d;font:var(--t-label);font-weight:600;text-decoration:none;cursor:pointer;margin-top:var(--s-1);transition:background var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}.gen-upgrade-btn:hover{background:color-mix(in srgb,#ffbe4d 22%,transparent);box-shadow:0 0 14px color-mix(in srgb,#ffbe4d 28%,transparent)}.gen-gate-backdrop{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000}.gen-gate-modal{background:var(--ink-800);border:1px solid var(--line-1);border-radius:var(--r-2);padding:28px 24px 20px;max-width:340px;width:calc(100% - 32px);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);text-align:center}.gen-gate-icon{font-size:32px;line-height:1}.gen-gate-title{font:var(--t-small);color:var(--fg-2);font-weight:700;margin:0}.gen-gate-desc{font:var(--t-caption);color:var(--fg-4);margin:0;line-height:1.5}.gen-gate-cancel{background:none;border:none;color:var(--fg-4);font:var(--t-caption);cursor:pointer;padding:var(--s-1) var(--s-2);margin-top:var(--s-1);border-radius:var(--r-1);transition:color var(--dur-1) var(--ease-out)}.gen-gate-cancel:hover{color:var(--fg-2)}.gen-flag-banner{display:flex;align-items:center;gap:var(--s-2);padding:6px 10px;background:#ffbe4d12;border:1px solid rgba(255,190,77,.22);border-radius:var(--r-1);font:var(--t-caption);color:#ffbe4d;margin-top:var(--s-2)}.gen-disclaimer-confirm{display:inline-flex;align-items:center;padding:8px 20px;border-radius:var(--r-full);background:color-mix(in srgb,#ffbe4d 15%,transparent);border:1px solid #ffbe4d;color:#ffbe4d;font:var(--t-label);font-weight:600;cursor:pointer;margin-top:var(--s-1);transition:background var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}.gen-disclaimer-confirm:hover{background:color-mix(in srgb,#ffbe4d 25%,transparent);box-shadow:0 0 14px color-mix(in srgb,#ffbe4d 28%,transparent)}}.gen-mc-disclaimer{margin-top:var(--s-3);font:var(--t-caption);color:var(--fg-4);font-size:.7rem;letter-spacing:.02em;text-align:center;padding:var(--s-2) var(--s-3);background:#ffc8000d;border:1px solid rgba(255,200,0,.15);border-radius:var(--r-1)}