/* Vinyl UI – shared styles for overview & detail
   -------------------------------------------------- */
:root {
  --bg:#fafafa; --card:#fff; --text:#111; --muted:#666; --line:#e5e5e5;
  --brand:#111; --brand-cta:#0a7; --chip:#f2f2f2; --chip-active:#111; --chip-active-text:#fff;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#151821; --text:#eaeaea; --muted:#9aa3af; --line:#232735;
    --brand:#eaeaea; --chip:#1c2230; --chip-active:#2dd4bf; --chip-active-text:#072b26;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
a{ color:inherit; text-decoration:none; }

/* Layout wrappers */
.container{ max-width:1200px; margin:24px auto 64px; padding:0 16px; }
.sep{ height:1px; background:var(--line); margin:16px 0; border:0; }
.muted{ color:var(--muted); }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Topbar */
header.topbar{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; }
.brand svg{ width:28px; height:28px; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Buttons / Chips */
.btn{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.btn.primary{ border-color:transparent; background:var(--brand-cta); color:#041; font-weight:700; }
.btn.ghost{ background:transparent; }
.chip{ padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--line); font-size:.92rem; cursor:pointer; }
.chip.active{ background:var(--chip-active); color:var(--chip-active-text); border-color:transparent; }
.pill{ padding:4px 8px; border-radius:999px; background:var(--chip); border:1px solid var(--line); font-size:.85rem; }
.hide{ display:none !important; }

/* Hero (both pages) */
.hero{ position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); margin-bottom:18px; }
.hero-bg{ position:absolute; inset:0; background-position:center; background-size:cover; filter: blur(24px) saturate(1.1); transform: scale(1.1); opacity:.28; }
.hero-grad{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%); mix-blend-mode: multiply; }
.hero-inner{ position:relative; display:flex; gap:20px; padding:18px; align-items:center; }
.hero img{ width:220px; height:220px; object-fit:cover; border-radius:12px; background:#0002; box-shadow:0 6px 22px rgba(0,0,0,.2); }
.title{ font-weight:800; font-size:1.35rem; }

/* Controls (overview) */
.controls{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; margin:18px 0 8px; }
.search{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.search input{ flex:1; font:inherit; background:transparent; border:0; outline:0; color:var(--text); }
.select{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); }

/* Grid (overview) */
.grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.card{ position:relative; border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden; transition: transform .12s ease, box-shadow .12s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.thumb{ width:100%; height:220px; object-fit:cover; background:#0001; display:block; }
.card-body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; }
.year-badge{ position:absolute; top:8px; left:8px; background:rgba(0,0,0,.65); color:#fff; padding:3px 7px; border-radius:999px; font-size:.8rem; }

/* Favs (overview) */
.fav{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:999px; display:grid; place-items:center; background:rgba(255,255,255,.7); border:1px solid var(--line); cursor:pointer; }
.fav svg{ width:16px; height:16px; fill:none; stroke:#000; opacity:.7; }
.fav.active{ background:#f6d200; border-color:#d1b800; }
.fav.active svg{ stroke:#4a3b00; opacity:1; }

/* Skeleton shimmer (overview) */
.skeleton{ position:relative; overflow:hidden; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, #ffffff20, transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }

/* Cards (detail) */
.content{ display:grid; grid-template-columns:1fr; gap:18px; }
.card-head{ padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; }
.card-body{ padding:12px 14px; }

/* Tables (detail) */
table{ border-collapse:collapse; width:100%; }
th,td{ padding:8px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th{ text-align:left; color:var(--muted); font-weight:600; }
td.nowrap{ white-space:nowrap; }
.play{ padding:6px 10px; font-size:.92rem; border-radius:8px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
.ext{ font-size:.92rem; opacity:.9; }

/* Floating prev/next (detail) */
.nav-btn{
  position: fixed; top:50%; transform:translateY(-50%);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);
  border:1px solid var(--line); border-radius:999px;
  padding:.7rem .9rem; box-shadow:0 10px 24px rgba(0,0,0,.12);
  text-decoration:none; color:var(--text); display:inline-flex; align-items:center; gap:.5rem;
}
@media (prefers-color-scheme: dark){ .nav-btn{ background:rgba(21,24,33,.9); } }
.nav-prev{ left:.75rem; } .nav-next{ right:.75rem; }
.nav-btn .label{ max-width:36ch; display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-btn:hover .label{ display:inline; }

/* Footer */
footer{ margin:28px 0; display:flex; justify-content:space-between; align-items:center; font-size:.92rem; color:var(--muted); }
.link-muted{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* Responsive tweaks */
@media (max-width: 820px){
  .hero-inner{ flex-direction:column; align-items:flex-start; }
  .hero img{ width:100%; height:240px; }
  .controls{ grid-template-columns:1fr; }
  .nav-btn .label{ display:none; }
}