/* AniHoshi Cinema — child of the AniHoshi theme. Loaded last; redefines the
   AniHoshi tokens (dark + light) and restyles the shell, home and shared parts. */

/* ============ tokens ============ */
:root, html[data-theme="dark"] {
    --hs-bg: #070B11; --hs-bg-2: #0C121A; --hs-bg-3: #111924; --hs-field: #111924; --hs-raise: #172131; --hs-hover: #1A2536;
    --hs-line: #1A2433; --hs-line-2: #243246; --hs-line-ac: #1D4060;
    --hs-tx: #EEF2F6; --hs-tx-2: #C6D1DD; --hs-tx-3: #A3AFBE; --hs-tx-4: #7A8BA0; --hs-tx-5: #55657A;
    --hs-ac: #2EC5E8; --hs-ac-2: #176E84; --hs-ac-soft: rgba(46, 197, 232, 0.14); --hs-ac-tx: #8EE6FA;
    /* fills behind white text are a deeper cyan (>= 4.5:1); accent text and borders keep the bright --hs-ac */
    --hs-ac-fill: #1A7A92; --hs-ac-fill-h: #146477; --hs-ok-fill: #1F7A4D;
    --hs-dub: #F5B451; --hs-dub-tx: #FFC56B; --hs-star: #FFD166; --hs-ok: #3EE08F;
    --hs-radius: 4px; --hs-wrap: 1400px;
    --hs-f-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hs-f-head: 'Outfit', system-ui, sans-serif;
    --cn-rgb: 7, 11, 17;
    --cn-sub: #5CC8F0; --cn-dubc: #FFC56B; --cn-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}
html[data-theme="light"] {
    --hs-bg: #F4F6F9; --hs-bg-2: #FFFFFF; --hs-bg-3: #EDF1F5; --hs-field: #FFFFFF; --hs-raise: #EDF1F5; --hs-hover: #E6ECF2;
    --hs-line: #E1E7EE; --hs-line-2: #CFD8E3; --hs-line-ac: #B9DCEB;
    --hs-tx: #0E1724; --hs-tx-2: #24324A; --hs-tx-3: #475569; --hs-tx-4: #586A80; --hs-tx-5: #66778C;
    /* accent as text/links must read on white (>= 4.5:1): #0EA5D3 was 2.9:1 */
    --hs-ac: #086F8E; --hs-ac-2: #097A9F; --hs-ac-soft: rgba(14, 165, 211, 0.12); --hs-ac-tx: #086F8E;
    /* white text needs >= 4.5:1, so filled accent surfaces use the deeper shade in light mode */
    --hs-ac-fill: var(--hs-ac-2); --hs-ac-fill-h: #086A8C; --hs-ok-fill: #0F7F52;
    --hs-dub: #E09A2B; --hs-dub-tx: #8A5207; --hs-star: #9A6700; --hs-ok: #0F7F52; --hs-hot: #C62828; --hs-danger: #B91C1C;
    --cn-rgb: 244, 246, 249;
    --cn-sub: #0A7299; --cn-dubc: #9A5A07; --cn-shadow: 0 14px 30px rgba(15, 30, 50, 0.16);
    color-scheme: light;
}
body.hs.cn { background: var(--hs-bg); color: var(--hs-tx); font-family: var(--hs-f-body); }
.cn .hs-wrap { padding-left: 32px; padding-right: 32px; }

/* ============ buttons / basics ============ */
.cn .hs-btn { border-radius: 4px; }
.cn .hs-btn-p { background: var(--hs-ac-fill); border-color: var(--hs-ac-fill); box-shadow: none; color: #fff !important; }
.cn .hs-btn-p:hover { background: var(--hs-ac-fill-h); border-color: var(--hs-ac-fill-h); box-shadow: none; }
.cn .hs-btn-o { background: var(--hs-bg-2); border-color: var(--hs-line-2); color: var(--hs-tx) !important; }
.cn .hs-btn-o:hover { border-color: var(--hs-ac); background: var(--hs-bg-2); }
.cn .hs-btn-ghost { background: rgba(var(--cn-rgb), 0.5); border-color: rgba(127, 140, 160, 0.35); color: var(--hs-tx) !important; }
.cn .cn-btn-w { background: var(--hs-tx); color: var(--hs-bg) !important; border-color: var(--hs-tx); }
.cn .cn-btn-w:hover { opacity: 0.9; }
.cn .hs-panel { border-radius: 4px; background: var(--hs-bg-2); border-color: var(--hs-line); }

/* ============ header ============ */
.cn .hs-header { background: rgba(var(--cn-rgb), 0.92); border-bottom: 1px solid var(--hs-line); }
.cn .hs-header .hs-wrap { height: 64px; gap: 26px; }
.cn .hs-nav { gap: 20px; }
.cn .hs-nav .ni { display: inline-block; color: var(--hs-tx-4); transition: color 0.15s; }
.cn .hs-nav > a:hover .ni, .cn .hs-nav > a.on .ni, .cn .hs-nav .hs-dd:hover > button .ni, .cn .hs-nav .hs-dd > button.on .ni { color: var(--hs-ac); }
.cn .hs-nav > a, .cn .hs-nav .hs-dd > button { position: relative; height: 64px; padding: 0; border-radius: 0; background: none !important; color: var(--hs-tx-3); font: 600 14px var(--hs-f-body); }
.cn .hs-nav > a:hover, .cn .hs-nav .hs-dd > button:hover { color: var(--hs-tx); }
.cn .hs-nav > a.on { color: var(--hs-tx); }
.cn .hs-nav > a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--hs-ac); }
.cn .hs-search form { border-radius: 4px; background: rgba(var(--cn-rgb), 0.6); border-color: var(--hs-line-2); }
.cn .hs-ib { border-radius: 4px; }
.cn .hs-lang { border-radius: 4px; }
.cn .hs-lang span { border-radius: 3px; }
.cn-mode .sun { display: none; }
html[data-theme="light"] .cn-mode .sun { display: block; }
html[data-theme="light"] .cn-mode .moon { display: none; }
/* home: header floats over the hero, turns solid once scrolled */
.cn-home .hs-header { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgba(var(--cn-rgb), 0.85), rgba(var(--cn-rgb), 0)); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.2s, border-color 0.2s; }
.cn-home .hs-header.cn-solid { background: rgba(var(--cn-rgb), 0.94); border-bottom-color: var(--hs-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cn-home #body.hs-page { padding-top: 0; }

/* ============ hero ============ */
.cn-hero { position: relative; border-radius: 0; background: var(--hs-bg); margin: 0; }
.cn-hero .swiper-container { height: 620px; }
.cn-slide .bg { background-position: center 25%; transform: none; }
.cn-slide .shade { background: linear-gradient(90deg, rgba(var(--cn-rgb), 0.97) 0%, rgba(var(--cn-rgb), 0.82) 30%, rgba(var(--cn-rgb), 0.2) 62%, rgba(var(--cn-rgb), 0.55) 100%), linear-gradient(0deg, var(--hs-bg) 0%, rgba(var(--cn-rgb), 0) 42%), linear-gradient(180deg, rgba(var(--cn-rgb), 0.7) 0%, rgba(var(--cn-rgb), 0) 18%); }
.cn-slide.nobn .bg { filter: blur(26px) saturate(1.2); transform: scale(1.15); opacity: 0.55; }
.cn-slide-ps { position: absolute; z-index: 1; right: 30%; top: 110px; height: 380px; aspect-ratio: 3 / 4.2; object-fit: cover; border-radius: 4px; box-shadow: var(--cn-shadow); }
.cn-slide-in { position: relative; z-index: 2; height: 100%; }
.cn-slide .in { position: absolute; left: 32px; top: 130px; max-width: 560px; padding: 0; height: auto; display: block; }
.cn-slide .kick { height: 24px; padding: 0 9px; border-radius: 4px; background: var(--hs-ac-soft); color: var(--hs-ac-tx); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; }
.cn-slide .t { margin: 14px 0 12px; font: 800 54px/1.02 var(--hs-f-head); letter-spacing: -0.025em; text-transform: none; color: var(--hs-tx); }
.cn-slide .t.has-logo { margin: 14px 0 12px; }
.cn-slide .hs-tlogo { max-height: 130px; max-width: 460px; }
.cn-slide .m { gap: 8px 10px; font-size: 13.5px; font-weight: 500; color: var(--hs-tx-3); }
.cn-slide .m i { width: 3px; height: 3px; border-radius: 50%; background: var(--hs-tx-4); }
.cn-slide .m .sc { color: var(--hs-star); font-weight: 700; }
.cn-slide .m .q { height: 20px; padding: 0 6px; border-radius: 3px; border: 1px solid var(--hs-line-2); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; gap: 3px; color: var(--hs-tx-2); }
.cn-slide .m .q.s { color: var(--cn-sub); border-color: rgba(92, 200, 240, 0.4); }
.cn-slide .m .q.d { color: var(--cn-dubc); border-color: rgba(245, 180, 81, 0.45); }
.cn-slide .d { margin: 14px 0 20px; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--hs-tx-3); }
.cn-slide .b { gap: 8px; margin: 0; }
.cn-slide .b .hs-btn { height: 42px; padding: 0 18px; font-size: 14px; }
.cn-hero .swiper-pagination { display: none; }

/* ============ section headings ============ */
.cn-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cn-sh h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 21px var(--hs-f-head); letter-spacing: -0.01em; color: var(--hs-tx); }
.cn-sh h2 small { font: 600 12px var(--hs-f-body); color: var(--hs-tx-4); }
.cn-sh-r { display: flex; align-items: center; gap: 18px; }
.cn-hi { width: 26px; height: 26px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--hs-ac-soft); color: var(--hs-ac); flex-shrink: 0; }
.cn-hi.g { background: rgba(255, 209, 102, 0.12); color: var(--hs-star); }
.cn-hi.c { background: rgba(62, 224, 143, 0.12); color: var(--hs-ok); }
.cn-hi-hot { background: rgba(255, 140, 66, 0.14); color: #FF9F5A; }
.cn-ut { display: flex; gap: 18px; font: 600 13.5px var(--hs-f-body); }
.cn-ut .tab { position: relative; padding: 4px 0; color: var(--hs-tx-4); cursor: pointer; }
.cn-ut .tab:hover { color: var(--hs-tx); }
.cn-ut .tab.active { color: var(--hs-tx); }
.cn-ut .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--hs-ac); }
.cn-arrows { display: flex; gap: 4px; }
.cn-arrows > button, .cn-arrows > span { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--hs-line-2); background: var(--hs-bg-2); color: var(--hs-tx-3); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cn-arrows > *:hover:not(:disabled):not(.disabled) { border-color: var(--hs-ac); color: var(--hs-tx); }
.cn-arrows > *:disabled, .cn-arrows > .disabled { opacity: 0.35; cursor: default; }
.cn-more { font: 600 13px var(--hs-f-body); color: var(--hs-tx-4); }
.cn-more:hover { color: var(--hs-ac); }

/* ============ top 10 ============ */
.cn-main { padding-top: 0; }
.cn-top10 { position: relative; z-index: 5; margin-top: -118px; }
.cn-rail { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 0 10px; -webkit-mask: linear-gradient(90deg, #000 0, #000 calc(100% - 70px), transparent); mask: linear-gradient(90deg, #000 0, #000 calc(100% - 70px), transparent); }
.cn-rail::-webkit-scrollbar { display: none; }
.cn-rail.atend { -webkit-mask: none; mask: none; }
.cn-t10i { flex: 0 0 auto; display: flex; align-items: flex-end; scroll-snap-align: start; padding-right: 14px; }
.cn-t10i .n { font: 400 176px/0.8 'Anton', Impact, sans-serif; color: rgba(127, 140, 160, 0.04); -webkit-text-stroke: 2.5px #44556C; margin-right: -20px; position: relative; z-index: 1; transition: -webkit-text-stroke-color 0.2s; }
.cn-t10i.r1 .n { -webkit-text-stroke-color: var(--hs-ac); }
.cn-t10i.r2 .n, .cn-t10i.r3 .n { -webkit-text-stroke-color: #7C8DA5; }
.cn-t10i:hover .n { -webkit-text-stroke-color: var(--hs-tx); }
html[data-theme="light"] .cn-t10i .n { -webkit-text-stroke-color: #B6C2D1; }
html[data-theme="light"] .cn-t10i.r1 .n { -webkit-text-stroke-color: var(--hs-ac); }
html[data-theme="light"] .cn-t10i.r2 .n, html[data-theme="light"] .cn-t10i.r3 .n { -webkit-text-stroke-color: #8A9AB0; }
.cn-t10i .pc { position: relative; z-index: 2; width: 146px; aspect-ratio: 3 / 4.2; border-radius: 4px; overflow: hidden; box-shadow: var(--cn-shadow); background: var(--hs-bg-3); transition: transform 0.25s; }
.cn-t10i:hover .pc { transform: translateY(-6px); }
.cn-t10i .pc img { width: 100%; height: 100%; object-fit: cover; }
.cn-t10i .pc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 9, 14, 0.95) 0%, rgba(5, 9, 14, 0.35) 38%, rgba(5, 9, 14, 0) 60%); }
.cn-t10i .in { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; }
.cn-t10i .in b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 12.5px; line-height: 1.25; color: #fff; }
.cn-t10i .in small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 600; font-size: 10.5px; color: #C9D4E0; }
.cn-t10i .in small .s { color: #7FDDF4; display: inline-flex; align-items: center; gap: 2px; }
.cn-t10i .pl { position: absolute; z-index: 3; left: 50%; top: 40%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--hs-ac-fill); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transition: opacity 0.2s, transform 0.2s; }
.cn-t10i:hover .pl { opacity: 1; transform: none; }
.cn-prog { height: 2px; background: var(--hs-line); border-radius: 1px; overflow: hidden; }
.cn-prog i { display: block; height: 100%; width: 30%; background: var(--hs-ac); border-radius: 1px; transition: margin-left 0.15s, width 0.15s; }

/* ============ body grid ============ */
.cn-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; padding-top: 44px; padding-bottom: 20px; }
.cn-col { min-width: 0; }
.cn-sec { margin-bottom: 36px; }
.cn-sec:last-child { margin-bottom: 0; }

/* cards (latest episodes grid) */
.cn .hs-grid.hs-grid-6 { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 14px; }
.cn .cn-card { gap: 0; }
.cn .cn-card .frame { border-radius: 4px; aspect-ratio: 3 / 4.2; background: var(--hs-bg-3); }
.cn .cn-card .frame::after { display: none; }
.cn .cn-card .frame img { transition: transform 0.3s; }
.cn .cn-card:hover .frame img { transform: scale(1.04); }
.cn-ty { position: absolute; z-index: 2; left: 6px; top: 6px; height: 20px; padding: 0 6px; border-radius: 3px; background: rgba(7, 11, 17, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font: 700 10.5px var(--hs-f-body); letter-spacing: 0.04em; display: flex; align-items: center; }
.cn-tag { position: absolute; z-index: 2; right: 6px; top: 6px; height: 20px; padding: 0 6px; border-radius: 3px; background: var(--hs-ac-fill); color: #fff; font: 800 10px var(--hs-f-body); display: flex; align-items: center; }
.cn-tag.cn-18 { background: #D8344F; }
html[data-theme="light"] .cn-ty { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.06); color: var(--hs-tx); }
.cn .cn-card .hs-cb-eps { height: 24px; background: rgba(5, 9, 14, 0.9) !important; }
html[data-theme="light"] .cn .cn-card .hs-cb-eps { background: rgba(255, 255, 255, 0.95) !important; border-top-color: var(--hs-line) !important; }
html[data-theme="light"] .cn .hs-cb-eps > span + span { border-left-color: var(--hs-line) !important; }
html[data-theme="light"] .cn .hs-cb-eps .s { color: var(--cn-sub) !important; }
html[data-theme="light"] .cn .hs-cb-eps .d { color: var(--cn-dubc) !important; }
html[data-theme="light"] .cn .hs-cb-eps .t { color: var(--hs-tx-3) !important; }
.cn .cn-card .ttl { margin-top: 8px; font: 600 14px/1.35 var(--hs-f-body); color: var(--hs-tx); }
.cn .cn-card:hover .ttl { color: var(--hs-ac); }

/* continue watching */
.cn-cwl { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cn-cwl::-webkit-scrollbar { display: none; }
.cn-cwc { position: relative; flex: 0 0 calc((100% - 42px) / 4); min-width: 220px; scroll-snap-align: start; }
.cn-cwc .bn { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--hs-bg-3); }
.cn-cwc .bn img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 0.3s; }
.cn-cwc:hover .bn img { transform: scale(1.04); }
.cn-cwc .bn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 9, 14, 0.9) 0%, rgba(5, 9, 14, 0) 55%); }
.cn-cwc .ep { position: absolute; z-index: 2; left: 8px; bottom: 12px; font-weight: 700; font-size: 12px; color: #fff; }
.cn-cwc .ep span { color: #C3CEDA; font-weight: 600; }
.cn-cwc .lf { position: absolute; z-index: 2; right: 8px; bottom: 12px; font-weight: 600; font-size: 11px; color: #C3CEDA; }
.cn-cwc .pl { position: absolute; z-index: 2; left: 50%; top: 44%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(5, 9, 14, 0.6); border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.cn-cwc:hover .pl { opacity: 1; }
.cn-cwc .x { position: absolute; z-index: 3; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 4px; border: 0; background: rgba(5, 9, 14, 0.75); color: #C3CEDA; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.cn-cwc:hover .x, .cn-cwc .x:focus-visible { opacity: 1; }
.cn-cwc .x:hover { color: #fff; background: #D8344F; }
.cn-cwc .pr { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.18); }
.cn-cwc .pr i { display: block; height: 100%; background: var(--hs-ac); }
.cn-cwc .t { display: block; margin-top: 8px; font-weight: 600; font-size: 13.5px; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-cwc:hover .t { color: var(--hs-ac); }
.cn-cwc small { color: var(--hs-tx-4); font-size: 11.5px; }

/* fresh picks list */
.cn-fpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 28px; }
.cn-fpl[style*="none"] { display: none !important; }
.cn-li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hs-line); min-width: 0; }
.cn-li .ps { flex-shrink: 0; }
.cn-li img { width: 42px; height: 58px; border-radius: 3px; object-fit: cover; display: block; }
.cn-li .tx { min-width: 0; display: flex; flex-direction: column; }
.cn-li b { font-weight: 600; font-size: 13.5px; color: var(--hs-tx); }
.cn-li:hover b { color: var(--hs-ac); }
.cn-li small { display: flex; gap: 6px; align-items: center; color: var(--hs-tx-4); font-size: 12px; }
.cn-li small .s { color: var(--cn-sub); display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.cn-li small .d { color: var(--cn-dubc); display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }

/* watch together (intro + public rooms) */
.cn-w2g { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); border: 1px solid var(--hs-line-2); border-radius: 4px; overflow: hidden; background: linear-gradient(120deg, rgba(46, 197, 232, 0.1), rgba(46, 197, 232, 0) 45%), var(--hs-bg-2); }
.cn-w2g-in { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.cn-live-dot { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ok); }
.cn-live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(62, 224, 143, 0.18); }
.cn-w2g h2 { margin: 10px 0 6px; font: 700 22px/1.2 var(--hs-f-head); color: var(--hs-tx); }
.cn-w2g p { margin: 0 0 14px; color: var(--hs-tx-3); font-size: 14px; line-height: 1.6; }
.cn-w2g ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cn-w2g li { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--hs-tx-2); }
.cn-w2g li svg { color: var(--hs-ac); }
.cn-w2g-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.cn-rooms { padding: 18px 20px; border-left: 1px solid var(--hs-line); background: rgba(var(--cn-rgb), 0.35); }
.cn-rooms-hd { display: flex; justify-content: space-between; margin-bottom: 6px; font: 700 10.5px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-tx-4); }
.cn-on { letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--hs-ok); }
.cn-room { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hs-line); }
.cn-room:last-child { border-bottom: 0; }
.cn-room .th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; background: var(--hs-bg-3); }
.cn-room .th img { width: 100%; height: 100%; object-fit: cover; }
.cn-room .st { position: absolute; left: 4px; top: 4px; height: 16px; padding: 0 5px; border-radius: 2px; background: rgba(5, 9, 14, 0.85); color: #C3CEDA; font: 800 9px var(--hs-f-body); letter-spacing: 0.06em; display: flex; align-items: center; }
.cn-room .st.live { background: #E5484D; color: #fff; }
.cn-room .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-room .tx b { font-weight: 600; font-size: 13.5px; color: var(--hs-tx); }
.cn-room:hover .tx b { color: var(--hs-ac); }
.cn-room .tx small { color: var(--hs-tx-4); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-room .hst { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--hs-tx-3); }
.cn-room .hst img { border-radius: 50%; object-fit: cover; }
.cn-room .mb { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--hs-line-2); font-weight: 700; font-size: 11.5px; color: var(--hs-tx-2); }
.cn-rooms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: calc(100% - 20px); min-height: 160px; text-align: center; color: var(--hs-tx-4); font-size: 12.5px; }
.cn-rooms-empty svg { color: var(--hs-tx-5); }
.cn-rooms-empty b { color: var(--hs-tx-2); font-size: 14px; }
/* "start a room" ideas filling the list when few rooms are open */
.cn-rooms-sub { margin: 12px 0 2px; font: 700 10.5px var(--hs-f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-tx-4); }
.cn-room.is-idea .th { opacity: 0.75; transition: opacity 0.15s; }
.cn-room.is-idea .th::after { content: ""; position: absolute; inset: 0; border: 1px dashed var(--hs-line-2); border-radius: 3px; }
.cn-room.is-idea:hover .th { opacity: 1; }
.cn-room .go { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 4px; background: var(--hs-ac-soft); color: var(--hs-ac); font-weight: 700; font-size: 11.5px; transition: background 0.15s, color 0.15s; }
.cn-room.is-idea:hover .go { background: var(--hs-ac-fill); color: #fff; }

/* ============ sidebar widgets ============ */
.cn-wg { margin-bottom: 30px; }
.cn-wh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cn-wh h3 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-tx); white-space: nowrap; }
.cn-wh .cn-hi { width: 24px; height: 24px; }
.cn-wh .rule { flex: 1; height: 1px; background: var(--hs-line-2); }
.cn-wh a { font-weight: 600; font-size: 12px; color: var(--hs-tx-4); white-space: nowrap; }
.cn-wh a:hover { color: var(--hs-ac); }
/* schedule */
.cn-sched .cn-days { position: relative; display: flex; align-items: stretch; border: 1px solid var(--hs-line); border-radius: 4px; overflow: hidden; }
.cn-sched .cn-days > .prev, .cn-sched .cn-days > .next { display: none; }
.cn-sched .swiper-container { flex: 1; overflow: hidden; }
.cn-sched .swiper-wrapper { display: grid !important; grid-template-columns: repeat(7, 1fr); transform: none !important; }
.cn-sched .day { width: auto !important; margin: 0 !important; }
.cn-sched .day + .day { border-left: 1px solid var(--hs-line); }
.cn-sched .inner { display: flex; flex-direction: column; align-items: center; padding: 6px 0; font: 700 10.5px var(--hs-f-body); letter-spacing: 0.04em; color: var(--hs-tx-4); cursor: pointer; }
.cn-sched .inner b { font-size: 14px; color: var(--hs-tx-3); letter-spacing: 0; }
.cn-sched .day.active .inner { background: var(--hs-ac-fill); color: #E6FAFF; }
.cn-sched .day.active .inner b { color: #fff; }
.cn-now { display: flex; justify-content: space-between; margin: 8px 0 2px; font-size: 11.5px; color: var(--hs-tx-4); }
.cn-now .timenow { font-weight: 700; color: var(--hs-tx-2); font-variant-numeric: tabular-nums; }
.cn-sl a { display: grid; grid-template-columns: 46px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hs-line); }
.cn-sl time { font-weight: 700; font-size: 13px; color: var(--hs-tx-3); font-variant-numeric: tabular-nums; }
.cn-sl .ps img { width: 30px; height: 42px; border-radius: 3px; object-fit: cover; display: block; }
.cn-sl .ps { width: 30px; height: 42px; border-radius: 3px; background: var(--hs-bg-3); }
.cn-sl .tx { min-width: 0; }
.cn-sl b { display: block; font-weight: 600; font-size: 13px; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sl a:hover b { color: var(--hs-ac); }
.cn-sl em { font-style: normal; font-weight: 700; font-size: 11px; color: var(--hs-tx-4); }
.cn-sl a.old { opacity: 0.55; }
.cn-sl a.nx { background: linear-gradient(90deg, var(--hs-ac-soft), transparent); box-shadow: inset 2px 0 0 var(--hs-ac); padding-left: 8px; margin-left: -8px; }
.cn-sl a.nx time { color: var(--hs-ac); }
.cn-sl a.nx em, .cn-sl .cdn { color: var(--hs-ac-tx); }
.cn-sl .cdn { display: block; font-weight: 600; font-size: 11px; }
.cn-sl-empty { padding: 18px 0; text-align: center; font-size: 12.5px; color: var(--hs-tx-4); }
/* just completed */
.cn-cl a { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hs-line); }
.cn-cl .n { width: 18px; flex-shrink: 0; font-weight: 800; font-size: 13px; color: var(--hs-tx-4); text-align: center; }
.cn-cl img { width: 30px; height: 42px; border-radius: 3px; object-fit: cover; display: block; }
.cn-cl .tx { min-width: 0; display: flex; flex-direction: column; }
.cn-cl b { font-weight: 600; font-size: 13px; color: var(--hs-tx); }
.cn-cl a:hover b { color: var(--hs-ac); }
.cn-cl small { color: var(--hs-tx-4); font-size: 11.5px; }
.cn-cl small .st { color: var(--hs-star); font-weight: 700; }
/* community */
.cn-sub { margin: 0 0 4px; font: 700 10.5px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-tx-4); }
.cn-th { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hs-line); }
.cn-th .rc { height: 40px; border-radius: 4px; background: var(--hs-bg-3); border: 1px solid var(--hs-line); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cn-th .rc b { font-weight: 800; font-size: 13px; color: var(--hs-tx); }
.cn-th .rc small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--hs-tx-4); margin-top: 2px; text-transform: uppercase; }
.cn-th.hot .rc { border-color: rgba(255, 140, 66, 0.45); background: rgba(255, 140, 66, 0.08); }
.cn-th.hot .rc b { color: #FF9F5A; }
.cn-th .tx { min-width: 0; display: flex; flex-direction: column; }
.cn-th .k { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.cn-th .k i { font-style: normal; color: #FF9F5A; letter-spacing: 0; }
html[data-theme="light"] .cn-th .k { filter: saturate(1.3) brightness(0.75); }
.cn-th .tx > b { font-weight: 600; font-size: 13px; margin: 2px 0 5px; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-th:hover .tx > b { color: var(--hs-ac); }
.cn-th .lr { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--hs-tx-4); min-width: 0; }
.cn-th .lr img { border-radius: 50%; object-fit: cover; }
.cn-th .lr span { color: var(--hs-tx-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-th .lr time { margin-left: auto; flex-shrink: 0; font-size: 11px; }
.cn-cm-empty { padding: 16px 0; font-size: 12.5px; color: var(--hs-tx-4); border-bottom: 1px solid var(--hs-line); }
.cn-cf { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.cn-cf > a:first-child { font-weight: 600; font-size: 12.5px; color: var(--hs-tx-3); }
.cn-cf > a:first-child:hover { color: var(--hs-ac); }

/* ============ hover card (tooltip) ============ */
.cn .tooltipster-base.tooltipster-sidetip .tooltipster-box { border-radius: 4px !important; background: var(--hs-bg-2) !important; border-color: var(--hs-line-2) !important; overflow: hidden; }
html[data-theme="light"] .tooltipster-base.tooltipster-sidetip .tooltipster-box { box-shadow: 0 24px 50px rgba(15, 30, 50, 0.2); }
.cn .tooltipster-sidetip .tooltipster-content { color: var(--hs-tx) !important; font-family: var(--hs-f-body) !important; }
.cn-tip .bn { position: relative; height: 96px; background-size: cover; background-position: center 22%; }
.cn-tip .bn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--hs-bg-2) 0%, rgba(var(--cn-rgb), 0.35) 60%, rgba(var(--cn-rgb), 0.05)); }
.cn-tip .sc { position: absolute; z-index: 2; right: 10px; top: 10px; height: 22px; padding: 0 7px; border-radius: 3px; background: rgba(5, 9, 14, 0.85); color: #FFD166; font-weight: 800; font-size: 12px; display: flex; align-items: center; }
.cn-tip .st { position: absolute; z-index: 2; left: 10px; top: 10px; height: 22px; padding: 0 7px; border-radius: 3px; background: rgba(5, 9, 14, 0.85); color: #C3CEDA; font-weight: 700; font-size: 11px; display: flex; align-items: center; gap: 5px; }
.cn-tip .st.on { color: #3EE08F; }
.cn-tip .st.on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cn-tip .bd { position: relative; z-index: 2; margin-top: -26px; padding: 0 14px 14px; }
.cn-tip .t { font: 700 17px/1.2 var(--hs-f-head); color: var(--hs-tx); }
.cn-tip .j { margin-top: 2px; font-size: 12px; color: var(--hs-tx-4); }
.cn-tip .ch { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.cn-tip .ch span { height: 22px; padding: 0 7px; border-radius: 3px; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 11px; border: 1px solid var(--hs-line-2); color: var(--hs-tx-3); }
.cn-tip .ch .s { color: var(--cn-sub); border-color: rgba(92, 200, 240, 0.35); background: rgba(92, 200, 240, 0.08); }
.cn-tip .ch .d { color: var(--cn-dubc); border-color: rgba(255, 197, 107, 0.35); background: rgba(255, 197, 107, 0.08); }
.cn-tip p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--hs-tx-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cn-tip dl { display: grid; grid-template-columns: 62px 1fr; gap: 4px 10px; margin: 0 0 10px; font-size: 12px; }
.cn-tip dt { color: var(--hs-tx-4); }
.cn-tip dd { margin: 0; color: var(--hs-tx); }
.cn-tip .gn { display: flex; flex-wrap: wrap; gap: 4px; height: 22px; overflow: hidden; margin-bottom: 12px; } /* one row only: chips that don't fit wrap out of view, never half-cut */
.cn-tip .gn a { height: 22px; padding: 0 8px; border-radius: 3px; background: var(--hs-raise); font-weight: 600; font-size: 11.5px; color: var(--hs-tx-3); display: inline-flex; align-items: center; }
.cn-tip .gn a:hover { background: var(--hs-ac-fill); color: #fff; }
.cn-tip .ac { display: flex; gap: 6px; }
.cn-tip .ac > .hs-btn { flex: 1; height: 34px; font-size: 13px; }
.cn-tip .ac .hs-sq { width: 34px; height: 34px; }

/* ============ footer ============ */
.cn .hs-footer { background: var(--hs-bg-2); border-top: 1px solid var(--hs-line); }
html[data-theme="dark"] .cn .hs-footer, .cn .hs-footer { --cn-foot: 1; }
.cn .hs-foot-bar { border-top-color: var(--hs-line); }
.cn .hs-az-sm a { border-radius: 3px; }

/* ============ light mode: shared AniHoshi parts ============ */
html[data-theme="light"] .hs-header .hs-logo-text { color: var(--hs-tx); }
html[data-theme="light"] .hs-logo-text, html[data-theme="light"] .hs-logo-text > :not(.hs-logo-tail) { color: var(--hs-tx); }
html[data-theme="light"] .hs-dd-menu, html[data-theme="light"] .dropdown-menu, html[data-theme="light"] .search-popup { background: #fff !important; border-color: var(--hs-line-2) !important; color: var(--hs-tx) !important; box-shadow: 0 18px 40px rgba(15, 30, 50, 0.16) !important; }
html[data-theme="light"] .hs-dd-menu a, html[data-theme="light"] .dropdown-menu a, html[data-theme="light"] .dropdown-item { color: var(--hs-tx-2) !important; }
html[data-theme="light"] .hs-dd-menu a:hover, html[data-theme="light"] .dropdown-menu a:hover { background: var(--hs-raise) !important; color: var(--hs-tx) !important; }
html[data-theme="light"] .modal-content { background: #fff !important; color: var(--hs-tx) !important; border-color: var(--hs-line-2) !important; }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { color: var(--hs-tx); }
html[data-theme="light"] .hs-drawer .in { background: #fff; }
html[data-theme="light"] .hs-bnav { background: rgba(255, 255, 255, 0.96); border-top-color: var(--hs-line); }


/* ============ responsive ============ */
@media (max-width: 1280px) {
    .cn-body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .cn-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 36px; align-items: start; padding-top: 26px; border-top: 1px solid var(--hs-line); }
}
@media (max-width: 1100px) {
    .cn .hs-nav { gap: 14px; }
}
@media (max-width: 900px) {
    .cn-w2g { grid-template-columns: 1fr; }
    .cn-rooms { border-left: 0; border-top: 1px solid var(--hs-line); }
}
@media (max-width: 760px) {
    .cn .hs-wrap { padding-left: 14px; padding-right: 14px; }
    .cn-hero .swiper-container { height: 430px; }
    .cn-slide .in { left: 14px; right: 14px; top: auto; bottom: 130px; max-width: none; }
    .cn-slide .t { font-size: 30px; margin: 10px 0 8px; }
    .cn-slide .hs-tlogo { max-height: 80px; max-width: 260px; }
    .cn-slide .d, .cn-slide .m .hm { display: none; }
    .cn-slide .b { margin-top: 12px; }
    .cn-slide .b .hs-btn { height: 38px; padding: 0 14px; font-size: 13px; }
    .cn-slide-ps { right: 14px; top: 70px; height: 190px; opacity: 0.9; }
    .cn-top10 { margin-top: -110px; }
    .cn-rail { gap: 2px; }
    .cn-t10i { padding-right: 8px; }
    .cn-t10i .n { font-size: 112px; -webkit-text-stroke-width: 2px; margin-right: -12px; }
    .cn-t10i .pc { width: 100px; }
    .cn-t10i .in small { display: none; }
    .cn-top10 .cn-arrows { display: none; }
    .cn-sh-r { gap: 12px; width: 100%; justify-content: space-between; }
    .cn-ut { gap: 14px; overflow-x: auto; scrollbar-width: none; font-size: 13px; }
    .cn .hs-grid.hs-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
    .cn-cwc { flex-basis: 78%; min-width: 0; }
    .cn-fpl { grid-template-columns: 1fr; }
    .cn-side { grid-template-columns: minmax(0, 1fr); }
    .cn-body { padding-top: 30px; }
    .cn-room { grid-template-columns: 84px minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cn-t10i .pc, .cn-cwc .bn img, .cn .cn-card .frame img { transition: none; }
}

/* fixes after first live run */
@media (min-width: 1281px) {
    .cn-side { position: sticky; top: 84px; align-self: start; }
}
@media (max-width: 760px) {
    .cn .hs-actions .cn-mode { display: none; }
    .cn-sh-r, .cn-ut { min-width: 0; }
    .cn-sh-r { flex-wrap: nowrap; }
    .cn-body, .cn-col, .cn-sec { max-width: 100%; }
}

/* =====================================================================
   Watch page, filter / listing, legacy pages — Cinema look + light mode
   ===================================================================== */
.cn .hs-panel { border-radius: 4px; }
.cn #player-wrapper { border-radius: 4px; }

/* watch: info */
.cn .hs-info .title { font: 800 34px/1.1 var(--hs-f-head) !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--hs-tx); }
.cn .hs-info .names { color: var(--hs-ac-tx); }
.cn .hs-info .poster img { border-radius: 4px; }
.cn .hs-b { border-radius: 3px; }
html[data-theme="light"] .hs-b-hd { background: var(--hs-tx); color: #fff; }
html[data-theme="light"] .hs-b-line { border-color: var(--hs-line-2); color: var(--hs-tx-2); }
html[data-theme="light"] .hs-b-mute { background: var(--hs-raise); color: var(--hs-tx-2); }
.cn .hs-info .synopsis .content { color: var(--hs-tx-3); }
.cn .hs-info .meta dd, .cn .hs-info .meta dd a { color: var(--hs-tx); }
.cn .hs-info .meta dt { color: var(--hs-tx-4); }
.cn .hs-chip { border-radius: 3px; background: var(--hs-raise); border-color: var(--hs-line); color: var(--hs-tx-2) !important; }
.cn #w-rating { border-radius: 4px; background: var(--hs-bg-3); border-color: var(--hs-line); }

/* watch: controls */
.cn .hs-ctrls { border-radius: 4px; }
.cn .hs-ctrls .ctrl { border-radius: 4px; color: var(--hs-tx-3); }
.cn .hs-ctrls .ctrl:hover { color: var(--hs-tx); }
html[data-theme="light"] .hs-ctrls .ctrl .sw { background: #C9D3DE; }
html[data-theme="light"] .hs-ctrls .ctrl .sw::after { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
html[data-theme="light"] .hs-ctrls .ctrl .sw.on { background: var(--hs-ac); }

/* watch: servers */
.cn .hs-srv-tip { background: var(--hs-bg-3); }
.cn .hs-srv .type li { border-radius: 4px; background: var(--hs-raise); color: var(--hs-tx-2); }
.cn .hs-srv .type li:hover { background: var(--hs-hover); color: var(--hs-tx); }
.cn .hs-srv .type li.active { background: var(--hs-ac-fill); color: #fff; }
.cn .hs-srv .type label { border-radius: 4px; }
html[data-theme="light"] .hs-srv .type label { background: rgba(14, 165, 211, 0.12); color: #0B7FA3; }
html[data-theme="light"] .hs-srv .type[data-type="hsub"] label { background: rgba(124, 92, 255, 0.12); color: #6A4FE0; }
html[data-theme="light"] .hs-srv .type[data-type="dub"] label, html[data-theme="light"] .hs-srv .type[data-type="adub"] label { background: rgba(224, 154, 43, 0.14); color: #A8650A; }
html[data-theme="light"] .hs-srv .type[data-type="dub"] li.active { background: #D98A1F; }

/* watch: episodes */
.cn .hs-epv, .cn .hs-epv button { border-radius: 4px; }
.cn #w-episodes .episodes a { border-radius: 4px; }
html[data-theme="light"] #w-episodes .episodes a { background: var(--hs-raise); border-color: var(--hs-line); color: var(--hs-tx-2); }
html[data-theme="light"] #w-episodes .episodes a.active { background: var(--hs-ac-fill); border-color: var(--hs-ac-fill); color: #fff; }
html[data-theme="light"] #w-episodes[data-view="thumb"] .episodes a .th .pg { color: #fff; }

/* watch: seasons / related / sidebar trending */
.cn .hs-seasons .season a, .cn .hs-rel3 a { border-radius: 4px; }
.cn .hs-tr { border-radius: 4px; background: var(--hs-bg-3); border: 1px solid var(--hs-line); }
.cn .hs-tr .tx > .t { color: var(--hs-tx); }
html[data-theme="light"] .hs-tr:hover { background: var(--hs-raise); }
html[data-theme="light"] .hs-tr .rk { -webkit-text-stroke-color: var(--hs-ac); }

/* watch: next-episode bar + comments */
.cn .hs-next, .cn .hs-nextep { border-radius: 4px; }
html[data-theme="light"] .hs-comments, html[data-theme="light"] #comments { color: var(--hs-tx); }
/* comments.css only ships dark --cm-* tokens (white text): retint them for light mode */
html[data-theme="light"] #comments.block_area-comment, html[data-theme="light"] .block_area.block_area-comment { --cm-body: var(--hs-bg); --cm-text: var(--hs-tx); --cm-mute: var(--hs-tx-3); --cm-mute-2: var(--hs-tx-4); --cm-line: var(--hs-line); --cm-line-strong: var(--hs-line-2); --cm-soft: rgba(14, 23, 36, 0.04); --cm-soft-hov: var(--hs-hover); --cm-acc2: var(--hs-ac-tx); --cm-acc2-rgb: 11, 127, 163; }
html[data-theme="light"] .block_area-comment .cw_l-line .ihead .user-name, html[data-theme="light"] .block_area-comment .cm-body strong, html[data-theme="light"] .block_area-comment .cm-body h3,
html[data-theme="light"] .block_area-comment .sc-header .btn[aria-expanded="true"], html[data-theme="light"] .block_area-comment .cm-fmt-btn:focus, html[data-theme="light"] .block_area-comment .cm-fmt-btn.is-active,
html[data-theme="light"] .block_area-comment .ci-emo .cb-icon:focus, html[data-theme="light"] .block_area-comment .cw_l-line .ibody .show-spoil .btn, html[data-theme="light"] .block_area-comment .cw_l-line .ibottom .ib-li .btn:hover,
html[data-theme="light"] .block_area-comment .rep-more.rep-in .cm-btn-show-rep:hover, html[data-theme="light"] .block_area-comment #cm-view-more:hover { color: var(--hs-tx) !important; }
html[data-theme="light"] .block_area-comment .cw_l-line .ihead .user-name:hover { color: var(--hs-ac-tx) !important; }
html[data-theme="light"] .block_area-comment .cw_l-line .ihead .user-name.is-level-a { color: var(--hs-dub-tx) !important; }
html[data-theme="light"] #comments .reaction, html[data-theme="light"] #cm-reactions .item, html[data-theme="light"] #cm-reactions > * { background: #fff; border-color: var(--hs-line-2); color: var(--hs-tx-2); }
html[data-theme="light"] #comments .cm-tool, html[data-theme="light"] #comments .tools, html[data-theme="light"] #comments .sort, html[data-theme="light"] #comments .count, html[data-theme="light"] #comments .dropdown-toggle { color: var(--hs-tx-2) !important; }
html[data-theme="light"] #comments textarea, html[data-theme="light"] #comments .editor, html[data-theme="light"] #comments .form-control, html[data-theme="light"] #comments [contenteditable] { background: #fff !important; border-color: var(--hs-line-2) !important; color: var(--hs-tx) !important; }

/* filter / listing */
.cn .hs-btitle { color: var(--hs-tx) !important; }
.cn .hs-f-kw input { background: var(--hs-bg-2); box-shadow: inset 0 0 0 1px var(--hs-line-2); color: var(--hs-tx); }
.cn .hs-fb { background: var(--hs-raise); color: var(--hs-tx-3); }
.cn .hs-fb:hover { background: var(--hs-hover); color: var(--hs-tx); }
.cn .hs-filters .dropdown.show .hs-fb { background: var(--hs-ac-soft); box-shadow: inset 0 0 0 1px var(--hs-ac); color: var(--hs-tx); }
.cn .hs-filters .dropdown-menu { border-radius: 4px; background: var(--hs-bg-2); border-color: var(--hs-line-2); }
.cn .hs-filters .dropdown-menu li > label { border-radius: 3px; color: var(--hs-tx-3); }
.cn .hs-filters .dropdown-menu li > label:hover, .cn .hs-filters .dropdown-menu li > input:checked + label { color: var(--hs-tx); }
.cn .hs-f-go .hs-btn-o { background: transparent; border-color: var(--hs-line-2); color: var(--hs-tx-3) !important; }
.cn .hs-vt button[aria-pressed="true"] { background: var(--hs-raise); color: var(--hs-tx); }
.cn .hs-vt button { color: var(--hs-tx-4); }
.cn .hs-results.is-list .hs-card { background: var(--hs-bg-2); border-radius: 4px; }
.cn .hs-results.is-list .hs-card:hover { background: var(--hs-raise); }
.cn .hs-seg { border-radius: 4px; background: var(--hs-bg-2); border-color: var(--hs-line); }
.cn .hs-seg .hs-tab { border-radius: 3px; color: var(--hs-tx-3); }
.cn .hs-seg .hs-tab.active { background: var(--hs-ac-fill); color: #fff; }
.cn .hs-az a { border-radius: 3px; }

/* misc shell bits in light mode */
html[data-theme="light"] .hs-avatar-btn { background: var(--hs-raise); }
html[data-theme="light"] .hs-b-dark { background: var(--hs-tx); color: #fff; }
html[data-theme="light"] .tooltip-inner { background: var(--hs-tx); color: #fff; }
html[data-theme="light"] .hs-footer { background: #fff; }
html[data-theme="light"] .hs-foot-col a, html[data-theme="light"] .hs-foot-brand p { color: var(--hs-tx-3); }
html[data-theme="light"] .hs-foot-col .hd { color: var(--hs-tx); }
html[data-theme="light"] .hs-az-sm a { background: var(--hs-raise); border-color: var(--hs-line); color: var(--hs-tx-2); }

/* legacy (default-theme) pages are dark-only for now: no toggle there */
.hs-legacy:not(.cn-ll) .cn-mode, .hs-legacy:not(.cn-ll) .cn-mode-txt { display: none !important; }

/* watch sidebar trending cards in light mode */
html[data-theme="light"] .hs-tr { background: #fff; }
html[data-theme="light"] .hs-tr::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.7) 100%); }
html[data-theme="light"] .hs-tr .rk { -webkit-text-stroke: 1.5px #9AAAC0; }
html[data-theme="light"] .hs-tr .ps { box-shadow: 0 6px 14px rgba(15, 30, 50, 0.18); }
html[data-theme="light"] .hs-tr .hs-pill-sm { background: var(--hs-raise) !important; border-color: var(--hs-line) !important; }
html[data-theme="light"] .hs-tr .hs-pill-sm .s { color: var(--cn-sub) !important; }
html[data-theme="light"] .hs-tr .hs-pill-sm .d { color: var(--cn-dubc) !important; }
html[data-theme="light"] .hs-tr .hs-pill-sm .t { color: var(--hs-tx-3) !important; }

/* legacy pages (schedule, live chat, shop, community…): Cinema type + corners */
.cn.hs-legacy #body { font-family: var(--hs-f-body); }
.cn.hs-legacy #body .btn, .cn.hs-legacy #body .form-control, .cn.hs-legacy #body .custom-select,
.cn.hs-legacy #body .dropdown-menu, .cn.hs-legacy #body .card, .cn.hs-legacy #body .modal-content { border-radius: 4px; }
.cn #schedule.sc-root .sc-week, .cn #schedule.sc-root .sc-card, .cn #schedule.sc-root .sc-tl-card { border-radius: 4px; }
.cn #schedule.sc-root .sc-chip { border-radius: 4px; }
.cn #schedule.sc-root .sc-head .sc-title { font: 700 26px var(--hs-f-head); letter-spacing: -0.01em; color: var(--hs-tx); }

/* legacy pages: header follows the mode (hoshi-ui forces it dark) */
html[data-theme="light"] body.hs-legacy .hs-header { background: rgba(244, 246, 249, 0.94); border-bottom-color: var(--hs-line); }
html[data-theme="light"] body.hs-legacy .hs-search form, html[data-theme="light"] body.hs-legacy #search form { background: #fff; border-color: var(--hs-line-2); }
html[data-theme="light"] body.hs-legacy .hs-lang { background: var(--hs-raise); border-color: var(--hs-line-2); }
html[data-theme="light"] body.hs-legacy .hs-lang span:not(.active) { background: transparent; color: var(--hs-tx-3); }
html[data-theme="light"] body.hs-legacy .hs-ib { color: var(--hs-tx-2); }
html[data-theme="light"] body.hs-legacy .hs-nav > a, html[data-theme="light"] body.hs-legacy .hs-nav .hs-dd > button { color: var(--hs-tx-3); }
html[data-theme="light"] body.hs-legacy .hs-nav > a.on, html[data-theme="light"] body.hs-legacy .hs-nav > a:hover, html[data-theme="light"] body.hs-legacy .hs-nav .hs-dd > button:hover { color: var(--hs-tx); }

/* community / shop / schedule: Cinema 4px corners instead of pills */
.cn.hs-legacy #body .layout-award [class*="shop-"], .cn.hs-legacy #body .layout-award .btn,
.cn.hs-legacy #body .cm-tags a, .cn.hs-legacy #body .community-tags a, .cn.hs-legacy #body [class*="tag-item"],
.cn #schedule.sc-root .sc-chip { border-radius: 4px !important; }
.cn.hs-legacy #body .layout-award .shop-avatar img, .cn.hs-legacy #body .layout-award [class*="avatar"] { border-radius: 50% !important; }
.cn.hs-legacy #body .nc-cate .item, .cn.hs-legacy #body .nc-cate .item .badge, .cn.hs-legacy #body .ak-btn { border-radius: 4px !important; }
html[data-theme="light"] .cn.hs-legacy #body .nc-cate .item .badge, html[data-theme="light"] .cn.hs-legacy #body .nc-cate .item span[class*="count"] { background: #fff !important; color: var(--hs-tx-2) !important; border: 1px solid var(--hs-line-2); }

/* light mode: legacy bootstrap buttons + title-language switch */
html[data-theme="light"] .hs-lang span.active { background: var(--hs-ac-fill) !important; color: #fff !important; }
/* light mode: every filled accent surface that carries white text uses --hs-ac-fill (>= 4.5:1),
   including the legacy header sign-in, bootstrap primaries and the comment submit gradient */
html[data-theme="light"] header #user .sign-in { background-color: var(--hs-ac-fill); }
html[data-theme="light"] header #user .sign-in:hover { background-color: var(--hs-ac-fill-h); }
html[data-theme="light"] body .btn-primary, html[data-theme="light"] body .btn-primary:disabled,
html[data-theme="light"] body .nav-pills .nav-link.active, html[data-theme="light"] body .page-item.active .page-link,
html[data-theme="light"] body .badge-primary, html[data-theme="light"] body .btn-outline-primary:hover { background-color: var(--hs-ac-fill); border-color: var(--hs-ac-fill); color: #fff; }
html[data-theme="light"] body .btn-primary:hover, html[data-theme="light"] body .btn-primary:focus { background-color: var(--hs-ac-fill-h); border-color: var(--hs-ac-fill-h); color: #fff; }
html[data-theme="light"] body.hs-legacy #body .btn-primary, html[data-theme="light"] .hs-comments .btn-primary,
html[data-theme="light"] .hs-comments button[type=submit] { background: var(--hs-ac-fill) !important; border-color: var(--hs-ac-fill) !important; color: #fff !important; }
html[data-theme="light"] body.hs-legacy #body .btn-primary:hover, html[data-theme="light"] .hs-comments .btn-primary:hover,
html[data-theme="light"] .hs-comments button[type=submit]:hover { background: var(--hs-ac-fill-h) !important; border-color: var(--hs-ac-fill-h) !important; }
html[data-theme="light"] .cn.hs-legacy #body .btn-light, html[data-theme="light"] .cn.hs-legacy #body .btn-secondary,
html[data-theme="light"] .cn.hs-legacy #body .btn-outline-light, html[data-theme="light"] .cn.hs-legacy #body .btn-dark { background: #fff !important; border: 1px solid var(--hs-line-2) !important; color: var(--hs-tx) !important; }
html[data-theme="light"] .cn.hs-legacy #body .btn-light:hover, html[data-theme="light"] .cn.hs-legacy #body .btn-secondary:hover { border-color: var(--hs-ac) !important; }

html[data-theme="light"] .hs .alert-success { color: #12704A; }
html[data-theme="light"] .hs .alert-danger { color: #B3261E; }

/* ===== header child menus (mega-menu style) ===== */
.cn .hs-nav > a, .cn .hs-nav .hs-dd > button { gap: 7px; }
.cn .hs-nav .hs-dd > button.on { color: var(--hs-tx); }
.cn .hs-dd-menu.cn-mm { top: calc(100% - 10px); left: -14px; padding: 8px; border-radius: 4px; border: 1px solid var(--hs-line-2); background: var(--hs-bg-2); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5); animation: cnMm 0.16s ease-out; }
html[data-theme="light"] .cn .hs-dd-menu.cn-mm { background: #fff !important; box-shadow: 0 20px 44px rgba(15, 30, 50, 0.16) !important; }
.cn .hs-dd-menu.cn-mm::before { content: ""; position: absolute; left: 28px; top: -6px; width: 10px; height: 10px; background: inherit; border-left: 1px solid var(--hs-line-2); border-top: 1px solid var(--hs-line-2); transform: rotate(45deg); }
@keyframes cnMm { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cn-mm-hd { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--hs-line); font: 700 10.5px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-tx-4); }
.cn .cn-mm-hd a { display: inline; padding: 0; font: 600 12px var(--hs-f-body); letter-spacing: 0; text-transform: none; color: var(--hs-ac) !important; background: none !important; }
.cn .cn-mm a { display: flex !important; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 4px; color: var(--hs-tx-2) !important; font: 600 13px var(--hs-f-body); white-space: nowrap; }
.cn .cn-mm a:hover { background: var(--hs-raise) !important; color: var(--hs-tx) !important; }
.cn .cn-mm .gi { width: 26px; height: 26px; flex-shrink: 0; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--gc, var(--hs-ac)); background: color-mix(in srgb, var(--gc, var(--hs-ac)) 14%, transparent); transition: background 0.15s, color 0.15s; }
.cn .cn-mm .gi svg { width: 15px; height: 15px; }
.cn .cn-mm a:hover .gi { background: var(--gc, var(--hs-ac)); color: #fff; }
.cn .cn-mm .gt { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cn .hs-dd-menu.cn-mm-gen { width: 620px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.cn .hs-dd-menu.cn-mm-list { min-width: 200px; }
.cn .hs-dd-menu.cn-mm-rich { width: 330px; }
.cn .cn-mm-rich a { padding: 9px 10px; gap: 12px; align-items: center; }
.cn .cn-mm-rich .gi { width: 34px; height: 34px; }
.cn .cn-mm-rich .gi svg { width: 17px; height: 17px; }
.cn .cn-mm-rich .gt { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.cn .cn-mm-rich .gt b { font: 700 13.5px var(--hs-f-body); color: var(--hs-tx); }
.cn .cn-mm-rich .gt small { font-size: 11.5px; font-weight: 500; color: var(--hs-tx-4); }
@media (max-width: 1500px) { .cn .hs-nav .ni { display: none; } }
.cn .hs-nav > a, .cn .hs-nav .hs-dd > button { white-space: nowrap; }
@media (max-width: 1320px) { .cn .hs-nav { gap: 16px; } .cn .hs-header .hs-wrap { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .cn .hs-dd-menu.cn-mm { animation: none; } }

/* ============ header: expanding search + scroll state ============ */
/* Search keeps a fixed slot beside the actions and grows leftwards over the nav
   while focused / showing results, instead of being squeezed by the nav. */
@media (min-width: 761px) {
    .cn .hs-search { flex: 0 0 220px; width: 220px; max-width: none; height: 38px; margin: 0 0 0 auto; z-index: 70; }
    .cn .hs-search form { position: absolute; top: 0; right: 0; width: 100%; height: 38px; border: 0; border-radius: 4px; background: var(--hs-field); transition: width 0.26s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s, background 0.2s; }
    .cn .hs-search input { height: 38px; padding: 0 46px 0 38px; border-radius: 4px; border: 1px solid var(--hs-line-2); background: transparent; font-size: 13px; transition: border-color 0.15s; }
    .cn .hs-search input::placeholder { color: var(--hs-tx-4); }
    .cn .hs-search .ico { left: 12px; color: var(--hs-tx-4); transition: color 0.15s; }
    .cn .hs-search .kbd { right: 9px; height: 20px; padding: 0 6px; font-size: 10.5px; background: var(--hs-bg-2); transition: opacity 0.15s; }
    .cn .hs-search:hover input { border-color: var(--hs-tx-4); }
    .cn .hs-search:focus-within form, .cn .hs-search.show form, .cn .hs-search form:has(input:not(:placeholder-shown)) { width: min(520px, 46vw); background: var(--hs-bg-2); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 3px var(--hs-ac-soft); }
    .cn .hs-search:focus-within input { border-color: var(--hs-ac); }
    .cn .hs-search:focus-within .ico { color: var(--hs-ac); }
    .cn .hs-search:focus-within .kbd, .cn .hs-search form:has(input:not(:placeholder-shown)) .kbd { opacity: 0; }
    html[data-theme="light"] .cn .hs-search form { background: #fff; }
    html[data-theme="light"] .cn .hs-search:focus-within form { box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14), 0 0 0 3px var(--hs-ac-soft); }
}
@media (min-width: 761px) and (max-width: 1150px) { .cn .hs-search { flex-basis: 260px; width: 260px; } }

/* Scrolled: header tightens, turns to frosted glass, and a thin accent bar tracks reading progress. */
.cn .hs-header { transition: background 0.25s, box-shadow 0.25s, border-color 0.25s; }
.cn .hs-header .hs-wrap, .cn .hs-nav > a, .cn .hs-nav .hs-dd > button { transition: height 0.25s; }
.cn .hs-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--cn-prog, 0) * 100%); background: linear-gradient(90deg, var(--hs-ac), #8b9dff); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.cn .hs-header.cn-scrolled { background: rgba(var(--cn-rgb), 0.8); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.cn .hs-header.cn-scrolled::after { opacity: 1; }
.cn .hs-header.cn-scrolled .hs-wrap, .cn .hs-header.cn-scrolled .hs-nav > a, .cn .hs-header.cn-scrolled .hs-nav .hs-dd > button { height: 56px; }
.cn .hs-header.cn-scrolled .hs-nav > a.on::after { bottom: 14px; }
html[data-theme="light"] .cn .hs-header.cn-scrolled { box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08); }
@media (prefers-reduced-motion: reduce) { .cn .hs-header, .cn .hs-header .hs-wrap, .cn .hs-search form { transition: none; } }
/* The cinema nav + fixed search slot don't fit below ~1300px: switch to the drawer earlier than the base theme (1150px). */
@media (min-width: 1151px) and (max-width: 1300px) {
    .cn .hs-nav { display: none; }
    .cn .hs-burger { display: inline-flex; }
    .cn .hs-search { flex-basis: 300px; width: 300px; }
    .hs-drawer.open { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.55); }
    .hs-drawer .in { position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); overflow-y: auto; padding: 18px; background: var(--hs-bg-2); border-right: 1px solid var(--hs-line); display: flex; flex-direction: column; gap: 4px; }
    .hs-drawer a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px; font-weight: 700; color: var(--hs-tx-2); }
    .hs-drawer a:hover { background: var(--hs-raise); color: var(--hs-tx); }
    .hs-drawer .lbl { margin: 14px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--hs-tx-4); }
    .hs-drawer .gen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ hero "Up next" queue (restored) ============ */
.cn-upn-wrap { position: absolute; z-index: 5; left: 0; right: 0; top: 150px; margin: 0 auto; pointer-events: none; }
.cn-upn { margin-left: auto; width: 290px; pointer-events: auto; }
.cn-upn-hd { display: flex; justify-content: space-between; margin-bottom: 8px; font: 700 11px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-tx-4); }
.cn-upn-count { letter-spacing: 0; color: var(--hs-tx-3); }
.cn-upn-count b { color: var(--hs-tx); }
.cn-upn-list { position: static !important; display: flex !important; flex-direction: column; gap: 6px; }
.cn .cn-uq { position: relative; width: 100%; height: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; border: 1px solid rgba(127, 140, 160, 0.18); background: rgba(var(--cn-rgb), 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; text-align: left; }
.cn .cn-uq::after { display: none; }
.cn .cn-uq img { position: static; width: 64px; height: 38px; flex-shrink: 0; object-fit: cover; border-radius: 3px; }
.cn .cn-uq .tx { position: static; display: flex; flex-direction: column; min-width: 0; }
.cn .cn-uq b { font: 600 13px var(--hs-f-body); color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn .cn-uq small { font-size: 11.5px; color: var(--hs-tx-4); }
.cn .cn-uq.on { border-color: var(--hs-ac); }
.cn .cn-uq.on::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 38%; background: var(--hs-ac); }
.cn-upn-nav { display: flex; gap: 6px; margin-top: 10px; }
.cn .cn-upn-nav .hs-hero-nav { position: static; margin: 0; width: 34px; height: 34px; border-radius: 4px; border: 1px solid rgba(127, 140, 160, 0.3); background: rgba(var(--cn-rgb), 0.6); color: var(--hs-tx-2); display: flex; align-items: center; justify-content: center; }
.cn .cn-upn-nav .hs-hero-nav:hover { border-color: var(--hs-ac); color: var(--hs-tx); }
.cn .cn-uq[hidden] { display: none !important; }
.cn .cn-uq .tx { color: var(--hs-tx); }
.cn .cn-uq .tx b { color: var(--hs-tx); }
@media (max-width: 1100px) { .cn-upn-wrap { display: none; } }
/* ===== hero "Up next" queue: colours for both modes + motion ===== */
.cn .cn-uq { background: rgba(var(--cn-rgb), 0.62); border-color: rgba(127, 140, 160, 0.2); transition: transform 0.25s, border-color 0.2s, background 0.2s, opacity 0.2s; opacity: 0.78; }
.cn .cn-uq img { transition: transform 0.4s ease; }
.cn .cn-uq .tx b { color: var(--hs-tx) !important; }
.cn .cn-uq .tx small { color: var(--hs-tx-3); }
.cn .cn-uq:hover { opacity: 1; transform: translateX(-4px); border-color: rgba(46, 197, 232, 0.55); }
.cn .cn-uq:hover img { transform: scale(1.06); }
.cn .cn-uq.on { opacity: 1; border-color: var(--hs-ac); background: rgba(var(--cn-rgb), 0.82); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--hs-ac) inset; }
.cn .cn-uq.on img { transform: scale(1.08); }
.cn .cn-uq.on .tx small { color: var(--hs-ac-tx); }
.cn .cn-uq.on::before { width: 0; animation: cnUqProg 5s linear forwards; }
.cn .cn-uq.on::after { content: "Now"; position: absolute; right: 8px; top: 8px; display: block; height: 16px; padding: 0 5px; border-radius: 3px; background: var(--hs-ac); color: #fff; font: 800 9.5px/16px var(--hs-f-body); letter-spacing: 0.06em; text-transform: uppercase; }
.cn .cn-upn-list.cn-anim .cn-uq:not([hidden]) { animation: cnUqIn 0.45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.cn .cn-upn-list.cn-anim .cn-uq.on:not([hidden]) { animation: cnUqIn 0.45s cubic-bezier(.2, .8, .2, 1) both; }
.cn .cn-upn-list.cn-anim .cn-uq.on::before { animation: cnUqProg 5s linear forwards; }
html[data-theme="light"] .cn .cn-uq { background: rgba(255, 255, 255, 0.86); border-color: var(--hs-line); box-shadow: 0 4px 14px rgba(15, 30, 50, 0.08); }
html[data-theme="light"] .cn .cn-uq.on { background: #fff; box-shadow: 0 10px 26px rgba(15, 30, 50, 0.16), 0 0 0 1px var(--hs-ac) inset; }
html[data-theme="light"] .cn-upn-hd { color: var(--hs-tx-3); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .cn .cn-upn-nav .hs-hero-nav { background: rgba(255, 255, 255, 0.86); border-color: var(--hs-line-2); color: var(--hs-tx-2); }
@keyframes cnUqIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes cnUqProg { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .cn .cn-upn-list.cn-anim .cn-uq, .cn .cn-uq.on::before { animation: none !important; }
    .cn .cn-uq.on::before { width: 100%; }
}
.cn .cn-uq.on::after { left: auto; bottom: auto; inset: 8px 8px auto auto; width: auto; }
.cn-upn-hd { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.cn-upn-hd span:first-child { color: var(--hs-tx-2); }
/* Up next: motion only on the active item (owner's request) */
.cn .cn-upn-list.cn-anim .cn-uq:not(.on) { animation: none !important; }
.cn .cn-uq:not(.on):hover { transform: none; }
.cn .cn-uq:not(.on):hover img { transform: none; }
.cn .cn-upn-list.cn-anim .cn-uq.on:not([hidden]) { animation: cnUqPop 0.5s cubic-bezier(.2, .9, .25, 1.2) both; }
.cn .cn-uq.on img { animation: cnUqKen 5s ease-out forwards; }
.cn .cn-uq.on .tx b { background: linear-gradient(90deg, var(--hs-tx) 0%, var(--hs-tx) 40%, var(--hs-ac-tx) 50%, var(--hs-tx) 60%, var(--hs-tx) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: cnUqShine 2.4s ease-in-out 0.3s 1 both; }
@keyframes cnUqPop { 0% { opacity: 0.4; transform: scale(0.96); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: none; } }
@keyframes cnUqKen { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes cnUqShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .cn .cn-uq.on img, .cn .cn-uq.on .tx b { animation: none !important; } .cn .cn-uq.on .tx b { color: var(--hs-tx) !important; background: none; } }
/* "Next" badge sits on the thumbnail corner so it never covers the title */
.cn .cn-uq { position: relative; }
.cn .cn-uq.on::after { content: "Next"; inset: 4px auto auto 4px; right: auto; height: 15px; padding: 0 4px; font-size: 9px; line-height: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.cn-upn-hd span:first-child::after { content: ""; }

/* ============ hero "My list": folder menu + chosen folder on the button ============ */
.cn-fav .hs-btn .i-in, .cn-fav.is-in .hs-btn .i-add { display: none; }
.cn-fav.is-in .hs-btn .i-in { display: block; }
.cn-fav .hs-btn .i-cv { margin-left: 2px; opacity: 0.6; transition: transform 0.2s; }
.cn-fav.show .hs-btn .i-cv { transform: rotate(180deg); }
.cn-fav .hs-btn .lbl { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-fav.is-in .hs-btn { border-color: var(--hs-ac); color: var(--hs-ac-tx); background: var(--hs-ac-soft); }
.cn .cn-fav .dropdown-menu.folders { min-width: 210px; margin-bottom: 8px; padding: 6px; border-radius: 4px; border: 1px solid var(--hs-line-2); background: rgba(var(--cn-rgb), 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
.cn .cn-fav .dropdown-menu.folders::before { content: "Save to list"; display: block; padding: 6px 10px 8px; font: 700 10.5px var(--hs-f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-tx-4); }
.cn .cn-fav .folders .dropdown-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 4px; background: none; color: var(--hs-tx-2); font: 600 13.5px var(--hs-f-body); cursor: pointer; transition: background 0.12s, color 0.12s; }
.cn .cn-fav .folders .dropdown-item .ic { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--hs-tx-4); transition: color 0.12s; }
.cn .cn-fav .folders .dropdown-item .ic svg { width: 16px; height: 16px; }
.cn .cn-fav .folders .dropdown-item:hover { background: var(--hs-raise); color: var(--hs-tx); }
.cn .cn-fav .folders .dropdown-item:hover .ic { color: var(--hs-ac); }
.cn .cn-fav .folders .dropdown-item.active { background: var(--hs-ac-soft); color: var(--hs-ac-tx); }
.cn .cn-fav .folders .dropdown-item.active .ic { color: var(--hs-ac); }
.cn .cn-fav .folders .dropdown-item.active::after { content: ""; width: 14px; height: 14px; margin-left: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.cn .cn-fav .folders .dropdown-item.cn-rm { margin-top: 4px; border-top: 1px solid var(--hs-line); border-radius: 0 0 4px 4px; color: #F0787C; }
.cn .cn-fav .folders .dropdown-item.cn-rm:hover { background: rgba(229, 72, 77, 0.12); color: #FF8A8E; }
html[data-theme="light"] .cn .cn-fav .dropdown-menu.folders { background: rgba(255, 255, 255, 0.97); box-shadow: 0 18px 40px rgba(15, 30, 50, 0.16); }
html[data-theme="light"] .cn .cn-fav .folders .dropdown-item.cn-rm { color: #C4343A; }

/* Header search: the popup opens on focus (main.js), so say what to do before anything is typed. */
.cn .hs-search .search-popup .body:empty::before { content: "Type at least 2 letters — matching titles show up here."; display: block; padding: 14px 16px 10px; font: 500 12.5px var(--hs-f-body); color: var(--hs-tx-3); }

/* ============ listing list view: poster + meta, synopsis, genres, score / sub / dub ============ */
.hs-card .cn-li { display: none; }
.cn .hs-results.is-list { gap: 10px 16px !important; }
.cn .hs-results.is-list .hs-card { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 10px; border: 1px solid var(--hs-line); transition: background 0.15s, border-color 0.15s; }
.cn .hs-results.is-list .hs-card:hover { border-color: var(--hs-line-2); }
.cn .hs-results.is-list .hs-card .frame { width: 96px; grid-row: 1 / span 2; align-self: start; }
.cn .hs-results.is-list .hs-card .cn-ty, .cn .hs-results.is-list .hs-card .cn-tag:not(.cn-18) { display: none; }
.cn .hs-results.is-list .hs-card .ttl { margin-top: 2px; font-size: 15.5px; font-weight: 700; -webkit-line-clamp: 1; }
.cn .hs-results.is-list .hs-card:hover .ttl { color: var(--hs-ac-tx); }
.cn .hs-results.is-list .hs-card .cn-li { grid-column: 2; display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; text-align: left; }
.cn .hs-results.is-list .hs-card .cn-li > * { margin: 0; padding: 0; border: 0; text-align: left; }
.cn .hs-results.is-list .hs-card .cn-li .m { justify-content: flex-start; }
.cn .hs-results.is-list .hs-card .cn-li .d { display: -webkit-box; }
.cn-li .m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--hs-tx-3); }
.cn-li .m b { color: var(--hs-tx-2); font-weight: 700; }
.cn-li .m i { width: 3px; height: 3px; border-radius: 50%; background: var(--hs-tx-5, var(--hs-tx-4)); }
.cn-li .m .st { display: inline-flex; align-items: center; gap: 5px; }
.cn-li .m .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hs-tx-4); }
.cn-li .m .st.on { color: #4ADE80; } .cn-li .m .st.on::before { background: #4ADE80; }
.cn-li .m .st.up { color: #F5B451; } .cn-li .m .st.up::before { background: #F5B451; }
.cn-li .d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.55; color: var(--hs-tx-3); }
.cn-li .f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; min-width: 0; }
.cn-li .g { display: flex; gap: 5px; min-width: 0; overflow: hidden; height: 22px; flex-wrap: wrap; }
.cn-li .g span { height: 22px; padding: 0 8px; border-radius: 4px; background: var(--hs-raise); color: var(--hs-tx-3); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; }
.cn-li .n { display: flex; align-items: center; gap: 6px; flex: none; }
.cn-li .n .sc { color: var(--hs-star); font-weight: 700; font-size: 12.5px; margin-right: 2px; }
.cn-li .n .q { height: 20px; padding: 0 6px; border-radius: 3px; border: 1px solid var(--hs-line-2); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; gap: 3px; }
.cn-li .n .q.s { color: var(--cn-sub); border-color: rgba(92, 200, 240, 0.4); }
.cn-li .n .q.d { color: var(--cn-dubc); border-color: rgba(245, 180, 81, 0.45); }
html[data-theme="light"] .cn-li .m .st.on { color: #15803D; } html[data-theme="light"] .cn-li .m .st.on::before { background: #16A34A; }
html[data-theme="light"] .cn-li .m .st.up { color: #A3670F; }
@media (max-width: 760px) {
    .cn .hs-results.is-list .hs-card { grid-template-columns: 76px minmax(0, 1fr); column-gap: 11px; padding: 8px; }
    .cn .hs-results.is-list .hs-card .frame { width: 76px; }
    .cn .hs-results.is-list .hs-card .ttl { font-size: 14px; -webkit-line-clamp: 2; }
    .cn-li .d { -webkit-line-clamp: 2; font-size: 12.5px; }
    .cn-li .g span:nth-child(n+3) { display: none; }
}

/* light mode: remaining filled surfaces with white text get the deeper fill (>= 4.5:1) */
html[data-theme="light"] .cn .hs-srv .type[data-type="dub"] li.active, html[data-theme="light"] .cn .hs-srv .type[data-type="adub"] li.active { background: #A85A06; border-color: #A85A06; color: #fff; }
html[data-theme="light"] .cn .cn-mm a:hover .gi { background: color-mix(in srgb, var(--gc, var(--hs-ac)) 62%, #000); }
html[data-theme="light"] .cn .cn-uq.on::after { background: var(--hs-ac-fill); }
html[data-theme="light"] .cn-room .st.live { background: #C53030; }
html[data-theme="light"] .cn .rq-guide .rq-steps > li::before { background: var(--hs-ac-fill); color: #fff; }
html[data-theme="light"] .cn .block_area-comment .ci-buttons .btn-primary:hover { background: var(--hs-ac-fill-h) !important; filter: none; }

/* dark + light: small tags/badges on a filled background with white text use the deep fill */
.cn .cn-uq.on::after { background: var(--hs-ac-fill); }
.cn .cn-mm a:hover .gi { background: color-mix(in srgb, var(--gc, var(--hs-ac)) 60%, #000); }
.cn-room .st.live { background: #C53030; }
/* light mode: hard-coded muted greys from the AniHoshi sheets read ~2.6–2.8:1 on white; use the
   theme's muted token (#586A80, >= 4.5:1 on every light surface) */
html[data-theme="light"] .cn .hs-crumbs a, html[data-theme="light"] .cn .hs-bcount, html[data-theme="light"] .cn .hs-tcard .m,
html[data-theme="light"] .cn .hs-footer nav a { color: var(--hs-tx-4); }
html[data-theme="light"] .cn .hs-cb-eps .t em, html[data-theme="light"] .cn .hs-pill-sm .t em { color: var(--hs-tx-4); }
html[data-theme="light"] .cn .hs-foot-col a, html[data-theme="light"] .cn .hs-az-sm a { color: var(--hs-tx-4) !important; }
html[data-theme="light"] .cn .hs-az-sm a:hover { color: #fff !important; }
.cn .hs-ap-btn:not(.o), .cn .hs-ap-btn:not(.o):hover { color: #fff !important; }
.cn .hs-foot-bar .hs-wrap { color: var(--hs-tx-4); }

/* Long card titles slide on hover (cinema.js adds .cn-mq when the name is cut off). */
.cn .cn-card .ttl.cn-mq { text-overflow: clip; }
.cn .cn-card .ttl .cn-mqi { display: inline-block; animation: cn-mq var(--mq-d, 4s) ease-in-out 0.35s infinite alternate; }
@keyframes cn-mq { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--mq-x, 0)); } }

/* CC (subbed) mark in white; on the light theme's white episode strip it keeps the strip's text colour. */
.cn .hs-li-cc { color: #fff; }
html[data-theme="light"] .cn .cn-card .hs-cb-eps .hs-li-cc { color: inherit; }

/* Top 10: heading on the left, Today / Week / Month on the right, one line at every width. */
.cn-top10 .cn-sh { flex-wrap: nowrap; }
.cn-top10 .cn-sh h2 { min-width: 0; white-space: nowrap; }
@media (max-width: 760px) {
    .cn-top10 .cn-sh-r { width: auto; flex: 0 0 auto; }
    .cn-top10 .cn-sh h2 { font-size: 19px; gap: 8px; }
}
@media (max-width: 480px) {
    .cn-top10 .cn-sh h2 small { display: none; }
    .cn-top10 .cn-ut { gap: 12px; }
}

/* Watch controls on phones: Prev / Next / Light / Expand / WTG / Report as icons only (the label stays in the
   tooltip/title), so the action row fits on one line below the toggles. */
@media (max-width: 760px) {
    .cn .hs-ctrls .ctrl .lb, .cn .hs-ctrls .ctrl .lbk { display: none; }
    .cn .hs-ctrls .right { width: 100%; margin-left: 0; flex-wrap: nowrap; justify-content: space-between; }
    .cn .hs-ctrls .right .ctrl { gap: 0; min-width: 38px; height: 38px; padding: 0; justify-content: center; }
    .cn .hs-ctrls .right .ctrl svg { width: 17px; height: 17px; }
}

/* Sidebar schedule: a short window of the day; "Show more" opens the rest (cinema.js toggles .open). */
.cn-sl:not(.open) > a.mh { display: none; }
.cn-sl-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px; margin-top: 10px; border: 1px solid var(--hs-line); border-radius: 4px; background: transparent; color: var(--hs-tx-3); font: 600 12.5px var(--hs-f-body); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.cn-sl-more:hover { color: var(--hs-tx); border-color: var(--hs-line-2); }
.cn-sl-more .c, .cn-sl.open + .cn-sl-more .o { display: none; }
.cn-sl.open + .cn-sl-more .c { display: inline; }
.cn-sl.open + .cn-sl-more svg { transform: rotate(180deg); }