:root{
  --bg:#0b1020;
  --panel:#121a33;
  --panel2:#0f1730;
  --text:#e7ecff;
  --muted:#aab4e6;
  --brand:#7aa2ff;
  --ok:#46d39a;
  --warn:#ffcc66;
  --err:#ff6b6b;
  --border:rgba(255,255,255,.10);
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
}

a{color:inherit}

.container{max-width:1120px;margin:0 auto;padding:0 16px}

.header{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.72);
  border-bottom:1px solid var(--border);
}
.header__inner{
  max-width:1120px;margin:0 auto;
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{
  text-decoration:none;
  font-weight:700;
  letter-spacing:.2px;
}
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  flex-shrink:0;
}
.nav-toggle__line{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  border-radius:999px;
  background:currentColor;
}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav__header{display:none}
.nav__title{font-size:16px;font-weight:700}
.nav-close{
  width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:rgba(255,255,255,.04);color:var(--text);font-size:24px;line-height:1;
}
.nav__logout{display:none}
.is-hidden{display:none!important}
.nav__link{
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
}
.nav__link:hover{background:rgba(255,255,255,.06);color:var(--text)}
.header__right{display:flex;gap:10px;align-items:center}
.nav-backdrop{
  display:none;
  position:fixed;
  inset:0;
  border:0;
  padding:0;
  background:rgba(3,6,14,.58);
  z-index:19;
}

.main{padding:22px 0 48px}

.footer{
  display:none;
  border-top:1px solid var(--border);
  background:rgba(11,16,32,.65);
}
.body--profile-route .footer{display:block}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;color:var(--muted)}

.card{
  background:linear-gradient(180deg, rgba(18,26,51,.95), rgba(15,23,48,.92));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.card + .card{margin-top:14px}

.grid{display:grid;grid-template-columns: 1fr;gap:14px}
@media (min-width: 900px){
  .grid--2{grid-template-columns: 1.15fr .85fr}
}

.h1{font-size:24px;margin:0 0 10px}
.h2{font-size:18px;margin:0 0 10px}
.muted{color:var(--muted)}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{height:10px}

.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.label{font-size:13px;color:var(--muted)}
.input, .select, .textarea{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(122,162,255,.65);box-shadow:0 0 0 4px rgba(122,162,255,.12)}
.textarea{min-height:90px;resize:vertical;font-family:var(--sans)}

.btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(122,162,255,.18);
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
}
.btn:hover{background:rgba(122,162,255,.26)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--ghost{background:transparent}
.btn--ok{background:rgba(70,211,154,.18)}
.btn--ok:hover{background:rgba(70,211,154,.26)}
.btn--danger{background:rgba(255,107,107,.18)}
.btn--danger:hover{background:rgba(255,107,107,.26)}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:13px;
}
.pill code{font-family:var(--mono);font-size:12px;color:var(--text)}

.code{
  font-family:var(--mono);
  font-size:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  overflow:auto;
  max-height:420px;
}

.link{color:var(--brand);text-decoration:none}
.link:hover{text-decoration:underline}

.toastRoot{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:50;
}
.toast{
  width:min(420px, calc(100vw - 32px));
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,26,51,.96);
  box-shadow:var(--shadow);
  padding:12px 12px;
}
.toast__title{font-weight:700;margin:0 0 2px}
.toast__text{color:var(--muted);margin:0}
.toast--ok{border-color: rgba(70,211,154,.35)}
.toast--err{border-color: rgba(255,107,107,.45)}

/* --- UI components --- */
.section-head{margin-bottom:14px}
.section-head .h2{margin:0}

.state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:36px 16px;text-align:center;
}
.state--error{color:var(--err)}

.spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
}
@media (min-width:700px){
  .poster-grid{grid-template-columns:repeat(auto-fill, minmax(170px, 1fr))}
}

.release-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  border-radius:var(--radius-sm);
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.release-card:hover{
  transform:translateY(-2px);
  border-color:rgba(122,162,255,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.release-card__poster{
  position:relative;aspect-ratio:2/3;background:rgba(0,0,0,.25);
}
.release-card__poster img{width:100%;height:100%;object-fit:cover;display:block}
.release-card__placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:rgba(255,255,255,.04);
}
.release-card__badge{
  position:absolute;top:8px;right:8px;
  background:rgba(11,16,32,.82);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700;
}
.release-card__body{padding:10px 10px 12px}
.release-card__title{font-weight:700;font-size:14px;line-height:1.25}
.release-card__sub,.release-card__meta{font-size:12px;margin-top:4px}

.collection-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media (min-width:700px){
  .collection-grid{grid-template-columns:repeat(2, 1fr)}
}
.collection-card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;background:rgba(255,255,255,.03);
  transition:border-color .15s ease, transform .15s ease;
}
.collection-card:hover{border-color:rgba(122,162,255,.35);transform:translateY(-1px)}
.collection-card__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.collection-card__title{font-weight:700;font-size:16px;line-height:1.3}
.collection-card__desc{margin-top:8px;font-size:13px;line-height:1.45}
.collection-card__author{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px}

.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.avatar--sm{width:24px;height:24px}
.avatar--lg{width:64px;height:64px}
.avatar--ph{
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--muted);font-weight:700;
}

.hero{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:var(--radius);overflow:hidden;min-height:240px;
  border:1px solid var(--border);margin-bottom:14px;
}
@media (min-width:700px){.hero{min-height:320px}}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(11,16,32,.92) 0%, rgba(11,16,32,.55) 45%, rgba(11,16,32,.2) 100%);
}
.hero__content{position:relative;z-index:1;padding:24px;max-width:620px}
.hero__label{
  display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--brand);margin-bottom:8px;font-weight:700;
}
.hero__title{font-size:clamp(22px, 3vw, 34px);font-weight:800;line-height:1.15;margin-bottom:8px}
.hero__desc{color:var(--muted);line-height:1.5;font-size:14px}

.strip{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:10px;
}
.strip__item{
  text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:rgba(255,255,255,.03);
}
.strip__item img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.strip__ph{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);font-size:24px;
}
.strip__title{padding:8px 10px;font-size:12px;line-height:1.3}

.release-hero{
  display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:800px){
  .release-hero{grid-template-columns:220px 1fr}
}
.release-hero__poster{
  border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);
  aspect-ratio:2/3;background:rgba(0,0,0,.25);
}
.release-hero__poster img{width:100%;height:100%;object-fit:cover;display:block}
.release-hero__title{margin:0 0 6px;font-size:clamp(24px, 3vw, 34px)}
.release-hero__sub{font-size:15px;margin-bottom:10px}
.release-hero__tags{margin:10px 0}
.release-hero__genres{font-size:13px;margin:8px 0}
.release-hero__desc{margin:14px 0 0;line-height:1.6;color:#d7defa}
.release-hero__actions{margin:12px 0}

.comments{display:flex;flex-direction:column;gap:10px}
.comment{
  border:1px solid var(--border);border-radius:12px;padding:12px;
  background:rgba(255,255,255,.03);
}
.comment__head{display:flex;align-items:center;gap:10px}
.comment__meta{flex:1;min-width:0}
.comment__author{font-weight:700;font-size:14px}
.comment__date{font-size:12px}
.comment__text{margin-top:10px;line-height:1.5;white-space:pre-wrap}
.comment__release{display:inline-block;margin-top:8px;font-size:13px;font-weight:600}

.profile-panel{display:flex;flex-direction:column;gap:18px}
.profile-panel__head{display:flex;gap:14px;align-items:center}
.profile-panel__name{font-size:22px;font-weight:800;line-height:1.2}
.profile-panel__status{margin-top:4px;font-size:13px;line-height:1.4}
.profile-panel__stats{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px;
}
.profile-stat{
  display:flex;flex-direction:column;gap:4px;padding:12px 10px;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background:rgba(255,255,255,.03);text-decoration:none;color:inherit;
  transition:border-color .15s, background .15s;
}
.profile-stat:hover{border-color:rgba(122,162,255,.4);background:rgba(122,162,255,.08)}
.profile-stat__num{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.profile-stat__label{font-size:12px;color:var(--muted);line-height:1.3}
.profile-panel__actions{
  display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;
  border-top:1px solid var(--border);
}
@media (max-width: 720px){
  .profile-panel__stats{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

.search-bar{display:flex;gap:10px;align-items:stretch}
.search-bar__input{flex:1}

.release-page{display:flex;flex-direction:column;gap:20px}
.release-section{margin-top:4px}
.release-airing{
  display:grid;gap:8px;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(122,162,255,.08);border:1px solid rgba(122,162,255,.2);
}
.release-airing__row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.release-airing__label{font-size:12px;min-width:120px}
.release-airing__value{font-size:14px;font-weight:600}
.screenshot-strip{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.screenshot-strip__item{
  flex:0 0 auto;width:220px;aspect-ratio:16/9;border-radius:var(--radius-sm);
  overflow:hidden;border:1px solid var(--border);scroll-snap-align:start;
}
.screenshot-strip__item img{width:100%;height:100%;object-fit:cover;display:block}
.screenshot-strip__item:hover{border-color:rgba(122,162,255,.45)}
.auth-card{max-width:480px}
.auth-hint{font-size:13px;line-height:1.45;margin-bottom:14px;padding:10px 12px;border-radius:var(--radius-sm);background:rgba(122,162,255,.08);border:1px solid rgba(122,162,255,.2)}
.auth-form .field{margin-bottom:12px}
.field-hint{font-size:12px;margin-top:6px;line-height:1.4}
.pill--link{text-decoration:none}
.pill--link:hover{border-color:rgba(122,162,255,.45);color:var(--text)}
.list-bar{margin:12px 0 4px}
.list-bar__label{font-size:12px;margin-bottom:6px}
.pager{align-items:center;gap:12px}
.tab{
  cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--muted);padding:8px 12px;border-radius:999px;font-weight:600;
}
.tab:hover{color:var(--text)}
.tab--active{
  color:var(--text);border-color:rgba(122,162,255,.45);
  background:rgba(122,162,255,.18);
}

.page-stack{display:flex;flex-direction:column;gap:14px}
.comment-form{margin-top:12px}
.comment-form .textarea{min-height:72px}

/* --- Player / episodes --- */
.player{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);
}
.player--empty{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3)}
.player__frame{width:100%;height:100%;border:0;display:block}

.watch-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.watch-now{font-size:14px;color:var(--muted)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--muted);padding:7px 12px;border-radius:10px;font-weight:600;font-size:13px;
  display:inline-flex;align-items:center;gap:8px;
}
.chip:hover{color:var(--text);border-color:rgba(122,162,255,.35)}
.chip--active{color:var(--text);border-color:rgba(122,162,255,.55);background:rgba(122,162,255,.2)}
.chip__icon{width:18px;height:18px;border-radius:4px;object-fit:cover}
.chip__sub{font-size:11px;opacity:.7}

.subhead{font-size:13px;color:var(--muted);margin:14px 0 8px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

.episode-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(52px, 1fr));gap:8px;
  max-height:280px;overflow:auto;padding-right:4px;
}
.episode-btn{
  cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--text);padding:10px 0;border-radius:10px;font-weight:600;font-size:14px;
  position:relative;
}
.episode-btn:hover{border-color:rgba(122,162,255,.4)}
.episode-btn--active{background:rgba(122,162,255,.28);border-color:rgba(122,162,255,.65)}
.episode-btn--watched{color:var(--muted)}
.episode-btn--watched::after{
  content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;
  background:var(--ok);
}
.episode-btn--filler{opacity:.7;border-style:dashed}

.watch-nav{display:flex;justify-content:space-between;gap:10px;margin-top:12px}

/* --- Native video player --- */
.vplayer{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:#000;
  outline:none;
}
.vplayer:focus-visible{box-shadow:0 0 0 3px rgba(122,162,255,.35)}
.vplayer__screen{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
}
.vplayer__video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.vplayer__shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75) 100%);
  transition:opacity .22s ease;
}
.vplayer__center{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .2s;
}
.vplayer__center--hidden{opacity:0}
.vplayer__bigplay{
  pointer-events:auto;width:68px;height:68px;border-radius:50%;border:0;
  font-size:26px;background:rgba(122,162,255,.9);color:#fff;cursor:pointer;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  transition:transform .15s, background .15s;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.vplayer__bigplay:hover{transform:scale(1.06);background:rgba(122,162,255,1)}
.vplayer__loading{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:var(--muted);font-size:14px;pointer-events:none;
}
.vplayer__compact-actions{
  display:none;
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:3;
  gap:10px;
}
.vplayer__compact-play,
.vplayer__compact-fs{
  flex:1 1 0;
  min-height:42px;
  background:rgba(11,16,32,.82);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.vplayer__seek-hint{
  position:absolute;
  top:50%;
  transform:translateY(-50%) scale(.92);
  min-width:72px;
  padding:12px 14px;
  border-radius:999px;
  background:rgba(11,16,32,.72);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:15px;
  font-weight:700;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:4;
}
.vplayer__seek-hint--left{left:14%}
.vplayer__seek-hint--right{right:14%}
.vplayer__seek-hint--visible{
  opacity:1;
  transform:translateY(-50%) scale(1);
}
.vplayer__seek-hint--pulse{
  animation:vplayerSeekPulse .28s ease;
}
@keyframes vplayerSeekPulse{
  0%{transform:translateY(-50%) scale(.88);opacity:.65}
  55%{transform:translateY(-50%) scale(1.08);opacity:1}
  100%{transform:translateY(-50%) scale(1);opacity:1}
}
.vplayer__seek-flash{
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  opacity:0;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(90deg, rgba(255,255,255,.16), transparent);
  transition:opacity .12s ease;
}
.vplayer__seek-flash--left{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,.18), transparent 72%);
}
.vplayer__seek-flash--right{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,.18), transparent 72%);
}
.vplayer__seek-flash--active{opacity:1}
.vplayer__hud{
  position:absolute;left:0;right:0;bottom:0;padding:8px 12px 10px;
  z-index:2;
  transition:opacity .22s ease, transform .22s ease;
}
.vplayer--fs-active .vplayer__hud{display:block}
.vplayer--fs-active .vplayer__compact-actions{display:none}
.vplayer--fs-hud-hidden .vplayer__hud{
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
}
.vplayer--fs-hud-hidden .vplayer__shade{opacity:0}
.vplayer--fs-hud-hidden .vplayer__center--hidden{opacity:0}
.vplayer__progress{margin-bottom:8px}
.vplayer__seek{
  width:100%;height:5px;accent-color:var(--brand);cursor:pointer;
  vertical-align:middle;
}
.vplayer__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vplayer__btn{
  cursor:pointer;border:0;background:rgba(255,255,255,.1);color:var(--text);
  padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600;
  transition:background .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.vplayer-icon{width:16px;height:16px;display:block;flex-shrink:0}
.vplayer__bigplay .vplayer-icon{width:28px;height:28px;margin-left:2px}
.vplayer__compact-play .vplayer-icon,
.vplayer__compact-fs .vplayer-icon{width:18px;height:18px}
.vplayer__btn:hover{background:rgba(255,255,255,.18)}
.vplayer__btn:disabled{opacity:.35;cursor:default}
.vplayer__btn:disabled:hover{background:rgba(255,255,255,.1)}
.vplayer__prev,.vplayer__next{font-size:15px;padding:6px 8px}
.vplayer__skip{min-width:52px;font-variant-numeric:tabular-nums}
.vplayer__time{font-size:12px;color:#e7ecff;white-space:nowrap;font-variant-numeric:tabular-nums}
.vplayer__time-sep{color:var(--muted)}
.vplayer__spacer{flex:1;min-width:8px}
.vplayer__quality-wrap{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);border-radius:8px;padding:4px 8px;
}
.vplayer__quality-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
.vplayer__quality{
  background:transparent;border:0;color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;outline:none;
}
.vplayer__quality:disabled{opacity:.5;cursor:default}
.vplayer__vol{display:flex;align-items:center;gap:4px}
.vplayer__volume{width:72px;accent-color:var(--brand);cursor:pointer}
.vplayer__foot{
  padding:8px 12px 10px;font-size:13px;color:var(--muted);
  background:rgba(15,23,48,.85);border-top:1px solid var(--border);
}
.watch-hints{font-size:12px;margin-top:10px}

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .header__inner{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .nav{
    order:3;
    width:100%;
    gap:8px;
  }
  .nav__link{
    flex:1 1 auto;
    text-align:center;
    min-width:120px;
  }
  .header__right{
    margin-left:auto;
  }
  .footer__inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 700px){
  .container{padding:0 12px}
  .header__inner{
    padding:12px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
  }
  .nav-toggle{
    display:block;
  }
  .brand{
    min-width:0;
  }
  .main{padding:16px 0 36px}
  .card{padding:14px}
  .h1{font-size:22px}
  .h2{font-size:17px}
  .poster-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .hero{
    min-height:220px;
  }
  .hero__overlay{
    background:linear-gradient(180deg, rgba(11,16,32,.45) 0%, rgba(11,16,32,.86) 68%, rgba(11,16,32,.96) 100%);
  }
  .hero__content{
    max-width:none;
    padding:18px 16px;
  }
  .release-hero{
    gap:14px;
  }
  .release-hero__poster{
    max-width:220px;
  }
  .release-hero__title{
    font-size:28px;
  }
  .profile-panel__head{
    align-items:flex-start;
  }
  .profile-panel__stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .search-bar{
    flex-direction:column;
  }
  .search-bar .btn{
    width:100%;
  }
  .watch-title{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .watch-nav{
    flex-direction:column;
  }
  .watch-nav .btn{
    width:100%;
  }
  .episode-grid{
    grid-template-columns:repeat(auto-fill, minmax(58px, 1fr));
    max-height:none;
    padding-right:0;
  }
  .tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .vplayer__bigplay{
    width:58px;
    height:58px;
    font-size:22px;
  }
  .vplayer{
    box-shadow:0 18px 42px rgba(0,0,0,.38);
  }
  .vplayer__screen{
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .vplayer__hud{
    padding:8px 8px 10px;
    background:linear-gradient(180deg, rgba(10,14,28,0) 0%, rgba(10,14,28,.42) 35%, rgba(10,14,28,.88) 100%);
  }
  .vplayer__row{
    gap:6px;
  }
  .vplayer__btn{
    padding:7px 9px;
    font-size:12px;
  }
  .vplayer__time{
    order:10;
    width:100%;
  }
  .vplayer__spacer{
    display:none;
  }
  .vplayer__quality-wrap{
    margin-left:auto;
  }
  .vplayer__volume{
    width:56px;
  }
  .header{
    position:sticky;
  }
  .nav{
    position:fixed;
    top:10px;
    left:10px;
    right:10px;
    bottom:auto;
    width:auto;
    max-height:min(70dvh, 520px);
    overflow:auto;
    padding:14px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:linear-gradient(180deg, rgba(15,23,48,.985), rgba(11,16,32,.99));
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    box-shadow:0 24px 50px rgba(0,0,0,.45);
    transform:translateY(-16px);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
    z-index:20;
    flex-wrap:nowrap;
  }
  .nav__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:2px;
  }
  .nav__link{
    width:100%;
    text-align:left;
    min-width:0;
    padding:12px 14px;
    font-size:15px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
  }
  .nav__logout{
    display:block;
    width:100%;
    margin-top:4px;
    padding:12px 14px;
    text-align:left;
  }
  .header__right{
    margin-left:0;
  }
  .header__right .btn{
    padding:9px 10px;
  }
  .body--nav-open{
    overflow:hidden;
  }
  .body--nav-open .nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .body--nav-open .nav-backdrop{
    display:block;
  }
  .body--watch-route .main{
    padding:8px 0 24px;
  }
  .body--watch-route .page-stack{
    gap:12px;
  }
  .body--watch-route .card{
    padding:12px;
  }
  .body--watch-route #watchPlayer{
    margin-top:4px;
  }
  .body--watch-route .vplayer{
    border-radius:18px;
  }
  .body--watch-route .vplayer__screen,
  .body--watch-route .player{
    aspect-ratio:16/9;
    max-height:62dvh;
    min-height:min(56.25vw, 220px);
  }
  .body--watch-route .watch-hints{
    display:none;
  }
  .vplayer--mobile-compact .vplayer__center,
  .vplayer--mobile-compact .vplayer__hud,
  .vplayer--mobile-compact .vplayer__foot{
    display:none;
  }
  .vplayer--mobile-compact .vplayer__compact-actions{
    display:flex;
  }
  .vplayer--mobile-compact .vplayer__shade{
    background:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.72) 100%);
  }
}

@media (max-width: 520px){
  .strip,
  .collection-grid{
    grid-template-columns:1fr;
  }
  .poster-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }
  .release-card__body{
    padding:8px 6px 10px;
  }
  .release-card__title{
    font-size:12px;
  }
  .release-card__sub,
  .release-card__meta{
    font-size:11px;
  }
  .release-hero__poster{
    max-width:none;
    width:auto;
    max-height:42vh;
    margin:0 auto;
  }
  .profile-panel__head{
    flex-direction:column;
  }
  .profile-panel__stats{
    grid-template-columns:1fr;
  }
  .release-airing{
    padding:10px 12px;
  }
  .release-airing__row{
    flex-direction:column;
    gap:2px;
    align-items:flex-start;
  }
  .release-airing__label{
    min-width:0;
  }
  .chips{
    gap:6px;
  }
  .chip{
    flex:1 1 calc(50% - 3px);
    min-width:130px;
    justify-content:center;
    text-align:center;
  }
  .release-hero__actions .btn{
    display:flex;
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .screenshot-strip__item{
    width:180px;
  }
  .toastRoot{
    right:12px;
    left:12px;
    bottom:12px;
  }
  .toast{
    width:100%;
  }
  .vplayer__row{
    justify-content:space-between;
  }
  .vplayer__quality-wrap{
    width:calc(50% - 3px);
    justify-content:center;
    margin-left:0;
  }
  .vplayer__vol{
    width:calc(50% - 3px);
    justify-content:flex-end;
  }
  .vplayer__volume{
    flex:1;
    min-width:0;
    width:auto;
  }
  .vplayer__fs,
  .vplayer__skip,
  .vplayer__prev,
  .vplayer__next,
  .vplayer__play{
    flex:1 1 calc(20% - 5px);
  }
  .vplayer__foot{
    padding:10px 12px 12px;
    font-size:12px;
  }
  .body--watch-route .card{
    padding:10px;
  }
  .body--watch-route .vplayer{
    border-radius:14px;
  }
  .body--watch-route .vplayer__screen,
  .body--watch-route .player{
    max-height:56dvh;
  }
  .vplayer__compact-actions{
    left:10px;
    right:10px;
    bottom:10px;
    gap:8px;
  }
  .vplayer__compact-play,
  .vplayer__compact-fs{
    min-height:40px;
    font-size:12px;
    padding:8px 10px;
  }
}