/* Result-only layout, based on the supplied reference. */
.home-page .container { min-height: 100dvh; display: flex; justify-content: center; padding-block: 80px; }
.home-page .site-header { position: absolute; top: 0; left: 0; padding-inline: inherit; margin-bottom: 0; }
.home-page .main-content { margin: auto 0; }
.home-page #discovery-title {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    color: #f7f7fb;
    font-family: "Arial Black", "Roboto", sans-serif;
    font-size: clamp(3.2rem, 7.8vw, 5.7rem);
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: .9;
    text-align: left;
    text-align-last: left;
}
.home-page .hero-description {
    max-width: 760px;
    margin-right: 0;
    margin-left: auto;
    padding-right: 18px;
    border-right: 2px solid rgba(90, 212, 230, .7);
    color: rgba(232, 237, 247, .72);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.5;
    text-align: right;
}
@media (max-width: 480px) {
    .home-page #discovery-title {
        font-size: clamp(2.35rem, 13vw, 3.2rem);
        line-height: .94;
    }
}
#series-retry[hidden] { display: none; }
.series-view[hidden], .series-view [hidden], body.showing-series .discovery-hero { display: none; }
body.showing-series .container { align-items: flex-start; justify-content: flex-start; }
body.showing-series .site-header { margin-bottom: 0; padding: 16px 0 0 0; }
body.showing-series .main-content { position: relative; width: 100%; max-width: none; margin: 0 auto; padding-top: 50px; justify-content: flex-start; }
.public-breadcrumbs { width: min(1000px, calc(100% - 32px)); margin: 0 auto 16px; color: rgba(247, 241, 255, .64); font-size: 13px; }
.public-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.public-breadcrumbs li + li::before { content: "/"; margin-right: 9px; color: rgba(247, 241, 255, .4); }
.public-breadcrumbs a { color: #c9d5e7; text-decoration: none; }
.public-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.public-breadcrumbs [aria-current="page"] { color: #f7f1ff; }
footer.site-footer,
body.showing-series footer.site-footer { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: block; height: 52px; margin: 0; padding: 18px 24px env(safe-area-inset-bottom); color: rgba(247, 241, 255, .65); font-size: 13px; text-align: initial; pointer-events: none; }
footer.site-footer .site-footer__count { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
footer.site-footer .site-footer__credit { position: absolute; right: 24px; bottom: 18px; white-space: nowrap; }
footer.site-footer a { pointer-events: auto; }
.auth-nav { position: fixed; z-index: 5; top: 22px; right: 24px; display: flex; align-items: center; gap: 10px; color: #c5d1e3; font-size: .8rem; }
.auth-nav a { padding: 8px 12px; border-radius: 999px; color: #d8e2f0; text-decoration: none; }
.auth-nav a:hover { background: rgba(255,255,255,.08); }
.auth-nav__register { background: #76e1ef; color: #07121c !important; font-weight: 700; }
.auth-nav__register:hover { background: #baf7fb !important; }
.auth-nav__user { color: #8ea2bd; }
.series-status { color: #a6b4c9; text-align: center; font-size: 14px; }
.series-status:empty { display: none; }
.series-status.is-error { position: fixed; z-index: 8; top: 76px; left: 50%; width: min(420px, calc(100% - 32px)); padding: 12px 16px; border: 1px solid rgba(255, 170, 170, .28); border-radius: 10px; background: rgba(58, 20, 28, .92); color: #ffd2d8; transform: translateX(-50%); }
.series-status.is-loading { position: absolute; z-index: 2; top: 10px; left: 50%; width: min(280px, calc(100% - 32px)); min-height: 32px; margin: 0; padding-left: 22px; color: #c3cbe0; text-align: left; transform: translateX(-50%); }
.series-status.is-loading::before { content: ""; position: absolute; top: 3px; left: 0; width: 12px; height: 12px; border: 2px solid rgba(163, 142, 255, .25); border-top-color: #a38eff; border-radius: 50%; animation: series-spinner .75s linear infinite; }
.series-status.is-loading::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.12); }
.series-status.is-loading { background: linear-gradient(90deg, transparent 0 18%, #8b71ff 42%, transparent 66%) 0 30px / 42% 2px no-repeat; animation: series-progress 1.1s ease-in-out infinite; }
@keyframes series-spinner { to { transform: rotate(360deg); } }
@keyframes series-progress { from { background-position-x: -45%; } to { background-position-x: 145%; } }
.series-view { --muted: #95a3ba; --text: #dde2ed; --pill: #1c293b; --series-poster-width: 250px; --series-title-size: 30px; width: 1000px; max-width: calc(100% - 32px); min-height: 620px; margin: 0 auto; display: grid; grid-template-columns: var(--series-poster-width) minmax(0, 1fr); grid-template-areas: "poster info" "navigation navigation"; align-content: start; gap: 40px 48px; color: var(--text); text-align: left; font-size: 14px; line-height: 1.45; contain: layout paint; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.series-view.is-ready { opacity: 1; transform: translateY(0); }
.series-view.is-loading { min-height: 420px; opacity: 1; transform: none; }
.series-view.is-loading::before { content: ""; width: 250px; height: 375px; border-radius: 16px; background: linear-gradient(110deg, rgba(255,255,255,.04) 15%, rgba(255,255,255,.11) 38%, rgba(255,255,255,.04) 62%) 0 / 240% 100%; animation: series-skeleton 1.2s linear infinite; }
.series-view.is-loading::after { content: ""; align-self: start; width: min(480px, 100%); height: 180px; margin-top: 5px; border-radius: 12px; background: linear-gradient(110deg, rgba(255,255,255,.04) 15%, rgba(255,255,255,.11) 38%, rgba(255,255,255,.04) 62%) 0 / 240% 100%; animation: series-skeleton 1.2s linear infinite; }
@keyframes series-skeleton { to { background-position-x: 140%; } }
.series-view button, .series-view a { font: inherit; touch-action: manipulation; }
.series-view button, .series-view a[href] { cursor: pointer; }
.series-view button:disabled { cursor: default; opacity: .45; }
.series-view button:focus-visible, .series-view a:focus-visible { outline: 2px solid #a48cff; outline-offset: 4px; }
.series-view__poster { grid-area: poster; width: var(--series-poster-width); height: calc(var(--series-poster-width) * 1.5); border-radius: 16px; overflow: hidden; background: #1c293b; display: grid; place-items: center; color: var(--muted); }
.series-view__poster img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.series-view__poster img.is-loaded { opacity: 1; }
.series-view__info { grid-area: info; min-width: 0; padding-top: 1px; }
.series-view__original { color: var(--muted); font-size: 18px; margin: 0 0 2px; overflow-wrap: anywhere; }
.series-view #result-title { margin: 0; color: var(--text); font-size: var(--series-title-size); font-weight: 700; line-height: 1.2; letter-spacing: -.8px; overflow-wrap: anywhere; }
.series-view__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; color: var(--muted); margin-top: 5px; }
.series-view__badge { font-size: 10px; font-weight: 700; background: #4b4e58; padding: 4px 8px; border-radius: 20px; color: #fff; }
.series-view__tools { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.series-view__rating { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 4px solid #f5cc13; border-right-color: #76651b; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 6px; }
.series-view__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 40px; border: 0; background: none; color: var(--muted); text-decoration: none; font-size: 20px !important; }
.series-view__icon span { font-size: 12px; }
.series-view__reaction { height: 36px; min-width: 36px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-radius: 30px; background: var(--pill); color: var(--muted); font-size: 12px !important; }
.series-view__reaction svg { width: 15px; height: 15px; fill: currentColor; }
.series-view [aria-pressed="true"] { color: #b3a2ff; background: #32285b; border-radius: 30px; }
.series-view__description { margin: 16px 0; color: var(--muted); overflow-wrap: anywhere; }
.series-view__details { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 16px; margin: 16px 0 20px; }
.series-view__details dt { color: var(--muted); }
.series-view__details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.series-view__navigation { grid-area: navigation; }
.series-nav-label--mobile { display: none; }
.series-view__navigation { display: flex; justify-content: space-between; gap: 12px; }
.series-view__navigation button { min-height: 40px; padding: 10px 18px; border: 0; border-radius: 24px; background: var(--pill); color: var(--text); }
.series-view__navigation button:not(:disabled):hover, .series-view__reaction:hover { background: #30415a; }
@media (max-width: 760px) {
    .series-view { width: calc(100% - 32px); max-width: none; grid-template-columns: 1fr; grid-template-areas: "poster" "info" "navigation"; gap: 24px; }
    .series-view__poster { width: min(var(--series-poster-width), 70vw); height: auto; aspect-ratio: 2 / 3; }
    .series-view { min-height: 0; }
    .series-view__navigation { flex-wrap: wrap; }
    footer.site-footer,
    body.showing-series footer.site-footer { height: 48px; padding-right: 16px; padding-left: 16px; font-size: 11px; }
    footer.site-footer .site-footer__credit { right: 16px; bottom: 16px; }
    .auth-nav { top: 12px; right: 14px; gap: 4px; font-size: .7rem; }
    .auth-nav a { padding: 7px 9px; }
    .auth-nav__user { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 480px) {
    .auth-nav { display: none; }
    body.showing-series .container { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    .series-view__navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .series-view__navigation button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 12px 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; font-size: 14px; font-weight: 500; }
    .series-view__navigation #result-next { border-color: transparent; background: #7c5cff; color: #fff; }
    .series-view__navigation #result-next:not(:disabled):hover { background: #9379ff; }
    .series-nav-label { display: none; }
    .series-nav-label--mobile { display: inline; }
}

.series-loader { display: block; width: min(240px, 100%); height: 3px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.13); }
.series-loader i { display: block; width: 42%; height: 100%; border-radius: inherit; background: #8b71ff; animation: series-loading 1s ease-in-out infinite; }
@keyframes series-loading { from { transform: translateX(-110%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .series-view, .series-view__poster img { transition: none; } .series-loader i { animation: none; width: 100%; } .series-status.is-loading, .series-status.is-loading::before, .series-view.is-loading::before, .series-view.is-loading::after { animation: none; } }

/* Only the recommendation card participates in the editable grid. */
body.showing-series .series-view {
    display: grid;
    grid-template-columns: repeat(var(--series-layout-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(13, minmax(28px, auto));
    grid-auto-rows: minmax(28px, auto);
    gap: var(--series-layout-gap, 12px);
    align-content: start;
    width: 1000px;
    max-width: calc(100% - 32px);
    min-height: 0;
    margin: 0 auto;
}
body.showing-series .series-view__info { display: contents; }
body.showing-series .series-view__poster { width: 100%; height: auto; aspect-ratio: 2 / 3; }
body.showing-series .series-view__poster img { object-fit: cover; }
body.showing-series .series-view #result-title { font-size: var(--series-title-size, 30px); }
@media (max-width: 760px) {
    body.showing-series .series-view {
        grid-template-columns: repeat(var(--series-layout-columns, 4), minmax(0, 1fr));
        grid-template-rows: repeat(18, minmax(28px, auto));
        grid-auto-rows: minmax(28px, auto);
        width: calc(100% - 32px);
        max-width: none;
        min-height: 0;
        gap: min(var(--series-layout-gap, 12px), 16px);
    }
}