@font-face {
        font-family: "Material Symbols Rounded";
        font-style: normal;
        font-weight: 400;
        font-display: block;
        src: url("public/material-symbols-rounded.ttf") format("truetype");
      }

      :root {
        color-scheme: dark;
        --bg: #0f1218;
        --bg-soft: #171b24;
        --surface: rgba(28, 33, 44, 0.88);
        --surface-strong: #222838;
        --line: rgba(255, 255, 255, 0.1);
        --text: #f4f7fb;
        --muted: #aab4c2;
        --primary: #00a4dc;
        --primary-strong: #00b8f5;
        --danger: #ff6b7a;
        --card-gap: 16px;
        --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
        --bs-body-bg: #0f1218;
        --bs-body-color: var(--text);
        --bs-primary: var(--primary);
        --bs-primary-rgb: 0, 164, 220;
        --bs-border-color: var(--line);
        --bs-tertiary-bg: rgba(28, 33, 44, 0.88);
        --bs-dark-rgb: 18, 23, 34;
        --bs-link-color: var(--primary-strong);
        --bs-link-hover-color: #5ed8ff;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body,
      #app {
        min-height: 100%;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        margin: 0;
        min-height: 100vh;
        overflow-x: hidden;
        background:
          radial-gradient(circle at 18% 0%, rgba(0, 164, 220, 0.22), transparent 32rem),
          radial-gradient(circle at 84% 8%, rgba(122, 78, 255, 0.16), transparent 28rem),
          linear-gradient(180deg, #121722 0%, #0f1218 42%, #090b10 100%);
        color: var(--text);
        font-family:
          Roboto, Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
          sans-serif;
      }

      body.player-open {
        overflow: hidden;
      }

      body.player-open .topbar {
        display: none !important;
      }

      button,
      input {
        font: inherit;
      }

      button {
        cursor: pointer;
      }

      .btn-primary {
        --bs-btn-bg: var(--primary);
        --bs-btn-border-color: var(--primary);
        --bs-btn-hover-bg: var(--primary-strong);
        --bs-btn-hover-border-color: var(--primary-strong);
        --bs-btn-active-bg: #0093c7;
        --bs-btn-active-border-color: #0093c7;
        box-shadow: 0 8px 22px rgba(0, 164, 220, 0.28);
      }

      .btn-outline-light {
        --bs-btn-color: rgba(244, 247, 251, 0.9);
        --bs-btn-border-color: rgba(255, 255, 255, 0.18);
        --bs-btn-hover-color: var(--text);
        --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
        --bs-btn-hover-border-color: rgba(255, 255, 255, 0.28);
        --bs-btn-active-bg: rgba(255, 255, 255, 0.16);
        --bs-btn-active-border-color: rgba(255, 255, 255, 0.32);
      }

      .btn-outline-danger {
        --bs-btn-color: #ffd7dc;
        --bs-btn-border-color: rgba(255, 107, 122, 0.34);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: rgba(255, 107, 122, 0.2);
        --bs-btn-hover-border-color: rgba(255, 107, 122, 0.52);
      }

      .form-control,
      .form-select {
        color: var(--text);
        background-color: rgba(7, 10, 16, 0.56);
        border-color: rgba(255, 255, 255, 0.13);
      }

      .form-control:focus,
      .form-select:focus {
        color: var(--text);
        background-color: rgba(7, 10, 16, 0.68);
        border-color: var(--primary);
        box-shadow: 0 0 0 0.2rem rgba(0, 164, 220, 0.18);
      }

      .material-symbols-rounded {
        font-family: "Material Symbols Rounded";
        font-weight: 400;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 1em;
        height: 1em;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        vertical-align: middle;
        font-feature-settings: "liga";
        -webkit-font-feature-settings: "liga";
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
      }

      button .material-symbols-rounded,
      .btn .material-symbols-rounded,
      .input-group-text.material-symbols-rounded {
        pointer-events: none;
      }

      @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .splashBackground {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        background: linear-gradient(280deg, #111827, #1c2741, #332d41, #4a2532, #244415);
        background-size: 400% 400%;
        animation: gradient 2s linear infinite;
        z-index: 9999;
      }

      .splashStack {
        display: grid;
        justify-items: center;
        gap: 28px;
        width: min(320px, 62vw);
      }

      .splashLogo {
        width: min(30vw, 210px);
        height: min(30vw, 210px);
        background-image: url(public/icon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        filter: drop-shadow(0 16px 42px rgba(0, 0, 0, 0.45));
      }

      .splashProgress {
        width: min(240px, 100%);
        height: 3px;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
      }

      .splashProgressBar {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.32);
        transform: scaleX(0.06);
        transform-origin: left center;
        transition: transform 0.28s ease;
      }

      .loadFinished {
        opacity: 0;
        transition: opacity 0.65s linear;
        pointer-events: none;
      }

      [v-cloak] {
        display: none;
      }

      .min-w-0 {
        min-width: 0;
      }

      .app-shell {
        min-height: 100vh;
        max-width: 100vw;
        overflow-x: hidden;
      }

      .topbar {
        z-index: 1000;
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        height: 64px;
        gap: 18px;
        padding: 0 clamp(18px, 4vw, 56px);
        overflow: visible;
        background: rgba(12, 15, 22, 0.74);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(18px);
      }

      .brand {
        flex: 0 0 auto;
        min-width: 0;
        margin-right: 0;
        background: transparent;
        letter-spacing: 0;
      }

      .brand img {
        width: 34px;
        height: 34px;
      }

      .topbar-icon-btn {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        color: rgba(244, 247, 251, 0.82);
        background: transparent;
        display: inline-grid;
        place-items: center;
      }

      .topbar-icon-btn:hover {
        color: var(--text);
        background: rgba(255, 255, 255, 0.08);
      }

      .search-box {
        align-items: center;
        width: 100%;
        min-width: 0;
        height: 40px;
        min-height: 40px;
        overflow: visible;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.06);
      }

      .search-wrap {
        position: relative;
        flex: 1 1 auto;
        width: min(520px, 46vw);
        min-width: 0;
      }

      .search-box:focus-within {
        border-color: rgba(0, 164, 220, 0.68);
        background: rgba(255, 255, 255, 0.09);
      }

      .search-box input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        color: var(--text);
        background: transparent;
      }

      .search-box .input-group-text,
      .search-box .form-control,
      .search-box .form-select {
        border: 0;
        color: var(--text);
        background: transparent;
        box-shadow: none;
      }

      .search-box .input-group-text {
        align-self: stretch;
        flex: 0 0 40px;
        width: 40px;
        height: auto;
        min-width: 40px;
        padding: 0;
        color: var(--muted);
        font-size: 21px;
        line-height: 1;
      }

      .search-box .form-control {
        height: 100%;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 40px;
      }

      .search-box input::placeholder {
        color: var(--muted);
      }

      .search-filter-menu {
        position: relative;
        align-self: center;
        flex: 0 0 auto;
        margin-right: 5px;
      }

      .search-filter-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: 170px;
        height: 28px;
        min-height: 28px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 0 8px;
        outline: 0;
        color: rgba(244, 247, 251, 0.88);
        background: rgba(7, 10, 16, 0.42);
        font-size: 12px;
        line-height: 1;
      }

      .search-filter-button:hover,
      .search-filter-button.active {
        border-color: rgba(0, 164, 220, 0.68);
        background: rgba(0, 164, 220, 0.14);
      }

      .search-filter-button .material-symbols-rounded {
        font-size: 18px;
      }

      .search-filter-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .search-filter-chevron {
        opacity: 0.72;
      }

      .search-filter-popover {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 110;
        width: 230px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px;
        background: #171d29;
        box-shadow: var(--shadow);
      }

      .search-filter-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 0;
        border-radius: 7px;
        padding: 9px 10px;
        color: rgba(244, 247, 251, 0.84);
        background: transparent;
        text-align: left;
        font-size: 14px;
      }

      .search-filter-option .material-symbols-rounded {
        color: var(--muted);
        font-size: 19px;
      }

      .search-filter-option:hover,
      .search-filter-option.active {
        color: var(--text);
        background: rgba(255, 255, 255, 0.08);
      }

      .search-filter-option.active .material-symbols-rounded {
        color: var(--primary-strong);
      }

      .search-results {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 95;
        width: min(460px, 82vw);
        max-height: min(560px, calc(100vh - 96px));
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px;
        background: #171d29;
        box-shadow: var(--shadow);
      }

      .search-result {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        width: 100%;
        border: 0;
        border-radius: 7px;
        padding: 8px;
        color: var(--text);
        text-align: left;
        background: transparent;
      }

      .search-result:hover {
        background: rgba(255, 255, 255, 0.08);
      }

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

      .search-result small {
        color: var(--muted);
        margin-top: 4px;
      }

      .search-thumb {
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 6px;
        background: var(--surface-strong);
      }

      .search-thumb img,
      .search-thumb .poster-placeholder {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .search-empty {
        padding: 14px;
        color: var(--muted);
        text-align: center;
      }

      .avatar {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: white;
        background: linear-gradient(135deg, #00a4dc, #7c4dff);
        font-weight: 700;
      }

      .user-menu {
        position: relative;
        flex: 0 0 auto;
      }

      .user-popover {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        z-index: 1100;
        min-width: 220px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 0;
        background: #171d29;
        box-shadow: var(--shadow);
      }

      .user-popover strong {
        display: block;
        margin: 4px 0 14px;
      }

      .screen {
        min-height: calc(100vh - 64px);
        padding: clamp(28px, 5vw, 58px);
      }

      .center-screen {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 28px;
        max-width: 100%;
        overflow-x: hidden;
      }

      .auth-panel {
        width: min(520px, calc(100vw - 32px));
        max-width: 520px;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--text);
        background: rgba(23, 29, 41, 0.92);
      }

      .auth-panel .card,
      .auth-panel .card-body,
      .auth-panel form {
        min-width: 0;
        max-width: 100%;
      }

      .auth-panel h3,
      .auth-panel p {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .auth-title {
        margin: 0 0 26px;
        text-align: center;
        font-size: clamp(28px, 5vw, 36px);
        line-height: 1.16;
        font-weight: 500;
      }

      .server-card {
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .server-card:hover {
        border-color: rgba(0, 164, 220, 0.65);
        background: rgba(34, 42, 58, 0.95);
      }

      .server-icon {
        width: 48px;
        height: 48px;
        background: #101621;
      }

      .server-icon img {
        width: 34px;
        height: 34px;
      }

      .server-meta {
        min-width: 0;
      }

      .server-url,
      .helper {
        color: var(--muted);
        font-size: 14px;
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .user-card {
        min-height: 138px;
      }

      .user-card:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .user-face {
        width: 62px;
        height: 62px;
        margin: 0 auto 12px;
        background: linear-gradient(135deg, #00a4dc, #7c4dff);
        font-size: 24px;
      }

      .content {
        padding: clamp(38px, 4vw, 56px) clamp(18px, 4vw, 56px) 54px;
      }

      .section {
        margin: 0 0 36px;
      }

      .section-head {
        min-width: 0;
        margin-bottom: 14px;
      }

      .section h2 {
        margin: 0;
        font-size: 22px;
        font-weight: 500;
      }

      .section-title {
        min-width: 0;
        overflow: hidden;
      }

      .section-head > h2,
      .section-title h2 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .section-title .helper {
        flex: 0 0 auto;
        white-space: nowrap;
      }

      .section-head .pager {
        width: auto;
        margin: 0 0 0 auto;
        justify-content: flex-end;
      }

      .app-footer {
        padding: 0 clamp(18px, 4vw, 56px) 28px;
        color: var(--muted);
      }

      .app-footer a {
        color: var(--text);
        text-decoration: none;
      }

      .app-footer a:hover {
        text-decoration: underline;
      }

      .media-row {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--card-gap);
      }

      .media-row.scroller {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .media-row.scroller::-webkit-scrollbar {
        display: none;
      }

      .media-row.scroller .poster-card {
        flex: 0 0 calc((100% - 80px) / 6);
        scroll-snap-align: start;
      }

      .poster-card {
        min-width: 0;
        border: 0;
        padding: 0;
        color: var(--text);
        text-align: left;
        background: transparent;
        cursor: pointer;
      }

      .poster-media-button,
      .poster-title-button,
      .poster-subtitle-links button {
        border: 0;
        padding: 0;
        color: inherit;
        background: transparent;
        font: inherit;
      }

      .poster-media-button {
        display: block;
        width: 100%;
        height: 100%;
        text-align: inherit;
      }

      .poster {
        position: relative;
        container-type: inline-size;
        aspect-ratio: 2 / 3;
        overflow: hidden;
        border-radius: 7px;
        background: var(--surface-strong);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
      }

      .poster.wide {
        aspect-ratio: 16 / 9;
      }

      .poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.22s ease;
      }

      .poster-placeholder {
        width: 100%;
        height: 100%;
        background:
          linear-gradient(110deg, rgba(255, 255, 255, 0.06) 8%, rgba(255, 255, 255, 0.12) 18%, rgba(255, 255, 255, 0.06) 33%),
          var(--surface-strong);
        background-size: 200% 100%;
        animation: shimmer 1.25s linear infinite;
      }

      @keyframes shimmer {
        to {
          background-position-x: -200%;
        }
      }

      .poster-card:hover img {
        transform: scale(1.04);
      }

      .card-play-button {
        --card-play-size: clamp(38px, 24cqw, 62px);
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 4;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(38px, 5.6vw, 62px);
        height: clamp(38px, 5.6vw, 62px);
        width: var(--card-play-size);
        height: var(--card-play-size);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 50%;
        color: #fff;
        background: rgba(0, 0, 0, 0.78);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.46);
        opacity: 0;
        backdrop-filter: blur(10px);
        transform: translate(-50%, -50%) scale(0.92);
        transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
      }

      .card-play-button .material-symbols-rounded {
        font-size: 36px;
        font-size: clamp(24px, 14cqw, 36px);
        font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 32;
      }

      .poster-card:hover .card-play-button,
      .poster-card:focus-within .card-play-button,
      .detail-next-card:hover .card-play-button,
      .detail-next-card:focus-within .card-play-button,
      .episode-row:hover .card-play-button,
      .episode-row:focus-within .card-play-button {
        opacity: 0.94;
        transform: translate(-50%, -50%) scale(1);
      }

      .card-play-button:hover,
      .card-play-button:focus-visible {
        border-color: rgba(0, 184, 245, 0.48);
        background: rgba(8, 14, 22, 0.9);
      }

      .progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        background: rgba(255, 255, 255, 0.18);
      }

      .progress span {
        display: block;
        height: 100%;
        background: var(--primary);
      }

      .poster-title {
        display: block;
        width: 100%;
        margin: 9px 0 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
      }

      .poster-title-button:hover,
      .poster-title-button:focus-visible,
      .poster-subtitle-links button:hover,
      .poster-subtitle-links button:focus-visible {
        color: var(--primary-strong);
        text-decoration: underline;
      }

      .poster-subtitle {
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
      }

      .poster-subtitle-links {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
      }

      .poster-subtitle-links button,
      .poster-subtitle-links span {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .poster-subtitle-links button {
        max-width: 44%;
      }

      .detail-screen {
        padding-top: clamp(34px, 4vw, 56px);
      }

      .detail-back {
        margin-bottom: 28px;
      }

      .detail-hero {
        margin-bottom: 22px;
      }

      .detail-poster-col {
        max-width: 430px;
      }

      .detail-poster {
        width: 100%;
        aspect-ratio: 2 / 3;
        overflow: hidden;
        border-radius: 8px;
        background: var(--surface-strong);
        box-shadow: var(--shadow);
      }

      .detail-poster picture {
        width: 100%;
        height: 100%;
        display: block;
      }

      .detail-poster img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .detail-copy {
        padding-top: clamp(18px, 3vw, 42px);
      }

      .detail-topline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: start;
        margin-bottom: 28px;
      }

      .detail-copy h1 {
        margin: 0 0 6px;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1.05;
      }

      .detail-title-link,
      .detail-context-line button {
        border: 0;
        padding: 0;
        color: inherit;
        background: transparent;
        font: inherit;
        text-align: left;
      }

      .detail-title-link:hover,
      .detail-context-line button:hover {
        color: var(--primary-strong);
      }

      .detail-context-line {
        margin: 0 0 10px;
        color: rgba(244, 247, 251, 0.82);
        font-size: 16px;
        font-weight: 700;
      }

      .detail-original {
        margin: 0 0 18px;
        color: var(--muted);
      }

      .detail-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        color: rgba(244, 247, 251, 0.78);
        font-size: 14px;
      }

      .detail-meta span:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        margin-left: 14px;
        border-radius: 50%;
        vertical-align: middle;
        background: rgba(244, 247, 251, 0.28);
      }

      .detail-actions .btn {
        width: auto;
        min-height: 42px;
        white-space: nowrap;
      }

      .detail-streams {
        display: grid;
        gap: 10px;
        max-width: 620px;
        margin-bottom: 24px;
      }

      .detail-stream-row {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        min-height: 34px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .detail-stream-row strong {
        min-width: 0;
        overflow: hidden;
        color: rgba(244, 247, 251, 0.82);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
      }

      .detail-stream-menu {
        position: relative;
        width: min(420px, 100%);
        min-width: 0;
      }

      .detail-stream-button {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 32px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        padding: 0 11px 0 13px;
        color: rgba(244, 247, 251, 0.86);
        background: rgba(255, 255, 255, 0.05);
        line-height: 1;
      }

      .detail-stream-button:hover:not(:disabled),
      .detail-stream-button.active {
        color: var(--text);
        border-color: rgba(0, 164, 220, 0.52);
        background: rgba(0, 164, 220, 0.16);
      }

      .detail-stream-button:disabled {
        cursor: default;
        opacity: 0.82;
      }

      .detail-stream-button .material-symbols-rounded {
        font-size: 19px;
      }

      .detail-stream-button-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
      }

      .detail-stream-popover {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 150;
        width: min(460px, 82vw);
        max-height: min(320px, 60vh);
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px;
        background: #171d29;
        box-shadow: var(--shadow);
      }

      .detail-stream-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 0;
        border-radius: 7px;
        padding: 9px 10px;
        color: rgba(244, 247, 251, 0.84);
        background: transparent;
        text-align: left;
        font-size: 14px;
      }

      .detail-stream-option .material-symbols-rounded {
        color: var(--muted);
        font-size: 19px;
      }

      .detail-stream-option span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .detail-stream-option:hover,
      .detail-stream-option.active {
        color: var(--text);
        background: rgba(255, 255, 255, 0.08);
      }

      .detail-stream-option.active .material-symbols-rounded {
        color: var(--primary-strong);
      }

      .detail-overview {
        max-width: 860px;
        color: #d6dee9;
        line-height: 1.65;
      }

      .detail-overview.clamped {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
      }

      .more-button {
        border: 0;
        padding: 0;
        color: var(--primary-strong);
        background: transparent;
        font-weight: 700;
      }

      .mobile-more-button {
        display: none;
      }

      .detail-tags {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 14px;
        max-width: 860px;
        margin-top: 34px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .detail-tags strong {
        color: rgba(244, 247, 251, 0.78);
        font-weight: 600;
      }

      .detail-info-list {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 10px 24px;
        max-width: 860px;
        margin: 24px 0 0;
        color: rgba(244, 247, 251, 0.82);
        font-size: 14px;
      }

      .detail-info-list dt {
        color: var(--muted);
      }

      .detail-info-list dd {
        margin: 0;
        font-weight: 600;
      }

      .detail-inline-sections {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 100%;
        margin-top: 30px;
      }

      .detail-inline-sections .section {
        min-width: 0;
        max-width: 100%;
        margin: 0;
      }

      .detail-next-section,
      .detail-seasons-section,
      .detail-episodes-section {
        margin-left: 0;
        margin-top: 0;
      }

      .detail-next-card {
        width: min(360px, 100%);
        color: var(--text);
        text-align: center;
      }

      .detail-next-image {
        position: relative;
        container-type: inline-size;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 8px;
        background: var(--surface-strong);
      }

      .detail-next-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform 0.22s ease;
      }

      .detail-next-card:hover img {
        transform: scale(1.04);
      }

      .detail-next-title {
        display: block;
        width: 100%;
        border: 0;
        padding: 0;
        margin-top: 8px;
        color: rgba(244, 247, 251, 0.84);
        background: transparent;
        font: inherit;
        font-size: 14px;
        text-align: center;
      }

      .detail-next-title:hover,
      .detail-next-title:focus-visible {
        color: var(--primary-strong);
        text-decoration: underline;
      }

      .detail-season-grid {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 170px));
        gap: var(--card-gap);
        justify-content: start;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }

      .detail-season-card {
        width: 100%;
        max-width: none;
        padding: 0;
        min-width: 0;
        text-align: center;
      }

      .season-count {
        position: absolute;
        top: 7px;
        right: 7px;
        z-index: 2;
        min-width: 26px;
        height: 26px;
        border-radius: 999px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: rgba(0, 164, 220, 0.92);
        font-size: 12px;
        font-weight: 700;
      }

      .episode-list {
        display: grid;
        gap: var(--card-gap);
      }

      .episode-row {
        display: grid;
        grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
        gap: 22px;
        align-items: center;
        border: 0;
        border-radius: 8px;
        padding: 0;
        color: var(--text);
        background: transparent;
        text-align: left;
      }

      .episode-row:hover {
        background: rgba(255, 255, 255, 0.04);
      }

      .episode-thumb {
        position: relative;
        container-type: inline-size;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 8px;
        background: var(--surface-strong);
      }

      .episode-thumb img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .episode-copy {
        min-width: 0;
        padding-right: 18px;
      }

      .episode-copy-button {
        width: 100%;
        border: 0;
        padding: 0 18px 0 0;
        color: inherit;
        background: transparent;
        font: inherit;
        text-align: left;
      }

      .episode-copy-button:hover strong,
      .episode-copy-button:focus-visible strong {
        color: var(--primary-strong);
        text-decoration: underline;
      }

      .episode-copy strong,
      .episode-copy span {
        display: block;
      }

      .episode-copy strong {
        margin-bottom: 5px;
        font-size: 15px;
        font-weight: 600;
      }

      .episode-meta {
        color: var(--muted);
        font-size: 13px;
      }

      .episode-copy p {
        max-width: 780px;
        margin: 14px 0 0;
        color: rgba(214, 222, 233, 0.82);
        line-height: 1.5;
      }

      .detail-people-section {
        margin-top: 0;
      }

      .detail-people-row {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: var(--card-gap);
        overflow-x: auto;
        scroll-behavior: smooth;
        padding-bottom: 8px;
        scrollbar-width: none;
      }

      .people-pager {
        width: auto;
        margin: 0;
        justify-content: flex-end;
      }

      .detail-people-row::-webkit-scrollbar {
        display: none;
      }

      .person-card {
        flex: 0 0 170px;
        min-width: 0;
        color: var(--text);
      }

      .person-image {
        aspect-ratio: 3 / 4;
        overflow: hidden;
        border-radius: 8px;
        background: var(--surface-strong);
      }

      .person-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .person-card strong,
      .person-card span {
        display: block;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .person-card strong {
        margin-top: 8px;
        font-size: 14px;
        font-weight: 600;
      }

      .person-card span {
        color: var(--muted);
        font-size: 12px;
      }

      .library-grid {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--card-gap);
        margin-left: 0;
        margin-right: 0;
      }

      .library-tile {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;
        min-height: 0;
        max-height: none;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: clamp(18px, 1.8vw, 24px);
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        color: var(--text);
        text-align: right;
        background:
          linear-gradient(135deg, rgba(0, 164, 220, 0.36), rgba(124, 77, 255, 0.22)),
          var(--surface-strong);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
      }

      .library-tile:hover {
        border-color: rgba(0, 164, 220, 0.72);
        transform: translateY(-2px);
      }

      .library-tile strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(16px, 1vw, 18px);
        line-height: 1.2;
      }

      .library-tile:nth-child(2n) {
        background:
          linear-gradient(135deg, rgba(30, 190, 126, 0.34), rgba(0, 164, 220, 0.22)),
          var(--surface-strong);
      }

      .library-tile:nth-child(3n) {
        background:
          linear-gradient(135deg, rgba(255, 193, 7, 0.26), rgba(255, 107, 122, 0.2)),
          var(--surface-strong);
      }

      .toast {
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 80;
        max-width: min(420px, calc(100vw - 40px));
        border-radius: 7px;
        padding: 14px 16px;
        background: #202737;
        box-shadow: var(--shadow);
        color: var(--text);
      }

      .player-layer {
        position: fixed;
        inset: 0;
        z-index: 10000;
        overflow: hidden;
        overscroll-behavior: none;
        background: black;
      }

      .player-layer video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: black;
      }

      .audio-stage {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 28px;
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000),
          radial-gradient(circle at center, rgba(0, 164, 220, 0.18), transparent 36rem);
      }

      .audio-art {
        width: min(360px, 70vw);
        aspect-ratio: 1;
        border-radius: 8px;
        overflow: hidden;
        background: var(--surface-strong);
        box-shadow: var(--shadow);
      }

      .audio-art img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }

      .player-osd {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none;
      }

      .player-top,
      .player-bottom {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px clamp(12px, 2vw, 28px);
        pointer-events: auto;
      }

      .player-top {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent);
      }

      .player-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 14px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
      }

      .player-title {
        min-width: 0;
      }

      .player-title strong,
      .player-title span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .player-title span {
        color: var(--muted);
        font-size: 14px;
      }

      .player-controls {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
      }

      .player-button {
        position: relative;
        min-width: 46px;
        min-height: 46px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        color: white;
        background: rgba(255, 255, 255, 0.14);
        display: inline-grid;
        place-items: center;
        line-height: 1;
      }

      .player-button .material-symbols-rounded {
        font-size: 26px;
      }

      .seek-button .material-symbols-rounded {
        font-size: 30px;
      }

      .seek-button.back .material-symbols-rounded {
        transform: translateX(-1px);
      }

      .seek-button.forward .material-symbols-rounded {
        transform: scaleX(-1) translateX(-1px);
      }

      .player-seek-mark {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding-top: 1px;
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        pointer-events: none;
      }

      .player-button:hover {
        background: rgba(255, 255, 255, 0.24);
      }

      .player-button:disabled {
        opacity: 0.38;
        cursor: default;
      }

      .player-button:disabled:hover {
        background: rgba(255, 255, 255, 0.14);
      }

      .player-button.primary {
        min-width: 58px;
        min-height: 58px;
        background: rgba(0, 164, 220, 0.92);
      }

      .player-button.primary .material-symbols-rounded {
        font-size: 34px;
      }

      .player-episode-fab {
        position: absolute;
        right: clamp(18px, 2vw, 28px);
        min-width: auto;
        padding: 0.85rem 1rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: rgba(0, 164, 220, 0.95);
        z-index: 1000;
        transition: bottom 240ms ease;
      }

      .player-episode-fab-onscreen {
        bottom: calc(clamp(18px, 2vw, 28px) + 104px);
      }

      .player-episode-fab-corner {
        bottom: clamp(18px, 2vw, 28px);
      }

      .player-episode-fab .player-fab-label {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
      }

      .player-popover {
        position: absolute;
        left: clamp(16px, 2vw, 32px);
        top: 76px;
        z-index: 2;
        width: min(420px, calc(100vw - 32px));
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        padding: 16px;
        color: #fff;
        background: rgba(24, 24, 24, 0.82);
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(12px);
        pointer-events: auto;
      }

      .player-settings-panel {
        display: grid;
        gap: 14px;
      }

      .player-select-row {
        display: grid;
        gap: 7px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        font-weight: 700;
      }

      .player-select-row select {
        width: 100%;
        min-height: 38px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 7px;
        padding: 0 11px;
        color: #fff;
        background: rgba(0, 0, 0, 0.42);
        outline: none;
      }

      .player-info-panel {
        max-height: min(72vh, 560px);
        overflow: auto;
        padding-right: 44px;
      }

      .player-info-panel section + section {
        margin-top: 16px;
      }

      .player-info-panel h3 {
        margin: 0 0 7px;
        font-size: 15px;
      }

      .player-info-panel dl {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 3px 10px;
        margin: 0;
        font-size: 14px;
        line-height: 1.25;
      }

      .player-info-panel dt {
        color: rgba(255, 255, 255, 0.74);
      }

      .player-info-panel dd {
        min-width: 0;
        margin: 0;
        color: #fff;
        overflow-wrap: anywhere;
      }

      .player-panel-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.86);
        background: transparent;
        display: inline-grid;
        place-items: center;
      }

      .player-panel-close:hover {
        background: rgba(255, 255, 255, 0.14);
      }

      .player-timeline {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0;
      }

      .player-time {
        min-width: 54px;
        color: #d8dee8;
        font-variant-numeric: tabular-nums;
        font-size: 13px;
        text-align: center;
      }

      .player-range {
        width: 100%;
        height: 22px;
        margin: 0;
        accent-color: var(--primary);
        cursor: pointer;
      }

      .player-range::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
      }

      .player-range::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-top: -6px;
      }

      .player-range::-moz-range-track {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
      }

      .player-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
        margin: 0;
      }

      .player-side {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-end;
      }

      .player-status {
        max-width: min(460px, 38vw);
      }

      .volume-control {
        width: 120px;
      }

      .pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin: 16px 0;
      }

      .pager-info {
        min-width: 190px;
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.07);
        font-size: 14px;
        font-weight: 600;
        text-align: center;
      }

      .pager-arrow {
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 50%;
        padding: 0;
        color: var(--text);
        background: rgba(255, 255, 255, 0.09);
        line-height: 1;
        display: inline-grid;
        place-items: center;
      }

      .pager-arrow .material-symbols-rounded {
        font-size: 24px;
      }

      .pager-arrow:hover:not(:disabled) {
        background: rgba(0, 164, 220, 0.24);
        border-color: rgba(0, 164, 220, 0.62);
      }

      .pager-arrow:disabled {
        cursor: default;
        opacity: 0.35;
      }

      .library-main {
        min-height: calc(100vh - 64px);
        padding: 0 clamp(18px, 4vw, 56px) 54px;
      }

      .library-browser {
        min-height: calc(100vh - 64px);
      }

      .library-tool-btn {
        border: 0;
        padding: 0;
        color: rgba(244, 247, 251, 0.82);
        background: transparent;
        display: inline-grid;
        place-items: center;
      }

      .library-tool-btn {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      .library-tool-btn:hover:not(:disabled),
      .library-tool-btn.active {
        color: var(--text);
        background: rgba(255, 255, 255, 0.08);
      }

      .library-tool-btn:disabled {
        cursor: default;
        opacity: 0.32;
      }

      .library-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        min-height: 72px;
        margin: 0 clamp(-56px, -4vw, -18px) 28px;
        padding: 0 clamp(18px, 4vw, 56px);
        color: var(--muted);
        background: transparent;
      }

      .library-toolbar-left,
      .library-pager,
      .library-toolbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .library-toolbar-left {
        justify-content: flex-start;
      }

      .library-toolbar-right {
        justify-content: flex-end;
      }

      .library-pager {
        display: grid;
        grid-template-columns: 34px minmax(132px, auto) 34px;
        align-items: center;
        gap: 8px;
        justify-content: center;
      }

      .library-title {
        min-width: 0;
        max-width: min(30vw, 360px);
        overflow: hidden;
        color: var(--text);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 700;
      }

      .library-range {
        min-width: 132px;
        text-align: center;
        font-size: 14px;
      }

      .library-menu {
        position: relative;
        flex: 0 0 auto;
      }

      .library-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        min-height: 36px;
        max-width: 176px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        padding: 0 10px;
        color: rgba(244, 247, 251, 0.78);
        background: rgba(255, 255, 255, 0.05);
        line-height: 1;
      }

      .library-menu-button:hover,
      .library-menu-button.active {
        color: var(--text);
        border-color: rgba(0, 164, 220, 0.52);
        background: rgba(0, 164, 220, 0.16);
      }

      .library-menu-button .material-symbols-rounded {
        font-size: 20px;
      }

      .library-menu-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
      }

      .library-menu-chevron {
        opacity: 0.72;
      }

      .library-menu-popover {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 140;
        width: 230px;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px;
        background: #171d29;
        box-shadow: var(--shadow);
      }

      .library-menu-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 0;
        border-radius: 7px;
        padding: 9px 10px;
        color: rgba(244, 247, 251, 0.84);
        background: transparent;
        text-align: left;
        font-size: 14px;
      }

      .library-menu-option .material-symbols-rounded {
        color: var(--muted);
        font-size: 19px;
      }

      .library-menu-option:hover,
      .library-menu-option.active {
        color: var(--text);
        background: rgba(255, 255, 255, 0.08);
      }

      .library-menu-option.active .material-symbols-rounded {
        color: var(--primary-strong);
      }

      .library-canvas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 28px;
        gap: 20px;
        align-items: start;
      }

      .library-content {
        min-width: 0;
      }

      .library-browser-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        gap: 28px 22px;
      }

      .library-bottom-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 38px;
        color: var(--muted);
      }

      .library-bottom-pager .library-range {
        text-align: center;
      }

      .library-poster-card {
        text-align: center;
      }

      .library-poster-card .poster-subtitle-links {
        justify-content: center;
      }

      .library-poster-card .poster {
        border-radius: 7px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
      }

      .library-poster-card .poster-title {
        margin-top: 8px;
        font-size: 14px;
        text-align: center;
      }

      .library-poster-card .poster-subtitle {
        font-size: 12px;
        text-align: center;
      }

      @media (max-width: 820px) {
        .library-toolbar {
          gap: 8px;
        }

        .library-toolbar-right {
          gap: 5px;
        }

        .library-title {
          max-width: clamp(70px, 18vw, 120px);
          font-size: 13px;
        }

        .library-tool-btn {
          width: 30px;
          height: 30px;
        }

        .library-tool-btn .material-symbols-rounded {
          font-size: 21px;
        }

        .library-menu-button {
          width: 30px;
          height: 30px;
          min-width: 30px;
          min-height: 30px;
          max-width: 30px;
          padding: 0;
          border-radius: 50%;
        }

        .library-menu-button .material-symbols-rounded {
          font-size: 20px;
        }

        .library-menu-label,
        .library-menu-chevron {
          display: none;
        }

        .library-menu-popover {
          width: min(230px, 82vw);
        }

        .library-range {
          min-width: 108px;
          text-align: center;
          font-size: 12px;
        }

        .library-pager {
          grid-template-columns: 30px minmax(108px, auto) 30px;
          gap: 5px;
        }
      }

      @media (min-width: 768px) and (max-width: 900px) {
        .detail-hero {
          --bs-gutter-x: 24px;
        }

        .detail-copy {
          padding-top: 16px;
        }

        .detail-copy h1 {
          font-size: clamp(28px, 3.6vw, 36px);
        }

        .detail-topline {
          grid-template-columns: 1fr;
          gap: 16px;
          margin-bottom: 22px;
        }

        .detail-actions {
          justify-content: flex-start !important;
        }

        .detail-actions .btn {
          white-space: normal;
        }

        .detail-streams,
        .detail-stream-menu {
          max-width: 100%;
        }
      }

      .played-badge,
      .rating-badge {
        position: absolute;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        color: rgba(244, 247, 251, 0.9);
        background: rgba(9, 13, 20, 0.66);
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(10px);
      }

      .played-badge {
        top: 7px;
        right: 7px;
        width: 26px;
        height: 26px;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        color: #fff;
        background: rgba(0, 164, 220, 0.88);
      }

      .played-badge .material-symbols-rounded {
        font-size: 18px;
      }

      .rating-badge {
        right: 6px;
        bottom: 6px;
        gap: 3px;
        min-height: 22px;
        border-radius: 999px;
        padding: 2px 7px 2px 6px;
        color: rgba(244, 247, 251, 0.88);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
      }

      .rating-badge .material-symbols-rounded {
        color: rgba(0, 184, 245, 0.86);
        font-size: 13px;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
      }

      .library-state {
        display: grid;
        min-height: 260px;
        place-items: center;
        color: var(--muted);
      }

      .alphabet-rail {
        position: sticky;
        top: 158px;
        display: grid;
        gap: 1px;
        justify-items: center;
        padding-top: 2px;
      }

      .alphabet-rail button {
        width: 24px;
        min-height: 18px;
        border: 0;
        padding: 0;
        color: rgba(244, 247, 251, 0.62);
        background: transparent;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
      }

      .alphabet-rail button:hover:not(:disabled),
      .alphabet-rail button.active {
        color: var(--text);
      }

      .alphabet-rail button.active {
        min-height: 22px;
        border-radius: 999px;
        background: rgba(0, 164, 220, 0.22);
      }

      .alphabet-rail button:disabled {
        cursor: default;
        opacity: 0.24;
      }

      .library-header {
        position: relative;
        justify-content: center;
        text-align: center;
      }

      @media (max-width: 1100px) {
        .media-row {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .media-row.scroller .poster-card {
          flex-basis: calc((100% - 48px) / 4);
        }

        .library-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .library-browser-grid {
          grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
          gap: 24px 18px;
        }
      }

      @media (hover: none) {
        .card-play-button {
          opacity: 0.82;
          transform: translate(-50%, -50%) scale(1);
        }
      }

      @media (max-width: 767.98px) {
        .card-play-button {
          --card-play-size: clamp(30px, 15cqw, 42px);
          width: clamp(30px, 9vw, 42px);
          height: clamp(30px, 9vw, 42px);
          width: var(--card-play-size);
          height: var(--card-play-size);
          opacity: 0.86;
          background: rgba(0, 0, 0, 0.8);
        }

        .card-play-button .material-symbols-rounded {
          font-size: clamp(20px, 8cqw, 27px);
        }

        .poster.wide .card-play-button,
        .detail-next-image .card-play-button,
        .episode-thumb .card-play-button {
          --card-play-size: clamp(22px, 9cqw, 28px);
          width: clamp(22px, 7vw, 28px);
          height: clamp(22px, 7vw, 28px);
          width: var(--card-play-size);
          height: var(--card-play-size);
          left: auto;
          right: 6px;
          top: auto;
          bottom: 6px;
          transform: none;
        }

        .poster.wide .card-play-button .material-symbols-rounded,
        .detail-next-image .card-play-button .material-symbols-rounded,
        .episode-thumb .card-play-button .material-symbols-rounded {
          font-size: clamp(15px, 6cqw, 18px);
        }

        .poster-card:hover .poster.wide .card-play-button,
        .poster-card:focus-within .poster.wide .card-play-button,
        .detail-next-card:hover .card-play-button,
        .detail-next-card:focus-within .card-play-button,
        .episode-row:hover .card-play-button,
        .episode-row:focus-within .card-play-button {
          transform: none;
        }

        .played-badge {
          --mobile-badge-size: clamp(20px, 8cqw, 24px);
          top: 6px;
          right: 6px;
          width: var(--mobile-badge-size);
          height: var(--mobile-badge-size);
        }

        .played-badge .material-symbols-rounded {
          font-size: clamp(14px, 5cqw, 16px);
        }

        .season-count {
          --mobile-badge-size: clamp(20px, 8cqw, 24px);
          top: 6px;
          right: 6px;
          min-width: var(--mobile-badge-size);
          height: var(--mobile-badge-size);
          padding: 0 6px;
          font-size: 11px;
        }

        .detail-next-image .rating-badge,
        .episode-thumb .rating-badge {
          right: auto;
          left: 6px;
        }

        .center-screen {
          padding: 16px;
        }

        .topbar {
          gap: 8px;
          padding: 0 8px;
        }

        .topbar > .ms-auto {
          flex: 1 1 auto;
          min-width: 0;
        }

        .brand span {
          display: none;
        }

        .brand img {
          width: 30px;
          height: 30px;
        }

        .topbar-icon-btn {
          width: 34px;
          height: 34px;
        }

        .screen {
          padding: 26px 16px;
        }

        .media-row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .media-row.scroller .poster-card {
          flex-basis: calc((100% - 16px) / 2);
        }

        .library-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .player-top,
        .player-bottom {
          padding: 12px;
        }

        .player-row {
          align-items: center;
          gap: 0;
          min-width: 0;
        }

        .player-controls {
          justify-content: flex-start;
        }

        .player-controls {
          width: 100%;
          min-width: 0;
          flex-wrap: nowrap;
          gap: 6px;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          padding-bottom: 2px;
          scrollbar-width: none;
        }

        .player-controls::-webkit-scrollbar {
          display: none;
        }

        .player-button {
          min-width: 40px;
          min-height: 40px;
          flex: 0 0 40px;
        }

        .player-button .material-symbols-rounded {
          font-size: 24px;
        }

        .seek-button .material-symbols-rounded {
          font-size: 28px;
        }

        .player-button.primary {
          min-width: 48px;
          min-height: 48px;
          flex-basis: 48px;
        }

        .player-button.primary .material-symbols-rounded {
          font-size: 30px;
        }

        .player-status {
          display: none;
        }

        .player-time {
          min-width: 42px;
          font-size: 12px;
        }

        .player-timeline {
          gap: 8px;
        }

        .volume-control {
          display: none;
        }

        .player-popover {
          left: 10px;
          right: 10px;
          top: 64px;
          width: auto;
          max-height: calc(100dvh - 154px);
          overflow: auto;
        }

        .library-header {
          display: grid;
          gap: 12px;
        }

        .library-main {
          padding: 0 12px 38px;
        }

        .library-toolbar {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 4px;
          min-height: 46px;
          margin: 0 -8px 18px;
          padding: 7px 8px;
          overflow: visible;
          row-gap: 0;
        }

        .library-toolbar-left {
          flex: 1 1 0;
          gap: 5px;
          max-width: calc(50% - 78px);
          position: relative;
          z-index: 2;
        }

        .library-pager {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          grid-template-columns: 28px minmax(64px, 72px) 28px;
          gap: 3px;
          z-index: 1;
        }

        .library-toolbar-right {
          flex: 0 0 auto;
          gap: 4px;
          position: relative;
          z-index: 2;
        }

        .library-title {
          max-width: clamp(58px, 18vw, 96px);
          font-size: 13px;
        }

        .library-tool-btn {
          width: 28px;
          height: 28px;
        }

        .library-tool-btn .material-symbols-rounded {
          font-size: 20px;
        }

        .library-menu-button {
          width: 28px;
          height: 28px;
          min-width: 28px;
          min-height: 28px;
          max-width: 28px;
          padding: 0;
          border-radius: 50%;
        }

        .library-menu-button .material-symbols-rounded {
          font-size: 19px;
        }

        .library-menu-label,
        .library-menu-chevron {
          display: none;
        }

        .library-menu-popover {
          right: 0;
          width: min(230px, 82vw);
        }

        .library-range {
          min-width: 0;
          max-width: 72px;
          overflow: hidden;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
        }

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

        .library-browser-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 22px 12px;
        }

        .alphabet-rail {
          display: none;
        }

        .detail-screen {
          padding: 18px 12px 34px;
          overflow-x: hidden;
        }

        .detail-back {
          margin-bottom: 16px;
        }

        .detail-hero {
          width: 100%;
          min-width: 0;
          margin-bottom: 0;
        }

        .detail-hero.row {
          --bs-gutter-x: 0;
          --bs-gutter-y: 0;
          margin-left: 0;
          margin-right: 0;
        }

        .detail-poster-col {
          width: 100%;
          max-width: 100%;
          flex: 0 0 100%;
          padding-left: 0;
          padding-right: 0;
        }

        .detail-poster {
          width: min(100%, 560px);
          aspect-ratio: auto;
          max-width: 100%;
          max-height: none;
          margin: 0 auto 18px;
          box-shadow: 0 16px 46px rgba(0, 0, 0, 0.36);
        }

        .detail-poster:not(.has-wide-image) {
          width: min(78vw, 330px);
        }

        .detail-poster picture {
          height: auto;
        }

        .detail-poster img,
        .detail-poster:not(.has-wide-image) img {
          width: 100%;
          height: auto;
          max-height: none;
          object-fit: contain;
        }

        .detail-copy {
          padding-top: 0;
          min-width: 0;
          width: 100%;
          padding-left: 0;
          padding-right: 0;
        }

        .detail-copy h1 {
          font-size: clamp(25px, 8vw, 34px);
          overflow-wrap: anywhere;
        }

        .detail-context-line,
        .detail-original {
          overflow-wrap: anywhere;
        }

        .detail-topline {
          grid-template-columns: 1fr;
          gap: 16px;
          margin-bottom: 18px;
        }

        .detail-actions {
          display: flex !important;
          flex-wrap: wrap;
          gap: 8px !important;
          justify-content: flex-start;
        }

        .detail-actions .btn {
          width: 44px;
          height: 44px;
          min-width: 0;
          min-height: 44px;
          padding: 0;
          border-radius: 8px;
          justify-content: center;
          white-space: nowrap;
        }

        .detail-actions .btn .material-symbols-rounded {
          font-size: 24px;
        }

        .detail-action-label {
          display: none;
        }

        .detail-stream-row,
        .detail-tags {
          grid-template-columns: 1fr;
          gap: 6px;
        }

        .detail-stream-menu {
          width: 100%;
        }

        .detail-stream-button {
          min-height: 36px;
          border-radius: 8px;
        }

        .detail-stream-popover {
          width: min(100%, calc(100vw - 24px));
        }

        .detail-overview {
          max-width: 100%;
          font-size: 14px;
          line-height: 1.55;
        }

        .detail-extra-info {
          display: none;
        }

        .detail-extra-info.expanded {
          display: block;
        }

        .mobile-more-button {
          display: inline-block;
          margin-top: 8px;
        }

        .detail-info-list {
          grid-template-columns: 1fr;
          gap: 5px 0;
        }

        .detail-info-list dd {
          margin-bottom: 8px;
        }

        .detail-inline-sections {
          gap: 24px;
          margin-top: 22px;
        }

        .detail-next-section,
        .detail-seasons-section,
        .detail-episodes-section {
          margin-left: 0;
        }

        .detail-season-grid.row {
          --bs-gutter-x: 0;
          --bs-gutter-y: 0;
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--card-gap);
          margin-left: 0;
          margin-right: 0;
        }

        .detail-season-grid.row > .detail-season-card {
          width: 100%;
          max-width: 100%;
          padding: 8px;
          display: grid;
          grid-template-columns: minmax(116px, 38%) minmax(0, 1fr);
          gap: 12px;
          align-items: center;
          text-align: left;
          border-radius: 8px;
          background: rgba(255, 255, 255, 0.045);
        }

        .detail-season-card .poster {
          aspect-ratio: 16 / 9;
        }

        .detail-season-card .poster-title {
          margin: 0;
          text-align: left;
          white-space: normal;
          overflow-wrap: anywhere;
        }

        .episode-row {
          grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
          gap: 10px;
          align-items: start;
          padding: 8px;
          background: rgba(255, 255, 255, 0.045);
        }

        .episode-copy {
          padding: 0;
        }

        .episode-copy strong {
          font-size: 14px;
          line-height: 1.25;
        }

        .episode-meta {
          font-size: 12px;
        }

        .episode-copy p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          margin-top: 6px;
          font-size: 12px;
          line-height: 1.35;
        }

        .person-card {
          flex-basis: 138px;
        }

        .library-tile {
          aspect-ratio: 16 / 9;
        }

        .search-box {
          width: 100%;
          gap: 0;
          padding: 0;
        }

        .search-wrap {
          width: auto;
          min-width: 0;
        }

        .search-filter-menu {
          margin-right: 4px;
        }

        .search-filter-button {
          width: 34px;
          min-width: 34px;
          max-width: 34px;
          height: 34px;
          min-height: 34px;
          padding: 0;
          border-radius: 50%;
        }

        .search-filter-label,
        .search-filter-chevron {
          display: none;
        }

        .search-filter-popover {
          right: 0;
          width: min(230px, 82vw);
        }
      }

      @media (max-width: 420px) {
        .topbar {
          gap: 6px;
        }

        .search-box .input-group-text {
          display: none;
        }

        .search-filter-button {
          width: 32px;
          min-width: 32px;
          max-width: 32px;
          height: 32px;
          min-height: 32px;
        }

        .detail-poster {
          width: 100%;
          max-height: none;
        }

        .player-bottom {
          padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
        }

        .player-button {
          min-width: 38px;
          min-height: 38px;
          flex-basis: 38px;
        }

        .player-button.primary {
          min-width: 46px;
          min-height: 46px;
          flex-basis: 46px;
        }
      }