/* COMA media UI polish loaded after the legacy stylesheet. */
.marketing-media-home,
.account-media-app{background:#141414;color:#f5f5f5}
.marketing-media-home .topbar,
.account-media-app .app-topbar{background:rgba(10,10,10,.98)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;box-shadow:0 10px 34px rgba(0,0,0,.35)!important}
.marketing-media-home .brand-name,
.account-media-app .app-brand .brand-name{display:none!important}
.marketing-media-home .topbar .brand-mark.has-image{flex:0 0 154px!important;width:154px!important;min-width:154px!important;height:44px!important;aspect-ratio:auto!important;background:transparent!important;border:0!important}
.account-media-app .app-brand .brand-mark.has-image{flex:0 0 148px!important;width:148px!important;min-width:148px!important;height:44px!important;aspect-ratio:auto!important;background:transparent!important;border:0!important}
.marketing-media-home .brand-logo,
.account-media-app .brand-logo{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;aspect-ratio:auto!important}
.marketing-media-home .hero{min-height:620px;grid-template-columns:minmax(0,720px) minmax(360px,1fr);background:linear-gradient(90deg,#151515 0%,rgba(21,21,21,.95) 38%,rgba(21,21,21,.52) 72%,#151515 100%),radial-gradient(circle at 86% 18%,rgba(var(--accent-rgb),.22),transparent 34%),#151515}
.marketing-media-home .hero:before{background:linear-gradient(180deg,transparent 0%,rgba(21,21,21,.92) 88%,#151515 100%)}
.marketing-media-home .hero h1{max-width:780px;font-size:clamp(46px,5.3vw,78px);line-height:.98}
.marketing-media-home .hero-mosaic{grid-template-columns:repeat(4,minmax(92px,1fr));gap:12px;transform:rotate(-5deg) translateY(-10px);opacity:.92}
.marketing-media-home .poster-tile{min-height:210px;border:0;border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.66)),linear-gradient(135deg,#383838,#171717);box-shadow:0 20px 46px rgba(0,0,0,.42)}
.marketing-media-home .poster-tile:nth-child(2n){transform:translateY(32px);background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.66)),linear-gradient(135deg,rgba(var(--accent-rgb),.72),#241a08)}
.marketing-media-home .poster-tile:nth-child(3n){background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.66)),linear-gradient(135deg,rgba(var(--accent-2-rgb),.48),#0c1b23)}
.homepage-streams{display:grid;gap:34px;padding:0 5vw 34px;background:#151515}
.homepage-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,300px);gap:14px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x proximity}
.homepage-rail.compact{grid-auto-columns:minmax(190px,240px)}
.homepage-media-card{position:relative;min-height:168px;overflow:hidden;border-radius:8px;scroll-snap-align:start;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.72)),radial-gradient(circle at 20% 18%,rgba(var(--accent-rgb),.42),transparent 34%),linear-gradient(135deg,#2d3745,#121212);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.homepage-media-card:nth-child(2n){background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.72)),radial-gradient(circle at 70% 20%,rgba(var(--accent-2-rgb),.34),transparent 34%),linear-gradient(135deg,#2b222c,#111)}
.homepage-media-card.server{min-height:128px}
.homepage-media-card span{position:absolute;left:16px;right:16px;bottom:15px;color:#fff;font-weight:900;text-shadow:0 2px 12px #000}
.account-media-app .app-topbar{height:64px!important;padding:0 22px!important}
.account-media-app .app-topbar{display:flex!important;align-items:center!important;gap:18px!important}
.account-media-app .app-brand{max-width:172px!important;overflow:visible!important}
.account-media-app .app-icon-button{display:grid!important}
.account-media-app .app-top-tabs{display:flex!important}
.account-media-app .app-utility-nav{display:flex!important}
.account-media-app .top-media-search{display:block!important}
.account-media-app .top-media-search input{background:#242424!important;color:#f6f6f6!important;border:1px solid transparent!important;box-shadow:none!important}
.account-media-app .top-media-search input:focus{border-color:rgba(var(--accent-rgb),.6)!important;background:#2b2b2b!important}
.account-media-app .app-sidebar{top:64px!important;height:calc(100vh - 64px)!important;background:#161616!important}
.account-media-app .nav-glyph{background:transparent!important;color:#aaa!important;font-size:17px!important}
.account-media-app .account-content{background:#141414!important}
.account-media-app .media-browser-hero{position:relative;min-height:430px!important;overflow:hidden;padding:96px 46px 38px!important;background:linear-gradient(90deg,#141414 0%,rgba(20,20,20,.84) 42%,rgba(20,20,20,.34) 74%,#141414 100%),linear-gradient(180deg,rgba(20,20,20,.05),#141414 96%),var(--media-hero-art),radial-gradient(circle at 74% 20%,rgba(var(--accent-rgb),.3),transparent 35%),linear-gradient(135deg,#2b2b2b,#111)!important;background-size:cover!important;background-position:center!important}
.account-media-app .media-browser-hero h2{max-width:820px;font-size:clamp(52px,6.4vw,86px)!important;letter-spacing:0}
.account-media-app .media-browser-hero .fineprint{max-width:620px;color:#d5d5d5;font-size:17px}
.account-media-app .filter-rail{padding:16px 42px 0!important}
.account-media-app .media-card-grid.media-row-browser{padding:24px 42px 74px!important;background:#141414!important}
.account-media-app .media-rail{grid-auto-columns:minmax(250px,320px)!important;gap:12px!important;padding:4px 2px 18px!important}
.account-media-app .media-card{border:0!important;border-radius:7px!important;background:#1b1b1b!important;box-shadow:0 15px 32px rgba(0,0,0,.36)!important}
.account-media-app .media-card:hover{transform:scale(1.045)!important;background:#232323!important;box-shadow:0 22px 52px rgba(0,0,0,.56)!important}
.account-media-app .media-row-browser .poster-frame{aspect-ratio:16/9!important;border-radius:7px 7px 0 0!important}
.account-media-app .play-float{left:auto!important;right:10px!important;width:44px;height:44px;display:grid;place-items:center;padding:0!important;border-radius:999px!important;font-size:0;background:rgba(255,255,255,.9)!important;color:#111!important}
.account-media-app .play-float:before{content:"";width:0;height:0;margin-left:3px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #111}
.account-media-app .show-card .play-float{opacity:0}
.account-media-app .show-card:hover .play-float{opacity:1}
.account-media-app .compact-toolbar .secondary{display:none!important}
.account-media-app .compact-toolbar button{min-width:42px!important;min-height:36px!important;border-radius:999px!important;padding:0 12px!important}
.episode-menu{margin-top:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.episode-menu summary{cursor:pointer;color:#fff;font-size:13px;font-weight:850;list-style:none}
.episode-menu summary::-webkit-details-marker{display:none}
.episode-menu summary:after{content:"+";float:right;color:var(--accent)}
.episode-menu[open] summary:after{content:"-"}
.media-auth-card{display:flex;justify-content:space-between;gap:22px;align-items:center;min-height:190px;padding:28px;border-radius:8px;background:linear-gradient(90deg,rgba(30,30,30,.98),rgba(30,30,30,.74)),radial-gradient(circle at 82% 10%,rgba(var(--accent-rgb),.28),transparent 38%);box-shadow:0 18px 48px rgba(0,0,0,.36)}
.media-auth-card h3{margin:0 0 8px;font-size:clamp(28px,4vw,46px)}
.app-bottom-nav{display:none}

.account-media-app.purchase-flow{background:radial-gradient(circle at 72% 18%,rgba(var(--accent-rgb),.14),transparent 30%),linear-gradient(135deg,#09131d 0%,#111 46%,#171717 100%)!important;padding-bottom:0!important}
.account-media-app.purchase-flow .app-topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:80!important}
.account-media-app.purchase-flow .app-sidebar,
.account-media-app.purchase-flow #media-browser,
.account-media-app.purchase-flow .app-bottom-nav,
.account-media-app.purchase-flow .app-top-tabs,
.account-media-app.purchase-flow .top-media-search,
.account-media-app.purchase-flow .app-icon-button{display:none!important}
.account-media-app.purchase-flow .app-topbar{justify-content:space-between!important}
.account-media-app.purchase-flow .account-shell{display:block!important;min-height:calc(100vh - 64px)!important;padding-top:64px!important}
.account-media-app.purchase-flow .account-content{width:min(1180px,calc(100vw - 40px))!important;max-width:1180px!important;margin:0 auto!important;padding:46px 0 150px!important;background:transparent!important}
.account-media-app.purchase-flow .account-content>section:not(.account-hero){display:none!important}
.account-media-app.purchase-flow .account-hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(340px,440px)!important;grid-template-areas:"account checkout" "auth checkout"!important;gap:18px!important;padding:0!important;margin:0!important;align-items:start!important}
.account-media-app.purchase-flow #accountPanel{grid-area:account!important;min-height:0!important}
.account-media-app.purchase-flow #checkoutPanel{grid-area:checkout!important;display:grid!important;gap:14px!important;position:sticky!important;top:86px!important}
.account-media-app.purchase-flow #checkoutPanel[hidden]{display:none!important}
.account-media-app.purchase-flow #loginPanel,
.account-media-app.purchase-flow #registerPanel{grid-area:auth!important}
.account-media-app.purchase-flow #accountPanel h1{font-size:clamp(38px,5vw,62px)!important;line-height:1.02!important;margin:8px 0 12px!important}
.account-media-app.purchase-flow #checkoutPanel h2,
.account-media-app.purchase-flow #loginPanel h2,
.account-media-app.purchase-flow #registerPanel h2{font-size:28px!important;margin:0 0 8px!important}
.account-media-app.purchase-flow #checkoutPanel .toolbar,
.account-media-app.purchase-flow #loginPanel form,
.account-media-app.purchase-flow #registerPanel form{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.account-media-app.purchase-flow #twoFactorForm[hidden]{display:none!important}
.account-media-app.purchase-flow #checkoutPanel button{width:100%!important;min-height:52px!important}
.account-media-app.purchase-flow .cookie-banner{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:min(460px,calc(100vw - 32px))!important;margin:24px auto 18px!important;padding:16px!important;display:grid!important;grid-template-columns:1fr!important}
.account-media-app.purchase-flow .cookie-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
@media(max-width:900px){
  .marketing-media-home .hero{grid-template-columns:1fr;min-height:auto}
  .marketing-media-home .hero-mosaic{grid-template-columns:repeat(3,minmax(96px,1fr));transform:none}
  .marketing-media-home .poster-tile{min-height:150px}
}
@media(max-width:760px){
  html,body{max-width:100vw!important;overflow-x:hidden!important}
  .account-media-app,
  .account-media-app .account-shell,
  .account-media-app .account-content,
  .account-media-app .media-browser-panel,
  .account-media-app .media-browser-hero,
  .marketing-media-home,
  .marketing-media-home main{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  .marketing-media-home .topbar{height:62px!important;display:flex!important;align-items:center!important;padding:0 14px!important;grid-template-columns:none!important}
  .marketing-media-home .topbar{left:0!important;right:0!important;width:100dvw!important;max-width:100dvw!important;overflow:hidden!important}
  .marketing-media-home .topbar .brand{display:flex!important;max-width:174px!important;min-width:0!important;overflow:visible!important}
  .marketing-media-home .topbar .brand-mark.has-image{flex:0 0 142px!important;width:142px!important;min-width:142px!important;height:42px!important}
  .marketing-media-home .mobile-menu-toggle{position:fixed!important;left:168px!important;right:auto!important;top:9px!important;z-index:50!important;display:grid!important;flex:0 0 44px!important;margin-left:0!important;border:1px solid rgba(255,255,255,.18)!important;background:#202020!important}
  .marketing-media-home .mobile-menu-toggle span{background:#fff!important}
  .marketing-media-home .topbar nav{position:absolute!important;left:12px;right:12px;top:calc(100% + 8px);display:grid!important;grid-template-columns:1fr 1fr;gap:8px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(18,18,18,.98);box-shadow:0 18px 48px rgba(0,0,0,.48);transition:max-height .18s ease,opacity .18s ease,padding .18s ease}
  .mobile-nav-open.marketing-media-home .topbar nav{max-height:420px;opacity:1;pointer-events:auto;padding:10px}
  .marketing-media-home .hero{display:block!important;padding:36px 18px 18px!important;min-height:auto!important}
  .marketing-media-home .hero>div:first-child{width:min(330px,calc(100dvw - 36px))!important;max-width:min(330px,calc(100dvw - 36px))!important}
  .marketing-media-home .hero h1{font-size:clamp(28px,8vw,34px)!important;line-height:1.08!important;max-width:min(330px,calc(100dvw - 36px))!important;overflow-wrap:break-word!important}
  .marketing-media-home .hero p,.account-media-app .media-browser-hero .fineprint{max-width:100%!important;overflow-wrap:break-word!important}
  .marketing-media-home .hero-actions{display:grid!important;grid-template-columns:1fr}
  .marketing-media-home .hero-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;margin-top:24px}
  .marketing-media-home .poster-tile{min-height:118px!important}
  .homepage-streams{padding:6px 18px 24px!important}
  .homepage-rail{grid-auto-columns:minmax(220px,78vw)}
  .account-media-app{--app-header-h:62px!important;padding-bottom:74px!important}
  .account-media-app .app-topbar{height:var(--app-header-h)!important;display:grid!important;grid-template-columns:44px minmax(92px,126px) minmax(0,1fr)!important;padding:8px 10px!important}
  .account-media-app .app-topbar{left:0!important;right:0!important;width:100dvw!important;max-width:100dvw!important}
  .account-media-app .app-brand{grid-column:2!important;max-width:126px!important;overflow:visible!important}
  .account-media-app .app-brand .brand-mark.has-image{flex:0 0 118px!important;width:118px!important;min-width:118px!important;height:42px!important}
  .account-media-app .top-media-search{grid-column:3!important;min-width:0!important}
  .account-media-app .app-sidebar{top:var(--app-header-h)!important;height:calc(100vh - var(--app-header-h))!important}
  .account-media-app .media-browser-hero{min-height:310px!important;padding:58px 16px 24px!important}
  .account-media-app .account-content,
  .account-media-app .media-browser-panel,
  .account-media-app .media-browser-hero{width:100dvw!important;max-width:100dvw!important}
  .account-media-app .media-browser-hero h2{font-size:clamp(36px,10vw,44px)!important;line-height:1.05!important;max-width:100%!important;overflow-wrap:break-word!important}
  .account-media-app .filter-rail{padding:12px 14px 0!important}
  .account-media-app .media-card-grid.media-row-browser{padding:16px 14px 36px!important}
  .account-media-app .media-rail{grid-auto-columns:minmax(214px,78vw)!important}
  .media-auth-card{display:grid;padding:22px}
  .app-bottom-nav{position:fixed;left:0!important;right:auto!important;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,25%)!important;width:min(100%,390px)!important;max-width:100dvw!important;box-sizing:border-box!important;overflow:hidden!important;min-height:64px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:#080808;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -12px 34px rgba(0,0,0,.42)}
  .app-bottom-nav a{display:grid;place-items:center;gap:2px;min-width:0!important;overflow:hidden!important;white-space:nowrap!important;color:#aaa;text-decoration:none;font-size:10px!important;font-weight:800}
  .app-bottom-nav span{display:grid;place-items:center;width:22px;height:22px;color:#f2f2f2;font-size:16px;line-height:1}
  .app-bottom-nav a:hover,.app-bottom-nav a:focus{color:var(--accent)}
  .account-media-app .cookie-banner{bottom:78px!important}
  .account-media-app.purchase-flow{padding-bottom:0!important}
  .account-media-app.purchase-flow .app-topbar{display:flex!important;padding:8px 14px!important}
  .account-media-app.purchase-flow .app-brand .brand-mark.has-image{flex:0 0 132px!important;width:132px!important;min-width:132px!important}
  .account-media-app.purchase-flow .account-content{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;padding:24px 0 150px!important}
  .account-media-app.purchase-flow .account-hero{grid-template-columns:1fr!important;grid-template-areas:"account" "auth" "checkout"!important;gap:14px!important}
  .account-media-app.purchase-flow #checkoutPanel{position:static!important}
  .account-media-app.purchase-flow #accountPanel h1{font-size:36px!important}
  .account-media-app.purchase-flow .cookie-banner{position:static!important;width:calc(100vw - 20px)!important;margin:18px auto!important}
}

@media(max-width:760px){
  .marketing-media-home .topbar{
    overflow:visible!important;
  }

  .marketing-media-home .topbar nav{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:70px!important;
    z-index:70!important;
    max-height:0!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-6px)!important;
  }

  .mobile-nav-open.marketing-media-home .topbar nav{
    max-height:min(70vh,520px)!important;
    overflow:auto!important;
    opacity:1!important;
    pointer-events:auto!important;
    padding:10px!important;
    transform:none!important;
  }
}

/* Product-shell mobile drawer polish. Keep the app dashboard distinct from marketing pages. */
@media(max-width:760px){
  .account-media-app.media-sidebar-open{
    overflow:hidden!important;
  }

  .account-media-app .app-icon-button{
    color:transparent!important;
  }

  .account-media-app .app-icon-button[aria-expanded="true"]{
    background:rgba(255,255,255,.12)!important;
  }

  .account-media-app .app-sidebar{
    visibility:hidden!important;
    pointer-events:none!important;
    padding:12px!important;
    border-right:1px solid rgba(255,255,255,.1)!important;
    box-shadow:22px 0 60px rgba(0,0,0,.52)!important;
    transform:translateX(-105%)!important;
    transition:transform .2s ease,visibility .2s ease!important;
  }

  .account-media-app .app-sidebar[aria-hidden="false"],
  .account-media-app.media-sidebar-open .app-sidebar{
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateX(0)!important;
  }

  .account-media-app .app-sidebar:before{
    display:none!important;
  }

  .account-media-app .app-sidebar .sidebar-label-static{
    display:block!important;
    padding:12px 10px 7px!important;
    color:#8d98a8!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
  }

  .account-media-app .app-sidebar a,
  .account-media-app .app-sidebar button{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:3px 0!important;
    padding:11px 12px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    text-align:left!important;
    white-space:normal!important;
  }

  .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:rgba(255,255,255,.09)!important;
  }

  .account-media-app .sidebar-divider{
    height:1px;
    margin:10px 4px;
    background:rgba(255,255,255,.1);
  }

  .account-media-app .cookie-banner{
    bottom:calc(74px + env(safe-area-inset-bottom))!important;
    max-height:none!important;
  }
}