/* AniHoshi · Miruro — child of the AniHoshi theme. Loaded last (then css/mr-{area}.css).
   Shell + shared building blocks measured against the reference site (miruro.cx) at 1440 /
   1280 / 1024 / 768 / 390: Karla, a 56px icon rail from 900px, a 48px see-through top bar with
   the centred search, a fixed spotlight artwork, 2:3 poster cards with small muted chips, side
   lists of 96px cards, a thin footer and a top-right phone menu. Own CSS, our data and brand. */

/* ============ font (bundled with the theme) ============ */
@font-face {
    font-family: "Karla Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url(../fonts/karla-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Karla Variable"; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url(../fonts/karla-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ tokens (reference palette, dark + light) ============ */
:root, html[data-theme="dark"] {
    --hs-bg: #121113; --hs-bg-2: #1A191B; --hs-bg-3: #232225; --mr-menu-bg: #232225; --hs-field: #232225; --hs-raise: #232225; --hs-hover: #2B292D;
    --hs-line: rgba(73, 71, 78, 0.6); --hs-line-2: #49474E; --hs-line-ac: rgba(186, 167, 255, 0.35);
    --hs-tx: #EEEEF0; --hs-tx-2: #DCDBE0; --hs-tx-3: #B5B2BC; --hs-tx-4: #8E8B95; --hs-tx-5: #6C6972;
    --hs-ac: #BAA7FF; --hs-ac-2: #9B87F5; --hs-ac-soft: rgba(186, 167, 255, 0.1); --hs-ac-tx: #BAA7FF;
    --hs-ac-fill: #6550B9; --hs-ac-fill-h: #57449F; --hs-ink: #FFFFFF; /* fills behind white text: 6:1 */
    --hs-dub: #F59E0B; --hs-dub-ink: #1F1300; --hs-dub-tx: #FBBF24; --hs-star: #FACC15; --hs-ok: #22C55E; --hs-hot: #F87171; --hs-danger: #FCA5A5;
    --hs-radius: 8px; --hs-wrap: 1800px;
    --mr-r-sm: 4px; --mr-r-md: 7px; --mr-r-lg: 8px; --mr-r-xl: 10px;
    --hs-f-body: "Karla Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --hs-f-head: "Karla Variable", ui-sans-serif, system-ui, sans-serif;
    --mr-rgb: 18, 17, 19;          /* page background */
    --mr-fg-rgb: 238, 238, 240;    /* foreground */
    --mr-card: #1A191B; --mr-card-rgb: 26, 25, 27;
    --mr-muted: #232225; --mr-muted-rgb: 35, 34, 37;
    --mr-border: #49474E; --mr-border-rgb: 73, 71, 78;
    --mr-primary: #BAA7FF; --mr-primary-ink: #121113;
    --mr-strong: #FFFFFF; --mr-strong-ink: #000000; /* the spotlight "Watch Now" fill */
    --mr-glass: rgba(238, 238, 240, 0.1);
    --mr-glass-h: rgba(238, 238, 240, 0.16);
    --mr-green: #AAFF00; --mr-amber: #FFB224; --mr-blue: #70B8FF; --mr-red: #FF6369;
    --mr-sub: #B5B2BC; --mr-dubc: #B5B2BC;
    --mr-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5);
    --mr-rail: 56px; --mr-top: 48px;
    color-scheme: dark;
}
html[data-theme="light"] {
    --hs-bg: #FDFCFD; --hs-bg-2: #FAF9FB; --hs-bg-3: #F2EFF3; --mr-menu-bg: #FFFFFF; --hs-field: #F2EFF3; --hs-raise: #F2EFF3; --hs-hover: #EAE7EC;
    --hs-line: rgba(208, 205, 215, 0.6); --hs-line-2: #D0CDD7; --hs-line-ac: rgba(47, 38, 95, 0.3);
    --hs-tx: #211F26; --hs-tx-2: #3A3841; --hs-tx-3: #65636D; --hs-tx-4: #7D7A85; --hs-tx-5: #9A97A1;
    --hs-ac: #6550B9; --hs-ac-2: #4C3D99; --hs-ac-soft: rgba(101, 80, 185, 0.1); --hs-ac-tx: #6550B9;
    --hs-ac-fill: #2F265F; --hs-ac-fill-h: #3D3279;
    --hs-dub: #D97706; --hs-dub-tx: #B45309; --hs-star: #B45309; --hs-ok: #15803D; --hs-hot: #DC2626; --hs-danger: #B91C1C;
    --mr-rgb: 253, 252, 253;
    --mr-fg-rgb: 33, 31, 38;
    --mr-card: #FAF9FB; --mr-card-rgb: 250, 249, 251;
    --mr-muted: #F2EFF3; --mr-muted-rgb: 242, 239, 243;
    --mr-border: #D0CDD7; --mr-border-rgb: 208, 205, 215;
    --mr-primary: #2F265F; --mr-primary-ink: #FFFFFF;
    --mr-strong: #000000; --mr-strong-ink: #FFFFFF;
    --mr-glass: rgba(33, 31, 38, 0.07);
    --mr-glass-h: rgba(33, 31, 38, 0.13);
    --mr-green: #4D8A00; --mr-amber: #CC4E00; --mr-blue: #0D74CE; --mr-red: #DC3E42;
    --mr-sub: #65636D; --mr-dubc: #65636D;
    --mr-shadow: 0 12px 40px -12px rgba(33, 31, 38, 0.25);
    color-scheme: light;
}

/* ============ base ============ */
body.hs.mr {
    font: 400 16px/1.5 var(--hs-f-body); color: var(--hs-tx);
    background: var(--hs-bg);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
.mr ::selection { background: rgba(var(--mr-fg-rgb), 0.22); }
.mr :focus-visible { outline: 2px solid var(--hs-ac); outline-offset: 2px; }
.mr a:hover { color: inherit; }
.mr h1, .mr h2, .mr h3, .mr h4 { font-family: var(--hs-f-head); }
.mr-skip { position: fixed; left: 12px; top: -100px; z-index: 1000; padding: 9px 14px; border-radius: var(--mr-r-md); background: var(--hs-ac-fill); color: #fff !important; font-weight: 700; }
.mr-skip:focus { top: 12px; }
.mr-i { flex: none; }
.mr .hs-wrap { max-width: 1800px; padding-left: 16px; padding-right: 16px; }
.mr .hs-main { padding-top: 12px; }
@media (max-width: 999px) { .mr .hs-wrap { padding-left: 8px; padding-right: 8px; } }
.mr #body.hs-page { position: relative; min-height: 60vh; }
/* the reference's content starts 56px down from 900px (48px bar + 8px), 48px below */
@media (min-width: 900px) { .mr #body.mr-main { padding-top: 8px; } }

/* logo wordmark follows the mode */
.mr .hs-logo-text { color: var(--hs-tx) !important; }
html[data-theme="light"] .mr .hs-logo-text .hs-logo-tail { background: linear-gradient(90deg, #6550B9, #2F265F); -webkit-background-clip: text; background-clip: text; }

/* signed-in / guest variants (#user .top-profile exists once main.js loaded a signed-in panel) */
body:has(#user .top-profile) .mr-auth-guest { display: none !important; }
body:not(:has(#user .top-profile)) .mr-auth-user { display: none !important; }

/* ============ rail (>= 900px) ============ */
.mr-rail { display: none; }
@media (min-width: 900px) {
    body.hs.mr { padding-left: var(--mr-rail); }
    .mr-rail { display: block; position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: var(--mr-rail); }
}
.mr-rail-nav { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; overflow-y: auto; scrollbar-width: none; }
.mr-rail-nav::-webkit-scrollbar { display: none; }
.mr-rail-brand, .mr-rail-item {
    position: relative; isolation: isolate; flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--mr-r-xl); background: none; color: var(--hs-tx-3); cursor: pointer;
    transition: transform 0.1s, color 0.15s;
}
.mr .mr-rail-item { color: var(--hs-tx-3); }
.mr-rail-brand { margin-bottom: 6px; }
.mr-rail-brand img { display: block; width: 32px; height: 32px; object-fit: contain; }
.mr-rail-brand:active, .mr-rail-item:active { transform: scale(0.95); }
/* the hover / active pill runs out to the screen edge, square on the left */
.mr-rail-item::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -6px; right: 0; border-radius: 0 var(--mr-r-xl) var(--mr-r-xl) 0; background: transparent; transition: background-color 0.15s; }
.mr-rail-item:hover { color: var(--hs-tx) !important; }
.mr-rail-item:hover::before { background: var(--mr-muted); }
.mr-rail-item.is-active { color: var(--hs-bg) !important; }
.mr-rail-item.is-active::before { background: var(--hs-tx); }
.mr-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; }
.mr-rail [data-mr-tip]::after {
    content: attr(data-mr-tip); position: absolute; left: calc(100% + 12px); top: 50%; z-index: 70;
    padding: 4px 8px; border-radius: var(--mr-r-md); background: var(--hs-tx); color: var(--hs-bg);
    font: 500 12px/16px var(--hs-f-body); white-space: nowrap; opacity: 0; pointer-events: none;
    transform: translate(-4px, -50%); transition: opacity 0.15s, transform 0.15s;
}
.mr-rail [data-mr-tip]:hover::after, .mr-rail [data-mr-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.mr-rail-fly-wrap { position: relative; }
.mr-rail-fly-wrap.open [data-mr-tip]::after, .mr-rail-fly-wrap:hover [data-mr-tip]::after { opacity: 0 !important; }
.mr-fly {
    position: fixed; left: calc(var(--mr-rail) + 8px); top: 8px; z-index: 80; width: 460px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 8px;
    background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-r-xl); box-shadow: var(--mr-shadow);
    opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s;
}
.mr-rail-fly-wrap:hover .mr-fly, .mr-rail-fly-wrap:focus-within .mr-fly, .mr-rail-fly-wrap.open .mr-fly { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mr-fly-hd { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--hs-tx-3); }
.mr-fly-hd a { font-size: 12px; font-weight: 500; text-transform: none; color: var(--hs-tx-3); }
.mr-fly-hd a:hover { color: var(--hs-tx) !important; }
.mr-fly-genres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-bottom: 10px; }
.mr-fly-types { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 4px; }
.mr-fly-genres a { padding: 6px 8px; border-radius: var(--mr-r-md); font-size: 14px; font-weight: 500; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-fly-genres a:hover { background: var(--mr-muted); }
.mr-fly-types a { padding: 4px 12px; border: 1px solid var(--mr-border); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--hs-tx-3); }
.mr-fly-types a:hover { color: var(--hs-tx) !important; background: var(--mr-muted); }

/* mode toggle icons (kept for any [data-mr-mode] button) */
.mr-mode .sun { display: none; }
html[data-theme="light"] .mr-mode .sun { display: block; }
html[data-theme="light"] .mr-mode .moon { display: none; }

/* ============ settings popover (title language + theme) ============ */
.mr-set {
    position: fixed; z-index: 95; width: min(calc(100vw - 24px), 280px); padding: 8px;
    background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-r-xl); box-shadow: var(--mr-shadow);
    top: calc(var(--mr-top) + 8px); right: 12px; animation: mr-pop 0.18s cubic-bezier(.16, 1, .3, 1);
}
.mr-set[hidden] { display: none; }
@media (min-width: 900px) { .mr-set { top: auto; right: auto; left: calc(var(--mr-rail) + 8px); bottom: 52px; } }
.mr-set-hd { margin: 0; padding: 4px 6px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--hs-tx-3); }
.mr-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 6px; border-top: 1px solid var(--hs-line); font-size: 14px; font-weight: 500; }
.mr .mr-lang { display: inline-flex; padding: 2px; gap: 0; border: 1px solid var(--mr-border); border-radius: 999px; background: none; }
.mr .mr-lang span { display: flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--hs-tx-3); cursor: pointer; }
.mr .mr-lang span.active { background: var(--mr-primary) !important; color: var(--mr-primary-ink) !important; }
html[data-theme="dark"] .mr-set-mode [data-mr-mode-set="dark"], html[data-theme="light"] .mr-set-mode [data-mr-mode-set="light"] { background: var(--mr-primary); color: var(--mr-primary-ink); }

/* ============ top bar ============ */
.mr-top { position: sticky; top: 0; z-index: 50; height: var(--mr-top); }
.mr-top-bg { position: absolute; inset: 0; z-index: -1; border-bottom: 1px solid var(--mr-border); background: rgba(var(--mr-rgb), 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 0.3s; }
@media (min-width: 900px) { .mr-top-bg { background: rgba(var(--mr-rgb), 0.6); } }
/* over the spotlight (page top) the bar is clear: no tint, blur or rule, as on the reference */
body:has(.mr-hero) .mr-top:not(.is-scrolled) .mr-top-bg { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mr-top-bg { transition: background-color 0.3s, border-color 0.3s; }
.mr-top-row { position: relative; display: flex; align-items: center; height: 100%; padding: 0 8px; }
.mr-brand { display: inline-flex; align-items: center; flex: none; height: 40px; padding: 0 6px; border-radius: var(--mr-r-md); transition: background-color 0.15s; }
.mr-brand:hover { background: var(--mr-muted); }
.mr-brand .hs-logo-mark { width: 32px; height: 32px; }
.mr-brand .hs-logo-img { height: 32px; width: auto; }
.mr-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* guests: the empty #user slot takes no room (main.js still renders into it) */
body:not(:has(#user .top-profile)) .mr-actions > #user { display: none; }
.mr-ib {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--mr-r-md);
    background: none; color: var(--hs-tx-3); cursor: pointer; transition: color 0.15s, background-color 0.15s;
}
.mr-ib:hover { color: var(--hs-tx); background: var(--mr-muted); }
.mr-menu-toggle .mr-dock-close { display: none; }
.mr-dock-on .mr-menu-toggle .mr-dock-open { display: none; }
.mr-dock-on .mr-menu-toggle .mr-dock-close { display: block; }
.mr-user .hs-ib, .mr-user .toggler { border-radius: var(--mr-r-md) !important; }
.mr .mr-user .hs-user-ph { display: none; }
/* guests: no sign-in button in the bar (the rail / menu carry Login, as on the reference) */
.mr .mr-user .sign-in, .mr .mr-user a.sign-in { display: none !important; }
@media (min-width: 900px) {
    .mr-top-row { padding: 0 24px; }
    .mr-brand, .mr-search-toggle, .mr-menu-toggle, .mr-hide-d { display: none !important; }
    /* actions float on the right so the search stays centred on the bar */
    .mr-actions { position: absolute; right: 24px; top: 0; bottom: 0; }
}

/* search: centred 448px field + joined 48px submit (>= 900px), full-bar overlay below */
.mr .mr-search { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; max-width: none; margin: 0; padding: 0 16px; }
.mr .mr-search form { position: relative; display: flex; align-items: stretch; width: 100%; max-width: 448px; height: 36px; padding: 0; background: none; border: 0; }
.mr-search-field { position: relative; flex: 1; min-width: 0; height: 36px; }
.mr .mr-search input {
    width: 100%; height: 36px; padding: 0 36px 0 16px; font: 400 14px/20px var(--hs-f-body); color: var(--hs-tx);
    background: rgba(var(--mr-muted-rgb), 0.7); border: 1px solid var(--mr-border); border-right: 0; border-radius: var(--mr-r-lg) 0 0 var(--mr-r-lg); outline: 0; box-shadow: none;
}
.mr .mr-search input::placeholder { color: rgba(181, 178, 188, 0.7); }
html[data-theme="light"] .mr .mr-search input::placeholder { color: rgba(101, 99, 109, 0.7); }
.mr .mr-search input:focus { border-color: var(--mr-border); box-shadow: none; }
.mr .mr-search .kbd { display: none; }
.mr-search-go {
    display: grid; place-items: center; flex: none; width: 48px; height: 36px; padding: 0; color: var(--hs-tx-3); cursor: pointer;
    background: rgba(var(--mr-muted-rgb), 0.7); border: 1px solid var(--mr-border); border-radius: 0 var(--mr-r-lg) var(--mr-r-lg) 0; transition: color 0.15s, background-color 0.15s;
}
.mr-search-go:hover { color: var(--hs-tx); background: var(--mr-muted); }
.mr-search-back { display: none; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--hs-tx-3); cursor: pointer; align-self: center; }
.mr-search-back:hover { color: var(--hs-tx); }
/* live results */
.mr .mr-search .search-popup {
    top: calc(100% + 6px); left: 0; right: 0; padding: 0; overflow: hidden; border-radius: var(--mr-r-lg) !important;
    background: rgba(var(--mr-muted-rgb), 0.7) !important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border: 1px solid var(--mr-border) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}
html[data-theme="light"] .mr .mr-search .search-popup { background: rgba(242, 239, 243, 0.85) !important; }
.mr .mr-search .hs-sp-head { display: none; }
.mr .mr-search .search-popup .body { padding: 0; }
.mr .hs-sr-list { display: block; padding: 0; }
.mr .hs-sr-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 0; color: var(--hs-tx); }
.mr .hs-sr-item:hover, .mr .hs-sr-item.active { background: rgba(var(--mr-fg-rgb), 0.05); }
.mr .hs-sr-item .poster { flex: none; width: 40px; height: 56px; border-radius: var(--mr-r-sm); background: var(--mr-muted); }
.mr .hs-sr-item .info { gap: 2px; min-width: 0; }
.mr .hs-sr-item .name { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr .hs-sr-item:hover .name, .mr .hs-sr-item.active .name { color: var(--hs-tx); }
.mr .hs-sr-item .meta { gap: 2px 8px; font-size: 12px; line-height: 16px; color: var(--hs-tx-3); }
.mr .hs-sr-item .meta > span + span::before { content: "·"; margin-right: 8px; }
.mr .hs-sr-item .meta .hs-star { color: var(--hs-tx-3); }
.mr .search-popup .no-result { padding: 16px 12px; font-size: 14px; color: var(--hs-tx-3); text-align: center; }
.mr .mr-search .hs-sp-foot { justify-content: center; padding: 0; border-top: 1px solid var(--mr-border); }
.mr .mr-search .hs-sp-foot .hs-sp-tip { display: none; }
.mr .mr-search .hs-sp-foot .more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 36px; font-size: 12px; font-weight: 400; color: var(--hs-tx-3) !important; }
.mr .mr-search .hs-sp-foot .more:hover { color: var(--hs-tx) !important; background: rgba(var(--mr-fg-rgb), 0.05); }
.mr .mr-search .hs-sp-foot .more[style*="none"] + *, .mr .mr-search .hs-sp-foot:has(.more[style*="none"]) { border-top: 0; }
.mr-search-toggle { display: none; }
@media (max-width: 899px) {
    .mr .mr-search { position: absolute; inset: 0; z-index: 30; gap: 8px; align-items: center; padding: 0 8px; background: var(--hs-bg); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s 0.2s; }
    .mr .mr-search.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; display: flex !important; }
    .mr .mr-search form { max-width: none; gap: 8px; }
    .mr .mr-search input { background: rgba(var(--mr-muted-rgb), 0.5); border-color: rgba(var(--mr-border-rgb), 0.6); }
    .mr-search-go { width: 40px; background: rgba(var(--mr-muted-rgb), 0.5); border-color: rgba(var(--mr-border-rgb), 0.6); }
    .mr-search-back { display: grid; }
    .mr-search-toggle { display: grid; }
    .mr .mr-search .search-popup { left: 32px; right: 0; }
}

/* ============ phone menu (< 900px): panel under the bar, top right ============ */
.mr-dock-scrim { position: fixed; left: 0; right: 0; bottom: 0; top: var(--mr-top); z-index: 90; border: 0; padding: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.mr-dock-panel {
    position: fixed; top: calc(var(--mr-top) + 8px); right: max(env(safe-area-inset-right), 12px); z-index: 91;
    display: flex; flex-direction: column; gap: 8px; width: min(calc(100vw - 24px), 304px); max-height: calc(100dvh - 68px); overflow: hidden; padding: 8px;
    background: var(--mr-card); color: var(--hs-tx); border: 1px solid var(--mr-border); border-radius: var(--mr-r-xl); box-shadow: var(--mr-shadow);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.96); transform-origin: 100% 0;
    transition: opacity 0.12s ease-in, transform 0.12s ease-in, visibility 0s 0.12s;
}
.mr-dock-acct, .mr-dock-item, .mr-dock-row { border: 1px solid rgba(var(--mr-border-rgb), 0.7); border-radius: var(--mr-r-md); background: transparent; color: var(--hs-tx); transition: background-color 0.15s, border-color 0.15s; }
.mr-dock-acct:hover, .mr-dock-item:hover, .mr-dock-row:hover { border-color: rgba(var(--mr-fg-rgb), 0.2); background: rgba(var(--mr-muted-rgb), 0.5); color: var(--hs-tx) !important; }
.mr-dock-acct { display: flex; flex: none; align-items: center; gap: 12px; min-height: 64px; padding: 10px; }
.mr-dock-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(186, 167, 255, 0.15); color: var(--mr-primary); box-shadow: inset 0 0 0 1px rgba(186, 167, 255, 0.2); }
html[data-theme="light"] .mr-dock-av { background: rgba(47, 38, 95, 0.12); box-shadow: inset 0 0 0 1px rgba(47, 38, 95, 0.2); }
.mr-dock-acct-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 24px; }
.mr-dock-acct > svg:last-child { color: var(--hs-tx-3); }
.mr-dock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: none; }
.mr-dock-wide { grid-column: 1 / -1; }
.mr-dock-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 64px; padding: 8px 10px; font-size: 14px; font-weight: 500; line-height: 20px; }
.mr-dock-item.is-active { border-color: rgba(186, 167, 255, 0.35); background: rgba(186, 167, 255, 0.1); color: var(--mr-primary) !important; }
html[data-theme="light"] .mr-dock-item.is-active { border-color: rgba(47, 38, 95, 0.35); background: rgba(47, 38, 95, 0.08); }
.mr-dock-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; font: 500 14px/20px var(--hs-f-body); text-align: left; cursor: pointer; }
.mr-dock-foot { display: flex; flex: none; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--mr-border); }
.mr-dock.is-open .mr-dock-scrim { opacity: 1; pointer-events: auto; }
.mr-dock.is-open .mr-dock-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.24s ease-out, transform 0.24s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
@media (min-width: 900px) { .mr-dock { display: none; } }
/* the AniHoshi bottom bar is not used by this theme */
.mr .hs-bnav { display: none !important; }

/* ============ footer ============ */
.mr-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mr-border); text-align: center; }
.mr-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
@media (max-width: 479px) { .mr-foot-links { column-gap: 14px; } }
.mr-foot-links a { display: inline-flex; align-items: center; font-size: 12px; line-height: 12px; white-space: nowrap; color: var(--hs-tx-3); transition: color 0.15s; }
.mr-foot-links a:hover { color: var(--hs-tx) !important; }
.mr-foot-note { max-width: 680px; margin: 0; font-size: 11px; line-height: 16px; color: var(--hs-tx-4); }
.mr .hs-footer { display: none; }

/* ============ shared building blocks ============ */
/* page wrapper: 8px gutters (16px from 1000px), 16px top, 24px between blocks (the home page widens these) */
.mr-page { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1800px; margin: 0 auto; padding: 16px 8px 24px; }
@media (min-width: 1000px) { .mr-page { padding-left: 16px; padding-right: 16px; } }
.mr-page-title { margin: 0; font-size: 24px; font-weight: 750; line-height: 32px; letter-spacing: -0.025em; color: var(--hs-tx); overflow-wrap: anywhere; }
.mr-page-sub { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--hs-tx-3); }
.mr-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mr-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 30px; }
.mr-st { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -0.015em; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-st-link { min-width: 0; border-radius: var(--mr-r-sm); }
.mr-st-link:hover .mr-st { color: var(--mr-primary); }
.mr-sh-tools { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 8px; }
.mr-sh-link { font-size: 12px; font-weight: 600; color: var(--hs-tx-3); }
.mr-sh-link:hover { color: var(--hs-tx) !important; }
.mr-empty { grid-column: 1 / -1; margin: 0; padding: 36px 16px; text-align: center; font-size: 14px; color: var(--hs-tx-3); list-style: none; }

/* pill segment (Sub / Dub) */
.mr-seg { display: inline-flex; gap: 0; padding: 2px; border: 1px solid var(--mr-border); border-radius: 999px; }
.mr-seg .tab, .mr-seg button {
    display: block; padding: 4px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font: 600 12px/16px var(--hs-f-body); color: var(--hs-tx-3); white-space: nowrap; transition: color 0.15s, background-color 0.15s;
}
.mr-seg .tab:hover, .mr-seg button:hover { color: var(--hs-tx); }
.mr-seg .tab.active, .mr-seg button.active { background: var(--mr-primary); color: var(--mr-primary-ink); }
.mr-seg-sm .tab { padding: 1px 10px; font-size: 11px; }

/* pill pager */
.mr-mini-pager { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border: 1px solid var(--mr-border); border-radius: 999px; }
.mr-mini-pager > span[role="button"], .mr-mini-pager > button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--hs-tx-3); cursor: pointer; transition: color 0.15s, background-color 0.15s, opacity 0.15s; }
.mr-mini-pager > span[role="button"]:hover, .mr-mini-pager > button:hover { color: var(--hs-tx); background: var(--mr-muted); }
.mr-mini-pager > .disabled { opacity: 0.4; pointer-events: none; }
.mr-mini-label { font-size: 12px; font-weight: 500; line-height: 16px; text-align: center; color: var(--hs-tx-3); font-variant-numeric: tabular-nums; }

/* buttons: 40px, 7px corners, 14px semibold */
.mr-btn {
    display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--mr-r-md);
    font: 600 14px/20px var(--hs-f-body); white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mr-btn svg { flex: none; width: 16px; height: 16px; }
.mr-btn:active { transform: scale(0.97); }
.mr-btn-p, .mr-btn-p:hover { background: var(--mr-strong); color: var(--mr-strong-ink) !important; }
.mr-btn-s, .mr-btn-glass, .mr-btn-o { background: var(--hs-bg-3); color: var(--hs-tx) !important; }
.mr-btn-s:hover, .mr-btn-glass:hover, .mr-btn-o:hover { background: rgba(var(--mr-muted-rgb), 0.8); }
.mr-btn-a { background: var(--mr-primary); color: var(--mr-primary-ink) !important; }
.mr-btn-icon { width: 40px; padding: 0; }
.mr-btn-sm { height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; }
.mr-btn-sm svg { width: 14px; height: 14px; }
.mr-icon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--mr-border); border-radius: 999px; color: var(--hs-tx-3); transition: color 0.15s, background-color 0.15s; }
.mr-icon-btn:hover { color: var(--hs-tx) !important; background: var(--mr-muted); }
.mr-icon-btn.is-disabled { opacity: 0.4; pointer-events: none; }

.mr-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
    font: 600 11px/16px var(--hs-f-body); color: #fff; background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--mr-r-sm);
}
.mr-badge svg { flex: none; }
.mr-badge-dub { color: #FCD34D; }
.mr-badge-hi { background: var(--hs-ac-fill); }
.mr-badge-18 { background: #B91C1C; }
/* spotlight pills */
.mr-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 400; line-height: 18px; color: var(--hs-tx);
    background: rgba(var(--mr-fg-rgb), 0.1); border: 1px solid rgba(var(--mr-fg-rgb), 0.08); border-radius: 999px;
}
.mr-pill-star { color: var(--hs-star); }
.mr-pill-s, .mr-pill-d { color: var(--hs-tx); }
/* small muted chips under the cards */
.mr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--hs-tx-3); }
.mr-chip { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px 6px; background: rgba(var(--mr-muted-rgb), 0.5); border-radius: var(--mr-r-sm); text-transform: uppercase; letter-spacing: 0.025em; font-variant-numeric: tabular-nums; transition: background-color 0.15s; }
.mr-chip .hs-li { margin-right: 2px; }
.mr-chip-n { text-transform: none; letter-spacing: 0; }
.mr-chip-ep { gap: 6px; }
.mr-chip-part { display: inline-flex; align-items: center; gap: 2px; }
.mr-chip-s, .mr-chip-d { color: var(--hs-tx-3); }
.mr-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-tx-4); }
.mr-dot-airing { background: var(--mr-green); }
.mr-dot-upcoming { background: var(--mr-amber); }
.mr-dot-finished { background: var(--mr-blue); }
.mr-dot-cancelled { background: var(--mr-red); }
.mr-dot-none { display: none; }
.mr-star { color: var(--hs-star); }

/* bordered side panel */
.mr-panel { padding: 12px; border-radius: var(--mr-r-lg); background: rgba(var(--mr-card-rgb), 0.4); border: 1px solid rgba(var(--mr-border-rgb), 0.6); overflow: hidden; }
.mr-panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 16px; }
.mr-panel-title { display: flex; align-items: center; gap: 4px; margin: 0; min-width: 0; font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: -0.015em; text-transform: uppercase; color: var(--hs-tx); }
.mr-panel-title a { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.mr-panel-title a:hover { color: var(--mr-primary) !important; }
.mr-panel-title svg { flex: none; }
.mr-panel-more { font-size: 12px; font-weight: 600; color: var(--hs-tx-3); }
.mr-panel-more:hover { color: var(--hs-tx) !important; }

/* ============ spotlight ============ */
.mr-hero { position: relative; isolation: isolate; width: 100%; height: 60svh; min-height: 30rem; touch-action: pan-y; }
.mr-hero-bg {
    position: fixed; top: 0; left: 0; right: 0; z-index: -1; height: calc(4rem + 70svh); min-height: 34rem;
    overflow: hidden; pointer-events: none; opacity: var(--mr-hero-fade, 1);
    -webkit-mask-image: linear-gradient(#000 0% 50%, transparent 100%); mask-image: linear-gradient(#000 0% 50%, transparent 100%);
}
.mr-hero-backdrop { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1); }
.mr-hero-backdrop.is-active { opacity: 1; }
.mr-hero-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transform: scale(1.02); }
.mr-hero-backdrop.is-active img { animation: mr-kenburns 14s ease-out forwards; }
.mr-hero-backdrop.is-poster img { object-position: center 20%; }
.mr-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--hs-bg) 4%, rgba(var(--mr-rgb), 0.35) 32%, transparent 60%); }
@media (max-width: 999px) { .mr-hero-backdrop, .mr-hero-scrim { width: calc(100% + 1rem); } }
@media (min-width: 1000px) { .mr-hero-backdrop, .mr-hero-scrim { top: -5rem; bottom: -2rem; } }
@media (max-width: 899px) {
    .mr-hero-scrim { background: linear-gradient(to bottom, rgba(var(--mr-rgb), 0.82), rgba(var(--mr-rgb), 0.55) 4rem, transparent 12rem), linear-gradient(to top, var(--hs-bg) 4%, rgba(var(--mr-rgb), 0.35) 32%, transparent 60%); }
}
@media (min-width: 900px) {
    .mr-hero-scrim { background: linear-gradient(to right, rgba(var(--mr-rgb), 0.7) 0%, transparent 9rem), linear-gradient(to top, var(--hs-bg) 4%, rgba(var(--mr-rgb), 0.35) 32%, transparent 60%); }
}
.mr-hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(0.75rem, 1vw, 1rem) clamp(0.75rem, 1vw, 1rem) clamp(1rem, 2vw, 1.5rem); }
.mr-hero-slide[hidden] { display: none; }
.mr-hero-inner { display: flex; flex-direction: column; gap: 0.85rem; max-width: 42rem; min-width: 0; }
.mr-hero-title, .mr-hero-meta, .mr-hero-desc, .mr-hero-cta { animation: mr-rise 0.6s cubic-bezier(.16, 1, .3, 1) backwards; }
.mr-hero-meta { animation-delay: 60ms; }
.mr-hero-desc { animation-delay: 0.12s; }
.mr-hero-cta { animation-delay: 0.18s; }
.mr-hero-title { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: normal; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); text-wrap: balance; }
html[data-theme="light"] .mr-hero-title { text-shadow: 0 2px 18px rgba(255, 255, 255, 0.6); }
.mr-hero-title a { color: var(--hs-tx); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mr-hero-title.has-logo { text-shadow: none; }
.mr-hero-title.has-logo a { display: block; }
.mr-hero-logo { display: block; width: auto; max-width: min(100%, 26rem); max-height: clamp(6rem, 14svh, 9rem); object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5)); }
.mr-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.mr-hero-desc { margin: 0; max-width: 36rem; font-size: 1rem; line-height: 1.55; color: rgba(var(--mr-fg-rgb), 0.8); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.mr-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.mr-hero-cta .favourite { position: relative; }
.mr-hero-cta .dropdown-menu { bottom: calc(100% + 6px); top: auto; }
.mr-hero-dots { position: absolute; bottom: clamp(1rem, 2vw, 1.5rem); left: 0; right: 0; z-index: 2; display: none; justify-content: center; align-items: center; gap: 0.4rem; pointer-events: none; }
@media (min-width: 1000px) { .mr-hero-dots { display: flex; } }
.mr-hero-dot { position: relative; width: 0.85rem; height: 0.3rem; padding: 0; border: 0; border-radius: 999px; background: rgba(var(--mr-fg-rgb), 0.3); cursor: pointer; pointer-events: auto; transition: width 0.3s cubic-bezier(.16, 1, .3, 1), background-color 0.2s; }
.mr-hero-dot:hover { background: rgba(var(--mr-fg-rgb), 0.5); }
.mr-hero-dot.is-active { width: 2rem; background: var(--hs-tx); }
.mr-hero-dot::before { content: ""; position: absolute; inset: -8px -2px; }
/* pause: visible only when focused from the keyboard */
.mr-hero-pause { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--mr-r-md); color: var(--hs-tx); background: var(--hs-bg-3); cursor: pointer; opacity: 0; pointer-events: none; }
.mr-hero-pause:focus-visible { opacity: 1; pointer-events: auto; }
.mr-hero-pause .pl { display: none; }
.mr-hero-pause[aria-pressed="true"] .pl { display: block; }
.mr-hero-pause[aria-pressed="true"] .pa { display: none; }

/* ============ home grid ============ */
.mr-home-grid { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.mr-home-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.mr-home-side { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; }
@media (min-width: 1200px) {
    .mr-home-grid { flex-direction: row; align-items: flex-start; }
    .mr-home-side { flex: none; width: 340px; }
}

/* ============ cards ============ */
/* grids: auto-fill columns from 10.5rem (10rem <= 1350px, 8rem <= 800px, 6.5rem <= 450px) */
.mr-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 2rem; align-items: start; transition: opacity 0.2s; }
@media (max-width: 1350px) { .mr-ep-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.5rem; } }
@media (max-width: 800px) { .mr-ep-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1rem; } }
@media (max-width: 450px) { .mr-ep-grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.8rem; } }

.mr-ep, .mr-pc { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--hs-tx); }
.mr-ep-media, .mr-pc-media { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--mr-muted); border-radius: var(--mr-r-lg); isolation: isolate; }
.mr-cwc-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mr-muted); border-radius: var(--mr-r-lg); isolation: isolate; }
.mr-ep-media::after, .mr-pc-media::after, .mr-sc-ps::after, .mr-cwc-media::after, .mr-art::after {
    content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(var(--mr-fg-rgb), 0.1);
}
.mr-ep-img, .mr-pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter 0.2s; }
.mr-ep:hover .mr-ep-img, .mr-ep:focus-visible .mr-ep-img, .mr-pc:hover .mr-pc-media img { filter: brightness(0.7); }
.mr-ep-play, .mr-pc-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.mr-ep-play > span, .mr-pc-play > span { display: grid; place-items: center; }
.mr-ep:hover .mr-ep-play, .mr-ep:focus-visible .mr-ep-play, .mr-pc:hover .mr-pc-play, .mr-cwc:hover .mr-ep-play { opacity: 1; }
.mr-ep-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; padding: 32px 8px 10px; font-size: 12px; line-height: 16px; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.75) 50%, transparent); pointer-events: none; }
.mr-ep-n { flex: none; font-weight: 600; }
.mr-ep-ago { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-ep-body, .mr-pc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mr-ep-title, .mr-pc-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.375; color: var(--hs-tx); transition: color 0.15s; }
.mr-pc-title a { color: inherit; }
.mr-ep:hover .mr-ep-title, .mr-pc:hover .mr-pc-title a, .mr-pc-title a:hover { color: var(--mr-primary) !important; }
.mr-ep:hover .mr-chip, .mr-pc:hover .mr-chip { background: rgba(var(--mr-muted-rgb), 0.9); }
.mr-pc-rel { margin: 0; font-size: 12px; font-weight: 600; color: var(--mr-amber); }
.mr-pc-more { display: none; }
#recent-update .body { min-height: 200px; }

/* generic poster grids follow the same columns */
.mr-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 2rem; align-items: start; }
@media (max-width: 1350px) { .mr-poster-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.5rem; } }
@media (max-width: 800px) { .mr-poster-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1rem; } }
@media (max-width: 450px) { .mr-poster-grid { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.8rem; } }

/* meta line (continue watching, sections) */
.mr-meta { display: flex; align-items: center; gap: 0 6px; min-width: 0; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--hs-tx-3); white-space: nowrap; overflow: hidden; }
.mr-meta-ep { flex: none; color: var(--hs-tx-2); font-weight: 600; }
.mr-meta-ep i { font-style: normal; color: var(--hs-tx-4); font-weight: 500; }
.mr-meta-sep { flex: none; color: var(--hs-tx-5); }
.mr-meta-dub { display: inline-flex; align-items: center; gap: 3px; }

/* 16:9 art, always full bleed (miruro/art.php picks still > backdrop > banner > poster) */
.mr-art { position: relative; display: block; overflow: hidden; background: var(--mr-muted); border-radius: var(--mr-r-lg); isolation: isolate; }
.mr-art > .mr-badge { z-index: 3; }
.mr-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter 0.2s, transform 0.35s cubic-bezier(0, 0, .2, 1); }
.mr-art[data-art="banner"] .mr-art-img { object-position: center 30%; }
.mr-art[data-art="poster"] .mr-art-img { object-position: center 20%; }
.mr-cwc:hover .mr-art-img, .mr-an:hover .mr-art-img { filter: brightness(0.7); }

/* continue watching */
.mr-cw-row { display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mr-cw-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .mr-cw-row { grid-auto-columns: 288px; } }
.mr-cw-all { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 12px; font-weight: 500; color: var(--hs-tx-3); transition: color 0.15s; }
.mr-cw-all:hover { color: var(--hs-tx); }
.mr-cw-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 16 / 9; align-self: start; scroll-snap-align: start; border: 1px solid var(--mr-border); border-radius: var(--mr-r-lg); font-size: 14px; color: var(--hs-tx-3); transition: color 0.15s, background-color 0.15s; }
.mr-cw-more:hover { color: var(--hs-tx); background: var(--mr-card); }
.mr-cwc { position: relative; scroll-snap-align: start; min-width: 0; }
.mr-cwc-link { display: flex; flex-direction: column; gap: 2px; color: var(--hs-tx); }
.mr-cwc-link .mr-cwc-media { margin-bottom: 10px; }
.mr-cwc-link .mr-meta { font-size: 12px; color: var(--hs-tx-3); }
.mr-cwc-link .mr-ep-title { -webkit-line-clamp: 1; }
.mr-cwc:hover .mr-ep-title { color: var(--mr-primary); }
.mr-cwc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr-cwc-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, 0.2); }
.mr-cwc-bar i { display: block; height: 100%; background: var(--mr-red); }
.mr-cwc-x { position: absolute; top: 8px; right: 8px; z-index: 5; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--mr-muted-rgb), 0.9); color: var(--hs-tx); cursor: pointer; opacity: 0; transition: opacity 0.15s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mr-cwc:hover .mr-cwc-x, .mr-cwc-x:focus-visible { opacity: 1; }
@media (hover: none) { .mr-cwc-x { opacity: 1; } }

/* side lists: 96px cards — poster, wide art fading in from the right, dot + title, small details */
.mr-rl-items { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mr-rl:not(.is-expanded) .is-extra { display: none; }
.mr-sc { position: relative; display: flex; align-items: center; gap: 8px; height: 96px; overflow: hidden; border-radius: var(--mr-r-lg); background: var(--mr-card); color: var(--hs-tx); transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out; }
.mr-sc:hover, .mr-sc:focus-visible { filter: brightness(1.1); transform: translateX(0.35rem); }
.mr-sc-ban { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; overflow: hidden; }
.mr-sc-ban img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.3s ease-in-out; }
.mr-sc-ban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(-70deg, transparent -200%, var(--mr-card) 80%); }
.mr-sc:hover .mr-sc-ban img { filter: grayscale(0); }
.mr-sc-ps { position: relative; flex: none; width: 68px; height: 100%; overflow: hidden; border-radius: var(--mr-r-lg); background: var(--mr-muted); }
.mr-sc-ps img { width: 100%; height: 100%; object-fit: cover; }
.mr-sc-body { position: relative; flex: 1; min-width: 0; padding: 8px 8px 8px 0; }
.mr-sc-head { display: flex; align-items: center; gap: 8px; }
.mr-sc-t { justify-self: start; font-size: 15px; font-weight: 600; line-height: 1.375; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color 0.2s ease-in-out; }
.mr-sc:hover .mr-sc-t { color: var(--mr-primary); }
.mr-sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; padding-left: 14px; font-size: 11px; font-weight: 500; line-height: 16.5px; color: var(--hs-tx-3); }
.mr-sd { display: inline-flex; flex: none; align-items: center; gap: 0.15rem; padding: 0.1rem 0.2rem; border-radius: 6px; background: rgba(var(--mr-muted-rgb), 0.7); font-variant-numeric: tabular-nums; }
.mr-sd-e { gap: 2px; border-radius: var(--mr-r-sm); }
.mr-rl-more { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin-top: 8px; padding: 8px 0; border: 0; border-radius: var(--mr-r-lg); background: var(--mr-card); color: var(--hs-tx-3); cursor: pointer; transition: color 0.15s, filter 0.15s; }
.mr-rl-more:hover { color: var(--hs-tx); filter: brightness(1.1); }
.mr-rl-more svg { width: 20px; height: 20px; transition: transform 0.15s; }
.mr-rl.is-expanded .mr-rl-more svg { transform: rotate(180deg); }
/* legacy list rows (other pages) */
.mr-li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--mr-r-lg); color: var(--hs-tx); transition: background-color 0.15s; }
.mr-li:hover { background: rgba(var(--mr-fg-rgb), 0.05); }
.mr-li-rank { flex: none; width: 20px; font: 800 13px/1 var(--hs-f-head); color: var(--hs-tx-4); text-align: center; font-variant-numeric: tabular-nums; }
.mr-li-thumb { position: relative; flex: none; width: 48px; height: 64px; overflow: hidden; background: var(--mr-muted); border-radius: var(--mr-r-sm); }
.mr-li-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mr-li-body { flex: 1; min-width: 0; }
.mr-li-head { display: flex; align-items: center; gap: 8px; }
.mr-li-title { font-size: 14px; font-weight: 600; line-height: 1.375; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color 0.15s; }
.mr-li:hover .mr-li-title { color: var(--mr-primary); }
.mr-li-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 5px; padding-left: 16px; font-size: 11px; font-weight: 500; line-height: 16px; color: var(--hs-tx-3); }
.mr-li-stats .s { display: inline-flex; align-items: center; gap: 3px; }

@media (max-width: 559px) {
    .mr-hide-xs { display: none !important; }
}

/* ============ browse / search / archives (browse pages now use mr-browse.css) ============ */

.mr .hs-f-kw { grid-column: 1 / -1; }
.mr .hs-f-go { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (min-width: 1000px) {
    .mr .hs-f-kw { grid-column: span 2; }
    .mr .hs-f-go { grid-column: -3 / -1; justify-content: flex-end; }
}
.mr .hs-f-kw svg { left: 12px; width: 15px; height: 15px; color: var(--hs-tx-4); }
.mr .hs-f-kw input, .mr .hs-fb {
    height: 36px; border: 1px solid var(--hs-line-2); border-radius: 4px; box-shadow: none;
    background: rgba(var(--mr-fg-rgb), 0.035); color: var(--hs-tx-3); font: 500 14px var(--hs-f-body);
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.mr .hs-f-kw input { padding: 0 12px 0 34px; color: var(--hs-tx); }
.mr .hs-f-kw input::placeholder { color: var(--hs-tx-4); }
.mr .hs-f-kw input:focus { border-color: rgba(var(--mr-fg-rgb), 0.35); box-shadow: 0 0 0 3px rgba(var(--mr-fg-rgb), 0.07); }
.mr .hs-fb { padding: 0 12px; }
.mr .hs-fb:hover { color: var(--hs-tx); background: rgba(var(--mr-fg-rgb), 0.07); }
.mr .hs-fb::after { opacity: 0.5; }
.mr .hs-f-go .hs-btn { flex: 1; height: 36px !important; border-radius: 4px; font: 700 13px var(--hs-f-body); }
@media (min-width: 1000px) { .mr .hs-f-go .hs-btn { flex: 0 1 auto; min-width: 96px; } }
.mr .hs-f-go .hs-btn-p { background: var(--hs-ac-fill); border-color: var(--hs-ac-fill); color: #fff !important; box-shadow: none; }
.mr .hs-f-go .hs-btn-p:hover { background: var(--hs-ac-fill-h); border-color: var(--hs-ac-fill-h); }
.mr .hs-f-go .hs-btn-o { background: transparent; border-color: var(--hs-line-2); color: var(--hs-tx-3) !important; }
.mr .hs-f-go .hs-btn-o:hover { color: var(--hs-tx) !important; background: rgba(var(--mr-fg-rgb), 0.06); }


.mr-pc-stats { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 0; font-size: 12px; color: var(--hs-tx-3); }
.mr-pc-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hs-tx-4); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* pagination + A–Z */
.mr .hs-pager.hs-pgu { margin-top: 28px; gap: 6px; }
.mr .hs-pgu .nv, .mr .hs-pgu .nums a, .mr .hs-pgu .nums span { height: 34px; min-width: 34px; border-radius: 4px !important; border: 1px solid var(--hs-line-2) !important; background: rgba(var(--mr-fg-rgb), 0.03) !important; color: var(--hs-tx-2) !important; font: 600 13px var(--hs-f-body) !important; box-shadow: none !important; text-decoration: none !important; }
.mr .hs-pgu .nv:hover, .mr .hs-pgu .nums a:hover { background: var(--hs-hover) !important; color: var(--hs-tx) !important; }
.mr .hs-pgu .nums .on { background: var(--hs-tx) !important; border-color: var(--hs-tx) !important; color: var(--hs-bg) !important; }
.mr .hs-pgu .nums .gap { border-color: transparent !important; background: none !important; }
.mr .hs-pgu .nv.off { opacity: 0.35; }
.mr .hs-az a { border-radius: 4px !important; }
.mr .hs-az a.active, .mr .hs-az a.on { background: var(--hs-tx) !important; color: var(--hs-bg) !important; border-color: var(--hs-tx) !important; }


/* ============ ambient artwork (watch / anime pages) ============ */
.mr-ambient { position: fixed; top: 0; left: 0; right: 0; z-index: -1; height: min(72vh, 760px); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); animation: mr-fade 0.8s ease-out; }
.mr-ambient-img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0.5; filter: blur(14px) saturate(1.1); transform: scale(1.06); }
html[data-theme="light"] .mr-ambient-img { opacity: 0.35; }
.mr-ambient-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--mr-rgb), 0.25), rgba(var(--mr-rgb), 0.82)); }
body.mr-has-ambient { background-image: none; }
.mr #body { isolation: auto; }

/* ============ shared building blocks for area files ============ */
/* .mr-join: joined button group (segmented tabs). Children: <a>/<button>; active = .is-active / .active / [aria-pressed=true] / [aria-selected=true] */
.mr-join { display: inline-flex; flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--mr-border); border-radius: var(--mr-r-md); background: var(--hs-bg); }
.mr-join::-webkit-scrollbar { display: none; }
.mr-join > * { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 34px; padding: 0 14px; margin: 0; border: 0; border-radius: 0; background: none; font: 600 13px/16px var(--hs-f-body); color: var(--hs-tx-3) !important; white-space: nowrap; cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.mr-join > * + * { border-left: 1px solid var(--mr-border); }
.mr-join > *:hover { color: var(--hs-tx) !important; background: rgba(var(--mr-muted-rgb), 0.6); }
.mr-join > .is-active, .mr-join > .active, .mr-join > [aria-pressed="true"], .mr-join > [aria-selected="true"] { color: var(--hs-tx) !important; background: var(--mr-muted); }
.mr-join-sm > * { height: 28px; padding: 0 10px; font-size: 12px; }
/* .mr-field: 36px input / select / textarea (min-height) */
.mr-field { display: block; width: 100%; height: 36px; min-width: 0; padding: 0 12px; border: 1px solid var(--mr-border); border-radius: var(--mr-r-lg); background: rgba(var(--mr-muted-rgb), 0.7); font: 400 14px/20px var(--hs-f-body); color: var(--hs-tx); outline: 0; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; }
.mr-field::placeholder { color: var(--hs-tx-3); opacity: 1; }
.mr-field:focus { border-color: var(--hs-tx-3); box-shadow: 0 0 0 3px rgba(var(--mr-muted-rgb), 0.9); }
textarea.mr-field { height: auto; min-height: 96px; padding: 8px 12px; resize: vertical; }
select.mr-field { -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5b2bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="light"] select.mr-field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365636d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* .mr-divider: section separator (1px rule, 24px rhythm; .mr-divider-sm = 16px) */
.mr-divider { display: block; height: 1px; margin: 24px 0; padding: 0; border: 0; background: var(--mr-border); opacity: 0.6; }
.mr-divider-sm { margin: 16px 0; }

/* ============ AniHoshi pages re-skinned (watch, anime page, member, community…) ============ */
.mr .hs-btn { height: 40px; padding: 0 16px; gap: 8px; border-radius: var(--mr-r-md); font: 600 14px/20px var(--hs-f-body); letter-spacing: 0; box-shadow: none; }
.mr .hs-btn-sm { height: 32px; padding: 0 12px; gap: 6px; font-size: 13px; }
.mr .hs-btn:active { transform: scale(0.97); }
.mr .hs-btn-p { background: var(--mr-primary); border-color: var(--mr-primary); color: var(--mr-primary-ink) !important; box-shadow: none; }
.mr .hs-btn-p:hover { background: color-mix(in srgb, var(--mr-primary) 88%, var(--hs-tx)); border-color: transparent; box-shadow: none; }
.mr .hs-btn-o { background: var(--hs-bg-3); border-color: var(--mr-border); color: var(--hs-tx) !important; }
.mr .hs-btn-o:hover { background: rgba(var(--mr-muted-rgb), 0.8); border-color: var(--mr-border); }
.mr .hs-btn-ghost { background: var(--mr-glass); border-color: rgba(var(--mr-fg-rgb), 0.12); color: var(--hs-tx) !important; }
.mr .hs-panel { border-radius: 4px; background: rgba(var(--mr-fg-rgb), 0.025); border-color: var(--hs-line); box-shadow: none; }
.mr .hs-ib { border-radius: 4px; }
.mr .hs-crumbs { font-size: 12.5px; color: var(--hs-tx-4); }
.mr .hs-crumbs a { color: var(--hs-tx-3); }
.mr .hs-crumbs a:hover { color: var(--hs-tx) !important; }
.mr .hs-sh h2, .mr .hs-h2 { font-family: var(--hs-f-head); font-weight: 700; letter-spacing: -0.02em; text-transform: none; }
.mr .dropdown-menu, .mr .hs-dd-menu, .mr .search-popup { background: var(--mr-menu-bg); border: 1px solid var(--hs-line-2); color: var(--hs-tx) !important; box-shadow: var(--mr-shadow) !important; border-radius: var(--mr-r-lg); }
.mr .dropdown-menu .dropdown-item:hover, .mr .folders .dropdown-item:hover { background: rgba(var(--mr-fg-rgb), 0.07); color: var(--hs-tx); }
.mr .tooltipster-sidetip .tooltipster-box { border-radius: var(--mr-r-lg) !important; background: var(--hs-bg-3) !important; border: 1px solid var(--hs-line-2) !important; }
.mr .modal-content { border-radius: var(--mr-r-lg); overflow: hidden; background: var(--hs-bg-2); border-color: var(--hs-line-2); color: var(--hs-tx); }

/* watch page: Miruro-style flat panels over the ambient artwork */
.mr.watch .hs-main { padding-top: 6px; }
.mr #player-wrapper, .mr #w-player #player { border-radius: 4px; overflow: hidden; }
.mr #player-wrapper { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7); }
.mr #player .play span { border-radius: 50%; background: #fff; color: #09090B; box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6); }
.mr #w-servers, .mr #w-episodes, .mr .hs-next { border-radius: 4px; background: rgba(var(--mr-rgb), 0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--hs-line); }
html[data-theme="light"] .mr #w-servers, html[data-theme="light"] .mr #w-episodes, html[data-theme="light"] .mr .hs-next { background: rgba(255, 255, 255, 0.78); }

/* ============ light mode: neutralise AniHoshi's hard-coded dark colours ============ */
html[data-theme="light"] .mr .hs-card .ttl, html[data-theme="light"] .mr .hs-btitle, html[data-theme="light"] .mr .hs-rel3 .t, html[data-theme="light"] .mr .hs-tipc .hd .t { color: var(--hs-tx) !important; }
html[data-theme="light"] .mr .hs-card .sub { color: var(--hs-tx-4); }
html[data-theme="light"] .mr .hs-results.is-list .hs-card { background: var(--hs-bg-2); }
html[data-theme="light"] .mr .tooltip { background: var(--hs-tx); color: var(--hs-bg); }

/* ============ keyframes ============ */
@keyframes mr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mr-pop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mr-kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
    .mr *, .mr ::before, .mr ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============ light mode for AniHoshi parent pages (watch, comments, servers, legacy buttons) ============ */
html[data-theme="light"] .mr .hs-cb-eps > span + span { border-left-color: var(--hs-line) !important; }
html[data-theme="light"] .mr .hs-cb-eps .s { color: #0B8DB5 !important; }
html[data-theme="light"] .mr .hs-cb-eps .d { color: #C47A0C !important; }
html[data-theme="light"] .mr .hs-cb-eps .t { color: var(--hs-tx-3) !important; }
html[data-theme="light"] .tooltipster-base.tooltipster-sidetip .tooltipster-box { box-shadow: 0 24px 50px rgba(15, 30, 50, 0.2); }
html[data-theme="light"] :where(.hs-dd-menu, .dropdown-menu, .search-popup) { background: #fff; border-color: var(--hs-line-2); 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-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); }
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); }
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; }
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); }
html[data-theme="light"] .hs-comments, html[data-theme="light"] #comments { color: var(--hs-tx); }
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; }
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-az-sm a { background: var(--hs-raise); border-color: var(--hs-line); color: var(--hs-tx-2); }
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: #0B8DB5 !important; }
html[data-theme="light"] .hs-tr .hs-pill-sm .d { color: #C47A0C !important; }
html[data-theme="light"] .hs-tr .hs-pill-sm .t { color: var(--hs-tx-3) !important; }
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"] .mr.hs-legacy #body .nc-cate .item .badge, html[data-theme="light"] .mr.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); }
html[data-theme="light"] .hs-lang span.active { background: var(--hs-ac-fill) !important; color: #fff !important; }
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"] .mr.hs-legacy #body .btn-light, html[data-theme="light"] .mr.hs-legacy #body .btn-secondary,
html[data-theme="light"] .mr.hs-legacy #body .btn-outline-light, html[data-theme="light"] .mr.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"] .mr.hs-legacy #body .btn-light:hover, html[data-theme="light"] .mr.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; }
/* watch info / controls / sidebar: flat 4px Miruro skin */
.mr .hs-info .title { font: 800 32px/1.12 var(--hs-f-head) !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--hs-tx); }
.mr .hs-info .poster img { border-radius: 4px; }
.mr .hs-b { border-radius: 3px; }
.mr .hs-info .synopsis .content { color: var(--hs-tx-3); }
.mr .hs-info .meta dd, .mr .hs-info .meta dd a { color: var(--hs-tx); }
.mr .hs-info .meta dt { color: var(--hs-tx-4); }
.mr .hs-chip { border-radius: 3px; background: var(--hs-raise); border-color: var(--hs-line); color: var(--hs-tx-2) !important; }
.mr #w-rating { border-radius: 4px; background: rgba(var(--mr-fg-rgb), 0.03); border-color: var(--hs-line); }
.mr .hs-ctrls { border-radius: 4px; }
.mr .hs-ctrls .ctrl { border-radius: 4px; color: var(--hs-tx-3); }
.mr .hs-ctrls .ctrl:hover { color: var(--hs-tx); }
.mr .hs-epv, .mr .hs-epv button { border-radius: 4px; }
.mr #w-episodes .episodes a { border-radius: 3px; }
.mr .hs-seasons .season a, .mr .hs-rel3 a { border-radius: 4px; }
.mr .hs-tr { border-radius: 4px; background: rgba(var(--mr-fg-rgb), 0.03); border: 1px solid var(--hs-line); }
.mr .hs-tr .tx > .t { color: var(--hs-tx); }
.mr .hs-next, .mr .hs-nextep { border-radius: 4px; }
.mr .hs-seg { border-radius: 4px; background: rgba(var(--mr-fg-rgb), 0.03); border-color: var(--hs-line); }
.mr .hs-seg .hs-tab { border-radius: 3px; color: var(--hs-tx-3); }
.mr .hs-seg .hs-tab.active { background: var(--hs-tx); color: var(--hs-bg); }
html[data-theme="light"] .mr .hs-i5-add { background: var(--hs-ac-fill); }

/* full-bleed player on phones: match this theme's 12px gutter */
@media (max-width: 760px) { .mr #player-wrapper { margin: 0 -12px; } }

/* ============ filled accent surfaces with white text: deeper fill (>= 4.5:1, dark + light) ============ */
.mr .block_area-comment .ci-buttons .btn-primary { background: var(--hs-ac-fill) !important; border-color: var(--hs-ac-fill) !important; color: #fff !important; }
.mr .block_area-comment .ci-buttons .btn-primary:hover { background: var(--hs-ac-fill-h) !important; filter: none; }
.mr .mapper-dl-chip:hover { background: var(--hs-ac-fill) !important; border-color: var(--hs-ac-fill) !important; color: #fff !important; }
.mr .mapper-dl-grp.is-open .mapper-dl-grp-toggle { background: var(--hs-ac-fill); color: #fff; }
.mr .rq-guide .rq-steps > li::before { background: var(--hs-ac-fill); color: #fff; }
body.hs.mr .ak-friend-confirm-yes { background: #C53030; color: #fff; }
.mr .hs-ctrls .ctrl .sw.on { background: var(--hs-ac-fill); }

/* ============ rating (miruro partial): stars show the score at rest, number beside them ============ */
.mr .hs-rate.mr-rate #w-rating.hs-r3 { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; text-align: left; }
.mr .mr-rate .hs-r3-r { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border: 0; }
.mr .mr-rate .hs-r3-r .kick { font-size: 10px; letter-spacing: 0.1em; }
.mr-rate-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mr .mr-rate .hs-r3 .stars { --st: 20px; margin-left: -2px; justify-content: flex-start; }
.mr-rate .hs-r3 .stars span.full i { width: var(--st) !important; }
.mr-rate .hs-r3 .stars span.half i { width: calc(var(--st) / 2) !important; }
.mr-rate .hs-r3 .stars span:not(.full):not(.half) i { width: 0 !important; }
.mr-rate-v { display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; color: var(--hs-tx); }
.mr-rate-v b { font: 800 15px/1 var(--hs-f-body); }
.mr-rate-v small { font-size: 11px; font-weight: 600; color: var(--hs-tx-4); }
.mr-rate-v em { margin-left: 3px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--hs-tx-4); }
.mr-rate .hs-r3.hs-hov .mr-rate-v, .mr-rate .hs-r3.hs-rated .mr-rate-v { opacity: 0.55; }
.mr .mr-rate .hs-r3-r .lab { display: flex; justify-content: flex-start; min-height: 0; flex-wrap: wrap; white-space: normal; font-size: 11.5px; }
.mr .mr-rate .hs-r3 .message { font-size: 11.5px; }
.mr .mr-rate .hs-r3-f { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; margin: 0; padding: 0 12px; border-top: 0; border-left: 1px solid var(--hs-line); }
.mr .mr-rate .hs-r3-share { height: 28px; padding: 0 10px; gap: 5px; border-radius: 4px; font-size: 12px; font-weight: 600; }
/* watch page (wide info bar): kicker, stars + score and hint sit on one line */
.mr .hs-i5 .mr-rate .hs-r3-r { flex-direction: row; align-items: center; gap: 14px; padding: 8px 14px; border-right: 0; }
.mr .hs-i5 .mr-rate .hs-r3-r .lab { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 760px) {
    .mr .hs-i5 .hs-rate.mr-rate #w-rating.hs-r3 { padding: 0; text-align: left; }
    .mr .hs-i5 .mr-rate .hs-r3-r { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
    .mr .hs-i5 .mr-rate .hs-r3-r .lab { display: flex; white-space: normal; }
    .mr .hs-i5 .mr-rate .hs-r3 .stars { --st: 22px; margin-left: -2px; justify-content: flex-start; }
    .mr .hs-i5 .mr-rate .hs-r3-f { display: flex; flex-direction: row; grid-column: auto; margin: 0; padding: 0 12px; border-top: 0; }
}

/* ============ new home / watch sections (views/miruro/sections) ============ */
.mr-sh-count { font-size: 12px; font-weight: 600; color: var(--hs-tx-4); }

/* Next Episode card (watch page) */
.mr-ne { margin-top: 12px; padding: 10px; border: 1px solid var(--hs-line); border-radius: 4px; background: rgba(var(--mr-fg-rgb), 0.025); }
.mr-ne[hidden], .mr-ne [hidden] { display: none !important; }
.mr-ne-next, .mr-ne-soon { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 14px; color: var(--hs-tx); }
.mr-ne-next { grid-template-columns: 168px minmax(0, 1fr) auto; }
.mr-ne-media { aspect-ratio: 16 / 9; }
.mr-ne-next:hover .mr-ep-play { opacity: 1; }
.mr-ne-next:hover .mr-art-img { transform: scale(1.04); }
.mr-ne-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-ne-body .mr-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-ne-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-tx-4); }
.mr-ne-t { font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color 0.15s; }
.mr-ne-next:hover .mr-ne-t { color: var(--hs-ac); }
.mr-ne-up .mr-art-img { filter: grayscale(0.4) brightness(0.55); }
.mr-ne-cd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mr-ne-cd > span { display: grid; justify-items: center; min-width: 50px; padding: 5px 4px; border: 1px solid var(--hs-line-2); border-radius: 4px; background: var(--hs-raise); }
.mr-ne-cd b { font: 800 20px/1 var(--hs-f-head); font-variant-numeric: tabular-nums; }
.mr-ne-cd small { margin-top: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-tx-4); }
.mr-ne-cd.is-live { font-size: 14px; font-weight: 700; color: var(--mr-green); }
.mr-ne-when { font-size: 12px; font-weight: 600; color: var(--hs-tx-3); }
@media (max-width: 640px) {
    .mr-ne-next { grid-template-columns: 128px minmax(0, 1fr); }
    .mr-ne-go { grid-column: 1 / -1; justify-content: center; }
    .mr-ne-soon { grid-template-columns: minmax(0, 1fr); }
    .mr-ne-soon .mr-ne-media { display: none; }
    .mr-ne-cd > span { min-width: 46px; }
}
/* Player controls bar: wrap on tablets so the row never pushes the page wider (761–1150px). */
@media (max-width: 1150px) and (min-width: 761px) {
    .mr .hs-ctrls { flex-wrap: wrap; row-gap: 4px; }
    .mr .hs-ctrls .right { margin-left: 0; flex-wrap: wrap; }
    .mr .hs-ctrls .left::after { display: none; }
}

/* ============ signed-in bar: bell only (account lives in the rail / menu, as on the reference) ============ */
.mr #user .top-profile { gap: 6px; }
.mr #user .top-profile > .user.dropdown { display: none; }
.mr #user .notify .toggler { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--mr-r-md) !important; background: none; color: var(--hs-tx); cursor: pointer; transition: background-color 0.15s; }
.mr #user .notify .toggler.active { background: none; color: var(--hs-tx); }
.mr #user .notify .toggler:hover { background: var(--mr-muted); }
.mr #user .notify .toggler svg { width: 20px; height: 20px; }
.mr #user .notify .toggler .dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--mr-primary); box-shadow: 0 0 0 2px var(--hs-bg); }

/* bell panel: a centred 512px dialog (full width minus 12px gutters on phones) over a dim scrim */
.mr #user .user-notification.dropdown-menu {
    position: fixed !important; top: 98px !important; left: 50vw !important; right: auto !important; bottom: auto !important;
    transform: translateX(-50%) !important; width: 512px; max-width: calc(100vw - 24px); min-width: 0;
    max-height: min(704px, calc(100vh - 140px)); margin: 0; padding: 0; display: none; flex-direction: column; overflow: hidden;
    background: var(--mr-card) !important; border: 1px solid var(--mr-border) !important; border-radius: var(--mr-r-xl) !important;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5) !important; color: var(--hs-tx); font-size: 14px; animation: mr-pop 0.15s ease-out;
}
.mr #user .user-notification.dropdown-menu.show { display: flex; }
@media (max-width: 639px) { .mr #user .user-notification.dropdown-menu { top: 70px !important; left: 12px !important; right: 12px !important; width: auto; max-width: none; transform: none !important; } }
.mr #user .user-notification::before {
    content: "Notifications"; display: flex; align-items: center; flex: none; height: 56px; padding: 0 16px 0 58px; border-bottom: 1px solid var(--mr-border);
    font-size: 16px; font-weight: 600; line-height: 24px; color: var(--hs-tx);
    background: no-repeat 24px 50% / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5b2bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 003.4 0'/%3E%3C/svg%3E");
}
html[data-theme="light"] .mr #user .user-notification::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365636d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 003.4 0'/%3E%3C/svg%3E"); }
.mr #user .user-notification .noti-bell-head { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; padding: 16px; border-bottom: 1px solid var(--mr-border); }
.mr #user .user-notification .noti-bell-tabs { display: flex; flex: 1; gap: 6px; min-width: 0; border: 0; }
.mr #user .user-notification .noti-bell-tabs > span {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-width: 0; height: 32px; margin: 0; padding: 0 8px;
    border: 1px solid var(--mr-border); border-radius: var(--mr-r-md); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--hs-tx-3); white-space: nowrap; transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.mr #user .user-notification .noti-bell-tabs > span:hover { color: var(--hs-tx); background: var(--mr-muted); }
.mr #user .user-notification .noti-bell-tabs > span.active { color: var(--mr-primary); background: color-mix(in srgb, var(--mr-primary) 10%, transparent); border-color: color-mix(in srgb, var(--mr-primary) 50%, transparent); }
@media (max-width: 639px) { .mr #user .user-notification .noti-bell-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr #user .user-notification .noti-bell-tabs .badge { margin: 0; padding: 0 5px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 999px; font-size: 10px; font-weight: 600; background: var(--mr-muted); color: inherit; }
.mr #user .user-notification .noti-bell-actions { flex: none; min-height: 0; padding: 0; }
.mr #user .user-notification .noti-bell-actions .filter { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--mr-r-md); background: none; color: var(--hs-tx); font-size: 15px; }
.mr #user .user-notification .noti-bell-actions .filter.d-none { display: none; }
.mr #user .user-notification .noti-bell-actions .filter:hover { background: var(--mr-muted); border: 0; color: var(--hs-tx); }
.mr #user .user-notification .noti-bell-actions .filter span { display: none; }
.mr #user .user-notification .noti-bell-pane.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mr #user .user-notification .noti-bell-pane .body-box { max-height: none !important; overflow: visible !important; padding: 16px; }
.mr #user .user-notification .scaff.items { display: flex; flex-direction: column; gap: 8px; }
/* episode alert: poster strip + title + small bordered chips, like the reference cards */
.mr #user .user-notification .noti-panel-anime a.item {
    position: relative; display: flex; align-items: stretch; gap: 8px; min-height: 76px; margin: 0; padding: 0; overflow: hidden;
    background: var(--mr-card) !important; border: 1px solid var(--mr-border); border-radius: var(--mr-r-md); color: var(--hs-tx); transition: border-color 0.15s;
}
.mr #user .user-notification .noti-panel-anime a.item:hover { border-color: var(--hs-tx-3); }
.mr #user .user-notification .noti-panel-anime a.item .poster { position: relative; flex: none; width: 56px; margin: 0; padding: 0; background: var(--mr-muted); }
.mr #user .user-notification .noti-panel-anime a.item .poster span { position: absolute; inset: 0; display: block; padding: 0; margin: 0; }
.mr #user .user-notification .noti-panel-anime a.item .poster img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mr #user .user-notification .noti-panel-anime a.item .info { display: flex; flex-wrap: wrap; align-content: space-between; align-items: center; gap: 8px 6px; flex: 1; min-width: 0; padding: 8px 20px 8px 0; }
.mr #user .user-notification .noti-panel-anime a.item .content { display: contents; }
.mr #user .user-notification .noti-panel-anime a.item .title { flex: 0 0 100%; }
.mr #user .user-notification .noti-panel-anime a.item .dot::before { display: none; }
.mr #user .user-notification .noti-panel-anime a.item .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.375; color: var(--hs-tx) !important; white-space: normal; }
.mr #user .user-notification .noti-panel-anime a.item .highlight, .mr #user .user-notification .noti-panel-anime a.item time {
    flex: 0 1 auto; padding: 2px 6px; border: 1px solid var(--mr-border); border-radius: 6px; background: rgba(var(--mr-muted-rgb), 0.9);
    font-size: 11px; font-weight: 700; line-height: 16.5px; color: var(--hs-tx-3) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mr #user .user-notification .noti-panel-anime a.item.old { opacity: 0.7; }
.mr #user .user-notification .noti-panel-anime a.item:not(.old)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mr-primary); }
.mr #user .user-notification .noti-panel-community .noti-mention, .mr #user .user-notification .noti-system { border: 1px solid var(--mr-border); border-radius: var(--mr-r-md); background: var(--mr-card); }
.mr #user .user-notification .no-result { padding: 40px 16px; text-align: center; font-size: 14px; color: var(--hs-tx-3); }
.mr #user .user-notification .hs-noti-all { flex: none; margin: 0; padding: 12px 16px; border-top: 1px solid var(--mr-border); font-size: 13px; font-weight: 600; color: var(--hs-tx-3) !important; text-align: center; }
.mr #user .user-notification .hs-noti-all:hover { color: var(--hs-tx) !important; background: var(--mr-muted); }

/* Site logo uploaded as a white mark (miruro-logo*): flip it to dark ink in light mode. */
html[data-theme="light"] img.hs-logo-img[src*="miruro-logo"] { filter: invert(1); }