:root { --bg:#0f1115; --panel:#1a1d24; --line:#2a2f3a; --fg:#e6e8eb; --muted:#9aa3b2; --accent:#4f7cff; --err:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width:1000px; margin:0 auto; padding:24px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--line); }
.topbar nav { display:flex; gap:16px; align-items:center; }
.logo { font-weight:700; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:16px; }
.login { max-width:360px; margin:60px auto; }
label { display:block; margin:10px 0; }
input, textarea, select { width:100%; padding:8px 10px; background:#0c0e12; color:var(--fg); border:1px solid var(--line); border-radius:6px; font:inherit; }
textarea { min-height:90px; resize:vertical; }
button { padding:8px 14px; background:var(--accent); color:#fff; border:0; border-radius:6px; cursor:pointer; font:inherit; }
button.secondary { background:#2a2f3a; }
button:hover { filter:brightness(1.08); }
.inline { display:inline; }
.error { color:var(--err); }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.thumb { width:100%; border-radius:8px; border:1px solid var(--line); display:block; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spinner { display:none; } .htmx-request .spinner { display:inline; } .htmx-request.spinner { display:inline; }