:root { --bg:#f6f7f9; --card:#fff; --text:#1c1e21; --muted:#6b7280; --accent:#2563eb; --done:#16a34a; --border:#e2e5ea; --danger:#dc2626; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#121417; --card:#1b1e23; --text:#e6e8eb; --muted:#8b93a1; --accent:#60a5fa; --done:#4ade80; --border:#2a2e35; --danger:#f87171; }
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:16px system-ui, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; }
header { display:flex; justify-content:space-between; align-items:center; padding:16px; max-width:900px; margin:auto; }
h1 { margin:0; font-size:1.4rem; }
main { max-width:900px; margin:auto; padding:0 16px 32px; }
input, button, .btn { font:inherit; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); }
button { cursor:pointer; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger:hover { border-color:var(--danger); color:var(--danger); }
button:disabled { opacity:.5; cursor:default; }
footer { max-width:900px; margin:auto; padding:0 16px 32px; color:var(--muted); font-size:.75rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

#login { max-width:320px; margin:20vh auto 0; padding:0 16px; display:flex; flex-direction:column; gap:10px; }
#login-error { color:var(--danger); min-height:1.2em; font-size:.9rem; }

#search-form { display:flex; gap:8px; margin-bottom:12px; }
#search-form input { flex:1; }

.card { display:flex; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px; }
.card .poster { width:60px; height:90px; border-radius:6px; object-fit:cover; background:var(--border); flex:none; }
.card .info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.card .name { font-weight:600; }
.card .meta { color:var(--muted); font-size:.85rem; }
.card .ov { color:var(--muted); font-size:.85rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card.link { cursor:pointer; }
.card.link:hover { border-color:var(--accent); }
.card .side { align-self:center; }
.bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:auto; }
.bar > i { display:block; height:100%; background:var(--accent); }
.done .bar > i { background:var(--done); }
#results { margin-bottom:16px; }
.section-title { color:var(--muted); font-size:.85rem; margin:16px 0 8px; }

.hero { display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
.hero .poster { width:120px; aspect-ratio:2/3; object-fit:cover; border-radius:8px; flex:none; background:var(--border); }
.hero h2 { margin:0 0 4px; }
.hero .tagline { color:var(--muted); font-style:italic; margin-bottom:8px; }
.hero .actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.back { display:inline-block; margin-bottom:16px; }
.back:hover { border-color:var(--accent); }

.season { background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; }
.season > summary { list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.season > summary::-webkit-details-marker { display:none; }
.season .sname { flex:1; font-weight:600; }
.season .count { color:var(--muted); font-size:.85rem; }
.season .bar { width:90px; margin:0; }
.eps { border-top:1px solid var(--border); }
.ep { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-bottom:1px solid var(--border); }
.ep:last-child { border-bottom:0; }
.ep input { width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--done); cursor:pointer; }
.ep .num { color:var(--muted); width:28px; flex:none; text-align:right; }
.ep .etxt { flex:1; min-width:0; }
.ep .etitle { font-weight:500; }
.ep .emeta { color:var(--muted); font-size:.8rem; }
.ep .eov { color:var(--muted); font-size:.85rem; margin-top:2px; }
.ep.watched .etitle { color:var(--muted); text-decoration:line-through; }
.ep.future { opacity:.5; }
.season-actions { padding:10px 14px; border-bottom:1px solid var(--border); }
.empty { text-align:center; color:var(--muted); padding:32px; }
@media (max-width:560px) { .hero { flex-direction:column; } .hero .poster { width:140px; } }