/* Shared CMSPro front-end components: retain the existing video-site palette. */
/* Keep centered pages the same width when a short list no longer needs scrolling. */
html { scrollbar-gutter:stable; }
@supports not (scrollbar-gutter:stable) { html { overflow-y:scroll; } }
html.theme-light body { color-scheme: light; --page:#fff; --surface:#fff; --surface-raised:#fff; --surface-soft:#f4f4f4; --text:#17181b; --text-muted:#66696d; --text-dim:#6b6d72; --line:rgba(16,17,20,.1); --accent:#627f14; --accent-ink:#fff; --shadow:0 18px 50px rgba(30,30,30,.09); }
html.theme-dark body { color-scheme: dark; --page:#101114; --surface:#191a1f; --surface-raised:#202127; --surface-soft:#24262d; --text:#f4f2ef; --text-muted:#a3a2a5; --text-dim:#a3a2a5; --line:rgba(255,255,255,.09); --accent:#d5fa6b; --accent-ink:#16190d; --shadow:0 18px 50px rgba(0,0,0,.24); }
.logo-for-light { display:none; }
html.theme-light .logo-for-dark { display:none; }
html.theme-light .logo-for-light { display:block; }
.header-inner { gap:16px; flex-wrap:wrap; padding-block:14px; }
.brand { flex-shrink:0; }
/* Reserve a local logo's actual aspect ratio before download, with a bounded remote fallback. */
.brand:has(> .brand-logo) { width:var(--brand-logo-width,128px); min-width:0; max-width:100%; }
.brand-logo { width:100%; max-width:100%; height:42px; object-position:left center; }
/* Compact only desktop logos; leave mobile sizing and right-hand actions unchanged. */
@media (min-width:821px) {
    .brand:has(> .brand-logo) { width:var(--brand-logo-desktop-width,var(--brand-logo-width,42px)); }
}
@media (min-width:1301px) { .header-inner { column-gap:12px; } }
.main-nav { flex:1; align-self:auto; gap:20px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; min-height:44px; }
.main-nav::-webkit-scrollbar { display:none; }
.nav-link { flex-shrink:0; gap:5px; min-height:44px; }
.nav-link-updates { --update-badge-size:clamp(20px,calc(var(--update-count-digits,1) * 6px + 6px),32px); padding-right:calc(var(--update-badge-size) + 4px); }
.nav-update-count { position:absolute; top:2px; right:0; display:grid; place-items:center; width:var(--update-badge-size); height:var(--update-badge-size); border:1px solid var(--page); border-radius:50%; color:var(--accent-ink); background:var(--accent); font-size:clamp(6px,calc(14px - var(--update-count-digits,1) * 1px),11px); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.nav-link::after { bottom:0; }
.main-nav .nav-link:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:4px; }
.header-app-link { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:5px; min-height:44px; max-width:140px; padding-inline:12px; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-radius:7px; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); font-size:12px; font-weight:700; white-space:nowrap; }
.header-app-link span { overflow:hidden; text-overflow:ellipsis; }
.header-app-link:hover, .header-app-link.active { border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }
.header-app-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.navigation-icon { width:16px; height:16px; flex-shrink:0; }
.header-actions { flex-shrink:0; }
.header-account-actions { display:flex; flex-shrink:0; align-items:center; gap:6px; }
.search-form { position:relative; padding-right:4px; }
.search-form button { flex-basis:30px; width:30px; height:30px; line-height:1; }
.search-form .search-icon { display:block; width:18px; height:18px; }
.search-tip { display:none; position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:250px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface-raised); color:var(--text-muted); box-shadow:var(--shadow); font-size:12px; line-height:1.6; }
.search-form:focus-within .search-tip { display:block; }
.footer-inner { flex-wrap:wrap; gap:18px; align-items:start; }
.footer-inner > span { flex:1; min-width:180px; max-width:800px; line-height:1.8; white-space:pre-line; overflow-wrap:anywhere; }
.footer-links { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; }
.site-tools { position:fixed; z-index:25; right:18px; bottom:max(20px,env(safe-area-inset-bottom)); display:grid; gap:8px; }
.site-tools button { width:44px; height:44px; border:1px solid var(--line); border-radius:9px; background:var(--surface-raised); box-shadow:var(--shadow); cursor:pointer; font-size:20px; }
.site-tools button:hover { color:var(--accent); border-color:var(--accent); }
/* Local spacing only: preserve module spacing on other public pages. */
.home-page > .page-shell > .site-ad + .promotion-group { margin-top:10px; }
.home-page > .page-shell > :is(.site-ad,.promotion-group):has(+ .content-section) { margin-bottom:0; }
.home-page > .page-shell > :is(.site-ad,.promotion-group) + .content-section { margin-top:36px; }
@media (max-width:820px) {
    .home-page > .page-shell > .site-ad + .promotion-group { margin-top:8px; }
    .home-page > .page-shell > :is(.site-ad,.promotion-group) + .content-section { margin-top:28px; }
}
.site-ad { margin:26px 0; overflow:hidden; min-width:0; }
.home-page > .page-shell > .site-ad:has(+ .promotion-group) { margin-bottom:0; }
.site-ad img, .site-ad iframe, .site-ad video { max-width:100%; }
/* The media canvas is present on first paint, including a cold-cache return visit. */
.site-ad [data-ad-media] { display:block; width:100%; height:auto; object-fit:contain; }
.site-ad iframe[data-ad-media] { border:0; }
.member-link, .header-account-actions .header-history-link { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--text-muted); }
.member-link:hover, .header-history-link:hover { color:var(--accent); }
.member-link:focus-visible, .header-history-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.member-avatar { display:block; width:36px; height:36px; border-radius:50%; object-fit:cover; }
.site-ad .module-adslist, .site-ad .rm-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.site-notice { width:min(540px,calc(100vw - 32px)); max-height:80dvh; padding:26px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:var(--surface); box-shadow:var(--shadow); }
.site-notice::backdrop { background:rgba(8,10,15,.7); backdrop-filter:blur(5px); }
.notice-open { overflow:hidden; }
.notice-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.notice-heading h2 { margin:0; font-size:21px; }
.notice-heading button { width:44px; height:44px; border:0; background:transparent; color:var(--text-muted); font-size:28px; cursor:pointer; }
.notice-content { margin-top:12px; line-height:1.9; overflow-wrap:anywhere; }
.notice-content img { max-width:100%; height:auto; }
/* Disable native double-tap zoom, while keeping pan and player event handling. */
html { touch-action:manipulation; }
.site-notice > .primary-button { display:flex; width:fit-content; margin:20px auto 0; }
@media (max-width:600px) {
    .site-notice { width:min(360px,calc(100% - 40px)); max-height:70dvh; padding:18px; border-radius:12px; }
    .notice-heading { gap:10px; }
    .notice-heading h2 { font-size:18px; }
    .notice-content { margin-top:8px; font-size:14px; line-height:1.7; }
    /* Prevent input-focus zoom without interfering with text selection or typing. */
    input, select, textarea { font-size:16px; }
}
.placeholder-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.poster-wrap:has(> .cover-image.is-loaded) .placeholder-image { display:none; }
.video-grid.landscape-grid .poster-wrap, .landscape-covers .video-grid .poster-wrap, .landscape-covers .week-track .poster-wrap { aspect-ratio:16/9; }
.video-grid.landscape-grid .video-card::before, .landscape-covers .video-grid .video-card::before, .landscape-covers .week-track .video-card::before { aspect-ratio:16/9; }
.category-module-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.category-list-heading { margin-top:0; }
.category-rank-tabs { max-width:360px; }
/* Match the weekly schedule page without changing unrelated ranking tabs. */
.home-week-tabs .week-tab { min-width:0; height:44px; min-height:44px; padding:7px 14px; border:0; border-radius:6px; color:var(--text); background:transparent; font-size:14px; font-weight:400; }
.home-week-tabs .week-tab.is-active { color:var(--accent-ink); background:var(--accent); font-weight:400; }
@media (max-width:820px) { .home-week-tabs .week-tab { padding-inline:4px; font-size:12px; } }
@media (hover:hover) { .home-week-tabs .week-tab:not(.is-active):hover { background:rgba(128,128,128,.13); } }
[hidden] { display:none!important; }
@media (min-width:821px) and (max-width:1300px) { .main-nav { order:3; flex-basis:100%; } .search-form { width:260px; } }
@media (max-width:820px) {
    .header-inner { gap:6px 18px; padding-block:8px; }
    .main-nav { order:3; flex-basis:100%; min-height:44px; height:44px; padding-bottom:0; }
    .header-actions { margin-left:auto; gap:10px; }
    .header-actions .search-form { width:clamp(132px,28vw,236px); }
    /* Compact 32px visual button inside the unchanged 44px touch target. */
    .header-app-link { position:relative; isolation:isolate; max-width:92px; padding-inline:8px; gap:4px; border:0; background:transparent; font-size:11px; }
    .header-app-link::before { content:''; position:absolute; z-index:-1; inset:6px 0; border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line)); border-radius:6px; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); pointer-events:none; }
    .header-app-link:hover, .header-app-link.active { background:transparent; }
    .header-app-link:hover::before, .header-app-link.active::before { border-color:var(--accent); background:var(--accent); }
    .header-app-link .navigation-icon { width:14px; height:14px; }
    .site-header.mobile-navigation .main-nav { gap:8px; }
    .site-header.mobile-navigation .nav-link { padding-inline:12px; border:1px solid var(--line); border-radius:999px; }
    .site-header.mobile-navigation .nav-link-updates { padding-right:calc(var(--update-badge-size) + 14px); }
    .site-header.mobile-navigation .nav-update-count { top:1px; right:7px; }
    .site-header.mobile-navigation .nav-link.active { color:var(--accent-ink); background:var(--accent); }
    .site-header.mobile-navigation .nav-link::after { display:none; }
    .footer-inner { padding-right:40px; }
}
@media (max-width:560px) {
    .header-inner { display:grid; grid-template-columns:minmax(0,.9fr) minmax(110px,1.25fr) auto; align-items:center; gap:4px 10px; }
    /* Share the account area across two columns so APP only reserves its own width. */
    .has-app-entry .header-inner { grid-template-columns:minmax(0,.9fr) minmax(110px,1.25fr) auto max-content; }
    .brand { grid-area:1 / 1; min-width:0; }
    .brand:has(> .brand-logo) { width:var(--brand-logo-mobile-width,104px); }
    .brand-name { overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
    .brand-mark { display:none; }
    .brand-logo { max-width:100%; max-height:34px; }
    .header-actions { display:contents; }
    .header-actions .search-form { grid-area:1 / 2; width:100%; height:36px; }
    .header-account-actions { grid-area:1 / 3; gap:0; }
    .has-app-entry .header-account-actions { grid-area:1 / 3 / 2 / 5; justify-self:end; }
    .member-link { min-height:44px; font-size:11px; }
    .main-nav { grid-row:2; grid-column:1 / -1; width:auto; }
    .has-app-entry .main-nav { grid-column:1 / 4; }
    .header-app-link { grid-area:2 / 4; justify-self:end; width:fit-content; min-width:44px; max-width:80px; padding-inline:7px; }
    .search-tip { right:-54px; width:min(250px,calc(100vw - 28px)); }
    .site-tools { right:8px; bottom:max(12px,env(safe-area-inset-bottom)); }
    .site-ad .module-adslist, .site-ad .rm-two { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (max-width: 820px) {
    .home-week-tabs {
        align-items: center;
    }

    .home-week-tabs .week-tab.is-active {
        height: 32px;
        min-height: 32px;
        padding-block: 0;
    }
}