/* ==========================================================================
   KUMO Japanese — 米白 × 海軍藍 主題層 (cream × navy)
   --------------------------------------------------------------------------
   用法：在 styles.css 之後載入，不要修改 styles.css。
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="kumo-theme-cream-navy.css">   <!-- 這行在後面 -->

   移除方式：刪掉上面那一行，全站回到原本配色。

   結構：
     1. 變數重定義（淺色 / 深色 / JLPT / N 級）
     2. 漸層按鈕 → 實心海軍藍
     3. 漸層標題文字 → 單色
     4. 側欄 → 單色米白
     5. 裝飾背景（格紋 / orb）關閉
     6. 狀態色（抹茶 / 赤陶 / 黃銅）
     7. 商店 ・ 寵物頁
     8. 表單 ・ 輸入 ・ 陰影收斂
   ========================================================================== */


/* ── 1. 變數 ───────────────────────────────────────────────────────────── */

:root,
body {
    /* 底層 */
    --bg:            #F7F4ED;   /* 暖米白，取代冷灰白 #FAFAF7 */
    --surface:       #EFEADF;
    --card:          #FFFDF8;
    --card-hover:    #F4F0E6;
    --card-border:   rgba(26,53,80,0.12);

    /* 文字 */
    --text:          #16304D;   /* 海軍藍 */
    --sub:           #55657A;
    --muted:         rgba(26,53,80,0.06);
    --muted-border:  rgba(26,53,80,0.14);

    /* 主色：實心海軍藍（原為粉藍 #A8C8E8） */
    --primary:       #1E3A5F;
    --primary-light: #3D5F87;
    --primary-glow:  rgba(30,58,95,0.22);
    --primary-dim:   rgba(30,58,95,0.08);

    /* 強調：黃銅（原為薰衣草紫 #C4B5E8） */
    --accent:        #A98A4B;
    --accent-dim:    rgba(169,138,75,0.14);

    /* 狀態 */
    --green:         #4F7A64;   /* 抹茶 */
    --green-dim:     rgba(79,122,100,0.14);
    --danger:        #B4553F;   /* 赤陶 */
    --danger-glow:   rgba(180,85,63,0.28);
    --danger-dim:    rgba(180,85,63,0.12);

    --input-bg:      rgba(26,53,80,0.05);

    /* 本主題新增：深色塊上的文字色、髮絲線 */
    --on-dark:       #F7F4ED;
    --hairline:      rgba(26,53,80,0.14);
    --hairline-soft: rgba(26,53,80,0.08);
}

/* 深色：深海軍藍底 + 米白字 */
.dark,
.dark body,
body.dark {
    --bg:            #101C2B;
    --surface:       #17263A;
    --card:          #17263A;
    --card-hover:    #1F3247;
    --card-border:   rgba(242,237,225,0.12);

    --text:          #F2EDE1;   /* 米白 */
    --sub:           #9FB0C2;
    --muted:         rgba(242,237,225,0.07);
    --muted-border:  rgba(242,237,225,0.14);

    --primary:       #8FB0D6;   /* 霧藍，取代螢光藍 #38BDF8 */
    --primary-light: #B3CBE4;
    --primary-glow:  rgba(143,176,214,0.24);
    --primary-dim:   rgba(143,176,214,0.14);

    --accent:        #C9A96A;
    --accent-dim:    rgba(201,169,106,0.16);

    --green:         #7FA894;
    --green-dim:     rgba(127,168,148,0.18);
    --danger:        #D98570;
    --danger-glow:   rgba(217,133,112,0.28);
    --danger-dim:    rgba(217,133,112,0.16);

    --input-bg:      rgba(242,237,225,0.07);

    --on-dark:       #101C2B;
    --hairline:      rgba(242,237,225,0.12);
    --hairline-soft: rgba(242,237,225,0.07);
}

/* N 級主題：只改色相強度，不再各自一套色系。
 *
 * 這裡必須把整組變數重新宣告，不能只給 --accent —— 少宣告不等於移除。
 * styles.css 的 body.lv-n5/n3/n1（:1164/:1189/:1208）各宣告 15 個變數、
 * body.dark.lv-n5/n3/n1（:1233/:1253/:1273）各宣告 16 個，而 body 是所有元素的
 * 祖先，變數解析吃 body.lv-nX 而不是 :root。只覆寫 --accent 的話，
 * 上面 :root 那組米白海軍藍對 N 級使用者（也就是全部使用者）等於無效。
 *
 * production 執行期實測（注入覆蓋層、body.className = 'lv-n5'）：
 *   --bg 在 :root 是 #F7F4ED，但 body 實際底色仍是 lv-n5 的 #F5FAF7；
 *   dark 更嚴重，body.dark.lv-n5 是一整組深綠（--bg #0A1A10、--primary #4ADE80）。
 *
 * 色值全部取自本檔上方的 :root 與 .dark 兩組，未新增任何顏色。
 * specificity 與 styles.css 對應區塊相同（body.lv-nX = 0,1,1；
 * body.dark.lv-nX = 0,2,1），本檔在 styles.css 之後載入，後寫的贏。
 */
body.lv-n5,
body.lv-n3,
body.lv-n1 {
    --bg:            #F7F4ED;
    --surface:       #EFEADF;
    --card-hover:    #F4F0E6;
    --card-border:   rgba(26,53,80,0.12);
    --muted:         rgba(26,53,80,0.06);
    --muted-border:  rgba(26,53,80,0.14);
    --text:          #16304D;
    --sub:           #55657A;
    --primary:       #1E3A5F;
    --primary-light: #3D5F87;
    --primary-glow:  rgba(30,58,95,0.22);
    --primary-dim:   rgba(30,58,95,0.08);
    --input-bg:      rgba(26,53,80,0.05);
}
body.lv-n5 { --accent: #4F7A64; --accent-dim: rgba(79,122,100,0.14); }
body.lv-n3 { --accent: #A98A4B; --accent-dim: rgba(169,138,75,0.14); }
body.lv-n1 { --accent: #B4553F; --accent-dim: rgba(180,85,63,0.12); }

/* 深色 × N 級。styles.css 的對應區塊多宣告一個 --card，這裡跟著補齊，
   否則卡片會留在深綠的 #162E1C。
   accent 取 .dark 那一組的單一值：來源檔沒有提供深色的分級 accent，不自行發明。 */
body.dark.lv-n5,
body.dark.lv-n3,
body.dark.lv-n1 {
    --bg:            #101C2B;
    --surface:       #17263A;
    --card:          #17263A;
    --card-hover:    #1F3247;
    --card-border:   rgba(242,237,225,0.12);
    --muted:         rgba(242,237,225,0.07);
    --muted-border:  rgba(242,237,225,0.14);
    --text:          #F2EDE1;
    --sub:           #9FB0C2;
    --primary:       #8FB0D6;
    --primary-light: #B3CBE4;
    --primary-glow:  rgba(143,176,214,0.24);
    --primary-dim:   rgba(143,176,214,0.14);
    --input-bg:      rgba(242,237,225,0.07);
    --accent:        #C9A96A;
    --accent-dim:    rgba(201,169,106,0.16);
}

/* JLPT 模式：跟著收成同一支海軍藍，僅比主題略淺以區分。
   排序必須在 N 級之後 —— body.jlpt-mode 與 body.lv-nX 的 specificity 相同
   （都是 0,1,1），後寫的贏；排在前面時實測 JLPT 的 #24466E 會被 N 級的
   #1E3A5F 蓋掉，JLPT 模式就失去區分。 */
body.jlpt-mode {
    --primary:       #24466E;
    --primary-light: #456A94;
    --primary-glow:  rgba(36,70,110,0.24);
    --primary-dim:   rgba(36,70,110,0.10);
    --accent:        #A98A4B;
    --accent-dim:    rgba(169,138,75,0.12);
    --card-border:   rgba(36,70,110,0.18);
}
.dark body.jlpt-mode,
body.dark.jlpt-mode {
    --primary:       #9BBADE;
    --primary-glow:  rgba(155,186,222,0.22);
    --primary-dim:   rgba(155,186,222,0.12);
    --accent:        #C9A96A;
    --accent-dim:    rgba(201,169,106,0.14);
}


/* ── 2. 漸層按鈕 → 實心海軍藍 ─────────────────────────────────────────── */
/* 原本 linear-gradient(135deg, #A8C8E8, #C4B5E8) 出現在下列元件 */

.level-btn.active,
.record-btn,
.replay-btn:hover,
.listen-play-btn,
.listen-gen-btn,
.listen-submit-btn,
.listen-q-num,
.listen-score-circle,
.wr-cta-primary,
.ex-tab.active,
.practice-tab.active,
.read-level-btn.active,
.read-type-btn.active,
.read-primary-btn,
.auth-brand-mark,
.auth-submit-btn,
.fp-submit-btn,
.sb-avatar,
.sb-logo-mark,
.mh-mission-card,
.practice-fab-btn,
.practice-fab-btn.fab-jlpt-mode {
    background: var(--primary) !important;
    background-image: none !important;
    color: var(--on-dark) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* 深色模式下，實心塊反轉成米白底深藍字 */
.dark .record-btn,
.dark .listen-play-btn,
.dark .listen-submit-btn,
.dark .listen-gen-btn,
.dark .read-primary-btn,
.dark .wr-cta-primary,
.dark .auth-submit-btn,
.dark .fp-submit-btn {
    background: var(--text) !important;
    color: var(--bg) !important;
}
.dark .record-btn svg,
.dark .listen-play-btn svg { fill: var(--bg) !important; }

/* 按鈕內的 icon 統一 */
.record-btn svg,
.listen-play-btn svg { fill: var(--on-dark) !important; }

/* hover / active 只做微幅明度變化，不放大陰影 */
.level-btn.active:hover,
.record-btn:hover,
.listen-play-btn:hover,
.listen-submit-btn:hover,
.listen-gen-btn:hover,
.read-primary-btn:hover,
.wr-cta-primary:hover,
.ex-tab.active:hover,
.practice-tab.active:hover {
    background: var(--primary-light) !important;
    transform: none !important;
    box-shadow: none !important;
}
.record-btn:active,
.listen-play-btn:active { transform: scale(0.97) !important; }

/* 錄音中 / 播放中 / 錯誤：狀態色，仍為實心 */
.record-btn.recording,
.listen-play-btn.playing {
    background: var(--danger) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.record-btn.processing {
    background: var(--sub) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.record-btn.error {
    background: var(--accent) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 進度條 */
.listen-progress-fill,
.np-bar-affinity,
.np-bar-energy {
    background: var(--primary) !important;
    background-image: none !important;
}

/* 卡片上的假漸層白底 */
.controls-card,
.stat-card,
.listen-player-card {
    background: var(--card) !important;
    background-image: none !important;
    border-color: var(--card-border) !important;
    box-shadow: none !important;
}
.listen-player-card { border-width: 1px !important; }


/* ── 3. 漸層標題文字 → 單色 ───────────────────────────────────────────── */

.page-title,
.page-header h1,
h1.gradient-text,
[class*="-title"][style*="background-clip"],
.wr-title,
.listen-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
}


/* ── 4. 側欄 → 單色米白 ───────────────────────────────────────────────── */

.sidebar,
body.jlpt-mode .sidebar {
    background: var(--card) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--hairline) !important;
    box-shadow: none !important;
}
.dark .sidebar,
.dark body.jlpt-mode .sidebar,
body.dark.jlpt-mode .sidebar {
    background: var(--card) !important;
    border-right: 1px solid var(--hairline) !important;
}

/* 目前頁：實心海軍藍 pill（原為藍紫漸層淡底） */
.sb-item.active,
body.jlpt-mode .sb-item.active {
    background: var(--primary) !important;
    background-image: none !important;
    color: var(--on-dark) !important;
    box-shadow: none !important;
}
.dark .sb-item.active {
    background: var(--text) !important;
    color: var(--bg) !important;
}
.sb-item:hover:not(.active) {
    background: var(--muted) !important;
    color: var(--text) !important;
}

.sb-logo-mark {
    /* logo mark 若是文字型，維持實心；若換成圖檔請改回 background: none */
    border-radius: 9px !important;
}


/* ── 5. 裝飾背景關閉 ──────────────────────────────────────────────────── */
/* 格紋、orb、放射漸層在米白底上會讓畫面變雜 */

body::before,
body::after {
    display: none !important;
}

body {
    background: var(--bg) !important;
    background-image: none !important;
}

.auth-page {
    background: var(--bg) !important;
    background-image: none !important;
}
.dark .auth-page {
    background: var(--bg) !important;
    background-image: none !important;
}

#page-shop,
.shop-page,
.np-page {
    background: var(--bg) !important;
    background-image: none !important;
}


/* ── 6. 狀態色（抹茶 / 赤陶 / 黃銅） ──────────────────────────────────── */

.badge-done,
.tag-done,
[class*="-correct"],
.chip-green {
    background: var(--green-dim) !important;
    color: var(--green) !important;
    border-color: transparent !important;
}
.badge-review,
.tag-review,
[class*="-wrong"],
[class*="-error"],
.chip-danger {
    background: var(--danger-dim) !important;
    color: var(--danger) !important;
    border-color: transparent !important;
}
.badge-today,
.tag-today,
.chip-accent {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
}

/* 老師帳號 / 等級之類的膠囊 */
.sb-teacher-badge,
.sb-pill {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
    border: none !important;
}

/* 任務領取鈕：原為橘黃漸層 */
.np-mission-claim {
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--on-dark) !important;
    box-shadow: none !important;
}

/* 親密度／能量條的左框線 */
.np-affinity-card { border-left: 3px solid var(--accent) !important; }


/* ── 7. 商店 ・ 寵物頁（原為藍紫系 #6075c6 → #927ad0） ───────────────── */

.shop-tab.active,
.shop-card-cta--buyable,
.shop-card-cta--free,
.shop-footer-btn--primary,
.shop-drawer-btn--primary,
.shop-cta-primary {
    background: var(--primary) !important;
    background-image: none !important;
    color: var(--on-dark) !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.dark .shop-tab.active,
.dark .shop-card-cta--buyable,
.dark .shop-footer-btn--primary,
.dark .shop-drawer-btn--primary {
    background: var(--text) !important;
    color: var(--bg) !important;
}

/* 商品圖底：改成單色 surface，讓商品圖本身是唯一顏色來源 */
.shop-feature-media,
.shop-card-media,
.shop-card--character .shop-card-media,
.shop-card--scenario .shop-card-media,
.shop-card--neko .shop-card-media,
.shop-card--appearance .shop-card-media,
.shop-card--social .shop-card-media,
.shop-card--function .shop-card-media,
.shop-drawer-media,
.shop-admin-card-media,
.shop-admin-preview {
    background: var(--surface) !important;
    background-image: none !important;
}

/* 稀有度光暈：保留但改為黃銅單色細框，不用彩虹漸層 */
.shop-card--tier-rare .shop-card-media::after,
.shop-card--tier-epic .shop-card-media::after,
.shop-card--tier-legendary .shop-card-media::after {
    background: none !important;
    box-shadow: inset 0 0 0 1.5px var(--accent) !important;
}

/* LINE 綠：品牌色，保留不動 */
/* .line-btn 不覆蓋 */


/* ── 8. 表單 ・ 輸入 ・ 陰影收斂 ──────────────────────────────────────── */

input,
textarea,
select {
    background: var(--card) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text) !important;
}
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: none !important;
}
input::placeholder,
textarea::placeholder { color: var(--sub) !important; opacity: 0.55 !important; }

/* 全站收斂陰影：只保留 modal / drawer 需要的層級感 */
.card,
.stat-card,
.controls-card,
.listen-player-card,
.shop-card,
.wr-card,
.read-card,
.np-card,
.sb-item,
.level-btn,
.ex-tab,
.practice-tab {
    box-shadow: none !important;
}

/* modal / drawer 保留柔和陰影 */
.modal,
.modal-card,
.shop-drawer,
.drawer,
.sheet {
    box-shadow: 0 18px 48px rgba(22,48,77,0.14) !important;
}
.dark .modal,
.dark .modal-card,
.dark .shop-drawer,
.dark .drawer,
.dark .sheet {
    box-shadow: 0 18px 48px rgba(0,0,0,0.42) !important;
}

/* 連結 */
a { color: var(--primary) !important; }
a:hover { color: var(--text) !important; }
.dark a { color: var(--primary) !important; }
.dark a:hover { color: var(--text) !important; }

/* 分隔線統一 */
hr,
.divider,
.sb-divider { border-color: var(--hairline) !important; background: var(--hairline) !important; }


/* ── 9. 首頁 scoped 色票對映（僅 light）──────────────────────────────────
 *
 * #page-home 在 index.html 有自己一組 --kumo-*，不吃全域變數，
 * 未對映時側欄變暖米白而首頁仍是冷灰藍 #DCE4E6，在側欄邊界形成接縫。
 *
 * 深色模式刻意不套用這組對映，首頁維持現況淺色。原因：
 * --kumo-navy 在首頁身兼兩種角色 —— 頁底上的標題文字（深色模式該變淺），
 * 以及白色表面上的深色填充（.nh-hero-cta 的字、.nh-mic 的圓、.nh-btn-navy 的底，
 * 深色模式仍必須是深色）。單一 token 反轉無法同時滿足兩者：直接對映會讓
 * CTA 變成白底米白字、麥克風變成白底上的米白圓，都不可讀。
 * 補齊需要 8 條深色覆寫並發明來源檔沒有的色值，屬獨立設計決策。
 *   → WORK-HOME-DARK-THEME
 *
 * 現況（深色下首頁整片淺色）雖與側欄有接縫，但自身一致且可讀，
 * 比「沒接縫但不可讀」好。
 */
body:not(.dark) #page-home {
    --kumo-bg:       var(--bg);
    --kumo-bg-deep:  var(--surface);
    --kumo-navy:     var(--text);
    --kumo-navy-2:   var(--primary-light);
    --kumo-ink:      var(--text);
    --kumo-mute:     var(--sub);
    --kumo-line:     var(--hairline);
    --kumo-blue-2:   var(--primary-light);
}

/* hero 是首頁唯一的深色塊，原本是硬寫的
   linear-gradient(155deg,#1E3A5F,#16304F,#122842)。改走變數，同樣只在 light。 */
body:not(.dark) #page-home .nh-hero {
    background: linear-gradient(155deg, var(--primary) 0%, var(--text) 100%);
}


/* ── 10. 側欄「口說」今日推薦 ──────────────────────────────────────────
 *
 * 實心底只代表「目前所在頁」：口說是目前頁時直接走第 4 節的 .sb-item.active，
 * 外觀與其他項目的 active 一致，這裡不再設例外。
 * 口說不在目前頁時是「今日推薦」：淡色底 + 左側色條 + 今日標記。
 * 2026-09-22 Galant 裁 A 取代 2026-08-15 C3/C7 的「口說是側欄唯一的深色 pill」
 * ——常駐深底會被讀成已選取，而本主題的 --primary 與 --text 對比只有 1.17，
 * 學生在首頁時分不出首頁（active）和口說（常駐 pill）哪一個是目前頁。
 *
 * 第 4 節的 .sb-item { box-shadow: none !important } 會清掉色條，
 * 所以這裡同樣帶 !important。淡色底排除 :hover，hover 交給第 4 節的
 * .sb-item:hover:not(.active)（var(--muted)），與一般項目同一套語彙。
 */
.sb-item.sb-item-speak:not(.active) {
    color: var(--text) !important;
    box-shadow: inset 3px 0 0 var(--primary) !important;
}
.sb-item.sb-item-speak:not(.active):not(:hover) {
    background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}
/* 「今日」標記：淡色底上走 --primary；目前頁的實心底上走 --on-dark 的 72%
   （--on-dark 是本檔定義的「深色塊上的元素色」，light 對 --primary 底、
   dark 對 --text 底，方向自動正確）。 */
.sb-item.sb-item-speak .sb-today-badge {
    color: var(--primary) !important;
}
.sb-item.sb-item-speak.active .sb-today-badge {
    color: color-mix(in srgb, var(--on-dark) 72%, transparent) !important;
}
/* 完成態：上兩條的 specificity 高於 styles.css 的 .sb-today-badge.is-done，
   不補這兩條的話完成標記不會變色。
   淡色底上直接用 var(--green) 在 light 只有 4.18（2026-09-22 實測），往 --text 混色拉開；
   實心底上直接用 var(--green) 對比不足（2026-08-15 實測 light 2.75、dark 2.27），
   往 --on-dark 方向混色拉開；jlpt-mode 的實心底較淺，--green 55% 在 jlpt 只有 4.22、
   45% 在 jlpt dark 只有 3.64（2026-09-22 實測），所以只取 30%。只用既有 token，未新增色值。 */
.sb-item.sb-item-speak .sb-today-badge.is-done {
    color: color-mix(in srgb, var(--green) 70%, var(--text)) !important;
}
.sb-item.sb-item-speak.active .sb-today-badge.is-done {
    color: color-mix(in srgb, var(--green) 30%, var(--on-dark)) !important;
}


/* ── 11. content-wrap 底色 ───────────────────────────────────────────────
 *
 * .page 的 max-width 是 1020px，內容區比它寬時（視窗約 >1258px）右側會露出
 * 畫布本色：html 與 body 的 background 都是 transparent，瀏覽器畫成白色，
 * 貼在頁面底色旁邊像一條白帶。實測 1440px 時右緣取樣為 #FFFFFF。
 *
 * 不動 .page{max-width:1020px} —— 那條管的是內容的可讀寬度，是刻意的。
 * 只讓包在外面的 .content-wrap 帶上底色，白帶就併回頁面底。
 */
.content-wrap {
    background: var(--bg);
}


/* ── 12. 側欄小膠囊的對比修正 ─────────────────────────────────────────────
 *
 * .plan-badge.plan-free 與 .today-status-chip 都是 --muted-border 底配 --sub 字。
 * 換成本主題的色票後實測 #55657A on #D7D9D9 = 4.21，差 0.29 未達 4.5（11.5px 小字）。
 * 同一組 token 內改用 --text 即可拉開，不動底色也不新增顏色。
 * .today-status-chip.done 有自己的色（specificity 較高），不受這條影響。
 */
.plan-badge.plan-free,
.today-status-chip {
    color: var(--text);
}

input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--fx-focus); outline-offset: 3px; }