/* ============================================
   深色模式（body.fcj-dark）— 打字遊戲頁
   主題色不變：藍 #365A92 / 金 #f0a72e / 青 #2BEFBB
   ============================================ */

/* 頁面與文章容器 */
body.fcj-dark #article-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* 頁首列 */
body.fcj-dark .header-bar-container {
    background: #1c222c;
    border-bottom: 1.5px solid #2a3240;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

body.fcj-dark .header-bar-sub-title,
body.fcj-dark .header-bar-separator,
body.fcj-dark .header-bar-title {
    color: #c6cdd9;
}

body.fcj-dark .header-bar-icon i {
    color: #aeb6c4;
}

body.fcj-dark .header-bar-icon img[data-ext="svg"] {
    filter: brightness(0) invert(0.78);
}

body.fcj-dark .header-bar-icon.header-icon-active i {
    color: #5D84C1;
}

/* 文章字詞 — 未打字的預設色在深底上保持可讀 */
body.fcj-dark #article {
    color: #aab3c2;
}

body.fcj-dark .cangjie .word .display,
body.fcj-dark .pinyin .word .display,
body.fcj-dark .custom .word .display {
    color: #9aa3b3;
}

body.fcj-dark .cangjie .char .text,
body.fcj-dark .cangjie .char .code,
body.fcj-dark .pinyin .char .text,
body.fcj-dark .pinyin .char .code,
body.fcj-dark .custom .char .text,
body.fcj-dark .custom .char .code {
    color: #9aa3b3;
}

/* 英文／自訂模式的字框淺色邊線改深色 */
body.fcj-dark .english .char {
    border-color: #2c333f;
}

/* ── 英文模式深色：字母提亮、目前字母純白、打字回饋改深色調 ── */
/* 未打字／預設字母：接近純白，深底上清晰銳利 */
body.fcj-dark .english .char .text,
body.fcj-dark .english .char .code {
    color: var(--theme-text);
}

/* 目前字母：純白＋淡色字框＋亮邊，明確標示游標位置 */
body.fcj-dark .english .char.current .text,
body.fcj-dark .english .char.current .code {
    color: #ffffff;
}

body.fcj-dark .english .char.current {
    background: #2a3346;
    border-color: var(--theme-accent);
    box-shadow: 0 0 3px rgba(120, 140, 255, 0.55);
}

/* 打對／打錯／曾錯回饋：半透明深色底＋亮色字，取代淺色螢光底 */
body.fcj-dark .english .char.correct {
    background: rgba(57, 199, 22, 0.20) !important;
    color: #9be8a6 !important;
    border-color: rgba(57, 199, 22, 0.5);
}

body.fcj-dark .english .char.wrong {
    background: rgba(244, 67, 54, 0.24) !important;
    color: #ff9aa6 !important;
    border-color: rgba(244, 67, 54, 0.55);
}

body.fcj-dark .english .char.once-wronged.typed.correct {
    background: rgba(242, 153, 16, 0.22) !important;
    color: #f6c879 !important;
    border-color: rgba(242, 153, 16, 0.55);
}

/* 目前字詞：白底容器改深色、文字反白 */
body.fcj-dark .cangjie .word.current .word-char-text-container {
    background: #303949;
}

body.fcj-dark .cangjie .current.display,
body.fcj-dark .pinyin .current.display,
body.fcj-dark .english .current.display,
body.fcj-dark .custom .current.display {
    color: #f2f5fa;
}

/* 打對／打錯回饋底色改為半透明，避免刺眼 */
body.fcj-dark .cangjie .char.correct:not(.wrong):not(.once-wronged) {
    background: rgba(57, 199, 22, 0.16) !important;
}

body.fcj-dark .cangjie .word .char.typed.correct.once-wronged,
body.fcj-dark .cangjie .char.typed.correct.once-wronged {
    background: rgba(242, 153, 16, 0.18) !important;
}

/* 頁首 KOTECH 文字 logo 是黑色 PNG，深色下反白 */
body.fcj-dark .header-bar-logo-text {
    filter: brightness(0) invert(0.82);
}

/* 底部狀態列與鍵盤 */
body.fcj-dark #status-keyboard-container {
    background: rgba(16, 19, 25, 0.55);
}

body.fcj-dark #floating-keyboard {
    background: #20252f;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

body.fcj-dark .kb-key {
    background: #262c38;
    border: 1.5px solid #343c4b;
    color: var(--dm-text, #e8ecf3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

body.fcj-dark .kb-key .key-top,
body.fcj-dark .kb-key .key-bottom,
body.fcj-dark .kb-key .key-cangjie,
body.fcj-dark .kb-key .key-en,
body.fcj-dark .kb-key .key-en-lower {
    color: var(--dm-text, #e8ecf3);
}

/* 編碼提示（鍵帽次要字）維持較柔和，避免與主字爭奪注意 */
body.fcj-dark .kb-key .key-cangjie,
body.fcj-dark .kb-key .key-en-lower {
    color: var(--dm-text-dim, #aeb6c4);
}

body.fcj-dark .progress-bar-wrapper {
    background: #2a303c;
}

body.fcj-dark .progress-percentage {
    color: #9aa3b3;
}

body.fcj-dark .stat-label {
    color: #8b93a2;
}

body.fcj-dark .stat-value {
    color: #e8ebf2;
}

body.fcj-dark .stat-unit {
    color: #6f7785;
}

body.fcj-dark .keyboard-collapse-button,
body.fcj-dark .keyboard-expand-button {
    background: #262c38;
    color: #9aa3b3;
    border-color: #343c4b;
}

/* 打字儲存狀態小標 */
body.fcj-dark .typing-worker-status {
    background: rgba(30, 35, 45, 0.85);
    color: #aeb6c4;
}

/* 字級對話框深色化（沿用主題色） */
body.fcj-dark #font-size-dialog .font-size-dialog-content {
    background: #232834;
    color: #dde2ea;
}

body.fcj-dark #font-size-dialog .font-size-dialog-title,
body.fcj-dark #font-size-dialog .font-size-dialog-tip {
    color: #c6cdd9;
}

/* 倉頡表（淺色卡片）簡易深色化 */
body.fcj-dark #cangjie-chart-panel {
    background: #1d222b;
    color: #dde2ea;
}

/* ============================================
   深色模式 — 全域介面強化（共用 UI；中文文章字詞留待後續）
   一組可重用的色票，供下列規則統一取用
   ============================================ */
body.fcj-dark {
    --dm-surface: #232834;      /* 對話框 / 面板底 */
    --dm-surface-2: #2a3140;    /* 較高層級 / hover / 啟用態 */
    --dm-border: #343c4b;       /* 邊線 */
    --dm-text: #e8ecf3;         /* 主要文字 */
    --dm-text-dim: #aeb6c4;     /* 次要文字 */
    --dm-text-faint: #8b93a2;   /* 提示文字 */
}

/* 文章卡片：細邊線，與深色頁面背景明確區隔 */
body.fcj-dark #article-container {
    border: 1px solid var(--dm-border);
}

/* 深色捲軸（WebKit + Firefox）與選取色 */
body.fcj-dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
body.fcj-dark ::-webkit-scrollbar-track {
    background: #161b22;
}
body.fcj-dark ::-webkit-scrollbar-thumb {
    background: #353d4b;
    border-radius: 6px;
    border: 3px solid #161b22;
}
body.fcj-dark ::-webkit-scrollbar-thumb:hover {
    background: #475063;
}
body.fcj-dark {
    scrollbar-color: #353d4b #161b22;
    scrollbar-width: thin;
}
body.fcj-dark ::selection {
    background: rgba(93, 132, 193, 0.40);
    color: #f2f5fa;
}

/* SweetAlert2 提示／確認對話框深色化（在 body 層渲染，沿用 fcj-dark） */
body.fcj-dark .swal2-popup {
    background: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
}
body.fcj-dark .swal2-title,
body.fcj-dark .swal2-html-container {
    color: var(--dm-text);
}
body.fcj-dark .swal2-styled.swal2-cancel {
    background: var(--dm-surface-2);
    color: var(--dm-text-dim);
}
body.fcj-dark .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, 0.22);
}

/* AI 文章對話框深色化（原為淺色面板，深底上會刺眼） */
body.fcj-dark .ai-dialog-content {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
body.fcj-dark .ai-dialog-content::before {
    border-bottom-color: var(--dm-border);
}
body.fcj-dark .ai-tabs {
    background: #2f3a4d;
}
body.fcj-dark .ai-tab {
    color: var(--dm-text-dim);
}
body.fcj-dark .ai-tab-active {
    background: var(--dm-surface-2);
    color: var(--dm-text);
}
body.fcj-dark .ai-label,
body.fcj-dark .ai-time-label {
    color: var(--dm-text-dim);
}
body.fcj-dark .ai-tag,
body.fcj-dark .ai-time-option,
body.fcj-dark .ai-custom-btn,
body.fcj-dark .ai-reset-btn {
    background: var(--dm-surface-2);
    color: var(--dm-text-dim);
    border-color: var(--dm-border);
}
body.fcj-dark .ai-tag:hover,
body.fcj-dark .ai-time-option:hover,
body.fcj-dark .ai-custom-btn:hover,
body.fcj-dark .ai-reset-btn:hover {
    background: #333c4d;
}
body.fcj-dark .ai-tag-active,
body.fcj-dark .ai-time-option-active {
    background: var(--dm-surface-2);
    color: var(--dm-text);
    border-color: #5bd1a1;
}
body.fcj-dark .ai-preview {
    background: var(--dm-surface-2);
}
body.fcj-dark .ai-preview-label {
    color: var(--dm-text-faint);
}
body.fcj-dark .ai-preview-content {
    color: var(--dm-text);
}
body.fcj-dark .ai-slider::-webkit-slider-runnable-track,
body.fcj-dark .ai-slider::-moz-range-track {
    background: #3a4150;
}
body.fcj-dark .ai-slider-value {
    color: var(--dm-text);
}