/* Enma — child of the AniHoshi theme (slug "halo"). Loaded after the parent's base CSS: redefines the
   tokens and restyles the shell (floating pill header, side menu, search), buttons, cards, section titles
   and the footer. Page areas: halo-home.css, halo-title.css (anime + watch), halo-browse.css. */

/* ============ tokens ============ */
:root, html[data-theme="dark"] {
    --hs-bg: #000000; --hs-bg-2: #0A0B10; --hs-bg-3: #101119; --hs-field: rgba(255, 255, 255, 0.04); --hs-raise: rgba(255, 255, 255, 0.08); --hs-hover: rgba(255, 255, 255, 0.1);
    --hs-line: rgba(255, 255, 255, 0.06); --hs-line-2: rgba(255, 255, 255, 0.12); --hs-line-ac: rgba(30, 144, 255, 0.3);
    --hs-tx: #FFFFFF; --hs-tx-2: rgba(255, 255, 255, 0.87); --hs-tx-3: rgba(255, 255, 255, 0.7); --hs-tx-4: rgba(255, 255, 255, 0.55); --hs-tx-5: rgba(255, 255, 255, 0.4);
    --hs-ac: #1E90FF; --hs-ac-2: #0072E0; --hs-ac-soft: rgba(30, 144, 255, 0.1); --hs-ac-tx: #6FB8FF;
    --hs-ac-fill: #1E90FF; --hs-ac-fill-h: #0A80F0; --hs-ok-fill: #1F7A4D; --hs-ink: #FFFFFF;
    --hs-dub: #FFC078; --hs-dub-tx: #FFC078; --hs-dub-ink: #241000; --hs-star: #FFD166; --hs-ok: #3EE08F; --hs-hot: #FF5A5F;
    /* the page is full width up to 2048px with 16px gutters on every viewport */
    --hs-radius: 10px; --hs-wrap: 2048px;
    --hs-f-body: 'Clash Display', 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hs-f-head: 'Clash Display', 'Lexend', system-ui, sans-serif;
    --hs-f-disp: 'Clash Display', 'Lexend', system-ui, sans-serif;
    --hl-grad: linear-gradient(135deg, #1E90FF, #0072E0);
    --hl-glow: 0 6px 20px rgba(30, 144, 255, 0.35);
    --hl-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    --hl-soft: rgba(255, 255, 255, 0.03); --hl-soft-bd: rgba(255, 255, 255, 0.05);
    --hl-subbadge: rgba(176, 227, 175, 0.95); --hl-subbadge-tx: #0A0F1A; --hl-dubbadge: rgba(185, 231, 255, 0.95);
    --hl-gut: 16px;
    color-scheme: dark;
}
/* thin blue page scrollbar (10px, like the reference) */
html:has(body.hl) { scrollbar-width: thin; scrollbar-color: #1E90FF #000; }
body.hs.hl { background: #000; color: var(--hs-tx-2); font-family: var(--hs-f-body); letter-spacing: normal; font-synthesis: none; }
.hl .hs-wrap { padding-left: var(--hl-gut); padding-right: var(--hl-gut); }
.hl .hs-main { padding-top: 16px; }
.hl h1, .hl h2, .hl h3 { font-family: var(--hs-f-head); letter-spacing: -0.02em; }
.hl ::selection { background: var(--hs-ac); color: #fff; }
.hl-skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 8px 14px; border-radius: 10px; background: var(--hs-ac); color: #fff !important; font-weight: 600; }
.hl-skip:focus { top: 12px; }
.hl :focus-visible { outline: 2px solid var(--hs-ac); outline-offset: 2px; }
.hl-acc { color: var(--hs-ac); }

/* ============ buttons / basics (pills) ============ */
.hl .hs-btn { height: 44px; padding: 0 22px; border-radius: 10px; font: 600 13.5px var(--hs-f-body); letter-spacing: normal; gap: 8px; }
.hl .hs-btn-sm { height: 36px; padding: 0 16px; font-size: 12.5px; }
.hl .hs-btn-p { background: var(--hl-grad); border-color: transparent; color: #fff !important; box-shadow: var(--hl-glow); }
.hl .hs-btn-p:hover { background: var(--hs-ac); }
.hl .hs-btn-o, .hl .hl-btn-tint { background: var(--hs-ac-soft); border: 1px solid var(--hs-line-ac); color: #fff !important; font-weight: 600; }
.hl .hs-btn-o:hover, .hl .hl-btn-tint:hover { background: rgba(30, 144, 255, 0.18); border-color: rgba(30, 144, 255, 0.5); }
.hl .hs-btn-ghost, .hl .hl-btn-glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff !important; font-weight: 600; }
.hl .hs-btn-ghost:hover, .hl .hl-btn-glass:hover { background: rgba(255, 255, 255, 0.14); }
.hl .hl-btn-white { background: #fff; color: #000 !important; border-color: #fff; }
.hl .hs-panel { border-radius: 12px; background: var(--hl-soft); border: 1px solid var(--hs-line); }
.hl .hs-chip { height: 32px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9) !important; }
.hl .hs-chip:hover { border-color: var(--hs-line-ac); background: var(--hs-ac-soft); }
.hl .hs-chip.sm { height: 28px; }
.hl .hs-seg { border-radius: 10px; padding: 4px; background: var(--hl-soft); border: 1px solid var(--hs-line); }
.hl .hs-tab { height: 33px; padding: 0 14px; border-radius: 10px; font: 600 12.5px var(--hs-f-body); color: var(--hs-tx-4); }
.hl .hs-tab:hover { color: #fff; }
.hl .hs-tab.active, .hl .hs-tab.on { background: var(--hl-grad); color: #fff; box-shadow: var(--hl-glow); }
.hl .hs-b { border-radius: 10px; font-weight: 700; }
.hl .hs-b-sub { background: var(--hl-subbadge); color: var(--hl-subbadge-tx); border-radius: 5px; }
.hl .hs-b-dub { border-radius: 5px; }
.hl .hs-b-hd { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); }
.hl .hs-ib { width: 36px; height: 36px; border-radius: 10px; color: rgba(255, 255, 255, 0.8); }
.hl .hs-ib:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.hl .hs-field, .hl input.form-control, .hl textarea.form-control, .hl select.form-control { border-radius: 8px; }

/* ============ floating pill header ============ */
.hl .hs-header.hl-header { position: sticky; top: 0; z-index: 60; padding: 16px 16px 0; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.hl .hl-header > .hs-wrap { position: relative; pointer-events: auto; display: flex; align-items: center; max-width: none; height: 56px; margin: 0; padding: 0 8px 0 12px; gap: 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.hl .hl-header .hs-burger { display: inline-flex; margin: 0; }
.hl .hl-header .hs-burger svg { width: 20px; height: 16px; }
.hl .hs-logo-text { font: 400 24px var(--hs-f-head) !important; letter-spacing: normal; color: #fff; }
.hl .hs-logo-text span { color: var(--hs-ac); }
.hl .hl-header .hs-logo { margin: 0; padding-right: 4px; gap: 0; transition: width 0.25s, opacity 0.2s, margin 0.25s; }
.hl .hl-header .hs-logo-img { height: 32px; }
.hl .hs-ib.hl-search-btn { display: inline-flex !important; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }
.hl .hs-ib.hl-search-btn:hover { color: #fff; background: rgba(0, 0, 0, 0.4); border-color: rgba(30, 144, 255, 0.4); }
.hl .hs-ib.hl-search-btn svg { width: 16px; height: 16px; }

.hl .hl-header .hs-nav { display: flex; margin-left: auto; gap: 4px; }
.hl .hl-header .hs-nav > a { height: 36px; padding: 0 14px; gap: 8px; border-radius: 10px; color: rgba(255, 255, 255, 0.85); font: 300 14px/20px var(--hs-f-body); letter-spacing: normal; background: none; transition: background 0.15s, color 0.15s; }
.hl .hl-header .hs-nav > a span { font: inherit; }
.hl .hl-header .hs-nav .ni { display: inline-block !important; width: 15px; height: 15px; margin: -2px 0; color: currentColor; flex: none; }
.hl .hl-header .hs-nav > a:hover { color: #fff; }
.hl .hl-header .hs-nav > a.on { background: linear-gradient(180deg, #2A9DFF, #0B78E6); color: #fff; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 18px -2px rgba(30, 144, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.hl .hl-header .hs-nav > a.on::after { display: none; }
.hl .hl-header .hs-actions { gap: 6px; margin-left: 8px; }
.hl .hl-header .hl-rand { display: inline-flex; color: rgba(255, 255, 255, 0.75); }
.hl .hl-header .hl-rand svg { width: 14px; height: 14px; }

/* title language (header + side menu) */
.hl .hs-lang { border: 0; background: none; cursor: pointer; }
.hl .hl-header .hl-hlang { display: inline-flex; align-items: center; height: 32px; padding: 2px; gap: 0; border-radius: 10px; }
.hl .hl-header .hl-hlang span { height: 28px; padding: 0 10px; border-radius: 10px; font: 500 11px/16.5px var(--hs-f-body); letter-spacing: 0; color: rgba(255, 255, 255, 0.7); }
.hl .hl-header .hl-hlang span:hover { color: #fff; }
.hl .hl-header .hl-hlang span.active { background: #fff; color: #000; }

/* user */
.hl .hs-user { min-height: 36px; }
.hl .hs-user-ph { width: 36px; height: 36px; border-radius: 50%; background: rgba(30, 144, 255, 0.15); }
.hl .hs-avatar-btn { width: 36px; height: 36px; margin-left: 2px; border: 1px solid rgba(30, 144, 255, 0.3); background: rgba(30, 144, 255, 0.15); color: var(--hs-ac); }
.hl .hs-user .sign-in { height: 36px; width: 36px; padding: 0; border-radius: 50%; overflow: hidden; background: rgba(30, 144, 255, 0.15) !important; border: 1px solid rgba(30, 144, 255, 0.3) !important; color: var(--hs-ac) !important; font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
.hl .hs-user .sign-in:hover { background: rgba(30, 144, 255, 0.25) !important; }
.hl .hs-user .sign-in::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2.5 23c.9-5.6 4.8-9 9.5-9s8.6 3.4 9.5 9z'/%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'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2.5 23c.9-5.6 4.8-9 9.5-9s8.6 3.4 9.5 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.hl .hs-user .sign-in svg, .hl .hs-user .sign-in i { display: none; }

/* dropdown menus (user panel, notifications) */
.hl .hs-dd-menu, .hl .dropdown-menu { border-radius: 12px !important; border: 1px solid var(--hs-line-2) !important; background: rgba(10, 11, 16, 0.97) !important; box-shadow: var(--hl-shadow) !important; }
.hl .hs-dd-menu a, .hl .dropdown-menu a { border-radius: 8px; }

/* responsive bar: nav ≥1024, language ≥1280, random ≥640; phones get a 12px inset */
@media (max-width: 1279px) { .hl .hl-header .hl-hlang { display: none; } }
@media (max-width: 1023px) {
    .hl .hl-header .hs-nav { display: none; }
    .hl .hl-header .hs-actions { margin-left: auto; }
}
@media (max-width: 639px) { .hl .hl-header .hl-rand { display: none; } }
@media (max-width: 600px) { .hl .hs-header.hl-header { padding: 12px 12px 0; } }

/* search: the round button turns into a 40px field in place; results drop 12px under it */
.hl .hl-header .hs-search { display: none; position: relative; flex: none; width: min(360px, calc(100vw - 170px)); max-width: none; margin: 0; left: auto; right: auto; top: auto; z-index: 5; }
.hl .hl-header .hs-search.open { display: block; }
.hl .hl-header .hs-wrap:has(#search.open) #search-toggler { display: none !important; }
.hl .hl-header .hs-search form { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(30, 144, 255, 0.6); }
.hl .hl-header .hs-search .ico { position: static; display: flex; flex: none; width: 17.5px; justify-content: center; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.5); pointer-events: none; }
.hl .hl-header .hs-search .ico svg { width: 15px; height: 15px; }
.hl .hl-header .hs-search input { flex: 1; min-width: 0; width: auto; height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font: 400 14px/20px var(--hs-f-body); letter-spacing: normal; outline: none; }
.hl .hl-header .hs-search input:focus { border: 0; outline: none; }
.hl .hl-header .hs-search input::placeholder { color: rgba(255, 255, 255, 0.4); }
.hl .hl-header .hs-search .kbd { display: none; }
.hl .hl-sq-x { flex: none; width: 24px; height: 24px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: rgba(255, 255, 255, 0.5); cursor: pointer; }
.hl .hl-sq-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.hl .hl-header .hs-search form:has(input:placeholder-shown) .hl-sq-x { visibility: hidden; }
@media (max-width: 600px) {
    .hl .hl-header .hs-wrap:has(#search.open) .hs-logo { width: 0; margin-right: -12px; padding: 0; opacity: 0; overflow: hidden; }
}

/* ==== search popup (browse agent; shell re-tuned it to the reference's result list) ==== */
.hl .hl-header .hs-search .search-popup { position: absolute; top: calc(100% + 13px); left: -1px; right: auto; width: 380px; max-width: calc(100vw - 24px); z-index: 80; overflow: hidden; padding: 0; border-radius: 8px !important; background: #0A0A0A !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 1; }
.hl .hl-header .hs-search .search-popup:has(> .body:empty) { display: none !important; }
@media (max-width: 600px) { .hl .hl-header .hs-search .search-popup { width: calc(100% + 2px); } }
.hl .hs-search .hs-sp-head { display: none; }
.hl .hs-search .body { max-height: 500px; padding: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #1E90FF transparent; }
.hl .hs-search .search-popup:has(a.more:not([style*="none"])) .body { max-height: 454px; }
.hl .hs-search .hs-sr-list { display: flex; flex-direction: column; }
.hl .hs-sr-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.12s; }
.hl .hs-sr-item:hover, .hl .hs-sr-item.active { background: rgba(255, 255, 255, 0.05); }
.hl .hs-sr-item .poster { flex: none; width: 50px; height: 75px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.hl .hs-sr-item .poster img { width: 100%; height: 100%; object-fit: cover; }
.hl .hs-sr-item .info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hl .hs-sr-item .name { font: 400 15px/20px var(--hs-f-body); letter-spacing: normal; color: #fff; }
.hl .hs-sr-item.active .name, .hl .hs-sr-item:hover .name { color: var(--hs-ac); }
.hl .hs-sr-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.hl .hs-sr-item .meta > span { display: inline-flex; align-items: center; height: auto; padding: 0; border-radius: 0; background: none; color: #6B7280; font: 300 12px/18px var(--hs-f-body); letter-spacing: 0; }
.hl .hs-sr-item .meta > span + span::before { content: ""; width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background: #4B5563; }
.hl .hs-sr-item .meta > .hs-star { background: none; color: #6B7280; font-weight: 400; }
.hl .hs-search .no-result { padding: 28px 12px; text-align: center; font: 500 13.5px var(--hs-f-body); color: rgba(255, 255, 255, 0.55); }
.hl .hs-search .hs-sp-foot { display: block; padding: 0; border: 0; }
.hl .hs-search .hs-sp-tip { display: none; }
.hl .hs-search .hs-sp-foot .more { height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 0; border: 0; background: #1E90FF; color: #fff !important; font: 400 14px/20px var(--hs-f-body); letter-spacing: normal; white-space: nowrap; }
.hl .hs-search .hs-sp-foot .more:hover { background: #0A80F0; }

/* ============ side menu (the menu button opens it on every width) ============ */
.hl .hs-drawer { display: none; }
.hl .hs-drawer.open { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: hl-fade 0.2s ease; }
.hl .hs-drawer .in.hl-sb { position: absolute; left: 0; top: 0; bottom: 0; width: 320px; display: block; padding: 0 0 24px; overflow-y: auto; background: #05060A; border: 0; box-shadow: 6px 0 40px -10px rgba(0, 0, 0, 0.6); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; animation: hl-sb-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@media (max-width: 420px) { .hl .hs-drawer .in.hl-sb { width: 88vw; } }
@keyframes hl-fade { from { opacity: 0; } }
@keyframes hl-sb-in { from { transform: translateX(-100%); } }
.hl .hl-sb .hl-sb-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 64px; min-height: 0; padding: 0 20px; background: rgba(5, 6, 10, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.hl .hl-sb .hl-sb-head .hs-logo { display: inline-flex; min-height: 0; padding: 0; background: none; }
.hl .hl-sb .hl-sb-head .hl-wordmark .x { margin-left: 2px; background-image: linear-gradient(135deg, #1E90FF, #6CB8FF); }
.hl .hl-sb .hl-sb-close { width: 32px; height: 32px; color: rgba(255, 255, 255, 0.6); }
.hl .hl-sb .hl-sb-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.hl .hl-sb .hl-sb-signin { display: flex; align-items: center; gap: 12px; min-height: 0; margin: 16px 16px 0; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; font-weight: 400; transition: background 0.18s, border-color 0.18s; }
.hl .hl-sb .hl-sb-signin:hover { background: rgba(30, 144, 255, 0.1); border-color: rgba(30, 144, 255, 0.3); }
.hl .hl-sb .hl-sb-signin > svg { flex: none; width: 22.5px; height: 18px; color: var(--hs-ac); }
.hl .hl-sb .hl-sb-signin .t { display: block; font: 400 13px/19.5px var(--hs-f-body); color: #fff; }
.hl .hl-sb .hl-sb-signin .s { display: block; margin-top: 2px; font: 300 11px/16.5px var(--hs-f-body); color: rgba(255, 255, 255, 0.5); }
.hl .hl-sb.hl-signed .hl-sb-signin { display: none; }
.hl .hl-sb .hl-sb-quick { display: flex; align-items: center; gap: 8px; padding: 16px 16px 0; }
.hl .hl-sb .hl-sb-rand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-height: 0; padding: 0; border-radius: 10px; background: rgba(30, 144, 255, 0.14); border: 1px solid rgba(30, 144, 255, 0.28); color: var(--hs-ac); font: 400 13px/19.5px var(--hs-f-body); }
.hl .hl-sb .hl-sb-rand:hover { background: rgba(30, 144, 255, 0.22); color: var(--hs-ac); }
.hl .hl-sb .hl-sb-lang { display: flex; align-items: center; height: 40px; padding: 3px; gap: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.hl .hl-sb .hl-sb-lang span { height: 100%; min-width: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font: 500 11px/16.5px var(--hs-f-body); letter-spacing: 0; color: rgba(255, 255, 255, 0.65); }
.hl .hl-sb .hl-sb-lang span:hover { color: #fff; }
.hl .hl-sb .hl-sb-lang span.active { background: #fff; color: #000; }
@media (min-width: 1280px) { .hl .hl-sb .hl-sb-quick { display: none; } }
@media (min-width: 1024px) { .hl .hl-sb .hl-sb-browse { display: none; } }
.hl .hl-sb .hl-sb-sec { display: flex; align-items: center; gap: 8px; padding: 22px 20px 8px; }
.hl .hl-sb .hl-sb-sec i { width: 3px; height: 12px; border-radius: 2px; background: var(--hs-ac); }
.hl .hl-sb .hl-sb-sec span { font: 500 10px/15px var(--hs-f-body); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.hl .hl-sb .hl-sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.hl .hl-sb .hl-sb-a { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; min-height: 0; padding: 0 14px 0 18px; border-radius: 8px; color: rgba(255, 255, 255, 0.72); font: 300 13.5px/20.25px var(--hs-f-body); letter-spacing: normal; background: none; transition: color 0.18s; }
.hl .hl-sb .hl-sb-a .ic { position: relative; z-index: 1; flex: none; width: 16px; height: 15px; color: rgba(255, 255, 255, 0.55); transition: color 0.18s; }
.hl .hl-sb .hl-sb-a span { position: relative; z-index: 1; }
.hl .hl-sb .hl-sb-a:hover { color: #fff; background: rgba(255, 255, 255, 0.03); }
.hl .hl-sb .hl-sb-a:hover .ic { color: rgba(255, 255, 255, 0.85); }
.hl .hl-sb .hl-sb-a.is-active { color: #fff; background: linear-gradient(90deg, rgba(30, 144, 255, 0.22), rgba(30, 144, 255, 0.08) 55%, rgba(30, 144, 255, 0)); box-shadow: inset 0 0 0 1px rgba(30, 144, 255, 0.14); }
.hl .hl-sb .hl-sb-a.is-active::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 20px; margin-top: -10px; border-radius: 3px; background: var(--hs-ac); box-shadow: 0 0 10px rgba(30, 144, 255, 0.7); }
.hl .hl-sb .hl-sb-a.is-active .ic { color: var(--hs-ac); }
.hl .hl-sb .hl-sb-genres { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.hl .hl-sb .hl-sb-genres a { display: inline-flex; align-items: center; min-height: 0; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); font: 300 12px/18px var(--hs-f-body); letter-spacing: normal; transition: background 0.18s, border-color 0.18s, color 0.18s; }
.hl .hl-sb .hl-sb-genres a:hover { background: rgba(30, 144, 255, 0.14); border-color: rgba(30, 144, 255, 0.35); color: #fff; }

/* ============ section titles: white with the last word in blue ============ */
.hl .hs-sh { margin-bottom: 20px; gap: 10px 12px; }
.hl .hs-sh h2, .hl .hs-h2 { font: 500 26px/39px var(--hs-f-head); letter-spacing: -0.03em; color: #fff; }
.hl .hs-va { gap: 6px; font: 600 12.5px/18.75px var(--hs-f-body); letter-spacing: normal; color: rgba(255, 255, 255, 0.7) !important; }
.hl .hs-va:hover { color: var(--hs-ac) !important; }
.hl .hs-va svg { width: 10px; height: 10px; }
@media (max-width: 480px) { .hl .hs-sh h2, .hl .hs-h2 { font-size: 20px; line-height: 30px; } }

/* ============ content pages (contact, CMS pages, errors) ============ */
.hl .hs-page-title { font: 400 44px/1.08 var(--hs-f-head); letter-spacing: -0.05em; text-transform: none; color: #fff; }
.hl .hs-kick { font-weight: 500; letter-spacing: 0.1em; color: var(--hs-ac); }
.hl .hs-crumbs a { color: var(--hs-tx-4); }
.hl .hs-crumbs a:hover { color: #fff; }
.hl .hs-page-points li { border-radius: 10px; background: var(--hl-soft); border-color: var(--hs-line); }
@media (max-width: 900px) { .hl .hs-page-title { font-size: 32px; } }

/* error pages */
.hl .hl-error { max-width: 560px; margin: 24px auto 0; gap: 12px; }
.hl-error-art { position: relative; width: 240px; height: 240px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
.hl-error-art .ring { position: absolute; inset: 18px; border-radius: 50%; border: 2px solid rgba(30, 144, 255, 0.55); box-shadow: 0 0 60px rgba(30, 144, 255, 0.35), inset 0 0 40px rgba(30, 144, 255, 0.18); }
.hl-error-art .ring::after { content: ""; position: absolute; top: 12px; right: 30px; width: 10px; height: 10px; border-radius: 50%; background: var(--hs-ac); box-shadow: 0 0 16px var(--hs-ac); }
.hl-error-art .code { position: relative; font: 500 84px/1 var(--hs-f-head); letter-spacing: -0.05em; color: #fff; }
.hl .hl-error h1 { font: 400 28px var(--hs-f-head); letter-spacing: -0.04em; margin: 0; }
.hl .hl-error p { color: var(--hs-tx-3); font-size: 14.5px; line-height: 1.6; }
.hl-error-q { display: flex; gap: 6px; width: 100%; max-width: 440px; margin-top: 4px; }
.hl-error-q input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--hs-line-2); background: var(--hl-soft); color: #fff; font: 400 14px var(--hs-f-body); outline: none; }
.hl-error-q input:focus { border-color: var(--hs-line-ac); }
@media (max-width: 760px) { .hl-error-art { width: 190px; height: 190px; } .hl-error-art .code { font-size: 64px; } }

/* ============ poster cards ============ */
.hl .hs-grid { gap: 22px 18px; }
@media (max-width: 1024px) { .hl .hs-grid { gap: 18px 14px; } }
@media (max-width: 768px) { .hl .hs-grid { gap: 16px 12px; } }
@media (max-width: 480px) { .hl .hs-grid { gap: 14px 10px; } }
.hl .hs-card { gap: 10px; }
.hl .hs-card .frame { border-radius: 8px; background: #0F1420; aspect-ratio: 2 / 3; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.hl .hs-card .frame::after { display: none; }
.hl .hs-card .frame img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.hl .hs-card:hover .frame { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.hl .hs-card:hover .frame img { transform: scale(1.08); }
/* title: 13.5/600, two lines; meta 5px under it */
.hl .hs-card .ttl { margin: 0; padding: 0 2px; font: 600 13.5px/1.35 var(--hs-f-body); letter-spacing: normal; color: #fff; white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.hl .hs-card:hover .ttl { color: var(--hs-ac); }
.hl .hs-card .sub { margin-top: -5px; padding: 0 2px; align-items: center; gap: 6px; font: 500 12px/18px var(--hs-f-body); color: var(--hs-tx-4); }
@media (max-width: 640px) { .hl .hs-card .ttl { font-size: 12.5px; } }
.hl .hs-card .pl { background: var(--hs-ac); color: #fff; box-shadow: var(--hl-glow); }
/* episode chips: the sub count is a pale-green badge top-left (dub pale blue); total hidden like the reference */
.hl .hs-cb-eps { position: absolute; z-index: 2; left: 8px; top: 8px; bottom: auto; display: flex; gap: 6px; height: auto; overflow: visible; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hl .hs-cb-eps > span + span { border-left: 0; }
.hl .hs-cb-eps > span { height: 22px; padding: 0 7px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px; font: 700 10.5px var(--hs-f-body); letter-spacing: 0; }
.hl .hs-cb-eps .s { background: var(--hl-subbadge); color: var(--hl-subbadge-tx); }
.hl .hs-cb-eps .d { background: var(--hl-dubbadge); color: var(--hl-subbadge-tx); }
.hl .hs-cb-eps .t { display: none; }

/* tooltips */
.hl .tooltipster-sidetip .tooltipster-box { border-radius: 12px !important; background: rgba(10, 11, 16, 0.97) !important; border: 1px solid var(--hs-line-2) !important; box-shadow: var(--hl-shadow) !important; }

/* pager */
.hl .hs-pager a, .hl .hs-pager span { border-radius: 10px !important; }

/* ============ footer ============ */
.hl .hs-footer.hl-foot { margin-top: 100px; padding: 0 16px 32px; border-top: 0; background: #000; color: #fff; }
.hl .hs-footer.hl-foot nav { display: flex; }
.hl-foot-in { max-width: 1280px; margin: 0 auto; }
.hl-foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; padding: 32px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.hl-foot-az { grid-column: span 2; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hl-foot-az h2 { margin: 0 0 8px !important; font: 300 24px/32px var(--hs-f-head); letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.hl-foot-az p { margin: 0; padding-left: 24px; border-left: 2px solid rgba(255, 255, 255, 0.6); font: 300 14px/20px var(--hs-f-body); color: rgba(255, 255, 255, 0.6); }
.hl .hl-foot-az .hs-az { display: flex; flex-wrap: wrap; gap: 8px; }
.hl .hl-foot-az .hs-az a { min-width: 0; height: auto; padding: 4px 12px; border-radius: 6px; background: #373646; border: 0; color: #fff !important; font: 300 18px/28px var(--hs-f-body); letter-spacing: normal; }
.hl .hl-foot-az .hs-az a:hover { background: var(--hs-ac); color: #fff !important; }
.hl-foot-logo-m { display: none; }
/* the artwork: same visible size and spot as the reference (232px wide art, 17px in from the right) */
.hl-foot-art { display: flex; justify-content: flex-end; min-height: 180px; }
.hl .hl-foot-art .hl-foot-logo { display: block; margin: 9px 17px 0 0; }
.hl-foot-art .hl-foot-logo img { display: block; width: 236px; height: auto; max-width: none; }
.hl-foot-art .hs-logo-text { font-size: 56px !important; }
.hl-foot-bot { margin-top: 32px; text-align: center; }
.hl-foot-bot > * + * { margin-top: 12px; }
.hl .hs-footer.hl-foot nav.hl-foot-links { flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 3px 0 1px; font: 300 14px/20px var(--hs-f-body); }
.hl .hl-foot-links a { color: #9B9BA3; }
.hl .hl-foot-links a:hover { color: #fff; }
.hl-foot-note { max-width: 768px; margin-left: auto; margin-right: auto; padding: 12px 16px; border-radius: 6px; border: 1px solid rgba(30, 144, 255, 0.3); background: rgba(30, 144, 255, 0.1); }
.hl-foot-note p { margin: 0; font: 300 14px/20px var(--hs-f-body); color: rgba(255, 255, 255, 0.8); text-align: center; }
.hl-foot-note b { color: var(--hs-ac); font-weight: 400; }
.hl-foot-copy { margin-bottom: 0; font: 300 14px/20px var(--hs-f-body); color: #9B9BA3; }
.hl-foot-soc { display: flex; justify-content: center; gap: 6px; }
.hl-foot-soc .hs-soc { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: var(--hs-tx-2); }
.hl-foot-soc .hs-soc:hover { background: var(--hs-ac); color: #fff; }
@media (max-width: 767px) {
    .hl .hs-footer.hl-foot { margin-top: 60px; }
    .hl-foot-top { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0; }
    .hl-foot-az { grid-column: auto; gap: 16px; }
    .hl-foot-azh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .hl-foot-az h2 { margin-bottom: 4px !important; font-size: 20px; line-height: 28px; }
    .hl-foot-az p { padding-left: 12px; }
    .hl .hl-foot-logo-m { display: block; flex: none; width: 80px; height: 80px; }
    .hl-foot-logo-m img { display: block; width: 70px; height: auto; margin: 16px 5px 0 auto; }
    .hl-foot-art { display: none; }
    .hl .hl-foot-az .hs-az { gap: 6px; }
    .hl .hl-foot-az .hs-az a { padding: 2px 8px; font-size: 14px; line-height: 20px; }
    .hl-foot-bot { margin-top: 24px; }
    .hl .hs-footer.hl-foot nav.hl-foot-links, .hl-foot-copy { font-size: 12px; line-height: 16px; }
    .hl .hs-footer.hl-foot nav.hl-foot-links { padding: 5px 0 3px; gap: 4px 14px; }
    .hl-foot-note p { font-size: 12px; line-height: 1.625; }
}

/* back to top: square progress outline + mouse icon, tablets and up */
.hl-totop { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 48px; height: 48px; display: none; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #1E90FF; cursor: pointer; opacity: 0; transform: scale(0.5); pointer-events: none; transition: opacity 0.5s, transform 0.5s; }
.hl-totop .ring { position: absolute; inset: 0; }
.hl-totop .ring rect { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--hl-p, 0) * 100); transition: stroke-dashoffset 0.1s linear; }
.hl-totop .mouse { position: relative; color: rgba(255, 255, 255, 0.45); }
.hl-totop .mouse .w { animation: hl-wheel 1.6s ease-in-out infinite; }
.hl-totop.on { opacity: 1; transform: none; pointer-events: auto; }
@keyframes hl-wheel { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(6px); opacity: 0; } }
@media (min-width: 768px) { .hl-totop { display: flex; } }

/* ============ no phone tab bar (the reference has none) ============ */
.hl .hs-bnav { display: none !important; }
@media (max-width: 760px) { body.hs.hl { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) { .hl * { transition: none !important; animation: none !important; } }

/* ============ pill pager (every page; same look as the browse pages) ============ */
.hl .hs-pgu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.hl .hs-pgu .nums { display: flex; align-items: center; gap: 6px; }
.hl .hs-pgu .nv, .hl .hs-pgu .nums > a, .hl .hs-pgu .nums > .on { height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; background: rgba(255, 255, 255, 0.03) !important; color: var(--hs-tx-2); font: 400 14px var(--hs-f-head); transition: border-color 0.15s, background 0.15s, color 0.15s; }
.hl .hs-pgu .nv { gap: 8px; padding: 0 18px; }
.hl .hs-pgu .nums > a, .hl .hs-pgu .nums > .on { width: auto; min-width: 40px; padding: 0 8px; }
.hl .hs-pgu a.nv:hover, .hl .hs-pgu .nums > a:hover { border-color: rgba(255, 255, 255, 0.2) !important; color: #fff; }
.hl .hs-pgu .nums > .on { background: var(--hl-grad) !important; border-color: var(--hs-ac) !important; color: #fff; box-shadow: var(--hl-glow); }
.hl .hs-pgu .nums > .on::after { display: none; }
.hl .hs-pgu .nums > .gap { width: 24px; color: var(--hs-tx-4); }
.hl .hs-pgu .nv.off { opacity: 0.35; }
@media (max-width: 760px) {
    .hl .hs-pgu { gap: 6px; }
    .hl .hs-pgu .nv { padding: 0 12px; height: 36px; }
    .hl .hs-pgu .nv > span { display: none; }
    .hl .hs-pgu .nums > a, .hl .hs-pgu .nums > .on { min-width: 36px; height: 36px; }
}

/* ============ outlined rank numbers use a plain geometric figure set (Lexend's "1" has a foot) ============ */
.hl .hl-t10-hd .big, .hl .hl-t10c .n, .hl .hl-row .rk, .hl .hl-top-i .rk { font-family: 'Poppins', var(--hs-f-head); }

/* ============ poster cards: only the sub/dub badge, like the reference ============ */
.hl .hs-card .hs-cb-top .sc, .hl .hs-card .hs-cb-top .rt { display: none; }
.hl .hs-card .hs-cb-top { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; left: auto; right: 8px; top: 8px; }

/* ============ episode badges: beat the parent's full-width bar (refine.css uses !important) ============ */
.hl .hs-cb-eps { left: 8px !important; right: auto !important; top: 8px !important; bottom: auto !important; height: auto !important; gap: 6px !important; overflow: visible !important; background: none !important; border: 0 !important; border-radius: 0; }
.hl .hs-cb-eps > span { flex: none !important; height: 22px !important; padding: 0 7px !important; border-radius: 5px !important; font: 700 10.5px var(--hs-f-body) !important; letter-spacing: 0; }
.hl .hs-cb-eps > span + span { border-left: 0 !important; }
.hl .hs-cb-eps .s { background: var(--hl-subbadge) !important; color: var(--hl-subbadge-tx) !important; }
.hl .hs-cb-eps .d { background: var(--hl-dubbadge) !important; color: var(--hl-subbadge-tx) !important; }
.hl .hs-cb-eps .t { display: none !important; }

/* ============ brand: header wordmark (name + gradient "!") and the footer artwork ============ */
.hl .hl-wordmark { display: inline-flex; align-items: center; font-family: var(--hs-f-head); font-weight: 300; line-height: 1; letter-spacing: normal; white-space: nowrap; color: #fff; }
.hl .hl-wordmark .x { margin-left: 4px; background: linear-gradient(135deg, #1E90FF, #0080FF, #87CEEB); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 400; }