:root { --bg:#0f1115; --panel:#1a1d24; --fg:#e6e6e6; --muted:#9aa0ac; --accent:#f5a623; --ok:#3ecf8e; --bad:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.nav { display:flex; gap:1rem; align-items:center; padding:.75rem 1.25rem; background:var(--panel); border-bottom:1px solid #2a2e38; }
.nav .brand { font-weight:700; margin-right:1rem; }
.nav a.active { color:#fff; border-bottom:2px solid var(--accent); }
.nav .spacer { flex:1; }

.container { max-width:1100px; margin:0 auto; padding:1.5rem 1.25rem; }

.header { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1rem; }
.header h1 { margin:0; }
.count { color:var(--muted); font-size:1rem; }
.status { color:var(--muted); font-size:.9rem; }
.actions { margin-left:auto; display:flex; gap:.5rem; }
.actions form { margin:0; }

button { background:var(--accent); color:#1a1d24; border:0; border-radius:6px; padding:.5rem .9rem; font-weight:600; cursor:pointer; }
button:hover { filter:brightness(1.07); }
button.link { background:none; color:var(--bad); padding:0; font-weight:500; }
.ok { color:var(--ok); } .bad { color:var(--bad); }
.ok-banner { background:#143; color:var(--ok); padding:.6rem .9rem; border-radius:6px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:1rem; }
.card { margin:0; background:var(--panel); border:1px solid #2a2e38; border-radius:8px; overflow:hidden; }
.card img, .card video { width:100%; height:170px; object-fit:cover; display:block; background:#000; }
.card figcaption { padding:.5rem .6rem; font-size:.8rem; }
.card .name { display:block; color:var(--muted); word-break:break-all; margin-bottom:.35rem; }
.card .row { display:flex; justify-content:space-between; align-items:center; }
.empty { color:var(--muted); }

.login { max-width:320px; margin:8vh auto; background:var(--panel); padding:2rem; border-radius:10px; text-align:center; }
.login label, .config label { display:block; text-align:left; margin:.6rem 0; color:var(--muted); font-size:.9rem; }
.login input, .config input, .config select { width:100%; margin-top:.25rem; padding:.5rem; border-radius:6px; border:1px solid #2a2e38; background:#0f1115; color:var(--fg); }
.login button { width:100%; margin-top:1rem; }
.error { color:var(--bad); }

.config { max-width:560px; }
.config fieldset { border:1px solid #2a2e38; border-radius:8px; margin:0 0 1rem; padding:.5rem 1rem 1rem; }
.config legend { color:var(--accent); padding:0 .4rem; }