/* K2 SLC 港校联招升学规划及模拟志愿填报
   品牌色：深蓝 #111827（顶栏）+ 橙 #F97316（点缀），与 K2 GPA 系统一致 */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Segoe UI","PingFang HK","Microsoft JhengHei",sans-serif; background:#f5f7fa; min-height:100vh; color:#333; line-height:1.6; }

/* ---------- 登录页 ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(150deg,#111827 0%,#1f2937 55%,#0b1220 100%); }
.login-card { background:#fff; border-radius:16px; padding:32px 28px; width:100%; max-width:420px;
  box-shadow:0 20px 60px rgba(0,0,0,.45); }
.login-brand { text-align:center; margin-bottom:18px; }
.brand-logo { width:72px; height:72px; object-fit:contain; background:#111827; border-radius:16px; padding:8px; }
.brand-logo.small { width:44px; height:44px; border-radius:10px; padding:5px; background:transparent; mix-blend-mode:screen; }
.login-brand h1 { font-size:1.15rem; color:#111827; margin-top:10px; line-height:1.4; }
.login-sub { font-size:.85rem; color:#888; margin-top:4px; }

.auth-tabs { display:flex; border-bottom:2px solid #e8eef5; margin-bottom:16px; }
.auth-tab { flex:1; background:none; border:none; padding:10px 4px; font-size:1rem; cursor:pointer;
  color:#666; border-bottom:3px solid transparent; margin-bottom:-2px; font-weight:600; }
.auth-tab.active { color:#F97316; border-bottom-color:#F97316; }

.auth-msg { padding:10px 12px; border-radius:8px; font-size:.9rem; margin-bottom:12px; }
.auth-msg-error { background:#fdecea; color:#c0392b; }
.auth-msg-ok { background:#e8f5e9; color:#2e7d32; }
.auth-hint { font-size:.8rem; color:#999; margin-top:12px; text-align:center; }

.code-row { display:flex; gap:8px; }
.code-row input { flex:1; min-width:0; }
.btn-code { white-space:nowrap; padding:10px 14px; font-size:.9rem; background:#fff7ed; color:#c2620a;
  border:1px solid #fdba74; border-radius:8px; cursor:pointer; font-weight:600; }
.btn-code:hover { background:#ffedd5; }
.btn-code:disabled { opacity:.55; cursor:not-allowed; }

/* ---------- 顶栏 ---------- */
.topbar { background:#111827; color:#fff; padding:14px 0; box-shadow:0 2px 12px rgba(0,0,0,.25); }
.topbar-inner { max-width:1080px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:14px; }
.topbar-title h1 { font-size:1.2rem; line-height:1.35; }
.topbar-title p { font-size:.8rem; color:#9ca3af; }
.user-area { margin-left:auto; display:flex; align-items:center; gap:10px; }
.user-chip { background:#1f2937; border:1px solid #374151; color:#e5e7eb; font-size:.85rem;
  padding:6px 12px; border-radius:20px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-logout { background:transparent; border:1px solid #4b5563; color:#d1d5db; padding:6px 14px;
  border-radius:8px; cursor:pointer; font-size:.85rem; }
.btn-logout:hover { background:#1f2937; }

/* ---------- 主体 ---------- */
.container { max-width:1080px; margin:0 auto; padding:24px 20px; }
.card { background:#fff; border-radius:12px; padding:22px; margin-bottom:18px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.card h2 { font-size:1.2rem; color:#111827; margin-bottom:16px; border-bottom:2px solid #e8eef5; padding-bottom:10px; }
.card h4 { color:#374151; margin:14px 0 8px; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-row { margin-bottom:14px; }
.form-row label { display:block; font-weight:600; margin-bottom:6px; color:#444; }
.required { color:#F97316; font-size:.8rem; font-weight:600; margin-left:6px; }
.form-row select, .form-row input { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; font-size:1rem; background:#fff; }
.field-error { border-color:#e74c3c !important; box-shadow:0 0 0 2px rgba(231,76,60,.15); }
.field-error::after { content:attr(data-error); }

.subject-row { display:flex; align-items:center; gap:10px; padding:10px; background:#f8f9fa; border-radius:8px; margin-bottom:8px; }
.subject-name { font-weight:500; min-width:130px; }
.subject-row select { padding:8px; border:1px solid #ccc; border-radius:6px; flex:1; }
.btn-remove { background:none; border:none; color:#e74c3c; font-size:1.2rem; cursor:pointer; padding:4px 8px; }
.btn-remove:hover { background:#fdecea; border-radius:4px; }

.program-row { border:1px solid #e0e0e0; border-radius:10px; padding:14px; margin-bottom:12px; background:#fafbfc; }
.program-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; flex-wrap:wrap; }
.program-index { font-weight:700; color:#111827; }
.program-header select { padding:6px; border-radius:6px; border:1px solid #ccc; }
.program-fields { display:flex; gap:10px; }
.program-fields select { flex:1; padding:9px; border:1px solid #ccc; border-radius:6px; min-width:0; }
.program-requirement { margin-top:8px; font-size:.85rem; color:#856404; }
.path-hint { background:#e8f4fd; padding:10px; border-radius:8px; margin-bottom:14px; font-size:.95rem; }

.btn { padding:12px 22px; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:.2s; }
.btn-primary { background:#F97316; color:#fff; margin:10px 0 20px; font-size:1.05rem; font-weight:600; }
.btn-primary:hover { background:#ea680c; }
#calculate-btn { width:100%; }
#form-login .btn-primary, #form-register .btn-primary, #form-reset .btn-primary { width:100%; margin:6px 0 0; }
.btn-secondary { background:#e8eef5; color:#333; width:100%; margin-top:6px; }

/* ---------- 结果 ---------- */
.result-card { border:2px solid #111827; }
.result-header { margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.result-header h3 { color:#111827; font-size:1.05rem; }
.student-score { background:#F97316; color:#fff; padding:6px 14px; border-radius:8px; font-weight:600; white-space:nowrap; }
.result-item { border:1px solid #e0e0e0; border-radius:10px; padding:16px; margin-bottom:12px; background:#f8f9fa; }
.result-item.req-blocked { opacity:.75; border-left:4px solid #e74c3c; }
.result-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.band-badge { background:#111827; color:#fff; padding:3px 10px; border-radius:12px; font-weight:700; font-size:.9rem; }
.result-uni { font-weight:600; }
.result-prog { color:#555; }
.result-stats { display:grid; gap:6px; font-size:.95rem; }
.probability { padding:8px; border-radius:6px; text-align:center; margin-top:6px; }
.prob-high { background:#c8e6c9; }
.prob-good { background:#dcedc8; }
.prob-mid { background:#ffe0b2; }
.prob-low { background:#ffccbc; }
.prob-verylow { background:#ffcdd2; }
.req { font-size:.85rem; color:#856404; }
.req.bad { color:#c0392b; }
.suggestions { margin-top:16px; background:#f1f8e9; padding:16px; border-radius:10px; }
.suggestions h4 { color:#33691e; margin:0 0 10px; }
.suggestions ul { padding-left:20px; }
.suggestions li { margin-bottom:6px; }
.disclaimer { margin-top:12px; font-size:.8rem; color:#999; text-align:center; }

/* ---------- 申请材料与时间表 ---------- */
.material-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.material-tab { padding:8px 16px; border-radius:20px; border:1px solid #d1d5db; background:#fff; color:#555;
  cursor:pointer; font-size:.9rem; font-weight:600; }
.material-tab.active { background:#F97316; border-color:#F97316; color:#fff; }
.material-panel { background:#fafbfc; border:1px solid #eef1f5; border-radius:10px; padding:16px; }
.material-table { width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; }
.material-table th, .material-table td { border:1px solid #e5e7eb; padding:8px 10px; text-align:left; vertical-align:top; }
.material-table th { background:#111827; color:#fff; font-weight:600; }
.material-table tr:nth-child(even) td { background:#f9fafb; }
.material-list { padding-left:20px; }
.material-list li { margin-bottom:6px; }
.muted { color:#999; font-size:.82rem; }

footer { text-align:center; color:#888; font-size:.85rem; padding:20px 0; }
.brand-footer { color:#c2620a; font-weight:600; margin-top:4px; }

@media (max-width:720px) {
  .form-grid { grid-template-columns:1fr; }
  .program-fields { flex-direction:column; }
  .subject-row { flex-wrap:wrap; }
  .topbar-inner { flex-wrap:wrap; }
  .topbar-title h1 { font-size:1rem; }
  .user-area { margin-left:0; width:100%; justify-content:space-between; }
  .result-header h3 { font-size:.95rem; }
}

/* ---------- v3：密码小眼睛 / 导航 / 角色面板 ---------- */
.pwd-wrap { position:relative; display:flex; align-items:center; }
.pwd-wrap input { padding-right:46px; }
.eye-btn { position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1.05rem; line-height:1;
  padding:6px 8px; border-radius:6px; color:#666; }
.eye-btn:hover { background:#f1f5f9; }

.app-nav { max-width:1080px; margin:0 auto; padding:14px 20px 0; display:flex; gap:8px; flex-wrap:wrap; }
.nav-btn { padding:9px 18px; border-radius:10px 10px 0 0; border:1px solid transparent;
  background:#eef2f7; color:#475569; font-size:.95rem; font-weight:600; cursor:pointer; }
.nav-btn:hover { background:#e2e8f0; }
.nav-btn.active { background:#fff; color:#111827; border-color:#e5e7eb; border-bottom-color:#fff;
  box-shadow:0 -2px 0 #F97316 inset; }
.panel { animation:fade .18s ease-in; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.role-badge { font-size:.78rem; padding:4px 10px; border-radius:20px; font-weight:700; white-space:nowrap; }
.role-student { background:#1f2937; color:#9ca3af; border:1px solid #374151; }
.role-counselor { background:#0e7490; color:#e0f2fe; }
.role-admin { background:#F97316; color:#fff; }

.action-row { display:flex; gap:12px; margin:10px 0 20px; }
.action-row .btn { flex:1; margin:0; }
.btn-ghost { background:#fff; color:#111827; border:1px solid #cbd5e1; font-weight:600; }
.btn-ghost:hover { background:#f8fafc; }

/* v6：儲存並提交按鈕 + 自動儲存狀態提示 */
.btn-save { background:#F97316; color:#fff; border:1px solid #ea580c; font-weight:700; }
.btn-save:hover { background:#ea580c; }
.btn-save:disabled { opacity:.65; cursor:default; }
.plan-save-state { font-size:.85rem; color:#64748b; min-height:1.2em; margin:-8px 0 18px; line-height:1.55; }
.plan-save-state.ok { color:#15803d; }
.plan-save-state.err { color:#b91c1c; }
.plan-save-state.saving { color:#b45309; }
.autosave-tip { background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; padding:9px 12px;
  font-size:.86rem; color:#0c4a6e; margin-bottom:14px; line-height:1.6; }

/* v17：① 學生基本資訊——老師建檔 → 摘要視圖 + 可選修改 */
.profile-chips { display:flex; flex-wrap:wrap; gap:8px 10px; margin-bottom:16px; }
.profile-chip { display:inline-flex; align-items:baseline; gap:6px; background:#f4f6f9;
  border:1px solid #e3e8ef; border-radius:999px; padding:7px 14px; font-size:.92rem; color:#111827; }
.profile-chip .pc-label { font-size:.76rem; color:#64748b; }
.profile-chip .pc-value { font-weight:600; }
.profile-chip.is-empty .pc-value { color:#b45309; font-weight:500; }
.profile-path-row { max-width:320px; }
.profile-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 4px; }
.profile-actions .btn { width:auto; flex:0 0 auto; margin:0; padding:10px 20px; font-size:.95rem; }
#profile-view.is-editing { display:none; }

/* v6：額外學術資歷（其他資歷可加多行） */
.extra-row { align-items:stretch; }
.extra-row input { flex:1; padding:8px 10px; border:1px solid #ccc; border-radius:6px; font-size:.95rem; }
#extra-fields .field-hint { margin-top:4px; }
.btn-mini { padding:6px 12px; font-size:.82rem; border-radius:6px; background:#eef2f7; color:#111827;
  border:1px solid #dbe3ec; cursor:pointer; white-space:nowrap; }
.btn-mini:hover { background:#e2e8f0; }
.btn-mini.danger { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
.btn-mini.danger:hover { background:#fee2e2; }

.data-table { width:100%; border-collapse:collapse; font-size:.9rem; }
/* v13：寬表（雙語表頭 + 按鈕列）在小屏下允許橫向滾動，避免衝出卡片 */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.table-scroll .data-table { min-width:600px; }
.table-scroll .material-table { min-width:520px; }
.table-scroll .ss-table { min-width:500px; }
.data-table th, .data-table td { border-bottom:1px solid #eef1f5; padding:10px 8px; text-align:left; vertical-align:top; }
.data-table td { word-break:break-word; }
/* v14：表頭底色改麻灰（原本偏藍的 #f8fafc 與卡片底色太接近，分不出表頭） */
.data-table th { background:#e7e4de; color:#4a463f; font-weight:600; white-space:normal; }
/* v14：表頭中英雙語改「上下兩行」，不再擠在一行；欄位因此收窄，「查看 / 錄入」不用再左右拖拉 */
.data-table th .i18n { display:block; line-height:1.45; }
html[data-lang="both"] .data-table th .i18n-zh { display:block; white-space:nowrap; }
html[data-lang="both"] .data-table th .i18n-en {
  display:block; margin:1px 0 0; font-size:.78em; font-weight:500;
  opacity:.7; line-height:1.3; white-space:normal;
}
/* 操作列固定在表格右側，橫向滾動時仍可直接點 */
.data-table th.col-ops, .data-table td.col-ops { position:sticky; right:0; z-index:2; }
.data-table td.col-ops { background:#fff; white-space:nowrap;
  box-shadow:-10px 0 12px -12px rgba(17,24,39,.5); }
.data-table th.col-ops { background:#e7e4de; z-index:3; }
.data-table tr:hover td { background:#fbfdff; }
.data-table tr:hover td.col-ops { background:#fbfdff; }
/* v13：操作列不再用 display:flex（flex 會讓 td 脫離表格列寬，「重置密碼/停用/刪除」會衝出表格右邊），
   改用行內按鈕 + nowrap，超寬由 .table-scroll 橫向滾動兜底
   v14：改成允許換行——按鈕寧可排成兩行，也不要把整張表撐出卡片右邊（目標：桌面端不出現橫向滾動條） */
.data-table td.ops { white-space:normal; }
.data-table td.ops .btn-mini { margin:0 4px 4px 0; }
/* 帳號表：下拉框按最長選項（（當前：xxx 老師））會把表格撐爆，統一限寬 */
.role-select, .counselor-select { max-width:132px; text-overflow:ellipsis; }
.role-select { padding:5px 8px; border:1px solid #d1d5db; border-radius:6px; font-size:.85rem; }
.pill { font-size:.78rem; padding:3px 9px; border-radius:20px; font-weight:600; }
.pill.ok { background:#dcfce7; color:#166534; }
.pill.off { background:#fee2e2; color:#991b1b; }

.advice-form { margin-top:18px; padding:16px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; }
.advice-form h4 { margin:0 0 10px; }
.advice-form textarea { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; font-size:.95rem;
  font-family:inherit; resize:vertical; }
.advice-item { border:1px solid #e5e7eb; border-left:4px solid #F97316; border-radius:8px;
  padding:12px 14px; margin-bottom:10px; background:#fff; }
.advice-head { display:flex; gap:10px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.advice-tag { background:#fff7ed; color:#c2620a; border:1px solid #fdba74; font-size:.78rem;
  padding:2px 8px; border-radius:12px; font-weight:600; }
.advice-meta { font-size:.8rem; color:#94a3b8; }
.advice-body { font-size:.92rem; color:#334155; line-height:1.65; }
.detail-meta { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.9rem; color:#475569;
  background:#f8fafc; border-radius:8px; padding:10px 14px; }
.detail-text { font-size:.92rem; color:#334155; }
.empty-tip { color:#94a3b8; font-size:.9rem; padding:8px 0; }
.inline-msg { font-size:.88rem; margin-top:10px; min-height:1.2em; }
.inline-msg.ok { color:#15803d; }
.inline-msg.err { color:#b91c1c; }

@media (max-width:720px) {
  .action-row { flex-direction:column; }
  .app-nav { padding:10px 12px 0; }
  .nav-btn { font-size:.85rem; padding:8px 12px; }
  .data-table { font-size:.82rem; }
  .data-table th, .data-table td { padding:8px 5px; }
}

/* ── v4 新增：状态标签 / 表格单元格 / 材料编辑 ── */
.pill { display:inline-block; font-size:.76rem; font-weight:600; padding:2px 9px; border-radius:12px; white-space:nowrap; }
.pill.ok { background:#dcfce7; color:#15803d; }
.pill.warn { background:#fef3c7; color:#b45309; }
.pill.off { background:#f1f5f9; color:#64748b; }
.cell-wrap { max-width:320px; font-size:.86rem; color:#475569; line-height:1.55; }
tr.row-active { background:#fff7ed; }
.mat-form { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:14px; margin-bottom:14px; }
.mat-form .form-grid { margin-bottom:0; }
.mat-form textarea { width:100%; font-family:inherit; }
#mat-list .data-table { margin-top:6px; }

/* ============================================================
   v5：各大学计分汇总（科目选择最下方）
   ============================================================ */
.score-summary { margin-top:18px; padding-top:16px; border-top:2px dashed #e2e8f0; }.ss-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.ss-head h3 { font-size:1.02rem; color:#111827; }
.ss-sub { font-size:.8rem; color:#94a3b8; }
.ss-best { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:8px;
  padding:8px 12px; font-size:.9rem; margin-bottom:10px; }
.ss-best.warn { background:#fefce8; border-color:#fde68a; color:#854d0e; }
.ss-best strong { color:#c2410c; }
.ss-table { width:100%; border-collapse:collapse; font-size:.86rem; table-layout:fixed; }
.ss-table th { background:#f8fafc; color:#475569; font-weight:600; text-align:left;
  padding:8px; border-bottom:1px solid #e2e8f0; white-space:normal; line-height:1.45; vertical-align:bottom; }
/* v14：固定欄寬 + 允許大學名（「香港大學 (HKU)」）與計分規則換行，
   整張表一屏放得下，不用橫向滾動才看得到「總分」 */
.ss-table th:nth-child(1) { width:19%; }
.ss-table th:nth-child(2) { width:30%; }
.ss-table th:nth-child(4) { width:82px; }
.ss-table td { padding:9px 8px; border-bottom:1px solid #f1f5f9; vertical-align:top; word-break:break-word; }
.ss-table tr:hover td { background:#fcfdff; }
.ss-table .num { text-align:right; white-space:nowrap; }
.ss-uni { font-weight:600; color:#111827; white-space:normal; }
.ss-rule { color:#64748b; font-size:.8rem; min-width:0; }
.ss-subj { word-break:break-word; }
.ss-chip { display:inline-block; background:#eef2f7; color:#334155; border-radius:12px;
  padding:1px 8px; margin:0 4px 4px 0; font-size:.78rem; white-space:nowrap; }
.ss-chip b { color:#c2410c; margin-left:3px; }
.ss-need { display:inline-block; font-size:.75rem; color:#b45309; background:#fffbeb;
  border:1px solid #fde68a; border-radius:10px; padding:0 7px; margin-left:2px; }
.ss-total { font-size:1.05rem; font-weight:700; color:#F97316; }
.ss-incomplete .ss-total { color:#94a3b8; font-weight:600; }
.ss-note { font-size:.78rem; color:#94a3b8; margin-top:10px; line-height:1.6; }

/* ============================================================
   v5：OEA / SLP 申报
   ============================================================ */
.pf-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; }
.pf-who strong { font-size:1rem; color:#111827; margin-right:8px; }
.pf-top-ops { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill.danger { background:#fee2e2; color:#b91c1c; }

.pf-section { margin-top:20px; padding-top:16px; border-top:2px solid #eef2f7; }
.pf-section h3 { font-size:1.05rem; color:#111827; margin-bottom:10px; }
.pf-section h3 .muted { font-weight:400; margin-left:8px; font-size:.82rem; }

.pf-guide { background:#f0f9ff; border:1px solid #bae6fd; border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.pf-guide-row { display:flex; gap:8px; align-items:flex-start; font-size:.85rem; color:#0c4a6e; line-height:1.6; }
.pf-guide-row + .pf-guide-row { margin-top:6px; }
.pf-guide-row .gi { flex:0 0 auto; }
.pf-guide-row p { margin:0; }

.oea-list { display:flex; flex-direction:column; gap:10px; }
.oea-card { border:1px solid #e2e8f0; border-radius:10px; background:#fff; overflow:hidden; }
.oea-card.incomplete { border-left:4px solid #f59e0b; }
.oea-card.open { box-shadow:0 2px 10px rgba(15,23,42,.06); }
.oea-head { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fafbfc; flex-wrap:wrap; }
.oea-seq { background:#111827; color:#fff; border-radius:6px; font-size:.78rem; font-weight:700;
  padding:3px 7px; font-variant-numeric:tabular-nums; }
.oea-maintitle { flex:1; min-width:180px; display:flex; flex-direction:column; }
.oea-maintitle strong { color:#111827; font-size:.95rem; }
.oea-maintitle .muted { font-size:.78rem; }
.oea-body { padding:14px 12px 12px; border-top:1px solid #eef2f7; }

.pf-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.pf-field { margin-bottom:12px; }
.pf-field-wide { grid-column:1 / -1; }
.pf-field label { display:block; font-weight:600; font-size:.86rem; color:#334155; margin-bottom:5px; }
.pf-field input, .pf-field select, .pf-field textarea,
.pf-section > textarea {
  width:100%; padding:9px 10px; border:1px solid #cbd5e1; border-radius:8px; font-size:.92rem;
  font-family:inherit; background:#fff; color:#1f2937;
}
.pf-field textarea, .pf-section > textarea { resize:vertical; line-height:1.65; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus, .pf-section > textarea:focus {
  outline:none; border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.pf-field select:disabled { background:#f1f5f9; color:#94a3b8; cursor:not-allowed; }
.field-hint { font-size:.76rem; color:#94a3b8; margin-top:4px; line-height:1.5; }

.pf-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.pf-actions .btn { width:auto; margin:0; }
.btn-sm { padding:8px 16px; font-size:.88rem; margin:0; }
.pf-section > .btn-secondary { width:auto; padding:9px 16px; font-size:.88rem; margin-top:12px; }

.pf-lang { display:flex; align-items:center; gap:16px; font-size:.86rem; color:#475569; margin-bottom:8px; }
.pf-lang label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.pf-count { margin-left:auto; font-size:.8rem; color:#94a3b8; font-variant-numeric:tabular-nums; }
.pf-count.over { color:#b91c1c; font-weight:700; }

/* 老师批注 */
.rv-wrap { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.rv-item { background:#fffbf0; border:1px solid #fde68a; border-left:4px solid #f59e0b;
  border-radius:8px; padding:9px 12px; }
.rv-item.rv-done { background:#f8fafc; border-color:#e2e8f0; border-left-color:#cbd5e1; }
.rv-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.rv-author { font-weight:600; font-size:.82rem; color:#92400e; }
.rv-done .rv-author { color:#64748b; }
.rv-time { font-size:.76rem; color:#94a3b8; }
.rv-body { font-size:.88rem; color:#334155; line-height:1.65; }
.rv-ops { display:flex; gap:6px; margin-top:6px; }
.rv-add { font-size:.85rem; }
.rv-add summary { cursor:pointer; color:#c2410c; font-weight:600; padding:4px 0; list-style:none; }
.rv-add summary::-webkit-details-marker { display:none; }
.rv-add textarea { width:100%; margin:8px 0; padding:9px 10px; border:1px solid #cbd5e1;
  border-radius:8px; font-family:inherit; font-size:.9rem; resize:vertical; }

@media (max-width:720px) {
  .pf-grid { grid-template-columns:1fr; }
  .ss-table { font-size:.8rem; }
  .ss-table th:nth-child(2), .ss-table td:nth-child(2) { display:none; }
  .oea-head { gap:6px; }
}

/* ── v5：中学选择（搜索 + 18 区分组） ── */
.school-search { margin-bottom:8px; background:#f8fafc !important; }
.school-search::placeholder { color:#9ca3af; }
#school-name { max-height:340px; }
#school-name optgroup { font-weight:700; color:#111827; background:#f1f5f9; font-style:normal; }
#school-name option { font-weight:400; }
#school-search-info { margin-top:6px; color:#94a3b8; }

/* ============================================================
   三語顯示：繁體 / English / 繁體+English（預設雙語）
   ============================================================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  overflow: hidden;
  margin-right: 10px;
  background: rgba(255,255,255,.06);
}
.lang-btn {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: .72rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  line-height: 1.7;
  opacity: .72;
  transition: background .15s, opacity .15s;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.active { background: #F97316; color: #111827; opacity: 1; }
.lang-switch-login {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #374151;
  margin: 0 auto 14px;
  display: flex;
  justify-content: center;
  width: fit-content;
}

.i18n { display: inline; }
.i18n-zh { display: inline; }
.i18n-en { display: none; }

html[data-lang="both"] .i18n-zh { display: block; }
html[data-lang="both"] .i18n-en {
  display: block;
  font-size: .82em;
  line-height: 1.42;
  font-weight: 400;
  opacity: .68;
  margin-top: 1px;
  letter-spacing: 0;
}
html[data-lang="en"] .i18n-zh { display: none; }
html[data-lang="en"] .i18n-en { display: inline; }

/* 按鈕、標籤、表頭等橫向空間有限的地方，雙語並排 */
html[data-lang="both"] button .i18n-zh,
html[data-lang="both"] .btn .i18n-zh,
html[data-lang="both"] th .i18n-zh,
html[data-lang="both"] .nav-btn .i18n-zh,
html[data-lang="both"] .role-badge .i18n-zh,
html[data-lang="both"] label .i18n-zh,
html[data-lang="both"] .status-pill .i18n-zh { display: inline; }
html[data-lang="both"] button .i18n-en,
html[data-lang="both"] .btn .i18n-en,
html[data-lang="both"] th .i18n-en,
html[data-lang="both"] .nav-btn .i18n-en,
html[data-lang="both"] .role-badge .i18n-en,
html[data-lang="both"] label .i18n-en,
html[data-lang="both"] .status-pill .i18n-en {
  display: inline;
  margin: 0 0 0 .4em;
  font-size: .88em;
  opacity: .72;
}

/* ============================================================
   通知小鬧鐘（升學老師 / 管理員）
   ============================================================ */
.notify-wrap { position: relative; display: inline-block; margin-right: 8px; }
.notify-bell {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  color: inherit;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.notify-bell:hover { background: rgba(255,255,255,.14); border-color: rgba(249,115,22,.7); }
.notify-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #111827;
}
.notify-badge.has-new { animation: notifyPulse 1.6s ease-in-out infinite; }
@keyframes notifyPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.notify-panel {
  position: absolute;
  top: 44px; right: 0;
  width: 330px;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  z-index: 200;
}
.notify-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f2f4;
  position: sticky; top: 0; background: #fff;
}
.notify-head strong { font-size: .86rem; }
.notify-read-all {
  background: none; border: 0; color: #F97316;
  font-size: .72rem; cursor: pointer; padding: 2px 4px;
}
.notify-read-all:hover { text-decoration: underline; }
.notify-list { padding: 4px 0; }
.notify-item {
  display: flex; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #f7f8f9;
}
.notify-item:last-child { border-bottom: 0; }
.notify-item-icon { flex: 0 0 auto; font-size: .95rem; line-height: 1.4; }
.notify-item-main { flex: 1 1 auto; min-width: 0; }
.notify-item-text { font-size: .78rem; line-height: 1.45; color: #1f2937; word-break: break-word; }
.notify-item-time { font-size: .68rem; color: #9ca3af; margin-top: 2px; }
.notify-empty { font-size: .78rem; color: #9ca3af; text-align: center; padding: 18px 0; margin: 0; }

@media (max-width: 560px) {
  .notify-panel { width: 280px; right: -60px; }
}

/* ── v10：開通帳號「先選角色」 ── */
.role-pick { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:2px 0 6px; }
.role-option {
  display:flex; align-items:flex-start; gap:10px;
  text-align:left; padding:14px; border:2px solid #e2e8f0; border-radius:12px;
  background:#fff; cursor:pointer; font-family:inherit; transition:.16s;
}
.role-option:hover { border-color:#fdba74; background:#fffbf6; }
.role-option.is-active { border-color:#F97316; background:#fff7ed; box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.role-ic { font-size:1.35rem; line-height:1.1; flex:0 0 auto; }
.role-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.role-body strong { font-size:1rem; color:#111827; }
.role-option.is-active .role-body strong { color:#c2620a; }
.role-body small { font-size:.8rem; color:#64748b; line-height:1.45; }
.form-step { font-size:.9rem; font-weight:700; color:#111827; margin:8px 0 12px;
  padding-top:12px; border-top:1px dashed #e2e8f0; }
@media (max-width: 720px) {
  .role-pick { grid-template-columns:1fr; }
}