/* ==================================================
   主题变量：亮色为默认，html[data-theme="dark"] 覆盖为暗色
   ================================================== */

:root {

    --egg-gold: #a8530a;

    --bg: #f7f7f5;

    --bg-2: #f5f5f3;

    --surface: #ffffff;

    --fg: #171717;

    --fg-soft: #333333;

    --muted: #5f5f5f;

    --muted-2: #767676;

    --muted-3: #8a8a8a;

    --border: #dddddd;

    --border-soft: #d8d8d5;

    --on-accent: #ffffff;

    --danger: #bb3333;

    --danger-fg: #ffffff;

    --navbar-bg: rgba(247, 247, 245, 0.92);

    /* 状态徽章 */
    --status-warn: #8a6209;

    --status-warn-bg: rgba(203, 148, 22, 0.16);

    --status-ok: #2f6135;

    --status-ok-bg: rgba(53, 107, 59, 0.16);

    --status-info: #17558f;

    --status-info-bg: rgba(23, 92, 168, 0.16);

    /* 点赞高亮 */
    --like-fg: #a8530a;

    --like-border: #e8a44c;

    --like-bg: #fdf3e5;

    /* 浮层阴影 */
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

    /* BewlyCat 弹层体系：分级阴影 + edge-glow 内高光 + 玻璃模式变量 */
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
    --edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.8), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.5);
    --glass-blur: 20px;
    --glass-sat: 180%;
    --up-glass-bg: rgba(255, 255, 255, 0.68);
    --up-glass-border: rgba(131, 131, 145, 0.25);
    --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* 共享顶栏（nav.css）供值：功能站三页用毛玻璃质感，文字色跟随本页 token */
    --nav-bg: rgba(244, 244, 246, 0.55);
    --nav-line: rgba(0, 0, 0, 0.08);
    --nav-fg: var(--fg);
    --nav-muted: var(--muted);
    --nav-z: 100;

}

html[data-theme="dark"] {

    --egg-gold: #f0a24a;

    --bg: #101214;

    --bg-2: #1d2126;

    --surface: #171a1e;

    --fg: #e7e9ea;

    --fg-soft: #c9cdd1;

    --muted: #9aa0a6;

    --muted-2: #868b90;

    --muted-3: #6f747a;

    --border: #2b2f34;

    --border-soft: #33383e;

    --on-accent: #101214;

    --danger: #e05e5e;

    --danger-fg: #ffffff;

    --navbar-bg: rgba(16, 18, 20, 0.88);

    /* 状态徽章 */
    --status-warn: #e0b74a;

    --status-warn-bg: rgba(203, 148, 22, 0.18);

    --status-ok: #79c07f;

    --status-ok-bg: rgba(53, 107, 59, 0.2);

    --status-info: #6fa8dc;

    --status-info-bg: rgba(23, 92, 168, 0.2);

    /* 点赞高亮 */
    --like-fg: #f0a24a;

    --like-border: rgba(232, 164, 76, 0.5);

    --like-bg: rgba(232, 164, 76, 0.12);

    /* 浮层阴影：暗色下黑影不可见，改用外发光 */
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.55);

    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.1), inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.04);
    --glass-blur: 20px;
    --glass-sat: 180%;
    --up-glass-bg: rgba(42, 45, 50, 0.68);
    --up-glass-border: rgba(255, 255, 255, 0.12);

    /* 共享顶栏：暗色下与首页同档的半透明玻璃 */
    --nav-bg: rgba(17, 17, 19, 0.42);
    --nav-line: rgba(255, 255, 255, 0.07);

    color-scheme: dark;

}


/* 主题切换的平滑过渡 */

*,
*::before,
*::after {

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        fill 0.3s ease,
        stroke 0.3s ease;

}


/* ==================== 蛋型主题切换按钮 ==================== */

.theme-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 46px;

    padding: 0;

    color: var(--fg);

    background: transparent;

    border: 1px solid var(--border-soft);

    border-radius: 999px;

    cursor: pointer;

}

.theme-toggle:hover {

    border-color: var(--fg);

}

/* 语言切换按钮（与主题按钮同风格） */

.lang-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 46px;

    padding: 0;

    color: var(--fg);

    background: transparent;

    border: 1px solid var(--border-soft);

    border-radius: 999px;

    cursor: pointer;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.02em;

    transition: border-color 0.2s ease;

}

.lang-toggle:hover {

    border-color: var(--fg);

}

/* 导航右侧按钮组（语言 + 主题） */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}

.theme-toggle svg {

    width: 18px;

    height: 22px;

}

.theme-toggle svg path {

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    transition: fill 0.3s ease;

}

html[data-theme="dark"] .theme-toggle svg path {

    fill: currentColor;

}

/* 点击时的摇摆动画 */

.theme-toggle.wobbling svg {

    animation: egg-wobble 0.55s ease;

}

@keyframes egg-wobble {

    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-16deg) translateY(-2px);
    }

    55% {
        transform: rotate(13deg);
    }

    80% {
        transform: rotate(-6deg);
    }

    100% {
        transform: rotate(0);
    }

}

/* ==================== 语言按钮点击动画 ==================== */
/* 边框保持不动，只翻转按钮内的文字。
   四个预设：anim-flip（水平翻转，默认）/ anim-wobble（摇摆）/
   anim-pop（弹跳缩放）/ anim-spin（旋转一圈）。
   换预设：把 /js/i18n.js 里的 LANG_ANIM 常量改成对应名字即可 */

.lang-toggle {

    perspective: 300px;

}

.lang-toggle-inner {

    display: inline-block;

    backface-visibility: hidden;

}

.lang-toggle.wobbling .lang-toggle-inner {

    animation: lang-flip 0.5s ease;

}

.lang-toggle.anim-wobble.wobbling .lang-toggle-inner {

    animation-name: egg-wobble;

}

.lang-toggle.anim-pop.wobbling .lang-toggle-inner {

    animation-name: lang-pop;

}

.lang-toggle.anim-spin.wobbling .lang-toggle-inner {

    animation-name: lang-spin;

}

@keyframes lang-flip {

    0% {
        transform: rotateY(0);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }

}

@keyframes lang-pop {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.6);
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes lang-spin {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }

}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

body {
    margin: 0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Microsoft YaHei",
        sans-serif;

    background: var(--bg);
    color: var(--fg);

    /* 页脚粘底：内容不足一屏时页脚仍固定在视口底部 */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;

    /* body 为 flex 布局，显式全宽避免带 auto 边距的子项收缩 */
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==================== 导航 ==================== */

.navbar {
    width: 100%;
    border-bottom: 1px solid var(--border-soft);
    background: var(--navbar-bg);

    position: sticky;
    top: 0;
    z-index: 100;

    backdrop-filter: blur(12px);
}

.nav-container {
    max-width: 1100px;
    height: 72px;

    margin: 0 auto;
    padding: 0 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    color: var(--muted);
    font-size: 14px;

    /* 固定行高并让文字在框内垂直居中：
       中文与英文的字形基线不同，不固定的话切换语言后视觉高度会漂移 */
    display: inline-flex;

    align-items: center;

    height: 24px;

    line-height: 1;

    transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--fg);
}


/* ==================== 下载验证弹窗 ==================== */

.dl-modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999;

    padding: 20px;

}

.dl-modal {

    position: relative;

    width: min(360px, 92vw);

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 22px 22px 20px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

}

.dl-modal-close {

    position: absolute;

    top: 10px;

    right: 12px;

    border: none;

    background: none;

    color: var(--muted);

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    padding: 4px;

}

.dl-modal-close:hover {

    color: var(--fg);

}

.dl-modal h4 {

    margin: 0 0 10px;

    font-size: 16px;

    color: var(--fg);

}

.dl-modal-text {

    margin: 0 0 14px;

    font-size: 13px;

    color: var(--muted);

    line-height: 1.7;

}

.dl-modal-widget {

    min-height: 66px;

    margin-bottom: 12px;

    display: flex;

    justify-content: center;

}

.dl-modal-status {

    min-height: 1.4em;

    margin: 0 0 10px;

    font-size: 13px;

    color: var(--muted);

}

.dl-modal-go {

    width: 100%;

    height: 46px;

    border: none;

    border-radius: 6px;

    background: var(--fg);

    color: var(--on-accent);

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

}

.dl-modal-go:hover:not(:disabled) {

    opacity: 0.9;

}

.dl-modal-go:disabled {

    opacity: 0.4;

    cursor: not-allowed;

}

/* ==================== 下载验证弹窗结束 ==================== */

/* ==================== 下载中心 ==================== */

/* 卡片按钮与「访问」同款：透明底细边框、hover 反色（尺寸随 .vrc-res-link） */
.download-btn {
    height: 38px;

    padding: 0 22px;

    font-size: 13px;

    flex-shrink: 0;
}

/* 搜索框 */
.dl-search {
    display: flex;

    gap: 10px;

    margin: 6px 0 18px;
}

.dl-search-input {
    flex: 1;

    width: auto;

    height: 52px;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 0 15px;

    font-size: 14px;

    color: var(--fg);

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.dl-search-input:focus {
    border-color: var(--fg);

    box-shadow: 0 0 0 1px var(--fg);
}

/* 搜索按钮：与 VRChat 资源「投稿」同款（透明底细边框、hover 反色） */
.dl-search .dl-search-btn {
    flex-shrink: 0;

    height: 52px;

    padding: 0 26px;

    font-size: 14px;

    background: transparent;

    color: var(--fg);

    border: 1px solid var(--fg);
}

/* 暗色主题下标签胶囊文字提亮（标签仅作类型展示） */
html[data-theme="dark"] .vrc-res-tag {
    color: var(--fg-soft);

    border-color: #4a5057;
}

/* 结果行 */
.dl-meta {
    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 6px;

    color: var(--muted);

    font-size: 13px;
}

.dl-meta-clear {
    border: none;

    background: transparent;

    padding: 0;

    color: var(--muted);

    font-size: 13px;

    font-family: inherit;

    text-decoration: underline;

    cursor: pointer;
}

.dl-meta-clear:hover {
    color: var(--fg);
}

/* 匹配高亮：反色 */
.dl-hl {
    background: var(--fg);

    color: var(--on-accent);

    padding: 0 1px;
}

/* 空态 / 加载更多 */
.dl-empty {
    padding: 40px 0;

    color: var(--muted);

    font-size: 14px;
}

.dl-more-row {
    display: flex;

    justify-content: center;

    margin-top: 10px;
}

.dl-more {
    height: 40px;

    padding: 0 30px;

    font-size: 13px;
}

/* .button 的 display 会盖过 [hidden] 的 UA 样式，需显式关闭；
   特异度要压过后加载的 eggs.css `.feature-download .dl-more{display:inline-flex}`（同 0,2,0），
   否则 hidden 失效、按钮永远显示 —— 实测踩过 */
.dl-more-row .dl-more[hidden] {
    display: none;
}

/* 深链详情页 */
.dl-back {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--muted);

    font-size: 13px;

    text-decoration: none;
}

.dl-back:hover {
    color: var(--fg);
}

.dl-detail-card {
    padding: 30px 2px;
}

.dl-detail-card h2 {
    margin: 0;

    font-size: 24px;
}

.dl-notice {
    margin: 0 0 18px;
}

@media (max-width: 700px) {

    .dl-search-input {
        height: 46px;

        font-size: 16px; /* 16px 以下 iOS 聚焦会自动放大 */
    }

    .dl-search .dl-search-btn {
        height: 46px;

        padding: 0 18px;
    }

}

/* ==================== 顶部加载条（默认加载指示） ==================== */

#topBar {
    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    z-index: 1300;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.25s ease;
}

#topBar.on {
    opacity: 1;
}

#topBar.done {
    opacity: 0;
}

#topBar i {
    display: block;

    height: 100%;

    background: var(--fg);

    border-radius: 0 3px 3px 0;

    transform: translateX(-100%);
}

#topBar.on:not(.done) i {
    animation: topbar-crawl 6s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

#topBar.done i {
    animation: none;

    transform: translateX(0);

    transition: transform 0.25s ease;
}

@keyframes topbar-crawl {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(-38%); }
    100% { transform: translateX(-6%); }
}

/* 演示开关按钮（.anim-demo）样式已随顶栏入口一起删除；
   入口改由 localStorage freegg-anim-demo=1 手动开启，见 js/egg-loader.js */

/* ==================== 鸡蛋加载动画（演示模式） ==================== */

.egg-loading-box {
    min-height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px 0;
}

.egg-boot {
    position: fixed;

    inset: 0;

    z-index: 1300;

    background: var(--bg);

    display: flex;

    align-items: center;

    justify-content: center;
}

.egg-loader-stage {
    display: flex;

    flex-direction: column;

    align-items: center;
}

.egg-loader-svg {
    width: clamp(56px, 9vw, 72px);

    height: auto;

    transform-origin: 50% 85%;
}

.egg-loader-svg path,
.egg-loader-svg circle {
    fill: none;

    stroke: currentColor;

    stroke-width: 0.9;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.egg-path {
    stroke-dasharray: 100;

    stroke-dashoffset: 100;
}

.ph-draw .egg-path {
    animation: egg-draw 0.9s ease forwards;
}

@keyframes egg-draw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

.exit .egg-path {
    animation: egg-undraw 0.75s ease forwards;
}

@keyframes egg-undraw {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 100; }
}

/* B 摇摆 */

.ph-wobble .egg-loader-svg {
    animation: egg-loader-wobble 0.7s ease-in-out infinite;
}

@keyframes egg-loader-wobble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(7deg); }
    100% { transform: rotate(0deg); }
}

/* C 金蛋发光 */

.egg-loader-svg .yolk,
.egg-loader-svg .yolk-halo {
    opacity: 0;

    fill: var(--egg-gold);

    stroke: none;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.yolk-halo {
    transform: scale(0.4);

    transform-box: fill-box;

    transform-origin: center;
}

.yolk {
    transform-box: fill-box;

    transform-origin: center;
}

.ph-yolk .yolk {
    opacity: 1;
}

.ph-yolk .yolk-halo {
    opacity: 0.3;

    transform: scale(1);
}

.ph-pulse .yolk-halo {
    animation: yolk-pulse 0.5s ease-in-out 1;
}

@keyframes yolk-pulse {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.35); opacity: 0.55; }
    100% { transform: scale(1); opacity: 0.3; }
}

.ph-bounce .egg-loader-svg {
    animation: yolk-bounce 0.3s ease 1;
}

@keyframes yolk-bounce {
    0% { transform: translateY(0); }
    40% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

/* 影子 */

.egg-loader-shadow {
    width: 44%;

    height: 5px;

    background: var(--border);

    border-radius: 50%;

    margin: 12px auto 0;

    opacity: 0.8;

    animation: egg-shadow-pulse 1.4s ease-in-out infinite;
}

@keyframes egg-shadow-pulse {
    0%, 100% { transform: scaleX(1); opacity: 0.8; }
    50% { transform: scaleX(0.72); opacity: 0.45; }
}

/* 退场时全部隐去 */

.exit .yolk,
.exit .yolk-halo,
.exit .egg-loader-shadow {
    opacity: 0;

    transition: opacity 0.4s ease;
}

/* ==================== 鸡蛋加载动画结束 ==================== */

/* ==================== 下载中心结束 ==================== */

/* ==================== Hero ==================== */

.hero {
    min-height: 680px;

    display: flex;
    align-items: center;

    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 28px;
}

.hero-content {
    max-width: 760px;
}

.eyebrow {
    margin: 0 0 20px;

    font-size: 11px;
    letter-spacing: 0.18em;

    /* 原来是 --muted-2：11px 小字在亮色主题下实测只有 4.23:1，不到 AA 的 4.5:1。
       改成 --muted（亮 5.95:1 / 暗 7.11:1），与首页 .eyebrow 用的同一档 */
    color: var(--muted);
}

.hero h1 {
    margin: 0;

    font-size: clamp(64px, 10vw, 120px);
    line-height: 0.95;

    letter-spacing: -0.06em;
}

.hero-title {
    margin: 34px 0 0;

    font-size: 25px;
    line-height: 1.5;
}

.hero-description {
    margin: 22px 0 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 2;
}


/* ==================== 按钮 ==================== */

.hero-buttons {
    margin-top: 42px;

    display: flex;
    gap: 12px;
}

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    height: 48px;
    padding: 0 24px;

    font-size: 14px;

    border: 1px solid var(--fg);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.button.primary {
    background: var(--fg);
    color: var(--on-accent);
}

.button.primary:hover {
    background: var(--fg-soft);
}

.button.secondary {
    background: transparent;
}

.button.secondary:hover {
    background: var(--fg);
    color: var(--on-accent);
}


/* ==================== 内容区域 ==================== */

.section {
    max-width: 1100px;
    margin: 0 auto;

    padding: 120px 28px;
}

.section-header {
    max-width: 600px;
    margin-bottom: 55px;
}

.section-header h2 {
    margin: 0;

    font-size: 42px;
    letter-spacing: -0.04em;
}

.section-header p:last-child {
    margin-top: 18px;

    color: var(--muted);

    line-height: 1.8;
}


/* ==================== 卡片 ==================== */

.cards {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.card {
    min-height: 240px;

    padding: 32px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.card-number {
    font-size: 11px;
    color: var(--muted-2);
}

.card h3 {
    margin: 40px 0 14px;

    font-size: 20px;
}

.card p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.8;
}


/* ==================== 状态 ==================== */

.status-section {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.status-container {
    max-width: 1100px;

    margin: 0 auto;
    padding: 80px 28px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.status-container h2 {
    margin: 0;

    font-size: 38px;
}

.status-text {
    color: var(--muted);

    line-height: 2;
}


/* ==================== Footer ==================== */

footer {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 40px 28px 60px;

    display: flex;
    justify-content: space-between;

    color: var(--muted-2);

    font-size: 12px;
}


/* ==================== 手机 ==================== */

@media (max-width: 700px) {

    .nav-container {
        height: 64px;
    }

    .nav-links {
        gap: 14px;
    }

    .nav-links a {
        font-size: 12px;
    }

    .hero {
        min-height: 600px;
        padding-top: 60px;
    }

    .hero h1 {
        font-size: 72px;
    }

    .hero-title {
        font-size: 20px;
    }

    .hero-description br {
        display: none;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .status-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    footer {
        flex-direction: column;
        gap: 8px;
    }
}

/* ==================== 表单 ==================== */

#messageForm {
    border-top: 1px solid var(--border);

    padding-top: 40px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;

    font-weight: 500;
}

.form-group label span {
    color: var(--muted-2);
}

.form-group input,
.form-group textarea {
    width: 100%;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 14px 15px;

    font-family: inherit;

    font-size: 14px;

    color: var(--fg);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input {
    height: 50px;
}

.form-group textarea {
    min-height: 170px;

    resize: vertical;

    line-height: 1.7;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--fg);

    box-shadow:
        0 0 0 1px var(--fg);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--muted-3);
}


/* ==================== 提交按钮 ==================== */

.submit-button {
    width: 100%;

    height: 52px;

    border: none;

    background: var(--fg);

    color: var(--on-accent);

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        opacity 0.2s ease;
}

.submit-button:hover {
    background: var(--fg-soft);
}

.submit-button:disabled {
    cursor: not-allowed;

    opacity: 0.5;
}


/* ==================== 表单结果 ==================== */

.form-result {
    min-height: 24px;

    margin-top: 18px;

    font-size: 13px;

    line-height: 1.6;
}

.form-result.success {
    color: var(--fg-soft);
}

.form-result.error {
    color: var(--muted);
}


/* ==================== 资源投稿：登录直投账号行 ==================== */

.message-account-line {
    margin: 0;

    font-size: 14px;

    color: var(--fg);

    line-height: 1.7;
}

.message-help-link {
    color: var(--fg);

    text-decoration: underline;

    text-underline-offset: 3px;
}


/* ==================== 关于本站 ==================== */

.about-page {
    max-width: 1100px;

    margin: 0 auto;

    padding: 110px 28px 130px;
}

.about-container {
    max-width: 760px;

    margin: 0 auto;
}

.about-container > h1 {
    margin: 0;

    font-size: clamp(48px, 8vw, 82px);

    line-height: 1;

    letter-spacing: -0.06em;
}

.about-intro {
    margin-top: 45px;

    padding-bottom: 60px;

    border-bottom: 1px solid var(--border);
}

.about-intro p {
    margin: 0 0 20px;

    font-size: 17px;

    line-height: 2;

    color: var(--muted);
}

.about-intro p:last-child {
    margin-bottom: 0;
}


/* ==================== About 内容 ==================== */

.about-section {
    padding: 60px 0;

    border-bottom: 1px solid var(--border);
}

.about-section h2 {
    margin: 0 0 24px;

    font-size: 26px;

    letter-spacing: -0.03em;
}

.about-section > p {
    margin: 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 2;
}


/* ==================== 技术列表 ==================== */

.about-list {
    border-top: 1px solid var(--border);
}

.about-item {
    display: grid;

    grid-template-columns: 60px 1fr;

    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid var(--border);
}

.about-item > span {
    color: var(--muted-2);

    font-size: 11px;

    padding-top: 4px;
}

.about-item h3 {
    margin: 0 0 8px;

    font-size: 17px;
}

.about-item p {
    margin: 0;

    color: var(--muted-2);

    font-size: 14px;
}


/* ==================== 手机 ==================== */

@media (max-width: 700px) {

    .about-page {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .about-intro {
        margin-top: 35px;

        padding-bottom: 45px;
    }

    .about-section {
        padding: 45px 0;
    }

    .about-item {
        grid-template-columns: 40px 1fr;
    }

}

/* ==================== 留言状态 ==================== */

.status.pending {
    background: var(--status-warn-bg);

    color: var(--status-warn);
}

.status.invited {
    background: var(--status-ok-bg);

    color: var(--status-ok);
}

.status.published {
    background: var(--status-info-bg);

    color: var(--status-info);
}

/* 页脚（.site-foot）、公安备案徽标（.beian-record）的样式已统一抽到共享 nav.css，
   原先此处的 .icp-record / .icp-sep 与一份重复的徽标 base64 已随之删除 */





/* ==================================================
   管理后台优化
   ================================================== */

.admin-page {
    max-width: 1280px;
    min-height: calc(100vh - 160px);

    margin: 0 auto;

    padding: 80px 40px 100px;
}


/* ==================== 登录区域 ==================== */

.admin-login {
    width: 100%;
    max-width: 460px;

    margin: 60px auto;
}

.admin-login h1 {
    margin: 0 0 40px;

    font-size: 48px;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


/* ==================== 后台顶部 ==================== */

.admin-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 35px;
}

.admin-header h1 {
    margin: 0;

    font-size: 48px;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


/* ==================== 记录数量 ==================== */

.message-count {
    margin-bottom: 16px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;
}


/* ==================== 表格 ==================== */

.table-wrapper {
    width: 100%;

    overflow-x: auto;

    border-top: 1px solid var(--border);

    border-left: 1px solid var(--border);

    background: var(--surface);
}

table {
    width: 100%;

    min-width: 900px;

    border-collapse: collapse;

    table-layout: auto;

    font-size: 13px;
}

th,
td {
    padding: 16px 18px;

    text-align: left;

    vertical-align: middle;

    border-right: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}

th {
    background: var(--bg-2);

    color: var(--fg-soft);

    font-size: 12px;

    font-weight: 500;

    white-space: nowrap;
}


/* 投稿表 / 邀请表的列宽（资源表列语义不同，单独定义） */

.admin-table-message th:first-child,
.admin-table-message td:first-child,
.admin-table-invite th:first-child,
.admin-table-invite td:first-child {
    width: 55px;

    text-align: center;
}

.admin-table-message th:nth-child(2),
.admin-table-message td:nth-child(2),
.admin-table-invite th:nth-child(2),
.admin-table-invite td:nth-child(2) {
    min-width: 150px;

    white-space: nowrap;
}

.admin-table-message th:nth-child(3),
.admin-table-message td:nth-child(3) {
    min-width: 100px;

    white-space: nowrap;
}

.admin-table-message th:nth-child(4),
.admin-table-message td:nth-child(4),
.admin-table-invite th:nth-child(3),
.admin-table-invite td:nth-child(3) {
    min-width: 210px;

    white-space: nowrap;
}

.admin-table-message th:nth-child(5),
.admin-table-message td:nth-child(5),
.admin-table-invite th:nth-child(5),
.admin-table-invite td:nth-child(5) {
    min-width: 280px;
}

/* 资源表：顺序 / ID / 名称 / 标签 / 计数 / 操作 */

.admin-table-resource th:first-child,
.admin-table-resource td:first-child {
    width: 92px;
}

.admin-table-resource th:nth-child(2),
.admin-table-resource td:nth-child(2) {
    min-width: 150px;

    white-space: nowrap;
}

.admin-table-resource th:nth-child(3),
.admin-table-resource td:nth-child(3) {
    min-width: 150px;
}

.admin-table-resource th:nth-child(4),
.admin-table-resource td:nth-child(4) {
    min-width: 160px;
}

.admin-table-resource th:nth-child(5),
.admin-table-resource td:nth-child(5) {
    min-width: 90px;

    white-space: nowrap;
}

.message-cell {
    max-width: 420px;

    white-space: pre-wrap;

    word-break: break-word;

    line-height: 1.7;
}


/* 状态 */

th:last-child,
td:last-child {
    min-width: 150px;
}


/* ==================== 状态区域 ==================== */

.status-area {
    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;
}

.status {
    display: inline-block;

    padding: 5px 9px;

    font-size: 11px;

    line-height: 1;

    white-space: nowrap;
}

/* ==================== 已邀请按钮 ==================== */

.invite-button {
    padding: 6px 11px;

    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

    transition: 0.15s ease;
}

.invite-button:hover {
    border-color: var(--fg);

    background: var(--fg);

    color: var(--on-accent);
}

.invite-button:disabled {
    opacity: 0.5;

    cursor: wait;
}


/* ==================== 退出按钮 ==================== */

/* 资源表单：中英编辑切换 */

.admin-locale-toggle {

    display: flex;

    border: 1px solid var(--border);

}

.admin-locale-toggle button {

    height: 40px;

    padding: 0 16px;

    border: none;

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;

}

.admin-locale-toggle button + button {

    border-left: 1px solid var(--border);

}

.admin-locale-toggle button.active {

    background: var(--fg);

    color: var(--on-accent);

}

.admin-logout {
    height: 40px;

    padding: 0 18px;

    border: 1px solid var(--border);

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition: 0.15s ease;
}

.admin-logout:hover {
    border-color: var(--fg);

    color: var(--fg);
}


/* ==================== 手机 ==================== */

@media (max-width: 700px) {

    .admin-page {
        padding: 55px 20px 70px;
    }

    .admin-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }

    .admin-header h1,
    .admin-login h1 {
        font-size: 40px;
    }

    .table-wrapper {
        margin-right: -20px;

        width: calc(100% + 20px);
    }

}

/* ==================== 删除按钮 ==================== */

.delete-button {
    padding: 6px 11px;

    border: 1px solid var(--border);

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;

    transition: 0.15s ease;

    white-space: nowrap;
}

.delete-button:hover {
    border-color: var(--danger);

    background: var(--danger);

    color: var(--danger-fg);
}

/* ==================================================
   免费鸡蛋 · 聚合页
   ================================================== */

.eggs-page {
    max-width: 1100px;

    margin: 0 auto;

    /* 顶栏由 sticky 改 fixed（nav.css）后不再占文档流：
       154 = 新顶栏 64 + 原本顶栏之下的 90，保持顶栏下方的间距不变 */
    padding: 154px 28px max(110px, calc(var(--edge-foot-h) + 40px));
}

.eggs-container {
    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 64px;

    align-items: start;
}

/* 左侧栏锁定：从初始位置起就不随滚动移动。
   top 与其自然位置一致（固定顶栏 64px + .eggs-page 上内边距 90px），
   否则会先跟着滚一段再吸附 */

.eggs-sidebar {

    position: sticky;

    top: 154px;

    align-self: start;

}

.eggs-sidebar h1 {
    margin: 0;

    font-size: clamp(34px, 5vw, 52px);

    line-height: 1;

    letter-spacing: -0.05em;
}

.eggs-nav {
    margin-top: 38px;

    border-top: 1px solid var(--border);
}

.eggs-nav-item {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 18px 2px;

    border-bottom: 1px solid var(--border);

    color: var(--muted);

    transition: color 0.2s ease;
}

.eggs-nav-icon {
    display: flex;

    flex-shrink: 0;

    font-size: 20px;

    line-height: 1;
}

.eggs-nav-icon svg {
    display: block;
}

.eggs-nav-text strong {
    display: block;

    font-size: 15px;

    font-weight: 600;
}

.eggs-nav-text small {
    display: block;

    margin-top: 5px;

    color: var(--muted-2);

    font-size: 12px;

    line-height: 1.6;
}

.eggs-nav-item:hover,
.eggs-nav-item.active {
    color: var(--fg);
}

.eggs-note {
    margin: 30px 0 0;

    color: var(--muted-3);

    font-size: 12px;
}

.eggs-content {
    min-height: 480px;
}

.eggs-loading,
.eggs-error {
    padding: 60px 0;

    color: var(--muted-2);

    font-size: 14px;
}


/* ==================== 功能板块公共 ==================== */

.feature-head {
    margin-bottom: 45px;
}

.feature-head h2 {
    margin: 0 0 16px;

    font-size: clamp(30px, 4.5vw, 44px);

    letter-spacing: -0.04em;

    line-height: 1.1;
}

.feature-head p {
    margin: 0;

    max-width: 540px;

    color: var(--muted);

    font-size: 14px;

    line-height: 2;
}


/* ==================== B站解析 ==================== */

.bili-input-row {
    display: flex;

    gap: 12px;
}

.bili-input-row input {
    flex: 1;

    height: 52px;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 0 15px;

    font-family: inherit;

    font-size: 14px;

    color: var(--fg);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bili-input-row input:focus {
    border-color: var(--fg);

    box-shadow:
        0 0 0 1px var(--fg);
}

.bili-input-row input::placeholder {
    color: var(--muted-3);
}

.bili-input-row .submit-button {
    width: auto;

    /* 常驻 1px 主题色边框：padding 33px + 边框与原 34px 等宽，hover 反色不跳动 */
    padding: 0 33px;

    border: 1px solid var(--fg);
}

.bili-input-row .submit-button:hover {
    background: transparent;

    color: var(--fg);

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.bili-input-actions {
    display: flex;

    gap: 12px;
}

.bili-secondary-btn {
    height: 52px;

    /* 与「投稿」同款：透明底 + 主题色细边框，hover 反色 */
    padding: 0 33px;

    border: 1px solid var(--fg);

    background: transparent;

    color: var(--fg);

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.bili-secondary-btn:hover {
    background: var(--fg);

    color: var(--on-accent);
}

.bili-card {
    border-top: 1px solid var(--border);

    margin-top: 40px;

    padding-top: 34px;
}

.bili-card-top {
    display: flex;

    gap: 24px;
}

.bili-cover {
    width: 250px;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    background: var(--bg-2);

    border: 1px solid var(--border);

    flex-shrink: 0;
}

.bili-info {
    min-width: 0;
}

.bili-info h3 {
    margin: 0 0 12px;

    font-size: 17px;

    line-height: 1.6;

    word-break: break-word;
}

.bili-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px 18px;

    align-items: center;

    color: var(--muted-2);

    font-size: 13px;
}

.bili-badge {
    padding: 4px 8px;

    background: var(--fg);

    color: var(--on-accent);

    font-size: 11px;

    white-space: nowrap;
}

/* 模式切换（点播/直播） */

.bili-modes {
    display: flex;

    width: max-content;

    margin-bottom: 26px;

    border: 1px solid var(--border-soft);

    background: var(--surface);
}

.bili-mode-btn {
    height: 42px;

    padding: 0 26px;

    border: none;

    background: transparent;

    color: var(--muted);

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.bili-mode-btn + .bili-mode-btn {
    border-left: 1px solid var(--border-soft);
}

.bili-mode-btn.active {
    background: var(--fg);

    color: var(--on-accent);
}

/* 直播结果卡 */

.bili-live-title {
    margin: 0 0 12px;

    font-size: 17px;

    line-height: 1.6;

    word-break: break-word;
}

.bili-live-badge {
    padding: 4px 8px;

    font-size: 11px;

    white-space: nowrap;
}

.bili-live-badge.on {
    background: var(--danger);

    color: var(--danger-fg);
}

.bili-live-badge.off {
    background: var(--border-soft);

    color: var(--muted);
}

/* 稳定播放链接展示条 */

.bili-stable-link {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 24px;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 10px 10px 10px 16px;
}

.bili-stable-url {
    flex: 1;

    min-width: 0;

    font-size: 13px;

    line-height: 1.7;

    color: var(--muted);

    word-break: break-all;
}

.bili-stable-link .button {
    height: 38px;

    padding: 0 18px;

    font-size: 13px;

    flex-shrink: 0;
}

.bili-pages {
    margin-top: 16px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.bili-pages label {
    font-size: 13px;

    font-weight: 500;
}

.bili-pages select {
    max-width: 320px;

    height: 40px;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 0 10px;

    font-family: inherit;

    font-size: 13px;

    color: var(--fg);

    outline: none;
}

.bili-pages select:focus {
    border-color: var(--fg);
}

.bili-video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    margin-top: 28px;

    background: #000;
}

.bili-copy-row {
    display: flex;

    justify-content: center;

    margin-top: 26px;
}

.bili-copy-row .button {
    height: 38px;

    padding: 0 26px;

    font-size: 13px;
}

.bili-note {
    margin: 26px 0 0;

    color: var(--muted-3);

    font-size: 12px;

    line-height: 1.8;
}


/* ==================== 手机 ==================== */

@media (max-width: 700px) {

    .eggs-page {
        padding: 114px 20px max(80px, calc(var(--edge-foot-h) + 40px));   /* 64 顶栏 + 原 50 */
    }

    .eggs-container {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .eggs-sidebar {
        position: static;
    }

    .eggs-sidebar h1 {
        font-size: 40px;
    }

    /* 侧栏导航变成顶部横滑标签 */

    .eggs-nav {
        display: flex;

        margin-top: 24px;

        border-top: none;

        border-bottom: 1px solid var(--border);

        overflow-x: auto;

        scrollbar-width: none;
    }

    .eggs-nav::-webkit-scrollbar {
        display: none;
    }

    .eggs-nav-item {
        flex-shrink: 0;

        align-items: center;

        gap: 8px;

        padding: 12px 16px;

        border-bottom: 2px solid transparent;

        margin-bottom: -1px;
    }

    .eggs-nav-text small {
        display: none;
    }

    .eggs-nav-item.active {
        border-bottom-color: var(--fg);
    }

    .eggs-content {
        min-height: 360px;
    }

    .bili-card-top {
        flex-direction: column;
    }

    .bili-cover {
        width: 100%;
    }

    .bili-input-row {
        flex-direction: column;

        gap: 10px;
    }

    /* 手机端输入框：宽度与下方按钮完全一致；
       16px 字号同时避免 iOS 聚焦自动放大 */
    .bili-input-row input {
        width: 100%;

        flex: none;

        height: 46px;

        font-size: 16px;
    }

    .bili-input-actions {
        width: 100%;
    }

    .bili-input-actions .submit-button,
    .bili-input-actions .bili-secondary-btn {
        flex: 1;

        height: 46px;
    }

    .bili-stable-link {
        flex-direction: column;

        align-items: stretch;
    }

    .bili-stable-link .button {
        width: 100%;
    }

}


/* ==================== 404 ==================== */

.notfound-page {
    max-width: 1100px;

    margin: 0 auto;

    padding: 130px 28px 150px;
}

.notfound-page h1 {
    margin: 0;

    font-size: clamp(96px, 16vw, 190px);

    line-height: 0.9;

    letter-spacing: -0.06em;
}

.notfound-page .notfound-text {
    margin: 32px 0 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 2;
}

.notfound-page .hero-buttons {
    margin-top: 38px;
}

@media (max-width: 700px) {

    .notfound-page {
        padding: 80px 20px 100px;
    }

    .notfound-page .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }

}


/* ==================== VRChat 资源 ==================== */

.vrc-res-list {
    border-top: 1px solid var(--border);
}

.vrc-res-card {
    padding: 26px 2px;

    border-bottom: 1px solid var(--border);
}

.vrc-res-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    flex-wrap: wrap;
}

.vrc-res-top h3 {
    margin: 0;

    font-size: 17px;
}

/* 用户主页视频行 / 上传完成卡：转码进度条（流内全宽细条，不依赖定位上下文） */
.user-progress {
    display: block;

    flex-basis: 100%;

    width: 100%;

    height: 2px;

    margin-top: 2px;

    border-radius: 1px;

    background: var(--border-soft, rgba(128, 128, 128, 0.2));

    overflow: hidden;
}

.user-progress i {
    display: block;

    height: 100%;

    background: var(--fg);

    opacity: 0.45;

    transition: width 1s ease;
}

/* 下载卡片/详情卡的「更新于」时间 */
.dl-updated {
    flex: none;

    color: var(--muted-2);

    font-size: 12px;

    font-variant-numeric: tabular-nums;

    white-space: nowrap;
}

.vrc-res-tags {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}

.vrc-res-tag {
    padding: 4px 8px;

    border: 1px solid var(--border-soft);

    color: var(--muted);

    font-size: 11px;

    white-space: nowrap;
}

.vrc-res-desc {
    margin: 12px 0 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 2;
}

.vrc-res-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    margin-top: 18px;
}

.vrc-res-author {
    color: var(--muted-2);

    font-size: 12px;
}

.vrc-res-link {
    height: 38px;

    padding: 0 22px;

    font-size: 13px;

    flex-shrink: 0;
}

.vrc-res-footer {
    margin-top: 34px;
}

.vrc-res-footer p {
    margin: 0 0 10px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.9;
}

.vrc-res-footer .vrc-res-disclaimer {
    margin-bottom: 0;

    color: var(--muted-3);

    font-size: 12px;
}


/* ==================== 功能头部（标题 + 右侧动作） ==================== */

.feature-head-split {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;
}

.feature-head-split .feature-head-main {
    min-width: 0;
}

.feature-head-split .vrc-res-link {
    margin-bottom: 4px;

    flex-shrink: 0;
}

@media (max-width: 700px) {

    .feature-head-split {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }

}


/* ==================== 卡片邀请入口 ==================== */

.vrc-res-register {
    margin-top: 12px;

    display: flex;

    align-items: baseline;

    gap: 10px;

    flex-wrap: wrap;
}

.vrc-res-register a {
    color: var(--fg);

    font-size: 13px;

    font-weight: 400;

    text-decoration: none;
}

.vrc-res-register a:hover {
    font-weight: 700;

    color: var(--on-accent);

    background: var(--fg);
}


/* ==================== 排序工具条 ==================== */

.vrc-sort-bar {
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-bottom: 14px;
}

.vrc-sort-btn {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    padding: 7px 12px;

    font-size: 15px;

    line-height: 1;

    color: var(--muted-2);

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 999px;

    cursor: pointer;
}

.vrc-sort-btn:hover {
    color: var(--fg);

    border-color: var(--fg);
}

.vrc-sort-btn.active {
    color: var(--fg);

    border-color: var(--fg);

    background: var(--bg-2);
}

.vrc-sort-btn .vrc-sort-dir {
    font-size: 11px;
}

.vrc-sort-btn svg path {
    fill: currentColor;
}


/* ==================== 卡片浏览量与蛋形点赞 ==================== */

.vrc-views {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    height: 38px;

    padding: 0 18px;

    font-size: 13px;

    line-height: 1;

    color: var(--muted);

    background: transparent;

    border: 1px solid var(--border-soft);

    border-radius: 999px;

    white-space: nowrap;
}

.vrc-res-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-shrink: 0;
}

.vrc-like-button {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    height: 38px;

    padding: 0 18px;

    font-size: 13px;

    line-height: 1;

    color: var(--muted);

    background: transparent;

    border: 1px solid var(--border-soft);

    border-radius: 999px;

    cursor: pointer;
}

.vrc-like-button svg {
    font-size: 15px;

    transition: transform 0.25s ease;
}

.vrc-like-button svg path {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}

.vrc-like-button:hover {
    color: var(--fg);

    border-color: var(--fg);
}

.vrc-like-button:hover svg {
    transform: scale(1.12) rotate(-8deg);
}

.vrc-like-button.liked {
    color: var(--like-fg);

    border-color: var(--like-border);

    background: var(--like-bg);
}

.vrc-like-button.liked svg path {
    fill: currentColor;

    stroke: currentColor;
}

@media (max-width: 700px) {

    .vrc-res-bottom {
        flex-wrap: wrap;
    }

    .vrc-res-actions {
        width: 100%;

        justify-content: flex-end;
    }

}

.vrc-res-register span {
    color: var(--muted-3);

    font-size: 12px;
}


/* ==================== 邀请申请板块 ==================== */

.invite-steps {
    margin: 0 0 40px;

    padding: 22px 26px;

    border: 1px solid var(--border-soft);
}

.invite-steps p {
    margin: 0 0 8px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.9;
}

.invite-steps p:last-child {
    margin-bottom: 0;
}

.invite-note {
    margin: 26px 0 0;

    color: var(--muted-3);

    font-size: 12px;

    line-height: 1.9;
}


/* ==================== 后台邀请申请区 ==================== */

/* ==================== 资源列表分页 ==================== */

.vrc-pager {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 26px;
}

.vrc-pager button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;

    height: 34px;

    padding: 0 10px;

    font-size: 13px;

    color: var(--muted);

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 999px;

    cursor: pointer;
}

.vrc-pager button:hover:not(:disabled) {

    color: var(--fg);

    border-color: var(--fg);
}

.vrc-pager button:disabled {

    opacity: 0.4;

    cursor: default;
}

.vrc-pager .vrc-pager-info {

    min-width: 52px;

    color: var(--muted);

    font-size: 13px;

    text-align: center;
}


/* ==================== 蛋形回到顶部按钮 ==================== */

.back-top {

    position: fixed;

    /* 蛋页由 eggs-dock.js 按内容列右缘写入行内 right/bottom；
       默认 26px 只在没有脚本量测的页面生效（admin） */
    right: var(--back-right, 26px);

    bottom: var(--back-bottom, 26px);

    z-index: 90;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 54px;

    color: var(--fg);

    background: var(--surface);

    border: 1px solid var(--border-soft);

    /* 蛋型圆角 */
    border-radius: 52% 48% 55% 45% / 62% 60% 40% 38%;

    box-shadow: var(--shadow);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.back-top.visible {

    opacity: 1;

    visibility: visible;

    transform: none;
}

/* corner 菜单（user / help）打开时回顶按钮让位：展开框会弹到蛋的右侧区域，
   两者在同一片浮动区，避免重叠（eggs-dock.js 切换 hidden-by-dock） */
.back-top.visible.hidden-by-dock {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(12px);
}

.back-top:hover {

    border-color: var(--fg);

    transform: translateY(-3px);
}

.back-top svg {

    width: 18px;

    height: 18px;
}

.back-top.wobbling svg {

    animation: egg-wobble 0.55s ease;
}

@media (max-width: 700px) {

    .back-top {

        right: 16px;

        bottom: calc(var(--edge-foot-h, 0px) + 14px);   /* 蛋页抬起到底栏上方；admin 无此变量回落 14px */
    }
}

/* ==================== 管理后台：概览指标 ==================== */

.admin-stats {
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 1px;

    margin-bottom: 34px;

    background: var(--border);

    border: 1px solid var(--border);
}

.admin-stat {
    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 18px 20px;

    background: var(--surface);
}

.admin-stat-label {
    color: var(--muted-2);

    font-size: 12px;
}

.admin-stat strong {
    font-size: 26px;

    font-weight: 600;

    letter-spacing: -0.02em;
}


/* ==================== 管理后台：数据趋势 ==================== */

.admin-chart-card {
    margin-bottom: 34px;

    border: 1px solid var(--border);

    background: var(--surface);

    padding: 20px 20px 16px;
}

.admin-chart-head {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}

.admin-chart-head h3 {
    margin: 0;

    font-size: 15px;

    font-weight: 600;
}

.admin-range {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;
}

.admin-range-btn {
    border: 1px solid var(--border-soft);

    background: transparent;

    color: var(--muted);

    padding: 7px 12px;

    font-size: 12px;

    font-family: inherit;

    cursor: pointer;
}

.admin-range-btn:hover {
    color: var(--fg);

    border-color: var(--fg);
}

.admin-range-btn.active {
    background: var(--fg);

    border-color: var(--fg);

    color: var(--on-accent);
}

.admin-range input[type="date"] {
    height: 32px;

    border: 1px solid var(--border-soft);

    background: var(--bg);

    color: var(--fg);

    padding: 0 8px;

    font-size: 12px;

    font-family: inherit;
}

.admin-range-sep {
    color: var(--muted-2);

    font-size: 12px;
}

.admin-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 10px;
}

.admin-legend-chip {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    border: 1px solid var(--border-soft);

    background: transparent;

    color: var(--muted);

    padding: 5px 10px;

    font-size: 12px;

    font-family: inherit;

    cursor: pointer;
}

.admin-legend-chip i {
    width: 10px;

    height: 10px;

    display: inline-block;
}

.admin-legend-chip.on {
    color: var(--fg);

    border-color: var(--border);
}

.admin-legend-chip:not(.on) i {
    opacity: 0.25;
}

.admin-legend-chip:not(.on) {
    opacity: 0.55;
}

.admin-chart-wrap {
    position: relative;
}

.admin-chart-wrap svg {
    display: block;

    width: 100%;

    height: auto;
}

.chart-grid {
    stroke: var(--border);

    stroke-width: 1;
}

.chart-ylabel,
.chart-xlabel {
    fill: var(--muted-2);

    font-size: 11px;

    font-family: inherit;
}

.chart-guide {
    stroke: var(--muted-2);

    stroke-width: 1;

    stroke-dasharray: 3 3;
}

.chart-tip {
    position: absolute;

    z-index: 5;

    min-width: 150px;

    background: var(--bg);

    border: 1px solid var(--border);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

    padding: 8px 10px;

    font-size: 12px;

    pointer-events: none;
}

.chart-tip strong {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;
}

.chart-tip span {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 2px;

    color: var(--muted);
}

.chart-tip i {
    width: 8px;

    height: 8px;

    display: inline-block;
}

.admin-chart-empty {
    padding: 60px 0;

    text-align: center;

    color: var(--muted-2);

    font-size: 13px;
}

.admin-range-summary {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 18px;

    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;
}

.admin-range-summary strong {
    color: var(--fg);

    font-weight: 600;
}


/* ==================== 管理后台：数据板块仪表盘 ==================== */

/* 核心卡环比（较昨日） */
.stat-delta {
    display: block;

    margin-top: 2px;

    font-size: 11px;

    font-variant-numeric: tabular-nums;
}

.stat-delta.up {
    color: var(--status-ok);
}

.stat-delta.down {
    color: var(--danger);
}

/* 双列图表网格（窄屏回落单列） */
.admin-dashboard-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 22px;

    margin-top: 22px;
}

@media (max-width: 980px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* 24 小时柱状图 */
.hour-bar {
    fill: var(--fg);

    opacity: 0.72;

    cursor: pointer;
}

.hour-bar:hover {
    opacity: 1;
}

.hour-bar.empty {
    opacity: 0.14;

    cursor: default;
}

/* 水平条形排行 */
.rank-list {
    display: flex;

    flex-direction: column;
}

.rank-item {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 7px 0;

    font-size: 13px;
}

.rank-idx {
    flex: none;

    width: 20px;

    text-align: center;

    color: var(--muted-3);

    font-size: 12px;

    font-variant-numeric: tabular-nums;
}

.rank-label {
    flex: none;

    width: 88px;

    color: var(--fg-soft);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.rank-label.wide {
    width: 170px;
}

.rank-bar {
    flex: 1;

    height: 10px;

    border-radius: 5px;

    background: var(--surface-2, rgba(128, 128, 128, 0.12));

    overflow: hidden;
}

.rank-bar i {
    display: block;

    height: 100%;

    border-radius: 5px;

    background: var(--fg);

    opacity: 0.55;
}

.rank-num {
    flex: none;

    min-width: 74px;

    text-align: right;

    color: var(--fg);

    font-size: 12px;

    font-variant-numeric: tabular-nums;
}

/* 解析平台分布分组 */
.dist-group {
    padding: 6px 0;
}

.dist-title {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    margin: 4px 0 2px;

    font-size: 13px;

    color: var(--fg);

    font-weight: 600;
}

/* 新老访客占比条 */
.visitor-bar {
    display: flex;

    height: 14px;

    border-radius: 7px;

    overflow: hidden;

    margin: 8px 0 12px;

    background: var(--surface-2, rgba(128, 128, 128, 0.12));
}

.visitor-bar i.new {
    background: #c9a227;

    opacity: 0.8;
}

.visitor-bar i.ret {
    background: #4f8fd9;

    opacity: 0.65;
}

.visitor-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 22px;

    font-size: 13px;

    color: var(--fg-soft);
}

.visitor-legend i {
    display: inline-block;

    width: 9px;

    height: 9px;

    border-radius: 2px;

    margin-right: 6px;
}

.visitor-legend i.new {
    background: #c9a227;
}

.visitor-legend i.ret {
    background: #4f8fd9;
}

.visitor-legend strong {
    color: var(--fg);
}

/* 用户与蛋壳指标行 */
.user-egg-metrics {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 22px;

    padding: 6px 0;

    font-size: 13px;

    color: var(--fg-soft);
}

.user-egg-metrics strong {
    color: var(--fg);

    font-weight: 600;

    font-variant-numeric: tabular-nums;
}


/* ==================== 管理后台：标签导航 ==================== */

.admin-tabs {
    display: flex;

    gap: 4px;

    margin-bottom: 34px;

    border-bottom: 1px solid var(--border);
}

.admin-tab {
    padding: 12px 20px;

    color: var(--muted);

    font-size: 14px;

    background: transparent;

    border: none;

    border-bottom: 2px solid transparent;

    cursor: pointer;
}

.admin-tab:hover {
    color: var(--fg);
}

.admin-tab.active {
    color: var(--fg);

    font-weight: 600;

    border-bottom-color: var(--fg);
}


/* ==================== 管理后台：区块标题 ==================== */

.admin-section-head {
    margin-bottom: 22px;
}

.admin-section-head h2 {
    margin: 0 0 10px;

    font-size: 24px;

    letter-spacing: -0.03em;
}

.admin-section-head p {
    margin: 0;

    max-width: 620px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.9;
}

.admin-empty {
    padding: 40px 18px;

    color: var(--muted-2);

    font-size: 13px;

    text-align: center;
}


/* ==================== 管理后台：资源表单与预览 ==================== */

.admin-resource-layout {
    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 40px;

    align-items: start;

    margin-bottom: 44px;

    padding-bottom: 40px;

    border-bottom: 1px solid var(--border);
}

.admin-form-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 22px;
}

.admin-form-head h3,
.admin-resource-preview h3 {
    margin: 0;

    font-size: 17px;
}

.admin-field-hint {
    margin: 8px 0 0;

    color: var(--muted-2);

    font-size: 12px;

    line-height: 1.7;
}

.admin-form-check label {
    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--fg-soft);

    font-size: 13px;

    cursor: pointer;
}

.admin-form-check input {
    width: 16px;

    height: 16px;

    accent-color: var(--fg);
}

/* 卡片自定义按钮的两个输入框：恢复常规输入框尺寸（防止被上方复选框样式覆盖成 16×16） */
.admin-card-link-fields {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 10px;
}

.admin-card-link-fields input {
    width: 100%;

    height: 50px;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 14px 15px;

    font-family: inherit;

    font-size: 14px;

    color: var(--fg);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-card-link-fields input:focus {
    border-color: var(--fg);

    box-shadow:
        0 0 0 1px var(--fg);
}

.admin-card-link-fields input::placeholder {
    color: var(--muted-3);
}

.admin-form-actions {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 8px;
}

.admin-form-actions .submit-button {
    width: auto;

    flex: 1;
}

.admin-resource-preview h3 {
    margin-bottom: 22px;
}

.admin-resource-preview .vrc-res-card {
    padding: 22px 18px;

    background: var(--surface);

    border: 1px solid var(--border);
}

.admin-resource-preview .vrc-res-list {
    border-top: none;
}

.admin-resource-preview .vrc-views,
.admin-resource-preview .vrc-like-button,
.admin-resource-preview .vrc-res-link {
    pointer-events: none;
}

/* 预览里的蛋形图标用 span 承载，补上按钮同款描边 */

.admin-resource-preview .vrc-like-button svg path {
    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}

@media (max-width: 900px) {

    .admin-resource-layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }

}

@media (max-width: 700px) {

    .admin-tabs {
        overflow-x: auto;

        scrollbar-width: none;
    }

    .admin-tabs::-webkit-scrollbar {
        display: none;
    }

    .admin-tab {
        padding: 12px 14px;

        white-space: nowrap;
    }

    .admin-stat {
        padding: 14px 16px;
    }

    .admin-stat strong {
        font-size: 22px;
    }

}


/* ==================== 减少动效偏好 ==================== */
/*
 * 系统开启「减少动态效果」时只关掉大幅位移类动效：
 * 悬停的缩放/旋转、上浮位移、平滑滚动。
 *
 * 颜色渐变与蛋形按钮的点击反馈保留 —— 它们不属于
 * WCAG 2.3.3 所指的位移类动画，且是主题切换的必要视觉反馈。
 * （此前这里把所有 transition/animation 压到 0.01ms，
 *   导致开启该系统选项的设备上变色与切换动画全部消失。）
 */

@media (prefers-reduced-motion: reduce) {

    /* 加载动画降级：静态蛋、顶部条简化 */

    .egg-path,
    .yolk,
    .yolk-halo {
        animation: none !important;
    }

    .egg-loader-svg,
    .egg-loader-shadow {
        animation: none !important;
    }

    #topBar i {
        animation: none !important;

        transform: translateX(-40%);
    }

    /* 完成态那条 0.25s 的位移过渡同样属于「动」：上面把爬行动画关掉后，
       它会在收条时把滑块滑一段，reduce 下也应关掉 */
    #topBar.done i {
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }

    .vrc-like-button:hover svg,
    .back-top:hover {
        transform: none;
    }

}


/* ==================== 滚动条美化（全站） ==================== */

html {
    scrollbar-width: thin;

    scrollbar-color: var(--border) transparent;

    scrollbar-gutter: stable;
}

::-webkit-scrollbar {
    width: 8px;

    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);

    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted-3);
}

/* ==================== 本地视频上传 ==================== */

.local-upload {
    margin-top: 14px;
}

.local-auth-in {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;
}

.local-auth-user {
    font-size: 13px;

    color: var(--fg-soft);
}

.local-auth-input {
    flex: 1;

    min-width: 200px;

    height: 42px;

    border: 1px solid var(--border-soft);

    background: var(--surface);

    padding: 0 12px;

    font-family: inherit;

    font-size: 13px;

    color: var(--fg);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.local-auth-input:focus {
    border-color: var(--fg);

    box-shadow:
        0 0 0 1px var(--fg);
}

.local-terms {
    width: 100%;

    margin: 6px 0 0;

    font-size: 12px;

    line-height: 1.7;

    color: var(--muted-3);
}

.local-picker {
    margin-top: 12px;

    border: 2px dashed var(--border-soft);

    border-radius: 10px;

    padding: 44px 16px;

    text-align: center;

    cursor: pointer;

    color: var(--fg-soft);

    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}

.local-picker:hover,
.local-picker.dragover {
    border-color: var(--fg);

    color: var(--fg);
}

.local-picker svg {
    width: 30px;

    height: 30px;
}

.local-picker-text {
    margin: 10px 0 4px;

    font-size: 14px;
}

.local-picker-hint {
    margin: 0;

    font-size: 12px;

    color: var(--muted-3);
}

.local-progress {
    margin-top: 12px;
}

.local-progress-track {
    height: 10px;

    background: var(--surface);

    border: 1px solid var(--border-soft);

    border-radius: 6px;

    overflow: hidden;
}

.local-progress-bar {
    height: 100%;

    width: 0;

    background: var(--fg);

    transition: width 0.3s ease;
}

.local-progress-text {
    margin: 6px 0 0;

    font-size: 12px;

    color: var(--fg-soft);
}

/* 进度头部：左侧状态文字、右侧大百分比 */
.local-progress-head {
    display: flex;

    justify-content: space-between;

    align-items: baseline;

    margin-bottom: 6px;

    font-size: 12px;

    color: var(--fg-soft);
}

.local-progress-pct {
    font-variant-numeric: tabular-nums;

    font-weight: 600;

    font-size: 13px;

    color: var(--fg);
}

.local-progress-nums {
    font-variant-numeric: tabular-nums;
}

/* 上传完成操作：与全站按钮同语言（描边 + hover 反色） */
.local-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    margin-top: 26px;
}

.local-action-btn {
    height: 42px;

    padding: 0 28px;

    border: 1px solid var(--fg);

    background: transparent;

    color: var(--fg);

    font-family: inherit;

    font-size: 13px;

    letter-spacing: 0.02em;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.local-action-btn:hover {
    background: var(--fg);

    color: var(--on-accent);
}

.local-action-btn.primary {
    background: var(--fg);

    color: var(--on-accent);
}

.local-action-btn.primary:hover {
    opacity: 0.82;
}

.local-action-btn.danger {
    border-color: var(--danger);

    color: var(--danger);
}

.local-action-btn.danger:hover {
    background: var(--danger);

    border-color: var(--danger);

    color: var(--danger-fg);
}


/* ==================== 全站账号 ==================== */

.account-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    height: 40px;

    padding: 0 13px;

    background: transparent;

    border: none;

    border-radius: 8px;

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.account-btn:hover {
    color: var(--fg);

    background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.account-btn svg {
    width: 18px;

    height: 18px;
}

.account-btn-label {
    max-width: 120px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

/* 登录态顶栏仅头像：无底色方框（头像飞走后只剩一个空框很奇怪） */
.account-btn.is-avatar-only {
    height: 44px;

    padding: 0 2px;
}

.account-btn.is-avatar-only:hover,
.account-btn.is-avatar-only:focus {
    background: transparent;
}

/* 顶栏头像放大一档：仅头像模式下它是顶栏唯一的身份标识 */
.account-btn.is-avatar-only .up-avatar {
    width: 44px;

    height: 44px;
}

.account-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, 0.55);

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);
}

html.glass-off .account-modal {
    -webkit-backdrop-filter: none;

    backdrop-filter: none;
}

.account-modal[hidden] {
    display: none;
}

/* BewlyCat 玻璃面板配方：弹窗整体随玻璃开关在毛玻璃/实色间切换 */
.account-modal-box {
    position: relative;

    width: min(92vw, 380px);

    background: var(--up-glass-bg);

    border: 1px solid var(--up-glass-border);

    border-radius: 16px;

    padding: 26px 24px 20px;

    box-shadow: var(--edge-glow), var(--shadow-3);

    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

html.glass-off .account-modal-box {
    -webkit-backdrop-filter: none;

    backdrop-filter: none;
}

.account-modal-box h3 {
    margin: 0 0 16px;

    font-size: 17px;

    color: var(--fg);
}

.account-modal-close {
    position: absolute;

    top: 10px;

    right: 12px;

    background: none;

    border: none;

    font-size: 20px;

    color: var(--muted-3);

    cursor: pointer;

    line-height: 1;
}

.account-modal-close:hover {
    color: var(--fg);
}

.account-modal-fields {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.account-modal-fields input {
    width: 100%;

    height: 46px;

    border: 1px solid var(--up-glass-border);

    border-radius: 10px;

    background: var(--up-glass-bg);

    padding: 0 13px;

    font-family: inherit;

    font-size: 14px;

    color: var(--fg);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.account-modal-fields input:hover {
    border-color: color-mix(in srgb, var(--like-fg) 45%, var(--up-glass-border));
}

.account-modal-fields input:focus {
    border-color: var(--like-fg);

    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--like-fg) 18%, transparent);
}

.account-modal-actions {
    display: flex;

    gap: 10px;
}

.account-modal-actions .button {
    flex: 1;
}

/* 弹窗内按钮统一胶囊形：主键实填充，次键玻璃描边 */
.account-modal .button {
    border-radius: 999px;
}

.account-modal .button.secondary {
    border-color: var(--up-glass-border);
}

.account-modal-user {
    margin: 0 0 14px;

    font-size: 14px;

    color: var(--fg-soft);
}

.account-modal-note {
    margin: 14px 0 0;

    font-size: 12px;

    line-height: 1.7;

    color: var(--muted-3);
}

.account-modal-note.account-modal-error {
    color: #e07070;
}


/* 账号弹窗：登录/注册 tab 与验证码行 */

.account-modal-tabs {
    display: flex;

    gap: 6px;

    margin-bottom: 14px;
}

.account-tab {
    flex: 1;

    height: 36px;

    background: transparent;

    border: 1px solid var(--up-glass-border);

    border-radius: 999px;

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.account-tab.active {
    color: var(--fg);

    border-color: transparent;

    background: color-mix(in srgb, var(--fg) 10%, transparent);
}

.account-code-row {
    display: flex;

    gap: 10px;
}

.account-code-row input {
    flex: 1;

    min-width: 0;
}

.account-code-row .button {
    flex-shrink: 0;

    white-space: nowrap;

    font-size: 13px;
}

/* 人机验证挂载点：预留 Turnstile 标准高度（300×65），
   弹窗渲染时即占位，避免小部件加载后弹窗被撑高跳动 */
.account-ts-wrap {
    min-height: 65px;
}

.account-ts-wrap:empty {
    display: none;
}


/* 注册协议勾选行 */

.account-agree {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 12px;

    line-height: 1.6;

    color: var(--fg-soft);

    cursor: pointer;
}

.account-agree input {
    width: 14px;

    height: 14px;

    margin: 2px 0 0;

    accent-color: var(--fg);

    flex-shrink: 0;

    cursor: pointer;
}

.account-agree a {
    color: var(--fg-soft);

    text-decoration: underline;
}

.account-agree a:hover {
    color: var(--fg);
}


/* ==================== 用户菜单（账号下拉） ==================== */

.account-menu {
    position: fixed;

    z-index: 10000;

    min-width: 120px;

    background: var(--surface);

    border: 1px solid var(--border-soft);

    border-radius: 10px;

    box-shadow: var(--shadow);

    padding: 6px;

    transform-origin: top right;

    animation: menuDropIn 0.16s ease;
}

.account-menu-head {
    padding: 10px 12px;

    border-bottom: 1px solid var(--border-soft);

    margin-bottom: 6px;

    text-align: right;
}

.account-menu-name {
    font-size: 14px;

    font-weight: 600;

    color: var(--fg);
}

.account-menu-item {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    width: 100%;

    height: 40px;

    padding: 0 12px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 13px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

/* 与顶栏账号按钮同款：悬停浅灰底 */
.account-menu-item:hover {
    background: color-mix(in srgb, var(--fg) 8%, transparent);

    color: var(--fg);
}



/* ==================== 顶栏功能件（已统一到共享 nav.css） ====================
   「更多」⋯ 下拉与 .nav-more-* / .anim-demo / @keyframes navDropIn 一并删除：
   入口 #animDemo 已下线，亮暗切换换成首页同款 .egg-btn、中英切换改由 nav.css 的
   .nav .lang-toggle 供样式，都在 nav.css 里。@keyframes menuDropIn 是账号菜单在用，留着。 */


@keyframes menuDropIn {
    from {
        opacity: 0;

        transform: scaleY(0.55);
    }

    to {
        opacity: 1;

        transform: scaleY(1);
    }
}

/* ==================== 账号菜单：蛋壳余额与签到态 ==================== */

.account-menu-balance {
    display: inline-block;

    margin-left: 10px;

    font-size: 12px;

    color: var(--muted-2);
}

.account-menu-item.done,
.account-menu-item:disabled {
    color: var(--muted-3);

    cursor: default;
}

.account-menu-item.done:hover,
.account-menu-item:disabled:hover {
    background: transparent;
}

/* ==================================================
   顶栏用户面板（结构对标 BewlyCat 的 UserPanelPop.vue）

   设计 token 直接复用全站既有变量，不新增调色板：
     --surface  ≈ $bew-elevated     面板底
     --border   ≈ $bew-border-color 描边
     --shadow   ≈ $bew-shadow-3     投影
     --bg-2     ≈ $bew-fill-1       菜单项 hover
     --muted-2/3 ≈ $bew-text-2/3    次级文字
     --like-fg  ≈ $bew-theme-color  强调色
     --danger   ≈ $bew-error-color  红色登出
   容器规格对齐源码：宽 300px、max-height calc(100vh - 120px)、可滚动。
   ================================================== */

.up-panel {
    width: 300px;

    max-height: calc(100vh - 120px);

    overflow-y: auto;

    padding: 0 0 6px;
}

/* 1 头部：头像 + 昵称 + LV 徽章 */

.up-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 11px;

    padding: 16px 16px 12px;
}

/* 面板头部头像（右侧）：比顶栏那枚大一圈，对齐 bilibili/BewlyCat 的面板头 */
.up-head .up-avatar {
    width: 52px;

    height: 52px;
}

.up-avatar {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    flex: none;

    overflow: hidden;

    border-radius: 50%;

    background: var(--bg-2);

    border: 1px solid var(--border-soft);
}

.up-avatar img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.up-avatar-svg {
    width: 100%;

    height: 100%;

    display: block;

    /* 首字符头像自带 64×64 满幅圆底，不再需要 scale(1.28) 那种硬撑 */
}

.up-head-text {
    min-width: 0;
}

.up-name {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 17px;

    font-weight: 600;

    color: var(--fg);

    line-height: 1.3;
}

.up-name > :first-child {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.up-role,
.up-lv {
    flex: none;

    display: inline-flex;

    align-items: center;

    height: 18px;

    padding: 0 6px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.02em;
}

.up-role {
    background: var(--status-warn-bg);

    color: var(--status-warn);
}

.up-lv {
    background: var(--like-bg);

    color: var(--like-fg);

    border: 1px solid var(--like-border);
}

.up-sub {
    margin-top: 3px;

    font-size: 11px;

    color: var(--muted-3);
}

/* 2 余额胶囊行 */

.up-pills {
    display: flex;

    gap: 6px;

    padding: 0 16px 12px;
}

.up-pill {
    display: inline-flex;

    align-items: center;

    height: 26px;

    padding: 0 10px;

    border-radius: 999px;

    border: 1px solid var(--border-soft);

    background: transparent;

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 11px;

    white-space: nowrap;

    cursor: default;
}

.up-pill-muted {
    color: var(--muted-3);
}

.up-pill-act {
    cursor: pointer;

    color: var(--like-fg);

    border-color: var(--like-border);

    background: var(--like-bg);

    transition: filter 0.2s ease;
}

.up-pill-act:hover {
    filter: brightness(1.06);
}

.up-pill-done {
    color: var(--muted-3);

    cursor: default;
}

/* 3 经验进度卡（对应源码的等级进度条卡片） */

.up-level-card {
    display: block;

    width: calc(100% - 24px);

    margin: 0 12px 12px;

    padding: 11px 12px;

    text-align: left;

    background: var(--bg-2);

    border: 1px solid var(--border-soft);

    border-radius: 10px;

    font-family: inherit;

    cursor: pointer;

    transition: border-color 0.2s ease;
}

.up-level-card:hover {
    border-color: var(--like-border);
}

.up-level-head {
    display: flex;

    align-items: center;

    gap: 8px;
}

.up-level-badge {
    flex: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.02em;
}

.up-level-badge-cur {
    color: var(--like-fg);
}

.up-level-badge-next {
    color: var(--muted-3);
}

.up-level-track {
    position: relative;

    flex: 1;

    height: 3px;

    border-radius: 999px;

    background: var(--border-soft);

    overflow: hidden;
}

.up-level-fill {
    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    border-radius: 999px;

    background: var(--like-fg);
}

.up-level-desc {
    margin-top: 8px;

    font-size: 11px;

    color: var(--muted-2);
}

/* 循环轮次 + 累计总经验，压在进度条上方 */
.up-level-round {
    margin-top: 6px;

    font-size: 10px;

    color: var(--muted-2);

    opacity: 0.85;
}

.up-level-skeleton {
    height: 42px;

    border-radius: 10px;

    background: var(--bg-2);

    opacity: 0.6;
}

/* 4 三列数据格（对应源码的 following / followers / posts） */

.up-stats {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    padding: 2px 12px 4px;
}

.up-stat {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 4px 2px;
}

.up-stat + .up-stat::before {
    content: "";

    position: absolute;

    left: 0;

    top: 9px;

    bottom: 9px;

    width: 1px;

    background: var(--border);
}

.up-stat-num {
    font-size: 17px;

    font-weight: 600;

    color: var(--fg);

    line-height: 1.2;
}

.up-stat-label {
    margin-top: 2px;

    font-size: 11px;

    color: var(--muted-2);
}

/* 5 分组菜单：图标 + 文字 + 右箭头（对应源码的 ALink 结构） */

.up-sep {
    height: 1px;

    margin: 8px 12px;

    background: var(--border);
}

.up-group {
    padding: 0 6px;
}

.up-item {
    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;

    padding: 8px 10px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 13px;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition: background-color 0.2s ease, color 0.2s ease;
}

.up-item:hover {
    background: var(--bg-2);

    color: var(--fg);
}

.up-item:focus-visible {
    outline: 2px solid var(--like-fg);

    outline-offset: -2px;
}

.up-item-icon {
    display: inline-flex;

    width: 17px;

    height: 17px;

    flex: none;

    color: var(--muted-2);
}

.up-item-icon svg {
    width: 100%;

    height: 100%;
}

.up-item-label {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.up-item-arrow {
    width: 14px;

    height: 14px;

    flex: none;

    color: var(--muted-3);
}

/* 6 红色登出 */

.up-logout {
    color: var(--danger);

    margin: 0 6px;
}

.up-logout .up-item-icon {
    color: var(--danger);
}

.up-logout:hover {
    background: var(--bg-2);

    color: var(--danger);
}

/* 瞬时错误提示：只在「已登录但这次拉取失败」时出现，不清空界面 */
.up-error {
    margin: 8px 12px 0;

    padding: 7px 10px;

    border-radius: 8px;

    background: var(--status-warn-bg);

    color: var(--status-warn);

    font-size: 11px;
}

/* 经验明细弹层 */

.up-lv-total {
    margin: 0 0 10px;

    font-size: 13px;

    color: var(--muted-2);
}

.up-lv-list {
    list-style: none;

    margin: 0;

    padding: 0;
}

.up-lv-row {
    display: flex;

    align-items: baseline;

    gap: 8px;

    padding: 7px 0;

    border-bottom: 1px solid var(--border-soft);
}

.up-lv-row:last-child {
    border-bottom: none;
}

.up-lv-name {
    flex: 1;

    min-width: 0;

    font-size: 13px;

    color: var(--fg-soft);
}

.up-lv-count {
    font-size: 11px;

    color: var(--muted-3);
}

.up-lv-val {
    min-width: 52px;

    text-align: right;

    font-size: 13px;

    font-weight: 600;

    color: var(--like-fg);
}

.up-lv-empty {
    margin: 0;

    font-size: 13px;

    color: var(--muted-3);
}

/* ==================================================
   登录 / 注册弹窗：字段级错误、密码强度、记住我
   ================================================== */

body.am-open {
    overflow: hidden;
}

.am-field {
    position: relative;
}

.am-error {
    display: block;

    min-height: 0;

    margin-top: 0;

    font-size: 11px;

    line-height: 1.5;

    color: var(--danger);

    transition: margin-top 0.15s ease;
}

.am-error:not(:empty) {
    margin-top: 5px;
}

/* 错误态：字段描边变红（不是只靠下方一行红字） */
.account-modal-fields input.am-bad {
    border-color: var(--danger);

    background: var(--status-warn-bg);
}

.am-remember {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;

    color: var(--muted-2);

    cursor: pointer;
}

.am-remember input {
    width: auto;

    height: auto;

    margin: 0;
}

.am-strength {
    margin: -4px 0 2px;
}

.am-strength-bar {
    display: flex;

    gap: 3px;
}

.am-strength-bar i {
    flex: 1;

    height: 3px;

    border-radius: 999px;

    background: var(--border-soft);

    transition: background-color 0.2s ease;
}

.am-strength[data-score="1"] .am-strength-bar i:nth-child(-n+1),
.am-strength[data-score="2"] .am-strength-bar i:nth-child(-n+2) {
    background: var(--danger);
}

.am-strength[data-score="3"] .am-strength-bar i:nth-child(-n+3) {
    background: var(--status-warn);
}

.am-strength[data-score="4"] .am-strength-bar i:nth-child(-n+4) {
    background: var(--status-ok);
}

.am-strength-text {
    display: block;

    margin-top: 4px;

    font-size: 11px;

    color: var(--muted-3);
}

.am-links {
    margin-top: 12px;

    text-align: center;
}

.am-link {
    border: none;

    background: transparent;

    padding: 0;

    font-family: inherit;

    font-size: 12px;

    color: var(--muted-2);

    cursor: pointer;
}

.am-link:hover {
    color: var(--like-fg);
    text-decoration: underline;
}

.am-sheet-body {
    max-height: min(52vh, 420px);

    overflow-y: auto;
}

/* 蛋壳管理：兑换码生成行与配置行 */
.eggshell-codes-form,
.eggshell-config-form {
    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 12px;

    margin: 14px 0;
}

.eggshell-codes-form label,
.eggshell-config-form label {
    display: flex;

    flex-direction: column;

    gap: 6px;

    font-size: 12px;

    color: var(--muted-2);
}

.eggshell-codes-form input,
.eggshell-config-form input {
    height: 38px;

    padding: 0 10px;

    border: 1px solid var(--border);

    background: transparent;

    color: var(--fg);

    font-family: inherit;

    font-size: 13px;
}

/* 本地视频上传：计费说明行 */
.local-billing {
    font-size: 12px;

    color: var(--muted-2);

    margin: 0 0 8px;
}

.local-billing strong {
    color: var(--fg);
}

.local-billing a {
    color: var(--fg);

    text-decoration: underline;

    text-underline-offset: 2px;
}

/* ==================== BewlyCat 视觉体系（用户面板 / dock / 玻璃模式） ==================== */

/* 玻璃模式关：玻璃变量组整体换 solid（一组 class 切换，不改组件） */
html.glass-off {
    --glass-blur: 0px;
    --glass-sat: 100%;
    --up-glass-bg: var(--surface);
    --up-glass-border: var(--border-soft);
}

/* 用户面板：毛玻璃容器 + edge-glow + 滑落动效 + 删横向滚动 */
#userPanel.account-menu.up-panel {
    border-radius: 16px;

    background: var(--up-glass-bg);

    border: 1px solid var(--up-glass-border);

    box-shadow: var(--edge-glow), var(--shadow-3);

    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    overflow-x: hidden;

    animation: up-slide-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes up-slide-in {
    from { opacity: 0; margin-top: -10px; }
    to { opacity: 1; margin-top: 0; }
}

/* 面板离场：滑出动画结束后才真正 hidden（避免「突然消失」）。
   注意带 #id：否则会被基础规则 #userPanel.account-menu.up-panel 的
   ID 选择器（1,2,0）压住，动画从未生效（实测踩过） */
@keyframes up-leave {
    from { opacity: 1; margin-top: 0; }
    to { opacity: 0; margin-top: -10px; }
}

#userPanel.account-menu.up-panel.up-leave {
    animation: up-leave 0.2s ease forwards;
    pointer-events: none;
}

html.glass-off #userPanel.account-menu.up-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 顶栏头像 hover / 面板打开：放大滑落覆盖面板顶部（BewlyCat 式）。
   放大态由 body 层的克隆 .up-avatar-fly（user-panel.js 生成）承担——
   .nav 是 z-index 100 的层叠上下文，原地放大必被 z 10000 的面板盖住。
   隐藏类必须是通用的：顶栏头像与面板头部头像共用（只挂 .account-btn 会
   漏掉面板那枚，出现"两个头像"叠加）。 */
.up-avatar.up-avatar-hidden {
    visibility: hidden;
}

.up-avatar-fly {
    position: fixed;

    z-index: 10005;

    pointer-events: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--bg-2);

    border: 1px solid var(--border-soft);

    transform-origin: center center;

    transition:
        transform 0.25s var(--ease-standard),
        box-shadow 0.25s ease;

    box-shadow: var(--shadow);
}

/* 落点由 user-panel.js 按面板头像槽位的实际位置计算（--fly-dx/dy/scale），
   最终与面板头部头像严丝合缝重合 */
.up-avatar-fly.is-fly {
    transform:
        translate(var(--fly-dx, 0px), var(--fly-dy, 14px))
        scale(var(--fly-scale, 1.9));

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28),
        var(--edge-glow);
}

.up-avatar-fly img,
.up-avatar-fly .up-avatar-svg {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

/* 行 hover：fill 填充 + 圆角（对齐 BewlyCat 菜单行） */
.up-item {
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.up-item:hover { background: rgba(131, 131, 145, 0.15); }

/* ==================== corner dock BewlyCat 化（user / help） ==================== */

/* 药丸 launcher：毛玻璃 + edge-glow；hover 放大、按压收缩 */
.eggs-dock[data-mount="corner"] .eggs-dock-launcher {
    border-radius: 999px;

    background: var(--up-glass-bg);

    border: 1px solid var(--up-glass-border);

    box-shadow: var(--edge-glow), var(--shadow-2);

    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.eggs-dock[data-mount="corner"] .eggs-dock-launcher:hover { transform: scale(1.08); }

.eggs-dock[data-mount="corner"] .eggs-dock-launcher:active { transform: scale(0.92); }

/* 贴边自动隐藏（eggs-dock.js 切换 edge-hidden）：只隐 launcher，面板打开时不隐 */
.eggs-dock[data-mount="corner"].edge-hidden .eggs-dock-launcher {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
}

/* ==================== BewlyCat 共享控件（账号中心 / 表单页通用） ==================== */

/* 标签与辅助文字 */
.acct-label {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;

    color: var(--muted-2);
}

.acct-note {
    font-size: 12px;

    color: var(--muted-3);
}

/* 输入框：玻璃底 + 主色聚焦环（glass-off 时经 token 重指自动回退实色） */
.acct-input {
    width: 100%;

    height: 42px;

    padding: 0 13px;

    border: 1px solid var(--up-glass-border);

    border-radius: 10px;

    background: var(--up-glass-bg);

    color: var(--fg);

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.acct-input:hover {
    border-color: color-mix(in srgb, var(--like-fg) 45%, var(--up-glass-border));
}

.acct-input:focus {
    border-color: var(--like-fg);

    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--like-fg) 18%, transparent);
}

.acct-input:disabled {
    opacity: 0.55;

    cursor: default;
}

/* 提示消息：成功 / 失败两态 */
.acct-msg {
    min-height: 18px;

    margin: 12px 0 0;

    font-size: 13px;

    color: var(--muted-2);
}

.acct-msg.ok {
    color: var(--status-ok);
}

.acct-msg.bad {
    color: var(--danger);
}

/* 表单布局骨架 */
.acct-grid {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.acct-row {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}

.acct-field {
    min-width: 0;
}

/* 按钮：胶囊三态（ghost / primary / danger） */
.acct-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 40px;

    padding: 0 20px;

    border: 1px solid var(--up-glass-border);

    border-radius: 999px;

    background: var(--up-glass-bg);

    color: var(--fg-soft);

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    transition:
        transform 0.2s var(--ease-standard),
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        filter 0.2s ease;
}

.acct-btn:hover {
    color: var(--fg);

    border-color: color-mix(in srgb, var(--fg) 30%, transparent);

    transform: translateY(-1px);

    box-shadow: var(--shadow-2);
}

.acct-btn:active {
    transform: scale(0.97);
}

.acct-btn:disabled {
    opacity: 0.5;

    cursor: default;

    transform: none;

    box-shadow: none;
}

/* 列表行内的小号按钮 */
.acct-btn-sm {
    height: 34px;

    padding: 0 14px;

    font-size: 12px;
}

.acct-btn-primary {
    background: var(--fg);

    color: var(--on-accent);

    border-color: transparent;
}

.acct-btn-primary:hover {
    color: var(--on-accent);

    filter: brightness(1.08);

    border-color: transparent;
}

.acct-btn-danger {
    background: transparent;

    color: var(--danger);

    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.acct-btn-danger:hover {
    background: var(--danger);

    color: var(--danger-fg);

    border-color: transparent;

    box-shadow: none;
}

/* 头像行 */
.acct-avatar-row {
    display: flex;

    align-items: center;

    gap: 18px;
}

.acct-avatar-big {
    width: 76px;

    height: 76px;

    flex: none;

    border-radius: 50%;

    overflow: hidden;

    border: 1px solid var(--up-glass-border);

    background: var(--bg-2);
}

.acct-avatar-big img,
.acct-avatar-big svg {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

/* 内层默认蛋壳 span（.up-avatar 固定 40px）在大头像里要撑满 */
.acct-avatar-big .up-avatar,
.prof-avatar .up-avatar {
    width: 100%;

    height: 100%;

    border: none;

    background: transparent;
}

/* 等级卡片 */
.acct-level-card {
    padding: 18px;

    border: 1px solid var(--up-glass-border);

    border-radius: 14px;

    background: var(--up-glass-bg);
}

.acct-level-top {
    display: flex;

    align-items: baseline;

    gap: 10px;

    margin-bottom: 12px;
}

.acct-level-badge {
    font-size: 20px;

    font-weight: 700;

    color: var(--like-fg);
}

.acct-level-exp {
    font-size: 13px;

    color: var(--muted-2);
}

/* 循环等级：本轮进度描述。exp 是本轮内经验，head 里的累计总经验不随重置清零 */
.acct-level-desc {
    margin-top: 4px;

    font-size: 12px;

    color: var(--muted-2);
}

.acct-level-track {
    position: relative;

    height: 5px;

    border-radius: 999px;

    background: var(--up-glass-border);

    overflow: hidden;
}

.acct-level-fill {
    position: absolute;

    inset: 0 auto 0 0;

    border-radius: 999px;

    background: var(--like-fg);

    transition: width 0.4s var(--ease-standard);
}

.acct-level-list {
    list-style: none;

    margin: 16px 0 0;

    padding: 0;

    display: flex;

    flex-direction: column;
}

.acct-level-item {
    display: flex;

    align-items: baseline;

    gap: 10px;

    padding: 8px 0;

    border-top: 1px solid var(--up-glass-border);

    font-size: 13px;
}

.acct-level-item-name {
    flex: 1;

    color: var(--fg-soft);
}

.acct-level-item-count {
    color: var(--muted-3);

    font-size: 12px;
}

.acct-level-item-val {
    min-width: 56px;

    text-align: right;

    font-weight: 600;

    color: var(--like-fg);
}

/* 会话（登录设备）列表 */
.acct-sessions {
    list-style: none;

    margin: 0;

    padding: 0;
}

.acct-session {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 0;

    border-top: 1px solid var(--up-glass-border);
}

.acct-session:first-child {
    border-top: none;
}

.acct-session-text {
    flex: 1;

    min-width: 0;
}

.acct-session-device {
    font-size: 14px;

    color: var(--fg);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.acct-session-meta {
    margin-top: 3px;

    font-size: 12px;

    color: var(--muted-3);
}

.acct-badge-now {
    flex: none;

    padding: 2px 8px;

    border-radius: 999px;

    background: var(--status-ok-bg);

    color: var(--status-ok);

    font-size: 11px;
}

/* 注销账号红区：与其它分区一致的卡片化 */
.acct-danger {
    margin-top: 22px;

    padding: 24px;

    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--up-glass-border));

    border-radius: 16px;

    background: var(--up-glass-bg);

    box-shadow: var(--edge-glow), var(--shadow-2);
}

.acct-danger h2 {
    margin: 0 0 6px;

    font-size: 20px;

    color: var(--danger);
}

.acct-danger-gate {
    margin-top: 16px;

    padding: 16px;

    border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);

    border-radius: 14px;

    background: color-mix(in srgb, var(--danger) 6%, transparent);
}

.acct-danger-gate[hidden] {
    display: none;
}

.acct-check {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: var(--fg-soft);

    margin-bottom: 12px;
}

.acct-check input {
    width: auto;

    height: auto;

    margin: 0;

    accent-color: var(--danger);
}

/* 外观区滑杆：原生控件 + 主题色 accent */
.acct-glass-ctrl input[type="range"] {
    width: 160px;

    accent-color: var(--like-fg);
}

/* 分段选择（主题 / 语言）：胶囊容器 + 实色滑块 */
.acct-seg {
    display: inline-flex;

    gap: 2px;

    padding: 3px;

    border: 1px solid var(--up-glass-border);

    border-radius: 999px;

    background: var(--up-glass-bg);
}

.acct-seg-btn {
    height: 30px;

    padding: 0 14px;

    border: none;

    border-radius: 999px;

    background: transparent;

    color: var(--muted-2);

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.acct-seg-btn:hover {
    color: var(--fg);
}

.acct-seg-btn.active {
    background: var(--fg);

    color: var(--on-accent);
}

/* 禁用态必须看得出来：自选歌单的「播放遍数」会因超展开上限而禁用某些档，
 * 没有这层样式的话被禁用的按钮和可用的长得一模一样，点了没反应也没提示。
 * 其他 acct-seg 分组的按钮本来就不会被禁用，所以这条是安全的全局规则。
 * .active:disabled 单独再写一遍：上面的 .active 是后写的同权重规则，
 * 不覆盖的话已选中的那档禁用时会保留实心底色，看起来仍像可点。 */
.acct-seg-btn:disabled {
    background: transparent;

    color: var(--muted-3);

    cursor: not-allowed;

    opacity: 0.4;
}

.acct-seg-btn.active:disabled {
    background: transparent;

    color: var(--muted-3);

    opacity: 0.4;
}

/* ==================== 减弱动效（账号中心 → 外观） ====================
 * 一组 class 全站熄灭 CSS 动画/过渡；eggs-motion / eggs-companion 的
 * JS 动效与萌宠引擎也会读取这个 class（见各自文件的 reduce 判定）。 */
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
}

/* ==================== 移动端 / 触屏降档 ====================
 * 一屏十几张 blur(20px)+saturate(180%) 的玻璃卡片会把移动端 GPU 打满，
 * 表现成"页面一直在加载/白屏"（iOS WebKit 尤甚）。触屏设备关掉所有
 * 卡片级 backdrop 模糊——半透明底色保留（零成本），只留顶栏单元素模糊。 */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
    :root {
        --glass-blur: 10px;
    }

    .feature-bili .bili-seg,
    .feature-download .download-card,
    .feature-vrchat .vrc-res-card,
    .eggs-dock-menu,
    .dl-modal-overlay .dl-modal,
    #userPanel.account-menu.up-panel,
    .account-modal-box,
    .eggs-dock[data-mount="corner"] .eggs-dock-launcher,
    .acct-nav,
    .acct-chips,
    .acct-modal,
    .help-card,
    .nf-card,
    .doc {
        -webkit-backdrop-filter: none !important;

        backdrop-filter: none !important;
    }
}

/* ==================== 背景图片层（FreeggAppearance 管理） ====================
 * body 的负 z-index 子元素会画在 body 背景之上、常规内容之下——
 * 正好夹在"页面底色"和"玻璃卡片"之间。 */
#freeggBgLayer {
    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;
}

/* ==================== Turnstile 组件异常态（登录弹窗） ==================== */
.am-ts-error {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 8px 12px;

    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);

    border-radius: 10px;

    font-size: 12px;

    color: var(--muted-2);
}

/* ==================== Dock 快速设置面板 ==================== */
.qs-panel {
    position: fixed;

    z-index: 9600;

    width: 280px;

    max-height: min(72vh, 560px);

    overflow-y: auto;

    border-radius: 16px;

    background: var(--up-glass-bg);

    border: 1px solid var(--up-glass-border);

    box-shadow: var(--edge-glow), var(--shadow-3);

    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    padding: 14px;

    animation: up-slide-in 0.25s var(--ease-standard);
}

html.glass-off .qs-panel {
    -webkit-backdrop-filter: none;

    backdrop-filter: none;
}

.qs-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin: 0 0 10px;

    font-size: 14px;

    font-weight: 600;

    color: var(--fg);
}

.qs-close {
    border: none;

    background: none;

    color: var(--muted-3);

    font-size: 16px;

    line-height: 1;

    cursor: pointer;

    padding: 2px 4px;
}

.qs-group {
    padding: 10px 0;

    border-top: 1px solid var(--up-glass-border);
}

.qs-group:first-of-type {
    border-top: none;
}

.qs-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 6px 0;

    font-size: 13px;

    color: var(--fg-soft);
}

.qs-row-title {
    flex: 1;
}

/* 复用账号中心的开关/分段/滑杆视觉 */
.qs-panel .acct-switch {
    display: inline-block;

    vertical-align: middle;

    position: relative;

    width: 40px;

    height: 22px;

    flex: none;
}

.qs-panel .acct-switch input {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: pointer;
}

.qs-panel .acct-switch i {
    position: absolute;

    inset: 0;

    border-radius: 999px;

    background: var(--up-glass-border);

    border: 1px solid var(--up-glass-border);

    pointer-events: none;

    transition: background-color 0.2s ease;
}

.qs-panel .acct-switch i::after {
    content: '';

    position: absolute;

    top: 2px;

    left: 2px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--muted-2);

    transition: transform 0.2s ease, background-color 0.2s ease;
}

.qs-panel .acct-switch input:checked + i {
    background: var(--like-fg);

    border-color: var(--like-fg);
}

.qs-panel .acct-switch input:checked + i::after {
    transform: translateX(18px);

    background: #fff;
}

.qs-panel .acct-seg {
    display: inline-flex;

    gap: 2px;

    padding: 2px;

    border: 1px solid var(--up-glass-border);

    border-radius: 999px;

    background: var(--up-glass-bg);
}

.qs-panel .acct-seg-btn {
    height: 26px;

    padding: 0 10px;

    border: none;

    border-radius: 999px;

    background: transparent;

    color: var(--muted-2);

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;
}

.qs-panel .acct-seg-btn.active {
    background: var(--fg);

    color: var(--on-accent);
}

.qs-panel .acct-glass-ctrl input[type="range"] {
    width: 110px;

    accent-color: var(--like-fg);
}

/* 主题色色板 */
.qs-swatches {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}

.qs-swatch {
    width: 22px;

    height: 22px;

    border-radius: 50%;

    border: 2px solid transparent;

    cursor: pointer;

    padding: 0;

    flex: none;
}

.qs-swatch.active {
    border-color: var(--fg);
}

.qs-swatch-custom {
    width: 22px;

    height: 22px;

    padding: 0;

    border: 1px dashed var(--muted-3);

    border-radius: 50%;

    background: none;

    cursor: pointer;
}

/* 背景图内置壁纸小卡 */
.qs-bg-chips {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 6px;

    margin-top: 8px;
}

.qs-bg-chip {
    height: 34px;

    border-radius: 8px;

    border: 2px solid transparent;

    cursor: pointer;

    padding: 0;
}

.qs-bg-chip.active {
    border-color: var(--fg);
}

.qs-url-row {
    display: flex;

    gap: 6px;

    margin-top: 8px;
}

.qs-url-row input {
    flex: 1;

    min-width: 0;

    height: 32px;

    padding: 0 10px;

    border: 1px solid var(--up-glass-border);

    border-radius: 8px;

    background: var(--up-glass-bg);

    color: var(--fg);

    font-size: 12px;

    outline: none;
}

.qs-url-row .acct-btn {
    height: 32px;

    padding: 0 12px;

    font-size: 11px;
}

/* display 会压过 hidden 属性，补回隐藏语义 */
.qs-bg-chips[hidden],
.qs-url-row[hidden] {
    display: none;
}

/* Dock 位置左置：热区/滑出方向/回顶轨位全部镜像 */
html.dock-left .eggs-dock[data-mount="corner"] {
    right: auto;

    left: var(--dock-left, 14px);
}

html.dock-left .eggs-dock[data-mount="corner"].edge-hidden .eggs-dock-launcher {
    transform: translateX(calc(-100% - 24px));
}

html.dock-left #backTop.back-top {
    right: auto;

    left: var(--dock-left-rail, 14px);
}

/* Dock 尺寸自适应：随视口高度收缩，不再过小/过大 */
@media (min-width: 701px) {
    .eggs-dock[data-mount="corner"] .eggs-dock-launcher {
        width: clamp(56px, 8vh, 68px);

        height: clamp(56px, 8vh, 68px);
    }

    .eggs-dock[data-mount="corner"] .eggs-dock-menu {
        min-width: clamp(160px, 16vw, 190px);
    }
}

/* ==================== 手机端 ==================== */
/* Dock（含退化版 CSS 蛋）整体隐藏：签到/语言/外观经顶栏头像面板与账号中心可达 */
@media (max-width: 700px) {
    .eggs-dock {
        display: none !important;
    }

    /* 外观设置里与手机端无关的项（Dock 侧边栏） */
    .qs-dockgroup {
        display: none !important;
    }
}

/* 快速设置/账号外观的 BewlyCat 式分组标题 */
.qs-grouptitle {
    margin: 10px 0 2px;

    font-size: 11px;

    letter-spacing: 0.08em;

    color: var(--muted-3);
}

.qs-grouptitle:first-child {
    margin-top: 0;
}

/* ==================== 音乐歌单转链接（feature-music） ==================== */
/* 复用玻璃体系 token 与 acct-* 控件；仅新增板块专属布局 */

.feature-music .music-card {
    margin-top: 18px;

    padding: 24px;

    border: 1px solid var(--up-glass-border);

    border-radius: 16px;

    background: var(--up-glass-bg);

    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

    box-shadow: var(--shadow-2);
}

.feature-music [hidden] {
    display: none !important;
}

.feature-music .music-loading {
    padding: 26px 0;

    text-align: center;

    color: var(--muted-2);

    font-size: 14px;
}

/* 未登录引导 */
.feature-music .music-login-hint {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    padding: 26px 10px;

    text-align: center;

    color: var(--muted-2);
}

.feature-music .music-login-hint svg {
    font-size: 44px;

    color: var(--egg-gold, var(--like-fg));
}

/* 扫码卡片 */
.feature-music .music-qr-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    max-width: 460px;
}

.feature-music .music-qr-frame {
    position: relative;

    width: 208px;

    height: 208px;

    padding: 10px;

    border: 1px solid var(--up-glass-border);

    border-radius: 14px;

    background: #fff;

    box-shadow: var(--shadow-2);
}

.feature-music .music-qr-img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 8px;
}

.feature-music .music-qr-state {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 16px;

    text-align: center;

    color: var(--muted-2);

    font-size: 13px;
}

.feature-music .music-qr-tip {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--fg);

    font-size: 15px;
}

.feature-music .music-qr-tip svg {
    font-size: 18px;

    color: var(--like-fg);
}

.feature-music .music-safety {
    margin: 4px 0 0;

    padding: 0 0 0 18px;

    color: var(--muted-2);

    font-size: 12.5px;

    line-height: 1.7;
}

/* 绑定账号行 */
.feature-music .music-account {
    display: flex;

    align-items: center;

    gap: 14px;
}

.feature-music .music-avatar {
    width: 52px;

    height: 52px;

    border-radius: 50%;

    object-fit: cover;

    border: 1px solid var(--up-glass-border);
}

.feature-music .music-account-text {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;

    flex: 1;
}

.feature-music .music-account-text strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.feature-music .music-vip-badge {
    flex: none;

    padding: 2px 8px;

    border-radius: 999px;

    background: linear-gradient(135deg, #e8b04b, #d4881e);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;
}

.feature-music .music-account-actions {
    display: flex;

    gap: 10px;

    flex: none;
}

/* 卫戍协议入口（features/garrison.js）：限时开放徽标 + 操作区 */

.feature-garrison .garrison-badge {
    display: inline-block;

    vertical-align: 4px;

    margin-left: 10px;

    padding: 2px 8px;

    border-radius: 999px;

    background: linear-gradient(135deg, #e05d44, #c0392b);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;
}

.feature-garrison .garrison-actions {
    display: flex;

    margin: 0 0 28px;
}

.feature-garrison .garrison-play {
    font-size: 16px;
}

.feature-garrison .garrison-note {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}

/* 表单区 */
.feature-music .acct-field {
    margin-top: 18px;
}

.feature-music .acct-field:first-child {
    margin-top: 0;
}

.feature-music .music-input-row {
    display: flex;

    gap: 10px;
}

.feature-music .music-input-row .acct-input {
    flex: 1;
}

.feature-music .music-input-row .acct-btn {
    flex: none;
}

.feature-music .music-hint {
    margin: 8px 0 0;

    color: var(--muted-2);

    font-size: 12.5px;

    line-height: 1.6;
}

/* 解析出的歌单信息 */
.feature-music .music-pl-info {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 14px;

    padding: 12px;

    border: 1px solid var(--up-glass-border);

    border-radius: 12px;

    background: color-mix(in srgb, var(--like-fg) 5%, transparent);
}

.feature-music .music-pl-cover {
    width: 52px;

    height: 52px;

    flex: none;

    border-radius: 8px;

    object-fit: cover;
}

.feature-music .music-pl-text {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.feature-music .music-pl-text strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.feature-music .music-pl-text span {
    color: var(--muted-2);

    font-size: 12.5px;
}

/* 我的歌单快捷选择 */
.feature-music .music-chips {
    margin-top: 16px;
}

.feature-music .music-chips-title {
    display: block;

    margin-bottom: 8px;

    color: var(--muted-2);

    font-size: 11px;

    letter-spacing: 0.08em;
}

.feature-music .music-chip-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    max-height: 132px;

    overflow-y: auto;
}

.feature-music .music-chip {
    max-width: 220px;

    padding: 6px 12px;

    border: 1px solid var(--up-glass-border);

    border-radius: 999px;

    background: var(--up-glass-bg);

    color: var(--fg);

    font-size: 12.5px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    cursor: pointer;

    transition: border-color 0.2s ease;
}

.feature-music .music-chip small {
    margin-left: 6px;

    color: var(--muted-3);
}

.feature-music .music-chip:hover {
    border-color: var(--like-fg);
}

.feature-music .music-chip.active {
    border-color: var(--like-fg);
    color: var(--like-fg);
}

/* 「新建」chip：虚线边框表示它是个动作而不是已有项 */
.feature-music .music-chip-add {
    border-style: dashed;

    color: var(--muted-2);
}

.feature-music .music-chip em {
    margin-left: 6px;

    color: var(--muted-3);

    font-size: 11px;

    font-style: normal;
}

/* ---------- 搜索结果 ---------- */
.feature-music .music-search-list {
    display: flex;

    flex-direction: column;

    gap: 2px;

    max-height: 264px;

    margin-bottom: 14px;

    padding: 4px;

    overflow-y: auto;

    border: 1px solid var(--up-glass-border);

    border-radius: 12px;

    background: var(--up-glass-bg);
}

.feature-music .music-hit {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px 8px;

    border-radius: 8px;
}

.feature-music .music-hit:hover {
    background: rgba(127, 127, 127, 0.12);
}

/* 四平台统一搜索：每条结果标注来源平台 */
.feature-music .music-hit-plat {
    flex: none;

    align-self: center;

    padding: 2px 8px;

    border: 1px solid var(--up-glass-border);

    border-radius: 999px;

    background: var(--up-glass-bg);

    color: var(--muted-2);

    font-size: 10.5px;

    font-weight: 500;

    letter-spacing: 0.03em;

    white-space: nowrap;
}

.feature-music .music-hit-text {
    display: flex;

    flex: 1;

    flex-direction: column;

    min-width: 0;
}

.feature-music .music-hit-text strong {
    font-size: 13px;

    font-weight: 500;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.feature-music .music-hit-text span {
    color: var(--muted-3);

    font-size: 11px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.feature-music .acct-btn-mini {
    flex: none;

    padding: 3px 10px;

    border-radius: 999px;

    font-size: 11.5px;
}

.feature-music .acct-btn-mini.is-added {
    border-color: transparent;

    background: transparent;

    color: var(--muted-3);

    cursor: default;

    opacity: 0.7;
}

/* ---------- 已挑选的列表 ---------- */
.feature-music .music-pick {
    margin-bottom: 14px;
}

.feature-music .music-pick-head {
    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;

    font-size: 13px;
}

.feature-music .music-pick-head span {
    color: var(--muted-2);

    font-size: 11.5px;
}

.feature-music .music-pick-list {
    max-height: 300px;

    margin: 0;

    padding: 0;

    overflow-y: auto;

    list-style: none;

    border: 1px solid var(--up-glass-border);

    border-radius: 12px;
}

.feature-music .music-pick-item {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 7px 10px;

    border-bottom: 1px solid var(--up-glass-border);
}

.feature-music .music-pick-item:last-child {
    border-bottom: none;
}

/* 序号列定宽：中文/数字歌名混排时右边的操作按钮才不会跟着标题宽度漂 */
.feature-music .music-pick-idx {
    flex: none;

    width: 22px;

    color: var(--muted-3);

    font-size: 11px;

    text-align: right;

    font-variant-numeric: tabular-nums;
}

.feature-music .music-pick-name {
    display: flex;

    flex: 1;

    flex-direction: column;

    min-width: 0;

    font-size: 13px;
}

.feature-music .music-pick-name em {
    color: var(--muted-3);

    font-size: 11px;

    font-style: normal;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.feature-music .music-pick-ops {
    display: flex;

    flex: none;

    gap: 2px;
}

/* 上移/下移/移除：方块小按钮，触控目标 24px */
.feature-music .music-pick-op {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    padding: 0;

    border: none;

    border-radius: 6px;

    background: transparent;

    color: var(--muted-2);

    font-size: 13px;

    line-height: 1;

    cursor: pointer;

    transition: background 0.15s ease, color 0.15s ease;
}

.feature-music .music-pick-op:hover:not(:disabled) {
    background: rgba(127, 127, 127, 0.16);

    color: var(--fg);
}

.feature-music .music-pick-op:disabled {
    cursor: default;

    opacity: 0.25;
}

.feature-music .music-pick-op-del:hover:not(:disabled) {
    color: var(--like-fg);
}

/* 我的歌单刷新按钮 + chip 平台标签 */
.feature-music .music-chips-refresh {
    margin-left: 6px;

    padding: 2px 6px;

    border: none;

    background: transparent;

    color: var(--muted-2);

    font-size: 12px;

    cursor: pointer;

    transition: color 0.2s ease, transform 0.3s ease;

    /* 旋转中心必须落在图标自身。
       之前这里只设了 vertical-align: middle，按钮内容盒高度由 line-height 决定
       （12px 字号 × normal ≈ 14.4px），而里面的 SVG 只有 1em = 12px 且坐在基线上，
       于是 SVG 的几何中心在内容盒中心上方；transform-origin 的 50% 50% 取的是
       边框盒中心，:hover 的 rotate(180deg) 就绕着偏掉的点在转。
       改成 flex 居中 + line-height:1 让盒子本身与图标对齐，问题从根上消失。 */
    display: inline-flex;

    align-items: center;

    justify-content: center;

    line-height: 1;
}

.feature-music .music-chips-refresh svg {
    display: block;
}

.feature-music .music-chips-refresh:hover {
    color: var(--like-fg);

    transform: rotate(180deg);
}

/* 加载中：disabled 期间没有 hover 旋转，给一个真正表示「在转」的动画 */
@keyframes music-chips-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.feature-music .music-chips-refresh:disabled {
    opacity: 0.4;

    cursor: default;

    transform: none;

    animation: music-chips-spin 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .feature-music .music-chips-refresh:disabled {
        animation: none;
    }
}

.feature-music .music-chip .music-chip-plat {
    margin: 0 5px 0 0;

    padding: 1px 5px;

    border-radius: 4px;

    background: var(--up-glass-bg-2, rgba(128, 128, 128, 0.16));

    color: var(--muted-2);

    font-size: 10px;
}

/* 账号卡平台小标签（网易云 / QQ音乐 双卡） */
.feature-music .music-plat-tag {
    display: inline-block;

    margin-left: 6px;

    color: var(--muted-3);

    font-size: 11px;
}

/* QQ Cookie 绑定文本域 */
.feature-music textarea.acct-input {
    width: 100%;

    resize: vertical;

    font-family: inherit;

    line-height: 1.5;

    word-break: break-all;
}

/* 网易云多方式登录（验证码/密码/Cookie）表单 */
.feature-music .music-qr-card > .acct-seg {
    margin-bottom: 14px;
}

.feature-music .music-qr-card > .acct-input,
.feature-music .music-qr-card > .music-captcha-row,
.feature-music .music-qr-card > .acct-msg,
.feature-music .music-qr-card > .music-hint {
    margin-top: 10px;
}

.feature-music .music-captcha-row {
    display: flex;

    gap: 10px;
}

.feature-music .music-captcha-row .acct-input {
    flex: 1;

    min-width: 0;
}

.feature-music .music-captcha-row .acct-btn {
    flex: none;

    min-width: 104px;
}

/* 生成与结果 */
/* ---------- 自选歌单卡：纵向节奏 ----------
 *
 * 这一段原本全靠各元素自己的 margin 凑间距，结果是「文字贴着框」：
 *   - .acct-field 没有任何 margin/gap（全局只给了 min-width:0），
 *     所以「label + 说明 + 输入框」三段之间只有 label 的 margin-bottom:6px
 *   - .acct-msg 有 min-height:18px，空的时候也占位但和下面的元素贴得很近
 *   - 说明文字（.music-hint）默认 margin-top:8px，贴在输入框下沿
 * 这里给一个统一的块间距基准（--music-block-gap），块之间 20px、
 * 块内的标签/说明/控件之间 8~10px，全都用 gap 表达，不再靠 margin 叠加。
 */
.feature-music .music-custom-card {
    --music-block-gap: 20px;

    /* 卡片内容默认是流式堆叠，靠子元素的 margin 撑间距。改成 flex + gap 后
       统一由 gap 控制，去掉零散的 margin-top，避免「近的更近、远的更远」 */
    display: flex;

    flex-direction: column;

    gap: var(--music-block-gap);
}

/* 块内的 label / 说明 / 控件 */
.music-custom-card .acct-label {
    margin-bottom: 0;
}

.music-custom-card .music-hint {
    margin: 8px 0 0;

    line-height: 1.7;
}

/* 说明文字顶在 label 之后、控件之前 —— 这里把 label 与说明合成一个视觉组 */
.music-custom-card .music-hint-lead {
    margin: 6px 0 10px;

    color: var(--muted-3);
}

.music-custom-card .acct-input,
.music-custom-card .music-input-row {
    margin-top: 0;
}

.music-custom-card .acct-msg {
    margin: 10px 0 0;
}

/* 空状态文案不该占一条空白行（.acct-msg 的 min-height 会留 18px 空隙） */
.music-custom-card .acct-msg:empty {
    min-height: 0;

    margin: 0;
}

.music-custom-card .music-search-list,
.music-custom-card .music-pick {
    margin: 0;
}

.music-custom-card .music-actions {
    margin-top: 4px;
}

.music-custom-card .music-result {
    margin-top: 4px;
}

.music-custom-card .music-note {
    margin: 4px 0 0;

    /* 说明性长文收窄，避免一行铺满整卡导致可读行长过长 */
    max-width: 62ch;
}

.music-custom-card .music-preview-title {
    margin-bottom: 8px;
}

/* ---------- 逐曲遍数下拉 ---------- */
.feature-music .music-pick-rep {
    display: inline-flex;

    flex: none;

    align-items: center;

    gap: 6px;
}

.feature-music .music-pick-rep-label {
    color: var(--muted-3);

    font-size: 11px;

    white-space: nowrap;
}

.feature-music .music-pick-rep-select {
    min-width: 0;

    padding: 3px 6px;

    border: 1px solid var(--up-glass-border);

    border-radius: 6px;

    background: var(--up-glass-bg);

    color: var(--fg);

    font-family: inherit;

    font-size: 11.5px;

    line-height: 1.4;

    cursor: pointer;
}

.feature-music .music-pick-rep-select:disabled {
    cursor: default;

    opacity: 0.5;
}

/* 窄屏：遍数下拉和序号挤在一行会很难看，整体换行 */
@media (max-width: 560px) {
    .feature-music .music-pick-item {
        flex-wrap: wrap;
    }

    .feature-music .music-pick-rep {
        order: 3;

        margin-left: 32px;
    }

    .feature-music .music-pick-ops {
        margin-left: auto;
    }
}

/* 原来的 .music-actions（保留给非自选卡的调用点） */
.feature-music .music-actions {
    margin-top: 20px;
}

.feature-music .music-result {
    display: flex;

    gap: 10px;

    margin-top: 16px;
}

.feature-music .music-result .acct-input {
    flex: 1;

    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

    font-size: 12.5px;
}

.feature-music .music-result .acct-btn {
    flex: none;
}

.feature-music .music-note {
    margin: 14px 0 0;

    color: var(--muted-3);

    font-size: 12.5px;

    line-height: 1.6;
}

/* 手机端：单列收缩，歌单信息与账号行自动换行 */
@media (max-width: 700px) {

    .feature-music .music-card {
        padding: 18px;
    }

    .feature-music .music-account {
        flex-wrap: wrap;
    }

    .feature-music .music-account-actions {
        width: 100%;

        justify-content: flex-end;
    }

    .feature-music .music-input-row {
        flex-direction: column;
    }

    .feature-music .music-result {
        flex-direction: column;
    }

}

/* ==================== 音乐板块：页内试听播放器 ==================== */

.feature-music .music-preview {
    margin-top: 18px;

    padding-top: 16px;

    border-top: 1px solid var(--up-glass-border);
}

.feature-music .music-preview-title {
    margin-bottom: 10px;

    color: var(--fg);

    font-size: 14px;

    font-weight: 700;
}

.feature-music .music-player {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;
}

.feature-music .music-ctl {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border: 1px solid var(--up-glass-border);

    border-radius: 50%;

    background: var(--up-glass-bg);

    color: var(--fg);

    font-size: 16px;

    cursor: pointer;

    transition: border-color 0.2s ease;
}

.feature-music .music-ctl:hover {
    border-color: var(--like-fg);
}

.feature-music .music-ctl-main {
    width: 42px;

    height: 42px;

    font-size: 20px;

    background: color-mix(in srgb, var(--like-fg) 14%, transparent);
}

.feature-music .music-player-now {
    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;

    margin-left: 6px;
}

.feature-music .music-player-now strong {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13.5px;
}

.feature-music .music-player-now span {
    color: var(--muted-3);

    font-size: 12px;
}

.feature-music .music-tracklist {
    max-height: 200px;

    overflow-y: auto;

    border: 1px solid var(--up-glass-border);

    border-radius: 10px;

    background: color-mix(in srgb, var(--like-fg) 3%, transparent);
}

.feature-music .music-track {
    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 8px 12px;

    border: none;

    border-bottom: 1px solid color-mix(in srgb, var(--up-glass-border) 60%, transparent);

    background: transparent;

    color: var(--fg);

    font-size: 12.5px;

    text-align: left;

    cursor: pointer;
}

.feature-music .music-track:last-child {
    border-bottom: none;
}

.feature-music .music-track:hover {
    background: color-mix(in srgb, var(--like-fg) 7%, transparent);
}

.feature-music .music-track.active {
    background: color-mix(in srgb, var(--like-fg) 12%, transparent);

    color: var(--like-fg);
}

.feature-music .music-track-no {
    flex: none;

    width: 22px;

    color: var(--muted-3);

    font-variant-numeric: tabular-nums;
}

.feature-music .music-track-name {
    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.feature-music .music-track-dur {
    flex: none;

    color: var(--muted-3);

    font-variant-numeric: tabular-nums;
}

.feature-music .music-preview-note {
    margin: 10px 0 0;

    color: var(--muted-3);

    font-size: 12px;

    line-height: 1.6;
}