:root {
  --bg: #080808;
  --panel: #151515;
  --panel2: #202020;
  --line: rgba(255, 255, 255, .1);
  --text: #f5f5f5;
  --muted: #a7a7a7;
  --blue: #e50914;
  --stream-red: #e50914;
  --stream-gold: #f6c85f;
}

* { -webkit-tap-highlight-color: transparent; }
html { width: 100%; max-width: 100%; overflow-x: hidden; background: #080808; }
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #080808;
  color: var(--text);
  font-family: Tahoma, Arial, sans-serif;
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 64px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.98), rgba(5,5,5,.82));
  box-shadow: 0 10px 35px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
}
.brand-mark { background: #f5f5f5; box-shadow: none; }
.brand strong { font-size: 21px; letter-spacing: -.5px; }
.brand small { margin-top: 4px; color: var(--stream-red); font-weight: 800; letter-spacing: 3px; }
.circle-button {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
}
.circle-button.active { color: #ff5360; }
.admin-entry { background: #fff; color: #080808; }

main {
  display: flex;
  width: min(1680px, 100%);
  flex-direction: column;
  padding: 0 0 115px;
}
.hero-banner { order: 1; }
.browse-controls { order: 2; }
.featured-section { order: 3; }
.category-shelves { order: 4; }
.library-section { order: 5; }
.live-strip { display: none; }

.hero-banner {
  width: 100%;
  height: clamp(320px, 54vw, 570px);
  margin: 0;
  border: 0;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(90deg, rgba(4,4,4,.96) 5%, rgba(4,4,4,.45) 54%, rgba(4,4,4,.12)), var(--hero-cover, linear-gradient(135deg,#292929,#090909));
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -90px 75px #080808;
}
.hero-banner::after {
  z-index: 0;
  background: linear-gradient(0deg, #080808 0, transparent 45%), linear-gradient(90deg, rgba(0,0,0,.72), transparent 72%);
}
.hero-banner .orb,.hero-banner .film-lines,.hero-controls { display: none; }
.hero-copy {
  z-index: 2;
  top: auto;
  right: clamp(20px, 5vw, 72px);
  bottom: clamp(48px, 8vw, 92px);
  max-width: min(610px, 78%);
}
.hero-copy > span { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 3px; }
.hero-copy > span::before { content: "N"; display: inline-grid; place-items: center; width: 23px; height: 23px; margin-left: 7px; background: var(--stream-red); color: #fff; font-size: 15px; letter-spacing: 0; }
.hero-copy h2 { max-width: 560px; margin: 11px 0; font-size: clamp(30px, 6vw, 62px); line-height: 1.1; text-shadow: 0 3px 25px #000; }
.hero-copy h2 { overflow-wrap: anywhere; }
.hero-copy p { max-width: 560px; color: #dedede; font-size: clamp(12px, 1.5vw, 17px); line-height: 1.8; text-shadow: 0 2px 12px #000; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.hero-actions button { min-height: 44px; border: 0; border-radius: 7px; padding: 0 19px; font-weight: 800; cursor: pointer; }
.hero-primary { background: #fff; color: #0b0b0b; }
.hero-premium { background: rgba(87,87,87,.78); color: #fff; backdrop-filter: blur(8px); }
.hero-dots { display: none; }

.browse-controls,.featured-section,.category-shelves,.library-section { padding-inline: clamp(14px, 3vw, 46px); }
.browse-controls { margin-top: 3px; }
.section-title { margin: 24px 0 12px; }
.section-title h1,.section-title h2 { font-size: clamp(17px, 2vw, 23px); }
.section-title.compact i { display: none; }
.section-title.compact { margin-top: 26px; }
.section-title.compact button,.see-category { color: #b9b9b9; }

.paid-hub-entry {
  position: relative;
  min-height: 128px;
  margin: 14px 0 22px;
  overflow: hidden;
  border: 1px solid rgba(255,209,99,.28);
  border-radius: 18px;
  background: radial-gradient(circle at 15% 20%, rgba(229,9,20,.26), transparent 35%), linear-gradient(105deg,#291d10,#16110c 50%,#111);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.paid-hub-entry::after { content: "PREMIUM"; position: absolute; left: 5%; color: rgba(255,255,255,.045); font-size: clamp(44px,9vw,105px); font-weight: 900; letter-spacing: -4px; }
.paid-hub-entry > span { z-index: 1; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg,#ffe49d,#b68018); color: #251706; }
.paid-hub-entry div { z-index: 1; }
.paid-hub-entry em { color: var(--stream-gold); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 2px; }
.paid-hub-entry b { font-size: clamp(17px,3vw,27px); }
.paid-hub-entry small { max-width: 680px; color: #d1c8b6; font-size: 11px; line-height: 1.7; }
.paid-hub-entry i { z-index: 1; }

.category-icons {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: none;
}
.category-icons .pill {
  display: grid;
  min-width: max-content;
  min-height: 0;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  place-items: initial;
  align-items: center;
  column-gap: 8px;
  border-color: rgba(255,255,255,.12);
  border-radius: 8px;
  background: #191919;
  padding: 10px 15px;
}
.category-icons .pill span { grid-row: 1/3; margin: 0; font-size: 20px; }
.category-icons .pill b { font-size: 11px; }
.category-icons .pill small { font-size: 8px; }
.category-icons .pill.active { border-color: #fff; background: #f4f4f4; color: #090909; }
.category-icons .pill.active small { color: #444; }

.featured-rail,.shelf-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(210px, 31vw, 390px);
  grid-template-rows: none;
  gap: 9px;
  overflow-x: auto;
  padding: 3px 0 13px;
  scroll-snap-type: x proximity;
}
.featured-card {
  min-width: 0;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 8px;
  scroll-snap-align: start;
}
.featured-card::before { width: 45px; height: 45px; inset: 50% auto auto 50%; border-radius: 50%; background: rgba(0,0,0,.48); transform: translate(-50%,-50%); font-size: 16px; }
.featured-info { bottom: 10px; }
.featured-info h3 { font-size: 13px; }
.featured-info span { color: #fff; }

.category-shelf { margin: 10px 0 29px; }
.category-shelf .section-title { margin-bottom: 8px; }
.category-shelf .section-title > div { display: block; }
.category-shelf .section-title > div small { display: block; margin-top: 4px; color: #858585; }
.shelves-loading { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 12px; }
.shelves-loading span { width: 34px; height: 34px; border: 3px solid #333; border-top-color: var(--stream-red); border-radius: 50%; animation: stream-spin .8s linear infinite; }
@keyframes stream-spin { to { transform: rotate(1turn); } }

.media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px 9px; }
.media-card,.compact-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-snap-align: start;
}
.media-card:hover,.media-card:focus-visible { transform: scale(1.025); border-color: transparent; box-shadow: none; }
.media-card .poster,.compact-card .poster {
  aspect-ratio: 16/9;
  border-radius: 7px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 25px rgba(0,0,0,.28);
}
.media-card .poster-symbol { width: 43px; height: 43px; border: 0; background: rgba(0,0,0,.58); font-size: 14px; }
.media-card:hover .poster-symbol { background: var(--stream-red); }
.media-card .media-info,.compact-card .media-info { padding: 9px 2px 0; }
.media-card .media-info h3 { margin-bottom: 5px; color: #f2f2f2; font-size: 12px; }
.media-card .media-info > div { color: #888; }
.card-open { display: none; }
.duration { bottom: 6px; left: 6px; }
.favorite { top: 6px; right: 6px; background: rgba(0,0,0,.72); }
.skeleton { height: 180px; border-radius: 7px; background: linear-gradient(100deg,#151515 30%,#282828 50%,#151515 70%); }

.bottom-nav {
  right: 10px;
  bottom: max(8px,env(safe-area-inset-bottom));
  left: 10px;
  border-color: rgba(255,255,255,.13);
  min-height: 70px;
  padding: 6px 8px max(6px,env(safe-area-inset-bottom));
  border-radius: 20px;
  background: rgba(17,17,17,.94);
  box-shadow: 0 18px 60px #000, inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
}
.bottom-nav button { min-height: 54px; border-radius: 14px; color: #8f8f8f; transition: transform .2s ease,color .2s ease,background .2s ease; }
.bottom-nav button span { display:grid;place-items:center;min-height:25px;font-size: 21px; }
.bottom-nav button small { display: block; margin-top: 3px; opacity: 1; font-size: 9px; font-weight:700; }
.bottom-nav button.active { color: #fff; }
.bottom-nav button.active::after { background: var(--stream-red); }
.bottom-nav button:active { transform:scale(.93) }
.bottom-nav .nav-premium { position:relative;color:#f3cf78 }
.bottom-nav .nav-premium span { width:44px;height:44px;min-height:44px;margin:-23px auto 2px;border:3px solid #151515;border-radius:50%;background:linear-gradient(145deg,#f1cc72,#8e5718);color:#17100a;box-shadow:0 8px 24px rgba(204,145,49,.38);animation:premium-breathe 2.8s ease-in-out infinite }
.bottom-nav .nav-premium.active span { background:linear-gradient(145deg,#fff1b4,#cc7d20) }

.media-detail {
  background: #080808;
}
.detail-shell { width: min(1120px,100%); }
.detail-header { border-bottom-color: rgba(255,255,255,.1); background: rgba(8,8,8,.93); }
.detail-back,.detail-favorite { border-color: rgba(255,255,255,.14); background: #1c1c1c; }
.detail-cover {
  width: calc(100% - 24px);
  margin: 12px auto 0;
  border: 0;
  border-radius: 10px;
  background: var(--cover);
  box-shadow: 0 22px 70px #000;
  transition: aspect-ratio .2s ease;
}
.detail-cover::after { background: linear-gradient(transparent 65%,rgba(0,0,0,.72)); }
.detail-cover video { width: 100%; height: 100%; object-fit: contain !important; background: #000; }
.preview-poster-meta { position:absolute;z-index:4;right:14px;bottom:52px;left:14px;display:flex;align-items:center;gap:7px;opacity:1;transition:opacity .25s ease,transform .25s ease;pointer-events:none }
.preview-poster-meta b,.preview-poster-meta span { border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(0,0,0,.72);color:#fff;padding:6px 9px;font-size:9px;backdrop-filter:blur(8px) }
.preview-poster-meta b { color:#f5d277;font-size:11px }
.preview-playing .preview-poster-meta { opacity:0;transform:translateY(6px) }
.preview-resting::before { content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.64),rgba(0,0,0,.08));pointer-events:none }
.preview-replay { position:absolute;z-index:6;top:50%;left:50%;border:1px solid rgba(255,255,255,.35);border-radius:99px;background:rgba(10,10,10,.86);color:#fff;padding:11px 16px;font-weight:800;transform:translate(-50%,-50%);cursor:pointer;backdrop-filter:blur(10px) }
.preview-complete .detail-play,.preview-complete .premium-item-play { opacity:0 }
.detail-content { max-width: 900px; margin: auto; }
.detail-badges span { border-color: #3b3b3b; background: #181818; color: #d2d2d2; }
.owner-media-details { margin: 14px 0; overflow: hidden; border: 1px solid #303843; border-radius: 14px; background: linear-gradient(145deg,#15191f,#101216); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.owner-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #292f37; }
.owner-detail-heading span { border-radius: 99px; background: #e5bd59; color: #15120a; padding: 4px 8px; font-size: 8px; font-weight: 900; }
.owner-detail-heading b { color: #aeb6c0; font-size: 9px; }
.owner-preview-state { display: flex; align-items: center; gap: 12px; padding: 13px; }
.owner-preview-state i { flex: 0 0 12px; width: 12px; height: 12px; border: 3px solid currentColor; border-radius: 50%; box-shadow: 0 0 16px currentColor; }
.owner-preview-state div { min-width: 0; }
.owner-preview-state small,.owner-preview-state strong,.owner-preview-state p { display: block; }
.owner-preview-state small { margin-bottom: 3px; color: #747e89; font-size: 8px; }
.owner-preview-state strong { color: #f5f7fa; font-size: 13px; }
.owner-preview-state p { margin: 4px 0 0; color: #929ca7; font-size: 9px; line-height: 1.6; }
.owner-media-details[data-status="ready"] .owner-preview-state { color: #48d597; }
.owner-media-details[data-status="progress"] .owner-preview-state { color: #5baef4; }
.owner-media-details[data-status="progress"] .owner-preview-state i { border-top-color: transparent; animation: owner-preview-spin .8s linear infinite; }
.owner-media-details[data-status="warning"] .owner-preview-state { color: #f2bd57; }
.owner-media-details[data-status="error"] .owner-preview-state { color: #ff6678; }
.owner-media-details[data-status="missing"] .owner-preview-state { color: #7e8994; }
@keyframes owner-preview-spin { to { transform: rotate(360deg); } }
.detail-primary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.watch-video { border: 0; background: #fff; color: #090909; box-shadow: none; }
.share-content { display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #474747; border-radius: 14px; background: #242424; color: #fff; padding: 14px 12px; font-weight: 800; cursor: pointer; }
.share-content:disabled { opacity: .55; }
.detail-tools button,.detail-back-bottom { border-color: #333; background: #181818; }

.premium-preview,.paid-hub { background: #090909; }
.premium-header,.premium-item-header { border-bottom-color: rgba(255,255,255,.1); background: rgba(8,8,8,.95); }
.premium-header button,.premium-item-header button { border-color: #363636; background: #1d1d1d; }
.premium-hero {
  min-height: 270px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(0deg,rgba(6,6,6,.88),rgba(6,6,6,.18)),var(--premium-cover);
}
.premium-badge { border-color: var(--stream-gold); background: rgba(0,0,0,.72); }
.premium-benefits span { border-color: #303030; background: #171717; }
.premium-catalog > div:first-child { align-items: start; }
.premium-catalog p { max-width: 460px; font-size: 10px; line-height: 1.6; }
.premium-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 9px; }
.premium-thumb {
  aspect-ratio: 16/11;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--thumb);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: right;
}
.premium-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.94),transparent 64%); }
.premium-thumb::after,.premium-thumb.has-preview::after { content: none !important; }
.premium-card-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: rgba(0,0,0,.64); transform: translate(-50%,-62%); font-size: 14px; }
.premium-card-copy { position: absolute; z-index: 2; right: 10px; bottom: 9px; left: 10px; display: grid; gap: 2px; }
.premium-card-copy b { overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.premium-card-copy small { color: #bcbcbc; font-size: 8px; }
.premium-purchase { border-top-color: #333; background: rgba(12,12,12,.97); }
.premium-purchase button { border: 0; background: #fff; color: #0a0a0a; box-shadow: none; }
.premium-purchase b { color: var(--stream-gold); }
.premium-preview.item-open > .premium-purchase { display: none; }

.premium-item-detail {
  position: fixed;
  z-index: 86;
  inset: 0;
  overflow-y: auto;
  background: #080808;
}
.premium-item-shell { width: min(1050px,100%); min-height: 100%; margin: auto; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.premium-item-header { position: sticky; z-index: 5; top: 0; display: grid; min-height: 64px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 14px; backdrop-filter: blur(18px); }
.premium-item-header button { justify-self: start; border: 1px solid #333; border-radius: 9px; color: #fff; padding: 9px 11px; }
.premium-item-header strong { font-size: 13px; }
.premium-item-header span { justify-self: end; color: var(--stream-gold); }
.premium-item-player {
  position: relative;
  display: grid;
  width: calc(100% - 24px);
  aspect-ratio: 16/9;
  place-items: center;
  margin: 12px auto 0;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(0deg,rgba(0,0,0,.25),rgba(0,0,0,.08)),var(--paid-item-cover);
  box-shadow: 0 25px 75px #000;
  transition: aspect-ratio .2s ease;
}
.premium-item-player video { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.premium-item-play { display: grid; place-items: center; width: 68px; height: 68px; padding-right: 3px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(0,0,0,.62); font-size: 22px; }
.premium-item-preview-note { position: absolute; right: 12px; bottom: 12px; border-radius: 99px; background: rgba(0,0,0,.75); padding: 6px 10px; font-size: 9px; }
.premium-item-player.preview-playing .premium-item-play,.premium-item-player.preview-playing .premium-item-preview-note { opacity: 0; }
.premium-item-content { padding: 22px 17px; }
.premium-item-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.premium-item-badges span { border: 1px solid #383838; border-radius: 99px; background: #181818; padding: 6px 10px; color: #d8d8d8; font-size: 9px; }
.premium-item-content h1 { margin: 14px 0 7px; font-size: clamp(22px,5vw,36px); }
.premium-item-content p { max-width: 760px; color: #aaa; line-height: 1.8; }
.premium-item-buy { width: 100%; margin-top: 12px; border: 0; border-radius: 8px; background: #fff; color: #080808; padding: 15px; font-size: 14px; font-weight: 900; }
.premium-item-disclaimer { display: block; margin: 10px 3px; color: #737373; text-align: center; line-height: 1.7; }

.paid-hub-shell { width: min(1500px,100%); margin: auto; padding-bottom: 60px; }
.paid-hub-hero {
  min-height: 230px;
  margin: 0 0 25px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 0;
  border-radius: 0 0 20px 20px;
  background: radial-gradient(circle at 20% 20%,rgba(229,9,20,.34),transparent 30%),linear-gradient(125deg,#27180b,#0a0a0a 65%);
  text-align: center;
}
.paid-hub-hero p { max-width: 680px; }
.paid-hub-section { padding: 0 clamp(14px,3vw,40px) 30px; }
.paid-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.paid-section-heading small { color: var(--stream-gold); font-size: 8px; letter-spacing: 2px; }
.paid-section-heading h2 { margin: 4px 0 0; font-size: clamp(19px,3vw,27px); }
.paid-section-heading p { max-width: 460px; margin: 0; color: #888; font-size: 10px; line-height: 1.6; }
.paid-bundle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; padding: 0; }
.paid-bundle-card { min-height: 0; overflow: hidden; border: 0; border-radius: 9px; background: #171717; box-shadow: 0 12px 35px rgba(0,0,0,.25); }
.paid-bundle-cover { height: auto; aspect-ratio: 16/9; }
.paid-bundle-cover > span { position: absolute; z-index: 2; top: 9px; right: 9px; border-radius: 4px; background: rgba(0,0,0,.78); padding: 4px 7px; color: var(--stream-gold); font-size: 7px; letter-spacing: 1px; }
.paid-bundle-copy { padding: 12px; }
.paid-bundle-copy h2 { font-size: 14px; }
.paid-bundle-copy p { height: 35px; color: #929292; font-size: 9px; }
.paid-bundle-count { display: flex; align-items: baseline; gap: 5px; margin: 12px 0; }
.paid-bundle-count b { color: #fff; font-size: 24px; }
.paid-bundle-count span { color: #9c9c9c; font-size: 9px; }
.paid-bundle-meta { padding-top: 10px; border-top: 1px solid #292929; color: #ccc; font-size: 9px; }
.paid-bundle-meta b { color: var(--stream-gold); }
.paid-bundle-card.unlocked { outline: 1px solid #3a9c70; }

.filter-sheet,.form-sheet { border-color: #333; background: #121212; }
.filter-option { border-color: #333; background: #1b1b1b; }
.filter-option.active { border-color: #fff; background: #eee; color: #090909; }
.search-panel { background: #0b0b0b; }
.search-panel label { border-color: #333; background: #181818; }
.service-gate { position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,5,7,.96);backdrop-filter:blur(18px) }
.service-gate>div { width:min(430px,100%);border:1px solid #343434;border-radius:22px;background:linear-gradient(150deg,#1d1d1d,#0e0e0e);padding:30px;text-align:center;box-shadow:0 30px 100px #000 }
.service-gate span { display:grid;place-items:center;width:72px;height:72px;margin:auto;border-radius:50%;background:#302316;font-size:31px }
.service-gate h1 { margin:17px 0 8px;font-size:24px }
.service-gate p { color:#aaa;line-height:1.8 }
.service-gate button { width:100%;margin-top:13px;border:0;border-radius:12px;background:#fff;color:#080808;padding:14px;font-weight:900 }
.featured-card,.media-card,.shelf-card,.paid-bundle-card { animation:catalog-enter .48s cubic-bezier(.2,.8,.2,1) both }
.hero-banner { animation:hero-arrive .65s cubic-bezier(.2,.8,.2,1) both }
@keyframes catalog-enter { from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} }
@keyframes hero-arrive { from{opacity:.25;transform:scale(.985)} to{opacity:1;transform:none} }
@keyframes premium-breathe { 50%{transform:translateY(-2px);box-shadow:0 11px 31px rgba(225,165,58,.55)} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media (min-width: 680px) {
  .media-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .premium-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .paid-bundle-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .premium-item-content { padding-inline: 28px; }
}

@media (min-width: 1050px) {
  .topbar { padding-inline: max(34px,calc((100% - 1600px)/2)); }
  .media-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .premium-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .paid-bundle-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .premium-item-buy { width: auto; min-width: 370px; }
}

@media (max-width: 520px) {
  .topbar { min-height: 58px; padding: 8px 12px; }
  .brand strong { font-size: 18px; }
  .brand small { font-size: 8px; }
  .circle-button { width: 39px; height: 39px; }
  .hero-banner { height: 390px; border-radius: 0 0 16px 16px; background-position: 58% center; }
  .hero-copy { right: 16px; bottom: 48px; max-width: calc(100% - 32px); }
  .hero-copy h2 { font-size: 31px; }
  .hero-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; }
  .hero-actions { margin-top: 14px; }
  .hero-actions button { flex: 1; padding-inline: 9px; font-size: 10px; }
  .browse-controls,.featured-section,.category-shelves,.library-section { padding-inline: 12px; }
  .browse-controls > .section-title { align-items: end; }
  .filter-button { padding: 7px 8px !important; font-size: 9px !important; }
  .paid-hub-entry { min-height: 112px; padding: 13px; }
  .paid-hub-entry > span { width: 44px; height: 44px; }
  .paid-hub-entry small { font-size: 9px; }
  .featured-rail,.shelf-rail { grid-auto-columns: 76vw; }
  .media-grid { gap: 14px 7px; }
  .media-card .media-info h3 { font-size: 10px; }
  .detail-cover,.premium-item-player { width: calc(100% - 16px); margin-top: 8px; border-radius: 7px; }
  .detail-content { padding: 17px 12px; }
  .premium-hero { min-height: 235px; margin: 8px; }
  .premium-catalog,.premium-benefits { padding-inline: 10px; }
  .premium-grid { gap: 10px 7px; }
  .premium-purchase { padding-inline: 10px; }
  .premium-purchase button { min-width: 0; font-size: 10px; }
  .premium-item-header { padding-inline: 8px; }
  .premium-item-header button { font-size: 9px; }
  .premium-item-content p { font-size: 11px; }
  .paid-hub-hero { min-height: 250px; padding-inline: 18px; }
  .paid-section-heading { display: block; }
  .paid-section-heading p { margin-top: 7px; }
  .paid-bundle-copy { padding: 9px; }
  .paid-bundle-copy h2 { font-size: 12px; }
  .paid-bundle-count b { font-size: 21px; }
  .detail-primary-actions { grid-template-columns:1fr; }
  .bottom-nav { right:6px;left:6px;bottom:max(5px,env(safe-area-inset-bottom)); }
}