*{box-sizing:border-box}
:root{
  --logo-size:34px;
  --bg:#08090b;
  --bg-rgb:8,9,11;
  --bg-2:#111318;
  --panel:#16181f;
  --panel-2:#1d2028;
  --line:#2b303b;
  --text:#f4f6fb;
  --muted:#a3abb9;
  --soft:#7f8795;
  --accent:#e7a526;
  --accent-rgb:231,165,38;
  --accent-2:#35d6ff;
  --accent-2-rgb:53,214,255;
  --danger:#df4b54;
  --ok:#4ed58a;
  --shadow:0 22px 70px rgba(0,0,0,.45);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 78% 8%,rgba(var(--accent-rgb),.14),transparent 30%),
    radial-gradient(circle at 18% 0,rgba(var(--accent-2-rgb),.12),transparent 28%),
    linear-gradient(180deg,var(--bg) 0,var(--bg-2) 42%,var(--bg) 100%);
  color:var(--text);
}
a{color:inherit}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:0 4vw;
  background:rgba(var(--bg-rgb),.78);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}
.brand.logo-only{gap:0}
.brand.logo-only .brand-name{display:none}
.brand-mark{font-size:var(--logo-size);line-height:1;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;min-width:var(--logo-size);height:var(--logo-size)}
.brand-mark.has-image{color:inherit}
.brand-logo{display:block;width:var(--logo-size);height:var(--logo-size);object-fit:contain}
.brand-name,.topbar strong{font-size:26px;font-weight:850;color:var(--text);letter-spacing:0}
.topbar nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.topbar nav a,.pill-link{
  color:var(--text);
  text-decoration:none;
  padding:10px 13px;
  border-radius:999px;
  font-size:14px;
}
.topbar nav a:hover,.pill-link:hover{background:rgba(255,255,255,.08);color:#fff}
.topbar nav.marketing-nav{flex-wrap:nowrap}
.topbar .nav-menu{position:relative;display:flex;align-items:center}
.topbar .nav-menu-trigger{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar .nav-menu-trigger:after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.72;
}
.topbar .nav-submenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:60;
  min-width:190px;
  display:grid;
  gap:4px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(12,14,19,.98);
  box-shadow:0 22px 70px rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
}
.topbar .nav-submenu:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}
.topbar .nav-menu:hover .nav-submenu,
.topbar .nav-menu:focus-within .nav-submenu{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.topbar .nav-submenu a{
  display:flex;
  align-items:center;
  min-height:40px;
  border-radius:8px;
  white-space:nowrap;
}
.topbar nav a.nav-app-link{
  margin-left:8px;
  border:1px solid rgba(var(--accent-2-rgb),.32);
  background:rgba(var(--accent-2-rgb),.08);
}
.topbar nav a[data-admin-link]{color:var(--accent)}
.mobile-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  place-items:center;
}
.mobile-menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:3px auto;
  border-radius:999px;
  background:#fff;
  transition:transform .18s ease,opacity .18s ease;
}
.mobile-nav-open .mobile-menu-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mobile-nav-open .mobile-menu-toggle span:nth-child(2){opacity:0}
.mobile-nav-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,520px);
  gap:42px;
  align-items:center;
  min-height:560px;
  padding:72px 5vw 50px;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(var(--bg-rgb),.98) 0,rgba(var(--bg-rgb),.74) 48%,rgba(var(--bg-rgb),.28) 100%),
    radial-gradient(circle at 82% 48%,rgba(var(--accent-rgb),.2),transparent 34%);
  pointer-events:none;
}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,6vw,78px);line-height:.95;margin:0 0 18px;max-width:840px;letter-spacing:0}
.hero p{font-size:20px;line-height:1.55;color:#cfd5df;max-width:720px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.conversion-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(130px,1fr));
  gap:10px;
  padding:0;
  margin:22px 0 0;
  list-style:none;
}
.conversion-steps li{
  position:relative;
  min-height:104px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}
.conversion-steps li:before{
  content:counter(list-item);
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-bottom:10px;
  border-radius:999px;
  background:var(--accent);
  color:#101010;
  font-weight:900;
  font-size:12px;
}
.conversion-steps strong{display:block;margin-bottom:5px}
.conversion-steps span{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.hero-flow{max-width:900px}
.hero-mosaic{
  display:grid;
  grid-template-columns:repeat(3,minmax(82px,1fr));
  gap:14px;
  transform:perspective(900px) rotateY(-8deg);
}
.poster-tile{
  min-height:150px;
  aspect-ratio:2/3;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),
    linear-gradient(180deg,#293241,#11151c);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  color:inherit;
  cursor:pointer;
  display:block;
  text-decoration:none;
  transition:filter .16s ease, box-shadow .16s ease, outline-color .16s ease;
}
.poster-tile:hover,.poster-tile:focus-visible{filter:brightness(1.08);outline:2px solid rgba(var(--accent-rgb),.72);outline-offset:3px}
.poster-tile:after{
  content:attr(data-label);
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  font-size:12px;
  color:#fff;
  text-shadow:0 2px 10px #000;
}
.poster-tile:nth-child(2n){transform:translateY(26px);background:linear-gradient(145deg,rgba(var(--accent-rgb),.46),rgba(var(--bg-rgb),.92))}
.poster-tile:nth-child(3n){background:linear-gradient(145deg,rgba(var(--accent-2-rgb),.35),rgba(var(--bg-rgb),.96))}
.poster-tile:nth-child(5){transform:translateY(48px)}
.button,button{
  border:1px solid var(--accent);
  border-radius:999px;
  padding:12px 18px;
  background:var(--accent);
  color:#121212;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}
button:hover,.button:hover{filter:brightness(1.08)}
.secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
input,select,textarea{
  width:100%;
  border-radius:8px;
  border:1px solid var(--line);
  padding:12px 13px;
  background:var(--bg-2);
  color:#fff;
  outline:none;
}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(var(--accent-rgb),.75);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.section-kicker{margin:0 5vw 10px;color:var(--accent);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.section-kicker--flush{margin-left:0}
.section-kicker--compact{margin:0}
.section-title{margin:0 5vw 18px;font-size:30px}
.pricing,.portal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;
  padding:24px 5vw;
}
.card,.compare,.faq,.terms,.panel,.mini-card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:22px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.card:hover,.mini-card:hover{border-color:rgba(var(--accent-rgb),.35)}
.card.muted{opacity:.88}
.enterprise-card{
  border-color:rgba(var(--accent-rgb),.32);
  background:
    linear-gradient(180deg,rgba(var(--accent-rgb),.12),rgba(255,255,255,.035)),
    linear-gradient(145deg,rgba(var(--accent-2-rgb),.08),transparent 42%);
}
.enterprise-card .price{font-size:34px;color:var(--accent)}
.card h2,.panel h2{margin-top:0}
.price{font-size:42px;font-weight:900;margin:8px 0;color:#fff}
.buy,.stack,form{display:grid;gap:10px}
.compare,.faq,.terms,.narrow{margin:24px 5vw}
.compare,.faq,.terms{max-width:none}
.homepage-streams,.compare,.faq,.terms,.pricing{content-visibility:auto;contain-intrinsic-size:1px 720px}
.narrow{max-width:760px}
.feature-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:20px 5vw;
}
.feature-card{min-height:130px}
.feature-card strong{display:block;font-size:18px;margin-bottom:8px}
.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:end}
.compact-toolbar{gap:8px;justify-content:flex-start}
.compact-toolbar button{padding:8px 10px;font-size:12px}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.section-head .section-kicker,.media-browser-hero .section-kicker{margin:0 0 8px}
table{width:100%;border-collapse:collapse}
td,th{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
th{color:#dfe4ec;font-size:13px;text-transform:uppercase}
pre{white-space:pre-wrap;background:var(--bg-2);padding:16px;border-radius:8px}
.table-wrap{overflow:auto}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}
.proof-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}
.proof-card img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#090b0f;
}
.proof-card h3,.proof-card p{margin:14px}
.faq-inline{margin:18px 0;padding:0;background:transparent;border:0;box-shadow:none}
.admin-shell,.account-shell{
  display:grid;
  grid-template-columns:250px 1fr;
  min-height:calc(100vh - 72px);
}
.side-nav{
  background:rgba(9,10,13,.86);
  border-right:1px solid rgba(255,255,255,.08);
  padding:20px 14px;
  position:sticky;
  top:72px;
  height:calc(100vh - 72px);
}
.side-nav:before{content:"Browse";display:block;color:var(--soft);font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:8px 12px}
.side-nav a,.side-nav button{
  display:block;
  width:100%;
  text-align:left;
  margin:4px 0;
  padding:11px 12px;
  border-radius:8px;
  background:transparent;
  border:0;
  color:#cfd5df;
  text-decoration:none;
}
.side-nav a.active,.side-nav button.active,.side-nav a:hover,.side-nav button:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}
.side-nav a.active,.side-nav button.active{box-shadow:inset 3px 0 0 var(--accent)}
.admin-content,.account-content{padding:26px 4vw 42px;min-width:0}
.admin{display:grid;gap:20px;margin:0;min-height:100vh}
.admin>#login{max-width:520px;margin:12vh auto}
#dashboard>.toolbar{padding:18px 4vw;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(8,9,11,.72);position:sticky;top:0;z-index:10}
#dashboard>.toolbar h1{margin:0}
.inline-check{display:flex;align-items:center;gap:8px;color:#d6dce6}
.inline-check input{width:auto}
.licence-output-label{display:grid;gap:8px;margin-top:14px;color:#d6dce6}
#manualKey{font-family:Consolas,monospace;font-size:16px;color:#7dffb2}
.cookie-banner{
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:30;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:rgba(18,20,26,.94);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow);
}
.cookie-banner p{margin:.4rem 0 0;color:#cfd5df}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.account-hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:18px;
  align-items:start;
}
.account-hero #accountPanel{
  min-height:280px;
  background:
    linear-gradient(90deg,rgba(18,20,26,.96),rgba(18,20,26,.74)),
    radial-gradient(circle at 80% 30%,rgba(var(--accent-rgb),.18),transparent 30%);
}
#accountPanel h1{font-size:clamp(34px,4vw,58px);line-height:1;margin:0 0 12px}
#loginPanel,#registerPanel{position:sticky;top:92px}
.legal-doc{max-width:980px;margin:32px auto;padding:0 5vw;line-height:1.65;color:#e8e8e8}
.legal-doc h1,.legal-doc h2{line-height:1.2}
.warning{border-left:4px solid #ffcc00;padding:12px 16px;background:#211d0f;color:#fff}
.fineprint,.meta{color:var(--muted);font-size:13px}
.status{color:#e7e7e7}
.mini-card{background:rgba(255,255,255,.045);border-radius:9px}
.mini-card p{margin:.45rem 0;color:#d8dee8}
.mini-card strong{display:block;font-size:16px}
.link-card{
  color:inherit;
  cursor:pointer;
  display:block;
  position:relative;
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.link-card:hover,.link-card:focus-visible{
  background:rgba(255,255,255,.07);
  border-color:rgba(var(--accent-rgb),.48);
  outline:2px solid rgba(var(--accent-rgb),.55);
  outline-offset:3px;
  transform:translateY(-2px);
}
.card-link-label{
  color:var(--accent);
  display:inline-flex;
  font-size:13px;
  font-weight:850;
  margin-top:10px;
}
.library-rail{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}
.library-tile{
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  overflow:hidden;
}
.library-tile.active{border-color:rgba(var(--accent-rgb),.72)}
.library-tile button{
  width:100%;
  min-height:124px;
  display:grid;
  gap:8px;
  text-align:left;
  border:0;
  background:
    radial-gradient(circle at 80% 20%,rgba(var(--accent-rgb),.22),transparent 38%),
    rgba(255,255,255,.03);
  color:#fff;
}
.library-tile span,.library-tile small{color:var(--muted)}
.library-tile strong{font-size:21px}
.media-browser-panel{padding:0;overflow:hidden}
.media-browser-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,440px);
  gap:18px;
  align-items:end;
  padding:26px;
  background:
    linear-gradient(90deg,rgba(12,15,22,.98),rgba(12,15,22,.74)),
    radial-gradient(circle at 82% 18%,rgba(var(--accent-rgb),.24),transparent 34%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.media-browser-hero h2{font-size:clamp(30px,4vw,52px);margin:0 0 8px}
.media-search{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}
.filter-rail{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:16px 22px 0;
}
.chip{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#dce3ee;
  border-radius:999px;
  padding:9px 13px;
}
.chip.active,.chip:hover{border-color:rgba(var(--accent-rgb),.66);color:#fff;background:rgba(var(--accent-rgb),.14)}
.media-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:18px;
  padding:22px;
}
.media-card{
  min-width:0;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 14px 42px rgba(0,0,0,.2);
}
.media-card:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-2px)}
.poster-frame{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  border:0;
  border-radius:0;
  overflow:hidden;
  padding:0;
  display:grid;
  place-items:center;
  background:
    linear-gradient(145deg,rgba(var(--accent-rgb),.36),rgba(var(--bg-rgb),.9)),
    #171c26;
  color:#fff;
}
.poster-frame img{width:100%;height:100%;object-fit:cover;display:block}
.poster-frame>span:not(.play-float){font-size:34px;font-weight:900;letter-spacing:.03em}
.play-float{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  text-align:center;
  padding:9px 10px;
  border-radius:8px;
  background:rgba(0,0,0,.72);
  opacity:0;
  transform:translateY(6px);
  transition:.16s ease;
}
.media-card:hover .play-float,.poster-frame:focus .play-float{opacity:1;transform:none}
.media-card-body{display:grid;gap:6px;padding:12px}
.media-card-body strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-card-body p{margin:0;color:#dce3ee;font-size:13px}
.media-card-body .meta{
  display:block;
  min-height:32px;
  overflow:hidden;
}
.media-card-grid.media-row-browser{
  grid-template-columns:1fr;
  gap:24px;
}
.media-rail-section{
  display:grid;
  gap:12px;
  min-width:0;
}
.media-rail-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:end;
}
.media-rail-head h3{
  margin:0;
  font-size:22px;
}
.media-rail-head span{
  color:var(--muted);
  font-size:13px;
}
.media-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(178px,212px);
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  padding:2px 2px 12px;
  scrollbar-color:rgba(var(--accent-rgb),.45) rgba(255,255,255,.06);
}
.media-rail .media-card{
  scroll-snap-align:start;
}
.show-card .show-poster{
  cursor:default;
}
.show-card .play-float{
  opacity:1;
  transform:none;
}
.season-picker{
  display:grid;
  gap:6px;
  margin-top:4px;
  color:#dce3ee;
  font-size:12px;
  text-transform:uppercase;
}
.season-picker select{
  width:100%;
  min-height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:#111722;
  color:#fff;
  padding:8px 10px;
}
.episode-list{
  list-style:none;
  display:grid;
  gap:8px;
  max-height:226px;
  overflow:auto;
  margin:8px 0 0;
  padding:0;
}
.episode-list li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.episode-list strong{
  display:block;
  font-size:13px;
  line-height:1.25;
  white-space:normal;
}
.episode-list small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}
.episode-list button{
  padding:7px 9px;
  font-size:12px;
}
.device-card{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.device-card.warn{border-color:rgba(255,196,87,.75);background:rgba(255,196,87,.08)}
.security-alert{border:1px solid rgba(255,196,87,.55);background:rgba(255,196,87,.1);border-radius:9px;padding:14px;color:#fff4d6}
.security-alert p{margin:.35rem 0 0;color:#ffe5a8}
.user-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:320px}
.user-actions button{padding:8px 10px;font-size:12px}
.site-footer{
  margin:46px 5vw 24px;
  padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.1);
  color:#cbd2dc;
  display:grid;
  gap:12px;
}
.site-footer nav{display:flex;gap:12px;flex-wrap:wrap}
.site-footer p{margin:0}
.site-footer strong,.logo-preview{display:flex;align-items:center;gap:10px}
.social-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.social-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font-weight:800;
  text-decoration:none;
}
.social-button span{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  font-size:14px;
  font-weight:950;
}
.social-button:hover{border-color:rgba(var(--accent-rgb),.58);background:rgba(var(--accent-rgb),.12)}
.download-page{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:42px 5vw}
.download-hero{width:min(980px,100%);background:rgba(18,20,26,.86);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:34px;box-shadow:0 24px 70px rgba(0,0,0,.28)}
.download-hero h1{font-size:clamp(34px,5vw,64px);margin:0 0 14px}
.download-copy{color:#d6dce6;font-size:17px;line-height:1.65}
.download-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
.download-option{display:grid;gap:10px;align-content:start;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.045);padding:18px}
.download-option h2{margin:0;font-size:24px}
.download-option p{margin:0;color:#d6dce6}
.download-option .hero-actions{margin-top:6px}
.download-primary[disabled]{opacity:.55;cursor:not-allowed}
.troubleshooting-page{width:min(1180px,100%);margin:0 auto;padding:42px 5vw 24px;display:grid;gap:18px}
.troubleshooting-hero{
  padding:34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:
    linear-gradient(90deg,rgba(18,20,26,.96),rgba(18,20,26,.78)),
    radial-gradient(circle at 82% 18%,rgba(var(--accent-rgb),.18),transparent 34%);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.troubleshooting-hero h1{font-size:clamp(38px,6vw,72px);line-height:1;margin:0 0 12px}
.troubleshooting-hero p{max-width:820px;color:#d6dce6;font-size:18px;line-height:1.65}
.troubleshooting-alert{
  border-radius:10px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}
.troubleshooting-alert strong{display:block;margin-bottom:6px;color:#fff}
.troubleshooting-alert p{margin:0;color:#d9e2ef;line-height:1.55}
.info-card{border-left:4px solid var(--accent-2)}
.warning-card{border-left:4px solid #ffcc00;background:rgba(255,204,0,.08)}
.troubleshooting-index{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.troubleshooting-index a{
  text-decoration:none;
  color:#dce3ee;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:9px 12px;
  background:rgba(255,255,255,.045);
  font-size:13px;
}
.troubleshooting-index a:hover{border-color:rgba(var(--accent-rgb),.65);color:#fff}
.troubleshooting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.troubleshooting-card{
  min-width:0;
  display:grid;
  gap:14px;
  align-content:start;
  padding:22px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 14px 42px rgba(0,0,0,.2);
}
.troubleshooting-card h2{margin:0;font-size:24px}
.troubleshooting-card h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;color:var(--accent);letter-spacing:.08em}
.trouble-block ul,.trouble-block ol,.troubleshooter-panel ol{margin:0;padding-left:20px;color:#dce3ee;line-height:1.6}
.trouble-block li+li,.troubleshooter-panel li+li{margin-top:6px}
.troubleshooting-card pre{
  margin:0;
  overflow:auto;
  border:1px solid rgba(255,255,255,.1);
  background:#070b11;
  color:#d9f4ff;
}
.guided-card{grid-column:1/-1}
.troubleshooter-panel{
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  padding:16px;
  background:rgba(255,255,255,.045);
}
.troubleshooter-panel h3{font-size:16px;text-transform:none;letter-spacing:0;color:#fff}
.troubleshooter-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.troubleshooter-choices button{width:100%}
.guide-page{width:min(1180px,100%);margin:0 auto;padding:42px 5vw 24px;display:grid;gap:18px}
.guide-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,520px);
  gap:24px;
  align-items:center;
  padding:34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:
    linear-gradient(90deg,rgba(18,20,26,.96),rgba(18,20,26,.78)),
    radial-gradient(circle at 82% 18%,rgba(var(--accent-rgb),.18),transparent 34%);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.guide-hero.compact{grid-template-columns:1fr}
.guide-hero h1{font-size:clamp(38px,6vw,72px);line-height:1;margin:0 0 12px}
.guide-hero p,.guide-article .lead{color:#d6dce6;font-size:18px;line-height:1.65}
.video-frame{
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:#05070a;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.guide-grid,.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide-timeline{display:grid;gap:14px}
.guide-section,.blog-card,.guide-article{
  min-width:0;
  padding:22px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 14px 42px rgba(0,0,0,.18);
}
.guide-section h2,.blog-card h2{margin:0 0 10px;font-size:24px}
.guide-section p,.blog-card p,.guide-article p{color:#dce3ee;line-height:1.65}
.guide-section pre{margin-top:14px;background:#070b11;color:#d9f4ff;border:1px solid rgba(255,255,255,.1)}
.guide-callout{border-radius:10px;padding:18px;border:1px solid rgba(255,255,255,.12)}
.guide-callout strong{display:block;margin-bottom:6px}
.blog-card{display:grid;gap:8px;align-content:start}
.blog-card h2 a{text-decoration:none}
.blog-card h2 a:hover{color:var(--accent)}
.keyword-chip{
  display:inline-block;
  margin:4px 6px 0 0;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#dce3ee;
  background:rgba(255,255,255,.045);
  font-size:12px;
}
.article-page{max-width:980px}
.guide-article h1{font-size:clamp(34px,5vw,62px);line-height:1;margin:0 0 12px}
.guide-article .guide-section{box-shadow:none;background:rgba(255,255,255,.025);margin-top:16px}
.logo-upload{display:grid;gap:6px;color:#d6dce6}
.logo-preview{background:#10131a;border:1px solid var(--line);border-radius:8px;padding:12px;min-height:72px}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.settings-grid label,.price-row label{display:grid;gap:6px;color:#d6dce6}
.settings-grid .full-field,.settings-grid .form-section-title{grid-column:1/-1}
.compact-form{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.form-section-title{margin:12px 0 0}
.tab-section[hidden]{display:none!important}
.old-price{color:#888;text-decoration:line-through;font-size:.62em;margin-right:8px}
.sale-badge{display:inline-block;vertical-align:middle;background:#ffcf33;color:#131313;border-radius:999px;padding:5px 8px;font-size:13px;font-weight:900;margin-left:8px}
.price-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.price-row .inline-check{align-self:center}
.settings-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}
.visit-stats .mini-card strong{font-size:clamp(26px,4vw,38px);line-height:1}
.visit-map-card{
  position:relative;
  margin:16px 0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%,rgba(var(--accent-2-rgb),.16),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.visit-world-map{
  display:block;
  width:100%;
  min-height:280px;
}
.visit-map-ocean{fill:#07131f}
.visit-map-grid{
  fill:none;
  stroke:rgba(255,255,255,.045);
  stroke-width:1;
}
.visit-land{
  fill:rgba(255,255,255,.075);
  stroke:rgba(255,255,255,.12);
  stroke-width:1.25;
}
.visit-point-pulse{
  fill:rgba(var(--accent-rgb),.18);
  stroke:rgba(var(--accent-rgb),.55);
  stroke-width:1.5;
}
.visit-point-dot{
  fill:var(--accent);
  stroke:#fff;
  stroke-width:2;
  filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.72));
}
.visit-map-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#d8dee8;
  font-weight:800;
  pointer-events:none;
}
.current-visits-table .visit-location{font-weight:850;color:#fff}
.current-visits-table .meta{overflow-wrap:anywhere}
@media(max-width:960px){
  .hero,.account-hero{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:44px}
  .hero-mosaic{transform:none}
  .admin-shell,.account-shell{grid-template-columns:1fr}
  .side-nav{
    position:sticky;
    top:72px;
    z-index:12;
    height:auto;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;
    overflow:auto;
    gap:6px;
    padding:10px 12px;
    background:rgba(8,9,11,.94);
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .side-nav::-webkit-scrollbar{display:none}
  .side-nav:before{display:none}
  .side-nav a,.side-nav button{white-space:nowrap;scroll-snap-align:start;min-width:max-content;text-align:center}
  .admin-content,.account-content{padding:18px}
  .media-browser-hero{grid-template-columns:1fr;padding:20px}
  .media-card-grid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));padding:16px}
  .cookie-banner{display:grid}
  #loginPanel,#registerPanel{position:static}
}
@media(max-width:620px){
  body{font-size:15px}
  .topbar{
    height:64px;
    align-items:center;
    padding:10px 14px;
    display:flex;
    gap:10px;
  }
  .brand{min-width:0;gap:9px}
  .brand-name,.topbar strong{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-menu-toggle{display:grid;margin-left:auto;flex:0 0 42px}
  .topbar nav{
    position:fixed;
    left:12px;
    right:12px;
    top:74px;
    z-index:25;
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    max-height:0;
    overflow:hidden;
    padding:0 10px;
    opacity:0;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(10,12,17,.98);
    box-shadow:0 22px 70px rgba(0,0,0,.55);
    backdrop-filter:blur(18px);
    transform:translateY(-8px);
    transition:max-height .2s ease,opacity .18s ease,transform .18s ease,padding .18s ease;
  }
  .mobile-nav-open .topbar nav{
    max-height:calc(100vh - 94px);
    overflow:auto;
    padding:10px;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .topbar nav a,.pill-link{
    display:flex;
    min-height:44px;
    align-items:center;
    border-radius:8px;
    padding:12px;
    background:rgba(255,255,255,.045);
  }
  .hero{padding:30px 18px 22px;gap:22px}
  .hero h1{font-size:clamp(34px,12vw,48px);line-height:1}
  .hero p{font-size:16px}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .conversion-steps{grid-template-columns:1fr;gap:8px}
  .conversion-steps li{min-height:auto}
  .button,button{width:100%;min-height:44px;text-align:center}
  .hero-mosaic{grid-template-columns:repeat(2,1fr);gap:10px}
  .poster-tile{min-height:96px}
  .poster-tile:nth-child(n){transform:none}
  .pricing,.portal-grid{padding:14px 14px;grid-template-columns:1fr}
  .compare,.faq,.terms,.feature-row,.section-kicker,.section-title{margin-left:18px;margin-right:18px}
  .card,.compare,.faq,.terms,.panel,.mini-card{padding:16px;border-radius:9px}
  .feature-row{grid-template-columns:1fr}
  .section-title{font-size:24px;line-height:1.15}
  .price{font-size:34px}
  .admin-shell,.account-shell{min-height:0}
  .side-nav{top:64px;padding:8px 10px}
  .side-nav a,.side-nav button{
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.045);
  }
  .side-nav a.active,.side-nav button.active{box-shadow:none;border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.14)}
  .admin-content,.account-content{padding:14px 12px 28px}
  #dashboard>.toolbar{position:static;padding:16px}
  #dashboard>.toolbar h1{font-size:26px}
  .account-hero{display:grid;gap:12px}
  #accountPanel h1{font-size:34px}
  .toolbar{display:grid;grid-template-columns:1fr;align-items:stretch}
  .compact-toolbar{display:flex}
  .inline-form,.settings-grid,.price-row,.media-search{grid-template-columns:1fr}
  .settings-status{grid-template-columns:1fr}
  .library-rail{grid-template-columns:1fr}
  .library-tile button{min-height:94px}
  .media-browser-hero{padding:16px}
  .media-browser-hero h2{font-size:32px}
  .filter-rail{padding:12px 14px 0;overflow:auto;flex-wrap:nowrap;scrollbar-width:none}
  .filter-rail::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;min-width:max-content}
  .media-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
  .media-card-grid.media-row-browser{grid-template-columns:1fr;gap:20px}
  .media-rail-head{align-items:flex-start}
  .media-rail{grid-auto-columns:minmax(154px,72vw);gap:12px}
  .episode-list li{grid-template-columns:1fr}
  .episode-list button{width:100%}
  .media-card-body{padding:10px}
  .media-card-body strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .play-float{opacity:1;transform:none}
  .table-wrap{
    margin:0 -16px;
    padding:0 16px 8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table{min-width:680px}
  td,th{padding:10px}
  .user-actions{min-width:0;display:grid;grid-template-columns:1fr}
  .user-actions button{width:100%}
  .cookie-banner{left:10px;right:10px;bottom:10px;padding:14px}
  .cookie-actions{display:grid}
  .site-footer{margin:28px 18px 18px}
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .download-page{padding:22px 14px}
  .download-hero{padding:20px}
  .troubleshooting-page{padding:22px 14px}
  .troubleshooting-hero{padding:20px}
  .troubleshooting-hero h1{font-size:36px}
  .troubleshooting-grid{grid-template-columns:1fr}
  .troubleshooting-card{padding:16px}
  .troubleshooting-index{overflow:auto;flex-wrap:nowrap;scrollbar-width:none}
  .troubleshooting-index::-webkit-scrollbar{display:none}
  .troubleshooting-index a{white-space:nowrap}
  .guide-page{padding:22px 14px}
  .guide-hero{grid-template-columns:1fr;padding:20px}
  .guide-hero h1,.guide-article h1{font-size:36px}
  .guide-grid,.blog-grid{grid-template-columns:1fr}
  .guide-section,.blog-card,.guide-article{padding:16px}
  .price-row{grid-template-columns:1fr}
  pre{max-width:100%;overflow:auto}
}
@media(max-width:420px){
  .media-card-grid{grid-template-columns:1fr 1fr}
  .brand-name,.topbar strong{font-size:19px}
  .hero-mosaic{display:none}
  .site-footer nav{grid-template-columns:1fr}
}
/* Keep the brand mark from being stretched by mobile header layout. */
.topbar .brand {
  align-items: center;
  min-width: 0;
}

.topbar .brand-mark {
  align-items: center;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  flex: 0 0 var(--logo-size, 34px);
  height: var(--logo-size, 34px);
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  width: var(--logo-size, 34px);
}

.topbar .brand-logo {
  aspect-ratio: 1 / 1;
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

@media (max-width: 720px) {
  .topbar .brand {
    max-width: calc(100% - 64px);
  }

  .topbar .brand-mark {
    flex-basis: min(var(--logo-size, 34px), 44px);
    height: min(var(--logo-size, 34px), 44px);
    width: min(var(--logo-size, 34px), 44px);
  }
}

/* Final mobile override: this intentionally sits at EOF to win older app rules. */
@media(max-width:760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }
  body:not(.account-media-app) .topbar{
    width:100%;
    max-width:100vw;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    gap:10px;
    padding:8px 12px;
    overflow:visible;
  }
  body:not(.account-media-app) .topbar .brand{
    min-width:0;
    max-width:100%;
  }
  body:not(.account-media-app) .topbar .mobile-menu-toggle{
    display:grid;
    grid-column:2;
    margin-left:0;
  }
  body:not(.account-media-app) .topbar nav{
    grid-column:1 / -1;
  }
  .topbar .brand-mark{
    flex:0 0 min(var(--logo-size,34px),42px);
    width:min(var(--logo-size,34px),42px);
    height:min(var(--logo-size,34px),42px);
    min-width:0;
  }
  .topbar .brand-logo{
    width:100%;
    height:100%;
    object-fit:contain;
  }
}

@media(max-width:760px){
  .account-media-app{
    --app-header-h:60px;
  }
  .account-media-app .app-topbar{
    position:sticky;
    top:0;
    z-index:30;
    width:100%;
    max-width:100vw;
    height:var(--app-header-h)!important;
    display:grid!important;
    grid-template-columns:44px minmax(44px,auto) minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:8px 10px!important;
    overflow:hidden;
  }
  .account-media-app .mobile-menu-toggle{
    display:none!important;
  }
  .account-media-app .app-icon-button{
    grid-column:1;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:8px;
    background:rgba(255,255,255,.05);
  }
  .account-media-app .app-brand{
    grid-column:2;
    min-width:0;
    max-width:92px!important;
    overflow:hidden;
  }
  .account-media-app .app-brand .brand-name{
    display:none!important;
  }
  .account-media-app .app-brand .brand-mark{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
  }
  .account-media-app .app-top-tabs,
  .account-media-app .app-utility-nav,
  .account-media-app .topbar .app-top-tabs,
  .account-media-app .topbar .app-utility-nav{
    display:none!important;
  }
  .account-media-app .top-media-search{
    grid-column:3;
    display:block!important;
    width:100%;
    min-width:0!important;
    max-width:none!important;
    margin:0;
  }
  .account-media-app .top-media-search input{
    width:100%;
    height:42px;
    min-height:42px;
    border-radius:999px;
    padding:0 14px;
  }
  .account-media-app .account-shell{
    display:block!important;
    min-height:0;
    width:100%;
    max-width:100vw;
  }
.account-media-app .app-sidebar{
    position:fixed!important;
    top:var(--app-header-h)!important;
    left:0;
    bottom:0;
    z-index:34;
    width:min(82vw,312px)!important;
    max-width:312px;
    height:auto!important;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-105%);
    transition:transform .18s ease;
  }
  .account-media-app.media-sidebar-open .app-sidebar{
    transform:translateX(0);
  }
  .account-media-app.media-sidebar-open::before{
    content:"";
    position:fixed;
    inset:var(--app-header-h) 0 0 0;
    z-index:33;
    background:rgba(0,0,0,.48);
  }
  .account-media-app .account-content{
    width:100%;
    max-width:100vw;
    padding:0 0 32px!important;
    overflow:hidden;
  }
  .account-media-app .account-content>.panel,
  .account-media-app .account-content>.account-hero{
    width:auto;
    max-width:calc(100vw - 24px);
    margin:12px!important;
  }
  .account-media-app .account-content>#media-browser{
    max-width:100vw;
    margin:0!important;
  }
  .account-media-app .account-hero{
    display:block!important;
  }
  .account-media-app .panel,
  .account-media-app .mini-card,
  .account-media-app .card{
    min-width:0;
    overflow:hidden;
  }
  .account-media-app #accountPanel h1{
    font-size:clamp(32px,11vw,44px);
    line-height:1.05;
  }
  .account-media-app .portal-grid,
  .account-media-app .settings-grid,
  .account-media-app .inline-form,
  .account-media-app .library-rail{
    grid-template-columns:1fr!important;
    padding:0!important;
  }
  .account-media-app .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .account-media-app .toolbar.compact-toolbar{
    display:flex;
  }
  .account-media-app .media-browser-hero{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr!important;
    gap:16px;
    padding:26px 14px 18px!important;
  }
  .account-media-app .media-browser-hero h2{
    font-size:clamp(34px,12vw,48px)!important;
  }
  .account-media-app .media-search{
    display:none!important;
  }
  .account-media-app .filter-rail{
    max-width:100vw;
    padding:12px 14px 0!important;
    overflow-x:auto;
    flex-wrap:nowrap;
  }
  .account-media-app .media-card-grid{
    max-width:100vw;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px;
    padding:14px!important;
  }
  .account-media-app .media-card-grid.media-row-browser{
    grid-template-columns:1fr!important;
    gap:22px;
    padding:16px 14px 36px!important;
  }
  .account-media-app .media-rail{
    width:100%;
    max-width:100%;
    grid-auto-columns:minmax(170px,74vw)!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .account-media-app .media-card,
  .account-media-app .media-rail .media-card{
    width:100%;
    min-width:0;
  }
  .account-media-app .media-card-body strong,
  .account-media-app .media-card-body p,
  .account-media-app .media-card-body .meta{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .account-media-app .episode-list{
    max-height:260px;
  }
  .account-media-app .episode-list li{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:390px){
  .account-media-app .media-card-grid{
    grid-template-columns:1fr!important;
  }
  .account-media-app .media-rail{
    grid-auto-columns:minmax(168px,82vw)!important;
  }
}

/* Mobile layout rescue for the marketing site and account media app. */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
svg,
canvas{
  max-width:100%;
}

.topbar,
.admin-shell,
.account-shell,
.account-content,
.panel,
.mini-card,
.card{
  min-width:0;
}

@media(max-width:760px){
  body:not(.account-media-app) .topbar{
    width:100%;
    max-width:100vw;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
    gap:10px;
    padding:8px 12px;
  }
  body:not(.account-media-app) .topbar .brand{
    min-width:0;
    max-width:100%;
  }
  body:not(.account-media-app) .topbar .mobile-menu-toggle{
    grid-column:2;
    margin-left:0;
  }
  body:not(.account-media-app) .topbar nav{
    grid-column:1 / -1;
  }
  .topbar .brand-mark{
    flex:0 0 min(var(--logo-size,34px),42px);
    width:min(var(--logo-size,34px),42px);
    height:min(var(--logo-size,34px),42px);
    min-width:0;
  }
  .topbar .brand-logo{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .topbar .brand-name,
  .topbar strong{
    min-width:0;
    max-width:100%;
  }
  .hero,
  .pricing,
  .portal-grid,
  .feature-row,
  .compare,
  .faq,
  .terms,
  .narrow{
    max-width:100%;
  }
  .button,
  button{
    max-width:100%;
  }
  body:not(.account-media-app) table{
    min-width:0;
    width:100%;
  }
  body:not(.account-media-app) th,
  body:not(.account-media-app) td{
    overflow-wrap:anywhere;
  }
  .table-wrap table{
    min-width:680px;
  }
}

@media(max-width:760px){
  .account-media-app{
    --app-header-h:60px;
    background:#101010;
  }
  .account-media-app .app-topbar{
    position:sticky;
    top:0;
    z-index:30;
    width:100%;
    max-width:100vw;
    height:var(--app-header-h);
    display:grid;
    grid-template-columns:44px minmax(44px,auto) minmax(0,1fr);
    gap:8px;
    padding:8px 10px;
    overflow:hidden;
  }
  .account-media-app .mobile-menu-toggle{
    display:none!important;
  }
  .account-media-app .app-icon-button{
    grid-column:1;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:8px;
    background:rgba(255,255,255,.05);
  }
  .account-media-app .app-brand{
    grid-column:2;
    display:flex;
    min-width:0;
    max-width:96px;
    overflow:hidden;
  }
  .account-media-app .app-brand .brand-name{
    display:none!important;
  }
  .account-media-app .app-brand .brand-mark{
    flex:0 0 44px;
    width:44px;
    height:44px;
  }
  .account-media-app .app-brand .brand-logo{
    object-fit:contain;
  }
  .account-media-app .app-top-tabs,
  .account-media-app .app-utility-nav{
    display:none!important;
  }
  .account-media-app .top-media-search{
    grid-column:3;
    display:block;
    min-width:0;
    max-width:none;
    width:100%;
    margin:0;
  }
  .account-media-app .top-media-search input{
    width:100%;
    height:42px;
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
  }
  .account-media-app .account-shell{
    display:block;
    min-height:0;
    width:100%;
    max-width:100vw;
  }
  .account-media-app .app-sidebar{
    position:fixed;
    top:var(--app-header-h);
    left:0;
    bottom:0;
    z-index:34;
    width:min(82vw,312px);
    height:auto;
    max-width:312px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-105%);
  }
  .account-media-app.media-sidebar-open .app-sidebar{
    transform:translateX(0);
  }
  .account-media-app.media-sidebar-open::before{
    content:"";
    position:fixed;
    inset:var(--app-header-h) 0 0 0;
    z-index:33;
    background:rgba(0,0,0,.48);
  }
  .account-media-app .account-content{
    width:100%;
    max-width:100vw;
    padding:0 0 32px;
    overflow:hidden;
  }
  .account-media-app .account-content>.panel,
  .account-media-app .account-content>.account-hero{
    width:auto;
    max-width:calc(100vw - 24px);
    margin:12px;
  }
  .account-media-app .account-content>#media-browser{
    max-width:100vw;
    margin:0;
  }
  .account-media-app .account-hero{
    display:block;
  }
  .account-media-app .panel,
  .account-media-app .mini-card,
  .account-media-app .card{
    overflow:hidden;
  }
  .account-media-app #accountPanel h1{
    font-size:clamp(32px,11vw,44px);
    line-height:1.05;
  }
  .account-media-app .portal-grid,
  .account-media-app .settings-grid,
  .account-media-app .inline-form,
  .account-media-app .library-rail{
    grid-template-columns:1fr;
    padding:0;
  }
  .account-media-app .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .account-media-app .toolbar.compact-toolbar{
    display:flex;
  }
  .account-media-app .media-browser-hero{
    min-height:auto;
    padding:26px 14px 18px;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  .account-media-app .media-browser-hero h2{
    font-size:clamp(34px,12vw,48px);
  }
  .account-media-app .media-search{
    display:none;
  }
  .account-media-app .filter-rail{
    max-width:100vw;
    padding:12px 14px 0;
    overflow-x:auto;
    flex-wrap:nowrap;
  }
  .account-media-app .media-card-grid{
    max-width:100vw;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    padding:14px;
  }
  .account-media-app .media-card-grid.media-row-browser{
    grid-template-columns:1fr;
    gap:22px;
    padding:16px 14px 36px;
  }
  .account-media-app .media-rail{
    width:100%;
    max-width:100%;
    grid-auto-columns:minmax(170px,74vw);
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .account-media-app .media-rail .media-card{
    width:100%;
  }
  .account-media-app .media-card{
    min-width:0;
  }
  .account-media-app .media-card-body strong,
  .account-media-app .media-card-body p,
  .account-media-app .media-card-body .meta{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .account-media-app .episode-list{
    max-height:260px;
  }
  .account-media-app .episode-list li{
    grid-template-columns:1fr;
  }
  .account-media-app .table-wrap{
    max-width:100%;
  }
}

@media(max-width:390px){
  .account-media-app .media-card-grid{
    grid-template-columns:1fr;
  }
  .account-media-app .media-rail{
    grid-auto-columns:minmax(168px,82vw);
  }
}

/* Final generated homepage art override. */
.art-remote-access{--card-art:url("/images/homepage/remote-access.jpg")}
.art-direct-play{--card-art:url("/images/homepage/direct-play.jpg")}
.art-transcoding{--card-art:url("/images/homepage/transcoding.jpg")}
.art-shared-libraries{--card-art:url("/images/homepage/shared-libraries.jpg")}
.art-signed-addons{--card-art:url("/images/homepage/signed-addons.jpg")}
.art-licences{--card-art:url("/images/homepage/licences.jpg")}
.art-profiles{--card-art:url("/images/homepage/profiles.jpg")}
.art-downloads{--card-art:url("/images/homepage/downloads.jpg")}
.art-backups{--card-art:url("/images/homepage/backups.jpg")}
.art-support{--card-art:url("/images/homepage/support.jpg")}

.marketing-media-home .poster-tile[class*="art-"],
.marketing-media-home .homepage-media-card[class*="art-"]{
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.18) 44%,rgba(0,0,0,.78) 100%)!important;
  background-position:center!important;
  background-size:cover!important;
}

.marketing-media-home .card-art{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.marketing-media-home .poster-tile[class*="art-"]:before,
.marketing-media-home .homepage-media-card[class*="art-"]:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,.2) 42%,rgba(0,0,0,.82) 100%),
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.12),transparent 36%);
  pointer-events:none;
}

.marketing-media-home .poster-tile:after,
.marketing-media-home .homepage-media-card:after,
.marketing-media-home .homepage-media-card span{
  z-index:2;
}

/* Media app shell for app.comamediaserver.com/account.html */
.account-media-app{
  background:#141414;
}
.account-media-app .app-topbar{
  height:58px;
  justify-content:flex-start;
  gap:14px;
  padding:0 16px;
  background:rgba(5,5,5,.96);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.account-media-app .app-icon-button{
  flex:0 0 42px;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:transparent;
  font-size:0;
  position:relative;
}
.account-media-app .app-icon-button:before,
.account-media-app .app-icon-button:after{
  content:"";
  position:absolute;
  left:11px;
  width:20px;
  height:2px;
  border-radius:999px;
  background:#e8e8e8;
}
.account-media-app .app-icon-button:before{
  top:14px;
  box-shadow:0 7px 0 #e8e8e8;
}
.account-media-app .app-icon-button:after{top:28px}
.account-media-app .app-icon-button:hover{background:rgba(255,255,255,.08)}
.account-media-app .app-brand{
  flex:0 0 auto;
  min-width:0;
}
.account-media-app .app-brand .brand-name{
  font-size:25px;
  letter-spacing:0;
}
.account-media-app .app-top-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  flex:0 1 auto;
}
.account-media-app .topbar .app-top-tabs a,
.account-media-app .topbar .app-utility-nav a{
  border-radius:5px;
  padding:9px 10px;
  color:#d9d9d9;
}
.account-media-app .topbar .app-top-tabs a:hover,
.account-media-app .topbar .app-utility-nav a:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}
.account-media-app .app-count,
.account-media-app .side-count{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-left:6px;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  font-size:12px;
  font-weight:850;
}
.account-media-app .top-media-search{
  display:block;
  flex:1 1 340px;
  max-width:620px;
  min-width:160px;
  margin:0;
}
.account-media-app .top-media-search input{
  width:100%;
  height:38px;
  border:0;
  border-radius:999px;
  background:#242424;
  color:#fff;
  padding:0 18px;
}
.account-media-app .top-media-search input:focus{
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55);
}
.account-media-app .app-utility-nav{
  margin-left:auto;
  display:flex;
  gap:4px;
  align-items:center;
  flex:0 0 auto;
}
.account-media-app .account-shell{
  grid-template-columns:260px minmax(0,1fr);
  min-height:calc(100vh - 58px);
}
.account-media-app .app-sidebar{
  top:58px;
  height:calc(100vh - 58px);
  padding:14px 10px;
  background:linear-gradient(180deg,#171717,#111);
  border-right:1px solid rgba(255,255,255,.06);
}
.account-media-app .app-sidebar:before{display:none}
.account-media-app .app-sidebar a,
.account-media-app .app-sidebar button{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:42px;
  margin:3px 0;
  border-radius:4px;
  color:#d8d8d8;
}
.account-media-app .app-sidebar a.active,
.account-media-app .app-sidebar button.active,
.account-media-app .app-sidebar a:hover,
.account-media-app .app-sidebar button:hover{
  background:#262626;
  color:#fff;
}
.account-media-app .app-sidebar a.active,
.account-media-app .app-sidebar button.active{
  box-shadow:inset 3px 0 0 var(--accent);
}
.account-media-app .nav-glyph{
  display:inline-grid;
  place-items:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:5px;
  background:rgba(255,255,255,.08);
  color:#e3e3e3;
  font-size:12px;
  font-weight:850;
}
.account-media-app .sidebar-divider{
  height:1px;
  margin:12px 8px;
  background:rgba(255,255,255,.09);
}
.account-media-app .sidebar-label{
  display:block;
  padding:14px 12px 6px;
  color:#8f8f8f;
  font-size:11px;
  text-transform:uppercase;
}
.account-media-app .account-content{
  padding:0 0 42px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 180px),
    #141414;
}
.account-media-app .account-content>.panel,
.account-media-app .account-content>.account-hero{
  margin:24px 28px;
}
.account-media-app .account-content>#media-browser{
  margin:0;
}
.account-media-app .media-browser-panel{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#141414;
}
.account-media-app .media-browser-hero{
  min-height:320px;
  padding:52px 38px 34px;
  align-items:end;
  background:
    linear-gradient(90deg,rgba(20,20,20,.96),rgba(20,20,20,.72) 48%,rgba(20,20,20,.35)),
    radial-gradient(circle at 76% 22%,rgba(var(--accent-rgb),.28),transparent 34%),
    linear-gradient(135deg,#202020,#0f0f0f);
}
.account-media-app .media-browser-hero h2{
  font-size:clamp(42px,6vw,72px);
  line-height:.95;
}
.account-media-app .filter-rail{
  padding:18px 34px 0;
  background:#141414;
}
.account-media-app .chip{
  border:0;
  border-radius:4px;
  background:#252525;
  color:#d9d9d9;
}
.account-media-app .chip.active,
.account-media-app .chip:hover{
  background:var(--accent);
  color:#111;
}
.account-media-app .media-card-grid.media-row-browser{
  padding:24px 34px 62px;
  gap:28px;
  background:#141414;
}
.account-media-app .media-rail-head h3{
  font-size:20px;
}
.account-media-app .media-rail{
  grid-auto-columns:minmax(232px,292px);
  gap:10px;
  padding-bottom:18px;
}
.account-media-app .media-card{
  border:0;
  border-radius:4px;
  background:#181818;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.account-media-app .media-card:hover{
  transform:scale(1.035);
  background:#202020;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.account-media-app .media-row-browser .poster-frame{
  aspect-ratio:16/9;
  border-radius:4px 4px 0 0;
}
.account-media-app .media-card-body{
  gap:7px;
  padding:11px;
}
.account-media-app .media-card-body strong{
  font-size:14px;
}
.account-media-app .media-card-body .meta{
  min-height:0;
}
.account-media-app .season-picker select{
  border-radius:4px;
  background:#0e0e0e;
}
.account-media-app .episode-list{
  max-height:184px;
}
.account-media-app .episode-list li{
  border-radius:4px;
  background:#232323;
}
@media(max-width:1080px){
  .account-media-app .app-top-tabs{display:none}
  .account-media-app .top-media-search{max-width:none}
}
@media(max-width:960px){
  .account-media-app .account-shell{grid-template-columns:1fr}
  .account-media-app .app-sidebar{
    position:fixed;
    left:0;
    bottom:0;
    z-index:24;
    width:min(82vw,300px);
    transform:translateX(-104%);
    transition:transform .18s ease;
    box-shadow:18px 0 48px rgba(0,0,0,.42);
  }
  .account-media-app.media-sidebar-open .app-sidebar{transform:none}
  .account-media-app .side-nav a,
  .account-media-app .side-nav button{
    min-width:0;
    text-align:left;
  }
  .account-media-app .account-content>.panel,
  .account-media-app .account-content>.account-hero{
    margin:18px;
  }
  .account-media-app .media-browser-hero{padding:34px 22px 24px}
  .account-media-app .filter-rail{padding:14px 20px 0}
  .account-media-app .media-card-grid.media-row-browser{padding:20px}
}
@media(max-width:620px){
  .account-media-app .app-topbar{
    height:58px;
    display:flex;
    padding:0 10px;
    gap:8px;
  }
  .account-media-app .topbar nav{
    position:static;
    display:flex;
    max-height:none;
    opacity:1;
    pointer-events:auto;
    transform:none;
    padding:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .account-media-app .app-utility-nav{display:none}
  .account-media-app .app-brand .brand-name{font-size:20px}
  .account-media-app .top-media-search{
    flex:1 1 auto;
    min-width:90px;
  }
  .account-media-app .top-media-search input{
    height:36px;
    padding:0 12px;
  }
  .account-media-app .media-browser-hero{
    min-height:250px;
    grid-template-columns:1fr;
  }
  .account-media-app .media-browser-hero h2{font-size:40px}
  .account-media-app .media-search{display:none}
  .account-media-app .media-rail{
    grid-auto-columns:minmax(206px,78vw);
  }
  .account-media-app .episode-list li{grid-template-columns:1fr}
}

.player-page{
  min-height:100vh;
  overflow-x:hidden;
  background:#07131e;
  color:#fff;
}
.player-page button,
.player-page .button{
  width:auto;
  min-width:0;
  min-height:0;
  border:0;
  border-radius:0;
  padding:0;
  text-align:center;
  box-shadow:none;
}
.player-page input[type="range"]{
  width:auto;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.player-topbar{
  width:min(1840px,calc(100vw - 96px));
  height:96px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:34px;
  padding:0;
  background:transparent;
  border-bottom:0;
}
.player-topbar .brand{
  flex:0 0 auto;
}
.player-topbar .brand-name{
  font-size:28px;
  letter-spacing:0;
}
.player-nav{
  display:flex;
  gap:28px;
  align-items:center;
  min-width:0;
}
.player-nav a{
  color:#c8d2de;
  text-decoration:none;
  font-weight:800;
  font-size:18px;
}
.player-nav a:hover{
  color:#fff;
}
.player-titlebar{
  display:grid;
  gap:2px;
  min-width:0;
  margin-left:auto;
}
.player-titlebar span{
  color:#9fb6ca;
  font-size:13px;
  font-weight:700;
}
.player-back{
  margin-left:0;
  color:#d9e7f7;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  padding:10px 13px;
  background:rgba(255,255,255,.07);
}
.player-back:hover{
  border-color:rgba(var(--accent-2-rgb),.72);
  color:#fff;
}
.player-shell{
  width:min(1840px,calc(100vw - 96px));
  margin:0 auto;
  display:grid;
  gap:24px;
  padding:10px 0 56px;
}
.player-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:0;
  max-height:calc(100vh - 230px);
  overflow:hidden;
  border-radius:8px;
  background:#000;
  box-shadow:0 26px 90px rgba(0,0,0,.48);
}
.player-stage video{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
.player-poster{
  position:absolute;
  inset:0;
  z-index:1;
  background-size:cover;
  background-position:center;
  filter:saturate(.9);
}
.player-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28));
  transition:opacity .18s ease;
}
.player-overlay p{
  position:absolute;
  left:24px;
  bottom:96px;
  margin:0;
  color:#dce8f4;
  text-shadow:0 2px 10px #000;
}
.player-overlay.is-playing{
  opacity:0;
  pointer-events:none;
}
.player-overlay.error{
  opacity:1;
  pointer-events:auto;
  background:rgba(0,0,0,.72);
}
.player-big-play{
  width:78px;
  height:78px;
  border-radius:12px;
  border:0;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-weight:900;
  box-shadow:0 18px 46px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}
.player-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:5;
  display:grid;
  gap:14px;
  padding:0 20px 20px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
}
.player-seek{
  width:100%!important;
  height:5px;
  accent-color:#18aee3;
  cursor:pointer;
}
.player-control-row{
  display:flex;
  gap:12px;
  align-items:center;
}
.player-control-button{
  display:inline-grid;
  place-items:center;
  min-width:58px;
  height:50px;
  padding:0 14px!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
  font-weight:800;
}
.player-control-button:hover{
  background:rgba(255,255,255,.2)!important;
  filter:none;
}
.player-play-button{
  min-width:64px;
}
.player-volume-group{
  display:flex;
  align-items:center;
  gap:12px;
}
.player-volume-group input{
  width:140px!important;
  accent-color:#fff;
}
.player-time{
  color:#fff;
  font-weight:700;
  min-width:132px;
}
.player-control-spacer{
  flex:1 1 auto;
}
.player-details{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:0;
}
.player-details h1{
  margin:0 0 6px;
  font-size:clamp(34px,3.6vw,48px);
}
.player-details p{
  margin:0;
  color:#aecaeb;
  font-weight:600;
}
.player-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.player-actions button,
.player-actions .button{
  min-height:42px;
  padding:10px 14px;
  border-radius:8px;
}
@media(max-width:780px){
  .player-topbar{
    width:calc(100vw - 24px);
    height:auto;
    min-height:76px;
    gap:14px;
    padding:10px 0;
  }
  .player-nav{
    display:none;
  }
  .player-titlebar span{display:none}
  .player-shell{
    width:100vw;
    padding:0 0 28px;
  }
  .player-stage{
    border-radius:0;
    max-height:none;
  }
  .player-controls{padding:0 12px 12px}
  .player-control-row{gap:8px}
  .player-volume-group input,
  .player-volume-group #muteButton{
    display:none;
  }
  .player-time{min-width:auto;font-size:13px}
  .player-control-button{min-width:48px;height:44px;padding:0 10px!important}
  .player-details{
    display:grid;
    padding:0 14px;
  }
}
/* Mobile brand logo safety override: keep image proportions and cap size. */
.topbar .brand {
  align-items: center;
  min-width: 0;
}

.topbar .brand-mark {
  align-items: center;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  flex: 0 0 var(--logo-size, 34px);
  height: var(--logo-size, 34px);
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  width: var(--logo-size, 34px);
}

.topbar .brand-logo {
  aspect-ratio: 1 / 1;
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

@media (max-width: 720px) {
  .topbar .brand {
    max-width: calc(100% - 64px);
  }

  .topbar .brand-mark {
    flex-basis: min(var(--logo-size, 34px), 44px);
    height: min(var(--logo-size, 34px), 44px);
    width: min(var(--logo-size, 34px), 44px);
  }
}

/* Final mobile override: this intentionally sits at EOF to win older app rules. */
@media(max-width:760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }
  body:not(.account-media-app) .topbar{
    width:100%;
    max-width:100vw;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    gap:10px;
    padding:8px 12px;
    overflow:visible;
  }
  body:not(.account-media-app) .topbar .brand{
    min-width:0;
    max-width:100%;
  }
  body:not(.account-media-app) .topbar .mobile-menu-toggle{
    display:grid;
    grid-column:2;
    margin-left:0;
  }
  body:not(.account-media-app) .topbar nav{
    grid-column:1 / -1;
  }
  .topbar .brand-mark{
    flex:0 0 min(var(--logo-size,34px),42px);
    width:min(var(--logo-size,34px),42px);
    height:min(var(--logo-size,34px),42px);
    min-width:0;
  }
  .topbar .brand-logo{
    width:100%;
    height:100%;
    object-fit:contain;
  }
}

@media(max-width:760px){
  .account-media-app{
    --app-header-h:60px;
  }
  .account-media-app .app-topbar{
    position:sticky;
    top:0;
    z-index:30;
    width:100%;
    max-width:100vw;
    height:var(--app-header-h)!important;
    display:grid!important;
    grid-template-columns:44px minmax(44px,auto) minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:8px 10px!important;
    overflow:hidden;
  }
  .account-media-app .mobile-menu-toggle{
    display:none!important;
  }
  .account-media-app .app-icon-button{
    grid-column:1;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    border-radius:8px;
    background:rgba(255,255,255,.05);
  }
  .account-media-app .app-brand{
    grid-column:2;
    min-width:0;
    max-width:92px!important;
    overflow:hidden;
  }
  .account-media-app .app-brand .brand-name{
    display:none!important;
  }
  .account-media-app .app-brand .brand-mark{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
  }
  .account-media-app .app-top-tabs,
  .account-media-app .app-utility-nav,
  .account-media-app .topbar .app-top-tabs,
  .account-media-app .topbar .app-utility-nav{
    display:none!important;
  }
  .account-media-app .top-media-search{
    grid-column:3;
    display:block!important;
    width:100%;
    min-width:0!important;
    max-width:none!important;
    margin:0;
  }
  .account-media-app .top-media-search input{
    width:100%;
    height:42px;
    min-height:42px;
    border-radius:999px;
    padding:0 14px;
  }
  .account-media-app .account-shell{
    display:block!important;
    min-height:0;
    width:100%;
    max-width:100vw;
  }
  .account-media-app .app-sidebar{
    position:fixed!important;
    top:var(--app-header-h)!important;
    left:0;
    bottom:0;
    z-index:34;
    width:min(82vw,312px)!important;
    max-width:312px;
    height:auto!important;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-105%);
    transition:transform .18s ease;
  }
  .account-media-app.media-sidebar-open .app-sidebar{
    transform:translateX(0);
  }
  .account-media-app.media-sidebar-open::before{
    content:"";
    position:fixed;
    inset:var(--app-header-h) 0 0 0;
    z-index:33;
    background:rgba(0,0,0,.48);
  }
  .account-media-app .account-content{
    width:100%;
    max-width:100vw;
    padding:0 0 32px!important;
    overflow:hidden;
  }
  .account-media-app .account-content>.panel,
  .account-media-app .account-content>.account-hero{
    width:auto;
    max-width:calc(100vw - 24px);
    margin:12px!important;
  }
  .account-media-app .account-content>#media-browser{
    max-width:100vw;
    margin:0!important;
  }
  .account-media-app .account-hero{
    display:block!important;
  }
  .account-media-app .panel,
  .account-media-app .mini-card,
  .account-media-app .card{
    min-width:0;
    overflow:hidden;
  }
  .account-media-app #accountPanel h1{
    font-size:clamp(32px,11vw,44px);
    line-height:1.05;
  }
  .account-media-app .portal-grid,
  .account-media-app .settings-grid,
  .account-media-app .inline-form,
  .account-media-app .library-rail{
    grid-template-columns:1fr!important;
    padding:0!important;
  }
  .account-media-app .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .account-media-app .toolbar.compact-toolbar{
    display:flex;
  }
  .account-media-app .media-browser-hero{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr!important;
    gap:16px;
    padding:26px 14px 18px!important;
  }
  .account-media-app .media-browser-hero h2{
    font-size:clamp(34px,12vw,48px)!important;
  }
  .account-media-app .media-search{
    display:none!important;
  }
  .account-media-app .filter-rail{
    max-width:100vw;
    padding:12px 14px 0!important;
    overflow-x:auto;
    flex-wrap:nowrap;
  }
  .account-media-app .media-card-grid{
    max-width:100vw;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px;
    padding:14px!important;
  }
  .account-media-app .media-card-grid.media-row-browser{
    grid-template-columns:1fr!important;
    gap:22px;
    padding:16px 14px 36px!important;
  }
  .account-media-app .media-rail{
    width:100%;
    max-width:100%;
    grid-auto-columns:minmax(170px,74vw)!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .account-media-app .media-card,
  .account-media-app .media-rail .media-card{
    width:100%;
    min-width:0;
  }
  .account-media-app .media-card-body strong,
  .account-media-app .media-card-body p,
  .account-media-app .media-card-body .meta{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .account-media-app .episode-list{
    max-height:260px;
  }
  .account-media-app .episode-list li{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:390px){
  .account-media-app .media-card-grid{
    grid-template-columns:1fr!important;
  }
  .account-media-app .media-rail{
    grid-auto-columns:minmax(168px,82vw)!important;
  }
}