:root {
  --forest: #173e35;
  --green: #32745c;
  --mint: #e9f1e9;
  --paper: #f7f8f4;
  --ink: #20352e;
  --muted: #76817a;
  --line: #e1e6dd;
  --gold: #e9c46a;
  --red: #a94840;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang HK",
    sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  outline-offset: 4px;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
a {
  color: var(--green);
}
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--forest);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -1px;
}
.brandmark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--forest);
  color: white;
  border-radius: 12px;
  font-size: 23px;
  letter-spacing: 0;
}
.brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 3px;
  font-weight: 600;
}
.navlabel {
  font-size: 11px;
  letter-spacing: 1.7px;
  color: var(--muted);
  margin: 42px 12px 14px;
}
.nav {
  display: grid;
  gap: 7px;
}
.nav button {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #65726a;
  font-size: 14px;
}
.nav button.active {
  background: var(--mint);
  color: var(--forest);
  font-weight: 700;
}
.nav button:hover {
  background: #f1f5ef;
}
.navicon {
  width: 22px;
  font-size: 20px;
}
.sidebarfoot {
  margin-top: auto;
}
.smallnote {
  border: 1px solid var(--line);
  padding: 15px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 20px 0;
}
.profile {
  display: flex;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #e7eadb;
  display: grid;
  place-items: center;
  color: var(--forest);
  font-weight: 700;
}
.profile strong {
  font-size: 13px;
}
.profile small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.iconbutton {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 18px;
}
.workspace {
  min-width: 0;
}
.topbar {
  height: 78px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 44px;
  background: #fcfdf9;
}
.crumb {
  font-size: 13px;
  color: var(--muted);
}
.crumb b {
  color: var(--ink);
  font-weight: 600;
  margin-left: 12px;
}
.topright {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
}
.pill {
  border: 1px solid var(--line);
  padding: 7px 11px;
  border-radius: 20px;
  color: var(--green);
  font-size: 11px;
  background: #fff;
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #6a9871;
  border-radius: 50%;
  margin-right: 6px;
}
.content {
  padding: 36px 44px 50px;
  max-width: 1440px;
  margin: auto;
}
.eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.pageheading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 20px;
}
.pageheading h1 {
  font-size: 29px;
  font-weight: 650;
  letter-spacing: -0.8px;
  margin: 9px 0 10px;
}
.muted {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.pageheading p {
  margin: 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--forest);
  border: 1px solid var(--forest);
  border-radius: 8px;
  color: white;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.button.secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--forest);
}
.button.soft {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--forest);
}
.button.danger {
  background: var(--red);
  border-color: var(--red);
}
.hero {
  position: relative;
  border-radius: 16px;
  background: var(--forest);
  color: #fff;
  padding: 31px 34px;
  display: grid;
  grid-template-columns: 1fr 220px;
  overflow: hidden;
  margin-bottom: 25px;
  min-height: 204px;
}
.hero .eyebrow {
  color: #b4d1b8;
  font-size: 10px;
}
.hero h2 {
  font-size: 26px;
  font-weight: 550;
  line-height: 1.5;
  margin: 12px 0 9px;
  letter-spacing: -0.5px;
}
.hero p {
  font-size: 13px;
  color: #b7c9c0;
  line-height: 1.8;
  max-width: 520px;
  margin: 0;
}
.hero .button {
  margin-top: 20px;
  background: #e9c46a;
  color: var(--forest);
  border: 0;
  padding: 10px 15px;
}
.journey {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit {
  position: absolute;
  border: 1px solid #6e9c7c55;
  border-radius: 50%;
  width: 180px;
  height: 180px;
}
.orbit.two {
  width: 125px;
  height: 125px;
}
.orbit.three {
  width: 68px;
  height: 68px;
  background: #335c48;
}
.leaf {
  position: relative;
  font-size: 36px;
  transform: rotate(-25deg);
  color: #dce7b5;
}
.orbitlabel {
  position: absolute;
  right: 0;
  top: 22px;
  padding: 7px 11px;
  background: #355a49;
  border: 1px solid #6e9c7c55;
  border-radius: 7px;
  font-size: 10px;
}
.orbitlabel.bottom {
  top: auto;
  bottom: 20px;
  right: 80px;
  color: var(--gold);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
.metric {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 19px 21px;
}
.metrichead {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}
.metricicon {
  color: var(--green);
  font-size: 16px;
}
.metricvalue {
  font-size: 29px;
  font-weight: 650;
  margin: 12px 0 6px;
  letter-spacing: -1px;
}
.metricvalue small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 5px;
}
.metric .foot {
  font-size: 10px;
  color: var(--muted);
}
.gridtwo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 23px;
  margin-bottom: 22px;
}
.panelhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}
.panelhead h2 {
  font-size: 16px;
  font-weight: 650;
  margin: 0;
}
.linkbutton {
  background: none;
  border: 0;
  color: var(--green);
  font-size: 11px;
  padding: 4px;
}
.badge {
  display: inline-block;
  font-size: 10px;
  border-radius: 5px;
  padding: 4px 7px;
  white-space: nowrap;
  background: #edf1e7;
  color: #677453;
}
.badge.WEAK,
.badge.REVIEW_NEEDED {
  background: #f8ece4;
  color: #a16c41;
}
.badge.MASTERED {
  background: #e1f0e8;
  color: #34785e;
}
.badge.VERIFYING {
  background: #edf0fa;
  color: #677fa4;
}
.badge.NEW {
  background: #f1f2ee;
  color: #849080;
}
.skillrow {
  display: grid;
  grid-template-columns: 1fr 90px 65px;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid #f0f2ed;
  padding: 15px 0;
}
.skillrow:last-child {
  border-bottom: 0;
}
.skillname {
  font-size: 13px;
  font-weight: 550;
}
.skillname small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 6px;
}
.bar {
  height: 5px;
  background: #edf0e9;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 9px;
}
.barfill {
  height: 100%;
  background: #78a181;
  border-radius: 10px;
}
.barfill.weak {
  background: #d6b278;
}
.percent {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}
.reviewcard {
  border-radius: 10px;
  background: #f4f6ef;
  padding: 19px;
  line-height: 1.7;
}
.reviewcard h3 {
  font-size: 15px;
  margin: 9px 0;
}
.reviewcard p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 15px;
}
.reviewcard .button {
  width: 100%;
}
.emptyicon {
  font-size: 26px;
  color: #859e78;
  margin-bottom: 9px;
}
.sectionfoot {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
}
.modulecards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.module {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 19px;
  background: #fff;
  text-align: left;
  color: var(--ink);
}
.module:hover {
  border-color: #90ac8c;
  background: #fafcf6;
}
.module h3 {
  font-size: 14px;
  margin: 12px 0 6px;
}
.module p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.moduleicon {
  background: #eef3e7;
  border-radius: 8px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 19px;
}
.pagefooter {
  display: flex;
  justify-content: space-between;
  color: #96a096;
  font-size: 10px;
  margin-top: 28px;
}
.player {
  max-width: 840px;
  margin: auto;
}
.questioncard {
  background: white;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 32px;
  margin-top: 20px;
}
.qmeta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.questiontext {
  white-space: pre-wrap;
  font-size: 21px;
  line-height: 1.8;
  margin: 28px 0;
}
.options {
  display: grid;
  gap: 12px;
}
.option {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  text-align: left;
  color: var(--ink);
}
.option span {
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.option.selected {
  background: #ecf3eb;
  border-color: var(--green);
}
.option.unknown {
  background: #f7f7f2;
  color: #788277;
  border-style: dashed;
  font-size: 13px;
}
.questionactions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 25px;
}
.field {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-size: 13px;
}
.field input,
.field select,
.field textarea,
textarea.editor {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.field textarea {
  min-height: 100px;
  resize: vertical;
}
textarea.editor {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  min-height: 270px;
  line-height: 1.6;
  resize: vertical;
}
.feedback {
  border-radius: 10px;
  padding: 22px;
  margin-top: 22px;
  background: #edf4ec;
}
.feedback.wrong {
  background: #fcf2e7;
}
.feedback h3 {
  font-size: 17px;
  margin: 0 0 12px;
}
.feedback p {
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-wrap;
}
.answerline {
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0;
}
.notice {
  border-left: 3px solid var(--gold);
  background: #fcf7e9;
  padding: 13px 17px;
  font-size: 12px;
  line-height: 1.8;
  margin: 18px 0;
}
.audio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 15px;
}
.audio select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px;
  font-size: 12px;
}
.audio button {
  font-size: 12px;
}
.audio-status audio {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 12px 0;
}
.historycard {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 15px;
  background: #fff;
}
.historycard h3 {
  font-size: 15px;
  line-height: 1.7;
  margin: 13px 0;
}
.historycard .questionactions {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.reviewrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  gap: 20px;
}
.reviewrow:last-child {
  border: 0;
}
.reviewrow h3 {
  font-size: 14px;
  margin: 0 0 6px;
}
.adminlist {
  display: grid;
  gap: 10px;
  max-height: 480px;
  overflow: auto;
}
.adminrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px;
  font-size: 12px;
}
.adminrow p {
  margin: 0 0 6px;
  line-height: 1.6;
}
.adminrow .button {
  padding: 7px 10px;
  font-size: 11px;
}
.inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.loginart {
  background: var(--forest);
  color: #fff;
  padding: 60px 12%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.loginart .brand {
  color: #fff;
}
.loginart h1 {
  font-size: 48px;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -2px;
}
.loginart p {
  color: #b8cfc0;
  line-height: 1.9;
  font-size: 15px;
}
.loginart .orbit {
  width: 270px;
  height: 270px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 30px auto;
}
.loginart .leaf {
  font-size: 90px;
}
.loginform {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
.loginbox {
  width: 100%;
  max-width: 350px;
}
.loginbox h2 {
  font-size: 27px;
  margin: 12px 0;
}
.loginbox .button {
  width: 100%;
  margin-top: 12px;
}
.loginbox .field {
  margin: 23px 0;
}
.loading {
  padding: 60px;
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 20px;
  background: var(--forest);
  color: #fff;
  box-shadow: 0 6px 20px #0002;
  border-radius: 9px;
  font-size: 13px;
  display: none;
  z-index: 99;
  max-width: 90vw;
}
#toast.show {
  display: block;
}
.error {
  color: var(--red);
  font-size: 13px;
  line-height: 1.7;
}
.busy {
  opacity: 0.6;
  pointer-events: none;
}
.mono {
  font-family: monospace;
}
.checklabel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  margin: 15px 0;
}
.checklabel input {
  width: auto;
}
.details {
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
}
.statline {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
.importtext {
  max-height: 220px;
  overflow: auto;
  background: #f5f6f1;
  padding: 15px;
  border-radius: 8px;
  white-space: pre-wrap;
  font-size: 12px;
}
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 3px;
  background: var(--mint);
  font-size: 11px;
  border-radius: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
@media (min-width: 1500px) {
  .content {
    padding-top: 45px;
  }
}
@media (max-width: 1150px) {
  .shell {
    grid-template-columns: 205px 1fr;
  }
  .sidebar {
    padding: 25px 15px;
  }
  .content {
    padding: 28px;
  }
  .topbar {
    padding: 0 28px;
  }
  .gridtwo {
    grid-template-columns: 1fr 1fr;
  }
  .hero {
    grid-template-columns: 1fr 155px;
  }
  .orbit {
    width: 150px;
    height: 150px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 16px;
  }
  .metricvalue {
    font-size: 26px;
  }
}
@media (max-width: 900px) {
  .gridtwo {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    grid-template-columns: 1fr 130px;
  }
  .loginart {
    padding: 45px;
  }
  .loginart h1 {
    font-size: 36px;
  }
  .journey .orbit {
    width: 120px;
    height: 120px;
  }
  .journey .two {
    width: 85px;
    height: 85px;
  }
  .journey .three {
    width: 55px;
    height: 55px;
  }
  .orbitlabel {
    display: none;
  }
  .modulecards {
    gap: 10px;
  }
}
@media (max-width: 680px) {
  .shell {
    display: block;
  }
  .sidebar {
    height: auto;
    position: static;
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .sidebar .brand {
    font-size: 21px;
  }
  .sidebar .navlabel,
  .sidebarfoot {
    display: none;
  }
  .nav {
    display: flex;
    overflow: auto;
    margin-top: 15px;
    gap: 3px;
  }
  .nav button {
    white-space: nowrap;
    width: auto;
    font-size: 11px;
    padding: 9px;
  }
  .navicon {
    width: 15px;
    font-size: 16px;
  }
  .topbar {
    height: 52px;
    padding: 0 20px;
  }
  .topright .date {
    display: none;
  }
  .content {
    padding: 25px 19px;
  }
  .pageheading {
    align-items: flex-start;
  }
  .pageheading h1 {
    font-size: 25px;
  }
  .pageheading > .button {
    padding: 10px;
    font-size: 11px;
    margin-top: 25px;
  }
  .hero {
    padding: 25px;
    grid-template-columns: 1fr;
  }
  .journey {
    display: none;
  }
  .hero h2 {
    font-size: 24px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 15px;
  }
  .metricvalue {
    font-size: 27px;
  }
  .modulecards {
    grid-template-columns: 1fr;
  }
  .module {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0 12px;
    padding: 15px;
  }
  .moduleicon {
    grid-row: 1/3;
  }
  .module h3 {
    margin: 0 0 5px;
  }
  .questioncard {
    padding: 22px;
  }
  .questiontext {
    font-size: 18px;
  }
  .questionactions {
    flex-wrap: wrap;
  }
  .panel {
    padding: 19px;
  }
  .login {
    display: block;
  }
  .loginart {
    padding: 28px;
  }
  .loginart h1 {
    font-size: 30px;
    margin: 28px 0 10px;
  }
  .loginart .orbit,
  .loginart > small {
    display: none;
  }
  .loginart p {
    font-size: 13px;
    margin: 0;
  }
  .loginform {
    padding: 30px;
  }
  .skillrow {
    grid-template-columns: 1fr 80px 45px;
    gap: 10px;
  }
  .pagefooter {
    display: block;
    line-height: 1.8;
  }
  .reviewrow {
    gap: 12px;
  }
  .adminrow {
    align-items: flex-start;
  }
  .adminrow .inline {
    flex-direction: column;
  }
  .topright {
    gap: 0;
  }
}

/* Evidence reports share the learning space, and print without navigation. */
.report-controls {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.report-controls .field {min-width:160px;margin:0}
.report-controls p {flex-basis:100%;font-size:12px;overflow-wrap:anywhere}
.report-chart {margin-top:18px}
.chart-axis {color:var(--muted);font-size:12px;margin-bottom:8px}
.chart-row {display:grid;grid-template-columns:100px minmax(60px,1fr) 70px 45px;gap:12px;align-items:center;font-size:12px;margin:8px 0}
.chart-track {height:12px;background:#e8eee8;border-radius:6px;overflow:hidden}
.chart-fill {height:100%;background:#477956;border-radius:6px;width:0}
.report-table-wrap {overflow-x:auto}
.report-table {width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.report-table th,.report-table td {padding:13px 10px;border-bottom:1px solid #dfe7df;vertical-align:top}
.report-table small {display:block;color:#657568;font-size:11px;margin-top:5px}
.learning-report li {margin:9px 0}
.report-dashboard {border-left:4px solid #477956}
@media(max-width:600px){.chart-row{grid-template-columns:78px minmax(30px,1fr) 58px 30px;gap:6px;font-size:10px}.report-table{font-size:12px}.report-table th,.report-table td{padding:10px 5px}.report-controls .button{flex:1;text-align:center}.learning-report .metricvalue{font-size:25px}}
@media print {body{background:white;color:black}aside,.sidebar,.topbar,.report-controls select,.report-controls a,.report-controls button,#toast{display:none!important}.app-shell,.layout,.app-layout,.shell,#app{display:block!important}.workspace{margin-left:0!important;width:100%!important}.content{padding:0!important}.learning-report{width:100%}.panel,.metric{box-shadow:none!important;break-inside:avoid;border:1px solid #ddd}.metrics{grid-template-columns:repeat(2,1fr)}.learning-report .gridtwo{display:block}.chart-fill{print-color-adjust:exact}.report-controls p{display:block}.learning-report{font-size:11pt}}