/* =========================================
   作文評語工坊 v4.0 - 主要介面樣式
   ========================================= */
* {
    box-sizing: border-box;
}

body {
    font-family: "微軟正黑體", "Noto Sans TC", sans-serif;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 30%, #c8e6c9 70%, #a5d6a7 100%);
    min-height: 100vh;
    padding: 20px;
    margin: 0;
}

/* 護眼模式（森林綠） */
body.eye-care {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 30%, #a5d6a7 70%, #81c784 100%);
}
body.eye-care .config-panel { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
body.eye-care .label-preview-panel { background: #1b5e20; }
body.eye-care .comment-row { border-left: 4px solid #43a047; }
body.eye-care .comment-row:hover { background: #e8f5e9; }
body.eye-care .btn-primary { background: #2e7d32; }
body.eye-care .btn-primary:hover { background: #1b5e20; }
body.eye-care .score-tag { background: #c8e6c9; color: #1b5e20; }
body.eye-care textarea.editable-comment { background: #f1f8e9; border-color: #a5d6a7; }
body.eye-care textarea.editable-comment:focus { border-color: #43a047; box-shadow: 0 0 0 2px rgba(67,160,71,0.2); }
body.eye-care #shortcutBar { background: rgba(27,94,32,0.9); }

.main-container {
    max-width: 1300px;
    margin: 0 auto;
    transition: max-width 0.3s;
}
.main-container:has(.workspace-wrapper.side-by-side) {
    max-width: 98vw;
}

/* 頂部控制面板 */
.config-panel {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 10px;
    z-index: 100;
    margin-bottom: 20px;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    overflow: hidden;
}
.config-panel.collapsed {
    max-height: 0 !important;
    padding: 0 20px;
    opacity: 0;
    margin-bottom: 0;
    pointer-events: none;
}
.btn-collapse-config {
    width: 100%;
    padding: 6px;
    background: rgba(78, 52, 46, 0.08);
    border: 1px dashed #bbb;
    border-radius: 6px;
    color: #4e342e;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.btn-collapse-config:hover {
    background: rgba(78, 52, 46, 0.15);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-header h2 {
    margin: 0;
    color: #4e342e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.storage-status {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #e8f5e9;
    color: #2e7d32;
}

.storage-status.has-data {
    background: #fff3e0;
    color: #ef6c00;
}

textarea#rawInput {
    width: 100%;
    height: 80px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    resize: vertical;
}

textarea#rawInput:focus {
    border-color: #e8836b;
    outline: none;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.btn {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-primary { background: #e8836b; color: white; }
.btn-primary:hover { background: #d4705a; }
.btn-success { background: #27ae60; color: white; }
.btn-success:hover { background: #219a52; }
.btn-danger { background: #e74c3c; color: white; }
.btn-danger:hover { background: #c0392b; }
.btn-secondary { background: #95a5a6; color: white; }
.btn-secondary:hover { background: #7f8c8d; }

.copy-options {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 6px;
}

.copy-options label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* 篩選工具列 */
.filter-bar {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label { font-size: 13px; color: #555; }

.filter-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.filter-input:focus { border-color: #e8836b; outline: none; }
#searchInput { width: 180px; }
.char-range-input { width: 60px; text-align: center; }

.filter-stats {
    margin-left: auto;
    font-size: 13px;
    color: #666;
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
}

/* 列表區 */
.list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-row {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 15px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 30px 50px 90px 1fr 90px auto;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.comment-row:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.comment-row.has-custom-setting { border-left: 4px solid #e8836b; }
.comment-row.filtered-out { display: none; }

.drag-handle { color: #bbb; font-size: 18px; cursor: grab; text-align: center; user-select: none; }
.drag-handle:active { cursor: grabbing; color: #e67e22; }
.comment-row:hover .drag-handle { color: #e67e22; }
.row-index { font-size: 12px; color: #888; text-align: center; }
.student-id { font-weight: bold; color: #4e342e; }
.student-id .score-tag { font-size: 11px; color: #888; font-weight: normal; display: block; margin-top: 2px; }

.editable-comment {
    width: 100%;
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 50px;
    resize: vertical;
}

.editable-comment:focus { border-color: #e8836b; outline: none; }

.word-count { font-size: 13px; text-align: center; padding: 5px; border-radius: 4px; background: #f0f0f0; }
.word-count.ok { background: #e8f5e9; color: #2e7d32; }
.word-count.warning { background: #fff3e0; color: #ef6c00; }
.word-count.danger { background: #ffebee; color: #c62828; font-weight: bold; }

.row-actions { display: flex; gap: 6px; }

.btn-copy { background: #e8836b; color: white; border: none; padding: 10px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-copy:hover { background: #d4705a; }
.btn-setting { background: #f0f0f0; border: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-setting:hover { background: #e0e0e0; }
.comment-row.has-custom-setting .btn-setting { background: #e8836b; color: white; }

.empty-state { text-align: center; padding: 60px 20px; background: white; border-radius: 12px; color: #888; }
.empty-state .icon { font-size: 48px; margin-bottom: 15px; }

/* 左右對照模式：預覽 + 評語列表並排 */
.workspace-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.workspace-wrapper.side-by-side {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}
.workspace-wrapper.side-by-side .label-preview-panel {
    position: sticky;
    top: 10px;
    flex: 0 0 58%;
    height: calc(100vh - 20px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.workspace-wrapper.side-by-side .preview-scroll-container {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.workspace-wrapper.side-by-side .list-container {
    flex: 1 1 42%;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
/* 卡片式評語（小房子） */
.workspace-wrapper.side-by-side .comment-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    grid-template-columns: none;
}
.workspace-wrapper.side-by-side .comment-row .drag-handle { display: none; }
.workspace-wrapper.side-by-side .comment-row .row-index { text-align: left; font-size: 11px; }
.workspace-wrapper.side-by-side .comment-row .student-id { font-size: 14px; }
.workspace-wrapper.side-by-side .comment-row .editable-comment { min-height: 100px; flex: 1; font-size: 13px; }
.workspace-wrapper.side-by-side .comment-row .word-count { text-align: left; font-size: 12px; }
.workspace-wrapper.side-by-side .comment-row .row-actions { justify-content: flex-end; flex-wrap: wrap; }

/* 評語範本庫 */
.template-panel { background: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: none; }
.template-panel.show { display: block; }
.template-panel h3 { margin: 0 0 15px 0; color: #4e342e; display: flex; align-items: center; gap: 8px; }
.template-tabs { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }
.template-tab { padding: 8px 16px; background: #eee; border: none; border-radius: 20px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.template-tab.active { background: #e8836b; color: white; }
.template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; max-height: 250px; overflow-y: auto; }
.template-item { background: #f8f9fa; padding: 10px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; position: relative; }
.template-item:hover { background: #fce4ec; border-color: #e8836b; }
.template-item .delete-btn { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #bbb; margin-left: 8px; font-weight: bold; transition: all 0.2s; }
.template-item .delete-btn:hover { background: #ffeba0; color: #e74c3c; }
.template-item .char-count { font-size: 11px; color: #888; background: white; padding: 2px 8px; border-radius: 10px; }
.template-actions { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; flex-wrap: wrap; }
.new-template-input { flex: 1; min-width: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }

/* 模態框 */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s; }
.modal-overlay.show { opacity: 1; visibility: visible; }
/* 🔴 桌機也要限高可捲。原本只有手機的 media query 設了 max-height，
   桌機完全沒有——於是彈窗只要比視窗高，底下那排按鈕就直接被切在畫面外，
   而 .modal-overlay 是 fixed 置中的，頁面捲不到那裡＝按鈕永遠按不到。
   實錄 2026-08-23：Momo 回報「電腦版指令那邊被擋住」——「📋 複製指令」
   是那個畫面唯一的用途，而它在 1280×720 的筆電視窗上被切掉了
   （彈窗高 808px）。這條對所有彈窗都成立，不只那一個。 */
.modal-box { background: white; padding: var(--modal-pad); border-radius: 12px; max-width: 450px; width: 90%;
    --modal-pad: 30px; max-height: 90vh; overflow-y: auto; }

/* 🔴 光是「限高可捲」還不夠：按鈕會捲到看不見的地方去。
   這個畫面唯一的用途就是那顆「📋 複製指令」，把它藏在捲軸下方等於沒修。
   所以底下那排按鈕釘在彈窗底部（sticky），內容再長都按得到。
   負的 bottom／margin 是為了抵銷 .modal-box 的 padding，讓白底貼齊邊緣。 */
.modal-box > .modal-buttons {
    position: sticky;
    bottom: calc(-1 * var(--modal-pad));
    background: #fff;
    padding-top: 12px;
    padding-bottom: var(--modal-pad);
    margin-bottom: calc(-1 * var(--modal-pad));
    box-shadow: 0 -10px 14px -10px rgba(0, 0, 0, .18);
    z-index: 1;
}
.modal-box h3 { margin: 0 0 15px 0; }
.modal-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

.individual-setting-form { display: flex; flex-direction: column; gap: 15px; }
.individual-setting-form .form-group { display: flex; flex-direction: column; gap: 5px; }
.individual-setting-form label { font-weight: bold; font-size: 14px; }
.individual-setting-form select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
.individual-setting-form textarea { padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; min-height: 100px; resize: vertical; line-height: 1.6; }
.individual-setting-form textarea:focus { border-color: #e8836b; outline: none; }

/* Toast */
/* 提示訊息放上方：放在下方會蓋住彈窗底列的「開始 AI 閱卷」（點得穿但看不到）（2026-10-14） */
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: #4e342e; color: white; padding: 12px 24px; border-radius: 8px; opacity: 0; transition: all 0.3s; z-index: 3000; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(8px); }
.toast.success { background: #27ae60; }
.toast.warning { background: #f39c12; }
.toast.error { background: #e74c3c; }

/* 智能推薦 */
.smart-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 2999; }
.smart-result { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 25px 35px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); z-index: 3000; max-width: 400px; text-align: center; }
.smart-result h3 { color: #e8836b; margin: 0 0 15px 0; }
.smart-result .analysis { text-align: left; background: #f8f9fa; padding: 12px 15px; border-radius: 8px; margin: 15px 0; font-size: 14px; line-height: 1.8; }
.smart-result .recommendation { background: linear-gradient(135deg, #e8836b 0%, #66bb6a 100%); color: white; padding: 15px; border-radius: 10px; margin: 15px 0; }
.smart-result .recommendation .setting-item { display: flex; justify-content: space-between; margin: 5px 0; }
.smart-result .btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }
.smart-result .btn-apply { background: #27ae60; color: white; border: none; padding: 10px 25px; border-radius: 6px; font-weight: bold; cursor: pointer; }
.smart-result .btn-cancel { background: #95a5a6; color: white; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; }

/* 歡迎彈窗 */
.welcome-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.welcome-overlay.show { opacity: 1; visibility: visible; }
/* 流程圖：桌機整張塞滿寬度；手機改成在自己的框裡左右滑（見下方 media query） */
.flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; line-height: 0; }
.flow-scroll img { width: 100%; height: auto; display: block; }
.flow-hint-narrow { display: none; }

.welcome-modal { background: white; border-radius: 16px; max-width: 95vw; max-height: 90vh; overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.welcome-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.5); color: white; font-size: 18px; cursor: pointer; z-index: 10; }
.welcome-footer { padding: 15px 20px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; }
.dont-show-again { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   手機版（2026-08-23）

   🔴 這個檔案原本一個 @media 都沒有——整站是固定桌機版面。
   實測 390px：`.comment-row` 的六欄 grid（30px 50px 90px 1fr 90px auto）
   光固定欄就吃掉 320px，**評語欄只剩 22px 寬**、操作鈕被壓成 71px 高的
   直條、整頁橫向溢出 206px。老師在手機上根本讀不到評語——而讀評語
   正是這個工具的全部意義。

   手機上的排法：一列一張卡
     ┌ #1  座號 5級分            123 字 ┐
     │ 評語（整寬、夠高、可直接改）      │
     │ [複製] [重評] [刪除] [匯出] [設定] │
     └────────────────────────────────┘
   拖曳把手在手機上藏起來：iOS Safari 沒有 HTML5 drag 事件，
   留著只是佔位置又給人「可以拖」的錯覺。
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { padding: 8px; }
    .main-container { max-width: 100%; }

    .comment-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "idx sid  wc"
            "cmt cmt cmt"
            "act act act";
        gap: 8px 10px;
        padding: 12px;
    }
    .comment-row .drag-handle { display: none; }
    .comment-row .row-index { grid-area: idx; text-align: left; }
    .comment-row .student-id { grid-area: sid; font-size: 15px; }
    /* 座號與級分同一行，不要各佔一行 */
    .comment-row .student-id .score-tag { display: inline-block; margin: 0 0 0 8px; }
    .comment-row .word-count { grid-area: wc; white-space: nowrap; }
    .comment-row .editable-comment {
        grid-area: cmt;
        min-height: 160px;      /* 三段式評語看得完，不用捲 */
        font-size: 15px;        /* iOS 低於 16px 會在聚焦時自動放大；15px 是可讀與不跳動的折衷 */
        line-height: 1.75;
    }
    .comment-row .row-actions {
        grid-area: act;
        flex-wrap: wrap;        /* 這一條就是「按鈕不再被壓成直條」 */
        gap: 8px;
    }
    /* 觸控目標至少 44px，且文字一律不直排 */
    .comment-row .btn-copy,
    .comment-row .btn-setting {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* 並排模式在手機上沒有意義，強制回單欄 */
    .workspace-wrapper.side-by-side { display: block; }

    /* 歡迎頁的雙欄卡片：手機上回單欄
       （原本這裡還有 .welcome-steps 的五張步驟卡，2026-08-23 已整組換成流程圖） */
    .welcome-pair { grid-template-columns: 1fr !important; }

    /* 🔴 流程圖是 16:9 的密集資訊圖：縮到 390px 寬時條列字只剩約 4px，等於沒有。
       所以手機上讓它保持看得懂的寬度，改成**在自己的框裡左右滑**
       （document 仍然不橫向溢出——要捲的是指定容器，不是頁面）。
       760px 是量出來的下限：母檔 1672px 寬時條列字約 24px，
       760/1672 × 24 ≈ 11px，再小就讀不了了。 */
    .flow-scroll img { width: 760px !important; max-width: none !important; }
    .flow-hint-wide { display: none; }
    .flow-hint-narrow { display: inline; }

    /* 視窗本體：手機上留邊距、可捲、不要撐出螢幕 */
    .modal-box {
        max-width: 100% !important;
        max-height: 88vh;
        overflow-y: auto;
        --modal-pad: 14px;   /* sticky 按鈕列的位移跟著這個走 */
    }
    .modal-overlay { padding: 8px; }
    .modal-buttons { flex-wrap: wrap; gap: 8px; }

    /* 視窗裡的輸入元件不得撐破容器：320px 上「評閱模式」那顆
       下拉選單（選項字很長）實測會超出 6px */
    .modal-box select,
    .modal-box input[type="text"],
    .modal-box input[type="number"],
    .modal-box input[type="password"],
    .modal-box textarea { max-width: 100%; }

    /* ── 🔴 工具列不准釘在手機畫面上 ──
       .config-panel 在桌機是一條窄橫幅，sticky 很合理；
       手機上它高 863px，而畫面只有 844px——**一個比螢幕還高的 sticky
       元素等於永遠蓋滿整個螢幕**，評語列表整個在它底下捲。
       實錄 2026-08-23：Momo 回報「整個評語在後層，完全無法看」。
       手機上一律改回一般文件流，並預設收起來（下方 JS 負責），
       讓她一打開就看到評語。 */
    .config-panel {
        position: static !important;
        padding: 14px;
    }

    /* ── 🔴 同一個雷的第二處：列印預覽面板 ──
       桌機的並排模式讓它 `position: sticky; height: calc(100vh - 20px)`，
       預覽固定在左邊、右邊的列表可以捲——很合理。
       手機上並排被強制回單欄（下面那條 .side-by-side { display:block }），
       但 sticky 與 100vh 沒跟著解除：面板高 824px、畫面 844px，
       又是一個比螢幕還高的釘住元素，底下的評語列表整個進不去。
       跟 .config-panel 是同一種病，所以同樣處理：回一般文件流、高度自然。
       ⚠️ 這個畫面之所以活到現在才被抓到，是因為手機測試把它寫成
       `togglePreviewMode()`（不存在的函式名）＋ typeof 保險 → 靜靜跳過。
       測試已改成呼叫真名並在「開了等於沒開」時報錯。 */
    .workspace-wrapper.side-by-side .label-preview-panel {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        flex: none !important;
    }
    /* 收合鈕與「傳到電腦」併成一條釘住的窄列：
       隨時叫得出工具列，也隨時能把這批交接到電腦 */
    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 101;
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
    }
    .btn-collapse-config { flex: 1; }
    .btn-handoff {
        flex: 0 0 auto;
        display: block !important;
        padding: 11px 14px;
        font-size: 14px;
        font-weight: bold;
        border: 1px solid #2e7d32;
        border-radius: 8px;
        background: #2e7d32;
        color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
        cursor: pointer;
        white-space: nowrap;
    }
    .btn-collapse-config {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 11px;
        font-size: 14px;
        font-weight: bold;
        border: 1px solid #d7ccc8;
        border-radius: 8px;
        background: #fff;
        color: #4e342e;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
        cursor: pointer;
    }
    .config-panel.collapsed { padding: 0 14px; }

    /* 鍵盤快捷鍵提示是桌機的東西，手機上只是遮住畫面底部 */
    #shortcutBar { display: none !important; }

    /* 觸控目標：手指不是滑鼠。實測有一批鈕只有 26–30px 高 */
    .config-panel button,
    .modal-box button { min-height: 40px; }
}


.batch-helper, .assignment-helper { padding:10px; margin:8px 0; background:#fff8ef; border:1px solid #e4d7c5; border-radius:6px; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.batch-helper input { max-width:100%; padding:5px; border:1px solid #b8c5b7; border-radius:4px; }
.roster-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:5px; margin:8px 0; }
.roster-seat { min-width:0; padding:5px; background:#edf4e9; border:1px solid #9eb797; border-radius:5px; color:#35553b; cursor:pointer; }
.roster-seat span { display:block; font-size:10px; }
.roster-seat.skipped { background:#f2f2f2; color:#666; border-color:#ccc; }
.roster-seat.missing, .batch-error { color:#a52f2f; background:#fff0ec; }
.assignment-helper textarea { width:100%; min-height:90px; padding:8px; font:inherit; border:1px solid #cbbca9; border-radius:4px; }
.assignment-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.assignment-thumbs img { width:160px; max-width:100%; height:auto; border:1px solid #ddd; cursor:pointer; }
.assignment-mask-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; }
.assignment-mask-row input[type=range] { flex:1 1 120px; min-width:0; max-width:220px; }
.mask-confirm { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-top:6px; padding:8px; background:#fff; border:2px solid #e57373; border-radius:6px; font-size:12px; line-height:1.7; color:#5d4037; }
.mask-confirm img { width:180px; max-width:100%; height:auto; border:1px solid #ddd; cursor:pointer; }
.mask-confirm > div { flex:1 1 200px; min-width:0; }
.mask-confirm label { display:block; margin-top:4px; font-weight:bold; color:#c62828; }
.mask-confirm-note { font-size:11px; color:#8d6e63; }
.batch-split select { padding:3px 6px; border:1px solid #a5d6a7; border-radius:4px; }
.batch-split-note { display:block; font-size:11px; color:#8d6e63; }
.id-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px; margin-top:6px; }
.id-cell { padding:4px; background:#fff; border:1px solid #d7ccc8; border-radius:5px; text-align:center; font-size:11px; min-width:0; }
.id-cell.anchored { border-color:#2e7d32; background:#f1f8e9; }
.id-cell img { display:block; height:220px; max-width:100%; margin:0 auto 3px; object-fit:contain; background:#fafafa; cursor:zoom-in; }
.id-cell input { width:44px; padding:2px 4px; border:1px solid #b8c5b7; border-radius:4px; font-size:12px; text-align:center; }
.roster-seat i { display:block; font-style:normal; font-size:10px; color:#4e342e; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.id-name { color:#4e342e; font-size:11px; }
.cp-names { display:flex; flex-direction:column; gap:2px; flex:1 1 220px; }
.cp-names textarea { width:100%; min-height:70px; padding:4px 6px; border:1px solid #a5d6a7; border-radius:4px; font:inherit; font-size:12px; }
.cp-names-backup { font-size:11px; color:#8d6e63; }
.ledger-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; margin-bottom:8px; }
.ledger-bar input { width:46px; padding:2px 4px; }
.ledger-pending { background:#fff8ef; border:1px solid #e4d7c5; border-radius:6px; padding:8px 10px; font-size:12px; line-height:1.8; margin-bottom:8px; overflow-wrap:anywhere; }
.ledger-note { font-size:11px; color:#8d6e63; }
.ledger-empty { font-size:13px; color:#8d6e63; }
.ledger-scroll { overflow-x:auto; max-width:100%; }
.ledger-table { border-collapse:collapse; font-size:12px; min-width:100%; }
.ledger-table th, .ledger-table td { border:1px solid #e0e0e0; padding:4px 6px; text-align:center; white-space:nowrap; }
.ledger-table th { background:#f1f8e9; color:#2e7d32; font-weight:bold; white-space:normal; min-width:64px; }
.ledger-mode { font-weight:normal; font-size:10px; color:#8d6e63; }
.ledger-seat { text-align:left !important; font-weight:bold; }
.ledger-seat span { font-weight:normal; color:#4e342e; }
.ledger-done { color:#2e7d32; }
.ledger-missing { color:#c62828; background:#fff0ec; font-weight:bold; }
.ledger-exempt td { color:#9e9e9e; background:#f7f7f7; }
.ledger-met { color:#2e7d32; font-weight:bold; }
.para-trial { font-size:11px; padding:1px 7px; border-radius:10px; background:#fff3e0; color:#e65100; vertical-align:middle; }
.para-intro { font-size:12px; color:#5d4037; line-height:1.7; margin-bottom:8px; }
.para-quick { display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px; margin-bottom:6px; }
.para-quick button, .para-row button { font-size:11px; padding:3px 8px; border:1px solid #a5d6a7; background:#fff; color:#2e7d32; border-radius:4px; cursor:pointer; }
.para-list { display:flex; flex-direction:column; gap:4px; }
.para-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:5px 8px; border:1px solid #e0e0e0; border-radius:5px; font-size:12px; }
.para-row.para-disabled { color:#9e9e9e; background:#fafafa; }
.para-qa { color:#c62828; }
.para-detail { flex:1 1 100%; overflow-x:auto; }
.para-detail table { border-collapse:collapse; width:100%; font-size:12px; margin-top:4px; }
.para-detail th, .para-detail td { border:1px solid #e0e0e0; padding:4px 6px; text-align:left; vertical-align:top; }
.para-detail th { background:#f1f8e9; color:#2e7d32; white-space:nowrap; }
.para-warn { color:#c62828; font-size:11px; }
.para-qa-box { background:#fff0ec; color:#a52f2f; padding:5px 8px; border-radius:4px; margin-top:4px; font-size:12px; }
.para-next { margin-top:4px; font-size:12px; }
.para-meta { font-size:10px; color:#9e9e9e; margin-top:2px; }
.grading-footer-status { flex:1 1 100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; padding:6px 10px; border-radius:6px; background:#e3f2fd; color:#0d47a1; }
.grading-footer-status.busy { background:#fff8e1; color:#8d5a00; }
.grading-footer-status.blocked { background:#ffebee; color:#b71c1c; font-weight:bold; }
.grading-footer-status.done { background:#e8f5e9; color:#1b5e20; }
.grading-footer-status button { font-size:12px; padding:3px 10px; border:1px solid currentColor; background:#fff; color:inherit; border-radius:4px; cursor:pointer; }
.gfs-secs { margin-left:6px; font-size:11px; opacity:.8; }
.gfs-bar { flex:1 1 120px; min-width:80px; height:6px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden; }
.gfs-bar i { display:block; height:100%; background:linear-gradient(90deg,#e67e22,#f39c12); }
.gfs-flash { outline:3px solid #e67e22; outline-offset:3px; transition:outline-color .3s; }
.regrade-note { margin-top:3px; font-size:10px; color:#e65100; white-space:normal; max-width:150px; }
.regrade-note button { display:block; margin-top:2px; font-size:10px; padding:2px 6px; border:1px solid #e65100; background:#fff3e0; color:#e65100; border-radius:3px; cursor:pointer; }
.send-preview { flex:1 1 100%; } .send-preview summary { cursor:pointer; font-size:12px; color:#2e7d32; font-weight:bold; }
.send-preview-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.send-preview-card { border:1px solid #ddd; border-radius:6px; padding:5px; text-align:center; font-size:11px; }
.send-preview-imgs { display:flex; gap:3px; margin-bottom:3px; }
.send-preview-imgs img { height:84px; border:1px solid #eee; border-radius:3px; cursor:pointer; }
.send-preview-card button { font-size:10px; padding:1px 6px; border:1px solid #c62828; background:#fff; color:#c62828; border-radius:3px; cursor:pointer; margin-top:2px; }
.send-preview-card .spc-own { border-color:#2e7d32; color:#2e7d32; background:#e8f5e9; }
.batch-collapsed { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 10px; background:#e8f5e9; border:1px solid #a5d6a7; border-radius:6px; font-size:13px; color:#1b5e20; }
.batch-collapsed button { font-size:12px; padding:3px 10px; border:1px solid #2e7d32; background:#fff; color:#2e7d32; border-radius:4px; cursor:pointer; }
.id-mask-warn { margin:8px 0; padding:8px 10px; background:#ffebee; border:2px solid #e57373; border-radius:6px; color:#b71c1c; font-size:13px; line-height:1.7; }
.id-mask-warn button { margin-left:6px; font-size:12px; padding:3px 10px; border:none; background:#c62828; color:#fff; border-radius:4px; cursor:pointer; font-weight:bold; }
.assignment-ai-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; font-size:12px; color:#5d4037; }
.assignment-ai-row button { font-size:12px; padding:5px 12px; border:1px solid #5d7a3a; background:#f1f8e9; color:#2e7d32; border-radius:5px; cursor:pointer; font-weight:bold; }
.spot-box { position:absolute; background:rgba(255,235,59,.42); border:2px solid #f9a825; border-radius:3px; box-shadow:0 0 0 2px rgba(255,255,255,.6); cursor:pointer; }
.spot-box span { position:absolute; top:-9px; left:-9px; min-width:16px; height:16px; line-height:16px; font-size:10px; font-weight:bold; text-align:center; background:#f57f17; color:#fff; border-radius:8px; padding:0 3px; }
.spot-box.active { background:rgba(255,213,0,.6); border-color:#e65100; animation:spotPulse 1s ease-in-out 2; }
@keyframes spotPulse { 50% { box-shadow:0 0 0 6px rgba(255,152,0,.45); } }
.spot-list { border:1px solid #ffe082; background:#fffde7; border-radius:6px; padding:6px 8px; font-size:12px; }
.spot-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spot-head span { font-size:11px; color:#8d6e63; }
.spot-head button { font-size:12px; padding:3px 10px; border:1px solid #f57f17; background:#fff; color:#e65100; border-radius:4px; cursor:pointer; font-weight:bold; }
.spot-items { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; max-height:92px; overflow-y:auto; }
.spot-items button { font-size:12px; padding:2px 7px; border:1px solid #e0e0e0; background:#fff; border-radius:4px; cursor:pointer; color:#4e342e; }
.spot-items button.has-loc { border-color:#f9a825; }
.spot-items mark { background:#fff176; padding:0 1px; }
.spot-items i { color:#9e9e9e; font-style:normal; font-size:11px; }

/* 給學生的修改單（v4.39） */
.rev-box { margin-top: 10px; padding: 8px 10px; border: 1px solid #d7ccc8; border-radius: 6px; background: #fffaf3; }
.rev-head { font-size: 13px; color: #4e342e; margin-bottom: 6px; }
.rev-item { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed #e0d6cc; }
.rev-where { font-size: 12.5px; color: #5d4037; margin-bottom: 4px; }
.rev-field { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; margin: 2px 0; }
.rev-field span { flex: 0 0 5.5em; color: #6d4c41; padding-top: 4px; }
.rev-field textarea { flex: 1; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #d7ccc8; border-radius: 4px; resize: vertical; }
.rev-ok { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: bold; color: #2e7d32; margin-top: 4px; }
.para-rev-todo { color: #bf360c; }
.mask-confirm-back { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e0c9c9; font-size: 12px; line-height: 1.6; }
.mask-confirm-back img { width: 120px; flex: 0 0 auto; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.mask-confirm > .mask-confirm-back { flex: 1 1 100%; }
.assignment-thumb-wrap { position: relative; display: inline-block; line-height: 0; }
.assignment-mask-band { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; border-bottom: 2px solid #c62828;
    background: repeating-linear-gradient(45deg, rgba(198,40,40,.28) 0 6px, rgba(198,40,40,.08) 6px 12px); }
.assignment-mask-note { font-size: 11.5px; color: #8d6e63; margin-top: 4px; }
.para-saved { margin-top: 6px; padding: 6px 8px; background: #f1f8e9; border-left: 3px solid #7cb342; border-radius: 4px; font-size: 12.5px; color: #33691e; }
.ocr-chip { font-size: 9.5px; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.ocr-chip.ok { background: #e8f5e9; color: #2e7d32; }
.ocr-chip.edited { background: #e3f2fd; color: #1565c0; }
.spot-result { font-size: 12px; color: #2e7d32; margin: 3px 0; }
.spot-result.none { color: #bf360c; }
.spot-items button.picked { outline: 2px solid #f9a825; background: #fff8e1; }
.spot-tip { font-size: 11px; color: #8d6e63; margin-top: 3px; }
.ai-seat-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 12px; color: #5d4037; }
.ai-seat-row button { font-weight: bold; border: 1px solid #6a1b9a; color: #6a1b9a; background: #fff; border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.ai-seat-review { border: 2px solid #e57373; border-radius: 6px; padding: 8px; margin: 6px 0; font-size: 12px; background: #fff; }
.ai-seat-crops { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.ai-seat-crops img { height: 220px; border: 1px solid #ccc; }
.ai-read { color: #6a1b9a; font-size: 11px; }
/* 依班級＋題目折疊（v4.45） */
.list-group-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #5d4037; margin: 4px 0 8px; }
.list-group-bar button { font-size: 12px; padding: 3px 10px; border: 1px solid #a5d6a7; background: #fff; color: #2e7d32; border-radius: 6px; cursor: pointer; font-weight: bold; }
.list-group { margin-bottom: 8px; }
.list-group-head { width: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; text-align: left; cursor: pointer;
    padding: 9px 12px; border: 1px solid #c5e1a5; border-radius: 8px; background: #f1f8e9; color: #33691e; font-size: 13.5px; font-family: inherit; }
.list-group-head:hover { background: #e6f2d8; }
.list-group-head .lg-arrow { font-size: 12px; width: 1em; }
.list-group-head .lg-meta { font-size: 12px; color: #558b2f; }
.list-group-head .lg-hint { margin-left: auto; font-size: 11px; color: #8d6e63; }
.list-group-body { padding-top: 6px; }
.list-group.lg-empty .list-group-head { opacity: .55; }
/* 誰有交？（v4.46：統一成一套） */
.roster-box .roster-how { font-size: 11.5px; color: #6d4c41; }
.roster-guide { font-size: 12.5px; margin: 6px 0; padding: 5px 8px; border-radius: 6px; background: #fff3e0; color: #e65100; }
.roster-guide.ok { background: #e8f5e9; color: #2e7d32; }
.roster-seat.exempt { border-style: dashed; }
.roster-seat.extra { border-color: #6a1b9a; color: #6a1b9a; }
.roster-seat.blank { background: #fafafa; color: #8d6e63; border-style: dotted; }
.roster-type { font-size: 11.5px; color: #6d4c41; margin-top: 6px; }
.roster-type input { width: 110px; padding: 2px 5px; border: 1px solid #a5d6a7; border-radius: 4px; font-size: 12px; }
.roster-note { font-size: 11.5px; color: #6d4c41; margin: 4px 0; }
.batch-split.ok { background: #f1f8e9; }