:root {
  color-scheme: dark;

  --bg: #040913;
  --bg-soft: #07111f;
  --surface: rgba(10, 22, 39, 0.78);
  --surface-strong: #0b182a;

  --line: rgba(137, 185, 255, 0.13);
  --line-strong: rgba(137, 185, 255, 0.24);

  --text: #f3f7fc;
  --muted: #8da3bd;
  --muted-soft: #5f7690;

  --blue: #4b9dff;
  --blue-bright: #78b8ff;
  --blue-soft: rgba(75, 157, 255, 0.14);

  --danger: #ff7785;

  --shadow:
    0 30px 80px rgba(0, 0, 0, 0.42);

  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 11px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: var(--bg);
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 76% 10%,
      rgba(37, 112, 211, 0.12),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #03070e 0%,
      #050c17 44%,
      #06111e 100%
    );

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button,
input {
  outline: none;
}

button:focus-visible,
input:focus-visible {
  box-shadow:
    0 0 0 3px rgba(75, 157, 255, 0.26);
}

[hidden] {
  display: none !important;
}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.ambient {
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(100px);
  opacity: 0.15;
}

.ambient-one {
  width: 36rem;
  height: 36rem;

  top: -17rem;
  right: -7rem;

  background: #2386ff;
}

.ambient-two {
  width: 28rem;
  height: 28rem;

  left: -15rem;
  bottom: -13rem;

  background: #0d4f9f;
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-view {
  min-height: 100vh;

  display: grid;
  grid-template-columns:
    minmax(380px, 560px)
    minmax(0, 1fr);

  position: relative;
  z-index: 1;
}

.login-card {
  min-height: 100vh;

  padding:
    clamp(34px, 5vw, 74px)
    clamp(30px, 6vw, 88px);

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      rgba(5, 12, 23, 0.96),
      rgba(5, 12, 23, 0.88)
    );

  border-right:
    1px solid var(--line);
}

.login-brand {
  width: max-content;
}

.brand-name,
.brand-wordmark {
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -0.045em;
}

.brand-line {
  width: 34px;
  height: 2px;

  margin-top: 9px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      transparent
    );
}

.login-copy {
  margin-top: auto;
  padding-top: 80px;
}

.login-copy > span,
.section-kicker {
  display: block;

  color: var(--blue-bright);

  font-size: 11px;
  font-weight: 750;

  letter-spacing: 0.19em;
}

.login-copy h1 {
  margin:
    15px 0
    18px;

  font-size:
    clamp(43px, 5vw, 72px);

  letter-spacing: -0.065em;
  line-height: 0.96;

  font-weight: 720;
}

.login-copy p {
  margin: 0;

  color: var(--muted);

  font-size: 15px;
}

.login-form {
  margin-top: 54px;

  display: grid;
  gap: 19px;

  max-width: 390px;
}

.login-form label {
  display: grid;
  gap: 8px;
}

.login-form label > span {
  color: var(--muted);

  font-size: 12px;
  font-weight: 620;
}

.login-form input {
  width: 100%;

  border:
    1px solid var(--line);

  border-radius: var(--radius-sm);

  background:
    rgba(10, 22, 39, 0.76);

  color: var(--text);

  padding:
    14px 15px;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.login-form input:hover {
  border-color: var(--line-strong);
}

.login-form input:focus {
  border-color:
    rgba(75, 157, 255, 0.7);

  background:
    rgba(12, 28, 49, 0.88);
}

.primary-button {
  margin-top: 9px;

  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0;

  border-radius: var(--radius-sm);

  padding:
    0 18px;

  background:
    linear-gradient(
      135deg,
      #328cf5,
      #5aa8ff
    );

  color: #fff;

  font-weight: 720;

  cursor: pointer;

  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.primary-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.primary-button:disabled {
  opacity: 0.58;
  cursor: wait;
  transform: none;
}

.form-status {
  min-height: 22px;

  color: var(--muted);

  font-size: 13px;
}

.form-status.error {
  color: var(--danger);
}

.login-atmosphere {
  min-height: 100vh;

  position: relative;

  overflow: hidden;
}

.login-atmosphere::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 8, 15, 0.7),
      transparent 45%
    );
}

.login-glow {
  position: absolute;

  width: min(52vw, 850px);
  aspect-ratio: 1;

  top: 50%;
  left: 52%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(47, 137, 250, 0.22),
      rgba(26, 82, 160, 0.08) 42%,
      transparent 70%
    );

  animation:
    breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(0.94);

    opacity: 0.72;
  }

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.04);

    opacity: 1;
  }
}


/* =========================================================
   APPLICATION SHELL
   ========================================================= */

.app-view {
  min-height: 100vh;
}

.topbar {
  height: 78px;

  position: sticky;
  top: 0;
  z-index: 30;

  display: grid;

  grid-template-columns:
    minmax(170px, 1fr)
    auto
    minmax(170px, 1fr);

  align-items: center;

  padding:
    0 clamp(24px, 4vw, 64px);

  border-bottom:
    1px solid var(--line);

  background:
    rgba(4, 9, 19, 0.76);

  backdrop-filter:
    blur(22px);
}

.brand-button {
  width: max-content;

  border: 0;
  padding: 0;

  background: transparent;

  cursor: pointer;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 5px;

  padding: 5px;

  border:
    1px solid var(--line);

  border-radius: 999px;

  background:
    rgba(8, 19, 34, 0.58);
}

.nav-button {
  min-width: 94px;
  min-height: 38px;

  border: 0;

  border-radius: 999px;

  background: transparent;

  color: var(--muted);

  font-size: 13px;
  font-weight: 620;

  cursor: pointer;

  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.nav-button:hover {
  color: var(--text);
}

.nav-button.active {
  background: var(--blue-soft);
  color: #eaf4ff;
}

.topbar-actions {
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button,
.user-button {
  border:
    1px solid var(--line);

  background:
    rgba(9, 20, 36, 0.68);

  cursor: pointer;
}

.icon-button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--blue-bright);

  font-size: 23px;
}

.user-button {
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 9px;

  border-radius: 999px;

  padding:
    4px 13px
    4px 5px;
}

.user-avatar {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #276dbd,
      #4d9ff8
    );

  color: white;

  font-weight: 750;
}

.user-name {
  max-width: 140px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 13px;
  font-weight: 620;
}

.main-content {
  min-height:
    calc(100vh - 78px);

  padding:
    clamp(50px, 7vw, 110px)
    clamp(24px, 5vw, 78px)
    80px;
}

.welcome-view {
  max-width: 1450px;
  margin: 0 auto;
}

.welcome-view h1 {
  margin:
    10px 0
    12px;

  font-size:
    clamp(42px, 6vw, 82px);

  letter-spacing: -0.06em;
  line-height: 0.96;
}

.view-message {
  margin: 0;

  color: var(--muted);

  font-size: 16px;
}

.user-menu {
  position: fixed;

  top: 68px;
  right:
    clamp(24px, 4vw, 64px);

  z-index: 50;

  width: 240px;

  padding: 10px;

  border:
    1px solid var(--line-strong);

  border-radius: var(--radius-md);

  background:
    rgba(8, 18, 32, 0.97);

  box-shadow: var(--shadow);

  backdrop-filter:
    blur(24px);
}

.user-menu-header {
  padding:
    10px 10px
    14px;

  display: grid;
  gap: 4px;

  border-bottom:
    1px solid var(--line);
}

.user-menu-header strong {
  font-size: 14px;
}

.user-menu-header span {
  color: var(--muted);

  font-size: 12px;
}

.user-menu button {
  width: 100%;

  margin-top: 8px;

  padding: 11px;

  border: 0;

  border-radius: 9px;

  background: transparent;

  color: var(--muted);

  text-align: left;

  cursor: pointer;
}

.user-menu button:hover {
  color: var(--text);
  background: var(--blue-soft);
}


/* =========================================================
   RESPONSIVE / TV FRIENDLY
   ========================================================= */

@media (max-width: 820px) {
  .login-view {
    grid-template-columns: 1fr;
  }

  .login-atmosphere {
    display: none;
  }

  .login-card {
    border-right: 0;
  }

  .topbar {
    height: auto;

    grid-template-columns:
      1fr auto;

    gap: 16px;

    padding:
      18px 22px;
  }

  .main-nav {
    grid-column:
      1 / -1;

    grid-row: 2;

    width: 100%;

    justify-content: center;
  }

  .nav-button {
    flex: 1;
  }

  .user-name {
    display: none;
  }

  .main-content {
    min-height: 0;

    padding:
      48px 24px;
  }
}

@media (min-width: 1500px) {
  .nav-button {
    min-width: 112px;
    min-height: 42px;
  }

  .topbar {
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   ENDCORE WEB 1.0 — HOME
   ========================================================= */

.main-content {
  padding: 0;
}

.view-root {
  min-height:
    calc(100vh - 78px);
}

.home-view {
  min-height:
    calc(100vh - 78px);
}


/* HERO */

.home-hero {
  min-height:
    min(72vh, 760px);

  position: relative;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  isolation: isolate;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;

  background-size: cover;
  background-position: center 22%;

  transform: scale(1.015);

  animation:
    hero-arrive
    900ms
    ease-out
    both;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(3, 8, 16, 0.96) 0%,
      rgba(3, 8, 16, 0.72) 34%,
      rgba(3, 8, 16, 0.20) 67%,
      rgba(3, 8, 16, 0.08) 100%
    ),
    linear-gradient(
      0deg,
      #040913 0%,
      rgba(4, 9, 19, 0.9) 8%,
      rgba(4, 9, 19, 0.04) 48%
    );
}

.hero-content {
  width: min(
    680px,
    calc(100% - 48px)
  );

  margin-left:
    clamp(24px, 6vw, 92px);

  padding-bottom:
    clamp(58px, 8vw, 105px);
}

.home-hero h1 {
  margin:
    12px 0
    15px;

  font-size:
    clamp(48px, 7vw, 96px);

  line-height: 0.92;

  letter-spacing: -0.065em;

  text-shadow:
    0 10px 35px
    rgba(0, 0, 0, 0.42);
}

.hero-meta {
  color:
    rgba(226, 237, 250, 0.78);

  font-size: 14px;
}

.hero-actions {
  margin-top: 27px;

  display: flex;
  gap: 10px;
}

.hero-play,
.hero-details,
.secondary-action {
  min-height: 46px;

  border-radius: 999px;

  padding:
    0 20px;

  cursor: pointer;

  font-weight: 690;
}

.hero-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  border: 0;

  background: #edf6ff;
  color: #06101c;
}

.hero-details {
  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  background:
    rgba(8, 17, 30, 0.60);

  backdrop-filter:
    blur(16px);
}

.hero-play:hover,
.hero-details:hover {
  transform:
    translateY(-1px);
}

.home-hero-empty {
  min-height: 48vh;

  background:
    radial-gradient(
      circle at 60% 35%,
      rgba(48, 139, 255, 0.16),
      transparent 36%
    );
}


/* HOME SECTIONS */

.home-sections {
  position: relative;
  z-index: 5;

  margin-top: -28px;

  padding:
    0
    clamp(24px, 5vw, 76px)
    80px;
}

.media-section {
  margin-top: 38px;
}

.media-section:first-child {
  margin-top: 0;
}

.media-section-heading {
  margin-bottom: 13px;

  display: flex;
  align-items: end;
  justify-content: space-between;
}

.media-section-heading h2 {
  margin: 0;

  font-size:
    clamp(18px, 2vw, 24px);

  letter-spacing: -0.028em;
}

.media-row {
  display: grid;

  grid-auto-flow: column;

  grid-auto-columns:
    clamp(142px, 13vw, 196px);

  gap: 13px;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    3px 3px
    15px;

  scroll-snap-type:
    x proximity;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(102, 156, 218, 0.35)
    transparent;
}

.media-row::-webkit-scrollbar {
  height: 6px;
}

.media-row::-webkit-scrollbar-thumb {
  background:
    rgba(102, 156, 218, 0.32);

  border-radius: 999px;
}


/* MEDIA CARDS */

.media-card {
  min-width: 0;

  scroll-snap-align: start;

  cursor: pointer;

  border-radius: 13px;

  transition:
    transform 180ms ease,
    background 180ms ease;
}

.media-card:hover,
.media-card:focus-visible {
  transform:
    translateY(-5px)
    scale(1.015);
}

.media-card:focus-visible {
  outline:
    2px solid
    rgba(92, 169, 255, 0.88);

  outline-offset: 3px;
}

.media-poster {
  position: relative;

  width: 100%;

  aspect-ratio:
    2 / 3;

  overflow: hidden;

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      #0d1b2c,
      #08111e
    );

  box-shadow:
    0 16px 30px
    rgba(0, 0, 0, 0.18);
}

.media-poster img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 300ms ease,
    filter 300ms ease;
}

.media-card:hover
.media-poster img,
.media-card:focus-visible
.media-poster img {
  transform:
    scale(1.035);

  filter:
    brightness(1.08);
}

.poster-fallback {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  padding: 18px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(74, 153, 248, 0.18),
      transparent 42%
    );

  color: var(--muted);

  text-align: center;

  font-size: 12px;
}

.progress-track {
  position: absolute;

  left: 8px;
  right: 8px;
  bottom: 8px;

  height: 3px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.19);
}

.progress-value {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #398eea,
      #80c0ff
    );

  box-shadow:
    0 0 12px
    rgba(72, 159, 255, 0.75);
}

.media-card-copy {
  padding:
    10px 4px
    2px;

  display: grid;
  gap: 4px;
}

.media-card-copy strong {
  overflow: hidden;

  color: #eef5fd;

  font-size: 13px;
  font-weight: 650;

  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card-copy span {
  overflow: hidden;

  color: var(--muted);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* VIEW STATES */

.view-state,
.empty-library {
  min-height:
    calc(100vh - 78px);

  padding:
    clamp(70px, 10vw, 150px)
    clamp(24px, 6vw, 92px);

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(54, 135, 238, 0.12),
      transparent 35%
    );
}

.view-state h1,
.empty-library h2 {
  margin:
    12px 0
    14px;

  font-size:
    clamp(42px, 6vw, 78px);

  letter-spacing:
    -0.055em;

  line-height: 0.96;
}

.view-state p,
.empty-library p {
  max-width: 560px;

  margin: 0;

  color: var(--muted);

  line-height: 1.6;
}

.view-error {
  color:
    #e8a0a7 !important;
}

.secondary-action {
  margin-top: 24px;

  border:
    1px solid var(--line-strong);

  background:
    var(--blue-soft);
}


/* MOTION */

@keyframes hero-arrive {
  from {
    opacity: 0;
    transform:
      scale(1.055);
  }

  to {
    opacity: 1;
    transform:
      scale(1.015);
  }
}


/* RESPONSIVE HOME */

@media (max-width: 820px) {
  .view-root {
    min-height: 0;
  }

  .home-hero {
    min-height: 62vh;
  }

  .hero-content {
    margin-left: 24px;

    padding-bottom: 62px;
  }

  .hero-shade {
    background:
      linear-gradient(
        0deg,
        #040913 0%,
        rgba(4, 9, 19, 0.78) 40%,
        rgba(4, 9, 19, 0.12) 100%
      );
  }

  .home-sections {
    margin-top: 0;

    padding:
      0 20px
      60px;
  }

  .media-row {
    grid-auto-columns:
      minmax(132px, 42vw);
  }

  .hero-actions {
    flex-wrap: wrap;
  }
}

@media (min-width: 1600px) {
  .media-row {
    grid-auto-columns:
      205px;

    gap: 16px;
  }
}


/* =========================================================
   BRAND POLISH
   ========================================================= */

.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-text-block,
.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brand-mark-image {
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 10px 24px rgba(63, 126, 255, 0.18))
    drop-shadow(0 0 18px rgba(118, 96, 255, 0.12));
}

.login-brand-image {
  width: 72px;
  height: 72px;
}

.topbar-brand-image {
  width: 46px;
  height: 46px;
}

.brand-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-subname {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.28em;
  line-height: 1;
}

.topbar-subname {
  font-size: 9px;
  letter-spacing: 0.26em;
}

.brand-name,
.brand-wordmark {
  line-height: 1;
}

.brand-line {
  width: 42px;
  margin-top: 10px;
}

@media (max-width: 820px) {
  .login-brand-image {
    width: 64px;
    height: 64px;
  }

  .topbar-brand-image {
    width: 40px;
    height: 40px;
  }
}


/* =========================================================
   ENDCORE HOME — ROTATING STICKY PRESENTATIONS
   ========================================================= */

.home-hero {
  position: sticky;
  top: 78px;

  z-index: 18;

  box-shadow:
    0 28px 60px
    rgba(0, 0, 0, 0.28);
}

.home-sections {
  position: relative;
  z-index: 10;

  background:
    #040913;
}

.hero-count {
  margin-left: 8px;

  color:
    rgba(220, 235, 255, 0.52);

  font-size: 10px;

  letter-spacing: 0.08em;
}

.hero-rotation {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 24px;
}

.hero-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.32);

  cursor: pointer;

  transition:
    width 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.hero-dot:hover {
  background:
    rgba(255, 255, 255, 0.72);

  transform:
    scale(1.15);
}

.hero-dot.active {
  width: 24px;

  background:
    rgba(225, 242, 255, 0.94);
}

.hero-backdrop.hero-switching {
  animation:
    hero-cycle
    650ms
    ease-out
    both;
}

@keyframes hero-cycle {
  from {
    opacity: 0.52;

    transform:
      scale(1.035);
  }

  to {
    opacity: 1;

    transform:
      scale(1.015);
  }
}

@media (min-width: 1500px) {
  .home-hero {
    top: 84px;
  }
}

/*
 * Mobile topbar has dynamic height,
 * so avoid an incorrect hard-coded
 * sticky offset on small screens.
 */
@media (max-width: 820px) {
  .home-hero {
    position: relative;
    top: auto;
  }

  .hero-rotation {
    margin-top: 18px;
  }
}


/* =========================================================
   HOME HERO — COMPACT DESKTOP PRESENTATION
   ========================================================= */

@media (min-width: 821px) {
  .home-hero {
    min-height:
      clamp(
        360px,
        50vh,
        470px
      );
  }

  .hero-content {
    padding-bottom:
      clamp(
        32px,
        5vh,
        48px
      );
  }
}


/* =========================================================
   ENDCORE WEB 1.0 — DESKTOP SHELL
   Permanent left rail + independent content area
   ========================================================= */

@media (min-width: 981px) {

  :root {
    --endcore-rail-width: 220px;
    --endcore-page-bg: #040913;
  }


  /* =======================================================
     APPLICATION FRAME
     ======================================================= */

  .app-view {
    padding-top: 0 !important;
  }


  /*
   * The old horizontal header becomes only a positioning
   * layer for logo / navigation / user controls.
   */
  .topbar {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    pointer-events: none !important;

    z-index: 90 !important;
  }


  /*
   * Real sidebar background.
   * This occupies its own permanent visual column.
   */
  .topbar::before {
    content: "";

    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    width:
      var(--endcore-rail-width);

    background:
      linear-gradient(
        180deg,
        rgba(4, 12, 25, 0.99) 0%,
        rgba(3, 10, 21, 0.985) 55%,
        rgba(2, 8, 17, 0.99) 100%
      );

    border-right:
      1px solid
      rgba(91, 151, 231, 0.13);

    box-shadow:
      12px 0 35px
      rgba(0, 0, 0, 0.20);

    pointer-events: none;
  }


  .topbar > * {
    pointer-events: auto;
  }


  /* =======================================================
     ENDCORE LOGO — SIDEBAR HEADER
     ======================================================= */

  .brand-button {
    position: fixed !important;

    top: 15px !important;
    left: 15px !important;

    width: 190px !important;
    height: 68px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 12px !important;

    padding:
      8px
      10px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 16px !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    transform:
      none !important;

    z-index: 92 !important;
  }


  .brand-button:hover {
    background:
      rgba(
        49,
        106,
        179,
        0.10
      ) !important;
  }


  /* =======================================================
     MAIN NAVIGATION — LEFT RAIL
     ======================================================= */

  .main-nav {
    position: fixed !important;

    top: 108px !important;
    left: 14px !important;

    width: 192px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 5px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    transform:
      none !important;

    z-index: 92 !important;
  }


  .main-nav .nav-button {
    position: relative;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding:
      0
      16px !important;

    margin: 0 !important;

    border:
      1px solid
      transparent !important;

    border-left:
      2px solid
      transparent !important;

    border-radius:
      12px !important;

    background:
      transparent !important;

    color:
      rgba(
        218,
        230,
        247,
        0.72
      ) !important;

    text-align:
      left !important;

    transform:
      none !important;
  }


  .main-nav .nav-button:hover {
    background:
      rgba(
        43,
        91,
        151,
        0.14
      ) !important;

    color:
      rgba(
        242,
        248,
        255,
        0.96
      ) !important;
  }


  .main-nav .nav-button.active {
    border-left-color:
      rgba(
        92,
        174,
        255,
        0.92
      ) !important;

    background:
      linear-gradient(
        90deg,
        rgba(
          30,
          86,
          153,
          0.32
        ),
        rgba(
          16,
          42,
          80,
          0.18
        )
      ) !important;

    color:
      #f4f8ff !important;
  }


  /* =======================================================
     USER AREA — FLOATING OVER CONTENT
     ======================================================= */

  .topbar-actions {
    position: fixed !important;

    top: 17px !important;
    right: 22px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;

    z-index: 93 !important;
  }


  /* =======================================================
     CONTENT — PHYSICALLY BESIDE SIDEBAR
     ======================================================= */

  .main-content {
    position: relative !important;

    width:
      calc(
        100% -
        var(--endcore-rail-width)
      ) !important;

    min-height:
      100vh !important;

    margin-left:
      var(--endcore-rail-width) !important;

    padding-top:
      0 !important;

    overflow:
      visible !important;

    background:
      var(--endcore-page-bg);
  }


  .view-root,
  .home-view {
    width: 100% !important;
    min-height: 100vh !important;
  }


  /* =======================================================
     HOME HERO
     ======================================================= */

  .home-hero {
    position:
      relative !important;

    top:
      auto !important;

    width:
      100% !important;

    min-height:
      clamp(
        320px,
        38vh,
        390px
      ) !important;

    margin:
      0 !important;

    padding-top:
      66px !important;

    padding-bottom:
      54px !important;

    overflow:
      hidden !important;

    box-shadow:
      none !important;

    z-index:
      1 !important;
  }


  /*
   * Banner content no longer needs to move away
   * from navigation: navigation owns its own column.
   */
  .hero-content {
    margin-left:
      0 !important;

    max-width:
      min(
        780px,
        72vw
      ) !important;

    position:
      relative !important;

    z-index:
      5 !important;
  }


  /* =======================================================
     HERO FADES
     ======================================================= */

  .home-hero::before,
  .home-hero::after {
    content: "";

    position:
      absolute;

    left:
      0;

    right:
      0;

    pointer-events:
      none;

    z-index:
      3;
  }


  /*
   * Subtle fade behind the user controls/logo line.
   */
  .home-hero::before {
    top:
      0;

    height:
      90px;

    background:
      linear-gradient(
        to bottom,
        rgba(
          4,
          9,
          19,
          0.78
        ) 0%,
        rgba(
          4,
          9,
          19,
          0.30
        ) 54%,
        rgba(
          4,
          9,
          19,
          0
        ) 100%
      );
  }


  /*
   * Banner dissolves into the page background.
   * No hard rectangular bottom edge.
   */
  .home-hero::after {
    bottom:
      0;

    height:
      150px;

    background:
      linear-gradient(
        to bottom,
        rgba(
          4,
          9,
          19,
          0
        ) 0%,
        rgba(
          4,
          9,
          19,
          0.24
        ) 32%,
        rgba(
          4,
          9,
          19,
          0.68
        ) 68%,
        var(
          --endcore-page-bg
        ) 100%
      );
  }


  .hero-actions,
  .hero-meta,
  .hero-rotation,
  .section-kicker {
    position:
      relative;

    z-index:
      5;
  }


  /* =======================================================
     HOME ROWS
     ======================================================= */

  /*
   * Important:
   * rows DO NOT overlap the banner anymore.
   */
  .home-sections {
    position:
      relative !important;

    z-index:
      10 !important;

    margin-top:
      0 !important;

    padding-top:
      22px !important;

    transform:
      none !important;

    background:
      var(--endcore-page-bg) !important;

    overflow:
      visible !important;
  }
}


/*
 * Tablet/mobile continue using the original horizontal
 * EndCore navigation for now.
 */


/* =========================================================
   ENDCORE ADMINISTRATION — LIBRARIES
   ========================================================= */

.nav-section-label {
  margin:
    22px
    16px
    4px;

  color:
    rgba(111, 181, 255, .54);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}

.nav-section-label[hidden],
.admin-nav-button[hidden] {
  display:
    none !important;
}


.admin-view {
  min-height:
    100vh;

  padding:
    74px
    clamp(26px, 4vw, 64px)
    70px;

  background:
    #040913;
}


.admin-header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    32px;

  max-width:
    1180px;

  margin:
    0 auto
    32px;
}


.admin-header h1 {
  margin:
    7px 0
    8px;

  font-size:
    clamp(34px, 4vw, 56px);

  line-height:
    1;
}


.admin-header p {
  max-width:
    660px;

  margin:
    0;

  color:
    rgba(203, 220, 241, .62);

  line-height:
    1.6;
}


.admin-header-count {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  padding-bottom:
    4px;
}


.admin-header-count strong {
  font-size:
    30px;
}


.admin-header-count span {
  color:
    rgba(203, 220, 241, .52);

  font-size:
    12px;
}


.admin-status {
  max-width:
    1180px;

  margin:
    0 auto
    18px;

  padding:
    11px
    14px;

  border:
    1px solid
    rgba(67, 160, 255, .20);

  border-radius:
    12px;

  background:
    rgba(28, 76, 133, .14);

  color:
    rgba(220, 237, 255, .92);

  font-size:
    13px;
}


.admin-status.error {
  border-color:
    rgba(255, 105, 105, .25);

  background:
    rgba(123, 36, 49, .15);

  color:
    rgba(255, 196, 201, .96);
}


.admin-panel,
.admin-library-section {
  max-width:
    1180px;

  margin:
    0 auto
    24px;
}


.admin-panel {
  padding:
    22px;

  border:
    1px solid
    rgba(100, 159, 230, .14);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 25, 47, .82),
      rgba(6, 15, 31, .88)
    );
}


.admin-panel-heading {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    28px;

  margin-bottom:
    20px;
}


.admin-panel-heading h2,
.admin-section-heading h2 {
  margin:
    3px 0
    0;

  font-size:
    20px;
}


.admin-panel-heading p {
  max-width:
    400px;

  margin:
    0;

  color:
    rgba(200, 218, 240, .48);

  font-size:
    12px;

  line-height:
    1.5;

  text-align:
    right;
}


.admin-eyebrow {
  color:
    rgba(94, 174, 255, .68);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .15em;
}


.admin-library-form {
  display:
    grid;

  grid-template-columns:
    minmax(150px, .8fr)
    minmax(280px, 2fr)
    minmax(150px, .8fr)
    auto;

  gap:
    12px;

  align-items:
    end;
}


.admin-library-form label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.admin-library-form label > span {
  color:
    rgba(211, 226, 245, .58);

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .06em;
}


.admin-library-form input,
.admin-library-form select {
  width:
    100%;

  height:
    42px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(103, 159, 226, .18);

  border-radius:
    11px;

  outline:
    none;

  background:
    rgba(2, 9, 20, .62);

  color:
    #edf5ff;

  font:
    inherit;
}


.admin-library-form input:focus,
.admin-library-form select:focus {
  border-color:
    rgba(78, 165, 255, .60);

  box-shadow:
    0 0 0 3px
    rgba(67, 153, 255, .08);
}


.admin-primary-button {
  min-height:
    42px;

  padding:
    0 18px;

  border:
    1px solid
    rgba(79, 168, 255, .40);

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      rgba(35, 104, 189, .90),
      rgba(36, 70, 152, .92)
    );

  color:
    white;

  font-weight:
    750;

  cursor:
    pointer;
}


.admin-primary-button:disabled {
  opacity:
    .55;

  cursor:
    wait;
}


.admin-section-heading {
  margin:
    36px 0
    15px;
}


.admin-library-grid {
  display:
    grid;

  gap:
    12px;
}


.admin-library-card {
  padding:
    19px
    20px;

  border:
    1px solid
    rgba(102, 158, 224, .13);

  border-radius:
    17px;

  background:
    rgba(8, 20, 39, .68);

  transition:
    border-color .16s ease,
    background .16s ease;
}


.admin-library-card:hover {
  border-color:
    rgba(89, 171, 255, .24);

  background:
    rgba(9, 24, 47, .82);
}


.admin-library-title-row {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.admin-library-title-row h3 {
  margin:
    0;

  font-size:
    18px;
}


.admin-root-state {
  padding:
    4px 8px;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .05em;
}


.admin-root-state.enabled {
  background:
    rgba(47, 189, 126, .12);

  color:
    rgba(113, 236, 174, .92);
}


.admin-root-state.disabled {
  background:
    rgba(147, 159, 178, .10);

  color:
    rgba(189, 199, 214, .72);
}


.admin-library-type {
  margin-top:
    4px;

  color:
    rgba(101, 180, 255, .72);

  font-size:
    11px;

  font-weight:
    700;
}


.admin-library-path {
  margin:
    17px 0;

  padding:
    11px
    13px;

  border-radius:
    10px;

  background:
    rgba(1, 7, 16, .62);

  color:
    rgba(212, 229, 248, .76);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size:
    12px;

  overflow-wrap:
    anywhere;
}


.admin-library-facts {
  display:
    flex;

  gap:
    38px;

  margin:
    0 0
    17px;
}


.admin-library-facts div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.admin-library-facts dt {
  color:
    rgba(197, 215, 237, .42);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.admin-library-facts dd {
  margin:
    0;

  color:
    rgba(225, 237, 252, .78);

  font-size:
    11px;
}


.admin-library-actions {
  display:
    flex;

  gap:
    9px;
}


.admin-library-actions button {
  min-height:
    35px;

  padding:
    0 13px;

  border:
    1px solid
    rgba(92, 163, 241, .22);

  border-radius:
    10px;

  background:
    rgba(26, 66, 116, .14);

  color:
    rgba(222, 237, 255, .88);

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    700;

  cursor:
    pointer;
}


.admin-library-actions button:hover {
  border-color:
    rgba(92, 174, 255, .48);

  background:
    rgba(32, 91, 159, .24);
}


.admin-library-actions button:disabled {
  opacity:
    .48;

  cursor:
    wait;
}


.admin-root-operation {
  min-height:
    15px;

  margin-top:
    11px;

  color:
    rgba(191, 214, 241, .54);

  font-size:
    10px;
}


.admin-root-operation.success {
  color:
    rgba(112, 226, 170, .82);
}


.admin-root-operation.error {
  color:
    rgba(255, 142, 151, .90);
}


.admin-empty-state,
.admin-loading,
.admin-error-panel {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  padding:
    30px;

  border:
    1px dashed
    rgba(105, 160, 225, .18);

  border-radius:
    16px;

  color:
    rgba(207, 224, 245, .60);
}


.admin-error-panel {
  border-color:
    rgba(255, 103, 117, .24);

  color:
    rgba(255, 180, 186, .86);
}


@media (max-width: 1180px) {

  .admin-library-form {
    grid-template-columns:
      1fr
      1fr;
  }

  .admin-library-path-field {
    grid-column:
      1 / -1;
  }
}


@media (max-width: 700px) {

  .admin-header,
  .admin-panel-heading {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .admin-panel-heading p {
    text-align:
      left;
  }

  .admin-library-form {
    grid-template-columns:
      1fr;
  }

  .admin-library-path-field {
    grid-column:
      auto;
  }

  .admin-library-facts {
    flex-direction:
      column;

    gap:
      12px;
  }
}


/* =========================================================
   ENDCORE ADMIN — SERVER PATH BROWSER
   ========================================================= */

.admin-path-picker-field {
  display: flex;
  gap: 8px;
}

.admin-path-picker-field input {
  flex: 1 1 auto;
}

.admin-browse-button {
  flex: 0 0 auto;
  min-width: 92px;

  border:
    1px solid
    rgba(92, 163, 241, .24);

  border-radius: 11px;

  background:
    rgba(31, 75, 128, .18);

  color:
    rgba(231, 242, 255, .92);

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.admin-browse-button:hover {
  border-color:
    rgba(92, 174, 255, .50);

  background:
    rgba(33, 91, 158, .28);
}


.admin-path-browser-overlay {
  position: fixed;
  inset: 0;

  z-index: 300;

  display: grid;
  place-items: center;

  padding: 24px;

  background:
    rgba(0, 5, 13, .76);

  backdrop-filter:
    blur(12px);
}

.admin-path-browser-overlay[hidden] {
  display: none !important;
}


.admin-path-browser {
  width:
    min(760px, 94vw);

  max-height:
    min(720px, 88vh);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(91, 162, 239, .20);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 22, 43, .99),
      rgba(3, 11, 24, .99)
    );

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, .58);
}


.admin-path-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    21px 22px 17px;

  border-bottom:
    1px solid
    rgba(100, 158, 224, .12);
}

.admin-path-browser-header h2 {
  margin: 4px 0 0;
  font-size: 20px;
}


.admin-path-browser-close {
  width: 38px;
  height: 38px;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, .06);

  color: white;
  font-size: 24px;

  cursor: pointer;
}


.admin-path-toolbar {
  display: grid;

  grid-template-columns:
    auto auto 1fr;

  gap: 8px;

  align-items: center;

  padding: 13px 16px;

  border-bottom:
    1px solid
    rgba(100, 158, 224, .09);
}


.admin-path-toolbar button,
.admin-path-browser-footer > button:not(.admin-primary-button) {
  min-height: 35px;

  padding: 0 12px;

  border:
    1px solid
    rgba(92, 163, 241, .18);

  border-radius: 9px;

  background:
    rgba(25, 61, 105, .15);

  color:
    rgba(224, 238, 255, .84);

  font: inherit;
  font-size: 11px;

  cursor: pointer;
}

.admin-path-toolbar button:disabled {
  opacity: .35;
  cursor: default;
}


.admin-path-current {
  min-width: 0;

  padding-left: 6px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color:
    rgba(205, 225, 247, .66);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 11px;
}


.admin-path-directories {
  min-height: 280px;

  overflow-y: auto;

  padding: 10px;
}


.admin-path-directory {
  width: 100%;

  display: grid;

  grid-template-columns:
    28px 1fr auto;

  align-items: center;

  gap: 8px;

  min-height: 46px;

  padding: 0 12px;

  border: 0;
  border-radius: 10px;

  background:
    transparent;

  color:
    rgba(226, 239, 255, .88);

  font: inherit;
  font-size: 12px;

  text-align: left;

  cursor: pointer;
}

.admin-path-directory:hover {
  background:
    rgba(44, 100, 168, .18);
}


.admin-folder-icon {
  color:
    rgba(79, 169, 255, .82);

  font-size: 11px;
}


.admin-folder-arrow {
  color:
    rgba(191, 217, 245, .34);

  font-size: 19px;
}


.admin-path-loading,
.admin-path-empty,
.admin-path-error {
  padding: 26px;

  color:
    rgba(196, 216, 240, .52);

  text-align: center;
}

.admin-path-warning {
  margin: 8px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 183, 75, .25);
  border-radius: 9px;
  background: rgba(240, 183, 75, .07);
  color: rgba(255, 211, 133, .92);
  font-size: 12px;
  line-height: 1.45;
}

.admin-path-error {
  color:
    rgba(255, 150, 160, .90);
}


.admin-path-browser-footer {
  display: flex;

  justify-content: flex-end;

  gap: 9px;

  padding: 15px 17px;

  border-top:
    1px solid
    rgba(100, 158, 224, .10);
}



/* =========================================================
   ENDCORE WEB 1.0 — LIBRARY BROWSER
   ========================================================= */

.library-browser {
  min-height: 100vh;

  padding:
    72px
    clamp(26px, 4vw, 62px)
    70px;

  background:
    #040913;
}


.library-browser-header {
  max-width: 1180px;

  margin:
    0 auto
    28px;
}


.library-browser-header h1 {
  margin:
    6px 0
    7px;

  font-size:
    clamp(34px, 4vw, 54px);

  line-height: 1;
}


.library-browser-header p {
  margin: 0;

  color:
    rgba(196, 215, 239, .58);
}


.library-root-grid {
  max-width: 1180px;

  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(250px, 1fr)
    );

  gap: 14px;

  margin: 0 auto;
}


.library-root-card {
  display: grid;

  grid-template-columns:
    48px 1fr auto;

  align-items: center;

  gap: 14px;

  min-height: 104px;

  padding:
    16px 17px;

  border:
    1px solid
    rgba(92, 158, 232, .14);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 28, 52, .82),
      rgba(6, 16, 33, .92)
    );

  color: inherit;

  text-align: left;

  cursor: pointer;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.library-root-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(85, 172, 255, .34);

  background:
    linear-gradient(
      145deg,
      rgba(14, 38, 71, .90),
      rgba(7, 20, 41, .96)
    );
}


.library-root-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background:
    rgba(41, 105, 181, .18);

  color:
    rgba(96, 180, 255, .92);

  font-size: 21px;
}


.library-root-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.library-root-copy strong {
  color:
    #eef6ff;

  font-size: 16px;
}


.library-root-copy span {
  color:
    rgba(92, 178, 255, .72);

  font-size: 11px;
  font-weight: 700;
}


.library-root-copy small {
  overflow: hidden;

  color:
    rgba(189, 209, 234, .38);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.library-root-arrow {
  color:
    rgba(193, 218, 245, .30);

  font-size: 28px;
}


.library-rail-root {
  width: calc(100% - 18px);

  min-height: 34px;

  display: flex;

  align-items: center;

  gap: 9px;

  margin:
    0 0 1px
    18px;

  padding:
    0 12px;

  border: 0;
  border-radius: 9px;

  background:
    transparent;

  color:
    rgba(183, 207, 235, .52);

  font: inherit;

  font-size: 10px;

  text-align: left;

  cursor: pointer;
}


.library-rail-root:hover {
  background:
    rgba(41, 91, 151, .13);

  color:
    rgba(229, 241, 255, .90);
}


.library-back-button {
  max-width: 1180px;

  margin:
    0 auto
    25px;

  display: block;

  border: 0;

  background:
    transparent;

  color:
    rgba(102, 181, 255, .74);

  font: inherit;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


.library-entity-grid {
  max-width: 1180px;

  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(150px, 1fr)
    );

  gap:
    22px 14px;

  margin: 0 auto;
}


.library-entity-card {
  min-width: 0;

  padding: 0;

  border: 0;

  background:
    transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;
}


.library-entity-poster {
  position: relative;

  aspect-ratio:
    2 / 3;

  overflow: hidden;

  margin-bottom: 9px;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #0b203d,
      #07101f
    );
}


.library-entity-poster img {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.library-entity-poster span {
  position: absolute;

  inset: 0;

  display: grid;
  place-items: center;

  color:
    rgba(132, 183, 235, .18);

  font-size: 52px;
  font-weight: 800;
}


.library-entity-card strong,
.library-entity-card small {
  display: block;
}


.library-entity-card strong {
  overflow: hidden;

  color:
    rgba(236, 245, 255, .92);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.library-entity-card small {
  margin-top: 3px;

  color:
    rgba(183, 206, 232, .42);

  font-size: 9px;
}


.library-loading,
.library-empty {
  padding: 30px;

  color:
    rgba(194, 215, 239, .52);
}


/* =========================================================
   ENDCORE LIBRARY — TYPOGRAPHY + NEON ICON PASS
   ========================================================= */

@media (min-width: 981px) {

  .main-nav .nav-button {
    min-height: 46px !important;

    font-size: 13.5px !important;
    font-weight: 650 !important;

    letter-spacing: .005em;
  }

  .nav-section-label {
    margin-top: 24px;

    font-size: 10px;

    letter-spacing: .18em;
  }

  .library-rail-root {
    width: calc(100% - 14px);

    min-height: 40px;

    gap: 10px;

    margin-left: 14px;

    padding:
      0
      12px;

    color:
      rgba(203, 222, 244, .68);

    font-size: 12px;
    font-weight: 560;
  }

  .library-rail-root:hover {
    color:
      rgba(238, 248, 255, .98);

    background:
      linear-gradient(
        90deg,
        rgba(37, 103, 182, .18),
        rgba(27, 71, 128, .06)
      );
  }

  .library-rail-root > span:first-child {
    width: 23px;
    height: 23px;

    display: grid;
    place-items: center;

    flex: 0 0 23px;

    color:
      #5cbdff;
  }
}


.library-root-card {
  min-height: 118px;

  padding:
    18px 19px;

  grid-template-columns:
    58px 1fr auto;

  gap: 16px;
}


.library-root-icon {
  width: 56px;
  height: 56px;

  border:
    1px solid
    rgba(74, 175, 255, .22);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(62, 155, 255, .20),
      rgba(23, 72, 137, .11) 55%,
      rgba(8, 25, 52, .18)
    );

  color:
    #58baff;

  box-shadow:
    inset
    0 0 18px
    rgba(45, 145, 255, .10),

    0 0 24px
    rgba(39, 143, 255, .10);
}


.library-neon-icon {
  width: 26px;
  height: 26px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.65;

  stroke-linecap: round;
  stroke-linejoin: round;

  filter:
    drop-shadow(
      0 0 4px
      rgba(61, 181, 255, .72)
    )
    drop-shadow(
      0 0 10px
      rgba(38, 123, 255, .32)
    );
}


.library-rail-root
.library-neon-icon {
  width: 17px;
  height: 17px;

  stroke-width: 1.8;
}


.library-root-copy strong {
  font-size: 18px;
  font-weight: 720;
}


.library-root-copy span {
  margin-top: 1px;

  font-size: 12px;
  font-weight: 700;
}


.library-root-copy small {
  margin-top: 3px;

  font-size: 10.5px;

  color:
    rgba(191, 215, 243, .48);
}


.library-root-arrow {
  color:
    rgba(82, 184, 255, .58);

  text-shadow:
    0 0 10px
    rgba(53, 172, 255, .45);
}



/* =========================================================
   ENDCORE 1.7 A6.1 — EMBY PROVIDER THEME
   Same EndCore room. Different alien.
   ========================================================= */

body[data-provider="emby"] {
  --bg:
    #120604;

  --bg-soft:
    #1b0a06;

  --surface:
    rgba(35, 13, 8, .80);

  --surface-strong:
    #241009;

  --line:
    rgba(255, 169, 72, .16);

  --line-strong:
    rgba(255, 177, 72, .30);

  --blue:
    #f28a2e;

  --blue-bright:
    #ffc05a;

  --blue-soft:
    rgba(242, 108, 46, .17);

  --endcore-page-bg:
    #120604;

  background:
    radial-gradient(
      circle at 78% 8%,
      rgba(226, 63, 31, .20),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 84%,
      rgba(255, 166, 42, .09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #090302 0%,
      #130704 44%,
      #1b0b05 100%
    );
}


body[data-provider="emby"]
.ambient-one {
  background:
    #dc3e1f;

  opacity:
    .20;
}


body[data-provider="emby"]
.ambient-two {
  background:
    #d78219;

  opacity:
    .15;
}


body[data-provider="emby"]
button:focus-visible,
body[data-provider="emby"]
input:focus-visible,
body[data-provider="emby"]
select:focus-visible {
  box-shadow:
    0 0 0 3px
    rgba(255, 166, 56, .28);
}


body[data-provider="emby"]
.section-kicker {
  color:
    #f6a33c;
}


body[data-provider="emby"]
.nav-button.active {
  color:
    #ffd08a;
}


body[data-provider="emby"]
.media-section-heading h2 {
  text-shadow:
    0 0 28px
    rgba(238, 91, 32, .08);
}


body[data-provider="emby"]
.home-hero {
  box-shadow:
    inset 0 0 100px
    rgba(92, 23, 8, .10);
}




/* =========================================================
   ENDCORE 1.7 A6.1.1 — EMBY SHELL THEME
   The alien is now actually visible.
   ========================================================= */


/* ---------------------------------------------------------
   MAIN APPLICATION SURFACE
   --------------------------------------------------------- */

body[data-provider="emby"]
.app-view {
  background:
    linear-gradient(
      145deg,
      #090302 0%,
      #120604 42%,
      #1a0904 100%
    ) !important;
}


body[data-provider="emby"]
.view-root {
  background:
    radial-gradient(
      circle at 78% 4%,
      rgba(220, 55, 25, .12),
      transparent 33%
    ),
    radial-gradient(
      circle at 28% 82%,
      rgba(255, 157, 39, .055),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #0a0302 0%,
      #120604 48%,
      #170804 100%
    ) !important;
}


/* ---------------------------------------------------------
   DESKTOP LEFT RAIL
   --------------------------------------------------------- */

@media (min-width: 981px) {

  body[data-provider="emby"]
  .topbar::before {
    background:
      radial-gradient(
        circle at 35% 8%,
        rgba(236, 68, 27, .16),
        transparent 32%
      ),
      linear-gradient(
        180deg,
        #160703 0%,
        #100503 48%,
        #0b0302 100%
      ) !important;

    border-right:
      1px solid
      rgba(255, 149, 57, .16)
      !important;

    box-shadow:
      18px 0 60px
      rgba(63, 14, 4, .18)
      !important;
  }
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

body[data-provider="emby"]
.nav-button {
  color:
    rgba(222, 196, 175, .72);
}


body[data-provider="emby"]
.nav-button:hover {
  color:
    #ffd6a0 !important;

  background:
    rgba(210, 67, 24, .08)
    !important;
}


body[data-provider="emby"]
.nav-button.active {
  color:
    #ffd391
    !important;

  background:
    linear-gradient(
      90deg,
      rgba(217, 61, 24, .18),
      rgba(255, 164, 48, .08)
    )
    !important;

  box-shadow:
    inset 0 0 28px
    rgba(226, 75, 26, .055)
    !important;
}


body[data-provider="emby"]
.nav-button.active::before {
  background:
    linear-gradient(
      180deg,
      #f05628,
      #ffb746
    )
    !important;

  box-shadow:
    0 0 15px
    rgba(255, 112, 38, .45)
    !important;
}


/* ---------------------------------------------------------
   BRAND / PROVIDER ACCENTS
   --------------------------------------------------------- */

body[data-provider="emby"]
.brand-subname {
  color:
    #f4a441
    !important;
}


body[data-provider="emby"]
.section-kicker {
  color:
    #f3a13d
    !important;
}


body[data-provider="emby"]
.home-hero {
  border-color:
    rgba(255, 145, 54, .13)
    !important;

  box-shadow:
    inset 0 0 120px
    rgba(91, 19, 5, .16),
    0 24px 80px
    rgba(25, 4, 1, .26)
    !important;
}


/* ---------------------------------------------------------
   SERVER SWITCHER
   --------------------------------------------------------- */

body[data-provider="emby"]
.sidebar-server-switcher {
  border-color:
    rgba(255, 151, 57, .12)
    !important;
}


body[data-provider="emby"]
.sidebar-server-list {
  border-color:
    rgba(255, 151, 57, .14)
    !important;

  background:
    rgba(28, 8, 4, .94)
    !important;
}


/* ---------------------------------------------------------
   SCROLLBAR — SMALL BUT DELIBERATE DETAIL
   --------------------------------------------------------- */

body[data-provider="emby"]
::-webkit-scrollbar-thumb {
  background:
    rgba(226, 92, 34, .34);
}


body[data-provider="emby"]
::-webkit-scrollbar-thumb:hover {
  background:
    rgba(244, 139, 45, .48);
}




/* =========================================================
   ENDCORE_LIBRARY_ROOT_PREVIEWS_STYLE
   ========================================================= */

.library-root-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(330px, 1fr)
    );

  gap: 18px;
}


.library-root-card {
  min-height: 174px;

  grid-template-columns:
    94px
    minmax(0, 1fr)
    auto;

  gap: 20px;

  padding:
    18px
    20px;
}


.library-root-preview {
  position: relative;

  width: 94px;
  height: 140px;

  overflow: hidden;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(88, 174, 255, .22);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 49, 91, .72),
      rgba(4, 14, 29, .95)
    );

  box-shadow:
    0 15px 35px
    rgba(0, 0, 0, .28);
}


.library-root-preview
.library-root-icon {
  width: 100%;
  height: 100%;

  border: 0;
  border-radius: 0;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(62, 155, 255, .18),
      rgba(10, 28, 55, .20)
    );

  box-shadow: none;
}


.library-root-preview img {
  position: absolute;
  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background:
    #02060b;
}


.library-root-preview.has-preview::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 3;

  pointer-events: none;

  box-shadow:
    inset
    0 0 0 1px
    rgba(255,255,255,.035);
}


.library-root-card:hover
.library-root-preview {
  border-color:
    rgba(87, 183, 255, .48);

  box-shadow:
    0 18px 40px
    rgba(0, 0, 0, .34),

    0 0 26px
    rgba(42, 144, 255, .10);
}


.library-root-copy strong {
  font-size: 21px;
}


.library-root-copy span {
  font-size: 12px;
}


@media (max-width: 760px) {

  .library-root-grid {
    grid-template-columns:
      1fr;
  }


  .library-root-card {
    grid-template-columns:
      78px
      minmax(0, 1fr)
      auto;

    min-height: 142px;

    gap: 15px;

    padding:
      14px;
  }


  .library-root-preview {
    width: 78px;
    height: 116px;
  }
}


/* =========================================================
   ENDCORE ADMIN — MULTIPATH LIBRARIES
   ========================================================= */

.admin-library-paths {
  margin-top: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
}

.admin-library-paths-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.admin-library-paths-heading > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.62;
}

.admin-add-path-button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.8;
}

.admin-add-path-button:hover {
  opacity: 1;
}

.admin-library-path-list {
  display: grid;
  gap: 7px;
}

.admin-library-path-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-library-path-row.missing {
  opacity: 0.55;
}

.admin-library-path-state {
  flex: 0 0 auto;
  font-weight: 700;
}

.admin-library-path-value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.admin-library-path-primary {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

.admin-remove-path-button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.62;
}

.admin-remove-path-button:hover {
  opacity: 1;
  text-decoration: underline;
}

.admin-remove-path-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.admin-make-primary-button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.72;
}

.admin-make-primary-button:hover {
  opacity: 1;
  text-decoration: underline;
}

.admin-make-primary-button:disabled {
  cursor: default;
  opacity: 0.35;
}


.admin-edit-path-button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.72;
}

.admin-edit-path-button:hover {
  opacity: 1;
  text-decoration: underline;
}

.admin-library-actions .admin-danger-button {
  margin-left: auto;
  border-color: rgba(255, 119, 133, .34);
  background: rgba(126, 32, 44, .18);
  color: rgba(255, 207, 214, .92);
}

.admin-library-actions .admin-danger-button:hover {
  border-color: rgba(255, 119, 133, .64);
  background: rgba(150, 38, 52, .28);
}

/*
 * ENDCORE UPDATE MANAGER V1
 * Check-only administrative update surface.
 */

.admin-updates-view {
  color: #eef6ff;
}

.admin-updates-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto 30px;
}

.admin-updates-header h1 {
  margin: 7px 0 8px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}

.admin-updates-header p {
  max-width: 680px;
  margin: 0;
  color: rgba(203, 220, 241, .62);
  line-height: 1.6;
}

.admin-update-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(151, 179, 218, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: rgba(220, 233, 249, .72);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-update-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}

.admin-update-state.is-update {
  color: #79d9ff;
  border-color: rgba(72, 190, 255, .28);
  background: rgba(31, 140, 204, .10);
}

.admin-update-state.is-current {
  color: #78e4ad;
  border-color: rgba(78, 211, 145, .24);
  background: rgba(40, 159, 100, .08);
}

.admin-update-state.is-error {
  color: #ff9b9b;
  border-color: rgba(255, 101, 101, .25);
  background: rgba(184, 53, 53, .09);
}

.admin-updates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto 18px;
}

.admin-update-card,
.admin-update-release-panel,
.admin-update-details {
  border: 1px solid rgba(144, 174, 213, .13);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(14, 29, 49, .88),
      rgba(6, 14, 27, .96)
    );
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .16);
}

.admin-update-card {
  padding: 24px;
}

.admin-update-card.is-available {
  border-color: rgba(64, 187, 255, .30);
}

.admin-update-card-label {
  margin-bottom: 12px;
  color: rgba(153, 183, 222, .60);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.admin-update-version {
  display: block;
  margin-bottom: 22px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.035em;
}

.admin-update-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid rgba(142, 171, 207, .09);
  color: rgba(202, 220, 242, .64);
  font-size: 13px;
}

.admin-update-meta strong {
  color: rgba(235, 244, 255, .90);
  text-align: right;
}

.admin-update-release-panel {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 24px;
  border-color: rgba(70, 190, 255, .28);
}

.admin-update-release-panel h2 {
  margin: 0;
  font-size: clamp(25px, 3vw, 38px);
}

.admin-update-release-panel h2 span {
  padding: 0 9px;
  color: rgba(116, 208, 255, .72);
}

.admin-update-release-notes {
  max-width: 800px;
  margin: 18px 0 0;
  color: rgba(207, 223, 243, .72);
  line-height: 1.65;
}

.admin-update-details {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 10px 24px;
}

.admin-update-details > div {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(142, 171, 207, .08);
}

.admin-update-details > div:last-child {
  border-bottom: 0;
}

.admin-update-details span {
  color: rgba(192, 211, 236, .55);
}

.admin-update-details strong,
.admin-update-details code {
  overflow-wrap: anywhere;
  color: rgba(237, 245, 255, .88);
}

.admin-update-details code {
  font-size: 12px;
}

.admin-update-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 22px auto 0;
}

.admin-update-primary {
  min-height: 44px;
  padding: 0 21px;
  border: 1px solid rgba(83, 197, 255, .35);
  border-radius: 12px;
  background: rgba(44, 160, 220, .18);
  color: #eefaff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.admin-update-primary:hover:not(:disabled) {
  background: rgba(44, 160, 220, .27);
}

.admin-update-primary:disabled {
  opacity: .55;
  cursor: wait;
}

.admin-update-safety-note {
  color: rgba(189, 207, 230, .48);
  font-size: 12px;
}

.admin-update-message {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid rgba(80, 195, 255, .20);
  border-radius: 12px;
  background: rgba(50, 150, 205, .08);
  color: rgba(220, 240, 255, .88);
}

.admin-update-message.error {
  border-color: rgba(255, 100, 100, .24);
  background: rgba(180, 50, 50, .08);
  color: #ffb4b4;
}

.admin-update-loading {
  max-width: 1180px;
  margin: 0 auto;
  color: rgba(203, 220, 241, .65);
}

@media (max-width: 760px) {
  .admin-updates-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-updates-grid {
    grid-template-columns: 1fr;
  }

  .admin-update-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-update-details > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}


/* EndCore Update Agent */

.admin-update-agent-card {
  margin-top: 22px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );
}

.admin-update-agent-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.admin-update-agent-heading h3 {
  margin: 4px 0 0;
  font-size: 22px;
}

.admin-update-agent-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.58;
}

.admin-update-agent-badge {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.admin-update-agent-badge.connected {
  background: rgba(80, 220, 140, 0.12);
}

.admin-update-agent-badge.disconnected {
  background: rgba(255, 100, 100, 0.12);
}

.admin-update-agent-grid,
.admin-update-agent-capabilities {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-update-agent-grid > div,
.admin-update-agent-capabilities > div {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-update-agent-grid span,
.admin-update-agent-capabilities span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  opacity: 0.55;
}

.admin-update-agent-grid strong,
.admin-update-agent-capabilities strong {
  font-size: 14px;
  font-weight: 650;
}

.admin-update-agent-capabilities {
  margin-top: 12px;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
}

.admin-update-agent-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 80, 80, 0.1);
}

@media (max-width: 900px) {
  .admin-update-agent-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .admin-update-agent-capabilities {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


.admin-update-agent-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.admin-update-agent-actions button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
}

.admin-update-agent-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.admin-update-agent-actions span {
  font-size: 12px;
  opacity: 0.55;
}

.admin-update-agent-action-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(90, 170, 255, 0.10);
}

.admin-update-agent-action-status.success {
  background: rgba(80, 220, 140, 0.10);
}


/* ==========================================================
   ENDCORE GLOBAL SEARCH V1
   ========================================================== */

.global-search-view {
  padding: 42px 56px 70px;
}

.global-search-header {
  max-width: 1100px;
}

.global-search-header h1 {
  margin: 8px 0 8px;
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.global-search-header > p {
  margin: 0 0 24px;
  opacity: 0.72;
}

.global-search-form {
  display: flex;
  gap: 12px;
  max-width: 900px;
}

.global-search-input {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.055);
  color: inherit;
  font: inherit;
  outline: none;
}

.global-search-input:focus {
  border-color: rgba(65,180,255,0.75);
}

.global-search-submit {
  min-width: 110px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.global-search-status {
  margin-top: 12px;
  opacity: 0.56;
  font-size: 0.9rem;
}

.global-search-warnings {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.global-search-warnings span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,170,50,0.10);
  border: 1px solid rgba(255,170,50,0.20);
}

.global-search-results {
  margin-top: 34px;
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(175px, 1fr));
  gap: 22px;
}

.global-search-result {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.global-search-result-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition:
    transform 140ms ease,
    border-color 140ms ease;
}

.global-search-result:hover
.global-search-result-poster,
.global-search-result:focus-visible
.global-search-result-poster {
  transform: translateY(-3px);
  border-color: rgba(90,190,255,0.5);
}

.global-search-result-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.global-search-result-poster > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 800;
  opacity: 0.18;
}

.global-search-result-copy {
  padding: 10px 2px 0;
}

.global-search-result-copy strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.global-search-result-copy small {
  display: block;
  margin-top: 4px;
  opacity: 0.55;
}

.global-search-server {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
}

.global-search-server b {
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

.global-search-server span {
  opacity: 0.76;
}

.global-search-empty {
  grid-column: 1 / -1;
  padding: 50px 20px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  text-align: center;
  opacity: 0.6;
}

@media (max-width: 720px) {

  .global-search-view {
    padding:
      26px 18px 55px;
  }

  .global-search-form {
    flex-direction: column;
  }

  .global-search-submit {
    min-height: 48px;
  }

  .global-search-results {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}


/* ==========================================================
   ENDCORE GLOBAL SEARCH ORGANIZE V2
   ========================================================== */

.global-search-section-title {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 8px 0 0;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.72;
}

.global-search-section-title:not(:first-child) {
  margin-top: 28px;
}


/* ==========================================================
   ENDCORE CONTINUE WATCHING LANDSCAPE V1
   ========================================================== */

/*
 * Only Continue Watching changes shape.
 *
 * Every other Home row keeps the existing poster layout.
 */
.media-card-landscape {
  width: auto;
}

.media-card-landscape .media-poster {
  aspect-ratio: 16 / 9;
}

.media-card-landscape .media-poster img {
  object-fit: cover;
}


/*
 * Landscape cards need more horizontal breathing room
 * than standard poster cards.
 */
.media-row:has(.media-card-landscape) {
  grid-auto-columns:
    clamp(260px, 22vw, 360px);

  gap: 16px;
}


/*
 * Keep progress visually attached to playback artwork.
 */
.media-card-landscape .progress-track {
  left: 10px;
  right: 10px;
  bottom: 9px;

  height: 4px;
}


/*
 * Continue Watching copy remains compact.
 */
.media-card-landscape
.media-card-copy {
  padding-top: 9px;
}


/* Responsive */
@media (max-width: 820px) {

  .media-row:has(.media-card-landscape) {
    grid-auto-columns:
      minmax(245px, 78vw);
  }
}


@media (min-width: 1600px) {

  .media-row:has(.media-card-landscape) {
    grid-auto-columns:
      clamp(300px, 20vw, 390px);
  }
}

/* =========================================================
   ENDCORE_LIBRARY_ORGANIZE_V1
   Libraries -> Movie / Series / Mixed only
   ========================================================= */

.library-organize {
  width: 100%;
  max-width: 1180px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin:
    -6px auto
    24px;

  padding:
    11px
    12px
    11px
    16px;

  border:
    1px solid
    rgba(92, 158, 232, .13);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(11, 28, 52, .60),
      rgba(6, 16, 33, .72)
    );

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, .14);

  backdrop-filter:
    blur(16px);
}


.library-organize-label {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.library-organize-label span {
  color:
    rgba(236, 246, 255, .92);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.library-organize-label small {
  color:
    rgba(181, 207, 236, .40);

  font-size:
    9px;
}


.library-organize-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 6px;
}


.library-organize-button {
  min-height: 30px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 5px;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(100, 164, 230, .10);

  border-radius:
    999px;

  background:
    rgba(29, 70, 116, .10);

  color:
    rgba(190, 214, 240, .58);

  font: inherit;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}


.library-organize-button:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(82, 170, 255, .28);

  background:
    rgba(34, 91, 151, .22);

  color:
    rgba(232, 244, 255, .92);
}


.library-organize-button.is-active {
  border-color:
    rgba(55, 162, 255, .42);

  background:
    linear-gradient(
      135deg,
      rgba(31, 115, 210, .38),
      rgba(21, 78, 148, .26)
    );

  color:
    #edf7ff;

  box-shadow:
    0 0 18px
    rgba(43, 139, 238, .12);
}


.library-organize-button
[data-sort-direction] {
  min-width: 9px;

  color:
    rgba(98, 191, 255, .95);

  font-size:
    11px;
}


@media (max-width: 760px) {

  .library-organize {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .library-organize-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }
}


/* =========================================================
   ENDCORE_LIBRARY_ORGANIZE_V2
   Simple segmented sort control
   ========================================================= */

.library-organize {
  display:
    grid;

  gap:
    14px;

  padding:
    20px;

  border:
    1px solid
    rgba(
      104,
      145,
      211,
      0.14
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      rgba(
        9,
        24,
        47,
        0.82
      ),
      rgba(
        5,
        15,
        30,
        0.90
      )
    );

  box-shadow:
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.035
      );
}


.library-organize-label {
  display:
    grid;

  gap:
    3px;
}


.library-organize-label
span {
  color:
    rgba(
      128,
      178,
      255,
      0.92
    );

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


.library-organize-label
small {
  color:
    rgba(
      190,
      204,
      224,
      0.53
    );

  font-size:
    14px;

  font-weight:
    500;
}


.library-organize-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.library-organize-button {
  position:
    relative;

  min-height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(
      128,
      154,
      198,
      0.13
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  color:
    rgba(
      190,
      202,
      220,
      0.68
    );

  font-size:
    14px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}


.library-organize-button:hover {
  color:
    rgba(
      241,
      246,
      255,
      0.94
    );

  border-color:
    rgba(
      103,
      159,
      255,
      0.28
    );

  background:
    rgba(
      53,
      100,
      180,
      0.10
    );
}


.library-organize-button:active {
  transform:
    scale(0.97);
}


.library-organize-button.is-active {
  border-color:
    rgba(
      64,
      153,
      255,
      0.52
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        29,
        105,
        207,
        0.72
      ),
      rgba(
        15,
        67,
        151,
        0.82
      )
    );

  color:
    #ffffff;

  box-shadow:
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.13
      ),
    0 7px 20px
      rgba(
        5,
        42,
        104,
        0.20
      );
}


.library-organize-button:focus-visible {
  outline:
    none;

  box-shadow:
    0 0 0 3px
      rgba(
        62,
        139,
        255,
        0.19
      );
}


.library-organize-button
[data-sort-direction] {
  width:
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    rgba(
      215,
      234,
      255,
      0.96
    );

  font-size:
    13px;

  font-weight:
    900;
}


.library-organize-button:not(.is-active)
[data-sort-direction] {
  opacity:
    0;
}


/* =========================================================
   ENDCORE_LIBRARY_SORT_COMPACT_V3
   ========================================================= */


/*
 * Reduce Organize from a large card into a compact toolbar.
 */
.library-organize {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    16px !important;

  min-height:
    66px !important;

  padding:
    11px 14px 11px 16px !important;

  border-radius:
    17px !important;
}


.library-organize-label {
  flex:
    1 1 auto;

  min-width:
    0;

  gap:
    1px !important;
}


.library-organize-label span {
  font-size:
    10px !important;

  letter-spacing:
    0.14em !important;
}


.library-organize-label small {
  font-size:
    12px !important;

  line-height:
    1.2 !important;
}


/*
 * Original buttons stay alive as EndCore's controller but
 * no longer consume visible space.
 */
.library-organize-actions {
  display:
    none !important;
}


/* ---------------------------------------------------------
   COMPACT CONTROL
   --------------------------------------------------------- */

.library-sort-compact {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.library-sort-select-shell {
  position:
    relative;

  min-width:
    168px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  border:
    1px solid
    rgba(
      122,
      153,
      204,
      0.18
    );

  border-radius:
    13px;

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}


.library-sort-select-shell:hover {
  border-color:
    rgba(
      90,
      157,
      255,
      0.34
    );

  background:
    rgba(
      60,
      108,
      186,
      0.08
    );
}


.library-sort-select-shell:focus-within {
  border-color:
    rgba(
      77,
      154,
      255,
      0.50
    );

  box-shadow:
    0 0 0 3px
    rgba(
      62,
      138,
      255,
      0.12
    );
}


.library-sort-select-icon {
  position:
    absolute;

  left:
    12px;

  pointer-events:
    none;

  color:
    rgba(
      115,
      178,
      255,
      0.85
    );

  font-size:
    14px;

  font-weight:
    800;
}


.library-sort-select {
  width:
    100%;

  height:
    100%;

  appearance:
    none;

  -webkit-appearance:
    none;

  padding:
    0 34px 0 34px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    rgba(
      238,
      244,
      253,
      0.94
    );

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    700;

  cursor:
    pointer;
}


.library-sort-select option {
  background:
    #091525;

  color:
    #eef4fc;
}


.library-sort-select-chevron {
  position:
    absolute;

  right:
    11px;

  pointer-events:
    none;

  color:
    rgba(
      188,
      204,
      225,
      0.55
    );

  font-size:
    11px;
}


.library-sort-direction {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      89,
      157,
      255,
      0.32
    );

  border-radius:
    13px;

  background:
    linear-gradient(
      180deg,
      rgba(
        31,
        105,
        205,
        0.58
      ),
      rgba(
        18,
        65,
        143,
        0.68
      )
    );

  color:
    #ffffff;

  font-size:
    18px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}


.library-sort-direction:hover {
  border-color:
    rgba(
      112,
      177,
      255,
      0.58
    );
}


.library-sort-direction:active {
  transform:
    scale(0.94);
}


/* =========================================================
   ENDCORE_MIXED_LANDSCAPE_LIBRARY_STYLE_V1
   ========================================================= */

.library-entity-grid.library-entity-grid-mixed {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(260px, 1fr)
    );

  gap:
    24px 18px;
}


.library-entity-grid-mixed
.library-entity-poster {
  aspect-ratio:
    16 / 9;
}


.library-entity-grid-mixed
.library-entity-card strong {
  font-size:
    13px;
}


@media (max-width: 700px) {

  .library-entity-grid.library-entity-grid-mixed {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(210px, 1fr)
      );
  }
}