/*
 * MB11 Spectrum — 10 套完整配色系统
 * 主题不仅修改主色，同时覆盖背景、卡片、标题、正文、弱化文字、边框、按钮、页脚和焦点态。
 */
:root,
:root[data-theme="aurora"] {
    color-scheme: light;
    --theme-primary: #2563eb;
    --theme-primary-hover: #1d4ed8;
    --theme-primary-soft: #e8f0ff;
    --theme-on-primary: #ffffff;
    --theme-accent: #0f7b9d;
    --theme-accent-2: #6d4bc3;
    --theme-accent-soft: #e5f5fa;
    --theme-bg: #eef4ff;
    --theme-bg-deep: #dfe9fb;
    --theme-surface: #ffffff;
    --theme-surface-elevated: #f8fbff;
    --theme-heading: #102448;
    --theme-text: #27364f;
    --theme-muted: #62718a;
    --theme-border: #cad7eb;
    --theme-footer: #102448;
    --theme-footer-text: #eaf1ff;
    --theme-focus: rgba(37, 99, 235, .28);
    --theme-shadow-color: rgba(28, 55, 96, .12);
    --theme-art-1: rgba(37, 99, 235, .20);
    --theme-art-2: rgba(15, 123, 157, .15);
}

:root[data-theme="jade"] {
    color-scheme: light;
    --theme-primary: #087f5b;
    --theme-primary-hover: #066649;
    --theme-primary-soft: #def5ec;
    --theme-on-primary: #ffffff;
    --theme-accent: #0b7285;
    --theme-accent-2: #5c7c36;
    --theme-accent-soft: #e1f4f5;
    --theme-bg: #eaf7f1;
    --theme-bg-deep: #d8eee5;
    --theme-surface: #ffffff;
    --theme-surface-elevated: #f7fcf9;
    --theme-heading: #12372c;
    --theme-text: #29483f;
    --theme-muted: #60786f;
    --theme-border: #bfdcce;
    --theme-footer: #12372c;
    --theme-footer-text: #e4f7ef;
    --theme-focus: rgba(8, 127, 91, .28);
    --theme-shadow-color: rgba(20, 74, 57, .12);
    --theme-art-1: rgba(8, 127, 91, .20);
    --theme-art-2: rgba(11, 114, 133, .14);
}

:root[data-theme="coral"] {
    color-scheme: light;
    --theme-primary: #c63e2e;
    --theme-primary-hover: #a93225;
    --theme-primary-soft: #fde9e4;
    --theme-on-primary: #ffffff;
    --theme-accent: #a85218;
    --theme-accent-2: #bd2d67;
    --theme-accent-soft: #fff0df;
    --theme-bg: #fff3ed;
    --theme-bg-deep: #f8e2d8;
    --theme-surface: #fffdfc;
    --theme-surface-elevated: #fff8f5;
    --theme-heading: #4b211b;
    --theme-text: #57342d;
    --theme-muted: #86655d;
    --theme-border: #e7c8be;
    --theme-footer: #4b211b;
    --theme-footer-text: #fff0eb;
    --theme-focus: rgba(217, 72, 53, .28);
    --theme-shadow-color: rgba(104, 49, 38, .13);
    --theme-art-1: rgba(217, 72, 53, .20);
    --theme-art-2: rgba(189, 45, 103, .13);
}

:root[data-theme="violet"] {
    color-scheme: dark;
    --theme-primary: #a78bfa;
    --theme-primary-hover: #c4b5fd;
    --theme-primary-soft: #33265c;
    --theme-on-primary: #20163d;
    --theme-accent: #67e8f9;
    --theme-accent-2: #f0abfc;
    --theme-accent-soft: #153f53;
    --theme-bg: #171329;
    --theme-bg-deep: #0f0c1c;
    --theme-surface: #241d3b;
    --theme-surface-elevated: #2d2449;
    --theme-heading: #f4f0ff;
    --theme-text: #ded8ef;
    --theme-muted: #aaa1c3;
    --theme-border: #4a4064;
    --theme-footer: #0d0a18;
    --theme-footer-text: #e9e2ff;
    --theme-focus: rgba(167, 139, 250, .38);
    --theme-shadow-color: rgba(0, 0, 0, .34);
    --theme-art-1: rgba(139, 92, 246, .28);
    --theme-art-2: rgba(103, 232, 249, .12);
}

:root[data-theme="amber"] {
    color-scheme: light;
    --theme-primary: #b45309;
    --theme-primary-hover: #92400e;
    --theme-primary-soft: #fff0cc;
    --theme-on-primary: #ffffff;
    --theme-accent: #8a5a12;
    --theme-accent-2: #9a3412;
    --theme-accent-soft: #f8e9c7;
    --theme-bg: #fff8e7;
    --theme-bg-deep: #f3e6c8;
    --theme-surface: #fffefa;
    --theme-surface-elevated: #fffaf0;
    --theme-heading: #3f2b14;
    --theme-text: #54402a;
    --theme-muted: #7d6b56;
    --theme-border: #dfc99f;
    --theme-footer: #3f2b14;
    --theme-footer-text: #fff3d7;
    --theme-focus: rgba(180, 83, 9, .28);
    --theme-shadow-color: rgba(94, 64, 23, .13);
    --theme-art-1: rgba(217, 119, 6, .22);
    --theme-art-2: rgba(154, 52, 18, .12);
}

:root[data-theme="rose"] {
    color-scheme: light;
    --theme-primary: #be185d;
    --theme-primary-hover: #9d174d;
    --theme-primary-soft: #fce7f1;
    --theme-on-primary: #ffffff;
    --theme-accent: #a21caf;
    --theme-accent-2: #c24157;
    --theme-accent-soft: #f6e7fa;
    --theme-bg: #fff0f5;
    --theme-bg-deep: #f5dfe8;
    --theme-surface: #fffdfd;
    --theme-surface-elevated: #fff7fa;
    --theme-heading: #4a1830;
    --theme-text: #593047;
    --theme-muted: #866579;
    --theme-border: #e5bfd0;
    --theme-footer: #46142b;
    --theme-footer-text: #ffeaf3;
    --theme-focus: rgba(190, 24, 93, .28);
    --theme-shadow-color: rgba(104, 37, 66, .13);
    --theme-art-1: rgba(190, 24, 93, .19);
    --theme-art-2: rgba(162, 28, 175, .12);
}

:root[data-theme="ocean"] {
    color-scheme: light;
    --theme-primary: #087d98;
    --theme-primary-hover: #0e6377;
    --theme-primary-soft: #dcf3f8;
    --theme-on-primary: #ffffff;
    --theme-accent: #255cb5;
    --theme-accent-2: #0f766e;
    --theme-accent-soft: #e1ebfb;
    --theme-bg: #eaf7fb;
    --theme-bg-deep: #d6ebf1;
    --theme-surface: #ffffff;
    --theme-surface-elevated: #f6fcfe;
    --theme-heading: #123c4a;
    --theme-text: #2b4a55;
    --theme-muted: #627b84;
    --theme-border: #bcd9e2;
    --theme-footer: #103946;
    --theme-footer-text: #e2f7fb;
    --theme-focus: rgba(8, 125, 152, .28);
    --theme-shadow-color: rgba(20, 72, 88, .12);
    --theme-art-1: rgba(8, 145, 178, .20);
    --theme-art-2: rgba(37, 92, 181, .13);
}

:root[data-theme="forest"] {
    color-scheme: light;
    --theme-primary: #2f855a;
    --theme-primary-hover: #276749;
    --theme-primary-soft: #e2f3e8;
    --theme-on-primary: #ffffff;
    --theme-accent: #4f772d;
    --theme-accent-2: #98702d;
    --theme-accent-soft: #edf3df;
    --theme-bg: #f0f6ea;
    --theme-bg-deep: #dee9d4;
    --theme-surface: #fffffc;
    --theme-surface-elevated: #f8fbf4;
    --theme-heading: #243c28;
    --theme-text: #3b503d;
    --theme-muted: #6b7b6c;
    --theme-border: #c6d8c0;
    --theme-footer: #203524;
    --theme-footer-text: #eaf5e7;
    --theme-focus: rgba(47, 133, 90, .28);
    --theme-shadow-color: rgba(52, 84, 55, .12);
    --theme-art-1: rgba(47, 133, 90, .19);
    --theme-art-2: rgba(152, 112, 45, .12);
}

:root[data-theme="graphite"] {
    color-scheme: dark;
    --theme-primary: #22d3ee;
    --theme-primary-hover: #67e8f9;
    --theme-primary-soft: #133b43;
    --theme-on-primary: #08262c;
    --theme-accent: #60a5fa;
    --theme-accent-2: #2dd4bf;
    --theme-accent-soft: #172f48;
    --theme-bg: #111827;
    --theme-bg-deep: #090f1a;
    --theme-surface: #1f2937;
    --theme-surface-elevated: #273548;
    --theme-heading: #f1f7fb;
    --theme-text: #d7e1e8;
    --theme-muted: #9eafbc;
    --theme-border: #405165;
    --theme-footer: #080d15;
    --theme-footer-text: #dff9fd;
    --theme-focus: rgba(34, 211, 238, .36);
    --theme-shadow-color: rgba(0, 0, 0, .38);
    --theme-art-1: rgba(34, 211, 238, .18);
    --theme-art-2: rgba(96, 165, 250, .16);
}

:root[data-theme="sakura"] {
    color-scheme: light;
    --theme-primary: #c0266d;
    --theme-primary-hover: #9f1858;
    --theme-primary-soft: #fde8f0;
    --theme-on-primary: #ffffff;
    --theme-accent: #8b5e83;
    --theme-accent-2: #d05252;
    --theme-accent-soft: #f3e8f2;
    --theme-bg: #fff5f8;
    --theme-bg-deep: #f5e4e9;
    --theme-surface: #fffefe;
    --theme-surface-elevated: #fff8fb;
    --theme-heading: #4b2436;
    --theme-text: #5d3a49;
    --theme-muted: #8b6977;
    --theme-border: #e6cbd5;
    --theme-footer: #472232;
    --theme-footer-text: #ffedf4;
    --theme-focus: rgba(192, 38, 109, .27);
    --theme-shadow-color: rgba(99, 47, 69, .12);
    --theme-art-1: rgba(244, 114, 182, .19);
    --theme-art-2: rgba(139, 94, 131, .12);
}

/* 全站语义色映射 */
html { background: var(--theme-bg-deep); }
body {
    color: var(--theme-text);
    background-color: var(--theme-bg) !important;
    background-image:
        radial-gradient(circle at 7% -4%, var(--theme-art-1), transparent 31rem),
        radial-gradient(circle at 96% 5%, var(--theme-art-2), transparent 29rem),
        linear-gradient(145deg, var(--theme-bg-deep), var(--theme-bg) 48%, var(--theme-bg-deep)) !important;
    transition: background-color .2s ease, color .2s ease;
}
body::before {
    background: linear-gradient(90deg, var(--theme-primary) 0 58%, var(--theme-accent) 58% 82%, var(--theme-accent-2) 82% 100%) !important;
}

h1, h2, h3, h4, h5, h6,
.appel-title, .home-link-zone__title, .detail-info strong,
.detail-info label, .copyright .footer-highlight {
    color: var(--theme-heading) !important;
}
p, li, dd, dt, span, label, input, select, textarea,
.detail-info, .detail-content, .play-box, .comment-box {
    color: var(--theme-text);
}
.text-muted, small, .breadcrumbs, .detail-info p, .detail-info span,
.thumbnail .text-muted, .appel-title small, .mb11-pagination-summary {
    color: var(--theme-muted) !important;
}

a, .text-primary, .youmu-app dt a, .score > em, .detail-info h2 small,
.appel-title h4 a, .frvod, .today-count {
    color: var(--theme-primary) !important;
}
a:hover, a:focus, .youmu-app dt a:hover, .appel-title h4 a:hover {
    color: var(--theme-primary-hover) !important;
}
::selection { color: var(--theme-heading); background: var(--theme-primary-soft); }
:focus-visible { outline-color: var(--theme-focus); }

.appel, .youmu-app, .search-list, .detail-content, .detail-play-list,
.thumbnail, .play-box, .comment-box, .random-icon-grid .random-icon-item,
.partner-banner-link {
    color: var(--theme-text);
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 10px 28px var(--theme-shadow-color);
}
.appel-title, .youmu-app dt, .detail-tab, .breadcrumbs,
.appel-heading, .detail-source {
    border-color: var(--theme-border) !important;
}
.stui-header__top {
    color: var(--theme-text);
    background: linear-gradient(135deg, var(--theme-surface-elevated), var(--theme-accent-soft)) !important;
    border-color: var(--theme-border) !important;
}
.thumbnail:hover { box-shadow: 0 14px 30px var(--theme-shadow-color); }

/* 顶栏 */
.mb11-site-header {
    position: relative;
    display: flex;
    min-height: 64px;
    height: auto !important;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 8px 14px !important;
}
.mb11-site-brand {
    float: none !important;
    width: auto !important;
    max-width: min(58vw, 420px);
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.mb11-site-brand a { display: inline-flex; align-items: center; min-height: 46px; }
.mb11-site-brand img {
    display: block;
    max-width: 100%;
    max-height: 46px;
    margin: 0 !important;
    object-fit: contain;
}
/* 搜索、按钮与分页 */
#ddab .seach input {
    color: var(--theme-text) !important;
    background: var(--theme-surface) !important;
    border-color: var(--theme-primary) !important;
}
#ddab .seach input::placeholder { color: var(--theme-muted) !important; }
#ddab .seach button,
.appel-tabs > a.active,
.backtop:hover .iconfont,
.mb11-pagination-controls .mb11_page_go {
    color: var(--theme-on-primary) !important;
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}
#ddab .seach button:hover,
#ddab .seach button:focus,
.mb11-pagination-controls .mb11_page_go:hover,
.mb11-pagination-controls .mb11_page_go:focus-visible {
    color: var(--theme-on-primary) !important;
    background: var(--theme-primary-hover) !important;
    border-color: var(--theme-primary-hover) !important;
}
.detail-tab > li, .detail-play-list li > a, .play-source,
.page a, .page span, .pagination > li > a, .pagination > li > span {
    color: var(--theme-text) !important;
    background: var(--theme-primary-soft) !important;
    border-color: var(--theme-border) !important;
}
.detail-tab > li.active, .detail-tab > li.active > a,
.detail-play-list li > a:hover, .detail-play-list li > a.play-active,
.page a:hover, .page .current, .pagination > .active > a {
    color: var(--theme-on-primary) !important;
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* 横向视频分类：左侧一级分类，右侧最多 8 个子分类。 */
.youmu-app { overflow: hidden; }
.youmu-app .area {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-color: var(--theme-primary) var(--theme-primary-soft);
    -webkit-overflow-scrolling: touch;
}
.youmu-app dl {
    display: grid !important;
    grid-template-columns: 110px repeat(8, minmax(98px, 1fr));
    float: none !important;
    width: 100% !important;
    min-width: 900px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--theme-accent-2) !important;
    border-radius: 0 !important;
    background: var(--theme-surface) !important;
    box-shadow: none !important;
}
.youmu-app dl:nth-child(even) { background: var(--theme-surface-elevated) !important; }
.youmu-app dl:last-child { border-bottom: 0 !important; }
.youmu-app dt {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    float: none !important;
    width: auto !important;
    min-height: 56px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    line-height: 1.35 !important;
    white-space: nowrap;
    background: transparent !important;
    text-align: left !important;
}
.youmu-app dt::after,
.youmu-app dt:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 22px;
    margin: 0 !important;
    background: var(--theme-primary) !important;
    transform: translateY(-50%);
}
.youmu-app dd {
    display: flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    width: auto !important;
    min-height: 56px;
    margin: 0 !important;
    padding: 0 10px !important;
    line-height: 1.35 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center !important;
}
.youmu-app dt a,
.youmu-app dd a { color: var(--theme-primary) !important; }
.youmu-app dt a { font-weight: 700; }
.youmu-app dt a:hover,
.youmu-app dd a:hover { color: var(--theme-primary-hover) !important; }

/* 标签云使用主题弱化色，文字保持可读。 */
.home-link-zone--tags .search-cloud1 > .random-link-item,
.home-link-zone--tags .search-cloud1 > .random-link-item:nth-child(even) {
    color: var(--theme-text) !important;
    background: var(--theme-primary-soft) !important;
    border-color: var(--theme-border) !important;
}
.home-link-zone--tags .search-cloud1 > .random-link-item:hover,
.home-link-zone--tags .search-cloud1 > .random-link-item:focus-visible {
    color: var(--theme-on-primary) !important;
    background: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

.footer { color: var(--theme-footer-text) !important; background: var(--theme-footer) !important; }
.footer p, .footer span, .footer label { color: var(--theme-footer-text) !important; }
.footer .footer-highlight { color: var(--theme-footer-text) !important; }
.footer a { color: var(--theme-footer-text) !important; text-decoration-color: var(--theme-accent); }
.footer a:hover { color: #ffffff !important; }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 640px) {
    .mb11-site-header { justify-content: center; }
    .mb11-site-brand { max-width: 100%; text-align: center !important; }
    .mb11-site-brand a { display: flex; justify-content: center; }
    .youmu-app dl { grid-template-columns: 96px repeat(8, 96px); min-width: 864px; }
    .youmu-app dt { padding: 0 14px !important; }
    .youmu-app dt, .youmu-app dd { min-height: 50px; font-size: 14px; }
}