:root { --bg:#0d0d12; --fg:#ececf1; --muted:#9aa0b5; --accent:#bebefe; --danger:#e02b2b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem; position:sticky; top:0; background:rgba(13,13,18,.85); backdrop-filter:blur(8px); z-index:10; }
.brand { font-weight:700; font-size:1.25rem; }
.actions { display:flex; gap:.5rem; }
.btn { background:var(--accent); color:#1a1a22; border:0; border-radius:8px; padding:.5rem .9rem; font-weight:600; cursor:pointer; }
.btn.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
main { padding:1.5rem; max-width:1400px; margin:0 auto; }
.empty { color:var(--muted); text-align:center; margin-top:4rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.poster { position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:#1c1c26; transition:transform .12s; }
.poster:hover { transform:scale(1.04); }
.poster img { width:100%; height:100%; object-fit:cover; display:block; }
.poster-title { position:absolute; inset:auto 0 0 0; padding:.5rem; font-size:.8rem; background:linear-gradient(transparent,rgba(0,0,0,.85)); opacity:0; transition:opacity .12s; }
.poster:hover .poster-title { opacity:1; }
.detail { background-size:cover; background-position:center; background-image:linear-gradient(rgba(13,13,18,.86),rgba(13,13,18,.96)),var(--backdrop); border-radius:14px; padding:2rem; }
.detail-hero { display:flex; gap:2rem; flex-wrap:wrap; }
.detail-poster { width:240px; border-radius:10px; }
.detail-info { flex:1; min-width:280px; }
.detail-info h1 { margin:.2rem 0; }
.year { color:var(--muted); font-weight:400; }
.tagline { font-style:italic; color:var(--muted); }
.meta { color:var(--muted); }
.overview { margin:1rem 0; }
.sub { color:var(--muted); font-size:.9rem; }
/* manage page */
.search-results { display:grid; gap:.5rem; margin-top:1rem; }
.search-row { display:flex; align-items:center; gap:1rem; background:#1c1c26; border-radius:8px; padding:.5rem; }
.search-row img { width:46px; height:69px; object-fit:cover; border-radius:4px; background:#2a2a36; }
input[type=search],input[type=text] { width:100%; padding:.7rem; border-radius:8px; border:1px solid #2a2a36; background:#15151d; color:var(--fg); }