/* 全局樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* hidden 屬性必須勝過元件自己的 display。
   瀏覽器 UA 樣式表的 [hidden]{display:none} 沒有 !important，所以任何用 class
   選擇器寫 display 的元件（例如 .filter-scope-notice、.preview-school-picker）
   都會蓋掉它，讓 JS 的 el.hidden = true 變成無效指令、元素永遠顯示。
   放在這裡一次解決，新元件也不會再踩到。 */
[hidden] {
    display: none !important;
}

/* ==================== 功能分群背景主題（Single Source of Truth） ==================== */
/* 7 組分群背景漸層；任何頁面切換色系僅需修改本區塊 */
:root {
    /* 純色分類背景（無漸層）。
       7 群各取一個明顯不同的色相，淺色高明度確保深色文字可讀性（WCAG AA 以上）。
       切換某群顏色只需改本區塊對應的一行。 */

    /* Group 1：角色探索流程（薄荷綠 mint, hue ~150°） — explore, quiz, character_analysis */
    --bg-group-1: #dcefe4;

    /* Group 2：資訊三件套（天藍 sky blue, hue ~218°） — education/announcements, education/usage_guides, about */
    --bg-group-2: #dde8fa;

    /* Group 3：數位人文課程（暖琥珀沙 amber, hue ~42°） — internal/external/certification_courses */
    --bg-group-3: #f7ead0;

    /* Group 4：後台管理（薰衣草紫 lavender, hue ~268°） — admin/* */
    --bg-group-4: #e8e1f5;

    /* Group 5：資料統計（青綠 teal, hue ~190°） — admin/statistics, recent/historical_statistics */
    --bg-group-5: #d4edf0;

    /* Group 6：個人/認證（玫瑰粉 rose, hue ~342°） — profile, login */
    --bg-group-6: #fbdfe7;

    /* Group 7：AI 聊天（中性暖灰 neutral） — chat */
    --bg-group-7: #eeeeea;

    /* 文字色 — 全站轉淺底後預設使用深字 */
    --text-on-light: #2c3e50;
    --text-on-dark: #fff;

    /* 標題色 — 取代原本米色／金色漸層（為深底設計）。
       使用品牌綠 #a4b494 為錨點的深綠漸層，與所有淺色背景皆有足夠對比 */
    --title-gradient-light:
        linear-gradient(135deg, #2c4a3a 0%, #4a6e58 35%, #6c8f7a 70%, #5d7d6a 100%);
}

/* 套用此 class 即取得滿版純色背景；實際顏色由各頁 CSS 透過 var(--bg-group-N) 指定。
   背景已改為純色，不再有漸層動畫。 */
.page-background,
.page-background--static {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* 純色背景：集中停用各頁殘留的「整頁氛圍光暈」overlay（radial/conic 漸層 + atmosphereShift 動畫），
   讓每個分類色維持乾淨純色、彼此區隔更明顯。
   僅針對整頁 overlay（body 與 chat wrapper 的 ::before），不影響卡片/按鈕等元件裝飾用的 ::before。 */
body::before,
.chat-page-wrapper::before {
    display: none !important;
}

/* ==================== 主視覺 hero 陰影降低（全站一致） ====================
   集中覆寫各頁重複／不同命名的 hero 陰影，讓「小苗 icon + 大標題 + 底線」在每一頁
   都降低到相同程度。涵蓋 .section-header（多數頁）與 .analysis-header（角色分析）、
   .hero-content（課程頁副標）等變體。
   icon 的 logoBreathing、底線的 decorativeLineFlow/subtitleUnderlineFlow 動畫會在 keyframes
   內動態設定 filter/box-shadow（動畫優先序高於一般宣告），故凍結類用 !important；
   大標題文字的 filter 為靜態（動畫只動漸層位移），靠特異度覆寫即可，仍加 !important 求一致。 */

/* hero 小苗 icon */
main.page-background .section-header img,
main.page-background .analysis-header img {
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 10px rgba(227, 219, 116, 0.2)) !important;
}

main.page-background .section-header img:hover,
main.page-background .analysis-header img:hover {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 16px rgba(227, 219, 116, 0.4)) !important;
}

/* hero 大標題文字陰影（各頁標題命名不同，全部統一降低） */
main.page-background .page-title,
main.page-background .section-header h1,
main.page-background .section-header h2,
main.page-background .explore-title,
main.page-background .quiz-title,
main.page-background .about-title,
main.page-background .analysis-title,
main.page-background .character-title,
main.page-background .profile-header h1 {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15)) !important;
}

/* hero 標題底線光暈（含課程頁副標底線） */
main.page-background .section-header::after,
main.page-background .analysis-header::after,
main.page-background .hero-content p::after {
    box-shadow: 0 0 8px rgba(101, 199, 208, 0.2) !important;
}

/* 問卷管理「目前問卷」標頭，與其他內容卡片同一標準陰影 */
main.page-background .current-quiz-header {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* ==================== i 說明提示框（深底）文字色修正 ====================
   .ability-tooltip / .difficulty-tooltip 為深色背景設計，但全站轉淺底主題後
   其內文沿用 var(--text-on-light)（深色 #2c3e50），造成「深字配深底」對比僅約 1.2:1
   幾乎不可讀（出現在新增課程的課程難易度／培養能力等 i 提示框）。
   這些提示框維持深底，文字一律改用淺色；用 !important 蓋過各頁（含 #teacherCourseModal
   的 ID 選擇器、body 層級 tooltip-active）原本的深字宣告。 */
.ability-tooltip .tooltip-content,
.ability-tooltip .ability-item,
.difficulty-tooltip .tooltip-content,
.difficulty-tooltip .ability-item,
body > .ability-tooltip.tooltip-active .tooltip-content,
body > .ability-tooltip.tooltip-active .ability-item,
body > .difficulty-tooltip.tooltip-active .tooltip-content,
body > .difficulty-tooltip.tooltip-active .ability-item {
    color: rgba(255, 255, 255, 0.9) !important;
}

.ability-tooltip .ability-item strong,
.difficulty-tooltip .ability-item strong,
body > .ability-tooltip.tooltip-active .ability-item strong,
body > .difficulty-tooltip.tooltip-active .ability-item strong {
    color: #ffffff !important;
}

/* 雷達圖 hover 提示框（測驗結果頁）同為深底，標題／百分比原本也是深字。
   標題與百分比改淺色，數值改亮青色以在深底上清楚可讀。 */
#radar-tooltip .tooltip-title {
    color: #ffffff !important;
}

#radar-tooltip .tooltip-percentage {
    color: rgba(255, 255, 255, 0.85) !important;
}

#radar-tooltip .tooltip-value {
    color: #7fdce8 !important;
}

/* i 提示框 hover 完整呈現：移到 body 後強制可見、限制高度不超過視窗、必要時內部捲動；
   縮小字體與間距讓內容更易一次完整顯示（搭配 common.js 的視窗夾位定位）。 */
body > .ability-tooltip.tooltip-active,
body > .difficulty-tooltip.tooltip-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.15rem !important;
}

body > .ability-tooltip.tooltip-active .ability-item,
body > .difficulty-tooltip.tooltip-active .ability-item {
    padding: 0.45rem 0 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
}

body > .ability-tooltip.tooltip-active .ability-item strong,
body > .difficulty-tooltip.tooltip-active .ability-item strong {
    font-size: 0.86rem !important;
}

/* 頁面主標題在淺色背景下使用深綠漸層（覆寫各頁原本米色／金色漸層，原為深底而設計） */
.page-title,
.explore-title,
.quiz-title,
.analysis-title,
.about-title,
.profile-header,
.profile-header h1,
.character-title,
.section-header h1,
.section-header h2 {
    background: var(--title-gradient-light) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* 全淺底主題 — body 預設深字。各頁面 CSS 內 body { color: var(--text-on-dark) }
   可保留（深字 var 在 :root 變更後也已轉為深色），但若 main 仍套深底群組就會回到白字 */
body {
    color: var(--text-on-light);
}

/* 下拉選單 <option> baseline（淺底主題下強制白底深字，避免新頁面忘記覆寫導致看不見） */
select option,
select optgroup {
    background-color: #ffffff;
    color: var(--text-on-light);
}

/* 全站下拉 trigger 跟「校內課程」一致 — 玻璃感半透明背景，跟頁面背景融合。
   用 main.page-background 提升 specificity 至 (0,2,1) 以覆蓋 page CSS 內
   .form-select (0,1,0) 與 .actions-section .form-select (0,2,0) 的舊白底定義。
   注意：不動 .form-input / .form-control / option — 輸入框與下拉清單仍須白底深字才能讀。 */
main.page-background .form-select,
main.page-background .filter-select,
main.page-background .pills-trigger {
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.25);
}

main.page-background .form-select:hover,
main.page-background .filter-select:hover,
main.page-background .pills-trigger:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(44, 62, 80, 0.4);
}

main.page-background .form-select:focus,
main.page-background .filter-select:focus,
main.page-background .pills-filter.active .pills-trigger {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(101, 199, 208, 0.5);
}

/* disabled 狀態用實心淺灰底取代玻璃感，明確區分「不可互動」 */
main.page-background .form-select:disabled,
main.page-background .filter-select:disabled {
    background-color: #f1f5f9;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(44, 62, 80, 0.18);
    cursor: not-allowed;
}

/* 全站「新增 XXX」主要動作按鈕（.btn-primary）— 深綠實心 + 白字，跟所有淺色 group 背景拉開明度差，
   跨頁視覺一致。用 main.page-background .btn-primary (0,2,1) 覆寫各 page CSS 內舊的淺綠漸層 (0,1,0)。 */
main.page-background .btn-primary {
    background: linear-gradient(135deg, #2c4a3a 0%, #4a6e58 50%, #6c8f7a 100%) !important;
    color: #ffffff !important;
    border: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow:
        0 4px 14px rgba(44, 74, 58, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
}

main.page-background .btn-primary:hover {
    background: linear-gradient(135deg, #1d3729 0%, #2c4a3a 50%, #4a6e58 100%) !important;
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(44, 74, 58, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

main.page-background .btn-primary:active {
    transform: translateY(0);
    box-shadow:
        0 3px 10px rgba(44, 74, 58, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

main.page-background .btn-primary i,
main.page-background .btn-primary svg {
    color: inherit;
}

/* 全站列表操作按鈕（編輯 / 刪除 / 影片 / 檢視）— 飽和色實心底配白字圖示，跨頁一致對比 */
main.page-background .btn-action,
main.page-background .btn-action--edit,
main.page-background .btn-action--delete,
main.page-background .btn-action--video,
main.page-background .btn-action--view,
main.page-background .btn-action--copy,
main.page-background .btn-edit,
main.page-background .btn-delete,
main.page-background .btn-success,
main.page-background .btn-danger {
    color: #ffffff;
}

main.page-background .btn-action i,
main.page-background .btn-action svg,
main.page-background .btn-action--edit i,
main.page-background .btn-action--delete i,
main.page-background .btn-action--video i,
main.page-background .btn-edit i,
main.page-background .btn-delete i,
main.page-background .btn-success i,
main.page-background .btn-danger i {
    color: inherit;
}

/* ==================== 回收桶（軟刪除）共用樣式（Plan 10B） ====================
   還原鈕與刪除時間欄位，供各管理頁「回收桶」檢視共用（user/certification/announcements/
   usage_guides/digital_tool/course_management 等 btn-action 系頁面）。這兩個 class
   全站任何頁面 CSS 皆未定義，故在此提供完整樣式（非僅覆寫）。 */

/* 還原鈕：比照 .btn-action--edit/--delete 的漸層＋hover 結構，只換成綠色系（#16a34a 家族），
   與 --edit 的綠（#28a745/#20c997）區隔以避免混淆。
   用 .btn-action.btn-action--restore (0,2,0)：部分頁面（如公告）的 .btn-action 基底自帶
   半透明白玻璃底且晚於本檔載入，(0,1,0) 同權重會被蓋掉、綠底變淡不可辨。 */
.btn-action.btn-action--restore {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
}

.btn-action.btn-action--restore:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

/* 回收桶「刪除時間」欄：僅回收桶檢視（table.trash-mode）顯示表頭；
   資料列的 td 由各頁 JS 只在回收桶模式渲染 */
table th.col-deleted-at {
    display: none;
    white-space: nowrap;
}

table.trash-mode th.col-deleted-at {
    display: table-cell;
}

/* 回收桶檢視多一欄後空間變擠，表頭一律不折行 */
table.trash-mode thead th {
    white-space: nowrap;
}

/* 回收桶檢視：操作欄只剩還原鈕，於儲存格內置中（權重壓過各頁按鈕群的靠邊排列） */
table.trash-mode td .table-action-buttons,
table.trash-mode td .action-buttons,
table.trash-mode td .action-group {
    display: flex;
    justify-content: center;
}

td.col-deleted-at {
    white-space: nowrap;
}

/* 刪除時間欄位（回收桶檢視顯示 deleted_at 的 span） */
.deleted-at {
    font-size: .85em;
    color: #888;
    white-space: nowrap;
}

/* ==================== 結束回收桶共用樣式 ==================== */

/* Modal — 跟頁面淺綠玻璃感風格一致：較淺的深字色遮罩 + 背景模糊，搭配玻璃感卡片。
   用 body .modal (0,1,1) 覆寫 page CSS 的 .modal (0,1,0)。 */
body .modal {
    background: rgba(44, 62, 80, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* modal-content 玻璃感卡片，跟 .stat-card / .course-table-section 同風格 */
.modal .modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    color: var(--text-on-light);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 60px rgba(44, 62, 80, 0.2);
}

.modal .modal-header {
    border-bottom-color: rgba(44, 62, 80, 0.1);
}

.modal .modal-footer {
    border-top-color: rgba(44, 62, 80, 0.1);
}

/* Modal 內 form 元素：加深邊框，跟玻璃感 modal 卡片有區隔 */
.modal .modal-content .form-input,
.modal .modal-content .form-control,
.modal .modal-content .form-select,
.modal .modal-content textarea {
    border-color: rgba(44, 62, 80, 0.18);
}

.modal .modal-content .form-input:focus,
.modal .modal-content .form-control:focus,
.modal .modal-content .form-select:focus,
.modal .modal-content textarea:focus {
    border-color: rgba(101, 199, 208, 0.6);
}

/* ==================== 結束功能分群背景主題 ==================== */

html, body {
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden; /* 防止水平滾動條 */
    overflow-y: auto; /* 確保只有一個垂直滾動條 */
}

body {
    font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
    line-height: 1.6;
    background-color: #fff;
}

/* ==================== 角色預覽模式樣式 ==================== */

/* 預覽模式時的 body 調整 */
body.is-previewing {
    padding-top: 48px; /* 為預覽提示條預留空間 */
}

body.is-previewing header {
    top: 48px;
}

/* 預覽模式提示條 */
.preview-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(135deg, #a4b494 0%, #8fa67f 100%);
    color: white;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(164, 180, 148, 0.3);
}

.preview-content {
    max-width: 1920px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 2rem;
    font-size: 0.95rem;
}

.preview-content i.fa-eye {
    font-size: 1.1rem;
}

.preview-content strong {
    font-weight: 600;
}

.btn-end-preview {
    background: #e8976a;
    border: none;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    margin-left: 16px;
}

.btn-end-preview:hover {
    background: #d88559;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(232, 151, 106, 0.4);
}

.btn-end-preview i {
    font-size: 0.8rem;
}

/* 角色預覽下拉選單 */
.preview-dropdown {
    position: relative;
    display: inline-block;
}

.btn-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #a4b494;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-preview:hover {
    background: #8fa67f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(164, 180, 148, 0.4);
}

.btn-preview i.fa-eye {
    font-size: 0.95rem;
}

.btn-preview .preview-caret {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.preview-dropdown.open .preview-caret {
    transform: rotate(180deg);
}

.preview-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1002;
}

.preview-dropdown.open .preview-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 預覽學校選擇器：只在點「行政人員視角」後展開（見 common.js 的 startRolePreview） */
.preview-school-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
}

.preview-school-picker label {
    font-size: 0.78rem;
    color: #6b7280;
}

.preview-school-picker select {
    font-size: 0.88rem;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #333;
    max-width: 220px;
}

.preview-school-picker button {
    font-size: 0.85rem;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: #12717d;
    color: #fff;
    cursor: pointer;
}

.preview-school-picker button:hover {
    background: #0e5b65;
}

.preview-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.preview-dropdown-menu a:hover {
    background-color: #f8f9fa;
    color: #a4b494;
}

.preview-dropdown-menu a.active {
    background-color: #f8f9fa;
    color: #e8976a;
}

.preview-dropdown-menu a i {
    width: 18px;
    text-align: center;
    color: #666;
    transition: color 0.2s ease;
}

.preview-dropdown-menu a:hover i {
    color: #a4b494;
}

.preview-dropdown-menu a.active i {
    color: #e8976a;
}

/* 響應式 - 預覽模式 */
@media (max-width: 768px) {
    .preview-bar {
        height: auto;
        min-height: 48px;
        padding: 8px 0;
    }

    .preview-content {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 1rem;
        font-size: 0.85rem;
    }

    .btn-end-preview {
        margin-left: 0;
        padding: 5px 12px;
        font-size: 0.8rem;
    }

    body.is-previewing {
        padding-top: 56px;
    }

    body.is-previewing header {
        top: 56px;
    }

    .btn-preview {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .btn-preview span {
        display: none; /* 手機版隱藏文字，只顯示圖標 */
    }

    .preview-dropdown-menu {
        right: -10px;
        min-width: 160px;
    }
}

/* ==================== 結束角色預覽模式樣式 ==================== */

/* 導航欄樣式 */
header {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 4rem;
}

.logo img {
    height: 50px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500 ;
    transition: color 0.3s ease;
    white-space: nowrap; /* i18n：避免英文翻譯較長時換行破壞排版 */
}

.nav-links a:hover {
    color: #e8976a;
}

.nav-links a.active {
    color: #e8976a;
}

/* 導航欄下拉選單樣式 */
.nav-item-dropdown {
    position: relative;
    display: inline-block;
}

.nav-link-dropdown {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    cursor: pointer;
    white-space: nowrap; /* i18n：英文翻譯較長時不換行 */
}

.nav-link-dropdown:hover {
    color: #e8976a;
}

.nav-link-dropdown.active {
    color: #e8976a;
}

/* 語系切換按鈕：樣式對齊導覽列連結 */
.lang-switch-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.lang-toggle-btn {
    background: none;
    border: none;
    padding: 0.5rem 0;
    color: #333;
    font-weight: 500;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

.lang-toggle-btn:hover,
.lang-toggle-btn:focus {
    color: #e8976a;
    outline: none;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

/* 讓鍵盤使用者在桌機也能展開下拉。
   桌機的展開只靠 :hover，鍵盤 Tab 到觸發器時選單不會出現，
   而 .open 那組規則只存在於 max-width:768px 的媒體查詢裡。

   用 :has(:focus-visible) 而不是 :focus-within：觸發器是 <a href="#">，
   桌機用滑鼠點它時 toggleDropdown() 只做 preventDefault()，焦點卻留在連結上，
   :focus-within 會讓選單一直展開、蓋住底下的內容，使用者的下一次點擊就落在
   選單上而不是想點的東西。:focus-visible 只在鍵盤操作時才套用，滑鼠點擊不會
   匹配，鍵盤可及性保留、滑鼠卡住的問題消失。

   選擇器收成直接子代（> .nav-link-dropdown > .dropdown-arrow）而不是後代：
   第二層子選單的觸發器也在 .nav-item-dropdown 裡面，寫成後代的話滑過外層觸發器
   就會把第二層的箭頭一起轉 180 度——而外層只有 hover 才看得見第二層，等於第二層
   箭頭在使用者看得到它的每一刻都是顛倒的。10 個既有觸發器都是
   <a class="nav-link-dropdown"> > <svg class="dropdown-arrow">，收窄不影響它們。 */
.nav-item-dropdown:hover > .nav-link-dropdown > .dropdown-arrow,
.nav-item-dropdown:has(:focus-visible) > .nav-link-dropdown > .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    min-width: 150px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:has(:focus-visible) .dropdown-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 0.8rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #a4b494;
}

.dropdown-item.active {
    background-color: #f8f9fa;
    color: #e8976a;
}

.dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.dropdown-item:hover svg {
    opacity: 1;
}

/* ==================== 第二層下拉（巢狀子選單） ==================== */
/* 用獨立類名而不是重用 .dropdown-menu / .nav-item-dropdown：上面那兩組展開規則
   （.nav-item-dropdown:hover .dropdown-menu）是後代選擇器，第二層若沿用同名，
   滑過外層就會把第二層一起展開。

   展開由 .open 驅動（JS 加），桌機的 :hover 只是額外的滑鼠捷徑。刻意不用第一層那套
   :has(:focus-visible)：焦點一離開觸發器 :has() 立刻不匹配，面板在使用者按 Tab 的
   同一瞬間隱藏，剛拿到焦點的連結變成不可聚焦、焦點被瀏覽器丟掉——鍵盤永遠走不進
   第二層，而且因為再也沒有帶外部 relatedTarget 的 focusout，aria-expanded 會卡在 true。 */

.dropdown-submenu {
    /* 不可省：position: relative 掛在 .nav-item-dropdown 這個 class 上，不會傳給後代。
       少了這行，.submenu-menu 會以最外層的 .nav-item-dropdown 為定位基準，飛到導覽列
       項目的右上角蓋住導覽列。 */
    position: relative;
}

.submenu-toggle {
    /* .dropdown-item 是 flex，但 justify-content 預設是 normal，
       不設的話箭頭會緊貼文字尾端而不是靠面板右緣 */
    justify-content: space-between;
    cursor: pointer;
}

.submenu-menu {
    position: absolute;
    top: 0;
    /* 預設往右飛出（子選單慣例）。右邊放不下時由 positionSubmenu()（common.js）加上
       .flip-left 改成往左——不能放著不管：html, body 有 overflow-x: hidden（本檔 409-414），
       溢出不會產生捲軸，被切掉的部分使用者完全碰不到。 */
    left: 100%;
    right: auto;
    margin-left: 0.5rem;
    background-color: white;
    min-width: 150px;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0;
    opacity: 0;
    /* 不能只寫 opacity: 0：面板看不見時裡面的連結仍會留在 Tab 順序上 */
    visibility: hidden;
    /* 只過渡透明度：飛出方向靠 left/right 切換，若用 transition: all，
       翻邊的瞬間會看到面板從舊位置滑過去 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* 排在同一面板內其他 .dropdown-item 之上。注意它「疊不到」第一層面板之上：
       .dropdown-menu 同時有 z-index:1001 與 opacity:0，兩者各自建立 stacking context，
       這個 1002 只在父面板內部排序。 */
    z-index: 1002;
}

/* 可見條件必須「第一層也開著」才成立，不能只看第二層自己。
   visibility 會繼承：第二層若無條件寫 visibility: visible，就會蓋掉從收合的第一層
   .dropdown-menu 繼承來的 hidden。結果是面板看不見（opacity 被第一層的 0 吃掉），
   但 opacity 不影響可聚焦性——兩條連結仍留在 Tab 順序上，配上殘留的
   aria-expanded="true"，螢幕閱讀器會讀到一個根本不存在的展開選單。

   .open 殘留看似不可能（focusout 會清），但那條清理的前提是「點擊一定會給焦點」：
   macOS Safari 點連結預設不給焦點，那條路徑上沒有任何 focusout 能清掉 .open。
   與其依賴瀏覽器行為，不如讓 CSS 本身不可能進入那個狀態。

   可見性**只**由 .open 決定，沒有 :hover 這條平行路徑。
   先前 .dropdown-submenu:hover 也能單獨展開，於是 .open／aria-expanded 與畫面
   變成兩個各自為政的狀態：滑鼠停在觸發器上時面板一直可見，點擊只翻動 .open，
   結果 (a) 點下去畫面毫無反應，(b) 螢幕閱讀器讀到「已收合」而選單就在螢幕上。
   滑鼠展開改由 common.js 的 mouseenter/mouseleave 加減 .open（只在真的有 hover
   的裝置上綁），狀態與 aria 永遠一致。 */
.nav-item-dropdown:hover .dropdown-submenu.open > .submenu-menu,
.nav-item-dropdown:has(:focus-visible) .dropdown-submenu.open > .submenu-menu {
    opacity: 1;
    visibility: visible;
}

/* 右邊空間不足時才翻到左邊 */
.dropdown-submenu.flip-left > .submenu-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0.5rem;
}

/* 第二層項目的內距要連 .nav-links 一起寫才蓋得過 .nav-links a（0,1,1）。
   .dropdown-item 不是安全的獨立命名空間：.nav-links a:hover（0,2,1）比重高於
   .dropdown-item:hover（0,2,0），所以第一層項目的 hover 色其實一直是 .nav-links a:hover
   在決定。第二層沿用同一套視覺，不另外爭這個。 */
.nav-links .submenu-menu .dropdown-item {
    padding: 0.75rem 1.25rem;
}

/* 箭頭比重要壓過 .dropdown-item svg（0,1,1），所以寫成 .submenu-toggle .submenu-arrow（0,2,0） */
.submenu-toggle .submenu-arrow {
    flex-shrink: 0;
    opacity: 1;
    /* 原 svg 是下指的 chevron：逆時針 90 度 = 指右，對應預設的往右飛出 */
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.dropdown-submenu.flip-left > .submenu-toggle .submenu-arrow {
    transform: rotate(90deg);
}

.login-btn {
    background-color: #a4b494;
    color: white !important;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.login-btn:hover {
    background-color: #8fa67f;
}

/* 手機版獨立 profile icon */
.mobile-profile {
    display: none;
}

/* 漢堡選單按鈕 */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #333;
    transition: all 0.3s ease;
}

/* 通用按鈕樣式 */
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: #a4b494;
    color: white;
}

.btn-secondary {
    background-color: #e8c6b5;
    color: #333;
}

/* 頁尾 */
.site-footer {
    background-color: #f1f4ef;
    padding: 1.5rem 2rem;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1920px;
    margin: 0 auto;
    text-align: center;
}

.footer-content h3 {
    color: #333;
    margin-bottom: 0.5rem;
}

.footer-content p {
    color: #666;
    line-height: 1.5;
    margin: 0.2rem 0;
}

/* 回到頂端按鈕 */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 45px;
    height: 45px;
    background-color: #a4b494;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #8fa67f;
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* 用戶菜單樣式 */
.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333 !important;
    transition: all 0.3s ease;
    position: relative;
}

.profile-icon:hover {
    color: #e8976a !important;
}

/* 未登入狀態的個人資料圖示樣式 */
.profile-icon-guest {
    opacity: 0.7;
    position: relative;
}

.profile-icon-guest:hover {
    opacity: 1 !important;
    transform: scale(1.1);
}



/* 未登入狀態的用戶菜單響應式調整（漢堡選單的斷點，見下方「響應式設計」） */
@media (max-width: 1240px) {
    .user-menu-guest {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
    
}


.logout-btn {
    background-color: #e8976a !important;
    color: white !important;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

/* 語言切換按鈕：融入導覽列，外觀同其他 nav-link */
.lang-switcher {
    display: inline-flex;
    margin: 0;
    padding: 0;
}
.lang-toggle {
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-weight: 500;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.lang-toggle:hover {
    color: #e8976a;
}
.lang-toggle:focus {
    outline: none;
    color: #e8976a;
}
.lang-toggle:focus-visible {
    outline: 2px dashed #a4b494;
    outline-offset: 4px;
}

.logout-btn:hover {
    background-color: #d88559 !important;
}

/* 新用戶身份設定提示按鈕 */
.setup-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white !important;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    animation: pulse-notice 1.5s infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.setup-notice:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.5);
    color: white !important;
}

.setup-notice i {
    font-size: 1.2em;
    animation: shake-icon 1.5s infinite;
}

@keyframes pulse-notice {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.6);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(255, 152, 0, 0);
    }
}

@keyframes shake-icon {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* Loading Spinner 樣式 */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #65c7d0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: baseline;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading 按鈕樣式 */
.btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn.loading .loading-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

/* 探索頁面 Loading 按鈕樣式 */
.explore-btn.loading {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: #fff;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* AI 思考指示器樣式 */
.thinking-bubble {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
    color: #6c757d;
    font-style: italic;
}

.thinking-bubble .loading-spinner {
    border-color: #dee2e6;
    border-top-color: #65c7d0;
}


/* 響應式設計
   導覽列在 1240px 以下收成漢堡選單（common.js 的 NAV_COLLAPSE_MEDIA 要一致）。2026-10-04 前是 768px：
   導覽列要的寬度依身分與語系是 965–1,377px（教師的英文介面最寬），769–1,280px 時右側的登出、語言鈕被裁掉
   （稽核 F8-3）。1241–1440px 縮小間距：最寬的教師英文介面要 1,169px。下限寫 1240.02px：系統或瀏覽器縮放時寬度可能是
   1240.5px 這種小數，寫 1241px 的話兩組都不套用 */
@media (min-width: 1240.02px) and (max-width: 1440px) {
    header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    nav {
        padding: 0 1rem;
    }

    .nav-links {
        gap: 1.25rem;
    }

    .user-menu {
        gap: 0.75rem;
    }
}

@media (max-width: 1240px) {
    nav {
        padding: 0 2rem;
        position: relative;
        justify-content: center;
    }

    .mobile-profile {
        display: flex;
        align-items: center;
        position: absolute;
        right: 0rem;
    }

    .menu-toggle {
        display: flex;
        position: absolute;
        left: 0rem;
    }

    /* 隱藏 nav-links 裡的 profile icon，只保留登入/登出按鈕 */
    .user-menu .profile-icon {
        display: none;
    }

    .nav-links {
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        background-color: white;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        gap: 1.5rem;
        transform: translateY(-150%);
        /* 收起時也要隱藏，不能只移出畫面：否則 Tab 仍會依序走過看不見的導覽連結（1240px 以下也包含放大顯示的電腦）。
           visibility 延後到滑出動畫結束才切換 */
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* fixed 的面板不會跟著頁面捲動：比畫面高時（橫向持握、展開子選單）自己捲，否則排在後面的語言鈕、
           登入登出、公開資料點不到（稽核 F8-8）。dvh 扣掉手機瀏覽器的網址列，不支援時用前一行的 vh */
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-links.active {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s;
    }

    /* 角色預覽的提示條把 header 往下推 48px：面板跟著往下，才不會蓋住漢堡鈕（768px 以下見下一個區塊） */
    body.is-previewing .nav-links {
        top: calc(76px + 48px);
        max-height: calc(100vh - 124px);
        max-height: calc(100dvh - 124px);
    }

    .nav-links a {
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
    }

    .user-menu {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 1rem;
    }

    .logout-btn {
        width: 100%;
        text-align: center;
    }

    /* 移動端下拉選單樣式 */
    .nav-item-dropdown {
        width: 100%;
    }

    .nav-link-dropdown {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 0;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        margin-top: 0.5rem;
        padding: 0;
        background-color: #f8f9fa;
        border-radius: 8px;
        width: 100%;
        /* 預設隱藏，點擊展開。顯示與否只看 .open（display）：桌機那組 opacity／visibility 要等 :hover
           才打開，觸控裝置點了另一個下拉後 hover 移走，前一個還是 .open 卻只剩一塊空白（稽核 F8-9） */
        display: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .nav-item-dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-item {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem;
    }

    .dropdown-arrow {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    /* 同桌機：收成直接子代，否則外層一展開（子層還關著）內層箭頭就已經轉了 180 度 */
    .nav-item-dropdown.open > .nav-link-dropdown > .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* 第二層：手機改成縮排展開，不飛出。桌機那組 :hover / .open 規則只動
       opacity / visibility / margin-right，不動 display，所以這裡用 display 控制
       就不會被觸控裝置「黏住」的 hover 誤開。 */
    .dropdown-submenu {
        width: 100%;
    }

    .submenu-menu {
        position: static;
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        /* 比第一層面板的 #f8f9fa 深一階，讓層級看得出來 */
        background-color: #eef1f4;
        padding: 0;
        width: 100%;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    /* 翻邊只在桌機有意義；手機若殘留 .flip-left，這條把定位拉回縮排樣式 */
    .dropdown-submenu.flip-left > .submenu-menu {
        left: auto;
        right: auto;
        margin-left: 0;
        margin-right: 0;
    }

    .dropdown-submenu.flip-left > .submenu-toggle .submenu-arrow {
        transform: none;
    }

    .dropdown-submenu.flip-left.open > .submenu-toggle .submenu-arrow {
        transform: rotate(180deg);
    }

    .dropdown-submenu.open > .submenu-menu {
        display: block;
    }

    .submenu-toggle {
        justify-content: center;
        gap: 0.5rem;
    }

    /* 桌機兩層的項目內距同為 12px 20px，但手機第一層被 .nav-links a（0,2,1）
       壓成 8px 0，而第二層那條 .nav-links .submenu-menu .dropdown-item（0,3,0）
       壓不下去，兩層就分岔了。這裡把第二層拉回與第一層相同。 */
    .nav-links .submenu-menu .dropdown-item {
        padding: 0.5rem 0;
    }

    /* 不飛出，箭頭回到下指；展開時才轉 180 度 */
    .submenu-toggle .submenu-arrow {
        transform: none;
    }

    .dropdown-submenu.open > .submenu-toggle .submenu-arrow {
        transform: rotate(180deg);
    }
}

/* 768px 以下的預覽提示條會換行、header 推到 56px（見「響應式 - 預覽模式」）。要排在上面 1240px 的區塊之後：
   選擇器權重相同，排在前面會被蓋掉 */
@media (max-width: 768px) {
    body.is-previewing .nav-links {
        top: calc(76px + 56px);
        max-height: calc(100vh - 132px);
        max-height: calc(100dvh - 132px);
    }
}

/* ==================== 模態框草稿還原提示（ModalDraft） ==================== */
/* 由 static/js/components/modal_draft.js 動態插入 .modal-body 頂端。
   兩種樣態：
   - 預設（新增模式）：藍色資訊條，「已還原上次未完成的內容」
   - --warning（編輯模式）：琥珀色警示條，提醒畫面上不是目前的系統資料 */

.modal-draft-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #b6d4f2;
    border-left: 4px solid #2b7cd3;
    border-radius: 6px;
    background-color: #eaf3fc;
    color: #1c4f87;
    font-size: 0.9rem;
    line-height: 1.5;
}

.modal-draft-banner i {
    flex-shrink: 0;
    font-size: 1rem;
}

.modal-draft-banner__text {
    flex: 1;
    min-width: 0;
}

.modal-draft-banner__action {
    flex-shrink: 0;
    padding: 0.3rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.modal-draft-banner__action:hover {
    background-color: #1c4f87;
    color: #fff;
}

.modal-draft-banner__action:focus-visible {
    outline: 2px solid #1c4f87;
    outline-offset: 2px;
}

.modal-draft-banner--warning {
    border-color: #f0d089;
    border-left-color: #d98e04;
    background-color: #fdf4e3;
    color: #8a5a00;
}

.modal-draft-banner--warning .modal-draft-banner__action:hover {
    background-color: #8a5a00;
    color: #fff;
}

.modal-draft-banner--warning .modal-draft-banner__action:focus-visible {
    outline-color: #8a5a00;
}

@media (max-width: 576px) {
    .modal-draft-banner {
        flex-wrap: wrap;
    }

    .modal-draft-banner__action {
        margin-left: auto;
    }
}