/*
Theme Name: Bili 写真集
Theme URI: https://www.workbuddy.cn/
Description: 一款仿 B 站（bilibili）配色与布局的写真集 / 摄影作品集 WordPress 主题。粉蓝撞色、扁平化网格、纯白背景（无卡片边框 / 阴影，块间距 24px，仅顶栏下边框带阴影），支持自定义「写真」文章类型与灯箱相册。
Version: 1.1.55
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
Author: WorkBuddy
Author URI: https://www.workbuddy.cn/
Text Domain: bili-photography
Tags: photography, portfolio, grid-layout, custom-colors, featured-images, threaded-comments, theme-options
*/

/* ========================================================================
   设计规范系统 · 仿 B 站（bilibili）Design Tokens
   颜色取自 B 站品牌：主粉 #FB7299 / 品牌蓝 #00AEEC
   ===================================================================== */
:root {
    /* ---------- 品牌色 Brand ---------- */
    --bili-pink: #FB7299;          /* B 站主粉 / 主行动色 */
    --bili-pink-hover: #FF85AD;    /* hover */
    --bili-pink-active: #E45A82;   /* active / pressed */
    --bili-pink-soft: #FFF0F5;     /* 浅粉底（选中/标签背景） */
    --bili-orange: #fb8e19;         /* 强调高亮（用户偏好橙） */
    --bili-blue: #00AEEC;          /* B 站蓝 / 链接与次行动色 */
    --bili-blue-hover: #28BBF0;
    --bili-blue-active: #0096C7;
    --bili-blue-soft: #E3F6FD;

    /* ---------- 中性色 Neutral ---------- */
    --bg: #FFFFFF;                 /* 页面纯白背景（扁平化：不再使用块级布局） */
    --bg-2: #F6F7F8;               /* 仅用于 hover / 内嵌控件等次级表面，非页面背景 */
    --card-bg: #FFFFFF;            /* 卡片 / 浮层：与页面同色，不再形成「块」 */
    --header-bg: #FFFFFF;
    --overlay: rgba(0, 0, 0, 0.55);/* 遮罩 */

    --text-1: #333;            /* 主文字 */
    --text-2: #61666D;            /* 次文字 */
    --text-3: #9499A0;            /* 辅助 / 占位 */
    --text-on-pink: #FFFFFF;
    --text-on-blue: #FFFFFF;

    --line: #E3E5E7;              /* 分割线 */
    --line-soft: #F1F2F3;
    --line-strong: #D0D3D6;

    /* 骨架屏色（亮色） */
    --skeleton-base: #ECEEF0;
    --skeleton-shine: #F7F8F9;

    /* ---------- 语义色 Semantic ---------- */
    --c-success: #2DBE60;
    --c-warning: #FF7F24;
    --c-error:   #FF4D4F;
    --c-info:    var(--bili-blue);

    /* ---------- 字体 Typography ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.3;
    --lh-base: 1.6;

    /* ---------- 间距 Spacing（4px 基准）---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- 圆角 Radius ---------- */
    --radius-sm: 6px;
    --radius: 6px;
    --radius-lg: 6px;
    --radius-pill: 6px;

    /* ---------- 阴影 / 层级 Elevation ---------- */
    /* 扁平化规范：仅顶部导航栏下边框使用阴影；其余容器一律无阴影 */
    --shadow-card: none;
    --shadow-hover: none;
    --shadow-pop: none;
    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.05);   /* 仅顶栏下边框阴影 */

    /* ---------- 过渡 Transition ---------- */
    --tr-fast: 0.15s ease;
    --tr-base: 0.25s ease;
    --tr-slow: 0.3s ease;

    /* ---------- 层级 Z-index ---------- */
    --z-header: 100;
    --z-dropdown: 200;
    --z-lightbox: 1000;
    --z-toast: 1100;

    /* ---------- 布局 Layout ---------- */
    --header-h: 64px;
    --content-w: 1920px;
    --gap: 24px;                    /* 卡片网格内部间距（块级间距见 --block-gap） */
    --block-gap: var(--space-6);    /* 块与块之间的间距：24px */
    --layout-padding: 60px;         /* 居中壳左右沟槽（仿 B 站 feed 壳） */
    --aside-w: 320px;               /* 两栏布局右侧栏宽度 */

    /* 兼容旧类名的别名 */
    --bili-pink-dark: var(--bili-pink-hover);
    --bili-blue-dark: var(--bili-blue-active);
}

/* ========================================================================
   暗色主题令牌（[data-theme="dark"] 时生效）
   品牌色保持 B 站粉蓝不变；仅反转中性层、文本与分割线。
   ===================================================================== */
:root[data-theme="dark"] {
    --bg: #0E0E11;
    --bg-2: #15151A;
    --card-bg: #0E0E11;            /* 与页面背景一致，取消暗色下的卡片块对比 */
    --header-bg: #16161B;
    --overlay: rgba(0, 0, 0, 0.72);

    --text-1: #E8E9EC;
    --text-2: #A7ACB3;
    --text-3: #767B83;

    --line: #2A2B31;
    --line-soft: #202126;
    --line-strong: #3A3C44;
    --bili-orange: #ffa340;         /* 强调高亮（暗色提亮） */

    --shadow-card: none;
    --shadow-hover: none;
    --shadow-pop: none;
    --shadow-header: 0 2px 10px rgba(0, 0, 0, 0.5);   /* 仅顶栏下边框阴影（暗色） */

    /* 骨架屏色（暗色） */
    --skeleton-base: #232429;
    --skeleton-shine: #2F3037;
}

/* ========================================================================
   基础重置
   ===================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--bili-pink); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 1em; }
button, input { font-family: inherit; font-size: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ========================================================================
   布局系统（仿 B 站 .container / feed 壳）
   - .container：卡片栅格基元。既是外层栅格的 grid item（grid-column 认领轨道），
     自身又是 repeat(N,1fr) 卡片栅格；列数按固定步长跳变（4 列 → 5 列），非流式缩放。
   - .bili-feed4-layout：居中壳，内容在 --content-w 内居中，两侧各留 --layout-padding 沟槽。
   ===================================================================== */
.container {
    display: grid;
    position: relative;
    width: 100%;
    grid-gap: var(--gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 1367px) {
    .container { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 居中壳（仿 B 站 .bili-feed4-layout）：内容在 --content-w 内居中，两侧沟槽 */
.bili-feed4-layout {
    width: min(100%, calc(var(--content-w) + 2 * var(--layout-padding)));
    margin-inline: auto;
    padding-inline: var(--layout-padding);
}


/* ========================================================================
   顶部固定导航（仿 B 站顶栏）
   ===================================================================== */
.bili-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-header);
    transition: background .25s, border-color .25s, box-shadow .25s;
}
.bili-header.is-scrolled {
    border-bottom-color: var(--line);
}
/* 首页：透明导航栏叠在横幅上，滚动后转纯白 + 下边阴影 */
.home .bili-header { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.home .bili-header.is-scrolled { background: var(--header-bg); border-bottom-color: var(--line); box-shadow: var(--shadow-header); }
.bili-header__inner {
    margin: 0 auto;
    padding: 0 20px;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 20px;
}
.bili-logo { flex: 0 0 auto; }
.bili-header__nav { flex: 1 1 auto; display: flex; align-items: center; }
.bili-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--text-1); position: relative; overflow: hidden; }
.bili-logo__icon { color: var(--bili-pink); }
/* 图标（bili_icon 辅助函数输出：本地 SVG 内联 / Iconify 回退）基础样式 */
.bili-icon { display: inline-block; vertical-align: middle; }
.bili-logo__text { letter-spacing: .5px; }
.bili-logo__img { height: 50px; width: auto; display: block; }
.bili-logo:hover { color: var(--bili-pink); }

/* 菜单未配置时的提示 */
.bili-menu-empty { color: var(--text-3); font-size: 13px; padding: 6px 0; margin: 0; }

/* 扫光效果：无论鼠标是否经过，每 1 秒自动扫过一次 logo（图片 / 文字均生效） */
.bili-logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 10%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 50%) 50%, transparent 100%);
    transform: skewX(324deg);
    pointer-events: none;
    z-index: 2;
    animation: bili-logo-sweep 1s ease infinite;
}
@keyframes bili-logo-sweep {
    from { left: -75%; }
    to   { left: 125%; }
}

.bili-nav { display: flex; align-items: center; gap: 4px; }
.bili-nav li { position: relative; }
.bili-nav a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}
.bili-nav a:hover { color: var(--bili-pink); }
/* 亮色模式：header 为实底白底（非首页 / 首页已滚动）时，白字会看不见，改用黑字；
   仅首页「未滚动的透明白头（叠在 banner 上）」仍保持白字（下面这条更高优先级覆盖）。 */
:root:not([data-theme="dark"]) .bili-nav a { color: #18191c; }
/* 透明首页头（叠在 banner 上）：导航文字颜色跟随继承（不再强制白色，由页面正文色决定）；
   仅作用于「未滚动的透明首页头」，滚动后头转为实底白底、自动恢复常规深色文字（见下方通用规则）。 */
.home .bili-header:not(.is-scrolled) .bili-nav a,
.home .bili-header:not(.is-scrolled) .bili-theme-toggle {
    color: inherit;
}

.bili-header__center { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.bili-search {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 250px;
    background: var(--bg-2);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 4px 0 16px;
    height: 40px;
    transition: background .2s, border-color .2s;
}
.bili-search:focus-within { background: #fff; border-color: var(--bili-pink); }
.bili-search input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--text-1);
    height: 100%;
}
.bili-search input::placeholder { color: var(--text-3); }
.bili-search button {
    border: 0;
    background: var(--bili-pink);
    color: #fff;
    width: 56px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s;
}
.bili-search button:hover { background: var(--bili-pink-dark); }

.bili-header__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.bili-user { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.bili-user__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bili-pink), var(--bili-blue));
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.bili-user:hover { color: var(--bili-pink); }
/* 顶部导航右侧头像与搜索框/投稿/主题按钮等高（40px） */
.bili-header__right .bili-user__avatar { width: 40px; height: 40px; }

/* 移动端搜索图标（点击跳转搜索页）：桌面隐藏，768px 以下显示 */
.bili-header__search-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text-1);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--tr-fast), border-color var(--tr-fast);
}
.bili-header__search-icon:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-header__search-icon svg { width: 20px; height: 20px; }

.bili-menu-toggle {
    display: none;
    border: 0; background: transparent; cursor: pointer; padding: 6px; color: var(--text-1);
}

/* 移动端抽屉：桌面端不生成独立盒模型，子项照常参与顶栏 flex 布局 */
.bili-drawer { display: contents; }
.bili-drawer__close { display: none; }

/* ========================================================================
   主内容区
   ===================================================================== */
.bili-main { min-height: 60vh;}
.bili-content { max-width: var(--content-w); margin: 0 auto; padding: 24px 0px 48px; }

/* Hero 轮播 */
.bili-hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--block-gap);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    min-height: 380px;   /* 保底；主页中由 grid 拉伸至右侧 2 行写真流高度，无需固定高度 */
}
.bili-hero__track { display: flex; transition: transform .5s ease; height: 100%; }
.bili-hero__slide { position: relative; min-width: 100%; height: 100%; }
.bili-hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bili-hero__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px 28px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .65));
    color: #fff;
}
.bili-hero__caption h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.bili-hero__caption span { font-size: 13px; opacity: .85; }
.bili-hero__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 2;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: background .2s, opacity .2s, visibility .2s;
}
.bili-hero:hover .bili-hero__btn { opacity: 1; visibility: visible; pointer-events: auto; }
.bili-hero__btn:hover { background: var(--bili-pink); }
.bili-hero__btn--prev { left: 14px; }
.bili-hero__btn--next { right: 14px; }
.bili-hero__dots {
    position: absolute; bottom: 14px; right: 20px; display: flex; gap: 6px; z-index: 2;
}
.bili-hero__dots button {
    width: 8px; height: 8px; border-radius: 6px; border: 0; padding: 0;
    background: rgba(255, 255, 255, .5); cursor: pointer;
}
.bili-hero__dots button.is-active { background: var(--bili-pink); width: 18px; }

/* ============ 右侧栏用户信息卡 ============ */
.bili-side-user {
    flex: 1 1 260px;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bili-side-user__avatar { width: 88px; height: 88px; margin-bottom: 10px; }
.bili-side-user__img,
.bili-side-user__img--guest {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bili-pink-soft), var(--bili-blue-soft));
    color: var(--bili-pink);
}
.bili-side-user__img--guest svg { width: 44px; height: 44px; }
.bili-side-user__text { width: 100%; }
.bili-side-user__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text-1);
    line-height: 1.4;
}
.bili-side-user__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
.bili-side-user__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
}
.bili-side-user__row {
    display: flex;
    gap: 10px;
    width: 100%;
}
.bili-side-user__btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    gap: 6px;
    padding: 0 10px;
}
.bili-side-user__quick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft, rgba(0,0,0,.06));
}
.bili-side-user__quick-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: color .15s, background-color .15s;
}
.bili-side-user__quick-item:hover {
    color: var(--bili-pink);
    background: var(--bili-pink-soft);
}
.bili-side-user__quick-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ============ 可排序文字列表（幻灯片 / 用户框共用） ============ */
.bili-sortlist { margin-top: 16px; }
.bili-sortlist__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.bili-sortlist__title {
    font-size: 14px; font-weight: 600; color: var(--text-1);
    display: inline-flex; align-items: center; gap: 6px;
}
.bili-sortlist__title::before {
    content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--bili-pink);
}
.bili-sortlist__tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.bili-sortlist__tab {
    border: 1px solid var(--line); background: transparent; color: var(--text-3);
    font-size: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
    transition: all .2s; line-height: 1.4;
}
.bili-sortlist__tab:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-sortlist__tab.is-active {
    background: var(--bili-pink); color: #fff; border-color: var(--bili-pink);
}
.bili-sortlist__items { list-style: none; margin: 0; padding: 0; }
.bili-sortlist__item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid var(--line);
}
.bili-sortlist__item:last-child { border-bottom: 0; }
.bili-sortlist__idx {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px;
    background: #f1f2f3; color: var(--text-3); font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
}
.bili-sortlist__link {
    flex: 1 1 auto; min-width: 0; color: var(--text-2); font-size: 13px;
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bili-sortlist__link:hover { color: var(--bili-pink); }
.bili-sortlist__views {
    flex: 0 0 auto; color: var(--text-3); font-size: 12px;
}
/* 区块标题 */
.bili-section { margin-bottom: var(--block-gap); }
.bili-section__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.bili-section__title {
    font-size: 20px; display: flex; align-items: center; gap: 8px;
}
.bili-section__title::before {
    content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--bili-pink);
}
.bili-section__more { color: var(--text-3); font-size: 13px; }
.bili-section__more:hover { color: var(--bili-pink); }

/* 写真卡片网格（仿 B 站视频卡片） */
.bili-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap);
}
.bili-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;   /* 网格同行等高 */
    min-width: 0;   /* 允许在网格列中收缩，避免 min-content 撑出横向溢出 */
}
.bili-card__link { display: flex; flex-direction: column; height: 100%; }
.bili-card__cover {
    position: relative;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #f3f4f6, #e9ebef);
    overflow: hidden;
    border-radius: var(--radius);   /* 缩略图四角均圆角 */
    flex: 0 0 auto;   /* 保持 3:4 比例不被压缩 */
}
.bili-card__cover img { width: 100%; height: 100%; object-fit: cover; animation: biliFadeIn .4s ease both; }
@keyframes biliFadeIn { from { opacity: 0; } to { opacity: 1; } }
.bili-card__cover--empty {
    display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 13px;
}
.bili-card__count {
    position: absolute; right: 8px; bottom: 8px;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px;
    padding: 2px 8px; border-radius: 6px;
}
.bili-card__body { padding: 8px 0 12px; flex: 1 1 auto; display: flex; flex-direction: column; }
/* 卡片标题前的分类（文件夹图标 + 分类名） */
.bili-card__cat {
    display: inline; font-size: 14px; color: var(--text-3); margin-right: 4px;
}
.bili-card__cat svg { display: inline-block; width: 16px; height: 15px; vertical-align: -2px; color: var(--bili-pink); }
.bili-card__title {
    font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--text-1);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.8em; margin: 0 0 8px;
}
.bili-card__text { display: inline; }
.bili-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: auto; }
.bili-card__author { display: flex; align-items: center; gap: 6px; }
.bili-card__avatar { width: 22px; height: 22px; border-radius: 50%; }
.bili-card__stat { display: flex; align-items: center; gap: 4px; }

/* 分类标签条 */
.bili-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--block-gap); }
.bili-tag {
    padding: 6px 14px; border-radius: 6px; background: #fff; color: var(--text-2);
    font-size: 13px; border: 1px solid var(--line); transition: all .2s;
}
.bili-tag:hover, .bili-tag.is-active { background: var(--bili-pink); color: #fff; border-color: var(--bili-pink); }

/* 空状态 */
.bili-empty {
    text-align: center; color: var(--text-3); padding: 60px 0;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.bili-empty__icon { display: inline-flex; color: var(--text-3); opacity: .6; }
.bili-empty__icon svg { width: 48px; height: 48px; }
.bili-empty__text { margin: 0; font-size: 14px; }

/* 首页排序条（最新 / 最热 / 推荐） */
.bili-sortbar {
    display: flex; align-items: center; gap: 4px;
    max-width: var(--content-w); margin: 16px auto 0; padding: 0 20px;
}
.bili-sortbar__item {
    position: relative; border: 0; background: transparent; cursor: pointer;
    font-size: 14px; color: var(--text-2); padding: 8px 8px; font-family: inherit;
    transition: color .2s;
}
.bili-sortbar__item::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 2px;
    background: var(--bili-pink); border-radius: 2px; opacity: 0; transform: scaleX(.6);
    transition: opacity .2s, transform .2s;
}
.bili-sortbar__item:hover { color: var(--bili-pink); }
.bili-sortbar__item.is-active { color: var(--bili-pink); font-weight: 600; }
.bili-sortbar__item.is-active::after { opacity: 1; transform: scaleX(1); }

/* 加载更多 + 触底哨兵 */
.bili-loadmore-wrap { max-width: var(--content-w); margin: 24px auto 0; padding: 0 20px; text-align: center; }
.bili-loadmore {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 168px; height: 42px; padding: 0 24px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 6px;
    background: var(--card-bg); color: var(--text-2); font-size: 14px; font-family: inherit;
    transition: color .2s, border-color .2s;
}
.bili-loadmore:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-loadmore.is-loading { color: var(--text-3); cursor: default; }
.bili-loadmore[disabled] { opacity: .7; }
.bili-feed-sentinel { height: 1px; }

/* 分页 */
.bili-pagination { display: flex; justify-content: center; gap: 6px; margin-top: var(--block-gap); flex-wrap: wrap; }
.bili-pagination a, .bili-pagination span {
    min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; background: #fff; color: var(--text-2);
    border: 1px solid var(--line); font-size: 13px;
}
.bili-pagination a:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-pagination .current { background: var(--bili-pink); color: #fff; border-color: var(--bili-pink); }

/* ========================================================================
   首页（仿 B 站首页）：全宽横幅 + 分类导航条 + 左大轮播 + 右写真流
   ===================================================================== */
.bili-content.bili-home { padding-top: 0; }

/* 全宽品牌横幅：透明导航栏叠在其上，滚动后导航栏转纯白 + 下边阴影 */
.bili-banner {
    position: relative;
    width: 100%;
    margin-top: calc(-1 * var(--header-h));    /* 拉到视口顶部，透明导航栏叠在其上 */
    height: var(--header-h);
    /* 横幅图片 + 浅色叠加层（保证顶部深色导航文字在图片上仍清晰可读） */
    background-image: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.30) 100%), url('assets/images/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center;
}
/* 横幅为纯装饰，无文字内容，故无 inner / title / sub 子元素样式 */

/* 分类导航条（仿视频平台顶部分类导航原型） */
.bili-catnav {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    max-width: var(--content-w); margin: var(--block-gap) auto 0; padding: 0 20px 20px;
}
/* 左侧/右侧入口：垂直居中对齐，使会员/加盟、快捷入口与中间两行分类条共中线 */
.bili-catnav__side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; align-self: center; }
.bili-catnav__entry {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: var(--text-1); font-size: 12px; line-height: 1;
}
.bili-catnav__entry-txt {
    white-space: nowrap;
}
.bili-catnav__entry-ico {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    color: #fff; transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.bili-catnav__entry--member  .bili-catnav__entry-ico { background: var(--bili-orange, #fb8e19); }
.bili-catnav__entry--partner .bili-catnav__entry-ico { background: var(--bili-blue); }
.bili-catnav__entry:hover .bili-catnav__entry-ico { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.15); }
/* 中间分类 pills（双行白底 + 浅灰细边框小按钮，B站风格） */
.bili-catnav__pills { display: flex; flex-wrap: wrap; gap: 8px 8px; flex: 1 1 auto; align-content: flex-start; list-style: none; margin: 0; padding: 0; }
.bili-catnav__pills > li { list-style: none; width: 70px; }
.bili-catnav__pill,
.bili-catnav__pills a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: auto; min-height: 28px; padding: 4px 6px;
    border: 1px solid var(--line); border-radius: 4px;
    background: #fff; color: #18191c;
    font-size: 12px; line-height: 1.2; text-decoration: none; white-space: nowrap;
    transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.bili-catnav__pill:hover,
.bili-catnav__pills a:hover { background: #fff; color: var(--bili-pink); border-color: var(--bili-pink); }
/* 当前激活 tab（桌面：主题色实底） */
.bili-catnav__pill.is-active { background: var(--bili-pink); color: #fff; border-color: var(--bili-pink); }
.bili-catnav__pill.is-active:hover { background: var(--bili-pink); color: #fff; border-color: var(--bili-pink); }
/* 更多（带向下箭头，触发下拉） */
.bili-catnav__pill--more { cursor: pointer; }
.bili-catnav__pill--more .bili-icon { margin-left: 2px; transition: transform var(--tr-fast); }
.bili-catnav__more-open .bili-catnav__pill--more .bili-icon { transform: rotate(180deg); }
/* 更多下拉面板 */
.bili-catnav__more-panel {
    position: absolute; top: calc(100% + 8px); left: 20px; right: 20px; z-index: 50;
    display: flex; flex-wrap: wrap; gap: 10px; padding: 14px;
    background: var(--card-bg); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.bili-catnav__more-panel[hidden] { display: none; }
.bili-catnav__more-panel .bili-catnav__pill { display: inline-flex; align-items: center; width: auto; line-height: normal; padding: 4px 11px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
/* 右侧快捷入口（2×3 网格：方形图标 + 文字），推到导航条最右 */
.bili-catnav__side--right {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-auto-rows: auto;
    gap: 8px 14px;
    flex-shrink: 0;
    margin-left: auto;
    /* 左侧分割线：与分类 pills 区域做视觉分隔 */
    border-left: 1px solid var(--line);
    padding-left: 20px;
}
.bili-catnav__node {
    display: flex; align-items: center; gap: 6px;
    text-decoration: none; color: var(--text-1); font-size: 13px;
    white-space: nowrap; transition: color var(--tr-fast);
}
.bili-catnav__node:hover { color: var(--bili-pink); }
/* 图标：纯 fill 风格（跟随文字色，无黑底方块） */
.bili-catnav__node-ico {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 auto;
    color: currentColor;
    transition: transform var(--tr-fast), color var(--tr-fast);
}
.bili-catnav__node:hover .bili-catnav__node-ico { transform: translateY(-2px); color: var(--bili-pink); }
/* 暗色模式适配 */
:root[data-theme="dark"] .bili-catnav__pill { background: #2a2b32; color: #c9ccd0; border-color: #3a3b42; }
:root[data-theme="dark"] .bili-catnav__pill:hover,
:root[data-theme="dark"] .bili-catnav__pills a:hover { background: #2a2b32; color: var(--bili-pink); border-color: var(--bili-pink); }
:root[data-theme="dark"] .bili-catnav__more-panel { background: #1c1d23; }
:root[data-theme="dark"] .bili-catnav__more-panel .bili-catnav__pill { background: #2a2b32; }

/* 主区：统一 18 列固定网格。hero 固定占 4 列 / 跨 2 行，写真卡片作为网格子项流动填充 */
.bili-home__feature {
    display: grid;
    grid-template-columns: repeat(17, minmax(0, 1fr));
    gap: var(--block-gap);
    align-items: start;
    max-width: var(--content-w); margin: var(--block-gap) auto 0; padding: 0 20px;
    transition: opacity var(--tr-fast);
}
/* 分类切换 AJAX 加载中 */
.bili-home__feature.is-loading { opacity: .5; pointer-events: none; }
/* 左轮播：固定占 4 列、跨 2 行（首行 + 次行）；右侧留 8 列给写真卡片 */
.bili-feature { grid-column: 1 / span 5; grid-row: 1 / span 2; min-width: 0; align-self: stretch; }
/* 轮播填满所在格（高度由网格行高决定，最小 380px 保底） */
.bili-feature > .bili-hero { width: 100%; height: 100%; min-height: 380px; margin-bottom: 0; min-width: 0; }
/* 写真卡片：作为网格子项，默认占 2 列（17 列 → 每行 6 张； */
.bili-home__feature .bili-card { grid-column: span 2; }
/* 空状态提示占满整宽 */
.bili-home__feature .bili-empty { grid-column: 1 / -1; }

/* 旧四列 hero-row / 文字列表 / 公告列表 已移除，由上方 banner + catnav + feature 取代 */

/* 首页信息流 Tab（最新 / 热门）已移除：右侧改为固定 2 行网格，相关 .bili-tabs / .bili-tab / .bili-tabpanel 样式一并删除 */
@keyframes bili-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Hero 分类徽标 --- */
.bili-hero__badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: rgba(251, 114, 153, .92); color: #fff;
    font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px;
    backdrop-filter: blur(2px);
}

/* --- 侧边栏组件通用 --- */
.bili-widget {
    background: var(--card-bg); border-radius: var(--radius);
    box-shadow: var(--shadow-card); padding: 12px;
}

.bili-widget__icon { color: var(--bili-pink); }
/* 各侧边组件图标使用不同强调色（不再全用同一种） */
.bili-widget--authors .bili-widget__icon { color: var(--bili-blue); }
.bili-widget--tags .bili-widget__icon { color: #FB8E19; }
.bili-widget--about .bili-widget__icon { color: #8A5CF6; }

/* 人气摄影师 */
.bili-author-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bili-author { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 6px; transition: background .2s; }
.bili-author:hover { background: var(--bg-2); }
.bili-author__rank {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #fff; background: var(--line-strong);
}
.bili-author__rank--1 { background: var(--bili-pink); }
.bili-author__rank--2 { background: #FF9BB5; }
.bili-author__rank--3 { background: #FFC2D2; }
.bili-author__link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.bili-author__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bili-author__info { min-width: 0; display: flex; flex-direction: column; }
.bili-author__name { font-size: 14px; font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bili-author__link:hover .bili-author__name { color: var(--bili-pink); }
.bili-author__meta { font-size: 12px; color: var(--text-3); }

/* 热门标签云 */
.bili-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.bili-tagcloud .bili-chip { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.bili-chip__count { font-size: 11px; opacity: .7; font-weight: 400; }

/* 关于本站 */
.bili-about__desc { font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 0; }

/* --- 响应式：首页 feature（统一 12 列网格） --- */
@media (max-width: 1366px) {
    /* 略窄时卡片占 3 列 → 每行 4 张；hero 仍占 8 列，右侧留 4 列放 1 张/行（共 2 张在 hero 旁） */
    .bili-home__feature .bili-card { grid-column: span 3; }
}
@media (max-width: 980px) {
    .bili-content { padding-left: 0; padding-right: 0; }
    /* 移动端：隐藏轮播；写真卡片改 3 列网格，列间距与左右留白统一 10px */
    .bili-feature { display: none; }
    .bili-home__feature {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 0 10px;
    }
    .bili-home__feature .bili-card { grid-column: auto; }
    /* 兜底：防止任何子元素撑出横向滚动条。
       注意：不能用 overflow-x: hidden —— 它会把 overflow-y 计算为 auto，
       使 html/body 变成滚动容器，导致顶部 .bili-header 的 position: sticky 失效。
       改用 clip：同样裁剪横向溢出，但不创建滚动容器，sticky 吸顶保持正常。 */
    html, body { overflow-x: clip; }
}
@media (max-width: 768px) {
    .bili-banner { height: var(--header-h); }
    /* 分类导航：移动端改为横滑 tabs（文字标签 + 激活项下划线指示），隐藏左侧圆形入口与右侧快捷网格 */
    .bili-catnav__side--left { display: none; }
    .bili-catnav__side--right { display: none; }
    .bili-catnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        padding: 0 10px 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid var(--line);
    }
    .bili-catnav::-webkit-scrollbar { display: none; }
    .bili-catnav__pills { flex: 0 0 auto; flex-wrap: nowrap; gap: 0; }
    .bili-catnav__pills > li { flex: 0 0 auto; width: auto; }
    /* tabs：去掉胶囊背景，改为文字标签 + 底部指示条；重置定宽与两端对齐 */
    .bili-catnav__pill,
    .bili-catnav__pills a {
        flex: 0 0 auto; white-space: nowrap;
        display: block; width: auto; height: 40px; line-height: 40px; padding: 0 14px;
        text-align: center;
        background: transparent; border: none; border-radius: 0;
        color: #61666d; font-size: 15px; font-weight: 500;
        border-bottom: 2px solid transparent;
        transition: color var(--tr-fast), border-color var(--tr-fast);
    }
    .bili-catnav__pill:hover,
    .bili-catnav__pills a:hover { background: transparent; color: #18191c; }
    /* 当前激活 tab：主题色加粗 + 底部下划线（移动端保持文字标签样式，不显示圆角实底）。
       必须同时覆盖 :hover —— 否则移动端点击后 :hover 粘住，会回退到基础规则
       `.bili-catnav__pill.is-active:hover { background: var(--bili-pink) }` 的方块背景。 */
    .bili-catnav__pills .current-menu-item > a,
    .bili-catnav__pills .current-category-ancestor > a,
    .bili-catnav__pill.is-active,
    .bili-catnav__pill.is-active:hover {
        background: transparent;
        color: var(--bili-pink);
        font-weight: 600;
        border-bottom-color: var(--bili-pink);
        box-shadow: none;
    }
    /* 更多下拉面板内的项还原为 chip，避免继承 tab 下划线样式 */
    .bili-catnav__more-panel .bili-catnav__pill {
        background: #fff; border: 1px solid var(--line); border-radius: 4px; border-bottom: 1px solid var(--line);
        color: #18191c; height: auto; min-height: 28px; padding: 4px 11px; font-size: 12px; font-weight: 500;
    }
    :root[data-theme="dark"] .bili-catnav__more-panel .bili-catnav__pill { background: #2a2b32; color: #c9ccd0; }
}
@media (max-width: 520px) {
    /* 超窄屏：分类与标题字号同步缩小，间距仍统一 10px */
    .bili-card__title { font-size: 12px; min-height: 2.6em; }
    .bili-card__cat { font-size: 12px; }
    .bili-card__cat svg { width: 13px; height: 12px; }
}
.bili-pagination .current { background: var(--bili-pink); color: #fff; border-color: var(--bili-pink); }

/* ========================================================================
   单写真页
   ===================================================================== */
.bili-single { display: grid; grid-template-columns: 1fr 300px; gap: var(--block-gap); align-items: start; }
.bili-single__main { background: var(--card-bg); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-card); }
.bili-single__hero { border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.bili-single__hero img { width: 100%; max-height: 460px; object-fit: cover; }
.bili-single__title { font-size: 24px; margin-bottom: 10px; }
.bili-single__meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13px; margin-bottom: 18px; flex-wrap: wrap; }
.bili-single__meta .author,
.bili-single__meta > span:not(.bili-fav-wrap) {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg-2); color: var(--text-2);
    padding: 5px 12px; border-radius: var(--radius-pill);
}
.bili-single__meta .author img { width: 22px; height: 22px; border-radius: 50%; }
.bili-single__meta .author a { color: var(--text-1); font-weight: var(--fw-medium); }
.bili-single__meta a { color: var(--text-2); }
.bili-single__meta a:hover { color: var(--bili-pink); }
.bili-single__content { color: var(--text-1); line-height: 1.8; }
.bili-single__content a { color: var(--bili-blue); }

/* 相册网格 + 灯箱 */
.bili-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.bili-gallery__item {
    position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in;
    aspect-ratio: 4 / 3; background: var(--line-soft);
}
.bili-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* 侧边栏 */
.bili-sidebar { display: flex; flex-direction: column; gap: var(--block-gap); }
.bili-widget { background: var(--card-bg); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-card); }
.bili-widget__title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.bili-widget__title::before { display: none;}
.bili-author-card { text-align: left; }
.bili-author-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bili-author-card__avatar {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--bili-pink), var(--bili-blue));
}
.bili-author-card__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.bili-author-card__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bili-author-card__name { font-size: 16px; font-weight: 600; color: var(--text-1); line-height: 1.2; }
.bili-author-card__name:hover { color: var(--bili-pink); }
.bili-author-card__role {
    align-self: flex-start; font-size: 11px; color: var(--text-2);
    background: var(--bg-2); padding: 2px 8px; border-radius: var(--radius-pill);
}
.bili-author-card__bio { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 4px 0 14px; }
.bili-author-card__stats { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.bili-author-card__stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bili-author-card__num { font-size: 16px; font-weight: 700; color: var(--text-1); line-height: 1.2; }
.bili-author-card__label { font-size: 11px; color: var(--text-3); }
.bili-author-card__link { color: var(--bili-pink); }
.bili-author-card__link:hover { text-decoration: underline; }
.bili-author-card__btn {
    display: block; text-align: center; margin-top: 14px; padding: 8px 0; border-radius: 6px;
    background: var(--bili-pink); color: #fff; font-size: 13px;
}
.bili-author-card__btn:hover { background: var(--bili-pink-dark); color: #fff; }
.bili-author-card__more { margin-top: 14px; }
.bili-author-card__more-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 10px; }
.bili-mini-list { display: flex; flex-direction: column; gap: 12px; }
.bili-mini-item { display: flex; gap: 10px; }
.bili-mini-item img { width: 84px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.bili-mini-item__title { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bili-mini-item:hover .bili-mini-item__title { color: var(--bili-pink); }

/* 评论 */
.bili-comments { margin-top: var(--block-gap); }
.bili-comments__title { font-size: 16px; margin-bottom: 14px; }

/* ========================================================================
   单写真页（左右分栏重构）：写真信息 / 主轮播 / 画廊缩略图
   ===================================================================== */
/* 写真信息统计：点赞 / 阅读 / 浏览 / 张数 / 收藏 */
.bili-single__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--block-gap); }
.bili-stat {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg-2); color: var(--text-2);
    padding: 6px 12px; border-radius: var(--radius-pill);
    font-size: 13px; border: 1px solid transparent; cursor: default;
}
.bili-stat__icon { font-size: 14px; line-height: 1; }
.bili-stat__num { font-weight: var(--fw-medium); color: var(--text-1); }
.bili-stat__label { color: var(--text-3); }
.bili-like-btn,
.bili-fav-btn { cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.bili-like-btn:hover,
.bili-fav-btn:hover { border-color: var(--bili-pink); color: var(--bili-pink); }
.bili-like-btn.is-liked,
.bili-fav-btn.is-faved { background: var(--bili-pink-soft, #FFF0F5); border-color: var(--bili-pink); color: var(--bili-pink); }
.bili-like-btn.is-liked .bili-like-btn__icon,
.bili-fav-btn.is-faved .bili-fav-btn__icon { color: var(--bili-pink); }
.bili-fav-wrap { display: inline-flex; }

/* 主轮播（带左右箭头 + 圆点） */
.bili-photo-slider {
    position: relative; overflow: hidden; border-radius: var(--radius);
    background: var(--line-soft); margin-bottom: var(--block-gap);
}
.bili-photo-slider__track { display: flex; transition: transform .35s ease; }
.bili-photo-slider__slide { min-width: 100%; }
.bili-photo-slider__slide img { width: 100%; max-height: 560px; object-fit: contain; display: block; }
.bili-photo-slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s; z-index: 2;
}
.bili-photo-slider__nav:hover { background: rgba(0, 0, 0, .7); }
.bili-photo-slider__nav--prev { left: 12px; }
.bili-photo-slider__nav--next { right: 12px; }
.bili-photo-slider__dots {
    position: absolute; bottom: 12px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px; z-index: 2;
}
.bili-photo-slider__dot {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .2s, width .2s;
}
.bili-photo-slider__dot.is-active { background: #fff; width: 18px; border-radius: 4px; }

/* 画廊缩略图（点击跳主图） */
.bili-photo-thumbs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px; margin-bottom: var(--block-gap);
}
.bili-photo-thumbs__item {
    padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer; background: var(--line-soft);
    aspect-ratio: 1 / 1; transition: border-color .2s;
}
.bili-photo-thumbs__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bili-photo-thumbs__item.is-active,
.bili-photo-thumbs__item:hover { border-color: var(--bili-pink); }

/* 响应式 */
@media (max-width: 900px) {
    .bili-single { grid-template-columns: 1fr; }
    .bili-photo-slider__slide img { max-height: 360px; }
    .bili-photo-thumbs { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}
.bili-comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.bili-comment__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.bili-comment__body { flex: 1; }
.bili-comment__name { font-size: 13px; color: var(--bili-blue); font-weight: 600; }
.bili-comment__text { font-size: 14px; margin: 4px 0; }
.bili-comment__meta { font-size: 12px; color: var(--text-3); }
.bili-comment-form textarea, .bili-comment-form input[type="text"], .bili-comment-form input[type="email"] {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; resize: vertical;
}
.bili-comment-form textarea:focus, .bili-comment-form input:focus { border-color: var(--bili-pink); }
.bili-comment-form .row { display: flex; gap: 12px; margin-bottom: 12px; }
.bili-btn {
    display: inline-block; padding: 9px 24px; border: 0; border-radius: 6px; background: var(--bili-pink); color: #fff; cursor: pointer; font-size: 14px;
}
.bili-btn:hover { background: var(--bili-pink-dark); }

/* ========================================================================
   文章（博客）页
   ===================================================================== */
.bili-post { background: var(--card-bg); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-card); max-width: 860px; margin: 0 auto; }
.bili-post__title { font-size: 26px; }
.bili-post__meta { color: var(--text-3); font-size: 13px; margin-bottom: 18px; }
.bili-post__content { line-height: 1.9; }
.bili-post__content img { border-radius: var(--radius-sm); margin: 14px 0; }

/* 404 / 搜索 */
.bili-narrow { max-width: 720px; margin: 0 auto; text-align: center; padding: 60px 0; }
.bili-narrow h1 { font-size: 80px; color: var(--bili-pink); margin: 0; }
.bili-search-inline { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.bili-search-inline input { width: 320px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; outline: none; }
.bili-search-inline input:focus { border-color: var(--bili-pink); }

/* ========================================================================
   页脚
   ===================================================================== */
.bili-footer { background: var(--card-bg); border-top: 1px solid var(--line); margin-top: var(--block-gap); }
.bili-footer__inner {
    max-width: var(--content-w); margin: 0 auto; padding: 36px 16px 20px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px;
}
.bili-footer__brand .bili-logo { margin-bottom: 12px; }
/* footer 内 logo 比顶栏（50px）略小，避免比例失调 */
.bili-footer__brand .bili-logo__img { height: 36px; }
/* 页脚品牌区为静态展示，关闭从 .bili-logo 继承的 1s 扫光动画 */
.bili-footer__brand .bili-logo::after { display: none; }
.bili-footer__brand p { color: var(--text-3); font-size: 13px; max-width: 350px; }
.bili-footer__col h4 { font-size: 14px; margin-bottom: 12px; color: var(--text-1); }
.bili-footer__col ul { list-style: none; margin: 0; padding: 0; }
/* 长列表自动分栏：单项 ≤10 时单列；超过 10 项由 PHP 加 .is-2col，至多排成 2 列 */
/* 限宽 120px（50×2 + 20 间距），在保留「最多 2 列」的同时进一步收窄每列 */
.bili-footer__col ul.is-2col { column-count: 2; column-gap: 20px; max-width: 150px; }
.bili-footer__col ul.is-2col li { break-inside: avoid; -webkit-column-break-inside: avoid; }
.bili-footer__col li { margin: 0; }
.bili-footer__col a { display: block; color: var(--text-2); font-size: 13px; padding: 4px 0; }
.bili-footer__col a:hover { color: var(--bili-pink); }
.bili-footer__bottom { border-top: 1px solid var(--line-soft); text-align: center; padding: 16px; color: var(--text-3); font-size: 12px; }
.bili-footer__social { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.bili-footer__social a { color: var(--text-2); font-size: 13px; }
.bili-footer__social a:hover { color: var(--bili-pink); }

/* ========================================================================
   右侧悬浮按钮组
   ===================================================================== */
.bili-floatbar {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bili-floatbar__item {
    position: relative;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--text-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop, 0 4px 16px rgba(0, 0, 0, .12));
    transition: color var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}
.bili-floatbar__item:hover {
    color: #fff;
    background: var(--bili-pink);
    border-color: var(--bili-pink);
    transform: translateY(-2px);
}
/* 回到顶部：滚动超过一屏后显示，回到顶部隐藏 */
.bili-floatbar__item--top { opacity: 1; transform: scale(1); transition: opacity .25s ease, transform .25s ease; }
.bili-floatbar__item--top.is-hidden { opacity: 0; transform: scale(.7); pointer-events: none; }
.bili-floatbar__item .bili-icon { width: 20px; height: 20px; object-fit: contain; }
/* 悬浮文字提示（向左弹出） */
.bili-floatbar__label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: var(--card-bg);
    color: var(--text-1);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop, 0 4px 16px rgba(0, 0, 0, .12));
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--tr-fast), transform var(--tr-fast), visibility var(--tr-fast);
}
.bili-floatbar__item:hover .bili-floatbar__label {
    opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
}
/* 虚拟数据角标 */
.bili-floatbar__badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    border-radius: 6px;
    background: var(--bili-pink);
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--card-bg);
}
/* 移动端：仅保留「回到顶部」，避免遮挡内容 */
@media (max-width: 768px) {
    .bili-floatbar { right: 14px; bottom: 16px; gap: 8px; }
    .bili-floatbar__item { width: 40px; height: 40px; }
    .bili-floatbar__item:not(.bili-floatbar__item--top) { display: none; }
    .bili-floatbar__label { display: none; }
}

/* ========================================================================
   灯箱
   ===================================================================== */
.bili-lightbox {
    position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .9);
    display: none; align-items: center; justify-content: center;
}
.bili-lightbox.is-open { display: flex; }
.bili-lightbox__img { max-width: 90vw; max-height: 86vh; border-radius: 4px; }
.bili-lightbox__close {
    position: absolute; top: 20px; right: 28px; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .15); color: #fff; font-size: 22px; cursor: pointer;
}
.bili-lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; font-size: 22px;
}
.bili-lightbox__nav--prev { left: 24px; }
.bili-lightbox__nav--next { right: 24px; }
.bili-lightbox__caption { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; }

/* ========================================================================
   响应式
   ===================================================================== */
@media (max-width: 1100px) {
    .bili-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .bili-single { grid-template-columns: 1fr; }
    .bili-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 24px 30px; }
    .bili-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    /* 移动端顶栏：仅保留 logo / 搜索图标 / 汉堡菜单 */
    .bili-header__inner { flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; position: relative; height: auto; }
    .bili-logo { flex: 1 1 auto; }
    .bili-header__center { display: none; }            /* 搜索框移入抽屉，顶栏不显示 */
    .bili-header__search-icon { display: inline-flex; order: 1; }
    .bili-menu-toggle { display: flex; order: 3; }

    /* 移动端隐藏横幅 */
    .bili-banner { display: none; }

    /* 右侧抽屉（默认移出视口，由 .is-open 滑入） */
    .bili-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0; bottom: 0;
        width: 82%; max-width: 320px;
        background: var(--card-bg);
        box-shadow: none;
        transform: translateX(100%);
        transition: transform .28s ease;
        z-index: 1200;
        padding: 14px 18px 24px;
        overflow-y: auto;
    }
    .bili-header.is-open .bili-drawer { transform: translateX(0); box-shadow: -12px 0 32px rgba(0, 0, 0, .18); }
    .bili-drawer__close {
        display: flex; align-items: center; justify-content: center; align-self: flex-end;
        width: 38px; height: 38px; margin-bottom: 6px;
        border: 1px solid var(--line); border-radius: 50%;
        background: transparent; color: var(--text-1); cursor: pointer;
    }
    .bili-drawer__close:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
    /* 抽屉内搜索框（移动端顶部） */
    .bili-drawer .bili-header__center { display: block; order: 1; margin: 2px 0 16px; }
    .bili-drawer .bili-search { max-width: none; }
    /* 抽屉内导航 */
    .bili-drawer .bili-header__nav { flex: 0 0 auto; display: block; order: 2; }
    .bili-drawer .bili-nav { flex-direction: column; align-items: stretch; gap: 2px; }
    .bili-drawer .bili-nav a {
        padding: 13px 12px; font-size: 15px; border-radius: 6px; white-space: normal;
        color: var(--text-2);
        transition: background .15s ease, color .15s ease;
    }
    .bili-drawer .bili-nav a:hover,
    .bili-drawer .bili-nav a:active { background: var(--bili-pink-soft); color: var(--bili-pink); }
    /* 抽屉内右侧操作（主题 / 用户 / 投稿） */
    .bili-drawer .bili-header__right {
        display: flex; flex-direction: column; align-items: stretch; gap: 10px;
        order: 3; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
    }
    .bili-drawer .bili-header__right .bili-user {
        display: flex; align-items: center; gap: 8px; width: 100%;
        padding: 8px 10px; border-radius: 6px;
    }
    .bili-drawer .bili-header__right .bili-theme-toggle {
        display: flex; align-items: center; gap: 8px; width: 100%;
        padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px;
        background: transparent; color: var(--text-1); cursor: pointer;
    }
    .bili-drawer .bili-header__right .bili-theme-toggle::after { content: "切换主题"; font-size: 14px; }
    .bili-drawer .bili-header__submit { justify-content: center; width: 100%; }
    .bili-grid { grid-template-columns: repeat(3, 1fr); }
    .bili-gallery { grid-template-columns: repeat(2, 1fr); }
    /* 移动端：轮播图硬性固定 380px，避免被父级 stretch 撑满全屏 */
    .bili-hero { height: 380px; }
    .bili-hero__track,
    .bili-hero__slide { height: 100%; }
    .bili-hero__slide img { height: 100%; }
    /* 写真详情页：移动端隐藏面包屑，节省首屏空间 */
    .single .bili-crumbs { display: none; }
}
@media (max-width: 520px) {
    .bili-grid { grid-template-columns: repeat(2, 1fr); }
    .bili-footer__inner { grid-template-columns: 1fr; gap: 22px; padding: 28px 16px 14px; }
    .bili-footer__brand p { max-width: 100%; }
    .bili-footer__col h4 { margin-bottom: 10px; }
    .bili-footer__col a { padding: 5px 0; }
    .bili-footer__bottom { padding: 14px 16px; }
    /* 超窄屏：2 列子项过挤，回退单列并解除限宽 */
    .bili-footer__col ul.is-2col { column-count: 1; max-width: none; }
}


/* =====================================================================
 * 通用按钮（用户中心复用）
 * =================================================================== */
.bili-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, transform .12s;
    font-family: inherit;
}
.bili-btn:active { transform: translateY(1px); }
.bili-btn--primary { background: var(--bili-pink); color: #fff; }
.bili-btn--primary:hover { background: #fc8bab; }
.bili-btn--ghost { background: #fff; color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-btn--ghost:hover { background: var(--bili-pink); color: #fff; }
.bili-btn--block { width: 100%; }

/* =====================================================================
 * 用户中心
 * =================================================================== */
.bili-uc-page { max-width: none; } /* 用户中心全宽，不限制 960px */
.bili-uc { padding: 0 0 24px; } /* 上边距归零，使 .bili-uc__banner 可真正通栏 */

.bili-uc__notice {
    margin: 14px 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
}
.bili-uc__notice--error { background: #fff0f3; color: #d6336c; border: 1px solid #ffd0dc; }
.bili-uc__notice--ok { background: #e7f8ee; color: #1f9254; border: 1px solid #b6e8cb; }
.bili-uc__notice--info { background: #eaf6ff; color: #0a7ec2; border: 1px solid #b6e0ff; }

/* --- 登录/注册卡片 --- */
.bili-uc--auth { display: block; }
.bili-uc__card {
    width: 100%;
    max-width: 380px;
    margin: 24px auto 0;
    background: #fff;
    border-radius: 6px;
    padding: 28px 26px 32px;
}
.bili-uc__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--bili-pink); }
.bili-uc__brand-name { font-size: 18px; font-weight: 700; color: var(--text-1); }

.bili-uc__tabs { display: flex; gap: 6px; background: var(--bg-2); padding: 4px; border-radius: 6px; margin-bottom: 18px; }
.bili-uc__tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 9px 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, color .2s;
}
.bili-uc__tab.is-active { background: #fff; color: var(--bili-pink); box-shadow: none; }

.bili-uc__form { display: flex; flex-direction: column; gap: 14px; }
.bili-uc__form--wide { max-width: 560px; }
.bili-uc__field { display: flex; flex-direction: column; gap: 6px; }
.bili-uc__field > span { font-size: 13px; color: var(--text-2); }
.bili-uc__field input,
.bili-uc__field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text-1);
    transition: border-color .2s, box-shadow .2s;
}
.bili-uc__field input:focus,
.bili-uc__field textarea:focus {
    outline: none;
    border-color: var(--bili-pink);
    box-shadow: 0 0 0 3px rgba(251,114,153,.15);
}
.bili-uc__check { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.bili-uc__divider {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-3); font-size: 12px; margin-top: 4px;
}
.bili-uc__divider::before, .bili-uc__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

/* --- 头像编辑 --- */
.bili-uc__avatarEdit { display: flex; align-items: center; gap: 18px; padding: 14px; background: var(--bg-2); border-radius: 6px; margin-bottom: 4px; }
.bili-uc__avatarPreview { flex: 0 0 auto; }
.bili-uc__avatarImg { border-radius: 50%; width: 80px; height: 80px; display: block; object-fit: cover; }
.bili-uc__avatarActions { display: flex; flex-direction: column; gap: 8px; }
.bili-uc__fileBtn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border-radius: 6px; cursor: pointer;
    background: var(--bili-pink); color: #fff; font-size: 13px; font-weight: 600;
    transition: background .2s;
}
.bili-uc__fileBtn:hover { background: #fc8bab; }
.bili-uc__fileBtn input[type="file"] { display: none; }
.bili-uc__check--inline { font-size: 12px; color: var(--text-3); }
.bili-uc__hint { font-size: 12px; color: var(--text-3); margin: 0; line-height: 1.5; }

/* --- 全宽资料横幅（仪表盘 + 登录通用） --- */
.bili-uc__banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: -20px -16px 24px;        /* 通栏：抵消 .bili-content 内边距 */
    padding: 30px 24px;
    background: linear-gradient(120deg, var(--bili-pink) 0%, var(--bili-blue) 100%);
    color: #fff;
    box-shadow: var(--shadow-card);
}
.bili-uc__bannerIcon { display: inline-flex; color: #fff; }
.bili-uc__bannerText { min-width: 0; }
.bili-uc__bannerAvatar {
    width: 84px; height: 84px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.85); object-fit: cover; flex: 0 0 auto;
}
.bili-uc__bannerInfo { flex: 1; min-width: 200px; }
.bili-uc__bannerName { font-size: 22px; font-weight: 700; line-height: 1.3; }
.bili-uc__bannerSub { font-size: 13px; opacity: .92; margin-top: 4px; }
.bili-uc__bannerStats { display: flex; gap: 28px; }
.bili-uc__bannerStat { text-align: center; }
.bili-uc__bannerStat b { display: block; font-size: 22px; line-height: 1.2; }
.bili-uc__bannerStat span { font-size: 12px; opacity: .9; }
.bili-uc__bannerLogout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px;
    background: rgba(255,255,255,.18); color: #fff;
    font-size: 13px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,.5);
    transition: background .2s;
}
.bili-uc__bannerLogout:hover { background: rgba(255,255,255,.32); }

/* --- 已登录仪表盘：内容区（全宽，面板透明化） --- */
.bili-uc--dash { display: block; }
.bili-uc--dash .bili-uc__tabs {
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 0;
    gap: 0;
    margin-bottom: 22px;
}
.bili-uc--dash .bili-uc__tab {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-2);
    border-radius: 0;
    padding: 12px 18px;
    position: relative;
}
.bili-uc--dash .bili-uc__tab.is-active { background: transparent; color: var(--bili-pink); box-shadow: none; }
.bili-uc--dash .bili-uc__tab.is-active::after {
    content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--bili-pink);
}

.bili-uc--dash .bili-uc__panel {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 28px;
}
/* 表单/评论列表在宽屏下收敛居中，避免横向拉得过宽 */
.bili-uc--dash .bili-uc__panel[data-panel="profile"] .bili-uc__form--wide,
.bili-uc--dash .bili-uc__panel[data-panel="comments"] .bili-uc__comments {
    max-width: 720px;
}
.bili-uc--dash .bili-uc__form--wide { margin: 0 auto; }
.bili-uc--dash .bili-uc__comments { margin-left: auto; margin-right: auto; }
/* 收藏网格保持全宽 */
.bili-uc--dash .bili-uc__panel[data-panel="favorites"] .bili-grid { max-width: none; }

/* 登录/注册卡片内的面板：透明，不嵌套白卡 */
.bili-uc__panel--auth { background: transparent; box-shadow: none; padding: 0; }

.bili-uc__empty { text-align: center; padding: 30px 0; color: var(--text-3); }
.bili-uc__empty p { margin-bottom: 14px; }

.bili-uc__comments { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bili-uc__comment { border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; }
.bili-uc__comment:last-child { border-bottom: 0; }
.bili-uc__comment-text { color: var(--text-1); font-size: 14px; line-height: 1.6; }
.bili-uc__comment-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--bili-blue); text-decoration: none; }

/* =====================================================================
 * 写真详情页：收藏按钮
 * =================================================================== */
.bili-fav-wrap { display: inline-flex; }
.bili-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: #fff;
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
    font-family: inherit;
}
.bili-fav-btn:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-fav-btn__icon { font-size: 15px; line-height: 1; }
.bili-fav-btn.is-faved { color: var(--bili-pink); border-color: var(--bili-pink); background: #fff0f4; }
.bili-fav-btn.is-loading { opacity: .6; pointer-events: none; }

@media (max-width: 768px) {
    .bili-uc__banner { padding: 22px 16px; gap: 14px; }
    .bili-uc__bannerAvatar { width: 64px; height: 64px; }
    .bili-uc__bannerInfo { min-width: 0; }
    .bili-uc__bannerStats { width: 100%; justify-content: flex-start; gap: 22px; }
    .bili-uc__bannerLogout { width: 100%; justify-content: center; }
}

/* ========================================================================
   设计规范系统 · 组件库（Design System Components）
   全部基于上方令牌，统一 B 站观感
   ===================================================================== */

/* ---------- 按钮 Button ---------- */
.bili-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 18px;
    font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-medium);
    line-height: 1; border: 1px solid transparent; border-radius: var(--radius);
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
}
.bili-btn:active { transform: translateY(1px); }
.bili-btn:focus-visible { outline: 2px solid var(--bili-pink); outline-offset: 2px; }
.bili-btn--primary { background: var(--bili-pink); color: var(--text-on-pink); }
.bili-btn--primary:hover { background: var(--bili-pink-hover); }
.bili-btn--primary:active { background: var(--bili-pink-active); }
.bili-btn--blue { background: var(--bili-blue); color: var(--text-on-blue); }
.bili-btn--blue:hover { background: var(--bili-blue-hover); }
.bili-btn--ghost { background: transparent; color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-btn--ghost:hover { background: var(--bili-pink-soft); }
.bili-btn--text { background: transparent; color: var(--text-2); padding: 0 10px; height: 32px; }
.bili-btn--text:hover { color: var(--bili-pink); }
.bili-btn--sm { height: 30px; padding: 0 14px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.bili-btn--lg { height: 44px; padding: 0 28px; font-size: var(--fs-md); }
.bili-btn--block { display: flex; width: 100%; }
.bili-btn:disabled, .bili-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* 修复 hover 文字看不清：早期 .bili-btn 定义残留 / 全局 a:hover 会把按钮文字染成粉色，
   导致 primary 粉底粉字、ghost 浅粉底白字。此处显式锁定 hover 配色（放在按钮组最后生效）。 */
.bili-btn--primary:hover { color: #fff; background: var(--bili-pink-active); }
.bili-btn--ghost:hover { background: var(--bili-pink); color: #fff; }

/* ---------- 标签 / 胶囊 Chip ---------- */
.bili-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 32px; padding: 0 14px;
    font-size: var(--fs-sm); color: var(--text-2);
    background: var(--bg-2); border: 1px solid transparent;
    border-radius: var(--radius-pill); cursor: pointer;
    transition: all var(--tr-fast);
}
.bili-chip:hover { color: var(--bili-pink); background: var(--bili-pink-soft); }
.bili-chip.is-active { color: var(--bili-pink); background: var(--bili-pink-soft); font-weight: var(--fw-medium); }

/* ---------- 徽标 Badge ---------- */
.bili-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 11px; font-weight: var(--fw-semibold); line-height: 1;
    color: #fff; background: var(--bili-pink); border-radius: var(--radius-pill);
}
.bili-badge--blue { background: var(--bili-blue); }
.bili-badge--gray { background: var(--text-3); }
.bili-badge--success { background: var(--c-success); }
.bili-badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }

/* ---------- 区块标题 Section ---------- */
.bili-section { padding: 0; }
.bili-section__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-5);
}
.bili-section__title {
    font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--text-1);
    display: flex; align-items: center; gap: 8px;
}
.bili-section__title::before {
    content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--bili-pink);
}
.bili-section__more { font-size: var(--fs-sm); color: var(--text-3); }
.bili-section__more:hover { color: var(--bili-pink); }

/* ---------- 面包屑 Breadcrumb ---------- */
.bili-crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); padding: var(--space-4) 0; flex-wrap: wrap; }
.bili-crumbs a { color: var(--text-2); }
.bili-crumbs a:hover { color: var(--bili-pink); }
.bili-crumbs__sep { color: var(--line-strong); }
.bili-crumbs__sep svg { width: 12px; height: 12px; vertical-align: -2px; }
.bili-announce-back svg,
.bili-404__links .bili-btn svg,
.bili-admin__nav-ext svg { vertical-align: middle; }
.bili-announce-back svg { margin-right: 6px; }
.bili-404__links .bili-btn svg { margin-right: 6px; }
.bili-admin__nav-ext svg { width: 12px; height: 12px; }

/* ---------- 骨架屏 Skeleton ---------- */
.bili-skeleton {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%);
    background-size: 400% 100%;
    animation: bili-skel 1.3s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes bili-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- 空状态 Empty ---------- */
.bili-empty {
    text-align: center; color: var(--text-3); padding: var(--space-12) var(--space-4);
    font-size: var(--fs-base);
}
.bili-empty__icon { font-size: 40px; margin-bottom: var(--space-3); opacity: .6; }

/* ---------- 网格 Grid ---------- */
.bili-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .bili-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
@media (max-width: 900px)  { .bili-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .bili-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px)  { .bili-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 分页 Pagination ---------- */
.bili-pagination { display: flex; justify-content: center; gap: 8px; margin-top: var(--block-gap); flex-wrap: wrap; }
.bili-pagination a, .bili-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 12px;
    border-radius: var(--radius-sm); background: var(--card-bg);
    color: var(--text-2); font-size: var(--fs-sm); border: 1px solid var(--line);
    transition: all var(--tr-fast);
}
.bili-pagination a:hover { color: var(--bili-pink); border-color: var(--bili-pink); }
.bili-pagination .current { background: var(--bili-pink); color: #fff; border-color: var(--bili-pink); }

/* ---------- 搜索页 ---------- */
.bili-search__keyword { color: var(--bili-pink); font-weight: var(--fw-semibold); }
.bili-search__count { font-size: var(--fs-sm); color: var(--text-3); background: var(--line-soft); padding: 4px 12px; border-radius: var(--radius-pill); }

/* ---------- 404 页 ---------- */
.bili-404 { text-align: center; padding: var(--space-16) var(--space-4); max-width: 560px; margin: 0 auto; }
.bili-404__art { position: relative; display: inline-flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-6); }
.bili-404__code {
    font-size: 96px; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--bili-pink), var(--bili-blue));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bili-404__emoji { font-size: 48px; }
.bili-404__title { font-size: var(--fs-3xl); color: var(--text-1); margin: 0 0 var(--space-3); }
.bili-404__desc { color: var(--text-2); margin: 0 auto var(--space-6); max-width: 420px; line-height: 1.7; }
.bili-404__links { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ---------- 分类 Banner ---------- */
.bili-cat-banner {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    min-height: 180px; display: flex; align-items: flex-end;
    background: linear-gradient(135deg, var(--bili-pink), var(--bili-blue));
    color: #fff; padding: var(--space-8);
    margin-bottom: var(--space-6);
}
.bili-cat-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.bili-cat-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.5)); }
.bili-cat-banner__body { position: relative; z-index: 1; }
.bili-cat-banner__title { font-size: var(--fs-4xl); font-weight: var(--fw-bold); margin: 0 0 8px; }
.bili-cat-banner__desc { font-size: var(--fs-md); opacity: .92; margin: 0; max-width: 640px; }
.bili-cat-banner__count { display: inline-block; margin-top: 12px; font-size: var(--fs-sm); background: rgba(255,255,255,.2); padding: 3px 12px; border-radius: var(--radius-pill); }

/* ========================================================================
   主题切换按钮（顶栏 · 明/暗切换）
   ===================================================================== */
.bili-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--text-2);
    cursor: pointer; transition: color var(--tr-fast), transform var(--tr-fast);
}
.bili-theme-toggle:hover { color: var(--bili-pink); transform: rotate(15deg); }
.bili-theme-toggle svg { width: 20px; height: 20px; }
/* 默认显示「月亮」(当前浅色，点击切深色)；data-theme=dark 时显示「太阳」 */
.bili-theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .bili-theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .bili-theme-toggle .icon-sun { display: block; }

/* ========================================================================
   Hero 骨架屏加载态
   ===================================================================== */
.bili-hero__skeleton {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 12px; padding: 40px 28px 22px;
    background: var(--card-bg);
    opacity: 1; transition: opacity .4s ease, visibility .4s ease;
    border-radius: var(--radius);
}
.bili-hero__skeleton .sk-bar { height: 22px; border-radius: var(--radius-sm); }
.bili-hero__skeleton .sk-bar.w-60 { width: 60%; }
.bili-hero__skeleton .sk-bar.w-35 { width: 35%; height: 14px; }
.bili-hero__skeleton .sk-img { position: absolute; inset: 0; z-index: -1; }
/* 加载完成后隐藏骨架 */
.bili-hero.is-ready .bili-hero__skeleton { opacity: 0; visibility: hidden; pointer-events: none; }

/* ========================================================================
   相册瀑布流（masonry）布局选项
   ===================================================================== */
.bili-gallery.is-masonry { display: block; column-count: 3; column-gap: 10px; }
.bili-gallery.is-masonry .bili-gallery__item {
    width: 100%; margin: 0 0 10px;
    break-inside: avoid; -webkit-column-break-inside: avoid;
    aspect-ratio: auto; background: var(--line-soft);
}
.bili-gallery.is-masonry .bili-gallery__item img { height: auto; object-fit: contain; }

/* 响应式：瀑布流列数随屏宽收缩 */
@media (max-width: 1100px) { .bili-gallery.is-masonry { column-count: 3; } }
@media (max-width: 900px)  { .bili-gallery.is-masonry { column-count: 2; } }
@media (max-width: 560px)  { .bili-gallery.is-masonry { column-count: 1; } }

/* ============================================================
   宫格导航：Hero 区第四列（虚拟数据）
   ============================================================ */
.bili-quicknav {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px;
    max-height: 380px;
    overflow-y: auto;
}
.bili-quicknav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bili-quicknav__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: var(--bili-blue, #00AEEC);
}
.bili-quicknav__label .bili-icon { color: var(--bili-blue, #00AEEC); }
.bili-quicknav__more {
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-decoration: none;
}
.bili-quicknav__more:hover { color: var(--bili-pink); }
.bili-quicknav__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.bili-quicknav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 12px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--text-2);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}
.bili-quicknav__item:hover {
    background: var(--bili-pink);
    color: #fff;
    transform: translateY(-2px);
}
.bili-quicknav__item .bili-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }

/* ============================================================
   站点公告：Hero 区公告列表版块 + 详情页 + 归档页
   ============================================================ */
.bili-announce {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px;
    max-height: 380px;
    overflow-y: auto;
}
.bili-announce__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.bili-announce__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 15px;
    color: var(--bili-pink);
}
.bili-announce__label .bili-icon { color: var(--bili-pink); }
.bili-announce__more {
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-decoration: none;
}
.bili-announce__more:hover { color: var(--bili-pink); }
.bili-announce__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.bili-announce__item { border-radius: 6px; transition: background .15s; }
.bili-announce__item:hover { background: var(--bg-2); }
.bili-announce__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.bili-announce__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.bili-announce__item:hover .bili-announce__title { color: var(--bili-pink); }
.bili-announce__date {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.bili-announce__empty {
    margin: 0;
    padding: 6px 8px;
    color: var(--text-3);
    font-size: 13px;
}

/* 公告详情页 */
.bili-announce-detail { max-width: 860px; margin: 0 auto; }
.bili-announce-back {
    display: inline-block;
    margin-top: 18px;
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.bili-announce-back:hover { color: var(--bili-pink); }

/* 公告归档页 */
.bili-announce-archive { max-width: 860px; margin: 0 auto; }
.bili-announce-archive__title {
    font-size: 22px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bili-announce-archive__title::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--bili-pink);
}
.bili-announce-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bili-announce-item {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 12px;
    transition: background .15s;
}
.bili-announce-item:hover { background: var(--bg-2); }
.bili-announce-item__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.bili-announce-item__title { font-size: 16px; font-weight: 600; }
.bili-announce-item:hover .bili-announce-item__title { color: var(--bili-pink); }
.bili-announce-item__date {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.bili-announce-item__excerpt {
    margin: 8px 0 0;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}
.bili-announce-empty { color: var(--text-3); font-size: 14px; }

/* ========================================================================
   内容类型：视频 / 文章 / 写真付费锁定（基础渲染）
   ===================================================================== */
/* 视频播放器 */
.bili-video-player { margin: var(--space-5, 16px) 0; }
.bili-video-player iframe,
.bili-video-player video,
.bili-video-player .wp-embed-responsive,
.bili-video-player .wp-oembed-wrap { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.bili-video-fallback { text-align: center; padding: var(--space-8, 32px); background: var(--bg-2); border-radius: var(--radius); }
.bili-video-fallback a { color: var(--bili-pink); font-weight: 600; }

/* 文章正文 */
.bili-article-content { margin: var(--space-5, 16px) 0; font-size: 16px; line-height: 1.85; color: var(--text-1); }
.bili-article-content p { margin: 0 0 1.1em; }
.bili-article-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.bili-article-content h2, .bili-article-content h3 { margin: 1.4em 0 .6em; }
.bili-article-content a { color: var(--bili-blue, #00AEEC); }

/* 写真付费图锁定占位 */
.bili-photo-slider__slide--locked { position: relative; background: var(--bg-2); }
.bili-photo-slider__slide--locked img { filter: blur(18px); transform: scale(1.06); user-select: none; }
.bili-lock-mask {
    position: absolute; inset: 0; z-index: 2; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #fff; background: rgba(0, 0, 0, .42);
}
.bili-lock-mask span { font-size: 14px; }
.bili-lock-mask.is-loading { opacity: .7; cursor: wait; }
.bili-unlock-btn {
    margin-top: 2px; padding: 7px 20px; border: 0; border-radius: 6px;
    background: var(--bili-pink); color: #fff; font-size: 14px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: opacity .2s ease;
}
.bili-unlock-btn:hover { opacity: .9; }
.bili-photo-thumbs__item--locked {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-2); color: var(--text-3); font-size: 18px;
}
.bili-thumb-lock { line-height: 1; }

/* =====================================================================
 * 投稿：头部下拉菜单 + 投稿页面 + 上传区
 * =================================================================== */

/* 头部投稿下拉 */
.bili-header__submit-wrap { position: relative; }
/* 顶部投稿按钮与搜索框/主题/头像等高（40px），覆盖 .bili-btn--sm 的 30px */
.bili-header__submit { height: 40px; }
/* 透明桥接：避免鼠标从按钮移到菜单时穿过 8px 间隙导致菜单收起 */
.bili-header__submit-wrap::after {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.bili-submit-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
    min-width: 152px; padding: 6px; display: none;
    background: var(--card-bg); border: 1px solid var(--line);
    border-radius: 6px; box-shadow: var(--shadow-card);
}
.bili-submit-menu__item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 6px;
    color: var(--text-1); font-size: 14px; text-decoration: none;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.bili-submit-menu__item svg { color: var(--bili-pink); flex: none; }
.bili-submit-menu__item:hover { background: var(--bg-2); color: var(--bili-pink); }
@media (hover: hover) {
    .bili-header__submit-wrap:hover .bili-submit-menu { display: block; }
}
.bili-header__submit-wrap:focus-within .bili-submit-menu { display: block; }

/* 投稿页面外壳 */
.bili-tougao-page { padding-top: var(--block-gap); }
.bili-submit { max-width: 720px; margin: 0 auto; }
.bili-submit__notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.bili-submit__notice--error { background: rgba(255,77,79,.12); color: #ff4d4f; border: 1px solid rgba(255,77,79,.3); }
.bili-submit__notice--ok { background: rgba(45,200,120,.12); color: #1a9c5f; border: 1px solid rgba(45,200,120,.3); }

.bili-submit__head { margin-bottom: 22px; }
.bili-submit__title { font-size: 24px; margin: 0 0 14px; }
.bili-submit__types { display: flex; flex-wrap: wrap; gap: 8px; }
.bili-submit__type {
    padding: 7px 16px; border-radius: 6px; font-size: 14px;
    background: var(--bg-2); color: var(--text-1); text-decoration: none;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.bili-submit__type:hover { background: var(--bg-2); filter: brightness(.96); }
.bili-submit__type.is-active { background: var(--bili-pink); color: #fff; }

.bili-submit__form { display: grid; gap: 18px; }
.bili-submit__field { display: grid; gap: 8px; }
.bili-submit__label { font-size: 14px; font-weight: 500; color: var(--text-1); }
.bili-submit__label i { color: var(--bili-pink); font-style: normal; }
.bili-submit__field input[type="text"],
.bili-submit__field textarea {
    width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
    color: var(--text-1); background: var(--bg-2);
    border: 1px solid var(--line); border-radius: 6px; outline: none;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.bili-submit__field input:focus,
.bili-submit__field textarea:focus {
    border-color: var(--bili-orange, #fb8e19);
    box-shadow: 0 0 0 3px rgba(251,142,25,.15);
}
.bili-submit__field textarea { resize: vertical; line-height: 1.6; }

/* 自定义分类下拉（替代原生 select，UI 统一主题） */
.bili-select { position: relative; }
.bili-select__trigger {
    width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; text-align: left;
    color: var(--text-1); background: var(--bg-2);
    border: 1px solid var(--line); border-radius: 6px; cursor: pointer; outline: none;
    transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.bili-select__trigger:hover { border-color: var(--bili-orange, #fb8e19); }
.bili-select.is-open .bili-select__trigger,
.bili-select__trigger:focus-visible {
    border-color: var(--bili-orange, #fb8e19);
    box-shadow: 0 0 0 3px rgba(251,142,25,.15);
}
.bili-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bili-select__value.is-placeholder { color: var(--text-3); }
.bili-select__caret { flex: none; color: var(--bili-orange, #fb8e19); transition: transform var(--tr-fast); }
.bili-select.is-open .bili-select__caret { transform: rotate(180deg); }

.bili-select__list {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 6px; list-style: none;
    background: var(--card-bg); border: 1px solid var(--line); border-radius: 6px;
    box-shadow: var(--shadow-card); max-height: 260px; overflow-y: auto;
}
.bili-select__option {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--text-1); cursor: pointer;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.bili-select__option:hover { background: var(--bili-pink-soft); color: var(--bili-pink); }
.bili-select__option.is-selected { color: var(--bili-orange, #fb8e19); font-weight: 600; }
.bili-select__option.is-selected::after { content: "\2713"; font-weight: 700; }

/* 上传区 */
.bili-uploader { display: grid; gap: 10px; }
.bili-uploader__btn { width: fit-content; }
.bili-uploader__previews { display: flex; flex-wrap: wrap; gap: 10px; }
.bili-uploader__item {
    position: relative; width: 96px; height: 96px; border-radius: 6px;
    overflow: hidden; border: 1px solid var(--line); background: var(--bg-2);
    display: flex; align-items: center; justify-content: center; padding: 6px;
}
.bili-uploader__item img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.bili-uploader__item .bili-uploader__vname {
    font-size: 12px; color: var(--text-2); text-align: center; word-break: break-all; padding: 4px;
}
.bili-uploader__del {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 1;
}
.bili-uploader__del:hover { background: rgba(0,0,0,.8); }
.bili-uploader__hint { margin: 0; font-size: 12px; color: var(--text-3); }

.bili-submit__actions { margin-top: 6px; display: grid; gap: 10px; }
.bili-submit__tip { margin: 0; font-size: 12px; color: var(--text-3); text-align: center; }

/* 未登录引导 */
.bili-submit-login {
    max-width: 420px; margin: 8vh auto; text-align: center;
    background: var(--card-bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 40px 24px; box-shadow: var(--shadow-card);
}
.bili-submit-login__icon { color: var(--bili-pink); display: inline-flex; }
.bili-submit-login__title { font-size: 20px; margin: 16px 0 8px; }
.bili-submit-login__desc { color: var(--text-2); font-size: 14px; margin: 0 0 22px; }
.bili-submit-login__actions .bili-btn { width: 100%; }

/* 上传视频文件播放 */
.bili-video-el { background: #000; max-height: 70vh; }

/* ========================================================================
   会员页 / 加盟合作页
   ===================================================================== */
.bili-mp-page,
.bili-pp-page { padding-top: var(--block-gap); }

/* 页头 */
.bili-mp-hero,
.bili-pp-hero { text-align: center; padding: 24px 0 8px; margin-bottom: var(--block-gap); }
.bili-mp-hero__title,
.bili-pp-hero__title { font-size: 30px; font-weight: 700; color: var(--text-1); margin: 0 0 10px; }
.bili-mp-hero__sub,
.bili-pp-hero__sub { color: var(--text-2); font-size: 15px; line-height: 1.7; margin: 0 auto; max-width: 640px; }
.bili-mp-hero__intro,
.bili-pp-hero__intro { max-width: 760px; margin: 16px auto 0; color: var(--text-2); }

/* 会员权益亮点 */
.bili-mp-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--block-gap); margin-bottom: var(--block-gap); }
.bili-mp-benefit { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; transition: transform var(--tr-fast), box-shadow var(--tr-fast); }
.bili-mp-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop, 0 8px 24px rgba(0, 0, 0, .08)); }
.bili-mp-benefit__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 6px; background: var(--bg-2); color: var(--bili-pink); margin-bottom: 12px; }
.bili-mp-benefit__icon .bili-icon { color: var(--bili-pink); }
.bili-mp-benefit__title { font-size: 16px; font-weight: 600; color: var(--text-1); margin: 0 0 6px; }
.bili-mp-benefit__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }

/* 会员套餐 */
.bili-mp-plans { margin-bottom: var(--block-gap); }
.bili-mp-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--block-gap); align-items: stretch; }
.bili-mp-plan { position: relative; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; }
.bili-mp-plan.is-featured { border-color: var(--bili-pink); box-shadow: 0 8px 30px rgba(251, 114, 153, .18); }
.bili-mp-plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--bili-pink); color: #fff; font-size: 12px; padding: 3px 14px; border-radius: 6px; }
.bili-mp-plan__name { font-size: 18px; font-weight: 600; color: var(--text-1); text-align: center; margin: 0 0 8px; }
.bili-mp-plan__price { text-align: center; color: var(--bili-pink); font-weight: 700; font-size: 36px; line-height: 1; margin-bottom: 16px; }
.bili-mp-plan__cur { font-size: 18px; font-weight: 600; margin-right: 2px; }
.bili-mp-plan__unit { font-size: 14px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.bili-mp-plan__list { list-style: none; margin: 0 0 20px; padding: 0; flex: 1 1 auto; }
.bili-mp-plan__list li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; font-size: 13px; color: var(--text-1); border-bottom: 1px solid var(--line-soft); }
.bili-mp-plan__list li:last-child { border-bottom: 0; }
.bili-mp-plan__check { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: var(--bili-pink); }
.bili-mp-plan__check .bili-icon { color: var(--bili-pink); }
.bili-mp-plan .bili-btn { margin-top: auto; }
.bili-mp-plans__note { text-align: center; color: var(--text-3); font-size: 12px; margin: 16px 0 0; }

/* 加盟合作：模式 */
.bili-pp-modes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--block-gap); margin-bottom: var(--block-gap); }
.bili-pp-mode { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 20px; transition: transform var(--tr-fast); }
.bili-pp-mode:hover { transform: translateY(-3px); }
.bili-pp-mode__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 6px; background: var(--bg-2); color: var(--bili-blue); margin-bottom: 12px; }
.bili-pp-mode__icon .bili-icon { color: var(--bili-blue); }
.bili-pp-mode__title { font-size: 16px; font-weight: 600; color: var(--text-1); margin: 0 0 6px; }
.bili-pp-mode__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }

/* 加盟合作：流程 */
.bili-pp-flow { margin-bottom: var(--block-gap); }
.bili-pp-steps { list-style: none; counter-reset: ppstep; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--block-gap); }
.bili-pp-step { position: relative; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 18px; }
.bili-pp-step__num { counter-increment: ppstep; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--bili-pink), var(--bili-blue)); color: #fff; font-weight: 700; margin-bottom: 12px; }
.bili-pp-step__num::before { content: counter(ppstep); }
.bili-pp-step__title { font-size: 15px; font-weight: 600; color: var(--text-1); margin: 0 0 6px; }
.bili-pp-step__desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }

/* 加盟合作：联系 */
.bili-pp-contact__card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; }
.bili-pp-contact__desc { color: var(--text-2); font-size: 14px; margin: 0 0 18px; }
.bili-pp-contact__rows { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 0 auto 20px; text-align: left; }
.bili-pp-contact__row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-1); }
.bili-pp-contact__ic { flex: 0 0 auto; display: inline-flex; color: var(--bili-pink); }
.bili-pp-contact__row a { color: var(--bili-blue); }
.bili-pp-contact__card .bili-btn { margin: 0 auto; }

/* 响应式 */
@media (max-width: 980px) {
    .bili-mp-benefits,
    .bili-mp-plans__grid { grid-template-columns: repeat(2, 1fr); }
    .bili-pp-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .bili-mp-benefits,
    .bili-mp-plans__grid,
    .bili-pp-modes__grid { grid-template-columns: 1fr; }
    .bili-pp-steps { grid-template-columns: 1fr; }
    .bili-mp-hero__title,
    .bili-pp-hero__title { font-size: 24px; }
}