:root {
  --bg: #eef4f8;
  --ink: #14213d;
  --muted: #617089;
  --line: #cfdae8;
  --panel: #ffffff;
  --green: #0f9f7a;
  --green-soft: #dff8ef;
  --blue: #2f6fed;
  --blue-soft: #e8f0ff;
  --gold: #c47a10;
  --gold-soft: #fff1c9;
  --red: #d14b2a;
  --pink: #d94689;
  --cyan: #0891b2;
  --shadow: 0 18px 40px rgba(30, 52, 95, 0.14);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
.practice-levels { margin: 12px 0; padding: 14px; background: #f1f6ff; border: 1px solid #ceddf4; border-radius: 10px; }
.practice-levels:empty { display: none; }
.practice-levels p { font-size: 13px; line-height: 1.7; margin: 8px 0; }
.practice-levels small { display: block; color: #526885; line-height: 1.7; }
.practice-level-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.practice-level-buttons button[aria-pressed="true"] { background: #245db7; color: white; }
.practice-level-summary { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin:9px 0 2px !important; color:#405b81; }
.practice-level-summary span { padding-left:12px; border-left:1px solid #c8d7ed; }
.formal-unlock-rule { margin:10px 0 0 !important; padding:8px 10px; border:1px solid #b9d8ff; border-radius:7px; background:#f8fbff; color:#1f5d9d; font-weight:600; }
.practice-rule-details { margin-top:8px; }
.practice-rule-details summary { cursor:pointer; color:#2d65ae; font-size:13px; font-weight:700; }
.practice-rule-details p { margin:7px 0 0; }
.teacher-secondary-details { margin:14px 0 0; border:1px solid #d5e2f3; border-radius:9px; background:#fbfdff; }
.teacher-secondary-details > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; color:#28598f; font-weight:800; cursor:pointer; list-style:none; }
.teacher-secondary-details > summary::-webkit-details-marker { display:none; }
.teacher-secondary-details > summary::after { content:"＋"; color:#2f6fed; font-size:18px; line-height:1; }
.teacher-secondary-details[open] > summary { border-bottom:1px solid #dbe7f5; background:#f3f8ff; }
.teacher-secondary-details[open] > summary::after { content:"−"; }
.teacher-secondary-details > :not(summary) { margin-left:13px; margin-right:13px; }
.teacher-secondary-details > .teacher-grid { margin-top:0; margin-bottom:13px; }
.teacher-effect-metrics { margin-top:10px; }
.teacher-chart-details { margin-top:14px; }
.teacher-chart-details > .chart-grid { margin-top:13px; margin-bottom:13px; }
.teacher-advanced-config > :not(summary) { margin-top:14px; margin-bottom:14px; }
.teacher-analytics-focus { margin-bottom:14px; }
.teacher-focus-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; }
.teacher-focus-card strong { color:#174f90; font-size:17px; }
.teacher-focus-card p { margin:5px 0 0; color:#5f7493; line-height:1.6; }
.teacher-focus-card button { flex:0 0 auto; }
.dataset-levels { font-size: 12px; color: #526885; line-height: 1.6; }
.dataset-level-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.dataset-level-tabs button { border:1px solid #bcd3f7; background:#f8fbff; color:#356092; border-radius:999px; padding:5px 9px; font:700 12px/1.2 inherit; cursor:pointer; }
.dataset-level-tabs button[aria-pressed="true"] { color:#fff; border-color:#2368d8; background:linear-gradient(135deg,#1d78eb,#4655dd); box-shadow:0 3px 8px rgba(42,100,210,.18); }
.dataset-level-tabs button:focus-visible { outline:3px solid rgba(30,117,234,.28); outline-offset:2px; }
.dataset-file { margin:8px 0; color:#60719a; font:12px/1.45 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }

/* Classroom collaboration and evidence-led student portfolio. */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.portfolio-grid > article { border:1px solid #cfe0ff; border-radius:8px; padding:12px; background:#f8fbff; display:flex; flex-direction:column; gap:4px; }
.portfolio-grid > article strong { color:#1267e8; font-size:24px; }
.portfolio-grid > article span { color:#60719a; font-size:13px; }
.portfolio-work-list,.portfolio-report { grid-column:1 / -1; border:1px solid #d9e7fb; border-radius:8px; padding:12px; background:#fff; }
.portfolio-work-list div { display:flex; justify-content:space-between; gap:12px; border-top:1px dashed #d9e7fb; padding:8px 0 0; margin-top:8px; }
.portfolio-work-list span,.portfolio-report p { color:#60719a; margin:4px 0 0; }
.project-artifact-list { grid-column:1 / -1; display:grid; gap:10px; border:1px solid #bfe4d1; border-radius:8px; padding:12px; background:#f7fffb; }
.project-artifact-list > header,.project-artifact-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.project-artifact-list > header span,.project-artifact-head small,.project-artifact-list details small { color:#60719a; font-size:12px; }
.project-artifact-list > article { border:1px solid #d3eadf; border-radius:7px; padding:10px; background:#fff; }
.project-artifact-head > span { color:#167d55; font-weight:700; font-size:13px; }
.project-stage-list { display:flex; flex-wrap:wrap; gap:6px; margin:9px 0; }
.project-stage-list span { padding:3px 7px; border-radius:999px; font-size:12px; }
.project-stage-list .passed { background:#ddf9ea; color:#13784f; }.project-stage-list .pending { background:#f3f5f8; color:#68758a; }
.project-artifact-list details p { margin:8px 0; color:#506682; line-height:1.55; }
.project-review-queue { display:grid; gap:10px; }.project-review-item { border:1px solid #cfe0ff; border-radius:8px; padding:11px; background:#fbfdff; }.project-review-item header { display:flex; justify-content:space-between; gap:12px; }.project-review-item header small,.project-review-item details small { display:block; color:#60719a; font-size:12px; margin-top:3px; }.project-review-item header b { color:#167d55; white-space:nowrap; }.project-review-item details p { margin:8px 0; color:#506682; line-height:1.5; }
.peer-review-card { border:1px solid #b9d8ff; border-left:4px solid #1267e8; border-radius:8px; padding:14px; background:#f8fbff; }
.peer-review-card header,.classroom-mode-card header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.peer-review-card header span,.classroom-mode-card small { color:#60719a; display:block; margin-top:3px; }
.peer-rubric { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0; }
.peer-rubric label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:#36577f; }
.peer-review-card textarea,.classroom-mode-card textarea { width:100%; min-height:76px; margin:8px 0; }
.peer-feedback-history { margin-top:10px; color:#36577f; }
.classroom-mode-control { margin-top:14px; }
.classroom-mode-card { border:1px solid #cfe0ff; border-radius:8px; padding:14px; background:linear-gradient(135deg,#f8fbff,#f4fffb); }
.classroom-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.classroom-mode-grid label { display:flex; flex-direction:column; gap:5px; color:#36577f; font-size:13px; }
.classroom-mode-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:#36577f; font-size:13px; }
.classroom-mode-actions span { margin-left:auto; color:#60719a; }
.pill.active { background:#dff9ec; color:#087c50; }.pill.paused { background:#fff0cb; color:#9a6200; }
.classroom-focus-banner { margin:10px 0; padding:10px 12px; border:1px solid #9edcf4; border-left:4px solid #0891b2; border-radius:8px; background:#eefaff; color:#155076; }
.classroom-focus-banner small { display:block; margin-top:4px; color:#4f7190; }
.classroom-student-activity { display:grid; gap:3px; margin-top:8px; padding-top:8px; border-top:1px dashed #9edcf4; }
.classroom-student-activity b { color:#0b6794; }.classroom-control-note { color:#9a6200 !important; font-weight:700; }
.task-control-note { margin:8px 0; padding:8px 10px; border-left:3px solid #e2a43c; background:#fffaf0; color:#80570b; font-size:13px; line-height:1.5; }
@media (max-width:760px) { .portfolio-grid,.peer-rubric,.classroom-mode-grid { grid-template-columns:1fr; } .portfolio-work-list div { flex-direction:column; gap:3px; } .classroom-mode-actions span { margin-left:0; width:100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Decision-first guidance: surface the next useful learner and teacher action. */
.next-action-card { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:16px 0; border-color:#9cc8ff; border-left:5px solid var(--blue); background:linear-gradient(105deg,#f5faff,#fff 72%); }
.next-action-copy { min-width:0; }
.next-action-copy h2 { margin:4px 0 7px; font-size:20px; }
.next-action-copy p { margin:0; color:var(--ink); line-height:1.65; }
.next-action-copy small { display:block; margin-top:7px; color:var(--muted); font-size:12px; }
.next-action-card > button { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }

/* First-login orientation is brief and optional; the same loop remains visible on the home page. */
.learning-loop-guide {
  width:min(800px, calc(100vw - 32px));
  padding:0;
  border:1px solid #c9ddf7;
  border-radius:18px;
  color:var(--ink);
  box-shadow:0 30px 76px rgba(22,58,108,.28);
  background:#fff;
}
.learning-loop-guide::backdrop { background:rgba(20,46,86,.38); backdrop-filter:blur(5px); }
.learning-loop-guide > section { position:relative; padding:31px 34px 28px; border-left:5px solid #1d78e8; background:linear-gradient(132deg,#f4fbff 0%,#fff 57%,#f7f8ff 100%); }
.learning-loop-guide-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.learning-loop-guide-kicker { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border-radius:999px; background:#e7f4ff; color:#176bc5; font-size:12px; font-weight:800; letter-spacing:.06em; }
.learning-loop-guide h2 { max-width:660px; margin:10px 0 8px; color:#103e77; font-size:clamp(24px,3vw,31px); line-height:1.3; letter-spacing:.01em; }
.learning-loop-guide p { max-width:680px; margin:0; color:#52718f; line-height:1.7; }
.learning-loop-guide ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0; margin:23px 0 14px; list-style:none; }
.learning-loop-guide li { position:relative; display:grid; gap:8px; min-height:132px; padding:15px 14px; border:1px solid #d2e1f4; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 7px 18px rgba(39,89,149,.045); }
.learning-loop-guide li:not(:last-child)::after { content:""; position:absolute; z-index:1; width:15px; height:1px; right:-14px; top:29px; background:#8eb9ee; }
.learning-loop-guide li:not(:last-child)::before { content:""; position:absolute; z-index:1; right:-14px; top:25px; width:7px; height:7px; border-top:1px solid #8eb9ee; border-right:1px solid #8eb9ee; transform:rotate(45deg); }
.learning-loop-guide li b { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#1b84ee,#4b58dc); color:#fff; font-size:12px; box-shadow:0 4px 10px rgba(42,100,210,.2); }
.learning-loop-guide li strong { color:#163f76; font-size:15px; }
.learning-loop-guide li span { color:#5c7595; font-size:12px; line-height:1.55; }
.learning-loop-teacher-support { display:flex; align-items:flex-start; gap:10px; margin:0 0 20px; padding:11px 13px; border:1px solid #c8e5dc; border-radius:10px; background:#f3fffb; color:#4e7180; font-size:13px; line-height:1.55; }
.learning-loop-teacher-support strong { flex:0 0 auto; color:#167b63; }
.learning-loop-guide-actions { display:flex; flex-wrap:wrap; gap:10px; }
.learning-loop-guide-actions button { display:inline-flex; align-items:center; gap:7px; }
.learning-loop-guide-preference { display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#587596; font-size:13px; cursor:pointer; }
.learning-loop-guide-preference input { width:16px; height:16px; margin:0; accent-color:#2f6fed; }
.learning-loop-guide-close { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:0; border-radius:7px; background:transparent; color:#6683a5; font:inherit; font-size:13px; cursor:pointer; }
.learning-loop-guide-close span { display:grid; width:20px; height:20px; place-items:center; border:1px solid #c5dbf7; border-radius:50%; color:#47729e; font-size:18px; line-height:1; }
.learning-loop-guide-close:hover { background:#edf5ff; color:#153f78; }
.learning-loop-guide-close:hover span { border-color:#8cb9ef; background:#eaf4ff; color:#153f78; }

/* The first screen explains the agent's decision loop before exposing course tools. */
.agent-decision-center { display:grid; grid-template-columns:1fr; margin-bottom:14px; overflow:hidden; border:1px solid #9ee0dc; border-top:5px solid #04bfae; background:linear-gradient(112deg,#f4fffe 0%,#fff 61%,#eff8ff 100%); }
.agent-decision-intro h2 { margin:7px 0 10px; font-size:clamp(23px,2.4vw,32px); line-height:1.22; color:#103c6d; }
.agent-decision-intro > p { max-width:720px; margin:0; color:#416485; line-height:1.7; }
.agent-decision-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.agent-decision-actions button { display:inline-flex; align-items:center; gap:7px; }
.agent-decision-status { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:18px; border-radius:12px; background:rgba(255,255,255,.76); border:1px solid #c7e5ef; box-shadow:0 10px 22px rgba(36,107,161,.08); }
.agent-decision-status .streak { align-self:flex-start; }
#agentDecisionPrimary { display:grid; gap:3px; max-width:720px; margin-top:14px; padding-left:11px; border-left:3px solid #8ebeea; color:#527393; line-height:1.55; }
#agentDecisionPrimary strong { color:#123d70; font-size:15px; }
#agentDecisionPrimary span { font-size:13px; }
.agent-capabilities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.agent-capabilities article { position:relative; display:grid; gap:7px; min-height:132px; padding:15px 13px; border:1px solid #d1e0f2; border-radius:10px; background:#fff; box-shadow:0 5px 13px rgba(56,91,139,.05); }
.agent-capabilities article:not(:last-child)::after { content:"→"; position:absolute; z-index:1; right:-17px; top:50%; display:grid; width:24px; height:24px; place-items:center; transform:translateY(-50%); border-radius:50%; background:#edf4ff; color:#2f6fed; font-weight:800; }
.agent-capabilities article > span { color:#00a99a; font-size:12px; font-weight:800; letter-spacing:.08em; }
.agent-capabilities strong { color:#183d70; font-size:15px; }
.agent-capabilities small { color:#607b9e; line-height:1.48; }
.teaching-loop-demo { margin:0 0 16px; border-left:5px solid #6855dc; background:linear-gradient(110deg,#fbfaff,#fff); }
.teaching-loop-demo header h2 { margin:5px 0 12px; color:#273f75; font-size:22px; }
.teaching-loop-demo ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; padding:0; margin:0 0 16px; list-style:none; counter-reset:teaching-loop; }
.teaching-loop-demo li { display:flex; gap:9px; padding:12px; border:1px solid #dcd8fb; border-radius:9px; background:#fff; }
.teaching-loop-demo li > b { display:grid; place-items:center; flex:0 0 25px; height:25px; border-radius:50%; background:#6653d7; color:#fff; font-size:13px; }
.teaching-loop-demo li strong { color:#273f75; }
.teaching-loop-demo li p { margin:5px 0 0; color:#5b7092; font-size:13px; line-height:1.55; }
.agent-map-heading { margin:16px 0 10px; padding:0 3px; }
.agent-map-heading h2 { margin:0; color:#183d70; font-size:21px; }
.task-evidence-checklist { margin:12px 0; padding:11px; border:1px solid #c7d8ef; border-radius:8px; background:#f8fbff; }
.task-evidence-checklist > header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.task-evidence-checklist > header small { color:var(--muted); font-size:12px; }
.task-evidence-checklist > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.evidence-check { display:flex; align-items:center; gap:7px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.evidence-check b { display:grid; width:20px; height:20px; flex:0 0 auto; place-items:center; border-radius:50%; background:#edf1f7; color:#6b7280; }
.evidence-check.ready { border-color:#9bd9ba; background:#f5fff9; }
.evidence-check.ready b { background:var(--green); color:#fff; }
.evidence-check strong,.evidence-check small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evidence-check small { margin-top:2px; color:var(--muted); font-size:11px; }
.collaboration-status { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:10px; padding:9px 10px; border:1px solid #bad9f8; border-radius:7px; background:#f2f9ff; color:#355675; font-size:12px; }
.collaboration-status b { color:var(--blue); }
.collaboration-status i { color:#6b9bca; font-style:normal; }
.qa-followups { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.qa-followups > span { color:var(--muted); font-size:13px; }
.qa-followups button { border:1px solid #b8cff0; border-radius:999px; padding:6px 10px; background:#fff; color:var(--blue); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.qa-followups button:hover { border-color:var(--blue); background:var(--blue-soft); }
.teacher-decision-hub { margin:16px 0; border-color:#b7d8ca; background:linear-gradient(105deg,#f2fff8,#fff 72%); }
.teacher-decision-hub > header { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.teacher-decision-hub h2 { margin:4px 0 5px; font-size:20px; }
.teacher-decision-hub p { margin:0; color:var(--muted); font-size:13px; }
.teacher-today-workbench { margin:0 0 16px; border-color:#b7d8ca; background:linear-gradient(105deg,#f2fff8,#fff 72%); }.teacher-today-workbench > header { display:flex; align-items:start; justify-content:space-between; gap:16px; }.teacher-today-workbench h2 { margin:4px 0 5px; font-size:22px; }.teacher-today-workbench > header p { max-width:760px; margin:0; color:var(--muted); line-height:1.55; }
.teacher-today-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:15px 0; }.teacher-today-metrics article { display:grid; gap:3px; padding:10px 12px; border:1px solid #d6eadd; border-radius:8px; background:rgba(255,255,255,.82); }.teacher-today-metrics span,.teacher-today-metrics small { color:#617795; font-size:12px; }.teacher-today-metrics strong { color:#174e88; font-size:21px; }
.teacher-today-queue { padding-top:12px; border-top:1px dashed #b9d9c8; }.teacher-today-queue > header { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }.teacher-today-queue header small { color:var(--muted); font-size:12px; }.teacher-today-queue > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; }.teacher-today-action { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px; border:1px solid #d5e3f1; border-radius:8px; background:#fff; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }.teacher-today-action:hover { border-color:var(--blue); background:#f7fbff; }.teacher-today-action > span { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#e9f4ff; color:#1767c4; }.teacher-today-action strong,.teacher-today-action small { display:block; }.teacher-today-action small { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.4; }.teacher-today-action > i { color:var(--blue); font-style:normal; font-size:18px; }
.teacher-today-followup { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px 12px; margin-top:12px; padding:9px 11px; border-radius:7px; background:#f7fbff; color:#456685; font-size:12px; }.teacher-today-followup strong { color:#235483; }.teacher-today-followup.empty { background:#fbfcfe; color:#6f8096; }
.overview-main-action { flex:0 0 auto; }.teacher-decision-details { margin-top:12px; }.teacher-decision-details > summary { color:#27609a; font-size:13px; font-weight:700; cursor:pointer; }
.teacher-decision-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-top:13px; }
.teacher-decision-action { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.teacher-decision-action:hover { border-color:var(--green); box-shadow:0 7px 18px rgba(22,125,85,.1); }
.teacher-decision-action > span { display:grid; width:30px; height:30px; place-items:center; border-radius:7px; background:var(--green-soft); color:var(--green); }
.teacher-decision-action strong,.teacher-decision-action small { display:block; }
.teacher-decision-action small { margin-top:3px; color:var(--muted); line-height:1.4; }
.teacher-decision-action > i { color:var(--green); font-style:normal; font-size:18px; }
.teacher-action-tracking { margin-top:14px; padding-top:12px; border-top:1px dashed #b9d9c8; }
.teacher-action-tracking > header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.teacher-action-tracking header small,.teacher-action-tracking article span,.teacher-action-tracking.empty span { color:var(--muted); font-size:12px; line-height:1.45; }
.teacher-action-tracking > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; margin-top:8px; }
.teacher-action-tracking article { display:grid; gap:4px; padding:9px; border:1px solid #d6eadd; border-radius:7px; background:#fff; }
.teacher-action-tracking.empty { display:grid; gap:4px; }
.teaching-loop-overview { margin:16px 0; }.teaching-loop-overview > header { display:flex; align-items:start; justify-content:space-between; gap:12px; }.teaching-loop-overview h2 { margin:4px 0 5px; font-size:19px; }.teaching-loop-overview p { margin:0; color:var(--muted); font-size:13px; }
.teaching-loop-steps { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:8px; margin-top:13px; }.teaching-loop-step { display:grid; grid-template-columns:27px minmax(0,1fr); align-items:start; gap:8px; padding:10px; border:1px solid #c9dcf4; border-radius:8px; background:#fff; color:var(--ink); text-align:left; font:inherit; cursor:pointer; }.teaching-loop-step b { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#e5f1ff; color:#1767c4; }.teaching-loop-step strong,.teaching-loop-step span,.teaching-loop-step em { display:block; }.teaching-loop-step span { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.4; }.teaching-loop-step em { grid-column:2; color:#167b58; font-size:12px; font-style:normal; font-weight:700; }.teaching-loop-step.pending { border-style:dashed; background:#fbfcfe; }.teaching-loop-step.pending b { background:#edf1f7; color:#74849b; }.teaching-loop-step.pending em { color:#77869a; }.teaching-loop-step:hover { border-color:var(--blue); background:#f7fbff; }
.teacher-empty-state { display:grid; gap:5px; padding:16px; border:1px dashed #bfd1e9; border-radius:8px; background:#fafcff; color:#536b87; }.teacher-empty-state strong { color:#294b73; }.teacher-empty-state p { margin:0; font-size:13px; line-height:1.55; }
@media (max-width:760px) { .next-action-card { display:grid; gap:13px; } .next-action-card > button { justify-content:center; width:100%; } .agent-decision-center { grid-template-columns:1fr; gap:15px; } .agent-capabilities, .teaching-loop-demo ol, .teaching-loop-steps { grid-template-columns:1fr; } .agent-capabilities article { min-height:0; } .agent-capabilities article::after { display:none; } .learning-loop-guide > section { padding:25px 20px; border-left-width:4px; } .learning-loop-guide ol { grid-template-columns:1fr; margin:18px 0 12px; } .learning-loop-guide li { min-height:0; grid-template-columns:25px 1fr; align-items:center; } .learning-loop-guide li span { grid-column:2; } .learning-loop-guide li::after,.learning-loop-guide li::before { display:none; } .learning-loop-teacher-support { display:grid; gap:4px; margin-bottom:16px; } .teacher-decision-hub > header,.teaching-loop-overview > header { display:grid; } .overview-main-action { width:100%; justify-content:center; } }
@media (min-width:761px) and (max-width:1050px) { .agent-capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); } .agent-capabilities article:nth-child(2)::after { display:none; } .learning-loop-guide ol { grid-template-columns:repeat(2,minmax(0,1fr)); } .learning-loop-guide li:nth-child(2)::after,.learning-loop-guide li:nth-child(2)::before { display:none; } }
@media (max-width:900px) { .task-evidence-checklist > div { grid-template-columns:repeat(2,minmax(0,1fr)); } }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(47, 111, 237, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 159, 122, 0.05) 1px, transparent 1px),
    var(--bg);
  background-size: 28px 28px;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
}

body.auth-locked {
  display: block;
}

body.auth-locked .sidebar,
body.auth-locked main {
  display: none;
}

button, textarea {
  font: inherit;
}

/* A shared control language prevents browser-default grey buttons from leaking into either workspace. */
button {
  appearance: none;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #b9d0ec;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  color: #235d9d;
  box-shadow: 0 2px 5px rgba(39, 87, 145, .08);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
}

button:not(:disabled):hover {
  border-color: #5795df;
  background: #f0f7ff;
  color: #235d9d;
  box-shadow: 0 7px 16px rgba(35, 93, 157, .14);
  transform: translateY(-1px);
}

/* Selected controls keep a saturated background on hover so white labels stay readable. */
button[aria-pressed="true"]:not(:disabled):hover,
button.active:not(:disabled):hover {
  border-color: #1459bf;
  background: #1d67d5;
  color: #fff;
  box-shadow: 0 8px 18px rgba(29, 103, 213, .24);
  transform: translateY(-1px);
}

button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #167dde 0%, #2877e7 48%, #0db493 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 112, 205, .24);
}

button.primary:not(:disabled):hover {
  border-color: transparent;
  background: linear-gradient(135deg, #0e70d0 0%, #2169d6 48%, #0aa887 100%);
  box-shadow: 0 11px 23px rgba(22, 112, 205, .3);
}

button.secondary {
  border-color: #91c5e6;
  background: linear-gradient(180deg, #fff, #f0fbff);
  color: #137196;
}

button.secondary:not(:disabled):hover {
  border-color: #29a2bd;
  background: #e9faff;
  box-shadow: 0 7px 16px rgba(19, 113, 150, .13);
}

button:disabled {
  cursor: not-allowed;
  opacity: 1;
  border-color: #d1ddea;
  background: #eef3f9;
  color: #71839a;
  box-shadow: none;
}

button.primary:disabled,
.actions .primary:disabled,
.learning-companion-fab:disabled {
  border-color: #cbd9ea;
  background: #eaf1fa;
  color: #71839a;
  box-shadow: none;
}

input {
  font: inherit;
}

button,
input,
select,
textarea,
details,
.panel {
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(47, 111, 237, .28);
  outline-offset: 2px;
}

button:not(:disabled):active {
  transform: translateY(1px);
}

button[aria-busy="true"] {
  cursor: wait;
  opacity: .8;
}

.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;
}

.toast-region {
  position: fixed;
  z-index: 1000;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}

.app-toast {
  padding: 12px 14px;
  border: 1px solid #b9d8ff;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(20, 33, 61, .16);
  color: var(--ink);
  font-size: 14px;
  animation: toast-in .24s var(--ease-out) both;
}

.app-toast.success { border-left-color: var(--green); }
.app-toast.warning { border-left-color: var(--gold); }

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

.login-screen {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  padding: 0;
  background: #f7faff;
}

.login-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(420px, 42%) minmax(0, 58%);
}

.login-visual {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #e7f1ff;
}

.login-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f9fbff 0%, rgba(249,251,255,.96) 6%, transparent 24%, transparent 72%, rgba(25,74,155,.08));
  pointer-events: none;
}

.login-panel {
  position: relative;
  display: grid;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(32px, 5vw, 88px);
  background: radial-gradient(circle at 12% 10%, #e8f2ff, transparent 35%), #f9fbff;
}

.login-card {
  width: min(460px, 100%);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.login-layout .login-card {
  width: 100%;
  max-width: 420px;
  align-self: center;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid #dce7f5;
  border-radius: 24px;
  box-shadow: 0 24px 65px rgba(35,67,119,.12);
  margin: auto;
}

.login-visual-copy {
  position: absolute;
  left: clamp(28px, 5vw, 78px);
  bottom: clamp(28px, 6vh, 72px);
  z-index: 1;
  display: grid;
  gap: 8px;
  max-width: min(520px, 70%);
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 16px;
  color: #18366d;
  background: rgba(255,255,255,.68);
  box-shadow: 0 16px 40px rgba(44,81,143,.12);
  backdrop-filter: blur(12px);
}

.login-visual-copy span { color: #2f6fed; font-size: 13px; font-weight: 700; }
.login-visual-copy strong { font-size: clamp(20px, 2vw, 30px); }
.login-visual-copy small { color: #5e7191; line-height: 1.6; }

.login-welcome {
  margin: 28px 0 8px;
  font-size: 26px;
  color: #172d55;
  letter-spacing: 1px;
}

.login-welcome-note {
  margin: 0 0 26px;
  color: #728098;
  font-size: 14px;
  line-height: 1.7;
}

.login-layout .login-input {
  min-height: 46px;
  border-radius: 10px;
}

.login-layout .login-actions button {
  min-height: 46px;
  border-radius: 10px;
}

.login-layout #loginCredentialHint {
  padding: 12px 14px;
  margin-bottom: 0;
  background: #f6f8fc;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr; }
  .login-visual { grid-row: 1; min-height: 260px; height: 34svh; }
  .login-visual img {
    object-position: right center;
    transform: scale(2);
    transform-origin: right center;
  }
  .login-visual::after { background: linear-gradient(0deg, #f9fbff, transparent 32%); }
  .login-visual-copy { display: none; }
  .login-panel { grid-row: 2; min-height: 66svh; padding: 30px 22px 42px; }
}

@media (max-width: 480px) {
  .login-visual { min-height: 210px; height: 28svh; }
  .login-panel { min-height: 72svh; padding: 22px 16px 32px; }
  .login-layout .login-card { padding: 24px; border-radius: 18px; }
}

@media (max-height: 700px) {
  .login-panel { align-items: flex-start; }
  .login-layout .login-card { margin: 12px auto; }
  .login-panel-close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-panel { scroll-behavior: auto; }
}

/* Full-cover welcome page: fade only the image edges into the page. */
.login-screen { background: #dcecff; }
.login-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 24px;
}
.welcome-art {
  width: min(100%, calc((100svh - 110px) * 1672 / 941));
  flex: 0 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.welcome-art img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 89%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 89%, transparent);
}
.welcome-enter {
  flex: 0 0 auto;
  min-height: 52px;
  min-width: 224px;
  padding: 14px 32px;
  border: 1px solid #244b8a;
  border-radius: 8px;
  background: #244b8a;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px #244b8a1a;
  cursor: pointer;
}
.welcome-enter span { margin-left: 14px; }
.welcome-enter:hover { background: #193b70; border-color: #193b70; }
.welcome-enter:focus-visible { outline: 3px solid #719ddb; outline-offset: 4px; }
#loginDialog {
  width: min(420px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #e1e9f6;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 90px #142c5540;
  overflow-y: auto;
}
#loginDialog::backdrop { background: #172e5759; backdrop-filter: blur(8px); }
#loginDialog .login-card {
  position: relative;
  width: 100%;
  padding: 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.login-dialog-close {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  line-height: 1;
  box-shadow: none;
  border: 0;
  border-radius: 50%;
  background: #eef3fa;
  color: #526680;
  font-size: 24px;
  cursor: pointer;
}
.login-dialog-close:not(:disabled):hover {
  transform: none;
  box-shadow: none;
  background: #e2ebf7;
}
#loginDialog .login-input { min-height: 44px; }
#loginDialog #loginCredentialHint { font-size: 12px; line-height: 1.8; }
@media (max-width: 600px) and (orientation: portrait) {
  .login-layout { justify-content: center; padding-bottom: 12svh; gap: 28px; }
  #loginDialog .login-card { padding: 28px 22px; }
}

.login-brand {
  margin-bottom: 18px;
  color: var(--ink);
}

.login-brand span {
  color: var(--muted);
}

.login-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.login-tabs button,
.login-actions button,
.logout-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.login-tabs button {
  padding: 10px 12px;
}

.login-tabs button.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 700;
}

.login-input {
  width: 100%;
  margin: 6px 0 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.login-actions {
  display: flex;
  gap: 10px;
  margin: 8px 0 12px;
}

.login-actions button {
  flex: 1;
  padding: 11px 14px;
}

.login-actions .primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.auth-message {
  min-height: 22px;
  margin-bottom: 8px;
  color: var(--red);
  font-size: 14px;
}

.logout-button {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  color: var(--muted);
}

.sidebar {
  min-height: 100vh;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(20, 33, 61, 0.96), rgba(14, 24, 44, 0.98)),
    #101827;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

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

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #16c79a, #2f6fed 55%, #f5a524);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(47, 111, 237, 0.35);
}

.brand span {
  display: block;
  margin-top: 4px;
  color: #b6c2d4;
  font-size: 13px;
  line-height: 1.6;
}

nav {
  display: grid;
  gap: 8px;
}

.nav-btn {
  border: 1px solid transparent;
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  color: #d8e1f0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.nav-btn.active {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.28), rgba(15, 159, 122, 0.2));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.nav-btn:not(:disabled):hover { border-color: rgba(92, 183, 255, 0.28); background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; transform: none; }
.nav-btn.active:not(:disabled):hover { border-color: rgba(92, 183, 255, 0.4); background: linear-gradient(135deg, rgba(47, 111, 237, 0.34), rgba(15, 159, 122, 0.25)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

.teacher-subnav,
.student-subnav {
  gap: 4px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.teacher-subnav p,
.student-subnav p {
  margin: 0 0 5px;
  padding: 0 10px;
  color: #93a7c5;
  font-size: 12px;
  font-weight: 700;
}

.teacher-subnav-btn,
.student-subnav-btn {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #b9c8dd;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
}

.teacher-subnav-btn svg,
.student-subnav-btn svg { width: 16px; height: 16px; }
.teacher-subnav-btn:not(:disabled):hover,
.student-subnav-btn:not(:disabled):hover { border-color: rgba(92, 183, 255, 0.24); background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; transform: none; }
.teacher-subnav-btn.active,
.student-subnav-btn.active { border-color: rgba(92, 183, 255, 0.38); background: rgba(47, 111, 237, 0.25); color: #fff; }
.teacher-subnav-btn.active:not(:disabled):hover,
.student-subnav-btn.active:not(:disabled):hover { border-color: rgba(92, 183, 255, 0.48); background: rgba(47, 111, 237, 0.31); color: #fff; box-shadow: none; transform: none; }

#teacherView > .teacher-page-hidden { display: none; }
#studentView.student-page-hidden,
#studentView > .student-page-hidden { display: none; }

.nav-btn svg, button svg {
  width: 18px;
  height: 18px;
}

.sidebar-session {
  margin-top: auto;
  padding: 14px;
  border: 1px solid #2e3b55;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-session-label { display:block; margin-bottom:9px; color:#93a7c5; font-size:12px; font-weight:700; }
.sidebar-session > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sidebar-session strong { color:#fff; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-session > div span { color:#7cb5ff; font-size:13px; font-weight:800; white-space:nowrap; }
.sidebar-session > small { display:block; margin-top:5px; color:#aabbd3; font-size:12px; }
.sidebar-session .logout-button { margin-top:12px; border-color:#314563; background:rgba(255,255,255,.05); color:#d8e5f6; }
.sidebar-session .logout-button:hover { border-color:#568fcb; background:rgba(47,111,237,.2); color:#fff; }

main {
  padding: 28px;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}

/* A concise secondary navigation is shared by every teacher workspace. */
.teacher-page-tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  min-height: 54px;
  margin: 0 0 16px;
  padding: 8px 10px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.97);
  box-shadow: 0 4px 12px rgba(24, 82, 149, 0.06);
  backdrop-filter: blur(10px);
  scrollbar-width: thin;
}

.teacher-page-tabs button {
  flex: 0 0 104px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid #c9daf1;
  border-radius: 6px;
  background: #ffffff;
  color: #45668e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(24, 82, 149, 0.04);
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.teacher-page-tabs button:hover {
  border-color: #b9d5fb;
  background: #eaf3ff;
  color: #1267d6;
}

.teacher-page-tabs button.active {
  border-color: #1677e8;
  background: #1677e8;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(22, 119, 232, 0.24);
}

.teacher-page-tabs button:focus-visible {
  outline: 3px solid rgba(22, 119, 232, 0.24);
  outline-offset: 2px;
}

/* Desktop uses a real application scroll area. Without a bounded main area,
   `position: sticky` resolves against an ancestor that never scrolls. */
@media (min-width: 1001px) {
  body {
    height: 100vh;
    overflow: hidden;
  }

  .sidebar {
    height: 100vh;
    overflow-y: auto;
  }

  main {
    height: 100vh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.topbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 14px;
  min-height: 86px;
  padding: 13px 20px;
  border: 1px solid #cbdcf1;
  border-radius: 12px;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.92)),
    #fff;
  box-shadow: 0 10px 28px rgba(30, 52, 95, 0.09);
}

.topbar-brand { min-width:0; padding-left:13px; border-left:4px solid #1378ea; }
.topbar h1 { margin:0; color:#103d73; font-size:29px; line-height:1.12; letter-spacing:.02em; }
.workspace-subtitle { margin:6px 0 0; color:#547393; font-size:15px; line-height:1.35; }
.topbar-context { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.topbar-context span { padding:7px 10px; border:1px solid #cfe0f7; border-radius:999px; background:#f9fcff; color:#27649f; font-size:13px; font-weight:700; white-space:nowrap; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--pink);
  font-weight: 700;
}

h1 {
  max-width: 880px;
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
}

h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.learner-card, .panel, .metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.learner-card {
  display:grid;
  grid-template-columns: minmax(58px, auto) auto;
  grid-template-rows: auto auto;
  column-gap:12px;
  min-width: 174px;
  padding: 10px 12px;
  border-color: #b9cdf7;
  background:
    linear-gradient(180deg, #ffffff, #f3f7ff);
}

.learner-card span, .learner-card small {
  color: var(--muted);
}
.learner-card span { align-self:end; font-size:14px; }
.learner-card small { align-self:start; font-size:12px; }

.learner-card strong {
  grid-row:1 / 3;
  grid-column:2;
  align-self:center;
  margin: 0;
  font-size: 23px;
  color: var(--blue);
}

.learner-card .logout-button { grid-column:1 / -1; margin-top:8px; min-height:30px; padding:4px 9px; font-size:13px; }

.view {
  display: none;
}

.active-view {
  display: block;
}

.page-enter {
  animation: page-enter .28s var(--ease-out) both;
}

.page-enter > .panel,
.page-enter > .workspace,
.page-enter > .practice-workspace-shell,
.page-enter > .teacher-grid,
.page-enter > .teacher-charts {
  animation: page-item-enter .32s var(--ease-out) both;
}

@keyframes page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes page-item-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel {
  padding: 18px;
  border-color: #d3deee;
}

.task-panel,
.feedback-panel,
.dataset-panel,
.qa-panel {
  background:
    linear-gradient(180deg, #ffffff, #f9fbff);
}

.hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-color: #bce7d9;
  background:
    linear-gradient(135deg, #ffffff, #effbf7 58%, #fff6dd);
}

.hero-panel p, .scene, .prompt {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.streak {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
  border: 1px solid #ffd98a;
  box-shadow: 0 8px 20px rgba(196, 122, 16, 0.14);
}

.skill-map {
  display: block;
  margin-bottom: 16px;
}

.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend small { margin-left: auto; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-dot.mastered { background: var(--green); }.legend-dot.active { background: var(--blue); }.legend-dot.locked { background: #aeb9ca; }
.map-route { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 16px; }

.node-card {
  position: relative;
  min-height: 210px;
  padding: 16px;
  border: 1px solid #ccd9ed;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.95));
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.node-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--green), var(--blue), #f5a524);
}

.node-card:hover {
  transform: translateY(-3px);
  border-color: #9bb9ee;
  box-shadow: 0 24px 48px rgba(30, 52, 95, 0.18);
}

.node-card.locked {
  opacity: 1;
  background: #f6f8fc;
  box-shadow: 0 10px 25px rgba(30, 52, 95, 0.08);
}

.node-card.mastered::before { background: linear-gradient(90deg, var(--green), #12b981); }
.node-card.active::before { background: linear-gradient(90deg, var(--blue), #5d8cff); }
.node-card.locked::after { content: ""; position: absolute; height: 2px; width: 20px; right: -18px; top: 48%; background: #c6d3e8; }

.qa-dialogue { display: grid; gap: 8px; margin: 12px 0; }
.qa-turn { max-width: 92%; padding: 9px 11px; border-radius: 7px; display: grid; gap: 4px; line-height: 1.55; }
.qa-turn b { font-size: 12px; }.qa-turn.student { justify-self: end; background: #e9f2ff; border: 1px solid #c7dafa; }.qa-turn.assistant { background: #f4f8ff; border: 1px solid #dce7f8; }
.qa-thinking { color: var(--muted); padding: 8px 0; }

.node-card.locked::before {
  background: #d8e0ec;
}

.quest-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 12px;
  gap: 8px;
}

.quest-ribbon span,
.quest-ribbon strong {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
}

.quest-ribbon span {
  background: #eef7ff;
  color: var(--cyan);
  font-weight: 800;
}

.quest-ribbon strong {
  background: var(--green-soft);
  color: var(--green);
}

.node-card.locked .quest-ribbon strong {
  background: #edf1f7;
  color: #8491a6;
}

.node-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.node-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 10px 20px rgba(47, 111, 237, 0.22);
}

.progress {
  height: 10px;
  margin: 12px 0;
  border-radius: 999px;
  background: #e9edf4;
  overflow: hidden;
  border: 1px solid #dde5f0;
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16c79a, #2f6fed, #f5a524);
}

.mastery-line {
  font-weight: 700;
}

.task-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 11px;
  margin: 4px 4px 0 0;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(30, 52, 95, 0.08);
}

.task-chip.done {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

.task-chip.locked-task,
.task-chip:disabled {
  cursor: not-allowed;
  color: #97a3b6;
  background: #f3f6fb;
  border-color: #e4e9f2;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 16px;
  align-items: start;
}

/* A single teacher surface should fill the available page width. */
.workspace > :only-child {
  grid-column: 1 / -1;
}

.teacher-overview-insights {
  grid-template-columns: 1fr;
}

.teacher-overview-insights > .panel {
  grid-column: 1 / -1;
}

.teacher-analytics-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-intervention-workspace {
  grid-template-columns: minmax(320px, 0.88fr) minmax(420px, 1.12fr);
}

.teacher-classroom-support {
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
}

.teacher-intervention-workspace .student-list,
.teacher-classroom-support .student-list {
  max-height: 390px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

/* Keep the coding workspace compact while long diagnostic evidence stays easy to inspect. */
.workspace > .task-panel,
.workspace > .feedback-panel {
  min-width: 0;
}

.workspace > .feedback-panel {
  position: sticky;
  top: 18px;
  height: var(--task-panel-height, auto);
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-gutter: stable;
}

.workspace > .feedback-panel::-webkit-scrollbar {
  width: 8px;
}

.workspace > .feedback-panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #b8cbe5;
  background-clip: padding-box;
}

.workspace > .feedback-panel::-webkit-scrollbar-thumb:hover {
  background: #89a9d0;
  background-clip: padding-box;
}

.practice-workspace-shell {
  display: grid;
  gap: 16px;
}

.practice-workspace-shell > .assessment-flow-slot {
  margin: 0;
}

.workflow-panel {
  margin: 0;
}

.compact-workflow,
.assistant-drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.compact-workflow > summary,
.assistant-drawer > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--ink);
  font-weight: 800;
  list-style: none;
}

.compact-workflow > summary::-webkit-details-marker,
.assistant-drawer > summary::-webkit-details-marker { display: none; }

.compact-workflow > summary::before,
.assistant-drawer > summary::before {
  content: "+";
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #e8f2ff;
  color: var(--blue);
  font-size: 16px;
  line-height: 1;
}

.compact-workflow[open] > summary::before,
.assistant-drawer[open] > summary::before { content: "-"; }

.compact-workflow > summary small,
.assistant-drawer > summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.compact-workflow .workflow-list { padding: 0 14px 14px; }

.assistant-drawer { margin-top: 14px; border-left: 4px solid #8b5cf6; background: #fbfaff; }
.assistant-drawer .screenshot-diagnosis-head,
.assistant-drawer .screenshot-diagnosis-controls,
.assistant-drawer .screenshot-paste-zone,
.assistant-drawer .screenshot-preview,
.assistant-drawer .screenshot-diagnosis-result { margin-left: 12px; margin-right: 12px; }
.assistant-drawer .screenshot-diagnosis-head { margin-top: 2px; }
.assistant-drawer .screenshot-diagnosis-result { margin-bottom: 12px; }

.node-teacher-tasks {
  margin-top: 14px;
  padding: 10px;
  border-left: 3px solid var(--blue);
  background: #f0f8ff;
}

.assessment-flow-slot:empty {
  display: none;
}

.assessment-flow-slot {
  margin: 16px 0;
}

.assessment-flow-slot .assignment-panel {
  margin-bottom: 0;
}

.assessment-score,
.assessment-feedback,
.assessment-rubric {
  margin: 10px 0;
  padding: 9px 11px;
  border-radius: 7px;
  background: #f5f9ff;
  border: 1px solid var(--line);
}

.assessment-score strong,
.assessment-score span,
.assessment-score small,
.assessment-feedback strong,
.assessment-feedback span {
  display: block;
}

.assessment-score span,
.assessment-score small,
.assessment-feedback span,
.assessment-rubric span,
.assessment-locked {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.assessment-rubric summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
}

.submitted-answer,
.review-answer {
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfdff;
}

.submitted-answer summary,
.review-answer summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
}

.submitted-answer pre,
.review-answer pre {
  margin: 9px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--ink);
}

.assessment-review-panel {
  margin: 16px 0;
}

.assessment-review-queue {
  display: grid;
  gap: 10px;
}

.assessment-review-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: #fbfdff;
}

.assessment-review-item header,
.review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.assessment-review-item p {
  margin: 8px 0;
  color: var(--muted);
}

.review-actions button {
  border: 1px solid var(--blue);
  border-radius: 6px;
  padding: 6px 9px;
  background: #fff;
  color: var(--blue);
  cursor: pointer;
}

.grading-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.grading-summary strong { color: var(--ink); }
.grading-summary span { padding: 3px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; }
.grading-summary small { margin-left: auto; }
.grading-list { display: grid; gap: 10px; margin-top: 10px; }

.grading-group { margin-top: 16px; }
.grading-group > header { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 7px; border-bottom: 1px solid var(--line); color: var(--ink); }
.grading-group > header span { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: #eff4fb; color: var(--muted); text-align: center; font-size: 12px; font-weight: 700; }
.grading-empty { margin: 8px 0 0; padding: 10px 12px; color: var(--muted); background: #fafcff; border: 1px dashed var(--line); font-size: 13px; }

.grading-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 10px 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #1788f5;
  background: #fff;
}

.grading-sheet.returned { border-left-color: #ef9b28; background: #fffdf8; }
.grading-sheet.completed { border-left-color: #13a875; background: #fbfffd; }

.grading-sheet-head,
.grading-meta,
.grading-rubric,
.grading-answer,
.grading-feedback-label,
.grading-score-input,
.grading-actions { grid-column: 1 / -1; }

.grading-sheet-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.grading-sheet-head strong, .grading-sheet-head span { display: block; }
.grading-sheet-head span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.grading-score { min-width: 90px; text-align: right; }
.grading-score small, .grading-score b { display: block; }
.grading-score small { color: var(--muted); }
.grading-score b { color: var(--blue); font-size: 23px; line-height: 1.1; }

.grading-meta, .grading-rubric, .grading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grading-meta { color: var(--muted); font-size: 13px; }
.grading-type, .grading-rubric span { padding: 4px 8px; border-radius: 5px; background: #f3f6fb; color: #52647f; font-size: 12px; }
.grading-type.diagnostic { background: #e8f2ff; color: #176fc7; }
.grading-type.post { background: #e8fbf2; color: #087958; }
.grading-status { padding: 4px 8px; border-radius: 5px; background: #e8f2ff; color: #176fc7; font-size: 12px; }
.grading-status.returned { background: #fff3dd; color: #9a6200; }
.grading-status.completed { background: #e7faef; color: #087958; }
.grading-rubric { padding-top: 2px; }
.grading-rubric span { border: 1px solid var(--line); background: #fff; }

.grading-answer { margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #f9fbfe; }
.grading-answer summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.grading-answer pre { max-height: 280px; margin: 10px 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.grading-feedback-label { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.grading-feedback { min-height: 68px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; }
.grading-saved-feedback { grid-column: 1 / -1; padding: 9px 11px; border-left: 3px solid #13a875; background: #effbf5; }
.grading-saved-feedback strong, .grading-saved-feedback span { display: block; }
.grading-saved-feedback span { margin-top: 3px; color: var(--muted); white-space: pre-wrap; }
.grading-score-input { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.grading-manual-score { width: 92px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.grading-actions { justify-content: flex-end; padding-top: 2px; }
.grading-action { border: 1px solid var(--blue); border-radius: 6px; padding: 8px 11px; background: #fff; color: var(--blue); font: inherit; cursor: pointer; }
.grading-action.primary { background: var(--blue); color: #fff; }

/* The review queue is navigated as module -> student -> individual submission. */
.grading-module,
.grading-student,
.grading-marking {
  border: 1px solid var(--line);
  background: #fff;
}

.grading-module { margin-top: 10px; border-left: 4px solid #1788f5; }
.grading-module > summary,
.grading-student > summary,
.grading-marking > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.grading-module > summary::-webkit-details-marker,
.grading-student > summary::-webkit-details-marker,
.grading-marking > summary::-webkit-details-marker { display: none; }
.grading-module > summary { padding: 12px 14px; color: var(--ink); font-weight: 800; }
.grading-module > summary small,
.grading-student > summary small { color: var(--muted); font-weight: 500; font-size: 12px; }
.grading-module-body { padding: 0 12px 12px; display: grid; gap: 8px; }

.grading-student { background: #fbfdff; border-radius: 6px; }
.grading-student > summary { padding: 10px 12px; color: var(--ink); font-weight: 700; }
.grading-student-body { padding: 0 10px 10px; display: grid; gap: 8px; }
.grading-record { margin: 0; box-shadow: none; }

.grading-marking { grid-column: 1 / -1; border-radius: 6px; background: #f8fbff; }
.grading-marking > summary { padding: 9px 11px; color: var(--blue); font-weight: 700; }
.grading-marking-body { padding: 0 11px 11px; display: grid; gap: 10px; }

@media (max-width: 640px) {
  .grading-sheet { grid-template-columns: 1fr; }
  .grading-summary small { width: 100%; margin-left: 0; }
  .grading-actions { justify-content: stretch; }
  .grading-action { flex: 1; }
}

.node-teacher-tasks header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
}

.node-teacher-tasks header span,
.node-teacher-tasks small {
  color: var(--muted);
  font-size: 12px;
}

.node-assignment { margin-top: 8px; }
.node-assignment p { margin: 5px 0; line-height: 1.55; }
.node-assignment textarea { min-height: 86px; margin: 6px 0; }

.workflow-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.workflow-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(30, 52, 95, 0.06);
}

.workflow-step > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--pink));
  font-weight: 800;
}

.workflow-step strong,
.workflow-step p {
  display: block;
  margin: 0;
}

.workflow-step p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.decision-trace,
.latest-trace-card {
  border-color: #bcd3fa;
  background: linear-gradient(180deg, #fbfdff, #f4f8ff);
}

.decision-trace > small {
  display: block;
  margin: 5px 0 12px;
  color: var(--muted);
}

.decision-trace-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.decision-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid #d9e4f5;
  border-radius: 7px;
  background: #fff;
}

.decision-step-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.decision-step header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.decision-step header strong { font-size: 14px; }
.decision-step header em {
  padding: 2px 7px;
  border-radius: 999px;
  background: #e6f6ef;
  color: #087f5b;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.decision-step p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.decision-step.warning .decision-step-number { background: #fff0c9; color: #a96500; }
.decision-step.warning header em { background: #fff4d7; color: #a96500; }
.decision-step.failed .decision-step-number { background: #ffe4e1; color: var(--red); }
.decision-step.failed header em { background: #ffe4e1; color: var(--red); }
.decision-step.fallback .decision-step-number { background: #eee8ff; color: #6f4cc7; }
.decision-step.fallback header em { background: #eee8ff; color: #6f4cc7; }
.ai-source-note { display:block; margin-top:8px; color:#61718b; font-size:12px; line-height:1.45; }
.decision-evidence-card { border-left:4px solid var(--blue); background:#f8fbff; }
.decision-evidence-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:7px; margin:9px 0; }
.decision-evidence-list > div { padding:8px; border:1px solid #d9e7fb; border-radius:6px; background:#fff; }
.decision-evidence-list span,.decision-evidence-card small { display:block; color:var(--muted); font-size:12px; }.decision-evidence-list b { display:block; margin-top:3px; font-size:13px; }
.decision-evidence-card p { margin:9px 0 6px; line-height:1.55; }

.latest-workflow-trace { margin-top: 14px; }
.latest-trace-card { padding: 12px; border: 1px solid #d3deee; border-radius: 8px; }
.latest-trace-card .decision-trace-list { max-height: 360px; overflow: auto; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--muted);
  font-weight: 700;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: var(--blue);
}

textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  margin: 14px 0;
  line-height: 1.7;
  background: #fbfdff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

textarea:focus,
.login-input:focus {
  outline: 0;
  border-color: #80a7f7;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

.field-label {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

.stage-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}

.stage-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(30, 52, 95, 0.05);
}

.stage-card strong,
.stage-card span {
  display: block;
}

.stage-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.code-editor {
  min-height: 260px;
  background: #101827;
  color: #d7f7ff;
  border-color: #2a3d68;
  font-family: Consolas, "Cascadia Code", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.output-editor {
  min-height: 110px;
  font-family: Consolas, "Cascadia Code", "Courier New", monospace;
}

.run-images {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.run-images img {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.screenshot-diagnosis {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #8b5cf6;
  border-radius: 8px;
  background: #fbfaff;
}

.screenshot-diagnosis-head,
.screenshot-diagnosis-controls,
.screenshot-preview {
  display: flex;
  align-items: center;
  gap: 10px;
}

.screenshot-diagnosis-head { justify-content: space-between; }
.screenshot-diagnosis-head strong,
.screenshot-diagnosis-head small { display: block; }
.screenshot-diagnosis-head small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.screenshot-diagnosis-controls { flex-wrap: wrap; margin-top: 10px; }
.screenshot-diagnosis-controls select,
.screenshot-diagnosis-controls input {
  max-width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.screenshot-diagnosis-controls select { padding: 0 8px; }
.screenshot-diagnosis-controls input { padding: 5px 7px; }
.screenshot-diagnosis-controls button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #7c3aed;
  border-radius: 6px;
  background: #fff;
  color: #6d28d9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.screenshot-paste-zone { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 8px; align-items:center; margin-top:10px; padding:9px 10px; border:1px dashed #a98bf3; border-radius:7px; background:#fff; color:#5b21b6; cursor:pointer; }
.screenshot-paste-zone > svg { grid-row:1 / span 2; width:18px; height:18px; }
.screenshot-paste-zone span { font-size:13px; font-weight:700; }
.screenshot-paste-zone small { color:#7657a7; font-size:12px; }
.screenshot-paste-zone:hover,.screenshot-paste-zone:focus-visible { border-color:#7c3aed; background:#f6f1ff; outline:none; }
.screenshot-preview { margin-top: 10px; align-items: flex-start; color: var(--muted); font-size: 12px; }
.screenshot-preview img { width: min(220px, 100%); max-height: 150px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.screenshot-diagnosis-result { margin-top: 10px; }
.screenshot-result-card { padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.screenshot-result-card strong, .screenshot-result-card p, .screenshot-result-card small { display: block; }
.screenshot-result-card p { margin: 6px 0; white-space: pre-wrap; line-height: 1.6; }
.screenshot-result-card small { color: var(--muted); }
.screenshot-result-card.success { border-left: 3px solid #13a875; background: #f3fff9; }
.screenshot-result-card.warning { border-left: 3px solid #ef9b28; background: #fffaf0; }
.screenshot-result-card.loading { border-left: 3px solid #7c3aed; color: #5b21b6; }
.screenshot-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.screenshot-check { padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.screenshot-check-head, .screenshot-task-match { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.screenshot-check-head span, .screenshot-task-match span { padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.screenshot-check p, .screenshot-task-match p, .screenshot-next-step p { margin: 5px 0 0; line-height: 1.55; }
.screenshot-check.passed, .screenshot-task-match.passed { border-color: #92e5bd; background: #f3fff9; }
.screenshot-check.warning, .screenshot-task-match.warning { border-color: #ffd38b; background: #fffaf0; }
.screenshot-check.unknown, .screenshot-task-match.unknown { border-color: var(--line); background: #f8fbff; }
.screenshot-check.passed span, .screenshot-task-match.passed span { color: #087f55; background: #dff8eb; }
.screenshot-check.warning span, .screenshot-task-match.warning span { color: #a85d00; background: #fff0cf; }
.screenshot-check.unknown span, .screenshot-task-match.unknown span { color: var(--muted); background: #edf3ff; }
.screenshot-task-match { align-items: flex-start; flex-wrap: wrap; padding: 9px; border: 1px solid var(--line); border-radius: 6px; }
.screenshot-task-match p { width: 100%; }
.screenshot-next-step { margin-top: 10px; padding: 9px; border-left: 3px solid #7c3aed; background: #fbfaff; }
.screenshot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.screenshot-actions button { min-height: 34px; padding: 6px 9px; border: 1px solid #7c3aed; border-radius: 6px; background: #fff; color: #5b21b6; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit; font-weight: 700; }

@media (max-width: 640px) {
  .screenshot-diagnosis-head { align-items: flex-start; }
  .screenshot-diagnosis-controls { align-items: stretch; }
  .screenshot-diagnosis-controls select,
  .screenshot-diagnosis-controls input,
  .screenshot-diagnosis-controls button { width: 100%; }
  .screenshot-check-grid { grid-template-columns: 1fr; }
}

.actions {
  display: flex;
  gap: 10px;
}

.run-actions {
  margin-top: 10px;
}

.actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(30, 52, 95, 0.12);
}

.actions .primary {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), #5b8cff);
  color: #fff;
}

.pill {
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

.feedback-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.diagnosis {
  display: grid;
  gap: 12px;
}

.diagnosis-sidebar { gap: 10px; }
.diagnosis-sidebar .diagnosis-card { padding: 11px 12px; }
.summary-overview { border-left: 4px solid var(--blue); }
.submission-learning-card { border-left: 4px solid #00a884; background: #f4fffb; }
.submission-learning-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.submission-learning-card > header strong { margin: 0; }
.submission-learning-card > header > b { color: var(--blue); font-size: 22px; line-height: 1; }
.submission-learning-card > header > b small { font-size: 12px; color: var(--muted); }
.submission-learning-card > p { margin: 7px 0 10px; color: var(--muted); line-height: 1.55; font-size: 12px; }
.submission-comparison { margin: 0 0 9px; padding: 9px 10px; border: 1px solid #bde4ff; border-radius: 6px; background: #f5fbff; }
.submission-comparison-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink); }
.submission-comparison-header span { font-size: 12px; color: var(--muted); }
.submission-comparison-header b { color: var(--blue); font-size: 14px; white-space: nowrap; }
.submission-comparison > small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.submission-change-list { display: grid; gap: 4px; margin-top: 8px; }
.submission-change-row { display: grid; grid-template-columns: minmax(92px, 1fr) auto auto; gap: 7px; align-items: center; padding-top: 4px; border-top: 1px dashed #d8e8f7; font-size: 12px; }
.submission-change-row b { color: var(--ink); font-size: 12px; }
.submission-change-row small { font-weight: 800; }
.submission-change-row.improved small { color: #008d67; }
.submission-change-row.declined small { color: #d45535; }
.submission-change-row.unchanged small { color: var(--muted); }
.learning-evidence-grid { display: grid; grid-template-columns: minmax(130px, .75fr) minmax(0, 1.5fr); gap: 8px; }
.learning-evidence-grid > div { padding: 9px 10px; border: 1px solid #c7eee2; border-radius: 6px; background: #fff; }
.learning-evidence-grid > div > span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.learning-evidence-grid > div > b { display: block; color: #007b60; font-size: 15px; }
.learning-evidence-grid > div > small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.learning-evidence-row { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(126px, 1fr); gap: 3px 8px; align-items: baseline; }
.learning-evidence-row b { color: var(--ink); font-size: 13px; }
.learning-evidence-row > span { color: #007b60; font-weight: 800; font-size: 13px; }
.learning-evidence-row > small { grid-column: 1 / -1; color: var(--muted); line-height: 1.4; }
.summary-focus { border-left: 4px solid #f5a524; background: #fffaf0; }
.summary-next { border-left: 4px solid var(--green); background: #f3fffa; }
.summary-overview p, .summary-focus p, .summary-next p { margin: 5px 0 0; line-height: 1.6; }
.diagnosis-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.diagnosis-metrics span { padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; background: #f8fbff; }
.diagnosis-group { border: 1px solid var(--line); border-radius: 8px; background: #fbfdff; overflow: hidden; }
.diagnosis-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; color: var(--ink); font-weight: 800; }
.diagnosis-group > summary::-webkit-details-marker { display: none; }
.diagnosis-group > summary::before { content: "▸"; color: var(--blue); transition: transform .18s ease; }
.diagnosis-group[open] > summary::before { transform: rotate(90deg); }
.diagnosis-group > summary span { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; text-align: right; }
.diagnosis-group-body { display: grid; gap: 10px; padding: 0 14px 14px; border-top: 1px solid #e7eef8; }
.diagnosis-group-body .diagnosis-card { box-shadow: none; }

.diagnosis-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(30, 52, 95, 0.05);
}

.diagnosis-card strong {
  display: block;
  margin-bottom: 6px;
}

@media (max-width: 760px) {
  .learning-evidence-grid { grid-template-columns: 1fr; }
  .submission-comparison-header { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.test-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.assessment-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.assessment-breakdown span {
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.test-pill {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  background: #eef2f7;
  color: var(--muted);
}

.test-pill.passed {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid #9de4cd;
}

.test-pill.failed {
  background: #fff1e8;
  color: var(--red);
  border: 1px solid #ffc7b6;
}

.hint-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #f3d08a;
  background: var(--gold-soft);
  color: #7a4b10;
  line-height: 1.7;
}
.hint-ai-supplement { margin-top:10px; padding:10px 12px; border-left:3px solid #7c3aed; background:#fbfaff; color:#4c1d95; }
.hint-ai-supplement p { margin:5px 0 0; }

.hidden {
  display: none;
}

#profileView {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

#profileView.active-view {
  display: grid;
}
.growth-tabs { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; }
.growth-tab { border:1px solid #cfe0ff; border-radius:7px; background:#fff; color:#36577f; padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; }
.growth-tab.active { background:#1267e8; color:#fff; border-color:#1267e8; }
.growth-tab-badge { display:inline-grid; min-width:18px; height:18px; margin-left:6px; place-items:center; border-radius:999px; background:#e5484d; color:#fff; font-size:11px; line-height:1; }
.growth-tab.active .growth-tab-badge { background:#fff; color:#1267e8; }
.growth-section-hidden { display:none !important; }
.portfolio-export-actions { display:flex; gap:8px; flex-wrap:wrap; }
.portfolio-export-actions button { min-height:34px; }
.growth-archive-section { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.growth-archive-section h2 { margin:0 0 10px; color:var(--ink); font-size:18px; }
.portrait-panel, .knowledge-panel, .portfolio-panel, .peer-review-panel { min-width:0; }
.peer-review-box { display:grid; gap:14px; max-width:1180px; }
.peer-review-box > .suggestion { padding:28px; border:1px dashed #b9cce8; border-radius:10px; background:#f8fbff; color:#53729f; text-align:center; }
.peer-review-card { display:grid; gap:12px; padding:18px; }
.peer-review-card > header { padding-bottom:10px; border-bottom:1px solid #d9e7fb; }
.peer-work-preview { margin:0; }
.peer-review-card textarea { margin:0; }
.peer-work-preview { margin:10px 0; border:1px solid #d9e7fb; border-radius:7px; padding:9px 11px; background:#fff; }
.peer-work-preview summary { cursor:pointer; color:#1267e8; font-weight:700; }
.peer-work-preview section { margin-top:9px; padding-top:8px; border-top:1px dashed #d9e7fb; }
.peer-work-preview p,.peer-feedback-history p { margin:4px 0; color:#36577f; white-space:pre-wrap; }
.peer-work-preview pre { margin:5px 0 0; max-height:180px; overflow:auto; white-space:pre-wrap; font:12px/1.55 ui-monospace,Consolas,monospace; }
.peer-feedback-history li { margin:8px 0; }
.peer-feedback-history li span { display:block; color:#1267e8; font-size:12px; margin-top:3px; }

.mastery-list, .log-list, .suggestions, .dataset-list, .badge-list {
  display: grid;
  gap: 12px;
}

.teacher-extra {
  margin-top: 16px;
}

.teacher-preview-panel {
  margin-top: 16px;
}

.course-preview {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.preview-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  overflow: hidden;
}

.preview-node > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.preview-node strong,
.preview-node p {
  display: block;
  margin: 0;
}

.preview-node p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.6;
}

.preview-index {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-weight: 800;
}

.preview-task-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.preview-task {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(30, 52, 95, 0.05);
}

.preview-task-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.preview-task-head span {
  color: var(--muted);
  white-space: nowrap;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.preview-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.preview-task details {
  color: var(--muted);
}

.preview-task summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
}

.mastery-item, .log-item, .suggestion, .dataset-card, .badge-card, .effect-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.ai-card {
  border-color: #8fd6b8;
  background: var(--green-soft);
}

.muted-card {
  border-color: var(--line);
  background: #f8fafc;
  color: var(--muted);
}

.assessment-summary {
  margin-bottom: 12px;
}
.intervention-evidence { margin-top:12px; padding:10px; border:1px solid #cfe0ff; border-radius:7px; background:#f8fbff; display:grid; gap:5px; }
.intervention-evidence strong { color:#165cb4; }.intervention-evidence span,.intervention-evidence small { color:#60719a; font-size:12px; line-height:1.45; }
.intervention-evidence ul { margin:2px 0; padding-left:19px; color:#415b7b; font-size:12px; }
.intervention-case-list { margin-top: 8px; }
.intervention-case-list > summary { color: #165cb4; cursor: pointer; font-weight: 700; }
.intervention-case { padding: 12px; margin-top: 10px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.intervention-case summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; cursor: pointer; }
.intervention-case dl { display: grid; gap: 9px; margin: 14px 0 0; }
.intervention-case dl > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 12px; }
.intervention-case dt { color: var(--muted); font-size: 14px; }
.intervention-case dd { margin: 0; color: var(--text); font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.intervention-evidence > span, .intervention-evidence > small { font-size: 14px; line-height: 1.6; }
.teacher-page-tabs button.teacher-sync-action { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 14px; }
.teacher-section-stack { display: grid; gap: 16px; }
.priority-improvement { border-left: 4px solid #1677e8; background: #eff7ff; }
.priority-improvement p { margin: 8px 0; line-height: 1.7; }
.student-improvement-cases { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #f8fbff; margin-bottom: 16px; }
.student-improvement-cases details { padding: 12px; margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.student-improvement-cases summary { cursor: pointer; font-weight: 700; color: #165cb4; }
.student-improvement-cases p { line-height: 1.65; overflow-wrap: anywhere; }
.teacher-planning-page .planning-grid { grid-template-columns: minmax(0, 1fr); }
#teacherView .teaching-loop-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { #teacherView .teaching-loop-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #teacherView .teaching-loop-steps { grid-template-columns: minmax(0, 1fr); } }
.teacher-sync-action.has-new-evidence { color: #854d0e !important; background: #fef3c7 !important; border-color: #f59e0b !important; }
@media (max-width: 640px) { .intervention-case dl > div { grid-template-columns: 1fr; gap: 3px; } }

/* Global student learning companion: a non-intrusive entry to evidence-bound help. */
.learning-companion { display:none; position:fixed; right:24px; bottom:24px; z-index:80; }.student-session .learning-companion { display:block; }
.learning-companion-fab { display:flex; align-items:center; gap:9px; min-height:52px; padding:7px 14px 7px 7px; border:0; border-radius:28px; color:#fff; background:linear-gradient(135deg,#1689df,#16ae83); box-shadow:0 12px 28px rgba(19,104,169,.3); font:inherit; font-weight:800; cursor:pointer; }.learning-companion-fab:not(:disabled):hover { border-color:transparent; color:#fff; background:linear-gradient(135deg,#0e7cd4,#0da078); transform:translateY(-2px); box-shadow:0 16px 32px rgba(19,104,169,.36); }.learning-companion-fab img { width:38px; height:38px; border-radius:50%; background:#fff; }
.learning-companion-drawer { position:absolute; right:0; bottom:64px; display:grid; grid-template-rows:auto minmax(180px,1fr) auto auto; width:min(390px,calc(100vw - 32px)); max-height:min(650px,calc(100vh - 105px)); overflow:hidden; border:1px solid #c8dcf4; border-radius:16px; background:#fff; box-shadow:0 20px 55px rgba(16,58,105,.24); opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity .18s ease,transform .18s ease; }.learning-companion.open .learning-companion-drawer { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.learning-companion-drawer > header { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 14px; color:#fff; background:linear-gradient(110deg,#167dde,#13a67c); }.learning-companion-drawer > header > div { display:flex; align-items:center; gap:9px; }.learning-companion-drawer header img { width:35px; height:35px; border-radius:50%; background:#fff; }.learning-companion-drawer header strong,.learning-companion-drawer header small { display:block; }.learning-companion-drawer header small { margin-top:2px; color:#e2f5ff; font-size:11px; }.companion-close-button { display:grid; width:34px; min-width:34px; height:34px; min-height:34px; padding:0; place-items:center; flex:0 0 34px; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; background:rgba(255,255,255,.16); cursor:pointer; font:inherit; font-size:27px; font-weight:300; line-height:1; box-shadow:none; }.companion-close-button > span { display:block; width:1em; height:1em; line-height:.9; text-align:center; transform:translateY(-.04em); }.companion-close-button:not(:disabled):hover { border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.28); box-shadow:none; transform:none; }.companion-close-button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.companion-messages { display:grid; align-content:start; gap:10px; overflow:auto; padding:14px; background:linear-gradient(180deg,#f6fbff,#fff); }.companion-message { max-width:88%; padding:9px 11px; border-radius:11px; background:#e8f3ff; color:#274b70; }.companion-message.student { justify-self:end; background:#dff8ed; color:#176244; }.companion-message b { font-size:12px; }.companion-message p { margin:5px 0 0; white-space:pre-wrap; line-height:1.55; font-size:13px; }
.pending-question { opacity:.78; }.companion-processing { display:grid; gap:7px; max-width:94%; padding:11px; border:1px solid #bfdaff; border-radius:11px; background:#f2f8ff; color:#315d8a; }.companion-processing > b { font-size:12px; }.companion-processing > div { display:grid; gap:5px; }.companion-processing span { display:flex; align-items:center; gap:6px; color:#879ab2; font-size:12px; transition:color .2s ease; }.companion-processing span.done { color:#176ec4; font-weight:700; }.companion-processing i { display:inline-grid; place-items:center; width:14px; height:14px; border-radius:50%; color:#fff; background:#b4c7dd; font-style:normal; font-size:11px; }.companion-processing span.done i { background:#1689df; animation:companion-pulse 1s ease-in-out infinite; }.companion-processing small { color:#758ba6; font-size:11px; line-height:1.4; } @keyframes companion-pulse { 50% { transform:scale(1.16); opacity:.7; } }
.companion-quick-actions { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; border-top:1px solid #e4edf8; }.companion-quick-actions button { padding:5px 8px; border:1px solid #c7ddf6; border-radius:999px; color:#1767b7; background:#fff; font-size:12px; cursor:pointer; }.companion-quick-actions button:hover { background:#eff7ff; }
.companion-form { padding:10px 12px 12px; border-top:1px solid #e4edf8; background:#fff; }.companion-form textarea { width:100%; min-height:62px; box-sizing:border-box; resize:vertical; border:1px solid #bcd2ed; border-radius:8px; padding:8px; font:inherit; font-size:13px; }.companion-form > div { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }.companion-form small { color:#69809e; font-size:11px; line-height:1.4; }.companion-form button { white-space:nowrap; }
@media (max-width:640px) { .learning-companion { right:14px; bottom:14px; }.learning-companion-fab span { display:none; }.learning-companion-fab { min-width:52px; padding:7px; justify-content:center; }.learning-companion-drawer { position:fixed; right:12px; bottom:76px; width:calc(100vw - 24px); max-height:calc(100vh - 95px); }.companion-message { max-width:94%; } }
.decision-evidence-list > button { padding:8px; border:1px solid #d9e7fb; border-radius:6px; background:#fff; color:inherit; text-align:left; cursor:pointer; font:inherit; }.decision-evidence-list > button:hover { border-color:var(--blue); background:#f4f9ff; }.decision-evidence-list > button small { color:var(--blue); }
.companion-controls { margin-top:8px; color:#506a87; font-size:12px; }.companion-controls summary { cursor:pointer; color:#226cae; }.companion-controls label { display:block; margin-top:7px; }.companion-controls button { margin-top:7px; border:1px solid #c4d8ef; border-radius:6px; color:#326a9c; background:#fff; padding:4px 7px; font:inherit; font-size:12px; cursor:pointer; }
.data-governance { margin-top:12px; padding:10px; border:1px dashed #bdd1e9; border-radius:7px; color:#526d8c; }.data-governance summary { cursor:pointer; color:#246bad; font-weight:700; }.data-governance p { margin:8px 0 0; font-size:12px; line-height:1.5; }
.project-stage-review { display:block; margin:8px 0; color:#526d8c; font-size:12px; }.project-stage-review small { display:block; margin-left:20px; }.project-review-comment { width:100%; min-height:64px; box-sizing:border-box; margin-top:8px; }.project-review-actions { display:flex; gap:8px; margin:8px 0; }.path-progress { padding:7px; border-radius:6px; background:#fff7dd; color:#896000; }.path-progress.verified { background:#e4f9ec; color:#137a4f; }

.assessment-card {
  border: 1px solid #8fd6b8;
  border-radius: 8px;
  padding: 12px;
  background: var(--green-soft);
}

.assessment-card span,
.assessment-card small {
  display: block;
  color: var(--muted);
}

.assessment-card strong {
  display: block;
  margin: 6px 0;
  color: var(--green);
  font-size: 26px;
}

.dataset-panel {
  margin-top: 16px;
}

.qa-panel {
  margin-top: 16px;
}

.qa-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.qa-row input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
}

.qa-sources { display: grid; gap: 5px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.qa-sources strong { color: var(--ink); }
.qa-sources span { display: block; }
.qa-strategy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.qa-strategy span { padding: 2px 8px; border-radius: 999px; color: #075cc5; background: #e8f2ff; font-size: 12px; font-weight: 700; }
.qa-strategy small { color: var(--muted); font-size: 12px; }
.teaching-effect-report { margin-top: 12px; }
.effect-report-card { padding: 12px; border: 1px solid #8fd6b8; border-radius: 8px; background: #f3fff9; }
.effect-report-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.effect-report-card small { color: var(--muted); }
.effect-report-metrics { display: grid; gap: 7px; margin-top: 9px; }
.effect-report-metrics div { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.effect-report-metrics > div { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 6px 14px; }
.effect-report-metrics > div > small { grid-column: 1 / -1; color: var(--muted); line-height: 1.6; }
@media (max-width: 640px) { .effect-report-metrics > div { grid-template-columns: 1fr; } }
.effect-evidence-note { display: grid; gap: 3px; margin-top: 10px; padding: 9px 10px; border-left: 3px solid #0ea5e9; border-radius: 6px; background: #eef8ff; }
.effect-evidence-note span { color: #075cc5; font-weight: 700; }
.effect-evidence-note small { line-height: 1.45; }
.teacher-export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.teacher-export-menu { position:relative; z-index:5; }
.teacher-export-menu summary { list-style:none; border:1px solid var(--blue); border-radius:7px; padding:9px 12px; background:var(--blue); color:#fff; cursor:pointer; font-weight:700; }
.teacher-export-menu summary::-webkit-details-marker { display:none; }
.teacher-export-menu > div { position:absolute; right:0; top:calc(100% + 6px); width:170px; padding:8px; display:grid; gap:6px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 24px rgba(32,74,128,.16); }
.teacher-export-menu button { width:100%; text-align:left; }
.assessment-editor { margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.assessment-editor summary { color:var(--blue); cursor:pointer; font-weight:700; }
.assessment-editor label { display:grid; gap:5px; margin-top:10px; color:var(--muted); font-size:13px; }
.assessment-editor textarea { width:100%; min-height:56px; resize:vertical; }
.assessment-editor-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

.qa-row button {
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qa-row button:not(:disabled):hover {
  border-color: #1459bf;
  background: #1d67d5;
  color: #fff;
  box-shadow: 0 8px 18px rgba(29, 103, 213, .24);
}

.qa-row button:disabled {
  border-color: #d1ddea;
  background: #eef3f9;
  color: #71839a;
  opacity: 1;
}

.qa-answer,
.ai-report-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  line-height: 1.7;
  white-space: pre-wrap;
}

.ai-report {
  margin-bottom: 12px;
}

.ai-report-card strong {
  display: block;
  margin-bottom: 6px;
}

.ai-report-card p {
  margin: 0;
}

.ai-recommendation-evidence { margin-top:12px; padding:10px; border:1px solid #cfe0ff; border-radius:7px; background:#f8fbff; }
.ai-recommendation-evidence > strong { color:#165cb4; font-size:13px; }
.ai-recommendation-evidence > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:8px; }
.ai-recommendation-evidence article { display:grid; gap:3px; padding:7px; border:1px solid #dce9fb; border-radius:6px; background:#fff; }
.ai-recommendation-evidence span,.ai-recommendation-evidence small,.ai-recommendation-evidence p { color:#60719a; font-size:12px; line-height:1.4; }
.ai-recommendation-evidence b { color:#17345e; font-size:13px; }.ai-recommendation-evidence p { margin:8px 0 0; }

.teacher-sync-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: #f8fbff;
}

.teacher-sync-status strong, .teacher-sync-status p { display: block; }
.teacher-sync-status p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.teacher-sync-status.snapshot { border-left-color: #e89b22; background: #fffaf1; }
.teacher-sync-status.ready { border-left-color: var(--green); background: #f3fff9; }
.teacher-ai-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.teacher-ai-heading h2 { margin: 0; }
.teacher-ai-heading button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; background: #fff; color: var(--blue); cursor: pointer; font: inherit; font-weight: 700; }
.teacher-ai-heading button:disabled { cursor: wait; opacity: 0.65; }
.teacher-loading .chart-panel > div:empty { min-height: 170px; border-radius: 6px; background: linear-gradient(90deg, #f3f7ff 20%, #fbfdff 45%, #f3f7ff 70%); background-size: 200% 100%; animation: teacher-skeleton 1.2s ease infinite; }
@keyframes teacher-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.dataset-list {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.dataset-card {
  overflow: hidden;
}

.dataset-card h3, .badge-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.dataset-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.dataset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dataset-table th,
.dataset-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px;
  text-align: left;
  white-space: nowrap;
}

.badge-list {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.badge-card {
  opacity: 0.55;
}

.badge-card.earned {
  opacity: 1;
  border-color: #8fd6b8;
  background: var(--green-soft);
}

.effect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.effect-card span {
  color: var(--muted);
}

.effect-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.evidence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.evidence-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.evidence-card span,
.evidence-card p {
  color: var(--muted);
}
.progress-row small { display:block; margin-top:3px; color:#617795; font-size:12px; }.progress-row strong { display:block; }

.evidence-card strong {
  display: block;
  margin: 6px 0;
  font-size: 20px;
}

.evidence-card p {
  margin: 0;
  line-height: 1.5;
  font-size: 13px;
}

.trend-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.trend-row {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.trend-row header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.trend-row small {
  color: var(--muted);
}

.mastery-item header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  gap: 7px;
}

.bar-row header {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 14px;
}

.bar-track {
  height: 10px;
  border-radius: 999px;
  background: #e9edf4;
  overflow: hidden;
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.variant-entry {
  width: 100%;
  border: 1px solid #0aa879;
  border-radius: 8px;
  padding: 12px 14px;
  background: #e6fff5;
  color: #087558;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.variant-banner {
  padding: 14px;
  border: 1px solid #38c991;
  border-radius: 8px;
  background: #e9fff5;
  color: #075c46;
}

.variant-banner p { margin: 6px 0 0; }

.pathway-list { display: grid; gap: 8px; margin-top: 10px; }
.pathway-list > div { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: start; }
.pathway-list span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e4efff; color: var(--blue); font-size: 12px; font-weight: 800; }
.pathway-list p { margin: 0; line-height: 1.5; }
.pathway-list b { display: block; margin-bottom: 2px; }
.mastery-event { border-left: 4px solid #1c8cff; }
.mastery-event p { margin: 7px 0; font-size: 20px; font-weight: 800; color: #126ee9; }
.mastery-event small { color: var(--muted); line-height: 1.5; }

.mastery-contribution-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mastery-contribution-list li {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto;
  gap: 3px 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.mastery-contribution-list li b { font-size: 13px; }
.mastery-contribution-list li span { color: var(--green); font-weight: 800; }
.mastery-contribution-list li.negative span { color: var(--red); }
.mastery-contribution-list li small { grid-column: 1 / -1; font-size: 12px; }

.mastery-contribution-compact { margin-top: 10px; padding: 0; list-style: none; }
.mastery-contribution-compact li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 7px 0; border-top: 1px dashed var(--line); }
.mastery-contribution-compact li small { grid-column: 1 / -1; color: var(--muted); }
.mastery-contribution-compact li.negative span { color: var(--red); }

.knowledge-panel { display: grid; gap: 14px; }
.learning-path { display: grid; gap: 10px; }
.path-decision { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 6px; background: #f8fbff; }
.path-decision > span { align-self: start; padding: 4px 8px; border-radius: 999px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; }
.path-decision.scaffold { border-left-color: var(--orange); background: #fffaf1; }
.path-decision.scaffold > span { background: var(--orange); }
.path-decision.challenge { border-left-color: var(--green); background: #f2fcf8; }
.path-decision.challenge > span { background: var(--green); }
.path-decision p, .knowledge-item p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.knowledge-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 10px; }
.knowledge-item { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.knowledge-item header { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.knowledge-item header span { color: var(--muted); white-space: nowrap; }
.knowledge-item .progress { margin: 9px 0 0; }
.knowledge-item small { color: var(--orange); }

.portrait-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.portrait-tag { display: inline-flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #ffd484; border-radius: 999px; background: #fff7df; color: #985600; }
.portrait-tag b { display: inline-grid; place-items: center; min-width: 19px; height: 19px; border-radius: 50%; background: #ffb92e; color: #fff; font-size: 12px; }
.mastery-evidence { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbff; }
.mastery-evidence p { margin: 5px 0; color: var(--blue); font-size: 22px; font-weight: 800; }
.mastery-evidence small { color: var(--muted); }

.classroom-panel { margin: 16px 0; }
.classroom-screen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.screen-card { min-height: 120px; padding: 16px; border: 1px solid #cde0ff; border-radius: 8px; background: linear-gradient(135deg, #eff7ff, #fafffd); }
.screen-card span, .screen-card small { display: block; color: var(--muted); }
.screen-card strong { display: block; margin: 10px 0 6px; color: #126ee9; font-size: 25px; overflow-wrap: anywhere; }
.student-list { display: grid; gap: 8px; }
.student-list h3 { margin: 0; font-size: 14px; color: var(--muted); }
.student-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-left: 4px solid #ffb92e; background: #fff9e9; }
.student-row.helper { border-left-color: #10a778; background: #edfff8; }
.student-row span { color: var(--muted); font-size: 13px; }

.adaptive-preview {
  margin-top: 10px;
  padding: 12px;
  border-left: 4px solid #10a778;
  background: #effff8;
  color: #246050;
}

.adaptive-preview p { margin: 7px 0; line-height: 1.55; }

.assignment-panel { margin: 16px 0; }
.assignment-list, .progress-list, .alert-list, .heatmap-list, .student-detail { display: grid; gap: 10px; }
.assignment-item { padding: 12px; border-left: 4px solid #1c8cff; background: #f5faff; }
.assignment-item p { margin: 6px 0; }
.assignment-item small { color: var(--muted); }
.assessment-item textarea { width: 100%; min-height: 86px; margin: 8px 0; border: 1px solid var(--line); border-radius: 7px; padding: 9px; font: inherit; resize: vertical; }
.assessment-item button { border: 1px solid var(--blue); border-radius: 7px; padding: 8px 10px; background: var(--blue); color: #fff; font: inherit; cursor: pointer; }
.teacher-actions, .config-row { display: flex; gap: 10px; margin: 10px 0 14px; }
.teacher-actions button, .config-row button, #exportReport, .assign-alert, .assign-detail { border: 1px solid var(--blue); border-radius: 7px; padding: 8px 10px; background: #fff; color: var(--blue); font: inherit; cursor: pointer; }
.teacher-actions button:first-child, #exportReport { background: var(--blue); color: #fff; }
.config-row input { width: 90px; border: 1px solid var(--line); border-radius: 7px; padding: 8px; font: inherit; }
.teacher-flow-config { display: grid; gap: 14px; }
.teacher-planning-workbench { display:grid; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.teacher-planning-page .teacher-planning-workbench { margin-top:0; padding-top:0; border-top:0; }
.teacher-planning-page { margin-top:16px; }
.teacher-knowledge-analytics { margin-top:14px; }
.knowledge-analytics-summary { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.knowledge-analytics-summary span { padding:6px 9px; border-radius:999px; background:#edf6ff; color:#2e68a9; font-size:12px; font-weight:700; }
.knowledge-analytics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.knowledge-analytics-card { min-height:112px; padding:11px; border:1px solid #dce7f5; border-radius:7px; background:#fbfdff; }
.knowledge-analytics-card.focus { border-color:#72aefb; background:#f3f8ff; }
.knowledge-analytics-card.unobserved { opacity:.72; background:#f8fafc; }
.knowledge-analytics-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.knowledge-analytics-card header strong { color:var(--ink); font-size:14px; }
.knowledge-analytics-card header span { color:#188e6a; font-size:12px; font-weight:700; white-space:nowrap; }
.knowledge-analytics-card p { margin:8px 0 5px; color:#476989; font-size:12px; line-height:1.45; }
.knowledge-analytics-card small { color:var(--muted); font-size:12px; }
.planning-heading { display:flex; justify-content:space-between; align-items:start; gap:14px; }
.planning-heading strong { display:block; color:var(--ink); font-size:16px; }
.planning-heading small { display:block; margin-top:4px; color:var(--muted); line-height:1.5; }
.planning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.planning-card { display:grid; align-content:start; gap:10px; padding:14px; border:1px solid #d6e4f6; border-radius:7px; background:#fbfdff; }
.planning-card h4 { margin:0; color:var(--ink); font-size:16px; }
.planning-card p { margin:0; color:#36577f; line-height:1.55; }
.planning-card small { color:var(--muted); line-height:1.5; }
.planning-card header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin:0; }
.planning-card header strong { display:block; color:var(--ink); font-size:16px; }
.planning-badge { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border-radius:999px; background:#e7f2ff; color:#1769d1; font-size:12px; white-space:nowrap; }
.planning-body { display:grid; gap:7px; color:#49688e; line-height:1.6; }
.planning-body b { color:#193e69; }
.planning-body ol { margin:0; padding-left:20px; }
.planning-evidence { padding:9px 10px; border-left:3px solid var(--cyan); background:#eefaff; color:#245986; font-size:13px; line-height:1.5; }
.planning-steps { margin:0; padding-left:20px; color:#36577f; line-height:1.65; }
.planning-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.planning-actions button { border:1px solid var(--blue); border-radius:6px; padding:8px 10px; background:#fff; color:var(--blue); font:inherit; font-weight:700; cursor:pointer; }
.planning-actions button.primary { background:var(--blue); color:#fff; }
.planning-actions button:disabled { cursor:wait; opacity:.65; }
.paper-type-switch { display:flex; flex-wrap:wrap; gap:12px; margin:2px 0; }
.paper-type-switch label { display:inline-flex; align-items:center; gap:6px; color:#36577f; cursor:pointer; }
.paper-note,.knowledge-graph-note { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.paper-type-picker { display:flex; flex-wrap:wrap; gap:8px; }
.paper-type-picker label { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:#fff; color:#36577f; font-size:13px; }
.planning-card select { width:100%; border:1px solid var(--line); border-radius:6px; padding:8px; background:#fff; color:var(--ink); font:inherit; }
.paper-history { display:grid; gap:7px; }
.paper-history summary { cursor:pointer; color:#2465bd; font-weight:700; }
.paper-history p { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border:1px dashed #cfe0f5; border-radius:6px; background:#fff; font-size:13px; }
.generated-paper-history { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.generated-paper-history li { padding:8px 10px; border:1px dashed #cfe0f5; border-radius:6px; background:#fff; color:#36577f; font-size:13px; }
.knowledge-graph-panel { border:1px solid #d6e4f6; border-radius:7px; background:#fff; }
.knowledge-graph-panel summary { cursor:pointer; list-style:none; padding:12px 14px; color:#1c60c8; font-weight:700; }
.knowledge-graph-panel summary::-webkit-details-marker { display:none; }
.knowledge-graph-panel summary::before { content:'▸'; margin-right:8px; }
.knowledge-graph-panel[open] summary::before { content:'▾'; }
.knowledge-graph-panel summary span { float:right; color:var(--muted); font-size:12px; font-weight:400; }
.knowledge-graph-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 14px 14px; }
.knowledge-focus-card { display:grid; gap:6px; padding:11px; border:1px solid #dce7f5; border-radius:7px; background:#fbfdff; }
.knowledge-focus-card.focus { border-color:#79b8ff; background:#f4f9ff; }
.knowledge-focus-card label { display:flex; align-items:center; gap:7px; color:var(--ink); font-weight:700; }
.knowledge-focus-card small { color:var(--muted); line-height:1.45; }
.knowledge-focus-card b { color:var(--blue); }
.knowledge-skill-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 14px 14px; }
.knowledge-skill-card { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:8px; padding:11px; border:1px solid #dce7f5; border-radius:7px; background:#fbfdff; cursor:pointer; }
.knowledge-skill-card.focus,.knowledge-skill-card:has(input:checked) { border-color:#79b8ff; background:#f4f9ff; }
.knowledge-skill-card input { margin-top:4px; }
.knowledge-skill-card span { display:grid; gap:3px; }
.knowledge-skill-card b { color:var(--ink); }
.knowledge-skill-card small,.knowledge-skill-card em { color:var(--muted); font-style:normal; font-size:12px; line-height:1.45; }
.knowledge-skill-card.em { color:#36577f; }
.planning-focus-panel { padding:14px; border:1px solid #d6e4f6; border-radius:7px; background:#fff; }
.planning-focus-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.planning-focus-heading strong { display:block; color:var(--ink); }
.planning-focus-heading small { display:block; margin-top:4px; color:var(--muted); line-height:1.45; }
@media (max-width:900px) { .planning-grid { grid-template-columns:1fr; } .knowledge-graph-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .knowledge-skill-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .knowledge-analytics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .planning-heading,.planning-focus-heading { flex-direction:column; } .knowledge-graph-grid,.knowledge-skill-grid,.knowledge-analytics-grid { grid-template-columns:1fr; } }
.teacher-agent-center { display: grid; gap: 14px; margin-top: 16px; }
.agent-control-center { display: grid; gap: 14px; }
.agent-center-intro { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 14px; border: 1px solid #cfe0fb; border-left: 4px solid #7657ff; border-radius: 7px; background: #fbfaff; }
.agent-center-intro strong { font-size: 17px; color: var(--ink); }
.agent-center-intro p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.agent-collaboration-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 12px; border: 1px dashed #b9cef0; border-radius: 7px; background: #f8fbff; }
.agent-collaboration-chain span { padding: 5px 8px; border-radius: 5px; background: #e9f3ff; color: #1b61c9; font-weight: 700; font-size: 13px; }
.agent-collaboration-chain b { color: #7657ff; }
.agent-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.agent-role-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-top: 3px solid #2f80ed; border-radius: 7px; background: #fff; }
.agent-role-card.paused { border-top-color: #f59e0b; background: #fffcf5; }
.agent-role-card header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.agent-role-title { display: flex; gap: 8px; align-items: center; color: var(--ink); }
.agent-role-icon { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #286ee9, #7657ff); }
.agent-role-icon svg { width: 16px; height: 16px; }
.agent-role-card header em { font-style: normal; color: #078763; font-size: 12px; white-space: nowrap; }
.agent-role-card.paused header em { color: #b76a00; }
.agent-role-card dl { display: grid; gap: 8px; margin: 0; }
.agent-role-card dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start; }
.agent-role-card dt { color: var(--muted); font-size: 13px; }
.agent-role-card dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.agent-tool-chip { display: inline-block; margin: 0 5px 4px 0; padding: 2px 6px; border-radius: 4px; background: #eef6ff; color: #2668c7; font-size: 12px; }
.agent-role-card footer { display: grid; gap: 3px; padding-top: 9px; border-top: 1px dashed #d5e1f4; color: #596f95; font-size: 13px; line-height: 1.5; }
.agent-role-card footer b { color: #7b4d0b; }
.agent-center-boundary { display: grid; gap: 4px; padding: 12px; border-radius: 7px; background: #eefbf7; border: 1px solid #bcefdc; color: #26735d; line-height: 1.5; }
.teacher-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.teacher-control-grid textarea { min-height: 94px; margin-top: 7px; resize: vertical; }
.teacher-switches { display: flex; flex-wrap: wrap; gap: 10px; }
.teacher-switches label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbff; color: var(--ink); font-weight: 700; }
.class-announcement { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px 0; padding: 12px 14px; border: 1px solid #b6d7ff; border-left: 4px solid #1677e8; border-radius: 7px; background: #f2f8ff; color: #245986; line-height: 1.55; }
.class-announcement strong { display: inline-flex; align-items: center; gap: 6px; color: #155cba; white-space: nowrap; }
.class-announcement svg { width: 16px; height: 16px; }
.agent-boundary, .teacher-control-extensions, .knowledge-governance { display: grid; gap: 12px; margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); }
.governance-heading, .extension-heading { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.governance-heading strong, .extension-heading strong { display: block; color: var(--ink); font-size: 16px; }
.governance-heading small, .extension-heading small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.5; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.boundary-grid article { padding: 12px; border: 1px solid #c9ddfa; border-radius: 7px; background: #f8fbff; }
.boundary-grid article:last-child { border-color: #f4d8a4; background: #fffaf2; }
.boundary-grid b { color: #1b61c9; }
.boundary-grid article:last-child b { color: #a86000; }
.boundary-grid ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.6; }
.boundary-escalation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 10px 12px; border-radius: 7px; background: #eefbf7; color: #26735d; line-height: 1.5; }
.extension-base-controls { align-items: end; }
.control-number-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.task-control-details, .role-control-details, .faq-governance { border: 1px solid #d8e4f7; border-radius: 7px; background: #fbfdff; }
.task-control-details summary, .role-control-details summary, .faq-governance summary { padding: 11px 12px; cursor: pointer; color: #1c60c8; font-weight: 750; }
.task-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px 12px; }
.task-control-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.task-control-card header { display: flex; justify-content: space-between; gap: 8px; }
.task-control-card header span { color: var(--muted); font-size: 12px; }
.task-control-card > label, .role-control-list label, .knowledge-library-list label, .knowledge-faq-list label { display: flex; align-items: start; gap: 7px; color: var(--ink); font-weight: 700; }
.task-control-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.task-control-card > div label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.task-control-card input[type="number"] { min-width: 0; padding: 6px 7px; }
.role-control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.role-control-list label { padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.role-control-list small { display: block; margin-top: 3px; color: var(--muted); font-weight: 400; line-height: 1.4; }
.knowledge-library-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.knowledge-library-list article, .knowledge-faq-list article { padding: 11px; border: 1px solid #d2e1f6; border-radius: 7px; background: #f8fbff; }
.knowledge-library-list p, .knowledge-faq-list p { margin: 7px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.knowledge-library-list small, .knowledge-faq-list small { color: #53729f; }
.knowledge-faq-list { display: grid; gap: 8px; padding: 0 12px 12px; }
.task-flow-controls { display: grid; gap: 12px; }
.task-route-preview { margin: 12px 0 2px; border: 1px solid #cfe0fb; border-left: 4px solid #7657ff; border-radius: 7px; background: #fbfaff; }
.task-route-preview details { padding:0; }
.task-route-preview summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px; cursor:pointer; list-style:none; color:#49399a; font-weight:700; }
.task-route-preview summary::-webkit-details-marker { display:none; }
.task-route-preview summary::before { content:"+"; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:#ebe7ff; color:#654ee5; font-size:15px; line-height:1; }
.task-route-preview details[open] summary::before { content:"−"; }
.task-route-preview summary span { margin-right:auto; }
.task-route-preview summary small { color:var(--muted); font-weight:600; }
.task-route-preview p { margin:0; padding:0 11px; color:var(--muted); font-size:13px; line-height:1.5; }
.task-route-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.task-route-preview .task-route-list { padding:0 11px 11px; }
.task-route-chip { display: grid; gap: 2px; min-width: 160px; padding: 7px 9px; border: 1px solid #ddd4ff; border-radius: 6px; background: #fff; color: #45358e; }
.task-route-chip small { color: var(--muted); line-height: 1.35; }
.task-branch-controls { display: grid; gap: 12px; margin-top: 16px; }
.prompt-governance { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.prompt-governance-heading { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.prompt-governance-heading strong { display: block; color: var(--ink); font-size: 16px; }
.prompt-governance-heading small { display: block; max-width: 760px; margin-top: 5px; color: var(--muted); line-height: 1.5; }
.prompt-governance-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.prompt-governance-badges .warning { color: #a86000; background: #fff3d7; }
.prompt-policy-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 10px; padding: 10px 12px; border: 1px solid #d9e6fb; border-radius: 7px; background: #f8fbff; color: var(--muted); font-size: 13px; line-height: 1.5; }
.prompt-policy-line b { color: var(--ink); white-space: nowrap; }
.prompt-global-rules, .prompt-role-card { border: 1px solid #d8e4f7; border-radius: 7px; background: #fff; }
.prompt-global-rules summary, .prompt-role-card summary { cursor: pointer; list-style: none; }
.prompt-global-rules summary::-webkit-details-marker, .prompt-role-card summary::-webkit-details-marker { display: none; }
.prompt-global-rules summary { padding: 10px 12px; color: #1c60c8; font-weight: 700; }
.prompt-global-rules ul { margin: 0; padding: 0 24px 12px; color: var(--muted); line-height: 1.55; }
.prompt-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prompt-role-card summary { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; }
.prompt-role-card summary b, .prompt-role-card summary small { display: block; }
.prompt-role-card summary b { color: var(--ink); }
.prompt-role-card summary small { margin-top: 3px; color: var(--muted); }
.prompt-role-card summary em { align-self: start; padding: 3px 7px; border-radius: 999px; background: #e8fbf2; color: #078653; font-size: 12px; font-style: normal; white-space: nowrap; }
.prompt-role-card.paused { background: #fffaf2; border-color: #f4d8a4; }
.prompt-role-card.paused summary em { background: #fff1d6; color: #a86000; }
.prompt-role-card dl { display: grid; gap: 9px; margin: 0; padding: 0 12px 12px; }
.prompt-role-card dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; }
.prompt-role-card dt { color: #53729f; font-weight: 700; }
.prompt-role-card dd { margin: 0; color: var(--muted); line-height: 1.5; }
.prompt-role-card ul, .prompt-role-card ol { margin: 0; padding-left: 18px; }
.branch-control-heading { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.branch-control-heading small { color: var(--muted); }
.task-branch-template { border: 1px solid #ded6ff; border-left: 4px solid #7657ff; padding: 14px; border-radius: 7px; background: #fcfbff; }
.task-branch-template header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.task-branch-template header p, .branch-control small { margin: 5px 0 0; color: var(--muted); line-height: 1.45; }
.branch-control-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.branch-control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.branch-control em { font-style: normal; font-size: 12px; color: #7050d6; white-space: nowrap; }
.branch-control.required { background: #fff9ed; border-color: #ffe1a9; }
.branch-control.required em { color: #b36a00; }
.task-branch-result { display: grid; gap: 8px; }
.branch-result { display: grid; gap: 3px; padding: 8px 10px; border-left: 4px solid #aab8ce; background: #f6f8fc; }
.branch-result.active { border-left-color: #ff9b3d; background: #fff7e9; }
.branch-result.standby { border-left-color: #7d67d9; background: #faf9ff; }
.branch-result span { color: var(--muted); font-size: 13px; }
.flow-template { border: 1px solid #cfe0fb; border-left: 4px solid var(--blue); padding: 14px; border-radius: 7px; background: #fbfdff; }
.flow-template header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.flow-template header p, .flow-step-control small { margin: 5px 0 0; color: var(--muted); line-height: 1.5; }
.flow-step-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.flow-step-control { display: grid; grid-template-columns: auto 28px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.flow-step-control > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e9f2ff; color: var(--blue); font-weight: 800; }
.flow-step-control em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
.flow-step-control.required { background: #f2fbf7; border-color: #bfe9d6; }
.flow-step-control.required em { color: #07895d; }
.progress-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border-left: 4px solid #18a878; background: #effff8; }
.progress-row.not_started { border-left-color: #a4b2c9; background: #f5f7fb; color: var(--muted); }
.alert-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 11px; border-left: 4px solid #ff9b3d; background: #fff7e9; }
.alert-item span { color: #8b6534; font-size: 13px; }
.alert-item button { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.alert-item small { color: var(--muted); }
.alert-item strong { display: flex; align-items: center; gap: 7px; }
.alert-item strong i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ff9b3d; color: #fff; font-size: 11px; font-style: normal; }
.alert-item.red { border-left-color: #e55353; background: #fff2f2; }
.alert-item.red strong i { background: #e55353; }
.alert-item.orange { border-left-color: #ed8a2b; background: #fff7eb; }
.alert-item.orange strong i { background: #ed8a2b; }
.alert-item.yellow { border-left-color: #d3a119; background: #fffbe8; }
.alert-item.yellow strong i { background: #d3a119; }
.alert-item.blue { border-left-color: #1c8cff; background: #f1f7ff; }
.alert-item.blue strong i { background: #1c8cff; }
.classroom-activity { margin-top: 14px; }
.classroom-activity-card, .classroom-activity-empty { padding: 14px; border: 1px solid #98c9ff; border-radius: 8px; background: #f5faff; }
.classroom-activity-card header, .ai-review-sheet header, .ai-review-group > header { display: flex; justify-content: space-between; gap: 12px; }
.classroom-activity-card h3 { margin: 10px 0 5px; font-size: 16px; }
.classroom-activity-card p, .classroom-activity-card li { color: var(--muted); line-height: 1.55; }
.classroom-activity-card ol { margin: 8px 0; padding-left: 21px; }
.activity-criteria { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.activity-criteria span { padding: 4px 8px; border-radius: 999px; background: #e4efff; color: var(--blue); font-size: 12px; font-weight: 700; }
.classroom-activity-card button { border: 1px solid var(--blue); border-radius: 7px; padding: 8px 11px; background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.classroom-activity-card details { margin-top: 10px; color: var(--muted); }

.ai-feedback-review-panel { margin-top: 16px; }
.ai-feedback-review-queue, .ai-review-group { display: grid; gap: 10px; }
.ai-review-group { padding-top: 4px; }
.ai-review-group + .ai-review-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ai-review-group > header span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 800; }
.ai-review-group > p { margin: 0; color: var(--muted); }
.ai-review-module { border: 1px solid #c9dbf3; border-radius: 8px; background: #f8fbff; overflow: hidden; }
.ai-review-module > summary, .ai-review-student > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.ai-review-module > summary::-webkit-details-marker, .ai-review-student > summary::-webkit-details-marker { display: none; }
.ai-review-module > summary { padding: 12px 14px; background: #eff6ff; color: var(--ink); }
.ai-review-module > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #dbeaff; color: var(--blue); font-weight: 800; }
.ai-review-module[open] > summary::before { content: "−"; }
.ai-review-module > summary span { margin-right: auto; font-weight: 800; }
.ai-review-module > summary small, .ai-review-student > summary small { color: var(--muted); white-space: nowrap; }
.ai-review-module-body { display: grid; gap: 8px; padding: 10px; }
.ai-review-student { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.ai-review-student > summary { padding: 10px 12px; }
.ai-review-student > summary span { font-weight: 750; }
.ai-review-student[open] > summary { border-bottom: 1px solid var(--line); background: #fbfcff; }
.ai-review-submissions { display: grid; gap: 8px; padding: 8px; }
.ai-review-sheet { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-left: 4px solid #7eace6; border-radius: 6px; background: #fbfdff; }
.ai-review-sheet header span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.ai-review-sheet header b { color: #8d6500; font-size: 13px; }
.ai-review-sheet details { padding: 10px; border-radius: 6px; background: #f3f7fc; }
.ai-review-sheet summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.ai-review-sheet details p, .ai-review-final p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.6; }
.ai-review-sheet label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.ai-review-sheet textarea { min-height: 68px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; resize: vertical; }
.ai-review-sheet footer { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-feedback-action { border: 1px solid var(--blue); border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--blue); font: inherit; cursor: pointer; }
.ai-feedback-action.primary { background: var(--blue); color: #fff; }
.ai-review-note, .ai-review-final { padding: 10px; border-radius: 6px; background: #fff8e8; color: #805000; }
.ai-review-final { background: #edfff8; color: #176a53; }
.ai-review-note strong, .ai-review-final strong { display: block; margin-bottom: 3px; }
.ai-review-status { color: var(--muted); }
.teacher-reviewed-feedback { border-color: #70caa4; background: #edfff8; color: #176a53; }
.teacher-reviewed-feedback p { margin: 7px 0; white-space: pre-wrap; line-height: 1.6; }
.teacher-reviewed-feedback small { color: #327764; }
.heatmap-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: start; padding: 10px; border-bottom: 1px solid var(--line); }
.heatmap-row div { display: flex; flex-wrap: wrap; gap: 6px; }
.heatmap-row span { padding: 5px 8px; background: rgba(255, 174, 47, var(--heat, .25)); color: #805000; border-radius: 6px; font-size: 13px; }
.heatmap-row b { margin-left: 5px; }
.student-select { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.student-select:hover { border-color: var(--blue); background: #f5faff; }
.student-select span, .detail-attempts span { color: var(--muted); font-size: 13px; }
.student-detail-card { padding: 12px; border: 1px solid #cde0ff; border-radius: 8px; background: #f8fbff; }
.student-detail-card p { margin: 8px 0; line-height: 1.5; }
.detail-attempts { display: grid; gap: 6px; margin: 10px 0; }
.detail-attempts div { display: flex; justify-content: space-between; gap: 8px; }

.teacher-charts { margin: 18px 0; }
.chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.chart-panel { min-height: 270px; }
.chart-panel h2 { margin-top: 0; font-size: 17px; }
.funnel-chart { display: grid; gap: 11px; }
.funnel-row { display: grid; grid-template-columns: 76px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; }
.funnel-row > div { height: 18px; background: #edf1f8; border-radius: 4px; overflow: hidden; }
.funnel-row i { display: block; height: 100%; background: linear-gradient(90deg, #1c8cff, #14af82); }
.funnel-row b { text-align: right; color: var(--blue); }
.radar-chart { display: grid; place-items: center; min-height: 220px; }
.radar-chart svg { width: min(100%, 260px); height: 235px; overflow: visible; }
.radar-ring { fill: #f5f8fd; stroke: #d7e1f0; stroke-width: 1; }
.radar-axis { stroke: #d7e1f0; stroke-width: 1; }
.radar-shape { fill: rgba(28, 140, 255, .25); stroke: #1c8cff; stroke-width: 2; }
.radar-label { font-size: 9px; fill: #587093; text-anchor: middle; dominant-baseline: middle; }
.comparison-chart { height: 205px; display: flex; align-items: end; justify-content: space-around; gap: 10px; padding-top: 18px; }
.compare-bar { width: 22%; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 6px; text-align: center; }
.compare-bar > div { width: 38px; min-height: 5px; background: linear-gradient(#24bf91, #1c8cff); border-radius: 6px 6px 0 0; }
.compare-bar b { font-size: 13px; color: #1b5cac; }
.compare-bar span { min-height: 32px; font-size: 12px; color: var(--muted); }
.line-chart svg { width: 100%; height: 210px; }
.trend-axis { stroke: #cdd9ea; stroke-width: 1; }
.trend-line { fill: none; stroke: #1c8cff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot { fill: #14af82; stroke: #fff; stroke-width: 2; }
.trend-label { fill: #647896; font-size: 10px; text-anchor: middle; }
.scatter-chart { position: relative; height: 210px; margin: 8px 6px 0 22px; border-left: 1px solid #bfcde1; border-bottom: 1px solid #bfcde1; background-image: linear-gradient(#edf3fb 1px, transparent 1px), linear-gradient(90deg, #edf3fb 1px, transparent 1px); background-size: 25% 25%; }
.scatter-point { position: absolute; transform: translate(-50%, 50%); display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #1c8cff; color: #fff; font-size: 12px; cursor: pointer; box-shadow: 0 1px 4px #94add0; }
.scatter-point.关注 { background: #f39a34; }
.scatter-point.同伴助教 { background: #13a879; }
.scatter-axis { position: absolute; color: var(--muted); font-size: 11px; }
.scatter-axis.x { right: 3px; bottom: -19px; }
.scatter-axis.y { left: -20px; top: -8px; writing-mode: vertical-rl; }
.scatter-legend { position: absolute; right: 5px; top: 5px; color: var(--muted); font-size: 11px; }
.impact-chart { display: grid; gap: 13px; }
.impact-row { display: grid; grid-template-columns: 52px 70px 1fr 78px; gap: 7px; align-items: center; font-size: 12px; }
.impact-row > div { position: relative; height: 16px; background: #eef2f8; border-radius: 999px; overflow: hidden; }
.impact-row i, .impact-row b { position: absolute; left: 0; top: 0; height: 100%; border-radius: inherit; }
.impact-row i { background: #aebbd0; }
.impact-row b { background: linear-gradient(90deg, #1c8cff, #14af82); opacity: .85; }

.metric {
  padding: 18px;
}

.metric span {
  color: var(--muted);
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
}

@media (max-width: 1000px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

  .skill-map, .workspace, .teacher-grid, #profileView.active-view, .workflow-list, .evidence-list, .classroom-screen, .chart-grid, .agent-role-grid {
    grid-template-columns: 1fr;
  }
  .map-route { grid-template-columns: 1fr; }
  .map-legend small { width: 100%; margin-left: 0; }
  .diagnosis-metrics { grid-template-columns: 1fr; }
  .diagnosis-group > summary { align-items: flex-start; }
  .diagnosis-group > summary span { max-width: 62%; }

  .agent-center-intro { flex-direction: column; }

  .workspace > .feedback-panel {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .topbar-context { justify-content:flex-start; }

  .teacher-control-grid, .flow-step-controls, .branch-control-list, .boundary-grid, .task-control-grid, .role-control-list, .knowledge-library-list {
    grid-template-columns: 1fr;
  }

  .control-number-group, .task-control-card > div { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .teacher-today-workbench > header { display:grid; }
  .teacher-today-workbench .overview-main-action { width:100%; justify-content:center; }
  .teacher-today-metrics { grid-template-columns:1fr; }
}

/* Student classroom messages stay separate from the competency map. */
.notification-nav { position: relative; }
.notification-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 10px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.notification-badge.hidden { display: none; }
.student-notification-page { display: block; }
.notification-center { min-height: 420px; }
.notification-actions { display: flex; align-items: center; gap: 8px; }
.notification-actions .secondary { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.notification-list { display: grid; gap: 10px; margin-top: 14px; }
.student-empty-state { display:grid; justify-items:center; gap:8px; padding:34px 18px; border:1px dashed #b9cce8; border-radius:10px; background:#f8fbff; color:#5e759d; text-align:center; }
.student-empty-state strong { color:#234b79; font-size:16px; }
.student-empty-state p { max-width:560px; margin:0; line-height:1.65; }
.student-empty-state.compact { padding:22px 16px; }
.student-empty-state button { margin-top:4px; }
.notification-card { border: 1px solid #c9daf1; border-left: 4px solid #90a9ce; padding: 14px; background: #fff; }
.notification-card.unread { border-left-color: #1677ff; background: #f7fbff; }
.notification-card header, .notification-card footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.notification-card h3 { margin: 10px 0 6px; font-size: 16px; }
.notification-card p { margin: 0; color: #36567e; white-space: pre-wrap; line-height: 1.65; }
.notification-card small, .notification-card footer span { color: #6a7d9c; }
.notification-kind { display: inline-flex; align-items: center; gap: 6px; color: #1465c0; font-weight: 700; }
.notification-meta { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:7px; text-align:right; }
.notification-task-status { padding:3px 7px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.notification-task-status.pending { color:#9a6509; background:#fff1c9; }
.notification-task-status.done { color:#13784f; background:#dff8ef; }
.notification-task-status.expired { color:#68758a; background:#eef2f6; }
.notification-card footer { margin-top: 12px; }
.notification-submission { display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; background: #f2f7ff; border-radius: 8px; }
.notification-notice-note { display: block; margin-top: 12px; }
.explanation-review > div { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #ccdaef; }
.explanation-review p { margin: 6px 0; }
.review-caution { padding: 8px; background: #fff8e7; border-radius: 6px; }
.learning-chain { margin: 12px 0; padding: 12px; background: #f5f9ff; border: 1px solid #d3e3fa; border-radius: 8px; }
.learning-chain li { margin: 12px 0; }
.learning-chain li p { margin: 5px 0; }
.task-title-actions { display:flex; align-items:center; gap:9px; }
.draft-status { min-height:18px; color:#6b7f9e; font-size:12px; font-weight:600; }
.draft-status.saving { color:#4d78ad; }
.draft-status.saved,.draft-status.restored { color:#17865b; }
.draft-status.warning { color:#b66c14; }
.qa-no-source { margin-top:12px; padding:10px 12px; border-left:3px solid #e6a23c; background:#fffaf0; color:#8a621f; font-size:13px; line-height:1.55; }
.learning-portrait-summary { display:flex; align-items:center; flex-wrap:wrap; gap:9px 12px; margin:0 0 14px; padding:11px 13px; border:1px solid #b9d8ff; border-radius:9px; background:#f8fbff; color:#46698f; }
.learning-portrait-summary strong { color:#164f91; }
.learning-portrait-summary span { flex:1 1 300px; line-height:1.5; }
.learning-portrait-summary button { min-height:32px; padding:5px 10px; }
.feedback-conclusion { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border:1px solid #b9d8ff; border-left:5px solid #1677ff; border-radius:10px; background:#f8fbff; }
.feedback-conclusion.passed { border-color:#a8e4c8; border-left-color:#0f9f7a; background:#f4fffa; }
.feedback-conclusion.needs-work { border-color:#ffd484; border-left-color:#e6a23c; background:#fffaf0; }
.feedback-conclusion div { display:grid; gap:3px; }
.feedback-conclusion span { font-weight:700; color:#36577f; }
.feedback-conclusion strong { color:#143d73; font-size:24px; line-height:1.1; }
.feedback-conclusion p { margin:0; color:#526d91; }
.feedback-conclusion button { flex:0 0 auto; }

/* Assessment publishing uses a history list plus an editable draft surface. */
.assessment-management-layout { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(0, 1.35fr); gap: 16px; margin-top: 14px; }
.assessment-publication-column { padding-right: 14px; border-right: 1px solid #d9e5f5; }
.assessment-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.assessment-publication-list { display: grid; gap: 9px; max-height: 530px; overflow: auto; padding-right: 4px; }
.assessment-empty { padding: 22px 12px; border: 1px dashed #bdd0ea; color: #6880a3; line-height: 1.6; }
.assessment-publication { padding: 12px; border: 1px solid #c9daf1; background: #fff; }
.assessment-publication.active { border-left: 4px solid #1677ff; }
.assessment-publication.muted { opacity: .72; border-left: 4px solid #93a9c7; }
.assessment-publication header, .assessment-publication footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.assessment-publication p { margin: 8px 0 4px; color: #315a85; }
.assessment-publication small { color: #6a7d9c; }
.assessment-publication footer { margin-top: 10px; justify-content: flex-start; }
.assessment-status { padding: 3px 7px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.assessment-status.active { background: #e7f8ef; color: #117a4c; }
.assessment-status.muted { background: #eef3fa; color: #657995; }

@media (max-width: 1000px) {
  .assessment-management-layout { grid-template-columns: 1fr; }
  .assessment-publication-column { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid #d9e5f5; }
  .notification-actions { flex-wrap: wrap; justify-content: flex-end; }
  .teacher-analytics-summary,
  .teacher-intervention-workspace,
  .teacher-classroom-support { grid-template-columns: 1fr; }
  .teacher-page-tabs {
    position: sticky;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid #c9daf1;
    border-radius: 8px;
  }
  body.teacher-session { grid-template-columns: minmax(0, 1fr); }
  body.teacher-session main { overflow: visible; min-width: 0; }
}