/* CORE — NAVBAR (solid bg for scroll perf; glass blur caused jank) */
.navbar {
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  background:rgba(var(--bg-rgb,31,31,31),0.97);
  border-bottom:1px solid rgba(255,255,255,.06);
  /* no backdrop-filter: sticky/fixed + blur = continuous compositing on scroll */
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.navbar.scrolled {
  background:rgba(var(--bg-rgb,31,31,31),0.99);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.nav-inner {
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(16px,3vw,36px);
  display:flex;
  align-items:center;
  gap:20px;
}
.nav-logo {
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.nav-logo-desktop {
  height:28px;
  width:auto;
  max-width:130px;
  display:block;
  object-fit:contain;
}
.nav-logo-mobile {
  height:30px;
  width:auto;
  max-width:min(96px,28vw);
  display:none;
  object-fit:contain;
}
.nav-wordmark {
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:-.02em;
  color:#fff;
}
.nav-amp {
  color:var(--accent);
}
.nav-links {
  display:flex;
  align-items:center;
  gap:2px;
  margin:0 auto;
}
.nav-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.9rem;
  font-weight:550;
  letter-spacing:.01em;
  color:rgba(255,255,255,.82) !important;
  padding:8px 13px;
  border-radius:999px;
  transition:color .18s ease,background .18s ease;
  white-space:nowrap;
}
.nav-link i {
  width:15px;
  text-align:center;
  flex-shrink:0;
  font-size:.8em;
  opacity:.75;
}
.nav-link:hover {
  color:#fff !important;
  background:rgba(255,255,255,.08);
}
.nav-link.active,
.nav-link.is-active {
  color:#fff !important;
  background:rgba(255,255,255,.12);
  font-weight:600;
}
.nav-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0;
  margin:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  cursor:pointer;
}
.nav-toggle span {
  display:block;
  width:18px;
  height:2px;
  margin:0 auto;
  background:rgba(255,255,255,.9);
  border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1) {
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity:0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg);
}
.nav-search {
  position:relative;
  display:flex;
  align-items:center;
  flex-shrink:0;
  width:min(260px,30vw);
  z-index:1100;
}
.nav-search-form {
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
}
.nav-search-ico {
  position:absolute;
  left:13px;
  color:var(--text-dim);
  font-size:.85rem;
  pointer-events:none;
  z-index:2;
}
.nav-search-form input {
  width:100%;
  padding:9px 36px 9px 34px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  font-family:inherit;
  font-size:.88rem;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
  box-sizing:border-box;
}
.nav-search-form input::placeholder {
  color:var(--text-dim);
}
.nav-search-form input:focus {
  outline:none;
  background:rgba(0,0,0,.45);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
}
.live-search-spinner {
  position:absolute;
  right:13px;
  width:13px;
  height:13px;
  border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--accent);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:liveSearchSpin .65s linear infinite;
}
.nav-search.is-loading .live-search-spinner {
  opacity:1;
}
@keyframes liveSearchSpin {
  to {
    transform:rotate(360deg);
  }
}
.live-search-results {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  width:100%;
  max-height:min(460px,68vh);
  overflow-y:auto;
  background:rgba(var(--bg-rgb),.98);
  /* solid panel — blur only needed while results open, but solid is cheaper */
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.28);
  padding:6px;
  box-sizing:border-box;
  overscroll-behavior:contain;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.live-search-results:not([hidden]) {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.live-search-results[hidden] {
  display:block;
}
.live-search-results::-webkit-scrollbar {
  width:5px;
}
.live-search-results::-webkit-scrollbar-track {
  background:transparent;
}
.live-search-results::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.1);
  border-radius:20px;
}
.live-search-item {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:7px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  box-sizing:border-box;
  transition:background .15s ease;
}
.live-search-item:hover,.live-search-item:focus {
  background:rgba(255,255,255,.055);
  outline:none;
}
.live-search-poster {
  width:40px;
  height:54px;
  flex:0 0 40px;
  border-radius:6px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.live-search-poster img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.live-search-no-poster {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  font-size:14px;
}
.live-search-info {
  min-width:0;
  flex:1;
}
.live-search-title {
  margin:0 0 4px;
  color:#fff;
  font-size:12.5px;
  line-height:1.32;
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.live-search-meta {
  display:flex;
  align-items:center;
  gap:6px;
  color:#8f96a3;
  font-size:9.5px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
}
.live-search-meta span {
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-search-meta i {
  color:var(--accent);
  font-size:8.5px;
}
.live-search-arrow {
  flex:0 0 auto;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#8f96a3;
  font-size:9px;
  transition:background .15s ease,color .15s ease;
}
.live-search-item:hover .live-search-arrow {
  color:var(--accent-ink);
  background:var(--accent);
}
.live-search-message {
  padding:20px 14px;
  text-align:center;
  color:#8f96a3;
  font-size:11.5px;
  font-weight:500;
}
.live-search-message i {
  display:block;
  margin-bottom:8px;
  color:#596273;
  font-size:20px;
}
.live-search-message strong {
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-size:12.5px;
}
.live-search-all {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:4px;
  padding:10px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--accent);
  font-size:10.5px;
  font-weight:700;
  text-decoration:none;
  transition:color .15s ease;
}
.live-search-all:hover {
  color:#fff;
}
@media (max-width:960px) {
  .nav-inner {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:12px;
    padding-left:14px;
    padding-right:14px;
  }
  .nav-logo {
    grid-column:1;
    justify-self:start;
  }
  .nav-search {
    grid-column:2;
    justify-self:stretch;
    width:100%;
    max-width:none;
    flex:none;
    margin-left:0;
  }
  .nav-toggle {
    grid-column:3;
    justify-self:end;
    display:flex;
  }
  .nav-links {
    grid-column:1 / -1;
    position:fixed;
    top:var(--nav-h);
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin:0;
    padding:12px clamp(14px,3vw,32px) 20px;
    background:rgba(var(--bg-rgb,31,31,31),0.99);
    border-bottom:1px solid var(--border);
    transform:translateY(-140%);
    transition:transform .3s cubic-bezier(.5,0,.2,1);
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .nav-links.open {
    transform:translateY(0);
  }
  .nav-link {
    padding:14px 12px;
    font-size:1rem;
  }
  .live-search-results {
    position:fixed;
    top:calc(var(--nav-h) + 8px);
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100vh - var(--nav-h) - 24px);
    border-radius:14px;
  }
  .nav-logo-desktop {
    display:none;
  }
  .nav-logo-mobile {
    display:block;
    height:30px;
    max-width:min(84px,24vw);
  }
}
@media (max-width:560px) {
  .nav-inner {
    column-gap:8px;
    padding-left:10px;
    padding-right:10px;
  }
  .nav-wordmark {
    display:none;
  }
  .nav-logo-mobile {
    height:28px;
    max-width:72px;
  }
  .nav-toggle {
    width:38px;
    height:38px;
  }
  .nav-search-ico {
    left:11px;
    font-size:.78rem;
  }
  .nav-search-form input {
    font-size:16px;
    padding:8px 30px 8px 30px;
  }
  .live-search-spinner {
    right:11px;
  }
  .live-search-results {
    left:10px;
    right:10px;
    top:calc(var(--nav-h) + 7px);
    border-radius:13px;
  }
  .live-search-item {
    padding:8px;
  }
  .live-search-poster {
    width:38px;
    height:52px;
    flex-basis:38px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .live-search-spinner {
    animation:none;
  }
  .live-search-item,.live-search-results {
    transition:none;
  }
}
@media (max-width:960px) {
  .navbar {
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:1000;
    background:rgba(var(--bg-rgb,31,31,31),0.98) !important;
  }
  .navbar.scrolled {
    background:rgba(0,0,0,.96) !important;
    /* no backdrop-filter on fixed mobile nav — major scroll-lag source */
  }
}
.nav-link {
  letter-spacing:.01em;
}
.live-search-title {
  letter-spacing:0;
  line-height:1.35;
}
.tooxtra-panel-item-val,
.tmdb-cast-name,
.tmdb-cast-character {
  letter-spacing:0;
  line-height:1.55;
}
@media (max-width:960px) {
  .nav-inner {
    display:grid !important;
    grid-template-columns:max-content minmax(0,1fr) max-content;
    align-items:center;
    column-gap:8px;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .nav-logo {
    grid-column:1;
    justify-self:start;
    margin:0;
    padding:0;
  }
  .nav-logo-mobile {
    height:30px !important;
    max-width:88px !important;
  }
  .nav-search {
    grid-column:2;
    justify-self:stretch;
    width:100% !important;
    max-width:220px !important;
    margin:0 auto !important;
  }
  .nav-search-form input {
    font-size:16px !important;
    padding-left:34px !important;
    padding-right:10px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
  }
  .nav-toggle {
    grid-column:3;
    justify-self:end;
    width:40px;
    height:40px;
  }
  .nav-links {
    grid-column:1 / -1;
  }
}
.live-search-item:hover,.live-search-item:focus,.live-search-item.is-active {
  background:#0071e3 !important;
  color:#fff !important;
}
.live-search-item:hover .live-search-title,.live-search-item:focus .live-search-title,.live-search-item.is-active .live-search-title,.live-search-item:hover .live-search-sub,.live-search-item:focus .live-search-sub,.live-search-item.is-active .live-search-sub,.live-search-item:hover .live-search-meta,.live-search-item:focus .live-search-meta {
  color:#fff !important;
}
.live-search-sub {
  font-size:12px;
  color:rgba(255,255,255,.55);
  font-weight:500;
}
.live-search-title {
  font-weight:600;
  letter-spacing:-0.01em;
}
@media (max-width:960px) {
  .live-search-results {
    background:#141414 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 12px 40px rgba(0,0,0,.65) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    max-height:min(70vh,520px);
  }
  .live-search-item:hover,.live-search-item:focus,.live-search-item.is-active {
    background:#0071e3 !important;
  }
  .live-search-message {
    color:rgba(255,255,255,.55);
  }
}
.nav-logo-img {
  display:block;
  height:30px;
  width:auto;
  max-width:120px;
  object-fit:contain;
}
@media (max-width:960px) {
  .nav-logo-img { max-width:min(88px,24vw); }
}
@media (max-width:560px) {
  .nav-logo-img { height:28px; max-width:72px; }
}