/*!
 * 余映 · 二次元站皮肤（B站 / AcFun 语汇）
 * ------------------------------------------------------------------
 * 这一层只做「皮肤」，不动 DOM、不动数据契约：
 *   - 原 style.css 保持原样，本文件在它之后加载，用 body.ag-skin 抬优先级；
 *   - 退回旧外观：后台「外观 → 余映设置 → 视觉氛围」关掉「二次元」开关即可。
 *
 * 设计语言（第四代）：
 *   1. 中性灰画布 + 纯白卡片 —— 海报是唯一的高饱和来源，界面退成灰阶；
 *   2. 单一品牌粉只做「点」：当前项、主按钮、追番态、进度条，不做大面积渐变；
 *   3. 小圆角（6 / 8px）+ 极淡投影（0 1px 3px）+ 1px 分隔线；
 *      不用墨线描边、不用硬偏移阴影、不用 backdrop-filter 玻璃；
 *   4. 动效克制：hover 位移 2px、150~200ms 过渡、入场只做淡入，不弹跳、不错峰演戏；
 *   5. 圆角与配色全部收敛在 token 里，换 AcFun 配色只改 --ag-brand 一族即可。
 *
 * 前几代（已废弃，勿混用）：浅色液态玻璃 / 赛璐璐贴纸 / 暗夜霓虹。
 */

/* ============================================================
   0. 设计令牌
   ============================================================ */
body.ag-skin {
    /* 重映射主题原生变量：主题的 :root 本来就是「浅底深字」，
       所以这里只换色相与圆角，不需要做黑白反转 —— 回归最稳、副作用最小。 */
    --bg: #f1f2f3;
    --surface: #ffffff;
    --ink: #18191c;
    --ink-soft: #3d4249;
    --muted: #61666d;
    --line: #e3e5e7;
    --line-ink: #d3d6da;
    --accent: #fb7299;
    --soft: #fff1f6;
    --radius: 8px;

    /* 皮肤自有令牌（--ag- 前缀，避免与主题变量互撞） */
    --ag-bg: #f1f2f3;
    --ag-surface: #ffffff;
    --ag-surface-2: #f6f7f8;
    --ag-ink: #18191c;
    --ag-ink-2: #41464e;
    --ag-muted: #61666d;
    --ag-faint: #9499a0;

    --ag-line: #e3e5e7;
    --ag-line-2: #d0d3d8;

    /* 品牌：B站粉。换 AcFun 只需把这三行改成 #fd4c5b / #ff6b78 / #fff0f1 */
    --ag-brand: #fb7299;
    --ag-brand-h: #fc8bab;
    --ag-brand-soft: #fff1f6;
    --ag-brand-line: #f7c6d6;

    /* 辅助：蓝（链接 / 次要强调）、橙（评分）、红（热标记） */
    --ag-blue: #00aeec;
    --ag-orange: #ff8800;
    --ag-red: #fd4c5b;

    /* 卡片：白底 + 6~8px 小圆角 + 一层几乎看不见的投影 */
    --ag-r: 8px;
    --ag-r-sm: 6px;
    --ag-r-poster: 6px;
    --ag-shadow-card: 0 1px 3px rgba(0, 0, 0, .05);
    --ag-shadow-card-hover: 0 4px 14px rgba(0, 0, 0, .09);
    --ag-shadow-pop: 0 8px 32px rgba(0, 0, 0, .14);

    --ag-ease: cubic-bezier(.4, 0, .2, 1);
    --ag-fast: .16s var(--ag-ease);
}

body.ag-skin :focus-visible {
    outline: 2px solid var(--ag-brand);
    outline-offset: 2px;
}

/* 输入框不用 outline：它自己有 focus 的边框 + 淡粉光圈，
   两套叠在一起会变成很粗的一圈粉边 */
body.ag-skin input:focus-visible,
body.ag-skin textarea:focus-visible,
body.ag-skin select:focus-visible {
    outline: none;
}

/* ============================================================
   1. 画布与基础排版
   ============================================================ */
body.ag-skin {
    background: var(--ag-bg);
    color: var(--ag-ink);
    -webkit-font-smoothing: antialiased;
}

body.ag-skin ::selection {
    background: var(--ag-brand);
    color: #fff;
}

/* 主题自带的氛围层：粉 / 紫 / 青三颗光斑 + 飘落花瓣。
   B站、AcFun 这类站不做背景光效，界面本身是干净的灰，光斑只会让整页发脏。
   只在皮肤开启时隐藏 —— 关掉皮肤后原氛围层照常回来。 */
body.ag-skin .ag-fx,
body.ag-skin .ag-fx-glow,
body.ag-skin .ag-fx-petals {
    display: none !important;
}

/* 页标题：实色深灰 + 700，不用渐变字、不用荧光笔 */
body.ag-skin .ag-native-main > h1,
body.ag-skin .ag-single-page .ag-detail-title h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.3;
    color: var(--ag-ink);
    background: none;
    -webkit-text-fill-color: currentColor;
}

body.ag-skin h2,
body.ag-skin h3 {
    color: var(--ag-ink);
    letter-spacing: -.2px;
}

body.ag-skin a:hover {
    color: var(--ag-brand);
}

/* ============================================================
   2. 顶栏：纯白 + 1px 分隔线，不做磨砂、不做流光
   ============================================================ */
body.ag-skin .ag-header-band {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--ag-line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: box-shadow .2s ease, border-color .2s ease;
}

body.ag-skin .ag-header-band.is-scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    border-bottom-color: transparent;
}

/* 顶栏下沿的彩色光带在 B 站语汇里没有，收掉 */
body.ag-skin .ag-header-band::after {
    content: none !important;
    display: none !important;
}

body.ag-skin .ag-site-header {
    background: transparent;
}

body.ag-skin .brand {
    color: var(--ag-ink);
    font-weight: 700;
    letter-spacing: 1.5px;
}

body.ag-skin .brand .brand-mark,
body.ag-skin .brand-mark {
    background: var(--ag-brand);
    color: #fff;
    border-radius: 8px;
    box-shadow: none;
}

body.ag-skin .brand-sub {
    color: var(--ag-faint);
}

/* 主导航：横排文字，当前项粉字 + 2px 粉条 */
body.ag-skin .ag-site-header nav {
    gap: 2px;
}

body.ag-skin .ag-site-header nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ag-r-sm);
    background: transparent;
    box-shadow: none;
    color: var(--ag-ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--ag-fast), background var(--ag-fast);
}

body.ag-skin .ag-site-header nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ag-brand);
    transform: scaleX(0);
    transition: transform .2s var(--ag-ease);
}

body.ag-skin .ag-site-header nav a:hover {
    background: var(--ag-surface-2);
    color: var(--ag-brand);
}

body.ag-skin .ag-site-header nav a[aria-current="page"] {
    color: var(--ag-brand);
    font-weight: 600;
    background: transparent;
}

body.ag-skin .ag-site-header nav a[aria-current="page"]::after,
body.ag-skin .ag-site-header nav a:hover::after {
    transform: scaleX(1);
}

/* 搜索框：灰底胶囊，聚焦白底 + 粉边 —— B站顶栏就是这个处理 */
body.ag-skin .ag-header-search {
    background: var(--ag-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background var(--ag-fast), border-color var(--ag-fast), box-shadow var(--ag-fast);
}

body.ag-skin .ag-header-search:focus-within {
    background: #fff;
    border-color: var(--ag-brand);
    box-shadow: 0 0 0 3px rgba(251, 114, 153, .12);
}

body.ag-skin .ag-header-search input {
    background: transparent;
    color: var(--ag-ink);
}

body.ag-skin .ag-header-search input::placeholder {
    color: var(--ag-faint);
}

body.ag-skin .ag-header-search button {
    color: var(--ag-muted);
    background: transparent;
    transition: color var(--ag-fast);
}

body.ag-skin .ag-header-search button:hover {
    color: var(--ag-brand);
}

/* 账号入口：粉色幽灵按钮 */
body.ag-skin .ag-account-link {
    border: 1px solid var(--ag-brand-line);
    border-radius: var(--ag-r-sm);
    background: var(--ag-brand-soft);
    color: var(--ag-brand);
    font-weight: 600;
    transition: background var(--ag-fast), color var(--ag-fast), border-color var(--ag-fast);
}

body.ag-skin .ag-account-link:hover {
    background: var(--ag-brand);
    border-color: var(--ag-brand);
    color: #fff;
}

body.ag-skin .ag-register-link {
    color: var(--ag-muted);
}

body.ag-skin .ag-register-link:hover {
    color: var(--ag-brand);
}

/* 手机端折叠菜单 */
body.ag-skin .ag-mobile-menu summary span {
    background: var(--ag-ink);
}

body.ag-skin .ag-mobile-menu-panel {
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r);
    box-shadow: var(--ag-shadow-pop);
    color: var(--ag-ink);
}

body.ag-skin .ag-mobile-menu-panel a {
    border-radius: var(--ag-r-sm);
    color: var(--ag-ink-2);
    transition: background var(--ag-fast), color var(--ag-fast);
}

body.ag-skin .ag-mobile-menu-panel a:hover,
body.ag-skin .ag-mobile-menu-panel a[aria-current="page"] {
    background: var(--ag-brand-soft);
    color: var(--ag-brand);
}

body.ag-skin .ag-mobile-search form {
    background: var(--ag-surface-2);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-sm);
}

/* ============================================================
   3. 按钮：主粉实底 / 次级白底描边，两档就够
   ============================================================ */
body.ag-skin.ag-v2 .btn,
body.ag-skin .btn {
    border-radius: var(--ag-r-sm);
    font-weight: 600;
    transition: background var(--ag-fast), border-color var(--ag-fast),
                color var(--ag-fast), transform var(--ag-fast), box-shadow var(--ag-fast);
}

body.ag-skin.ag-v2 .btn.primary,
body.ag-skin .ag-native-main .btn.primary,
body.ag-skin .ag-auth-submit {
    background: var(--ag-brand);
    border: 1px solid var(--ag-brand);
    color: #fff;
    box-shadow: none;
}

body.ag-skin.ag-v2 .btn.primary:hover,
body.ag-skin .ag-native-main .btn.primary:hover,
body.ag-skin .ag-auth-submit:hover {
    background: var(--ag-brand-h);
    border-color: var(--ag-brand-h);
    color: #fff;
    transform: none;
    box-shadow: 0 2px 8px rgba(251, 114, 153, .28);
}

body.ag-skin.ag-v2 .btn.ghost,
body.ag-skin .btn.ghost,
body.ag-skin .btn:not(.primary) {
    background: #fff;
    border: 1px solid var(--ag-line-2);
    color: var(--ag-ink-2);
    box-shadow: none;
}

body.ag-skin.ag-v2 .btn.ghost:hover,
body.ag-skin .btn.ghost:hover,
body.ag-skin .btn:not(.primary):hover {
    background: #fff;
    border-color: var(--ag-brand);
    color: var(--ag-brand);
}

/* 首页空状态那组登录/注册按钮：旧样式在多处覆盖圆角与配色 */
body.ag-skin .ag-replica-login-actions .btn,
body.ag-skin .ag-replica-account-actions .btn,
body.ag-skin .ag-home-personal .ag-empty .btn {
    border-radius: var(--ag-r-sm) !important;
    border: 1px solid var(--ag-line-2) !important;
    background: #fff !important;
    color: var(--ag-ink-2) !important;
    box-shadow: none !important;
}

body.ag-skin .ag-replica-login-actions .btn.primary,
body.ag-skin .ag-replica-account-actions .btn.primary,
body.ag-skin .ag-home-personal .ag-empty .btn.primary {
    background: var(--ag-brand) !important;
    border-color: var(--ag-brand) !important;
    color: #fff !important;
}

/* 「追番 / 追更」：B站番剧的浅粉底 + 粉字，hover 变实底 */
body.ag-skin .ag-follow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ag-brand-line);
    border-radius: var(--ag-r-sm);
    background: var(--ag-brand-soft);
    color: var(--ag-brand);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    transition: background var(--ag-fast), color var(--ag-fast), border-color var(--ag-fast);
}

body.ag-skin .ag-follow-button:hover {
    background: var(--ag-brand);
    border-color: var(--ag-brand);
    color: #fff;
    transform: none;
}

body.ag-skin .ag-follow-button.is-followed {
    background: #fff;
    border-color: var(--ag-line-2);
    color: var(--ag-muted);
}

body.ag-skin .ag-follow-button.is-followed:hover {
    background: #fff;
    border-color: var(--ag-brand);
    color: var(--ag-brand);
}

/* ============================================================
   4. 容器卡片：纯白 + 8px 圆角 + 一层几乎看不见的阴影
   ============================================================ */
body.ag-skin .ag-replica-box,
body.ag-skin .ag-side-panel,
body.ag-skin .ag-detail-facts,
body.ag-skin .ag-tracking-card,
body.ag-skin .ag-personal,
body.ag-skin .ag-search-empty,
body.ag-skin .ag-demand,
body.ag-skin .ag-calendar-sheet,
body.ag-skin .ag-movie-release-day {
    position: relative;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r);
    background: #fff;
    box-shadow: var(--ag-shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 卡片顶部的彩色渐变带在 B 站语汇里没有，一律不输出 */
body.ag-skin .ag-replica-box::before,
body.ag-skin .ag-side-panel::before {
    content: none !important;
    display: none !important;
}

body.ag-skin .ag-replica-box:hover,
body.ag-skin .ag-side-panel:hover {
    box-shadow: var(--ag-shadow-card-hover);
}

/* ============================================================
   5. 区块标题：左侧 3px 粉竖条
   ============================================================ */
body.ag-skin .ag-section-head h2,
body.ag-skin .ag-group-heading h3,
body.ag-skin .ag-library-season > h2,
body.ag-skin .ag-replica-heading h2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ag-ink);
}

body.ag-skin .ag-section-head h2::before,
body.ag-skin .ag-group-heading h3::before,
body.ag-skin .ag-library-season > h2::before,
body.ag-skin .ag-replica-heading h2::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--ag-brand);
}

body.ag-skin .ag-section-head small,
body.ag-skin .ag-section-head p,
body.ag-skin .ag-replica-heading small {
    color: var(--ag-faint) !important;
    font-size: 12.5px;
}

body.ag-skin .text-link {
    color: var(--ag-muted);
    font-size: 13px;
    transition: color var(--ag-fast);
}

body.ag-skin .text-link:hover {
    color: var(--ag-brand);
}

/* ============================================================
   6. 海报体系：6px 圆角 + 片名在封面下方 + 半透明角标
   ------------------------------------------------------------
   片名不叠在封面上，而是放到封面下方 —— 这是 B站 / AcFun 的实际做法。
   原因很实在：番剧海报图本身常常自带片名，叠一层会变成双重文字，画面就脏了。
   ============================================================ */
body.ag-skin .poster-button,
body.ag-skin .ag-recent-card,
body.ag-skin .ag-watch-poster,
body.ag-skin .ag-update-poster,
body.ag-skin .ag-bangumi-poster,
body.ag-skin .ag-schedule-results .poster-button,
body.ag-skin .ag-update-grid .poster-button,
body.ag-skin .ag-bangumi-day .poster-button,
body.ag-skin .ag-movie-release-day .poster-button,
body.ag-skin.ag-v2 .ag-schedule-results .poster-button,
body.ag-skin.ag-v2 .ag-update-grid .poster-button,
body.ag-skin.ag-v2 .ag-library-card .poster-button,
body.ag-skin.ag-v2 .ag-watch-card .poster-button {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: 0 !important;
    border-radius: var(--ag-r-poster) !important;
    background: transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
}

body.ag-skin .poster-button img,
body.ag-skin .ag-recent-card img,
body.ag-skin .ag-bangumi-poster img,
body.ag-skin .ag-update-poster img,
body.ag-skin .ag-watch-poster img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    border-radius: var(--ag-r-poster);
    object-fit: cover;
    background: var(--ag-surface-2);
    transition: transform .3s var(--ag-ease), box-shadow .2s var(--ag-ease);
}

/* hover：封面放大 4% 并浮起一层阴影 —— B站视频卡的经典反馈 */
body.ag-skin .ag-recent-card:hover img,
body.ag-skin .poster-card:hover .poster-button img,
body.ag-skin .ag-bangumi-card:hover .ag-bangumi-poster img {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

/* 片名：封面下方的黑字，两行截断，高度锁死保证网格对齐。
   主题用 `body.ag-replica .ag-recent-card .poster-info`（0,3,1）把它们钉成
   absolute + 渐变遮罩，所以这里必须用同层级选择器再写一遍，否则压不住。 */
body.ag-skin .poster-info,
body.ag-skin .ag-recent-card .poster-info,
body.ag-skin .poster-button .poster-info,
body.ag-skin .ag-bangumi-poster .poster-info,
body.ag-skin .ag-update-poster .poster-info,
body.ag-skin .ag-watch-poster .poster-info {
    position: static;
    display: block;
    min-height: 36px;
    padding: 6px 1px 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
}

body.ag-skin .poster-info b,
body.ag-skin .ag-recent-card .poster-info b,
body.ag-skin .poster-button .poster-info b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ag-ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    text-shadow: none;
    transition: color var(--ag-fast);
}

body.ag-skin .ag-recent-card:hover .poster-info b,
body.ag-skin .poster-card:hover .poster-info b {
    color: var(--ag-brand);
}

/* 集数角标：左上角半透明黑 + 白字，单行不折行（B站时长角标的做法） */
body.ag-skin .ag-air-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    max-width: calc(100% - 12px);
    padding: 1px 6px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
    /* 主题给这两个角标加了 backdrop-filter: blur(2px)（毛玻璃），
       B站风的角标是实心半透明黑，不需要模糊 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 评分角标：右下角黑底 + B站橙 */
body.ag-skin .ag-poster-score {
    position: absolute;
    right: 6px;
    bottom: calc(36px + 6px);
    z-index: 3;
    padding: 1px 6px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, .58);
    color: #ffb400;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: none;
    /* 主题给这个角标加了 backdrop-filter: blur(2px)，B站风要实心半透明黑 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.ag-skin .ag-poster-score::before {
    content: "★ ";
    font-size: 9px;
    vertical-align: 1px;
}

/* 没有片名条的封面（片库卡）没有 36px 下沿，评分直接贴底 */
body.ag-skin .ag-library-card .ag-poster-score,
body.ag-skin .poster-button:not(:has(.poster-info)) .ag-poster-score {
    bottom: 6px;
}

/* 首页「最近更新」横向轨道：
   主题给 .ag-recent-card 设了 aspect-ratio:3/4.1 + overflow:hidden，卡片高度被锁死，
   片名会被裁掉。放开比例与裁切，让「封面 + 片名」自己撑高，轨道行高跟着走。 */
body.ag-skin .ag-recent-track {
    grid-auto-rows: auto;
    align-items: start;
    height: auto;
}

body.ag-skin .ag-recent-card {
    height: auto;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

/* 这三条被 `body.ag-replica .ag-recent-card .poster-info b`（0,3,2）压着，
   必须同层级再写一遍才生效 */
body.ag-skin .ag-recent-card .poster-info b {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ag-ink);
}

/* 网格行距：片名与状态标签堆在封面下方，行距要给够，否则整片糊在一起 */
body.ag-skin .poster-grid,
body.ag-skin .ag-update-grid,
body.ag-skin .ag-bangumi-grid,
body.ag-skin .ag-discover-grid,
body.ag-skin .ag-library-season {
    row-gap: 18px;
}

body.ag-skin .ag-poster-missing {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: var(--ag-surface-2);
    color: var(--ag-faint);
    font-size: 12px;
}

/* ============================================================
   7. 番剧卡 / 片库卡：片名与元信息在卡片下方（白底深字）
   ============================================================ */
body.ag-skin .poster-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: var(--ag-r);
    background: transparent;
    box-shadow: none;
}

body.ag-skin .ag-library-card,
body.ag-skin .ag-library-season,
body.ag-skin .ag-bangumi-card,
body.ag-skin .ag-update-card {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.ag-skin .poster-card > h3,
body.ag-skin .ag-bangumi-card > p,
body.ag-skin .poster-card .ag-update-meta,
body.ag-skin .ag-library-meta {
    margin: 0;
    color: var(--ag-ink-2);
    font-size: 12.5px;
    line-height: 1.5;
}

body.ag-skin .poster-card > h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ag-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    transition: color var(--ag-fast);
}

body.ag-skin .poster-card > h3 a:hover {
    color: var(--ag-brand);
}

body.ag-skin .ag-library-meta,
body.ag-skin .ag-library-date {
    color: var(--ag-faint);
    font-size: 11.5px;
}

body.ag-skin .ag-bangumi-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.ag-skin .ag-bangumi-card > p {
    color: var(--ag-faint);
    font-size: 11.5px;
}

body.ag-skin .ag-bangumi-card .ag-follow-button {
    align-self: flex-start;
}

/* 状态标：浅色小标签，不用描边方块 */
body.ag-skin .ag-library-status,
body.ag-skin .ag-upcoming-flag,
body.ag-skin .ag-detail-flag,
body.ag-skin .ag-playback-tag,
body.ag-skin .ag-bangumi-label {
    padding: 1px 6px;
    border: 0;
    border-radius: 4px;
    background: var(--ag-brand-soft);
    color: var(--ag-brand);
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}

body.ag-skin .ag-library-status.is-ended {
    background: #f1f2f3;
    color: var(--ag-faint);
}

body.ag-skin .ag-library-status.is-planned {
    background: #eef7ff;
    color: #0b8fd1;
}

body.ag-skin .ag-library-status.is-airing {
    background: #fff4e6;
    color: #d97800;
}

/* ============================================================
   8. 芯片 / 筛选条：白底小圆角，选中态粉底白字
   ============================================================ */
body.ag-skin .ag-chip,
body.ag-skin .ag-filter-chip,
body.ag-skin .ag-schedule-filters a,
body.ag-skin .ag-schedule-filters button,
body.ag-skin .ag-kind-switch a,
body.ag-skin .ag-kind-switch button,
body.ag-skin .ag-mine-toggle,
body.ag-skin .ag-library-years a,
body.ag-skin .ag-library-seasons a,
body.ag-skin .ag-watchlist-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-sm);
    background: #fff;
    color: var(--ag-ink-2);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition: background var(--ag-fast), border-color var(--ag-fast), color var(--ag-fast);
}

body.ag-skin .ag-chip:hover,
body.ag-skin .ag-filter-chip:hover,
body.ag-skin .ag-schedule-filters a:hover,
body.ag-skin .ag-schedule-filters button:hover,
body.ag-skin .ag-kind-switch a:hover,
body.ag-skin .ag-kind-switch button:hover,
body.ag-skin .ag-library-years a:hover,
body.ag-skin .ag-library-seasons a:hover,
body.ag-skin .ag-watchlist-tab:hover,
body.ag-skin .ag-mine-toggle:hover {
    border-color: var(--ag-brand-line);
    color: var(--ag-brand);
    background: var(--ag-brand-soft);
}

body.ag-skin .ag-chip.is-active,
body.ag-skin .ag-filter-chip.is-active,
body.ag-skin .ag-schedule-filters .is-active,
body.ag-skin .ag-schedule-filters a[aria-current="page"],
body.ag-skin .ag-schedule-filters button[aria-pressed="true"],
body.ag-skin .ag-kind-switch .is-active,
body.ag-skin .ag-kind-switch a[aria-current="page"],
body.ag-skin .ag-library-years a[aria-current="page"],
body.ag-skin .ag-library-seasons a[aria-current="page"],
body.ag-skin .ag-library-seasons .is-active,
body.ag-skin .ag-watchlist-tab[aria-selected="true"],
body.ag-skin .ag-watchlist-tab.is-active {
    background: var(--ag-brand);
    border-color: var(--ag-brand);
    color: #fff;
    font-weight: 600;
}

body.ag-skin .ag-library-summary,
body.ag-skin .ag-selected-summary {
    color: var(--ag-muted);
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-sm);
    box-shadow: none;
}

/* ============================================================
   9. 日历：星期条 / 日期格 / 空态
   ============================================================ */
body.ag-skin .ag-week-strip {
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
}

body.ag-skin .ag-week-strip a,
body.ag-skin .ag-week-strip button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 52px;
    height: 56px;
    padding: 0 10px;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r-sm);
    background: #fff;
    color: var(--ag-ink-2);
    font-size: 12px;
    box-shadow: none;
    transition: background var(--ag-fast), border-color var(--ag-fast), color var(--ag-fast);
}

body.ag-skin .ag-week-strip a:hover,
body.ag-skin .ag-week-strip button:hover {
    border-color: var(--ag-brand-line);
    color: var(--ag-brand);
}

body.ag-skin .ag-week-strip .is-active,
body.ag-skin .ag-week-strip a[aria-current="page"],
body.ag-skin .ag-week-strip button[aria-pressed="true"] {
    background: var(--ag-brand);
    border-color: var(--ag-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(251, 114, 153, .26);
}

body.ag-skin .ag-week-strip .is-active small,
body.ag-skin .ag-week-strip a[aria-current="page"] small {
    color: rgba(255, 255, 255, .82);
}

body.ag-skin .ag-calendar-sheet h3,
body.ag-skin .ag-bangumi-day > h3 {
    color: var(--ag-ink);
    font-size: 15px;
    font-weight: 700;
}

/* 空状态：浅灰底 + 虚线，不铺网点 */
body.ag-skin .ag-message,
body.ag-skin .ag-empty,
body.ag-skin .ag-replica-empty {
    display: block;
    padding: 18px;
    border: 1px dashed var(--ag-line-2) !important;
    border-radius: var(--ag-r) !important;
    background: var(--ag-surface-2) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ag-muted) !important;
    font-size: 13px;
}

body.ag-skin .ag-empty h3 {
    color: var(--ag-ink-2) !important;
    font-size: 15px;
    font-weight: 600;
}

/* ============================================================
   10. 详情页
   ============================================================ */
body.ag-skin.ag-v2 .ag-detail-overview,
body.ag-skin .ag-detail-overview {
    background: transparent !important;
    background-image: none !important;
}

body.ag-skin .ag-single-page :is(.ag-detail-status, .ag-related, .ag-synopsis, .ag-playback, .ag-detail-overview),
body.ag-skin .ag-detail-side > * {
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-r);
    background: #fff;
    box-shadow: var(--ag-shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.ag-skin .ag-synopsis {
    color: var(--ag-ink-2);
    font-size: 14px;
    line-height: 1.85;
}

body.ag-skin .ag-detail-facts dt {
    color: var(--ag-faint);
    font-size: 12px;
}

body.ag-skin .ag-detail-facts dd,
body.ag-skin .ag-detail-alias {
    color: var(--ag-ink);
    font-size: 13px;
}

/* 追番进度卡：白底 + 浅粉边，进度条走品牌粉 */
body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-card,
body.ag-skin .ag-tracking-card {
    background: #fff !important;
    border: 1px solid var(--ag-brand-line) !important;
    border-radius: var(--ag-r) !important;
    color: var(--ag-ink) !important;
    box-shadow: var(--ag-shadow-card) !important;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-percent,
body.ag-skin .ag-tracking-percent {
    background: transparent !important;
    color: var(--ag-brand) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    text-shadow: none;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-line p,
body.ag-skin.ag-v2 .ag-tracking-line p,
body.ag-skin.ag-v2 .ag-tracking-card .ag-page-note,
body.ag-skin .ag-tracking-card .ag-page-note {
    color: var(--ag-muted) !important;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-line [data-native-overview] strong {
    color: var(--ag-brand) !important;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-badge,
body.ag-skin .ag-tracking-badge {
    background: var(--ag-brand-soft) !important;
    border: 0 !important;
    border-radius: 4px;
    color: var(--ag-brand) !important;
    font-weight: 600;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-meter,
body.ag-skin .ag-tracking-meter {
    height: 6px;
    background: #f1f2f3 !important;
    border: 0 !important;
    border-radius: 3px;
    box-shadow: none !important;
    overflow: hidden;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-meter i,
body.ag-skin .ag-tracking-meter i {
    background: var(--ag-brand) !important;
    border-radius: 3px;
    box-shadow: none !important;
    transition: width .3s var(--ag-ease);
}

/* 加减集数按钮 */
body.ag-skin.ag-v2 .ag-tracking-steps .ag-step,
body.ag-skin.ag-v2 .ag-home-personal .ag-step,
body.ag-skin .ag-step {
    background: #fff !important;
    border: 1px solid var(--ag-line-2) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink-2) !important;
    box-shadow: none !important;
    transition: background var(--ag-fast), border-color var(--ag-fast), color var(--ag-fast);
}

body.ag-skin.ag-v2 .ag-tracking-steps .ag-step:hover:not(:disabled),
body.ag-skin.ag-v2 .ag-home-personal .ag-step:hover:not(:disabled),
body.ag-skin .ag-step:hover:not(:disabled) {
    background: var(--ag-brand-soft) !important;
    border-color: var(--ag-brand) !important;
    color: var(--ag-brand) !important;
}

body.ag-skin.ag-v2 .ag-detail-overview .ag-tracking-action [data-native-state-hint] {
    background: var(--ag-surface-2) !important;
    border-radius: 4px;
    color: var(--ag-muted) !important;
}

/* 五色追番状态按钮：白底细边，选中态用语义色填实 */
body.ag-skin.ag-v2 .ag-detail-status .ag-state-options button,
body.ag-skin.ag-v2 .ag-tracking-status .ag-state-options button,
body.ag-skin .ag-tracking-card .ag-state-options button,
body.ag-skin .ag-state-options button {
    background: #fff !important;
    border: 1px solid var(--ag-line-2) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-muted) !important;
    box-shadow: none !important;
    transition: background var(--ag-fast), border-color var(--ag-fast), color var(--ag-fast);
}

body.ag-skin .ag-state-options button:hover {
    border-color: var(--ag-brand) !important;
    color: var(--ag-brand) !important;
    background: var(--ag-brand-soft) !important;
}

body.ag-skin.ag-v2 .ag-detail-status .ag-state-options button[aria-pressed="true"],
body.ag-skin.ag-v2 .ag-tracking-status .ag-state-options button[aria-pressed="true"],
body.ag-skin.ag-v2 .ag-detail-status .ag-state-options button.is-active,
body.ag-skin.ag-v2 .ag-tracking-status .ag-state-options button.is-active,
body.ag-skin .ag-state-options button[aria-pressed="true"] {
    background: var(--state-color, var(--ag-brand)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 侧栏「正在播出」条目 */
body.ag-skin.ag-v2 .ag-detail-side .ag-related a.ag-airing-card,
body.ag-skin .ag-airing-card,
body.ag-skin .ag-airing-body {
    background: var(--ag-surface-2) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink) !important;
    transition: background var(--ag-fast), border-color var(--ag-fast);
}

body.ag-skin.ag-v2 .ag-detail-side .ag-related a.ag-airing-card:hover,
body.ag-skin .ag-airing-card:hover,
body.ag-skin .ag-airing-body:hover {
    background: var(--ag-brand-soft) !important;
    border-color: var(--ag-brand-line) !important;
}

body.ag-skin .ag-related b,
body.ag-skin .ag-related span,
body.ag-skin .ag-related a,
body.ag-skin .ag-playback b,
body.ag-skin .ag-playback span {
    color: var(--ag-ink) !important;
}

body.ag-skin .ag-related small {
    color: var(--ag-faint) !important;
}

/* 播放地址区 */
body.ag-skin .ag-playback-form,
body.ag-skin .ag-playback-chip,
body.ag-skin .ag-playback-chip.is-search {
    background: var(--ag-surface-2) !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink-2) !important;
}

body.ag-skin .ag-playback-chip {
    background: #f1f9fe !important;
    border-color: #d6ecf9 !important;
    color: var(--ag-blue) !important;
}

body.ag-skin .ag-playback-form input {
    background: #fff !important;
    border: 1px solid var(--ag-line-2) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink) !important;
}

/* ============================================================
   11. 公告 / 提示 / 弹窗
   ============================================================ */
body.ag-skin .ag-replica-notice,
body.ag-skin .ag-pending-bar {
    border: 1px solid #ffe0ea !important;
    background: #fff5f8 !important;
    background-image: none !important;
    border-radius: var(--ag-r) !important;
    color: var(--ag-ink-2) !important;
    box-shadow: none !important;
}

body.ag-skin .ag-replica-notice a {
    color: var(--ag-brand) !important;
    font-weight: 600;
    text-shadow: none;
}

/* 登录弹窗：白卡 + 大阴影，遮罩不做模糊 */
body.ag-skin .ag-auth-veil {
    background: rgba(0, 0, 0, .45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.ag-skin .ag-auth-card {
    background: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .18) !important;
    color: var(--ag-ink) !important;
}

body.ag-skin .ag-auth-card h2,
body.ag-skin .ag-auth-card h3 {
    color: var(--ag-ink) !important;
    font-weight: 700;
    letter-spacing: -.2px;
}

body.ag-skin .ag-auth-x {
    background: transparent !important;
    border: 0 !important;
    color: var(--ag-faint) !important;
    font-size: 20px;
    transition: color var(--ag-fast), transform var(--ag-fast);
}

body.ag-skin .ag-auth-x:hover {
    background: transparent !important;
    color: var(--ag-brand) !important;
    transform: rotate(90deg);
}

body.ag-skin .ag-auth-field span,
body.ag-skin .ag-auth-sub {
    color: var(--ag-muted) !important;
    font-size: 12.5px;
}

body.ag-skin .ag-auth-field input {
    background: var(--ag-surface-2) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink) !important;
    transition: background var(--ag-fast), border-color var(--ag-fast);
}

body.ag-skin .ag-auth-field input:focus {
    background: #fff !important;
    border-color: var(--ag-brand) !important;
    box-shadow: 0 0 0 3px rgba(251, 114, 153, .12) !important;
}

body.ag-skin .ag-auth-send {
    background: #fff !important;
    border: 1px solid var(--ag-line-2) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink-2) !important;
}

body.ag-skin .ag-auth-send:hover {
    border-color: var(--ag-brand) !important;
    color: var(--ag-brand) !important;
}

body.ag-skin .ag-auth-card a {
    color: var(--ag-brand);
}

body.ag-skin .ag-auth-tabs button {
    border-radius: var(--ag-r-sm);
    border: 0;
    background: transparent;
    color: var(--ag-muted);
}

body.ag-skin .ag-auth-tabs button[aria-selected="true"] {
    background: var(--ag-brand-soft);
    color: var(--ag-brand);
    font-weight: 600;
}

/* 浮层菜单 */
body.ag-skin .ag-wl-menu,
body.ag-skin .ag-watch-menu,
body.ag-skin.ag-v2 .ag-home-personal .ag-watch-menu {
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-r) !important;
    background: #fff !important;
    box-shadow: var(--ag-shadow-pop) !important;
    color: var(--ag-ink) !important;
}

body.ag-skin .ag-wl-menu .ag-watch-menu-item:hover,
body.ag-skin .ag-wl-menu .ag-watch-menu-item:focus-visible,
body.ag-skin .ag-wl-menu .ag-watch-menu-item.is-current {
    background: var(--ag-brand-soft) !important;
    color: var(--ag-brand) !important;
}

/* Toast */
body.ag-skin .toast {
    background: rgba(24, 25, 28, .9);
    color: #fff;
    border-radius: var(--ag-r-sm);
    box-shadow: var(--ag-shadow-pop);
}

/* ============================================================
   12. 页脚
   ============================================================ */
body.ag-skin .ag-footer,
body.ag-skin .site-footer {
    border-top: 1px solid var(--ag-line);
    background: #fff;
    color: var(--ag-faint);
}

body.ag-skin .ag-footer a,
body.ag-skin .site-footer a {
    color: var(--ag-muted);
}

body.ag-skin .ag-footer a:hover,
body.ag-skin .site-footer a:hover {
    color: var(--ag-brand);
}

/* ============================================================
   13. 动效：只做淡入与 8px 位移，不弹跳、不错峰演戏
   ============================================================ */
@keyframes ag-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes ag-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.ag-skin .ag-reveal {
    animation: ag-rise .34s var(--ag-ease) both;
    animation-delay: var(--ag-delay, 0ms);
}

body.ag-skin .ag-native-main > h1,
body.ag-skin .ag-detail-title h1 {
    animation: ag-fade .3s var(--ag-ease) both;
}

/* 轮播按钮 */
body.ag-skin .ag-carousel-prev,
body.ag-skin .ag-carousel-next {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--ag-line);
    color: var(--ag-ink-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: background var(--ag-fast), color var(--ag-fast), border-color var(--ag-fast);
}

body.ag-skin .ag-carousel-prev:hover,
body.ag-skin .ag-carousel-next:hover {
    background: #fff;
    border-color: var(--ag-brand-line);
    color: var(--ag-brand);
}

/* ============================================================
   14. 手机端：底部白 Tab 栏（B站移动端的做法）
   ============================================================ */
body.ag-skin .ag-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: none;
    align-items: flex-end;
    justify-content: space-around;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    border: 0;
    border-top: 1px solid var(--ag-line);
    border-radius: 0;
    background: #fff;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .04);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 指示条用百分比定位，不测量 offsetWidth：
   Dock 在桌面是 display:none，量宽度只会得到 0，靠测量必然错位。
   项数由 JS 写进 --ag-dock-n，当前项写进 --ag-dock-i，纯 CSS 算位置。 */
body.ag-skin .ag-dock-ind {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--ag-dock-n, 4));
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--ag-brand);
    opacity: 0;
    transform: translateX(calc(100% * var(--ag-dock-i, 0)));
    transition: transform .26s var(--ag-ease), opacity .2s ease;
}

body.ag-skin .ag-dock[data-dock-active="yes"] .ag-dock-ind {
    opacity: 1;
}

body.ag-skin .ag-dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ag-muted);
    font-size: 10.5px;
    font-weight: 500;
    transition: color var(--ag-fast);
}

body.ag-skin .ag-dock a svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
    transition: transform var(--ag-fast);
}

body.ag-skin .ag-dock a:hover,
body.ag-skin .ag-dock a.is-active {
    background: transparent;
    color: var(--ag-brand);
}

body.ag-skin .ag-dock a.is-active {
    font-weight: 600;
}

body.ag-skin .ag-dock a.is-active svg {
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    body.ag-skin {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    body.ag-skin .ag-dock {
        display: flex;
    }

    body.ag-skin .toast {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    body.ag-skin .ag-site-header {
        height: 52px;
        padding: 0 12px;
        gap: 8px;
    }

    /* 手机端导航交给底部 Tab 栏承担 —— 这是 B站移动端的做法。
       原主题在窄屏把 nav 折成第二行横条，和非首页那套 header 的面包屑叠在一起，很挤。 */
    body.ag-skin .ag-site-header > nav,
    body.ag-skin .ag-desktop-nav {
        display: none !important;
    }

    body.ag-skin .brand {
        font-size: 19px;
        letter-spacing: 1px;
    }

    body.ag-skin .brand .brand-mark,
    body.ag-skin .brand-mark {
        width: 30px;
        height: 30px;
        font-size: 17px;
        border-radius: 7px;
    }

    body.ag-skin .ag-account-link {
        height: 30px;
        padding: 0 10px;
        font-size: 12.5px;
    }

    body.ag-skin .ag-native-main > h1,
    body.ag-skin .ag-detail-title h1 {
        font-size: 23px;
    }

    body.ag-skin .ag-section-head h2,
    body.ag-skin .ag-replica-heading h2 {
        font-size: 16px;
    }

    /* 海报网格在窄屏更紧，间隙 8px */
    body.ag-skin .poster-grid,
    body.ag-skin .ag-update-grid,
    body.ag-skin .ag-bangumi-grid,
    body.ag-skin .ag-discover-grid {
        gap: 8px;
    }

    body.ag-skin .poster-info {
        min-height: 34px;
        padding: 5px 0 0;
    }

    body.ag-skin .poster-info b {
        font-size: 11.5px;
    }

    body.ag-skin .ag-week-strip a,
    body.ag-skin .ag-week-strip button {
        min-width: 46px;
        height: 50px;
        padding: 0 8px;
    }

    body.ag-skin .ag-schedule-filters,
    body.ag-skin .ag-kind-switch {
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.ag-skin .ag-schedule-filters::-webkit-scrollbar,
    body.ag-skin .ag-kind-switch::-webkit-scrollbar {
        display: none;
    }
}

/* ============================================================
   15. 个人追番台 / 按需收录
   ============================================================ */
body.ag-skin .ag-watchlist {
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.ag-skin .ag-watchlist-tab {
    height: 32px;
}

body.ag-skin .ag-wl-card,
body.ag-skin.ag-v2 .ag-home-personal .ag-watch-card {
    background: #fff !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-r) !important;
    box-shadow: var(--ag-shadow-card) !important;
    color: var(--ag-ink) !important;
}

body.ag-skin .ag-wl-more-list,
body.ag-skin .ag-wl-source,
body.ag-skin .ag-wl-step,
body.ag-skin .ag-quick-add,
body.ag-skin .ag-profile-card,
body.ag-skin .ag-demand-item,
body.ag-skin .ag-source-report,
body.ag-skin .ag-replica-features,
body.ag-skin .ag-personal {
    background: #fff !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink-2) !important;
    box-shadow: none !important;
}

body.ag-skin .ag-on-demand,
body.ag-skin .ag-search-empty,
body.ag-skin .ag-demand {
    background: #fff !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-r) !important;
    box-shadow: var(--ag-shadow-card) !important;
}

/* 进度环 */
body.ag-skin .ag-ring {
    background: #fff;
    color: var(--ag-brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    font-weight: 700;
}

/* ============================================================
   16. 首页「即将开播」与通用小条目
   ============================================================ */
body.ag-skin .ag-upcoming-item {
    background: #fff !important;
    border: 1px solid var(--ag-line) !important;
    border-radius: var(--ag-r-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--ag-fast), background var(--ag-fast);
}

body.ag-skin .ag-upcoming-item:hover {
    background: var(--ag-brand-soft) !important;
    border-color: var(--ag-brand-line) !important;
}

body.ag-skin .ag-upcoming-date,
body.ag-skin .ag-upcoming-date b,
body.ag-skin .ag-upcoming-day > b {
    color: var(--ag-brand) !important;
    font-weight: 700;
}

body.ag-skin .ag-upcoming-item b,
body.ag-skin .ag-upcoming-item span,
body.ag-skin .ag-upcoming-item time {
    color: var(--ag-ink) !important;
}

body.ag-skin .ag-upcoming-item small {
    color: var(--ag-faint) !important;
}

/* 侧栏底部入口 */
body.ag-skin .ag-replica-side-link {
    background: var(--ag-surface-2) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink-2) !important;
    font-weight: 600;
    transition: background var(--ag-fast), border-color var(--ag-fast), color var(--ag-fast);
}

body.ag-skin .ag-replica-side-link:hover {
    background: var(--ag-brand-soft) !important;
    border-color: var(--ag-brand-line) !important;
    color: var(--ag-brand) !important;
    transform: none;
}

body.ag-skin .ag-replica-avatar {
    background: var(--ag-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 图片加载前不留白块 */
body.ag-skin a.ag-bangumi-poster,
body.ag-skin img.ag-native-poster,
body.ag-skin .ag-airing-poster {
    background: var(--ag-surface-2) !important;
}

/* ============================================================
   17. 必要的 !important 兜底（旧样式权重较高处）
   ============================================================ */
body.ag-skin .skip-link {
    background: #fff !important;
    color: var(--ag-ink) !important;
    border-radius: var(--ag-r-sm);
    box-shadow: var(--ag-shadow-pop);
}

body.ag-skin select,
body.ag-skin .detail-actions select,
body.ag-skin .filter-bar select,
body.ag-skin .ag-native-main select {
    background: #fff !important;
    border: 1px solid var(--ag-line-2) !important;
    border-radius: var(--ag-r-sm) !important;
    color: var(--ag-ink) !important;
}

/* ============================================================
   18. 无障碍与省电
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.ag-skin *,
    body.ag-skin *::before,
    body.ag-skin *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    body.ag-skin .ag-reveal {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-contrast: more) {
    body.ag-skin {
        --ag-line: #b6bcc2;
        --ag-muted: #3d4249;
        --ag-faint: #5a6068;
    }
}