:root {
  --ink: #173b37;
  --ink-soft: #52706a;
  --forest: #153f39;
  --forest-2: #245d52;
  --lime: #d8ef69;
  --lime-soft: #eef7c9;
  --cream: #f5f7f1;
  --paper: #ffffff;
  --line: #dfe7df;
  --red: #d96d61;
  --red-soft: #fff0ed;
  --amber: #e6a94d;
  --amber-soft: #fff7df;
  --green: #3f9a74;
  --green-soft: #e5f5eb;
  --shadow: 0 18px 48px rgba(21, 63, 57, 0.08);
  --radius: 22px;
}

/* Online account and organization management */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 1.15fr) minmax(360px, .85fr);
  background: radial-gradient(circle at 12% 18%, rgba(207,239,208,.9), transparent 30%),
    linear-gradient(135deg, #eaf5ec 0%, #f8f3e8 58%, #f4f7f2 100%);
}
.login-screen[hidden] { display: none; }
.login-visual {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; padding: clamp(48px, 8vw, 120px); color: #163f38;
}
.login-kicker { color: #387b64; font-size: 13px; font-weight: 900; letter-spacing: .15em; }
.login-visual h1 {
  margin: 24px 0 18px; font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(42px, 5.8vw, 78px); line-height: 1.22; letter-spacing: -.04em;
}
.login-visual p { max-width: 590px; color: #58716a; font-size: 17px; line-height: 1.9; }
.login-biology i {
  position: absolute; border: 1px solid rgba(42,121,87,.15); border-radius: 50%;
  animation: floatCell 7s ease-in-out infinite;
}
.login-biology i:nth-child(1) { width: 180px; height: 180px; right: 10%; top: 12%; }
.login-biology i:nth-child(2) { width: 88px; height: 88px; right: 28%; bottom: 15%; animation-delay: -2s; }
.login-biology i:nth-child(3) { width: 42px; height: 42px; left: 12%; bottom: 10%; animation-delay: -4s; }
.login-biology i:nth-child(4) { width: 260px; height: 260px; right: -10%; bottom: -8%; animation-delay: -1s; }
.login-card {
  align-self: center; width: min(440px, calc(100% - 48px)); margin: 40px auto; padding: 44px;
  border: 1px solid rgba(34,99,78,.14); border-radius: 30px; background: rgba(255,255,255,.88);
  box-shadow: 0 30px 80px rgba(32,75,62,.14); backdrop-filter: blur(18px);
}
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand > span {
  display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px;
  color: white; background: #174d43; font-size: 22px; font-weight: 900;
}
.login-brand div { display: grid; }
.login-brand b { color: #174d43; font-size: 19px; }
.login-brand small { color: #7b8d87; }
.login-card h2 { margin: 36px 0 8px; color: #173e38; font-size: 30px; }
.login-card > p { margin: 0 0 28px; color: #778a84; }
.login-card label { display: grid; gap: 8px; margin: 16px 0; color: #405e56; font-weight: 800; }
.login-card input {
  width: 100%; padding: 14px 16px; border: 1px solid #cbdcd5; border-radius: 13px;
  color: #173e38; background: white; font: inherit;
}
.login-card input:focus { outline: 3px solid rgba(69,154,119,.16); border-color: #4a9b7a; }
.login-card .primary-button { width: 100%; margin-top: 12px; }
.form-error { min-height: 22px; color: #b3453c; font-size: 13px; font-weight: 800; }
.login-help { display: block; margin-top: 16px; color: #87968f; text-align: center; }

.account-hero, .account-form, .account-table {
  border: 1px solid rgba(37,104,82,.13); border-radius: 24px; background: rgba(255,255,255,.84);
  box-shadow: 0 16px 40px rgba(37,76,62,.07);
}
.account-hero {
  display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 28px 32px;
}
.account-hero h2 { margin: 5px 0; color: var(--forest); font-size: 28px; }
.account-hero p { margin: 0; color: var(--muted); }
.account-summary { display: flex; gap: 10px; }
.account-summary span { padding: 9px 13px; border-radius: 999px; color: #285e50; background: #eaf5ef; font-weight: 850; }
.account-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; margin-top: 18px; }
.account-form { align-self: start; padding: 24px; }
.account-form h3 { margin: 0 0 18px; color: var(--forest); }
.account-form label { display: grid; gap: 7px; margin: 13px 0; color: #46645b; font-size: 13px; font-weight: 850; }
.account-form input, .account-form select {
  padding: 11px 12px; border: 1px solid #ceded8; border-radius: 11px; background: white; font: inherit;
}
.account-form .primary-button { width: 100%; margin-top: 8px; }
.account-form small { display: block; margin-top: 12px; color: #82928d; line-height: 1.6; }
.account-table { overflow: hidden; }
.account-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr .8fr 1.5fr; align-items: center;
  gap: 12px; padding: 15px 18px; border-bottom: 1px solid #edf1ee;
}
.account-row.account-head { color: #758a82; background: #f5f8f6; font-size: 12px; font-weight: 900; }
.account-row b { color: #224c43; }
.account-row small { color: #71847d; }
.account-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.account-actions button {
  padding: 7px 9px; border: 1px solid #cadbd4; border-radius: 9px;
  color: #24584a; background: white; cursor: pointer;
}
.status-pill { width: max-content; padding: 5px 9px; border-radius: 999px; color: #26704f; background: #e4f5e9; font-size: 12px; font-weight: 900; }
.status-pill.suspended, .status-pill.departed { color: #985047; background: #fff0ec; }

@keyframes floatCell {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(12px,-18px,0) rotate(6deg); }
}
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .account-layout { grid-template-columns: 1fr; }
  .account-row { grid-template-columns: 1fr 1fr; }
  .account-head { display: none; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 10%, rgba(216, 239, 105, 0.15), transparent 24rem),
    var(--cream);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 252px;
  padding: 28px 20px 22px;
  background: var(--forest);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #fff;
  text-decoration: none;
  padding: 0 9px 28px;
}

.brand-mark {
  width: 43px;
  height: 43px;
  border-radius: 14px 14px 14px 5px;
  background: var(--lime);
  color: var(--forest);
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 800;
}

.brand strong { display: block; font-family: Georgia, serif; font-size: 21px; letter-spacing: .3px; }
.brand small { display: block; margin-top: 2px; color: #a9c5bd; font-size: 10px; letter-spacing: 1.4px; }

.main-nav { display: grid; gap: 6px; }

.nav-item {
  border: 0;
  background: transparent;
  color: #b8cec8;
  padding: 12px 14px;
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.nav-item span { display: inline-grid; place-items: center; width: 24px; margin-right: 10px; font-size: 18px; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: var(--forest); background: var(--lime); font-weight: 700; }
.teacher-only { display: none; }
body.teacher-mode .teacher-only { display: block; }
.admin-only { display: none; }
body.admin-mode .admin-only { display: block; }

.phase-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
}

.phase-label { display: flex; justify-content: space-between; align-items: center; color: #a9c5bd; font-size: 11px; }
.phase-label b { color: var(--lime); font-family: Georgia, serif; font-size: 28px; line-height: 1; }
.phase-card > strong { display: block; margin-top: 4px; font-size: 16px; }
.phase-card p { color: #a9c5bd; font-size: 11px; margin: 5px 0 12px; }
.mini-progress { height: 5px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.12); }
.mini-progress i { display: block; width: 0; height: 100%; background: var(--lime); border-radius: inherit; transition: width .5s; }
.phase-card small { display: block; margin-top: 8px; color: #a9c5bd; font-size: 9px; }

.role-switch {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: #fff;
  margin: 18px -3px -5px;
  padding: 18px 5px 0;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #e5efe7; color: var(--forest); font-weight: 800; }
.role-switch strong, .role-switch small { display: block; }
.role-switch strong { font-size: 12px; }
.role-switch small { margin-top: 3px; color: #95b4ac; font-size: 9px; }
.role-switch > b { color: #95b4ac; }

.main-content { grid-column: 2; width: min(1280px, 100%); margin: 0 auto; padding: 30px 42px 60px; }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.topbar small { color: var(--ink-soft); font-size: 11px; letter-spacing: .4px; }
.topbar h1 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(24px, 3vw, 35px); letter-spacing: -.5px; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.streak { min-width: 106px; display: grid; grid-template-columns: 28px 20px 1fr; align-items: center; padding: 9px 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 20px rgba(21,63,57,.04); }
.streak b { font-family: Georgia, serif; font-size: 19px; }
.streak small { font-size: 8px; color: var(--ink-soft); }
.icon-button { position: relative; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-size: 20px; }
.icon-button i { position: absolute; top: 9px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); border: 1px solid #fff; }

.view { display: none; animation: fadeUp .35s ease both; }
.view.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(7px); } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr); gap: 20px; }
.hero-card {
  position: relative;
  overflow: hidden;
  min-height: 286px;
  padding: 34px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 87% 18%, rgba(216,239,105,.3), transparent 11rem),
    linear-gradient(135deg, #123a35, #235f53);
  box-shadow: var(--shadow);
}

.hero-card::after {
  content: "";
  position: absolute;
  width: 210px; height: 210px; right: -35px; bottom: -75px;
  border: 1px solid rgba(216,239,105,.38); border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(216,239,105,.05), 0 0 0 58px rgba(216,239,105,.035);
}

.eyebrow { display: inline-flex; gap: 6px; align-items: center; color: var(--lime); text-transform: uppercase; font-size: 10px; letter-spacing: 1.4px; font-weight: 800; }
.eyebrow::before { content: ""; width: 19px; height: 1px; background: currentColor; }
.hero-card h2 { max-width: 530px; margin: 14px 0 9px; font-family: Georgia, "Songti SC", serif; font-size: clamp(27px, 3.7vw, 44px); line-height: 1.12; font-weight: 600; }
.hero-card p { margin: 0; color: #b9d0ca; font-size: 13px; }
.hero-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; margin-top: 28px; }
.primary-button, .secondary-button {
  border: 0; border-radius: 14px; padding: 13px 19px; cursor: pointer; font-weight: 800; transition: .2s;
}
.primary-button { background: var(--lime); color: var(--forest); box-shadow: 0 8px 20px rgba(216,239,105,.16); }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.secondary-button { background: rgba(255,255,255,.09); color: #fff; border: 1px solid rgba(255,255,255,.16); }

.task-card, .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(21,63,57,.04); }
.task-card { padding: 26px; }
.section-kicker { color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 800; }
.task-ring { position: relative; width: 138px; height: 138px; margin: 18px auto; display: grid; place-items: center; }
.task-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.task-ring circle { fill: none; stroke-width: 9; }
.task-ring .track { stroke: #edf1ed; }
.task-ring .value { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring-text { text-align: center; }
.ring-text b { display: block; font-family: Georgia, serif; font-size: 32px; }
.ring-text small { color: var(--ink-soft); font-size: 9px; }
.task-legend { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.legend-item { padding: 10px; background: var(--cream); border-radius: 12px; font-size: 10px; }
.legend-item i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
.stat-card { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.stat-card .stat-top { display: flex; justify-content: space-between; align-items: start; }
.stat-card span { color: var(--ink-soft); font-size: 10px; }
.stat-card em { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--lime-soft); font-style: normal; }
.stat-card b { display: block; margin-top: 13px; font-family: Georgia, serif; font-size: 27px; }
.stat-card small { color: var(--green); font-size: 9px; }

.content-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; margin-top: 20px; }
.panel { padding: 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.panel-head h3 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 20px; }
.panel-head button { border: 0; background: transparent; color: var(--forest-2); font-size: 10px; font-weight: 800; cursor: pointer; }

.chapter-list { display: grid; gap: 14px; }
.chapter-row { display: grid; grid-template-columns: 1fr 2fr 42px; gap: 14px; align-items: center; }
.chapter-row strong { display: block; font-size: 12px; }
.chapter-row small { color: var(--ink-soft); font-size: 9px; }
.bar { height: 8px; overflow: hidden; background: #edf1ed; border-radius: 10px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--forest-2), var(--green)); }
.chapter-row b { font-family: Georgia, serif; font-size: 14px; text-align: right; }

.activity-chart { height: 180px; display: flex; gap: 9px; align-items: flex-end; padding-top: 15px; border-bottom: 1px solid var(--line); }
.activity-chart div { flex: 1; position: relative; min-width: 10px; border-radius: 7px 7px 2px 2px; background: var(--lime); opacity: .72; transition: .2s; }
.activity-chart div:hover { opacity: 1; }
.activity-chart div::after { content: attr(data-day); position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); color: var(--ink-soft); font-size: 8px; }

.study-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.study-card { position: relative; min-height: 520px; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.study-meta { display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); font-size: 10px; }
.study-meta .tag { color: var(--forest); background: var(--lime-soft); border-radius: 20px; padding: 6px 10px; font-weight: 800; }
.question-no { margin-top: 44px; color: var(--green); font-family: Georgia, serif; font-size: 13px; }
.study-question { margin: 12px 0 30px; font-family: Georgia, "Songti SC", serif; font-size: clamp(22px, 3vw, 34px); line-height: 1.55; }
.answer-input { width: 100%; padding: 16px 18px; border: 1.5px solid #cad8d1; border-radius: 14px; outline: none; color: var(--ink); background: #fbfcfa; transition: .2s; }
.answer-input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(63,154,116,.11); }
.answer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.answer-actions small { color: var(--ink-soft); font-size: 9px; }
.answer-feedback { display: none; margin-top: 22px; padding: 18px; border-radius: 15px; }
.answer-feedback.show { display: block; animation: fadeUp .25s ease; }
.answer-feedback.correct { color: #236b4c; background: var(--green-soft); }
.answer-feedback.wrong { color: #a64d44; background: var(--red-soft); }
.answer-feedback strong { display: block; margin-bottom: 5px; }
.assessment { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.assessment.show { display: grid; }
.assess-button { border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: #fff; cursor: pointer; text-align: left; }
.assess-button b, .assess-button small { display: block; }
.assess-button small { margin-top: 3px; color: var(--ink-soft); font-size: 8px; }
.assess-button.green:hover { background: var(--green-soft); border-color: #9ccdb4; }
.assess-button.yellow:hover { background: var(--amber-soft); border-color: #e9ca91; }
.assess-button.red:hover { background: var(--red-soft); border-color: #e5afa8; }

.queue-panel { display: grid; gap: 14px; align-content: start; }
.queue-card { padding: 20px; border-radius: 19px; background: #fff; border: 1px solid var(--line); }
.queue-card h3 { margin: 0 0 5px; font-family: Georgia, serif; font-size: 17px; }
.queue-card p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.queue-number { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; }
.queue-number b { font-family: Georgia, serif; font-size: 38px; }
.queue-number small { color: var(--ink-soft); font-size: 9px; }
.queue-list { display: grid; gap: 9px; margin-top: 13px; }
.queue-item { display: flex; align-items: center; gap: 9px; font-size: 10px; }
.queue-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

.graph-toolbar { display: flex; gap: 8px; margin-bottom: 16px; overflow: auto; }
.chip { white-space: nowrap; border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 8px 13px; cursor: pointer; font-size: 10px; }
.chip.active { color: #fff; background: var(--forest); border-color: var(--forest); }
.graph-wrap {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border: 1px solid #c9dfd2;
  border-radius: 30px;
  background:
    radial-gradient(circle at 72% 20%, rgba(211,238,145,.22), transparent 21rem),
    radial-gradient(circle at 18% 84%, rgba(111,190,157,.13), transparent 18rem),
    radial-gradient(circle, rgba(111,157,136,.22) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(145deg, #f8fcf5, #edf7ee);
  box-shadow: inset 0 0 70px rgba(70,139,106,.07);
}
.graph-drag-hint {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 16px;
  padding: 7px 11px;
  border-radius: 18px;
  color: var(--forest-2);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(123,164,142,.24);
  backdrop-filter: blur(8px);
  pointer-events: none;
  font-size: 9px;
  font-weight: 700;
}
.graph-drag-hint span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(63,154,116,.12);
  animation: bioPulse 1.8s ease-in-out infinite;
}
.graph-legend {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 15px;
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid rgba(123,164,142,.22);
  border-radius: 18px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(9px);
  pointer-events: none;
  font-size: 8px;
}
.graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.graph-legend i { width: 8px; height: 8px; border-radius: 50%; }
.graph-legend i.mastered { background: #54a978; }
.graph-legend i.learning { background: #e2b64f; }
.graph-legend i.weak { background: #dc7669; }
.graph-legend b { width: 17px; border-top: 1.5px dashed #70a087; }
.graph-svg { width: 100%; height: 590px; touch-action: none; user-select: none; }
.graph-edge { stroke: #9bc1ae; stroke-width: 1.25; pointer-events: none; transition: stroke .2s; opacity: .78; }
.graph-edge.prerequisite { stroke: #5b9b7b; stroke-dasharray: 5 4; }
.graph-node { cursor: grab; touch-action: none; }
.graph-node.dragging { cursor: grabbing; }
.graph-node.dragging .node-body {
  stroke: var(--lime);
  stroke-width: 4;
  filter: drop-shadow(0 10px 14px rgba(21,63,57,.2));
}
.graph-node .node-halo {
  fill: rgba(255,255,255,.14);
  stroke: rgba(94,157,125,.12);
  stroke-width: 1;
}
.graph-node .node-body {
  fill: rgba(251,255,249,.94);
  stroke: #75a98f;
  stroke-width: 2;
  filter: drop-shadow(0 5px 8px rgba(21,63,57,.1));
}
.graph-node .node-nucleus {
  fill: #a5cab6;
  stroke: rgba(255,255,255,.9);
  stroke-width: 1;
}
.graph-node.mastery-green .node-body { fill: #edf9e9; stroke: #54a978; }
.graph-node.mastery-green .node-nucleus { fill: #54a978; }
.graph-node.mastery-yellow .node-body { fill: #fff9df; stroke: #d3a83e; }
.graph-node.mastery-yellow .node-nucleus { fill: #d3a83e; }
.graph-node.mastery-red .node-body { fill: #fff0ec; stroke: #d87568; }
.graph-node.mastery-red .node-nucleus { fill: #d87568; }
.graph-node.hub .node-body { fill: var(--forest); stroke: var(--lime); stroke-width: 4; }
.graph-node.hub .node-halo { fill: rgba(216,239,105,.13); stroke: rgba(216,239,105,.5); }
.graph-node.hub .node-nucleus { fill: var(--lime); }
.graph-node text { fill: var(--ink); font-size: 10px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.graph-node.hub text { fill: #fff; }
.bio-backdrop { pointer-events: none; }
.cell-boundary {
  fill: url(#cellGlow);
  stroke: #86bca1;
  stroke-width: 1.2;
  opacity: .2;
}
.cell-boundary-inner { fill: none; stroke-dasharray: 3 8; opacity: .16; }
.dna-strand {
  fill: none;
  stroke: url(#dnaGradient);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .18;
}
.dna-rungs line { stroke: #75aa91; stroke-width: 1; opacity: .12; }
.organelle { fill: rgba(226,242,181,.2); stroke: #79ad91; stroke-width: 2; opacity: .2; }
.organelle-fold { fill: none; stroke: #79ad91; stroke-width: 1.5; opacity: .2; }
.bio-particle {
  fill: #83b89c;
  opacity: .16;
  transform-box: fill-box;
  transform-origin: center;
  animation: bioParticle 4s ease-in-out infinite alternate;
}
.bio-particle:nth-of-type(2n) { animation-delay: -1.7s; }
.bio-particle:nth-of-type(3n) { animation-duration: 5.4s; }
.graph-detail {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 235px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(250,255,248,.89);
  border: 1px solid #c9ded2;
  box-shadow: 0 18px 42px rgba(37,91,67,.11);
  backdrop-filter: blur(15px);
}
.graph-detail h3 { margin: 0 0 5px; font-family: Georgia, serif; }
.graph-detail p { margin: 0 0 12px; color: var(--ink-soft); font-size: 9px; line-height: 1.6; }
.graph-detail dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 10px; }
.graph-detail dd { margin: 0; font-weight: 800; }

@keyframes bioPulse {
  50% { transform: scale(1.18); opacity: .65; }
}
@keyframes bioParticle {
  to { transform: translate(8px, -9px) scale(1.25); opacity: .28; }
}

.mistake-list { display: grid; gap: 12px; }
.mistake-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 17px; }
.mistake-badge { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--red); background: var(--red-soft); font-weight: 900; }
.mistake-item h4 { margin: 0 0 4px; font-size: 12px; }
.mistake-item p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.mistake-item button { border: 0; color: var(--forest); background: var(--lime-soft); padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 10px; font-weight: 800; }

.teacher-hero { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px; border-radius: 24px; color: #fff; background: var(--forest); }
.teacher-hero h2 { margin: 5px 0; font-family: Georgia, "Songti SC", serif; font-size: 29px; }
.teacher-hero p { margin: 0; color: #aec8c1; font-size: 11px; }
.teacher-hero button { border: 0; background: var(--lime); color: var(--forest); border-radius: 13px; padding: 12px 16px; font-weight: 800; cursor: pointer; }
.teacher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 18px; }
.teacher-panel-wide { grid-column: span 2; }
.risk-list { display: grid; gap: 10px; }
.risk-student { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; background: var(--red-soft); border-radius: 12px; }
.risk-student .avatar { width: 34px; height: 34px; background: #fff; color: var(--red); font-size: 11px; }
.risk-student b, .risk-student small { display: block; }
.risk-student b { font-size: 10px; }
.risk-student small { color: var(--ink-soft); font-size: 8px; margin-top: 2px; }
.risk-student em { color: var(--red); font-size: 10px; font-style: normal; font-weight: 800; }

.heatmap { overflow: auto; }
.heat-row { min-width: 560px; display: grid; grid-template-columns: 85px repeat(6, 1fr); gap: 6px; margin-bottom: 6px; align-items: center; font-size: 9px; }
.heat-cell { height: 28px; border-radius: 7px; display: grid; place-items: center; font-family: Georgia, serif; }
.heat-cell.high { background: #bde3c9; }
.heat-cell.mid { background: #f6dfa6; }
.heat-cell.low { background: #f2b9b0; }
.heat-head { color: var(--ink-soft); background: transparent; }

.empty-state { padding: 70px 20px; text-align: center; color: var(--ink-soft); }
.empty-state span { display: block; font-size: 42px; margin-bottom: 12px; }
.empty-state h3 { color: var(--ink); margin: 0 0 6px; }
.empty-state p { margin: 0; font-size: 10px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 17px; border-radius: 12px; background: #173b37; color: #fff; font-size: 11px; box-shadow: var(--shadow); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-nav { display: none; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 204px 1fr; }
  .sidebar { width: 204px; padding-inline: 13px; }
  .main-content { padding-inline: 24px; }
  .hero-grid, .content-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { padding-bottom: 70px; }
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main-content { width: 100%; padding: 20px 15px 30px; }
  .topbar { margin-bottom: 19px; }
  .topbar h1 { font-size: 25px; }
  .streak { min-width: 91px; grid-template-columns: 24px 18px 1fr; padding: 8px 10px; }
  .icon-button { display: none; }
  .hero-grid, .study-layout, .teacher-grid { grid-template-columns: 1fr; }
  .hero-card { min-height: 310px; padding: 26px 22px; }
  .hero-card h2 { font-size: 31px; }
  .task-card { padding: 20px; }
  .stats-grid { gap: 9px; }
  .stat-card { padding: 14px; }
  .content-grid { gap: 14px; }
  .panel { padding: 18px; }
  .chapter-row { grid-template-columns: 1.2fr 1.5fr 34px; gap: 8px; }
  .study-card { min-height: 510px; padding: 24px 18px; }
  .study-question { margin-top: 9px; font-size: 24px; }
  .assessment { grid-template-columns: 1fr; }
  .queue-panel { grid-template-columns: repeat(2, 1fr); }
  .graph-wrap, .graph-svg { height: 520px; min-height: 520px; }
  .graph-detail { left: 13px; right: 13px; top: auto; bottom: 13px; width: auto; }
  .mistake-item { grid-template-columns: 40px 1fr; }
  .mistake-item button { grid-column: 2; width: max-content; }
  .teacher-panel-wide { grid-column: span 1; }
  .mobile-nav {
    position: fixed; z-index: 30; inset: auto 0 0; height: 66px;
    display: grid; grid-template-columns: repeat(4,1fr);
    background: rgba(255,255,255,.94); border-top: 1px solid var(--line);
    backdrop-filter: blur(15px);
  }
  .mobile-nav button { border: 0; background: transparent; color: var(--ink-soft); font-size: 9px; }
  .mobile-nav span { display: block; margin-bottom: 2px; font-size: 19px; }
  .mobile-nav button.active { color: var(--forest); font-weight: 800; }
}

/* V0.2：统一简体中文字体与模块化界面 */
body,
button,
input,
textarea,
select {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
    "Noto Sans CJK SC", "Source Han Sans SC", "Heiti SC", sans-serif;
}

h1, h2, h3, h4,
.topbar h1,
.hero-card h2,
.panel-head h3,
.study-question,
.brand strong,
.stat-card b,
.chapter-row b,
.queue-number b,
.ring-text b {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
    "Noto Sans CJK SC", sans-serif;
  letter-spacing: 0;
}

.brand-mark {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 23px;
}

.nav-item span {
  font-size: 13px;
  font-weight: 900;
}

.module-intro {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #153f39 0%, #286b5d 100%);
  box-shadow: var(--shadow);
}

.module-intro::after {
  content: "生";
  position: absolute;
  right: 22px;
  bottom: -35px;
  color: rgba(255,255,255,.06);
  font-size: 170px;
  font-weight: 900;
}

.module-intro.ability-intro {
  background: linear-gradient(135deg, #263d62 0%, #526ea1 100%);
}

.module-intro h2 {
  position: relative;
  z-index: 1;
  margin: 8px 0;
  font-size: clamp(25px, 3vw, 36px);
}

.module-intro p {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.8;
}
.ability-data-summary {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.ability-data-summary span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08);
  font-size: 9px;
}
.ability-data-summary b { margin-right: 4px; color: #e4f37e; font-size: 12px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.module-card {
  position: relative;
  min-height: 190px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(21,63,57,.04);
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: #a8c4b6;
  box-shadow: 0 18px 38px rgba(21,63,57,.1);
}

.module-card .module-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--lime-soft);
  color: var(--forest);
  font-size: 18px;
  font-weight: 900;
}

.module-card.ability-card .module-icon {
  color: #314d7a;
  background: #edf1fb;
}

.module-card h3 {
  margin: 18px 0 7px;
  font-size: 17px;
}

.module-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.7;
}

.module-card .module-arrow {
  position: absolute;
  right: 19px;
  bottom: 18px;
  color: var(--forest);
  font-weight: 900;
}

.module-card .module-status {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 8px;
  border-radius: 20px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 8px;
  font-weight: 800;
}

.mode-tabs,
.ability-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mode-tabs::-webkit-scrollbar,
.ability-tabs::-webkit-scrollbar { display: none; }

.mode-tab,
.ability-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 9px 14px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.mode-tab.active,
.ability-tab.active {
  border-color: var(--forest);
  color: #fff;
  background: var(--forest);
}

.focus-shell {
  --focus-bg: #f3efe3;
  --focus-card: rgba(255,255,255,.92);
  --focus-ink: #263b37;
  --focus-muted: #697b76;
  position: relative;
  min-height: 620px;
  padding: 22px;
  overflow: hidden;
  border-radius: 28px;
  color: var(--focus-ink);
  background: var(--focus-bg);
  transition: background .25s ease, color .25s ease;
}

.study-prep-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

.study-picker-card {
  border: 1px solid rgba(39,113,88,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(31,76,62,.06);
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 14px 16px;
}

.study-picker-card label {
  color: var(--forest);
  font-size: 12px;
  font-weight: 900;
}

.study-picker-card select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfe0d5;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.study-picker-card small {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.focus-shell.theme-classic {
  --focus-bg:
    radial-gradient(circle at 90% 10%, rgba(184,152,99,.13), transparent 18rem),
    #f2eadb;
  --focus-card: rgba(255,253,248,.94);
  --focus-ink: #3d352d;
  --focus-muted: #81766b;
}

.focus-shell.theme-forest {
  --focus-bg:
    radial-gradient(circle at 85% 15%, rgba(216,239,105,.12), transparent 20rem),
    #123a35;
  --focus-card: rgba(255,255,255,.09);
  --focus-ink: #f5f8ef;
  --focus-muted: #b4cbc5;
}

.focus-shell.theme-sky {
  --focus-bg:
    radial-gradient(circle at 90% 5%, rgba(255,255,255,.75), transparent 18rem),
    linear-gradient(145deg, #dcecf2, #edf4ef);
  --focus-card: rgba(255,255,255,.72);
  --focus-ink: #24414a;
  --focus-muted: #627a80;
}

.focus-shell.theme-paper {
  --focus-bg:
    linear-gradient(rgba(67,83,77,.045) 1px, transparent 1px) 0 0 / 100% 28px,
    #f8f6ef;
  --focus-card: rgba(255,255,255,.86);
  --focus-ink: #303a37;
  --focus-muted: #78817e;
}

.focus-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.focus-progress {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(127,145,138,.2);
}

.focus-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.theme-picker {
  display: flex;
  gap: 7px;
  padding: 5px;
  border-radius: 22px;
  background: rgba(255,255,255,.34);
}

.theme-dot {
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.12);
}

.theme-dot.active { outline: 2px solid var(--green); outline-offset: 2px; }
.theme-dot[data-theme="classic"] { background: #e4d4b9; }
.theme-dot[data-theme="forest"] { background: #153f39; }
.theme-dot[data-theme="sky"] { background: #cfe4ec; }
.theme-dot[data-theme="paper"] { background: #faf8ef; }

.focus-card {
  width: min(720px, calc(100% - 30px));
  min-height: 475px;
  margin: 28px auto 0;
  padding: 34px clamp(22px, 5vw, 52px);
  border: 1px solid rgba(128,145,138,.12);
  border-radius: 25px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.focus-meta {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  color: #52645e;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.focus-mode-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(39,137,102,.18);
  border-radius: 999px;
  color: #12664f;
  background: rgba(232,246,237,.72);
  font-weight: 900;
  letter-spacing: 0;
  font-size: 14px;
}

.study-source {
  width: max-content;
  max-width: 100%;
  margin: 14px auto -30px;
  padding: 7px 13px;
  border: 1px solid rgba(34, 130, 92, .2);
  border-radius: 999px;
  color: #316a5a;
  background: rgba(224, 242, 229, .7);
  font-size: 12px;
}

.focus-question {
  margin: 44px auto 22px;
  max-width: 680px;
  font-size: 27px;
  font-weight: 720;
  line-height: 1.78;
  text-align: left;
  color: var(--focus-ink);
}

.voice-panel {
  max-width: 620px;
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  margin: 0 auto 18px;
  padding: 10px;
  border: 1px solid rgba(35,126,90,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
}

.voice-panel input[type="range"] {
  accent-color: var(--green);
}

.voice-panel span {
  color: var(--focus-muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.audio-question {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 8px 0 2px;
  text-align: center;
}

.audio-orb {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210,246,220,.95), rgba(49,145,104,.13));
  box-shadow: 0 18px 34px rgba(37,99,78,.12);
}

.audio-orb span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 43%, #1f745b 43% 57%, transparent 57%),
    radial-gradient(circle at 30% 50%, #1f745b 0 18%, transparent 19%),
    radial-gradient(circle at 70% 50%, #1f745b 0 18%, transparent 19%);
  animation: voicePulse 1.35s ease-in-out infinite;
}

.audio-question p {
  margin: 0;
  color: #187154;
  font-size: 13px;
  font-weight: 900;
}

.audio-question h3 {
  margin: 0 0 10px;
  color: var(--focus-ink);
  font-size: 22px;
}

.audio-core-words {
  max-width: 560px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 2px auto 12px;
  padding: 2px 8px;
}

.audio-core-words .bio-term {
  font-size: 17px;
}

.audio-blanks {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.audio-blank-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--focus-muted);
  font-size: 13px;
  font-weight: 900;
}

.audio-blank {
  min-width: 170px;
  justify-content: center;
  padding: 8px 12px 10px;
}

@keyframes voicePulse {
  0%, 100% { transform: scale(.92); opacity: .72; }
  50% { transform: scale(1.08); opacity: 1; }
}

.note-question {
  position: relative;
  padding: 10px 4px 2px;
  text-wrap: pretty;
}

.note-question::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 17px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(32,119,89,.7), rgba(124,171,143,.42));
}

.bio-term {
  border: 0;
  border-radius: 5px;
  padding: 0 3px 1px;
  color: #3454a4;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.04em;
  font-weight: 880;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(62,92,184,.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  box-shadow: inset 0 -0.22em 0 rgba(190,207,255,.45);
}

.bio-term:hover,
.bio-term.active {
  color: #243a86;
  background: rgba(235,240,255,.86);
  box-shadow: inset 0 -0.22em 0 rgba(147,168,236,.5);
}

.bio-term.core-term {
  color: #8b4a12;
  text-decoration-color: rgba(184,105,31,.38);
  box-shadow: inset 0 -0.24em 0 rgba(255,204,128,.55);
}

.bio-term.core-term:hover,
.bio-term.core-term.active {
  color: #683505;
  background: rgba(255,244,222,.92);
  box-shadow: inset 0 -0.24em 0 rgba(245,170,68,.58);
}

.note-cue {
  display: inline;
  margin: 0 2px;
  padding: 0 2px;
  border-radius: 4px;
  font-weight: 850;
}

.note-cue-cause {
  color: #8a3f22;
  box-shadow: inset 0 -.18em 0 rgba(232,151,103,.32);
}

.note-cue-compare {
  color: #315f8b;
  box-shadow: inset 0 -.18em 0 rgba(137,188,224,.34);
}

.note-cue-limit {
  color: #7d4b14;
  box-shadow: inset 0 -.18em 0 rgba(239,190,88,.38);
}

.note-cue-process {
  color: #346c58;
  box-shadow: inset 0 -.18em 0 rgba(135,199,170,.34);
}

.note-blank-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 8px;
  padding: 2px 9px 4px 7px;
  border: 1.5px dashed rgba(37,136,95,.42);
  border-radius: 12px;
  background: rgba(246,251,247,.78);
  vertical-align: baseline;
  box-shadow: inset 0 -3px 0 rgba(143,193,160,.12);
}

.blank-index {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #12664f;
  background: rgba(211,239,219,.95);
  font-size: 10px;
  font-weight: 900;
  transform: translateY(-2px);
}

.inline-answer {
  width: var(--answer-width, 8ch);
  min-width: 5ch;
  max-width: 16ch;
  margin: 0;
  padding: 0 2px 2px;
  border: 0;
  border-bottom: 2px solid rgba(28,126,88,.72);
  border-radius: 0;
  outline: 0;
  color: var(--focus-ink);
  background: transparent;
  font: inherit;
  font-size: .98em;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  vertical-align: baseline;
  caret-color: var(--green);
}

.inline-answer:focus {
  border-bottom-width: 2px;
  border-color: #0f6b4d;
  background: rgba(111,190,157,.1);
  box-shadow: 0 6px 0 -5px rgba(25,134,95,.2);
}

.revealed-answer {
  display: inline-block;
  margin: 0 5px;
  padding: 1px 9px 3px;
  border: 1px solid rgba(33,121,88,.22);
  border-radius: 10px;
  color: #0d4b24;
  background: #cfff5a;
  box-shadow: inset 0 -3px 0 rgba(21,112,56,.18), 0 0 0 3px rgba(207,255,90,.2);
  font-weight: 900;
  line-height: 1.35;
  animation: answerPop .25s ease both;
}

.answer-correction {
  position: relative;
  display: inline-grid;
  justify-items: center;
  margin: .8em 5px 0;
  vertical-align: baseline;
}

.answer-correction .wrong-answer {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  min-width: max-content;
  transform: translateX(-50%);
  color: #c94d43;
  text-decoration-color: #c94d43;
  text-decoration-thickness: 2px;
  text-decoration-style: solid;
  font-size: .62em;
  font-weight: 800;
  line-height: 1;
}

.memory-note {
  max-width: 620px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 auto 18px;
  padding: 10px 12px;
  border-left: 3px solid rgba(37,136,95,.58);
  border-radius: 10px;
  color: #4d5e58;
  background: rgba(249,252,247,.74);
  text-align: left;
}

.memory-note b {
  color: #12664f;
  font-size: 12px;
  white-space: nowrap;
}

.memory-note span {
  font-size: 13px;
  line-height: 1.65;
}

.theme-forest .revealed-answer {
  color: #153f39;
  background: var(--lime);
}

@keyframes answerPop {
  from { opacity: 0; transform: translateY(5px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.focus-actions {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  margin-top: 24px;
}

.response-controls[hidden] { display: none !important; }
.focus-card.knowledge-only {
  cursor: pointer;
}
.focus-card.knowledge-only .focus-question {
  margin-top: 92px;
  margin-bottom: 70px;
}

.forget-button,
.focus-submit {
  min-height: 47px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 800;
}

.forget-button {
  border: 1px solid rgba(217,109,97,.35);
  color: var(--red);
  background: rgba(255,240,237,.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cry-face {
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
}

.focus-submit {
  border: 0;
  color: #fff;
  background: var(--forest);
}

.theme-forest .focus-submit { color: var(--forest); background: var(--lime); }

.focus-feedback {
  display: none;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 13px;
  font-size: 11px;
  line-height: 1.7;
}

.focus-feedback.show { display: block; }
.focus-feedback.correct { color: #1c6949; background: rgba(229,245,235,.92); }
.focus-feedback.wrong { color: #9d4b43; background: rgba(255,240,237,.92); }

.assessment-wrap {
  display: none;
  margin-top: 17px;
}

.assessment-wrap.show { display: block; }

.assessment-wrap > p {
  margin: 0 0 10px;
  padding: 10px 13px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.assessment-wrap.correct > p {
  color: #21684d;
  background: rgba(225, 244, 232, .82);
}

.assessment-wrap.wrong > p {
  color: #a34d46;
  background: rgba(255, 235, 232, .86);
}

.focus-assessment {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 9px;
}

.focus-assessment.show { display: grid; }
.forgot-next {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}
.forgot-next.show { display: flex; }
.forgot-next p {
  margin: 0 0 12px;
  color: #a34d46;
  font-size: 12px;
  font-weight: 800;
}
.forgot-next .focus-submit { min-width: 220px; }
.focus-assessment button {
  border: 1px solid rgba(130,147,141,.25);
  border-radius: 12px;
  padding: 11px 8px;
  background: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.focus-assessment button i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 50%;
}

.focus-assessment button[data-assessment="green"] i { background: #24c848; }
.focus-assessment button[data-assessment="yellow"] i { background: #ffe016; }
.focus-assessment button[data-assessment="red"] i { background: #e52d3c; }

.version-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 5px;
  color: #153f39;
  background: var(--lime);
  font-size: 8px;
  font-style: normal;
  vertical-align: 2px;
}

.ability-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ability-tab b {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #315b50;
  background: #e6efe9;
  font-size: 9px;
}

.ability-tab.active b {
  color: var(--forest);
  background: var(--lime);
}

.training-catalog {
  margin-top: 17px;
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 13px;
}

.training-catalog summary {
  width: max-content;
  cursor: pointer;
  color: #d7e7df;
  font-size: 11px;
  font-weight: 800;
}

.catalog-table {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}

.catalog-table > div {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) 120px minmax(190px, 1.5fr) 42px;
  gap: 10px;
  align-items: center;
  font-size: 10px;
}

.catalog-table p { margin: 0; color: #c4d9d1; }
.catalog-table em { color: var(--lime); font-style: normal; font-weight: 900; text-align: right; }

.graph-node.selected .node-halo {
  stroke-width: 5px;
  stroke: #bfe83e;
  filter: drop-shadow(0 0 8px rgba(191,232,62,.65));
}

.ability-workspace {
  min-height: 530px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}

.chain-selector {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: -5px 0 24px;
  padding: 13px;
  border: 1px solid #dbe5df;
  border-radius: 16px;
  background: #f6faf6;
}
.chain-selector label span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 700;
}
.chain-selector select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cad8d1;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 11px;
}

.term-popover {
  max-width: 520px;
  margin: -4px auto 16px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 130, 92, .22);
  border-left: 4px solid #2c8b67;
  border-radius: 12px;
  color: #23443d;
  background: rgba(248,253,246,.94);
  box-shadow: 0 14px 34px rgba(21,63,57,.08);
  text-align: left;
}

.term-popover strong {
  display: block;
  margin-bottom: 4px;
  color: #0f6b4d;
  font-size: 13px;
}

.term-popover p {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
}
.chain-selector button:disabled { opacity: .38; cursor: not-allowed; }
.chain-node-preview { margin-top: 22px; }
.training-type.selected { border-color: #73ad8f; background: var(--green-soft); }

.workspace-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
}

.workspace-head h2 { margin: 4px 0 7px; font-size: 23px; }
.workspace-head p { margin: 0; color: var(--ink-soft); font-size: 10px; }
.workspace-head .module-status { position: static; flex: 0 0 auto; }

.logic-answer-zone {
  min-height: 84px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px;
  border: 2px dashed #cbd8d2;
  border-radius: 16px;
  background: #f8faf7;
}

.logic-answer-zone:empty::before {
  content: "按正确因果顺序点击下方卡片";
  color: #98aaa3;
  font-size: 11px;
}

.logic-pool {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.logic-card {
  border: 1px solid #d6e0db;
  border-radius: 12px;
  padding: 11px 13px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  box-shadow: 0 5px 14px rgba(21,63,57,.05);
}

.logic-card.selected { color: #fff; background: var(--forest); }
.logic-connector { color: var(--green); font-weight: 900; }

.workspace-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}

.soft-button {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.experiment-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
}

.component-bank,
.experiment-canvas {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #f8faf7;
}

.component-bank h4,
.experiment-canvas h4 { margin: 0 0 13px; font-size: 12px; }

.component-chip {
  display: block;
  position: relative;
  width: 100%;
  margin: 7px 0;
  border: 1px solid #d3ded8;
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-size: 10px;
}

.component-chip.used {
  border-color: #86b99e;
  color: #17483e;
  background: #e7f5ec;
  box-shadow: inset 3px 0 0 #3f9a74;
}

.component-chip.used em {
  display: block;
  margin-top: 4px;
  color: #5c8274;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.component-chip.used:hover {
  border-color: #e07b65;
  background: #fff1ee;
}

.experiment-slot {
  min-height: 46px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
  padding: 8px 11px;
  border: 1px dashed #c7d5ce;
  border-radius: 11px;
  color: var(--ink-soft);
  font-size: 10px;
}

.experiment-slot.filled {
  border-style: solid;
  border-color: #8fc2a7;
  color: var(--ink);
  background: var(--green-soft);
}

.genetic-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.genetic-map {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(216,239,105,.22), transparent 38%),
    linear-gradient(180deg, #f9fcf6 0%, #f4f9f5 100%);
}

.genetic-map-head h3 { margin: 5px 0 8px; font-size: 20px; }
.genetic-map-head p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.genetic-type-list { display: grid; gap: 11px; margin-top: 16px; }

.genetic-type-card {
  border: 1px solid #d8e4de;
  border-radius: 16px;
  padding: 13px 14px;
  background: rgba(255,255,255,.92);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.genetic-type-card:hover,
.genetic-type-card.active {
  transform: translateY(-1px);
  border-color: #76aa8d;
  box-shadow: 0 10px 24px rgba(21,63,57,.08);
}

.genetic-type-card > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
}

.genetic-type-card strong { display: block; margin-bottom: 5px; font-size: 12px; }
.genetic-type-card small,
.genetic-type-card em {
  display: block;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.6;
  font-style: normal;
}

.genetic-main { display: grid; gap: 16px; min-width: 0; }
.genetic-overview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }

.genetic-overview-card,
.genetic-note-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fafbf9;
}

.genetic-overview-card span,
.genetic-note-card .section-kicker { display: block; margin-bottom: 8px; }
.genetic-overview-card ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 10px; line-height: 1.8; }
.genetic-overview-card.emphasis { background: linear-gradient(180deg, #f8fcf3 0%, #f4f8ef 100%); }
.genetic-overview-card.emphasis b { display: block; margin-bottom: 12px; font-size: 24px; }
.genetic-overview-card.emphasis small { color: var(--ink-soft); font-size: 10px; }
.genetic-progress { margin-bottom: 10px; }

.genetic-visual-card {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #d7e4dd;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,250,244,.92)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(87,145,113,.05) 24px 25px);
}

.genetic-visual-card > div:first-child b {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.genetic-visual-svg {
  width: 100%;
  min-height: 150px;
}

.genetic-visual-svg line {
  stroke: #7aa48e;
  stroke-width: 3;
  stroke-linecap: round;
}

.genetic-visual-svg rect,
.genetic-visual-svg circle {
  fill: #fff;
  stroke: #244c44;
  stroke-width: 3;
}

.genetic-visual-svg .affected {
  fill: #244c44;
}

.genetic-visual-svg text {
  fill: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
}

.genetic-cross-visual,
.genetic-experiment-visual {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.genetic-cross-visual div,
.genetic-experiment-visual .parent,
.genetic-experiment-visual .offspring {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid #cdded4;
  border-radius: 14px;
  background: #fff;
}

.genetic-cross-visual span,
.genetic-experiment-visual span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 800;
}

.genetic-cross-visual b,
.genetic-experiment-visual strong {
  color: var(--forest);
  font-size: 15px;
}

.genetic-experiment-visual {
  grid-template-columns: 1fr 34px 1fr 22px 1.2fr;
  align-items: center;
}

.genetic-experiment-visual > b {
  color: var(--green);
  font-size: 24px;
  text-align: center;
}

.genetic-experiment-visual > i {
  height: 2px;
  background: #8bb89e;
}

.genetic-experiment-visual .parent {
  color: var(--forest);
  font-size: 28px;
  text-align: center;
}

.genetic-mastery {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.genetic-mastery b {
  color: var(--forest);
  font-size: 28px;
}

.genetic-mastery span {
  color: var(--ink-soft);
  font-size: 10px;
}

.genetic-review-list {
  display: grid;
  gap: 8px;
}

.genetic-review-row {
  display: grid;
  grid-template-columns: 24px 1fr 44px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #dbe5df;
  border-radius: 11px;
  background: #fff;
  font-size: 9px;
}

.genetic-review-row span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #7da991;
}

.genetic-review-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genetic-review-row em {
  color: var(--ink-soft);
  font-style: normal;
  text-align: right;
}

.genetic-review-row.weak {
  border-color: #efc4bc;
  background: #fff6f3;
}

.genetic-review-row.weak span {
  background: #d46f61;
}

.genetic-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 320px;
  gap: 18px;
  align-items: start;
}

.genetic-stepboard,
.genetic-steps {
  display: grid;
  gap: 11px;
}

.genetic-step {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafbf9;
  opacity: .48;
}

.genetic-step.active,
.genetic-step.done { opacity: 1; }
.genetic-step.done { border-color: #9acbb1; background: var(--green-soft); }
.genetic-step.active { border-color: #79ad92; box-shadow: 0 11px 26px rgba(21,63,57,.08); }
.genetic-step-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}
.genetic-step-head span { display: block; color: var(--green); font-size: 9px; font-weight: 800; }
.genetic-step h4 { margin: 0 0 8px; font-size: 12px; }
.genetic-step-head b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  color: #7a4f12;
  background: #fff0c9;
  font-size: 9px;
}
.genetic-step p { margin: 0 0 10px; color: var(--ink); font-size: 11px; line-height: 1.7; }
.genetic-step input {
  width: 100%;
  border: 1px solid #cad8d1;
  border-radius: 10px;
  padding: 9px 11px;
  background: #fff;
  font-size: 11px;
}
.gene-symbol-pad {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.gene-symbol-pad button {
  min-width: 34px;
  height: 30px;
  border: 1px solid #cadbd1;
  border-radius: 9px;
  color: var(--forest);
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.gene-symbol-pad button:hover {
  border-color: var(--green);
  background: var(--lime-soft);
}

.gene-symbol-pad.disabled {
  opacity: .42;
}

.gene-symbol-pad button:disabled {
  cursor: not-allowed;
}
.genetic-hint { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 9px; }
.genetic-sidepanel { display: grid; gap: 14px; }
.genetic-reasoning-chain { display: grid; gap: 10px; }
.genetic-reasoning-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border: 1px dashed #d6e0db;
  border-radius: 12px;
  background: #fff;
}
.genetic-reasoning-item.filled { border-style: solid; border-color: #95c4aa; background: #f7fcf5; }
.genetic-reasoning-item b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--forest);
  font-size: 10px;
}
.genetic-reasoning-item strong { display: block; margin-bottom: 4px; font-size: 10px; }
.genetic-reasoning-item p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.6; }
.genetic-feedback { border-radius: 14px; padding: 13px 14px; font-size: 10px; line-height: 1.7; }
.genetic-feedback strong { display: block; margin-bottom: 6px; font-size: 12px; }
.genetic-feedback p { margin: 0; }
.genetic-feedback.ok { color: #15473d; background: #edf9ee; border: 1px solid #bfe0c7; }
.genetic-feedback.error { color: #85433a; background: #fff2ee; border: 1px solid #efc4bc; }
.genetic-feedback.neutral { color: var(--ink-soft); background: #f7f9f7; border: 1px dashed #d4dfd8; }
.genetic-side-actions { justify-content: stretch; }
.genetic-side-actions .soft-button,
.genetic-side-actions .primary-button { flex: 1 1 0; }

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

.training-type {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fafbf9;
}
.training-type b { display: block; margin-bottom: 6px; font-size: 12px; }
.training-type p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.6; }

.proof-answer {
  padding: 23px;
  border-radius: 16px;
  background: #f6f2e8;
  font-size: 15px;
  line-height: 2.1;
}

.proof-word {
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
}
.proof-word:hover { background: #fff2a9; }
.proof-word.found { color: #a2473d; background: #ffd8d1; text-decoration: line-through; }

.radar-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 280px;
  gap: 24px;
  align-items: center;
}

.radar-chart { width: 100%; max-height: 390px; }
.radar-grid { fill: none; stroke: #dce5e0; stroke-width: 1; }
.radar-axis { stroke: #dce5e0; }
.radar-value { fill: rgba(63,154,116,.28); stroke: var(--green); stroke-width: 2; }
.radar-label { fill: var(--ink); font-size: 11px; font-weight: 700; text-anchor: middle; }

.radar-scores { display: grid; gap: 9px; }
.radar-score { display: grid; grid-template-columns: 1fr 45px; gap: 9px; align-items: center; font-size: 10px; }
.radar-score .bar { height: 7px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.dashboard-grid .panel:first-child { grid-column: span 2; }

.institution-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #183f3a, #336d61);
}
.institution-hero h2 { margin: 8px 0; font-size: 28px; }
.institution-hero p { margin: 0; color: #c1d7d1; font-size: 11px; }
.import-button {
  padding: 13px 18px;
  border-radius: 13px;
  color: var(--forest);
  background: var(--lime);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}
.import-button input { display: none; }
.institution-panel, .import-history, .content-editor { margin-top: 18px; }
.institution-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.institution-tabs-wide {
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 18px;
  background: #f3f8f4;
}
.institution-tabs button {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--ink-soft);
  background: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.institution-tabs button.active { color: #fff; border-color: var(--forest); background: var(--forest); }
.institution-tabs small { margin-left: 5px; opacity: .65; }
.content-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.content-toolbar h3 { margin: 0 0 4px; font-size: 18px; }
.content-toolbar p { margin: 0; color: var(--ink-soft); font-size: 9px; }
.content-table { display: grid; gap: 6px; overflow: auto; }
.content-row {
  min-width: 690px;
  display: grid;
  grid-template-columns: 90px minmax(280px, 1fr) 150px 60px;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f8faf7;
  font-size: 10px;
}
.content-head { color: var(--ink-soft); background: #edf3ed; font-weight: 800; }
.content-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-row small { color: var(--ink-soft); }
.content-row button { border: 0; color: var(--forest); background: var(--lime-soft); border-radius: 8px; padding: 7px; cursor: pointer; font-size: 9px; font-weight: 800; }
.empty-bank {
  min-width: 690px;
  padding: 24px;
  border: 1px dashed #bfd2c8;
  border-radius: 14px;
  color: var(--ink-soft);
  background: #fbfdf9;
  font-size: 12px;
  text-align: center;
}
.institution-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.institution-overview-grid article,
.analytics-placeholder article,
.institution-roadmap {
  padding: 18px;
  border: 1px solid #dfe9e1;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f7fbf5);
}
.institution-overview-grid span,
.analytics-placeholder b {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 900;
}
.institution-overview-grid b {
  display: block;
  margin: 8px 0;
  color: var(--forest);
  font-size: 28px;
}
.institution-overview-grid p,
.institution-roadmap p,
.analytics-placeholder span {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.7;
}
.institution-roadmap { margin-top: 16px; }
.institution-roadmap h3 { margin: 0 0 8px; font-size: 17px; }
.institution-roadmap code {
  display: block;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  color: #24574f;
  background: #edf7ed;
  white-space: normal;
}
.analytics-placeholder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.analytics-placeholder b { display: block; margin-bottom: 8px; color: var(--forest); font-size: 15px; }
.editor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-bottom: 16px; }
.editor-grid label { color: var(--ink-soft); font-size: 9px; font-weight: 700; }
.editor-grid input, .editor-grid select, .editor-grid textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid #cad8d1;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 10px;
}
.editor-grid textarea { min-height: 90px; resize: vertical; }
.editor-wide { grid-column: span 2; }
.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.5;
}
.import-record { display: grid; grid-template-columns: 1fr 180px 150px; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.import-record span, .import-record small { color: var(--ink-soft); }

@media (max-width: 980px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .genetic-shell,
  .genetic-workbench,
  .experiment-layout,
  .radar-layout { grid-template-columns: 1fr; }
  .genetic-overview { grid-template-columns: 1fr; }
  .genetic-visual-card { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .module-grid,
  .training-type-grid,
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .panel:first-child { grid-column: span 1; }
  .module-card { min-height: 160px; }
  .focus-shell { min-height: 590px; padding: 12px; border-radius: 20px; }
  .study-prep-panel { grid-template-columns: 1fr; }
  .focus-card { width: 100%; min-height: 480px; margin-top: 18px; padding: 25px 18px; }
  .focus-meta { display: grid; gap: 8px; font-size: 13px; }
  .focus-question { margin: 42px 0 26px; font-size: 21px; line-height: 1.72; }
  .focus-actions { grid-template-columns: 92px 1fr; }
  .focus-assessment { grid-template-columns: 1fr; }
  .voice-panel { grid-template-columns: 1fr 1fr; }
  .voice-panel input[type="range"],
  .voice-panel span { grid-column: span 2; }
  .note-question::before { left: -10px; }
  .note-blank-wrap { margin: 2px 3px; padding: 1px 7px 3px 6px; }
  .inline-answer { max-width: 12ch; margin-inline: 0; }
  .memory-note { grid-template-columns: 1fr; gap: 4px; }
  .experiment-layout { grid-template-columns: 1fr; }
  .ability-workspace { padding: 18px 14px; }
  .workspace-head { display: block; }
  .radar-layout { grid-template-columns: 1fr; }
  .theme-picker { gap: 5px; }
  .theme-dot { width: 22px; height: 22px; }
  .chain-selector { grid-template-columns: 1fr 1fr; }
  .chain-selector label { grid-column: span 2; grid-row: 1; }
  .genetic-map,
  .genetic-overview-card,
  .genetic-note-card { padding: 14px; }
  .genetic-cross-visual,
  .genetic-experiment-visual { grid-template-columns: 1fr; }
  .genetic-experiment-visual > i { height: 22px; width: 2px; justify-self: center; }
  .institution-hero { grid-template-columns: 1fr; }
  .editor-grid { grid-template-columns: 1fr; }
  .editor-wide { grid-column: span 1; }
  .import-record { grid-template-columns: 1fr; gap: 3px; }
}