/* ============================================================
   极简视觉层 · 现代极简（大留白 + 网格 + 1px 细线）
   引入位置：必须在 theme.css / components.css / theme-enhance.css 之后。
   本层为最高优先级覆盖：类名与 DOM 结构完全沿用现有（JS 零改动），
   仅重写设计令牌、组件外观与版式节奏。
   设计约束（红线）：1px 半透明细线分隔、禁用粗金边框、纯静态离线可用。
   浅色模式取色基准：羊皮纸背景图 background1（主体 #f1ead6、
   边缘 #c9b78f、花纹深褐 #7a5f42 / #6b543c）。
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
    /* 表面与文字 —— 浅色为默认（暖羊皮纸色系） */
    --bg0: #f3ecda; /* 页面底：羊皮纸主体 */
    --bg1: #f9f4e6; /* 次级表面：更亮一层纸色 */
    --bg2: #ebe1c8; /* 渐变收尾：纸面暗角 */
    --card-bg: #fbf7ec; /* 卡片底（细线网格内为实底） */
    --card-bg-hover: #f1e9d3;
    --ink: #3e2f20; /* 主文字：深褐 */
    --dim: rgba(62, 47, 32, 0.62); /* 次要文字 */
    --line: rgba(62, 47, 32, 0.09); /* 分隔线（暖褐细线，已淡化） */
    --line-soft: rgba(62, 47, 32, 0.08); /* 更弱分隔 */
    --gold: #97721e; /* 浅底上加深的金褐，保证可读 */

    /* 顶栏：半透明 + 模糊，滚动时玻璃质感 */
    --header-bg: rgba(246, 240, 224, 0.88);
    --header-bg-scrolled: rgba(246, 240, 224, 0.95);
    --overlay-bg: rgba(56, 41, 25, 0.45);
    --modal-bg: #fdfaf0;

    /* 尺寸与节奏 */
    --wrap: 1120px;
    --radius: 12px;
    --radius-sm: 8px;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* 语义徽章色（角色团队 / 来源，跨页单一来源） */
    --team-town: #3a6ea5;
    --team-outsider: #4c9a52;
    --team-minion: #c07a2a;
    --team-demon: #b03030;
    --team-traveller: #7a5aa8;
    --team-fabled: #a8732c;
    --team-loric: #8a7aa0;
    --team-unknown: #888888;
    --team-town-deep: #3a6ea5;
    --team-outsider-deep: #3d7d43;
    --team-minion-deep: #a3631f;
    --team-demon-deep: #b03030;
    --team-traveller-deep: #7a5aa8;
    --team-fabled-deep: #8f5f22;
    --team-loric-deep: #756490;
    --team-unknown-deep: #6e6e6e;
    --src-museum: #7a5aa8;
    --src-botc: #3a6ea5;
    --src-mycollection: #4c9a52;
    /* 作者胶囊强调色 */
    --author: #6d4aff;
    --author-bg: rgba(109, 74, 255, 0.12);
    --author-bd: rgba(109, 74, 255, 0.28);
}

[data-theme="dark"] {
    --bg0: #1a0a2e;
    --bg1: #1d0b33;
    --card-bg: #1d0b33;
    --card-bg-hover: #25103f;
    --ink: #f5e9d7; /* 羊皮纸字 */
    --dim: rgba(245, 233, 215, 0.62);
    --line: rgba(245, 233, 215, 0.08);
    --line-soft: rgba(245, 233, 215, 0.08);
    --gold: #c9a227;

    --header-bg: rgba(21, 8, 32, 0.72);
    --header-bg-scrolled: rgba(21, 8, 32, 0.9);
    --overlay-bg: rgba(8, 3, 16, 0.72);
    --modal-bg: #200d38;
}

/* ============================================================
   2. 基础版面
   ============================================================ */
body {
    color: var(--ink);
    background: linear-gradient(200deg, var(--bg1) 0%, var(--bg0) 55%, var(--bg2) 100%);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body {
    background: linear-gradient(200deg, #2d1b4e 0%, #1a0a2e 55%, #150820 100%);
    background-attachment: fixed;
}

/* 主容器：放大内容宽度 + 大留白 */
.container {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 2.2rem clamp(1.1rem, 4vw, 2rem) 4rem;
}

/* ============================================================
   3. 顶栏（样例 .topbar 风格：品牌 + 导航，底部 1px 细线）
   去掉原撕纸下缘 / 纸纹噪点 / 标题光晕
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.header::after,
.header::before {
    display: none; /* 移除撕纸边与噪点纹理 */
}
.header.scrolled {
    background: var(--header-bg-scrolled);
    box-shadow: 0 6px 22px rgba(74, 54, 30, 0.12);
}
.header.scrolled::after {
    display: none;
}
.header h1,
.header .title {
    text-shadow: none;
}

/* 品牌区 */
.brand-link {
    color: var(--ink);
    text-decoration: none;
}
.brand-link:hover {
    text-decoration: none;
}
.header .subtitle {
    font-size: var(--fs-xs);
    color: var(--dim);
    letter-spacing: 0.08em;
}

/* 导航：纯文字胶囊，active 用淡底 + 金色下划线感 */
.site-nav .nav-item {
    color: var(--dim);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    padding: 0.42rem 0.9rem;
    transition: color 0.18s var(--ease), background 0.18s var(--ease),
        border-color 0.18s var(--ease);
}
.site-nav .nav-item:hover {
    color: var(--ink);
    background: rgba(122, 95, 66, 0.08);
    border-color: transparent;
    text-decoration: none;
}
.site-nav .nav-item.active {
    color: var(--ink);
    background: rgba(122, 95, 66, 0.1);
    border-color: var(--line);
    font-weight: 600;
    box-shadow: none;
}
.site-nav .nav-item.active:hover {
    color: var(--ink);
    background: rgba(122, 95, 66, 0.14);
    border-color: var(--line);
    filter: none;
}

/* 顶栏图标按钮（主题 / 更新日志 / 联系） */
.theme-toggle,
.contact-toggle,
.changelog-toggle {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: var(--fs-md);
    line-height: 1;
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.18s var(--ease), background 0.18s var(--ease),
        border-color 0.18s var(--ease);
}
.theme-toggle:hover,
.contact-toggle:hover,
.changelog-toggle:hover {
    color: var(--ink);
    background: rgba(122, 95, 66, 0.1);
    border-color: rgba(122, 95, 66, 0.3);
}

/* ============================================================
   4. Hero 首屏（大留白，去卡片盒 / 去水印 / 去光晕）
   ============================================================ */
.hero {
    position: relative;
    margin: 0 0 2rem;
    padding: 1.5rem 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.hero::before,
.hero::after {
    display: none; /* 移除光晕与巨型水印 */
}
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

/* 介绍段：小字次要色，限宽易读 */
.hero-eyebrow {
    margin: 0 auto 1rem;
    max-width: 62ch;
    font-size: var(--fs-sm);
    line-height: 1.85;
    color: var(--dim);
    letter-spacing: 0.01em;
}
.hero-tagline {
    margin: 0 auto 1.6rem;
    max-width: 56ch;
    font-size: var(--fs-md);
    line-height: 1.8;
    color: var(--ink);
}

/* 信任数据：三列细线分隔，数字轻量化 */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 0;
    margin-top: 0.4rem;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    padding: 0 1.6rem;
}
.hero-stat:first-child {
    padding-left: 0;
}
.hero-stat-num {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.hero-stat-label {
    margin-top: 0.2rem;
    font-size: var(--fs-xs);
    color: var(--dim);
    letter-spacing: 0.14em;
}
.hero-stat-sep {
    width: 1px;
    height: 30px;
    background: var(--line);
}

/* ============================================================
   5. 功能入口网格（样例 .quick-grid：1px 细线分隔 + 实底卡片）
   ============================================================ */
.hero-cards {
    position: relative;
    margin-top: 2.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.hero-cards .hero-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--card-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    text-decoration: none;
    transition: background 0.2s var(--ease);
}
.hero-cards .hero-card:hover {
    background: var(--card-bg-hover);
    transform: none;
    border: 0;
    box-shadow: none;
    text-decoration: none;
}
.hero-cards .hero-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}
.hero-card-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.hero-card-desc {
    font-size: var(--fs-s);
    line-height: 1.65;
    color: var(--dim);
}
.hero-card-go {
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gold);
    opacity: 0.9;
    transition: transform 0.2s var(--ease);
}
.hero-cards .hero-card:hover .hero-card-go {
    transform: translateX(3px);
}

/* ============================================================
   6. 本地模式提示条
   ============================================================ */
.local-mode-warning {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0.7rem 1rem;
    font-size: var(--fs-s);
    line-height: 1.6;
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--line);
    border-left: 2px solid rgba(151, 114, 30, 0.5);
    border-radius: var(--radius-sm);
}

/* ============================================================
   7. 页脚
   ============================================================ */
.site-footer {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--dim);
}
.site-footer__disclaimer {
    margin-top: 0.5rem;
    font-size: var(--fs-xs);
    color: var(--dim);
    opacity: 0.85;
}
.site-footer img {
    opacity: 0.8;
    transition: opacity 0.2s var(--ease);
}
.site-footer img:hover {
    opacity: 1;
}

/* ============================================================
   8. 弹窗（联系作者 / 更新日志）— 样例 .modal 风格
   ============================================================ */
.contact-modal-overlay,
.changelog-modal-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 100;
    animation: jt-fade 0.2s both;
}
.contact-modal-overlay[hidden],
.changelog-modal-overlay[hidden] {
    display: none;
}
@keyframes jt-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.contact-modal,
.changelog-modal {
    width: min(640px, 100%);
    max-height: 86vh;
    overflow: auto;
    padding: 1.4rem;
    background: var(--modal-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(56, 41, 25, 0.3);
    animation: jt-pop 0.25s var(--ease) both;
}
@keyframes jt-pop {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.contact-close,
.changelog-close {
    color: var(--dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-grid;
    place-items: center;
    font-size: var(--fs-s);
    line-height: 1;
    cursor: pointer;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.contact-close:hover,
.changelog-close:hover {
    color: var(--ink);
    border-color: rgba(122, 95, 66, 0.34);
}
.contact-title,
.changelog-title {
    font-size: var(--fs-base);
    font-weight: 600;
    margin-bottom: 0.9rem;
}
.contact-donate {
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: var(--dim);
}
.contact-sep {
    height: 0;
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
}
.contact-qr img {
    max-width: 220px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}
/* 更新日志条目 */
.changelog-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
}
.changelog-sub {
    font-size: var(--fs-xs);
    color: var(--dim);
}
.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.changelog-entry {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line-soft);
}
.changelog-entry:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.changelog-ver {
    font-size: var(--fs-sm);
    font-weight: 600;
}
.changelog-date {
    font-size: var(--fs-xs);
    color: var(--dim);
    letter-spacing: 0.06em;
}
.changelog-body {
    font-size: var(--fs-s);
    line-height: 1.75;
    color: var(--dim);
}

/* ============================================================
   9. Toast — 样例底部居中胶囊
   ============================================================ */
.jt-toast {
    left: 50%;
    right: auto;
    bottom: 2rem;
    top: auto;
    transform: translate(-50%, 16px);
    min-width: 0;
    max-width: min(520px, 92vw);
    padding: 0.65rem 1.1rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    background: var(--modal-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(56, 41, 25, 0.24);
    opacity: 0;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.jt-toast.jt-toast-show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.jt-toast.jt-toast-hide {
    opacity: 0;
    transform: translate(-50%, 16px);
}
.jt-toast-msg {
    font-size: var(--fs-sm);
}
.jt-toast-bar {
    height: 2px;
    border-radius: 999px;
}

/* ============================================================
   10. 主题钳制层
   旧样式层存在 [data-theme="X"] 前缀选择器（特异度 0,2,0），会压过
   本层同名单类选择器（0,1,0）。此处统一用 html[data-theme="X"] 前缀
   将特异度提升至 (0,2,1)，确保明暗两套都落到本层的极简令牌上。
   ============================================================ */
html[data-theme="light"] body,
html[data-theme="dark"] body {
    color: var(--ink);
    background: linear-gradient(200deg, var(--bg1) 0%, var(--bg0) 55%, var(--bg2) 100%);
    background-attachment: fixed;
}
html[data-theme="dark"] body {
    background: linear-gradient(200deg, #2d1b4e 0%, #1a0a2e 55%, #150820 100%);
    background-attachment: fixed;
}

/* 顶栏：抹掉旧层的深紫实底渐变与撕纸下缘 */
html[data-theme="light"] .header,
html[data-theme="dark"] .header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}
html[data-theme="light"] .header::after,
html[data-theme="dark"] .header::after,
html[data-theme="light"] .header::before,
html[data-theme="dark"] .header::before {
    display: none;
}
html[data-theme="light"] .header.scrolled,
html[data-theme="dark"] .header.scrolled {
    background: var(--header-bg-scrolled);
}

/* Hero：去卡片盒、去光晕、去水印 */
html[data-theme="light"] .hero,
html[data-theme="dark"] .hero {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html[data-theme="light"] .hero::before,
html[data-theme="dark"] .hero::before,
html[data-theme="light"] .hero::after,
html[data-theme="dark"] .hero::after {
    display: none;
}
html[data-theme="light"] .hero-title,
html[data-theme="dark"] .hero-title,
html[data-theme="light"] .hero-tagline,
html[data-theme="dark"] .hero-tagline {
    color: var(--ink);
    text-shadow: none;
}
html[data-theme="light"] .hero-title-by,
html[data-theme="dark"] .hero-title-by,
html[data-theme="light"] .hero-eyebrow,
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="light"] .hero-card-desc,
html[data-theme="dark"] .hero-card-desc,
html[data-theme="light"] .hero-stat-label,
html[data-theme="dark"] .hero-stat-label {
    color: var(--dim);
}
html[data-theme="light"] .hero-stat-num,
html[data-theme="dark"] .hero-stat-num,
html[data-theme="light"] .hero-card-title,
html[data-theme="dark"] .hero-card-title {
    color: var(--ink);
}
html[data-theme="light"] .hero-stat-sep,
html[data-theme="dark"] .hero-stat-sep {
    background: var(--line);
}

/* 功能卡：细线网格内为实底无边框，交互仅换底色 */
html[data-theme="light"] .hero-card,
html[data-theme="dark"] .hero-card {
    background: var(--card-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
}
html[data-theme="light"] .hero-card:hover,
html[data-theme="dark"] .hero-card:hover {
    background: var(--card-bg-hover);
    border: 0;
    box-shadow: none;
    transform: none;
}
html[data-theme="light"] .hero-card:focus-visible,
html[data-theme="dark"] .hero-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
    box-shadow: none;
}
html[data-theme="light"] .hero-card-go,
html[data-theme="dark"] .hero-card-go {
    color: var(--gold);
}

/* 弹窗 */
html[data-theme="light"] .contact-modal,
html[data-theme="dark"] .contact-modal,
html[data-theme="light"] .changelog-modal,
html[data-theme="dark"] .changelog-modal {
    background: var(--modal-bg);
    border: 1px solid var(--line);
    color: var(--ink);
}

/* 页脚：旧层 .site-footer p（0,1,1）会压过单类选择器，故一并钳制 */
html[data-theme="light"] .site-footer p,
html[data-theme="dark"] .site-footer p {
    margin: 0;
    color: var(--dim);
    font-size: var(--fs-xs);
    line-height: 1.7;
}
html[data-theme="light"] .site-footer__disclaimer,
html[data-theme="dark"] .site-footer__disclaimer {
    color: var(--dim);
    font-size: var(--fs-xs);
}

/* ============================================================
   11. 无障碍：跳转链接 + 动效降级
   ============================================================ */
.skip-link:focus {
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.5rem 0.9rem;
    font-size: var(--fs-s);
    background: var(--modal-bg);
    color: var(--ink);
    border: 1px solid var(--gold);
    border-radius: 999px;
    z-index: 200;
}

@media (prefers-reduced-motion: reduce) {
    .header,
    .hero-cards .hero-card,
    .hero-card-go,
    .jt-toast,
    .contact-modal-overlay,
    .changelog-modal-overlay,
    .contact-modal,
    .changelog-modal {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   12. 页眉重构（样例 .topbar）：品牌文字左、导航右、按钮最右
   2026-10-17：品牌由图片改为文字（染百宝箱 + 金色版本号 + 署名副标题）
   ============================================================ */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.9rem clamp(1.1rem, 4vw, 2rem);
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

/* 品牌：文字（样例 .brand：1.05rem + 0.14em 字距 + 金色强调） */
.brand-link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: var(--ink);
    text-decoration: none;
}
.brand-link:hover {
    text-decoration: none;
}
/* .header h1.brand 特异度 (0,2,1)，压过旧层 .header h1 的白色 1.7em */
.header h1.brand {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0;
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.25;
    color: var(--ink);
    text-shadow: none;
}
.header h1 .brand-mark {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gold);
}
.header .subtitle {
    margin-top: 0;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--dim);
}

/* 导航：贴右，与品牌同一行 */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem;
    margin-top: 0;
}

/* 主题切换：取消绝对定位，作为 flex 末位成员（避免与导航重叠） */
.theme-toggle {
    position: static;
    top: auto;
    right: auto;
}
@media (max-width: 768px) {
    .theme-toggle {
        width: 2.75rem;
        height: 2.75rem;
    }
    .site-nav {
        justify-content: flex-start;
    }
}

/* ============================================================
   13. 旧令牌桥接：让子页面（theme.css / components.css 组件）继承新配色
   组件全部消费变量，故只需在此重映射；深色主题还原为深紫值，避免浅色泄漏。
   ============================================================ */
:root {
    /* 主色板：紫 → 暖褐（羊皮纸上的墨与金） */
    --primary: #6f563c;
    --primary-dark: #54402c;
    --primary-light: #a08a6a;
    --primary-tint: #f1e9d3;
    --accent: var(--gold);

    /* 背景与表面 */
    --bg: var(--bg0);
    --surface: var(--card-bg);
    --surface-2: #f6f0df;
    --bg-card: var(--card-bg);
    --bg-paper: #f6f0df;
    --bg-dark: #f1e9d3;
    --bg-card-hover: var(--card-bg-hover);
    --bg-panel-alt: #ede3c9;

    /* 文字 */
    --text: var(--ink);
    --text-light: var(--ink);
    --text-muted: #6f5c44;

    /* 边框与阴影：扁平化，去厚重投影 */
    --border: rgba(62, 47, 32, 0.10);
    --input-border: rgba(62, 47, 32, 0.32); /* 输入框线条：保持清晰，不随 --border 淡化 */
    --shadow: 0 1px 2px rgba(56, 41, 25, 0.06);
    --shadow-lg: 0 10px 30px rgba(56, 41, 25, 0.18);
    --radius: 12px;
    --radius-sm: 8px;

    /* 页眉 */
    --header-bg: #f6f0e0;
    --header-accent: #f1e9d6;
    --header-border: rgba(62, 47, 32, 0.12);

    /* 表单 / 分组行 / 得分刻度 */
    --input-bg: #fdfaf0;
    --group-row-bg: #f6f0df;
    --threshold-line: rgba(62, 47, 32, 0.35);

    /* 语义色（暖调适配纸底） */
    --success: #3f7d4f;
    --warning: #a8781a;
    --danger: #b23b2c;
    --danger-tint: #f7e6df;

    /* 内容宽度与首页一致 */
    --content-max: var(--wrap);
}

[data-theme="dark"] {
    /* 深色：还原深紫原值（与 theme.css 暗色块一致） */
    --primary: #7d5aa6;
    --primary-dark: #5f4385;
    --primary-light: #b9a0d8;
    --primary-tint: #2c2142;
    --accent: #d9b441;

    --bg: #16101f;
    --surface: #211733;
    --surface-2: #1b1429;
    --bg-card: #211733;
    --bg-paper: #1b1429;
    --bg-dark: #2c2142;
    --bg-card-hover: #2c2142;
    --bg-panel-alt: #2c2142;

    --text: #ece6f5;
    --text-light: #ece6f5;
    --text-muted: #a896c4;

    --border: #2a2040;
    --input-border: #6a5a88; /* 深色输入框线条，保持清晰 */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);

    --header-bg: #1b1029;
    --header-accent: #251634;
    --header-border: #2a2040;

    --input-bg: #2c2142;
    --group-row-bg: #241a36;
    --threshold-line: rgba(255, 255, 255, 0.4);

    --success: #4caf72;
    --warning: #f0b400;
    --danger: #e06b5c;
    --danger-tint: #3a1f24;
}

/* ============================================================
   14. 子页面组件收敛（扁平表面 + 1px 细线 + 统一圆角）
   ============================================================ */
.card,
.section,
.panel,
.form-section,
.results-section,
.search-container,
.input-section,
.sij-card,
.sij-preview,
.selected-list {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

/* 区块标题：去紫，用主文字色 */
.section-title,
.form-section-title {
    color: var(--ink);
    font-weight: 600;
}

/* 表单控件：细线 + 纸底，聚焦金色描边 */
input[type="text"],
input[type="number"],
input[type="search"],
input:not([type]),
textarea,
select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    color: var(--ink);
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(151, 114, 30, 0.14);
}

/* 主内容容器：与首页同宽同留白 */
.main-content {
    max-width: var(--wrap);
    margin: 0 auto;
}

/* ============================================================
   15. 按钮去渐变 + 去图标（只留纯色底与文字）
   2026-10-17：顶部导航项（site-header NAV）保留原有 emoji，其余按钮一律纯文字。
   ============================================================ */
:root {
    /* 渐变令牌改纯色：所有 background:var(--brand-grad) 直接变实色 */
    --brand-grad: var(--primary);
    --brand-grad-soft: var(--primary-tint);
}
[data-theme="dark"] {
    --brand-grad: #7d5aa6;
    --brand-grad-soft: #2c2142;
}

/* 兜底：任何按钮都不再绘制渐变（渐变属 background-image，去掉后底色仍在） */
button,
.btn,
.violet-button,
.search-btn,
.icon-btn,
.upload-btn,
.fe-upload-btn,
.btn-clear,
.fe-btn-clear,
.btn-primary,
.btn-accent,
.btn-secondary,
.dir-button,
.meta-info-button,
.save-dir-button,
.save-meta-info-button,
.load-json-button,
.token-add-btn,
.add-special-btn,
.remove-special-btn,
.imgbb-go,
.imgbb-file-btn,
.sij-btn,
.similar-more,
.role-button,
.copy-script-json-more {
    background-image: none;
}

/* 原本以渐变 shorthand 作底的按钮，改写成纯色 */
.imgbb-go {
    background: var(--primary);
    color: #fff;
}
.imgbb-go:hover {
    background: var(--primary-dark);
}

/* 注：纯图标按钮（🖼️ 官方工具 / 🎲 随机推荐）保持原样，仍为方形图标按钮 */

/* ============================================================
   P3 按钮尺寸/风格统一（收口）
   全站“文本按钮”统一为：高 40px / 横向内边距 16px / 字号 14px /
   圆角 8px / 行内 flex 居中 / 图标-文字间隙 8px。
   有意保留的尺寸例外：
     - .search-btn / .similar-more / .btn-large ：大号通栏 CTA（更大字号/字号或通栏）
     - .icon-btn / .copy-script-json-more / .sij-role .btn-clear ：方形纯图标键（与文本键等高但保持方形）
   ============================================================ */
:root {
    --btn-h: 40px;
    --btn-px: 16px;
    --btn-fs: var(--fs-sm);
    --btn-radius: var(--radius-sm);
    --btn-gap: 8px;
    --btn-icon: 40px;
}

/* 标准文本按钮：统一几何 */
.violet-button,
.dir-button,
.meta-info-button,
.save-dir-button,
.save-meta-info-button,
.load-json-button,
.btn-primary,
.btn-accent,
.btn-secondary,
.input-box button,
.upload-box .upload-btn,
.fe-upload-btn,
.script-img-gen-btn,
.imgbb-go,
.cancel-dir-button,
.cancel-meta-info-button,
.toggle-json-button,
.btn-clear,
.file-info .btn-clear,
.fe-file-info .fe-btn-clear,
.imgbb-file-btn,
.token-add-btn,
.add-special-btn,
.remove-special-btn,
.add-state-btn,
.remove-state-btn,
.script-img-close-btn,
.remove-btn,
.btn-remove-token,
.btn-add-token,
.sij-btn,
.remove-like-btn,
.remove-dislike-btn,
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: var(--btn-h);
    padding: 0 var(--btn-px);
    font-size: var(--btn-fs);
    line-height: 1;
    border-radius: var(--btn-radius);
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}

/* 方形纯图标按钮：等高但保持方形 */
.icon-btn {
    width: var(--btn-icon);
    height: var(--btn-icon);
    padding: 0;
}

/* 大号通栏 CTA：同高（字号/通栏保持原样） */
.btn-large {
    height: var(--btn-h);
    padding: 0 var(--btn-px);
}

/* 移动端：图生JSON 浮层按钮回归紧凑内边距（覆盖上面的固定高度） */
@media (max-width: 768px) {
    .script-img-gen-btn,
    .script-img-close-btn {
        height: auto;
        padding: 8px var(--space-3);
        font-size: var(--fs-s);
    }
}

/* 角色选择 chip：仅对齐圆角，尺寸保留 team 色块语义 */
.role-button {
    border-radius: var(--btn-radius);
}

/* ============================================================
   P4 按钮组等宽对齐
   同行的文本按钮统一拉伸为等宽（解决“长短不一”）；
   纯图标方块键（.icon-btn）保持方形不参与拉伸。
   移动端回落为各自内容宽度 / 堆叠，不强制等宽。
   ============================================================ */
@media (min-width: 769px) {
    .btn-row > button:not(.icon-btn) {
        flex: 1 1 0;
        min-width: 0;
    }
    .sij-actions > button {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ============================================================
   P4b 自制角色表单：去嵌套边框重叠
   .panel 已是外框；其内部 .form-section 不再画整框（否则与外框形成
   双重/重叠线）。仅在相邻子区块间保留一条淡化分隔线。
   ============================================================ */
.panel .form-section {
    border: none;
    background: transparent;
}
.panel .form-section + .form-section {
    border-top: 1px solid var(--line);
}