:root {
  /* Playful, kid-friendly palette（活潑配色） */
  --bg1: #eef3ff;
  --bg2: #fdeffb;
  --card: #ffffff;
  --primary: #5b4bf5;       /* violet-blue */
  --primary-dark: #3f2fc9;  /* darker for high-contrast text */
  --accent: #d65f00;        /* orange (darkened for contrast on white) */
  --accent2: #0a9e91;       /* teal (darkened) */
  --pink: #e23c7d;
  --yellow: #c98a00;
  --good: #0f9e63;
  --bad: #e23b3b;
  --text: #1c1838;          /* near-black for strong contrast */
  --muted: #534f70;         /* darker grey — easier to read */
  --border: #e4e0f2;
  --shadow: 0 6px 20px rgba(91, 75, 245, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  color: var(--text);
  font-size: 16.5px;        /* larger base size to reduce eye strain */
  line-height: 1.7;
}

header.topbar {
  background: linear-gradient(110deg, #6a5cff 0%, #8a6bff 40%, #14c8b8 100%);
  color: #fff;
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 22px rgba(106, 92, 255, .35);
  flex-wrap: wrap;
  gap: 10px;
}
header.topbar h1 { margin: 0; font-size: 22px; letter-spacing: .3px; }
header.topbar .nav { display: flex; align-items: center; gap: 6px; }
header.topbar .nav a, header.topbar .nav button.linkbtn {
  color: #fff; text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.16);
  border: none; cursor: pointer; transition: background .15s;
}
header.topbar .nav a:hover, header.topbar .nav button.linkbtn:hover { background: rgba(255,255,255,.32); }

.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }

/* Full-width three-column layout（滿版三欄）: curriculum · chat · settings */
.layout {
  display: flex; gap: 20px; max-width: none;
  margin: 18px 0; padding: 0 24px; align-items: flex-start;
}
.sidebar { width: 280px; flex: 0 0 280px; position: sticky; top: 16px; }
.chat-col { flex: 1 1 0; min-width: 0; }   /* main area fills remaining space */
.settings { width: 320px; flex: 0 0 320px; position: sticky; top: 16px; }

/* ---------- 老師後台：左選單 + 右工作區 ---------- */
.dash-shell {
  display: flex; gap: 22px; align-items: flex-start;
  margin: 18px 0; padding: 0 24px;
}
.dash-menu {
  width: 240px; flex: 0 0 240px; position: sticky; top: 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 14px 12px; box-shadow: var(--shadow);
}
.dash-me {
  font-size: 14px; padding: 6px 10px 12px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.dash-menu nav { display: flex; flex-direction: column; gap: 6px; }
.dash-link {
  background: #f0edff; color: var(--primary-dark); box-shadow: none;
  text-align: left; padding: 11px 14px; font-size: 15px; border: 2px solid transparent;
  border-radius: 12px; cursor: pointer; width: 100%;
}
.dash-link:hover { background: #e6e0ff; transform: none; }
.dash-link.active { background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff; }
.dash-work { flex: 1 1 0; min-width: 0; }
.dash-section { display: none; }
.dash-section.active { display: block; }

@media (max-width: 760px) {
  .dash-shell { flex-direction: column; padding: 0 14px; }
  .dash-menu { width: 100%; flex: none; position: static; }
  .dash-menu nav { flex-direction: row; flex-wrap: wrap; }
  .dash-link { width: auto; }
}

/* ---------- 章節式教材編輯器（CurriculumEditor） ---------- */
.ed-bar { gap: 10px; }
.view-switch { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.view-switch .ed-view {
  background: #f4f2ff; color: var(--primary-dark); box-shadow: none; border: none;
  border-radius: 0; padding: 8px 12px; font-size: 13.5px;
}
.view-switch .ed-view:hover { background: #e6e0ff; transform: none; }
.view-switch .ed-view.active { background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff; }

/* 樹狀檢視：左章節樹 + 右章節內容 */
.ed-tree-cols { display: flex; gap: 16px; align-items: flex-start; }
.ed-tree {
  width: 240px; flex: 0 0 240px; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; background: #faf9ff; position: sticky; top: 12px;
}
.tree-title { font-weight: 800; font-size: 13.5px; color: var(--primary-dark); margin-bottom: 6px; }
.tree-node {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; margin-bottom: 4px; border: 2px solid transparent; background: #fff;
}
.tree-node:hover { background: #f1eeff; }
.tree-node.active { background: #efeaff; border-color: var(--primary); }
.tree-node .tn-no {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: #efeaff;
  color: var(--primary-dark); font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.tree-node .tn-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-detail { flex: 1 1 0; min-width: 0; }
.ed-detail .chap-card { margin-bottom: 0; }
@media (max-width: 720px) {
  .ed-tree-cols { flex-direction: column; }
  .ed-tree { width: 100%; flex: none; position: static; }
}

/* AI 協助製作教材 */
.ed-ai {
  border: 2px dashed #d9d2ff; background: linear-gradient(120deg, #fff7ef, #f1f0ff);
  border-radius: 12px; padding: 12px 14px;
}
.ed-ai-head { font-weight: 700; margin-bottom: 6px; }
.ai-preview { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.chap-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 12px; background: #fbfaff;
}
.chap-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.chap-no {
  font-weight: 800; color: var(--primary-dark); background: #efeaff;
  border-radius: 8px; padding: 4px 10px; font-size: 13.5px; white-space: nowrap;
}
.chap-card label { margin-top: 6px; font-size: 13px; }
.chap-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 8px; }
.chap-lists .mini-block:nth-child(2) { grid-column: 1 / -1; }   /* 概念區跨欄 */
.mini-block label { margin-top: 0; }
.mini-rows { display: flex; flex-direction: column; gap: 5px; margin: 4px 0; }
.mini-row { display: flex; gap: 6px; align-items: center; }
.mini-row input { min-width: 0; padding: 6px 9px; font-size: 14px; }
.mats-item {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 10px; margin-top: 5px; font-size: 13.5px;
}
.chap-mats { border-top: 1px dashed var(--border); padding-top: 8px; }
@media (max-width: 680px) { .chap-lists { grid-template-columns: 1fr; } }

/* 班級進度表「最近活動／通知」欄內的通知小列 */
.cp-activity { font-size: 12.5px; min-width: 200px; }
.cp-note {
  margin-top: 4px; padding: 3px 8px; border-radius: 8px;
  background: #f3f1ff; border-left: 3px solid var(--primary);
}
.cp-note.alert { background: #fff0f0; border-left-color: #e26d6d; }
.cp-note.milestone { background: #effaf0; border-left-color: #5bb673; }

/* Role switch in the settings panel（角色切換） */
.role-switch { display: flex; flex-direction: column; gap: 6px; }
.role-switch button {
  background: #f0edff; color: var(--primary-dark); box-shadow: none;
  text-align: left; padding: 9px 13px; font-size: 14.5px; border: 2px solid transparent;
}
.role-switch button:hover { background: #e6e0ff; transform: none; }
.role-switch button.active { background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff; }

.unit-item {
  padding: 10px 12px 10px 14px; border-radius: 12px; cursor: pointer;
  border: 2px solid transparent; border-left-width: 5px; margin-bottom: 8px;
  background: #faf9ff; transition: transform .12s, background .12s, box-shadow .12s;
}
.unit-item:hover { background: #f1eeff; transform: translateX(3px); }
.unit-item.active { background: #efeaff; border-color: var(--primary); box-shadow: var(--shadow); }
.unit-item .u-title { font-weight: 700; font-size: 15.5px; }
.unit-item .u-zh { font-size: 13px; color: var(--muted); }
/* Cycle a fun color per unit（每個單元不同顏色） */
.unit-item:nth-child(6n+1) { border-left-color: var(--primary); }
.unit-item:nth-child(6n+2) { border-left-color: var(--accent2); }
.unit-item:nth-child(6n+3) { border-left-color: var(--accent); }
.unit-item:nth-child(6n+4) { border-left-color: var(--pink); }
.unit-item:nth-child(6n+5) { border-left-color: var(--yellow); }
.unit-item:nth-child(6n+6) { border-left-color: var(--good); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card h2 { margin-top: 0; font-size: 20px; }
.card h3 { font-size: 16.5px; color: var(--primary-dark); }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

label { font-size: 14.5px; color: var(--muted); display: block; margin-bottom: 4px; }

select, input[type="text"], input[type="email"] {
  padding: 10px 13px; border: 2px solid var(--border); border-radius: 12px;
  font-size: 15.5px; background: #fff; min-width: 160px; transition: border-color .15s;
}
select:focus, input:focus { outline: none; border-color: var(--primary); }

button {
  background: linear-gradient(120deg, var(--primary), #8a6bff);
  color: #fff; border: none;
  padding: 12px 22px; border-radius: 999px; font-size: 15.5px;
  cursor: pointer; font-weight: 700; transition: transform .12s, box-shadow .12s, filter .12s;
  box-shadow: 0 4px 12px rgba(106,92,255,.28);
}
button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(106,92,255,.36); }
button:active { transform: translateY(0); }
button.secondary { background: #f0edff; color: var(--primary-dark); box-shadow: none; }
button.secondary:hover { background: #e6e0ff; }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.pill {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.pill.sev-1 { background: #e1f8ee; color: var(--good); }
.pill.sev-2, .pill.sev-3 { background: #fff1de; color: #c4781a; }
.pill.sev-4, .pill.sev-5 { background: #ffe3e3; color: var(--bad); }
.pill.resolved { background: #eeecfb; color: var(--primary-dark); }

.muted { color: var(--muted); font-size: 14.5px; }
.hidden { display: none; }

/* Secondary Traditional-Chinese support text（中文輔助文字） */
.zh { font-size: .86em; color: var(--muted); font-weight: 400; }
header.topbar .zh { color: rgba(255,255,255,.85); }
.tabs button .zh, .pill .zh { color: inherit; opacity: .85; }
h1 .zh, h2 .zh, h3 .zh { font-weight: 400; }

/* ---------- Onboarding guide（使用指引） ---------- */
.guide-card {
  position: relative;
  background: linear-gradient(120deg, #fff7ef, #f1f0ff);
  border: 2px dashed #d9d2ff;
}
.guide-card h2 { color: var(--primary-dark); }
.guide-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  background: #fff; color: var(--muted); font-size: 18px; line-height: 1;
  box-shadow: none; border: 1px solid var(--border);
}
.guide-close:hover { background: #f3f0ff; transform: none; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 8px; }
.step {
  background: #fff; border-radius: 14px; padding: 12px 14px;
  border: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start;
}
.step-num {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px;
}
.step:nth-child(1) .step-num { background: var(--primary); }
.step:nth-child(2) .step-num { background: var(--accent2); }
.step:nth-child(3) .step-num { background: var(--accent); }
.step:nth-child(4) .step-num { background: var(--pink); }
.step .s-title { font-weight: 700; font-size: 15.5px; }
.step .s-desc { font-size: 13.5px; color: var(--muted); }

/* Hint banner（小提示） */
.hint {
  background: #fff8e6; border: 1px solid #ffe6a8; color: #8a6a12;
  border-radius: 12px; padding: 10px 14px; font-size: 14.5px; margin: 8px 0;
}
.sidebar-hint {
  font-size: 13.5px; color: var(--primary-dark); background: #efeaff;
  border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; text-align: center;
}

/* ---------- Quiz / teaching ---------- */
.question { padding: 14px 0; border-bottom: 1px solid var(--border); }
.question:last-child { border-bottom: none; }
.question .q-topic { font-size: 13px; color: var(--accent); font-weight: 800; }
.options label { display: block; margin: 6px 0; color: var(--text); cursor: pointer; }
.options input { margin-right: 8px; }

.result-correct { color: var(--good); font-weight: 800; }
.result-wrong { color: var(--bad); font-weight: 800; }

.score-badge {
  font-size: 36px; font-weight: 900;
  background: linear-gradient(120deg, var(--primary), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.teach-box {
  background: #f6f4ff; border-left: 5px solid var(--accent2);
  padding: 12px 16px; border-radius: 0 12px 12px 0; margin-top: 10px;
  white-space: pre-wrap;
}

.event {
  border-left: 5px solid var(--primary); background: #faf9ff;
  padding: 11px 15px; border-radius: 0 12px 12px 0; margin-bottom: 10px;
}
.event.alert { border-color: var(--bad); background: #fff6f6; }
.event.milestone { border-color: var(--yellow); background: #fffaf0; }
.event .e-title { font-weight: 700; }
.event .e-time { font-size: 13px; color: var(--muted); }
.event .e-body { white-space: pre-wrap; font-size: 15.5px; margin-top: 4px; }

.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.ok { background: var(--good); box-shadow: 0 0 0 3px rgba(25,195,125,.18); }
.status-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(255,93,93,.16); }

.tabs { display: flex; gap: 8px; }
.tabs button { background: #f0edff; color: var(--primary-dark); box-shadow: none; }
.tabs button:hover { transform: none; background: #e6e0ff; }
.tabs button.active { background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff; }

.spinner {
  display: inline-block; width: 16px; height: 16px; border: 2px solid #d8d2ff;
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

ul.clean { margin: 6px 0; padding-left: 20px; }
ul.clean li { margin: 3px 0; }

/* ---------- Chat ---------- */
.chat-window { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 480px; }
.messages { flex: 1; overflow-y: auto; padding: 4px 2px; }
.msg {
  max-width: 82%; padding: 11px 15px; border-radius: 16px; margin: 9px 0;
  white-space: pre-wrap; line-height: 1.6; font-size: 16.5px;
  animation: pop .18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.user {
  margin-left: auto; color: #fff; border-bottom-right-radius: 5px;
  background: linear-gradient(120deg, var(--primary), #8a6bff);
}
.msg.bot { background: #f4f2ff; color: var(--text); border-bottom-left-radius: 5px; }
.msg.bot::before { content: "🦉 "; }
.msg.wide { max-width: 100%; }
.msg.wide::before { content: ""; }
.msg.bot .teach-box { background: #fff; }
.msg .typing { color: var(--muted); }

.quick { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; align-items: center; }
.quick button { background: #fff; color: var(--primary-dark); border: 2px solid #e6e0ff; box-shadow: none; padding: 9px 15px; font-size: 14.5px; }
.quick button:hover { background: #f3f0ff; border-color: var(--primary); transform: translateY(-1px); }
.chat-input { display: flex; gap: 8px; align-items: stretch; }
.chat-input input { flex: 1; min-width: 0; }

/* Voice input / output（語音輸入與朗讀） */
.mic {
  background: #fff; color: var(--primary-dark);
  border: 2px solid #e6e0ff; box-shadow: none;
  padding: 8px 15px; font-size: 19px; border-radius: 14px;
}
.mic:hover { background: #f3f0ff; border-color: var(--primary); transform: none; }
.mic.recording {
  background: linear-gradient(120deg, var(--pink), var(--bad)); color: #fff; border-color: transparent;
  animation: micpulse 1.1s infinite;
}
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,60,125,.5); }
  50% { box-shadow: 0 0 0 9px rgba(226,60,125,0); }
}
#speakBtn.toggle-off { opacity: .55; }

/* Click-to-start suggestion chips（一鍵開始按鈕） */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; animation: pop .18s ease-out; }
.chip {
  background: #fff; color: var(--primary-dark);
  border: 2px solid #e6e0ff; border-radius: 999px;
  padding: 9px 16px; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(106,92,255,.12);
}
.chip:hover { background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff; border-color: transparent; transform: translateY(-2px); }
.chip .zh { color: inherit; opacity: .85; }

@media (max-width: 1000px) {
  .layout { flex-wrap: wrap; }
  .sidebar, .settings { width: 100%; flex: 1 1 100%; position: static; }
  .chat-col { flex: 1 1 100%; order: 2; }
  .settings { order: 1; }   /* settings above chat when stacked */
  .sidebar { order: 3; }
}

/* ---------- LLM waiting toast (bottom-right)（等待大語言模型提示） ---------- */
.llm-wait {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  background: #2a2350; color: #fff; border-radius: 14px;
  padding: 11px 16px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.llm-wait.show { opacity: 1; transform: translateY(0); }
.llm-wait .spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.llm-wait .zh { color: rgba(255,255,255,.85); }

/* Tiny per-response model latency line（極小的模型回應耗時，不干擾學習） */
.llm-time { font-size: 10.5px; color: var(--muted); opacity: .7; margin-top: 4px; }

/* ---------- Auto-test panel（自動測試） ---------- */
.sim-box { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.sim-run {
  width: 100%; background: linear-gradient(120deg, var(--accent), var(--pink));
  box-shadow: 0 4px 12px rgba(226,60,125,.3);
}
.sim-progress { margin-top: 10px; }
.sim-bar-track { height: 10px; background: #ece9f6; border-radius: 999px; overflow: hidden; }
.sim-bar { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent2)); transition: width .35s; }
.sim-status { font-size: 13px; color: var(--muted); margin-top: 6px; }
.sim-card {
  border-left: 5px solid var(--accent2); background: #f6fffb;
  border-radius: 0 12px 12px 0; padding: 8px 12px; margin-top: 8px; font-size: 13.5px;
}
.sim-card.done { border-color: var(--good); }

/* Animated reveal for simulated questions（題目逐題浮現） */
.sim-q { animation: pop .25s ease-out; }
.sim-q.correct { color: var(--good); }
.sim-q.wrong { color: var(--bad); }

/* Auto-test option reveal（自動測試選項揭曉） */
.sim-q .options { margin: 6px 0; }
.sim-q .opt { padding: 4px 10px; border-radius: 8px; margin: 3px 0; border: 1px solid transparent; }
.sim-q .opt.chosen { outline: 2px solid var(--primary); }
.sim-q .opt.correct-opt { background: #e1f8ee; color: var(--good); font-weight: 700; }
.sim-q .opt.wrong-opt { background: #ffe3e3; color: var(--bad); text-decoration: line-through; }

/* ---------- Quiz card carousel（測驗卡片輪播） ---------- */
.quiz-overlay {
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(20, 16, 40, .55); backdrop-filter: blur(2px);
  /* 拿掉 display:flex/align-items/justify-content，改用 margin auto 置中 */
  padding: 20px;
  overflow: auto;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.quiz-overlay.show { opacity: 1; pointer-events: auto; }
.quiz-modal {
  width: min(720px, 94vw); height: 88vh; max-height: 88vh; background: #fff;
  border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  margin: 4vh auto;
  transform: translateY(12px) scale(.98); transition: transform .25s;
}
.quiz-overlay.show .quiz-modal { transform: none; }
.quiz-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 10px; }
.quiz-head .quiz-title { font-weight: 800; font-size: 17px; flex: 1; color: var(--primary-dark); }
.quiz-head .quiz-count { font-weight: 700; color: var(--muted); }
.quiz-head .quiz-auto { font-size: 13px; color: var(--accent); font-weight: 700; }
.quiz-x { background: #f0edff; color: var(--muted); box-shadow: none;
  width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
.quiz-x:hover { background: #e6e0ff; transform: none; }
.quiz-progress { height: 8px; background: #ece9f6; margin: 0 20px; border-radius: 999px; overflow: hidden; }
.quiz-progbar { height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent2)); transition: width .35s; }
.quiz-viewport { overflow: hidden; flex: 1; min-height: 0; }
.quiz-track { display: flex; height: 100%; transition: transform .38s cubic-bezier(.4,0,.2,1); }
.qc-card {
  flex: 0 0 100%; width: 100%; padding: 22px 24px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; min-height: 0;
}
.qc-who { font-size: 14px; color: var(--muted); font-weight: 700; }
.qc-topic { font-size: 13px; color: var(--accent); font-weight: 800; }
.qc-q { font-size: 20px; font-weight: 600; margin: 4px 0 14px; }
.qc-opts { display: flex; flex-direction: column; gap: 10px; }
.qc-opt {
  background: #f7f6ff; color: var(--text); box-shadow: none;
  border: 2px solid var(--border); text-align: left; padding: 13px 16px;
  font-size: 16px; font-weight: 600; border-radius: 14px;
}
.qc-opt:hover:not(:disabled) { background: #efeaff; border-color: var(--primary); transform: none; }
.qc-opt:disabled { cursor: default; opacity: 1; }
.qc-opt.chosen { outline: 3px solid var(--primary); outline-offset: 1px; }
.qc-opt.correct-opt { background: #e1f8ee; border-color: var(--good); color: var(--good); }
.qc-opt.wrong-opt { background: #ffe3e3; border-color: var(--bad); color: var(--bad); }
.qc-fill { display: flex; gap: 8px; }
.qc-fill .qc-input { flex: 1; }
.qc-feedback { margin-top: 14px; }
.qc-fb { border-radius: 14px; padding: 12px 16px; font-weight: 700; animation: pop .2s ease-out; }
.qc-fb.ok { background: #e1f8ee; color: var(--good); }
.qc-fb.bad { background: #fff1f1; color: var(--bad); }
.qc-why { font-weight: 400; color: var(--text); font-size: 14.5px; margin-top: 6px; }
.quiz-foot { padding: 12px 20px 18px; display: flex; justify-content: flex-end; align-items: center; }
.qc-next:disabled { opacity: .45; }

/* Quiz guidance + follow-up practice（答題引導與類似練習） */
.qc-guide {
  background: #eef6ff; border: 1px solid #cfe3ff; color: #234e7a;
  border-radius: 12px; padding: 10px 14px; margin: 4px 0 14px; font-size: 14.5px;
}
.qc-examples { margin-top: 8px; font-size: 14px; }
.qc-examples ul { margin: 4px 0; }
.qc-followup {
  margin-top: 12px; border: 2px dashed #d9d2ff; border-radius: 14px;
  padding: 12px 14px; background: #faf9ff; animation: pop .2s ease-out;
}
.qc-fu-label { font-weight: 800; color: var(--primary-dark); margin-bottom: 4px; }
.qc-fu-q { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.qc-fu-opts { display: flex; flex-direction: column; gap: 8px; }
.qc-fu-fb { margin-top: 10px; }

/* Debug modal — last LLM prompt（除錯：上一次提示語） */
.dbg-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.dbg-meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.dbg-msg { margin-bottom: 14px; }
.dbg-role { font-weight: 800; color: var(--primary-dark); margin-bottom: 4px; text-transform: uppercase; font-size: 12.5px; letter-spacing: .4px; }
.dbg-pre {
  white-space: pre-wrap; word-break: break-word;
  background: #f6f4ff; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.quiz-head .qc-copy { margin-left: auto; }

/* ---------- AI Avatar 小光（左下角具象化助教） ---------- */
.avatar {
  position: fixed; left: 18px; bottom: 16px; width: 132px; z-index: 9996;
  user-select: none;
}
.avatar .owl { width: 124px; height: auto; display: block; cursor: pointer; filter: drop-shadow(0 6px 14px rgba(91,75,245,.3)); }
.avatar .tuft { fill: #6a4cff; }
.avatar .wing { fill: #6a4cff; transform-box: fill-box; transform-origin: top center; }
.avatar .beak { transform-box: fill-box; transform-origin: center top; }
.avatar .eye { transform-box: fill-box; transform-origin: center; }
.avatar .think-dots circle { fill: var(--primary); opacity: 0; }
.avatar .sparkles path { fill: var(--yellow); opacity: 0; }
.avatar-name {
  text-align: center; font-size: 12px; font-weight: 800; color: var(--primary-dark);
  margin-top: 2px; text-shadow: 0 1px 0 #fff;
}
.avatar-name .zh { font-size: 11px; }

/* speech bubble */
.avatar-bubble {
  position: absolute; bottom: 138px; left: 6px; max-width: 250px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.5; color: var(--text);
  box-shadow: 0 8px 22px rgba(91,75,245,.22);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.avatar-bubble.show { opacity: 1; transform: none; }
.avatar-bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -9px;
  border: 9px solid transparent; border-top-color: #fff; border-bottom: 0;
}

/* blinking is always on */
.avatar .eye { animation: owl-blink 4.5s infinite; }
@keyframes owl-blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }

/* idle: gentle bob */
.avatar.idle .owl-body { animation: owl-bob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes owl-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* thinking: head tilt + dots */
.avatar.thinking .owl-body { animation: owl-tilt 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes owl-tilt { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.avatar.thinking .think-dots circle { animation: owl-dots 1.2s infinite; }
.avatar.thinking .think-dots circle:nth-child(1) { animation-delay: 0s; }
.avatar.thinking .think-dots circle:nth-child(2) { animation-delay: .18s; }
.avatar.thinking .think-dots circle:nth-child(3) { animation-delay: .36s; }
@keyframes owl-dots { 0%,100% { opacity: .15; } 50% { opacity: 1; } }

/* talking: beak opens/closes + tiny bob */
.avatar.talking .beak { animation: owl-talk .26s ease-in-out infinite; }
@keyframes owl-talk { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.7); } }
.avatar.talking .owl-body { animation: owl-bob 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }

/* happy: bounce + wings flap + sparkles */
.avatar.happy .owl-body { animation: owl-bounce .5s ease; transform-box: fill-box; transform-origin: center bottom; }
@keyframes owl-bounce { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.05); } 60% { transform: translateY(0) scale(.98); } }
.avatar.happy .wing { animation: owl-flap .28s ease-in-out infinite; }
@keyframes owl-flap { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-26deg); } }
.avatar.happy .sparkles path { animation: owl-spark .9s ease-out; }
@keyframes owl-spark { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

@media (max-width: 900px) {
  .avatar { width: 92px; left: 10px; bottom: 10px; }
  .avatar .owl { width: 86px; }
  .avatar-bubble { bottom: 100px; max-width: 190px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .avatar * { animation: none !important; }
}

/* Avatar 拖曳 / 收合（drag & collapse） */
.avatar { cursor: grab; touch-action: none; }
.avatar.dragging { cursor: grabbing; }
.avatar.dragging .owl, .avatar.dragging * { animation: none !important; }   /* freeze while moving */
.avatar-toggle {
  position: absolute; top: -4px; right: -2px; z-index: 3;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: #fff; color: var(--muted); border: 1px solid var(--border);
  font-size: 17px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.avatar-toggle:hover { background: #f3f0ff; color: var(--primary-dark); transform: none; box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.avatar-launcher {
  display: none; width: 54px; height: 54px; padding: 0; border-radius: 50%;
  font-size: 28px; line-height: 1; box-shadow: 0 6px 16px rgba(91,75,245,.35);
  background: linear-gradient(120deg, var(--primary), #8a6bff);
}
.avatar.collapsed { width: 54px; }
.avatar.collapsed .owl,
.avatar.collapsed .avatar-name,
.avatar.collapsed .avatar-toggle,
.avatar.collapsed .avatar-bubble { display: none; }
.avatar.collapsed .avatar-launcher { display: grid; place-items: center; }

/* Admin 滿版版面（用整個頁寬，避免破版） */
.container.wide { max-width: none; margin: 18px 0; padding: 0 24px; }

/* Admin 班級×科目 對照表（matrix）— 溫馨配色 */
.matrix-wrap { overflow-x: auto; border-radius: 12px; }
.matrix { border-collapse: collapse; width: 100%; table-layout: fixed; }
.matrix th, .matrix td {
  border: 1px solid #f3e3cd; padding: 8px 10px; text-align: center; vertical-align: middle;
}
.matrix thead th {
  /* 溫馨配色：蜜桃橘漸層標題 */
  background: linear-gradient(120deg, #f08c5a, #f7b267); color: #fff;
  position: sticky; top: 0; font-size: 14.5px; letter-spacing: 1px;
}
.matrix th.corner { background: #e07a45; width: 150px; }
.matrix th.rowhead {
  /* 班級名稱：奶油杏色底、暖棕字 */
  background: #fff1de; color: #8a5a2b; text-align: left; white-space: nowrap;
  position: sticky; left: 0; font-weight: 700;
  border-left: 4px solid #f7b267;
}
.matrix td select { width: 100%; min-width: 0; font-size: 13.5px; padding: 6px 8px; }
.matrix .cell-tag { font-size: 11.5px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix .cell-tag.on { color: var(--good); font-weight: 700; }
.matrix tbody tr:nth-child(even) td { background: #fffaf3; }
.matrix tbody td { background: #fffdf9; }

/* Admin 各科老師表格：X 軸＝科目標題，欄內為老師方塊（× 可移除） */
.tea-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.tea-table th {
  background: linear-gradient(120deg, #f08c5a, #f7b267); color: #fff;
  border: 1px solid #f3e3cd; padding: 9px 10px; font-size: 14.5px; letter-spacing: 1px;
}
.tea-table td {
  border: 1px solid #f3e3cd; padding: 10px; vertical-align: top; background: #fffdf9;
}
.tea-chip {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  background: #fff1de; border: 1px solid #ffd9a8; color: #8a5a2b;
  border-radius: 10px; padding: 6px 8px 6px 12px; margin-bottom: 6px;
  font-weight: 600; font-size: 14px;
}
.tea-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tea-table button.tea-x {
  flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; padding: 0;
  border-radius: 50%; background: #fff; color: #c4781a;
  font-size: 14px; font-weight: 700; line-height: 20px;
  box-shadow: none; border: 1px solid #ffd9a8; transition: none;
}
.tea-table button.tea-x:hover {
  background: #ffe3e3; color: var(--bad); transform: none; box-shadow: none;
}

/* Admin 浮動 AI 助理（admin chat） */
.admin-chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9995;
  width: 60px; height: 60px; border-radius: 50%; padding: 0; font-size: 28px;
  box-shadow: 0 8px 22px rgba(91,75,245,.4);
}
.admin-chat {
  position: fixed; right: 22px; bottom: 94px; z-index: 9995;
  width: min(430px, 92vw); height: min(540px, 70vh);
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.admin-chat.hidden { display: none; }
.ac-head {
  background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff;
  padding: 12px 16px; font-weight: 800; display: flex; align-items: center; gap: 8px;
}
.ac-head .muted { color: rgba(255,255,255,.8); font-size: 12.5px; }
.ac-close {
  margin-left: auto; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.2); color: #fff; font-size: 18px; line-height: 1; box-shadow: none;
}
.ac-close:hover { background: rgba(255,255,255,.35); transform: none; }
.ac-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ac-msg {
  max-width: 88%; padding: 9px 13px; border-radius: 14px; margin: 7px 0;
  font-size: 14px; line-height: 1.55; animation: pop .18s ease-out;
}
.ac-msg.user { margin-left: auto; background: linear-gradient(120deg, var(--primary), #8a6bff); color: #fff; border-bottom-right-radius: 4px; }
.ac-msg.bot { background: #f4f2ff; border-bottom-left-radius: 4px; }
.ac-done { margin-top: 8px; padding: 8px 10px; background: #e1f8ee; border-radius: 10px; color: var(--good); font-size: 13.5px; }
.ac-err { margin-top: 6px; padding: 8px 10px; background: #fff1f1; border-radius: 10px; color: var(--bad); font-size: 13px; }
.ac-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.ac-input input { flex: 1; min-width: 0; font-size: 14px; }
.ac-input button { padding: 9px 16px; font-size: 14px; }

/* 登入頁（示範 OpenID） */
.login-wrap { display: flex; justify-content: center; padding: 48px 16px; }
.login-card { width: min(560px, 96vw); }
.login-card .tabs { margin-top: 8px; }

/* topbar 使用者徽章 */
.auth-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.auth-user {
  background: rgba(255,255,255,.18); color: #fff; border-radius: 999px;
  padding: 6px 13px; font-size: 14px; font-weight: 700;
}

/* 老師方塊上的管理身分切換（🛡） */
.tea-table button.tea-adm {
  flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; padding: 0;
  border-radius: 50%; background: #fff; font-size: 12px; line-height: 20px;
  box-shadow: none; border: 1px solid #ffd9a8; opacity: .45; transition: none;
}
.tea-table button.tea-adm.on { opacity: 1; background: #e7f0ff; border-color: #7da7e8; }
.tea-table button.tea-adm:hover { transform: none; box-shadow: none; opacity: 1; }

/* 功能編號徽章（FEATURES.md）：開啟「🔢 編號」後顯示在功能旁 */
#fidToggle.on { background: var(--accent2); }
body.show-fids [data-fid] { position: relative; }
body.show-fids [data-fid]::after {
  content: attr(data-fid);
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  color: #fff; background: var(--accent2); border-radius: 6px; padding: 0 5px;
}
/* 表格欄位/小元素的編號改用絕對定位角標，避免撐版 */
body.show-fids td[data-fid], body.show-fids .matrix th[data-fid] { position: relative; }
body.show-fids .quick button[data-fid]::after,
body.show-fids .chat-input button[data-fid]::after { font-size: 9.5px; padding: 0 4px; }

/* 班級學習進度表（AI 評語為第一欄） */
.cp-table { border-collapse: collapse; width: 100%; }
.cp-table th {
  background: linear-gradient(120deg, #f08c5a, #f7b267); color: #fff;
  border: 1px solid #f3e3cd; padding: 9px 10px; text-align: left; font-size: 14px; white-space: nowrap;
}
.cp-table td { border: 1px solid #f3e3cd; padding: 9px 10px; background: #fffdf9; vertical-align: top; }
.cp-table tbody tr:nth-child(even) td { background: #fffaf3; }
.cp-row { cursor: pointer; transition: background .12s; }
.cp-row:hover td { background: #fff1de; }
.cp-comment { min-width: 280px; max-width: 460px; color: var(--text); }
.cp-table th:nth-child(n+3), .cp-table td:nth-child(n+3) { text-align: center; }

/* 學習歷程 modal 內的每筆測驗 */
.hist-rec { border-left: 4px solid var(--accent2); background: #f6fffb;
  border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 10px 0; }