/* ============================================================
   全站美化增强层 · P0 视觉基础（哥特紫沉浸风）
   引入位置：须在 theme.css / components.css 之后（覆盖变量与补充质感）
   设计约束（红线）：禁粗金边框、禁并排表单、1px 半透明细线分隔；
   纯静态离线可用（不引外部字体/CDN）。
   ============================================================ */

:root {
    /* 强调渐变：紫 → 靛蓝，收敛克制（去掉高饱和玫红），用于 CTA / 品牌 / active 态 */
    --brand-grad: linear-gradient(135deg, #6d54a6 0%, #5c4a8f 60%, #455a9d 100%);
    --brand-grad-soft: linear-gradient(135deg, rgba(109, 84, 166, 0.13), rgba(69, 90, 157, 0.09));
    --brand: #6a4f9e; /* 紫罗兰，作为主强调（克制） */
    --brand-ink: #8a78c0; /* 淡紫亮色，用于小高光 */

    /* 分层阴影（替代单一切片） */
    --shadow-sm: 0 1px 2px rgba(42, 27, 61, 0.10);
    --shadow-lg2: 0 18px 50px rgba(20, 8, 40, 0.28);

    /* 圆角加大，更现代 */
    --radius: 16px;
    --radius-sm: 10px;

    /* 统一缓动曲线 */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

}

/* ============================================================
   背景：沉浸渐变（取代平涂，制造纵深）
   - 暗色：深紫渐变 + 顶部/右上光晕（光晕降饱和，更内敛）
   - 浅色：羊皮纸/浅紫微妙渐变（仍哥特化）
   ============================================================ */
[data-theme="dark"] body {
    background:
        radial-gradient(1200px 620px at 50% -12%, rgba(109, 84, 166, 0.16), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(91, 110, 225, 0.12), transparent 55%),
        linear-gradient(160deg, #1a0a2e 0%, #2d1b4e 55%, #160a26 100%);
    background-attachment: fixed;
}
[data-theme="light"] body {
    background:
        radial-gradient(1000px 540px at 50% -10%, rgba(109, 84, 166, 0.09), transparent 60%),
        linear-gradient(180deg, #faf8fe 0%, #f1ebf8 100%);
    background-attachment: fixed;
}

/* ============================================================
   顶部 header：参照 bloodontheclocktower.com
   纯色深紫页眉（弃玻璃拟态）+ 撕纸锯齿下缘（官网标志性元素）
   ============================================================ */
.header {
    background: linear-gradient(180deg, #2e1c42 0%, #271538 100%);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
    transition: padding 0.25s var(--ease), background 0.25s var(--ease),
        box-shadow 0.25s var(--ease);
}
/* 撕纸下缘：多频正弦 + 随机抖动生成的起伏折线（参照官网截图逐点分析），
   相邻点 y 全部不同 → 无任何水平线段；重叠 2px 上接页眉，消除接缝浅线。
   主题/滚动态换色仍只改 background-color。 */
.header::after {
    content: "";
    position: absolute;
    top: calc(100% - 2px); /* 上移 2px 与页眉重合，消除拼接缝隙的浅色细线 */
    left: 0;
    right: 0;
    height: 28px;
    background-color: #271538; /* 与页眉底色一致，视觉上连为一体 */
    clip-path: polygon(0% 0%, 100% 0%,
        98.1% 61.5%, 94.9% 42.7%, 92.6% 38.9%, 91.0% 33.9%, 89.0% 24.8%, 87.3% 33.7%,
        84.3% 46.6%, 81.7% 62.1%, 79.5% 52.8%, 77.9% 49.1%, 76.1% 39.8%, 73.8% 49.1%,
        71.2% 37.1%, 69.1% 44.9%, 66.4% 54.2%, 63.8% 63.4%, 60.7% 72.7%, 58.7% 68.7%,
        57.0% 60.6%, 54.1% 69.9%, 51.7% 57.7%, 49.0% 65.9%, 46.4% 57.9%, 44.3% 43.4%,
        41.7% 27.4%, 39.4% 18.1%, 36.2% 25.7%, 33.5% 35.4%, 30.7% 61.3%, 27.3% 71.6%,
        25.3% 61.8%, 22.6% 48.1%, 20.3% 57.4%, 18.5% 43.4%, 15.6% 49.4%, 13.7% 58.0%,
        10.6% 67.3%, 8.3% 61.1%, 5.1% 70.4%, 2.1% 42.4%, 0.0% 51.7%);
    pointer-events: none;
    z-index: 1;
}
/* 纸纹噪点：官网羊皮纸质感（fractalNoise 灰噪平铺，低透明度整层叠加） */
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 260px 260px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}
/* 浅色主题下 header 仍保持深紫（哥特化），与浅色内容区形成对比 */
[data-theme="light"] .header {
    background: linear-gradient(180deg, #32204a 0%, #2a1840 100%);
    border-bottom: none;
}
[data-theme="light"] .header::after {
    background-color: #2a1840;
}
.header.scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #241234;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.40);
}
.header.scrolled::after {
    background-color: #241234;
}

/* header 内标题/导航微调：标题淡紫光晕（克制），不再用亮玫红 */
.header h1,
.header .title {
    text-shadow: 0 1px 12px rgba(138, 120, 192, 0.28);
}

/* 品牌标题区作为返回首页链接：无下划线、鼠标手型、点击跳转 */
.brand-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.brand-link:hover {
    text-decoration: none;
}
.brand-link:focus-visible {
    outline: 2px solid var(--brand, #6a4f9e);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ============================================================
   导航：官网式纯文字链接（去胶囊边框，字距拉开）
   active 态 = 米白实底块（对应官网 STORE 按钮），深紫字
   ============================================================ */
.site-nav .nav-item {
    background: transparent;
    border-color: transparent;
    color: rgba(245, 233, 215, 0.78);
    letter-spacing: 0.06em;
    border-radius: 6px;
}
.site-nav .nav-item:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: transparent;
    color: #ffffff;
    text-decoration: none;
}
.site-nav .nav-item.active {
    background: #f5e9d7;
    border-color: #f5e9d7;
    color: #2c1a3e;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.site-nav .nav-item.active:hover {
    background: #fff7e8;
    border-color: #fff7e8;
    color: #2c1a3e;
    filter: none;
}

/* ============================================================
   主按钮：强调渐变 + 投影 + hover 抬升/微亮
   ============================================================ */
.violet-button,
.dir-button,
.meta-info-button,
.save-dir-button,
.save-meta-info-button,
.load-json-button,
.btn-primary,
.btn-accent {
    background: var(--brand-grad);
    box-shadow: 0 6px 18px rgba(80, 60, 130, 0.26);
    transition: background 0.2s var(--ease), transform 0.12s var(--ease),
        box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.violet-button:hover,
.dir-button:hover,
.meta-info-button:hover,
.save-dir-button:hover,
.save-meta-info-button:hover,
.load-json-button:hover,
.btn-primary:hover,
.btn-accent:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(80, 60, 130, 0.34);
    background: var(--brand-grad);
}
.violet-button:active,
.dir-button:active,
.meta-info-button:active,
.save-dir-button:active,
.save-meta-info-button:active,
.load-json-button:active,
.btn-primary:active,
.btn-accent:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(80, 60, 130, 0.26);
}

/* 次按钮：hover 提亮为品牌色描边 */
.cancel-dir-button:hover,
.cancel-meta-info-button:hover,
.toggle-json-button:hover,
.btn-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* ============================================================
   卡片/面板：顶部内高光 + 细线边框 + 分层阴影（质感升级）
   ============================================================ */
.card,
.section,
.panel,
.search-container,
.dirArea,
.metaInfo,
.script-selection,
.selection-info,
.jsonUpload {
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: var(--line);
    transition: box-shadow 0.25s var(--ease), transform 0.2s var(--ease),
        border-color 0.2s var(--ease);
}
[data-theme="light"] .card,
[data-theme="light"] .section,
[data-theme="light"] .panel,
[data-theme="light"] .search-container,
[data-theme="light"] .dirArea,
[data-theme="light"] .metaInfo,
[data-theme="light"] .script-selection,
[data-theme="light"] .selection-info,
[data-theme="light"] .jsonUpload {
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    border-color: var(--line);
}

/* ============================================================
   通用焦点环（统一可访问性反馈）
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* ============================================================
   降级：减少动态效果时关闭过渡（与原 reduced-motion 守卫一致）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .header,
    .violet-button,
    .dir-button,
    .meta-info-button,
    .save-dir-button,
    .save-meta-info-button,
    .load-json-button,
    .btn-primary,
    .btn-accent,
    .card,
    .section,
    .panel,
    .search-container,
    .dirArea,
    .metaInfo,
    .script-selection,
    .selection-info,
    .jsonUpload {
        transition: none;
    }
}

/* ============================================================
   P1 首页 Hero 首屏（哥特紫沉浸 · 明暗均深紫背景，保证羊皮纸字可读）
   ============================================================ */
.hero {
    position: relative;
    margin: 0 0 28px;
    padding: 40px clamp(20px, 5vw, 56px) 36px;
    border-radius: 22px;
    /* 浅色默认：浅紫白沉浸（哥特紫浅色版）；深色由下方 [data-theme="dark"] 覆盖 */
    background: linear-gradient(155deg, #f3eefb 0%, #e9e1f6 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}
/* hero 顶部一抹品牌色光晕，强化沉浸感（克制；浅/深分别调强弱） */
.hero::before {
    content: "";
    position: absolute;
    inset: -40% 0 auto 0;
    height: 320px;
    background: radial-gradient(60% 100% at 80% 0%, rgba(109, 84, 166, 0.16), transparent 70%);
    pointer-events: none;
}
/* 巨型暗纹水印（官网页脚巨型花体字语言）：背后超大行楷「染百宝箱」，
   低透明度作纹理，不与内容争读（.hero overflow:hidden 裁掉溢出） */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* 巨型水印改用品牌图 + CSS mask：同一张 10KB webp（与页眉共享缓存），
       颜色由 background-color 按主题给（mask 以图片 alpha 为形） */
    width: clamp(480px, 92vw, 920px);
    aspect-ratio: 690 / 212;
    background-color: rgba(106, 79, 158, 0.07); /* 浅色主题：淡紫水印 */
    -webkit-mask-image: url("../font/brand-title.webp");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain;
    mask-image: url("../font/brand-title.webp");
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* 居中沉浸式构图（参照官网 hero 的中央对称排版） */
.hero-inner {
    position: relative;
    z-index: 1; /* 高于背后的巨型水印 */
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.hero-eyebrow {
    margin: 0 0 14px;
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.7;
    letter-spacing: normal;
    text-indent: 0;
    color: var(--text-muted);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.hero-title {
    margin: 0 0 16px;
    font-size: clamp(2.75rem, 7vw, 4.125rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hero-title-by {
    font-size: var(--fs-3xs);
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 8px;
    letter-spacing: 0.02em;
}
.hero-tagline {
    margin: 0 auto 22px;
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 620px;
}
/* 信任数据：三列分隔（随整体居中） */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 0;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    padding: 0 22px;
}
.hero-stat:first-child {
    padding-left: 0;
}
.hero-stat-num {
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.hero-stat-label {
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.hero-stat-sep {
    width: 1px;
    height: 34px;
    background: var(--border);
}
/* 功能入口卡：响应式网格 */
.hero-cards {
    position: relative;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.hero-card {
    display: flex;
    flex-direction: column;
    padding: 18px 18px 20px;
    border-radius: 16px;
    text-decoration: none;
    cursor: pointer;
    color: var(--text);
    /* 浅色：白卡片 + 细线边框 + 内高光 */
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-sm);
    transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
        border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.hero-card:hover {
    text-decoration: none;
    transform: translateY(-3px);
    background: var(--bg-card-hover);
    border-color: var(--brand);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.hero-card:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(106, 79, 158, 0.30);
}
/* 卡片底部「前往 →」行动提示，强化可点击感知（与顶部导航分工：hero=进站落地导航）*/
.hero-card-go {
    margin-top: auto;
    padding-top: 12px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--brand);
    opacity: 0.85;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.hero-card:hover .hero-card-go {
    opacity: 1;
    transform: translateX(3px);
}
.hero-card-title {
    font-size: var(--fs-base);
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
.hero-card-desc {
    font-size: var(--fs-s);
    line-height: 1.6;
    color: var(--text-muted);
}

/* ===== 深色主题：hero 区恢复深紫沉浸（羊皮纸字，保证对比度） ===== */
[data-theme="dark"] .hero {
    background:
        radial-gradient(900px 420px at 50% -20%, rgba(109, 84, 166, 0.28), transparent 65%),
        linear-gradient(180deg, #241144 0%, #170a2a 55%, #100620 100%);
    border-color: rgba(245, 233, 215, 0.16);
    box-shadow: var(--shadow-lg2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .hero::before {
    background: radial-gradient(60% 100% at 80% 0%, rgba(109, 84, 166, 0.30), transparent 70%);
}
[data-theme="dark"] .hero::after {
    background-color: rgba(245, 233, 215, 0.05); /* 深色主题：羊皮纸色水印 */
}
[data-theme="dark"] .hero-eyebrow {
    color: rgba(245, 233, 215, 0.8);
}
[data-theme="dark"] .hero-title {
    color: #f5e9d7;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .hero-title-by {
    color: rgba(245, 233, 215, 0.55);
}
[data-theme="dark"] .hero-tagline {
    color: rgba(245, 233, 215, 0.82);
}
[data-theme="dark"] .hero-stat-num {
    color: #f5e9d7;
}
[data-theme="dark"] .hero-stat-label {
    color: rgba(245, 233, 215, 0.6);
}
[data-theme="dark"] .hero-stat-sep {
    background: rgba(245, 233, 215, 0.24);
}
/* 功能卡：幽灵描边（呼应官网描边按钮语言：透明底 + 细米白边） */
[data-theme="dark"] .hero-card {
    color: #f5e9d7;
    background: rgba(245, 233, 215, 0.04);
    border-color: rgba(245, 233, 215, 0.22);
    box-shadow: none;
}
[data-theme="dark"] .hero-card:hover {
    background: rgba(245, 233, 215, 0.09);
    border-color: rgba(245, 233, 215, 0.45);
    box-shadow: 0 14px 32px rgba(10, 4, 24, 0.45);
}
[data-theme="dark"] .hero-card:focus-visible {
    border-color: rgba(245, 233, 215, 0.6);
    box-shadow: 0 0 0 3px rgba(245, 233, 215, 0.22);
}
[data-theme="dark"] .hero-card-go {
    color: rgba(245, 233, 215, 0.85);
}
[data-theme="dark"] .hero-card-title {
    color: #f5e9d7;
}
[data-theme="dark"] .hero-card-desc {
    color: rgba(245, 233, 215, 0.7);
}

/* 入场动画：hero 元素淡入上移（stagger） */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero-eyebrow,
.hero-title,
.hero-tagline,
.hero-stats,
.hero-cards {
    animation: heroFadeUp 0.6s var(--ease-out) both;
}
.hero-title {
    animation-delay: 0.06s;
}
.hero-tagline {
    animation-delay: 0.12s;
}
.hero-stats {
    animation-delay: 0.18s;
}
.hero-cards {
    animation-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow,
    .hero-title,
    .hero-tagline,
    .hero-stats,
    .hero-cards {
        animation: none;
    }
}

/* ============================================================
   品牌主标题「染百宝箱」：栅格化图片方案
   - 原 4.6MB 行楷字体全量加载 → 10KB 透明底 webp（白色字形，深紫页眉亮/暗主题通用）
   - 生成脚本：assets/tools/render_brand_title.py（源字体 ttf 本地保留，不入库）
   - 淡紫光晕由 drop-shadow 还原（原 text-shadow 对 img 无效）
   ============================================================ */
.header h1,
.brand-link h1 {
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: clamp(2.75rem, 7vw, 4.125rem);
}
/* 版本号 vX.Y 用衬线西文，与书法体拉开对比；
   字号相对父级 h1（=33px，与 hero 的「by 黑心恰克」同级），不弱于 hero 署名 */
/* 移动端：导航品牌字号收敛，避免小屏溢出换行 */
@media (max-width: 768px) {
    .header h1,
    .brand-link h1 {
        font-size: clamp(1.875rem, 9vw, 2.75rem);
    }
}

/* ============================================================
   全站按钮统一（P0：消除「渐变 / 单色 / 蓝 / 红」混用，对齐哥特紫沉浸风）
   theme-enhance.css 全站最后加载，下列规则以同等或更高特异性压过各页 CSS。
   分类：
     ① 主按钮 / 图标按钮（CTA） → 品牌渐变 + 投影 + hover 微亮抬升
     ② 次按钮（取消 / 清除 / 切换 / 选择文件 / 关闭） → 幽灵描边，hover 品牌色
     ③ 危险按钮（删除 / 移除） → 实色 danger 红
     ④ 添加 token 按钮 → 实色 success 绿（与 ③ 成对的语义例外，全站一致）
   主按钮组的 8 个原始类见上文「主按钮」段；此处仅补齐其余类，避免重复声明。
   ============================================================ */

/* —— ① 主按钮 / 图标按钮：品牌渐变（补齐未被上文覆盖的类） —— */
.icon-btn,
.search-btn,
.input-box button,
.upload-box .upload-btn,
.script-img-gen-btn,
.imgbb-go {
    background: var(--brand-grad);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(80, 60, 130, 0.26);
    transition: background 0.2s var(--ease), transform 0.12s var(--ease),
        box-shadow 0.2s var(--ease), filter 0.2s var(--ease),
        border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.icon-btn:hover,
.search-btn:hover,
.input-box button:hover,
.upload-box .upload-btn:hover,
.script-img-gen-btn:hover,
.imgbb-go:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(80, 60, 130, 0.34);
    background: var(--brand-grad);
}
.icon-btn:active,
.search-btn:active,
.input-box button:active,
.upload-box .upload-btn:active,
.script-img-gen-btn:active,
.imgbb-go:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(80, 60, 130, 0.26);
}

/* —— 原生 select 选项弹层：强制可读配色 ——
   根因：find-edition / role-search 的筛选下拉用 .search-btn（紫渐变底 + 白字），
   原生 <option> 弹层在浅色主题下继承白字、而弹层底为系统白 → 白底白字不可见。
   显式给 option 设定与主题联动的底色 + 文字色，两主题均可读。 */
select option {
    background: var(--input-bg);
    color: var(--text);
}

/* —— ② 次按钮（取消 / 清除 / 切换 / 选文件 / 关闭 / 增删字段）：
      幽灵描边，surface 底 + 1px 细线边框 + 统一圆角 + hover 品牌色
      （含 theme.css 原本的 .btn-secondary / .cancel-* / .toggle-json-button，
        一并在本段显式定义，确保全站次按钮几何与 hover 完全一致） —— */
.btn-secondary,
.cancel-dir-button,
.cancel-meta-info-button,
.toggle-json-button,
.btn-clear,
.file-info .btn-clear,
.sij-role .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 {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
        color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn-secondary:hover,
.cancel-dir-button:hover,
.cancel-meta-info-button:hover,
.toggle-json-button:hover,
.btn-clear:hover,
.file-info .btn-clear:hover,
.sij-role .btn-clear:hover,
.fe-file-info .fe-btn-clear:hover,
.imgbb-file-btn:hover,
.token-add-btn:hover,
.add-special-btn:hover,
.remove-special-btn:hover,
.add-state-btn:hover,
.remove-state-btn:hover,
.script-img-close-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* —— ③ 危险按钮（删除 / 移除）：实色 danger 红 —— */
.remove-btn,
.btn-remove-token {
    background: var(--danger);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    transition: background 0.2s var(--ease), transform 0.12s var(--ease),
        box-shadow 0.2s var(--ease);
}
.remove-btn:hover,
.btn-remove-token:hover {
    background: var(--danger);
    filter: brightness(1.06);
}
.remove-btn:active,
.btn-remove-token:active {
    transform: translateY(1px);
}

/* —— ④ 添加 token 按钮：实色 success 绿（与 ③ 成对的语义例外） —— */
.btn-add-token {
    background: var(--success);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    transition: background 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn-add-token:hover {
    filter: brightness(1.06);
}

/* —— ① 主按钮 / 图标按钮（CTA）：品牌渐变 + 统一几何 + 投影 + hover 微亮抬升
      说明：.btn-primary/.btn-accent 在 theme.css 只给了背景色，未定义 border/radius，
      会退回浏览器默认（2px 边框 + 直角）→ 此处一并显式收敛，保证与主按钮组完全同款。 —— */
.violet-button,
.dir-button,
.meta-info-button,
.save-dir-button,
.save-meta-info-button,
.load-json-button,
.btn-primary,
.btn-accent,
.icon-btn,
.search-btn,
.input-box button,
.upload-box .upload-btn,
.script-img-gen-btn,
.imgbb-go,
.fe-upload-btn,
.similar-more {
    background: var(--brand-grad);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(80, 60, 130, 0.26);
    transition: background 0.2s var(--ease), transform 0.12s var(--ease),
        box-shadow 0.2s var(--ease), filter 0.2s var(--ease),
        border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.violet-button:hover,
.dir-button:hover,
.meta-info-button:hover,
.save-dir-button:hover,
.save-meta-info-button:hover,
.load-json-button:hover,
.btn-primary:hover,
.btn-accent:hover,
.icon-btn:hover,
.search-btn:hover,
.input-box button:hover,
.upload-box .upload-btn:hover,
.script-img-gen-btn:hover,
.imgbb-go:hover,
.fe-upload-btn:hover,
.similar-more:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(80, 60, 130, 0.34);
    background: var(--brand-grad);
}
.violet-button:active,
.dir-button:active,
.meta-info-button:active,
.save-dir-button:active,
.save-meta-info-button:active,
.load-json-button:active,
.btn-primary:active,
.btn-accent:active,
.icon-btn:active,
.search-btn:active,
.input-box button:active,
.upload-box .upload-btn:active,
.script-img-gen-btn:active,
.imgbb-go:active,
.fe-upload-btn:active,
.similar-more:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(80, 60, 130, 0.26);
}