:root{
  --bg: #0d0f12;
  --card: #111217;
  --muted: #9aa0a6;
  --accent: #5f8cff;
  --accent2:#8a63ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background:linear-gradient(180deg,#060608 0%, #0d0f12 60%);
  color:#fff;
}
.wrap{max-width:1100px;margin:0 auto;padding:28px}
.site-header{padding:28px 0;text-align:center}
.site-header h1{font-size:2rem;margin:0}
.nav{margin-top:8px}
.nav a{color:#79a1ff;text-decoration:none;margin:0 8px;font-weight:600}

/* Section container (page) */
.section{margin:20px 0;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 6px 20px rgba(0,0,0,0.6)}
.section h2{margin:0 0 14px 0;font-size:1.2rem}

/* List item */
.list{display:flex;flex-direction:column;gap:14px}
.item{display:flex;gap:16px;align-items:flex-start;background:var(--card);padding:12px;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,0.5)}
.rank{min-width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:white;flex-shrink:0}
.poster{width:120px;height:170px;border-radius:8px;overflow:hidden;background:#222;flex-shrink:0}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.info{flex:1;min-width:0}
.title{font-size:1rem;margin:0 0 6px 0;font-weight:700}
.meta{color:var(--muted);font-size:0.85rem;margin-bottom:10px}
.excerpt{color:#dfe6ea;font-size:0.9rem;margin-bottom:8px;opacity:0.95}
.btns{display:flex;gap:10px}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:700;font-size:0.9rem}
.btn.watch{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}
.btn.trailer{background:#222;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}

/* mobile */
@media (max-width:700px){
  .poster{width:96px;height:140px}
  .rank{min-width:44px;height:44px;font-size:0.95rem}
}

/* --- landing styles (cards) --- */
.landing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin:28px 0 60px 0;
  align-items:stretch;
}

/* card */
.cat-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cat-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}

.cat-media{
  position:relative;
  width:100%;
  height:220px;
  background:#111;
  display:block;
}
.cat-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* "No.1" badge */
.badge{
  position:absolute;
  left:12px;
  top:12px;
  background: linear-gradient(90deg, #5f8cff, #8a63ff);
  color:white;
  padding:6px 10px;
  border-radius:8px;
  font-weight:800;
  font-size:0.9rem;
  box-shadow:0 8px 20px rgba(90,70,180,0.18);
}

/* text body */
.cat-body{padding:14px}
.cat-body h3{margin:0 0 6px 0}
.cat-sub{color:var(--muted);margin:0 0 8px 0;font-size:0.95rem}
.cat-title{font-weight:700;color:#e6eef7;margin:0;opacity:0.95}

/* mobile responsive */
@media (max-width:900px){
  .landing-grid{grid-template-columns:repeat(2,1fr)}
  .cat-media{height:180px}
}
@media (max-width:520px){
  .landing-grid{grid-template-columns:1fr;gap:14px}
  .cat-media{height:160px}
  .wrap{padding:18px}
}

/* center footer */
.site-footer .wrap { text-align:center; padding:28px 18px 60px 18px; color:var(--muted); }

/* ensure nav/button styles still present if using original css */
.btn { /* keep existing btn rules or redefine */ }