/* ===== SuSuClient 主题系统 ===== */

/* 默认：护眼主题（Eye-care） */
:root,
[data-theme="eye-care"] {
    --t-body-bg: linear-gradient(180deg, #7aacbd 0%, #b3d9c5 30%, #C9E9D2 55%, #b3d9c5 75%, #7aacbd 100%);
    --t-container-bg: transparent;
    --t-top-bar-bg: rgba(212,236,224,0.55);
    --t-header-color: #fff;
    --t-header-shadow: 0 2px 4px rgba(44,95,110,0.3);
    --t-header-sub: rgba(255,255,255,0.85);
    --t-text: #1f2b48;
    --t-text-light: #5a6e5e;
    --t-card-bg: rgba(255,255,255,0.55);
    --t-card-border: rgba(255,255,255,0.3);
    --t-section-bg: rgba(255,255,255,0.55);
    --t-btn-primary-bg: linear-gradient(135deg, #5a9eb0, #3d7a8e);
    --t-btn-primary-color: #fff;
    --t-btn-outline-border: #3d6f7e;
    --t-btn-outline-color: #2c5a68;
    --t-input-bg: rgba(255,255,255,0.7);
    --t-input-border: #d0dde0;
    --t-footer-color: rgba(255,255,255,0.7);
    --t-user-bar-bg: transparent;
    --t-glass-blur: blur(12px);
    --t-tab-active: #3d7a8e;
    --t-tab-color: #4a8a9c;
    /* 游戏元素 — 护眼暖色半透明 */
    --t-game-display-bg: rgba(255,255,255,0.55);
    --t-game-display-border: rgba(180,210,200,0.5);
    --t-game-option-bg: rgba(255,255,250,0.55);
    --t-game-option-border: rgba(160,200,190,0.45);
    --t-game-speak-bg: rgba(235,245,240,0.6);
    --t-game-link-zh-bg: rgba(255,250,235,0.65);
    --t-game-link-zh-border: rgba(210,185,140,0.5);
    --t-game-link-eng-bg: rgba(235,245,252,0.6);
    --t-game-link-eng-border: rgba(150,190,215,0.5);
    --t-game-spell-area-bg: rgba(240,248,244,0.5);
    --t-game-spell-area-border: rgba(170,200,185,0.4);
    --t-game-letter-bg: rgba(240,245,250,0.65);
    --t-game-letter-border: rgba(160,190,210,0.5);
    --t-game-slot-user-bg: rgba(255,240,210,0.7);
    --t-game-slot-user-border: rgba(220,175,120,0.5);
    --t-game-slot-empty-bg: rgba(235,238,242,0.5);
    --t-game-slot-empty-border: rgba(175,190,200,0.4);
    --t-game-slot-fixed-bg: rgba(220,232,248,0.65);
    --t-game-slot-fixed-border: rgba(140,175,210,0.5);
    --t-game-preview-bg: rgba(240,246,248,0.55);
    --t-game-preview-border: rgba(180,205,215,0.45);
    --t-game-match-area-bg: rgba(255,255,255,0.4);
    --t-game-match-card-zh-bg: rgba(255,250,238,0.65);
    --t-game-match-card-zh-border: rgba(215,190,148,0.5);
    --t-game-match-card-eng-bg: rgba(235,245,252,0.6);
    --t-game-match-card-eng-border: rgba(150,190,215,0.5);
    --t-game-link-selected-bg: rgba(255,240,170,0.7);
    --t-game-link-selected-border: rgba(220,165,50,0.5);
}

/* 明亮主题（Light） */
[data-theme="light"] {
    --t-body-bg: linear-gradient(145deg, #f0f7ff 0%, #e6eff9 100%);
    --t-container-bg: rgba(255,255,255,0.96);
    --t-top-bar-bg: #fff;
    --t-header-color: #fff;
    --t-header-shadow: none;
    --t-header-sub: rgba(255,255,255,0.85);
    --t-text: #1e2b46;
    --t-text-light: #6c7c9e;
    --t-card-bg: #fff;
    --t-card-border: #e2eaf5;
    --t-section-bg: #fff;
    --t-btn-primary-bg: linear-gradient(135deg, #2c3e66, #3d5280);
    --t-btn-primary-color: #fff;
    --t-btn-outline-border: #2c3e66;
    --t-btn-outline-color: #2c3e66;
    --t-input-bg: #fff;
    --t-input-border: #d0dde0;
    --t-footer-color: #8a9ab0;
    --t-user-bar-bg: #f8fafd;
    --t-glass-blur: none;
    --t-tab-active: #2c3e66;
    --t-tab-color: #6c7c9e;
    /* 游戏元素 */
    --t-game-display-bg: #fff;
    --t-game-display-border: #d8e0ec;
    --t-game-option-bg: #f7f9fd;
    --t-game-option-border: #d8e0ec;
    --t-game-speak-bg: #eef2f8;
    --t-game-link-zh-bg: #fffcf2;
    --t-game-link-zh-border: #f0e0b0;
    --t-game-link-eng-bg: #eaf2fd;
    --t-game-link-eng-border: #b8cde8;
    --t-game-spell-area-bg: #f7f9fc;
    --t-game-spell-area-border: #d0dae5;
    --t-game-letter-bg: #edf2fb;
    --t-game-letter-border: #c5d4ea;
    --t-game-slot-user-bg: #fff3df;
    --t-game-slot-user-border: #f0c878;
    --t-game-slot-empty-bg: #f0f3f7;
    --t-game-slot-empty-border: #c0cad8;
    --t-game-slot-fixed-bg: #dce6f8;
    --t-game-slot-fixed-border: #98b0d8;
    --t-game-preview-bg: #f3f7fd;
    --t-game-preview-border: #d8e2f0;
    --t-game-match-area-bg: #fff;
    --t-game-match-card-zh-bg: #fffcf4;
    --t-game-match-card-zh-border: #f0e2bc;
    --t-game-match-card-eng-bg: #eaf2fd;
    --t-game-match-card-eng-border: #b8cde8;
    --t-game-link-selected-bg: #fff3b8;
    --t-game-link-selected-border: #e8b030;
}

/* 黑暗主题（Dark） */
[data-theme="dark"] {
    --t-body-bg: linear-gradient(180deg, #1a1d2e 0%, #252840 40%, #1e2235 70%, #1a1d2e 100%);
    --t-container-bg: transparent;
    --t-top-bar-bg: rgba(30,33,50,0.7);
    --t-header-color: #e0e0e0;
    --t-header-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --t-header-sub: rgba(200,200,210,0.7);
    --t-text: #d0d4e0;
    --t-text-light: #8a8ea0;
    --t-card-bg: rgba(40,44,65,0.7);
    --t-card-border: rgba(255,255,255,0.08);
    --t-section-bg: rgba(40,44,65,0.7);
    --t-btn-primary-bg: linear-gradient(135deg, #5a6db0, #3d4f8e);
    --t-btn-primary-color: #e0e4f0;
    --t-btn-outline-border: #6a7aaa;
    --t-btn-outline-color: #b0b8d0;
    --t-input-bg: rgba(50,55,78,0.8);
    --t-input-border: #3a3f58;
    --t-footer-color: rgba(160,165,180,0.6);
    --t-user-bar-bg: transparent;
    --t-glass-blur: blur(12px);
    --t-tab-active: #7a8cc0;
    --t-tab-color: #8a8ea0;
    /* 游戏元素 */
    --t-game-display-bg: rgba(40,44,68,0.7);
    --t-game-display-border: rgba(255,255,255,0.1);
    --t-game-option-bg: rgba(50,55,80,0.6);
    --t-game-option-border: rgba(255,255,255,0.1);
    --t-game-speak-bg: rgba(60,65,95,0.5);
    --t-game-link-zh-bg: rgba(60,55,30,0.5);
    --t-game-link-zh-border: rgba(200,170,80,0.3);
    --t-game-link-eng-bg: rgba(30,45,70,0.5);
    --t-game-link-eng-border: rgba(100,140,200,0.3);
    --t-game-spell-area-bg: rgba(40,45,68,0.5);
    --t-game-spell-area-border: rgba(255,255,255,0.1);
    --t-game-letter-bg: rgba(55,65,95,0.6);
    --t-game-letter-border: rgba(130,155,200,0.3);
    --t-game-slot-user-bg: rgba(80,60,30,0.5);
    --t-game-slot-user-border: rgba(200,150,60,0.3);
    --t-game-slot-empty-bg: rgba(50,55,78,0.5);
    --t-game-slot-empty-border: rgba(255,255,255,0.08);
    --t-game-slot-fixed-bg: rgba(40,55,85,0.6);
    --t-game-slot-fixed-border: rgba(100,130,180,0.3);
    --t-game-preview-bg: rgba(45,50,75,0.5);
    --t-game-preview-border: rgba(255,255,255,0.1);
    --t-game-match-area-bg: rgba(40,44,68,0.5);
    --t-game-match-card-zh-bg: rgba(60,55,30,0.5);
    --t-game-match-card-zh-border: rgba(200,170,80,0.3);
    --t-game-match-card-eng-bg: rgba(30,45,70,0.5);
    --t-game-match-card-eng-border: rgba(100,140,200,0.3);
    --t-game-link-selected-bg: rgba(120,100,30,0.5);
    --t-game-link-selected-border: rgba(220,170,40,0.4);
}

/* ===== 全局元素主题化 ===== */

body {
    background: var(--t-body-bg) !important;
    color: var(--t-text) !important;
}
/* 用伪元素固定背景，保持视觉效果同时避免移动端滚动重绘 */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--t-body-bg);
    z-index: -1;
    pointer-events: none;
}

body.app-layout .container {
    background: var(--t-container-bg) !important;
}

/* 顶部栏 */
.top-bar {
    background: var(--t-top-bar-bg) !important;
    backdrop-filter: var(--t-glass-blur) !important;
    -webkit-backdrop-filter: var(--t-glass-blur) !important;
}
.top-bar .header {
    background: none !important;
}
.top-bar .header h1 {
    color: var(--t-header-color) !important;
    text-shadow: var(--t-header-shadow) !important;
}
.top-bar .header p {
    color: var(--t-header-sub) !important;
}
.user-bar {
    background: var(--t-user-bar-bg) !important;
}

/* 卡片 / section */
.section,
.nav-card,
.stat-card {
    background: var(--t-section-bg) !important;
    backdrop-filter: var(--t-glass-blur) !important;
    -webkit-backdrop-filter: var(--t-glass-blur) !important;
    color: var(--t-text) !important;
}

.stat-label { color: var(--t-text-light) !important; }
.stat-val { color: var(--t-text) !important; }

/* 按钮 */
.btn-primary {
    background: var(--t-btn-primary-bg) !important;
    color: var(--t-btn-primary-color) !important;
    border: none !important;
}
.btn-outline {
    background: rgba(255,255,255,0.3) !important;
    backdrop-filter: var(--t-glass-blur) !important;
    -webkit-backdrop-filter: var(--t-glass-blur) !important;
    border-color: var(--t-btn-outline-border) !important;
    color: var(--t-btn-outline-color) !important;
    font-weight: 600 !important;
}

/* 表单 */
input, select, textarea {
    background: var(--t-input-bg) !important;
    border-color: var(--t-input-border) !important;
    color: var(--t-text) !important;
}

/* 底部 */
.footer-text { color: var(--t-footer-color) !important; }

/* 章节 Tab */
.chapter-tab {
    color: var(--t-tab-color) !important;
}
.chapter-tab.active {
    color: var(--t-tab-active) !important;
    border-color: var(--t-tab-active) !important;
}

/* 单词列表行 */
.word-row {
    border-bottom-color: var(--t-card-border) !important;
}

/* ===== 游戏元素主题化 ===== */

/* 单词展示区 */
.word-display {
    background: var(--t-game-display-bg) !important;
    border-color: var(--t-game-display-border) !important;
}

/* 选项按钮 */
.opt-btn {
    background: var(--t-game-option-bg) !important;
    border-color: var(--t-game-option-border) !important;
    color: var(--t-text) !important;
}

/* 发音按钮 */
.speak-btn {
    background: var(--t-game-speak-bg) !important;
}

/* 连连看卡片 */
.match-card.zh-card {
    background: var(--t-game-link-zh-bg) !important;
    border-color: var(--t-game-link-zh-border) !important;
}
.match-card.eng-card {
    background: var(--t-game-link-eng-bg) !important;
    border-color: var(--t-game-link-eng-border) !important;
}
.match-card.selected {
    background: var(--t-game-link-selected-bg) !important;
    border-color: var(--t-game-link-selected-border) !important;
}

/* 连线区域 */
.match-area {
    background: var(--t-game-match-area-bg) !important;
}

/* 消消乐卡片 — 颜色由 words-game-match.html 内联样式控制 */

/* 拼写游戏 */
.spell-area {
    background: var(--t-game-spell-area-bg) !important;
    border-color: var(--t-game-spell-area-border) !important;
}
.letter-btn {
    background: var(--t-game-letter-bg) !important;
    border-color: var(--t-game-letter-border) !important;
    color: var(--t-text) !important;
}
.spell-slot.user {
    background: var(--t-game-slot-user-bg) !important;
    border-color: var(--t-game-slot-user-border) !important;
}
.spell-slot.empty {
    background: var(--t-game-slot-empty-bg) !important;
    border-color: var(--t-game-slot-empty-border) !important;
}
.spell-slot.fixed {
    background: var(--t-game-slot-fixed-bg) !important;
    border-color: var(--t-game-slot-fixed-border) !important;
}
.word-preview-bar {
    background: var(--t-game-preview-bg) !important;
    border-color: var(--t-game-preview-border) !important;
}

/* 面包屑导航 — 位于 top-bar 内部 */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 20px 10px;
    margin: 0;
    font-size: 0.78rem;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0;
    overflow-x: auto;
    white-space: nowrap;
}
.breadcrumb-link {
    color: var(--t-text-light) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.breadcrumb-link:hover {
    color: var(--t-btn-outline-color) !important;
    text-decoration: underline;
}
.breadcrumb-current {
    color: var(--t-text) !important;
    font-weight: 700;
}
.breadcrumb-sep {
    color: var(--t-text-light) !important;
    opacity: 0.5;
    font-size: 1rem;
    margin: 0 2px;
    user-select: none;
}

/* 主题切换按钮 */
.theme-toggle-btn {
    background: none;
    border: 1.5px solid currentColor;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    white-space: nowrap;
    margin-right: 6px;
}
.theme-toggle-btn:hover { opacity: 1; }

/* 加载文字 */
.loading { color: var(--t-text-light) !important; }

/* 空状态 */
.empty-state { color: var(--t-text-light) !important; }