:root{--bg-main: #050505;--bg-surface: #0e0e0e;--bg-elevated: #151515;--bg-input: #1a1a1a;--bg-hover: #222222;--red-primary: #ef4444;--red-hover: #dc2626;--red-active: #b91c1c;--red-subtle: rgba(239, 68, 68, .1);--red-border: rgba(239, 68, 68, .35);--red-glow: 0 0 16px rgba(239, 68, 68, .35);--border: #202020;--border-light: #2e2e2e;--border-focus: var(--red-primary);--text-primary: #ffffff;--text-secondary: #a0a0a0;--text-muted: #5a5a5a;--text-red: #f87171;--font-sans: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 6px;--radius-sm: 4px;--transition: all .15s ease-out}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:15px;background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}body{min-height:100vh;background:var(--bg-main);line-height:1.4;overflow-x:hidden}.app-container{max-width:1400px;margin:0 auto;padding:0 1.25rem 3rem}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid var(--border);margin-bottom:1.5rem}.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}.brand-badge-icon{width:28px;height:28px;background:var(--red-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff}.brand-badge-icon svg{width:16px;height:16px}.brand-title{font-size:1.05rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.brand-sub{color:var(--text-muted);font-size:.78rem;font-weight:500;margin-left:.35rem}.header-right{display:flex;align-items:center;gap:.5rem}.status-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border);padding:.35rem .65rem;border-radius:var(--radius-sm)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--red-primary);box-shadow:0 0 6px var(--red-primary)}.btn-icon{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);padding:.45rem .75rem;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;transition:var(--transition)}.btn-icon:hover{background:var(--bg-hover);border-color:var(--border-light);color:var(--text-primary)}.btn-icon svg{width:15px;height:15px}.model-bar{display:flex;align-items:center;gap:.4rem;background:var(--bg-surface);border:1px solid var(--border);padding:.3rem;border-radius:var(--radius);margin-bottom:1.25rem;overflow-x:auto}.model-pill{flex:1;min-width:140px;display:flex;align-items:center;justify-content:center;gap:.45rem;background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:.82rem;font-weight:600;padding:.55rem .8rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.model-pill:hover{color:var(--text-primary);background:var(--bg-hover)}.model-pill.active{background:var(--bg-elevated);color:#fff;border:1px solid var(--red-primary);box-shadow:0 0 10px #ef444433}.model-pill-badge{font-size:.65rem;padding:.1rem .35rem;border-radius:3px;background:var(--bg-main);border:1px solid var(--border);color:var(--text-muted)}.model-pill.active .model-pill-badge{border-color:var(--red-border);color:var(--red-text);background:var(--red-subtle)}.studio-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.25rem;align-items:start}@media(max-width:980px){.studio-grid{grid-template-columns:1fr}}.panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.45rem}.section-title{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:flex;align-items:center;gap:.4rem}.section-title svg{width:14px;height:14px}.prompt-actions{display:flex;gap:.4rem}.btn-action-text{background:transparent;border:none;color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .4rem;border-radius:var(--radius-sm);transition:var(--transition)}.btn-action-text:hover{color:#fff;background:var(--bg-hover)}.btn-action-text.accent{color:var(--red-primary)}.btn-action-text.accent:hover{background:var(--red-subtle)}.prompt-box{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem;margin-bottom:.85rem;transition:var(--transition)}.prompt-box:focus-within{border-color:var(--red-primary)}.prompt-textarea{width:100%;min-height:90px;background:transparent;border:none;outline:none;color:var(--text-primary);font-family:var(--font-sans);font-size:.92rem;line-height:1.5;resize:vertical}.prompt-textarea::placeholder{color:var(--text-muted)}.prompt-footer{display:flex;justify-content:space-between;align-items:center;padding-top:.5rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-muted)}.quick-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.1rem}.tag-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);font-size:.72rem;padding:.2rem .55rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.tag-btn:hover{border-color:var(--border-light);color:var(--text-primary)}.control-row{margin-bottom:1.1rem}.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}@media(max-width:540px){.style-grid{grid-template-columns:repeat(2,1fr)}}.style-btn{display:flex;align-items:center;gap:.45rem;background:var(--bg-input);border:1px solid var(--border);padding:.5rem .65rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.78rem;font-weight:500;cursor:pointer;transition:var(--transition)}.style-btn svg{width:14px;height:14px;stroke:currentColor}.style-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.style-btn.active{background:var(--red-subtle);border-color:var(--red-primary);color:#fff}.style-btn.active svg{stroke:var(--red-primary)}.ratio-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}@media(max-width:540px){.ratio-grid{grid-template-columns:repeat(3,1fr)}}.ratio-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-input);border:1px solid var(--border);padding:.5rem .25rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.75rem;font-weight:600;cursor:pointer;transition:var(--transition)}.ratio-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.ratio-btn.active{background:var(--red-subtle);border-color:var(--red-primary);color:#fff}.accordion-btn{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--bg-input);border:1px solid var(--border);padding:.55rem .75rem;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.78rem;font-weight:600;cursor:pointer;margin-bottom:1rem}.accordion-btn:hover{color:var(--text-primary);border-color:var(--border-light)}.accordion-icon{width:14px;height:14px;transition:transform .2s}.accordion-btn.open .accordion-icon{transform:rotate(180deg)}.accordion-content{display:none;padding:.85rem;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:1rem;gap:.75rem}.accordion-content.show{display:grid}.field-label{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-bottom:.35rem}.input-text{width:100%;background:var(--bg-main);border:1px solid var(--border);border-radius:var(--radius-sm);color:#fff;padding:.5rem .65rem;font-size:.8rem;outline:none}.input-text:focus{border-color:var(--red-primary)}.input-range{width:100%;accent-color:var(--red-primary);cursor:pointer}.btn-generate{width:100%;background:var(--red-primary);border:none;color:#fff;font-family:var(--font-sans);font-size:.95rem;font-weight:700;letter-spacing:.02em;padding:.85rem;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:var(--transition);box-shadow:0 0 20px #ef444440}.btn-generate:hover{background:var(--red-hover);box-shadow:0 0 25px #ef444466}.btn-generate:active{background:var(--red-active)}.btn-generate:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-generate svg{width:18px;height:18px}.canvas-panel{display:flex;flex-direction:column}.canvas-frame{width:100%;aspect-ratio:1 / 1;background:#000;border:1px solid var(--border);border-radius:var(--radius-sm);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.canvas-img{width:100%;height:100%;object-fit:contain}.canvas-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-muted)}.canvas-empty svg{width:36px;height:36px;stroke:var(--text-muted)}.canvas-empty-text{font-size:.82rem}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#050505eb;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;z-index:10}.loading-overlay.active{display:flex}.loading-spinner{width:42px;height:42px;border:2px solid #222;border-top-color:var(--red-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-status{font-size:.85rem;font-weight:600;color:#fff}.loading-timer{font-family:var(--font-mono);font-size:.75rem;color:var(--red-text)}.canvas-overlay-bar{position:absolute;bottom:0;left:0;right:0;padding:.6rem .75rem;background:#000000d9;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .2s}.canvas-frame:hover .canvas-overlay-bar{opacity:1}.overlay-actions{display:flex;gap:.35rem}.overlay-btn{background:var(--bg-surface);border:1px solid var(--border);color:#fff;padding:.35rem .6rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}.overlay-btn:hover{background:var(--bg-hover);border-color:var(--red-primary)}.overlay-btn svg{width:13px;height:13px}.meta-tags-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}.meta-pill{background:var(--bg-input);border:1px solid var(--border);color:var(--text-secondary);font-size:.7rem;font-family:var(--font-mono);padding:.2rem .5rem;border-radius:var(--radius-sm)}.gallery-section{margin-top:2.5rem;border-top:1px solid var(--border);padding-top:1.5rem}.gallery-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.gallery-title-group{display:flex;align-items:baseline;gap:.5rem}.gallery-heading{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.gallery-count{font-size:.75rem;color:var(--text-muted)}.gallery-filters{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}.filter-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary);font-size:.75rem;font-weight:600;padding:.35rem .65rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.filter-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.filter-btn.active{background:var(--red-subtle);border-color:var(--red-primary);color:#fff}.search-box{background:var(--bg-surface);border:1px solid var(--border);color:#fff;font-size:.75rem;padding:.35rem .65rem;border-radius:var(--radius-sm);outline:none;width:140px}.search-box:focus{border-color:var(--red-primary)}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.gallery-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;position:relative;cursor:pointer;transition:var(--transition)}.gallery-card:hover{border-color:var(--red-primary);transform:translateY(-2px)}.gallery-thumb-box{width:100%;aspect-ratio:1 / 1;background:#000;position:relative}.gallery-thumb{width:100%;height:100%;object-fit:cover}.gallery-card-actions{position:absolute;top:.4rem;right:.4rem;display:flex;gap:.3rem;opacity:0;transition:opacity .15s}.gallery-card:hover .gallery-card-actions{opacity:1}.mini-icon-btn{width:26px;height:26px;background:#000c;border:1px solid var(--border);border-radius:var(--radius-sm);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.mini-icon-btn svg{width:13px;height:13px}.mini-icon-btn:hover{background:var(--red-primary);border-color:var(--red-primary)}.gallery-card-info{padding:.55rem}.gallery-card-prompt{font-size:.75rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.2rem}.gallery-card-meta{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-muted)}.empty-gallery{grid-column:1 / -1;text-align:center;padding:3rem 1rem;color:var(--text-muted);font-size:.85rem}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;padding:1.5rem}.modal-mask.open{display:flex}.modal-box{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius);max-width:520px;width:100%;padding:1.5rem;box-shadow:0 10px 40px #000000e6}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.modal-title{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:.4rem}.modal-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:#fff}.modal-close svg{width:18px;height:18px}.mode-radio-group{display:grid;gap:.5rem;margin-bottom:1.25rem}.mode-card{display:flex;align-items:flex-start;gap:.65rem;background:var(--bg-input);border:1px solid var(--border);padding:.75rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}.mode-card:hover{border-color:var(--border-light)}.mode-card.active{background:var(--red-subtle);border-color:var(--red-primary)}.mode-card input{margin-top:.15rem;accent-color:var(--red-primary)}.mode-card-title{font-size:.82rem;font-weight:600;margin-bottom:.15rem}.mode-card-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.35}.lightbox-card{max-width:960px;width:90vw;max-height:90vh;display:grid;grid-template-columns:1.15fr .85fr;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden}@media(max-width:780px){.lightbox-card{grid-template-columns:1fr;max-height:90vh;overflow-y:auto}}.lightbox-view{background:#000;display:flex;align-items:center;justify-content:center;padding:1rem}.lightbox-img{max-width:100%;max-height:75vh;object-fit:contain}.lightbox-info{padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto}.lightbox-prompt-box{background:var(--bg-input);border:1px solid var(--border);padding:.75rem;border-radius:var(--radius-sm);font-size:.82rem;line-height:1.5;margin-bottom:1rem;max-height:180px;overflow-y:auto}.lightbox-buttons{display:flex;gap:.5rem;margin-top:1.25rem}.btn-secondary{flex:1;background:var(--bg-input);border:1px solid var(--border);color:#fff;font-size:.8rem;font-weight:600;padding:.6rem;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.35rem}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-light)}.btn-primary-red{flex:1.2;background:var(--red-primary);border:none;color:#fff;font-size:.8rem;font-weight:700;padding:.6rem;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.35rem}.btn-primary-red:hover{background:var(--red-hover)}.toast-wrap{position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}.toast-item{background:var(--bg-surface);border:1px solid var(--border-light);border-left:3px solid var(--red-primary);padding:.6rem 1rem;border-radius:var(--radius-sm);font-size:.8rem;display:flex;align-items:center;gap:.5rem;color:#fff;box-shadow:0 4px 20px #000c;pointer-events:auto;animation:toastIn .2s ease-out}@keyframes toastIn{0%{transform:translate(30px);opacity:0}to{transform:translate(0);opacity:1}}