:root { --bg:#1b1c1e; --panel:#26282b; --line:#3a3d41; --text:#e6e6e6;
        --muted:#9aa0a6; --accent:#7fb2e5; --main:min(1600px, calc((100vw - 4rem) / 1.3)); }
@media (max-width: 800px) { :root { --main:calc(100vw - 2rem); } }   /* narrow screens: mounts wrap below */
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.45 system-ui, "Segoe UI", sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header { background:var(--panel); border-bottom:1px solid var(--line);
         padding:.6rem 1rem; display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
header .title { font-weight:600; color:var(--text); }
header form { margin-left:auto; display:flex; gap:.4rem; }
main { padding:1rem; }
input, select, button { background:#2f3236; color:var(--text); border:1px solid var(--line);
                        border-radius:4px; padding:.3rem .5rem; font:inherit; }
button { cursor:pointer; } button:hover { border-color:var(--accent); }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; margin-bottom:1rem; }
.filters label { display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); gap:.15rem; }
.filters input[type=number] { width:6rem; }
.count { color:var(--muted); margin:.2rem 0 1rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:.8rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden;
        display:flex; flex-direction:column; color:var(--text); }
.card:hover { border-color:var(--accent); text-decoration:none; }
.card .pic { aspect-ratio:3/2; background:#111; display:flex; align-items:center; justify-content:center; }
.card img { max-width:100%; max-height:100%; display:block; }
.card .cap { padding:.4rem .5rem; font-size:.8rem; }
.card .cap b { display:block; font-weight:600; }
.card .cap span { color:var(--muted); }
.pager { display:flex; gap:1rem; justify-content:center; margin:1.2rem 0; align-items:center; }
table.data { border-collapse:collapse; width:100%; max-width:62rem; }
table.data th, table.data td { text-align:left; padding:.3rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.data th { color:var(--muted); font-weight:500; white-space:nowrap; width:11rem; }
.viewer { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
.main-img { width:var(--main); }
.main-img img { width:100%; display:block; background:#111; border-radius:4px; }
.mounts { display:flex; flex-direction:column; gap:.8rem; }
.mount { width:calc(var(--main) / 4); }          /* a quarter of the main image */
.mount img { width:100%; display:block; border-radius:4px; background:#111; }
.mount small, .main-img small { color:var(--muted); display:block; margin-top:.2rem; }
.nav { display:flex; gap:1rem; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; }
.nav .spacer { flex:1; }
.missing { padding:2rem; color:var(--muted); background:#111; border-radius:4px; }
.below { margin-top:1.2rem; }
.who { margin-left:0 !important; align-items:center; color:var(--muted); font-size:.85rem; }
header form + form.who { margin-left:.8rem; }
form.login { max-width:22rem; margin:4rem auto; background:var(--panel); border:1px solid var(--line);
             border-radius:8px; padding:1.5rem; display:flex; flex-direction:column; gap:.9rem; }
form.login h2 { margin:0 0 .3rem; }
form.login label { display:flex; flex-direction:column; gap:.2rem; color:var(--muted); font-size:.85rem; }
form.login .error { color:#ff9d8f; margin:0; }