:root{
  --bg:#0b1220;
  --bg2:#0f1a2b;
  --panel:#121c2d;
  --panel2:#0f1727;
  --stroke:#1e2a40;
  --text:#d8e2f1;
  --muted:#7f8da6;
  --blue:#3b82f6;
  --pill:#2a3a58;
  --pillText:#cfe0ff;
}

*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none !important}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%, #09101c 60%, #070d17 100%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

/* Splash */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(60% 60% at 50% 40%, #142444 0%, var(--bg) 65%);
  transition:opacity .45s ease, visibility .45s ease;
}
.splash.is-hidden{opacity:0; visibility:hidden; pointer-events:none}
.splash__inner{display:flex; flex-direction:column; align-items:center; gap:10px}
.splash__logo{
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(135deg, var(--blue), #1f3fbf);
  display:grid; place-items:center;
  font-weight:800; font-size:34px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.splash__title{font-weight:700; letter-spacing:.2px}
.splash__bar{
  width:220px; height:4px; border-radius:999px;
  background:rgba(255,255,255,.08);
  position:relative; overflow:hidden;
}
.splash__bar::after{
  content:""; position:absolute; inset:0;
  width:45%;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.9), transparent);
  transform:translateX(-60%);
  animation:splash 1.05s infinite linear;
}
@keyframes splash{to{transform:translateX(190%)}}

/* Topbar */
.topbar{position:sticky; top:0; z-index:20; background:rgba(8,14,25,.75); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.topbar__inner{max-width:1140px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:18px}
.menutoggle{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:var(--muted);
  display:none;
  place-items:center;
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease;
}
.menutoggle svg{width:18px; height:18px; display:block}
.menutoggle:hover{border-color:rgba(255,255,255,.14); color:var(--text)}
.menutoggle:active{transform:translateY(1px)}
.menutoggle:focus{border-color:rgba(59,130,246,.65); outline:none}
.brand{display:flex; align-items:center}
.brand__mark{
  width:160px; height:34px;
  display:grid; place-items:center;
}
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav{margin:0 auto; display:flex; gap:22px}
.nav__link{color:var(--muted); font-weight:600; font-size:13px; letter-spacing:.2px}
.nav__link.is-active{color:var(--text)}

/* Header search (icon -> expands input) */
.topsearch{display:flex; align-items:center; gap:10px}
.topsearch:focus-within .topsearch__btn{border-color:rgba(59,130,246,.65); color:var(--text)}
.topsearch__btn{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease, transform .12s ease;
}
.topsearch__btn:hover{border-color:rgba(255,255,255,.12); color:var(--text)}
.topsearch__btn:focus{border-color:rgba(59,130,246,.65); outline:none}
.topsearch__btn:active{transform:translateY(1px)}
.topsearch__btn svg{width:18px; height:18px; display:block}
.topsearch__input{
  width:260px;
  height:42px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
  caret-color:var(--blue);
  transition:max-width .18s ease, opacity .18s ease, padding .18s ease, border-color .18s ease, background-color .18s ease;
}
.topsearch__input:hover{border-color:rgba(255,255,255,.12)}
.topsearch__input::placeholder{color:rgba(127,141,166,.8)}
.topsearch__input:focus{border-color:rgba(59,130,246,.65)}
.topsearch.is-collapsed .topsearch__input{
  width:0;
  max-width:0;
  opacity:0;
  padding-left:0;
  padding-right:0;
  border-color:transparent;
  background:transparent;
  pointer-events:none;
}
.topsearch.is-collapsed .topsearch__input::placeholder{color:transparent}

.auth{display:flex; align-items:center; gap:14px}
.auth__link{color:var(--muted); font-weight:600; font-size:13px}
.auth__btn{background:var(--blue); color:white; padding:8px 12px; border-radius:8px; font-weight:700; font-size:13px}

/* Page */
.page{max-width:1140px; margin:0 auto; padding:24px 18px 50px}

/* Breadcrumb */
.crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(216,226,241,.78);
  font-weight:700;
  font-size:12px;
  margin:0 0 10px;
}
.crumbs a{color:rgba(216,226,241,.86)}
.crumbs__sep{color:rgba(127,141,166,.9)}
.crumbs__current{color:rgba(216,226,241,.92)}

.filters{margin-top:4px}

.filters__barField{margin:0}
.filters__bar{display:flex; align-items:center; gap:14px}
.filters__search{position:relative; flex:1}
.filters__searchIcon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--muted);
  opacity:.9;
}
.filters__search input{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:12px 12px 12px 44px;
  border-radius:12px;
  outline:none;
}
.filters__search input::placeholder{color:rgba(127,141,166,.8)}
.filters__search input:focus{border-color:rgba(59,130,246,.65)}

.filters__toggle{
  width:52px;
  height:52px;
  flex:0 0 52px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.filters__toggle:hover{border-color:rgba(255,255,255,.12)}
.filters__toggle svg{width:22px; height:22px; opacity:.85}

.filters__panel{margin-top:18px}
.filters__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap:18px;
  align-items:end;
}

/* Desktop/tablet: keep filters inline (classic layout) */
@media (min-width: 521px){
  .filters{
    display:grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
    gap:18px;
    align-items:end;
  }

  .filters__bar{gap:0}
  .filters__toggle{display:none}
  .filters__searchIcon{display:none}
  .filters__search input{padding-left:12px}

  /* Flatten panel fields into the same grid row */
  .filters__panel{display:contents; margin-top:0}
  .filters__grid{display:contents}
}

.field__label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin:0 0 8px}
.field__control input,
.field__control select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
}
.field__control select{color-scheme:dark}
.field__control select option{background:var(--panel2); color:var(--text)}
.field__control input::placeholder{color:rgba(127,141,166,.8)}
.field__control input:focus,
.field__control select:focus{border-color:rgba(59,130,246,.65)}

.tools{display:flex; justify-content:flex-end}
.toolbtn{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.toolbtn:hover{border-color:rgba(255,255,255,.12)}

.results{margin-top:22px}
.results__head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px}
.results__meta{color:var(--muted); font-weight:600; font-size:13px}
.results__controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sort{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  outline:none;
  font-weight:800;
  cursor:pointer;
  color-scheme:dark;
}
.sort option{background:var(--panel2); color:var(--text)}
.sort:focus{border-color:rgba(59,130,246,.65)}
.views{display:flex; gap:8px; opacity:.85}
.viewbtn{
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  display:grid;
  place-items:center;
  font-weight:900;
  cursor:pointer;
}
.viewbtn svg{width:16px; height:16px; display:block}
.viewbtn.is-active{color:var(--text); border-color:rgba(255,255,255,.12)}
.viewbtn:hover{border-color:rgba(255,255,255,.12)}
.viewbtn:disabled{opacity:.45; cursor:not-allowed}

/* Injected header/footer mounts */
#siteHeaderMount,
#siteFooterMount{
  max-width:1140px;
  margin:0 auto;
  padding:0 18px;
}
#siteHeaderMount:empty,
#siteFooterMount:empty{display:none}

/* Footer */
.footer{
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(8,14,25,.35);
}
.footer__inner{
  max-width:1140px;
  margin:0 auto;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer__copy{color:var(--muted); font-size:13px; font-weight:600}

/* List rows */
.list{display:flex; flex-direction:column; gap:14px}
.row{
  display:grid;
  grid-template-columns: 64px 1.2fr 120px 120px 170px;
  gap:16px;
  align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
  border-radius:4px;
  padding:10px;
}
.rowlink{cursor:pointer}
.rowlink:focus{outline:2px solid rgba(59,130,246,.55); outline-offset:3px}
.poster{width:52px; height:72px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03)}
.poster img{width:100%; height:100%; object-fit:cover; display:block}

.title{font-weight:800; letter-spacing:.2px}
.pills{margin-top:8px; display:flex; flex-wrap:wrap; gap:8px}
.pill{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:rgba(59,130,246,.18); color:var(--pillText); font-weight:700; font-size:12px}

.row__meta{
  display:none;
  margin-top:10px;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  font-weight:800;
  color:rgba(216,226,241,.9);
}
.row__metaItem{display:inline-flex; align-items:center; gap:8px}
.row__metaMuted{color:var(--muted); font-weight:800}

.metric{display:flex; flex-direction:column; gap:2px; justify-self:end}
.metric__top{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.ratingicon{width:16px; height:16px; display:inline-block; color:#f59e0b}
.ratingicon svg{width:16px; height:16px; display:block}
.ratingicon.ok{color:#22c55e}
.ratingicon.mid{color:#f59e0b}
.ratingicon.bad{color:#ef4444}
.metric__val{font-weight:800}
.metric__sub{color:var(--muted); font-size:12px; font-weight:600}

.smallcol{justify-self:end; text-align:right}
.smallcol__top{font-weight:800}
.smallcol__sub{color:var(--muted); font-size:12px; font-weight:600; margin-top:2px}

@media (max-width: 980px){
  .filters__grid{grid-template-columns: 1fr 1fr;}
  .tools{grid-column: 1 / -1}
  .row{grid-template-columns: 64px 1fr;}
  .metric,.smallcol{justify-self:start; text-align:left}
}

@media (max-width: 520px){
  /* Mobile list view matches screenshot-style card */
  .row{
    grid-template-columns: 92px 1fr;
    border-radius:5px;
    padding:12px;
  }
  .poster{width:92px; height:128px; border-radius:2px}
  .title{
    font-weight:800;
    font-size:16px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .metric,.smallcol{display:none}
  .row__meta{display:flex; font-size:12px; gap:10px}
}

@media (max-width: 720px){
  .topbar__inner{flex-wrap:wrap}
  .nav{order:4; width:100%; justify-content:center; margin:6px 0 0}
  .topsearch{order:2; margin-left:auto}
  .auth{order:3}
  .topsearch__input{width:min(360px, 70vw)}
}

@media (max-width: 520px){
  .filters__barField .field__label{display:none}
  .filters__panel{display:none; margin-top:14px}
  .filters.is-filters-open .filters__panel{display:block}
  .filters__grid{grid-template-columns: 1fr 1fr; gap:12px;}

  .footer__inner{flex-direction:column; align-items:flex-start}

  /* Mobile header layout: left toggle, center logo, right search; no auth */
  .topbar__inner{
    display:grid;
    grid-template-columns: 42px 1fr 42px;
    align-items:center;
    gap:10px;
  }
  .menutoggle{display:grid}
  .auth{display:none}

  .brand{justify-self:center}
  .nav{
    grid-column: 1 / -1;
    display:none;
    flex-direction:column;
    gap:8px;
    margin:10px 0 0;
    padding:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
  }
  .topbar.is-menu-open .nav{display:flex}

  .nav__link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.03);
    color:rgba(216,226,241,.92);
    font-weight:800;
    letter-spacing:.2px;
  }
  .nav__link:hover{border-color:rgba(255,255,255,.12)}
  .nav__link:active{transform:translateY(1px)}
  .nav__link.is-active{
    color:var(--text);
    border-color:rgba(59,130,246,.45);
    background:rgba(59,130,246,.14);
  }

  .topsearch{justify-self:end}
  /* Keep icon in the right slot; input expands below when opened */
  .topsearch{display:flex}
  .topsearch__input{width:100%}
  .topsearch:not(.is-collapsed){grid-column: 1 / -1; justify-self:stretch; margin-top:10px}
}

@media (max-width: 360px){
  .filters__grid{grid-template-columns: 1fr;}
}

/* Cards view */
.list.is-cards{display:grid; grid-template-columns: repeat(2, 1fr); gap:18px}
.carditem{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap:0;
  align-items:stretch;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
}
.carditem__cover{position:relative; background:rgba(255,255,255,.03); border-right:1px solid rgba(255,255,255,.06); height:220px}
.carditem__cover img{width:100%; height:100%; object-fit:cover; display:block}
.carditem__overlay{position:absolute; inset:auto 0 0 0;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,14,25,.92) 85%)}
.carditem__title{
  font-weight:600;
  letter-spacing:.2px;
  line-height:1.25;
  font-size:15px;
  display:block;
  width:100%;
  padding:12px;
  /* border-radius:10px; */
  background:rgba(8,14,25,.28);
}
.carditem__sub{margin-top:6px; color:rgba(216,226,241,.85); font-weight:700; font-size:12px}

.carditem__body{padding:14px; display:flex; flex-direction:column; min-width:0}
.carditem__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.carditem__headleft{display:flex; flex-direction:column; gap:2px; min-width:0}
.carditem__headkicker{font-size:12px; font-weight:800; color:rgba(216,226,241,.92)}
.carditem__headsub{font-size:12px; font-weight:700; color:var(--muted)}
.carditem__meta{margin-top:8px; color:var(--muted); font-weight:700; font-size:12px}
.carditem__desc{
  margin-top:10px;
  color:rgba(216,226,241,.86);
  line-height:1.55;
  font-weight:600;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
  max-height:calc(1.55em * 4);
}
.carditem__row{margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.carditem__rating{display:flex; align-items:center; gap:8px; font-weight:900; flex:0 0 auto}
.carditem .pills{margin-top:auto; padding-top:12px}

/* Grid view */
.list.is-grid{display:grid; grid-template-columns: repeat(6, 1fr); gap:18px}
.tile{display:flex; flex-direction:column; gap:10px}
.tile__poster{
  width:100%;
  aspect-ratio: 2 / 3;
  border-radius:5px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  position:relative;
}
.tile__poster img{width:100%; height:100%; object-fit:cover; display:block}
.tile__badge{
  position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 4px 7px;
    border-radius: 5px 0px 0px;
    background: #3b82f6;
    font-weight: 700;
    font-size: 12px;
}
.tile__title{font-weight:600; color:rgba(216,226,241,.92); line-height:1.3}
.tile__title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  max-height:calc(1.3em * 2);
}
.tile__sub{color:var(--muted); font-weight:700; font-size:12px}

@media (max-width: 1100px){
  .list.is-grid{grid-template-columns: repeat(5, 1fr)}
}
@media (max-width: 980px){
  .list.is-grid{grid-template-columns: repeat(3, 1fr)}
  .list.is-cards{grid-template-columns: 1fr}
  .carditem{grid-template-columns: 1fr}
  .carditem__cover{border-right:0; border-bottom:1px solid rgba(255,255,255,.06)}
  .carditem__cover img{aspect-ratio: 16 / 9; height:auto}
}

@media (min-width: 1100px){
  .list.is-cards{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 520px){
  .list.is-grid{grid-template-columns: repeat(2, 1fr)}
}

/* Pagination */
.pager{margin-top:14px; display:flex; align-items:center; justify-content:center; gap:12px}
.pager__btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.pager__btn:hover{border-color:rgba(255,255,255,.12)}
.pager__btn:disabled{opacity:.45; cursor:not-allowed}
.pager__info{color:var(--muted); font-weight:800; font-size:13px}

/* Anime page */
.hero{margin-top:4px}
.hero__banner{
  height:190px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.hero__banner.has-image{
  height:440px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-24px; /* cancel .page top padding so banner feels like it starts under the topbar */
  border-radius:0;
  border:0;
  max-width:none;
}
.hero__banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.25) 0%, rgba(11,18,32,.9) 85%);
}
.hero__banner.has-image::after{
  background:linear-gradient(180deg, rgba(11,18,32,.10) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.95) 100%);
}
.hero__body{display:grid; grid-template-columns: 140px 1fr; gap:16px; margin-top:-50px; position:relative; z-index:2}
.hero__banner.has-image + .hero__body{
  margin-top:-190px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-top:20px;
  padding-bottom:20px;
  /* keep content aligned with .page max-width */
  padding-left:max(18px, calc((100vw - 1140px) / 2 + 18px));
  padding-right:max(18px, calc((100vw - 1140px) / 2 + 18px));
  border-radius:0;
  background:rgba(15,26,43,.82);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  grid-template-columns: 220px 1fr;
}
.hero__banner.has-image + .hero__body .hero__poster{
    margin-top: -35%;
  width:220px;
  height:310px;
  border-radius:5px;
}
.hero__side{display:flex; flex-direction:column; gap:10px}
.hero__side .watchbtn{width:100%}
.hero__poster{width:140px; height:200px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.hero__poster img{width:100%; height:100%; object-fit:cover; display:block}
.hero__top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.hero__title{margin:0; font-size:24px; letter-spacing:.2px}
.hero__sub{margin-top:6px; color:var(--muted); font-weight:700; font-size:13px}
.hero__meta{margin-top:10px; color:var(--muted); font-weight:600; font-size:13px}
.hero__syn{margin-top:14px; line-height:1.6; color:rgba(216,226,241,.92)}

.watchbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:10px;
  background:var(--blue);
  color:white;
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

/* Episodes */
.episodes{margin-top:26px}
.episodes__head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:12px}
.episodes__controls{display:flex; align-items:center; gap:10px}
.episodes__controls .views{margin-left:6px}
.episodes__list.is-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.episodes__list.is-cards .ep{
  flex-direction:column;
  align-items:stretch;
}
.episodes__list.is-cards .ep__thumbwrap{
  width:100%;
  height:140px;
  flex:0 0 auto;
}
.episodes__list.is-cards .ep__watch{
  width:100%;
  text-align:center;
}
.episodes__search{
  width:220px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  outline:none;
  font-weight:700;
}
.episodes__search::placeholder{color:rgba(127,141,166,.8)}
.episodes__search:focus{border-color:rgba(59,130,246,.65)}
.episodes__title{margin:0; font-size:16px}
.episodes__meta{color:var(--muted); font-weight:700; font-size:13px}
.episodes__list{display:flex; flex-direction:column; gap:10px}
.episodes__empty{color:var(--muted); font-weight:700; padding:12px}
.ep{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px 14px;
}
.ep__thumbwrap{
  width:64px;
  height:42px;
  flex:0 0 64px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.ep__thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ep__left{min-width:0; flex:1 1 auto}
.ep__title{font-weight:800}
.ep__sub{margin-top:4px; color:var(--muted); font-weight:600; font-size:12px}
.ep__watch{padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-weight:800; font-size:13px}

/* Cast (bottom section) */
.cast{margin-top:26px}
.cast__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.cast__title{margin:0; font-size:16px}
.cast__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap:12px;
}
.cast__card{
  min-height:92px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:14px;
}
.cast__imgwrap{width:64px; height:64px; flex:0 0 64px}
.cast__vaimgwrap{width:64px; height:64px; flex:0 0 64px; display:flex; justify-content:flex-end}
.cast__img,
.cast__vaimg{width:64px; height:64px; border-radius:14px; object-fit:cover; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06)}

.cast__left{min-width:0; flex:1 1 auto}
.cast__mid{min-width:0; flex:0 0 220px; text-align:left}

.cast__char{font-weight:900; font-size:18px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cast__role{margin-top:6px; color:rgba(216,226,241,.78); font-weight:800; font-size:12px}
.cast__vaname{font-weight:900; font-size:18px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cast__lang{margin-top:6px; color:rgba(216,226,241,.78); font-weight:800; font-size:12px}

.cast__morebtn{
  padding:9px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.cast__morebtn:hover{border-color:rgba(255,255,255,.12)}

@media (max-width: 980px){
  .hero__banner.has-image{height:320px}
  .hero__banner.has-image + .hero__body{
    margin-top:-135px;
    padding:14px 16px;
    grid-template-columns: 120px 1fr;
  }
  .hero__banner.has-image + .hero__body .hero__poster{width:120px; height:175px}
  .hero__body{grid-template-columns: 110px 1fr; margin-top:-44px}
  .hero__poster{width:110px; height:155px}
  .hero__title{font-size:20px}
  .episodes__search{width:160px}

  .cast__grid{grid-template-columns: 1fr}
  .cast__mid{flex:0 0 160px}
}

/* Watch page */
.watch__title{margin:0; font-size:22px}
.watch__sub{margin-top:6px; color:var(--muted); font-weight:700; font-size:13px}
.watch__head{margin-bottom:10px}
.watch__servers{margin-top:12px}

/* Server UI (match screenshot layout) */
.server-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  background:var(--panel2);
  border-radius:2px;
  overflow:hidden;
}
.server-left{
  flex:1 1 35%;
  background:var(--blue);
  color:#fff;
  text-align:center;
  font-size:15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px;
}
.server-left p{margin:6px 0; line-height:1.5; text-shadow:0 2px 4px rgba(0,0,0,.45)}
.server-left b{color:#000; font-size:16px}

.server-right{
  flex:1 1 65%;
  padding:8px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.server-group{display:flex; align-items:center; gap:14px;}
.server-group label{
  font-weight:500;
  color:var(--text);
  display:flex;
  align-items:center;
  font-size:14px;
  gap:6px;
  min-width:55px;
  white-space:nowrap;
  margin-left:10px;
}
.server-group label .icon{color:var(--text); display:inline-flex; align-items:center}
.server-group label .icon svg{width:16px; height:16px; display:block}

.server-buttons{display:flex; flex-wrap:wrap; gap:10px; width:100%; justify-content:flex-start}
.server-button{
  background:rgba(255,255,255,.08);
  color:rgba(229,231,235,1);
  border:none;
  padding:6px 14px;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease, transform .2s ease;
  font-weight:500;
  flex:1 1 calc(25% - 10px);
  text-align:center;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.server-button__label{display:inline-block}
.server-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:rgba(229,231,235,1);
}
.server-button.selected .server-badge{
  border-color:rgba(0,0,0,.25);
  background:rgba(0,0,0,.12);
  color:#000;
}
.server-button:hover{background:rgba(255,255,255,.12)}
.server-button.selected{
  background:var(--blue);
  color:#000;
  font-weight:700;
  letter-spacing:.4px;
  transform:scale(1.05);
}
.server-button:nth-child(n+5){flex:1 1 calc(33.333% - 10px)}

.server-divider{border-top:1px dashed rgba(255,255,255,.18); margin:5px 0}
.watch__player{
  min-height:220px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  padding:1px;
  position:relative;
  border-radius:12px;
  aspect-ratio: 16 / 9;
}
.watch__hint{
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  text-align:center;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.watch__frame,
.watch__video{
  width:100%;
  height:100%;
  display:block;
  border:0;
  outline:0;
  background:#000;
}
.watch__open{display:flex; flex-direction:column; align-items:center; gap:12px}
.watch__openbtn{background:var(--blue); color:white; padding:10px 14px; border-radius:10px; font-weight:900}

@media(max-width:768px){
  .server-wrap{flex-direction:column}
  .server-left,.server-right{flex:1 1 100%}
  .server-left{border-bottom:1px dashed rgba(255,255,255,.18); padding:10px}
  .server-right{padding:10px}
  .server-group label{margin-left:0}
  .server-button{flex:1 1 calc(50% - 10px)}
}

/* Watch page series section */
.watch__nav{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
}
.watch__navbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  min-width:110px;
}
.watch__navbtn:hover{border-color:rgba(255,255,255,.12)}
.watch__navbtn.is-disabled{opacity:.45; pointer-events:none}
.watch__navbtn--primary{flex:1 1 auto; max-width:420px}

.watch__episodes{margin-top:14px}
.ep.is-current{border-color:rgba(59,130,246,.55); background:linear-gradient(180deg, rgba(59,130,246,.12), rgba(255,255,255,.03))}
.ep.is-current .ep__watch{background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.35)}

@media (max-width: 980px){
  .watch__nav{flex-wrap:wrap}
  .watch__navbtn{min-width:0; flex:1 1 auto}
}