/* 教育機構網站 - 前端樣式 (version01) - 簡潔版 */

/* ---------- 基礎與變數 ---------- */
:root {
  --color-bg: #f5f6f8;
  --color-card: #ffffff;
  --color-primary: #1a5f4a;
  --color-primary-hover: #144a3a;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-text-hint: #9ca3af;
  --color-border: #e5e7eb;
  --color-error: #b91c1c;
  --color-success: #047857;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 10px;
  --radius-sm: 6px;
  --input-height: 2.5rem;
  --font-sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 頂部欄：右上角賬號板塊 ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 0.75rem;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: -0.5rem;
}

.site-logo-img {
  display: block;
  height: 3.75rem;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  object-position: left center;
}

.site-logo:hover .site-logo-img {
  opacity: 0.9;
}

/* ---------- 內網頂欄：僅標誌 + 退出 ---------- */
.site-header-inner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 0.75rem;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

body.inner-visible .site-header {
  display: none !important;
}

body.inner-visible .site-header-inner {
  display: flex !important;
}

/* 老師內網頂欄（權限2） */
.site-header-inner-teacher {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 0.75rem;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* 管理者內網頂欄（權限3）：與家長內網並存，由 .manager-inner 切換 */
.site-header-inner-manager {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 0.75rem;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

body.inner-visible.manager-inner .site-header-inner {
  display: none !important;
}

body.inner-visible.manager-inner .site-header-inner-manager {
  display: flex !important;
}

/* 老師內網：只顯示老師頂欄，隱藏家長與管理者頂欄 */
body.inner-visible.teacher-inner .site-header-inner {
  display: none !important;
}
body.inner-visible.teacher-inner .site-header-inner-manager {
  display: none !important;
}
body.inner-visible.teacher-inner .site-header-inner-teacher {
  display: flex !important;
}

.inner-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin-left: auto;
  margin-right: 0.75rem;
}

.inner-nav-link {
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.inner-nav-link:hover {
  color: var(--color-primary);
  background: rgba(26, 95, 74, 0.06);
}

.inner-nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

body.inner-visible .page-wrap {
  display: none !important;
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.btn-logout:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(26, 95, 74, 0.06);
}

.logout-en {
  font-size: 0.75rem;
  color: var(--color-text-hint);
}

.btn-logout:hover .logout-en {
  color: var(--color-primary);
}

@media (max-width: 480px) {
  .site-header-inner {
    padding: 0 0.5rem 0 0.5rem;
    height: 3rem;
  }
  .inner-nav {
    margin-right: 0.5rem;
  }
  .inner-nav-link {
    font-size: 0.75rem;
    padding: 0.25rem 0.35rem;
  }
  .logout-text {
    display: none;
  }
  .btn-logout .logout-en {
    font-size: 0.8125rem;
  }
}

/* ---------- 內網內容區 ---------- */
.page-inner {
  display: none;
  min-height: 100vh;
  padding: calc(4rem + 1.5rem) 1.5rem 1.5rem;
}

/* 家長/學生內網：只顯示 #page-inner-parent，隱藏管理者區塊 */
body.inner-visible #page-inner-parent {
  display: block;
}
body.inner-visible #page-inner-manager {
  display: none !important;
}
body.inner-visible #page-inner-teacher {
  display: none !important;
}

/* 管理者內網內容區 */
.page-inner-manager {
  display: none;
  min-height: 100vh;
  padding: calc(4rem + 1.5rem) 1.5rem 1.5rem;
}

/* 管理者內網：只顯示 #page-inner-manager，隱藏家長區塊 */
body.inner-visible.manager-inner #page-inner-parent {
  display: none !important;
}
body.inner-visible.manager-inner #page-inner-manager {
  display: block !important;
}
body.inner-visible.manager-inner #page-inner-teacher {
  display: none !important;
}

/* 老師內網內容區 */
.page-inner-teacher {
  display: none;
  min-height: 100vh;
  padding: calc(4rem + 1.5rem) 1.5rem 1.5rem;
}

/* 老師內網：只顯示 #page-inner-teacher，隱藏家長與管理者區塊 */
body.inner-visible.teacher-inner #page-inner-parent {
  display: none !important;
}
body.inner-visible.teacher-inner #page-inner-manager {
  display: none !important;
}
body.inner-visible.teacher-inner #page-inner-teacher {
  display: block !important;
}

/* 管理者主頁：課程信息篩選 — 工整、專業 */
.manager-course-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.manager-tab {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  color: #4b5563;
  background: #fff;
  border: 1px solid #e2eae6;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.manager-tab:hover {
  color: #1a5f4a;
  border-color: #1a5f4a;
  background: rgba(26, 95, 74, 0.04);
  box-shadow: 0 2px 8px rgba(26, 95, 74, 0.08);
}

.manager-tab.active {
  color: #fff;
  font-weight: 600;
  border-color: #154836;
  background: linear-gradient(180deg, #1a5f4a 0%, #154836 100%);
  box-shadow: 0 2px 10px rgba(26, 95, 74, 0.25);
}

.teacher-home-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem 0;
}

#view-manager-home .inner-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f3328;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.manager-course-content {
  margin-top: 0.5rem;
}

/* 管理者主頁：課程表 — 無外框、無品牌字樣，內框放大 */
.manager-visual-schedule-wrap {
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  position: relative;
}

.manager-visual-schedule-inner {
  overflow-x: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(26, 95, 74, 0.1);
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
}

/* 課程表週/月導航：左上一周/上個月、右下一周/下個月 */
.schedule-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0 0.25rem;
}
.schedule-nav-prev { order: -1; }
.schedule-nav-next { order: 1; }

/* 課程表參考圖 — 無外框、與內框一致 */
.schedule-reference-image-wrap {
  text-align: center;
  margin-bottom: 1rem;
  padding: 0;
}

.schedule-reference-image {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.schedule-live-caption {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a5f4a;
  margin: 0 0 0.85rem 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}

.manager-schedule-grid {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.8125rem;
  background: #fff;
  table-layout: fixed;
}

.manager-schedule-grid th,
.manager-schedule-grid td {
  border: 1px solid #e2eae6;
  padding: 0.45rem 0.5rem;
  vertical-align: top;
  box-sizing: border-box;
}

.manager-schedule-grid th {
  background: linear-gradient(180deg, #1a5f4a 0%, #154836 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem 0.4rem;
  border-color: #154836;
  letter-spacing: 0.02em;
}

.manager-schedule-week .schedule-time-col:first-child {
  border-radius: 10px 0 0 0;
}

.manager-schedule-grid th:first-child {
  border-radius: 10px 0 0 0;
}

.manager-schedule-grid th:last-child {
  border-radius: 0 10px 0 0;
}

.manager-schedule-week tbody tr:last-child .schedule-time-col {
  border-radius: 0 0 0 10px;
}

.manager-schedule-week tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

.manager-schedule-month th:first-child {
  border-radius: 10px 0 0 0;
}

.manager-schedule-month th:last-child {
  border-radius: 0 10px 0 0;
}

.manager-schedule-month tbody tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}

.manager-schedule-month tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

/* 週課表：規整、課程單位僅顯示 上課時間／學科／學生／老師 */
.manager-schedule-week {
  table-layout: fixed;
  width: 100%;
  font-size: 0.8125rem;
}

.manager-schedule-week col.schedule-time-col {
  width: 3.5rem;
}

.manager-schedule-week .schedule-time-col {
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.5rem;
  background: linear-gradient(90deg, #f0f5f3 0%, #e8f0ed 100%);
  color: #154836;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.4rem 0.3rem;
  border-right: 1px solid #dce6e2;
  letter-spacing: 0.02em;
}

.schedule-day-head {
  text-align: center;
  white-space: nowrap;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: #154836;
  padding: 0.45rem 0.35rem;
}

.manager-schedule-week .schedule-slot {
  min-height: 2.75rem;
  background: #fcfdfc;
  padding: 0.35rem;
  vertical-align: top;
  overflow: visible;
}

.manager-schedule-week tbody tr:nth-child(even) .schedule-slot {
  background: #f7faf9;
}

/* 課程單位：僅 上課時間、學科、學生、老師，規整四行、每行不換行 */
.schedule-block.schedule-card {
  background: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.3rem;
  box-shadow: 0 1px 3px rgba(26, 95, 74, 0.06);
  border-left: 3px solid #1a5f4a;
  overflow: visible;
}

.schedule-block.schedule-card:last-child {
  margin-bottom: 0;
}

/* 時段一行、科目一行、學生一行、老師一行，每行不換行、文字完整顯示 */
.schedule-block-time {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #1a5f4a;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: visible;
}

.schedule-block-subject {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  color: #111827;
  line-height: 1.25;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: visible;
}

.schedule-block-student,
.schedule-block-teacher {
  display: block;
  font-size: 0.6875rem;
  color: #4b5563;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}

/* 當月課程表：規整、課程單位同上僅四項 */
.manager-schedule-month {
  table-layout: fixed;
  width: 100%;
  font-size: 0.8125rem;
}

.manager-schedule-month th {
  width: 14.28%;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.4rem 0.3rem;
}

.schedule-month-cell {
  width: 14.28%;
  min-height: 4rem;
  vertical-align: top;
  background: #fcfdfc;
  padding: 0.4rem;
}

.manager-schedule-month tbody tr:nth-child(even) .schedule-month-cell {
  background: #f7faf9;
}

.schedule-month-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fff;
  background: linear-gradient(135deg, #1a5f4a 0%, #154836 100%);
  border-radius: 50%;
  margin-bottom: 0.3rem;
  box-shadow: 0 1px 3px rgba(26, 95, 74, 0.2);
}

.schedule-month-block.schedule-card {
  background: #fff;
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.25rem;
  box-shadow: 0 1px 3px rgba(26, 95, 74, 0.06);
  border-left: 3px solid #1a5f4a;
  font-size: 0.75rem;
}

.schedule-month-block.schedule-card .schedule-block-time,
.schedule-month-block.schedule-card .schedule-block-subject,
.schedule-month-block.schedule-card .schedule-block-student,
.schedule-month-block.schedule-card .schedule-block-teacher {
  display: block;
  font-size: 0.6875rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}

.schedule-month-block.schedule-card .schedule-block-subject {
  font-weight: 700;
  color: #111827;
}

.schedule-month-block.schedule-card .schedule-block-student,
.schedule-month-block.schedule-card .schedule-block-teacher {
  color: #4b5563;
}

/* ---------- 管理者：新增/編輯 老師（上下兩部分，無共用白底；新增=外普通框+內卡片；已登記=外普通框） ---------- */
.manager-teachers-section {
  --teacher-bg: #fafbfc;
  --teacher-card: #ffffff;
  --teacher-border: rgba(26, 95, 74, 0.12);
  --teacher-focus: rgba(26, 95, 74, 0.2);
  --teacher-label: #374151;
  --teacher-input-bg: #ffffff;
  --teacher-radius: 12px;
  --teacher-radius-sm: 8px;
  --teacher-shadow: 0 2px 10px rgba(26, 95, 74, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --teacher-shadow-focus: 0 0 0 3px var(--teacher-focus);
}

section.manager-teachers-section {
  background: #ffffff;
}

.manager-teachers-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
  max-width: 100%;
}

/* 外層：普通框（新增老師區、已登記老師區） */
.manager-teachers-block {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 1rem 0;
}

.manager-teachers-block-title {
  margin: 0 0 0.6rem 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border);
}

/* 新增老師：內層表單區，非卡片式（無邊框、陰影、圓角） */
.manager-teachers-form-card-inner {
  margin-top: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* 表單：緊湊高度，主次分明、規整對齊 */
.manager-teachers-section #form-teacher .form-group {
  margin-bottom: 0.35rem;
}

.manager-teachers-section #form-teacher label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teacher-label);
  margin-bottom: 0.2rem;
  letter-spacing: 0.01em;
}

.manager-teachers-section #form-teacher .form-hint {
  font-size: 0.6875rem;
  color: var(--color-text-hint);
  margin-top: 0.15rem;
  margin-bottom: 0;
}

.manager-teachers-section #form-teacher input[type="text"],
.manager-teachers-section #form-teacher input[type="email"],
.manager-teachers-section #form-teacher input[type="tel"] {
  width: 100%;
  height: 2rem;
  padding: 0 0.65rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--teacher-input-bg);
  border: 1px solid var(--teacher-border);
  border-radius: var(--teacher-radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.manager-teachers-section #form-teacher input::placeholder {
  color: var(--color-text-hint);
}

.manager-teachers-section #form-teacher input:hover {
  border-color: #d1d5db;
}

.manager-teachers-section #form-teacher input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--teacher-shadow-focus);
}

.manager-teachers-section #form-teacher select {
  width: 100%;
  height: 2rem;
  padding: 0 1.75rem 0 0.65rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--teacher-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 10px;
  border: 1px solid var(--teacher-border);
  border-radius: var(--teacher-radius-sm);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.manager-teachers-section #form-teacher select:hover {
  border-color: #d1d5db;
}

.manager-teachers-section #form-teacher select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--teacher-shadow-focus);
}

.manager-teachers-section #form-teacher .form-row-inline {
  gap: 0.5rem 0.85rem;
  margin-bottom: 0;
}

.manager-teachers-section #form-teacher .form-row-inline .form-group {
  margin-bottom: 0.35rem;
}

/* 拿手科目區塊（緊湊） */
.manager-teachers-section #form-teacher .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--teacher-label);
  margin-bottom: 0.25rem;
  display: block;
}

.manager-teachers-section .strength-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.35rem;
}

.manager-teachers-section .strength-row .strength-subject,
.manager-teachers-section .strength-row .strength-level {
  height: 2rem;
  padding: 0 1.5rem 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--color-text);
  border: 1px solid var(--teacher-border);
  border-radius: var(--teacher-radius-sm);
  background-color: var(--teacher-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 9px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.manager-teachers-section .strength-row .strength-subject { flex: 1 1 10rem; min-width: 0; }
.manager-teachers-section .strength-row .strength-level { flex: 0 0 5rem; }
.manager-teachers-section .strength-row .strength-subject:focus,
.manager-teachers-section .strength-row .strength-level:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--teacher-shadow-focus);
}

.manager-teachers-section .btn-remove-strength {
  flex-shrink: 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: var(--teacher-bg);
  border: 1px solid var(--teacher-border);
  border-radius: var(--teacher-radius-sm);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.manager-teachers-section .btn-remove-strength:hover {
  color: var(--color-error);
  border-color: #fecaca;
  background: #fef2f2;
}

.manager-teachers-section #teacher-add-strength {
  margin-top: 0.2rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  border: 1px dashed var(--color-primary);
  border-radius: var(--teacher-radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.manager-teachers-section #teacher-add-strength:hover {
  background: rgba(26, 95, 74, 0.08);
  color: var(--color-primary-hover);
}

/* 提交按鈕（緊湊） */
.manager-teachers-section #form-teacher .form-actions {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--teacher-border);
}

.manager-teachers-section #form-teacher .btn-primary {
  min-height: 2.1rem;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--teacher-radius-sm);
  box-shadow: 0 1px 2px rgba(26, 95, 74, 0.15);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.manager-teachers-section #form-teacher .btn-primary:hover {
  box-shadow: 0 2px 6px rgba(26, 95, 74, 0.25);
}

.manager-teachers-section #form-teacher .btn-primary:active {
  transform: translateY(0.5px);
}

.manager-teachers-section .required {
  color: #dc2626;
  font-weight: 600;
}

/* 老師列表（已登記老師）：每人一張卡片，高度緊湊以顯示更多老師 */
.manager-teachers-block-list .teachers-list-wrap { margin-bottom: 0; }

.manager-teachers-block-list .teachers-cards-wrap { display: block; }

.teachers-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* 老師卡片：主次分明（姓名突出）、規整對齊、資訊完整 */
.teacher-record-card {
  background: #ffffff;
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 10px;
  padding: 0.5rem 0.85rem 0.6rem;
  box-shadow: 0 2px 8px rgba(26, 95, 74, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border-left: 3px solid #1a5f4a;
  transition: box-shadow 0.2s ease;
}

.teacher-record-card:hover {
  box-shadow: 0 4px 14px rgba(26, 95, 74, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.teacher-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.6rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
}

.teacher-record-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  min-width: 0;
}

.teacher-record-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f3328;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.teacher-record-meta {
  font-size: 0.6875rem;
  color: #6b7280;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.teacher-record-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.3rem;
  align-items: center;
}

.teacher-record-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.2rem 0.85rem;
  font-size: 0.75rem;
}

.teacher-record-item {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
}

.teacher-record-label {
  flex: 0 0 auto;
  color: #6b7280;
  font-weight: 600;
  min-width: 5.5em;
  text-align: left;
}

.teacher-record-label::after { content: '：'; }

.teacher-record-value {
  min-width: 0;
  word-break: break-word;
  color: var(--color-text);
}

.manager-teachers-block-list .teachers-empty {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: #ffffff;
  border-radius: var(--teacher-radius-sm);
  border: 1px solid var(--color-border);
  margin: 0;
}

.teacher-record-actions .btn-sm,
.btn-sm { font-size: 0.75rem; padding: 0.28rem 0.55rem; white-space: nowrap; }

@media (max-width: 768px) {
  .manager-teachers-block { padding: 1rem 1rem; }
  .teacher-record-body { grid-template-columns: 1fr; }
  .teacher-record-card { padding: 0.6rem 0.85rem 0.7rem; }
}


/* ---------- 管理者：新增/編輯 產品（商業・教育風・高級可靠） ---------- */
.manager-products-section {
  --product-bg: #f8fafb;
  --product-card: #ffffff;
  --product-border: #e2e8f0;
  --product-focus: rgba(15, 118, 110, 0.18);
  --product-label: #1e3a5f;
  --product-input-bg: #ffffff;
  --product-radius: 12px;
  --product-radius-sm: 8px;
  --product-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
  --product-shadow-focus: 0 0 0 3px var(--product-focus);
  --product-accent: #0f766e;
  --product-accent-hover: #0d5c56;
}

.inner-title-product {
  color: var(--product-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

/* 上下結構：上=新增產品，下=已登記產品 */
.manager-products-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 0.75rem;
  max-width: 100%;
}

.manager-products-block {
  background: transparent;
  border: none;
  padding: 0;
}

.manager-products-block-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--product-label);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--product-border);
}

.manager-products-block-form .form-product {
  margin-top: 0.25rem;
}

/* 產品表單：緊湊高度，一眼可見所有欄位 */
.form-product .form-product-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.form-product .form-group-product {
  margin-bottom: 0.35rem;
}

.form-product .form-group-product label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--product-label);
  margin-bottom: 0.2rem;
  letter-spacing: 0.015em;
}

.form-product .form-hint {
  font-size: 0.7rem;
  color: var(--color-text-hint);
  margin-top: 0.15rem;
  margin-bottom: 0;
}

.form-product .input-product,
.form-product .select-product,
.form-product .textarea-product {
  width: 100%;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--product-input-bg);
  border: 1px solid var(--product-border);
  border-radius: var(--product-radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-product .input-product {
  height: 2rem;
}

.form-product .input-product::placeholder,
.form-product .textarea-product::placeholder {
  color: var(--color-text-hint);
}

.form-product .input-product:hover,
.form-product .select-product:hover,
.form-product .textarea-product:hover {
  border-color: #cbd5e1;
}

.form-product .input-product:focus,
.form-product .select-product:focus,
.form-product .textarea-product:focus {
  outline: none;
  border-color: var(--product-accent);
  box-shadow: var(--product-shadow-focus);
}

.form-product .select-product {
  height: 2rem;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e3a5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
  cursor: pointer;
}

.form-product .textarea-product {
  min-height: 2.5rem;
  resize: vertical;
  line-height: 1.4;
}

.form-product .form-row-product {
  gap: 0.5rem 0.85rem;
}

.form-product .form-row-product .form-group-product {
  margin-bottom: 0.35rem;
}

/* 產品圖片上傳與預覽（緊湊） */
.form-group-product-image .form-hint {
  margin-bottom: 0.25rem;
}

.form-product #product-image-file {
  display: block;
  width: 100%;
  padding: 0.35rem 0;
  font-size: 0.8125rem;
  color: var(--product-label);
  cursor: pointer;
}

.product-image-preview-wrap {
  margin-top: 0.4rem;
  border-radius: var(--product-radius-sm);
  border: 1px dashed var(--product-border);
  background: var(--product-bg);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem;
}

.product-image-preview {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.product-image-preview-placeholder {
  font-size: 0.75rem;
  color: var(--color-text-hint);
}

/* 產品表單按鈕（緊湊） */
.form-product .form-actions-product {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--product-border);
}

.form-product .btn-product-submit {
  min-height: 2.1rem;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  border-radius: var(--product-radius-sm);
  background: linear-gradient(180deg, var(--product-accent) 0%, var(--product-accent-hover) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.form-product .btn-product-submit:hover {
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.35);
}

.form-product .btn-product-submit:active {
  transform: translateY(0.5px);
}

.form-product .form-actions-product .btn-outline {
  min-height: 2.1rem;
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--product-accent);
  background: transparent;
  border: 1px solid var(--product-accent);
  border-radius: var(--product-radius-sm);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.form-product .form-actions-product .btn-outline:hover {
  background: rgba(15, 118, 110, 0.08);
  color: var(--product-accent-hover);
  border-color: var(--product-accent-hover);
}

.form-product .required {
  color: #b91c1c;
  font-weight: 600;
}

/* 已登記產品：卡片列表緊湊，主次分明 */
.products-list-wrap { margin-bottom: 0; }

.products-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-card {
  background: #ffffff;
  border: 1px solid var(--product-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
}

.product-card-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}

.product-card-media {
  flex: 0 0 80px;
  min-height: 56px;
  background: var(--product-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}

.product-card-img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.product-card-no-img {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* 產品卡片主體：主次分明（名稱+價格突出）、規整對齊、資訊完整 */
.product-card-main {
  flex: 1 1 280px;
  min-width: 0;
  padding: 0.5rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.product-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem 0.6rem;
}

.product-card-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--product-label);
  letter-spacing: 0.02em;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
}

.product-card-head-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.product-card-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--product-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.product-card-scope {
  font-weight: 600;
  color: var(--color-text);
}

.product-card-dates {
  font-variant-numeric: tabular-nums;
}

.product-card-intro {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.2rem 0.75rem;
  font-size: 0.75rem;
}

.product-card-detail {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.product-card-detail-label {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-weight: 600;
  min-width: 4.5em;
  text-align: left;
}

.product-card-detail-label::after {
  content: '：';
}

.product-card-detail-value {
  color: var(--color-text);
}

.product-card-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

.product-card-actions .btn {
  font-size: 0.75rem;
  padding: 0.28rem 0.55rem;
  white-space: nowrap;
}

.products-empty {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 1.5rem 1.25rem;
  text-align: center;
  background: var(--product-bg);
  border-radius: var(--product-radius-sm);
  border: 1px dashed var(--product-border);
  margin: 0;
}

@media (max-width: 768px) {
  .product-card-inner { flex-direction: column; }
  .product-card-media { flex: 0 0 auto; min-height: 64px; }
  .product-card-main { padding: 0.6rem 0.85rem; }
}

/* 配對管家老師 */
.pair-steward-section .inner-section-title { margin-bottom: 0.5rem; }
.pair-steward-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.pair-steward-wrap { margin-top: 0.5rem; }
.pair-steward-empty {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 1.25rem;
  text-align: center;
  margin: 0;
}
/* 每列孩子一張卡片 */
.pair-steward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pair-steward-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pair-steward-item:hover {
  border-color: rgba(26, 95, 74, 0.25);
  border-left-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(26, 95, 74, 0.08);
}
.pair-steward-student { flex: 1; min-width: 0; }
.pair-steward-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-right: 0.5rem;
  letter-spacing: 0.02em;
}
.pair-steward-meta { font-size: 0.875rem; color: var(--color-text-muted); }
.pair-steward-current {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
}
.pair-steward-current-value { color: var(--color-text); font-weight: 500; }
.pair-steward-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pair-steward-select {
  min-width: 10rem;
  height: 2.25rem;
  padding: 0 2rem 0 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 9px;
}
.pair-steward-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(26, 95, 74, 0.2);
}
.pair-steward-item .btn-pair-save { flex-shrink: 0; }
@media (max-width: 640px) {
  .pair-steward-item { flex-direction: column; align-items: flex-start; }
  .pair-steward-actions { width: 100%; }
  .pair-steward-select { flex: 1; min-width: 0; }
}

/* 老師內網：薪酬情況（按合約分組卡片） */
.teacher-salary-section {
  max-width: 40rem;
}
.teacher-salary-summary {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.teacher-salary-hint {
  margin: 0 0 1rem 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.teacher-salary-empty {
  margin: 0;
  padding: 1.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
  background: #ffffff;
  border-radius: var(--radius);
  border: 1px dashed var(--color-border);
}
.teacher-salary-empty.hidden {
  display: none;
}
.teacher-salary-cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.teacher-salary-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.teacher-salary-card:hover {
  border-color: rgba(26, 95, 74, 0.25);
  box-shadow: 0 4px 14px rgba(26, 95, 74, 0.1);
}
.teacher-salary-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.12);
}
.teacher-salary-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.teacher-salary-card-status {
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-text-muted);
}
.teacher-salary-card-status-active {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.teacher-salary-card-status-finished {
  background: rgba(4, 120, 87, 0.12);
  color: #047857;
}
.teacher-salary-card-status-settled {
  background: rgba(107, 114, 128, 0.18);
  color: #374151;
}
.teacher-salary-card-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.3rem 1.25rem;
  font-size: 0.8125rem;
}
.teacher-salary-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.teacher-salary-label {
  color: var(--color-text-muted);
  font-weight: 600;
}
.teacher-salary-label::after {
  content: "：";
}
.teacher-salary-value {
  color: var(--color-text);
}
.teacher-salary-lessons-wrap {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(26, 95, 74, 0.12);
}
.teacher-salary-lessons-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.teacher-salary-lessons-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.teacher-salary-lessons-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.teacher-salary-lessons-table th,
.teacher-salary-lessons-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.teacher-salary-lessons-table th {
  background: rgba(26, 95, 74, 0.06);
  color: var(--color-text-muted);
  font-weight: 600;
}
.teacher-salary-lessons-table td {
  color: var(--color-text);
}
.teacher-salary-lessons-table tbody tr:last-child td {
  border-bottom: none;
}

.inner-view {
  display: none;
}

.inner-view.active {
  display: block;
}

.inner-content {
  max-width: 720px;
  margin: 0 auto;
}

.inner-title {
  margin: 0 0 1.25rem 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text);
}

.inner-section {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.inner-section-title {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.inner-placeholder {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.inner-section-desc {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.students-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr);
  gap: 1.5rem;
  margin-top: 0.75rem;
  align-items: flex-start;
}

.students-layout-stacked {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
  width: 100%;
}

.students-section .students-form-card {
  width: 100%;
  background: var(--color-card);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.students-section .students-form-card:hover {
  border-color: rgba(26, 95, 74, 0.25);
  box-shadow: 0 4px 14px rgba(26, 95, 74, 0.08);
}

.students-registered-block {
  width: 100%;
}

.students-registered-title {
  margin: 0 0 0.6rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.students-list-wrap {
  margin-bottom: 0;
}

.students-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.students-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--color-card);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.students-list li:hover {
  border-color: rgba(26, 95, 74, 0.25);
  box-shadow: 0 4px 14px rgba(26, 95, 74, 0.08);
}

.student-info-wrap {
  flex: 1;
  min-width: 0;
}

.student-info {
  font-size: 0.875rem;
  color: var(--color-text);
}

.student-info strong { margin-right: 0.5rem; }

.student-meta {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.student-steward {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}

.student-steward-line {
  margin-top: 0.15rem;
}

.student-steward-line:first-child {
  margin-top: 0;
}

.student-steward-readonly .form-label {
  display: block;
  margin-bottom: 0.35rem;
}

.student-steward-fields {
  font-size: 0.875rem;
  color: var(--color-text);
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.student-steward-fields-line {
  margin-top: 0.25rem;
}

.student-steward-fields-line:first-child {
  margin-top: 0;
}

.student-actions button {
  font-size: 0.8125rem;
  padding: 0.35rem 0.6rem;
}

.inner-form .form-legend {
  margin: 0 0 1rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.inner-form .form-group {
  margin-bottom: 1rem;
}

.inner-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.required { color: var(--color-error); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-row-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.form-group-half {
  flex: 1 1 8rem;
}

/* ---------- 學生信息區：商業／教育風（柔和、可靠） ---------- */
.students-section .inner-section {
  border: 1px solid rgba(203, 213, 225, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.students-panel {
  background: #fefefe;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.students-panel-title {
  margin: 0 0 0.6rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.students-panel-subtitle {
  margin: 0 0 0.75rem 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.students-form .form-group label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.35rem;
}

.students-form .form-group input,
.students-form select {
  height: 2.6rem;
  padding: 0 0.9rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.students-form .form-group input:hover,
.students-form select:hover {
  background: #fff;
  border-color: #cbd5e1;
}

.students-form .form-group input:focus,
.students-form select:focus {
  outline: none;
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 95, 74, 0.1);
}

.students-form .form-group input::placeholder {
  color: #94a3b8;
}

.students-form select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2374757b' d='M6 7.5L2 3.5h8L6 7.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.students-form .form-hint {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

.students-form .form-actions .btn {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(26, 95, 74, 0.15);
}

.students-form .form-actions .btn-primary:hover {
  box-shadow: 0 2px 4px rgba(26, 95, 74, 0.2);
}

.students-form .form-actions .btn-outline {
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #f8fafc;
}

.students-form .form-actions .btn-outline:hover {
  background: #f1f5f9;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 移除瀏覽器預設 fieldset 方框，避免黑色方正框感覺 */
.inner-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}


.student-actions .btn-outline {
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #fff;
}

.student-actions .btn-outline:hover {
  background: rgba(26, 95, 74, 0.06);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.students-empty {
  margin: 0;
  font-size: 0.875rem;
  color: #94a3b8;
  padding: 0.5rem 0;
}

@media (max-width: 480px) {
  .page-inner {
    padding-top: calc(3rem + 1.5rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .students-layout {
    display: block;
  }
  .students-panel {
    padding: 0.85rem 0.9rem;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  flex: 1;
  justify-content: flex-end;
  margin: 0 0.75rem;
  min-width: 0;
}

.site-nav a {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.site-nav a:hover {
  color: var(--color-primary);
  background: rgba(26, 95, 74, 0.06);
}

.site-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.site-home {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.site-home:hover {
  color: var(--color-primary);
  background: rgba(26, 95, 74, 0.06);
}

.site-home:focus {
  outline: none;
  color: var(--color-primary);
}

.site-contact {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.site-contact:hover {
  color: var(--color-primary);
  background: rgba(26, 95, 74, 0.06);
}

.site-contact:focus {
  outline: none;
  color: var(--color-primary);
}

.site-account {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.site-account:hover {
  color: var(--color-primary);
  background: rgba(26, 95, 74, 0.06);
}

.site-account:focus {
  outline: none;
  color: var(--color-primary);
}

.account-icon,
.home-icon {
  display: block;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
}

.account-label {
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: 0 1rem 0 0.5rem;
    height: 3rem;
  }

  .site-logo-img {
    height: 2.75rem;
    max-width: 200px;
  }

  .account-label {
    display: none; /* 手機上僅顯示圖標 */
  }

  .site-account,
  .site-home {
    padding: 0.5rem;
  }
}

/* ---------- 頁面佈局 ---------- */
.page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  padding-top: calc(4rem + 1.5rem);
}

/* 主頁 / 賬號 二選一顯示，不同時出現 */
.page-wrap.view-home .auth-container {
  display: none !important;
}
.page-wrap.view-account .home-section {
  display: none !important;
}

/* 主頁區塊（點擊頂欄「主頁」時只顯示此畫面） */
.home-section {
  width: 100%;
  max-width: 560px;
  padding: 1.5rem;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* 外網區塊：預設只顯示主頁，點擊導航後切換顯示對應區塊 */
.outer-sections .outer-panel {
  display: none;
}
.outer-sections .outer-panel.active {
  display: block;
}

/* 主頁頂部：大圖輪播（補習社官網風格） */
.outer-banner-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.25rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.outer-banner-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}
.outer-banner-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 200px;
  position: relative;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.outer-banner-slide img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
  vertical-align: middle;
}
.outer-banner-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, box-shadow 0.2s;
  z-index: 2;
}
.outer-banner-btn:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.outer-banner-prev { left: 0.75rem; }
.outer-banner-next { right: 0.75rem; }
.outer-banner-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}
.outer-banner-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.outer-banner-dot:hover {
  background: rgba(255, 255, 255, 0.9);
}
.outer-banner-dot.active {
  background: #fff;
  transform: scale(1.25);
}
@media (min-width: 600px) {
  .outer-banner-slide { min-height: 260px; }
  .outer-banner-slide img { max-height: 380px; }
}
@media (min-width: 900px) {
  .outer-banner-slide { min-height: 320px; }
  .outer-banner-slide img { max-height: 420px; }
}
.outer-sections .outer-panel-body {
  margin-top: 0.75rem;
}

/* 聯絡我們模塊：美觀、精簡、可靠 */
.contact-module {
  max-width: 42rem;
}
.contact-lead {
  margin: 0 0 1.25rem 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.contact-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.contact-details {
  flex: 1;
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-item {
  padding: 0;
  margin: 0;
}
.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 0.35rem;
}
.contact-value {
  margin: 0 0 0.25rem 0;
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.5;
}
.contact-value:last-child {
  margin-bottom: 0;
}
.contact-link {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.contact-link:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.contact-address {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.6;
}
.contact-qr {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  flex-shrink: 0;
}
.contact-qr-item {
  text-align: center;
  padding: 1rem;
  background: var(--color-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.contact-qr-img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  margin: 0 auto 0.5rem auto;
}
.contact-qr-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}
@media (max-width: 640px) {
  .contact-layout {
    flex-direction: column;
    gap: 1.5rem;
  }
  .contact-qr {
    justify-content: flex-start;
  }
}

.outer-sections .outer-panel-body .home-intro,
.outer-sections .outer-panel-body .outer-panel-content {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.outer-sections .outer-panel-body .outer-panel-content {
  color: var(--color-text);
}
.outer-sections .outer-panel-image-wrap {
  margin: 0 0 0.75rem 0;
}
.outer-sections .outer-panel-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

/* 外網區塊內產品列表（來自 file_for_product.db） */
.outer-sections .outer-products-list {
  margin-top: 1rem;
}
.outer-sections .outer-product-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.outer-sections .outer-product-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.outer-sections .outer-product-card-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.outer-sections .outer-product-card-body {
  flex: 1;
  min-width: 0;
}
.outer-sections .outer-product-card-name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.35rem 0;
}
.outer-sections .outer-product-card-intro {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 0.25rem 0;
  line-height: 1.4;
}
.outer-sections .outer-product-card-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

/* ---------- 外網產品展示：高級教育風格（專業、可靠、專家感） ---------- */
.outer-sections .outer-products-edu {
  --edu-accent: #0f766e;
  --edu-accent-soft: rgba(15, 118, 110, 0.12);
  --edu-text: #1e293b;
  --edu-muted: #64748b;
  --edu-bg: #f8fafc;
  --edu-card-bg: #ffffff;
  --edu-border: #e2e8f0;
  margin-top: 1.25rem;
}
.outer-sections .outer-products-lead {
  font-size: 0.9375rem;
  color: var(--edu-muted);
  line-height: 1.6;
  margin: 0 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--edu-border);
}
.outer-sections .outer-products-empty {
  font-size: 0.9375rem;
  color: var(--edu-muted);
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
}
.outer-sections .outer-product-cards-edu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.outer-sections .outer-edu-card {
  display: flex;
  gap: 1.25rem;
  background: var(--edu-card-bg);
  border-radius: 12px;
  border: 1px solid var(--edu-border);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  border-left: 4px solid var(--edu-accent);
}
.outer-sections .outer-edu-card:hover {
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.08);
  border-left-color: var(--edu-accent);
}
.outer-sections .outer-edu-card-media {
  flex: 0 0 140px;
  min-height: 120px;
  background: var(--edu-bg);
}
.outer-sections .outer-edu-card-img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
  display: block;
}
.outer-sections .outer-edu-card-main {
  flex: 1;
  min-width: 0;
  padding: 1.1rem 1.25rem 1.1rem 1rem;
}
.outer-sections .outer-edu-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.outer-sections .outer-edu-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--edu-text);
  margin: 0;
  letter-spacing: 0.01em;
}
.outer-sections .outer-edu-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: var(--edu-accent-soft);
  color: var(--edu-accent);
}
.outer-sections .outer-edu-badge-hours {
  letter-spacing: 0.02em;
}
.outer-sections .outer-edu-card-meta {
  font-size: 0.8125rem;
  color: var(--edu-muted);
  margin: 0 0 0.5rem 0;
}
.outer-sections .outer-edu-card-desc {
  font-size: 0.875rem;
  color: var(--edu-text);
  line-height: 1.55;
  margin: 0 0 0.65rem 0;
}
.outer-sections .outer-edu-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--edu-accent);
  margin: 0;
}

.home-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.home-intro {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.home-nav-sections {
  margin-top: 1.5rem;
}

.home-subsection {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.home-subsection:first-of-type {
  margin-top: 1rem;
}

.home-subsection h3 {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.home-subsection p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.auth-container {
  width: 100%;
  max-width: 380px;
}

.auth-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.25rem 2rem;
}

@media (max-width: 480px) {
  .page-wrap {
    padding: 1rem;
    padding-top: calc(3rem + 1.5rem);
    align-items: flex-start;
  }

  .auth-card {
    padding: 1.75rem 1.5rem;
  }
}

/* ---------- 標題：大而清晰 ---------- */
.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-title {
  margin: 0 0 0.35rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.3;
}

.auth-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .auth-title {
    font-size: 1.35rem;
  }

  .auth-subtitle {
    font-size: 0.75rem;
  }
}

/* ---------- 視圖切換 ---------- */
.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
}

/* ---------- 表單：緊湊、層次分明 ---------- */
.auth-form {
  margin-bottom: 1rem;
}

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

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

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.form-group input {
  width: 100%;
  height: var(--input-height);
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.form-group input::placeholder {
  color: var(--color-text-hint);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(26, 95, 74, 0.12);
}

.form-group input.error {
  border-color: var(--color-error);
}

.form-group .error-msg {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--color-error);
}

/* 表單橫排：區號 + 電話號碼 */
.form-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.form-row-phone select {
  width: auto;
  min-width: 6.5rem;
  height: var(--input-height);
  padding: 0 1.75rem 0 0.65rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.form-row-phone select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-row-phone select.error,
.form-row-phone input.error {
  border-color: var(--color-error);
}

.form-row-phone input {
  flex: 1;
  min-width: 0;
}

/* 驗證碼行 */
.form-row-code {
  flex-wrap: nowrap;
}

.form-row-code input {
  flex: 1;
  min-width: 0;
}

.form-row-code .btn-outline {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 0.875rem;
  min-height: var(--input-height);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.form-row-code .btn-outline:hover:not(:disabled) {
  background: rgba(26, 95, 74, 0.06);
  border-color: var(--color-primary);
}

.form-row-code .btn-outline:disabled {
  color: var(--color-text-hint);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* 說明文字：小且弱化 */
.form-hint {
  margin: 0.35rem 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-hint);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }

  .form-row-phone select {
    min-width: 100%;
    width: 100%;
  }

  .form-row-code {
    flex-direction: column;
  }

  .form-row-code .btn-outline {
    width: 100%;
  }

  :root {
    --input-height: 2.625rem;
  }

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

/* ---------- 主按鈕：大而明確 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

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

.btn:active {
  transform: scale(0.99);
}

.btn-block {
  width: 100%;
}

/* ---------- 連結區：小而不搶眼 ---------- */
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
  padding-top: 0.25rem;
}

.auth-link {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.auth-link:hover {
  color: var(--color-primary);
}

.auth-link:focus {
  outline: none;
  color: var(--color-primary);
}

/* ---------- Toast：小提示 ---------- */
.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #fff;
  background: #374151;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease;
  z-index: 1000;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  background: var(--color-success);
}

.toast.error {
  background: var(--color-error);
}

@media (max-width: 480px) {
  .toast {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: none;
    transform: translateY(120%);
  }

  .toast.show {
    transform: translateY(0);
  }
}

/* 產品詳情 / 購買流程 彈窗 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.modal-overlay.show {
  display: flex;
}
.modal-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  padding: 1.5rem;
}
.modal-card-sm {
  padding: 1.75rem;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}
.modal-close:hover {
  color: var(--color-text);
}
.modal-title {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
}
.modal-body {
  margin-bottom: 1.25rem;
}
.modal-body .form-group {
  margin-bottom: 1rem;
}
.modal-body .form-group-checkbox label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.modal-product-name,
.modal-purchase-product-name {
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
.modal-product-intro,
.modal-purchase-product-price {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.modal-product-price,
.modal-purchase-product-price {
  font-weight: 700;
  color: var(--edu-accent, #0d7377);
}
.modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.modal-pay-success-text {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-success);
}
.outer-edu-card {
  cursor: pointer;
}

/* 訂單記錄（家長內網）— 卡片式、訂單編號 + 所屬課程 */
.purchase-records-section {
  max-width: 42rem;
}
.purchase-records-summary {
  margin: 0 0 1rem 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.purchase-records-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(26, 95, 74, 0.04) 0%, transparent 100%);
  border-radius: var(--radius);
  border: 1px dashed rgba(26, 95, 74, 0.2);
}
.purchase-records-empty.hidden {
  display: none;
}
.purchase-records-empty-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}
.purchase-records-empty-text {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.purchase-records-empty-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.purchase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.purchase-list .purchase-card {
  margin: 0;
  padding: 0;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.purchase-list .purchase-card:hover {
  border-color: rgba(26, 95, 74, 0.35);
  border-left-color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(26, 95, 74, 0.08);
}
.purchase-card-head {
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
  background: rgba(26, 95, 74, 0.04);
  border-radius: var(--radius) var(--radius) 0 0;
}
.purchase-card-order-number {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.purchase-card-body {
  padding: 0.6rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.purchase-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.purchase-card-product {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.purchase-card-student {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--color-primary);
  background: rgba(26, 95, 74, 0.08);
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  width: fit-content;
}
.purchase-card-validity {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
  line-height: 1.35;
}
.purchase-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  flex-shrink: 0;
}
.purchase-card-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
}
.purchase-card-date {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}
.purchase-card-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}
.purchase-card-status.purchase-status-finished { background: rgba(4, 120, 87, 0.12); color: #047857; }
.purchase-card-status.purchase-status-active { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.purchase-card-status.purchase-status-refunding { background: rgba(180, 83, 9, 0.12); color: #b45309; }
.purchase-card-status.purchase-status-refunded { background: rgba(107, 114, 128, 0.15); color: var(--color-text-muted); }
.purchase-card-status.purchase-status-refund-failed { background: rgba(185, 28, 28, 0.12); color: var(--color-error); }
.purchase-card-status:not([class*="purchase-status-"]) { background: rgba(107, 114, 128, 0.12); color: var(--color-text-muted); }
.purchase-card-lessons {
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem 0.65rem;
  border-top: 1px solid rgba(26, 95, 74, 0.1);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 0 var(--radius) var(--radius);
}
.purchase-card-lessons-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.purchase-card-lessons-table-wrap {
  margin-top: 0.25rem;
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}
.purchase-card-lessons-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}
.purchase-card-lessons-table th,
.purchase-card-lessons-table td {
  padding: 0.25rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.purchase-card-lessons-table th {
  background: rgba(26, 95, 74, 0.06);
  color: var(--color-text-muted);
  font-weight: 600;
}
.purchase-card-lessons-table td {
  color: var(--color-text);
}
.purchase-card-lessons-table tbody tr:last-child td {
  border-bottom: none;
}
.purchase-lessons-empty {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding: 0.35rem 0;
}
.purchase-list:not(:empty) ~ .purchase-records-empty { display: none; }

/* 協議勾選：自訂外觀，點擊後明顯打勾、勾了才能支付 */
.purchase-agreement-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.purchase-agreement-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-card);
  position: relative;
  vertical-align: middle;
}
.purchase-agreement-label input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}
.purchase-agreement-label input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.purchase-agreement-label input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}
#modal-purchase-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 管理者：檢視/編輯 訂單記錄 — 美觀、一目了然、實用 */
.manager-purchases-section {
  max-width: 100%;
}
.manager-purchases-header {
  margin-bottom: 1rem;
}
.manager-purchases-summary {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.manager-purchases-summary::before {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  background: linear-gradient(180deg, var(--color-primary) 0%, rgba(26, 95, 74, 0.5) 100%);
  border-radius: 2px;
}
.manager-purchases-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 95, 74, 0.04) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: var(--radius);
  border: 1px dashed rgba(26, 95, 74, 0.2);
}
.manager-purchases-empty.hidden {
  display: none;
}
.manager-purchases-empty-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}
.manager-purchases-empty-text {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.manager-purchases-empty-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
/* 訂單卡片列表：每筆訂單一張卡片 */
.manager-purchases-cards-wrap {
  display: block;
  max-width: 100%;
}
.manager-purchases-cards-wrap.hidden {
  display: none;
}
.manager-purchases-cards-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.manager-purchase-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.manager-purchase-card:hover {
  border-color: rgba(26, 95, 74, 0.25);
  border-left-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(26, 95, 74, 0.1);
}
.manager-purchase-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
}
.manager-purchase-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.manager-purchase-card-price {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.manager-purchase-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.manager-purchase-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.manager-purchase-card-row-status {
  margin-top: 0.35rem;
}
.manager-purchase-card-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
.manager-purchase-card-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.manager-purchase-card-label::after {
  content: '：';
}
.manager-purchase-card-value {
  font-size: 0.875rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.manager-purchase-card-value select.form-control {
  min-width: 8rem;
  padding: 0.35rem 1.75rem 0.35rem 0.5rem;
  font-size: 0.8125rem;
}
.manager-purchase-status-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.manager-purchase-status-paid {
  background: rgba(4, 120, 87, 0.12);
  color: #047857;
}
.manager-purchase-status-pending {
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
}
.manager-purchase-status-cancelled {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-muted);
}
.manager-purchase-status-finished {
  background: rgba(4, 120, 87, 0.12);
  color: #047857;
}
.manager-purchase-status-active {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.manager-purchase-status-refunding {
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
}
.manager-purchase-status-refunded {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-muted);
}
.manager-purchase-status-refund-failed {
  background: rgba(185, 28, 28, 0.12);
  color: var(--color-error);
}
.manager-purchase-status-badge:not([class*="manager-purchase-status-"]) {
  background: rgba(107, 114, 128, 0.12);
  color: var(--color-text-muted);
}
.manager-order-status-select {
  min-width: 6.5rem;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
}

.manager-purchase-card-lessons {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(26, 95, 74, 0.12);
  background: rgba(0, 0, 0, 0.02);
}

.manager-purchase-card-lessons .purchase-card-lessons-title {
  margin-bottom: 0.5rem;
}

/* 管理者：上傳/編輯 合約記錄 — 易檢視、易操作、美觀實用 */
.manager-contracts-section {
  max-width: 100%;
}
.manager-contracts-intro {
  margin: 0 0 1.25rem 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.manager-contract-list-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
}
/* 上傳新合約：外框 = 正常外框包住全部；内框 = 僅表單區做卡片式 */
.manager-contract-upload-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.manager-contract-upload-card-inner {
  background: linear-gradient(180deg, #fff 0%, #fafcfb 100%);
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(26, 95, 74, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #1a5f4a;
  margin-top: 0.75rem;
}
.contract-upload-label-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6570;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.35rem;
}
.manager-contracts-block-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.manager-contract-upload-hint {
  margin: 0 0 1.25rem 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.manager-contracts-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2d7a62 100%);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}
.manager-contract-upload-form {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.contract-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.contract-upload-row-all {
  /* 不再做內框，僅排版用 */
}
.contract-upload-field {
  flex: 1 1 auto;
  min-width: 0;
}
.contract-upload-field.contract-upload-hours { flex: 0 1 12rem; }
.contract-input {
  width: 100%;
  max-width: 100%;
  height: var(--input-height);
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contract-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 95, 74, 0.15);
}
.contract-hours-input {
  width: 100%;
  min-width: 8rem;
}
.contract-file-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contract-file-input {
  width: 100%;
  max-width: 24rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
}
.contract-file-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.contract-upload-submit-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}
.btn-upload-contract {
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(26, 95, 74, 0.2);
}
.btn-upload-contract:hover {
  box-shadow: 0 3px 12px rgba(26, 95, 74, 0.25);
}
.form-row-contract {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.form-row-contract .form-group {
  flex: 1 1 auto;
  min-width: 0;
}
.form-row-contract .form-group-action {
  flex: 0 0 auto;
}
.form-label-invisible { visibility: hidden; }
.manager-contracts-toolbar {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.manager-contracts-filter-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  background: linear-gradient(180deg, rgba(26, 95, 74, 0.05) 0%, rgba(26, 95, 74, 0.02) 100%);
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.manager-contracts-filter-wrap:focus-within {
  border-color: #1a5f4a;
  box-shadow: 0 0 0 2px rgba(26, 95, 74, 0.12);
}
.manager-contracts-filter-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.manager-contracts-teacher-select {
  min-width: 11rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: #fff;
  border: 1px solid rgba(26, 95, 74, 0.15);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234b5563' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.manager-contracts-teacher-select:hover {
  border-color: rgba(26, 95, 74, 0.3);
  background-color: #fafcfb;
}
.manager-contracts-teacher-select:focus {
  outline: none;
  border-color: #1a5f4a;
  background-color: #fff;
}
.manager-contracts-summary {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.manager-contracts-summary::before {
  content: "";
  display: inline-block;
  width: 0.35em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  background: linear-gradient(180deg, var(--color-primary) 0%, rgba(26, 95, 74, 0.5) 100%);
  border-radius: 2px;
}
.manager-contracts-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 95, 74, 0.04) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: var(--radius);
  border: 1px dashed rgba(26, 95, 74, 0.2);
}
.manager-contracts-empty.hidden {
  display: none;
}
.manager-contracts-empty-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}
.manager-contracts-empty-text {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.manager-contracts-empty-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.manager-contracts-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.manager-contracts-cards-wrap.hidden {
  display: none;
}
.manager-contracts-cards-list-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.manager-contracts-record-card {
  background: linear-gradient(180deg, #fff 0%, #fafcfb 100%);
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(26, 95, 74, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #1a5f4a;
  transition: box-shadow 0.2s ease;
}
.manager-contracts-record-card:hover {
  box-shadow: 0 4px 16px rgba(26, 95, 74, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.manager-contracts-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
}
.manager-contracts-record-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  min-width: 0;
}
.manager-contracts-record-meta {
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 500;
}
.manager-contracts-record-teacher {
  font-size: 1rem;
  font-weight: 700;
  color: #0f3328;
  letter-spacing: 0.02em;
}
.manager-contracts-record-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}
.manager-contracts-record-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}
.manager-contracts-record-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.manager-contracts-record-label {
  color: #6b7280;
  font-weight: 500;
}
.manager-contracts-record-label::after {
  content: '：';
}
.manager-contracts-record-value a.contract-file-link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
}
.manager-contracts-record-value a.contract-file-link:hover {
  text-decoration: underline;
  color: var(--color-primary-hover);
}

/* 編輯合約彈窗 — 卡片式：合約資訊一覽 + 修改欄位 */
.modal-card-edit-contract {
  max-width: 42rem;
}
.edit-contract-modal-body {
  padding: 1.25rem 1.5rem;
}
.edit-contract-card-inner {
  background: linear-gradient(180deg, #fafcfb 0%, #f5f9f7 100%);
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 12px;
  border-left: 4px solid var(--color-primary);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(26, 95, 74, 0.06);
}
.edit-contract-summary {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, #f0f6f4 0%, #e8f0ed 100%);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(26, 95, 74, 0.15);
}
.edit-contract-summary-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.2);
}
.edit-contract-summary-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
  font-size: 0.875rem;
}
.edit-contract-summary-row {
  display: contents;
}
.edit-contract-summary-row dt {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-muted);
  min-width: 5rem;
}
.edit-contract-summary-row dd {
  margin: 0;
  color: var(--color-text);
  word-break: break-word;
}
.edit-contract-form-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}
.edit-contract-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* 老師、簽約日期、簽約時數 同一行不換行 */
.edit-contract-row-3col {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  align-items: flex-end;
}
.edit-contract-col {
  flex: 1 1 0;
  min-width: 0;
}
/* 編輯合約內表單控件：與輸入框一致的美觀樣式 */
.edit-contract-card-inner .form-control {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text);
  background-color: #fff;
  border: 1px solid rgba(26, 95, 74, 0.2);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.edit-contract-card-inner .form-control:focus {
  outline: none;
  border-color: #1a5f4a;
  box-shadow: 0 0 0 2px rgba(26, 95, 74, 0.15);
}
.edit-contract-card-inner select.form-control {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6570' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 2rem;
}
.edit-contract-card-inner .form-group {
  margin-bottom: 0;
}
.edit-contract-card-inner .edit-contract-fields .form-group:last-of-type {
  margin-bottom: 0;
}
.edit-contract-file-current {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

/* 編輯合約彈窗：此合約薪酬狀況與課程明細 */
.edit-contract-salary-wrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(26, 95, 74, 0.12);
}
.edit-contract-salary-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.35rem 0;
}
.edit-contract-salary-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem 0;
}
.edit-contract-salary-loading {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.edit-contract-salary-summary {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.edit-contract-salary-summary.hidden,
.edit-contract-salary-table-wrap.hidden,
.edit-contract-salary-empty.hidden {
  display: none;
}
.edit-contract-salary-empty {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}
.edit-contract-salary-table-scroll {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.edit-contract-salary-wrap .teacher-salary-lessons-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.edit-contract-salary-wrap .teacher-salary-lessons-table th,
.edit-contract-salary-wrap .teacher-salary-lessons-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.edit-contract-salary-wrap .teacher-salary-lessons-table th {
  background: rgba(26, 95, 74, 0.06);
  color: var(--color-text-muted);
  font-weight: 600;
}
.edit-contract-salary-wrap .teacher-salary-lessons-table td {
  color: var(--color-text);
}
.edit-contract-salary-wrap .teacher-salary-lessons-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- 管理者：新增/編輯 課程記錄 ---------- */
.manager-lessons-section {
  max-width: 100%;
}
.manager-lessons-hint {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}
.manager-lessons-conflicts {
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.manager-lessons-conflicts-title {
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--color-error);
}
.manager-lessons-conflicts ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* 編輯課程彈窗：卡片式、排版與新增課程一致 */
.modal-card-edit-lesson {
  max-width: 560px;
}
.modal-card-edit-lesson .modal-body {
  padding: 1.25rem 1.5rem;
}
.edit-lesson-modal-body .edit-lesson-card-inner {
  background: linear-gradient(180deg, #fafcfb 0%, #f5f9f7 100%);
  border: 1px solid rgba(26, 95, 74, 0.1);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #1a5f4a;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.edit-lesson-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
}
/* 日期、開始時間、結束時間 同一行不換行 */
.edit-lesson-card-row-3 {
  flex-wrap: nowrap;
}
.edit-lesson-card-row-1 {
  padding-bottom: 0.85rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.08);
}
.edit-lesson-card-row-4 {
  padding-top: 0.15rem;
}
.edit-lesson-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.edit-lesson-label-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6570;
  letter-spacing: 0.02em;
}
.modal-card-edit-lesson .edit-lesson-field .form-control {
  padding: 0.45rem 0.6rem;
  font-size: 0.875rem;
  border-radius: 8px;
  border: 1px solid rgba(26, 95, 74, 0.15);
}
.modal-card-edit-lesson .edit-lesson-field .form-control:focus {
  outline: none;
  border-color: #1a5f4a;
  box-shadow: 0 0 0 2px rgba(26, 95, 74, 0.15);
}
.edit-lesson-field #edit-lesson-order,
.edit-lesson-field #edit-lesson-student-name { min-width: 11rem; }
.edit-lesson-field #edit-lesson-subject { min-width: 10rem; }
.edit-lesson-field #edit-lesson-teacher { min-width: 9rem; font-family: 'Consolas', 'Monaco', 'Menlo', monospace; font-variant-numeric: tabular-nums; }
.edit-lesson-field #edit-lesson-contract { min-width: 11rem; }
.edit-lesson-field #edit-lesson-date { min-width: 9.5rem; }
.edit-lesson-field #edit-lesson-time-start,
.edit-lesson-field #edit-lesson-time-end { min-width: 7rem; }
.edit-lesson-field #edit-lesson-course-status { min-width: 10rem; }
.edit-lesson-conflicts {
  margin-top: 1rem;
}

/* 新增課程：寬度與頁面持平、高度緊湊；第三行與第二行欄位對齊；老師選項選中後可完整顯示姓名+成績 */
.manager-lessons-add-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 100%;
}
.manager-lessons-add-card {
  background: linear-gradient(180deg, #fff 0%, #fafcfb 100%);
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 12px;
  padding: 0.65rem 1rem;
  box-shadow: 0 2px 10px rgba(26, 95, 74, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #1a5f4a;
  transition: box-shadow 0.2s ease;
  width: 100%;
  max-width: 100%;
}
.manager-lessons-add-card:hover {
  box-shadow: 0 4px 16px rgba(26, 95, 74, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
}
.manager-lessons-add-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.manager-lessons-add-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
}
.manager-lessons-add-card-row-1 {
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  margin-bottom: 0.1rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.08);
  gap: 1rem 1.5rem;
}
.manager-lessons-add-card-row-1 .manager-lessons-add-actions {
  margin-left: auto;
  flex-shrink: 0;
}
.manager-lessons-add-card-row-2,
.manager-lessons-add-card-row-3 {
  display: grid;
  grid-template-columns: 10rem 14rem 11rem;
  gap: 1rem 1rem;
  align-items: flex-end;
}
.manager-lessons-add-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}
.manager-lessons-add-label input[type="checkbox"] {
  margin: 0;
}
.manager-lessons-add-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.manager-lessons-add-label-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: #5a6570;
  letter-spacing: 0.02em;
}
.manager-lessons-add-field .form-control {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
  border-radius: 8px;
  border: 1px solid rgba(26, 95, 74, 0.15);
}
.manager-lessons-add-field .form-control:focus {
  outline: none;
  border-color: #1a5f4a;
  box-shadow: 0 0 0 2px rgba(26, 95, 74, 0.15);
}
.manager-lessons-add-field .lesson-order { min-width: 11rem; }
.manager-lessons-add-field .lesson-student-name { min-width: 8rem; }
.manager-lessons-add-field .lesson-subject { min-width: 10rem; }
.manager-lessons-add-field .lesson-teacher {
  min-width: 13.5rem;
  font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
}
.manager-lessons-add-field .lesson-contract { min-width: 11rem; }
.manager-lessons-add-field .lesson-date { min-width: 9.5rem; }
.manager-lessons-add-field .lesson-time-start,
.manager-lessons-add-field .lesson-time-end { min-width: 7rem; }
.manager-lessons-add-actions {
  display: flex;
  align-items: center;
}
.manager-lessons-add-actions .lesson-remove-row {
  flex-shrink: 0;
}
.manager-lessons-subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem 0;
  color: var(--color-text);
}
.manager-lessons-subtitle:first-child { margin-top: 0; }
.manager-lessons-list-hint { margin-bottom: 0.5rem; }
.manager-lessons-list-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
}

/* 新增/編輯 課程記錄 — 已登記課程：卡片式、立體直觀美觀 */
.manager-lessons-cards-wrap {
  overflow-x: visible;
  border: none;
  background: transparent;
  margin-bottom: 1.25rem;
}
.manager-lessons-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.manager-lessons-record-card {
  background: linear-gradient(180deg, #fff 0%, #fafcfb 100%);
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 8px rgba(26, 95, 74, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  border-left: 4px solid #1a5f4a;
  transition: box-shadow 0.2s ease;
}
.manager-lessons-record-card:hover {
  box-shadow: 0 4px 16px rgba(26, 95, 74, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.manager-lessons-record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.1);
}
.manager-lessons-record-head-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  min-width: 0;
}
.manager-lessons-record-meta {
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 500;
}
.manager-lessons-record-subject {
  font-size: 1rem;
  font-weight: 700;
  color: #0f3328;
  letter-spacing: 0.02em;
}
.manager-lessons-record-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}
.manager-lessons-record-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}
.manager-lessons-record-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.manager-lessons-record-label {
  color: #6b7280;
  font-weight: 500;
}
.manager-lessons-record-label::after {
  content: '：';
}
.manager-lessons-record-value {
  color: #111827;
}

/* 主頁課程信息：卡片式橫向展示（不影響課程表） */
.manager-home-lessons-list-wrap {
  overflow-x: visible;
  border: none;
  background: transparent;
  margin-bottom: 1.25rem;
}
.manager-home-lessons-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.manager-lesson-card {
  background: #fff;
  border: 1px solid rgba(26, 95, 74, 0.12);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  box-shadow: 0 1px 4px rgba(26, 95, 74, 0.06);
  border-left: 4px solid #1a5f4a;
}
.manager-lesson-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(26, 95, 74, 0.08);
}
.manager-lesson-card-head .lesson-card-save {
  margin-left: auto;
  flex-shrink: 0;
}
.manager-lesson-meta-date,
.manager-lesson-meta-time {
  font-size: 0.875rem;
  color: #4b5563;
  font-weight: 500;
}
.manager-lesson-meta-subject {
  font-size: 1rem;
  font-weight: 700;
  color: #0f3328;
  letter-spacing: 0.02em;
}
.manager-lesson-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
}
.manager-lesson-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.3rem 1rem;
  font-size: 0.8125rem;
}
.manager-lesson-item {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
}
.manager-lesson-card-row .manager-lesson-item {
  white-space: normal;
  word-break: break-word;
}
.manager-lesson-card-details .manager-lesson-item {
  display: flex;
  flex-wrap: wrap;
}
.manager-lesson-label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}
.manager-lesson-label::after {
  content: '：';
}
.manager-lesson-value {
  color: #111827;
  word-break: break-word;
}

/* 主頁課程卡片可編輯區塊 */
.manager-lesson-card-details-editable {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(26, 95, 74, 0.12);
}
.manager-lesson-card-details-editable .manager-lesson-item-file,
.manager-lesson-card-details-editable .manager-lesson-item-score {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.28rem;
  flex-wrap: wrap;
}
.manager-lesson-card-details-editable .manager-lesson-label {
  min-width: 4.5rem;
}
.manager-lesson-card-details-editable .manager-lesson-file-display {
  margin-left: 0.35rem;
}
.manager-lesson-card-details-editable .lesson-file-input {
  font-size: 0.8125rem;
  max-width: 14rem;
}
.manager-lesson-card-details-editable .lesson-file-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.manager-lesson-card-details-editable .lesson-file-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.manager-lesson-card-details-editable .lesson-file-trigger {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.8125rem;
  color: #1a5f4a;
  background: rgba(26, 95, 74, 0.08);
  border: 1px solid rgba(26, 95, 74, 0.25);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.manager-lesson-card-details-editable .lesson-file-trigger:hover {
  background: rgba(26, 95, 74, 0.12);
  border-color: #1a5f4a;
}
.manager-lesson-card-details-editable .lesson-score-input {
  width: 3.5rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.8125rem;
  border: 1px solid rgba(26, 95, 74, 0.25);
  border-radius: 6px;
}
.manager-lesson-card-details-editable .lesson-detail-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.65rem;
}
.manager-lesson-card-details-editable .lesson-detail-line-files {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.manager-lesson-card-details-editable .lesson-detail-line-files .manager-lesson-item-file {
  width: 100%;
}
.manager-lesson-card-details-editable .lesson-detail-line .manager-lesson-item-file,
.manager-lesson-card-details-editable .lesson-detail-line .manager-lesson-item-score {
  flex: 1 1 0;
  min-width: 0;
}
.manager-lesson-card-details-editable .lesson-detail-scores {
  gap: 0.5rem;
  min-width: 0;
}
.manager-lesson-card-details-editable .lesson-detail-scores .manager-lesson-item-score {
  flex: 1 1 0;
  min-width: 3.5rem;
  justify-content: flex-start;
  overflow: hidden;
}
.manager-lesson-card-details-editable .lesson-detail-scores .manager-lesson-item-score .manager-lesson-label {
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 家長唯讀卡片：評分項與老師一致為橫排 */
.manager-lesson-card-readonly .manager-lesson-card-details .lesson-detail-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.65rem;
}
.manager-lesson-card-readonly .manager-lesson-card-details .lesson-detail-line-files {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.manager-lesson-card-readonly .manager-lesson-card-details .lesson-detail-line-files .manager-lesson-item-file {
  width: 100%;
}
.manager-lesson-card-readonly .manager-lesson-card-details .lesson-detail-scores {
  gap: 0.5rem;
  min-width: 0;
}
.manager-lesson-card-readonly .manager-lesson-card-details .lesson-detail-scores .manager-lesson-item-score {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 0;
  min-width: 3.5rem;
  justify-content: flex-start;
  overflow: hidden;
}
.manager-lesson-card-readonly .manager-lesson-card-details .lesson-detail-scores .manager-lesson-item-score .manager-lesson-label {
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manager-lessons-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.manager-lessons-list-table th,
.manager-lessons-list-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.manager-lessons-list-table th { font-weight: 600; color: var(--color-text-muted); }
.manager-lessons-list-table td.manager-lesson-extra {
  max-width: 10rem;
  word-break: break-word;
  white-space: normal;
}
.manager-lessons-submit-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.btn-lessons-submit:disabled {
  background: var(--color-text-hint);
  border-color: var(--color-text-hint);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.9;
}
.manager-lessons-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}