/* Seerr-like: dark slate background, indigo accent, coloured status chips on poster cards. */
:root { --bg:#0f141c; --panel:#1a212d; --panel2:#232c3b; --fg:#e8ecf3; --muted:#94a0b4; --line:#2c3646;
        --accent:#6366f1; --accent2:#818cf8; --ok:#22c55e; --warn:#eab308; --err:#ef4444; --info:#3b82f6; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent2); text-decoration:none; }
h1 { font-size:26px; margin:8px 0 12px; } h2 { font-size:19px; margin:28px 0 12px; }

/* header: brand, search, nav */
header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
         padding:10px 16px; background:rgba(15,20,28,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:18px; letter-spacing:.3px;
         background:linear-gradient(90deg, var(--accent2), #c084fc); -webkit-background-clip:text; background-clip:text; color:transparent; }
header .search { flex:1 1 260px; max-width:520px; }
header .search input { border-radius:999px; padding:8px 16px; background:var(--panel); }
header nav { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
header nav a { color:var(--muted); font-weight:500; } header nav a:hover { color:var(--fg); }
/* phones: brand + search on one row, the nav as one swipeable row under it - two short rows instead of three tall
   ones, so the sticky header no longer covers a fifth of the screen */
@media (max-width:640px) {
  header { gap:8px 12px; padding:8px 12px; }
  .brand { font-size:16px; }
  header .search { flex:1 1 0; min-width:0; max-width:none; }
  header .search input { padding:6px 14px; }
  header nav { flex:1 0 100%; flex-wrap:nowrap; gap:18px; overflow-x:auto; white-space:nowrap; font-size:14px;
               scrollbar-width:none; }
  header nav::-webkit-scrollbar { display:none; }
  header .who { display:none; }
  /* iOS zooms the whole page into any input under 16px when it is tapped */
  body input { font-size:16px; }  /* "body" outranks the general input rule further down */
}
.count { display:inline-block; min-width:20px; padding:0 6px; margin-left:4px; border-radius:999px; background:var(--warn);
         color:#111; font-size:12px; font-weight:700; text-align:center; }
main { max-width:1200px; margin:0 auto; padding:16px; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:24px; }

/* forms */
input { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--fg); font:inherit; }
input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
label { display:block; margin:10px 0; }
button, .button { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:0; border-radius:8px;
                  background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button:hover, .button:hover { background:#4f46e5; }
button.secondary { background:transparent; color:var(--accent2); border:1px solid var(--accent); }
button.ok { background:#16a34a; } button.bad { background:#b91c1c; } button.ghost { background:var(--panel2); color:var(--fg); }
button.small { padding:4px 10px; font-size:13px; }
button.link { background:none; color:var(--muted); padding:0; font-weight:400; }
form.inline { display:inline; }
.row { display:flex; gap:8px; } .row input { flex:1; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin:12px 0; }
.narrow { max-width:380px; margin:48px auto; }
.muted { color:var(--muted); } .error { color:var(--err); }

/* status chips (same names as downloads.STATUSES, plus "partial") */
.chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#fff; white-space:nowrap; }
.chip.available { background:var(--ok); } .chip.partial { background:#15803d; }
.chip.approved { background:var(--accent); } .chip.downloading { background:var(--info); }
.chip.waiting { background:var(--panel2); color:var(--fg); border:1px solid var(--line); }
.chip.pending { background:var(--warn); color:#111; } .chip.declined, .chip.failed { background:var(--err); }

/* poster grid */
.grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:18px; }
.grid li { position:relative; }
.grid a.tile { display:flex; flex-direction:column; gap:3px; color:var(--fg); }
.grid a.tile strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grid a.tile .muted { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.poster { position:relative; }
.grid img, .noimg { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; background:var(--panel2);
                    box-shadow:0 4px 14px rgba(0,0,0,.35); transition:transform .15s; display:block; }
.grid a.tile:hover img { transform:scale(1.03); }
.round img, .round .noimg { border-radius:50%; }
.poster .chip { position:absolute; top:8px; right:8px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.noimg.liked { display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:#fff;
               background:linear-gradient(135deg, #4b2bd6, #9fb7e8); }

/* detail header (album / artist / playlist) */
.hero { display:flex; gap:22px; align-items:flex-end; flex-wrap:wrap; margin:8px 0 20px; }
.hero img, .hero .noimg { width:200px; height:200px; object-fit:cover; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.hero.round img, .hero.round .noimg { border-radius:50%; }
.hero .info { flex:1 1 260px; } .hero h1 { font-size:32px; margin:4px 0; }
.hero .actions { margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* tables */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { color:var(--muted); font-weight:600; font-size:13px; }
tr:hover td { background:rgba(255,255,255,.02); }
td.thumb { width:52px; } td.thumb img, td.thumb .noimg { width:44px; height:44px; border-radius:6px; object-fit:cover; display:block; }
td.act { text-align:right; white-space:nowrap; }
@media (max-width:640px) { .hide-sm { display:none; } .hero img, .hero .noimg { width:140px; height:140px; } }

.tabs { display:flex; gap:8px; margin:0 0 16px; } .tabs a { padding:6px 14px; border-radius:999px; background:var(--panel); color:var(--muted); }
.tabs a.on { background:var(--accent); color:#fff; }
.titlebar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.empty { padding:24px; text-align:center; color:var(--muted); }

/* playlists select mode (static/select.js) */
.pickbar { margin:8px 0; min-height:0; }
.grid input[name=playlist] { display:none; }
.picking .grid li { cursor:pointer; }
.picking .grid li::after { content:""; position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%;
  border:2px solid #fff; background:rgba(0,0,0,.35); }
.picking .grid li.picked::after { background:var(--accent); box-shadow:inset 0 0 0 4px rgba(0,0,0,.25); }
.picking .grid li.picked img, .picking .grid li.picked .noimg { outline:3px solid var(--accent); outline-offset:-3px; }
[hidden] { display:none !important; }
.spaced { margin-top:32px; } .tiny { font-size:12px; }