:root {
  --topbar-height: 64px;
  --drawer-width: 320px;
  --page-side-padding: 42px;
  --bg: #050b13;
  --panel: rgba(7, 18, 31, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.07);
  --text: rgba(255, 255, 255, 0.94);
  --muted: rgba(255, 255, 255, 0.66);
  --line: rgba(255, 255, 255, 0.10);
  --accent: #39FF14;
  --accent-soft: rgba(57, 255, 20, 0.18);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

button { font: inherit; }

.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0.08), rgba(0,0,0,0.58)), url('/assets/shell-backdrop-vertical.webp');
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}

.app-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 22%, rgba(48, 134, 213, 0.25), transparent 32%), rgba(0, 0, 0, 0.22);
}

.main-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: calc(var(--topbar-height) + 42px) var(--page-side-padding) 42px;
}

@media (max-width: 700px) {
  :root { --page-side-padding: 18px; }

  .app-bg {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.52)), url('/assets/shell-backdrop-vertical.webp');
  }

  .main-content {
    padding-top: calc(var(--topbar-height) + 24px);
    padding-bottom: 28px;
  }
}

body[data-shell-theme="mutagen"] {
  --accent: #D946EF;
  --accent-soft: rgba(217, 70, 239, 0.18);
}

body[data-shell-theme="ocean"] {
  --accent: #38BDF8;
  --accent-soft: rgba(56, 189, 248, 0.18);
}

body[data-shell-theme="ember"] {
  --accent: #FB923C;
  --accent-soft: rgba(251, 146, 60, 0.18);
}

.drawer-user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* v0.0.564 — shared Web/TV view-size scale variables. Phone stays normal. */
:root {
  --view-scale: 1;
}

body:not(.shell-device-phone) {
  --ninja-poster-min: 132px;
  --ninja-poster-fluid: 8.8vw;
  --ninja-poster-max: 178px;
  --ninja-square-min: 150px;
  --ninja-square-fluid: 9.6vw;
  --ninja-square-max: 218px;
  --ninja-library-card-min: 325px;
  --ninja-library-card-fluid: 22.5vw;
  --ninja-library-card-max: 488px;
  --ninja-grid-row-gap-min: 22px;
  --ninja-grid-row-gap-fluid: 2.1vw;
  --ninja-grid-row-gap-max: 36px;
  --ninja-grid-col-gap-min: 16px;
  --ninja-grid-col-gap-fluid: 1.2vw;
  --ninja-grid-col-gap-max: 26px;
  --ninja-card-title-font: 14px;
  --ninja-drawer-label-font: 15px;
  --ninja-drawer-icon-size: 29px;
  --ninja-drawer-item-height: 38px;
  --ninja-topbar-control-size: 43px;
  --ninja-topbar-control-img: 41px;
  --ninja-topbar-avatar-size: 48px;
  --ninja-detail-poster-min: 150px;
  --ninja-detail-poster-fluid: 14vw;
  --ninja-detail-poster-max: 250px;
  --ninja-detail-title-min: 34px;
  --ninja-detail-title-fluid: 4.4vw;
  --ninja-detail-title-max: 76px;
  --ninja-hero-height-min: 208px;
  --ninja-hero-height-fluid: 27vw;
  --ninja-hero-height-max: 344px;
}

body:not(.shell-device-phone)[data-view-size="small"] {
  --page-side-padding: 34px;
  --ninja-poster-min: 119px;
  --ninja-poster-fluid: 7.9vw;
  --ninja-poster-max: 160px;
  --ninja-square-min: 135px;
  --ninja-square-fluid: 8.6vw;
  --ninja-square-max: 196px;
  --ninja-library-card-min: 292px;
  --ninja-library-card-fluid: 20.25vw;
  --ninja-library-card-max: 439px;
  --ninja-grid-row-gap-min: 20px;
  --ninja-grid-row-gap-fluid: 1.9vw;
  --ninja-grid-row-gap-max: 32px;
  --ninja-grid-col-gap-min: 14px;
  --ninja-grid-col-gap-fluid: 1.05vw;
  --ninja-grid-col-gap-max: 23px;
  --ninja-card-title-font: 13px;
  --ninja-drawer-label-font: 14px;
  --ninja-drawer-icon-size: 26px;
  --ninja-drawer-item-height: 34px;
  --ninja-topbar-control-size: 39px;
  --ninja-topbar-control-img: 37px;
  --ninja-topbar-avatar-size: 43px;
  --ninja-detail-poster-min: 135px;
  --ninja-detail-poster-fluid: 12.6vw;
  --ninja-detail-poster-max: 225px;
  --ninja-detail-title-min: 31px;
  --ninja-detail-title-fluid: 4vw;
  --ninja-detail-title-max: 68px;
  --ninja-hero-height-min: 187px;
  --ninja-hero-height-fluid: 24vw;
  --ninja-hero-height-max: 310px;
}

body:not(.shell-device-phone)[data-view-size="large"] {
  --page-side-padding: 48px;
  --ninja-poster-min: 152px;
  --ninja-poster-fluid: 10.1vw;
  --ninja-poster-max: 205px;
  --ninja-square-min: 173px;
  --ninja-square-fluid: 11vw;
  --ninja-square-max: 251px;
  --ninja-library-card-min: 374px;
  --ninja-library-card-fluid: 25.9vw;
  --ninja-library-card-max: 561px;
  --ninja-grid-row-gap-min: 25px;
  --ninja-grid-row-gap-fluid: 2.4vw;
  --ninja-grid-row-gap-max: 41px;
  --ninja-grid-col-gap-min: 18px;
  --ninja-grid-col-gap-fluid: 1.4vw;
  --ninja-grid-col-gap-max: 30px;
  --ninja-card-title-font: 16px;
  --ninja-drawer-label-font: 17px;
  --ninja-drawer-icon-size: 33px;
  --ninja-drawer-item-height: 44px;
  --ninja-topbar-control-size: 49px;
  --ninja-topbar-control-img: 47px;
  --ninja-topbar-avatar-size: 55px;
  --ninja-detail-poster-min: 173px;
  --ninja-detail-poster-fluid: 16.1vw;
  --ninja-detail-poster-max: 288px;
  --ninja-detail-title-min: 39px;
  --ninja-detail-title-fluid: 5.1vw;
  --ninja-detail-title-max: 87px;
  --ninja-hero-height-min: 239px;
  --ninja-hero-height-fluid: 31vw;
  --ninja-hero-height-max: 396px;
}

body:not(.shell-device-phone)[data-view-size="extra-large"] {
  --page-side-padding: 56px;
  --ninja-poster-min: 172px;
  --ninja-poster-fluid: 11.4vw;
  --ninja-poster-max: 231px;
  --ninja-square-min: 195px;
  --ninja-square-fluid: 12.5vw;
  --ninja-square-max: 283px;
  --ninja-library-card-min: 423px;
  --ninja-library-card-fluid: 29.3vw;
  --ninja-library-card-max: 634px;
  --ninja-grid-row-gap-min: 29px;
  --ninja-grid-row-gap-fluid: 2.7vw;
  --ninja-grid-row-gap-max: 47px;
  --ninja-grid-col-gap-min: 21px;
  --ninja-grid-col-gap-fluid: 1.6vw;
  --ninja-grid-col-gap-max: 34px;
  --ninja-card-title-font: 18px;
  --ninja-drawer-label-font: 19px;
  --ninja-drawer-icon-size: 38px;
  --ninja-drawer-item-height: 50px;
  --ninja-topbar-control-size: 56px;
  --ninja-topbar-control-img: 53px;
  --ninja-topbar-avatar-size: 62px;
  --ninja-detail-poster-min: 195px;
  --ninja-detail-poster-fluid: 18.2vw;
  --ninja-detail-poster-max: 325px;
  --ninja-detail-title-min: 44px;
  --ninja-detail-title-fluid: 5.7vw;
  --ninja-detail-title-max: 99px;
  --ninja-hero-height-min: 270px;
  --ninja-hero-height-fluid: 35vw;
  --ninja-hero-height-max: 447px;
}

body:not(.shell-device-phone)[data-view-size="huge"] {
  --page-side-padding: 66px;
  --ninja-poster-min: 198px;
  --ninja-poster-fluid: 13.2vw;
  --ninja-poster-max: 267px;
  --ninja-square-min: 225px;
  --ninja-square-fluid: 14.4vw;
  --ninja-square-max: 327px;
  --ninja-library-card-min: 488px;
  --ninja-library-card-fluid: 33.75vw;
  --ninja-library-card-max: 732px;
  --ninja-grid-row-gap-min: 33px;
  --ninja-grid-row-gap-fluid: 3.15vw;
  --ninja-grid-row-gap-max: 54px;
  --ninja-grid-col-gap-min: 24px;
  --ninja-grid-col-gap-fluid: 1.8vw;
  --ninja-grid-col-gap-max: 39px;
  --ninja-card-title-font: 21px;
  --ninja-drawer-label-font: 22px;
  --ninja-drawer-icon-size: 44px;
  --ninja-drawer-item-height: 58px;
  --ninja-topbar-control-size: 65px;
  --ninja-topbar-control-img: 62px;
  --ninja-topbar-avatar-size: 72px;
  --ninja-detail-poster-min: 225px;
  --ninja-detail-poster-fluid: 21vw;
  --ninja-detail-poster-max: 375px;
  --ninja-detail-title-min: 51px;
  --ninja-detail-title-fluid: 6.6vw;
  --ninja-detail-title-max: 114px;
  --ninja-hero-height-min: 312px;
  --ninja-hero-height-fluid: 40.5vw;
  --ninja-hero-height-max: 516px;
}

/* v0.0.564 — fixed numeric size tokens for browsers that do not support calc multiplication. */
body:not(.shell-device-phone) {
  --ninja-size-menu-button-height: 36px;
  --ninja-size-menu-font: 13px;
  --ninja-library-title-min: 20px;
  --ninja-library-title-fluid: 2.5vw;
  --ninja-library-title-max: 30px;
  --ninja-small-copy-font: 13px;
  --ninja-detail-body-font: 14px;
  --ninja-hero-title-min: 30px;
  --ninja-hero-title-fluid: 5vw;
  --ninja-hero-title-max: 62px;
  --ninja-hero-body-font: 14px;
  --ninja-alpha-width: 28px;
  --ninja-alpha-height: 22px;
  --ninja-alpha-font: 12px;
}

body:not(.shell-device-phone)[data-view-size="small"] {
  --ninja-size-menu-button-height: 32px;
  --ninja-size-menu-font: 12px;
  --ninja-library-title-min: 18px;
  --ninja-library-title-fluid: 2.25vw;
  --ninja-library-title-max: 27px;
  --ninja-small-copy-font: 12px;
  --ninja-detail-body-font: 13px;
  --ninja-hero-title-min: 27px;
  --ninja-hero-title-fluid: 4.5vw;
  --ninja-hero-title-max: 56px;
  --ninja-hero-body-font: 13px;
  --ninja-alpha-width: 25px;
  --ninja-alpha-height: 20px;
  --ninja-alpha-font: 11px;
}

body:not(.shell-device-phone)[data-view-size="large"] {
  --ninja-size-menu-button-height: 41px;
  --ninja-size-menu-font: 15px;
  --ninja-library-title-min: 23px;
  --ninja-library-title-fluid: 2.9vw;
  --ninja-library-title-max: 35px;
  --ninja-small-copy-font: 15px;
  --ninja-detail-body-font: 16px;
  --ninja-hero-title-min: 35px;
  --ninja-hero-title-fluid: 5.75vw;
  --ninja-hero-title-max: 71px;
  --ninja-hero-body-font: 16px;
  --ninja-alpha-width: 32px;
  --ninja-alpha-height: 25px;
  --ninja-alpha-font: 14px;
}

body:not(.shell-device-phone)[data-view-size="extra-large"] {
  --ninja-size-menu-button-height: 47px;
  --ninja-size-menu-font: 17px;
  --ninja-library-title-min: 26px;
  --ninja-library-title-fluid: 3.25vw;
  --ninja-library-title-max: 39px;
  --ninja-small-copy-font: 17px;
  --ninja-detail-body-font: 18px;
  --ninja-hero-title-min: 39px;
  --ninja-hero-title-fluid: 6.5vw;
  --ninja-hero-title-max: 81px;
  --ninja-hero-body-font: 18px;
  --ninja-alpha-width: 36px;
  --ninja-alpha-height: 29px;
  --ninja-alpha-font: 16px;
}

body:not(.shell-device-phone)[data-view-size="huge"] {
  --ninja-size-menu-button-height: 54px;
  --ninja-size-menu-font: 20px;
  --ninja-library-title-min: 30px;
  --ninja-library-title-fluid: 3.75vw;
  --ninja-library-title-max: 45px;
  --ninja-small-copy-font: 20px;
  --ninja-detail-body-font: 21px;
  --ninja-hero-title-min: 45px;
  --ninja-hero-title-fluid: 7.5vw;
  --ninja-hero-title-max: 93px;
  --ninja-hero-body-font: 21px;
  --ninja-alpha-width: 42px;
  --ninja-alpha-height: 33px;
  --ninja-alpha-font: 18px;
}