/* ===== 工具页背景切换 · 通用组件 ===== */

/* 切换按钮容器（挂在 hero 右上角） */
.bg-switch {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bg-switch-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bg-switch-dot:hover { transform: scale(1.16); }
.bg-switch-dot.active {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.18);
    transform: scale(1.1);
}

/* 目标容器统一带主题氛围 */
body[data-bg-theme="navy"] .bg-switch-target,
body[data-bg-theme="forest"] .bg-switch-target,
body[data-bg-theme="sunset"] .bg-switch-target {
    border-color: rgba(255, 255, 255, 0.14);
}

/* ---- 星空夜航 ---- */
body[data-bg-theme="navy"] .bg-switch-target {
    background: linear-gradient(180deg, #182a44 0%, #0f1b2d 70%, #0c1424 100%);
}
body[data-bg-theme="navy"] .bg-switch-target .bgsw-glow {
    background: radial-gradient(circle, rgba(96, 130, 255, 0.32) 0%, transparent 70%);
}
body[data-bg-theme="navy"] .bg-switch-target .bgsw-ink {
    color: #eaf0ff;
    -webkit-text-fill-color: #eaf0ff;
}
body[data-bg-theme="navy"] .bg-switch-target .bgsw-sub { color: #9fb2d8; }

/* ---- 雾山森林 ---- */
body[data-bg-theme="forest"] .bg-switch-target {
    background: linear-gradient(180deg, #1b3a26 0%, #12291b 70%, #0e2217 100%);
}
body[data-bg-theme="forest"] .bg-switch-target .bgsw-glow {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.26) 0%, transparent 70%);
}
body[data-bg-theme="forest"] .bg-switch-target .bgsw-ink {
    color: #eafff1;
    -webkit-text-fill-color: #eafff1;
}
body[data-bg-theme="forest"] .bg-switch-target .bgsw-sub { color: #a5d6b8; }

/* ---- 落日晚霞 ---- */
body[data-bg-theme="sunset"] .bg-switch-target {
    background: linear-gradient(180deg, #4a2438 0%, #331a2e 70%, #291527 100%);
}
body[data-bg-theme="sunset"] .bg-switch-target .bgsw-glow {
    background: radial-gradient(circle, rgba(251, 146, 60, 0.3) 0%, transparent 70%);
}
body[data-bg-theme="sunset"] .bg-switch-target .bgsw-ink {
    color: #fff0f4;
    -webkit-text-fill-color: #fff0f4;
}
body[data-bg-theme="sunset"] .bg-switch-target .bgsw-sub { color: #e3b8c6; }

/* 暗色主题下，浅色卡片类元素压暗，避免刺眼 */
body[data-bg-theme="navy"] .bg-switch-target :is(.bgsw-card, .gt-card, .gs-card, .gm-card, .gw-card, .gf-card) {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
body[data-bg-theme="forest"] .bg-switch-target :is(.bgsw-card, .gt-card, .gs-card, .gm-card, .gw-card, .gf-card) {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}
body[data-bg-theme="sunset"] .bg-switch-target :is(.bgsw-card, .gt-card, .gs-card, .gm-card, .gw-card, .gf-card) {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* 响应式 */
@media (max-width: 480px) {
    .bg-switch { top: 12px; right: 12px; padding: 5px 6px; gap: 5px; }
    .bg-switch-dot { width: 20px; height: 20px; }
}