:root {
  color-scheme: light;
  --ink: #15231f;
  --muted: #67736f;
  --line: #d9e0dc;
  --line-strong: #c5cfca;
  --surface: #ffffff;
  --canvas: #f3f5f4;
  --green: #13795f;
  --green-dark: #0c5e49;
  --green-soft: #e8f3ee;
  --navy: #17324d;
  --navy-soft: #eaf0f5;
  --amber: #b9730c;
  --amber-soft: #fff3d8;
  --red: #b54235;
  --red-soft: #fff0ed;
  --code: #17212a;
  --code-line: #2a3943;
  --shadow: 0 10px 30px rgba(23, 43, 36, 0.07);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-size: 14px;
}
[hidden] { display: none !important; }
button, textarea, input, select { font: inherit; }
button, select { color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(19, 121, 95, 0.25);
  outline-offset: 2px;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: 24px; line-height: 1.24; }
h2 { margin-bottom: 0; font-size: 17px; line-height: 1.3; }
h3 { margin-bottom: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 70px;
  padding: 10px clamp(16px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(250px, 1.2fr) minmax(300px, 1fr);
  align-items: center;
  gap: 22px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { width: fit-content; padding: 0; display: inline-flex; align-items: center; gap: 10px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; color: white; background: var(--navy); border-radius: 4px; font-size: 13px; font-weight: 800; }
.brand-mark { position: relative; overflow: hidden; background: #fff; }
.brand-mark img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; transform: none; }
.brand strong { display: block; font-size: 16px; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }
.brand-copy { min-width: 0; display: grid; justify-items: start; gap: 3px; line-height: 1; }
.brand-copy strong { color: #15213a; font-size: 15px; font-weight: 760; line-height: 1.05; letter-spacing: -.015em; white-space: nowrap; }
.brand-tagline { display: flex !important; align-items: center; gap: 6px; margin: 0 !important; color: #52617d !important; font-size: 9px !important; font-weight: 650; line-height: 1.1; letter-spacing: .16em; white-space: nowrap; }
.brand-tagline::before, .brand-tagline::after { content: ""; width: 10px; height: 1px; flex: 0 0 10px; background: linear-gradient(90deg, #3155d9, #4385c5); opacity: .82; }
.course-context { min-width: 0; text-align: center; }
.course-context strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-label, .eyebrow { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.clock { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.connection-pill, .scope-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--muted); font-size: 11px; white-space: nowrap; }
.connection-pill i, .online-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.connection-pill:not(.is-error) i, .online-label i { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.connection-pill.is-error { color: var(--red); }
.connection-pill.is-error i { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

main { padding: 22px clamp(16px, 3vw, 42px) 40px; }
.screen { display: none; }
.screen.is-active { display: block; }
.panel, .control-panel, .join-panel, .dashboard-toolbar, .student-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

/* Unified portal */
#landing { max-width: 1480px; margin: 0 auto; }
.hero { position: relative; min-height: 520px; padding: clamp(34px, 5vw, 70px); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: clamp(34px, 6vw, 86px); align-items: center; background: linear-gradient(118deg, #fff 0%, #fff 57%, #f0f6f3 57%, #edf4f1 100%); }
.hero::before { content: "CM"; position: absolute; left: clamp(28px, 4.6vw, 66px); bottom: -60px; color: rgba(23, 50, 77, .035); font-size: clamp(170px, 22vw, 330px); font-weight: 900; line-height: .8; letter-spacing: -.09em; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { color: var(--green); letter-spacing: .12em; }
.product-name { margin: 19px 0 0; color: var(--navy); font-size: 15px; font-weight: 850; letter-spacing: .02em; }
.hero-copy h1 { margin: 10px 0 20px; max-width: 760px; font-size: clamp(36px, 4.3vw, 64px); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.hero-copy h1 span { white-space: nowrap; }
.lede { max-width: 720px; margin-bottom: 0; color: #43514c; font-size: 15px; line-height: 1.9; }
.hero-principles { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-principles span { display: inline-flex; align-items: center; gap: 9px; color: var(--navy); font-size: 11px; font-weight: 750; }
.hero-principles i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--green-dark); background: var(--green-soft); border-radius: 50%; font-size: 9px; font-style: normal; }
.role-gate { position: relative; z-index: 1; padding: clamp(20px, 2.4vw, 34px); background: rgba(255, 255, 255, .9); border: 1px solid rgba(197, 207, 202, .9); box-shadow: 0 20px 55px rgba(23, 50, 77, .09); backdrop-filter: blur(12px); }
.role-gate-head { margin-bottom: 18px; }
.role-gate-head h2 { margin: 6px 0 6px; font-size: 22px; }
.role-gate-head > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 11px; }
.role-card { width: 100%; min-height: 126px; margin-top: 10px; padding: 18px 18px 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; color: inherit; text-align: left; text-decoration: none; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.role-card:hover { transform: translateY(-3px); border-color: var(--green); background: #fbfffd; box-shadow: 0 12px 26px rgba(19, 121, 95, .1); }
.role-card.student { border-left-color: var(--navy); }
.role-card.student:hover { border-color: var(--navy); background: #f8fbfd; box-shadow: 0 12px 26px rgba(23, 50, 77, .1); }
.role-card span, .role-card small { grid-column: 1; color: var(--muted); font-size: 10px; }
.role-card span { font-weight: 800; letter-spacing: .08em; }
.role-card strong { grid-column: 1; margin: 12px 0 7px; font-size: 21px; }
.role-card small { max-width: 330px; line-height: 1.55; }
.role-card b { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--green); font-size: 11px; }
.role-card b i { margin-left: 4px; display: inline-block; font-size: 16px; font-style: normal; transition: transform 180ms ease; }
.role-card:hover b i { transform: translateX(5px); }
.role-card.student b { color: var(--navy); }

.product-values, .learning-journey, .audience { margin-top: 16px; padding: clamp(26px, 4vw, 52px); }
.section-intro { max-width: 760px; }
.section-intro h2, .journey-heading h2 { margin: 7px 0 12px; font-size: clamp(24px, 2.5vw, 35px); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.section-intro > p:last-child { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.value-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.value-grid article { position: relative; min-height: 238px; padding: 24px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfcfb; transition: background 180ms ease, transform 180ms ease; }
.value-grid article::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px; border: 1px solid var(--line); border-radius: 50%; opacity: .65; }
.value-grid article:hover { z-index: 1; transform: translateY(-3px); background: var(--green-soft); }
.value-grid article > span { color: var(--green); font-size: 10px; font-weight: 850; }
.value-grid h3 { margin: 58px 0 12px; color: var(--navy); font-size: 19px; }
.value-grid p { position: relative; z-index: 1; max-width: 340px; margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }

.learning-journey { color: white; background: var(--navy); border-color: var(--navy); }
.learning-journey .eyebrow { color: #9db4c8; }
.journey-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.journey-heading > p { max-width: 280px; margin-bottom: 13px; color: #b7c5d1; font-size: 11px; text-align: right; }
.journey-track { margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); }
.journey-track li { position: relative; min-height: 164px; padding: 22px 16px 0 0; }
.journey-track li:not(:last-child)::after { content: "→"; position: absolute; top: 18px; right: 12px; color: #7591a8; }
.journey-track b { display: block; color: #7dd1b5; font-size: 10px; }
.journey-track span { display: block; margin: 42px 0 9px; font-size: 13px; font-weight: 800; }
.journey-track small { display: block; max-width: 165px; color: #aebfcd; font-size: 10px; line-height: 1.55; }

.section-intro.compact { max-width: 820px; }
.audience-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.audience-card { position: relative; min-height: 330px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); background: #fbfcfb; }
.audience-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; background: var(--navy); }
.audience-card.teacher-view::before { background: var(--green); }
.audience-card > span { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.audience-card h3 { max-width: 460px; margin: 22px 0 20px; font-size: 21px; line-height: 1.35; }
.audience-card ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 22px; list-style: none; }
.audience-card li { position: relative; padding-left: 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.audience-card li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--navy); }
.audience-card.teacher-view li::before { background: var(--green); }
.audience-card a, .audience-card button { position: absolute; left: clamp(24px, 3vw, 40px); bottom: 32px; padding: 0 0 6px; color: var(--navy); background: transparent; border: 0; border-bottom: 1px solid currentColor; text-decoration: none; cursor: pointer; font-size: 11px; font-weight: 800; }
.audience-card.teacher-view button { color: var(--green-dark); }
.audience-card a i, .audience-card button i { margin-left: 6px; font-size: 15px; font-style: normal; }

/* Shared forms and actions */
label { display: block; margin-bottom: 14px; color: var(--muted); font-size: 11px; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 40px; margin-top: 7px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); background: #fbfcfb; line-height: 1.5; }
.experiment-name-field { margin-bottom: 14px; }
.experiment-name-field > label { margin-bottom: 0; }
.experiment-combobox { position: relative; margin-top: 7px; }
.experiment-combobox-input { position: relative; }
.experiment-combobox-input input { margin-top: 0; padding-right: 104px; background: #fff; }
.experiment-combobox-input input[aria-expanded="true"] { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(32, 55, 91, .09); }
.experiment-search-count { position: absolute; right: 46px; top: 50%; color: var(--muted); font-size: 10px; font-weight: 700; pointer-events: none; transform: translateY(-50%); }
.experiment-combobox-toggle { position: absolute; right: 1px; top: 1px; width: 38px; height: 38px; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0 4px 4px 0; color: var(--navy); background: #f6f8fb; cursor: pointer; font-size: 18px; line-height: 1; }
.experiment-combobox-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.experiment-combobox-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 290px; overflow-y: auto; padding: 5px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; box-shadow: 0 14px 34px rgba(27, 43, 68, .16); }
.experiment-combobox-option { display: grid; width: 100%; padding: 9px 10px; border: 0; border-radius: 4px; color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.experiment-combobox-option strong { overflow: hidden; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.experiment-combobox-option small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.experiment-combobox-option:hover,
.experiment-combobox-option.is-active { background: #eef3fb; }
.experiment-combobox-option[aria-selected="true"] { color: var(--green-dark); background: #edf8f4; }
.experiment-combobox-empty { padding: 16px 10px; color: var(--muted); font-size: 10px; text-align: center; }
.experiment-search-status { display: block; min-height: 17px; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.5; }
.experiment-name-field:focus-within .experiment-search-status { color: var(--navy); }
.ai-create-catalog-button { width: 100%; margin-top: 8px; }
#database-experiment-language:disabled,
#problem-select:disabled {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  cursor: default;
  opacity: 1;
}
#database-experiment-language:disabled::-ms-expand,
#problem-select:disabled::-ms-expand { display: none; }
textarea { min-height: 112px; resize: vertical; }
.curriculum-reference-field { margin: 2px 0 16px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fbfcff; }
.curriculum-reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.curriculum-reference-heading div { display: grid; gap: 3px; }
.curriculum-reference-heading span { color: var(--muted); font-size: 11px; font-weight: 750; }
.curriculum-reference-heading strong { color: var(--ink); font-size: 14px; }
.curriculum-reference-heading small { max-width: 52%; color: var(--muted); font-size: 11px; line-height: 1.45; text-align: right; }
.curriculum-reference-panel { display: grid; gap: 9px; max-height: 330px; overflow: auto; }
.curriculum-reference-panel[aria-busy="true"] { opacity: .68; }
.curriculum-reference-unit { padding: 11px 12px; border: 1px solid #dce3f3; border-radius: 9px; background: #fff; }
.curriculum-reference-unit header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.curriculum-reference-unit header span { flex: none; color: var(--green); font: 700 10px/1.2 "SFMono-Regular", Consolas, monospace; }
.curriculum-reference-unit header strong { color: var(--ink); font-size: 13px; }
.curriculum-reference-unit p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.curriculum-reference-unit p b { margin-right: 6px; color: var(--ink); }
.curriculum-reference-empty { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.button { min-height: 36px; padding: 8px 13px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 750; text-decoration: none; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .48; cursor: not-allowed; }
.button.primary { color: white; background: var(--green); }
.button.primary:hover:not(:disabled) { background: var(--green-dark); }
.button.ghost { border-color: var(--line-strong); background: white; }
.button.ghost:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.button.coach { min-width: 112px; color: white; background: var(--navy); }
.text-button, .mini-button { min-height: 30px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--navy); background: white; cursor: pointer; font-size: 10px; font-weight: 750; }
.text-button:hover, .mini-button:hover { border-color: var(--green); color: var(--green-dark); }

/* Teacher workspace */
.app-shell { max-width: 1700px; margin: 0 auto; }
#teacher-app.is-active, #student-app.is-active { display: grid; grid-template-columns: minmax(220px, .42fr) minmax(0, 2.1fr); grid-template-rows: auto 1fr; gap: 16px; align-items: start; }
#teacher-app > .workspace-heading, #student-app > .workspace-heading { grid-column: 1; grid-row: 1; min-height: 214px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.workspace-heading h1 { margin: 4px 0 18px; font-size: 24px; }
.identity-field { width: 100%; margin: 0; }
.student-identity { display: grid; grid-template-columns: 1fr; gap: 8px; }
.student-identity label { margin: 0; }
.tabbar { grid-column: 1; grid-row: 2; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.tabbar button, .tabbar a { min-height: 48px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: white; text-align: left; text-decoration: none; cursor: pointer; font-size: 12px; font-weight: 700; }
.tabbar button span { display: inline-block; min-width: 28px; margin-right: 8px; color: var(--green); font-size: 9px; letter-spacing: .08em; }
.tabbar button.is-active { color: white; background: var(--green); }
.tabbar button.is-active span { color: white; }
.tabbar button:hover:not(.is-active), .tabbar a:hover { color: var(--navy); background: var(--navy-soft); }
.tabbar button:disabled { color: #9aa5a1; background: #f3f5f4; cursor: not-allowed; }
.tabbar button:disabled span { color: #aab4b0; }
#teacher-app > .tab-panel { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.teacher-main, .student-main { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.teacher-main > .tab-panel { min-width: 0; }
.teacher-management-main { min-height: 620px; }
.teacher-published-panel { min-height: 620px; }
.teacher-section-heading { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.teacher-section-heading h2 { margin: 4px 0 8px; font-size: 22px; }
.teacher-section-heading p { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.teacher-create-panel { max-width: none; min-height: 620px; }
.teacher-create-panel .panel-title { margin-bottom: 28px; }
.teacher-create-panel > label textarea { min-height: 170px; }
.experiment-form-actions { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.experiment-form-actions .button { width: 100%; }
.teacher-empty-state { grid-column: 1 / -1; min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 14px; border: 1px dashed var(--line-strong); background: #fbfcfb; }
.teacher-empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: panel-in 320ms cubic-bezier(.16,1,.3,1) both; }
@keyframes panel-in { from { opacity: .7; transform: translateY(7px); filter: saturate(.82); } to { opacity: 1; transform: none; filter: saturate(1); } }
.two-column { display: grid; grid-template-columns: minmax(390px, 1.25fr) minmax(340px, .75fr); gap: 16px; align-items: start; }
.control-panel { padding: 20px; }
.panel-title, .panel-heading, .coach-header, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-title { margin-bottom: 18px; }
.panel-title > span, .panel-title > div > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.panel-title h2, .panel-title h3 { margin: 3px 0 0; font-size: 17px; }
.panel-title .text-button { margin-left: auto; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 13px; }
.experiment-class-field { grid-column: 1 / -1; }
.experiment-class-field small { display: block; margin-top: 7px; color: var(--text-subtle); font-size: 10px; font-weight: 600; line-height: 1.5; }
.experiment-class-field select:disabled { color: var(--muted); background: #f4f6fb; cursor: not-allowed; }
.list-panel { max-height: calc(100vh - 115px); overflow: auto; }
.record-list { display: grid; gap: 10px; }
.record-card { padding: 13px; border: 1px solid var(--line); background: #fbfcfb; }
.record-card > div, .record-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.record-card small { color: var(--muted); font-size: 10px; }
.record-card h3 { margin: 12px 0 5px; font-size: 14px; }
.record-card p { margin-bottom: 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.record-card footer { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.status-pill, .status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border-radius: 4px; color: var(--navy); background: var(--navy-soft); font-size: 10px; font-weight: 800; }
.status-pill.draft { color: #79500c; background: var(--amber-soft); }
.status-pill.partial_failure { color: var(--red); background: var(--red-soft); }
.status-pill.completed, .status-pill.published, .status-pill.ready_for_review { color: var(--green-dark); background: var(--green-soft); }
.empty { color: var(--muted); font-size: 11px; line-height: 1.65; }
.error-box { padding: 12px; color: var(--red); background: var(--red-soft); border: 1px solid #ffd8dd; font-size: 11px; }
.dashboard-toolbar { padding: 14px; display: flex; align-items: end; gap: 10px; }
.dashboard-toolbar label { min-width: 320px; margin: 0; }
.dashboard-content { margin-top: 16px; }
.metrics { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metrics article { min-height: 112px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.metrics article.alert { border-color: #f5c6cc; background: var(--red-soft); }
.metrics b { color: var(--green); font-size: 36px; line-height: 1; }
.metrics .alert b { color: var(--red); }
.metrics span { color: var(--muted); font-size: 11px; }
.student-table { overflow: hidden; }
.table-head, .table-row { padding: 13px 15px; display: grid; grid-template-columns: 1.3fr 1fr .55fr .7fr .85fr .7fr; gap: 12px; align-items: center; }
.table-head { color: var(--muted); background: #f1f4f3; font-size: 10px; font-weight: 750; }
.table-row { border-top: 1px solid var(--line); font-size: 12px; }
.table-row > span:first-child { display: flex; flex-direction: column; }
.table-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.dashboard-note { margin-top: 12px; color: var(--muted); font-size: 10px; }

/* Student join */
.student-main { min-width: 0; }
.join-panel { min-height: 360px; padding: 20px; }
.join-panel h2 { margin: 4px 0 18px; font-size: 20px; }
.published-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.published-card { min-height: 190px; padding: 15px; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fbfcfb; }
.published-card > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.published-card h3 { margin: 22px 0 7px; font-size: 15px; }
.published-card p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.published-card footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.published-card small { color: var(--muted); font-size: 10px; }
.published-card-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.student-task-list-panel { min-height: 460px; }
.student-task-list-head { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.student-task-list-head h2 { margin-bottom: 5px; }
.student-task-list-head p { color: var(--muted); font-size: 11px; }
.student-task-list-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.student-task-tabs { padding: 4px; display: grid; grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 4px; border: 1px solid #dce3f5; border-radius: 12px; background: #eef2fb; }
.student-task-tabs button { min-height: 36px; padding: 7px 13px; border: 0; border-radius: 9px; color: #687590; background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.student-task-tabs button span { margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(101,116,151,.1); }
.student-task-tabs button.is-active { color: #fff; background: linear-gradient(112deg,#3155d9,#6558d6 60%,#398fc9); box-shadow: 0 7px 18px rgba(49,85,217,.2); }
.student-task-tabs button.is-active span { background: rgba(255,255,255,.18); }
.student-task-sort.is-active { color: #2848bd; border-color: #aebbed; background: #edf1ff; }
.student-task-card { position: relative; min-height: 260px; overflow: hidden; border-radius: 14px; background: rgba(253,254,255,.94); }
.student-task-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #6b83da; }
.student-task-card[data-deadline-tone="overdue"] { border-color: #efb6b1; background: linear-gradient(150deg,#fffafa,#fff 58%); }
.student-task-card[data-deadline-tone="overdue"]::before { background: #d95049; }
.student-task-card[data-deadline-tone="soon"]::before { background: #cf8614; }
.student-task-card[data-deadline-tone="completed"]::before { background: #29936d; }
.student-task-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #3155d9; font-size: 10px; font-weight: 800; }
.student-task-state { padding: 4px 8px; border-radius: 999px; color: #3155d9; background: #edf1ff; }
.student-task-card[data-deadline-tone="completed"] .student-task-state { color: #187e55; background: #e7f6ef; }
.student-task-card h3 { margin-top: 18px; }
.student-task-deadline { margin: 16px 0 14px; padding: 10px 11px; display: grid; gap: 3px; border: 1px solid #dde4f4; border-radius: 10px; background: #f6f8fd; }
.student-task-deadline b { color: #26385f; font-size: 12px; }
.student-task-deadline span { color: #78839c; font-size: 9px; }
.student-task-card[data-deadline-tone="overdue"] .student-task-deadline { border-color: #f0c6c2; background: #fff0ee; }
.student-task-card[data-deadline-tone="overdue"] .student-task-deadline b { color: #bb3e38; }
.student-task-card[data-deadline-tone="soon"] .student-task-deadline b { color: #a9680b; }
.student-task-empty { grid-column: 1 / -1; min-height: 230px; padding: 30px; display: grid; place-content: center; gap: 8px; border: 1px dashed #cbd5ef; border-radius: 14px; color: #6f7c98; background: rgba(248,250,255,.72); text-align: center; }
.student-task-empty b { color: #26385f; font-size: 15px; }
.student-workbench-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Student workbench — mirrors AI coach */
.student-grid { max-width: 1700px; margin: 0 auto; display: grid; grid-template-columns: minmax(220px, .56fr) minmax(480px, 1.35fr) minmax(330px, .84fr); gap: 16px; align-items: start; }
.task-panel { min-height: 716px; padding: 20px; }
.panel-heading h1 { margin-bottom: 0; }
.task-panel .panel-heading h1 { font-size: 20px; letter-spacing: 0; word-break: keep-all; }
.task-summary { margin-top: 18px; color: #43514c; line-height: 1.7; }
.progress-block { margin: 22px 0; }
.progress-meta { margin-bottom: 7px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.progress-meta strong { color: var(--ink); }
.progress-track { height: 7px; overflow: hidden; border-radius: 2px; background: #e8ecea; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--green); }
.round-card { min-height: 82px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: #f7f9f8; }
.round-card span { color: var(--muted); font-size: 10px; }
.round-card b { color: var(--navy); font-size: 24px; }
.task-note { margin-top: 20px; padding: 12px; display: grid; grid-template-columns: 22px 1fr; gap: 8px; background: var(--navy-soft); border: 1px solid #dce2ff; }
.task-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.task-note strong { display: block; color: var(--ink); }
.note-symbol { width: 18px; height: 18px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 50%; font-size: 11px; font-weight: 800; }
.workspace-column { min-width: 0; display: grid; gap: 16px; }
.editor-panel { overflow: hidden; }
.panel-toolbar { min-height: 54px; padding: 8px 12px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.file-tab { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.python-dot { width: 25px; height: 25px; display: grid; place-items: center; color: #f4d678; background: #315f8e; border-radius: 4px; font-size: 10px; font-weight: 800; }
.editor-wrap { height: 410px; display: grid; grid-template-columns: 48px 1fr; overflow: hidden; background: var(--code); }
.line-numbers { margin: 0; padding: 18px 10px; overflow: hidden; color: #74838c; background: #131c23; border-right: 1px solid var(--code-line); text-align: right; font: 13px/1.72 "SFMono-Regular", Consolas, monospace; user-select: none; }
.code-editor { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 18px; resize: none; border: 0; border-radius: 0; outline: 0; color: #e2ece7; background: var(--code); caret-color: #ffcf66; font: 13px/1.72 "SFMono-Regular", Consolas, monospace; tab-size: 4; white-space: pre; overflow: auto; }
.editor-actions { min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.editor-actions input { margin: 0; }
.result-panel { min-height: 218px; overflow: hidden; }
.result-header { min-height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.result-tabs { display: flex; align-self: stretch; gap: 16px; }
.result-tab { padding: 0 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.result-tab.is-active { color: var(--ink); border-bottom-color: var(--green); }
.result-count { color: var(--muted); font-size: 10px; }
.result-content { padding: 12px 14px; }
.evidence-score { margin-bottom: 8px; color: var(--amber); font-size: 26px; font-weight: 800; }
.evidence-score.success { color: var(--green); }
.evidence-score.danger { color: var(--red); }
.test-line { min-height: 37px; display: grid; grid-template-columns: 20px 72px minmax(0, 1fr); gap: 8px; align-items: center; border-bottom: 1px solid #edf0ef; font-size: 10px; }
.test-line.passed b { color: var(--green); }
.test-line.failed b { color: var(--red); }
.test-line small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.timeline-panel { padding: 16px; overflow: hidden; }
.timeline { max-height: 260px; overflow: auto; }
.timeline-item { min-height: 46px; padding: 9px 0; display: grid; grid-template-columns: minmax(110px, .7fr) minmax(120px, 1fr) minmax(180px, 1.2fr); gap: 8px; align-items: center; border-bottom: 1px solid #edf0ef; font-size: 10px; }
.timeline-item span, .timeline-item small { color: var(--muted); }
.coach-panel-shell { min-height: 716px; padding: 18px; display: flex; flex-direction: column; }
.coach-header h2 { margin: 0; }
.online-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.level-rail { margin: 18px 0 7px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.level-rail span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); background: #f7f9f8; font-size: 10px; font-weight: 800; }
.level-rail span.is-current { color: white; border-color: var(--green); background: var(--green); }
.level-rail span.is-available:not(.is-current) { color: var(--navy); border-color: #9fb2c4; background: var(--navy-soft); }
.level-reason { margin: 0 0 8px; min-height: 28px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.coach-box { min-height: 540px; display: flex; flex-direction: column; }
.coach-box > span { color: var(--green-dark); font-size: 10px; font-weight: 800; }
.coach-box > h3 { margin: 5px 0 8px; font-size: 14px; }
.conversation { min-height: 260px; max-height: 340px; padding: 8px 4px 12px 0; overflow-y: auto; }
.coach-answer { margin: 0 0 10px; padding: 11px 12px; color: var(--ink); background: var(--green-soft); border: 1px solid #dce2ff; border-radius: 6px; font-size: 11px; line-height: 1.62; white-space: normal; }
.coach-answer p { margin: 5px 0; }
.coach-answer ol { margin: 7px 0 0; padding-left: 18px; }
.prompt-area { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.prompt-area label { margin-bottom: 7px; }
.prompt-area textarea { min-height: 76px; margin: 0; }
.prompt-actions { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-actions > span { max-width: 190px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.coach-empty { min-height: 330px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.coach-empty p { margin-bottom: 6px; font-size: 12px; }
.coach-empty small { max-width: 260px; line-height: 1.6; }
#coach-panel:not([hidden]) + .coach-empty { display: none; }

/* Six-module responsibility workspaces */
.workspace-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.scope-toolbar { min-height: 72px; margin-bottom: 14px; padding: 10px 12px; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(220px, .8fr) auto auto; gap: 10px; align-items: end; }
.scope-toolbar label { margin: 0; }
.source-chip { min-height: 36px; padding: 9px 10px; display: inline-flex; align-items: center; color: var(--green-dark); background: var(--green-soft); border: 1px solid #b9d8cf; border-radius: 4px; font-size: 10px; font-weight: 750; }
.teacher-home-grid { margin-top: 16px; }
.teacher-evidence-panel, .teacher-report-inline { min-height: 0 !important; margin-top: 16px; }
#teacher-student-evidence { gap: 16px; }
.module-page { min-height: 690px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.module-page-head { margin-bottom: 18px; padding-bottom: 16px; display: flex; justify-content: space-between; align-items: end; gap: 20px; border-bottom: 1px solid var(--line); }
.module-page-head > div { position: relative; padding-left: 58px; }
.module-page-head h2 { margin: 3px 0 5px; font-size: 21px; }
.module-page-head p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.module-index { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 4px; font-size: 11px; font-weight: 850; }
.module-content { display: grid; gap: 14px; }
.source-banner { min-height: 48px; padding: 9px 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: var(--green-dark); background: var(--green-soft); border: 1px solid #dce2ff; }
.source-banner span, .source-banner small { font-size: 10px; }
.source-banner b { font-size: 12px; }
.source-banner.is-failed { color: var(--red); background: var(--red-soft); border-left-color: var(--red); }
.metrics-wide { grid-template-columns: repeat(6, minmax(100px, 1fr)); }
.metrics-wide article { min-height: 96px; }
.metrics-wide b { font-size: 29px; }
.data-panel { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 5px; }
.data-panel-head { min-height: 48px; padding: 10px 13px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #f5f7f6; border-bottom: 1px solid var(--line); }
.data-panel-head h3 { margin: 0; font-size: 13px; }
.data-panel-head span { color: var(--muted); font-size: 10px; }
.data-panel > .empty { padding: 16px; }
.data-table { overflow-x: auto; }
.data-row { min-width: 800px; padding: 11px 13px; display: grid; grid-template-columns: 1.2fr .8fr .55fr .7fr .7fr .75fr; gap: 10px; align-items: center; border-top: 1px solid #edf0ef; font-size: 11px; }
.data-row:first-child { border-top: 0; }
.data-row > span:first-child { display: flex; flex-direction: column; }
.data-row small { color: var(--muted); }
.data-head { color: var(--muted); background: #fbfcfb; font-size: 10px; font-weight: 800; }
.module-columns { grid-template-columns: minmax(300px, .75fr) minmax(420px, 1.25fr); }
.version-card, .raw-record, .evidence-card, .intervention-card, .coach-cycle { margin: 10px; padding: 11px; background: #fbfcfb; border: 1px solid var(--line); }
.version-card > div, .evidence-card > div, .intervention-card > div, .coach-cycle > div { display: flex; justify-content: space-between; gap: 12px; }
.version-card code { color: var(--navy); font-size: 10px; }
.version-card p, .raw-record p, .evidence-card p, .intervention-card p, .coach-cycle p { margin: 7px 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.version-card small, .raw-record small, .evidence-card small, .intervention-card small, .coach-cycle small { color: var(--muted); font-size: 9px; }
.version-card .mini-button { margin-top: 8px; }
.diff-summary { padding: 10px 12px; display: flex; gap: 8px; }
.diff-summary span { padding: 5px 7px; color: var(--navy); background: var(--navy-soft); font-size: 10px; font-weight: 750; }
.diff-view, .raw-record pre { max-height: 360px; margin: 0; padding: 14px; overflow: auto; color: #dfe9e4; background: var(--code); font: 11px/1.65 "SFMono-Regular", Consolas, monospace; }
.raw-record pre { margin-top: 9px; max-height: 180px; }
.event-stream { padding: 8px 12px; }
.event-stream article { min-height: 50px; padding: 9px 0; display: grid; grid-template-columns: 130px 1fr 180px; gap: 12px; align-items: center; border-bottom: 1px solid #edf0ef; font-size: 10px; }
.event-stream span { color: var(--green-dark); font-weight: 800; }
.event-stream small { color: var(--muted); text-align: right; }
.analysis-row, .grading-row, .risk-row { min-height: 66px; padding: 11px 13px; display: grid; gap: 12px; align-items: center; border-bottom: 1px solid #edf0ef; font-size: 11px; }
.analysis-row { grid-template-columns: 1.2fr .8fr 1fr 1fr 1fr; }
.grading-row { grid-template-columns: 1fr 2fr auto; }
.risk-row { grid-template-columns: 1fr .65fr 2fr auto; }
.analysis-row > div, .grading-row > div:first-child, .risk-row > div { display: flex; flex-direction: column; }
.analysis-row small, .grading-row small, .risk-row small { color: var(--muted); font-size: 9px; }
.risk-text { font-size: 10px; }
.risk-text.high { color: var(--red); }
.risk-text.low { color: var(--green-dark); }
.risk-level { width: fit-content; padding: 5px 8px; border-radius: 3px; font-size: 10px; font-weight: 800; }
.risk-level.level-high { color: var(--red); background: var(--red-soft); }
.risk-level.level-medium { color: #8a5b00; background: var(--amber-soft); }
.risk-level.level-low { color: var(--green-dark); background: var(--green-soft); }
.trend-list { padding: 12px; display: grid; gap: 8px; }
.trend-list > div { display: grid; grid-template-columns: 70px repeat(3, minmax(4px, 1fr)) 180px; gap: 5px; align-items: center; font-size: 9px; }
.trend-list i { width: calc((var(--value) + 1) * 10px); max-width: 100%; height: 8px; display: block; }
.trend-list i.high { background: var(--red); }
.trend-list i.medium { background: var(--amber); }
.trend-list i.low { background: var(--green); }
.trend-list small { color: var(--muted); }
.record-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.report-outline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.report-outline article { min-height: 180px; padding: 14px; background: #fbfcfb; border: 1px solid var(--line); border-top: 3px solid var(--green); }
.report-outline span { color: var(--green); font-size: 11px; font-weight: 850; }
.report-outline h3 { margin: 24px 0 8px; font-size: 14px; }
.report-outline p { color: var(--muted); font-size: 10px; line-height: 1.6; }

/* Focused student workbench */
#student-app.is-active { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 12px; }
#student-app > .student-heading { grid-column: 1; grid-row: 1; min-height: 74px; padding: 13px 16px; flex-direction: row; align-items: center; }
.student-heading-copy { display: flex; align-items: baseline; gap: 14px; }
.student-heading-copy .eyebrow { margin: 0; }
.student-heading-copy h1 { margin: 0; font-size: 20px; }
.student-heading-copy p { padding-left: 14px; border-left: 1px solid var(--line); }
.student-profile-menu { position: relative; min-width: 240px; }
.student-profile-menu > summary { min-height: 44px; padding: 8px 34px 8px 12px; display: flex; flex-direction: column; justify-content: center; list-style: none; border: 1px solid var(--line); border-radius: 5px; background: #fbfcfb; cursor: pointer; }
.student-profile-menu > summary::-webkit-details-marker { display: none; }
.student-profile-menu > summary::after { content: "+"; position: absolute; top: 13px; right: 13px; color: var(--green); font-size: 17px; font-weight: 700; }
.student-profile-menu[open] > summary::after { content: "−"; }
.student-profile-menu > summary span { color: var(--muted); font-size: 9px; font-weight: 750; }
.student-profile-menu > summary b { margin-top: 2px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.student-profile-menu .student-identity { position: absolute; z-index: 12; top: calc(100% + 8px); right: 0; width: min(620px, calc(100vw - 48px)); padding: 14px; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 10px; background: white; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 45px rgba(23, 43, 36, .14); }
.student-profile-menu .student-identity input { margin-top: 5px; }
#student-app > .student-primary-nav { grid-column: 1; grid-row: 2; flex-direction: row; }
#student-app > .student-primary-nav button { position: relative; flex: 1; min-height: 46px; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }
#student-app > .student-primary-nav button:last-child { border-right: 0; }
.student-primary-nav strong { position: absolute; top: 6px; margin-left: 7px; min-width: 20px; height: 20px; padding: 0 6px; color: #fff; border-radius: 999px; background: #c33f51; box-shadow: 0 0 0 4px rgba(195,63,81,.1); font-size: 10px; line-height: 20px; }
#student-app > .student-workspace-nav { grid-column: 1; grid-row: 2; flex-direction: row; }
#student-app > .student-workspace-nav button { flex: 1; min-height: 42px; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }
#student-app .student-main { grid-column: 1; grid-row: 3; }
#student-app > .student-workspace-nav[hidden] + .student-main { grid-row: 2; }
.student-primary-page { display: none; }
.student-primary-page.is-active { display: block; animation: workspace-pearl-arrive 280ms cubic-bezier(.16,1,.3,1) both; }
.student-workbench-bar { min-height: 54px; margin-bottom: 12px; padding: 8px 10px 8px 14px; display: grid; grid-template-columns: minmax(240px, 1.35fr) minmax(180px, .7fr) auto auto; gap: 10px; align-items: center; }
.student-workbench-bar > div { min-width: 0; }
.student-workbench-bar > div > span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 750; }
.student-workbench-bar > div > b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.student-primary-workbench { display: grid; grid-template-columns: minmax(250px, .38fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.student-primary-workbench .student-task-summary { position: sticky; top: 92px; min-height: 0; padding: 18px; }
.student-task-summary .panel-heading { align-items: flex-start; }
.student-task-summary .task-summary { margin: 15px 0 0; font-size: 11px; line-height: 1.75; }
.student-task-summary .progress-block { margin: 20px 0 16px; }
.student-task-summary .round-card { min-height: 68px; }
.student-task-summary .round-card b { font-size: 21px; }
.student-compact-metrics { margin-top: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.student-compact-metrics article { min-height: 62px; padding: 9px; display: flex; flex-direction: column; justify-content: space-between; background: #f7f9f8; border: 1px solid var(--line); }
.student-compact-metrics b { color: var(--green-dark); font-size: 17px; line-height: 1; }
.student-compact-metrics span { color: var(--muted); font-size: 9px; }
.student-coding-column { gap: 12px; }
.student-editor-panel { border-color: #c6d5ce; box-shadow: 0 14px 36px rgba(23, 50, 77, .09); }
.focus-label { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); font-size: 10px; font-weight: 800; }
.focus-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.student-editor-panel .editor-wrap { height: clamp(330px, calc(100vh - 485px), 480px); min-height: 330px; }
.student-editor-panel .editor-actions { min-height: 66px; padding: 9px 10px; grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr); background: #fbfcfb; }
.student-editor-panel .editor-actions input { min-height: 46px; background: white; }
.student-editor-panel .editor-actions input::placeholder { color: #929d98; opacity: 1; }
.student-submit-button { min-height: 46px; padding-inline: 22px; font-size: 13px; box-shadow: 0 8px 18px rgba(19, 121, 95, .18); }
.student-submit-button:hover:not(:disabled) { box-shadow: 0 11px 24px rgba(19, 121, 95, .24); }
.student-code-locked { color: #aab8b2; cursor: not-allowed; }
.student-result-panel { min-height: 150px; }
.student-result-panel .result-header { min-height: 54px; }
.student-result-panel .result-header h2 { margin-top: 2px; font-size: 15px; }
.student-result-panel .result-header .eyebrow { margin: 0; font-size: 9px; }
.student-detail-panel { margin-top: 14px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.student-detail-panel > summary { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; }
.student-detail-panel > summary::-webkit-details-marker { display: none; }
.student-detail-panel > summary span { display: flex; flex-direction: column; gap: 3px; }
.student-detail-panel > summary b { font-size: 13px; }
.student-detail-panel > summary small { color: var(--muted); font-size: 10px; }
.student-detail-panel > summary i { color: var(--green-dark); font-size: 10px; font-style: normal; font-weight: 800; }
.student-detail-panel[open] > summary { border-bottom: 1px solid var(--line); background: #f8faf9; }
.student-detail-panel[open] > summary i { font-size: 0; }
.student-detail-panel[open] > summary i::after { content: "收起详情"; font-size: 10px; }
.student-detail-content { padding: 14px; display: grid; gap: 14px; background: #f7f9f8; }
.student-detail-content > .student-compact-metrics { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.student-detail-content .module-page { min-height: 0; box-shadow: none; }
.student-detail-content .module-page-head { align-items: center; }
.student-detail-content .task-facts article { min-height: 86px; }
.student-sync-details .module-handoff { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.student-sync-details .module-handoff > small { grid-column: 1 / -1; }
.student-sync-details .module-handoff > div { min-height: 38px; align-items: center; }
.student-tab-panel { display: none; }
.student-tab-panel.is-active { display: block; animation: panel-in 320ms cubic-bezier(.16,1,.3,1) both; }
.task-facts { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.task-facts article { min-height: 112px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: white; border: 1px solid var(--line); }
.task-facts span { color: var(--muted); font-size: 10px; }
.task-facts b { font-size: 12px; line-height: 1.45; }
.module-handoff { margin-top: 18px; display: grid; gap: 6px; }
.module-handoff > small { color: var(--muted); font-size: 9px; word-break: break-all; }
.module-handoff > div { padding: 7px 9px; display: flex; justify-content: space-between; background: #f5f7f6; font-size: 9px; }
.step-success { color: var(--green-dark); }
.step-failed { color: var(--red); }
.evidence-sidebar { min-height: 716px; padding: 18px; }
.evidence-sidebar h2 { margin: 3px 0 18px; font-size: 18px; }
.evidence-sidebar ol { padding-left: 22px; color: var(--navy); }
.evidence-sidebar li { margin-bottom: 12px; font-size: 11px; font-weight: 750; }
.evidence-sidebar > p:last-child { color: var(--muted); font-size: 10px; line-height: 1.65; }
.coach-grid { grid-template-columns: minmax(240px, .55fr) minmax(480px, 1.2fr) minmax(300px, .7fr); }
.attempt-summary { padding: 13px; display: flex; flex-direction: column; gap: 6px; background: var(--navy-soft); border: 1px solid #dce2ff; }
.attempt-summary span, .attempt-summary small { color: var(--muted); font-size: 10px; }
.object-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
.object-grid article { padding: 11px; background: #fbfcfb; border: 1px solid var(--line); }
.object-grid span { color: var(--green-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.object-grid p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

/* Original-module faithful workspaces inside the unified shell */
.timeline-workspace { display: grid; grid-template-columns: minmax(230px, .62fr) minmax(430px, 1.15fr) minmax(290px, .78fr); gap: 12px; align-items: stretch; }
.timeline-version-panel, .timeline-event-panel { max-height: 760px; overflow: auto; }
.timeline-version-list { padding: 8px; }
.timeline-version-list .version-card { position: relative; margin: 0 0 8px; padding-left: 43px; }
.timeline-version-list .version-card.is-selected { border-color: #9acabc; background: var(--green-soft); }
.version-node { position: absolute; left: 12px; top: 14px; width: 21px; height: 21px; display: grid; place-items: center; color: white; background: var(--muted); border-radius: 50%; font-size: 10px; font-weight: 900; }
.version-node.success { background: var(--green); }
.version-node.failed { background: var(--red); }
.timeline-center { display: grid; grid-template-rows: minmax(330px, 1fr) minmax(280px, .8fr); gap: 12px; }
.timeline-code-panel, .timeline-diff-panel { min-width: 0; }
.timeline-code { min-height: 300px; max-height: 440px; margin: 0; padding: 12px 0; overflow: auto; color: #dfe9e4; background: var(--code); font: 11px/1.65 "SFMono-Regular", Consolas, monospace; }
.timeline-code > span { display: grid; grid-template-columns: 42px 1fr; padding: 0 12px; }
.timeline-code i { color: #71808d; font-style: normal; text-align: right; padding-right: 12px; user-select: none; }
.timeline-code code { white-space: pre; }
.timeline-filter-note { padding: 9px 12px; color: var(--muted); background: #fbfcfb; border-bottom: 1px solid var(--line); font-size: 9px; }
.timeline-event-panel .event-stream article { grid-template-columns: 90px 1fr; }
.timeline-event-panel .event-stream small { grid-column: 2; text-align: left; }
.grading-workspace { display: grid; gap: 14px; }
.grading-student-card { padding: 16px; background: white; border: 1px solid var(--line); box-shadow: var(--shadow); }
.grading-student-card > header { margin-bottom: 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; }
.grading-student-card h3 { margin: 2px 0 3px; font-size: 17px; }
.grading-student-card header small { color: var(--muted); }
.grading-score { display: flex; align-items: baseline; color: var(--green); }
.grading-score b { font-size: 34px; }
.grading-score span { font-size: 10px; }
.grading-detail-grid { display: grid; grid-template-columns: minmax(430px, 1.25fr) minmax(270px, .75fr); gap: 12px; }
.grading-rubric > div:not(.data-panel-head) { min-height: 45px; padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #edf0ef; font-size: 10px; }
.grading-rubric > div:not(.data-panel-head) b { color: var(--green); font-size: 18px; }
.grading-feedback { margin-top: 12px; }
.risk-overview-grid { margin-bottom: 14px; display: grid; grid-template-columns: minmax(320px, .72fr) minmax(480px, 1.28fr); gap: 14px; }
.risk-summary-panel .metrics { margin: 12px; grid-template-columns: repeat(2, 1fr); }
.risk-summary-panel .metrics article { min-height: 84px; box-shadow: none; }
.risk-monitor { overflow-x: auto; }
.risk-table { min-width: 980px; }
.risk-table-row { min-height: 62px; padding: 9px 12px; display: grid; grid-template-columns: 1.35fr 1fr repeat(5, .75fr) .85fr; gap: 10px; align-items: center; border-top: 1px solid #edf0ef; font-size: 10px; }
.risk-table-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.risk-table-row small { max-width: 220px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.risk-table-head { min-height: 42px; color: var(--muted); background: #fbfcfb; border-top: 0; font-weight: 800; }

/* Dialogs, embedded tools, feedback */
.detail-dialog { width: min(980px, calc(100% - 30px)); max-height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 70px rgba(15, 28, 23, .22); }
.detail-dialog::backdrop { background: rgba(21, 35, 31, .55); backdrop-filter: blur(5px); }
.dialog-shell { padding: 22px; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; }
.dialog-head h2 { margin: 4px 0 18px; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 4px; background: white; cursor: pointer; font-size: 20px; }
.detail-metrics { margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.detail-metrics span { padding: 12px; color: var(--muted); background: #f7f9f8; border: 1px solid var(--line); font-size: 11px; }
.detail-metrics b { display: block; margin-top: 4px; color: var(--ink); font-size: 18px; }
.attempt-card { margin-bottom: 8px; padding: 12px; border: 1px solid var(--line); background: #fbfcfb; }
.attempt-card > div { display: flex; justify-content: space-between; }
.attempt-card span { color: var(--green); }
.attempt-card p, .attempt-card small { color: var(--muted); font-size: 10px; }
.trace-item { padding: 9px 11px; background: var(--navy-soft); border: 1px solid #dce2ff; font-size: 11px; }
.trace-item b { margin-right: 12px; color: var(--navy); }
.detail-actions, .tool-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.tool-links button { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--navy); background: white; cursor: pointer; font-size: 10px; }
.workspace { position: fixed; z-index: 30; inset: 0; display: grid; grid-template-rows: 58px 1fr; background: var(--canvas); transform: translateY(102%); transition: transform 280ms ease; }
.workspace.is-open { transform: none; }
.workspace-bar { padding: 0 20px; display: flex; justify-content: space-between; align-items: center; background: white; border-bottom: 1px solid var(--line); }
.workspace-bar > div { display: flex; align-items: center; gap: 12px; }
.workspace-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.workspace-actions a, .workspace-actions button { padding: 6px 8px; border: 0; color: var(--navy); background: transparent; text-decoration: none; cursor: pointer; font-size: 11px; }
.workspace iframe { width: 100%; height: 100%; border: 0; background: var(--canvas); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); padding: 11px 14px; color: white; background: var(--ink); border-radius: 5px; box-shadow: 0 14px 34px rgba(15, 28, 23, .22); opacity: 0; transform: translateY(10px); pointer-events: none; transition: 180ms ease; font-size: 12px; }
.toast.show { opacity: 1; transform: none; }
.toast.is-danger { background: var(--red); }

@media (max-width: 1180px) {
  .topbar { grid-template-columns: 1fr 1fr; }
  .course-context { display: none; }
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 30px; }
  .hero-copy h1 { font-size: clamp(34px, 4.7vw, 52px); }
  .journey-track { grid-template-columns: repeat(3, 1fr); }
  .journey-track li { min-height: 144px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  #teacher-app.is-active, #student-app.is-active { display: block; }
  #teacher-app > .workspace-heading, #student-app > .workspace-heading { min-height: auto; margin-bottom: 12px; flex-direction: row; align-items: end; }
  .teacher-main, .student-main { grid-column: auto; grid-row: auto; }
  .identity-field { width: 260px; }
  .student-identity { width: min(100%, 520px); grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .tabbar { margin-bottom: 14px; flex-direction: row; }
  .tabbar button, .tabbar a { flex: 1; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }
  .two-column { grid-template-columns: 1fr; }
  .list-panel { max-height: none; }
  .student-grid { grid-template-columns: minmax(210px, .48fr) minmax(470px, 1.25fr); }
  .coach-panel-shell { grid-column: 1 / -1; min-height: 560px; }
  .coach-box { min-height: 380px; }
  .conversation { min-height: 180px; max-height: 260px; }
  .published-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-toolbar { grid-template-columns: 1fr 1fr; }
  .metrics-wide { grid-template-columns: repeat(3, 1fr); }
  .report-outline { grid-template-columns: repeat(3, 1fr); }
  .timeline-workspace { grid-template-columns: minmax(230px, .55fr) minmax(480px, 1.2fr); }
  .timeline-event-panel { grid-column: 1 / -1; max-height: none; }
  .grading-detail-grid, .risk-overview-grid { grid-template-columns: 1fr; }
  .coach-grid { grid-template-columns: minmax(220px, .55fr) minmax(470px, 1.2fr); }
  .coach-grid .evidence-sidebar { grid-column: 1 / -1; min-height: auto; }
  #student-app > .student-heading { align-items: center; }
  .student-primary-workbench { grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); }
  .student-editor-panel .editor-wrap { height: clamp(330px, calc(100vh - 500px), 450px); }
}

@media (max-width: 760px) {
  .topbar { position: static; grid-template-columns: 1fr; min-height: auto; gap: 10px; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; }
  main { padding: 14px; }
  .hero { grid-template-columns: 1fr; padding: 22px; }
  .hero::before { bottom: 38%; font-size: 150px; }
  .hero-copy h1 { font-size: clamp(31px, 10vw, 44px); }
  .lede { font-size: 13px; }
  .hero-principles { display: grid; }
  .role-gate { padding: 18px; }
  .product-values, .learning-journey, .audience { padding: 22px; }
  .value-grid, .audience-grid { grid-template-columns: 1fr; }
  .value-grid article { min-height: 210px; }
  .journey-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .journey-heading > p { text-align: left; }
  .journey-track { grid-template-columns: 1fr; }
  .journey-track li { min-height: 118px; padding-right: 0; }
  .journey-track li:not(:last-child)::after { top: auto; right: 4px; bottom: 14px; transform: rotate(90deg); }
  .journey-track span { margin-top: 26px; }
  .audience-card { min-height: 390px; }
  .audience-card ul { grid-template-columns: 1fr; }
  #teacher-app > .workspace-heading, #student-app > .workspace-heading { align-items: stretch; flex-direction: column; }
  .identity-field { width: 100%; }
  .tabbar { overflow-x: auto; }
  .tabbar button, .tabbar a { min-width: 112px; }
  .form-grid, .published-grid, .metrics { grid-template-columns: 1fr; }
  .scope-toolbar, .record-groups, .task-facts, .object-grid, .report-outline { grid-template-columns: 1fr; }
  .dashboard-toolbar { align-items: stretch; flex-direction: column; }
  .dashboard-toolbar label { min-width: 0; }
  .table-head { display: none; }
  .table-row { grid-template-columns: 1fr 1fr; }
  .student-identity { grid-template-columns: 1fr; }
  .student-grid { grid-template-columns: 1fr; }
  .task-panel, .coach-panel-shell { min-height: auto; }
  .editor-wrap { height: 380px; grid-template-columns: 40px 1fr; }
  .editor-actions { grid-template-columns: 1fr; }
  .prompt-actions { align-items: stretch; flex-direction: column; }
  .prompt-actions > span { max-width: none; }
  .timeline-item { grid-template-columns: 1fr; }
  .detail-metrics { grid-template-columns: 1fr; }
  .module-page { padding: 14px; }
  .module-page-head { align-items: stretch; flex-direction: column; }
  .module-columns { grid-template-columns: 1fr; }
  .event-stream article, .analysis-row, .grading-row, .risk-row { grid-template-columns: 1fr; }
  .event-stream small { text-align: left; }
  .metrics-wide { grid-template-columns: repeat(2, 1fr); }
  .trend-list > div { grid-template-columns: 60px 1fr; }
  .trend-list i { display: none; }
  .timeline-workspace { grid-template-columns: 1fr; }
  .timeline-center { grid-template-rows: auto; }
  .grading-student-card > header { grid-template-columns: 1fr; }
  .student-heading-copy { align-items: flex-start; flex-direction: column; gap: 4px; }
  .student-heading-copy p { padding-left: 0; border-left: 0; }
  .student-profile-menu { width: 100%; }
  .student-profile-menu .student-identity { position: static; width: 100%; margin-top: 8px; grid-template-columns: 1fr; box-shadow: none; }
  #student-app > .student-workspace-nav button { min-width: 132px; }
  .student-workbench-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .student-workbench-bar > div:nth-child(2), .student-workbench-bar .source-chip { display: none; }
  .student-primary-workbench { grid-template-columns: 1fr; }
  .student-primary-workbench .student-task-summary { position: static; }
  .student-detail-content > .student-compact-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-editor-panel .editor-wrap { height: 380px; min-height: 320px; }
  .student-editor-panel .editor-actions { grid-template-columns: 1fr; }
  .student-submit-button { width: 100%; min-height: 50px; }
  .student-sync-details .module-handoff { grid-template-columns: 1fr; }
  .student-sync-details .module-handoff > small { grid-column: auto; }
}

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

/* CodeMentor 2026 visual system — presentation only, business bindings remain intact. */
:root {
  --ink: #172033;
  --muted: #667085;
  --text-subtle: #59657b;
  --line: #e7eaf3;
  --line-strong: #d7dcec;
  --surface: #f9fbff;
  --canvas: #eef3fc;
  --green: #3155d9;
  --green-dark: #2848bd;
  --green-soft: #eef1ff;
  --navy: #3155d9;
  --navy-soft: #eef1ff;
  --purple: #7357d9;
  --purple-soft: #f2efff;
  --cyan: #4385c5;
  --success: #2eae78;
  --success-soft: #eaf8f2;
  --amber: #e59a32;
  --amber-soft: #fff6e8;
  --red: #dc5360;
  --red-soft: #fff0f2;
  --code: #111a2d;
  --code-line: #24304a;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow: 0 12px 34px rgba(58, 73, 139, .09);
  --shadow-float: 0 22px 54px rgba(58, 73, 139, .17);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

html { overflow-x: clip; background: var(--canvas); }
body {
  min-width: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 88% 2%, rgba(122,154,255,.2), transparent 29%),
    radial-gradient(circle at 9% 18%, rgba(77,207,204,.12), transparent 25%),
    linear-gradient(145deg,#eef4ff 0%,#f7f3ff 50%,#edf9fa 100%);
  background-attachment: fixed;
  font-size: 14px;
  line-height: 1.55;
}
::selection { color: #fff; background: var(--green); }
* { scrollbar-color: #b8c1dc transparent; scrollbar-width: thin; }
button, input, select, textarea, summary, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible, [role="separator"]:focus-visible {
  outline: 3px solid rgba(49, 85, 217, .26); outline-offset: 2px;
}
h1 { font-size: clamp(24px, 2vw, 30px); letter-spacing: -.025em; }
h2 { font-size: 18px; letter-spacing: -.015em; }
h3 { font-size: 15px; }

.topbar {
  min-height: 68px;
  border-color: rgba(204,215,244,.78);
  background: linear-gradient(100deg,rgba(250,252,255,.92),rgba(245,242,255,.9) 56%,rgba(239,251,252,.9));
  box-shadow: 0 7px 26px rgba(66,82,143,.08);
}
.brand-mark { border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 7px 18px rgba(49,85,217,.12); }
.brand strong { color: var(--ink); }
.context-label, .eyebrow { color: var(--text-subtle); letter-spacing: .055em; }
.eyebrow { font-size: 10px; opacity: .86; }
/* Headings carry hierarchy directly; legacy kickers remain in DOM only for compatibility. */
.eyebrow { display: none; }
.connection-pill, .scope-chip { border-radius: 999px; background: #fff; }
.connection-pill:not(.is-error) i, .online-label i { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
main { width: 100%; max-width: 1800px; margin-inline: auto; padding: 24px clamp(14px, 2.5vw, 40px) 48px; }

.panel, .control-panel, .join-panel, .dashboard-toolbar, .student-table, .data-panel, .grading-student-card, .student-detail-panel {
  border-color: rgba(215,222,244,.86); border-radius: var(--radius-md); box-shadow: var(--shadow);
  background: linear-gradient(145deg,rgba(251,253,255,.97),rgba(245,246,255,.95) 58%,rgba(241,250,251,.93));
}
.panel:hover, .published-card:hover { border-color: #d8def2; }
.workspace-heading, .tabbar { border-radius: var(--radius-md) !important; }
.tabbar { padding: 6px; gap: 4px; }
.tabbar button, .tabbar a { min-height: 46px; border: 0; border-radius: 9px; }
.tabbar button:hover, .tabbar a:hover { color: var(--green); background: #f7f8fd; }
.tabbar button.is-active, .tabbar a.is-active { color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px #dde3ff; }
.tabbar button span { color: var(--green); }
.tabbar button > span { display: none; }

label { color: #536079; font-size: 12px; }
input, select, textarea { min-height: 42px; border-color: var(--line-strong); border-radius: 9px; color: var(--ink); background: #fff; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
input:hover, select:hover, textarea:hover { border-color: #b9c3e0; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(49,85,217,.1); }
input::placeholder, textarea::placeholder { color: #667085; opacity: 1; }
.button { min-height: 40px; border-radius: 9px; font-size: 13px; box-shadow: none; }
.button.primary { background: linear-gradient(110deg,#3155d9,#6f63df 58%,#499cda); box-shadow: 0 9px 21px rgba(74,83,195,.18); }
.button.primary:hover:not(:disabled) { background: linear-gradient(110deg,#2848bd,#6354d2 58%,#3589ca); box-shadow: 0 12px 26px rgba(74,83,195,.26); }
.button.coach { background: linear-gradient(110deg,#7357d9,#9b6ddd); }
.button.ghost:hover:not(:disabled) { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.text-button, .mini-button, .icon-button, .tool-links button { min-height: 34px; border-radius: 8px; color: var(--green); }
.text-button:hover, .mini-button:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
button:disabled, .button:disabled { opacity: .52; filter: saturate(.55); }

.metrics { gap: 12px; }
.metrics article { min-height: 112px; padding: 18px; border: 1px solid rgba(216,223,245,.9); border-radius: var(--radius-md); box-shadow: none; background: linear-gradient(145deg,#f8fbff,#eef3ff); }
.metrics article:nth-child(4n+2) { background: linear-gradient(145deg,#fbf9ff,#f1edff); }
.metrics article:nth-child(4n+3) { background: linear-gradient(145deg,#f7fcff,#eaf8fb); }
.metrics article:nth-child(4n) { background: linear-gradient(145deg,#f7fffd,#eaf8f5); }
.metrics b { color: var(--green); font-size: clamp(25px, 2.4vw, 34px); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.metrics span { color: var(--muted); font-size: 12px; }
.data-panel { overflow: hidden; background: linear-gradient(145deg,#fbfdff,#f4f6ff); }
.data-panel-head { min-height: 58px; padding: 14px 16px; border-color: var(--line); background: linear-gradient(90deg,#f5f8ff,#f0edff 58%,#edfafa); }
.data-panel-head small, .data-panel-head span { color: var(--text-subtle); }
.data-row, .analysis-row, .grading-row, .risk-row { font-size: 12px; border-color: var(--line); }
.data-head, .risk-table-head { color: #536079; background: #f8f9fd; }
.data-table, .risk-monitor { overflow: auto; overscroll-behavior: contain; }

.status-pill, .status-badge, .risk-level, .source-chip { border-radius: 999px; }
.risk-level.level-high { color: #b73543; background: var(--red-soft); }
.risk-level.level-medium { color: #9b6417; background: var(--amber-soft); }
.risk-level.level-low { color: #187e55; background: var(--success-soft); }
.source-banner { border-radius: var(--radius-sm); background: var(--green-soft); border-color: #dce2ff; }
.source-banner:not(.is-failed) b { color: var(--green); }
.error-box { padding: 14px 16px; color: #a52f3b; background: var(--red-soft); border: 1px solid #ffd8dd; border-radius: var(--radius-sm); }
.empty, .coach-empty { min-height: 110px; padding: 28px 20px; display: grid; place-items: center; color: var(--muted); text-align: center; background: #fafbfe; border: 1px dashed #d8ddec; border-radius: var(--radius-sm); }

.editor-panel, .timeline-code-panel, .timeline-diff-panel { overflow: hidden; }
.editor-wrap, .timeline-code, .diff-view, .raw-record pre { color: #dce5ff; background: var(--code); scrollbar-color: #4c5d82 #111a2d; }
.line-numbers { color: #71809f; background: #0d1525; border-color: var(--code-line); }
.code-editor { color: #e8eeff; background: var(--code); caret-color: #8da4ff; }
.python-dot { color: #fff; background: var(--green); border-radius: 6px; }
.student-editor-panel { border-color: #d9def0; box-shadow: 0 12px 32px rgba(33,45,92,.08); }

.student-primary-workbench { grid-template-columns: minmax(240px, var(--split-student, 30%)) minmax(420px, 1fr); gap: 0; }
.coach-grid { grid-template-columns: minmax(220px, var(--split-coach-left, 22%)) minmax(420px, 1fr) minmax(280px, var(--split-coach-right, 27%)); gap: 0; }
.timeline-workspace { grid-template-columns: minmax(220px, var(--split-timeline-left, 24%)) minmax(420px, 1fr) minmax(280px, var(--split-timeline-right, 27%)); gap: 0; }
.grading-detail-grid { grid-template-columns: minmax(360px, var(--split-grading, 66%)) minmax(280px, 1fr); gap: 0; }
.risk-overview-grid { grid-template-columns: minmax(300px, var(--split-risk, 36%)) minmax(420px, 1fr); gap: 0; }
.student-primary-workbench.is-resizable { grid-template-columns: minmax(240px, var(--split-student, 30%)) 18px minmax(420px, 1fr); }
.coach-grid.is-resizable { grid-template-columns: minmax(220px, var(--split-coach-left, 22%)) 18px minmax(420px, 1fr) 18px minmax(280px, var(--split-coach-right, 27%)); }
.timeline-workspace.is-resizable { grid-template-columns: minmax(220px, var(--split-timeline-left, 24%)) 18px minmax(420px, 1fr) 18px minmax(280px, var(--split-timeline-right, 27%)); }
.grading-detail-grid.is-resizable { grid-template-columns: minmax(360px, var(--split-grading, 66%)) 18px minmax(280px, 1fr); }
.risk-overview-grid.is-resizable { grid-template-columns: minmax(300px, var(--split-risk, 36%)) 18px minmax(420px, 1fr); }

.is-resizable { align-items: stretch; }
.resize-handle { position: relative; z-index: 5; flex: 0 0 18px; width: 18px; min-height: 48px; cursor: col-resize; touch-action: none; outline: none; }
.resize-handle::after { content: ""; position: absolute; inset-block: 12px; left: 8px; width: 2px; border-radius: 2px; background: #d6dced; transition: transform 150ms ease, background 150ms ease; }
.resize-handle:hover::after, .resize-handle:focus-visible::after, .resize-handle.is-dragging::after { left: 7px; width: 4px; background: var(--green); }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing iframe { pointer-events: none; }
.layout-reset { position: fixed; z-index: 18; right: 20px; bottom: 20px; min-height: 38px; padding: 8px 12px; color: var(--green); border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-float); cursor: pointer; font-size: 12px; }
.layout-reset:hover { border-color: var(--green); background: var(--green-soft); }

.published-card, .task-facts article, .object-grid article, .version-card, .evidence-card, .intervention-card, .coach-cycle, .attempt-card { border-color: var(--line); border-radius: var(--radius-sm); background: #fff; }
.published-card { transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease; }
.published-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(33,45,92,.08); }
.published-card .mini-button { min-height: 40px; padding-inline: 13px; color: #fff; border-color: var(--green); background: var(--green); }
.published-card .mini-button:hover { color: #fff; border-color: var(--green-dark); background: var(--green-dark); }
.module-index { display: none; }
.module-page-head > div { padding-left: 0; }
.version-card, .evidence-card, .intervention-card, .coach-cycle, .attempt-card { border-left-width: 1px; }
.report-outline article { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.report-outline span { color: var(--green); }
.trend-list i.high { background: var(--red); }
.trend-list i.medium { background: var(--amber); }
.trend-list i.low { background: var(--success); }
.toast { border-radius: 10px; background: #202b45; box-shadow: var(--shadow-float); }

@media (max-width: 1180px) {
  .coach-grid, .timeline-workspace { grid-template-columns: minmax(220px, 31%) minmax(0, 1fr); }
  .coach-grid.is-resizable, .timeline-workspace.is-resizable { grid-template-columns: minmax(220px, 31%) 18px minmax(0, 1fr); }
  .coach-grid > :last-child, .timeline-workspace > :last-child { grid-column: 1 / -1; margin-top: 12px; min-height: 0; }
  .coach-grid > .resize-handle:last-of-type, .timeline-workspace > .resize-handle:last-of-type { display: none; }
}

@media (max-width: 900px) {
  main { padding-inline: 14px; }
  #teacher-app.is-active, #student-app.is-active { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  #teacher-app > .workspace-heading, #student-app > .workspace-heading { grid-column: 1; grid-row: 1; min-height: auto; }
  #teacher-app > .tabbar, #student-app > .tabbar { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  #teacher-app > .teacher-main, #student-app > .student-main { grid-column: 1; grid-row: 3; }
  #student-app.is-active { grid-template-rows: auto auto 1fr; }
  #student-app > .student-workspace-nav { grid-row: 2; }
  #student-app > .student-main { grid-row: 3; }
  #student-app > .student-workspace-nav[hidden] + .student-main { grid-row: 2; }
  .student-primary-workbench, .student-primary-workbench.is-resizable,
  .coach-grid, .coach-grid.is-resizable,
  .timeline-workspace, .timeline-workspace.is-resizable,
  .grading-detail-grid, .grading-detail-grid.is-resizable,
  .risk-overview-grid, .risk-overview-grid.is-resizable { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .resize-handle { display: none !important; }
  .student-primary-workbench .student-task-summary { position: static; }
  .coach-grid > :last-child, .timeline-workspace > :last-child { grid-column: auto; margin-top: 0; }
}

@media (max-width: 600px) {
  .topbar { min-height: 58px; padding: 8px 12px; grid-template-columns: minmax(0,1fr) auto; }
  .course-context, .clock { display: none; }
  .brand-copy { gap: 2px; }
  .brand-copy strong { font-size: 13px; }
  .brand-tagline { display: flex !important; gap: 4px; font-size: 7.5px !important; letter-spacing: .1em; }
  .brand-tagline::before, .brand-tagline::after { width: 6px; flex-basis: 6px; }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-mark img { width: 100%; height: 100%; }
  main { padding: 12px 10px 70px; }
  .app-shell, #teacher-app.is-active, #student-app.is-active,
  .teacher-main, .student-main, .join-panel, .published-grid { width: 100%; min-width: 0; max-width: 100%; }
  .join-panel { overflow: hidden; }
  .published-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #teacher-app > .tabbar, #student-app > .tabbar { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
  #teacher-app > .tabbar button, #student-app > .tabbar button { flex: 0 0 min(154px, 44vw); min-width: 0; }
  .workspace-heading { padding: 15px !important; }
  .student-heading-copy { min-width: 0; align-items: flex-start; flex-direction: column; gap: 2px; }
  .student-heading-copy p { padding-left: 0; border: 0; }
  .student-profile-menu { min-width: 44px; }
  .student-profile-menu > summary { width: min(160px, 42vw); }
  .student-profile-menu > summary span, .student-profile-menu > summary b { max-width: 120px; }
  .student-profile-menu .student-identity { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; grid-template-columns: 1fr; }
  .button, .tabbar button, .tabbar a, input, select { min-height: 44px; }
  .brand { min-height: 44px; }
  .mini-button, .text-button, .icon-button, .layout-reset { min-height: 44px; }
  .metrics, .metrics-wide, .student-detail-content > .student-compact-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metrics article { min-height: 94px; padding: 14px; }
  .metrics b { font-size: 25px; }
  .student-workbench-bar { grid-template-columns: 1fr auto; }
  .student-workbench-bar > div:nth-child(2), .student-workbench-bar .source-chip { display: none; }
  .student-editor-panel .editor-actions { grid-template-columns: 1fr; }
  .student-submit-button { width: 100%; }
  .module-page-head, .teacher-section-heading, .data-panel-head, .grading-student-card > header { align-items: flex-start; grid-template-columns: 1fr; flex-direction: column; }
  .report-outline { grid-template-columns: 1fr; }
  .published-grid, .published-grid > *, .published-card, .published-card > * { min-width: 0; max-width: 100%; }
  .published-card { width: min(100%, calc(100vw - 62px)); }
  .published-card { min-height: 0; }
  .published-card > span, .published-card h3, .published-card p, .published-card small { overflow-wrap: anywhere; word-break: break-word; }
  .published-card footer { align-items: stretch; flex-direction: column; }
  .published-card footer .mini-button { width: 100%; }
  .published-card footer .published-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .layout-reset { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  dialog.detail-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; }
}

@media (max-width: 820px) {
  .student-task-list-head { align-items: stretch; flex-direction: column; }
  .student-task-list-controls { align-items: stretch; flex-direction: column; }
  .student-task-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student-task-sort { width: 100%; }
  .student-workbench-actions { flex-direction: column; }
  .student-workbench-actions .button { width: 100%; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  body { color: #000; background: #fff; }
  .topbar, .tabbar, .workspace-heading, .dashboard-toolbar, button, .layout-reset, .toast, .resize-handle { display: none !important; }
  main, .app-shell, .teacher-main, .student-main { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  .panel, .data-panel, .report-outline article { box-shadow: none; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  table, .data-table, .risk-table { break-inside: auto; }
  .report-outline { grid-template-columns: 1fr 1fr; }
}

/* 2026 tonal depth pass: full-height work areas with calm blue-violet surfaces. */
.app-shell { min-height:100vh; background:linear-gradient(145deg,rgba(235,242,255,.82) 0%,rgba(247,241,255,.8) 48%,rgba(232,249,250,.76) 100%); }
main { min-height:calc(100vh - 68px); }
#teacher-app.is-active, #student-app.is-active { min-height:calc(100vh - 112px); align-items:stretch; }
#teacher-app > .workspace-heading, #student-app > .workspace-heading,
.join-panel, .module-page, .data-panel, .student-detail-panel, .teacher-management-main, .teacher-published-panel, .teacher-create-panel {
  background:linear-gradient(145deg,rgba(250,253,255,.97),rgba(243,244,255,.95) 58%,rgba(237,249,250,.92));
}
.teacher-main, .student-main { min-height:100%; }
#teacher-app > .teacher-main { min-height:calc(100dvh - 116px); }
#teacher-app .teacher-published-panel, #teacher-app .teacher-create-panel { min-height:100%; }
.tabbar { background:linear-gradient(180deg,rgba(250,252,255,.98),rgba(237,241,255,.96)); }
.tabbar button, .tabbar a { border:1px solid transparent; background:transparent; }
.tabbar button:hover, .tabbar a:hover { color:var(--green); background:#f2f5ff; }
.tabbar button.is-active, .tabbar a.is-active {
  color:#2848bd; border-color:#d1daf8; background:linear-gradient(135deg,#e4edff,#f0e9ff 56%,#e6f8fa);
  box-shadow:inset 3px 0 0 rgba(49,85,217,.62);
}
.tabbar button.needs-context { color:#536079; cursor:pointer; opacity:1; filter:none; }
.tabbar button.needs-context:hover { color:#2848bd; border-color:#d7def6; background:linear-gradient(135deg,#eef3ff,#f3efff 58%,#edfafa); }
#student-join { transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
#student-join.needs-attention { border-color:#8196e8; box-shadow:0 0 0 4px rgba(49,85,217,.12),0 18px 42px rgba(58,73,139,.15); transform:translateY(-2px); }
.workspace-heading { position:relative; overflow:hidden; }
.workspace-heading::after { content:""; position:absolute; width:220px; height:220px; right:-90px; bottom:-130px; border-radius:50%; background:radial-gradient(circle,rgba(98,120,234,.1),transparent 68%); pointer-events:none; }
.metrics article, .task-facts article, .student-compact-metrics article {
  position:relative; overflow:hidden; border-top-width:1px; background:linear-gradient(145deg,#fafdff,#edf3ff 70%,#eefafa);
}
.metrics article::before, .task-facts article::before, .student-compact-metrics article::before { content:""; position:absolute; inset:0 0 auto; height:1px; opacity:.62; background:linear-gradient(90deg,#3155d9,rgba(49,85,217,.18)); }
.metrics article:nth-child(4n+2)::before, .task-facts article:nth-child(4n+2)::before { background:#7357d9; }
.metrics article:nth-child(4n+3)::before, .task-facts article:nth-child(4n+3)::before { background:#4385c5; }
.metrics article:nth-child(4n)::before, .task-facts article:nth-child(4n)::before { background:#2eae78; }
.published-card, .round-card, .version-card, .evidence-card, .intervention-card, .coach-cycle, .attempt-card, .grading-student-card, .report-outline article {
  background:linear-gradient(145deg,#fbfdff 0%,#f1f3ff 62%,#edf9fa 100%);
}
.data-panel-head, .result-header, .panel-toolbar, .workspace-bar { background:linear-gradient(90deg,#f7faff,#efefff 58%,#ebf9fa); }
.teacher-empty-state, .empty, .coach-empty {
  background:radial-gradient(circle at 50% 35%,rgba(115,87,217,.07),transparent 34%),linear-gradient(145deg,#fafbff,#f1f5ff);
}
.hero { background:radial-gradient(circle at 14% 84%,rgba(98,120,234,.12),transparent 26%),radial-gradient(circle at 86% 12%,rgba(155,109,221,.13),transparent 28%),linear-gradient(125deg,#f8fbff 0%,#f2f1ff 56%,#eaf9fa 100%); }
.role-picker { background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,247,255,.94)); }
.role-card { background:linear-gradient(135deg,#fafdff,#eff2ff 66%,#edfafa); }
.role-card:hover { background:linear-gradient(135deg,#f6f9ff,#e9edff 58%,#e7f8fa); }
.value-section,.journey-section,.audience-section { background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(246,248,255,.95)); }
.value-grid article,.audience-card { background:linear-gradient(145deg,#fbfdff,#eff3ff 62%,#edf9fa); }

/* Homepage: a luminous evidence engine for 智能实验 AI助教. */
body:has(#landing.is-active) {
  background:
    radial-gradient(circle at 15% 12%, rgba(49,85,217,.12), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(67,133,197,.12), transparent 26%),
    #f1f4fb;
}
body:has(#landing.is-active) .codementor-waves-layer { opacity: .2; filter: saturate(1.3) brightness(1.25); }
#landing { max-width: 1600px; }
#landing .home-hero {
  --pointer-x: 50%;
  --pointer-y: 40%;
  position: relative;
  isolation: isolate;
  min-height: min(720px, calc(100dvh - 116px));
  padding: clamp(40px, 4.2vw, 68px);
  display: grid;
  grid-template-columns: minmax(560px, 1.04fr) minmax(500px, .96fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(111,137,255,.16), transparent 25%),
    linear-gradient(132deg, rgba(255,255,255,.97), rgba(247,249,255,.95) 52%, rgba(237,243,255,.93));
  box-shadow: 0 32px 80px rgba(36,49,103,.14), inset 0 1px 0 #fff;
}
#landing .home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 52%;
  aspect-ratio: 1;
  right: -13%;
  top: -38%;
  border: 1px solid rgba(49,85,217,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(49,85,217,.025), 0 0 0 130px rgba(49,85,217,.018);
  animation: hero-ring-breathe 7s ease-in-out infinite;
}
#landing .home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -27% -8%;
  width: 48%;
  aspect-ratio: 1.8;
  border-radius: 50%;
  background: rgba(49,85,217,.1);
  filter: blur(70px);
  animation: hero-glow-drift 9s ease-in-out infinite alternate;
}
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-atmosphere i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #3155d9; box-shadow: 0 0 24px rgba(49,85,217,.8); animation: signal-float 8s ease-in-out infinite; }
.hero-atmosphere i:nth-child(1) { left: 8%; top: 18%; }
.hero-atmosphere i:nth-child(2) { left: 46%; top: 80%; width: 4px; height: 4px; animation-delay: -2.7s; }
.hero-atmosphere i:nth-child(3) { right: 8%; top: 34%; width: 5px; height: 5px; animation-delay: -5.1s; }
#landing .hero-copy { max-width: 710px; }
#landing .product-name {
  width: fit-content;
  margin: 0 0 26px;
  padding: 9px 14px;
  color: #2848bd;
  border: 1px solid rgba(49,85,217,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 24px rgba(49,85,217,.08);
  backdrop-filter: blur(14px);
  font-size: 13px;
  letter-spacing: .04em;
}
#landing .hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #121c35;
  font-size: clamp(48px, 4.4vw, 72px);
  font-weight: 820;
  line-height: 1.03;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#landing .hero-copy h1 span { position: relative; color: #3155d9; white-space: normal; }
#landing .hero-copy h1 span::after {
  content: "";
  position: absolute;
  left: 1%;
  right: 3%;
  bottom: -9px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(49,85,217,.82), rgba(67,133,197,.28), transparent);
  transform-origin: left;
  animation: headline-line 1.1s .35s cubic-bezier(.2,.8,.2,1) both;
}
#landing .lede { max-width: 620px; margin: 34px 0 0; color: #536079; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.home-cta {
  min-height: 54px;
  padding: 0 18px 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.home-cta i { font-style: normal; font-size: 19px; transition: transform .22s ease; }
.home-cta.primary { color: #fff; background: #3155d9; box-shadow: 0 14px 30px rgba(49,85,217,.25); }
.home-cta.secondary { color: #263756; border-color: #d8def0; background: rgba(255,255,255,.78); }
.home-cta:hover { transform: translateY(-3px); }
.home-cta.primary:hover { background: #2848bd; box-shadow: 0 18px 36px rgba(49,85,217,.3); }
.home-cta.secondary:hover { color: #2848bd; border-color: #aebbe4; background: #fff; box-shadow: 0 16px 30px rgba(49,85,217,.1); }
.home-cta:hover i { transform: translate(3px,-2px); }
.home-cta:active { transform: translateY(0) scale(.98); }
.evidence-engine {
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: #e9eeff;
  border: 1px solid rgba(148,167,240,.22);
  border-radius: 20px;
  background: linear-gradient(145deg, #101a34, #182650 58%, #13213e);
  box-shadow: 0 36px 70px rgba(17,27,61,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.evidence-engine:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); box-shadow: 0 44px 84px rgba(17,27,61,.34), inset 0 1px 0 rgba(255,255,255,.1); }
.engine-toolbar, .engine-footer { min-height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 10px; color: #91a1c8; font-size: 11px; }
.engine-toolbar { justify-content: space-between; border-bottom: 1px solid rgba(161,179,239,.13); }
.engine-toolbar span { display: inline-flex; align-items: center; gap: 9px; color: #e6ebff; font-weight: 700; }
.engine-toolbar span i { width: 8px; height: 8px; border-radius: 50%; background: #61d7a3; box-shadow: 0 0 0 5px rgba(97,215,163,.11), 0 0 20px rgba(97,215,163,.55); animation: status-pulse 2s ease-out infinite; }
.engine-toolbar b { color: #91a6ff; font-weight: 650; }
.engine-canvas { position: relative; min-height: 410px; overflow: hidden; background: radial-gradient(circle at 58% 48%, rgba(74,103,220,.3), transparent 36%), radial-gradient(circle at 18% 88%, rgba(40,191,199,.09), transparent 27%), linear-gradient(145deg,rgba(255,255,255,.018),rgba(91,113,214,.045)); }
.engine-canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #101a34 0%, transparent 16%, transparent 88%, #14213e 100%); pointer-events: none; }
.code-stream { position: absolute; z-index: 1; left: 20px; top: 24px; width: 180px; display: grid; gap: 13px; color: rgba(174,190,229,.52); font: 10px/1.4 "SFMono-Regular", Consolas, monospace; }
.code-stream span { white-space: nowrap; animation: code-line-flow 5s ease-in-out infinite; }
.code-stream span:nth-child(2) { animation-delay: -.8s; }
.code-stream span:nth-child(3) { animation-delay: -1.6s; }
.code-stream span:nth-child(4) { animation-delay: -2.4s; }
.code-stream span:nth-child(5) { animation-delay: -3.2s; }
.code-stream b { color: #6077c5; font-weight: 500; }
.engine-orbit { position: absolute; z-index: 2; left: 58%; top: 50%; border: 1px solid rgba(119,145,242,.25); border-radius: 50%; transform: translate(-50%,-50%); }
.engine-orbit::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #8fa4ff; box-shadow: 0 0 18px #7891ff; }
.orbit-one { width: 310px; height: 310px; animation: orbit-spin 14s linear infinite; }
.orbit-two { width: 220px; height: 220px; border-style: dashed; animation: orbit-spin-reverse 10s linear infinite; }
.orbit-two::before { top: auto; bottom: -4px; background: #68b5e6; }
.engine-core { position: absolute; z-index: 4; left: 58%; top: 50%; width: 166px; height: 166px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid rgba(148,169,255,.34); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(122,148,255,.52), rgba(43,67,154,.62) 45%, rgba(17,30,67,.94)); box-shadow: 0 0 0 13px rgba(92,117,224,.06), 0 0 60px rgba(74,104,234,.38), inset 0 1px 12px rgba(255,255,255,.18); transform: translate(-50%,-50%); animation: core-breathe 4s ease-in-out infinite; }
.engine-core span { color: #aab9e5; font-size: 11px; }
.engine-core strong { margin-top: 6px; color: #fff; font-size: 17px; line-height: 1.25; }
.engine-core small { margin-top: 9px; color: #8fa4ff; font-size: 8px; letter-spacing: .12em; }
.engine-node { position: absolute; z-index: 5; min-width: 76px; padding: 8px 11px; color: #dfe6ff; border: 1px solid rgba(139,161,240,.25); border-radius: 10px; background: rgba(24,39,82,.8); box-shadow: 0 9px 24px rgba(5,12,34,.28); backdrop-filter: blur(12px); font-size: 11px; text-align: center; animation: node-hover 4.6s ease-in-out infinite; }
.node-twin { left: 25%; top: 15%; }
.node-git { right: 8%; top: 16%; animation-delay: -.8s; }
.node-coach { right: 3%; top: 46%; animation-delay: -1.6s; }
.node-grade { right: 12%; bottom: 12%; animation-delay: -2.4s; }
.node-risk { left: 31%; bottom: 9%; animation-delay: -3.2s; }
.node-teacher { left: 18%; top: 48%; animation-delay: -4s; }
.engine-footer { border-top: 1px solid rgba(161,179,239,.13); }
.engine-footer i { flex: 0 0 20px; height: 1px; background: linear-gradient(90deg, rgba(116,140,229,.2), #7a91e8); position: relative; }
.engine-footer i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #8fa4ff; }
.engine-footer b { margin-left: auto; color: #61d7a3; font-weight: 650; }
#landing .product-values, #landing .learning-journey, #landing .audience { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
#landing.motion-ready .product-values:not(.is-revealed), #landing.motion-ready .learning-journey:not(.is-revealed), #landing.motion-ready .audience:not(.is-revealed) { opacity: 0; transform: translateY(34px); }
#landing .product-values.is-revealed, #landing .learning-journey.is-revealed, #landing .audience.is-revealed { opacity: 1; transform: translateY(0); }

#landing .learning-journey {
  color: #f7f9ff;
  border-color: rgba(113, 139, 231, .32);
  background:
    radial-gradient(circle at 82% 14%, rgba(91, 120, 236, .3), transparent 27%),
    radial-gradient(circle at 8% 92%, rgba(41, 190, 193, .13), transparent 30%),
    linear-gradient(135deg, #111c39 0%, #192a58 58%, #132342 100%);
  box-shadow: 0 28px 64px rgba(18, 31, 70, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#landing .learning-journey h2 { color: #fff; }
#landing .learning-journey .journey-heading > p { color: #bac7e4; }
#landing .learning-journey .journey-track { border-top-color: rgba(189, 203, 245, .24); }
#landing .learning-journey .journey-track b { color: #6fe0bd; }
#landing .learning-journey .journey-track span { color: #f7f9ff; }
#landing .learning-journey .journey-track small { color: #b7c4df; }

@keyframes hero-ring-breathe { 0%,100% { transform: scale(.94); opacity: .6; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes hero-glow-drift { to { transform: translate(24%, -12%) scale(1.16); } }
@keyframes signal-float { 0%,100% { transform: translate3d(0,0,0); opacity: .25; } 45% { transform: translate3d(26px,-44px,0); opacity: 1; } 70% { transform: translate3d(-14px,-70px,0); opacity: .45; } }
@keyframes headline-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(97,215,163,.35), 0 0 18px rgba(97,215,163,.5); } 75%,100% { box-shadow: 0 0 0 9px rgba(97,215,163,0), 0 0 18px rgba(97,215,163,.5); } }
@keyframes code-line-flow { 0%,100% { opacity: .2; transform: translateX(0); } 35%,65% { opacity: .76; transform: translateX(8px); } }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes orbit-spin-reverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes core-breathe { 0%,100% { box-shadow: 0 0 0 13px rgba(92,117,224,.06), 0 0 48px rgba(74,104,234,.28), inset 0 1px 12px rgba(255,255,255,.18); } 50% { box-shadow: 0 0 0 21px rgba(92,117,224,.025), 0 0 76px rgba(74,104,234,.48), inset 0 1px 18px rgba(255,255,255,.24); } }
@keyframes node-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (max-width: 1120px) {
  #landing .home-hero { min-height: auto; grid-template-columns: 1fr; }
  #landing .hero-copy { max-width: 850px; }
  #landing .hero-copy h1 { max-width: 900px; }
  .evidence-engine { width: min(760px,100%); justify-self: end; }
}
@media (max-width: 700px) {
  #landing .home-hero { padding: 30px 20px 22px; gap: 34px; border-radius: 16px; }
  #landing .product-name { margin-bottom: 19px; }
  #landing .hero-copy h1 { font-size: clamp(42px,13vw,64px); }
  #landing .lede { margin-top: 28px; font-size: 15px; line-height: 1.7; }
  .hero-actions { margin-top: 28px; display: grid; }
  .home-cta { width: 100%; min-height: 52px; }
  .evidence-engine { border-radius: 14px; transform: none; }
  .evidence-engine:hover { transform: translateY(-2px); }
  .engine-canvas { min-height: 360px; }
  .engine-toolbar b { display: none; }
  .code-stream { left: 12px; top: 14px; opacity: .5; }
  .engine-orbit, .engine-core { left: 57%; }
  .orbit-one { width: 246px; height: 246px; }
  .orbit-two { width: 174px; height: 174px; }
  .engine-core { width: 136px; height: 136px; }
  .engine-core strong { font-size: 14px; }
  .engine-node { min-width: 66px; padding: 7px 8px; font-size: 10px; }
  .node-twin { left: 8%; top: 19%; }
  .node-git { right: 4%; top: 17%; }
  .node-coach { right: 1%; top: 48%; }
  .node-grade { right: 4%; bottom: 11%; }
  .node-risk { left: 23%; bottom: 7%; }
  .node-teacher { left: 2%; top: 52%; }
  .engine-footer { padding-inline: 12px; gap: 6px; }
  .engine-footer i { flex-basis: 8px; }
  .engine-footer b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #landing .product-values, #landing .learning-journey, #landing .audience { opacity: 1; transform: none; }
}

/* Workspace layout repair: keep identity, navigation and content in one clear vertical flow. */
#teacher-app.is-active {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}
#teacher-app > .workspace-heading {
  grid-column: 1;
  grid-row: 1;
  min-height: 74px;
  padding: 13px 16px;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
#teacher-app > .workspace-heading > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
#teacher-app > .workspace-heading .eyebrow { margin: 0; }
#teacher-app > .workspace-heading h1 { margin: 0; font-size: 20px; white-space: nowrap; }
#teacher-app > .workspace-heading p { margin: 0; padding-left: 14px; border-left: 1px solid var(--line); }
#teacher-app > .workspace-heading .identity-field { width: min(240px, 28vw); margin: 0 0 0 auto; }
#teacher-app > .workspace-heading .identity-field input { min-height: 38px; margin-top: 4px; }
#teacher-app > .teacher-management-nav {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  flex-direction: row;
}
#teacher-app > .teacher-management-nav button {
  flex: 1;
  min-height: 42px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  text-align: center;
}
#teacher-app > .teacher-main {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
}

@media (max-width: 1240px) {
  #landing .home-hero { grid-template-columns: minmax(0, 1fr); }
  #landing .hero-copy { max-width: 920px; }
  .evidence-engine { width: min(820px, 100%); justify-self: end; }
}

@media (max-width: 760px) {
  #teacher-app > .workspace-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  #teacher-app > .workspace-heading > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  #teacher-app > .workspace-heading p { padding-left: 0; border-left: 0; }
  #teacher-app > .workspace-heading .identity-field { width: 100%; margin-left: 0; }
}

/* Emphasis system: color marks action, current context, evidence and semantic state. */
#teacher-app > .workspace-heading h1,
#student-app > .workspace-heading h1,
.teacher-section-heading h2,
.module-page-head h2,
.panel-title h2,
.panel-heading h1,
.coach-header h2,
.result-header h2 {
  color: #20377f;
}

.tabbar button.is-active,
.tabbar a.is-active,
#teacher-app > .teacher-management-nav button.is-active,
#student-app > .student-workspace-nav button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(112deg, #3155d9 0%, #6558d6 58%, #398fc9 100%);
  box-shadow: 0 9px 22px rgba(56, 73, 177, .22), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.tabbar button.is-active span,
.tabbar a.is-active span { color: #fff; }

.button.primary,
.published-card .mini-button,
.student-submit-button {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(112deg, #3155d9 0%, #6d58dd 60%, #3b94cb 100%);
  box-shadow: 0 10px 24px rgba(49, 85, 217, .24);
}
.button.primary:hover:not(:disabled),
.published-card .mini-button:hover,
.student-submit-button:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(112deg, #2848bd 0%, #5d49cd 60%, #2d82ba 100%);
  box-shadow: 0 14px 30px rgba(49, 85, 217, .3);
}
.button.coach {
  color: #fff;
  background: linear-gradient(112deg, #684bd2, #9165dc 62%, #537bd9);
  box-shadow: 0 10px 24px rgba(104, 75, 210, .22);
}

.student-workbench-bar {
  border-color: rgba(104, 120, 223, .3);
  background: linear-gradient(100deg, rgba(235, 241, 255, .98), rgba(242, 237, 255, .96) 58%, rgba(231, 249, 250, .95));
  box-shadow: 0 12px 28px rgba(59, 75, 169, .11);
}
.student-workbench-bar > div:first-child > b { color: #3155d9; font-size: 13px; }
.student-workbench-bar > div:nth-child(2) > b { color: #7357d9; }
.focus-label { color: #3155d9; }
.focus-label i { background: #3155d9; box-shadow: 0 0 0 4px rgba(49, 85, 217, .12); }
.student-editor-panel { border-color: rgba(72, 100, 211, .42); box-shadow: 0 16px 38px rgba(42, 60, 143, .13); }

.metrics article:nth-child(4n+1) b,
.student-compact-metrics article:nth-child(4n+1) b { color: #3155d9; }
.metrics article:nth-child(4n+2) b,
.student-compact-metrics article:nth-child(4n+2) b { color: #7357d9; }
.metrics article:nth-child(4n+3) b,
.student-compact-metrics article:nth-child(4n+3) b { color: #277dab; }
.metrics article:nth-child(4n) b,
.student-compact-metrics article:nth-child(4n) b { color: #21825f; }
.metrics article.alert b { color: #c33f51; }

.published-card > span { color: #3155d9; }
.published-card h3 { color: #1d2e63; }
.published-card:hover { border-color: rgba(75, 99, 205, .48); box-shadow: 0 16px 34px rgba(49, 68, 156, .13); }

.status-badge { color: #2848bd; background: #e8edff; box-shadow: inset 0 0 0 1px #d6defc; }
.status-pill.completed,
.status-pill.published,
.status-pill.ready_for_review { color: #187e55; background: var(--success-soft); }
.status-pill.draft { color: #966015; background: var(--amber-soft); }
.status-pill.partial_failure { color: #b73543; background: var(--red-soft); }
.source-chip { color: #176b86; border-color: #c9e8ef; background: #e9f8fb; }
.result-count {
  padding: 5px 9px;
  color: #176b86;
  border-radius: 999px;
  background: #e9f8fb;
  box-shadow: inset 0 0 0 1px #c9e8ef;
  font-weight: 750;
}
.coach-box > span { color: #684bd2; }
.level-rail span.is-current { border-color: transparent; background: linear-gradient(112deg, #684bd2, #9165dc); box-shadow: 0 8px 18px rgba(104, 75, 210, .2); }
.source-banner:not(.is-failed) { color: #2848bd; background: linear-gradient(100deg, #edf1ff, #f2efff 62%, #eaf8fa); }
.source-banner:not(.is-failed) b { color: #2848bd; }

/* Classroom management: a calm roster desk within the existing pearl workbench. */
.button.compact { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.class-management-panel { min-width: 0; }
.class-view { display: none; min-width: 0; }
.class-view.is-active { display: block; animation: workspace-pearl-arrive 280ms cubic-bezier(.16,1,.3,1) both; }
.teacher-class-list-view { min-height: 520px; }
.class-list-tools { display: flex; align-items: center; gap: 9px; }
.class-card-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.class-overview-card { min-height: 210px; }
.class-overview-card p { min-height: 48px; }
.class-create-card { min-height: 210px; padding: 22px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #20377f; border: 1.5px dashed #9eafe4; border-radius: var(--radius-sm); background: linear-gradient(145deg, rgba(250,252,255,.9), rgba(238,242,255,.8)); transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease; }
.class-create-card:hover { transform: translateY(-2px); border-color: #3155d9; box-shadow: 0 16px 34px rgba(49,68,156,.13); }
.class-create-card i { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; border-radius: 14px; background: linear-gradient(145deg, #3155d9, #7357d9); box-shadow: 0 12px 26px rgba(49,85,217,.23); font-size: 28px; font-style: normal; line-height: 1; }
.class-create-card b { margin-top: 4px; font-size: 16px; }
.class-create-card span { color: var(--muted); font-size: 11px; }
.class-create-page { width: min(760px, 100%); min-height: 470px; margin: 0 auto; padding: 22px; background: linear-gradient(145deg, #fcfbff 0%, #f1efff 58%, #edf3ff 100%); }
.class-create-page .panel-title { margin: 26px 0 20px; }
.class-create-page .panel-title p { margin: 7px 0 0; color: var(--muted); }
.class-create-form { display: grid; gap: 15px; }
.class-create-form textarea { min-height: 120px; resize: vertical; }
.class-back-button { min-height: 36px; padding: 7px 12px; color: #2848bd; border: 1px solid #cfd8f7; border-radius: 9px; background: rgba(250,252,255,.9); font-weight: 800; }
.class-back-button:hover { border-color: #8fa4e5; background: #eef2ff; }
.class-detail-panel { min-width: 0; padding: 20px; background: linear-gradient(145deg, #fbfdff 0%, #f0f3ff 55%, #ecf8fb 100%); }
.class-detail-loading { display: grid; justify-items: start; gap: 28px; }
.class-detail-hero, .class-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.class-detail-hero h2, .class-subheading h3 { margin: 3px 0; color: #20377f; }
.class-detail-hero p, .student-search-form p, .student-code-form p { margin: 0; color: var(--muted); }
.class-detail-hero { margin-top: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.class-count { min-width: 86px; padding: 11px; display: grid; justify-items: center; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.class-count b { color: #3155d9; font-size: 23px; }
.class-count span { color: var(--muted); font-size: 11px; }
.invite-code-card { margin: 14px 0; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid rgba(87,104,207,.25); border-radius: 14px; background: linear-gradient(105deg, rgba(235,241,255,.96), rgba(242,237,255,.94), rgba(232,249,250,.9)); }
.invite-code-card > div:first-child { display: grid; gap: 3px; }
.invite-code-card strong { color: #2848bd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; letter-spacing: .12em; }
.invite-code-card small, .invite-code-card span { color: var(--muted); }
.invite-code-card > div:last-child, .row-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.student-search-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .7fr) auto; align-items: end; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }
.student-search-form > label { margin-bottom: 0; }
.student-search-form > label input, .student-search-form > .button { height: 46px; min-height: 46px; margin-bottom: 0; }
.student-search-form > .button { align-self: end; display: inline-flex; align-items: center; justify-content: center; }
.student-search-form h3, .student-code-form h3 { margin: 3px 0; color: #20377f; }
.student-search-results { display: grid; gap: 7px; margin-top: 9px; }
.student-search-results article, .class-request-list article, .class-membership-list article { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.78); }
.student-search-results article > div, .class-request-list article > div:first-child, .class-membership-list article > div:first-child { min-width: 0; display: grid; gap: 2px; }
.student-search-results small, .class-request-list small, .class-membership-list small { color: var(--muted); overflow-wrap: anywhere; }
.class-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 17px 0; }
.class-subheading { margin-bottom: 8px; }
.class-subheading span { min-width: 26px; padding: 4px 8px; color: #3155d9; text-align: center; border-radius: 999px; background: #e8edff; font-size: 11px; font-weight: 800; }
.class-request-list, .class-membership-list { display: grid; gap: 7px; }
.row-actions button, .danger-link { padding: 6px 10px; color: #2848bd; border: 1px solid #cfd8f7; border-radius: 8px; background: #f8faff; font-weight: 750; }
.row-actions button:last-child, .danger-link { color: #b73543; border-color: #f0ccd2; background: #fff8f9; }
.request-status { flex: none; padding: 5px 9px; color: #55627d; border-radius: 999px; background: #eef1f7; font-size: 11px; font-weight: 800; }
.request-status.status-approved, .request-status.status-accepted { color: #187e55; background: var(--success-soft); }
.request-status.status-pending_student, .request-status.status-pending_teacher { color: #966015; background: var(--amber-soft); }
.request-status.status-rejected { color: #b73543; background: var(--red-soft); }

.student-class-view { display: none; min-width: 0; }
.student-class-view.is-active { display: block; animation: workspace-pearl-arrive 280ms cubic-bezier(.16,1,.3,1) both; }
.student-class-card { cursor: pointer; outline: 0; }
.student-class-card:focus-visible { border-color: #3155d9; box-shadow: 0 0 0 4px rgba(49,85,217,.14), 0 16px 34px rgba(49,68,156,.13); }
.student-class-card .mini-button { pointer-events: none; }
.student-class-detail-view, .student-class-join-view { min-height: 460px; padding: 20px; background: linear-gradient(145deg, #fbfdff 0%, #f0f3ff 55%, #ecf8fb 100%); }
.student-class-join-view .panel-title { margin: 18px 0; display: grid; grid-template-columns: auto 1fr; justify-content: start; align-items: baseline; }
.student-class-join-view .panel-title > span { grid-row: 1 / 3; align-self: start; padding-top: 5px; }
.student-class-join-view .panel-title h2 { margin: 0; }
.student-class-join-view .panel-title p { grid-column: 2; margin: 4px 0 0; color: var(--muted); }
.student-class-detail-hero { margin-top: 18px; padding: 22px; border: 1px solid rgba(87,104,207,.22); border-radius: 16px; background: linear-gradient(120deg, rgba(236,242,255,.92), rgba(244,239,255,.9) 58%, rgba(234,249,250,.88)); }
.student-class-detail-hero h2 { margin: 7px 0; color: #20377f; font-size: clamp(22px, 3vw, 34px); }
.student-class-detail-hero p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.7; }
.student-class-facts { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.student-class-facts article { min-height: 118px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.78); }
.student-class-facts span, .student-class-facts small { color: var(--muted); }
.student-class-facts b { margin: 8px 0; color: #20377f; font-size: 17px; overflow-wrap: anywhere; }
.student-class-content { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.student-code-form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(180px,.55fr) auto; align-items: end; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.68); }
.student-code-form > label { margin-bottom: 0; }
.student-code-form > .button { min-height: 42px; }
.student-class-content > section { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.6); }

@media (max-width: 820px) {
  .class-detail-columns, .student-class-content, .student-class-facts { grid-template-columns: minmax(0, 1fr); }
  .class-list-tools { align-items: stretch; flex-direction: column; }
  .student-code-form, .student-search-form { grid-template-columns: minmax(0, 1fr); }
  .student-code-form { grid-column: 1; }
  .invite-code-card { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .class-detail-panel, .class-create-page, .teacher-class-list-view { padding: 13px; }
  .class-detail-hero { align-items: flex-start; }
  .class-detail-hero { flex-direction: column; }
  .class-card-grid { grid-template-columns: minmax(0, 1fr); }
  .class-create-card, .class-overview-card { width: 100%; min-height: 0; }
  .invite-code-card strong { font-size: 20px; }
  #student-app > .student-primary-nav button { min-width: 0; }
  .student-primary-nav strong { top: 3px; margin-left: 3px; }
  .student-class-detail-view, .student-class-join-view { min-height: 0; padding: 13px; }
  .student-class-detail-hero { padding: 16px; }
  .student-class-join-view .panel-title { grid-template-columns: 1fr; gap: 3px; }
  .student-class-join-view .panel-title > span, .student-class-join-view .panel-title p { grid-column: 1; grid-row: auto; }
  .student-search-results article, .class-request-list article, .class-membership-list article { align-items: flex-start; flex-direction: column; }
}

/* Workspace pearl-flow: the homepage palette continues through real teaching tasks. */
#teacher-app.is-active,
#student-app.is-active {
  animation: workspace-pearl-arrive 460ms cubic-bezier(.16,1,.3,1) both;
}

.teacher-published-panel,
.student-result-panel,
.student-detail-panel,
.module-page,
.timeline-panel,
.report-preview {
  background: linear-gradient(145deg, #fbfdff 0%, #edf3ff 58%, #eaf7fc 100%);
}

.teacher-create-panel,
.student-task-summary,
.coach-panel-shell,
.grading-student-card,
.report-config {
  background: linear-gradient(145deg, #fcfbff 0%, #f1efff 58%, #edf3ff 100%);
}

.evidence-sidebar,
.student-detail-content,
.knowledge-panel,
.risk-overview-grid > .data-panel {
  background: linear-gradient(145deg, #fbfdff 0%, #edf8fc 58%, #eef3ff 100%);
}

input,
select,
textarea,
.button.secondary {
  background-color: #fbfcff;
}

.published-card,
.round-card,
.version-card,
.evidence-card,
.intervention-card,
.coach-cycle,
.attempt-card,
.grading-student-card {
  transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms ease, border-color 200ms ease;
}

.published-card:hover,
.round-card:hover,
.version-card:hover,
.evidence-card:hover,
.intervention-card:hover,
.coach-cycle:hover,
.attempt-card:hover,
.grading-student-card:hover {
  transform: translateY(-2px);
  border-color: #cad5f3;
  box-shadow: 0 14px 30px rgba(49, 67, 128, .11);
}

.connection-pill:not(.is-error) i,
.online-label i,
.focus-label i {
  animation: workspace-status-breathe 2.4s ease-in-out infinite;
}

@keyframes workspace-pearl-arrive {
  from { opacity: .74; transform: translateY(8px); filter: saturate(.84); }
  to { opacity: 1; transform: translateY(0); filter: saturate(1); }
}

@keyframes workspace-status-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(49,85,217,.08); }
  50% { box-shadow: 0 0 0 7px rgba(49,85,217,.02); }
}

@media (prefers-reduced-motion: reduce) {
  #teacher-app.is-active,
  #student-app.is-active,
  .connection-pill:not(.is-error) i,
  .online-label i,
  .focus-label i {
    animation: none !important;
  }
}

/* Authenticated platform entry */
.user-menu { min-width: 0; display: flex; align-items: center; gap: 8px; }
.user-menu span { max-width: 190px; overflow: hidden; color: #34415f; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.user-menu button { padding: 7px 10px; border: 1px solid #d7def1; border-radius: 999px; color: #3155d9; background: rgba(255,255,255,.84); cursor: pointer; font-size: 10px; font-weight: 750; }
.user-menu button:hover { border-color: #3155d9; background: #eef2ff; }

#auth-screen.is-active { min-height: calc(100vh - 132px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(400px, .72fr); gap: clamp(28px, 6vw, 92px); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 72px) 0; }
.auth-story { position: relative; padding: clamp(14px, 3vw, 34px); }
.auth-story::before { content: "CM"; position: absolute; z-index: -1; top: -84px; left: -46px; color: rgba(49,85,217,.045); font-size: clamp(180px, 28vw, 360px); font-weight: 850; letter-spacing: -.13em; line-height: 1; }
.auth-story h1 { margin: 12px 0 22px; color: #15213a; font-size: clamp(42px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.055em; }
.auth-story h1 span { color: #3155d9; }
.auth-story > p { max-width: 600px; margin-bottom: 34px; color: #596783; font-size: 15px; line-height: 1.9; }
.auth-proof { max-width: 590px; padding: 13px 0; display: grid; grid-template-columns: 38px 100px 1fr; align-items: center; border-top: 1px solid rgba(122,139,185,.22); }
.auth-proof span { color: #3155d9; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.auth-proof b { color: #263554; font-size: 13px; }
.auth-proof small { color: #74809a; font-size: 11px; }
.auth-card { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 38px); border-color: rgba(198,208,238,.86); border-radius: 24px; background: linear-gradient(150deg,rgba(255,255,255,.98),rgba(245,246,255,.96) 62%,rgba(238,249,251,.95)); box-shadow: 0 28px 80px rgba(46,61,119,.16); }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,#3155d9,#7455dd,#3f9dc9); }
.auth-card-head h2 { margin: 6px 0 7px; color: #172440; font-size: 25px; }
.auth-card-head p { margin-bottom: 22px; color: #69758e; font-size: 12px; }
.auth-role-tabs { margin-bottom: 22px; padding: 4px; display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; border: 1px solid #dce3f5; border-radius: 12px; background: #eef2fb; }
.auth-role-tabs button { min-height: 38px; border: 0; border-radius: 9px; color: #687590; background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; }
.auth-role-tabs button.is-active { color: #2446bd; background: white; box-shadow: 0 5px 16px rgba(43,62,120,.11); }
.auth-form { display: grid; gap: 14px; }
.auth-form label, .admin-create-card label { margin: 0; color: #3d4963; font-size: 11px; font-weight: 750; }
.auth-form input, .admin-create-card input { width: 100%; min-height: 46px; margin-top: 6px; border: 1px solid #d7deef; border-radius: 10px; background: rgba(255,255,255,.88); }
.auth-form input:focus, .admin-create-card input:focus { border-color: #5572db; box-shadow: 0 0 0 4px rgba(49,85,217,.08); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 64px; }
.password-field button { position: absolute; top: 13px; right: 10px; padding: 5px 7px; border: 0; color: #3155d9; background: transparent; cursor: pointer; font-size: 10px; font-weight: 750; }
.auth-submit { width: 100%; min-height: 48px; margin-top: 4px; border-radius: 11px; }
.auth-form .text-button { justify-self: center; border: 0; background: transparent; }
.student-register-link[hidden] { display: none !important; }
.password-rule { margin-top: -7px; color: #76819a; font-size: 10px; }
.form-error { margin: -3px 0 0; padding: 9px 11px; border: 1px solid #f1c5c2; border-radius: 8px; color: #a43d34; background: #fff2f0; font-size: 11px; }
.must-change-note { padding: 12px 14px; display: grid; gap: 3px; border-left: 3px solid #3155d9; border-radius: 8px; color: #1d3267; background: #eef2ff; }
.must-change-note span { color: #66738f; font-size: 10px; }

#admin-app.is-active { max-width: 1500px; margin: 0 auto; display: block; }
.admin-shell { min-height: calc(100vh - 112px); }
.admin-heading { min-height: 128px; margin-bottom: 16px; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; border-radius: 16px; background: linear-gradient(135deg,#fbfdff,#f0f2ff 65%,#eaf8fa); }
.admin-heading h1 { margin: 5px 0 6px; color: #172440; font-size: 28px; }
.admin-heading p { margin: 0; color: #67748e; }
.admin-scope { padding: 8px 11px; border: 1px solid #d5ddf4; border-radius: 999px; color: #3155d9; background: white; font-size: 10px; font-weight: 800; }
.admin-account-tabs { margin-bottom: 16px; padding: 7px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; border: 1px solid rgba(111,126,211,.2); border-radius: 15px; background: rgba(248,250,255,.8); box-shadow: 0 12px 30px rgba(55,70,155,.08); }
.admin-account-tabs button { min-height: 48px; border: 0; border-radius: 10px; color: #63708b; background: transparent; font-weight: 800; cursor: pointer; }
.admin-account-tabs button span { margin-right: 8px; color: #8d98b0; font-size: 9px; letter-spacing: .08em; }
.admin-account-tabs button.is-active { color: #fff; background: linear-gradient(112deg,#3155d9,#6558d6 58%,#398fc9); box-shadow: 0 9px 22px rgba(56,73,177,.2); }
.admin-account-tabs button.is-active span { color: rgba(255,255,255,.82); }
.admin-account-page:not(.is-active) { display: none; }
.admin-grid { display: grid; grid-template-columns: minmax(280px,.38fr) minmax(0,1fr); gap: 16px; align-items: start; }
.admin-create-card, .admin-list-card { padding: 24px; border-radius: 16px; }
.admin-create-card { display: grid; gap: 15px; }
.admin-list-card { min-height: 460px; }
.account-list { display: grid; gap: 10px; }
.account-row { padding: 14px 15px; display: grid; grid-template-columns: minmax(160px,1fr) minmax(120px,.55fr) auto; gap: 14px; align-items: center; border: 1px solid #dce3f2; border-radius: 11px; background: rgba(251,252,255,.88); }
.account-row strong, .account-row span { display: block; }
.account-row strong { color: #253453; font-size: 12px; }
.account-row span { margin-top: 3px; color: #73809a; font-size: 10px; }
.account-row em { width: fit-content; margin-top: 7px; padding: 4px 8px; display: block; border: 1px solid #d7e0fa; border-radius: 999px; color: #3155d9; background: #f0f3ff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.account-status { justify-self: start; padding: 5px 8px; border-radius: 999px; color: #23745e; background: #e6f5ef; font-size: 9px; font-weight: 800; }
.account-status.is-off { color: #a4433a; background: #fff0ee; }
.account-actions { display: flex; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.account-actions button { padding: 7px 9px; border: 1px solid #d5def2; border-radius: 8px; color: #3155d9; background: white; cursor: pointer; font-size: 10px; font-weight: 750; }

@media (max-width: 900px) {
  #auth-screen.is-active { grid-template-columns: 1fr; max-width: 620px; padding-block: 26px; }
  .auth-story { display: none; }
  .admin-grid { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 1fr auto; }
  .account-actions { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  #auth-screen.is-active { min-height: auto; padding-block: 14px 32px; }
  .auth-card { padding: 24px 18px; border-radius: 18px; }
  .auth-role-tabs button { min-width: 0; }
  .auth-form .form-grid { grid-template-columns: 1fr; }
  .user-menu span { display: none; }
  .clock { display: none; }
  .admin-heading { padding: 18px; align-items: flex-start; gap: 12px; }
  .admin-scope { display: none; }
  .admin-create-card, .admin-list-card { padding: 18px; }
  .account-row { grid-template-columns: 1fr; }
  .account-status { justify-self: start; }
}