:root { color-scheme: dark; --muted:#a1a1aa; --surface:#17171d; --line:#ffffff18; --accent:#fb7185; }
.back-to-top { position:fixed; z-index:45; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); display:grid; place-items:center; width:44px; height:44px; border:1px solid #fb71854d; border-radius:13px; background:var(--surface); color:var(--accent); box-shadow:0 5px 20px #0003; }
.back-to-top[hidden] { display:none; }
.back-to-top:hover { border-color:var(--accent); }
body:has(dialog[open]) .back-to-top { visibility:hidden; }
@media(max-width:600px) { .back-to-top { right:max(14px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom)); } }
/* Episode calendar: one compact day at a time, optional full-week view. */
.schedule-description { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.6; }
.schedule-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.schedule-week-nav { display:flex; align-items:center; gap:12px; }
.schedule-week-nav > span { min-width:146px; text-align:center; font-size:13px; font-weight:700; }
.schedule-all { min-height:36px; padding:7px 14px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:inherit; font-size:12px; font-weight:700; }
.schedule-all[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.schedule-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-bottom:22px; }
.schedule-date { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--muted); }
.schedule-date > span { font-size:11px; font-weight:700; }
.schedule-date > strong { font-size:20px; line-height:1.4; color:inherit; }
.schedule-date > small { font-size:10px; white-space:nowrap; }
.schedule-date.is-active { border-color:#fb718580; background:linear-gradient(135deg,#e11d48,#dc2626); color:#fff; }
.schedule-date.is-today:not(.is-active) { border-color:var(--accent); color:var(--accent); }
.schedule-date:hover:not(.is-active),.schedule-all:hover { border-color:var(--accent); }
.schedule-day .section-title { text-transform:capitalize; flex-wrap:wrap; font-size:15px; gap:8px; }
.schedule-today { padding:3px 7px; border-radius:7px; background:#fb718519; color:var(--accent); font-size:10px; font-weight:600; }
.anime-carousel.schedule-carousel > .schedule-card { flex:0 0 160px; width:160px; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; color:inherit; text-decoration:none; }
.schedule-poster { position:relative; aspect-ratio:2/2.7; overflow:hidden; background:var(--surface); }
.schedule-poster img { display:block; width:100%; height:100%; object-fit:cover; }
.schedule-poster::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#0009); pointer-events:none; }
.schedule-time { display:flex; align-items:center; gap:5px; position:absolute; z-index:1; bottom:9px; left:9px; padding:4px 7px; background:#111218d9; border:1px solid #ffffff26; border-radius:7px; color:#fff; font-size:12px; font-weight:700; }
.schedule-time small { font-size:8px; font-weight:500; opacity:.75; }
.schedule-card-copy { padding:10px 11px; }
.schedule-card-copy h3 { margin:0; font-size:12px; font-weight:750; }
.schedule-card-copy p { margin:7px 0 0; font-size:11px; color:var(--accent); font-weight:650; }
.schedule-no-poster { display:grid; place-items:center; height:100%; font-size:32px; font-weight:800; color:var(--accent); background:linear-gradient(135deg,#fb71851f,transparent); }
.schedule-source { color:var(--muted); font-size:10px; margin:8px 0 0; }
.schedule-empty { padding:22px 18px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); font-size:12px; }
@media(max-width:600px) {
 .schedule-toolbar { gap:8px; }
 .schedule-week-nav { gap:5px; }
 .schedule-week-nav > span { min-width:125px; font-size:11px; }
 .schedule-all { padding:7px 9px; font-size:11px; }
 .schedule-days { gap:4px; margin-bottom:18px; }
 .schedule-date { border-radius:10px; padding:8px 1px; }
 .schedule-date > span { font-size:10px; }
 .schedule-date > strong { font-size:18px; }
 .schedule-date > small { font-size:8px; }
 .anime-carousel.schedule-carousel > .schedule-card { flex-basis:136px; width:136px; border-radius:13px; }
 .schedule-description { font-size:11px; margin-bottom:16px; }
 .schedule-day .section-title { font-size:13px; }
 .schedule-card-copy { padding:9px; }
}
/* The SVG artwork is trimmed to its visible bounds for consistent header sizing. */
body a.site-brand { display:inline-flex; align-items:center; flex-shrink:0; background:none; filter:none; line-height:1; }
body .site-brand .brand-wordmark { display:block; width:205px; height:auto; aspect-ratio:2051 / 421; max-width:none; }
html.light .brand-wordmark { filter:none; }
@media(max-width:767px) { body .site-brand .brand-wordmark { width:168px; } }
@media(max-width:360px) { body .site-brand .brand-wordmark { width:144px; } }
html.light { color-scheme:light; --muted:#52525b; --surface:#fff; --line:#18181b20; --accent:#be123c; }
* { box-sizing:border-box; }
:root { --font-ui:'Plus Jakarta Sans',Arial,sans-serif; }
body { margin:0; }
body.site-shell { font-family:var(--font-ui); line-height:1.5; }
button,input,select,textarea { font-family:inherit; }
body.site-shell h1,body.site-shell h2,body.site-shell h3 { font-family:inherit; }
header button[aria-label="Случайное аниме"] { width:38px; height:38px; padding:0; border-radius:12px; flex-shrink:0; }
@media(max-width:767px) { header button[aria-label="Случайное аниме"] { width:34px; height:34px; border-radius:11px; } }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; pointer-events:none; color:var(--muted); }
main, header > div, .flex-1 { min-width:0; }
button, a, input { -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input::placeholder { color:var(--muted); opacity:1; }
html.light .text-zinc-400, html.light .text-zinc-500 { color:#52525b; }
html.light .text-rose-500, html.light .text-rose-400 { color:#be123c; }
html.light .text-amber-400 { color:#92400e; }
html.light .glass-panel { background:rgba(255,255,255,.92); }
html.light .glass-card { background:#fff; box-shadow:0 4px 18px #18181b08; }
html.light .nav-tab:not(.text-white):hover { color:#be123c; background:#fff1f2; }
html.light .glass-card .bg-black\/20, html.light .glass-card > .bg-black\/30 { background:#f4f4f5; }
html.light .voice-btn:not(.text-white) { background:#f4f4f5; color:#3f3f46; border-color:#d4d4d8; }
html.light #animeKind, html.light #animeStatus, html.light #animeGenresBox > span { background:#fff1f2; color:#9f1239; border-color:#fecdd3; }
html.light #animeMpaa { background:#fffbeb; color:#92400e; }
html.light .border-white\/10, html.light .border-white\/5 { border-color:#18181b12; }
header .site-header-layout { display:grid; grid-template-columns:auto minmax(220px,1fr) auto; gap:24px; }
.site-header-layout > :nth-child(2) { max-width:440px; justify-self:center; }
.telegram-banner { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 200px; min-height:154px; padding:0; margin-top:16px; margin-bottom:28px; border:1px solid #fb71852b; border-radius:22px; overflow:visible; background:#211827; color:white; }
.banner-art { position:relative; min-width:0; align-self:stretch; overflow:visible; background:transparent; pointer-events:none; }
.banner-art img { position:absolute; right:8px; bottom:0; width:auto; max-width:none; height:calc(100% + 34px); object-fit:contain; object-position:center bottom; }
.banner-copy { min-width:0; padding:20px 28px; }
.banner-label { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fda4af; margin-bottom:7px; }
.telegram-banner h2 { font-size:22px; line-height:1.25; font-weight:800; color:#fff; margin-bottom:6px; }
.telegram-banner p { font-size:12px; line-height:1.5; color:#e4e4e7; }
.banner-cta { display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 14px; border-radius:10px; background:#e11d48; color:#fff; font-size:11px; font-weight:700; }
.telegram-banner:hover .banner-cta { background:#be123c; }
html.light .telegram-banner { background:#fff1f2; border-color:#fecdd3; color:#4c172b; }
html.light .telegram-banner h2 { color:#4c172b; }
html.light .telegram-banner p { color:#694451; }
html.light .banner-label { color:#be123c; }
.carousel-section { margin-bottom:28px; min-width:0; }
.carousel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; margin-bottom:10px; }
body .section-title { display:flex; align-items:center; gap:10px; margin:0; font-size:17px; line-height:1.4; font-weight:700; letter-spacing:normal; }
.section-title::before { content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#f43f5e; }
.carousel-controls { display:flex; gap:6px; flex-shrink:0; }
.carousel-arrow { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--accent); }
.carousel-arrow:hover:enabled { border-color:var(--accent); }
.carousel-arrow:disabled { opacity:.3; cursor:default; }
.anime-carousel { display:flex; gap:16px; overflow-x:auto; padding:5px 2px 12px; scroll-snap-type:x mandatory; scroll-padding:2px; scrollbar-width:thin; scrollbar-color:#f43f5e66 transparent; overscroll-behavior-x:contain; }
.anime-carousel::-webkit-scrollbar, #voiceSwitcher::-webkit-scrollbar { height:5px; }
.anime-carousel::-webkit-scrollbar-thumb, #voiceSwitcher::-webkit-scrollbar-thumb { background:#f43f5e66; border-radius:8px; }
.anime-carousel > .glass-card { flex:0 0 200px; width:200px; scroll-snap-align:start; }
#mainContainer .grid > .glass-card { width:100%; min-width:0; }
.anime-card { display:flex; text-decoration:none; color:inherit; }
html.light .anime-card span.text-rose-400 { color:#fda4af; }
html.light .anime-card:hover .group-hover\:text-white { color:white; }
.glass-card h3 { min-height:2.7em; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; }
#voiceSwitcher { min-width:0; max-width:100%; scrollbar-width:thin; scrollbar-color:#f43f5e66 transparent; }
.voice-btn { flex-shrink:0; }
#animeTitle { overflow-wrap:anywhere; line-height:1.15; }
#animeDesc { overflow-wrap:anywhere; }
@media (min-width:768px) and (max-width:1099px) {
 header .site-header-layout { grid-template-columns:auto 1fr; gap:12px 24px; }
 .site-header-layout > nav { grid-column:1 / -1; justify-self:center; }
 .site-header-layout > :nth-child(2) { justify-self:end; }
}
@media(max-width:767px) {
 header.mobile-search-collapsed .site-search-row { display:none; }
 header .site-header-layout { display:flex; gap:10px; padding-top:12px; padding-bottom:10px; }
 .site-header-layout > :nth-child(2) { max-width:none; }
 .site-header-layout nav { justify-content:space-between; }
 .site-header-layout .nav-tab { flex:1; padding-left:9px; padding-right:9px; }
 .telegram-banner { grid-template-columns:minmax(0,1fr) clamp(88px,28vw,150px); min-height:148px; padding:0; margin-bottom:22px; border-radius:18px; }
 .banner-copy { padding:16px 14px; }
 .banner-art img { right:0; height:calc(100% + 30px); }
 .telegram-banner h2 { font-size:18px; }
 .telegram-banner p { font-size:11px; }
 .banner-label { font-size:9px; letter-spacing:.06em; }
 .anime-carousel { gap:12px; }
 .anime-carousel > .glass-card { flex-basis:156px; width:156px; }
 body .section-title { font-size:16px; }
 .carousel-heading { min-height:34px; }
 .carousel-arrow { width:34px; height:34px; }
 .carousel-section { margin-bottom:22px; }
 .watch-header { gap:10px; flex-wrap:wrap; }
 .watch-header > a { font-size:20px; }
 .watch-header > div { gap:6px; }
 .watch-header > div > a { padding:10px; font-size:11px; }
 main .watch-details { padding:18px; gap:20px; }
 main .watch-poster { width:150px; }
 #animeTitle { font-size:24px; }
 #voiceSwitcher { padding-bottom:8px; }
}
@media(max-width:380px) {
 .watch-header .back-label { display:none; }
 .watch-header .back-link { width:36px; height:36px; justify-content:center; padding:0; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }

/* Repeated translucent layers are expensive while scrolling on mobile GPUs. */
body .glass-card, body .glass-card * { backdrop-filter:none; -webkit-backdrop-filter:none; }
body .glass-card { background:#18171d; }
html.light body .glass-card { background:#fff; }
.carousel-section { content-visibility:auto; contain-intrinsic-size:auto 470px; }
#mainContainer .grid > .anime-card { content-visibility:auto; contain-intrinsic-size:auto 390px; }
.poster-frame, .watch-poster { background:#29262f; }
html.light .poster-frame, html.light .watch-poster { background:#e4e4e7; }
.poster-frame img:not(.image-ready), .watch-poster img:not(.image-ready) { opacity:0; }
.poster-frame img.image-failed, .watch-poster img.image-failed { visibility:hidden; }
.skeleton { background:#302a36; border-radius:7px; }
html.light .skeleton { background:#e1dce4; }
.skeleton-heading { width:180px; height:20px; margin-bottom:18px; }
.skeleton-layout { margin-bottom:28px; animation:skeleton-pulse 1.6s ease-in-out infinite alternate; }
.skeleton-row { display:flex; gap:16px; overflow:hidden; }
.skeleton-card { flex:0 0 200px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--surface); }
.skeleton-poster { aspect-ratio:2/3; border-radius:0; }
.skeleton-lines { padding:14px; }
.skeleton-line { height:12px; margin-bottom:10px; }
.skeleton-line.short { width:65%; }
.skeleton-button { height:32px; margin-top:18px; }
.skeleton-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; }
.skeleton-grid .skeleton-card { min-width:0; }
.watch-details.is-loading #animeTitle, .watch-details.is-loading #animeOrigTitle,
.watch-details.is-loading #animeDesc, .watch-details.is-loading .watch-poster { color:transparent; background:#302a36; border-radius:8px; animation:skeleton-pulse 1.6s ease-in-out infinite alternate; }
html.light .watch-details.is-loading #animeTitle, html.light .watch-details.is-loading #animeOrigTitle,
html.light .watch-details.is-loading #animeDesc, html.light .watch-details.is-loading .watch-poster { background:#e1dce4; }
.watch-details.is-loading #animeTitle { min-height:40px; }
.watch-details.is-loading #animeOrigTitle { min-height:14px; width:60%; }
.watch-details.is-loading #animeDesc { min-height:120px; }
.watch-details.is-loading #animeKind, .watch-details.is-loading #animeStatus { visibility:hidden; }
@keyframes skeleton-pulse { from { opacity:.55; } to { opacity:1; } }
@media(max-width:1023px) { .skeleton-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:767px) {
 body .glass-panel { backdrop-filter:none; -webkit-backdrop-filter:none; background:#15131a; }
 html.light body .glass-panel { background:#faf9fb; }
 body .glass-card { box-shadow:none; }
 body .glass-card, body .glass-card img { transition:none; }
 body .glass-card:hover, body .glass-card:hover img { transform:none; }
 .carousel-section { contain-intrinsic-size:auto 395px; }
 .skeleton-row { gap:12px; }
 .skeleton-card { flex-basis:156px; }
 .skeleton-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}
@media(max-width:639px) { .skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .skeleton-layout, .watch-details.is-loading * { animation:none !important; } }

.site-header-layout .nav-tab { display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.25; min-height:34px; }

.catalog-pagination { display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 0 8px; }
.catalog-pagination p { font-size:12px; color:var(--muted); text-align:center; margin:0; }
.catalog-pagination .account-action { min-width:180px; min-height:44px; }
/* Recoverable API loading failures keep the user inside the current section. */
.api-error { position:relative; display:block; width:min(100%,600px); min-height:224px; margin:76px auto 24px; padding:26px 28px 26px 208px; overflow:visible; border:1px solid var(--line); border-radius:22px; background:radial-gradient(ellipse at 0 50%,#fb718514,transparent 65%),var(--surface); text-align:left; }
.api-error-art { position:absolute; display:block; width:206px; height:288px; left:-8px; top:-60px; object-fit:contain; pointer-events:none; }
.api-error-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; text-align:left; }
.api-error-label { color:var(--accent); font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
body .api-error h3 { display:block; min-height:0; margin:7px 0 9px; color:inherit; font-size:20px; line-height:1.3; font-weight:800; }
body .api-error p { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.65; text-align:left; }
.api-error .account-action { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; border:0; border-radius:11px; padding:11px 15px; background:linear-gradient(90deg,#e11d48,#dc2626); color:#fff; font-size:12px; font-weight:750; }
.api-error .account-action:hover { background:#be123c; }
.catalog-pagination .api-error .account-action { min-width:0; }
.watch-details > .api-error { flex:1; }
@media(max-width:600px) {
 .api-error { min-height:210px; padding:22px 18px 22px 128px; margin:48px auto 20px; border-radius:18px; }
 .api-error-art { width:158px; height:221px; left:-18px; top:0; }
 body .api-error h3 { font-size:17px; }
 body .api-error p { font-size:12px; }
 .api-error .account-action { padding:10px 12px; font-size:11px; gap:7px; }
}
@media(max-width:360px) { .api-error { padding:20px 14px 20px 110px; } .api-error-art { width:140px; height:196px; left:-18px; } }
.franchise-description { margin:-4px 0 18px; color:var(--muted); font-size:12px; line-height:1.6; }
#relatedGrid .franchise-card { flex:0 0 200px; width:200px; min-width:0; color:inherit; text-decoration:none; }
.franchise-poster { position:relative; aspect-ratio:2 / 3; background:var(--surface); overflow:hidden; }
.franchise-poster img { width:100%; height:100%; object-fit:cover; }
.franchise-position { position:absolute; top:9px; left:9px; display:grid; place-items:center; min-width:28px; height:28px; padding:0 6px; border-radius:9px; background:#e11d48; color:white; font-size:12px; font-weight:800; }
.franchise-caption { padding:12px; }
.franchise-meta { color:var(--accent); font-size:10px; }
.franchise-caption h4 { font-size:12px; font-weight:750; line-height:1.5; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.franchise-note { display:block; margin-top:8px; color:var(--muted); font-size:10px; }
.franchise-unavailable .franchise-poster img { opacity:.6; }
.franchise-status,#relatedGrid > .api-error { grid-column:1 / -1; }
.franchise-status { font-size:13px; color:var(--muted); padding:18px 0; }
.franchise-section .carousel-heading { gap:12px; }
.franchise-section .carousel-heading h3 { min-width:0; }
.franchise-section .carousel-heading h3 > span:first-child { flex-shrink:0; }
#relatedGrid > .api-error { flex:0 1 560px; }
@media(max-width:767px) { #relatedGrid .franchise-card { flex-basis:156px; width:156px; } }