/* style.css — 清新簡明版 */

:root {
    --primary: #73B8AC;
    --primary-light: #AEAEAE;
    --primary-dark: #1E2C4F;
    --accent: #4E9D6C;
    --accent-light: #AEAEAE;
    --text: #1E2C4F;
    --text-secondary: #8A7AA6;
    --bg: #fff;
    --card: #ffffff;
    --border: #AEAEAE;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, 'Noto Sans TC', 'Segoe UI', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    color: var(--text);
    line-height: 1.6;
}

/* Vue 就緒前先隱藏模板,避免重新整理時整份未編譯內容閃一下(FOUC) */
[v-cloak] { display: none !important; }

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header ──────────────────────────── */

.header {
    background: var(--card);
    padding: 0.75rem 2rem;
    box-shadow: var(--shadow-md);
    border-bottom: 2px solid var(--primary);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header h1 {
    color: var(--primary-dark);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.nav-tabs {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    background: #F2EFF9;
    border-right: 1px solid #E0D8EE;
    padding: .5rem .25rem 1rem;
    z-index: 100;
    overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0,0,0,.04);
}
/* 主內容讓出左側 sidebar 空間 */
body { padding-left: 96px; transition: padding-left .25s ease; }
body.sidebar-collapsed { padding-left: 0; }
/* 基礎設定流程沒有 sidebar → 不保留左側 96px,釋放版面 */
body.in-setup { padding-left: 0; }
.nav-tabs { transition: transform .25s ease; }
body.sidebar-collapsed .nav-tabs { transform: translateX(-100%); }
/* sidebar 收合切換鈕 */
.sidebar-toggle { position: fixed; top: 50%; left: 96px; transform: translate(-50%, -50%); width: 34px; height: 52px; border: none; background: #fff; color: #3A3A3A; border-radius: 999px; cursor: pointer; z-index: 200; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: left .25s ease, transform .15s ease; padding: 0; }
.sidebar-toggle.collapsed { left: 18px; }
.sidebar-toggle:hover { transform: translate(-50%, -50%) scale(1.08); color: #4E2E9D; }
.sidebar-toggle.collapsed:hover { transform: translate(-50%, -50%) scale(1.08); }

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .35rem .2rem;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    color: #4A4A4A;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-weight: 600;
}
.nav-logo { width: 26px; min-width: 0; flex: 0 0 auto; height: auto; object-fit: contain; align-self: center; margin: 0 auto .7rem; }
.tab-btn .tab-icon { width: 32px; height: 32px; object-fit: contain; transition: filter .2s; }
.tab-btn .tab-icon.tab-icon-lg { width: 40px; height: 40px; margin-bottom: -5px; }
.tab-btn .tab-icon.tab-icon-tight { margin-bottom: -10px; }
.tab-btn .tab-icon.tab-icon-sm { width: 26px; height: 26px; margin-bottom: 3px; }
.tab-btn .tab-icon.tab-icon-rsv { width: 24px; height: 24px; margin-bottom: 4px; }
.tab-btn .tab-label { font-size: .64rem; line-height: 1.3; letter-spacing: 0; white-space: normal; word-break: break-all; width: 4em; text-align: center; }
.tab-btn .tab-label.tab-label-ab { width: 3em; }   /* 帳號與付費:窄一點,讓它斷成「帳號與／付費」 */
.tab-btn.tab-red .tab-label { color: #cf2533; font-weight: 800; }
.tab-btn.tab-red.active .tab-label { color: #cf2533; }
.tab-btn.active .tab-icon { filter: none; }

.tab-btn:hover {
    color: #1E2C4F;
    background: #F4F1FA;
}

.tab-btn.active {
    background: #CFC6E2;
    color: #1E2C4F;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(157,143,190,.35);
}
.tab-btn.active .tab-icon { filter: none; }
/* 手動改課 icon:用四向 drop-shadow 把線條稍微加粗(膨脹效果) */
.tab-btn .tab-icon.tab-icon-thick { filter: drop-shadow(.45px 0 0 #1a1a1a) drop-shadow(-.45px 0 0 #1a1a1a) drop-shadow(0 .45px 0 #1a1a1a) drop-shadow(0 -.45px 0 #1a1a1a); }

.user-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-badge {
    color: var(--text);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 4px 10px;
    background: var(--primary-light);
    border-radius: 6px;
}

.logout-btn {
    padding: 4px 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: #9D8FBE;
    border-color: #9D8FBE;
    color: #fff;
}

/* ── Main Content ────────────────────── */

.main-content {
    flex: 1;
    /* 上方留白加大,讓內容避開右上角漂浮的學年/學期、登出列,避免按鈕被遮擋 */
    padding: 4rem 1.5rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.section {
    background: transparent;
    border-radius: 0;
    padding: 1.5rem 0;
    box-shadow: none;
    border: none;
    animation: fadeIn 0.3s ease;
}
/* 計數 chip 浮在頁面右上角 */
.page-meta-chip { position: fixed; top: 1rem; right: 11rem; z-index: 90; }
/* 漂浮學年/學期選單(位於登出鈕下方) */
.floating-term-bar { position: fixed; top: 2.6rem; right: .8rem; z-index: 90; display: flex; gap: 1.2rem; }
.floating-count-bar { position: fixed; top: 5.1rem; right: .8rem; z-index: 80; display: flex; justify-content: flex-end; }
.back-to-top-btn { position: fixed; right: 24px; bottom: 96px; width: 46px; height: 46px; border-radius: 50%; background: #846490; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 16px rgba(0,0,0,.22); z-index: 95; transition: background .15s, transform .15s; }
.back-to-top-btn svg { width: 22px; height: 22px; }
.back-to-top-btn:hover { background: #6f5479; transform: translateY(-2px); }
.floating-count-chip { font-size: .85rem; font-weight: normal; color: #fff; background: #8A7AA6; padding: 3px 12px; border-radius: 4px; }
.term-select { position: relative; }
.term-tab { background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 800; color: #1E2C4F; padding: 0 0 .3rem; position: relative; }
.term-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: #D8D3E2; transition: background .15s; }
.term-tab.open::after, .term-tab:hover::after { background: #E8835C; }
.term-menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.16); overflow: hidden; min-width: 100px; z-index: 200; }
.term-opt { padding: 8px 16px; font-size: .9rem; color: #1E2C4F; cursor: pointer; white-space: nowrap; transition: background .12s; }
.term-opt:hover { background: #F4F1FA; }
.term-opt.active { background: #ECE5F7; color: #4E2E9D; font-weight: 700; }

.section-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.section-header h2 {
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 700;
}

.section-title-button {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 2.1rem;
    font-weight: inherit;
    line-height: 1.2;
    padding: 0;
    cursor: pointer;
}

.section-title-button:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.teacher-category-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

.teacher-category-filter select {
    min-width: 144px;
    height: 57px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 600;
    padding: 0.5rem 3rem 0.5rem 1rem;
    cursor: pointer;
}

/* ── Buttons ─────────────────────────── */

.btn {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-size: 0.9rem;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
    background: #fff;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: #AEAEAE; color: #fff;}

.btn-edit {
    background: var(--accent);
    color: #fff;
}
.btn-edit:hover { background: #4E9D6C; }

.btn-delete {
    background: #E8835C;
    color: #fff;
}
.btn-delete:hover { background: #E8835C; }

.btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.teacher-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.teacher-actions .btn-sm {
    padding: 0.32rem 0.7rem;
    font-size: 0.8rem;
}

.teacher-user-id-button {
    background: transparent;
    border: 1px dashed #AEAEAE;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    color: #1E2C4F;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.teacher-user-id-button:hover {
    background: #fff;
    border-color: #73B8AC;
}
.teacher-user-id-button.is-unbound {
    color: #E8835C;
    border-color: #E8835C;
}
.teacher-user-id-button.is-unbound:hover {
    background: #fff;
}

.btn-excel-export {
    background: #4E9D6C;
    color: #fff;
    border: none;
}

/* ── Tables ──────────────────────────── */

.table-container {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
}

.data-table th,
.data-table td {
    padding: 0.72rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
}

.data-table th {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.94rem;
}

.data-table .teacher-name-column {
    min-width: 200px;
    width: 200px;
    white-space: nowrap;
}

.teacher-name-button {
    border: none;
    background: transparent;
    color: #8A7AA6;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.teacher-user-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    border-radius: 999px;
    padding: 3px 10px;
    background: #fff;
    color: #1E2C4F;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.data-table tr:hover { background: #fff; }
.data-table tr:nth-child(even) { background: #fff; }

.data-table .teacher-category-row,
.data-table .teacher-category-row:hover,
.data-table .teacher-category-row:nth-child(even) {
    background: #fff;
}

.teacher-category-row td {
    padding: 0.55rem 1rem;
    border-top: 1px solid #AEAEAE;
    border-bottom: 1px solid #AEAEAE;
}

.teacher-category-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.teacher-category-title {
    font-weight: 700;
    color: #1E2C4F;
    margin-right: 0.5rem;
}

.teacher-category-count {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 8px;
    background: #AEAEAE;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 600;
}

.teacher-category-select {
    min-width: 74px;
    height: 30px;
    border: 1.5px solid #AEAEAE;
    border-radius: 999px;
    background: #fff;
    color: #1E2C4F;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 2px 26px 2px 10px;
    cursor: pointer;
}

.teacher-category-group-select {
    min-width: 92px;
    background: #fff;
    color: #1E2C4F;
}

.teacher-category-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.teacher-category-name {
    min-width: 42px;
    font-weight: 700;
}

/* ── Modal ───────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30,44,79,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1000;
    overflow-y: auto;
    padding: 2rem 1rem;
}

.modal-content {
    background: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius);
    width: 90%;
    max-width: 750px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
    animation: fadeIn 0.2s ease;
}

.modal-content h3 {
    margin-bottom: 1.25rem;
    color: var(--text);
    font-size: 1.3rem;
}

.subject-modal-content {
    max-width: 1140px;
    overflow-x: hidden;
}

.subject-grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.5rem;
}

.subject-grade-item {
    display: grid;
    grid-template-columns: 18px 4rem 4.5rem 1.5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #AEAEAE;
    min-width: 0;
}

.subject-grade-item input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    padding: 0;
    margin: 0;
}

.subject-grade-label {
    font-weight: 600;
    white-space: nowrap;
}

.subject-grade-hours {
    width: 4.5rem !important;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: 1px solid #AEAEAE;
    border-radius: 4px;
    text-align: center;
}

.subject-grade-unit {
    font-size: 0.82rem;
    color: #8A7AA6;
    white-space: nowrap;
}

.class-size-modal-content {
    max-width: 1020px;
    overflow-x: hidden;
}

.class-size-bulk-row {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) auto;
    gap: 0.5rem;
    align-items: center;
    justify-content: start;
}

.class-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.class-size-item {
    display: grid;
    grid-template-columns: 4rem 4.5rem 1.5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
}

.class-size-item input,
.class-size-bulk-row input {
    width: 4.5rem !important;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    text-align: center;
}

.class-size-summary {
    padding: 0.65rem 0.75rem;
    background: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 600;
}

.class-size-add {
    color: #4E9D6C;
    margin-left: 0.5rem;
}

.class-size-remove {
    color: #E8835C;
    margin-left: 0.5rem;
}

.class-size-shrink {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    color: #E8835C;
    font-weight: 700;
}

.class-size-shrink input {
    width: 16px !important;
    height: 16px !important;
}

.class-size-result {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
}

.class-size-result.ok {
    color: #1E2C4F;
    background: #fff;
    border: 1px solid #AEAEAE;
}

.class-size-result.error {
    color: #E8835C;
    background: #fff;
    border: 1px solid #AEAEAE;
}

.schedule-run-log {
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid #AEAEAE;
    border-radius: 8px;
    background: #fff;
}

.schedule-run-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.schedule-run-log-header h4 {
    margin: 0;
    color: var(--text);
}

.schedule-run-log-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.schedule-run-log-item {
    padding: 0.75rem;
    border: 1px solid #AEAEAE;
    border-radius: 8px;
    background: #fff;
}

.schedule-run-log-item + .schedule-run-log-item {
    margin-top: 0.65rem;
}

.schedule-run-log-title {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text);
}

.schedule-run-log-title span {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.schedule-run-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

.schedule-run-log-meta span {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #fff;
    color: #1E2C4F;
    font-size: 0.82rem;
    font-weight: 600;
}

.schedule-run-log-section {
    margin-top: 0.65rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.schedule-run-log-section.warning {
    color: #E8835C;
}

.schedule-run-log-section ul {
    margin: 0.25rem 0 0 1.1rem;
}

.arrange-modal-content {
    max-width: 960px;
    overflow-x: hidden;
}

.arrange-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.arrange-context span {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #fff;
    color: #1E2C4F;
    font-size: 0.84rem;
    font-weight: 700;
}

.arrange-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
}

.arrange-mode-card {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0.4rem 0.65rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid #AEAEAE;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.arrange-mode-card.active {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(115,184,172,.12);
}

.arrange-mode-card input {
    width: 16px !important;
    height: 16px !important;
    margin-top: 0.2rem;
}

.arrange-mode-card strong {
    color: var(--text);
    line-height: 1.35;
}

.arrange-mode-card span {
    grid-column: 2;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.arrange-notice {
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #AEAEAE;
    border-radius: 8px;
    background: #fff;
    color: #E8835C;
    font-weight: 600;
    font-size: 0.88rem;
}

.arrange-result {
    margin-top: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    white-space: pre-line;
    font-size: 0.88rem;
    font-weight: 600;
}

.arrange-result.ok {
    color: #1E2C4F;
    background: #fff;
    border: 1px solid #AEAEAE;
}

.arrange-result.error {
    color: #E8835C;
    background: #fff;
    border: 1px solid #AEAEAE;
}

.large-modal {
    max-width: 95%;
    max-height: 90%;
    overflow-y: auto;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ── Forms ───────────────────────────── */

.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    background: var(--card);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(115,184,172,.1);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    position: sticky;
    bottom: -1.5rem;
    background: var(--card);
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
}

.teacher-subject-grade-grid {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.subject-grade-header,
.subject-grade-row {
    display: grid;
    grid-template-columns: 1fr repeat(6, 36px);
    align-items: center;
}

.subject-grade-header {
    background: var(--surface, #fff);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.subject-grade-row {
    border-top: 1px solid var(--border);
}

.subject-grade-row:hover {
    background: rgba(115,184,172,0.04);
}

.teacher-subject-grade-grid .subject-name-col {
    padding: 0.45rem 0.75rem;
    font-size: 0.88rem;
    color: var(--text-primary);
    font-weight: normal;
    margin-bottom: 0;
}

.teacher-subject-grade-grid .grade-cell-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0;
    cursor: pointer;
    margin-bottom: 0;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.teacher-subject-grade-grid .grade-cell-col input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--primary, #73B8AC);
}

/* ── Class / Teacher Selectors ───────── */

.class-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.class-selector label,
.teacher-selector label {
    font-weight: 500;
    color: var(--text-secondary);
}

.class-selector select,
.teacher-selector select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
}

.teacher-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.teacher-selector select { min-width: 200px; }

/* ── Schedule Table ──────────────────── */

.schedule-container { margin-top: 1.5rem; }

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.schedule-table th {
    background: var(--primary);
    color: #fff;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
}

.schedule-table td {
    padding: 0.4rem;
    border: 1px solid var(--border);
    vertical-align: top;
}

.time-slot {
    background: #fff;
    font-weight: 500;
    text-align: center;
    color: var(--text-secondary);
    min-width: 90px;
    font-size: 0.85rem;
}

.schedule-cell {
    position: relative;
    width: 140px;
    height: 55px;
}

.subject-select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.subject-display {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    position: relative;
    z-index: 1;
    transition: transform 0.15s;
    padding: 0.2rem;
}

.subject-name { font-size: 0.85rem; font-weight: 600; }
.teacher-name { font-size: 0.72rem; opacity: 0.9; margin-top: 0.15rem; }

/* 特教抽離徽章 */
.sped-badge {
    position: relative;
    display: inline-block;
    margin-top: 3px;
    background: #fff;
    color: #1E2C4F;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
    cursor: help;
    border: 1px solid #73B8AC;
    white-space: nowrap;
    line-height: 1.6;
}
.sped-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #73B8AC;
    border-radius: 8px;
    padding: 8px 11px;
    min-width: 190px;
    max-width: 260px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    font-size: .78rem;
    color: #1E2C4F;
    text-align: left;
    pointer-events: none;
    white-space: normal;
}
.sped-badge:hover .sped-tooltip { display: block; }
.sped-tooltip-row { margin-bottom: 5px; line-height: 1.5; }
.sped-tooltip-row:last-child { margin-bottom: 0; }
.sped-tooltip-row strong { color: #1E2C4F; }
.sped-tooltip-row .sped-students { font-size: .73rem; color: #8A7AA6; }

.subject-display:hover {
    transform: scale(1.04);
    z-index: 10;
    box-shadow: var(--shadow-md);
}

.color-preview {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
}

/* ── Schedule Stats ──────────────────── */

.schedule-stats {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.schedule-stats h3 { margin-bottom: 0.75rem; color: var(--text); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    background: var(--card);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.stat-subject { font-weight: 500; color: var(--text-secondary); }
.stat-count { font-size: 1.25rem; font-weight: 700; color: var(--text); }

/* ── Teacher Assignment ──────────────── */

.teacher-assignment {
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.teacher-assignment h3 {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.teacher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.teacher-assign-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.teacher-assign-item label { font-weight: 500; color: var(--text-secondary); font-size: 0.88rem; }

.teacher-assign-item select {
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
}

/* ── Conflict Warning ────────────────── */

.conflict-warning {
    background: #fff;
    border: 1px solid #AEAEAE;
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.conflict-warning h4 { color: #E8835C; margin-bottom: 0.4rem; }
.conflict-warning ul { color: #1E2C4F; margin-left: 1rem; }

.conflict-solutions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #AEAEAE; }
.conflict-solutions h5 { color: #E8835C; margin-bottom: 0.4rem; }
.conflict-solutions ul { margin-left: 1rem; }
.conflict-solutions li { margin-bottom: 0.25rem; }

.conflict {
    border: 2px solid #E8835C !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(232,131,92,.4); }
    70% { box-shadow: 0 0 0 8px rgba(232,131,92,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,131,92,0); }
}

/* ── Teacher Schedule View ───────────── */

.teacher-schedule-view { margin: 1rem 0; }

.teacher-schedule-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.teacher-schedule-modal-header h3 {
    margin: 0;
}

.teacher-schedule-total {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 12px;
    background: #AEAEAE;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.teacher-schedule-cell { min-height: 55px; vertical-align: top; }

.teacher-assignment-item {
    background: var(--primary);
    color: #fff;
    padding: 0.4rem;
    margin: 0.15rem 0;
    border-radius: 5px;
    font-size: 0.78rem;
}

.conflict-assignment {
    background: #E8835C !important;
    animation: pulse 1.5s infinite;
}

.assignment-class { font-weight: 600; font-size: 0.85rem; }
.assignment-subject { font-size: 0.78rem; opacity: 0.9; }

/* ── Schedule Actions ────────────────── */

.schedule-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

/* ── Overview Grid ───────────────────── */

.overview-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.grade-section {
    background: transparent;
    padding: 1.25rem 0;
    border-radius: 0;
    border: none;
}
/* 各年級之間分隔線(只在「各班瀏覽」整片顯示時) */
.grade-section + .grade-section { border-top: 2px dashed #E0D8EE; padding-top: 1.75rem; }

.grade-section h3 {
    text-align: left;
    margin-bottom: 0.75rem;
    color: var(--text);
    font-size: 1.2rem;
}
/* 班表總覽:模式切換分頁(仿註冊/登入) */
.overview-mode-tabs { display: flex; gap: 1.5rem; align-items: flex-end; justify-content: center; margin: 0.6rem 0 1rem; flex-wrap: wrap; }
.publish-bar { display: flex; justify-content: flex-end; margin: 0 0 1.2rem; }
.publish-btn { background: #8A7AA6; color: #fff; border: none; border-radius: 999px; padding: .55rem 1.6rem; font-size: 1rem; font-weight: 800; letter-spacing: .05em; cursor: pointer; box-shadow: 0 3px 10px rgba(138,122,166,.35); transition: background .15s, transform .12s; }
.publish-btn:hover { background: #756599; transform: translateY(-1px); }
.publish-btn:disabled { opacity: .6; cursor: default; transform: none; }
/* 公布班表(置於清空按鈕列最右,與清空按鈕等高) */
.publish-btn-inline { margin-left: .4rem; background: #8A7AA6; color: #fff; border: 1.5px solid #8A7AA6; font-weight: 800; font-size: .8rem; padding: .3rem 1.1rem; line-height: 1.2; box-sizing: border-box; border-radius: 8px; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(138,122,166,.3); transition: background .12s; }
.publish-btn-inline:hover:not(:disabled) { background: #756599; }
.publish-btn-inline:disabled { opacity: .6; cursor: default; }
.overview-mode-tab { background: none; border: none; cursor: pointer; font-size: 1.15rem; font-weight: 800; color: #C5C0CE; padding: 0 0 .4rem; position: relative; transition: color .15s; letter-spacing: .02em; }
.overview-mode-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: #D8D3E2; transition: background .15s; }
.overview-mode-tab.active { color: #1E2C4F; }
.overview-mode-tab.active::after { background: #E8835C; }
/* 規則頁標題:仿總覽分頁的底線樣式 */
.rule-section-title { margin: 0; color: #1E2C4F; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; padding: 0 0 .4rem; position: relative; align-self: flex-end; }
.rule-section-title::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: #E8835C; }
/* 新排課頁面 */
.ns-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.ns-clear-btn { background: #fff !important; color: #8A7AA6 !important; border: 1.5px solid #AEAEAE !important; font-weight: 700; margin-left: auto; padding: .4rem 1rem !important; font-size: .9rem !important; }
.manual-select-actions { display: flex; gap: .5rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.manual-lock-icon { background: transparent; border: none; padding: 0 .15rem; cursor: pointer; display: inline-flex; align-items: center; flex: 0 0 auto; }
.manual-lock-icon img { height: 30px; width: auto; display: block; }
.manual-lock-icon:hover { opacity: .8; }
/* 連動鈕在此列與清空鈕同高 */
.manual-select-actions .sped-link-btn { font-size: .8rem; padding: .3rem .9rem; line-height: 1.2; border-width: 1.5px; box-sizing: border-box; }
.manual-clear-btn { background: #fff; color: #8A7AA6; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .8rem; padding: .3rem .9rem; line-height: 1.2; box-sizing: border-box; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.manual-clear-btn:hover:not(:disabled) { border-color: #8A7AA6; }
.manual-clear-btn:disabled { opacity: .45; cursor: default; }
.ns-run-btn { background: #E8835C !important; border-color: #E8835C !important; color: #fff !important; font-weight: 800; padding: .4rem 1.1rem !important; font-size: .9rem !important; }
.ns-run-btn:disabled { opacity: .6; cursor: default; }
.ns-result { margin-top: 1.4rem; padding: .8rem 1rem; background: #F4F1FA; border-radius: 10px; color: #1E2C4F; font-weight: 700; }
.ns-result.error { background: #FDE8E8; color: #cf2533; }
.ns-shortfalls { margin-top: 1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid #EEE; border-radius: 10px; }
.ns-shortfalls-title { font-weight: 800; color: #1E2C4F; margin-bottom: .6rem; }
.ns-shortfalls-none { color: #4E9D6C; font-weight: 700; }
.ns-short-row { display: flex; align-items: flex-start; gap: 1rem; padding: .4rem 0; }
.ns-short-hint { color: #E8835C; font-size: .82rem; margin-top: .9rem; }
.ns-violations { margin-top: 1rem; padding: .9rem 1.1rem; background: #FDF0EE; border: 1px solid #F3CFC6; border-radius: 10px; }
.ns-violations-title { font-weight: 800; color: #cf2533; margin-bottom: .5rem; }
.ns-violation-item { color: #cf2533; font-size: .9rem; line-height: 1.7; }
.ns-violations-ok { background: #EEF6F0; border-color: #CDE6D5; }
.ns-violations-ok { color: #2F7A4F; font-weight: 700; }
.ns-short-hint--top { margin-top: -.3rem; margin-bottom: .7rem; }
.ns-short-row.grade-sep { border-top: 1px solid #E3E3E3; margin-top: .35rem; padding-top: .75rem; }
.ns-short-class { min-width: 72px; font-weight: 800; color: #1E2C4F; background: transparent; border: none; text-align: left; padding: .12rem .2rem; cursor: pointer; border-radius: 6px; }
.ns-short-class:hover { background: #F2EEF8; }
.ns-short-class.selected { color: #8A7AA6; text-decoration: underline; }
.ns-short-empty { font-weight: 800; color: #E8835C; white-space: nowrap; }
.ns-short-empty-btn { font-weight: 500; color: #E8835C; white-space: nowrap; background: #FBF1EC; border: 1.5px solid #F0CBB6; border-radius: 999px; padding: .12rem .6rem; cursor: pointer; transition: background .12s, border-color .12s; }
.ns-short-empty-btn b { font-weight: 500; }
.ns-short-empty-btn:hover { border-color: #E8835C; }
.ns-short-empty-btn.selected { background: #E8835C; border-color: #E8835C; color: #fff; }
/* 「空 N 堂」用淡紅膠囊,跟科目缺額區隔 */
.ns-short-vacant { background: #fff; border-color: #8A7AA6; color: #8A7AA6; }
.ns-short-vacant:hover { border-color: #8A7AA6; }
.ns-short-vacant.selected { background: #8A7AA6; border-color: #8A7AA6; color: #fff; }
/* 班級排課狀況:左清單 + 右課表 */
/* 左半放列表(夠寬放三個標籤),右半故意留白,讓浮動課表落在右側不擋按鈕 */
.ns-shortfalls-body { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 1.5rem; align-items: start; }
.ns-shortfalls-list { min-width: 0; }
/* 缺失標籤:一列最多三個,滿三個換行 */
.ns-short-tags { display: grid; grid-template-columns: repeat(3, max-content); gap: .35rem .55rem; }
/* 浮動課表:漂浮在列表右側、與被點按鈕同高;無白底框、無陰影;overflow 不裁切右上 × */
.ns-float-pop { position: fixed; z-index: 4000; overflow: visible; background: #fff; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.22); padding: .6rem; }
.ns-float-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: #1E2C4F; color: #fff; font-size: 27px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 1; display: flex; align-items: center; justify-content: center; }
.ns-float-close:hover { background: #E8835C; }
.ns-short-items { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.ns-short-item { color: #cf2533; font-weight: 700; font-size: .95rem; }
.ns-tstatus { margin-top: 1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid #EEE; border-radius: 10px; }
.ns-tstatus-title { font-weight: 800; color: #1E2C4F; margin-bottom: .8rem; }
.ns-tgroup { padding: .55rem 0; }
.ns-tgroup + .ns-tgroup { border-top: 1px dashed #F0F0F0; }
.ns-tgroup-label { font-weight: 800; font-size: .92rem; margin-bottom: .5rem; }
.ns-tgroup-label.ok { color: #4E9D6C; }
.ns-tgroup-label.warn { color: #C9991E; }
.ns-tgroup-label.bad { color: #cf2533; }
.ns-tgroup-label.banned { color: #6B6B6B; }
.custom-rule-builder { border: none; background: transparent; padding: 0; margin-bottom: .8rem; }
.crb-confirm { background: #E8835C; color: #fff; border-color: #E8835C; }
.crb-cats { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.crb-cat-chip { padding: .25rem .6rem; border: 1.5px solid #8A7AA6; border-radius: 999px; background: #fff; color: #5A4B7B; font-weight: 700; font-size: .85rem; cursor: pointer; }
.crb-cat-chip.on { background: #8A7AA6; color: #fff; }
.crb-tpl-select { width: 100%; padding: .45rem .6rem; border: 1px solid #C9BEE0; border-radius: 8px; font-size: .9rem; color: #1E2C4F; background: #fff; margin-bottom: .7rem; }
.crb-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: 1rem; color: #1E2C4F; line-height: 2; }
.crb-word { color: #1E2C4F; }
.crb-blank { padding: .25rem .5rem; border: 1.5px solid #8A7AA6; border-radius: 8px; background: #fff; color: #5A4B7B; font-weight: 700; font-size: .92rem; }
.crb-actions { display: flex; gap: .5rem; margin-top: .8rem; justify-content: flex-end; }
.crb-actions .btn { padding: .35rem .9rem; font-size: .88rem; }
/* 專科教室瀏覽:科目按鈕一列置中,課表置中於其下 */
.room-browse { display: flex; flex-direction: column; align-items: center; }
.room-subject-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .3rem 0 1.2rem; }
.room-grid-wrap { display: flex; justify-content: center; width: 100%; }
/* 課程詳情:使用專科教室 紅底勾勾(類似系統規則切換鈕) */
.room-toggle-wrap { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.room-toggle-text { font-weight: 700; color: #1E2C4F; font-size: .8rem; line-height: 1.2; }
/* 提高權重蓋過 .rule-toggle:checked(紫),改成跟 MAX 一樣的紅 #cf2533 */
input.room-toggle:checked { background: #cf2533; border-color: #cf2533; }
input.flex-toggle:checked { background: #cf2533; border-color: #cf2533; }
.subject-head-flex { margin-left: 1.2rem; }
.subject-head-flex + .icon-btn.del { margin-left: auto; }
.subject-detail-row.subject-room-row { display: block; }
.room-toggle-note { color: #E8835C; font-size: .78rem; line-height: 1.5; margin-top: .4rem; white-space: nowrap; }
/* 科目教室瀏覽:格子內只寫班級;一格多班(撞教室)以紅色提示 */
.ov-room-classes { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.ov-room-class { font-size: .82rem; font-weight: 800; color: #1E2C4F; }
.ov-room-classes.room-conflict .ov-room-class { color: #cf2533; }
.ov-room-more { color: #cf2533; font-weight: 900; font-size: 1rem; line-height: .6; }
.room-cell-clickable { cursor: pointer; }
/* 專科教室・某格班級完整清單浮窗 */
.room-cell-pop { position: fixed; z-index: 4200; background: #fff; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.24); max-width: 340px; overflow: visible; }
.room-cell-pop-inner { padding: .8rem .9rem; max-height: 70vh; overflow: auto; }
.room-cell-pop-title { font-weight: 800; color: #1E2C4F; font-size: .9rem; line-height: 1.5; margin-bottom: .6rem; white-space: pre-line; }
.room-cell-pop-list { display: grid; grid-template-columns: repeat(4, max-content); gap: .3rem .6rem; }
.room-cell-pop-item { font-weight: 700; color: #cf2533; font-size: .85rem; }
/* 課表設計:早自修時段列(圓鈕「早」+ 時間) */
.sd-early-no { border: none; padding: 0; cursor: pointer; }
.sd-early-no.off { background: #C9C3D6; }
.sd-block-label-orange { color: #E8835C !important; }
.sd-lockall-btn { background: #1E2C4F; color: #fff; border: 1.5px solid #1E2C4F; font-weight: 700; font-size: .9rem; padding: .45rem 1.1rem; border-radius: 8px; cursor: pointer; }
.sd-lockall-btn:hover { background: #2a3d6b; }
.sd-unlockall-btn { background: #fff; color: #1E2C4F; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .9rem; padding: .45rem 1.1rem; border-radius: 8px; cursor: pointer; }
.sped-link-btn { background: #8A7AA6; color: #fff; border: 1.5px solid #8A7AA6; font-weight: 700; font-size: .9rem; padding: .45rem 1.1rem; border-radius: 8px; cursor: pointer; }
.sped-link-btn:hover { background: #76679a; border-color: #76679a; }
/* 特教排課板 */
.sped-layout { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.sped-board { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow-x: auto; }
.sped-groups { flex: 1 1 360px; min-width: 320px; }
.sped-groups-title { font-weight: 800; color: #1E2C4F; font-size: 1rem; display: flex; align-items: center; height: 30px; margin-bottom: .6rem; }
.sped-board-tchips { display: flex; align-items: center; gap: .5rem; height: 30px; margin-bottom: .6rem; }
.sped-group-table { border-collapse: collapse; width: 100%; background: #fff; font-size: .82rem; }
.sped-group-table th, .sped-group-table td { border: 1px solid #E3E3E3; padding: .4rem .55rem; text-align: left; vertical-align: top; }
.sped-group-table th { background: #F3EEFA; color: #1E2C4F; font-weight: 800; white-space: nowrap; }
.sped-group-table .sgt-grp { font-weight: 800; color: #8A7AA6; white-space: nowrap; }
.sped-group-table .sgt-n { text-align: center; white-space: nowrap; }
.sped-group-table .sgt-subj { white-space: nowrap; color: #1E2C4F; }
.sped-group-table tbody tr:nth-child(even) td { background: #FAF8FE; }
/* 正方格(覆蓋模板預設的 70×70),與星期欄對齊 */
.class-overview--templated .ov-cell.sped-cell { width: 130px; height: 130px; gap: 4px; padding: 6px; flex-direction: column; align-items: center; justify-content: center; }
.class-overview--templated .ov-cell.sped-cell.editing { height: auto; min-height: 130px; align-items: stretch; justify-content: flex-start; }
/* 課程文字:不同顏色(無底色) */
.sped-entry { font-size: .9rem; font-weight: 800; line-height: 1.3; text-align: center; white-space: nowrap; letter-spacing: -.02em; }
.sped-entry.red { color: #cf2533; }
.sped-entry.blue { color: #1f4fd0; }
.sped-entry.black { color: #3a3a3a; }
/* 特教 vs 班級 平行瀏覽:特教格內多筆色字 */
.svc-sped-cell { flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; }
.svc-sped-entry { font-size: .56rem; font-weight: 800; line-height: 1.15; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.svc-group-clickable { cursor: pointer; border-radius: 4px; padding: 0 2px; transition: background .12s; }
.svc-group-clickable:hover { background: rgba(0,0,0,.08); }
.svc-group-on { background: #FFE08A; box-shadow: 0 0 0 1px #E8A100 inset; }
/* 右側:組別 → 原班級 */
.svc-right-pane { display: flex; flex-direction: column; gap: .6rem; }
.svc-group-caption { font-size: 1rem; color: #1E2C4F; font-weight: 600; display: flex; justify-content: center; align-items: center; gap: .3rem; flex-wrap: wrap; text-align: center; margin-bottom: 1.6rem; }
.svc-group-caption b { color: #1E2C4F; font-size: 1.1rem; }
.svc-class-chip { background: #FBDDDD; color: #cf2533; font-weight: 800; font-size: .82rem; padding: 2px 10px; border-radius: 999px; }
.svc-clear-btn { background: #fff; color: #8A7AA6; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .76rem; padding: 2px 10px; border-radius: 999px; cursor: pointer; margin-left: .2rem; }
.svc-clear-btn:hover { border-color: #8A7AA6; }
.svc-classes-wrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.svc-class-card { flex: 0 0 auto; }
/* 特教 + 班級 全部並列(最多 4 個一列),頂端切齊 */
.svc-board-wrap { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; justify-content: center; }
.svc-board-card { flex: 0 0 auto; align-self: flex-start; }
/* 原班級被特教抽離的時段:已對齊=綠框;科目不符(尚未連動)=紅框+標示應上科目 */
.svc-pullout-ok { box-shadow: 0 0 0 2px #2e9e5b inset; }
.svc-pullout-miss { box-shadow: 0 0 0 2px #cf2533 inset; position: relative; }
.svc-pullout-tag { position: absolute; left: 0; bottom: 0; font-size: .52rem; font-weight: 800; color: #cf2533; background: #fff; padding: 0 2px; line-height: 1.35; }
/* 圖例:說明綠框/紅框的意義 */
.svc-legend { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .3rem 1.4rem; margin: -.6rem 0 1.4rem; font-size: .85rem; color: #1E2C4F; }
.svc-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.svc-legend-box { width: 18px; height: 18px; border-radius: 3px; background: #fff; flex: 0 0 auto; }
.svc-legend-box.ok { box-shadow: 0 0 0 2px #2e9e5b inset; }
.svc-legend-box.miss { box-shadow: 0 0 0 2px #cf2533 inset; }
/* 老師姓名膠囊(用在標題) */
.sped-tchip { display: inline-block; font-size: 1rem; font-weight: 800; line-height: 1; padding: 4px 11px; border-radius: 999px; }
.sped-tchip.red { background: #FBDDDD; color: #cf2533; }
.sped-tchip.blue { background: #DEE7FB; color: #1f4fd0; }
.sped-tchip.black { background: #E6E6E6; color: #3a3a3a; }
.sped-entry-edit { display: flex; align-items: center; gap: 2px; }
.sped-input { flex: 1; min-width: 0; font-size: .7rem; font-weight: 700; border: 1px solid #DDD; border-radius: 4px; padding: 1px 3px; }
.sped-input.red { color: #cf2533; } .sped-input.blue { color: #1f4fd0; } .sped-input.black { color: #3a3a3a; }
.sped-dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; border: none; cursor: pointer; padding: 0; }
.sped-dot.red { background: #cf2533; } .sped-dot.blue { background: #1f4fd0; } .sped-dot.black { background: #3a3a3a; }
.sped-del { flex: 0 0 auto; border: none; background: transparent; color: #cf2533; font-weight: 800; cursor: pointer; padding: 0 1px; line-height: 1; }
.sped-add { width: 100%; border: 1px dashed #C9C3D6; background: #fafafa; color: #8A7AA6; border-radius: 4px; cursor: pointer; font-size: .72rem; padding: 1px 0; }
.sped-upload-btn { background: #8A7AA6; color: #fff; border: 1.5px solid #8A7AA6; font-weight: 700; font-size: .85rem; padding: .42rem 1rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; transition: background .12s, border-color .12s; }
.sped-upload-btn:hover:not(:disabled) { background: #76679a; border-color: #76679a; }
.sped-upload-btn:disabled { opacity: .6; cursor: default; }
.sped-upload-ico { font-size: 1.05rem; line-height: 1; }
.sped-upload-ico-img { width: 36px; height: 36px; object-fit: contain; display: inline-block; filter: brightness(0) invert(1); }
.sped-save-btn { background: #fff; color: #8A7AA6; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .85rem; padding: .42rem .95rem; border-radius: 8px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; transition: background .12s, border-color .12s, color .12s; }
.sped-save-btn:hover { border-color: #8A7AA6; }
.sped-save-btn--ghost { background: #fff; }
.sped-save-count { background: #8A7AA6; color: #fff; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.sped-saves-panel { background: #fff; border: 1px solid #DCD3EE; border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.1rem; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.sped-saves-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #1E2C4F; margin-bottom: .6rem; }
.sped-saves-close { background: transparent; border: none; font-size: 1.3rem; line-height: 1; color: #8A7AA6; cursor: pointer; padding: 0 .2rem; }
.sped-saves-empty { color: #8A7AA6; font-size: .9rem; padding: .4rem 0; }
.sped-save-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-top: 1px solid #EFEAF7; flex-wrap: wrap; }
.sped-save-row:first-of-type { border-top: none; }
.sped-save-name { font-weight: 700; color: #1E2C4F; font-size: .95rem; }
.sped-save-meta { color: #9990AB; font-size: .78rem; margin-top: 2px; }
.sped-save-actions { display: flex; gap: .4rem; flex: 0 0 auto; }
.sped-save-act { background: #fff; color: #8A7AA6; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .8rem; padding: .28rem .8rem; border-radius: 7px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.sped-save-act:hover { border-color: #8A7AA6; }
.sped-save-act.primary { background: #8A7AA6; color: #fff; border-color: #8A7AA6; }
.sped-save-act.primary:hover { background: #76679a; }
.sped-save-act.danger:hover { border-color: #cf2533; color: #cf2533; }
.sped-save-act.primary:disabled { opacity: .45; cursor: default; }
.sped-saves-hint { color: #E8835C; font-size: .8rem; margin-bottom: .3rem; }
.sped-save-pick { flex: 0 0 auto; display: flex; align-items: center; margin-right: .3rem; }
.sped-save-pick input { width: 18px; height: 18px; cursor: pointer; accent-color: #8A7AA6; }
.sped-save-row { display: flex; align-items: center; }
/* 並排比較視窗 */
.sped-cmp-overlay { position: fixed; inset: 0; background: rgba(20,16,40,.5); z-index: 4000; display: flex; align-items: flex-start; justify-content: center; padding: 2.5vh 2vw; overflow: auto; }
.sped-cmp-modal { background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.3); width: 100%; max-width: 1180px; padding: 1.1rem 1.3rem 1.4rem; }
.sped-cmp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #1E2C4F; font-size: 1.05rem; margin-bottom: .5rem; }
.sped-cmp-legend { display: flex; gap: .5rem; margin-bottom: .9rem; }
.sped-cmp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.sped-cmp-col { min-width: 0; }
.sped-cmp-title { font-weight: 800; color: #1E2C4F; font-size: .98rem; }
.sped-cmp-sub { color: #9990AB; font-size: .78rem; margin: 2px 0 .4rem; }
.sped-cmp-teachers { display: flex; gap: .4rem; margin-bottom: .5rem; }
.sped-cmp-teachers .sped-tchip { font-size: .78rem; padding: 2px 9px; }
.sped-cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sped-cmp-table th, .sped-cmp-table td { border: 1px solid #E5E0EF; padding: 3px; vertical-align: top; }
.sped-cmp-table thead th { background: #F3EFFA; color: #1E2C4F; font-weight: 700; text-align: center; font-size: .82rem; width: auto; }
.sped-cmp-table thead th:first-child { width: 30px; }
.sped-cmp-rowlabel { background: #FAF7FF; color: #1E2C4F; font-weight: 700; text-align: center; font-size: .82rem; }
.sped-cmp-cell { height: 46px; }
.sped-cmp-cell .sped-entry { font-size: .72rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 820px) { .sped-cmp-body { grid-template-columns: 1fr; } }
.sped-lock-btn { background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.sped-lock-btn img { height: 42px; width: auto; display: block; }
.sped-lock-btn:hover { opacity: .8; }
.sped-cell.editing { min-height: 104px; align-items: stretch; justify-content: flex-start; }
.ns-tcatblock { margin: .35rem 0 .6rem; }
.ns-tcat-label { font-size: .8rem; font-weight: 800; color: #8A7AA6; margin: 0 0 .35rem 0; padding-left: .1rem; }
.ns-tchips { display: grid; grid-template-columns: repeat(4, max-content); gap: .45rem .55rem; justify-content: start; }
.ns-tchip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-weight: 700; font-size: .88rem; }
.ns-tchip i { font-style: normal; font-weight: 800; opacity: .85; font-size: .82rem; }
.ns-tchip.ok { background: #E8F4EC; color: #2F7A4F; }
.ns-tchip.warn { background: #FBF3DD; color: #9A7413; }
.ns-tchip.bad { background: #FDE8E8; color: #cf2533; }
.ns-tchip.banned { background: #ECECEC; color: #6B6B6B; }
.ns-tchip { border: 1.5px solid transparent; cursor: pointer; }
.ns-tchip.selected { border-color: #1E2C4F; box-shadow: 0 0 0 2px rgba(30,44,79,.12); }
.ns-tnone { color: #AEAEAE; font-weight: 700; font-size: .88rem; }
/* 教師排課狀況:左群組 + 右詳細 */
/* 左半放教師清單(寬度依內容,讓右緣對齊實際膠囊),右半留白給浮動課表 */
.ns-tstatus-body { display: grid; grid-template-columns: max-content 1fr; gap: 1.5rem; align-items: start; }
.ns-tstatus-groups { min-width: 0; }
/* 浮動教師課表:漂浮在被點 chip 旁邊 */
.ns-tdetail-pop { position: fixed; z-index: 4000; background: #fff; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.22); overflow: visible; }
.ns-tdetail-inner { padding: .8rem .9rem; max-height: calc(100vh - 40px); overflow: auto; }
.ns-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.ns-detail-name { font-weight: 800; color: #1E2C4F; font-size: 1.02rem; }
.ns-detail-total { font-weight: 800; color: #8A7AA6; }
.ns-detail-subjects { display: flex; flex-wrap: wrap; gap: .35rem .55rem; margin-bottom: .9rem; }
.ns-detail-subj { font-size: .85rem; color: #1E2C4F; background: #fff; border: 1.5px solid #1E2C4F; border-radius: 999px; padding: .15rem .6rem; }
.ns-detail-subj b { color: #8A7AA6; }
.ns-detail-grid { width: max-content; }
/* 規則啟用:圓形按鈕 */
.rule-toggle { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9C3D6; background: #fff; cursor: pointer; position: relative; margin-top: 1px; flex: 0 0 auto; transition: background .15s, border-color .15s; }
.rule-toggle:checked { background: #8A7AA6; border-color: #8A7AA6; }
.rule-toggle:checked::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.rule-toggle:disabled { cursor: default; opacity: .55; }
/* 自訂規則:圓形灰加號 + 規則列 */
.custom-rule-add { width: 26px; height: 26px; border-radius: 50%; border: none; background: #AEAEAE; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); margin-bottom: .6rem; transition: background .15s; }
.custom-rule-add:hover { background: #8A7AA6; }
.custom-rule-list { display: flex; flex-direction: column; gap: .35rem; }
.custom-rule-row { display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; border: 1px solid #EEE; border-radius: 8px; background: #fff; }
.custom-rule-text { flex: 1; font-size: .88rem; color: #1E2C4F; line-height: 1.4; }
.custom-rule-input { flex: 1; border: none; outline: none; background: transparent; font-size: .88rem; color: #1E2C4F; font-family: inherit; }
.custom-rule-input::placeholder { color: #AEAEAE; }
.custom-rule-del { flex: 0 0 auto; width: 22px; height: 22px; border: none; background: transparent; color: #AEAEAE; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.custom-rule-del:hover { color: #cf2533; background: #FDE8E8; }
.custom-rule-empty { font-size: .85rem; color: #AEAEAE; padding: .3rem .1rem; }
/* 手動改課・教師瀏覽:左選單、右課表 */
.manual-teacher-layout { display: grid; grid-template-columns: max-content auto; gap: 2.5rem; align-items: start; padding: .3rem 0 1.5rem; }
.manual-teacher-pane { display: flex; justify-content: flex-start; }
/* 手動改課・教師瀏覽:依類別分群的教師選單 */
.manual-teacher-picker { display: flex; flex-direction: column; gap: .6rem; }
.manual-tcat { display: flex; align-items: flex-start; gap: .6rem; }
.manual-tcat-label { flex: 0 0 auto; min-width: 50px; text-align: center; color: #fff; font-weight: 800; font-size: .78rem; padding: .28rem .6rem; border-radius: 8px; }
.manual-tcat-chips { display: grid; grid-template-columns: repeat(5, max-content); gap: .35rem; align-items: center; justify-content: start; }
.manual-tchip { border: 1.5px solid #C9C3D6; background: #fff; color: #1E2C4F; font-weight: 700; font-size: .8rem; padding: .28rem .7rem; border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.manual-tchip:hover { border-color: #8A7AA6; }
.manual-tchip.active { background: #8A7AA6; border-color: #8A7AA6; color: #fff; }
.manual-tcat-empty { color: #AEAEAE; font-size: .85rem; }
/* 手動改課・各班瀏覽:左課表 + 右科目調色盤 */
.manual-edit-layout { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 1.3rem; align-items: start; }
.manual-edit-left { display: flex; justify-content: flex-start; }
.manual-edit-right { background: #fff; border: 1px solid #B7A9D0; border-radius: 12px; padding: 1rem 1.3rem; align-self: start; min-width: 360px; }
.manual-homeroom-note { font-size: .88rem; font-weight: 700; color: #1E2C4F; background: #F4F1FA; border-radius: 8px; padding: .5rem .65rem; margin-bottom: .8rem; line-height: 1.5; }
.manual-subj-title { font-weight: 800; color: #1E2C4F; margin-bottom: .8rem; font-size: .92rem; }
.manual-subj-titlebar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.manual-subj-titlebar .manual-subj-title { margin-bottom: 0; }
.manual-extra-btn { border: 1.5px solid #C9C3D6; background: #fff; color: #8A7AA6; font-weight: 700; font-size: .78rem; padding: .28rem .7rem; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.manual-extra-btn:hover { border-color: #8A7AA6; }
.manual-extra-btn.active { background: #8A7AA6; border-color: #8A7AA6; color: #fff; }
.manual-subj-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.manual-subj-btn { width: 56px; height: 56px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; overflow: hidden; padding: 3px; border: none; color: #fff; font-weight: 800; border-radius: 0; cursor: grab; box-shadow: 0 3px 8px rgba(0,0,0,.12); transition: transform .12s, box-shadow .12s; }
.manual-subj-name { display: block; white-space: normal; word-break: break-all; line-height: 1.05; }
.manual-subj-hours { display: block; font-size: .58rem; font-weight: 800; line-height: 1; text-align: center; }
/* 手動改課:目前班表每科節數 */
.manual-status-title { margin-top: 1.1rem; font-weight: 800; color: #1E2C4F; font-size: .92rem; }
.manual-status-wrap { margin-top: .55rem; display: flex; align-items: flex-start; gap: 1.3rem; }
.manual-status-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: .3rem 1.6rem; justify-content: start; }
.manual-status-vdivider { align-self: stretch; width: 1px; background: #E5E0EF; }
.manual-status-row { display: flex; align-items: center; gap: .45rem; font-size: .85rem; white-space: nowrap; }
.manual-status-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.manual-status-name { color: #1E2C4F; font-weight: 700; min-width: 3.2em; }
.manual-status-count { color: #1E2C4F; font-weight: 800; }
.manual-status-count.over { color: #cf2533; }
.manual-subj-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,.18); }
.manual-subj-btn:active { cursor: grabbing; }
/* 可放置的時段格(拖曳中) */
.sd-cell.manual-droppable { outline: 2.5px solid #8A7AA6; outline-offset: -3px; }
/* 手動改課:課表格右上角刪除 × */
.sd-cell.manual-cell { position: relative; }
.sd-cell.manual-cell-filled { cursor: grab; }
.sd-cell.manual-cell-filled:active { cursor: grabbing; }
.manual-cell-del { position: absolute; top: 0; right: 3px; padding: 0; line-height: 1; border: none; background: transparent; color: #cf2533; font-size: 19px; font-weight: 800; cursor: pointer; display: none; }
.sd-cell.manual-cell:hover .manual-cell-del { display: inline-block; }
.manual-cell-del:hover { color: #a01b27; }
/* 鎖定格規則(最後一條)上方分隔線 */
.sys-rule-locked { border-top: 1px solid #DCD3EE; margin-top: .4rem; padding-top: .4rem; }
/* 可自由勾選的規則(鎖定格):勾勾用橘底 */
.sys-rule-locked .rule-toggle:checked { background: #E8835C; border-color: #E8835C; }
.sys-rule-orange .rule-toggle:checked { background: #E8835C; border-color: #E8835C; }
/* 自訂規則:勾勾橘底,表示可隨時暫時停用(同左側可切換規則) */
.custom-rule-row .rule-toggle:checked { background: #E8835C; border-color: #E8835C; }
/* 班表總覽:年級篩選列 */
.overview-grade-filter { display: flex; align-items: center; gap: .3rem; margin: 0 0 .5rem; flex-wrap: wrap; }
.overview-grade-filter .ovf-label { font-size: .85rem; font-weight: 800; color: #1E2C4F; width: 2.6em; flex-shrink: 0; }
.ovf-chip { border: none; background: #C9C0DE; color: #fff; font-weight: 800; cursor: pointer; opacity: .85; transition: all .15s; }
.ovf-chip:hover { opacity: 1; }
.ovf-chip.active { background: #9D8FBE; opacity: 1; box-shadow: 0 2px 6px rgba(157,143,190,.4); }
.ovf-all { padding: .3rem .9rem; border-radius: 6px; font-size: .85rem; }
.ovf-circle { width: 30px; height: 30px; border-radius: 50%; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.ovf-parallel-btn { margin-left: auto; padding: .28rem .75rem; border: 1.5px solid #9D8FBE; background: #fff; color: #6E5E92; font-weight: 700; font-size: .78rem; border-radius: 7px; cursor: pointer; transition: all .15s; }
.ovf-coral { background: #F3C9B6; }
.ovf-coral.active { background: #E8835C; box-shadow: 0 2px 6px rgba(232,131,92,.4); }
.overview-grade-filter .ovf-chips-row { display: flex; flex-wrap: wrap; gap: .3rem; }
/* 各班瀏覽:選擇年級班級 區塊(單一標籤 + 兩列 chip) */
.overview-select-block { display: flex; align-items: center; justify-content: center; gap: 3rem; margin: 0 0 1rem; }
.ovf-select-label { font-size: .85rem; font-weight: 800; color: #1E2C4F; white-space: nowrap; flex: 0 0 auto; }
/* 平行模式:年級+班級網格,班級置中在選中年級正下方 */
.ov-parallel-block { align-items: start; justify-content: center; gap: 3rem; margin-bottom: 1rem; }
.ov-parallel-block .ovf-select-label { padding-top: .2rem; align-self: flex-start; }
.ov-pg-grid { display: grid; grid-auto-columns: 34px; grid-template-rows: auto auto; gap: .45rem .35rem; justify-items: center; align-items: center; }
.ov-pg-grid .ov-pg-cell { min-width: 0; }
.ov-pg-classes { display: flex; gap: .4rem; justify-self: center; width: max-content; }
.ovf-parallel-btn:hover { background: #F4F1FA; }
.ovf-parallel-btn.active { background: #9D8FBE; color: #fff; box-shadow: 0 3px 9px rgba(157,143,190,.4); }
/* 平行瀏覽 */
.parallel-view { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.parallel-pane { display: flex; flex-direction: column; gap: .8rem; }
.parallel-pane-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 26px; }
.parallel-caption { font-size: .7rem; color: #E8805E; margin: 0 0 .6rem; text-align: center; }
.parallel-view { align-items: flex-start; }
.parallel-pane { gap: 0; }
.parallel-pane-head select { padding: 5px 10px; border: 1px solid #C9C0DE; border-radius: 6px; background: #fff; color: #1E2C4F; font-size: .95rem; font-weight: 700; cursor: pointer; }
.parallel-hint { font-size: .8rem; color: #9A8FB5; }
.parallel-teacher-title { font-size: 1.15rem; font-weight: 800; color: #1E2C4F; }
.parallel-card .parallel-cell.cell-clickable { cursor: pointer; }
.parallel-card .parallel-cell.cell-clickable:hover { outline: 2px solid #9D8FBE; outline-offset: -2px; }
/* 選了老師 → 只有「其他格子」變暗(bar、標題、節號維持) */
.parallel-card.ov-dim .ov-cell { opacity: .28; transition: opacity .15s; }
.parallel-card.ov-dim .ov-cell.cell-match { opacity: 1; }
.parallel-teacher-grid table { border-collapse: separate; border-spacing: 4px; }
.parallel-teacher-grid th { background: #9D8FBE; color: #fff; font-weight: 700; padding: 6px 0; width: 72px; font-size: .9rem; border-radius: 4px; }
.parallel-teacher-grid th:first-child { width: 32px; }
.parallel-teacher-grid .ptg-period { font-weight: 800; color: #1E2C4F; text-align: center; width: 32px; }
.parallel-teacher-grid .ptg-cell { width: 72px; height: 56px; vertical-align: middle; background: #F6F4FA; border-radius: 4px; padding: 3px; }
.parallel-teacher-grid .ptg-subject { color: #fff; font-weight: 700; font-size: .85rem; border-radius: 3px; padding: 3px 2px; text-align: center; line-height: 1.1; }
.parallel-teacher-grid .ptg-class { font-size: .68rem; color: #6B6B6B; text-align: center; margin-top: 2px; }
.parallel-empty { padding: 3rem 2rem; color: #AEAEAE; text-align: center; }

.class-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.class-grid .class-overview { flex: 0 0 auto; min-width: 280px; max-width: 360px; }
.class-grid .class-overview--templated { min-width: 0; max-width: none; width: max-content; }
.teacher-grid { justify-content: center; gap: 2rem 1rem; }

.class-overview {
    background: var(--card);
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.2s;
}

.class-overview:hover {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(115,184,172,.1);
}

/* 套用樣板的總覽卡:與課表設計預覽「完全相同」尺寸,再整體 zoom 縮小 */
.class-overview--templated { position: relative; width: max-content; max-width: none; padding: 1.3rem 1.5rem 1.6rem; border-radius: 4px; box-shadow: var(--shadow); cursor: default; zoom: 0.74; }
.class-overview--templated:hover { transform: none; }
.class-overview--templated .ov-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem 0 .8rem; }
.class-overview--templated .ov-title { font-size: 1.4rem; font-weight: 800; letter-spacing: .15em; }
.class-overview--templated .sd-teacher { font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; }
.class-overview--templated .sd-teacher-tag { font-size: .85rem; background: var(--sd-tag-bg, rgba(0,0,0,.08)); padding: 2px 8px; border-radius: 4px; }
.class-overview--templated .ov-day-row { display: grid; gap: 14px; align-items: center; text-align: center; font-size: .9rem; opacity: .9; padding: 0; }
.class-overview--templated .ov-grid { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.class-overview--templated .sd-bar { padding: 0 1rem; font-size: .8rem; letter-spacing: .12em; height: 22px; min-height: 22px; line-height: 1; text-align: center; }
.class-overview--templated .ov-period-row { display: grid; gap: 14px; align-items: center; }
.class-overview--templated .ov-period-num { font-size: 1.3rem; font-weight: 700; }
.class-overview--templated .sd-period-meta { padding: 0; align-items: center; }
.class-overview--templated .ov-cell { width: 70px; height: 70px; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 2px; box-sizing: border-box; }
.class-overview--templated .ov-cell.hidden { background: transparent !important; }
.class-overview--templated .ov-cell-subject { color: #1A1A1A; font-weight: 700; text-align: center; line-height: 1.05; white-space: nowrap; max-width: 100%; }
.class-overview--templated .ov-cell-teacher { color: #9A9A9A; font-weight: 500; font-size: .62rem; text-align: center; line-height: 1.05; white-space: nowrap; max-width: 100%; }

.class-overview h4 {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 1rem;
}

/* 班表總覽:列印用的每班外層(畫面上透明,不影響網格排版;列印時為整頁置中容器) */
.ov-print-cell { display: contents; }
/* 班表總覽:下載 PDF 按鈕(漂浮在右側正中,hover 展開文字) */
.overview-section { position: relative; }
.ov-pdf-btn { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 9998; height: 46px; min-width: 46px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 0; background: #E8835C; color: #fff; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(232,131,92,.4); transition: background .15s, gap .2s; }
.ov-pdf-btn:hover { background: #d97552; gap: 6px; }
.ov-pdf-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.ov-pdf-btn .ov-pdf-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: .8rem; font-weight: 700; transition: max-width .2s, opacity .2s; }
.ov-pdf-btn:hover .ov-pdf-label { max-width: 110px; opacity: 1; }

/* 列印:只輸出課表卡片,一頁一張,保留網頁配色 */
@media print {
    @page { margin: 10mm; }
    body.printing-overview { background: #fff !important; }
    /* 列印時移除版面留白(畫面上的上方留白是為了避開漂浮列,列印不需要) */
    body.printing-overview .main-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
    body.printing-overview .overview-section { padding: 0 !important; }
    body.printing-overview .overview-grid,
    body.printing-overview .grade-section,
    body.printing-overview .class-grid { margin: 0 !important; padding: 0 !important; }
    /* 移除側欄/頂列/模式列/篩選(避免佔位產生空白頁、釋放整頁) */
    body.printing-overview .nav-tabs,
    body.printing-overview .user-bar,
    body.printing-overview .ov-pdf-btn,
    body.printing-overview .overview-mode-tabs,
    body.printing-overview .overview-select-block,
    body.printing-overview .overview-grade-filter,
    body.printing-overview .parallel-caption { display: none !important; }
    /* 隱藏所有元素,只顯示課表卡片 */
    body.printing-overview * { visibility: hidden !important; }
    body.printing-overview .overview-grid, body.printing-overview .overview-grid *,
    body.printing-overview .parallel-view, body.printing-overview .parallel-view * { visibility: visible !important; }
    /* 課表容器改為區塊流(才能正確分頁),內容置中 */
    body.printing-overview .overview-grid,
    body.printing-overview .grade-section,
    body.printing-overview .class-grid,
    body.printing-overview .parallel-view { display: block !important; position: static !important; width: auto !important; gap: 0 !important; text-align: center !important; }
    /* 一頁一班:整頁置中(水平+垂直),一頁一張 */
    body.printing-overview .ov-print-cell {
        display: flex !important; align-items: center; justify-content: center;
        min-height: 90vh; width: 100%;
        break-after: page; page-break-after: always;
        break-inside: avoid; page-break-inside: avoid;
    }
    body.printing-overview .overview-grid .class-overview {
        break-inside: avoid; page-break-inside: avoid;
        margin: 0 !important;
    }
    /* 一頁一老師(平行瀏覽左班級、右老師各一頁) */
    body.printing-overview .parallel-pane {
        display: flex !important; align-items: center; justify-content: center;
        min-height: 90vh; width: 100%;
        break-after: page; page-break-after: always;
        break-inside: avoid; page-break-inside: avoid;
    }
    /* A4:統一縮放(JS 量測,最大張填滿、其餘等比例) */
    body.printing-overview .class-overview--templated {
        zoom: 1 !important;
        transform: scale(var(--ov-print-scale, 1));
        transform-origin: center center;
    }
    body.printing-overview .parallel-empty { display: none !important; }
    /* 顏色照網頁顯示 */
    body.printing-overview .overview-grid, body.printing-overview .overview-grid *,
    body.printing-overview .parallel-view, body.printing-overview .parallel-view * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

.mini-schedule table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.mini-schedule th,
.mini-schedule td {
    border: 1px solid var(--border);
    padding: 0.25rem;
    text-align: center;
}

.mini-schedule th {
    background: var(--primary);
    color: #fff;
    font-weight: 500;
}

.mini-time {
    background: #fff;
    font-weight: 500;
    color: var(--text-secondary);
}

.mini-cell {
    height: 28px;
    vertical-align: middle;
}
.mini-cell--conflict {
    height: 40px;
    background: #fff;
    border: 1px dashed #E8835C !important;
    vertical-align: middle;
}
.mini-cell--hidden { background: #ECECEC !important; opacity: .4; }
.mini-cell--hidden > * { visibility: hidden; }
.mini-bar-row .mini-bar { padding: 3px 8px; color: #fff; text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .1em; border: none; }
/* 套用樣板的 mini-schedule:科目格純白底黑字、無顏色 */
.mini-schedule--templated { padding: 6px; border-radius: 0; }
.mini-schedule--templated table { background: transparent; }
.mini-schedule--templated th { background: transparent; color: inherit; border-color: rgba(255,255,255,.3); }
.mini-schedule--templated .mini-time { color: inherit; }
.mini-schedule--templated .mini-cell { background: rgba(255,255,255,.95); }
.mini-schedule--templated .mini-cell--hidden { background: transparent !important; }
.mini-schedule--templated .mini-subject { background: transparent !important; color: #1A1A1A !important; font-weight: 700; }

.mini-subject {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    overflow: hidden;
}
.mini-sped-badge {
    background: rgba(0,0,0,.28);
    border-radius: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0 3px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: help;
}

.mini-conflict-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    border-radius: 3px;
    transition: background .15s;
    padding: 1px;
}
.mini-conflict-cell:hover {
    background: #fff;
}
/* 總覽唯讀:特教衝突格不可點擊編輯 */
.mini-conflict-cell--readonly { cursor: default; }
.mini-conflict-cell--readonly:hover { background: transparent; }
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Teacher Info Card ───────────────── */

.teacher-info-card {
    background: var(--primary);
    color: #fff;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.teacher-info-card h3 { margin-bottom: 0.75rem; font-size: 1.3rem; }

.teacher-info-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.teacher-info-label { font-weight: 500; opacity: 0.9; }
.teacher-info-value { font-weight: 600; }

.teacher-workload-summary {
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.workload-header {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.workload-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.workload-stat {
    background: var(--card);
    padding: 0.75rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border);
}

.workload-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.workload-label { font-size: 0.85rem; color: var(--text-secondary); }

.class-list {
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.class-list h4 {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.class-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.class-chip {
    background: var(--primary);
    color: #fff;
    padding: 0.35rem 0.8rem;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.no-teacher-selected {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 2rem 0;
    padding: 2rem;
    background: #fff;
    border-radius: var(--radius);
    border: 2px dashed var(--border);
}

.teacher-load-overview {
    margin: 2rem 0;
}

.teacher-load-overview h3 {
    color: var(--text);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.teacher-load-table th:nth-child(3),
.teacher-load-table td:nth-child(3),
.teacher-load-table th:nth-child(4),
.teacher-load-table td:nth-child(4) {
    text-align: center;
    white-space: nowrap;
}

.teacher-load-name {
    color: #8A7AA6;
    font-weight: 800;
    white-space: nowrap;
}

.teacher-load-hours {
    color: #8A7AA6;
    font-size: 1.08rem;
    font-weight: 800;
}

/* ── Excel ───────────────────────────── */

.excel-actions {
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}

.excel-actions h4 {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.excel-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-excel-import {
    background: #8A7AA6;
    color: #fff;
    border: none;
}

.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.file-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.file-input-label {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-block;
    text-align: center;
    background: #8A7AA6;
    color: #fff;
    font-size: 0.9rem;
}

.file-input-label:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.upload-success { background: #fff; color: #1E2C4F; border: 1px solid #73B8AC; }
.upload-error { background: #fff; color: #E8835C; border: 1px solid #AEAEAE; }

.preview-stats { font-size: 0.85rem; color: var(--text-secondary); }

.import-preview h5 {
    color: var(--text);
    margin-bottom: 0.4rem;
}

/* ── Manual Schedule Layout ──────────── */

.manual-schedule-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    min-height: 80vh;
}

.course-pool {
    background: #fff;
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow-y: auto;
}

.course-pool h3 {
    color: var(--text);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.course-item {
    background: var(--card);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: grab;
    transition: all 0.2s;
}

.course-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.course-item.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
    cursor: grabbing;
}

.course-item.remaining { border-left: 3px solid #E8835C; }
.course-item.completed { border-left: 3px solid var(--accent); opacity: 0.6; }

.course-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.course-subject { font-weight: 600; color: var(--text); font-size: 0.92rem; }

.course-count {
    background: var(--primary);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.course-teacher { color: var(--text-secondary); font-size: 0.82rem; margin-bottom: 0.2rem; }

.course-progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.progress-bar {
    flex: 1;
    height: 3px;
    background: #AEAEAE;
    border-radius: 2px;
    overflow: hidden; color: #fff;}

.progress-fill {
    height: 100%;
    transition: width 0.3s;
    border-radius: 2px;
}

/* ── Manual Schedule Table ───────────── */

.manual-schedule-table {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    height: fit-content;
}

.manual-schedule-cell {
    position: relative;
    width: 130px;
    height: 72px;
    border: 1.5px dashed #AEAEAE;
    transition: all 0.2s;
}

.manual-schedule-cell.drop-zone {
    border-color: var(--primary);
    background: rgba(115,184,172,.06);
}

.manual-schedule-cell.occupied {
    border: 1.5px solid transparent;
}

.schedule-course-block {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    cursor: grab;
    transition: all 0.2s;
    position: relative;
}

.schedule-course-block:hover {
    transform: scale(1.04);
    z-index: 10;
    box-shadow: var(--shadow-md);
}

.schedule-course-block.dragging {
    cursor: grabbing;
    opacity: 0.6;
    transform: rotate(2deg) scale(0.96);
}

.course-block-subject { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.15rem; }
.course-block-teacher { font-size: 0.72rem; opacity: 0.9; }

.course-block-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;
    gap: 2px;
}

.schedule-course-block:hover .course-block-actions { display: flex; }

.action-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    background: rgba(0,0,0,.4);
    color: #fff;
    transition: background 0.15s;
}

.action-btn:hover { background: rgba(0,0,0,.7); }

/* ── Manual Schedule Controls ────────── */

.manual-schedule-controls {
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border: 1px solid var(--border);
}

.controls-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.control-group label { font-weight: 500; color: var(--text-secondary); font-size: 0.85rem; }

.control-group select,
.control-group input[type="range"] {
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
}

/* ── Batch Operations ────────────────── */

.batch-operations {
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-top: 0.75rem;
    border: 1px solid #AEAEAE;
}

.batch-operations h4 {
    color: #E8835C;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}

.batch-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.btn-batch {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-batch-clear { background: #AEAEAE; color: #fff; }
.btn-batch-auto { background: #AEAEAE; color: #fff; }
.btn-batch-swap { background: #AEAEAE; color: #fff; }

/* ── Schedule Validation ─────────────── */

.schedule-validation {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    clear: both;
}

.validation-success {
    background: #fff;
    border: 1px solid #73B8AC;
    color: #1E2C4F;
}

.validation-warning {
    background: #fff;
    border: 1px solid #E8835C;
    color: #E8835C;
}

.validation-error {
    background: #fff;
    border: 1px solid #AEAEAE;
    color: #E8835C;
}

.validation-issues {
    list-style: none;
    margin-top: 0.4rem;
    max-height: 200px;
    overflow-y: auto;
}

.validation-issues li {
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
}

.issue-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}

.icon-error { background: #E8835C; }
.icon-warning { background: #E8835C; }
.icon-success { background: #4E9D6C; }

/* ── Quick Actions FAB ───────────────── */

.quick-actions {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 100;
}

.quick-action-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow-md);
    transition: all 0.2s;
}

.quick-action-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(115,184,172,.3);
}

.quick-action-tooltip {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(30,44,79,.85);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.quick-action-btn:hover .quick-action-tooltip { opacity: 1; }

/* ── Login Page ──────────────────────── */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg);
}

.login-card {
    background: var(--card);
    padding: 2.5rem;
    border-radius: 16px;
    width: 380px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border: 1px solid var(--border);
}

/* ── Upload ───────────────────────────── */

.upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.upload-status {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
}

.import-preview {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* ── Snapshot ─────────────────────────── */

.snapshot-list {
    max-height: 300px;
    overflow-y: auto;
}

.snapshot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--card);
}

/* ── AI Rules ────────────────────────── */

.rule-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--card);
    transition: all 0.2s;
}

.rule-card:hover { border-color: var(--primary); }

.rule-type-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
}

/* ── Animations ──────────────────────── */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────── */

@media (max-width: 768px) {
    .main-content { padding: 4rem 0.75rem 0.75rem; }
    .header { padding: 0.75rem; }
    .header h1 { font-size: 1.2rem; }
    .tab-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
    .section-header { flex-direction: column; align-items: flex-start; }
    .schedule-cell { width: 110px; height: 45px; }
    .manual-schedule-layout { grid-template-columns: 1fr; min-height: auto; }
    .course-pool { height: 280px; margin-bottom: 0.75rem; }
    .manual-schedule-cell { width: 110px; height: 55px; }
    .overview-grid { grid-template-columns: 1fr; }
    .class-grid { grid-template-columns: 1fr; }
    .teacher-info-grid { grid-template-columns: 1fr; }
    .workload-stats { grid-template-columns: repeat(2, 1fr); }
    .quick-actions { bottom: 0.75rem; right: 0.75rem; }
    .quick-action-btn { width: 42px; height: 42px; font-size: 1rem; }
}


/* ── Login ──────────────────────────────────────────────────────────── */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#8A7AA6 0%,#8A7AA6 100%);display:flex;align-items:center;justify-content:center;z-index:9999;}
.login-card{background:#fff;border-radius:16px;padding:2.5rem 2rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.login-card h2{text-align:center;margin-bottom:.3rem;color:#1E2C4F;}
.login-card .subtitle{text-align:center;color:#AEAEAE;font-size:.9rem;margin-bottom:1.5rem;}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.2rem;}
.role-card{border:2px solid #AEAEAE;border-radius:10px;padding:.8rem .5rem;text-align:center;cursor:pointer;transition:.2s;}
.role-card:hover{border-color:#8A7AA6;background:#fff;}
.role-card.active{border-color:#8A7AA6;background:#AEAEAE; color: #fff;}
.role-card .r-icon{font-size:1.8rem;display:block;}
.role-card .r-name{font-size:.85rem;font-weight:600;color:#1E2C4F;}
.role-card .r-desc{font-size:.72rem;color:#AEAEAE;margin-top:.2rem;}
.login-field{margin-bottom:1rem;}
.login-field label{display:block;font-size:.85rem;color:#4E9D6C;margin-bottom:.35rem;font-weight:600;}
.login-field input,.login-field select{width:100%;padding:.6rem .8rem;border:1.5px solid #AEAEAE;border-radius:8px;font-size:.95rem;box-sizing:border-box;}
.login-error{color:#E8835C;font-size:.85rem;margin-bottom:.8rem;padding:.5rem;background:#fff;border-radius:6px;}
.login-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#8A7AA6,#8A7AA6);color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:600;}
.login-btn:hover{opacity:.9;}

/* ── User bar ────────────────────────────────────────────────────────── */
.user-bar{display:flex;align-items:center;gap:.75rem;margin-left:auto;}
.user-badge{background:#AEAEAE;color: #fff;padding:4px 12px;border-radius:4px;font-size:.9rem;}
.logout-btn{background:#fff;color:#1E2C4F;border:1px solid #AEAEAE;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;}
.logout-btn:hover{background:#9D8FBE;border-color:#9D8FBE;color: #fff;}

/* ── Schedule cell states ────────────────────────────────────────────── */
.schedule-cell{position:relative;}
.schedule-cell.locked{outline:2px solid #E8835C;outline-offset:-2px;background:#fff;}
.schedule-cell.locked .subject-select{opacity:.55;cursor:not-allowed;}
.schedule-cell.ai-suggest-from{outline:2px solid #E8835C;outline-offset:-2px;background:#fff;}
.schedule-cell.ai-suggest-to{outline:2px solid #4E9D6C;outline-offset:-2px;background:#fff;}
.cell-lock-btn{position:absolute;top:4px;right:4px;border:1px solid #AEAEAE;background:#fff;color:#1E2C4F;border-radius:6px;font-size:.72rem;line-height:1;padding:4px 7px;cursor:pointer;z-index:20;font-weight:700;box-shadow:0 1px 3px rgba(30,44,79,.12);}
.schedule-cell.locked .cell-lock-btn{background:#E8835C;border-color:#E8835C;color:#fff;}
.manual-schedule-cell.locked{outline:2px solid #E8835C;outline-offset:-2px;background:#fff;}
.manual-schedule-cell.invalid{outline:2px solid #E8835C;outline-offset:-2px;background:#fff;}

/* ── Schedule config panel ───────────────────────────────────────────── */
.schedule-config-panel{margin:1rem 0;border:1px solid #AEAEAE;border-radius:8px;background:#fff;overflow:hidden;}
.schedule-config-tabs{display:flex;gap:0;border-bottom:1px solid #AEAEAE;background:#fff;}
.schedule-config-tab{min-width:96px;padding:10px 18px;border:0;border-right:1px solid #AEAEAE;background:transparent;color:#1E2C4F;font-weight:700;cursor:pointer;}
.schedule-config-tab.active{background:#fff;color:#1E2C4F;box-shadow:inset 0 3px 0 #73B8AC;}
.schedule-config-body{padding:14px 16px;}
.schedule-config-empty{color:#8A7AA6;font-size:.9rem;}
.schedule-config-panel .excel-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

/* ── Compact teacher assignment ──────────────────────────────────────── */
.compact-teacher-assignment{margin:0;padding:0;border:0;background:transparent;}
.compact-teacher-assignment h3{margin:0 0 10px;font-size:1rem;}
.compact-teacher-assignment .teacher-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 12px;}
.compact-teacher-assignment .teacher-assign-item{display:flex;align-items:center;gap:8px;}
.compact-teacher-assignment .teacher-assign-item label{min-width:72px;margin:0;color:#1E2C4F;font-weight:700;}
.compact-teacher-assignment .teacher-assign-item select{flex:1;min-width:0;}

/* ── Period chips ────────────────────────────────────────────────────── */
.period-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-weight:700;color:#1E2C4F;}
.period-add-btn{padding:5px 12px;background:#73B8AC;color:#fff;border:0;border-radius:6px;cursor:pointer;font-weight:700;}
.period-chip-list{display:flex;flex-wrap:wrap;gap:8px;}
.period-chip{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #AEAEAE;border-radius:8px;padding:4px 8px;}
.period-chip span{font-size:.75rem;color:#AEAEAE;font-weight:700;min-width:16px;}
.period-chip input{width:108px;border:0;background:transparent;font-size:.85rem;color:#1E2C4F;padding:2px 4px;outline:0;}
.period-chip button{background:transparent;border:0;color:#AEAEAE;cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;}
.period-chip button:disabled{opacity:.35;cursor:default;}
.period-hint{margin-top:8px;font-size:.78rem;color:#AEAEAE;}

@media (max-width:700px){
    .schedule-config-tab{flex:1;min-width:0;}
    .compact-teacher-assignment .teacher-grid{grid-template-columns:1fr;}
    .compact-teacher-assignment .teacher-assign-item{align-items:flex-start;flex-direction:column;gap:4px;}
    .compact-teacher-assignment .teacher-assign-item label{min-width:0;}
    .compact-teacher-assignment .teacher-assign-item select{width:100%;}
}

.btn-icon { font-size: 1.05rem; line-height: 1; display: inline-block; }

/* ===== 編輯教師表單 — 範本重新設計 ===== */
.teacher-form-modal { max-width: 1456px; width: 98%; padding: 1.8rem 2rem; }
.tf-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.4rem 2.6rem; align-items: start; }
.tf-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: stretch; gap: .6rem; border-top: 1px solid #fff; padding-top: 1rem; margin-top: .4rem; }

/* 左欄 */
.tf-side { display: flex; flex-direction: column; }
.tf-title { font-size: 1.7rem; font-weight: 800; letter-spacing: 0; color: #1E2C4F; margin: 0 0 1.1rem; }
.tf-card { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(30,44,79,.14); padding: 2rem 1.1rem 1.4rem; text-align: center; margin: 18px .4rem 1rem; }
.tf-card-tab { position: absolute; top: -16px; width: 34px; height: 40px; background: #E8835C; border-radius: 8px; }
.tf-card-tab-l { left: 26%; }
.tf-card-tab-r { right: 26%; }
.tf-card-name { border: none; outline: none; text-align: center; font-size: 1.5rem; font-weight: 800; color: #1E2C4F; width: 100%; background: transparent; }
.tf-card-name::placeholder { color: #AEAEAE; }
.tf-card-cat { color: #1E2C4F; font-size: 1.05rem; margin-top: .5rem; }
.tf-card-home { color: #1E2C4F; font-size: 1.05rem; }
.tf-card-subjects { margin-top: .9rem; color: #1E2C4F; font-size: 1rem; line-height: 1.7; }
.tf-card-subj-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 16px; white-space: nowrap; }
.tf-card-subj-name { font-weight: 700; margin-right: 2px; white-space: nowrap; flex-shrink: 0; }
.tf-gh-item { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.tf-gh-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; background: var(--cat-color, #EDEFF3); border-radius: 4px; font-size: 1rem; font-weight: 800; font-style: normal; color: #fff; line-height: 1; }
.tf-card-empty { color: #AEAEAE; font-size: .85rem; }
.tf-gauge { width: 132px; height: 66px; border-radius: 0 0 132px 132px; background: #E8835C; margin: 1rem auto -.4rem; display: flex; align-items: center; justify-content: center; }
.tf-gauge span { font-size: 1.6rem; font-weight: 800; color: #fff; }

.tf-side-field { display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; }
.tf-side-field > label { font-weight: 700; color: #1E2C4F; font-size: .92rem; }
/* 預約欄位按鈕 */
.tf-reservation-btn { display: flex; align-items: flex-start; gap: .6rem; width: 100%; padding: .5rem .7rem; border: 1.5px solid #AEAEAE; border-radius: 8px; background: #fff; cursor: pointer; font-size: .9rem; color: #1E2C4F; text-align: left; }
.tf-reservation-text { white-space: pre-line; line-height: 1.5; flex: 1 1 auto; }
/* 各科目授課節數結論灰框 */
.tf-subject-summary { margin-top: 1.2rem; padding: .8rem 1rem; background: #F2F2F4; border-radius: 10px; color: #1E2C4F; font-weight: 700; font-size: .9rem; line-height: 1.7; }
.tf-ss-num { color: #cf2533; font-weight: 800; }
.tf-reservation-btn.is-set { border-color: #E8835C; }
.tf-reservation-btn .tf-reservation-edit { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; }
.tf-reservation-btn .tf-reservation-edit svg { width: 18px; height: 18px; }
/* 有內容時右上角的筆:用同一張筆圖,橘色、無底 */
.tf-res-pencil { display: block; width: 19px; height: 19px; background-color: #E8835C; -webkit-mask: url('img/編輯圖示筆.png') center / contain no-repeat; mask: url('img/編輯圖示筆.png') center / contain no-repeat; }
/* 預約無內容時:單一橘色筆按鈕 */
.tf-reservation-add { width: 44px; height: 44px; align-self: flex-start; }
.tf-reservation-add .icon-edit-img { width: 20px; height: 20px; }
/* 預約小班表彈窗 */
.reservation-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(30,44,79,.45); display: flex; align-items: center; justify-content: center; }
.reservation-modal { background: #fff; border-radius: 14px; padding: 1.4rem 1.6rem; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 90vh; overflow: auto; }
.reservation-title { font-size: 1.15rem; font-weight: 800; color: #1E2C4F; }
.reservation-hint { font-size: .8rem; color: #E8805E; margin: .25rem 0 1rem; }
.reservation-grid { display: grid; gap: 9px; }
.res-day { height: 48px; border: none; border-radius: 8px; background: #ECE8F4; color: #1E2C4F; font-weight: 800; cursor: pointer; transition: all .12s; }
.res-day.on { background: #E8835C; color: #fff; }
.res-pnum { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #1E2C4F; font-size: .85rem; }
.res-cell { width: 48px; height: 48px; border: 1.5px solid #E3DEEE; border-radius: 8px; background: #fff; cursor: pointer; transition: all .12s; }
.res-cell:hover { background: #F4F1FA; }
.res-cell.on { background: #FAD9C9; border-color: #E8835C; }
.reservation-preview { margin-top: 1rem; padding: .6rem .8rem; background: #F4F1FA; border-radius: 8px; color: #1E2C4F; font-weight: 700; font-size: .9rem; white-space: pre-line; line-height: 1.5; }
.reservation-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.reservation-actions .btn-primary { background: #8A7AA6 !important; border-color: #8A7AA6 !important; color: #fff !important; }
.reservation-actions .btn-primary:hover { background: #786a93 !important; }
.tf-side-field input, .tf-side-field select { padding: .5rem .7rem; border: 1.5px solid #AEAEAE; border-radius: 8px; font-size: .9rem; box-sizing: border-box; width: 100%; }
.tf-link-btn { align-self: flex-start; background: none; border: none; color: #8A7AA6; cursor: pointer; font-size: .82rem; padding: 0; text-decoration: underline; }
.tf-hint { font-size: .78rem; color: #8A7AA6; }

/* 右欄 */
.tf-main { display: flex; flex-direction: column; gap: .3rem; }
.tf-row { display: grid; grid-template-columns: 170px 1fr; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px dashed #fff; }
.tf-row-top { align-items: start; }
.tf-row-label { font-weight: 700; color: #1E2C4F; white-space: nowrap; }

/* 類別晶片 */
.tf-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.tf-chip { padding: .35rem .75rem; border: 1.5px solid #AEAEAE; border-radius: 4px; background: #fff; color: #8A7AA6; cursor: pointer; font-size: .85rem; font-weight: 700; transition: .15s; }
.tf-chip:hover { border-color: #AEAEAE; }
.tf-chip.active { background: #E8835C; border-color: #E8835C; color: #fff; box-shadow: 0 4px 12px rgba(232,131,92,.35); }
.tf-chip-dim { opacity: .45; }
.tf-chip-dim:hover { opacity: .8; }

/* 級任年級 / 班級 */
.tf-grade-row { display: flex; gap: .4rem; }
.tf-grade-btn { font-size: 1.7rem; font-weight: 800; color: #AEAEAE; background: none; border: none; cursor: pointer; padding: 0 .55rem; line-height: 1; }
.tf-grade-btn.active { color: #4E9D6C; }
.tf-class-row { display: flex; gap: .5rem; margin-top: .6rem; flex-direction: row; align-items: center; flex-wrap: wrap; }
/* 級任年級+班級網格:班級置中對齊到選中年級的正下方 */
.tf-grade-grid { display: grid; grid-auto-columns: 44px; grid-template-rows: auto auto; gap: .5rem 0; justify-items: center; align-items: center; }
.tf-grade-grid .tf-grade-btn { padding: 0; min-width: 0; }
.tf-grade-grid .tf-class-btn { width: 42px; }
.tf-class-anchor { display: flex; gap: .4rem; width: max-content; justify-self: center; }
.tf-class-btn { width: 42px; height: 42px; border: 1.5px solid #4E9D6C; border-radius: 4px; background: #fff; color: #4E9D6C; font-weight: 700; cursor: pointer; }
.tf-class-btn.active { background: #4E9D6C; color: #fff; }

/* 節數步進 */
.tf-stepper { display: inline-flex; align-items: center; gap: 1.1rem; font-size: 1.4rem; font-weight: 700; color: #1E2C4F; }
.tf-stepper button { width: 30px; height: 30px; border: none; background: #fff; border-radius: 4px; font-size: 1.1rem; cursor: pointer; color: #1E2C4F; }
.tf-stepper button:hover { background: #AEAEAE; color: #fff;}

/* 各科目詳情 */
.tf-subjects { display: flex; gap: 1.1rem 1.5rem; flex-wrap: wrap; }
/* 各科目詳情:標題 + 分隔線 + 科目區 */
.tf-row-subjects { display: flex; flex-direction: column; grid-template-columns: none !important; gap: .9rem; align-items: stretch; }
.tf-subjects-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .7rem; border-bottom: 1.5px solid #DDD; }
.tf-subjects-hint { flex: 1; font-size: .82rem; color: #888; line-height: 1.5; }
.tf-row-subjects .tf-row-label { font-weight: 700; color: #1E2C4F; }
/* 半圓低中高選擇:三等分各 60° */
.tf-band-dome { width: 130px; height: 65px; flex: 0 0 auto; display: block; overflow: visible; }
.tf-band-dome .band-slice { fill: #fff; stroke: #E8835C; stroke-width: 1.4; cursor: pointer; transition: fill .15s; }
.tf-band-dome .band-slice:hover { fill: #FDEEE7; }
.tf-band-dome .band-slice.active { fill: #E8835C; }
.tf-band-dome .band-text { font-weight: 800; font-size: 13px; text-anchor: middle; pointer-events: none; transition: fill .15s; }
.tf-subject-col { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.tf-subject-chip { width: 2.6em; padding: .5rem .2rem; border-radius: 4px; border: 1.5px solid #AEAEAE; background: #fff; color: #AEAEAE; font-weight: 700; cursor: pointer; word-break: break-all; line-height: 1.25; }
.tf-subject-col.active .tf-subject-chip { color: #fff; }
.tf-subject-hours { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; gap: .25rem; font-size: .85rem; font-weight: 700; color: #1E2C4F; }
.tf-subject-hours button { width: 20px; height: 20px; border: none; background: #fff; border-radius: 4px; cursor: pointer; line-height: 1; }
.tf-grade-col { display: flex; flex-direction: column; gap: .28rem; }
.tf-grade-line { display: flex; align-items: center; gap: .3rem; }
.tf-grade-hours { display: flex; align-items: center; gap: .15rem; font-size: .78rem; font-weight: 800; color: #1E2C4F; }
.tf-grade-hours button { width: 16px; height: 18px; padding: 0; border: none; background: none; cursor: pointer; line-height: 1; color: #1E2C4F; font-weight: 700; font-size: .85rem; }
.tf-grade-hours button:hover { color: #E8835C; }
.tf-grade-hours span { min-width: 13px; text-align: center; }
/* 指定節數 小字按鈕 */
.tf-specify-btn { background: none; border: none; padding: 1px 2px; font-size: .58rem; font-weight: 700; color: #AEAEAE; cursor: pointer; text-decoration: underline; white-space: nowrap; line-height: 1.2; }
.tf-specify-btn.on { color: #E8835C; }
.tf-specify-btn:hover { color: #E8835C; }
/* 可打字的節數輸入框(仿類別步驟:無框、深色、focus 才有外框) */
.tf-grade-input { font: inherit; font-size: .85rem; font-weight: 800; color: #1E2C4F; background: transparent; border: none; outline: none; text-align: center; width: 1.6ch; padding: 0; line-height: 1; border-radius: 3px; -moz-appearance: textfield; appearance: textfield; }
.tf-grade-input:hover { box-shadow: 0 0 0 1.5px #AEAEAE; }
.tf-grade-input:focus { box-shadow: 0 0 0 1.5px #1E2C4F; background: #fff; }
.tf-grade-input::-webkit-outer-spin-button, .tf-grade-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tf-grade-cell { width: 30px; height: 30px; border: 1.5px solid #AEAEAE; border-radius: 50%; background: #fff; color: #4E9D6C; cursor: pointer; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; }
.tf-grade-cell.active { background: #4E9D6C; border-color: #4E9D6C; color: #fff; }

@media (max-width: 860px) {
  .tf-layout { grid-template-columns: 1fr; }
}

/* ===== 列表動作圖示鈕（範本：珊瑚紅編輯 / 深藍刪除）===== */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none; border-radius:4px; cursor:pointer; color:#fff; padding:0; transition:.15s; vertical-align:middle; }
.icon-btn + .icon-btn { margin-left:.4rem; }
.icon-btn svg { width:18px; height:18px; }
.icon-btn.edit { background:#E8835C; }
.icon-btn.edit:hover { background:#E8835C; }
.icon-btn.del  { background:#AEAEAE; }
.icon-btn.del svg { stroke-width: 3.4; }
.icon-btn.del:hover  { background:#8A8A8A; }

/* ===== 課程顏色色票（固定色盤，不提供色碼輸入）===== */
.color-swatches { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.color-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #1E2C4F; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* 儲存鈕底色=編輯色（珊瑚紅）；取消鈕已用 .icon-btn.del（板岩藍） */
.btn-save { background: #E8835C; color: #fff; border: none; }
.btn-save:hover { background: #E8835C; }
.icon-btn-sm { width: 28px; height: 28px; }
.icon-btn-sm svg { width: 15px; height: 15px; }

/* ===== 教師管理 類別/年級 篩選：下拉改按鈕 ===== */
.teacher-filter-group { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.teacher-filter-label { font-weight: 700; color: #1E2C4F; margin-right: .25rem; }
.tfilter-chip { padding: .28rem .7rem; border-radius: 4px; border: none; color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; opacity: .4; transition: opacity .15s, box-shadow .15s, transform .15s; }
.tfilter-chip:hover { opacity: .72; }
.tfilter-chip.active { opacity: 1; box-shadow: 0 3px 9px rgba(0,0,0,.2); transform: translateY(-1px); }
.tfilter-chip-grade { background: #8A7AA6; }
.tfilter-chip-circle { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.teacher-actions-row .btn { padding: .35rem .8rem; font-size: .82rem; }

/* 教師管理工具列：類別 / 年級 / 動作 三列堆疊 */
.teacher-toolbar { flex: 1 1 100%; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.teacher-actions-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ===== 基礎設定：教師類別及名單 ===== */
.setup-screen { max-width: 2400px; margin: 0 auto; padding: 2rem 4rem 4rem; zoom: 0.75; }
.setup-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem; }
.setup-kicker { color: #8A7AA6; font-weight: 700; letter-spacing: .22em; font-size: .78rem; }
.setup-h1 { display: flex; align-items: baseline; gap: .55rem; font-size: 1.5rem; font-weight: 800; color: #1E2C4F; letter-spacing: 0; margin: 3.2rem 0 0; }
.setup-h1-num { font-size: 2.7rem; line-height: .85; font-weight: 900; color: #E8835C; font-family: system-ui, "Segoe UI", Arial, sans-serif; }
.setup-done-btn { font-size: 1rem; padding: .7rem 1.4rem; }
.setup-desc { color: #E8805E; margin: .3rem 0 2rem; font-size: .875rem; }
.cat-cards { display: flex; column-gap: 1.7rem; row-gap: 4rem; flex-wrap: wrap; align-items: flex-start; }
/* 第 2 步:六個年級置中排列(卡片寬度與間距維持原樣,靠縮減兩側留白來並列) */
.cat-cards--grades { justify-content: center; }
/* 第 2 步:縮減兩側留白,讓六個年級卡片(原尺寸)並列 */
.setup-screen--wide { max-width: none; padding-left: 1.2rem; padding-right: 1.2rem; }
.cat-card { position: relative; width: max-content; min-width: 230px; min-height: 480px; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.10); padding: 3.8rem 1rem 1.4rem; display: flex; flex-direction: column; flex-shrink: 0; flex-grow: 0; }
.cat-card-add { align-self: center; width: 130px; min-height: 130px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px dashed #AEAEAE; box-shadow: none; padding: 1rem; }
.cat-tab { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 1.5rem 1rem .7rem; border-radius: 5px; text-align: center; box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.cat-clip { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 44px; height: 60px; opacity: .8; }
.cat-tab-name { font-size: 1rem; letter-spacing: .05em; font-weight: 800; color: #fff; }
.cat-del { position: absolute; top: 1px; right: 5px; background: transparent; border: none; color: #fff; font-size: .95rem; line-height: 1; cursor: pointer; opacity: .4; }
.cat-del:hover { opacity: 1; }
.cat-body { display: flex; flex-direction: column; gap: .5rem; align-items: center; justify-content: flex-start; flex: 1; position: relative; }
.cat-teacher { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #AEAEAE; border-radius: 8px; padding: .4rem .7rem; color: #1E2C4F; font-weight: 600; font-size: 1rem; }
.cat-teacher-del { background: transparent; border: none; color: #AEAEAE; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.cat-teacher-del:hover { color: #D74FA0; }
.cat-plus { width: 54px; height: 54px; border: none; border-radius: 10px; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.15); margin-top: .4rem; }
.cat-plus-gray { background: #AEAEAE; }
.section-header .cat-plus { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 8px; margin-top: 0; }
.cat-add-row { width: 100%; display: flex; gap: .35rem; align-items: center; }
.cat-add-row input, .cat-add-cat input { flex: 1; min-width: 0; padding: .45rem .6rem; border: 1.5px solid #AEAEAE; border-radius: 8px; font-size: .9rem; }
.cat-add-ok { border: none; color: #fff; border-radius: 8px; padding: .45rem .7rem; cursor: pointer; font-weight: 700; white-space: nowrap; }
.cat-add-cancel { background: transparent; border: none; color: #AEAEAE; font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1; padding: .45rem .7rem; }
.cat-add-cat { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
.cat-add-cat > div { display: flex; gap: .35rem; align-items: center; justify-content: center; }

/* 最上方「新增類別」控制 */
.setup-add-cat { margin: 0 0 1.4rem; }
.cat-add-cat-top { display: inline-flex; gap: .4rem; align-items: center; background: #fff; padding: .5rem .6rem; border: 1.5px solid #AEAEAE; border-radius: 10px; }
.cat-add-cat-top input { padding: .45rem .6rem; border: 1.5px solid #AEAEAE; border-radius: 8px; font-size: .9rem; }

/* 設定畫面：可改名標籤、灰＋置中、下一步右下角 */
.cat-tab-edit { width: auto; field-sizing: content; min-width: 3.5ch; background: transparent; border: none; outline: none; text-align: center; font-size: 1rem; font-weight: 800; color: #fff; padding: 0 .25rem; box-sizing: content-box; }
.cat-tab-edit::placeholder { color: rgba(255,255,255,.7); }
.setup-add-cat { margin: 0 0 2rem; display: flex; justify-content: center; }
.setup-next { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 9999; }
.setup-next .setup-done-btn { font-size: 1.05rem; padding: .8rem 1.6rem; box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* 類別卡：總節數上限步進器 */
.cat-limit { display: grid; grid-template-columns: 2rem auto 2rem; column-gap: .2rem; align-items: center; justify-content: center; margin: 1.4rem 0 1rem; }
.cat-limit-btn { background: transparent; border: none; width: 2rem; height: 2rem; font-size: 1.4rem; font-weight: 700; color: #1E2C4F; cursor: pointer; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.cat-limit-btn:hover { color: #E8835C; }
.cat-limit-val { font-size: 1.7rem; font-weight: 800; color: #1E2C4F; min-width: 2ch; text-align: center; }

/* 批次加入教師：textarea 模式 */
.cat-add-block { width: 100%; display: flex; flex-direction: column; gap: .8rem; }
.cat-add-block textarea { width: 100%; min-height: 210px; padding: .5rem .6rem; border: 1.5px solid #AEAEAE; border-radius: 8px; font-size: .9rem; font-family: inherit; resize: vertical; box-sizing: border-box; }
.cat-add-block textarea:focus { outline: none; border-color: #1E2C4F; }
.cat-add-hint { font-size: .72rem; color: #AEAEAE; text-align: center; }
.cat-add-block .cat-add-row { gap: .4rem; justify-content: center; }

/* 範例卡（左側示意） */
.cat-card-demo { opacity: .92; width: 230px; }
.cat-card-demo .cat-tab { min-width: 95px; }
.cat-card-demo .cat-tab { cursor: default; }
.cat-limit-val-demo { font-size: 1rem; line-height: 1.4; font-weight: 800; color: #1E2C4F; }
.cat-demo-box { width: 100%; min-height: 280px; padding: 1.1rem 1.2rem; border: 2px solid #AEAEAE; border-radius: 12px; font-size: .8rem; line-height: 1.6; color: #1E2C4F; white-space: pre-wrap; box-sizing: border-box; background: #fff; }
.cat-demo-box strong { color: #1E2C4F; font-weight: 800; }

/* 加人名 ＋ 按鈕：絕對置中於卡片白框 */
.cat-body.cat-body-empty { justify-content: center; }

/* 教師清單置中於 ＋ 下方,可滾動 */
.cat-teacher-list { width: auto; display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-auto-columns: minmax(150px, max-content); gap: .5rem .7rem; justify-content: start; align-content: start; margin-top: 1rem; align-self: center; }
.cat-teacher-list .cat-teacher { width: auto; min-width: 0; }
.cat-teacher-list .cat-teacher span { white-space: nowrap; }

/* 刪除類別 × 改在白框右上角 */
.cat-del-corner { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #AEAEAE; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0; opacity: .55; z-index: 2; }
.cat-del-corner:hover { opacity: 1; color: #1E2C4F; }

/* 類別便利貼:點擊可換色 */
.cat-tab { cursor: pointer; }
.cat-tab-edit { cursor: text; pointer-events: auto; }
.cat-color-picker { position: fixed; background: #fff; padding: .4rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; gap: .3rem; z-index: 20; }
.cat-color-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s; }
.cat-color-swatch:hover { transform: scale(1.1); }
.cat-color-swatch.active { border-color: #1E2C4F; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* 新增類別 ＋ 與「下一步」同列;下方間隔為上方的 2 倍 */
.setup-add-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 0 0 4rem; column-gap: 1rem; }
.setup-add-row--tight { margin-bottom: 1rem; }
.setup-add-row .cat-plus-gray { grid-column: 2; justify-self: center; }
.setup-add-row .setup-done-btn { grid-column: 3; justify-self: end; font-size: .92rem; padding: .55rem 1.2rem; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.setup-add-row-spacer { grid-column: 1; }

/* 節數可直接編輯(input 看起來像原本的數字) */
.cat-limit-input { font: inherit; font-size: 1.7rem; font-weight: 800; color: #1E2C4F; background: transparent; border: none; outline: none; border-radius: 4px; text-align: center; width: 2.2ch; padding: 0; line-height: 1; vertical-align: middle; box-sizing: content-box; -moz-appearance: textfield; appearance: textfield; }
.cat-limit-input:hover { box-shadow: 0 0 0 1.5px #AEAEAE; }
.cat-limit-input:focus { box-shadow: 0 0 0 1.5px #1E2C4F; background: #fff; }
.cat-limit-input::-webkit-outer-spin-button,
.cat-limit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 範例卡與右側類別卡之間的分隔線 */
.cat-divider { width: 1.5px; background: #E8805E; align-self: stretch; min-height: 480px; margin: 0 .5rem; opacity: .85; }

/* 拖曳教師標籤 */
.cat-teacher { cursor: grab; user-select: none; -webkit-user-select: none; }
.cat-teacher:active { cursor: grabbing; }
/* 拖曳老師時不該讓子元素的文字被當「選取的內容」一起拖,造成「全選人名移動」的視覺 */
.cat-teacher span { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.homeroom-pool-section, .homeroom-pool-list, .cat-teacher-list { user-select: none; -webkit-user-select: none; }
.cat-drop-target { outline: 2px solid #E8805E; outline-offset: 4px; background: rgba(232,128,94,.06); }

/* 拖曳中:讓「原位置」的姓名標籤淡化,避免從卡片圓角邊緣冒白底 */
.cat-teacher-dragging { opacity: .15; }
/* 拖曳時 ghost image 的視覺(原位置)淡化過渡 */
.cat-teacher { transition: opacity .12s; }

/* 設定步驟導覽列(上一步靠左、下一步/完成靠右) */
.setup-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 3rem; }
.setup-back-btn { background: #fff; color: #E8805E; border: 1.5px solid #E8805E; padding: .75rem 1.4rem; font-size: 1rem; border-radius: 8px; cursor: pointer; }
.setup-back-btn:hover { background: #E8805E; color: #fff; border-color: #E8805E; }

/* 登入頁:ST²EL logo 與品牌字 */
.login-logo { display: flex; justify-content: center; margin-bottom: .8rem; }
.login-logo svg { width: 70px; height: 122px; }
.login-brand { text-align: center; font-size: 2.2rem; font-weight: 800; color: #000; letter-spacing: .04em; margin: 0 0 .3rem; font-family: 'Helvetica Neue', Arial, sans-serif; }
.login-brand .brand-st { color: #000; }
.login-brand .brand-t { color: #D72836; }
.login-brand .brand-sup { color: #EF8377; font-size: .55em; vertical-align: super; font-weight: 800; margin: 0 .02em 0 .02em; }
.login-card .subtitle { color: #555; font-size: .92rem; margin-bottom: 1.5rem; }

/* 登入頁圖檔 */
.login-logo img { width: 140px; height: auto; display: block; }
.login-brand-img { text-align: center; margin: 0 0 .3rem; }
.login-brand-img img { max-width: 180px; height: auto; }

/* === 登入頁 全新版面(範本配色)=== */
.login-overlay { position: fixed; inset: 0; background: #8C6F9C; display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; }
.login-card { background: #fff; border: none; border-radius: 12px; padding: 2.5rem 2.5rem 0; width: 100%; max-width: 460px; box-shadow: none; position: relative; overflow: hidden; }
.login-card .login-logo { display: flex; justify-content: center; margin: .5rem 0 2.6rem; }
.login-card .login-logo img { width: 100px; height: auto; display: block; }
.login-field { margin-bottom: 1.1rem; }
.login-field input { width: 100%; padding: 1rem 1.1rem; background: #D9D6DA; color: #000; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; box-sizing: border-box; outline: none; }
.login-field input::placeholder { color: #000; opacity: .85; font-weight: 700; }
.login-field input:focus { box-shadow: 0 0 0 2px #8C6F9C; }
.login-forgot { display: block; text-align: right; color: #000; font-size: .82rem; margin: -0.3rem 0 .4rem; text-decoration: underline; cursor: pointer; }
.login-error { color: #cf2533; background: transparent; font-size: .9rem; font-weight: 700; padding: 0; border-radius: 0; margin: .25rem 0 .8rem; text-align: center; }
.login-btn { width: 100%; padding: .85rem; background: #8C6F9C; color: #fff; border: none; border-radius: 8px; font-size: 1.05rem; font-weight: 700; cursor: pointer; margin-top: .4rem; }
.login-btn:hover:not(:disabled) { background: #735586; }
.login-btn:disabled { opacity: .7; cursor: wait; }
.login-books { margin: 1.8rem -2.5rem 0; display: flex; justify-content: center; }
.login-books img { width: 70%; height: auto; display: block; margin: 0 auto; }

/* 第 2 步:上一步 + 下一步 右側並排 */
.setup-step-buttons { grid-column: 3; justify-self: end; display: flex; gap: 1.2rem; align-items: center; }
.setup-step-buttons .setup-back-btn { padding: .55rem 1.2rem; font-size: .92rem; border-radius: 8px; }

/* 第 2 步:級任老師指派 */
.homeroom-pool-card .cat-tab-name { letter-spacing: .04em; }
.class-slot { gap: .4rem; }
.class-slot .class-num { color: #1E2C4F; font-weight: 800; min-width: 2.4em; white-space: nowrap; }
.class-slot .class-assigned { color: #E8805E; font-weight: 700; display: flex; align-items: center; gap: .2rem; font-size: .92rem; white-space: nowrap; }
.class-slot:hover { background: rgba(242,201,76,.12); }

/* 級任老師池(置於年級卡片下方,橫向排版) */
.homeroom-pool-section { margin: 3rem 0 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.homeroom-pool-card-h { background: #fff; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.08); padding: 1.4rem 1.6rem; display: flex; flex-direction: row; align-items: center; gap: 1.2rem; }
.homeroom-pool-label { font-size: 1rem; flex-shrink: 0; min-width: 3.5em; }
.homeroom-pool-list { display: flex; flex-wrap: wrap; gap: .6rem; min-height: auto; flex: 1; align-items: center; }
.homeroom-pool-list .cat-teacher { width: auto; min-width: 90px; padding: .5rem .9rem; }
.homeroom-pool-list.empty { justify-content: center; }

/* 登入頁:密碼眼睛切換 */
.login-field-password { position: relative; }
.login-field-password input { padding-right: 4rem; }
.password-toggle { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); background: transparent; border: none; cursor: pointer; color: #8C6F9C; opacity: 1; padding: .3rem; display: flex; align-items: center; justify-content: center; }
.password-toggle:hover { opacity: 1; }

/* 右上角:使用者標籤 + 登出按鈕 */
.user-corner { position: absolute; top: 1rem; right: 1.5rem; display: flex; gap: .5rem; align-items: center; z-index: 5; }

/* === 教師列表卡片版(沿用編輯表單預覽卡 tf-card)=== */
.teachers-grid { display: flex; flex-direction: column; gap: 1.5rem; padding: .5rem 0; }
.teacher-category-bar-block { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: #fff; border-left: 4px solid #8A7AA6; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.teacher-category-bar-block .teacher-category-title { font-weight: 800; color: #1E2C4F; font-size: 1.17rem; }
.teacher-category-bar-block .teacher-category-count {
    background: none;
    padding: 0;
    border-radius: 0;
    color: #1E2C4F;
    font-size: 1.17rem;
    font-weight: 800;
}
.teacher-cards-row { display: flex; flex-wrap: wrap; gap: 1.5rem 1.2rem; justify-content: start; }
/* 主介面教師 tab:卡片視覺尺寸比照設定流程最後一步(zoom 0.75) */
.teachers-grid-main { zoom: 0.75; }

/* sidebar 底部:回到設定按鈕 */
.nav-back-to-setup { margin-top: auto; border-top: 1px dashed #DCDCDC; border-radius: 0; padding-top: .75rem; color: #4E2E9D; }
.nav-back-to-setup:hover { background: #F4F1FA; }
.nav-back-to-setup .tab-icon { filter: none; opacity: 1; }
.nav-setup-pencil {
    background-color: #9D8FBE;
    -webkit-mask: url('img/編輯圖示筆.png') center / contain no-repeat;
    mask: url('img/編輯圖示筆.png') center / contain no-repeat;
}

/* 課程 tab 卡片列表 */
.course-cards { display: flex; flex-wrap: wrap; gap: 1.5rem; zoom: 0.85; padding: 1rem 0; }
.course-card { position: relative; width: 220px; background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 2.6rem 1rem 1.1rem; display: flex; flex-direction: column; }
.course-card-tab { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: .55rem .9rem; border-radius: 6px; color: #fff; font-weight: 800; font-size: 1.05rem; min-width: 95px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.18); display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.course-card-name { letter-spacing: .05em; }
.course-card-edit, .course-card-del { background: rgba(255,255,255,.18); border: none; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.course-card-edit:hover, .course-card-del:hover { background: rgba(255,255,255,.32); }
.course-card-edit .icon-edit-img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
.course-card-del svg { width: 12px; height: 12px; }
.course-card-body { display: flex; flex-direction: column; gap: .7rem; }
.course-grade-hours { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0 .15rem; }
.cgh-item { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #1E2C4F; font-size: .95rem; white-space: nowrap; }
.cgh-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 4px; color: #fff; font-weight: 800; font-style: normal; font-size: .9rem; line-height: 1; }
.course-teachers { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-top: .5rem; border-top: 1px dashed #ECECEC; }
.course-teacher { font-size: .82rem; color: #5C5C5C; font-weight: 600; }
.course-teacher:not(:last-child)::after { content: '、'; color: #AEAEAE; }
.course-no-teacher { font-size: .82rem; color: #AEAEAE; font-style: italic; white-space: nowrap; }

/* 課程 tab:左側標籤 + 右側詳細面板 */
.subjects-layout { display: grid; grid-template-columns: auto clamp(360px, 36%, 500px); justify-content: center; gap: 3rem; padding: .3rem 0 1.5rem; align-items: start; }
.subject-tabs { max-width: 540px; }
.subject-tabs { display: flex; flex-wrap: wrap; gap: 1.8rem 1.1rem; padding-top: 26px; }
.subject-tab-card { position: relative; box-sizing: border-box; width: 74px; height: 74px; padding: .4rem .35rem; border: none; border-radius: 6px; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .04em; cursor: pointer; text-align: center; transition: transform .15s, box-shadow .15s, opacity .15s; opacity: .3; box-shadow: 0 5px 12px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center; }
.subject-tab-card .cat-clip { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 34px; height: 44px; opacity: .8; }
.subject-tab-card:hover { opacity: 1; }
.subject-tab-card.active { opacity: 1; transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.subject-tab-card .subject-tab-name { display: inline-block; white-space: pre-line; line-height: 1.2; }
.subject-tab-card.subject-tab-dragging { opacity: .45; }
/* 拖曳排序:插入位置標示線 */
.subject-tab-card.subject-drop-before::after { content: ''; position: absolute; left: -9px; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: #8A7AA6; box-shadow: 0 0 4px rgba(138,122,166,.6); }
.subject-tab-draft { opacity: 1; }
.subject-tab-input { width: 100%; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .04em; text-align: center; font-family: inherit; }
.subject-tab-input::placeholder { color: rgba(255,255,255,.7); }
.subject-detail { background: #fff; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding: 1.1rem 1.3rem; }
.subject-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid #EEE; margin-bottom: .8rem; }
.subject-detail-tag { box-sizing: border-box; width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line; line-height: 1.2; padding: 0; border-radius: 6px; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .04em; }
.subject-detail-tag-click { cursor: text; }
.subject-detail-name-input { width: 90%; background: transparent; border: none; outline: none; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .04em; text-align: center; font-family: inherit; }
.subject-detail-name-input::placeholder { color: rgba(255,255,255,.7); }
.subject-detail-row { display: grid; grid-template-columns: max-content 1fr; gap: .8rem; padding: .5rem 0; align-items: start; }
.subject-detail-row + .subject-detail-row { border-top: 1px dashed #F0F0F0; }
.subject-detail-label { color: #1E2C4F; font-weight: 700; font-size: .8rem; line-height: 1.2; white-space: nowrap; padding-top: .2rem; }
.subject-detail-teachers { display: flex; flex-wrap: wrap; gap: 5px 10px; padding-top: .25rem; }
.subject-detail-teacher { font-size: .82rem; color: #1E2C4F; font-weight: 600; }
.subject-detail-teacher:not(:last-child)::after { content: '、'; color: #AEAEAE; }
.subject-grade-hour-grid { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.sgh-row { display: flex; align-items: center; gap: .35rem; }
.sgh-grade { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; padding: 0; border: none; border-radius: 50%; color: #fff; font-weight: 800; font-size: .78rem; cursor: pointer; transition: background .12s, opacity .12s; }
.sgh-grade.off { background: #DADADA !important; color: #fff; }
/* 第 4 步:各年級節數設定 — 科目卡片網格 */
.step-sgh-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.step-sgh-card { background: #fff; border: 1px solid #EEE; border-radius: 12px; padding: .9rem; transition: border-color .12s; position: relative; }
.step-sgh-card.room-marked { border: 2.5px solid #cf2533; }
/* 彈性課程:左上角紅圓勾(同勾選框樣式,放大 2 倍 = 44px) */
.flex-check-badge { position: absolute; top: -8px; left: -8px; width: 44px; height: 44px; border-radius: 50%; background: #cf2533; border: 4px solid #fff; box-sizing: border-box; z-index: 3; box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.flex-check-badge::after { content: ''; position: absolute; left: 13px; top: 6px; width: 10px; height: 19px; border: solid #fff; border-width: 0 5px 5px 0; transform: rotate(45deg); }
.setup-mark-btns { display: inline-flex; gap: .6rem; grid-column: 1; justify-self: start; flex-wrap: wrap; }
.setup-mark-btns .mark-btn { padding: .55rem 1.1rem; font-size: .9rem; line-height: 1.2; }
/* 步驟4 標記按鈕:不要撐滿整欄、靠左;「完成標記」紅底 */
.setup-add-row .room-mark-btn { grid-column: 1; justify-self: start; box-sizing: border-box; padding: .55rem 1.4rem; font-size: .92rem; line-height: 1.2; border-width: 1.5px; }
.mark-done-btn { background: #cf2533; color: #fff; border: 1.5px solid #cf2533; font-weight: 700; font-size: .92rem; padding: .55rem 1.4rem; border-radius: 8px; cursor: pointer; }
.mark-done-btn:hover { background: #b71f2b; border-color: #b71f2b; }
.step-sgh-card.room-marking-on, .step-sgh-card.flex-marking-on { cursor: pointer; }
.step-sgh-card.room-marking-on .step-sgh-rows, .step-sgh-card.flex-marking-on .step-sgh-rows { pointer-events: none; }
.step-sgh-tag { box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line; line-height: 1.2; padding: 0; border-radius: 6px; color: #fff; font-weight: 800; font-size: 1rem; margin: 0 0 .8rem; }
.step-sgh-rows { display: flex; flex-direction: column; gap: .4rem; }
.sgh-off-label { color: #AEAEAE; font-size: .82rem; font-weight: 600; }
.sgh-step { background: transparent; border: none; width: 20px; height: 20px; cursor: pointer; font-size: .92rem; font-weight: 700; color: #1E2C4F; line-height: 1; }
.sgh-step:hover { color: #E8835C; }
.sgh-value { min-width: 15px; text-align: center; font-weight: 800; color: #1E2C4F; font-size: .85rem; }
.subject-detail-empty { padding: 3rem; text-align: center; color: #AEAEAE; }

/* ── 課表設計 ── */
.sd-layout { display: flex; gap: 3.5rem; align-items: flex-start; flex-wrap: nowrap; }
.sd-layout .sd-preview { order: 1; position: sticky; top: 1rem; flex: 0 0 auto; }
.sd-layout .sd-controls { order: 2; flex: 0 0 640px; position: static; }
.sd-controls { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 14px rgba(0,0,0,.06); position: sticky; top: 1rem; }
.sd-controls-head { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-bottom: 1rem; }
.sd-controls-title { font-size: 1.2rem; font-weight: 800; color: #1E2C4F; margin: 0; white-space: nowrap; }
.sd-controls-hint { font-size: .75rem; color: #E8805E; line-height: 1.4; margin: 0; white-space: normal; }
.sd-band-tabs { display: flex; gap: 3px; background: #F3F0F8; padding: 3px; border-radius: 7px; margin-bottom: .8rem; }
.sd-band-tab { flex: 1; padding: .32rem .3rem; border: none; background: transparent; cursor: pointer; border-radius: 5px; font-size: .78rem; font-weight: 700; color: #6E6E80; transition: all .15s; }
/* 每日節數 + 配色 並排 */
.sd-block-inline { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.sd-inline-item { display: flex; flex-direction: column; }
.sd-band-tab.active { background: #fff; color: #1E2C4F; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.sd-block { padding: .8rem 0; border-top: 1px dashed #ECECEC; }
.sd-block:first-of-type { border-top: none; padding-top: 0; }
.sd-block-label { font-weight: 700; color: #1E2C4F; font-size: .9rem; margin-bottom: .5rem; }
.sd-stepper { display: inline-flex; align-items: center; gap: .2rem; font-weight: 800; color: #1E2C4F; }
.sd-stepper-value { font-size: 1.3rem; min-width: 28px; text-align: center; }
.sd-color-schemes { display: flex; gap: .55rem; flex-wrap: wrap; }
.sd-color-scheme { width: 28px; height: 28px; border: 1px solid #DDD; border-radius: 50%; cursor: pointer; padding: 0; overflow: hidden; position: relative; background: #fff; transition: transform .12s; }
.sd-color-scheme:hover { transform: scale(1.1); }
.sd-color-scheme.active { border-color: #1E2C4F; border-width: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.sd-scheme-bg { position: absolute; inset: 0; border-radius: 50%; }
.sd-scheme-bar { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.45); }
.sd-period-times { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: .5rem 1.4rem; max-height: 320px; overflow-y: auto; }
.sd-period-time-row { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
.sd-period-time-row input { padding: 4px 6px; border: 1px solid #DDD; border-radius: 4px; font-size: .85rem; width: 64px; text-align: center; }
.sd-period-no { color: #fff; background: #1E2C4F; font-weight: 700; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.sd-time-sep { text-align: center; color: #999; }
.sd-bars-list { display: flex; flex-direction: column; gap: .4rem; }
.sd-tpl-list { display: flex; flex-direction: column; gap: .35rem; }
.sd-tpl-empty { font-size: .85rem; color: #AEAEAE; padding: .25rem 0; }
.sd-tpl-row { display: flex; align-items: center; gap: .2rem; }
.sd-tpl-load { flex: 1; padding: .45rem .7rem; margin-right: .55rem; background: #F4F1FA; color: #1E2C4F; border: 1px solid #DCD3EE; border-radius: 6px; cursor: pointer; font-size: .9rem; font-weight: 600; text-align: left; transition: all .15s; }
.sd-tpl-load:hover { background: #ECE5F7; border-color: #9D8FBE; }
.sd-tpl-row .sd-tpl-iconbtn { width: 34px; height: 34px; padding: 0; border-radius: 6px; flex: 0 0 auto; }
.sd-tpl-row .sd-tpl-iconbtn .icon-edit-img { width: 18px; height: 18px; object-fit: contain; }
.sd-tpl-row .sd-tpl-iconbtn svg { width: 20px; height: 20px; }
.sd-tpl-row .icon-btn svg { width: 14px; height: 14px; }
.sd-tpl-save { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px; box-sizing: border-box; margin-top: .6rem; background: #E8835C !important; border-color: #E8835C !important; color: #fff !important; }
.sd-edit-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-height: 42px; box-sizing: border-box; margin-top: .6rem; padding: .3rem .7rem; background: #fff; border: 1.5px solid #E8835C; border-radius: 8px; font-size: .82rem; color: #1E2C4F; }
.sd-edit-bar b { font-weight: 800; }
.sd-edit-link { margin-left: auto; background: none; border: none; padding: 0 .2rem; color: #8A7AA6; font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
.sd-edit-link + .sd-edit-link { margin-left: 0; }
.sd-tpl-iconbtn.is-editing { outline: 2px solid #4E2E9D; outline-offset: 1px; }
.sd-tpl-save:hover { background: #d97552 !important; border-color: #d97552 !important; }
.sd-tpl-item { display: flex; flex-direction: column; gap: .3rem; padding-bottom: .35rem; border-bottom: 1px dashed #ECECEC; }
.sd-tpl-item:last-of-type { border-bottom: none; }
.sd-tpl-grades { display: flex; flex-wrap: wrap; gap: .3rem; padding-left: .25rem; align-items: center; }
.sd-tpl-grades-label { font-size: .82rem; color: #1E2C4F; font-weight: 700; margin-right: .15rem; }
.sd-grade-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid #DDD; border-radius: 50%; cursor: pointer; font-size: .78rem; color: #6E6E80; user-select: none; transition: all .12s; box-sizing: border-box; }
.sd-grade-chip input[type="checkbox"] { display: none; }
.sd-grade-chip span { line-height: 1; }
.sd-grade-chip.active { background: #E8835C; border-color: #E8835C; color: #fff; font-weight: 700; }
.sd-grade-chip:hover { border-color: #E8835C; }
.sd-grade-chip.sd-grade-all { font-weight: 700; }
.sd-bar-row { display: grid; grid-template-columns: 1fr 80px 28px; gap: .35rem; align-items: center; }
.sd-bar-row select, .sd-bar-row input { padding: 4px 6px; border: 1px solid #DDD; border-radius: 4px; font-size: .82rem; }
.sd-bar-row .icon-btn { width: 26px; height: 26px; padding: 0; background: transparent; border: none; }
.sd-bar-row .icon-btn svg { width: 14px; height: 14px; }
.sd-preview { border-radius: 0; padding: 1.2rem 1.4rem 1.6rem; color: #fff; position: relative; width: max-content; max-width: 100%; zoom: 0.8; }
.sd-preview-head { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0 .8rem; }
.sd-class-title { font-size: 1.4rem; font-weight: 800; letter-spacing: .15em; color: inherit; }
.sd-teacher { font-size: .95rem; color: inherit; display: inline-flex; align-items: center; gap: .35rem; }
.sd-teacher-tag { background: var(--sd-tag-bg, rgba(255,255,255,.25)); padding: 2px 8px; border-radius: 4px; font-size: .85rem; color: inherit; }
.sd-day-row { display: grid; grid-template-columns: 50px repeat(5, 70px) 38px; gap: 14px; align-items: center; padding: 0; font-size: .9rem; color: inherit; opacity: .9; text-align: center; }
.sd-add-day { color: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 4px; font-size: 1.1rem; font-weight: 800; justify-self: center; cursor: pointer; padding: 0; }
.sd-dashed-line { height: 0; border-top: 2px dashed rgba(255,255,255,.8); margin: .35rem 0 .25rem; }
.sd-grid { display: flex; flex-direction: column; gap: 14px; }
.sd-bar { padding: 3px 1rem; color: #fff; text-align: center; font-size: .8rem; letter-spacing: .12em; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 0; min-height: 22px; }
.sd-bar-input { background: transparent; border: none; color: #fff; text-align: center; font-size: .8rem; font-weight: 700; letter-spacing: .12em; outline: none; width: auto; min-width: 80px; }
.sd-bar-input:focus { background: rgba(255,255,255,.18); border-radius: 4px; }
.sd-bar-remove { position: absolute; right: .5rem; background: transparent; border: none; color: #fff; opacity: .7; cursor: pointer; font-size: 1.1rem; padding: 0 4px; line-height: 1; }
.sd-bar-remove:hover { opacity: 1; }
.sd-period-row { display: grid; grid-template-columns: 50px repeat(5, 70px); gap: 14px; align-items: center; }
.sd-period-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: inherit; line-height: 1.1; padding-left: 2px; }
.sd-period-num { font-size: 1.3rem; font-weight: 700; align-self: center; }
.sd-period-time-text { font-size: .65rem; opacity: .9; white-space: nowrap; text-align: left; margin-top: 2px; }
.sd-period-time-text > div { display: block; }
.sd-cell { background: var(--sd-cell-bg, rgba(255,255,255,.95)); border-radius: 0; width: 70px; height: 70px; cursor: pointer; transition: filter .15s; }
.sd-cell:hover { filter: brightness(0.92); }
.sd-cell.hidden { background: transparent !important; cursor: pointer; }
.sd-cell.hidden:hover { background: rgba(127,127,127,.18) !important; filter: none; }
.sd-day-row span { cursor: pointer; }
.sd-add-day { border: none; cursor: pointer; }
.sd-add-point { display: flex; justify-content: center; align-items: center; height: 4px; margin: -8px 0; opacity: 0; transition: opacity .15s, height .15s, margin .15s; }
.sd-grid:hover .sd-add-point { opacity: .85; height: 28px; margin: 0; }
.sd-add-point:hover { opacity: 1 !important; }
.sd-add-mini { width: 32px; height: 24px; border: none; color: #fff; font-size: 1.1rem; line-height: 1; font-weight: 700; cursor: pointer; border-radius: 4px; }
.sd-add-mini:hover { transform: scale(1.08); }
/* 課表最下方:+/- 控制每日節數 */
.sd-period-controls { display: flex; justify-content: space-between; padding: 0; margin-top: .6rem; }
.sd-period-ctl { width: 34px; height: 34px; border: none; color: #fff; font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; border-radius: 4px; transition: transform .12s; }
.sd-period-ctl:hover { transform: scale(1.08); }
.teacher-list-card { flex: 0 0 auto; width: max-content; min-width: 175px; max-width: 100%; height: 350px; margin: 18px 0 1rem; cursor: default; position: relative; display: flex; flex-direction: column; }
.teacher-list-card.is-empty { width: 280px; min-width: 280px; }
.teacher-list-card .tf-card-subjects { flex: 1 1 auto; overflow-y: auto; margin-bottom: .3rem; min-height: 0; }
.tf-card-name-static { font-size: 1.33rem; font-weight: 800; color: #1E2C4F; text-align: center; }
/* 整張卡可點擊編輯,非空卡片隱藏右上編輯圖示 */
.teacher-list-card { cursor: pointer; }
.teacher-list-card:not(.is-empty) .teacher-list-actions { display: none; }
/* hover 時右上角顯示節數上限 */
.tf-card-max {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #cf2533;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .03em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-in;
    z-index: 3;
}
.teacher-list-card:hover .tf-card-max { opacity: 1; }
.tf-card-max-left { left: 14px; right: auto; }
/* 標記「不排課/放假」教師 */
.mark-btn { background: #fff; color: #8A7AA6; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .92rem; padding: .55rem 1.2rem; border-radius: 8px; cursor: pointer; }
.mark-btn:hover { border-color: #8A7AA6; }
.mark-btn--save { background: #8A7AA6; color: #fff; border-color: #8A7AA6; }
.mark-btn--cancel { color: #AEAEAE; }
.mark-hint { color: #E8835C; font-size: .9rem; font-weight: 600; margin: .2rem 0 1rem; }
.teacher-list-card.marking-on { cursor: pointer; }
.teacher-list-card.teacher-marked { opacity: .5; filter: grayscale(.4); }
.teacher-mark-badge { position: absolute; top: 16px; left: 8px; z-index: 6; line-height: 0; }
.teacher-mark-badge img { width: 30px; height: 30px; object-fit: contain; display: block; }
/* 教師卡片:有預約 → 左下角紅點 + hover 顯示預約內容 */
.res-dot { position: absolute; left: 12px; bottom: 12px; width: 13px; height: 13px; border-radius: 50%; background: #cf2533; z-index: 5; cursor: help; }
.res-dot .res-tooltip { position: absolute; left: -2px; bottom: 20px; display: none; white-space: pre-line; background: #8A7AA6; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.4; padding: .28rem .5rem; border-radius: 6px; width: max-content; max-width: 240px; text-align: left; box-shadow: 0 6px 16px rgba(0,0,0,.18); z-index: 20; }
.res-dot:hover .res-tooltip { display: block; }
.teacher-list-actions { position: absolute; top: 16px; right: 12px; display: flex; gap: .3rem; z-index: 3; }
.teacher-list-actions .icon-btn { width: 40px; height: 40px; border-radius: 6px; }
.teacher-list-actions .icon-btn svg { width: 22px; height: 22px; }

/* 教師列表卡:半月量表縮小、空白卡編輯鈕置中 */
.teacher-list-card .tf-gauge { width: 84px; height: 42px; border-radius: 0 0 84px 84px; margin: .6rem auto -.4rem; }
/* 非空卡片 + 編輯預覽卡:隱藏半月,改用截角徽章顯示總節數 */
.teacher-list-card:not(.is-empty) .tf-gauge,
.teacher-form-modal .tf-card .tf-gauge { display: none; }
/* 預覽卡的截角徽章改貼右上角(避免遮到下方科目年級徽章) */
.teacher-form-modal .tf-card .tf-card-corner {
    top: 0; right: 0; bottom: auto; left: auto;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-radius: 0 18px 0 0;
    align-items: center;
    justify-content: center;
    /* 用不對稱 padding 把文字推到三角的視覺重心(右上 1/3 位置) */
    padding: 0 0 28px 28px;
}
.tf-card-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85px;
    height: 85px;
    background: var(--cat-color, #5FBCBE);
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 14px 10px 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    border-radius: 0 0 18px 0;
    z-index: 2;
    pointer-events: none;
    letter-spacing: .02em;
}
.teacher-list-card .tf-gauge span { font-size: 1.1rem; }
.teacher-list-card.is-empty .tf-card-cat,
.teacher-list-card.is-empty .tf-card-subjects,
.teacher-list-card.is-empty .tf-gauge { display: none; }
.teacher-list-card.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.teacher-list-card.is-empty .teacher-list-actions { position: static; margin-top: 1rem; }
.teacher-list-card.is-empty .teacher-list-actions .icon-btn.del { display: none; }
.teacher-list-card.is-empty .teacher-list-actions .icon-btn.edit { width: 56px; height: 56px; border-radius: 8px; }
.teacher-list-card.is-empty .teacher-list-actions .icon-btn.edit svg { width: 26px; height: 26px; }

/* 教師列表卡:頂端改成一條橫色 bar(取代左右兩個便利貼小角) */
.teacher-list-card .tf-card-tab-l,
.teacher-list-card .tf-card-tab-r { display: none; }
.teacher-list-card { position: relative; overflow: hidden; }
.teacher-list-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--cat-color, #F2C94C); border-radius: 16px 16px 0 0; }

/* 空白卡:名字在上,編輯鈕在下 */
.teacher-list-card.is-empty .tf-card-name-static { order: 1; }
.teacher-list-card.is-empty .teacher-list-actions { order: 2; }

/* 列表卡:類別已在區塊標頭顯示,卡內不再重複 */
.tf-card .tf-card-cat { display: none; }

/* 編輯圖示換成 PNG */
.icon-btn .icon-edit-img { width: 18px; height: 18px; object-fit: contain; display: block; }
.teacher-list-actions .icon-btn .icon-edit-img { width: 22px; height: 22px; }
.teacher-list-card.is-empty .teacher-list-actions .icon-btn.edit .icon-edit-img { width: 26px; height: 26px; }

/* 編輯表單預覽卡也採用列表卡樣式:頂端橫色 bar、小型量表、動態色 */
.tf-card { position: relative; overflow: hidden; }
.tf-card .tf-card-tab-l, .tf-card .tf-card-tab-r { display: none; }
.tf-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--cat-color, #F2C94C); border-radius: 18px 18px 0 0; }
.tf-card .tf-card-name { font-size: 1.15rem; }
.tf-card .tf-gauge { width: 84px; height: 42px; border-radius: 0 0 84px 84px; background: var(--cat-color, #E8835C); margin: .6rem auto -.4rem; }
.tf-card .tf-gauge span { font-size: 1.1rem; }

/* 未選擇科目時:時數區仍顯示「0」,但 +/- 用 placeholder 占位 */
.tf-step-placeholder { display: inline-block; width: 20px; }

/* 第 3 步:左右兩欄 */
.step3-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.step3-subjects .cat-cards { row-gap: 2rem; column-gap: 1rem; }
.step3-teachers { position: sticky; top: 1rem; }
.step3-teachers .homeroom-pool-section { margin: 0; }
@media (max-width: 1000px) {
  .step3-layout { grid-template-columns: 1fr; }
  .step3-teachers { position: static; }
}

/* === 第 4 步:級任教師科目設定 === */
.step4-mode-cards { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; }
.step4-mode-card { flex: 1 1 0; min-width: 240px; max-width: 440px; min-height: 340px; background: #fff; border: 2px solid #E8805E; border-radius: 14px; padding: 2.4rem 2rem; cursor: pointer; text-align: center; transition: .15s; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.4rem; }
.step4-mode-card:hover { border-color: #E8805E; background: #FFF6F2; box-shadow: 0 10px 30px rgba(232,128,94,.55), 0 0 0 4px rgba(232,128,94,.18); transform: translateY(-5px); }
.step4-mode-num { font-size: 3rem; font-weight: 800; color: #E8805E; line-height: 1; }
.step4-mode-text { display: flex; flex-direction: column; gap: .5rem; }
.step4-mode-title { font-size: 1.15rem; font-weight: 800; color: #1E2C4F; }
.step4-mode-desc { font-size: .88rem; color: #8A7AA6; line-height: 1.6; }

.step4-subject-chips { display: grid; grid-template-columns: repeat(8, max-content); justify-content: start; gap: .8rem; margin-top: 1rem; }
.step4-subj-chip { padding: .7rem 1.4rem; border: 2px solid #AEAEAE; border-radius: 8px; background: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: .12s; }
.step4-subj-chip:hover { transform: translateY(-1px); }
.step4-subj-chip-sm { padding: .35rem .7rem; font-size: .85rem; border-width: 1.5px; }

.step4-cards-row { display: flex !important; flex-wrap: wrap; gap: 1.5rem 1.2rem; justify-content: start; }
.step4-teacher-card { width: auto; min-width: 150px; min-height: auto; height: auto; padding-bottom: 1.2rem; }
.step4-teacher-card .tf-card-subjects { overflow: visible; flex: 0 0 auto; }
.step4-card-chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: max-content; gap: .4rem; justify-content: center; margin-top: .8rem; padding: 0 .3rem; }

/* 第 4 步逐人卡:級任類別顏色圖例 */
.step4-legend { grid-column: 1; justify-self: start; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.step4-legend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 700; color: #1E2C4F; }
.step4-legend-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
/* 每年級各自一列 */
.step4-cards-row { width: 100%; margin-bottom: .4rem; }

/* 未指定班級的級任卡:班級處灰字 */
.tf-card-home-none { color: #AEAEAE !important; }

/* 第 4 步自訂:級任類別圖例改色框白字(同科目晶片字級)+ 年級間橘色分隔線 */
.step4-legend-chip { padding: .42rem 1rem; border-radius: 8px; color: #fff; font-weight: 700; font-size: 1.05rem; }
.step4-cards-row:not(:last-child) { border-bottom: 2px solid #E8805E; padding-bottom: 1.4rem; margin-bottom: 1.4rem; }

/* 第 4 步卡片:已選/未選兩組並排(未選另起新欄) */
.step4-card-chip-groups { display: flex; gap: .8rem; align-items: flex-start; justify-content: center; margin-top: .8rem; padding: 0 .3rem; }
.step4-card-chip-groups .step4-card-chips { margin-top: 0; padding: 0; }

/* 第 4 步卡片:未選科目略淡化(仍清晰可見),hover 回正常 */
.step4-subj-chip-sm:not(.active) { opacity: .65; }
.step4-subj-chip-sm:not(.active):hover { opacity: 1; }

/* 第 4 步:級任類別圖例可點選篩選 */
.step4-legend-chip { border: none; cursor: pointer; transition: .15s; }
.step4-legend-chip:hover { filter: brightness(1.05); }
.step4-legend-chip.active { box-shadow: 0 0 0 3px #E8805E; }
.step4-legend-chip.dim { opacity: .4; }

/* 第 4 步:科目篩選列(類別圖例下方) */
.step4-subject-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; }

/* 第 4 步:篩選後無教師時的提示 */
.step4-empty-msg { padding: 2rem 0; color: #E8805E; font-size: 1.05rem; font-weight: 600; }

/* 永遠保留垂直捲軸空間,避免有無卡片時頁面寬度跳動 */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* 選科目晶片背光過渡 */
.step4-subj-chip { transition: box-shadow .15s, transform .15s, background .12s; }

/* 選科目晶片:hover 放大彈跳 */
.step4-subj-chip { transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, background .12s; }
.step4-subj-chip.active { transform: translateY(-3px); }
.step4-subj-chip:hover { transform: translateY(-4px) scale(1.12); }
.step4-subj-chip:active { transform: translateY(-2px) scale(1.05); }

/* 類別卡拖曳排序視覺 */
.cat-card[draggable="true"] { cursor: grab; }
.cat-reorder-dragging { opacity: .5; }
.cat-reorder-over { box-shadow: -6px 0 0 -2px #E8805E; }

/* 第 4 步卡片區:固定最小高度,篩選時版面不大幅塌縮跳動 */
.step4-grid { min-height: 75vh; align-content: start; }

/* 全域右上角使用者列(設定流程與主介面皆顯示) */
.user-corner-fixed { position: fixed; top: .5rem; right: .5rem; z-index: 1000; max-width: calc(100vw - 1rem); }
/* 設定流程進度:用 logo 從下到上填滿 */
.setup-progress-logo { position: absolute; top: .3rem; left: 50%; right: auto; transform: translateX(-50%); width: 33px; height: 68px; z-index: 999; }
.setup-progress-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.setup-progress-logo .logo-base { filter: grayscale(1) opacity(.22); }
.setup-progress-logo .logo-fill { transition: clip-path .5s cubic-bezier(.4,0,.2,1); }
.user-corner-fixed .user-badge { padding: 4px 10px; font-size: .85rem; }
.user-corner-fixed .logout-btn { padding: 4px 10px; font-size: .85rem; }

/* 登入卡片縮至 75% */
.login-card { zoom: 0.75; }

/* 編輯教師表單:取消 × 與儲存鈕等大 */
.tf-actions .icon-btn.del { width: auto; height: auto; min-width: 56px; padding: 0 1.2rem; border-radius: 8px; }
.tf-actions .icon-btn.del svg { width: 20px; height: 20px; }

/* 第 2 步年級卡:加寬,讓 3 字老師名與班號不換行 */
.grade-card { width: 270px; }
.grade-card .class-slot .class-assigned span { white-space: nowrap; }

/* 第 2 步:班號與姓名緊湊靠左 + 縮窄卡片,讓 100% 能排 6 個年級 */
.cat-teacher.class-slot { justify-content: flex-start; gap: .45rem; }
.class-slot .class-assigned { margin-left: .1rem; }
.grade-card { width: 240px; }

/* 第3步:右鍵複選教師的背光樣式(大量拖曳) */
.homeroom-pool-list .cat-teacher { cursor: grab; transition: box-shadow .15s, transform .1s; }
.homeroom-pool-list .cat-teacher.cat-teacher-selected {
    box-shadow: 0 2px 10px 2px rgba(255,255,255,.85);
    transform: translateY(-1px);
    background: #fff;
}
.homeroom-pool-list .cat-teacher.cat-teacher-selected span { color: #E8835C; font-weight: 800; }

/* 第3步科目卡:內部人名小卡不換行,卡片寬度隨人名自動加寬 */
.step3-subjects .cat-card { width: max-content; min-width: 230px; }
.step3-subjects .cat-teacher-list { grid-auto-columns: minmax(108px, max-content); }
.step3-subjects .cat-teacher-list .cat-teacher span { white-space: nowrap; }

/* 第4步教師卡內小科目鈕:點擊不要那麼大彈跳(覆蓋大鈕的 scale 效果) */
.step4-subj-chip-sm { transition: transform .12s ease, box-shadow .12s, background .12s; }
.step4-subj-chip-sm:hover { transform: translateY(-1px); }
.step4-subj-chip-sm:active { transform: translateY(0); }
.step4-subj-chip-sm.active { transform: none; }

/* 編輯教師:儲存/取消鈕固定在 modal 右下,不隨內容捲動(無白底橫條) */
.teacher-form-modal .tf-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    background: none;
    border-top: none;
    box-shadow: none;
    padding-top: .4rem;
    padding-bottom: .2rem;
    pointer-events: none;
}
.teacher-form-modal .tf-actions > * { pointer-events: auto; }
/* 按鈕略為縮小 */
.teacher-form-modal .tf-actions .btn-save { padding: .5rem 1.4rem; font-size: .95rem; }
.teacher-form-modal .tf-actions .icon-btn.del { min-width: 44px; padding: 0 .9rem; }
.teacher-form-modal .tf-actions .icon-btn.del svg { width: 26px; height: 26px; }

/* 帳號管理 */
.um-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .um-layout { grid-template-columns: 1fr; } }
.um-add-card, .um-list-card { background: #fff; border: 1px solid #E0D8EE; border-radius: 12px; padding: 1.1rem 1.2rem; }
.um-add-title { font-weight: 800; color: #1E2C4F; margin-bottom: .8rem; }
.um-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.um-field span { font-size: .82rem; color: #4A4A4A; font-weight: 600; }
.um-field input, .um-field select { padding: .5rem .7rem; border: 1.5px solid #C9C3D6; border-radius: 8px; font-size: .92rem; box-sizing: border-box; }
.um-add-btn { width: 100%; margin-top: .3rem; }
.um-table { width: 100%; border-collapse: collapse; }
.um-table th, .um-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid #EFEAF7; font-size: .9rem; vertical-align: middle; }
.um-table th { color: #8A7AA6; font-weight: 700; font-size: .82rem; }
.um-username { font-weight: 700; color: #1E2C4F; }
.um-self { margin-left: .4rem; font-size: .68rem; background: #EDE7F6; color: #8A7AA6; padding: 1px 7px; border-radius: 999px; font-weight: 700; }
.um-role-select { padding: .28rem .5rem; border: 1.5px solid #C9C3D6; border-radius: 7px; font-size: .85rem; }
.um-actions { display: flex; gap: .4rem; }
.um-act { background: #fff; color: #8A7AA6; border: 1.5px solid #C9C3D6; font-weight: 700; font-size: .8rem; padding: .3rem .8rem; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.um-act:hover:not(:disabled) { border-color: #8A7AA6; }
.um-act.danger:hover:not(:disabled) { border-color: #cf2533; color: #cf2533; }
.um-act:disabled { opacity: .4; cursor: default; }
.um-empty { color: #9990AB; text-align: center; padding: 1rem; }

/* 預約管理頁:左右兩欄 */
.resv-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.resv-col-title { font-size: 1.05rem; font-weight: 800; color: #1E2C4F; margin: 0 0 .8rem; }
@media (max-width: 820px) { .resv-2col { grid-template-columns: 1fr; } }
.resv-config { background:#F7F5FB; border:1px solid #E3DEEE; border-radius:12px; padding:1rem 1.2rem; margin-bottom:1.4rem; }
.resv-toggle-row { display:flex; align-items:center; gap:.6rem; cursor:pointer; }
.resv-toggle-text { font-size:1.05rem; font-weight:800; color:#1E2C4F; }
.resv-deadline-row { display:flex; align-items:center; gap:.6rem; margin-top:.9rem; font-size:.95rem; color:#1E2C4F; flex-wrap:wrap; }
.resv-deadline-row input[type=date] { padding:.35rem .5rem; border:1.5px solid #C9C0DE; border-radius:8px; font-size:.95rem; accent-color:#8A7AA6; }
/* 小日曆圖示:正方形、放大、紫色 */
.resv-deadline-row input[type=date]::-webkit-calendar-picker-indicator { width:22px; height:22px; padding:0; margin:0 0 0 .3rem; cursor:pointer; filter:invert(49%) sepia(12%) saturate(1200%) hue-rotate(214deg) brightness(90%) contrast(86%); }
.resv-openning { color:#3DA08C; font-weight:700; }
.resv-closed { color:#cf2533; font-weight:700; }
.resv-results-title { font-size:1.05rem; font-weight:800; color:#1E2C4F; margin:.4rem 0 .8rem; }
/* 預約結果:同類別放一起,上方類別標題 */
.resv-cat-block { margin-bottom:1rem; }
.resv-cat-title { font-size:.92rem; font-weight:800; color:#8A7AA6; padding:.25rem 0; border-bottom:2px solid #ECE8F3; margin-bottom:.4rem; }
.resv-row { display:flex; gap:1rem; align-items:flex-start; padding:.4rem .2rem; border-bottom:1px solid #F2EFF7; font-size:.92rem; }
.resv-name { font-weight:700; color:#1E2C4F; min-width:5em; }
.resv-has { color:#1E2C4F; }
.resv-none { color:#AEAEAE; }
.ss-trow-wrap { display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; }
.ss-trow { display:inline-flex; align-items:center; gap:.4rem; font-size:.92rem; color:#1E2C4F; cursor:pointer; padding:.15rem 0; user-select:none; }
.ss-check { width:18px; height:18px; border-radius:50%; border:1.5px solid #C9C0DE; background:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; line-height:1; color:transparent; flex:0 0 auto; transition:background .12s, border-color .12s, color .12s; }
.ss-check.on { background:#8A7AA6; border-color:#8A7AA6; color:#fff; }