/* ═══════════════════════════════════════════════════════
   5. 主题切换器 — FAB 按钮、面板、主题卡片网格
   ═══════════════════════════════════════════════════════ */

/* ─── 浮动按钮 ─── */
.theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--tech-font-title, system-ui, sans-serif), sans-serif; }
.theme-switcher-fab {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--tech-accent, #00d4ff); color: var(--tech-bg, #0a0e17);
    border: none; cursor: pointer; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(var(--tech-bg-rgb),0.3), 0 0 16px var(--tech-accent-dim, rgba(0,212,255,0.3));
    transition: all 0.25s ease;
}
.theme-switcher-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(var(--tech-bg-rgb),0.4), 0 0 24px var(--tech-accent-dim, rgba(0,212,255,0.5));
}

/* ─── 面板 ─── */
.theme-switcher-panel {
    position: absolute; bottom: 60px; right: 0;
    width: 280px; max-height: 400px; overflow-y: auto;
    background: var(--tech-surface, rgba(15,23,42,0.95));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--tech-border, rgba(0,212,255,0.15));
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(var(--tech-bg-rgb),0.5);
}
.theme-panel-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--tech-border, rgba(0,212,255,0.1));
}
.theme-panel-title {
    color: var(--tech-text, #e2e8f0);
    font-weight: 600; font-size: 0.95rem;
}
.theme-panel-title i { margin-right: 6px; color: var(--tech-accent, #00d4ff); }
.theme-panel-body { padding: 12px; }

/* ─── 主题网格 ─── */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 8px 10px;
    background: rgba(var(--tech-text-rgb), 0.04);
    border: 1px solid var(--tech-border, rgba(0,212,255,0.1));
    border-radius: 10px; cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    color: var(--tech-text-muted, #94a3b8);
}
.theme-card:hover {
    background: rgba(var(--tech-text-rgb), 0.08);
    border-color: var(--tech-accent, #00d4ff);
    color: var(--tech-text, #e2e8f0);
    transform: translateY(-2px);
}
.theme-card-active {
    border-color: var(--tech-accent, #00d4ff) !important;
    background: rgba(var(--tech-accent-rgb, 0,212,255),0.08) !important;
    color: var(--tech-text, #e2e8f0) !important;
    box-shadow: 0 0 12px var(--tech-accent-dim, rgba(0,212,255,0.2));
}

/* ─── 颜色预览 ─── */
.theme-preview {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.theme-preview-accent {
    width: 18px; height: 18px; border-radius: 50%;
}
.theme-card-name { font-size: 0.78rem; font-weight: 500; text-align: center; line-height: 1.2; }
.theme-check {
    position: absolute; top: 6px; right: 6px;
    font-size: 0.65rem; color: var(--tech-accent, #00d4ff);
}

/* ─── 主题面板过渡动画 ─── */
.theme-panel-enter-active, .theme-panel-leave-active { transition: all 0.25s ease; }
.theme-panel-enter, .theme-panel-leave-to { opacity: 0; transform: translateY(12px) scale(0.95); }

/* 移动端适配 */
@media (max-width: 480px) {
    .theme-switcher { bottom: 16px; right: 16px; }
    .theme-switcher-fab { width: 42px; height: 42px; font-size: 1rem; }
    .theme-switcher-panel { width: 250px; right: -8px; }
}