*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0c0c0c;--surface:#141414;--surface2:#1c1c1c;--border:#2a2a2a;--border2:#3a3a3a;--text:#e8e4dc;--text-muted:#7a7570;--text-dim:#4a4642;--accent:#c8a96e;--accent-dk:#8a6e3e;--danger:#c06060;--radius:4px;--mono:'DM Mono',monospace;--serif:'DM Serif Display',serif;--transition:200ms ease}
html{font-size:16px}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-weight:300;min-height:100vh;display:flex;flex-direction:column}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{color:var(--accent);font-size:1.4rem;animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.logo-text{font-family:var(--serif);font-size:1.5rem;letter-spacing:0.04em}
.header-right{display:flex;align-items:center;gap:12px}
.header-tag{font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border);padding:4px 10px;border-radius:100px}
.user-badge{font-size:0.65rem;letter-spacing:0.1em;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.logout-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;font-family:var(--mono);font-size:0.6rem;letter-spacing:0.1em;padding:4px 10px;text-transform:uppercase;transition:all var(--transition)}
.logout-btn:hover{border-color:var(--danger);color:var(--danger)}
.auth-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:40px;width:100%;max-width:400px}
.auth-title{font-family:var(--serif);font-size:1.6rem;margin-bottom:8px}
.auth-sub{font-size:0.72rem;color:var(--text-muted);margin-bottom:28px;line-height:1.6}
.auth-tabs{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.auth-tab{flex:1;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;padding:10px;text-transform:uppercase;transition:all var(--transition)}
.auth-tab+.auth-tab{border-left:1px solid var(--border)}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{background:var(--accent);color:var(--bg);font-weight:500}
.auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.auth-label{font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-muted)}
.auth-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:0.875rem;outline:none;padding:12px 14px;transition:border-color var(--transition)}
.auth-input:focus{border-color:var(--accent-dk)}
.auth-input::placeholder{color:var(--text-dim)}
.auth-btn{background:var(--accent);border:none;border-radius:var(--radius);color:var(--bg);cursor:pointer;font-family:var(--mono);font-size:0.8rem;font-weight:500;letter-spacing:0.12em;padding:14px 20px;text-transform:uppercase;transition:all var(--transition);width:100%;margin-top:8px}
.auth-btn:hover{background:#d4b87e;transform:translateY(-1px)}
.auth-btn:disabled{background:var(--border2);color:var(--text-dim);cursor:not-allowed;transform:none}
.auth-msg{font-size:0.72rem;margin-top:14px;padding:10px 14px;border-radius:var(--radius);display:none}
.auth-msg.error{background:rgba(192,96,96,0.1);border:1px solid var(--danger);color:#e88888;display:block}
.auth-msg.success{background:rgba(100,180,100,0.1);border:1px solid #4a7a4a;color:#8bc48b;display:block}
.app{display:grid;grid-template-columns:360px 1fr;flex:1;height:calc(100vh - 65px)}
.panel{overflow-y:auto}
.panel--controls{border-right:1px solid var(--border);background:var(--surface)}
.panel-inner{padding:28px 24px;display:flex;flex-direction:column;gap:22px}
.panel--output{background:var(--bg);display:flex;flex-direction:column}
.field-group{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.prompt-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:0.875rem;font-weight:300;line-height:1.65;padding:14px 16px;resize:vertical;min-height:110px;transition:border-color var(--transition);outline:none}
.prompt-input::placeholder{color:var(--text-dim)}
.prompt-input:focus{border-color:var(--accent-dk);box-shadow:0 0 0 2px rgba(200,169,110,0.08)}
.char-count{font-size:0.65rem;color:var(--text-dim);text-align:right}
.ratio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ratio-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;transition:all var(--transition);font-family:var(--mono)}
.ratio-btn:hover{border-color:var(--border2);color:var(--text)}
.ratio-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(200,169,110,0.06)}
.ratio-icon{border:1.5px solid currentColor;display:block;opacity:0.8}
.ratio-icon--square{width:22px;height:22px}
.ratio-icon--landscape{width:30px;height:18px}
.ratio-icon--portrait{width:16px;height:26px}
.ratio-label{font-size:0.7rem;font-weight:500;letter-spacing:0.06em}
.ratio-sub{font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}
.generate-btn{background:var(--accent);border:none;border-radius:var(--radius);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:0.8rem;font-weight:500;letter-spacing:0.12em;padding:16px 20px;text-transform:uppercase;transition:all var(--transition);width:100%}
.generate-btn:hover{background:#d4b87e;transform:translateY(-1px);box-shadow:0 6px 20px rgba(200,169,110,0.25)}
.generate-btn:disabled{background:var(--border2);color:var(--text-dim);cursor:not-allowed;transform:none;box-shadow:none}
.btn-icon{font-size:1.1rem}
.upload-zone{border:1.5px dashed var(--border2);border-radius:var(--radius);padding:18px;text-align:center;transition:all var(--transition);background:var(--surface2)}
.upload-zone.drag-over{border-color:var(--accent);background:rgba(200,169,110,0.04)}
.upload-icon{font-size:1.4rem;color:var(--text-dim);margin-bottom:6px}
.upload-label{font-size:0.7rem;color:var(--text-muted);margin-bottom:4px}
.upload-sub{font-size:0.6rem;color:var(--text-dim);margin-bottom:10px}
.browse-btn{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;padding:6px 14px;text-transform:uppercase;transition:all var(--transition)}
.browse-btn:hover{border-color:var(--accent);color:var(--accent)}
.preview-wrap{position:relative;margin-top:8px}
.preview-wrap img{width:100%;border-radius:var(--radius);border:1px solid var(--border);max-height:160px;object-fit:cover;display:block}
.clear-img-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.75);border:none;color:#fff;cursor:pointer;border-radius:50%;width:24px;height:24px;font-size:0.75rem;display:flex;align-items:center;justify-content:center;transition:background var(--transition)}
.clear-img-btn:hover{background:var(--danger)}
.mode-badge{font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;padding:3px 8px;border-radius:100px;font-weight:500}
.mode-badge--gen{background:rgba(100,150,100,0.15);color:#8bc48b;border:1px solid #4a7a4a}
.mode-badge--edit{background:rgba(200,169,110,0.15);color:var(--accent);border:1px solid var(--accent-dk)}
.history-section{border-top:1px solid var(--border);padding-top:16px}
.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.clear-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;transition:color var(--transition)}
.clear-btn:hover{color:var(--danger)}
.history-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.history-item{background:var(--surface2);border:1px solid transparent;border-radius:var(--radius);color:var(--text-muted);cursor:pointer;font-size:0.72rem;line-height:1.4;padding:9px 12px;transition:all var(--transition);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-item:hover{border-color:var(--border2);color:var(--text)}
.output-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.output-current{display:flex;align-items:center;justify-content:center;padding:32px;flex:0 0 auto;border-bottom:1px solid var(--border);min-height:320px}
.empty-state{text-align:center;color:var(--text-dim)}
.empty-glyph{font-size:3rem;margin-bottom:16px;opacity:0.3}
.empty-title{font-family:var(--serif);font-size:1.1rem;color:var(--text-muted);margin-bottom:8px}
.empty-sub{font-size:0.75rem;letter-spacing:0.08em}
.loading-state{text-align:center}
.loader-ring{width:48px;height:48px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.9s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--serif);font-size:1.2rem;color:var(--text);margin-bottom:8px}
.loading-sub{font-size:0.72rem;color:var(--text-dim);letter-spacing:0.08em}
.result-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:600px}
.result-img-wrap{width:100%;border-radius:6px;overflow:hidden;border:1px solid var(--border);line-height:0}
.result-img-wrap img{width:100%;height:auto;display:block;animation:fadeIn 0.4s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}
.result-actions{display:flex;gap:10px}
.action-btn{background:var(--accent);border:none;border-radius:var(--radius);color:var(--bg);cursor:pointer;font-family:var(--mono);font-size:0.72rem;font-weight:500;letter-spacing:0.1em;padding:10px 18px;text-transform:uppercase;transition:all var(--transition)}
.action-btn:hover{background:#d4b87e;transform:translateY(-1px)}
.action-btn--ghost{background:transparent;border:1px solid var(--border2);color:var(--text-muted)}
.action-btn--ghost:hover{background:var(--surface2);color:var(--text)}
.result-caption{font-size:0.7rem;color:var(--text-dim);text-align:center;max-width:480px;line-height:1.6}
.error-state{text-align:center}
.error-icon{font-size:2rem;color:var(--danger);margin-bottom:12px}
.error-msg{font-size:0.82rem;color:var(--text-muted);margin-bottom:16px;max-width:320px;line-height:1.6}
.gallery-section{flex:1;overflow-y:auto;padding:20px 24px}
.gallery-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.gallery-title{font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.gallery-clear{background:none;border:none;color:var(--text-dim);cursor:pointer;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;transition:color var(--transition)}
.gallery-clear:hover{color:var(--danger)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.gallery-item{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);cursor:pointer;aspect-ratio:1;transition:all var(--transition)}
.gallery-item:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background var(--transition);display:flex;align-items:flex-end;padding:8px}
.gallery-item:hover .gallery-item-overlay{background:rgba(0,0,0,0.5)}
.gallery-item-prompt{font-size:0.58rem;color:#fff;opacity:0;transition:opacity var(--transition);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.gallery-item:hover .gallery-item-prompt{opacity:1}
.gallery-item-dl{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.7);border:none;color:#fff;cursor:pointer;border-radius:50%;width:26px;height:26px;font-size:0.75rem;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition)}
.gallery-item:hover .gallery-item-dl{opacity:1}
.gallery-item-dl:hover{background:var(--accent);color:var(--bg)}
.gallery-empty{font-size:0.72rem;color:var(--text-dim);text-align:center;padding:24px 0}
@media(max-width:820px){.app{grid-template-columns:1fr;height:auto}.panel--controls{border-right:none;border-bottom:1px solid var(--border)}}