:root{--bg: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--text: #f0f0f0;--text-muted: #888;--accent: #6366f1;--accent-hover: #818cf8;--danger: #ef4444;--radius: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{min-height:100vh;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--bg-tertiary)}header h1{font-size:1.5rem;font-weight:600}main{display:flex;flex:1}aside{width:320px;padding:1.5rem;background:var(--bg-secondary);border-right:1px solid var(--bg-tertiary)}section{flex:1;padding:1.5rem}.search{position:relative}.search input{width:300px;padding:.5rem 1rem;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius);color:var(--text);font-size:.9rem}.search input:focus{outline:none;border-color:var(--accent)}.search-results{position:absolute;top:100%;right:0;width:400px;max-height:400px;overflow-y:auto;background:var(--bg-secondary);border:1px solid var(--bg-tertiary);border-radius:var(--radius);margin-top:.5rem;z-index:100}.search-results ul{list-style:none}.search-results li{padding:.75rem 1rem;cursor:pointer;border-bottom:1px solid var(--bg-tertiary)}.search-results li:hover{background:var(--bg-tertiary)}.gallery-tag{display:inline-block;background:var(--accent);padding:.125rem .5rem;border-radius:4px;font-size:.75rem;margin-right:.5rem}.generate-form{display:flex;flex-direction:column;gap:1rem}.generate-form h3{margin-bottom:.5rem}.generate-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.875rem;color:var(--text-muted)}.generate-form input,.generate-form select,.generate-form textarea{padding:.5rem .75rem;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius);color:var(--text);font-size:.9rem;font-family:inherit}.generate-form input:focus,.generate-form select:focus,.generate-form textarea:focus{outline:none;border-color:var(--accent)}.generate-form .row{display:flex;gap:1rem}.generate-form .row label{flex:1}.generate-form button{padding:.75rem;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.generate-form button:hover:not(:disabled){background:var(--accent-hover)}.generate-form button:disabled{opacity:.5;cursor:not-allowed}.generate-form .error{color:var(--danger);font-size:.875rem}.gallery{display:flex;gap:1.5rem;height:100%}.gallery-sidebar{width:200px;flex-shrink:0}.gallery-sidebar h3{margin-bottom:.75rem;font-size:1rem}.gallery-sidebar ul{list-style:none}.gallery-sidebar li{padding:.5rem .75rem;border-radius:var(--radius);cursor:pointer;margin-bottom:.25rem}.gallery-sidebar li:hover{background:var(--bg-tertiary)}.gallery-sidebar li.active{background:var(--accent)}.gallery-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;align-content:start}.gallery-grid .empty{color:var(--text-muted);grid-column:1 / -1;text-align:center;padding:2rem}.image-card{background:var(--bg-secondary);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s}.image-card:hover{transform:scale(1.02)}.image-card img{width:100%;aspect-ratio:1;object-fit:cover}.image-card .placeholder{width:100%;aspect-ratio:1;background:var(--bg-tertiary)}.image-card .prompt{padding:.5rem .75rem;font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.modal{position:relative;background:var(--bg-secondary);border-radius:var(--radius);max-width:800px;max-height:90vh;overflow:auto}.modal .close{position:absolute;top:.5rem;right:.5rem;width:2rem;height:2rem;background:var(--bg-tertiary);border:none;border-radius:50%;color:var(--text);font-size:1.25rem;cursor:pointer;z-index:10}.modal img{width:100%;max-height:60vh;object-fit:contain}.modal .meta{padding:1rem 1.5rem}.modal .meta p{margin-bottom:.5rem;font-size:.9rem}.modal .meta strong{color:var(--text-muted)}.modal .delete{margin:0 1.5rem 1.5rem;padding:.5rem 1rem;background:var(--danger);border:none;border-radius:var(--radius);color:#fff;cursor:pointer}.modal .delete:disabled{opacity:.5}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center}.login-form{background:var(--bg-secondary);padding:2rem;border-radius:var(--radius);width:100%;max-width:360px;display:flex;flex-direction:column;gap:1rem}.login-form h1{text-align:center;margin-bottom:.5rem}.login-form .setup-notice{text-align:center;color:var(--text-muted);font-size:.9rem}.login-form .error{color:var(--danger);font-size:.875rem;text-align:center}.login-form input{padding:.75rem;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius);color:var(--text);font-size:1rem}.login-form input:focus{outline:none;border-color:var(--accent)}.login-form button{padding:.75rem;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-size:1rem;font-weight:500;cursor:pointer}.login-form button:hover:not(:disabled){background:var(--accent-hover)}.login-form button:disabled{opacity:.5;cursor:not-allowed}.logout-btn{padding:.5rem 1rem;background:transparent;border:1px solid var(--bg-tertiary);border-radius:var(--radius);color:var(--text-muted);font-size:.875rem;cursor:pointer}.logout-btn:hover{background:var(--bg-tertiary);color:var(--text)}.loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
