:root{--bg: #0b0d10;--panel: #14171c;--panel-2: #1a1f26;--border: #2a2f38;--text: #e8ebf0;--text-dim: #98a1ad;--accent: #ff7d3b;--accent-hover: #ff8f57;--danger: #ff5a5a;--ok: #5cd49e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}#app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--panel)}.topbar h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.3px}.topbar .user{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--text-dim)}.topbar .user a{color:var(--text-dim);text-decoration:none}.topbar .user a:hover{color:var(--text)}.topbar button{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px}.topbar button:hover{color:var(--text);border-color:var(--text-dim)}main{flex:1;padding:24px;max-width:1100px;margin:0 auto;width:100%}.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:16px;text-align:center}.gate h2{font-size:22px;font-weight:600;margin:0}.gate p{color:var(--text-dim);margin:0;max-width:420px}.gate .btn-google{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#14171c;border:0;padding:12px 22px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px}.gate .btn-google:hover{background:var(--accent-hover)}.gate.denied h2{color:var(--danger)}.generator{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:880px){.generator{grid-template-columns:420px 1fr}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px}.panel h3{margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim)}textarea{width:100%;min-height:140px;resize:vertical;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px;font-family:inherit;font-size:14px;line-height:1.5}textarea:focus{outline:none;border-color:var(--accent)}.btn{background:var(--accent);color:#14171c;border:0;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--text-dim)}.meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-dim);margin-top:10px}.meta span{display:inline-flex;gap:4px;align-items:center}.meta b{color:var(--text);font-weight:500}.result img{width:100%;border-radius:8px;display:block}.empty-state{color:var(--text-dim);font-size:13px;padding:32px;text-align:center;border:1px dashed var(--border);border-radius:8px}.error{color:var(--danger);font-size:13px;padding:10px 12px;background:#ff5a5a14;border:1px solid rgba(255,90,90,.25);border-radius:8px}.history{margin-top:24px}.history-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}.history-item img{width:56px;height:56px;object-fit:cover;border-radius:6px}.history-item .prompt{flex:1;font-size:13px;color:var(--text)}.history-item .when{font-size:11px;color:var(--text-dim)}table.users{width:100%;border-collapse:collapse;font-size:14px}table.users th,table.users td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--border)}table.users th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);font-weight:600}table.users tr:hover td{background:var(--panel-2)}.role-admin{color:var(--accent);font-weight:600}.role-user{color:var(--text-dim)}.add-user{display:flex;gap:8px;margin-top:14px}.add-user input,.add-user select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:inherit;font-size:14px}.add-user input{flex:1}.add-user input:focus,.add-user select:focus{outline:none;border-color:var(--accent)}.tabs{display:flex;gap:6px;margin-bottom:18px}.tab{background:transparent;color:var(--text-dim);border:1px solid var(--border);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px}.tab.active{background:var(--panel);color:var(--text);border-color:var(--text-dim)}
