/* src/style.css */
:root {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #222e43;
  background: #f4f5f7;
  font-synthesis: none;
  font-size: 13px;
  line-height: 1.45;
  --navy:#192943;
  --blue:#244f9c;
  --border:#e2e6ec;
  --muted:#768092;
  --red:#a42c47;
  --cream:#f6f5f1;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
button,
a,
input,
select,
textarea {
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid #356bc0;
}
button {
  color: inherit;
}
a {
  text-decoration: none;
  color: inherit;
}
button svg,
a svg {
  flex-shrink: 0;
}
input,
select,
textarea {
  color: #263247;
}
input[type=checkbox] {
  accent-color: var(--blue);
}
h1,
h2,
h3,
p {
  margin: 0;
}
button {
  border: 0;
  background: none;
}
small {
  font-size: 11px;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: .15em;
  font-weight: 650;
  color: #8190a5;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #dce2e9;
  background: #fff;
  border-radius: 7px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  min-height: 36px;
  transition: background .12s;
}
.button:hover {
  background: #f3f6fb;
}
.button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 2px 4px #193c7714;
}
.button.primary:hover {
  background: #1c4083;
}
.button.full {
  width: 100%;
}
.button.subtle {
  background: #f8f9fb;
  color: #53637b;
}
.icon-button {
  width: 29px;
  height: 29px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  color: #697991;
}
.icon-button:hover {
  background: #edf1f7;
}
.app {
  display: flex;
  min-height: 100vh;
}
.rail {
  width: 74px;
  flex-shrink: 0;
  background: var(--navy);
  color: #a4b1c6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 8px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}
.brand-mark {
  display: flex;
  align-items: baseline;
  color: white;
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -3px;
  margin-bottom: 34px;
}
.brand-mark span {
  font-size: 16px;
  letter-spacing: -2px;
}
.rail > button {
  color: #aab8d0;
  width: 56px;
  height: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  border-radius: 9px;
  margin-bottom: 11px;
}
.rail > button.active {
  background: #ffffff13;
  color: white;
}
.rail > button:hover {
  background: #ffffff0c;
}
.rail-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 9px;
  font-size: 9px;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #596b86;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: white;
}
.shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.topbar {
  height: 58px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #7c889a;
}
.breadcrumb strong {
  font-weight: 550;
  color: #34465f;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.local-label {
  font-size: 10px;
  color: #73816f;
  display: flex;
  align-items: center;
  gap: 6px;
}
.local-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5a8866;
}
.view-label {
  font-size: 10px;
  color: #8290a2;
  display: flex;
  align-items: center;
  gap: 7px;
}
.view-label select {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px;
  background: white;
  font-size: 11px;
  max-width: 150px;
}
.lessonbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px 25px 21px;
  background: #fff;
}
.lessonbar h1 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.65px;
  margin: 5px 0;
}
.lessonbar p {
  font-size: 11px;
  color: #7c8796;
  display: flex;
  gap: 9px;
}
.lesson-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.count-select {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  padding: 7px 10px;
  border-radius: 7px;
  min-height: 36px;
  font-size: 12px;
  color: #56647a;
  margin-right: 5px;
}
.count-select input {
  width: 32px;
  border: 0;
  background: none;
  font-weight: 600;
}
.workspace-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  flex: 1;
  border-top: 1px solid var(--border);
  min-height: 600px;
}
.workspace-layout:has(.tower) {
  grid-template-columns: 220px minmax(0, 1fr) 268px;
}
.materials {
  background: #fafbfc;
  border-right: 1px solid var(--border);
  padding: 17px 14px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 9px;
}
.section-heading strong {
  font-weight: 600;
}
.section-heading > span {
  font-size: 10px;
  color: var(--muted);
}
.folder-path {
  font-size: 9px;
  color: #8995a5;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
}
.material-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.material-card {
  text-align: left;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 9px 7px;
  background: transparent;
  width: 100%;
  min-height: 80px;
}
.material-card.selected {
  background: #edf2fa;
  border-color: #cbd9ed;
}
.material-card:hover {
  background: #f0f3f7;
}
.material-thumb {
  width: 36px;
  height: 48px;
  background: white;
  border: 1px solid #dde2e9;
  border-radius: 2px;
  overflow: hidden;
}
.material-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.material-card strong {
  display: block;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.5;
  max-height: 34px;
  overflow: hidden;
}
.material-card span {
  display: block;
  font-size: 9px;
  color: #79879a;
  margin: 4px 0 2px;
}
.material-card small {
  font-size: 9px;
  color: #909ba8;
}
.dropzone {
  margin-top: 18px;
  border: 1px dashed #cbd4df;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 17px 5px;
  color: #8794a7;
  width: 100%;
  background: #fff;
}
.dropzone:hover {
  border-color: #6d8ab4;
  background: #f7faff;
}
.dropzone strong {
  font-size: 10px;
  font-weight: 500;
  color: #65758c;
}
.dropzone span {
  font-size: 9px;
}
.library-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #416394;
  margin: 16px 0;
  font-size: 10px;
  text-align: left;
}
.library-link span {
  flex: 1;
}
.packet-section {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.packet-section p {
  color: #8a95a3;
  font-size: 10px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.packet-section .button {
  font-size: 10px;
  padding: 7px 8px;
  margin-top: 7px;
  min-height: 32px;
}
.packet-pages {
  max-height: 130px;
  overflow: auto;
  margin-bottom: 6px;
}
.packet-pages > div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  padding: 7px 0;
  color: #728096;
}
.packet-pages span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.packet-pages button {
  padding: 0;
  display: grid;
  place-items: center;
}
.stage {
  background: #edeff3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  position: relative;
  min-height: 600px;
}
.stage-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 10px 13px;
  flex-wrap: wrap;
  min-height: 53px;
}
.segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #f3f5f8;
  border-radius: 7px;
}
.segmented button {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  padding: 6px 9px;
  color: #7d899b;
  white-space: nowrap;
}
.segmented .active {
  background: white;
  color: #284b80;
  box-shadow: 0 1px 3px #21345414;
}
.stage-tab-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.stage-tab-actions > button {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  color: #7d899b;
}
.stage-tab-actions > button.active {
  color: #244f9c;
}
.stage-tab-actions > button span {
  background: #edf2fa;
  padding: 1px 4px;
  border-radius: 3px;
}
.document-heading {
  padding: 14px 18px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.document-heading > div {
  min-width: 0;
}
.document-heading strong {
  font-size: 12px;
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-heading span {
  font-size: 10px;
  display: block;
  color: #8a96a6;
  margin-top: 3px;
}
.source-link {
  font-size: 9px;
  color: #3d7b63;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.document-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 13px;
  background: #fafbfc;
  border-bottom: 1px solid #dce1e8;
  min-height: 46px;
}
.tool-set {
  display: flex;
  align-items: center;
  gap: 3px;
}
.tool-set button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #7f8b9d;
  border-radius: 4px;
}
.tool-set button.active {
  background: #e4ecf8;
  color: #28549b;
}
.tool-set .color-dot {
  background: var(--ink);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
}
.tool-set .color-dot.selected {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
.tool-divider {
  width: 1px;
  height: 17px;
  background: #dce1e9;
  margin: 0 7px;
}
.page-controls {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #8a94a3;
}
.page-controls button {
  display: grid;
  place-items: center;
  width: 23px;
  height: 27px;
  color: #778398;
}
.page-controls input {
  width: 31px;
  border: 1px solid #e0e5eb;
  border-radius: 4px;
  padding: 3px;
  text-align: center;
  appearance: textfield;
  background: white;
  font-size: 10px;
}
.page-controls input::-webkit-inner-spin-button {
  appearance: none;
}
.page-controls select {
  border: 0;
  border-left: 1px solid #dee3eb;
  background: none;
  margin-left: 8px;
  padding: 4px;
  font-size: 10px;
  color: #778398;
}
.document-scroll {
  overflow: auto;
  flex: 1;
  padding: 22px 24px 30px;
  min-height: 0;
  background-color: #edf0f4;
  background-image: radial-gradient(#cfd7e3 .55px, transparent .55px);
  background-size: 9px 9px;
}
.paper-wrap {
  min-width: 200px;
  margin: 0 auto;
}
.paper {
  position: relative;
  width: 100%;
  box-shadow: 0 3px 15px #26324717;
  background: white;
  line-height: 0;
}
.paper > img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}
.annotation-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.annotation-layer.drawing {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.stage-footer {
  padding: 9px 15px;
  background: #f9fafb;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  color: #8b97a6;
}
.stage-footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.follow-banner {
  background: #e9f1ff;
  color: #375b91;
  padding: 8px 15px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.follow-banner button {
  margin-left: auto;
  text-decoration: underline;
  font-size: 10px;
  color: #375b91;
}
.tower {
  background: #fff;
  border-left: 1px solid var(--border);
  padding: 19px 14px;
  max-height: calc(100vh - 200px);
  overflow: auto;
  min-height: 600px;
}
.tower-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tower-heading h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.3px;
  margin-top: 4px;
}
.student-count {
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f4f8;
  font-size: 11px;
  color: #8090a5;
}
.tower-summary {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 17px 0;
  font-size: 9px;
  color: #8b96a5;
}
.tower-summary span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tower-summary i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a7b1c0;
}
.roster {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.student-card {
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  padding: 11px 10px;
  position: relative;
  background: #fff;
}
.student-card.pinned {
  border-color: #c1d0e7;
  background: #fafcff;
}
.student-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.student-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #eef1f6;
  color: #5d708e;
  display: grid;
  place-items: center;
  font-size: 11px;
  flex-shrink: 0;
  position: relative;
}
.student-avatar.online:after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 7px;
  height: 7px;
  background: #69a381;
  border: 2px solid white;
  border-radius: 50%;
}
.student-info {
  flex: 1;
  min-width: 0;
}
.student-info strong {
  font-size: 12px;
  display: block;
  font-weight: 600;
}
.student-info > span {
  font-size: 9px;
  color: #8a95a5;
  display: block;
  margin-top: 2px;
  white-space: nowrap;
}
.student-mini {
  display: block;
  padding: 0;
  width: 39px;
  height: 48px;
  border: 1px solid #dce3ed;
  position: relative;
  background: #f5f7fa;
  overflow: hidden;
  border-radius: 3px;
}
.student-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.viewport-box {
  position: absolute;
  left: 12%;
  width: 76%;
  border: 1.5px solid #a5304c;
  background: #a5304c10;
  pointer-events: none;
}
.student-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin: 12px 0 10px;
}
.student-method select {
  font-size: 9px;
  color: #7c899b;
  background: #f7f8fa;
  border: 1px solid #e8ebef;
  padding: 4px;
  border-radius: 4px;
  max-width: 102px;
}
.status {
  font-size: 9px;
  color: #9aa3b0;
  padding: 2px 4px;
  border-radius: 4px;
}
.status.ready {
  color: #3f8160;
  background: #ecf6ef;
}
.status.sent {
  color: #6a7ea2;
  background: #f0f4fb;
}
.status.opened {
  color: #456ca1;
  background: #edf3fb;
}
.status.help {
  color: #a16e28;
  background: #fff5e8;
}
.student-buttons {
  display: flex;
  gap: 5px;
  align-items: center;
}
.student-buttons button,
.student-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  border: 1px solid #e3e8ef;
  border-radius: 4px;
  padding: 4px 7px;
  color: #7e8da2;
  min-height: 24px;
}
.student-buttons .selected {
  background: #e9f0fc;
  color: #365f99;
}
.student-buttons a {
  margin-left: auto;
  padding: 4px 5px;
}
.tower-note {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: #93a0b2;
  padding: 18px 2px 0;
  line-height: 1.6;
}
.tower-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.student-popover {
  display: none;
  position: fixed;
  right: 278px;
  top: 285px;
  width: 335px;
  z-index: 90;
  background: white;
  border: 1px solid #d7dfea;
  border-radius: 9px;
  box-shadow: 0 12px 36px #24334f25;
  padding: 12px;
  pointer-events: none;
}
.preview-holder:hover .student-popover,
.preview-holder:focus-within .student-popover {
  display: block;
}
.student-popover header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  margin-bottom: 10px;
}
.student-popover header span {
  color: #8b96a6;
}
.mini-large {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #f4f6f9;
  display: flex;
  justify-content: center;
}
.mini-large img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.student-popover p {
  font-size: 10px;
  color: #8592a5;
  margin-top: 9px;
}
.board-scroll {
  overflow: auto;
  padding: 18px;
  flex: 1;
}
.board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: #7a8ba2;
  margin-bottom: 16px;
}
.board-heading .button {
  font-size: 10px;
  padding: 6px 9px;
  min-height: 30px;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.board-tile {
  background: white;
  border: 1px solid #dce2eb;
  border-radius: 7px;
  overflow: hidden;
}
.board-tile > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  font-size: 9px;
  color: #6f8098;
}
.board-tile > header span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-tile > header span:last-child {
  white-space: nowrap;
}
.tile-page {
  display: block;
  width: 100%;
  padding: 0;
  position: relative;
  line-height: 0;
}
.tile-page img {
  width: 100%;
  display: block;
}
.tile-page svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.empty {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 25px;
  color: #8190a5;
}
.empty h3 {
  color: #5c718f;
}
.app-footer {
  padding: 9px 22px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: #f9fafb;
  border-top: 1px solid var(--border);
  font-size: 9px;
  color: #8d99a8;
}
.app-footer > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.source-panel {
  padding: 24px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
}
.source-panel header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.source-panel h2 {
  font-size: 20px;
  margin-top: 5px;
}
.source-panel .pill {
  background: #edf3fc;
  color: #5578a6;
  font-size: 10px;
  padding: 5px 8px;
  border-radius: 15px;
  white-space: nowrap;
}
.source-panel select {
  border: 1px solid #dce3ec;
  border-radius: 6px;
  padding: 9px;
  background: #f8fafc;
  width: 100%;
  font-size: 11px;
}
.source-panel textarea {
  width: 100%;
  flex: 1;
  min-height: 260px;
  resize: none;
  background: #1b2940;
  color: #d8e2f3;
  border: 0;
  border-radius: 7px;
  font:
    11px/1.7 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  padding: 18px;
  tab-size: 2;
}
.source-panel .muted {
  font-size: 11px;
}
.source-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.source-actions .button {
  font-size: 10px;
}
.source-actions > span {
  font-size: 9px;
}
.student-sidebar > h2 {
  font-size: 22px;
  margin: 7px 0 22px;
}
.student-lesson-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 17px;
  margin-bottom: 20px;
}
.student-lesson-card > svg {
  color: #7191bd;
}
.student-lesson-card h3 {
  font-size: 13px;
  margin: 12px 0 8px;
}
.student-lesson-card p {
  font-size: 11px;
  color: #8594a8;
  margin-bottom: 15px;
}
.student-sidebar > .button {
  margin-bottom: 10px;
}
.student-notice {
  display: flex;
  align-items: start;
  gap: 8px;
  font-size: 11px;
  color: #8290a3;
  background: #f3f6fb;
  padding: 12px;
  border-radius: 7px;
  margin-bottom: 18px;
}
.student-notice svg {
  flex-shrink: 0;
}
.assignment-pages {
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assignment-pages strong {
  font-size: 11px;
}
.assignment-pages button {
  text-align: left;
  font-size: 10px;
  color: #5a77a3;
  border-bottom: 1px solid #e6ebf3;
  padding: 8px 0;
}
.student-sidebar > small {
  display: block;
  color: #96a1af;
  font-size: 10px;
  margin-top: 20px;
}
.backdrop {
  position: fixed;
  inset: 0;
  background: #18273b80;
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal {
  width: 530px;
  max-width: 100%;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 24px 80px #17243740;
  padding: 25px;
  max-height: 90vh;
  overflow: auto;
}
.modal.wide {
  width: 1020px;
}
.modal > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}
.modal h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.4px;
  margin-top: 5px;
}
.library-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1px solid #dce3ec;
  border-radius: 6px;
  padding: 9px;
  color: #8290a3;
}
.search-box input {
  border: 0;
  width: 100%;
  min-width: 0;
  outline: 0;
  font-size: 12px;
}
.library-toolbar select {
  background: white;
  border: 1px solid #dce3ec;
  border-radius: 6px;
  padding: 9px;
  font-size: 12px;
}
.library-count {
  font-size: 11px;
  color: #8b99a9;
  margin: 13px 0 18px;
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}
.library-card {
  border: 1px solid #e1e7ee;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.library-card:hover {
  border-color: #8da9d0;
  box-shadow: 0 3px 12px #25487712;
}
.library-card > img {
  width: 100%;
  height: 185px;
  object-fit: contain;
  background: #f1f3f7;
  padding: 10px;
}
.library-card > div:not(.tex-thumbnail) {
  padding: 12px;
  flex: 1;
}
.library-card strong {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  display: block;
}
.library-card span {
  font-size: 10px;
  color: #8594a8;
  margin-top: 6px;
  display: block;
}
.library-card small {
  font-size: 9px;
  color: #9ca5b2;
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.library-card b {
  font-size: 9px;
  background: #fff0e9;
  color: #b16b49;
  display: inline-block;
  border-radius: 4px;
  padding: 3px 5px;
  margin-top: 8px;
  font-weight: 500;
}
.library-card .source-badge {
  background: #eaf4ed;
  color: #4e8366;
}
.tex-thumbnail {
  height: 145px;
  background: #edf2fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #6482af;
}
.tex-thumbnail span {
  font: 14px monospace;
}
.selected-material {
  display: flex;
  gap: 16px;
  padding: 14px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
}
.selected-material > img {
  width: 52px;
  height: 67px;
  object-fit: cover;
  box-shadow: 0 1px 4px #21375b1c;
}
.selected-material strong {
  font-size: 13px;
}
.selected-material p {
  font-size: 10px;
  color: #8291a6;
  margin: 4px 0;
}
.selected-material span {
  font-size: 10px;
  color: #9aa5b2;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 550;
  margin-bottom: 17px;
}
.field input {
  border: 1px solid #d7e0eb;
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
}
.field small {
  font-size: 10px;
  color: #8a98aa;
  font-weight: 400;
}
.delivery-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.delivery-options button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #dee5ee;
  border-radius: 7px;
  padding: 14px;
  color: #8494aa;
}
.delivery-options button.active {
  border-color: #829fca;
  background: #f1f6fe;
  color: #315c98;
}
.delivery-options strong {
  font-size: 11px;
  font-weight: 600;
  color: #51657f;
}
.delivery-options span {
  font-size: 10px;
}
.recipient-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
  font-size: 12px;
  max-height: 180px;
  overflow: auto;
}
.recipient-list > strong {
  font-size: 11px;
  margin-bottom: 4px;
}
.recipient-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px;
}
.recipient-list label > small {
  margin-left: auto;
  color: #8c9aab;
  font-size: 10px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  border-top: 1px solid #e7ebf1;
  padding-top: 18px;
}
.print-note {
  color: #8a97a8;
  font-size: 11px;
  line-height: 1.7;
  margin: 20px 0;
}
.use-packet {
  color: #426ca8;
  font-size: 11px;
  text-decoration: underline;
  padding: 0;
}
.export-success {
  text-align: center;
  padding: 15px;
}
.export-success > div {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #edf6f0;
  color: #4b8a67;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
}
.export-success h3 {
  font-size: 20px;
}
.export-success p {
  font-size: 12px;
  color: #8a99aa;
  line-height: 1.7;
  margin-top: 9px;
}
.export-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  background: #253c5d;
  color: white;
  border-radius: 8px;
  box-shadow: 0 5px 25px #24324930;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  max-width: 90%;
  text-align: center;
}
.busy {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 160;
  background: #fff;
  box-shadow: 0 5px 25px #24324930;
  padding: 14px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid #d9e3f1;
  border-top-color: #3b659b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  color: #657891;
}
.loading .brand-mark {
  color: #26446d;
  margin: 0;
}
.loading h2 {
  font-size: 22px;
}
.loading p {
  font-size: 12px;
}
@media (min-width: 1600px) {
  .workspace-layout:has(.tower) {
    grid-template-columns: 245px minmax(0, 1fr) 300px;
  }
  .document-scroll {
    padding: 30px 60px;
  }
  .student-popover {
    right: 310px;
  }
}
@media (max-width: 1150px) {
  .workspace-layout:has(.tower) {
    grid-template-columns: 180px minmax(0, 1fr) 230px;
  }
  .materials {
    padding: 15px 10px;
  }
  .tower {
    padding: 17px 10px;
  }
  .student-popover {
    right: 240px;
  }
  .student-avatar {
    display: none;
  }
  .lessonbar {
    padding: 17px 18px;
  }
  .lessonbar h1 {
    font-size: 20px;
  }
  .lesson-actions {
    gap: 5px;
  }
  .lesson-actions .button {
    padding: 8px 10px;
  }
  .source-link {
    display: none;
  }
  .stage-tabs {
    padding: 8px;
  }
  .segmented button {
    padding: 6px;
    font-size: 9px;
  }
  .document-tools {
    padding: 6px 8px;
  }
  .tool-set button {
    width: 25px;
  }
  .tool-set .color-dot {
    margin: 0 3px;
  }
  .tool-divider {
    margin: 0 4px;
  }
  .document-scroll {
    padding: 16px;
  }
  .topbar {
    padding: 0 18px;
  }
  .top-actions {
    gap: 10px;
  }
  .local-label {
    display: none;
  }
}
@media (max-width: 950px) {
  .materials {
    display: none;
  }
  .workspace-layout:has(.tower) {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
  .workspace-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .lessonbar h1 {
    font-size: 18px;
  }
  .lessonbar .eyebrow {
    font-size: 9px;
  }
  .lessonbar p {
    font-size: 10px;
  }
  .count-select {
    margin: 0;
  }
  .lesson-actions .button {
    font-size: 10px;
  }
  .topbar {
    height: 50px;
  }
  .breadcrumb {
    gap: 7px;
  }
  .stage,
  .tower {
    max-height: calc(100vh - 175px);
  }
  .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lessonbar {
    gap: 8px;
  }
  .app-footer > span:last-child {
    display: none;
  }
}
@media (max-width: 700px) {
  .rail {
    width: 52px;
    padding: 15px 4px;
  }
  .rail > button {
    width: 43px;
    height: 53px;
    font-size: 9px;
  }
  .brand-mark {
    font-size: 24px;
    margin-bottom: 22px;
  }
  .brand-mark span {
    display: none;
  }
  .rail-bottom {
    font-size: 8px;
  }
  .lessonbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }
  .lessonbar h1 {
    font-size: 19px;
  }
  .lesson-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .lessonbar p {
    font-size: 10px;
  }
  .topbar {
    padding: 0 12px;
  }
  .breadcrumb > span:first-child,
  .breadcrumb > svg:first-of-type {
    display: none;
  }
  .view-label {
    font-size: 0;
  }
  .view-label select {
    max-width: 110px;
    font-size: 10px;
  }
  .workspace-layout:has(.tower) {
    grid-template-columns: minmax(0, 1fr);
  }
  .stage {
    height: 75vh;
    max-height: none;
    min-height: 520px;
  }
  .tower {
    max-height: none;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .student-popover {
    display: none !important;
  }
  .tower-note {
    padding: 12px 0;
  }
  .app-footer {
    padding: 9px 12px;
    font-size: 8px;
  }
  .document-heading {
    padding: 12px;
  }
  .stage-tabs {
    gap: 3px;
  }
  .stage-tab-actions > button {
    font-size: 9px;
  }
  .stage-footer {
    font-size: 8px;
    flex-wrap: wrap;
  }
  .library-toolbar {
    flex-wrap: wrap;
  }
  .search-box {
    flex-basis: 100%;
  }
  .library-toolbar select {
    flex: 1;
  }
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .modal {
    padding: 18px;
  }
  .backdrop {
    padding: 14px;
  }
  .modal h2 {
    font-size: 19px;
  }
  .source-actions {
    gap: 7px;
  }
  .source-panel {
    padding: 16px;
  }
  .source-panel header {
    flex-wrap: wrap;
  }
  .source-panel textarea {
    min-height: 250px;
  }
  .board-grid {
    gap: 10px;
  }
  .lesson-actions .button {
    flex: 1;
  }
  .student-sidebar {
    padding: 20px;
  }
  .student-sidebar .student-lesson-card {
    max-width: 450px;
  }
}
@media (max-width: 430px) {
  .roster,
  .board-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .document-tools {
    gap: 7px;
  }
  .page-controls {
    margin-left: auto;
  }
  .stage-tab-actions > button:not(.icon-button) {
    font-size: 0;
  }
  .stage-tab-actions > button:not(.icon-button) svg {
    width: 15px;
  }
  .library-card > img {
    height: 145px;
  }
  .delivery-options {
    grid-template-columns: 1fr;
  }
  .export-actions {
    flex-direction: column;
  }
  .student-avatar {
    display: grid;
  }
  .modal .selected-material strong {
    font-size: 11px;
  }
  .student-count {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  .spinner {
    animation: none;
  }
}
.mini-large {
  height: auto;
  width: 232px;
  max-height: 55vh;
  overflow: hidden;
  margin: 0 auto;
  display: block;
}
.mini-large img {
  width: 100%;
  height: auto;
  display: block;
}
.mini-large svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.viewport-box {
  left: 0;
  width: 100%;
}
.student-popover {
  top: 250px;
}

/* src/screen-share.css */
.screen-share-launch.is-live {
  color: #b43b50 !important;
  background: #fff0f2 !important;
}
.screen-share-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: var(--pane-controls-bottom) 14px 14px;
  background: #edf2f8;
  gap: 10px;
}
.screen-share-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #70829d;
}
.screen-live-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: #36557f;
}
.screen-share-summary > button {
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 5px;
  padding: 5px;
}
.screen-video-stage {
  position: relative;
  background: #1c2a40;
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
  min-height: 160px;
  display: grid;
  place-items: center;
}
.screen-video-stage video,
.screen-video-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.screen-share-empty {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  max-width: 370px;
  padding: 25px;
  text-align: center;
  color: #edf4ff;
}
.screen-share-empty strong {
  font-size: 16px;
}
.screen-share-empty p {
  font-size: 12px;
  line-height: 1.6;
  color: #b9c9e2;
}
.screen-share-error {
  padding: 10px;
  border: 1px solid #e8cdd4;
  background: #fff3f4;
  color: #94374c;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.5;
}
.screen-freeze-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.screen-freeze-bar > label {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  color: #7285a1;
}
.screen-freeze-bar input {
  min-width: 0;
  width: 100%;
  border: 1px solid #cbd8ea;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}
.screen-freeze-bar .button {
  font-size: 11px;
}
.screen-share-hint {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
  color: #4e6b92;
}
.screen-share-footnote {
  font-size: 10px;
  line-height: 1.5;
  color: #7b8da7;
}
.screen-play {
  position: relative;
  color: #fff;
  background: #315a96;
  border-radius: 6px;
  padding: 10px;
}
.screen-save-notice {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  background: #edf8f1;
  border: 1px solid #a6cdb4;
  box-shadow: 0 4px 18px #203c5e15;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11px;
  color: #326d4c;
}
.screen-save-notice button {
  display: grid;
  place-items: center;
  padding: 2px;
}
.screen-active-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #284f80;
  font-weight: 600;
  padding: 4px 8px;
}

/* src/writing-tools.css */
.writing-tools button:disabled {
  opacity: .3;
  cursor: default;
}
.writing-settings {
  position: relative;
}
.writing-settings summary {
  width: 27px;
  height: 25px;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: #637e9f;
  list-style: none;
}
.writing-settings summary::-webkit-details-marker {
  display: none;
}
.writing-settings summary i {
  position: absolute;
  bottom: 1px;
  width: 15px;
  height: 3px;
  background: var(--selected-ink);
  border: 1px solid #b8c4d5;
  border-radius: 3px;
}
.writing-settings-popover {
  position: absolute;
  top: 31px;
  left: -100px;
  z-index: 60;
  width: 232px;
  background: white;
  padding: 15px;
  border: 1px solid #d7e2ef;
  border-radius: 10px;
  box-shadow: 0 10px 35px #25476c30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  color: #385778;
}
.writing-settings-popover > strong {
  font-size: 13px;
}
.writing-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.writing-tools .writing-palette button {
  width: 20px;
  height: 20px;
  border: 1px solid #b8c4d5;
  border-radius: 50%;
}
.writing-palette button[aria-pressed=true] {
  outline: 2px solid #496d9d;
  outline-offset: 2px;
}
.writing-settings-popover label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.writing-settings-popover output {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.writing-settings-popover input[type=range] {
  width: 100%;
  accent-color: #426ba5;
}
.writing-settings-popover input[type=color] {
  width: 34px;
  height: 25px;
  padding: 0;
  border: 0;
  margin-left: auto;
  background: none;
}
.pen-sample {
  border-radius: 5px;
  background: #f0f4fa;
}
.pen-sample svg {
  display: block;
  width: 100%;
  height: 32px;
}
.writing-settings-popover small {
  color: #7a8ca2;
  font-size: 10px;
  line-height: 1.5;
}
.annotation-layer.erasing {
  cursor: cell;
}
.writing-history {
  width: 820px;
}
.writing-history > header {
  margin-bottom: 12px;
}
.writing-history > p {
  font-size: 12px;
  line-height: 1.6;
  color: #74869c;
}
.history-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.history-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-size: 12px;
}
.history-controls select {
  border: 1px solid #d6e1ee;
  border-radius: 6px;
  padding: 7px;
  background: white;
  max-width: 230px;
}
.history-content {
  display: flex;
  gap: 18px;
  min-height: 180px;
}
.writing-events {
  flex: 1;
  min-width: 0;
  max-height: 420px;
  overflow: auto;
}
.writing-events > p {
  font-size: 12px;
  color: #8193a8;
  padding: 25px 0;
}
.writing-events > button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  border: 1px solid #e0e7f1;
  border-radius: 7px;
  padding: 12px;
  width: 100%;
  margin-bottom: 7px;
  font-size: 12px;
}
.writing-events > button[aria-pressed=true] {
  border-color: #5e82b5;
  background: #eff5ff;
}
.writing-events strong {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}
.writing-events time,
.writing-events small {
  color: #8394a9;
  font-size: 10px;
  font-weight: 400;
}
.history-detail {
  width: 270px;
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.5;
}
.history-detail p {
  margin: 8px 0;
  color: #7389a2;
}
.history-page {
  position: relative;
  margin-top: 12px;
  max-height: 310px;
  overflow: auto;
  background: #f4f6fa;
}
.history-page > div {
  position: relative;
}
.history-page img {
  width: 100%;
  display: block;
}
.history-page svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.history-detail small {
  display: block;
  margin-top: 8px;
  color: #7d90a7;
}
.history-admin {
  border-top: 1px solid #e0e7ef;
  margin-top: 18px;
  padding-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.history-admin p {
  width: 100%;
  color: #637993;
  font-size: 12px;
  line-height: 1.6;
}
.history-admin .danger {
  background: #ab3650;
  color: white;
  border-color: #ab3650;
}
@media (max-width: 650px) {
  .history-content {
    flex-direction: column;
  }
  .history-detail {
    width: 100%;
  }
  .writing-events {
    max-height: 250px;
  }
}
@container (max-width:600px) {
  .board-pane .pane-tools .writing-tools {
    gap: 1px;
  }
  .board-pane .pane-tools .writing-tools > button {
    width: 22px;
  }
  .writing-settings summary {
    width: 25px;
  }
}

/* src/pane-follow.css */
.pane-follow-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-height: 27px;
  padding: 4px 6px;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  background: #f3f5f7;
  color: #8a94a3;
  font-size: 10px;
  white-space: nowrap;
}
.pane-follow-toggle:hover {
  filter: brightness(.96);
}
.pane-follow-toggle.is-available {
  background: #e9f5ef;
  border-color: #8abb9f;
  color: #28744d;
}
.pane-follow-toggle.is-following {
  background: #fff0f1;
  border-color: #dd8d97;
  color: #bd3547;
}
.pane-follow-toggle:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 2px;
}
.pane-follow-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1px;
}
.pane-follow-toggle > svg {
  flex-shrink: 0;
}
.follow-person-portrait {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid currentColor;
  overflow: hidden;
  font-size: 9px;
  font-weight: 600;
}
.follow-person-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.follow-person-name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 11px;
}
.pane-follow-choose {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  align-self: stretch;
  width: 19px;
  border-radius: 4px;
  color: #7187a3;
}
.pane-follow-choose:hover {
  background: #eaf0f8;
}
.pane-follow-choose:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 1px;
}
.pane-follow-picker {
  position: fixed;
  z-index: 90;
  width: min(404px, calc(100vw - 20px));
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid #cddbeb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 36px #243a5b2b;
  color: #355273;
}
.pane-follow-picker > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}
.pane-follow-picker > header button {
  display: grid;
  place-items: center;
  padding: 4px;
  color: #7488a3;
}
.pane-follow-picker strong {
  font-size: 12px;
  font-weight: 600;
}
.pane-follow-picker small {
  display: block;
  font-size: 10px;
  color: #8293aa;
  margin-top: 3px;
}
.pane-follow-picker p {
  font-size: 11px;
  color: #8293aa;
  padding: 8px 2px;
}
.pane-follow-picker button:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 1px;
}
.follow-everyone {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  text-align: left;
  margin-bottom: 8px;
}
.follow-everyone > span {
  flex: 1;
}
.follow-everyone[aria-pressed=true] {
  background: #edf4ff;
  border-color: #b7cce9;
}
.follow-viewer-list {
  overflow-y: auto;
  max-height: 45dvh;
  min-height: 0;
}
.follow-viewer {
  padding: 10px 2px;
  border-top: 1px solid #edf0f5;
}
.follow-viewer > header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.follow-student-initial {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--person-color);
  background: #f6f8fb;
  color: var(--person-color);
  font-size: 12px;
  overflow: hidden;
}
.follow-student-initial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.follow-viewer.is-offline .follow-student-initial {
  border-color: #c4cbd5;
  color: #8b96a6;
}
.follow-viewer > div {
  display: flex;
  gap: 6px;
  margin: 8px 0 0 40px;
  flex-wrap: wrap;
}
.follow-viewer > div:empty {
  display: none;
}
.follow-window-choice {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #b4d9c6;
  border-radius: 5px;
  background: #f0f8f4;
  color: #28744d;
  padding: 5px 6px;
  font-size: 10px;
}
.follow-window-choice.is-following {
  border-color: #dd8d97;
  background: #fff0f1;
  color: #bd3547;
}
.pane-follow-picker > footer {
  display: flex;
  gap: 12px;
  border-top: 1px solid #e5ebf2;
  padding-top: 10px;
  margin-top: 8px;
  font-size: 9px;
}
.follow-key {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7a8799;
}
.follow-key:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca6b5;
}
.follow-key.available:before {
  background: #2b8859;
}
.follow-key.following:before {
  background: #bd3547;
}
@container (max-width:600px) {
  .pane-follow-toggle {
    padding: 3px 4px;
    min-width: 26px;
    justify-content: center;
  }
  .pane-follow-toggle > .follow-viewers-label {
    display: none;
  }
  .follow-person-name {
    max-width: 58px;
    font-size: 10px;
  }
  .follow-person-portrait {
    width: 20px;
    height: 20px;
  }
}
.pane-canvas > .is-follow-mirror {
  outline: 2px solid var(--follow-color);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--follow-color) 12%, transparent);
  scrollbar-width: none;
}
.is-follow-mirror::-webkit-scrollbar {
  display: none;
}
.is-follow-mirror .continuous-page-label,
.is-retained-view .continuous-page-label {
  height: var(--mirror-label-height);
  padding: 0;
  font-size: calc(10px * var(--mirror-scale));
  line-height: 1.5;
  align-items: flex-start;
}
.is-retained-view {
  scrollbar-width: none;
}
.is-retained-view::-webkit-scrollbar {
  display: none;
}
.follow-window-choice {
  text-align: left;
  min-width: 0;
  max-width: 100%;
}
.follow-window-choice > span {
  min-width: 0;
}
.follow-window-choice small {
  max-width: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}
.follow-mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
.follow-mode-options legend {
  font-size: 11px;
  padding: 0 0 8px;
  color: #657d9d;
}
.follow-mode-options label {
  display: flex;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dce5ef;
  border-radius: 8px;
  cursor: pointer;
}
.follow-mode-options label.is-selected {
  background: #edf4ff;
  border-color: #6991c9;
}
.follow-mode-options input {
  margin: 2px 0 0;
  accent-color: #315d9e;
}
.follow-mode-options small {
  line-height: 1.5;
}
.pane-follow-picker .follow-list-label {
  margin: 0;
  padding: 5px 0 8px;
}
.follow-person-name small {
  display: block;
  font-size: 8px;
  font-weight: 400;
  line-height: 1.1;
}

/* node_modules/katex/dist/katex.min.css */
@font-face {
  font-family: KaTeX_AMS;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_AMS-Regular-U6PRYMIZ.woff2") format("woff2"),
    url("./assets/KaTeX_AMS-Regular-CYEKBG2K.woff") format("woff"),
    url("./assets/KaTeX_AMS-Regular-JKX5W2C4.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 700;
  src:
    url("./assets/KaTeX_Caligraphic-Bold-5QL5CMTE.woff2") format("woff2"),
    url("./assets/KaTeX_Caligraphic-Bold-WZ3QSGD3.woff") format("woff"),
    url("./assets/KaTeX_Caligraphic-Bold-ZTS3R3HK.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Caligraphic;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Caligraphic-Regular-KX5MEWCF.woff2") format("woff2"),
    url("./assets/KaTeX_Caligraphic-Regular-3LKEU76G.woff") format("woff"),
    url("./assets/KaTeX_Caligraphic-Regular-A7XRTZ5Q.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 700;
  src:
    url("./assets/KaTeX_Fraktur-Bold-2QVFK6NQ.woff2") format("woff2"),
    url("./assets/KaTeX_Fraktur-Bold-T4SWXBMT.woff") format("woff"),
    url("./assets/KaTeX_Fraktur-Bold-WGHVTYOR.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Fraktur;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Fraktur-Regular-2PEIFJSJ.woff2") format("woff2"),
    url("./assets/KaTeX_Fraktur-Regular-PQMHCIK6.woff") format("woff"),
    url("./assets/KaTeX_Fraktur-Regular-5U4OPH2X.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 700;
  src:
    url("./assets/KaTeX_Main-Bold-YP5VVQRP.woff2") format("woff2"),
    url("./assets/KaTeX_Main-Bold-2GA4IZIN.woff") format("woff"),
    url("./assets/KaTeX_Main-Bold-W5FBVCZM.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 700;
  src:
    url("./assets/KaTeX_Main-BoldItalic-N4V3DX7S.woff2") format("woff2"),
    url("./assets/KaTeX_Main-BoldItalic-4P4C7HJH.woff") format("woff"),
    url("./assets/KaTeX_Main-BoldItalic-ODMLBJJQ.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Main;
  font-style: italic;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Main-Italic-RELBIK7M.woff2") format("woff2"),
    url("./assets/KaTeX_Main-Italic-SASNQFN2.woff") format("woff"),
    url("./assets/KaTeX_Main-Italic-I43T2HSR.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Main;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Main-Regular-ARRPAO67.woff2") format("woff2"),
    url("./assets/KaTeX_Main-Regular-P5I74A2A.woff") format("woff"),
    url("./assets/KaTeX_Main-Regular-W74P5G27.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
  src:
    url("./assets/KaTeX_Math-BoldItalic-K4WTGH3J.woff2") format("woff2"),
    url("./assets/KaTeX_Math-BoldItalic-6EBV3DK5.woff") format("woff"),
    url("./assets/KaTeX_Math-BoldItalic-VB447A4D.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Math-Italic-6KGCHLFN.woff2") format("woff2"),
    url("./assets/KaTeX_Math-Italic-KKK3USB2.woff") format("woff"),
    url("./assets/KaTeX_Math-Italic-SON4MRCA.ttf") format("truetype");
}
@font-face {
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 700;
  src:
    url("./assets/KaTeX_SansSerif-Bold-RRNVJFFW.woff2") format("woff2"),
    url("./assets/KaTeX_SansSerif-Bold-X5M5EMOD.woff") format("woff"),
    url("./assets/KaTeX_SansSerif-Bold-STQ6RXC7.ttf") format("truetype");
}
@font-face {
  font-family: "KaTeX_SansSerif";
  font-style: italic;
  font-weight: 400;
  src:
    url("./assets/KaTeX_SansSerif-Italic-HMPFTM52.woff2") format("woff2"),
    url("./assets/KaTeX_SansSerif-Italic-PSN4QKYX.woff") format("woff"),
    url("./assets/KaTeX_SansSerif-Italic-WTBAZBGY.ttf") format("truetype");
}
@font-face {
  font-family: "KaTeX_SansSerif";
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_SansSerif-Regular-XIQ62X4E.woff2") format("woff2"),
    url("./assets/KaTeX_SansSerif-Regular-OQCII6EP.woff") format("woff"),
    url("./assets/KaTeX_SansSerif-Regular-2TL3USAE.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Script;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Script-Regular-APUWIHLP.woff2") format("woff2"),
    url("./assets/KaTeX_Script-Regular-A5IFOEBS.woff") format("woff"),
    url("./assets/KaTeX_Script-Regular-72OLXYNA.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Size1;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Size1-Regular-5LRUTBFT.woff2") format("woff2"),
    url("./assets/KaTeX_Size1-Regular-4HRHTS65.woff") format("woff"),
    url("./assets/KaTeX_Size1-Regular-7K6AASVL.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Size2;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Size2-Regular-LELKET5D.woff2") format("woff2"),
    url("./assets/KaTeX_Size2-Regular-K5ZHAIS6.woff") format("woff"),
    url("./assets/KaTeX_Size2-Regular-222HN3GT.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Size3;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Size3-Regular-WQRQ47UD.woff2") format("woff2"),
    url("./assets/KaTeX_Size3-Regular-TLFPAHDE.woff") format("woff"),
    url("./assets/KaTeX_Size3-Regular-UFCO6WCA.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Size4;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Size4-Regular-CDMV7U5C.woff2") format("woff2"),
    url("./assets/KaTeX_Size4-Regular-PKMWZHNC.woff") format("woff"),
    url("./assets/KaTeX_Size4-Regular-7PGNVPQK.ttf") format("truetype");
}
@font-face {
  font-family: KaTeX_Typewriter;
  font-style: normal;
  font-weight: 400;
  src:
    url("./assets/KaTeX_Typewriter-Regular-VBYJ4NRC.woff2") format("woff2"),
    url("./assets/KaTeX_Typewriter-Regular-MJMFSK64.woff") format("woff"),
    url("./assets/KaTeX_Typewriter-Regular-3F5K6SQ6.ttf") format("truetype");
}
.katex {
  text-rendering: auto;
  font:
    normal 1.21em KaTeX_Main,
    Times New Roman,
    serif;
  line-height: 1.2;
  text-indent: 0;
}
.katex * {
  -ms-high-contrast-adjust: none !important;
  border-color: currentColor;
}
.katex .katex-version:after {
  content: "0.16.9";
}
.katex .katex-mathml {
  clip: rect(1px, 1px, 1px, 1px);
  border: 0;
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.katex .katex-html > .newline {
  display: block;
}
.katex .base {
  position: relative;
  white-space: nowrap;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}
.katex .base,
.katex .strut {
  display: inline-block;
}
.katex .textbf {
  font-weight: 700;
}
.katex .textit {
  font-style: italic;
}
.katex .textrm {
  font-family: KaTeX_Main;
}
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .texttt {
  font-family: KaTeX_Typewriter;
}
.katex .mathnormal {
  font-family: KaTeX_Math;
  font-style: italic;
}
.katex .mathit {
  font-family: KaTeX_Main;
  font-style: italic;
}
.katex .mathrm {
  font-style: normal;
}
.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: 700;
}
.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-style: italic;
  font-weight: 700;
}
.katex .amsrm,
.katex .mathbb,
.katex .textbb {
  font-family: KaTeX_AMS;
}
.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}
.katex .mathfrak,
.katex .textfrak {
  font-family: KaTeX_Fraktur;
}
.katex .mathboldfrak,
.katex .textboldfrak {
  font-family: KaTeX_Fraktur;
  font-weight: 700;
}
.katex .mathtt {
  font-family: KaTeX_Typewriter;
}
.katex .mathscr,
.katex .textscr {
  font-family: KaTeX_Script;
}
.katex .mathsf,
.katex .textsf {
  font-family: KaTeX_SansSerif;
}
.katex .mathboldsf,
.katex .textboldsf {
  font-family: KaTeX_SansSerif;
  font-weight: 700;
}
.katex .mathitsf,
.katex .textitsf {
  font-family: KaTeX_SansSerif;
  font-style: italic;
}
.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}
.katex .vlist-t {
  border-collapse: collapse;
  display: inline-table;
  table-layout: fixed;
}
.katex .vlist-r {
  display: table-row;
}
.katex .vlist {
  display: table-cell;
  position: relative;
  vertical-align: bottom;
}
.katex .vlist > span {
  display: block;
  height: 0;
  position: relative;
}
.katex .vlist > span > span {
  display: inline-block;
}
.katex .vlist > span > .pstrut {
  overflow: hidden;
  width: 0;
}
.katex .vlist-t2 {
  margin-right: -2px;
}
.katex .vlist-s {
  display: table-cell;
  font-size: 1px;
  min-width: 2px;
  vertical-align: bottom;
  width: 2px;
}
.katex .vbox {
  align-items: baseline;
  display: inline-flex;
  flex-direction: column;
}
.katex .hbox {
  width: 100%;
}
.katex .hbox,
.katex .thinbox {
  display: inline-flex;
  flex-direction: row;
}
.katex .thinbox {
  max-width: 0;
  width: 0;
}
.katex .msupsub {
  text-align: left;
}
.katex .mfrac > span > span {
  text-align: center;
}
.katex .mfrac .frac-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .hdashline,
.katex .hline,
.katex .mfrac .frac-line,
.katex .overline .overline-line,
.katex .rule,
.katex .underline .underline-line {
  min-height: 1px;
}
.katex .mspace {
  display: inline-block;
}
.katex .clap,
.katex .llap,
.katex .rlap {
  position: relative;
  width: 0;
}
.katex .clap > .inner,
.katex .llap > .inner,
.katex .rlap > .inner {
  position: absolute;
}
.katex .clap > .fix,
.katex .llap > .fix,
.katex .rlap > .fix {
  display: inline-block;
}
.katex .llap > .inner {
  right: 0;
}
.katex .clap > .inner,
.katex .rlap > .inner {
  left: 0;
}
.katex .clap > .inner > span {
  margin-left: -50%;
  margin-right: 50%;
}
.katex .rule {
  border: 0 solid;
  display: inline-block;
  position: relative;
}
.katex .hline,
.katex .overline .overline-line,
.katex .underline .underline-line {
  border-bottom-style: solid;
  display: inline-block;
  width: 100%;
}
.katex .hdashline {
  border-bottom-style: dashed;
  display: inline-block;
  width: 100%;
}
.katex .sqrt > .root {
  margin-left: .27777778em;
  margin-right: -.55555556em;
}
.katex .fontsize-ensurer.reset-size1.size1,
.katex .sizing.reset-size1.size1 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size1.size2,
.katex .sizing.reset-size1.size2 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size1.size3,
.katex .sizing.reset-size1.size3 {
  font-size: 1.4em;
}
.katex .fontsize-ensurer.reset-size1.size4,
.katex .sizing.reset-size1.size4 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size1.size5,
.katex .sizing.reset-size1.size5 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size1.size6,
.katex .sizing.reset-size1.size6 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size1.size7,
.katex .sizing.reset-size1.size7 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size1.size8,
.katex .sizing.reset-size1.size8 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size1.size9,
.katex .sizing.reset-size1.size9 {
  font-size: 3.456em;
}
.katex .fontsize-ensurer.reset-size1.size10,
.katex .sizing.reset-size1.size10 {
  font-size: 4.148em;
}
.katex .fontsize-ensurer.reset-size1.size11,
.katex .sizing.reset-size1.size11 {
  font-size: 4.976em;
}
.katex .fontsize-ensurer.reset-size2.size1,
.katex .sizing.reset-size2.size1 {
  font-size: .83333333em;
}
.katex .fontsize-ensurer.reset-size2.size2,
.katex .sizing.reset-size2.size2 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size2.size3,
.katex .sizing.reset-size2.size3 {
  font-size: 1.16666667em;
}
.katex .fontsize-ensurer.reset-size2.size4,
.katex .sizing.reset-size2.size4 {
  font-size: 1.33333333em;
}
.katex .fontsize-ensurer.reset-size2.size5,
.katex .sizing.reset-size2.size5 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size2.size6,
.katex .sizing.reset-size2.size6 {
  font-size: 1.66666667em;
}
.katex .fontsize-ensurer.reset-size2.size7,
.katex .sizing.reset-size2.size7 {
  font-size: 2em;
}
.katex .fontsize-ensurer.reset-size2.size8,
.katex .sizing.reset-size2.size8 {
  font-size: 2.4em;
}
.katex .fontsize-ensurer.reset-size2.size9,
.katex .sizing.reset-size2.size9 {
  font-size: 2.88em;
}
.katex .fontsize-ensurer.reset-size2.size10,
.katex .sizing.reset-size2.size10 {
  font-size: 3.45666667em;
}
.katex .fontsize-ensurer.reset-size2.size11,
.katex .sizing.reset-size2.size11 {
  font-size: 4.14666667em;
}
.katex .fontsize-ensurer.reset-size3.size1,
.katex .sizing.reset-size3.size1 {
  font-size: .71428571em;
}
.katex .fontsize-ensurer.reset-size3.size2,
.katex .sizing.reset-size3.size2 {
  font-size: .85714286em;
}
.katex .fontsize-ensurer.reset-size3.size3,
.katex .sizing.reset-size3.size3 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size3.size4,
.katex .sizing.reset-size3.size4 {
  font-size: 1.14285714em;
}
.katex .fontsize-ensurer.reset-size3.size5,
.katex .sizing.reset-size3.size5 {
  font-size: 1.28571429em;
}
.katex .fontsize-ensurer.reset-size3.size6,
.katex .sizing.reset-size3.size6 {
  font-size: 1.42857143em;
}
.katex .fontsize-ensurer.reset-size3.size7,
.katex .sizing.reset-size3.size7 {
  font-size: 1.71428571em;
}
.katex .fontsize-ensurer.reset-size3.size8,
.katex .sizing.reset-size3.size8 {
  font-size: 2.05714286em;
}
.katex .fontsize-ensurer.reset-size3.size9,
.katex .sizing.reset-size3.size9 {
  font-size: 2.46857143em;
}
.katex .fontsize-ensurer.reset-size3.size10,
.katex .sizing.reset-size3.size10 {
  font-size: 2.96285714em;
}
.katex .fontsize-ensurer.reset-size3.size11,
.katex .sizing.reset-size3.size11 {
  font-size: 3.55428571em;
}
.katex .fontsize-ensurer.reset-size4.size1,
.katex .sizing.reset-size4.size1 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size4.size2,
.katex .sizing.reset-size4.size2 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size4.size3,
.katex .sizing.reset-size4.size3 {
  font-size: .875em;
}
.katex .fontsize-ensurer.reset-size4.size4,
.katex .sizing.reset-size4.size4 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size4.size5,
.katex .sizing.reset-size4.size5 {
  font-size: 1.125em;
}
.katex .fontsize-ensurer.reset-size4.size6,
.katex .sizing.reset-size4.size6 {
  font-size: 1.25em;
}
.katex .fontsize-ensurer.reset-size4.size7,
.katex .sizing.reset-size4.size7 {
  font-size: 1.5em;
}
.katex .fontsize-ensurer.reset-size4.size8,
.katex .sizing.reset-size4.size8 {
  font-size: 1.8em;
}
.katex .fontsize-ensurer.reset-size4.size9,
.katex .sizing.reset-size4.size9 {
  font-size: 2.16em;
}
.katex .fontsize-ensurer.reset-size4.size10,
.katex .sizing.reset-size4.size10 {
  font-size: 2.5925em;
}
.katex .fontsize-ensurer.reset-size4.size11,
.katex .sizing.reset-size4.size11 {
  font-size: 3.11em;
}
.katex .fontsize-ensurer.reset-size5.size1,
.katex .sizing.reset-size5.size1 {
  font-size: .55555556em;
}
.katex .fontsize-ensurer.reset-size5.size2,
.katex .sizing.reset-size5.size2 {
  font-size: .66666667em;
}
.katex .fontsize-ensurer.reset-size5.size3,
.katex .sizing.reset-size5.size3 {
  font-size: .77777778em;
}
.katex .fontsize-ensurer.reset-size5.size4,
.katex .sizing.reset-size5.size4 {
  font-size: .88888889em;
}
.katex .fontsize-ensurer.reset-size5.size5,
.katex .sizing.reset-size5.size5 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size5.size6,
.katex .sizing.reset-size5.size6 {
  font-size: 1.11111111em;
}
.katex .fontsize-ensurer.reset-size5.size7,
.katex .sizing.reset-size5.size7 {
  font-size: 1.33333333em;
}
.katex .fontsize-ensurer.reset-size5.size8,
.katex .sizing.reset-size5.size8 {
  font-size: 1.6em;
}
.katex .fontsize-ensurer.reset-size5.size9,
.katex .sizing.reset-size5.size9 {
  font-size: 1.92em;
}
.katex .fontsize-ensurer.reset-size5.size10,
.katex .sizing.reset-size5.size10 {
  font-size: 2.30444444em;
}
.katex .fontsize-ensurer.reset-size5.size11,
.katex .sizing.reset-size5.size11 {
  font-size: 2.76444444em;
}
.katex .fontsize-ensurer.reset-size6.size1,
.katex .sizing.reset-size6.size1 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size6.size2,
.katex .sizing.reset-size6.size2 {
  font-size: .6em;
}
.katex .fontsize-ensurer.reset-size6.size3,
.katex .sizing.reset-size6.size3 {
  font-size: .7em;
}
.katex .fontsize-ensurer.reset-size6.size4,
.katex .sizing.reset-size6.size4 {
  font-size: .8em;
}
.katex .fontsize-ensurer.reset-size6.size5,
.katex .sizing.reset-size6.size5 {
  font-size: .9em;
}
.katex .fontsize-ensurer.reset-size6.size6,
.katex .sizing.reset-size6.size6 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size6.size7,
.katex .sizing.reset-size6.size7 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size6.size8,
.katex .sizing.reset-size6.size8 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size6.size9,
.katex .sizing.reset-size6.size9 {
  font-size: 1.728em;
}
.katex .fontsize-ensurer.reset-size6.size10,
.katex .sizing.reset-size6.size10 {
  font-size: 2.074em;
}
.katex .fontsize-ensurer.reset-size6.size11,
.katex .sizing.reset-size6.size11 {
  font-size: 2.488em;
}
.katex .fontsize-ensurer.reset-size7.size1,
.katex .sizing.reset-size7.size1 {
  font-size: .41666667em;
}
.katex .fontsize-ensurer.reset-size7.size2,
.katex .sizing.reset-size7.size2 {
  font-size: .5em;
}
.katex .fontsize-ensurer.reset-size7.size3,
.katex .sizing.reset-size7.size3 {
  font-size: .58333333em;
}
.katex .fontsize-ensurer.reset-size7.size4,
.katex .sizing.reset-size7.size4 {
  font-size: .66666667em;
}
.katex .fontsize-ensurer.reset-size7.size5,
.katex .sizing.reset-size7.size5 {
  font-size: .75em;
}
.katex .fontsize-ensurer.reset-size7.size6,
.katex .sizing.reset-size7.size6 {
  font-size: .83333333em;
}
.katex .fontsize-ensurer.reset-size7.size7,
.katex .sizing.reset-size7.size7 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size7.size8,
.katex .sizing.reset-size7.size8 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size7.size9,
.katex .sizing.reset-size7.size9 {
  font-size: 1.44em;
}
.katex .fontsize-ensurer.reset-size7.size10,
.katex .sizing.reset-size7.size10 {
  font-size: 1.72833333em;
}
.katex .fontsize-ensurer.reset-size7.size11,
.katex .sizing.reset-size7.size11 {
  font-size: 2.07333333em;
}
.katex .fontsize-ensurer.reset-size8.size1,
.katex .sizing.reset-size8.size1 {
  font-size: .34722222em;
}
.katex .fontsize-ensurer.reset-size8.size2,
.katex .sizing.reset-size8.size2 {
  font-size: .41666667em;
}
.katex .fontsize-ensurer.reset-size8.size3,
.katex .sizing.reset-size8.size3 {
  font-size: .48611111em;
}
.katex .fontsize-ensurer.reset-size8.size4,
.katex .sizing.reset-size8.size4 {
  font-size: .55555556em;
}
.katex .fontsize-ensurer.reset-size8.size5,
.katex .sizing.reset-size8.size5 {
  font-size: .625em;
}
.katex .fontsize-ensurer.reset-size8.size6,
.katex .sizing.reset-size8.size6 {
  font-size: .69444444em;
}
.katex .fontsize-ensurer.reset-size8.size7,
.katex .sizing.reset-size8.size7 {
  font-size: .83333333em;
}
.katex .fontsize-ensurer.reset-size8.size8,
.katex .sizing.reset-size8.size8 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size8.size9,
.katex .sizing.reset-size8.size9 {
  font-size: 1.2em;
}
.katex .fontsize-ensurer.reset-size8.size10,
.katex .sizing.reset-size8.size10 {
  font-size: 1.44027778em;
}
.katex .fontsize-ensurer.reset-size8.size11,
.katex .sizing.reset-size8.size11 {
  font-size: 1.72777778em;
}
.katex .fontsize-ensurer.reset-size9.size1,
.katex .sizing.reset-size9.size1 {
  font-size: .28935185em;
}
.katex .fontsize-ensurer.reset-size9.size2,
.katex .sizing.reset-size9.size2 {
  font-size: .34722222em;
}
.katex .fontsize-ensurer.reset-size9.size3,
.katex .sizing.reset-size9.size3 {
  font-size: .40509259em;
}
.katex .fontsize-ensurer.reset-size9.size4,
.katex .sizing.reset-size9.size4 {
  font-size: .46296296em;
}
.katex .fontsize-ensurer.reset-size9.size5,
.katex .sizing.reset-size9.size5 {
  font-size: .52083333em;
}
.katex .fontsize-ensurer.reset-size9.size6,
.katex .sizing.reset-size9.size6 {
  font-size: .5787037em;
}
.katex .fontsize-ensurer.reset-size9.size7,
.katex .sizing.reset-size9.size7 {
  font-size: .69444444em;
}
.katex .fontsize-ensurer.reset-size9.size8,
.katex .sizing.reset-size9.size8 {
  font-size: .83333333em;
}
.katex .fontsize-ensurer.reset-size9.size9,
.katex .sizing.reset-size9.size9 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size9.size10,
.katex .sizing.reset-size9.size10 {
  font-size: 1.20023148em;
}
.katex .fontsize-ensurer.reset-size9.size11,
.katex .sizing.reset-size9.size11 {
  font-size: 1.43981481em;
}
.katex .fontsize-ensurer.reset-size10.size1,
.katex .sizing.reset-size10.size1 {
  font-size: .24108004em;
}
.katex .fontsize-ensurer.reset-size10.size2,
.katex .sizing.reset-size10.size2 {
  font-size: .28929605em;
}
.katex .fontsize-ensurer.reset-size10.size3,
.katex .sizing.reset-size10.size3 {
  font-size: .33751205em;
}
.katex .fontsize-ensurer.reset-size10.size4,
.katex .sizing.reset-size10.size4 {
  font-size: .38572806em;
}
.katex .fontsize-ensurer.reset-size10.size5,
.katex .sizing.reset-size10.size5 {
  font-size: .43394407em;
}
.katex .fontsize-ensurer.reset-size10.size6,
.katex .sizing.reset-size10.size6 {
  font-size: .48216008em;
}
.katex .fontsize-ensurer.reset-size10.size7,
.katex .sizing.reset-size10.size7 {
  font-size: .57859209em;
}
.katex .fontsize-ensurer.reset-size10.size8,
.katex .sizing.reset-size10.size8 {
  font-size: .69431051em;
}
.katex .fontsize-ensurer.reset-size10.size9,
.katex .sizing.reset-size10.size9 {
  font-size: .83317261em;
}
.katex .fontsize-ensurer.reset-size10.size10,
.katex .sizing.reset-size10.size10 {
  font-size: 1em;
}
.katex .fontsize-ensurer.reset-size10.size11,
.katex .sizing.reset-size10.size11 {
  font-size: 1.19961427em;
}
.katex .fontsize-ensurer.reset-size11.size1,
.katex .sizing.reset-size11.size1 {
  font-size: .20096463em;
}
.katex .fontsize-ensurer.reset-size11.size2,
.katex .sizing.reset-size11.size2 {
  font-size: .24115756em;
}
.katex .fontsize-ensurer.reset-size11.size3,
.katex .sizing.reset-size11.size3 {
  font-size: .28135048em;
}
.katex .fontsize-ensurer.reset-size11.size4,
.katex .sizing.reset-size11.size4 {
  font-size: .32154341em;
}
.katex .fontsize-ensurer.reset-size11.size5,
.katex .sizing.reset-size11.size5 {
  font-size: .36173633em;
}
.katex .fontsize-ensurer.reset-size11.size6,
.katex .sizing.reset-size11.size6 {
  font-size: .40192926em;
}
.katex .fontsize-ensurer.reset-size11.size7,
.katex .sizing.reset-size11.size7 {
  font-size: .48231511em;
}
.katex .fontsize-ensurer.reset-size11.size8,
.katex .sizing.reset-size11.size8 {
  font-size: .57877814em;
}
.katex .fontsize-ensurer.reset-size11.size9,
.katex .sizing.reset-size11.size9 {
  font-size: .69453376em;
}
.katex .fontsize-ensurer.reset-size11.size10,
.katex .sizing.reset-size11.size10 {
  font-size: .83360129em;
}
.katex .fontsize-ensurer.reset-size11.size11,
.katex .sizing.reset-size11.size11 {
  font-size: 1em;
}
.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}
.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}
.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}
.katex .delimsizing.mult .delim-size1 > span {
  font-family: KaTeX_Size1;
}
.katex .delimsizing.mult .delim-size4 > span {
  font-family: KaTeX_Size4;
}
.katex .nulldelimiter {
  display: inline-block;
  width: .12em;
}
.katex .delimcenter,
.katex .op-symbol {
  position: relative;
}
.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}
.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}
.katex .accent > .vlist-t,
.katex .op-limits > .vlist-t {
  text-align: center;
}
.katex .accent .accent-body {
  position: relative;
}
.katex .accent .accent-body:not(.accent-full) {
  width: 0;
}
.katex .overlay {
  display: block;
}
.katex .mtable .vertical-separator {
  display: inline-block;
  min-width: 1px;
}
.katex .mtable .arraycolsep {
  display: inline-block;
}
.katex .mtable .col-align-c > .vlist-t {
  text-align: center;
}
.katex .mtable .col-align-l > .vlist-t {
  text-align: left;
}
.katex .mtable .col-align-r > .vlist-t {
  text-align: right;
}
.katex .svg-align {
  text-align: left;
}
.katex svg {
  fill: currentColor;
  stroke: currentColor;
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
  display: block;
  height: inherit;
  position: absolute;
  width: 100%;
}
.katex svg path {
  stroke: none;
}
.katex img {
  border-style: none;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
}
.katex .stretchy {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .stretchy:after,
.katex .stretchy:before {
  content: "";
}
.katex .hide-tail {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.katex .halfarrow-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 50.2%;
}
.katex .halfarrow-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 50.2%;
}
.katex .brace-left {
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 25.1%;
}
.katex .brace-center {
  left: 25%;
  overflow: hidden;
  position: absolute;
  width: 50%;
}
.katex .brace-right {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 25.1%;
}
.katex .x-arrow-pad {
  padding: 0 .5em;
}
.katex .cd-arrow-pad {
  padding: 0 .55556em 0 .27778em;
}
.katex .mover,
.katex .munder,
.katex .x-arrow {
  text-align: center;
}
.katex .boxpad {
  padding: 0 .3em;
}
.katex .fbox,
.katex .fcolorbox {
  border: .04em solid;
  box-sizing: border-box;
}
.katex .cancel-pad {
  padding: 0 .2em;
}
.katex .cancel-lap {
  margin-left: -.2em;
  margin-right: -.2em;
}
.katex .sout {
  border-bottom-style: solid;
  border-bottom-width: .08em;
}
.katex .angl {
  border-right: .049em solid;
  border-top: .049em solid;
  box-sizing: border-box;
  margin-right: .03889em;
}
.katex .anglpad {
  padding: 0 .03889em;
}
.katex .eqn-num:before {
  content: "(" counter(katexEqnNo) ")";
  counter-increment: katexEqnNo;
}
.katex .mml-eqn-num:before {
  content: "(" counter(mmlEqnNo) ")";
  counter-increment: mmlEqnNo;
}
.katex .mtr-glue {
  width: 50%;
}
.katex .cd-vert-arrow {
  display: inline-block;
  position: relative;
}
.katex .cd-label-left {
  display: inline-block;
  position: absolute;
  right: calc(50% + .3em);
  text-align: left;
}
.katex .cd-label-right {
  display: inline-block;
  left: calc(50% + .3em);
  position: absolute;
  text-align: right;
}
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}
.katex-display > .katex {
  display: block;
  text-align: center;
  white-space: nowrap;
}
.katex-display > .katex > .katex-html {
  display: block;
  position: relative;
}
.katex-display > .katex > .katex-html > .tag {
  position: absolute;
  right: 0;
}
.katex-display.leqno > .katex > .katex-html > .tag {
  left: 0;
  right: auto;
}
.katex-display.fleqn > .katex {
  padding-left: 2em;
  text-align: left;
}
body {
  counter-reset: katexEqnNo mmlEqnNo;
}

/* src/lesson-page.css */
.lesson-v2 {
  background: #fff;
}
.lesson-v2-page {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 48px 44px;
  overflow: hidden;
  transform-origin: top left;
  font:
    15.5px/1.55 "Source Serif 4",
    Georgia,
    serif;
  color: #223349;
  text-align: left;
  background: #fff;
}
.lesson-v2-page p {
  margin: 0;
}
.lesson-v2-page h2 {
  margin: 0;
  font:
    700 25px/1.2 Manrope,
    Arial,
    sans-serif;
  letter-spacing: -.3px;
  color: #1b2f4c;
}
.lesson-v2-page h3 {
  margin: 6px 0 0;
  font:
    700 17px/1.3 Manrope,
    Arial,
    sans-serif;
  color: #24426b;
}
.lesson-kicker {
  margin: 0;
  font:
    600 11px/1.3 "JetBrains Mono",
    Menlo,
    monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4f78b0;
}
.lesson-math-display {
  display: block;
  margin: 4px 0;
  text-align: center;
}
.lesson-v2-page .katex {
  font-size: 1.05em;
}
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}
.lesson-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-left: 3px solid #4f78b0;
  border-radius: 0 8px 8px 0;
  background: #f2f6fc;
}
.lesson-callout.is-warn {
  border-color: #c2410c;
  background: #fff5ec;
}
.lesson-callout strong {
  font:
    700 13px/1.3 Manrope,
    Arial,
    sans-serif;
  color: #24426b;
}
.lesson-table {
  margin: 0;
}
.lesson-table table {
  width: 100%;
  border-collapse: collapse;
  font:
    13.5px/1.4 "JetBrains Mono",
    Menlo,
    monospace;
}
.lesson-table th {
  padding: 6px 10px;
  border-bottom: 2px solid #d4deeb;
  font:
    600 11px/1.3 Manrope,
    Arial,
    sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  color: #5b7393;
}
.lesson-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #edf1f6;
}
.lesson-table tr.is-highlight td {
  color: #1f9d6b;
  font-weight: 600;
}
.lesson-v2-page figcaption {
  margin-top: 6px;
  font:
    13px/1.45 Manrope,
    Arial,
    sans-serif;
  color: #5b7393;
}
.lesson-figure {
  margin: 0;
}
.lesson-figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.lesson-figure.is-dark > div,
.lesson-question .lesson-figure.is-dark {
  padding: 12px;
  border-radius: 10px;
  background: #111116;
}
.lesson-graph {
  margin: 0;
}
.lesson-graph svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  background: #fbfcfe;
}
.lesson-graph-headline {
  margin: 0 0 6px;
  font:
    600 13px/1.3 Manrope,
    Arial,
    sans-serif;
  color: #24426b;
}
.lesson-graph-axis,
.lesson-graph-note {
  font:
    12px "JetBrains Mono",
    Menlo,
    monospace;
  fill: #4f6789;
}
.lesson-graph-note.is-boxed {
  font-size: 13px;
  fill: #1b2f4c;
}
.lesson-graph-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font:
    13px Manrope,
    Arial,
    sans-serif;
  color: #3e5677;
}
.lesson-graph-slider input {
  flex: 1;
  accent-color: #d9822b;
}
.lesson-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #f8fafd;
}
.lesson-steps > header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font:
    700 17px/1.3 Manrope,
    Arial,
    sans-serif;
  color: #1b2f4c;
}
.lesson-steps nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.lesson-steps nav button,
.lesson-check,
.lesson-hint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 1px solid #cdd9e9;
  border-radius: 8px;
  background: #fff;
  font:
    600 13px Manrope,
    Arial,
    sans-serif;
  color: #2e568d;
  cursor: pointer;
}
.lesson-steps nav .is-primary,
.lesson-check {
  border-color: #2e5a95;
  background: #2e5a95;
  color: #fff;
}
.lesson-v2-page button:disabled {
  opacity: .45;
  cursor: default;
}
.lesson-question {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
}
.lesson-question.is-compact {
  padding: 10px 12px;
  background: #fff;
}
.lesson-question h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font:
    700 15px/1.3 Manrope,
    Arial,
    sans-serif;
  color: #1b2f4c;
}
.lesson-solved {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #e4f6ee;
  font-size: 11px;
  color: #16794f;
}
.lesson-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lesson-choice {
  padding: 8px 12px;
  border: 1px solid #d6e0ed;
  border-radius: 8px;
  background: #fbfcfe;
  font:
    14px/1.4 "Source Serif 4",
    Georgia,
    serif;
  text-align: left;
  color: #223349;
  cursor: pointer;
}
.lesson-choice:hover:not(:disabled) {
  border-color: #9fb6d6;
}
.lesson-choice.is-selected {
  border-color: #2e5a95;
  background: #edf3fc;
  box-shadow: inset 0 0 0 1px #2e5a95;
}
.lesson-choice.is-right {
  border-color: #1f9d6b;
  background: #e9f8f1;
  box-shadow: inset 0 0 0 1px #1f9d6b;
}
.lesson-choice.is-wrong {
  border-color: #c2410c;
  background: #fff3eb;
  box-shadow: inset 0 0 0 1px #c2410c;
}
.lesson-question-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-question-actions small {
  font:
    12px Manrope,
    Arial,
    sans-serif;
  color: #7a8ca5;
}
.lesson-hint {
  padding: 8px 12px;
  border-radius: 8px;
  background: #f2f6fc;
  font-size: 14px;
  color: #3e5677;
}
.lesson-feedback {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.lesson-feedback > svg {
  flex: none;
  margin-top: 3px;
}
.lesson-feedback.is-right {
  background: #e9f8f1;
  color: #16603f;
}
.lesson-feedback.is-wrong {
  background: #fff3eb;
  color: #8a3209;
}
.lesson-feedback.is-error {
  background: #fdeef0;
  color: #9b2c3f;
}
.lesson-class-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed #dbe4f0;
  font:
    12px Manrope,
    Arial,
    sans-serif;
  color: #7a8ca5;
}
.lesson-class-results span {
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f4f8;
}
.lesson-class-results .is-right {
  background: #e4f6ee;
  color: #16794f;
}
.lesson-class-results .is-wrong {
  background: #fff0e6;
  color: #9a3a0c;
}
.lesson-v2-footer {
  margin-top: auto;
  font:
    11px "JetBrains Mono",
    Menlo,
    monospace;
  color: #9aabc2;
}
.lesson-v2-page > * {
  flex-shrink: 0;
}

/* src/lesson-looks.css */
.lesson-v2-page {
  --lk-ink:#223349;
  --lk-head:#1b2f4c;
  --lk-accent:#4f78b0;
  --lk-muted:#7a8ca5;
  --lk-rule:#c9d5e6;
  --lk-num-bg:#1b2f4c;
  --lk-num-fg:#fff;
  --lk-ws-bg:#fff;
  --lk-ws-line:#dbe4f0;
  --lk-ws-border:#dbe4f0;
  --lk-head-font:700 25px/1.2 Manrope,Arial,sans-serif;
}
.lesson-sheet-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--lk-rule);
}
.lesson-sheet-header h2 {
  margin: 2px 0 0;
}
.lesson-sheet-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  min-width: 210px;
}
.lesson-sheet-fields > div {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.lesson-sheet-fields dt {
  font:
    600 11px/1 Manrope,
    Arial,
    sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lk-muted);
}
.lesson-sheet-fields dd {
  flex: 1;
  margin: 0;
  height: 18px;
  border-bottom: 1.5px solid var(--lk-rule);
}
.lesson-problems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 22px;
}
.lesson-problems.cols-2 {
  grid-template-columns: 1fr 1fr;
}
.lesson-problem {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
}
.lesson-problem-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lk-num-bg);
  color: var(--lk-num-fg);
  font:
    700 13px/1 Manrope,
    Arial,
    sans-serif;
}
.lesson-problem-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lesson-problem-body > p:first-child {
  padding-top: 2px;
}
.lesson-workspace {
  border: 1px solid var(--lk-ws-border);
  border-radius: 8px;
  background-color: var(--lk-ws-bg);
}
.lesson-workspace.size-s {
  height: 64px;
}
.lesson-workspace.size-m {
  height: 112px;
}
.lesson-workspace.size-l {
  height: 176px;
}
.lesson-workspace.is-lines {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0 26.5px,
      var(--lk-ws-line) 26.5px 28px);
}
.lesson-workspace.is-grid {
  background-image:
    linear-gradient(var(--lk-ws-line) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--lk-ws-line) 1px,
      transparent 1px);
  background-size: 16px 16px;
}
.lesson-workspace.is-dots {
  background-image: radial-gradient(var(--lk-ws-line) 1.3px, transparent 1.5px);
  background-size: 16px 16px;
}
.lesson-answer-line {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  font:
    600 14px/1 Manrope,
    Arial,
    sans-serif;
  color: var(--lk-head);
}
.lesson-answer-line > span:last-child {
  width: 120px;
  height: 20px;
  border-bottom: 1.5px solid var(--lk-head);
}
.lesson-v2-page h2 {
  color: var(--lk-head);
  font: var(--lk-head-font);
}
.lesson-v2-page h3 {
  color: var(--lk-head);
}
.lesson-v2-page .lesson-kicker {
  color: var(--lk-accent);
}
.lesson-v2-page.look-mmt,
.lesson-v2-page[class*=look-] {
  color: var(--lk-ink);
}
.lesson-v2-page .lesson-v2-footer {
  color: var(--lk-muted);
}
.lesson-v2-page.look-notebook {
  --lk-head:#1f3a68;
  --lk-accent:#c0504d;
  --lk-rule:#c0504d;
  --lk-num-bg:transparent;
  --lk-num-fg:#c0504d;
  --lk-ws-bg:transparent;
  --lk-ws-border:transparent;
  --lk-ws-line:transparent;
  --lk-head-font:700 28px/1.15 "Marker Felt","Bradley Hand","Comic Sans MS",cursive;
  padding-left: 96px;
  background:
    linear-gradient(
      90deg,
      transparent 74px,
      #e8a3a1 74px 76px,
      transparent 76px),
    repeating-linear-gradient(
      to bottom,
      #fff 0 27px,
      #cfe0f3 27px 28px);
  background-color: #fff;
}
.look-notebook .lesson-problem-n {
  width: auto;
  font:
    700 18px/1 "Marker Felt",
    "Bradley Hand",
    cursive;
  border-radius: 0;
}
.look-notebook .lesson-problem-n::after {
  content: ".";
}
.look-notebook .lesson-callout {
  background: #fffbe6;
  border-color: #e9c46a;
  transform: rotate(-.6deg);
  box-shadow: 0 2px 6px #00000014;
}
.lesson-v2-page.look-graph {
  --lk-head:#1d4d3a;
  --lk-accent:#2f7d5b;
  --lk-rule:#2f7d5b;
  --lk-num-bg:#fff;
  --lk-num-fg:#1d4d3a;
  --lk-ws-bg:transparent;
  --lk-ws-border:#2f7d5b;
  --lk-ws-line:transparent;
  --lk-head-font:700 24px/1.2 "JetBrains Mono",Menlo,monospace;
  background-color: #fbfefb;
  background-image:
    linear-gradient(#d6ecdf 1px, transparent 1px),
    linear-gradient(
      90deg,
      #d6ecdf 1px,
      transparent 1px),
    linear-gradient(#b9dcc8 1px, transparent 1px),
    linear-gradient(
      90deg,
      #b9dcc8 1px,
      transparent 1px);
  background-size:
    20px 20px,
    20px 20px,
    100px 100px,
    100px 100px;
}
.look-graph h2 {
  text-transform: uppercase;
  letter-spacing: .02em;
}
.look-graph .lesson-problem-n {
  border-radius: 3px;
  border: 1.5px solid #2f7d5b;
}
.look-graph .lesson-workspace {
  border-style: dashed;
}
.lesson-v2-page.look-cards {
  --lk-head:#20304f;
  --lk-accent:#3b6fd8;
  --lk-rule:transparent;
  --lk-num-bg:#3b6fd8;
  --lk-ws-bg:#f6f8fc;
  --lk-ws-border:#e3e9f4;
  --lk-ws-line:#dde5f2;
  background: #edf1f7;
}
.look-cards .lesson-sheet-header,
.look-cards .lesson-problem {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px #1d2e4d14;
  padding: 14px 16px;
}
.look-cards .lesson-sheet-header {
  border-bottom: 0;
}
.look-cards .lesson-problem-n {
  border-radius: 9px;
}
.look-cards .lesson-callout {
  background: #fff;
  border-radius: 14px;
  border-left-width: 5px;
  box-shadow: 0 2px 10px #1d2e4d10;
}
.lesson-v2-page.look-exam {
  --lk-ink:#111;
  --lk-head:#111;
  --lk-accent:#444;
  --lk-muted:#555;
  --lk-rule:#111;
  --lk-num-bg:transparent;
  --lk-num-fg:#111;
  --lk-ws-bg:#fff;
  --lk-ws-border:transparent;
  --lk-ws-line:#9a9a9a;
  --lk-head-font:700 26px/1.2 "Times New Roman",Georgia,serif;
  font-family:
    "Times New Roman",
    Georgia,
    serif;
}
.look-exam .lesson-sheet-header {
  border-bottom: 3px double #111;
}
.look-exam .lesson-sheet-fields::after {
  content: "Score  ______ / ______";
  font: 600 12px/1 "Times New Roman", serif;
  letter-spacing: .04em;
}
.look-exam .lesson-sheet-fields dt,
.look-exam .lesson-kicker {
  font-family: "Times New Roman", serif;
  letter-spacing: .06em;
}
.look-exam .lesson-problem-n {
  width: auto;
  justify-content: start;
  font: 700 16px/1 "Times New Roman", serif;
}
.look-exam .lesson-problem-n::after {
  content: ".";
}
.look-exam .lesson-callout {
  background: #fff;
  border: 1px solid #111;
  border-radius: 0;
}
.look-exam .lesson-answer-line {
  font-family: "Times New Roman", serif;
}
.look-exam .lesson-answer-line > span:last-child {
  border: 1.5px solid #111;
  height: 28px;
  width: 110px;
}
.lesson-v2-page.look-split {
  --lk-head:#24304a;
  --lk-accent:#b4572e;
  --lk-rule:#e2d6cc;
  --lk-num-bg:#b4572e;
  --lk-ws-bg:#fffdfa;
  --lk-ws-border:#eadfd4;
  --lk-ws-line:#efe5dc;
}
.look-split .lesson-problems.cols-2 {
  grid-template-columns: 1fr;
}
.look-split .lesson-problem {
  padding-bottom: 14px;
  border-bottom: 1px solid #efe5dc;
}
.look-split .lesson-problem-body {
  display: grid;
  grid-template-columns: 38% 1fr;
  grid-template-areas: "q work" "q answer";
  gap: 6px 18px;
}
.look-split .lesson-problem-body > p:first-child {
  grid-area: q;
  border-right: 2px solid #eadfd4;
  padding-right: 14px;
}
.look-split .lesson-workspace {
  grid-area: work;
}
.look-split .lesson-answer-line {
  grid-area: answer;
}
.lesson-v2-page.look-chalkboard {
  --lk-ink:#eef3ea;
  --lk-head:#fbfbf2;
  --lk-accent:#f5d76e;
  --lk-muted:#b9c9bb;
  --lk-rule:#d9e3d6;
  --lk-num-bg:transparent;
  --lk-num-fg:#fbfbf2;
  --lk-ws-bg:#f7f3e8;
  --lk-ws-border:#d8cfb8;
  --lk-ws-line:#e3dccb;
  --lk-head-font:700 30px/1.15 "Chalkboard SE",Chalkboard,"Marker Felt","Comic Sans MS",cursive;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      #3d6450,
      transparent 60%),
    radial-gradient(
      ellipse at 80% 90%,
      #2a4a3a,
      transparent 55%),
    #2f5242;
  border-top: 18px solid #8a5a33;
  font-family:
    "Chalkboard SE",
    Chalkboard,
    Georgia,
    serif;
}
.look-chalkboard .lesson-problem-n {
  border: 2px solid #fbfbf2;
  font-family:
    "Chalkboard SE",
    Chalkboard,
    cursive;
}
.look-chalkboard .lesson-callout {
  background: #ffffff14;
  border-color: #f5d76e;
}
.look-chalkboard .lesson-callout strong,
.look-chalkboard .lesson-answer-line {
  color: #fbfbf2;
}
.look-chalkboard .lesson-answer-line > span:last-child {
  border-color: #fbfbf2;
}
.look-chalkboard .lesson-workspace {
  box-shadow: 0 3px 8px #0000004d;
  transform: rotate(-.3deg);
}
.look-chalkboard .lesson-problem:nth-child(2n) .lesson-workspace {
  transform: rotate(.35deg);
}
.look-chalkboard .lesson-question {
  color: #223349;
}
.lesson-v2-page.look-blueprint {
  --lk-ink:#e3eeff;
  --lk-head:#ffffff;
  --lk-accent:#8fd3ff;
  --lk-muted:#9fb8da;
  --lk-rule:#8fd3ff;
  --lk-num-bg:transparent;
  --lk-num-fg:#8fd3ff;
  --lk-ws-bg:#f3f8ff;
  --lk-ws-border:#8fd3ff;
  --lk-ws-line:#cfe2fb;
  --lk-head-font:700 24px/1.2 "JetBrains Mono",Menlo,monospace;
  background-color: #123a63;
  background-image:
    linear-gradient(#ffffff12 1px, transparent 1px),
    linear-gradient(
      90deg,
      #ffffff12 1px,
      transparent 1px);
  background-size: 24px 24px;
  font-family:
    Manrope,
    Arial,
    sans-serif;
}
.look-blueprint h2 {
  text-transform: uppercase;
  letter-spacing: .04em;
}
.look-blueprint .lesson-sheet-header {
  border-bottom: 1px dashed #8fd3ff;
}
.look-blueprint .lesson-problem-n {
  border: 1.5px solid #8fd3ff;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
}
.look-blueprint .lesson-workspace.is-lines,
.look-blueprint .lesson-workspace.is-blank {
  background-image:
    linear-gradient(var(--lk-ws-line) 1px, transparent 1px),
    linear-gradient(
      90deg,
      var(--lk-ws-line) 1px,
      transparent 1px);
  background-size: 16px 16px;
}
.look-blueprint .lesson-callout {
  background: #ffffff10;
  border-color: #8fd3ff;
}
.look-blueprint .lesson-callout strong,
.look-blueprint .lesson-answer-line {
  color: #fff;
}
.look-blueprint .lesson-answer-line > span:last-child {
  border-color: #8fd3ff;
}
.look-blueprint .lesson-question {
  color: #223349;
}
.lesson-v2-page.look-minimal {
  --lk-ink:#1a1a1a;
  --lk-head:#000;
  --lk-accent:#6b6b6b;
  --lk-muted:#8a8a8a;
  --lk-rule:#1a1a1a;
  --lk-num-bg:transparent;
  --lk-num-fg:#000;
  --lk-ws-bg:#fff;
  --lk-ws-border:transparent;
  --lk-ws-line:#d4d4d4;
  --lk-head-font:600 26px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}
.look-minimal .lesson-sheet-header {
  border-bottom-width: 1px;
}
.look-minimal .lesson-problems {
  gap: 24px 28px;
}
.look-minimal .lesson-problem-n {
  width: auto;
  font: 500 14px/1 "Helvetica Neue", sans-serif;
  color: #8a8a8a;
}
.look-minimal .lesson-workspace {
  border-bottom: 1px solid #1a1a1a;
  border-radius: 0;
}
.look-minimal .lesson-callout {
  background: none;
  border-left: 1px solid #1a1a1a;
  border-radius: 0;
}
.lesson-v2-page.look-bright {
  --lk-head:#2b2350;
  --lk-accent:#7a5cff;
  --lk-rule:transparent;
  --lk-ws-bg:#fff;
  --lk-ws-border:#ffd36e;
  --lk-ws-line:#ffe7a8;
  --lk-head-font:800 28px/1.15 "Avenir Next Rounded","Arial Rounded MT Bold",Nunito,system-ui,sans-serif;
  font-family:
    "Avenir Next Rounded",
    "Avenir Next",
    "Arial Rounded MT Bold",
    system-ui,
    sans-serif;
  background: #fffaf2;
}
.look-bright .lesson-sheet-header {
  margin: -40px -48px 0;
  padding: 30px 48px 22px;
  background:
    linear-gradient(
      120deg,
      #ffb84d,
      #ff6f91 55%,
      #7a6cff);
  border: 0;
  border-radius: 0 0 28px 28px;
}
.look-bright .lesson-sheet-header h2,
.look-bright .lesson-sheet-header .lesson-kicker,
.look-bright .lesson-sheet-fields dt {
  color: #fff;
}
.look-bright .lesson-sheet-fields dd {
  border-color: #ffffffcc;
}
.look-bright .lesson-problem-n {
  width: 32px;
  height: 32px;
  font-size: 15px;
  box-shadow: 0 3px 0 #0000001f;
}
.look-bright .lesson-problem:nth-child(4n+1) .lesson-problem-n {
  background: #ff6f91;
}
.look-bright .lesson-problem:nth-child(4n+2) .lesson-problem-n {
  background: #ffb84d;
}
.look-bright .lesson-problem:nth-child(4n+3) .lesson-problem-n {
  background: #2ec4b6;
}
.look-bright .lesson-problem:nth-child(4n+4) .lesson-problem-n {
  background: #7a6cff;
}
.look-bright .lesson-workspace {
  border: 2px dashed var(--lk-ws-border);
  border-radius: 16px;
}
.look-bright .lesson-callout {
  background: #fff3c4;
  border: 0;
  border-radius: 16px;
}
.look-bright .lesson-question {
  border: 2px solid #e8e1ff;
  border-radius: 18px;
}
.look-notebook .lesson-problem-n,
.look-exam .lesson-problem-n,
.look-minimal .lesson-problem-n {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  height: auto;
  padding-top: 3px;
}
.look-cards .lesson-sheet-fields dd {
  border-color: #c9d5e6;
}
.lesson-sheet-continue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lk-rule);
}
.lesson-sheet-continue strong {
  font:
    700 15px/1.3 Manrope,
    Arial,
    sans-serif;
  color: var(--lk-head);
}
.lesson-sheet-continue span {
  font:
    600 10.5px/1 "JetBrains Mono",
    Menlo,
    monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lk-muted);
}
.look-bright .lesson-sheet-continue {
  border: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background:
    linear-gradient(
      120deg,
      #ffb84d,
      #ff6f91 55%,
      #7a6cff);
}
.look-bright .lesson-sheet-continue strong,
.look-bright .lesson-sheet-continue span {
  color: #fff;
}
.lesson-question.is-numbered {
  padding: 10px 14px;
  gap: 7px;
}
.lesson-question-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lesson-question-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lk-num-bg);
  color: var(--lk-num-fg);
  font:
    700 12.5px/1 Manrope,
    Arial,
    sans-serif;
}
.lesson-question-prompt {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.lesson-question-answer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 36px;
}
.lesson-question-answer .lesson-choices {
  flex: 1;
}
.lesson-question-answer .lesson-choice {
  padding: 6px 10px;
}
.lesson-question.is-row .lesson-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
}
.lesson-question.is-grid .lesson-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.lesson-question.is-list .lesson-question-answer {
  flex-direction: column;
  align-items: stretch;
}
.lesson-question.is-numbered > .lesson-workspace,
.lesson-question.is-numbered > .lesson-hint,
.lesson-question.is-numbered > .lesson-feedback,
.lesson-question.is-numbered > .lesson-class-results {
  margin-left: 36px;
}
.look-notebook .lesson-question-badge,
.look-exam .lesson-question-badge,
.look-minimal .lesson-question-badge {
  width: auto;
  background: none;
}
.look-graph .lesson-question-badge {
  border: 1.5px solid #2f7d5b;
  border-radius: 4px;
  background: #fff;
  color: #1d4d3a;
}
.look-blueprint .lesson-question-badge {
  border: 1.5px solid #2b5f96;
  border-radius: 4px;
  background: #fff;
  color: #2b5f96;
}
.look-chalkboard .lesson-question-badge {
  background: #2f5242;
  color: #fbfbf2;
}
.look-bright .lesson-question:nth-of-type(4n+1) .lesson-question-badge {
  background: #ff6f91;
}
.look-bright .lesson-question:nth-of-type(4n+2) .lesson-question-badge {
  background: #ffb84d;
}
.look-bright .lesson-question:nth-of-type(4n+3) .lesson-question-badge {
  background: #2ec4b6;
}
.look-bright .lesson-question:nth-of-type(4n+4) .lesson-question-badge {
  background: #7a6cff;
}
.lesson-question .lesson-workspace {
  margin: 2px 0;
}
.lesson-question-status {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  margin: 0 0 0 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font:
    12px/18px Manrope,
    Arial,
    sans-serif;
  color: var(--lk-muted);
}
.lesson-question-status > svg {
  flex: none;
}
.lesson-question-status.is-right {
  color: #16794f;
}
.lesson-question-status.is-wrong {
  color: #a8441b;
}
.lesson-question-status.is-error {
  color: #9b2c3f;
}
.lesson-question-status.is-hint {
  color: #3e5677;
}
.lesson-question-status .katex {
  font-size: 1em;
}

/* src/board-presence.css */
.board-live-presence {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  line-height: 1.2;
  user-select: none;
}
.board-viewing-area {
  position: absolute;
  border: 2px solid var(--participant-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--participant-color) 18%, transparent), inset 0 0 0 1px #ffffffb3;
  background: color-mix(in srgb, var(--participant-color) 3%, transparent);
  border-radius: 4px;
  transition:
    left .12s linear,
    top .12s linear,
    width .12s linear,
    height .12s linear;
  overflow: hidden;
}
.board-viewing-label {
  position: absolute;
  z-index: 1;
  max-width: calc(100% - 8px);
  background: white;
  color: var(--participant-color);
  border: 1px solid var(--participant-color);
  box-shadow: 0 1px 4px #10243812;
  padding: 3px 6px;
  border-radius: 4px;
  font: 600 10px/1.3 Arial, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.board-live-cursor {
  position: absolute;
  width: 0;
  height: 0;
  transition: left .08s linear, top .08s linear;
  z-index: 2;
  color: var(--participant-color);
}
.board-live-cursor > svg {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 22px;
  height: 27px;
  overflow: visible;
  filter: drop-shadow(0 1px 1px #14223833);
}
.board-live-cursor path {
  fill: var(--participant-color);
  stroke: white;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.board-live-cursor > span {
  position: absolute;
  left: 17px;
  top: 18px;
  white-space: nowrap;
  background: var(--participant-color);
  color: white;
  padding: 4px 7px;
  border-radius: 0 5px 5px 5px;
  font: 600 11px/1.25 Arial, sans-serif;
  box-shadow: 0 2px 5px #14223820;
}
.board-live-cursor.label-left > span {
  left: auto;
  right: 4px;
  border-radius: 5px 0 5px 5px;
}
.board-live-cursor.label-above > span {
  top: auto;
  bottom: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .board-viewing-area,
  .board-live-cursor {
    transition: none;
  }
}
.board-viewing-tag {
  position: absolute;
  top: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 8px);
}
.board-viewing-tag > .board-viewing-label {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
}
.board-viewing-cam {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.board-viewing-cam > .bobble-view,
.board-viewing-cam > b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--participant-color), 0 4px 12px #1b2c4530;
  background: color-mix(in srgb, var(--participant-color) 14%, #fff);
  color: var(--participant-color);
  font: 700 17px/1 Arial, sans-serif;
}
.board-viewing-cam.has-video > .bobble-view {
  box-shadow: 0 0 0 2.5px #e0443e, 0 4px 12px #1b2c4530;
}
.board-viewing-cam .bobble-view.is-cutout,
.board-viewing-cam .bobble-view.is-3d {
  display: block;
  background: linear-gradient(#eef3fa, #dfe8f4);
}
.board-viewing-cam .bobble-view.is-cutout .bobble-canvas,
.board-viewing-cam .bobble-view.is-3d .bobble-canvas {
  width: 150%;
  height: auto;
  margin: -6% 0 0 -25%;
}
.board-viewing-cam .call-live-badge {
  top: auto;
  bottom: -7px;
}
.board-viewing-cam.is-speaking > .bobble-view,
.board-viewing-cam.is-speaking > b {
  box-shadow:
    0 0 0 3px #3fae6a,
    0 0 0 8px #3fae6a33,
    0 4px 12px #1b2c4530;
}

/* src/annotation-selection.css */
.annotation-selection {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: default;
  touch-action: none;
  outline: none;
  user-select: none;
}
.annotation-selection.is-live-lesson {
  pointer-events: none;
}
.annotation-hit-target {
  position: absolute;
  pointer-events: auto;
  cursor: move;
}
.annotation-selection-box {
  position: absolute;
  border: 1.5px solid #3477d1;
  background: #3477d108;
  cursor: move;
  box-sizing: border-box;
  pointer-events: auto;
  min-width: 2px;
  min-height: 2px;
}
.annotation-selection-box:focus-visible {
  outline: 2px solid #86b5f3;
  outline-offset: 3px;
}
.annotation-selection-label {
  position: absolute;
  left: 0;
  bottom: calc(100% + 7px);
  display: flex;
  align-items: center;
  gap: 7px;
  background: #2867b5;
  color: #fff;
  border-radius: 4px;
  font: 10px/1.5 Arial, sans-serif;
  padding: 2px 6px;
  white-space: nowrap;
  cursor: default;
}
.annotation-selection-label button {
  color: white;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}
.annotation-resize {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid #3477d1;
  border-radius: 2px;
  background: #fff;
  padding: 0;
  touch-action: none;
}
.annotation-resize.nw {
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: nwse-resize;
}
.annotation-resize.ne {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  cursor: nesw-resize;
}
.annotation-resize.sw {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  cursor: nesw-resize;
}
.annotation-resize.se {
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  cursor: nwse-resize;
}
.annotation-marquee {
  position: absolute;
  border: 1px solid #3477d1;
  background: #3477d11c;
  pointer-events: none;
}
.annotation-selection.is-saving .annotation-selection-box {
  cursor: wait;
}
.annotation-selection-error {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  padding: 10px;
  border: 1px solid #e5bf8b;
  background: #fff7e9;
  color: #79541e;
  font-size: 11px;
  pointer-events: auto;
}
.annotation-selection-error button {
  margin-left: 10px;
  text-decoration: underline;
}

/* src/pane-zoom.css */
.pane-fit-controls {
  display: flex;
  gap: 3px;
  padding-left: 5px;
  margin-left: 3px;
  border-left: 1px solid #dce4ef;
}
.page-controls .pane-fit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 27px;
  padding: 4px 6px;
  border-radius: 5px;
  color: #55749f;
  white-space: nowrap;
  font-size: 10px;
}
.page-controls .pane-fit-button:hover {
  background: #e7eef9;
  color: #244f8b;
}
.page-controls .pane-fit-button:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 1px;
}
.pane-scroll.continuous-scroll {
  touch-action: none;
}
@container (max-width:700px) {
  .pane-fit-button > span {
    display: none;
  }
}

/* src/boards.css */
.boards-workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: #edf0f4;
}
.board-switcher {
  background: #fff;
  flex-shrink: 0;
  border-bottom: 1px solid #dae2ed;
  padding: 14px 14px 9px;
}
.board-switcher-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.board-switcher-meta > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.board-switcher-meta strong {
  font-size: 12px;
  font-weight: 650;
}
.board-switcher-meta > div:first-child > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8491a3;
  font-size: 10px;
  white-space: nowrap;
}
.board-switcher-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b8c3d1;
}
.board-layout-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.layout-toggle {
  display: flex;
  background: #f1f4f8;
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.layout-toggle button {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8490a4;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 10px;
  white-space: nowrap;
}
.layout-toggle button[aria-pressed=true] {
  background: white;
  box-shadow: 0 1px 4px #243c5e15;
  color: #2c568d;
}
.compare-pinned {
  font-size: 10px;
  color: #315a96;
  white-space: nowrap;
}
.board-navigation {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.board-step {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 21px;
  color: #8696ac;
  border-radius: 5px;
}
.board-step:hover {
  background: #eef3fb;
}
.board-tab-list {
  display: flex;
  gap: 7px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #d8e2ef transparent;
  padding: 2px 2px 7px;
  flex: 1;
  min-width: 0;
}
.board-tab {
  min-width: 130px;
  max-width: 210px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 10px 11px;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  background: #fbfcfe;
  position: relative;
  transition: background .18s, border-color .18s;
}
.board-tab.selected {
  border-color: #416fac;
  background: #f0f5fd;
  box-shadow: 0 0 0 1px #416fac24;
}
.board-tab.working {
  background: #edf9f1;
  border-color: #85bc9b;
  box-shadow: inset 0 3px 0 #56a175;
}
.board-tab.working.selected {
  outline: 2px solid #3e6dae;
  outline-offset: -1px;
}
.board-tab-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 7px;
  background: #eaf0f8;
  color: #4f6c94;
  font-size: 12px;
}
.board-tab.working .board-tab-icon {
  background: #d7efdf;
  color: #397653;
}
.board-tab-icon > .presence-dot {
  position: absolute;
  right: -3px;
  bottom: -2px;
  border: 2px solid #fff;
  width: 9px;
  height: 9px;
}
.board-tab-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.board-tab-text strong {
  font-size: 11px;
  font-weight: 600;
}
.board-tab-text small {
  font-size: 9px;
  color: #8490a1;
  white-space: nowrap;
}
.board-tab.working small {
  color: #448260;
}
.board-placement {
  font-size: 8px;
  color: #5377a7;
  min-width: 10px;
}
.presence-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: #c6ceda;
  border-radius: 50%;
}
.presence-dot.online {
  background: #69a784;
}
.presence-dot.working {
  background: #319467;
  box-shadow: 0 0 0 3px #52aa7820;
}
.board-legend {
  display: flex;
  gap: 13px;
  align-items: center;
  color: #94a0b1;
  font-size: 9px;
  margin: 3px 23px 0;
  flex-wrap: wrap;
}
.board-legend > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.board-legend > span:last-child {
  margin-left: auto;
}
.board-panel-host {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.two-panels .board-panel-host {
  grid-template-columns: minmax(0, var(--left-share)) 10px minmax(0, var(--right-share));
}
.panel-divider {
  background: #e5eaf1;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #97a6ba;
  touch-action: none;
  z-index: 2;
}
.panel-divider:hover,
.panel-divider:focus {
  background: #cbdcf5;
  color: #37629e;
  outline: 0;
}
.board-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #f9fafc;
  position: relative;
  border-top: 3px solid transparent;
}
.board-pane.is-selected {
  border-top-color: #4775b7;
}
.pane-heading {
  padding: 11px 12px 9px;
  background: #fff;
  border-bottom: 1px solid #e7ecf3;
}
.pane-heading-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pane-position {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #96a2b3;
  background: #f1f4f8;
  padding: 3px 5px;
  border-radius: 3px;
}
.is-selected .pane-position {
  background: #e8f0fb;
  color: #426b9e;
}
.pane-heading-main select {
  flex: 1;
  min-width: 0;
  border: 0;
  font-size: 12px;
  background: #fff;
  padding: 2px;
  font-weight: 600;
}
.pane-sharing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin: 7px 0 0 0;
  font-size: 9px;
  color: #8a98aa;
}
.pane-sharing > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pane-sharing label {
  flex: 1;
  min-width: 0;
}
.pane-sharing select {
  max-width: 100%;
  border: 1px solid #e2e8f0;
  padding: 3px 5px;
  font-size: 9px;
  border-radius: 4px;
  background: #f9fbfe;
  color: #647d9e;
}
.pane-presence {
  white-space: nowrap;
  color: #8b9bab;
}
.has-activity .pane-presence {
  color: #34825b;
}
.pane-document-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  background: #fbfcfe;
  border-bottom: 1px solid #e7ecf3;
}
.pane-document-heading strong {
  font-size: 10px;
  font-weight: 550;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pane-view-buttons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.pane-view-buttons button {
  padding: 4px;
  display: flex;
  gap: 3px;
  align-items: center;
  border-radius: 4px;
  color: #8b9aae;
  font-size: 9px;
}
.pane-view-buttons button[aria-pressed=true] {
  background: #eaf0f9;
  color: #42689d;
}
.pane-tools {
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: wrap;
  border-bottom: 1px solid #dfe6ef;
  background: #f7f9fc;
}
.pane-tools .tool-set {
  gap: 2px;
}
.pane-tools .tool-set button {
  width: 24px;
  height: 25px;
}
.pane-tools .tool-set .color-dot {
  width: 10px;
  height: 10px;
  margin: 0 3px;
}
.pane-tools .page-controls {
  margin-left: auto;
}
.pane-scroll {
  padding: 16px 16px 24px;
  min-height: 0;
}
.pane-scroll.can-pan {
  cursor: grab;
}
.pane-scroll.can-pan:active {
  cursor: grabbing;
}
.pane-scroll .paper-wrap {
  min-width: 0;
  max-width: none;
}
.pane-scroll .paper {
  overflow: visible;
}
.pane-scroll .paper > img {
  min-height: 30px;
}
.pane-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #fafbfd;
  border-top: 1px solid #dfe5ee;
  padding: 8px 10px;
  font-size: 8px;
  color: #8e9caf;
  flex-wrap: wrap;
}
.pane-footer > span {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pane-follow {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  background: #eaf2ff;
  color: #476f9f;
}
.pane-follow span {
  flex: 1;
}
.pane-follow button {
  display: grid;
  place-items: center;
  color: #5578a7;
}
.pane-pages {
  overflow: auto;
  padding: 13px;
  flex: 1;
  min-height: 0;
  background: #edf1f6;
}
.pane-pages-actions {
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 13px;
  color: #8192a8;
}
.pane-pages-actions button {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #597da9;
  font-size: 9px;
}
.pane-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.pane-page-grid article {
  border-radius: 6px;
  border: 1px solid #dce3ec;
  overflow: hidden;
  background: white;
}
.pane-page-grid article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  font-size: 8px;
  color: #8a99ad;
}
.pane-page-grid article > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pane-page-grid header button {
  display: flex;
  color: #8b99ae;
}
.pane-page-preview {
  display: block;
  width: 100%;
  position: relative;
  padding: 0;
  line-height: 0;
}
.pane-page-preview img {
  display: block;
  width: 100%;
}
.pane-page-preview svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pane-empty {
  padding: 36px 18px;
  text-align: center;
  font-size: 12px;
  color: #8b99aa;
  flex: 1;
}
.board-note {
  position: absolute;
  z-index: 3;
  width: 200px;
  max-width: 80%;
  background: #fff;
  border: 1px solid #afc3e0;
  box-shadow: 0 4px 18px #263b5726;
  padding: 7px;
  border-radius: 5px;
  line-height: 1.5;
}
.board-note textarea {
  width: 100%;
  min-height: 70px;
  border: 0;
  resize: vertical;
  font-size: 12px;
  padding: 5px;
  outline: 0;
}
.board-note > div {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.board-note button {
  font-size: 10px;
  padding: 4px;
  color: #466d9e;
}
.page-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f9eef1;
  color: #9b4056;
  font-size: 12px;
  line-height: 1.6;
  padding: 24px;
}
.workspace-layout.split-view .stage {
  min-height: 650px;
}
.board-tab-list:focus-within {
  scroll-behavior: smooth;
}
@media (max-width: 1250px) and (min-width: 701px) {
  .workspace-layout.split-view {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-layout.split-view:has(.tower) {
    grid-template-columns: minmax(0, 1fr) 230px;
  }
  .workspace-layout.split-view .materials {
    display: none;
  }
  .board-tab {
    min-width: 115px;
  }
  .pane-heading {
    padding: 9px;
  }
  .pane-document-heading {
    padding: 8px;
  }
  .pane-tools {
    padding: 6px;
  }
}
@media (max-width: 700px) {
  .board-switcher {
    padding: 10px 8px 8px;
  }
  .board-switcher-meta {
    gap: 5px;
    align-items: flex-start;
  }
  .board-switcher-meta > div:first-child > span {
    font-size: 8px;
    gap: 4px;
  }
  .board-switcher-meta strong {
    font-size: 11px;
  }
  .layout-toggle button {
    padding: 5px;
  }
  .layout-toggle button span {
    display: none;
  }
  .board-layout-actions {
    gap: 3px;
  }
  .compare-pinned {
    display: none;
  }
  .board-tab {
    min-width: 115px;
    padding: 8px;
  }
  .board-legend {
    margin: 4px 0 0;
    font-size: 8px;
    gap: 8px;
  }
  .board-legend > span:last-child {
    display: none;
  }
  .workspace-layout.split-view .stage {
    height: auto;
    min-height: 1100px;
    max-height: none;
  }
  .two-panels .board-panel-host {
    display: flex;
    flex-direction: column;
  }
  .two-panels .board-pane {
    height: 500px;
    flex: none;
  }
  .two-panels .panel-divider {
    display: none;
  }
  .pane-position {
    font-size: 7px;
  }
  .pane-heading-main select {
    font-size: 11px;
  }
  .pane-tools .page-controls {
    font-size: 9px;
  }
  .one-panel .board-pane {
    min-height: 0;
  }
  .board-switcher-meta .icon-button {
    width: 24px;
  }
}
@media (min-width: 701px) {
  .workspace-layout {
    min-height: 0;
  }
  .stage,
  .workspace-layout.split-view .stage {
    min-height: 0;
    height: calc(100dvh - 208px);
    max-height: none;
  }
  .materials,
  .tower {
    min-height: 0;
    max-height: calc(100dvh - 208px);
  }
  .pane-scroll {
    overscroll-behavior: contain;
  }
}
@media (min-width: 701px) and (max-width: 1150px) {
  .stage,
  .workspace-layout.split-view .stage {
    height: calc(100dvh - 186px);
  }
  .materials,
  .tower {
    max-height: calc(100dvh - 186px);
  }
}
@media (min-width: 541px) and (max-width: 700px) {
  .workspace-layout.split-view .stage {
    height: 75vh;
    min-height: 600px;
  }
  .two-panels .board-panel-host {
    display: grid;
    grid-template-columns: minmax(0, var(--left-share)) 10px minmax(0, var(--right-share));
  }
  .two-panels .board-pane {
    height: auto;
    min-height: 0;
  }
  .two-panels .panel-divider {
    display: flex;
  }
}
.resource-ribbon select {
  font: inherit;
  font-size: 10px;
  max-width: 170px;
  border: 1px solid #dce5ef;
  border-radius: 4px;
  color: #6280a7;
  background: white;
  padding: 2px 4px;
  margin-left: 5px;
}
.board-assigned-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 15px;
  background: #eef4fc;
  border-bottom: 1px solid #dce7f6;
  font-size: 11px;
  color: #365d97;
  flex-wrap: wrap;
}
.board-assigned-pages > span,
.board-assigned-pages > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.board-assigned-pages > div {
  flex: 1;
  max-width: 360px;
}
.board-assigned-pages select {
  min-width: 0;
  flex: 1;
  max-width: 100%;
  border: 1px solid #ccd9ee;
  background: white;
  border-radius: 5px;
  padding: 5px;
  color: #36577f;
  font-size: 11px;
}
.board-assigned-pages button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 4px;
}
.board-assigned-pages button:disabled {
  opacity: .3;
}
.continuous-scroll {
  overflow-anchor: none;
  scroll-behavior: auto;
}
.continuous-pages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.continuous-page {
  flex: none;
  min-width: 0;
}
.continuous-page-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #778ba6;
  font-size: 10px;
  line-height: 1.5;
  padding: 0 2px 7px;
  user-select: none;
}
.continuous-page .paper {
  isolation: isolate;
}
.continuous-page .paper > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: fill;
  min-height: 0;
}
.continuous-page .page-error {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.continuous-page .annotation-layer {
  overflow: hidden;
}
.continuous-page .live-lesson {
  overflow: hidden;
}
.board-switcher-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
}
.board-switcher-toggle:hover {
  color: #315a96;
}
.board-switcher-toggle:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 3px;
}
.board-switcher-toggle svg {
  color: #8491a3;
  flex-shrink: 0;
}
.board-switcher-toggle[aria-expanded=false] svg {
  transform: rotate(-90deg);
}
.board-navigation[hidden],
.board-legend[hidden] {
  display: none;
}
.board-switcher.is-collapsed .board-switcher-meta {
  margin-bottom: 0;
}
.pane-page-grid article > header > span {
  flex: 1;
  min-width: 0;
}
.pane-page-grid .pane-page-number {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 9px;
  color: #55759e;
}

/* src/student-status.css */
.board-tab.has-student-focus {
  border-color: var(--student-color);
  box-shadow: inset 0 0 0 1px var(--student-color);
}
.board-tab.has-student-focus::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 3px;
  background: var(--student-stripe);
}
.board-tab.has-student-focus .board-tab-icon {
  color: var(--student-color);
}
.board-tab-text small {
  display: flex;
  align-items: center;
  gap: 3px;
}
.board-tab-text small svg {
  flex: none;
  color: var(--student-color);
}
.board-tab.has-student-focus small {
  color: var(--student-color);
}
.board-tab {
  max-width: 280px;
}
.board-pane.has-student-focus {
  border-top-color: var(--student-color);
}
.board-pane.has-student-focus::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border: 2px solid var(--student-color);
  border-top: 0;
}
.board-pane.has-student-focus::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--student-stripe);
  z-index: 6;
  pointer-events: none;
}
.pane-student-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin-left: auto;
  font-size: 9px;
}
.pane-student-status small {
  font-size: 9px;
  color: #78889b;
}
.student-here {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-weight: 600;
}
.student-status-explanation {
  border-bottom: 1px solid #e3eaf3;
  padding-bottom: 9px;
}
.board-tab:focus-visible {
  outline: 2px solid #2853a0;
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .pane-student-status {
    font-size: 8px;
    gap: 3px;
  }
  .pane-student-status small {
    font-size: 8px;
  }
}

/* src/lesson-builder.css */
.lesson-builder-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #18273b80;
  backdrop-filter: blur(3px);
}
.lesson-builder {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  max-height: calc(100dvh - 32px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 80px #17243740;
  overflow: hidden;
  color: #293a52;
}
.lesson-builder-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e6ebf2;
}
.lesson-builder-head > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 650;
}
.lesson-builder-head > span svg {
  color: #5b7fc0;
}
.lesson-builder-head > small {
  flex: 1;
  font-size: 11px;
  color: #8594a8;
}
.lesson-builder-looks {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  overflow-x: auto;
  border-bottom: 1px solid #e6ebf2;
  background: #f7f9fc;
  flex-shrink: 0;
}
.lesson-builder-looks > button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
  width: 136px;
  padding: 6px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: none;
  text-align: left;
  color: #3e5677;
}
.lesson-builder-looks > button:hover {
  border-color: #c6d4e8;
  background: #fff;
}
.lesson-builder-looks > button.is-selected {
  border-color: #3d66a1;
  background: #fff;
  box-shadow: 0 4px 14px #24426b1f;
}
.lesson-builder-looks strong {
  font-size: 11.5px;
  font-weight: 650;
  color: #24324a;
}
.lesson-builder-looks small {
  font-size: 9.5px;
  line-height: 1.3;
  color: #8594a8;
}
.lesson-builder-looks i {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3d66a1;
  color: #fff;
}
.lesson-builder-thumb {
  display: block;
  width: 124px;
  height: 150px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e1e7ef;
  background: #fff;
}
.lesson-builder-page {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.lesson-builder-page > .lesson-v2-page {
  pointer-events: none;
}
.lesson-builder-measure {
  position: absolute !important;
  left: -10000px;
  top: 0;
  width: 720px;
  height: auto !important;
  visibility: hidden;
}
.lesson-builder-main {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 500px;
  min-height: 0;
  flex: 1;
}
.lesson-builder-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 18px 18px;
  overflow-y: auto;
  font-size: 12px;
}
.lesson-builder-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  color: #3a4f6e;
}
.lesson-builder-form label small,
.lesson-builder-quiz > small {
  font-weight: 400;
  color: #8594a8;
}
.lesson-builder-form input:not([type=checkbox]):not([type=radio]),
.lesson-builder-form textarea {
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  padding: 8px 10px;
  font: 13px/1.45 inherit;
  color: #293a52;
  background: #fff;
}
.lesson-builder-form input:not([type=checkbox]):not([type=radio]),
.lesson-builder-form textarea {
  font-weight: 400;
}
.lesson-builder-form textarea {
  resize: vertical;
}
.lesson-builder-form textarea.is-code {
  font-family:
    ui-monospace,
    Menlo,
    monospace;
  font-size: 12.5px;
}
.lesson-builder-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lesson-builder-form legend {
  padding: 0;
  margin-bottom: 5px;
  font-weight: 600;
  color: #3a4f6e;
}
.lesson-builder-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.lesson-builder-row .is-short {
  width: 130px;
}
.lesson-builder-segments {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.lesson-builder-segments button {
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  padding: 6px 11px;
  background: #fff;
  font-size: 12px;
  color: #4a6185;
}
.lesson-builder-segments button[aria-pressed=true] {
  border-color: #3d66a1;
  background: #edf3fc;
  color: #264f8c;
  font-weight: 600;
}
.lesson-builder-check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px !important;
  font-weight: 500 !important;
}
.lesson-builder-check input {
  margin-top: 2px;
}
.lesson-builder-quiz {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  background: #f9fbfe;
}
.lesson-builder-choice {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lesson-builder-choice input:not([type=radio]) {
  flex: 1;
}
.lesson-builder-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: #fff4f2;
  color: #a8382f;
}
.lesson-builder-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: #3d66a1;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lesson-builder-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 20px;
  overflow-y: auto;
  background: #eef2f7;
  border-left: 1px solid #e6ebf2;
}
.lesson-builder-preview > span {
  align-self: flex-start;
  font-size: 11px;
  color: #7a8ca5;
}
.lesson-builder-preview .lesson-builder-page {
  box-shadow: 0 6px 24px #1b2c4524;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .lesson-builder-main {
    grid-template-columns: 1fr;
  }
  .lesson-builder-preview {
    border-left: 0;
    border-top: 1px solid #e6ebf2;
  }
}
.lesson-builder-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lesson-builder-kinds button {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1.5px solid #dfe6ef;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  color: #4a6185;
}
.lesson-builder-kinds button.is-selected {
  border-color: #3d66a1;
  background: #f1f6fe;
  color: #264f8c;
}
.lesson-builder-kinds span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 650;
}
.lesson-builder-kinds small {
  font-size: 10.5px;
  font-weight: 400;
  color: #7a8ca5;
}
.lesson-builder-help {
  color: #7a8ca5;
  line-height: 1.5;
}
.lesson-builder-problems {
  margin: 0;
  padding-left: 28px !important;
}
.lesson-builder-sheet {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lesson-builder-sheet figcaption {
  font-size: 10.5px;
  color: #7a8ca5;
}

/* src/student-portraits.css */
.pane-student-portraits {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-shrink: 0;
}
.pane-student-portraits > small {
  font-size: 9px;
  color: #8390a1;
}
.student-portrait-stack {
  display: flex;
  align-items: center;
  gap: 3px;
}
.student-portrait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 2px solid var(--activity-color);
  padding: 2px;
  border-radius: 50%;
  background: white;
  box-sizing: border-box;
  vertical-align: middle;
}
.student-portrait > img,
.student-portrait > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #edf2f9;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 650;
  color: #526d94;
}
.student-portrait.state-signed-out,
.student-portrait.state-disconnected,
.student-portrait.state-unknown {
  border-style: dashed;
}
.portrait-trigger {
  display: inline-flex;
  padding: 0;
  border-radius: 50%;
  background: transparent;
}
.portrait-trigger:hover .student-portrait,
.portrait-trigger:focus-visible .student-portrait {
  box-shadow: 0 0 0 3px #e3eaf5;
}
.portrait-trigger:focus-visible,
.student-activity-all:focus-visible {
  outline: 2px solid #335f9c;
  outline-offset: 3px;
}
.student-activity-all {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #5c7393;
  padding: 5px 6px;
  border: 1px solid #dde6f1;
  border-radius: 6px;
  background: #f9fbfe;
  font-size: 9px;
  white-space: nowrap;
}
.student-activity-popover {
  position: fixed;
  z-index: 300;
  background: #fff;
  border: 1px solid #d5dfed;
  border-radius: 13px;
  box-shadow: 0 14px 50px #18345626;
  padding: 14px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  color: #24364e;
  font-size: 12px;
  box-sizing: border-box;
}
.activity-popover-header,
.activity-popover-header > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.activity-popover-header {
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  color: #69809f;
}
.activity-popover-header small {
  font-weight: 400;
  margin-left: 6px;
}
.activity-popover-header button {
  display: grid;
  place-items: center;
  padding: 3px;
  color: #69809f;
  border-radius: 4px;
}
.activity-person {
  display: flex;
  align-items: center;
  gap: 11px;
}
.activity-person .student-portrait {
  width: 48px;
  height: 48px;
  border-width: 3px;
  padding: 3px;
}
.activity-person .student-portrait > span {
  font-size: 17px;
}
.activity-person h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.2;
}
.activity-label {
  font-size: 11px;
  font-weight: 650;
}
.activity-explanation {
  font-size: 11px;
  line-height: 1.5;
  color: #6b7c93;
  margin: 12px 0;
}
.activity-facts {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0;
  padding: 10px;
  background: #f4f7fb;
  border-radius: 7px;
}
.activity-facts dt {
  font-size: 9px;
  color: #7b8ca4;
  margin-bottom: 5px;
}
.activity-facts dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.activity-facts > div:last-child {
  min-width: 44px;
}
.activity-document {
  font-size: 10px;
  color: #73849b;
  margin: 7px 0 12px;
  overflow-wrap: anywhere;
}
.activity-last {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0 14px;
  color: #6c809f;
}
.activity-last > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.activity-last span {
  font-size: 10px;
}
.activity-last strong {
  font-size: 12px;
  color: #304967;
  font-weight: 600;
}
.activity-history {
  border-top: 1px solid #e3e9f2;
  padding-top: 12px;
}
.activity-history > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
}
.activity-history > header > span {
  font-size: 9px;
  color: #8b98aa;
}
.activity-timeline {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 2px;
  height: 23px;
}
.activity-block {
  background: var(--activity-color);
  border-radius: 2px;
  min-width: 0;
}
.activity-block.state-unknown {
  background: #f1f4f8;
  border: 1px solid #e3e8ef;
}
.activity-legend {
  display: flex;
  gap: 10px;
  font-size: 8px;
  color: #718098;
  margin-top: 7px;
}
.activity-legend > span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.activity-legend i {
  height: 5px;
  width: 5px;
  border-radius: 2px;
}
.activity-counts {
  font-size: 10px;
  color: #7e8fa7;
  margin: 12px 0 9px;
}
.activity-events {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-events li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid #f0f3f8;
}
.activity-events time {
  white-space: nowrap;
  color: #8c9aaf;
  font-size: 9px;
}
.activity-caption {
  font-size: 9px;
  line-height: 1.5;
  color: #8897aa;
  margin: 12px 0 2px;
}
.activity-jump {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 1px solid #cddbf0;
  background: #edf3fd;
  color: #345d96;
  border-radius: 6px;
  font-size: 11px;
  padding: 8px;
  margin-top: 12px;
}
.activity-jump:disabled {
  opacity: .4;
  cursor: default;
}
.activity-roster-intro {
  font-size: 11px;
  color: #7b8da5;
  line-height: 1.5;
  margin: 0 0 12px;
}
.activity-roster {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.activity-roster > button {
  display: flex;
  gap: 9px;
  align-items: center;
  text-align: left;
  padding: 9px 5px;
  border-radius: 7px;
  border: 1px solid #e9eef5;
  background: #fcfdff;
}
.activity-roster > button:hover {
  background: #f1f6ff;
}
.activity-roster > button > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.activity-roster strong {
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}
.activity-roster small {
  display: block;
  color: #7e8fa4;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-roster b {
  font-size: 9px;
  font-weight: 500;
  max-width: 70px;
  line-height: 1.4;
}
.board-tab-icon:has(.student-portrait) {
  width: 32px;
  height: 32px;
  background: transparent;
}
@media (max-width: 1000px) {
  .two-panels .pane-student-portraits {
    gap: 4px;
  }
  .two-panels .pane-student-portraits > small {
    max-width: 65px;
    font-size: 8px;
  }
  .two-panels .student-portrait-stack {
    gap: 0;
  }
  .two-panels .portrait-trigger:not(:first-child) {
    margin-left: -8px;
  }
  .two-panels .portrait-trigger:hover {
    z-index: 1;
  }
}
.board-switcher-meta > div:first-child {
  flex: 1;
}
.board-switcher-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.board-switcher-title .board-switcher-toggle {
  align-self: center;
  flex-shrink: 0;
}
.collapsed-student-portraits {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  min-width: 0;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: #d8e2ef transparent;
}
.board-portrait-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 3px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.board-portrait-tab .board-tab-icon:has(.student-portrait),
.board-portrait-tab .student-portrait {
  width: 26px;
  height: 26px;
}
.board-portrait-tab .student-portrait > span {
  font-size: 9px;
}
.board-portrait-tab.selected {
  background: #e6eefb;
}
.board-portrait-tab:hover {
  background: #edf2f9;
}
.board-portrait-tab:focus-visible {
  outline: 2px solid #335f9c;
  outline-offset: -1px;
}
.class-board-shortcut {
  border-radius: 8px;
}
.class-board-shortcut .board-tab-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #edf2f9;
  color: #52739f;
}
.class-board-shortcut.selected .board-tab-icon {
  background: #315f9f;
  color: #fff;
}
.board-portrait-tab {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.board-portrait-tab:active,
.board-portrait-tab.is-dragging {
  cursor: grabbing;
}
.board-portrait-tab.is-dragging {
  opacity: .55;
}
.board-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.board-drop-target {
  position: absolute;
  padding: 10px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  background: #eaf1fc9c;
  border: 2px dashed #87a8d6;
  color: #315985;
}
.board-drop-target.is-over {
  background: #d7e8ffbf;
  border: 3px solid #386eb6;
}
.board-drop-target > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 9px;
  max-width: 90%;
  padding: 24px 18px;
  background: #ffffffed;
  border: 1px solid #c6d8ef;
  border-radius: 12px;
  box-shadow: 0 8px 30px #224b7b18;
  text-align: center;
}
.board-drop-target strong {
  font-size: 15px;
}
.board-drop-target span {
  font-size: 12px;
}
.board-drop-target small {
  font-size: 10px;
  color: #7087a5;
}
.board-drag-instruction {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: #244875;
  color: white;
  font-size: 10px;
  white-space: nowrap;
}

/* src/page-navigation.css */
.pane-view-buttons .thumbnail-toggle {
  gap: 4px;
  font-size: 10px;
  padding: 5px 7px;
  white-space: nowrap;
}
.pane-view-buttons .thumbnail-toggle[aria-expanded=true] {
  background: #eaf0f9;
  color: #365f98;
}
.page-thumbnail-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 86px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  border-right: 1px solid #dfe6ef;
  background: #f2f5fa;
  flex: 0 0 86px;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #adbed5 transparent;
  overflow-anchor: none;
}
.page-thumbnail {
  width: 68px;
  flex: 0 0 auto;
  border: 1px solid #dce3ef;
  border-radius: 7px;
  padding: 5px 4px 3px;
  background: #fff;
  color: #8795aa;
  position: relative;
}
.page-thumbnail.current {
  border-color: #4777bc;
  box-shadow: inset 0 0 0 1px #4777bc;
  background: #edf3ff;
  color: #295594;
}
.page-thumbnail:hover {
  border-color: #7e9bc5;
}
.page-thumbnail:focus-visible {
  outline: 2px solid #4777bc;
  outline-offset: 1px;
}
.page-thumbnail-image {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-thumbnail-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  line-height: 16px;
  margin-top: 2px;
}
.page-thumbnail-number i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #269667;
}
.document-miniature {
  position: relative;
  display: block;
  background: white;
  border: 1px solid #dbe2ec;
  box-sizing: content-box;
  overflow: hidden;
  flex-shrink: 0;
}
.document-miniature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}
.document-miniature svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.document-miniature-viewport {
  position: absolute;
  border: 1.5px solid #24946b;
  background: #37ad7020;
  box-sizing: border-box;
  min-width: 2px;
  min-height: 2px;
}
.board-tab.has-minimap {
  min-width: 185px;
}
.board-tab-minimap {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  flex-shrink: 0;
}
.student-view-popover {
  position: fixed;
  z-index: 95;
  width: 270px;
  padding: 14px;
  background: white;
  border: 1px solid #cddbeb;
  border-radius: 11px;
  box-shadow: 0 14px 42px #203d5b2e;
  color: #355273;
  pointer-events: none;
}
.student-view-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.student-view-popover header > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.student-view-popover b {
  font-size: 9px;
  padding: 3px 6px;
  background: #eff2f7;
  color: #8494aa;
  border-radius: 4px;
}
.student-view-popover b.live {
  color: #24805e;
  background: #e8f7ef;
}
.student-view-popover > strong {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-view-map {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f4f8;
  padding: 8px 0;
  border-radius: 6px;
}
.student-view-details {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  margin-top: 9px;
  color: #6683a5;
}
.student-view-popover p {
  font-size: 11px;
  line-height: 1.5;
  color: #7489a4;
  margin: 10px 0 0;
}
.student-view-popover small {
  display: block;
  font-size: 10px;
  line-height: 1.5;
  margin-top: 4px;
  color: #416c9f;
}
@media (max-width: 700px) {
  .page-thumbnail-strip {
    width: 76px;
    flex-basis: 76px;
    gap: 6px;
    padding: 6px;
  }
  .page-thumbnail {
    width: 62px;
  }
  .board-tab.has-minimap {
    min-width: 172px;
  }
}
.pane-document-body {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.pane-document-body > .continuous-scroll {
  min-width: 0;
  flex: 1 1 0;
}
.board-pane > .pane-heading {
  padding: 7px 10px;
}
.pane-heading-main > select {
  flex: 0 1 auto;
  width: auto;
  max-width: 220px;
  padding: 3px 22px 3px 3px;
  text-overflow: ellipsis;
}
.pane-heading-main > .presence-dot {
  flex-shrink: 0;
}
.board-access-menu {
  position: relative;
  flex-shrink: 0;
  font-size: 11px;
}
.board-access-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  color: #778da9;
  cursor: pointer;
  list-style: none;
}
.board-access-menu summary::-webkit-details-marker {
  display: none;
}
.board-access-menu summary:hover,
.board-access-menu[open] summary {
  background: #edf3fb;
  color: #315b95;
}
.board-access-menu > div {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 45;
  width: 215px;
  padding: 12px;
  background: white;
  border: 1px solid #d7e2ef;
  border-radius: 7px;
  box-shadow: 0 6px 20px #1f365b20;
}
.board-access-menu label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #647d9e;
}
.board-access-menu select {
  width: 100%;
  border: 1px solid #d7e2ef;
  border-radius: 4px;
  padding: 6px;
  font-size: 11px;
  font-weight: 400;
}
.page-thumbnail-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.page-thumbnail-file + .page-thumbnail-file {
  padding-top: 8px;
  border-top: 1px dashed #c6d3e4;
}
.page-thumbnail-file-title {
  display: flex;
  align-items: baseline;
  gap: 3px;
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  color: #41618c;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-thumbnail-file-title > span {
  flex: none;
  color: #8a9bb3;
}

/* src/compact-board-header.css */
.board-pane {
  container-type: inline-size;
}
.board-pane > .pane-navigation-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px;
  min-height: 45px;
}
.pane-navigation-heading > .pane-heading-main {
  flex: 0 1 auto;
  min-width: 0;
  gap: 5px;
}
.pane-navigation-heading .pane-heading-main > select {
  width: 140px;
  max-width: 140px;
  min-width: 70px;
  font-size: 11px;
}
.pane-navigation-heading > .pane-document-heading {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 1px solid #e0e7f0;
  background: transparent;
  gap: 7px;
}
.pane-navigation-heading .board-file-picker {
  gap: 5px;
  min-width: 0;
}
.pane-navigation-heading .board-file-picker select {
  max-width: none;
  font-size: 11px;
  padding: 6px;
}
.pane-navigation-heading > .pane-student-portraits {
  margin-left: 0;
  gap: 5px;
}
.pane-navigation-heading .pane-student-portraits > small {
  display: none;
}
.pane-navigation-heading .board-access-menu > div {
  left: 0;
}
@container (max-width:760px) {
  .pane-navigation-heading .pane-heading-main > select {
    width: 108px;
    max-width: 108px;
  }
  .pane-navigation-heading .board-file-count > span {
    display: none;
  }
  .pane-navigation-heading .thumbnail-toggle > span {
    display: none;
  }
  .pane-navigation-heading .board-file-picker > svg {
    display: none;
  }
  .pane-navigation-heading .student-portrait-stack {
    gap: 0;
  }
  .pane-navigation-heading .portrait-trigger:not(:first-child) {
    margin-left: -8px;
  }
}
@container (max-width:600px) {
  .board-pane > .pane-navigation-heading {
    gap: 5px;
    padding: 6px;
  }
  .pane-navigation-heading .pane-position {
    display: none;
  }
  .pane-navigation-heading .pane-heading-main > select {
    width: 90px;
    max-width: 90px;
    min-width: 60px;
    padding-right: 16px;
    font-size: 10px;
  }
  .pane-navigation-heading > .pane-document-heading {
    padding-left: 5px;
    gap: 4px;
  }
  .pane-navigation-heading .board-file-count,
  .pane-navigation-heading .board-file-picker > button {
    display: none;
  }
  .pane-navigation-heading .board-file-picker select {
    font-size: 10px;
    padding: 6px 3px;
  }
  .pane-navigation-heading .pane-view-buttons {
    gap: 1px;
  }
  .pane-navigation-heading .pane-view-buttons button {
    padding: 4px;
  }
  .pane-navigation-heading .pane-view-buttons button > span {
    display: none;
  }
  .pane-navigation-heading .student-activity-all {
    padding: 5px;
  }
  .pane-navigation-heading .student-activity-all > span {
    display: none;
  }
  .pane-navigation-heading .portrait-trigger:nth-child(n+3) {
    display: none;
  }
}
@container (max-width:360px) {
  .pane-navigation-heading .pane-heading-main > select {
    width: 70px;
    max-width: 70px;
  }
  .pane-navigation-heading .pane-heading-main {
    gap: 1px;
  }
  .pane-navigation-heading .student-portrait-stack {
    display: none;
  }
  .pane-navigation-heading .board-access-menu summary {
    width: 20px;
  }
}

/* src/floating-board-tools.css */
.board-pane.floating-panel {
  border-top: 0;
  --pane-controls-bottom:64px;
}
.floating-panel.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #4775b745;
  z-index: 4;
}
.floating-panel > .pane-navigation-heading {
  position: absolute;
  inset: 14px 10px auto;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}
.pane-board-island,
.pane-document-island,
.pane-tool-island {
  border: 1px solid #cdd9e9cc;
  border-radius: 11px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 5px 18px #263c5e17, 0 1px 3px #263c5e0a;
  pointer-events: auto;
}
.pane-navigation-heading > .pane-board-island {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 5px;
  gap: 4px;
}
.pane-board-island .pane-position {
  display: none;
}
.pane-navigation-heading .pane-board-island > select {
  flex: 1 1 auto;
  width: 128px;
  max-width: 128px;
  min-width: 48px;
  padding: 4px 16px 4px 4px;
  background: transparent;
  font-size: 11px;
  text-overflow: ellipsis;
}
.pane-board-focus {
  flex-shrink: 0;
  border-left: 1px solid #dce5ef;
  margin-left: 2px;
  padding-left: 5px;
}
.pane-board-focus .class-focus-action {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: #edf4ff;
  color: #315c98;
  font-size: 10px;
  white-space: nowrap;
}
.pane-board-focus .class-focus-action:hover:not(:disabled) {
  background: #dfeaff;
}
.pane-board-focus .focus-short-label {
  display: none;
}
.pane-document-island {
  display: flex;
  align-items: center;
  flex: 1 1 410px;
  min-width: min(410px, 100%);
  max-width: 720px;
  padding: 5px;
  gap: 4px;
  margin-left: auto;
}
.pane-document-island > .pane-view-island {
  padding: 0 0 0 4px;
  margin-left: 0;
  border-left: 1px solid #dce5ef;
  flex-shrink: 0;
}
.pane-view-island .pane-view-buttons {
  gap: 2px;
}
.pane-view-island .pane-view-buttons button {
  width: 26px;
  height: 27px;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
}
.pane-view-island .pane-view-buttons button > span {
  display: none;
}
.pane-document-body > .pane-canvas {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  container: board-canvas / inline-size;
}
.floating-panel .page-thumbnail-strip {
  padding-top: var(--pane-controls-bottom);
}
.pane-canvas > .continuous-scroll {
  min-width: 0;
  flex: 1 1 0;
  padding: var(--pane-controls-bottom) 16px 24px 54px;
}
.pane-canvas > .pane-floating-tools {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}
.pane-floating-tools > .pane-tool-island {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 5px;
}
.pane-floating-tools .tool-set.writing-tools {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 3px;
}
.board-pane .pane-floating-tools .writing-tools > button,
.pane-floating-tools .writing-settings summary {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.pane-document-island > .pane-navigation-island {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 3px;
  padding: 0;
  margin: 0;
}
.pane-navigation-island .board-file-picker {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  gap: 0;
}
.board-file-picker.is-compact {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
}
.board-file-picker.is-compact select {
  flex: 1 1 0;
}
.board-file-number,
.board-file-type {
  flex-shrink: 0;
  font-size: 10px;
  color: #6e829e;
  white-space: nowrap;
}
.board-file-number {
  padding-left: 3px;
  font-variant-numeric: tabular-nums;
}
.board-file-type {
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 4px;
  background: #f0f4fa;
}
.pane-navigation-island .board-file-picker select {
  width: 100%;
  min-width: 0;
  max-width: none;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 17px 6px 5px;
  border: 0;
  background: transparent;
  text-overflow: ellipsis;
  color: #355577;
}
.pane-page-stepper {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
}
.pane-page-stepper > button {
  flex-shrink: 0;
  width: 20px;
  height: 26px;
  border-radius: 5px;
  padding: 2px;
}
.pane-page-stepper > label {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 2px;
  font-size: 10px;
  color: #7d8da4;
  font-variant-numeric: tabular-nums;
}
.pane-navigation-island .pane-page-stepper input {
  width: 26px;
  height: 24px;
  padding: 2px;
  font-size: 10px;
  text-align: center;
  appearance: textfield;
}
.pane-page-stepper input::-webkit-inner-spin-button,
.pane-page-stepper input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.pane-navigation-island .pane-fit-controls {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  border-left: 1px solid #dce5ef;
  padding-left: 4px;
  margin-left: 1px;
}
.pane-navigation-island .pane-fit-button {
  width: 25px;
  height: 28px;
  padding: 4px;
  justify-content: center;
}
.pane-navigation-island .pane-fit-button > span {
  display: none;
}
.pane-floating-tools .writing-settings-popover {
  top: 50%;
  left: 39px;
  transform: translateY(-50%);
  width: min(232px, calc(100cqw - 64px));
}
.pane-floating-tools .writing-tools > button:hover:not(:disabled),
.pane-floating-tools .writing-settings summary:hover,
.pane-navigation-island button:hover:not(:disabled) {
  background: #edf3fb;
  color: #28549b;
}
.pane-floating-tools button:focus-visible,
.pane-floating-tools summary:focus-visible,
.pane-navigation-heading button:focus-visible,
.pane-navigation-heading select:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 1px;
}
.pane-floating-tools .writing-tools > button.active {
  background: #e4edfc;
  color: #28549b;
}
.floating-panel > .pane-pages {
  padding-top: var(--pane-controls-bottom);
}
@container (max-width:600px) {
  .pane-navigation-heading .pane-board-island > select {
    width: 90px;
    max-width: 90px;
    min-width: 48px;
    font-size: 10px;
  }
  .pane-board-island .follow-person-name {
    max-width: 50px;
  }
  .pane-board-focus .focus-full-label {
    display: none;
  }
  .pane-board-focus .focus-short-label {
    display: inline;
  }
}
@container (max-width:520px) {
  .pane-document-island .pane-view-buttons button {
    width: 23px;
  }
  .pane-navigation-island .board-file-picker {
    gap: 1px;
  }
  .pane-navigation-island .board-file-picker select {
    font-size: 10px;
  }
  .pane-page-stepper > button {
    width: 18px;
  }
  .pane-navigation-island .pane-fit-button {
    width: 22px;
  }
}
@container (max-width:300px) {
  .pane-document-island > .pane-navigation-island {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .pane-navigation-island .board-file-picker {
    flex-basis: 100%;
  }
}
.pane-status-strip {
  position: relative;
  flex: 0 0 7px;
  height: 7px;
  z-index: 25;
  background: #e7edf5;
  border-top: 1px solid #dce4ed;
}
.is-selected > .pane-status-strip {
  border-top-color: #4775b7;
}
.pane-viewer-segments {
  display: flex;
  height: 100%;
  gap: 2px;
}
.pane-viewer-segment {
  flex: 1;
  min-width: 0;
  background: #d9e2ed;
  transition: background .2s;
}
.pane-viewer-segment.is-live {
  background: color-mix(in srgb, var(--viewer-color) 65%, #fff);
}
.pane-viewer-segment.is-active {
  background: var(--viewer-color);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--viewer-color) 30%, transparent);
}
.pane-load-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  background: #d8e7fc;
  pointer-events: none;
}
.pane-load-progress:after {
  content: "";
  position: absolute;
  width: 30%;
  height: 100%;
  background: #416eb3;
  animation: pane-load-slide 1.1s ease-in-out infinite;
}
.pane-load-error {
  position: absolute;
  inset: 0;
  font-size: 0;
  border-bottom: 2px solid #b34b5d;
  pointer-events: none;
}
@keyframes pane-load-slide {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(440%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pane-load-progress:after {
    animation: none;
    width: 100%;
    opacity: .65;
  }
}
.pane-board-island > .screen-share-launch {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 4px;
  border: 1px solid #d4dfed;
  border-radius: 6px;
  color: #547399;
  background: #f8faff;
}
.pane-board-island > .screen-share-launch:hover {
  background: #e7effa;
}
.pane-board-island > .screen-share-launch.is-live {
  color: #227f59;
  border-color: #93c9b3;
  background: #ebf8f2;
}
.pane-navigation-heading > .pane-document-island {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  padding: 5px;
  margin-left: auto;
}
.pane-document-island > .pane-view-island {
  padding: 0;
  border-left: 0;
}
.floating-panel > .pane-side-controls {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 68px;
  max-height: calc(100% - var(--pane-controls-bottom) - 24px);
  overflow: auto;
  padding: 6px 5px;
  border: 1px solid #cdd9e9cc;
  border-radius: 11px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 5px 18px #263c5e17, 0 1px 3px #263c5e0a;
}
.pane-side-controls .board-file-picker.is-compact {
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: center;
}
.pane-side-controls .board-file-picker select {
  flex: none;
  width: 100%;
  max-width: none;
  padding: 4px 2px;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  color: #355577;
  text-overflow: ellipsis;
}
.pane-side-controls .board-file-number {
  font-size: 10px;
  color: #7d8da4;
}
.pane-side-controls .board-file-type {
  align-self: center;
}
.pane-side-controls .pane-page-stepper {
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid #dce5ef;
}
.pane-side-controls .pane-page-stepper > button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 22px;
}
.pane-side-controls .pane-page-stepper > label {
  flex-direction: column;
  gap: 1px;
}
.pane-side-controls .pane-page-stepper input {
  width: 40px;
  height: 24px;
  padding: 2px;
  font-size: 11px;
  text-align: center;
  appearance: textfield;
}
.pane-side-controls .pane-fit-controls {
  display: flex;
  justify-content: center;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid #dce5ef;
}
.pane-side-controls .pane-fit-button {
  width: 26px;
  height: 26px;
  padding: 4px;
  justify-content: center;
}
.pane-side-controls .pane-fit-button > span {
  display: none;
}
.pane-side-controls .screen-active-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  text-align: center;
}
.pane-side-controls button:hover:not(:disabled) {
  background: #edf3fb;
  color: #28549b;
}
.floating-panel .pane-canvas > .continuous-scroll,
.floating-panel > .pane-pages {
  padding-right: 92px;
}
.continuous-file-title {
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: #2a4264;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.continuous-page.starts-file:not(:first-child) {
  margin-top: 10px;
  padding-top: 16px;
  border-top: 2px dashed #c6d3e4;
}
.continuous-page .web-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0b0f;
  line-height: normal;
}
.web-frame > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.web-frame-section > iframe {
  transform-origin: 0 0;
  background: #0a0a0c;
}
.continuous-page .web-frame-blocked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #38557c;
  background: #f3f6fb;
}
.web-frame-blocked strong {
  max-width: 90%;
  font-size: 15px;
  color: #223b5e;
}
.web-frame-blocked span,
.web-frame-blocked small {
  max-width: 420px;
  font-size: 12px;
  line-height: 1.45;
  color: #5c7393;
}
.web-frame-blocked div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.web-frame-blocked .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #c9d7ea;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  color: #2e568d;
  text-decoration: none;
}
.web-miniature {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #e9eff8;
  color: #4d6d98;
}
.web-miniature.is-video {
  background: #1c1f26;
  color: #ff5a5f;
}
.web-miniature svg {
  width: 40%;
  height: 40%;
}
.pane-side-controls .web-link-toggle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 26px;
  border: 1px dashed #b9cbe2;
  border-radius: 6px;
  background: #f7faff;
  color: #3e6699;
}
.web-link-popover {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 320px;
  padding: 12px;
  border: 1px solid #cdd9e9;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 32px #1d304d2e;
  font-size: 12px;
  color: #2a4264;
}
.web-link-popover header,
.web-link-popover footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.web-link-popover header button {
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: #6b80a0;
}
.web-link-popover input {
  padding: 8px;
  border: 1px solid #cdd9e9;
  border-radius: 7px;
}
.web-link-popover small {
  color: #6b80a0;
  line-height: 1.4;
}
.web-link-popover p {
  margin: 0;
  color: #b3374d;
}
.web-link-popover footer {
  justify-content: flex-end;
}
.web-link-popover footer button {
  padding: 6px 11px;
  border: 1px solid #cdd9e9;
  border-radius: 7px;
  background: #fff;
  color: #2e568d;
}
.web-link-popover footer .is-primary {
  border-color: #3d69a8;
  background: #3d69a8;
  color: #fff;
}
.web-link-lessons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3e9f2;
}
.web-link-lessons > span,
.web-link-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a8ca5;
}
.web-link-lessons > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  color: #3e6699;
}
.web-link-lessons > div > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: #223349;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.web-link-lessons small {
  color: #7a8ca5;
}
.web-link-lessons button {
  padding: 4px 10px;
  border: 1px solid #3d69a8;
  border-radius: 6px;
  background: #3d69a8;
  color: #fff;
}
.web-link-create {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0 8px;
  padding: 10px 12px;
  border: 1px dashed #9fb6d6;
  border-radius: 9px;
  background: #f4f8fe;
  color: #2f5a96;
  text-align: left;
}
.web-link-create:hover {
  background: #eaf2fd;
  border-style: solid;
}
.web-link-create span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 650;
}
.web-link-create small {
  font-size: 10.5px;
  font-weight: 400;
  color: #7a8ca5;
}

/* src/class-focus.css */
.class-focus-action {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #c7d7ed;
  border-radius: 6px;
  background: #eef4fd;
  color: #315d9e;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.class-focus-banner {
  position: relative;
  z-index: 56;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-top: 9px;
  border: 1px solid #c4d6ef;
  border-radius: 7px;
  background: #edf4ff;
  color: #315888;
  font-size: 11px;
  line-height: 1.5;
}
.class-focus-banner > div {
  flex: 1;
  min-width: 0;
}
.class-focus-banner strong {
  display: block;
}
.class-focus-banner span {
  color: #647c9e;
  font-size: 10px;
}
.class-focus-banner button {
  border: 1px solid #b7cae5;
  border-radius: 5px;
  padding: 6px 9px;
  background: white;
  color: #315888;
  font-size: 11px;
  white-space: nowrap;
}
.class-focus-banner button:disabled {
  opacity: .6;
}
.board-switcher-meta {
  flex-wrap: wrap;
}
.class-focus-banner + div {
  min-height: 0;
}
.class-focus-error {
  font-size: 11px;
  color: #a03b4d;
  margin-top: 7px;
}
.guided-navigation {
  opacity: .55;
}
.class-focus-banner svg {
  flex-shrink: 0;
}
.mmt-workspace:has(.class-focus-banner) .student-sidebar {
  display: none !important;
}
.release-class-dialog {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid #cddbeb;
  border-radius: 18px;
  padding: 24px;
  color: #294260;
  background: white;
  box-shadow: 0 18px 80px #1b35553d;
}
.release-class-dialog::backdrop {
  background: #21385366;
  backdrop-filter: blur(3px);
}
.release-class-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.release-class-dialog h2 {
  margin: 0;
  font-size: 22px;
}
.release-class-dialog header button {
  padding: 6px;
  color: #7188a5;
}
.release-class-dialog p {
  font-size: 13px;
  line-height: 1.6;
  color: #7188a5;
  margin: 12px 0 20px;
}
.release-choice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d4dfed;
  border-radius: 10px;
  padding: 15px;
  text-align: left;
  margin-top: 10px;
  color: #315d9e;
  background: #f8faff;
}
.release-choice:hover {
  border-color: #789ac9;
  background: #edf4ff;
}
.release-choice > svg {
  flex-shrink: 0;
}
.release-choice span {
  flex: 1;
}
.release-choice strong {
  font-size: 13px;
  display: block;
}
.release-choice small {
  display: block;
  font-size: 12px;
  color: #7488a3;
  line-height: 1.5;
  margin-top: 5px;
}
.release-choice:focus-visible {
  outline: 2px solid #4775b7;
  outline-offset: 2px;
}
.release-choice:disabled {
  opacity: .6;
}
.guided-lock-label {
  flex-shrink: 0;
}

/* src/phone-upload-qr.css */
.classroom-window.sharebox-workspace-window > header:has(.classroom-header-actions) {
  grid-template-columns: minmax(max-content, 1fr) minmax(100px, 480px) minmax(max-content, 1fr);
}
.sharebox-workspace-window > header > .classroom-header-actions {
  justify-self: end;
  display: flex;
  gap: 12px;
}
.sharebox-qr-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cfddf0;
  background: #f3f7fe;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
  color: #365e98;
  cursor: pointer;
  white-space: nowrap;
}
.sharebox-qr-trigger:hover {
  background: #e6effd;
  border-color: #7c9dce;
}
.phone-qr-window {
  color: #294260;
}
.phone-qr-window > header {
  justify-content: space-between;
}
.phone-qr-window .classroom-window-content {
  padding: 22px 28px;
}
.phone-qr-intro {
  text-align: center;
}
.phone-qr-intro > span {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #8196b2;
  font-weight: 700;
}
.phone-qr-intro h3 {
  font-size: 21px;
  margin: 8px 0;
}
.phone-qr-intro p,
.phone-qr-note {
  color: #7288a4;
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0;
}
.phone-qr-code {
  background: #fff;
  border: 1px solid #dce5f1;
  border-radius: 16px;
  width: 244px;
  margin: 18px auto;
  box-shadow: 0 5px 24px #274a7d09;
}
.phone-qr-code img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.phone-qr-network {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: #f2f6fc;
  border-radius: 8px;
  font-size: 11px;
  color: #5a789f;
}
.phone-qr-network svg {
  flex-shrink: 0;
}
.phone-qr-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  margin-top: 18px;
}
.phone-qr-status > span {
  color: #28765a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.phone-qr-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #389979;
}
.phone-qr-link {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.phone-qr-link input {
  flex: 1;
  width: 0;
  min-width: 0;
  border: 1px solid #d9e3f1;
  background: #f9fbfe;
  padding: 8px;
  border-radius: 7px;
  font-size: 10px;
  color: #6380a5;
}
.phone-qr-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.phone-qr-actions button {
  font: inherit;
  font-size: 11px;
  color: #6380a5;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone-qr-loading,
.phone-qr-ended {
  padding: 45px 5px;
  text-align: center;
  color: #6f87a9;
}
@media (max-height: 760px) {
  .phone-qr-code {
    width: 204px;
    margin: 12px auto;
  }
  .phone-qr-window .classroom-window-content {
    padding: 14px 28px;
  }
  .phone-qr-status,
  .phone-qr-actions {
    margin-top: 12px;
  }
}
@media (max-width: 640px) {
  .sharebox-qr-trigger span {
    display: none;
  }
  .sharebox-qr-trigger {
    padding: 8px;
  }
  .sharebox-workspace-window > header > .classroom-header-actions {
    gap: 5px;
  }
}

/* src/classroom-sharebox.css */
.classroom-window.sharebox-workspace-window {
  width: min(1240px, calc(100vw - 40px));
  height: min(850px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
}
.sharebox-workspace-window > header {
  padding: 14px 20px;
}
.sharebox-workspace-window .classroom-window-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: 0;
}
.sharebox-workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 168px minmax(240px, 1fr) minmax(350px, 1.15fr);
}
.sharebox-workspace button,
.sharebox-workspace input {
  font: inherit;
}
.sharebox-workspace button {
  cursor: pointer;
}
.sharebox-workspace button:disabled {
  cursor: default;
}
.sharebox-workspace input[type=checkbox],
.sharebox-workspace input[type=radio] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2b59a0;
  flex-shrink: 0;
}
.sharebox-workspace h3 {
  font-size: 14px;
  margin: 0;
  letter-spacing: -.2px;
}
.sharebox-sidebar {
  padding: 23px 12px 16px;
  background: #f7f9fd;
  border-right: 1px solid #e3eaf3;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
  overflow: auto;
}
.sharebox-sidebar-intro {
  padding: 0 5px;
}
.sharebox-eyebrow {
  font-size: 9px;
  letter-spacing: 1.1px;
  font-weight: 700;
  color: #8294ac;
}
.sharebox-sidebar-intro h3 {
  font-size: 17px;
  margin: 9px 0 7px;
}
.sharebox-sidebar-intro p {
  color: #7b8ca3;
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}
.sharebox-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sharebox-sidebar nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 8px;
  background: transparent;
  color: #647a98;
  font-size: 11px;
  text-align: left;
}
.sharebox-sidebar nav button span {
  flex: 1;
}
.sharebox-sidebar nav button b {
  font-size: 10px;
  font-weight: 500;
  color: #8c9db2;
}
.sharebox-sidebar nav button:hover {
  background: #eef3fa;
}
.sharebox-sidebar nav button[aria-pressed=true] {
  background: #e7effc;
  border-color: #d3e1f7;
  color: #2b58a0;
  font-weight: 600;
}
.sharebox-sidebar nav button[aria-pressed=true] b {
  color: #2b58a0;
}
.sharebox-filter-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #506f97;
}
.sharebox-filter-heading h3 {
  flex: 1;
}
.sharebox-filter-heading button {
  border: 0;
  background: none;
  padding: 2px;
  font-size: 10px;
  color: #456eaa;
}
.sharebox-filter-heading button:disabled {
  opacity: .4;
}
.sharebox-quick-filters {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sharebox-quick-filters legend {
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #8294ac;
  margin-bottom: 15px;
}
.sharebox-quick-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  color: #6d819f;
}
.sharebox-quick-filters select {
  width: 100%;
  min-width: 0;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  background: #fff;
  padding: 8px 5px;
  font: inherit;
  color: #3e5a7e;
}
.sharebox-quick-filters .sharebox-recent-filter {
  flex-direction: row;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.sharebox-prompt-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  background: #f7faff;
  border: 1px solid #cddcf0;
  border-radius: 11px;
  color: #6482a8;
}
.sharebox-prompt-input:focus-within {
  border-color: #6e96cb;
  box-shadow: 0 0 0 3px #eaf1fc;
}
.sharebox-prompt-input.listening {
  border-color: #d18484;
  background: #fff8f8;
}
.sharebox-prompt-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 13px;
  background: transparent;
  color: #294666;
}
.sharebox-prompt-input button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: none;
  color: #587ba8;
  padding: 5px;
  cursor: pointer;
}
.sharebox-prompt-input .sharebox-voice-button {
  border-left: 1px solid #dce5f1;
  padding-left: 10px;
  font-size: 11px;
}
.sharebox-search-hint {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 3px 0;
  font-size: 10px;
  color: #7e90a7;
  line-height: 1.4;
}
.sharebox-query-filters {
  color: #3565a3;
  flex-shrink: 0;
}
.sharebox-sidebar-note {
  margin: auto 5px 0;
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: #8595ab;
  line-height: 1.6;
}
.sharebox-sidebar-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.sharebox-files {
  min-width: 0;
  min-height: 0;
  padding: 22px 18px 0;
  display: flex;
  flex-direction: column;
}
.sharebox-files > header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sharebox-files > header span {
  font-size: 10px;
  color: #8194ae;
}
.sharebox-files > header p {
  font-size: 11px;
  color: #7d8da4;
  line-height: 1.5;
  margin: 7px 0 17px;
}
.sharebox-files .class-sharebox-selection {
  flex: 0 0 auto;
  margin: 12px 0;
  font-size: 10px;
}
.sharebox-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding: 2px 3px 16px;
  overscroll-behavior: contain;
}
.sharebox-file-card {
  align-self: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  background: #fff;
}
.sharebox-file-card.selected {
  border-color: #5a84be;
  background: #f5f8ff;
  box-shadow: 0 0 0 1px #5a84be;
}
.sharebox-file-card:hover {
  border-color: #8cadd8;
}
.sharebox-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 9px 10px;
  border-bottom: 1px solid #e9eef5;
}
.sharebox-card-top span {
  font-size: 9px;
  color: #758ba8;
  display: flex;
  gap: 3px;
  align-items: center;
  white-space: nowrap;
}
.sharebox-file-preview {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}
.sharebox-file-preview > div {
  height: 115px;
  background: #f2f5fa;
  padding: 9px;
  position: relative;
}
.sharebox-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sharebox-file-preview > div > span {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  color: #426b9f;
  padding: 4px 5px;
  border: 1px solid #d6e3f4;
  background: #fffffff2;
  border-radius: 4px;
}
.sharebox-file-preview h4 {
  margin: 10px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  height: 32px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sharebox-file-preview p {
  font-size: 9px;
  color: #8999ad;
  margin: 0 10px 12px;
}
.sharebox-selection-total {
  flex-shrink: 0;
  margin: 0 -18px;
  padding: 14px 19px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e3eaf3;
  color: #486b99;
  font-size: 11px;
  background: #fcfdff;
}
.sharebox-selection-total strong {
  flex: 1;
  font-weight: 600;
}
.sharebox-selection-total span {
  font-size: 10px;
  color: #8194ae;
}
.sharebox-review {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 16px;
  border-left: 1px solid #e0e8f2;
  background: #fafcff;
  overflow: auto;
}
.sharebox-live-preview {
  min-height: 290px;
  flex: 1 1 350px;
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  outline: none;
}
.sharebox-live-preview:focus-visible {
  outline: 2px solid #8cacd8;
  outline-offset: 4px;
}
.sharebox-live-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.sharebox-live-preview h3 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sharebox-live-preview h3 svg {
  color: #5c7da9;
}
.sharebox-preview-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid #dce5f1;
  border-radius: 5px;
  font-size: 9px !important;
  background: #edf1f7;
  color: #657c9a;
}
.sharebox-preview-badge.selected {
  background: #e7f3ed;
  color: #428267;
}
.sharebox-file-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 5px 7px;
  background: #eef3fb;
  border: 1px solid #dce6f4;
  border-radius: 8px;
}
.sharebox-file-navigation > span {
  flex: 1;
  text-align: center;
  color: #52739f;
  font-size: 11px;
}
.sharebox-file-navigation small {
  margin-left: 8px;
  color: #7c90ac;
  font-size: 9px;
}
.sharebox-file-navigation button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 25px;
  padding: 0;
  border: 1px solid #d6e1f1;
  background: white;
  color: #3a659d;
  border-radius: 5px;
}
.sharebox-file-navigation button:disabled {
  background: transparent;
  border-color: transparent;
  opacity: .3;
}
.sharebox-workspace button:focus-visible {
  outline: 2px solid #6795d0;
  outline-offset: 2px;
}
.sharebox-selected-strip {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: thin;
}
.sharebox-selected-strip button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 148px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #dce5f1;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fff;
  color: #7185a1;
  font-size: 10px;
}
.sharebox-selected-strip button[aria-pressed=true] {
  border-color: #9bb7de;
  background: #edf4ff;
  color: #2e5b9b;
}
.sharebox-selected-strip button span {
  border-radius: 4px;
  padding: 2px 4px;
  background: #eaf0f8;
  font-size: 9px;
}
.sharebox-preview-title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #dce5ef;
  border-bottom: 0;
  background: #fff;
  border-radius: 9px 9px 0 0;
}
.sharebox-preview-title > strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.sharebox-preview-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.sharebox-preview-pages button {
  background: none;
  border: 0;
  color: #56769d;
  padding: 3px 0;
  display: flex;
}
.sharebox-preview-pages button:disabled {
  color: #c4cede;
}
.sharebox-preview-pages span {
  font-size: 9px;
  color: #7b8faa;
  white-space: nowrap;
}
.sharebox-live-page {
  flex: 1;
  min-height: 100px;
  position: relative;
  border: 1px solid #dce5ef;
  border-radius: 0 0 9px 9px;
  background: #edf1f7;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sharebox-live-page > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px #213e5e16);
}
.sharebox-preview-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #7c8faa;
}
.sharebox-preview-blank {
  flex-direction: column;
  color: #8e9fb5;
  font-size: 12px;
  border-radius: 9px;
}
.sharebox-destinations {
  border: 0;
  min-width: 0;
  padding: 0;
  margin: 18px 0 0;
  flex: 0 0 auto;
}
.sharebox-destinations legend {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}
.sharebox-destination-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 10px;
}
.sharebox-destination-heading p {
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
  color: #7e91ab;
}
.sharebox-destination-heading label {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #5b7ca5;
  cursor: pointer;
}
.sharebox-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 160px;
  overflow-y: auto;
  padding: 2px;
}
.sharebox-target {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  background: white;
  padding: 10px 9px;
  text-align: left;
  color: #506d95;
  min-width: 0;
}
.sharebox-target.selected {
  border-color: #7199ce;
  background: #edf4ff;
}
.sharebox-target:hover {
  border-color: #8caed9;
}
.sharebox-target-avatar {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eaf0f9;
  color: #6986af;
  font-size: 12px;
}
.sharebox-target > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sharebox-target strong {
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sharebox-target small {
  font-size: 9px;
  color: #8294af;
  line-height: 1.4;
}
.sharebox-target > svg {
  flex-shrink: 0;
  color: #2e5f9f;
}
.sharebox-send-area {
  flex: 0 0 auto;
  padding-top: 15px;
  margin-top: 14px;
  border-top: 1px solid #e0e7f1;
}
.sharebox-delivery-summary {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.sharebox-delivery-summary strong {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sharebox-delivery-summary small {
  font-size: 10px;
  color: #8294ad;
}
.sharebox-send-area > .button {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  min-height: 39px;
}
.sharebox-send-area .class-sharebox-sent {
  margin: 0 0 12px;
}
.sharebox-send-area .classroom-window-error,
.sharebox-send-area .classroom-window-notice {
  font-size: 11px;
  line-height: 1.5;
  margin: 0 0 8px;
}
@media (max-width: 1100px) {
  .sharebox-workspace {
    grid-template-columns: 150px minmax(230px, 1fr) minmax(330px, 1.15fr);
  }
  .sharebox-files {
    padding: 18px 14px 0;
  }
  .sharebox-selection-total {
    margin: 0 -14px;
    padding: 14px;
  }
  .sharebox-review {
    padding: 18px 14px 14px;
  }
  .sharebox-file-grid {
    gap: 10px;
  }
}
@media (max-width: 800px) {
  .classroom-window.sharebox-workspace-window {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .sharebox-workspace {
    grid-template-columns: 126px minmax(185px, 1fr) minmax(280px, 1.2fr);
  }
  .sharebox-sidebar {
    padding: 18px 8px 12px;
    gap: 18px;
  }
  .sharebox-sidebar-intro p,
  .sharebox-sidebar-note {
    display: none;
  }
  .sharebox-sidebar nav button {
    padding: 8px 5px;
    font-size: 10px;
    gap: 5px;
  }
  .sharebox-files {
    padding: 16px 10px 0;
  }
  .sharebox-file-grid {
    grid-template-columns: 1fr;
  }
  .sharebox-selection-total {
    margin: 0 -10px;
    padding: 12px 10px;
    font-size: 10px;
  }
  .sharebox-review {
    padding: 16px 10px 12px;
  }
  .sharebox-target {
    padding: 8px 6px;
    gap: 5px;
  }
  .sharebox-target-avatar {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 640px) {
  .sharebox-workspace-window .classroom-window-content {
    overflow: auto;
    display: block;
  }
  .sharebox-workspace {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .sharebox-sidebar {
    grid-row: 1;
  }
  .sharebox-files {
    height: 400px;
  }
  .sharebox-review {
    grid-column: 1/-1;
    border-left: 0;
    border-top: 1px solid #e0e8f2;
    overflow: visible;
  }
  .sharebox-live-preview {
    height: 350px;
    flex: none;
  }
  .sharebox-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sharebox-file-preview > div {
    height: 90px;
  }
  .sharebox-files > header p {
    font-size: 10px;
  }
  .sharebox-sidebar-intro h3 {
    font-size: 14px;
  }
  .sharebox-search-hint {
    flex-direction: column;
    gap: 3px;
  }
}
.classroom-window.sharebox-workspace-window > header {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(160px, 480px) minmax(32px, 1fr);
  gap: 16px;
  padding: 12px 20px;
}
.sharebox-workspace-window > header h2 {
  font-size: 17px;
}
.sharebox-workspace-window > header > .icon-button {
  justify-self: end;
}
.sharebox-prompt-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #dbe5f3;
  border-radius: 9px;
  background: #f5f8fd;
  color: #6581a5;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.sharebox-prompt-trigger > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sharebox-prompt-trigger svg {
  flex-shrink: 0;
}
.sharebox-prompt-trigger small {
  font-size: 9px;
  white-space: nowrap;
  color: #426a9f;
  background: #e7effb;
  padding: 3px 6px;
  border-radius: 4px;
}
.sharebox-prompt-trigger:hover,
.sharebox-prompt-trigger[aria-expanded=true] {
  background: #edf4ff;
  border-color: #a8c1e4;
}
.sharebox-prompt-trigger[aria-expanded=true] > svg:last-child {
  transform: rotate(180deg);
}
.sharebox-expanded-prompt {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: #fff;
}
.sharebox-expanded-prompt button,
.sharebox-expanded-prompt textarea {
  font-family: inherit;
}
.sharebox-expanded-prompt button {
  cursor: pointer;
}
.sharebox-expanded-prompt button:disabled {
  cursor: default;
}
.sharebox-expanded-prompt input[type=checkbox] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2b59a0;
  flex-shrink: 0;
}
.sharebox-expanded-prompt h3 {
  margin: 0;
  font-size: 14px;
}
.sharebox-compose {
  flex-shrink: 0;
  padding: 18px 24px 15px;
  border-bottom: 1px solid #dfe8f4;
  background:
    linear-gradient(
      130deg,
      #f8fbff,
      #fff 70%);
}
.sharebox-compose-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.sharebox-compose-heading h3 {
  font-size: 19px;
  letter-spacing: -.4px;
}
.sharebox-compose-heading p {
  font-size: 11px;
  color: #788eab;
  margin: 5px 0 0;
}
.sharebox-back-to-browse {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #577ba9;
  border: 0;
  background: transparent;
  flex-shrink: 0;
  padding: 6px 0;
}
.sharebox-compose .sharebox-prompt-input {
  margin-top: 15px;
  padding: 15px;
  align-items: flex-start;
  background: white;
  border-color: #b8cdeb;
  box-shadow: 0 5px 20px #284c7e08;
  border-radius: 13px;
}
.sharebox-compose .sharebox-prompt-input > svg {
  margin-top: 5px;
  flex-shrink: 0;
}
.sharebox-compose textarea {
  resize: none;
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none !important;
  background: transparent;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.45;
  color: #294666;
  padding: 0;
}
.sharebox-compose textarea::placeholder {
  color: #9aabc1;
}
.sharebox-compose-actions {
  display: flex;
  align-items: center;
  align-self: flex-end;
  gap: 5px;
}
.sharebox-compose .sharebox-find-button {
  background: #2c58a0;
  color: #fff;
  padding: 7px;
  border-radius: 8px;
}
.sharebox-compose .sharebox-find-button:disabled {
  opacity: .4;
}
.sharebox-compose .sharebox-voice-button {
  border: 0;
}
.sharebox-prompt-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.sharebox-prompt-shortcuts button {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #dfe7f2;
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 10px;
  background: #fff;
  color: #5b779c;
}
.sharebox-prompt-shortcuts button:hover {
  border-color: #8daed9;
  background: #f2f7ff;
}
.sharebox-prompt-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr);
  flex: 1;
  min-height: 0;
}
.sharebox-suggestions {
  min-height: 0;
  min-width: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.sharebox-suggestions > header {
  flex-shrink: 0;
}
.sharebox-suggestions > header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sharebox-suggestions > header span {
  font-size: 10px;
  color: #8194ae;
}
.sharebox-suggestions > header p {
  color: #8293ad;
  font-size: 10px;
  line-height: 1.6;
  margin: 8px 0 15px;
}
.sharebox-suggestions kbd {
  font: inherit;
}
.sharebox-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px;
  grid-auto-rows: max-content;
  align-content: start;
  overscroll-behavior: contain;
}
.sharebox-suggestion {
  min-width: 0;
  padding: 0;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  overflow: hidden;
  color: #2f486a;
}
.sharebox-suggestion:hover {
  border-color: #8cadd8;
}
.sharebox-suggestion.selected {
  background: #f1f6ff;
  border-color: #638dca;
  box-shadow: 0 0 0 1px #638dca;
}
.sharebox-suggestion-image {
  height: 112px;
  padding: 12px;
  position: relative;
  background: #f2f5fa;
  border-bottom: 1px solid #e4eaf3;
}
.sharebox-suggestion-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sharebox-suggestion-check {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #ccd9ec;
  border-radius: 5px;
  background: #fff;
  color: #fff;
}
.sharebox-suggestion.selected .sharebox-suggestion-check {
  border-color: #2c59a0;
  background: #2c59a0;
}
.sharebox-suggestion > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  height: 31px;
  margin: 10px 10px 5px;
}
.sharebox-suggestion > small {
  display: block;
  font-size: 9px;
  color: #8195b1;
  margin: 0 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sharebox-suggestion-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  flex-shrink: 0;
}
.sharebox-suggestion-footer button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #3e6aa6;
  background: none;
  border: 0;
  padding: 4px 0;
}
.sharebox-suggestion-footer > span {
  color: #8396b1;
  font-size: 10px;
}
.sharebox-quick-review {
  padding: 18px 20px 16px;
}
.sharebox-quick-review .sharebox-live-preview {
  min-height: 210px;
  flex: 1 1 260px;
}
.sharebox-quick-review .sharebox-live-page {
  min-height: 90px;
}
.sharebox-quick-review .sharebox-live-preview > header {
  margin-bottom: 8px;
}
.sharebox-quick-review .sharebox-destinations {
  margin-top: 14px;
}
.sharebox-quick-review .sharebox-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 90px;
}
.sharebox-quick-review .sharebox-target {
  padding: 6px 8px;
  gap: 5px;
  flex: 0 0 auto;
}
.sharebox-quick-review .sharebox-target small {
  display: none;
}
.sharebox-quick-review .sharebox-target-avatar {
  width: 21px;
  height: 21px;
  font-size: 10px;
}
.sharebox-quick-review .sharebox-target-avatar svg {
  width: 14px;
}
.sharebox-quick-review .sharebox-target strong {
  font-size: 10px;
}
.sharebox-quick-review .sharebox-send-area {
  padding-top: 12px;
  margin-top: 12px;
}
@media (max-width: 800px) {
  .classroom-window.sharebox-workspace-window > header {
    gap: 12px;
    padding: 12px;
    grid-template-columns: minmax(max-content, 1fr) minmax(140px, 400px) 1fr;
  }
  .sharebox-compose {
    padding: 16px;
  }
  .sharebox-compose textarea {
    font-size: 17px;
  }
  .sharebox-prompt-results {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  }
  .sharebox-suggestions,
  .sharebox-quick-review {
    padding: 15px 12px;
  }
  .sharebox-suggestion-image {
    height: 90px;
  }
  .sharebox-compose-actions .sharebox-voice-button span {
    display: none;
  }
}
@media (max-width: 640px) {
  .classroom-window.sharebox-workspace-window > header {
    grid-template-columns: auto minmax(0, 1fr) 32px;
    gap: 10px;
  }
  .sharebox-workspace-window > header h2 {
    font-size: 14px;
  }
  .sharebox-workspace-window > header > div {
    gap: 5px;
  }
  .sharebox-prompt-trigger {
    font-size: 11px;
    padding: 8px;
    gap: 5px;
  }
  .sharebox-prompt-trigger small {
    display: none;
  }
  .sharebox-compose-heading {
    align-items: flex-start;
  }
  .sharebox-compose-heading h3 {
    font-size: 17px;
  }
  .sharebox-compose-heading p {
    line-height: 1.5;
  }
  .sharebox-compose .sharebox-prompt-input {
    padding: 10px;
    gap: 6px;
  }
  .sharebox-compose .sharebox-prompt-input > svg {
    display: none;
  }
  .sharebox-compose-actions {
    flex-direction: column;
  }
  .sharebox-compose .sharebox-voice-button {
    padding: 4px;
  }
  .sharebox-prompt-results {
    grid-template-columns: minmax(0, 1fr);
  }
  .sharebox-suggestion-grid {
    overflow: visible;
  }
  .sharebox-suggestion-image {
    height: 80px;
  }
  .sharebox-quick-review .sharebox-live-preview {
    height: 340px;
    flex: none;
  }
}
.sharebox-toggle.has-new {
  border-color: #4c8f6f;
  background: #eefaf3;
  color: #1d6a48;
  animation: sharebox-glow 1.8s ease-in-out infinite;
}
.sharebox-new-count {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #1f9d6b;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
@keyframes sharebox-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 #1f9d6b00;
  }
  50% {
    box-shadow: 0 0 0 5px #1f9d6b38, 0 0 16px 2px #1f9d6b55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sharebox-toggle.has-new {
    animation: none;
    box-shadow: 0 0 0 3px #1f9d6b38;
  }
}
.sharebox-notice {
  position: fixed;
  top: 64px;
  right: 18px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid #b7dcc8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px #1d304d2e;
  color: #1d6a48;
}
.sharebox-notice > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sharebox-notice strong {
  font-size: 13px;
  color: #1b2f4c;
}
.sharebox-notice small {
  overflow: hidden;
  font-size: 12px;
  color: #5b7393;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sharebox-notice .button {
  flex: none;
  padding: 6px 10px;
}
.sharebox-workspace-window.is-dropping .classroom-window-content {
  outline: 3px dashed #1f9d6b;
  outline-offset: -10px;
  background: #f3fbf7;
}
.sharebox-uploading {
  font-size: 12px;
  color: #1d6a48;
}

/* src/classroom-tools.css */
.classroom-tools {
  position: relative;
  display: flex;
  align-items: center;
}
.classroom-tools-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: #4a6185;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
}
.classroom-tools-trigger:hover,
.classroom-tools-trigger.is-open {
  border-color: #8da9d0;
  background: #f1f6fe;
  color: #2f5a96;
}
.classroom-tools-trigger svg:last-child {
  opacity: .7;
}
.classroom-tools-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 140;
  min-width: 230px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 9px;
  box-shadow: 0 12px 34px #1b2c4524;
  padding: 6px;
}
.classroom-tools-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-radius: 6px;
  padding: 9px 10px;
  color: #3e5a85;
}
.classroom-tools-menu button:hover {
  background: #f1f6fe;
}
.classroom-tools-menu button > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.classroom-tools-menu strong {
  font-size: 12px;
  font-weight: 600;
  color: #293a52;
}
.classroom-tools-menu small {
  font-size: 10px;
  color: #8594a8;
}
.gemini-search {
  position: fixed;
  left: 96px;
  bottom: 44px;
  z-index: 150;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  box-shadow: 0 18px 50px #17243733;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #293a52;
}
.gemini-search header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gemini-search header > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}
.gemini-search header svg {
  color: #5b7fc0;
}
.gemini-search form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gemini-search textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #293a52;
}
.gemini-search textarea:focus {
  outline: 2px solid #8da9d0;
  outline-offset: 0;
  border-color: transparent;
}
.gemini-search form .button {
  align-self: flex-end;
}
.gemini-hint,
.gemini-status {
  font-size: 11px;
  line-height: 1.5;
  color: #8594a8;
  margin: 0;
}
.gemini-status {
  color: #3e6a4f;
  background: #eef7f1;
  border-radius: 6px;
  padding: 7px 9px;
}
.gemini-status a {
  color: #2f5a96;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gemini-recent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #eef1f5;
  padding-top: 8px;
}
.gemini-recent > span {
  font-size: 10px;
  font-weight: 600;
  color: #97a3b3;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.gemini-recent button {
  text-align: left;
  font-size: 11px;
  color: #4a6185;
  padding: 5px 6px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gemini-recent button:hover {
  background: #f1f6fe;
}
@media (max-width: 700px) {
  .gemini-search {
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* src/sharebox.css */
.sharebox-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.sharebox-tabs > button {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #8190a5;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
}
.sharebox-tabs > button[aria-selected=true] {
  background: #f2f7ff;
  color: #315e9c;
  border-color: #315e9c;
}
.sharebox-tabs b {
  font-size: 10px;
  font-weight: 500;
  background: #e5edf8;
  padding: 2px 6px;
  border-radius: 5px;
}
.sharebox-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
}
.sharebox-intro h3,
.extension-hero h3 {
  font-size: 24px;
  letter-spacing: -.7px;
  margin: 8px 0;
  color: #263d5c;
  font-weight: 600;
}
.sharebox-intro p,
.extension-hero p {
  font-size: 12px;
  line-height: 1.65;
  color: #7b8da6;
  max-width: 500px;
}
.sharebox-intro > .button {
  white-space: nowrap;
  font-size: 11px;
}
.sharebox-controls {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  background: #f6f8fc;
  border: 1px solid #e4eaf2;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 17px;
}
.sharebox-search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #91a0b4;
  flex: 1;
}
.sharebox-search input {
  border: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  outline: 0;
  font-size: 11px;
}
.sharebox-board {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 10px;
  color: #6a809f;
}
.sharebox-board select {
  font-size: 10px;
  border: 1px solid #dae3ef;
  border-radius: 5px;
  padding: 7px;
  background: #fff;
  max-width: 210px;
}
.sharebox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  max-height: 49vh;
  overflow: auto;
  padding: 2px;
}
.stored-image {
  border: 1px solid #e0e7f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.stored-image-preview {
  height: 160px;
  background: #edf2f8;
  position: relative;
  overflow: hidden;
  padding: 10px;
}
.stored-image-preview img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.stored-image-preview > span {
  position: absolute;
  left: 10px;
  bottom: 9px;
  background: #ffffffed;
  color: #617b9c;
  border: 1px solid #dbe5ef;
  border-radius: 4px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
}
.stored-image-copy {
  padding: 13px;
}
.stored-image h4 {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #344d6e;
}
.stored-image p {
  font-size: 10px;
  color: #8496ac;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.stored-image p i {
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background: #b6c2d2;
}
.stored-image-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
}
.stored-image-tags > span {
  padding: 3px 5px;
  background: #eff4fb;
  border-radius: 4px;
  color: #6280a6;
}
.stored-image-tags small {
  color: #9bacc0;
  font-size: 8px;
}
.stored-image-tags a {
  color: #5479ac;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.stored-image-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}
.stored-image-actions .button {
  font-size: 10px;
  padding: 8px 10px;
  justify-content: center;
}
.share-image {
  font-size: 10px;
  color: #6686b0;
}
.sharebox-empty {
  min-height: 280px;
  border: 1px dashed #cfdbea;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: #fafcff;
  text-align: center;
  padding: 30px;
}
.sharebox-empty > div {
  background: #e9f1fd;
  padding: 18px;
  border-radius: 16px;
  color: #6485b3;
}
.sharebox-empty h4 {
  font-size: 18px;
  color: #425f84;
  font-weight: 500;
}
.sharebox-empty p {
  font-size: 12px;
  color: #8b9bb0;
  max-width: 360px;
  line-height: 1.7;
}
.sharebox-empty .button {
  font-size: 11px;
}
.sharebox-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  gap: 12px;
  color: #95a6bc;
  font-size: 10px;
}
.sharebox-bottom > span,
.sharebox-bottom button {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sharebox-bottom button {
  font-size: 10px;
  color: #5479ad;
}
.sharebox-notice {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #39815d;
  background: #eff8f1;
  padding: 12px;
  border-radius: 7px;
  margin-top: 16px;
}
.extension-hero {
  display: flex;
  gap: 19px;
  align-items: center;
}
.extension-logo {
  height: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2c5797;
  color: #fff;
  border-radius: 16px;
  flex-shrink: 0;
}
.capture-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 22px 12px;
  margin: 22px 0;
  background: #f4f8fe;
  border: 1px solid #dfE8f4;
  border-radius: 9px;
  color: #8fa4c1;
  font-size: 11px;
}
.capture-flow > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5575a2;
}
.setup-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.setup-columns > section {
  position: relative;
  border: 1px solid #dfe7f1;
  border-radius: 9px;
  padding: 20px;
}
.setup-number {
  display: inline-flex;
  width: 22px;
  height: 22px;
  justify-content: center;
  align-items: center;
  background: #e9f0fa;
  border-radius: 50%;
  color: #5479a8;
  font-size: 11px;
  margin-bottom: 10px;
}
.setup-columns h4 {
  font-size: 14px;
  color: #3c577b;
}
.setup-columns p {
  font-size: 11px;
  line-height: 1.8;
  color: #8a9bb0;
  margin: 11px 0 18px;
}
.setup-columns .button {
  font-size: 11px;
  padding: 9px 12px;
}
.setup-preview {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  color: #6e8ab2;
  font-size: 11px;
}
.invite-person {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: #8197b3;
  margin-bottom: 13px;
}
.invite-person select {
  border: 1px solid #d6e1ef;
  border-radius: 5px;
  padding: 6px 10px;
  background: #fff;
  font-size: 11px;
}
.connection-code {
  display: grid;
  grid-template-columns: 1fr auto;
  background: #f6f9ff;
  border: 1px solid #dbe7f5;
  border-radius: 7px;
  padding: 12px;
  margin-top: 16px;
  gap: 8px;
  color: #5a7da9;
}
.connection-code label {
  font-size: 10px;
}
.connection-code input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 16px;
  letter-spacing: 1px;
  color: #254d85;
  padding: 9px 0 3px;
  font-family: monospace;
}
.connection-code small {
  font-size: 9px;
  grid-column: 1/-1;
  color: #8a9fba;
}
.connection-code .copy-invite {
  grid-column: 1/-1;
  text-align: left;
  font-size: 10px;
  color: #4e77ad;
  padding: 5px 0;
}
.capture-connections {
  margin-top: 20px;
}
.capture-connections h4 {
  font-size: 12px;
  color: #4d6b91;
  margin-bottom: 10px;
}
.capture-connections > div {
  border-top: 1px solid #e5ebf3;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #567498;
}
.capture-connections span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.capture-connections i {
  width: 5px;
  height: 5px;
  background: #56a278;
  border-radius: 50%;
}
.capture-connections small {
  font-size: 9px;
  color: #98aac0;
}
.capture-connections button {
  font-size: 10px;
  color: #8b7690;
}
.extension-local-note {
  color: #9aabc0;
  font-size: 10px;
  line-height: 1.7;
  margin-top: 20px;
}
@media (max-width: 850px) {
  .sharebox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sharebox-intro {
    align-items: flex-start;
    gap: 15px;
  }
  .sharebox-intro h3,
  .extension-hero h3 {
    font-size: 20px;
  }
  .sharebox-controls {
    flex-wrap: wrap;
  }
  .sharebox-bottom {
    flex-wrap: wrap;
  }
  .sharebox-intro > .button {
    font-size: 10px;
  }
}
@media (max-width: 600px) {
  .sharebox-tabs {
    gap: 0;
  }
  .sharebox-tabs > button {
    font-size: 10px;
    padding: 9px 7px;
    gap: 5px;
  }
  .sharebox-tabs svg {
    width: 13px;
  }
  .sharebox-intro {
    flex-direction: column;
  }
  .sharebox-grid {
    grid-template-columns: 1fr;
    max-height: 45vh;
  }
  .stored-image-preview {
    height: 180px;
  }
  .sharebox-board {
    width: 100%;
  }
  .setup-columns {
    grid-template-columns: 1fr;
  }
  .capture-flow {
    gap: 7px;
    font-size: 9px;
  }
  .capture-flow > span {
    gap: 4px;
  }
  .capture-flow svg {
    width: 12px;
  }
  .extension-hero {
    align-items: flex-start;
  }
  .extension-logo {
    height: 45px;
    width: 45px;
  }
  .sharebox-empty {
    min-height: 220px;
  }
}
.sharebox-nav b {
  font-size: 9px;
  background: #e4edf9;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
}
.sharebox-nav {
  color: #2f609e;
  background: #f4f8fe;
}
.package-review {
  font-size: 11px;
  color: #416ca7;
  text-align: left;
}
.package-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #6a84a7;
  font-size: 10px;
  padding: 4px;
}
.package-pages {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.package-pages li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border-top: 1px solid #e5ecf6;
  padding-top: 12px;
}
.package-pages img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  background: #f1f5fb;
  border-radius: 5px;
}
.package-pages strong {
  font-size: 10px;
  color: #526d92;
  font-weight: 500;
}
.package-pages small {
  font-size: 9px;
  color: #8da1bd;
}
.package-pages a {
  font-size: 9px;
  display: flex;
  align-items: center;
  color: #567cae;
}
.stored-image:has(.package-pages) {
  grid-row: span 2;
}
.sharebox-grid {
  align-items: start;
}

/* src/material-library.css */
.lib-app {
  --lib-blue:#2c54a0;
  --lib-ink:#20334e;
  --lib-muted:#7c8ba0;
  --lib-line:#e4e9f0;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  grid-template-rows: 76px minmax(0, 1fr);
  color: var(--lib-ink);
  background: #f8f9fc;
  font:
    13px/1.5 Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow: hidden;
}
.lib-app.has-preview {
  grid-template-columns: 214px minmax(0, 1fr) 348px;
}
.lib-app button,
.lib-app input,
.lib-app select,
.lib-app textarea {
  font: inherit;
}
.lib-app button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.lib-app button:focus-visible,
.lib-app a:focus-visible,
.lib-app input:focus-visible,
.lib-app select:focus-visible,
.lib-app textarea:focus-visible {
  outline: 2px solid #6797da;
  outline-offset: 3px;
}
.lib-app button {
  cursor: pointer;
}
.lib-app h1,
.lib-app h2,
.lib-app h3,
.lib-app p {
  margin: 0;
}
.lib-app a {
  color: var(--lib-blue);
  text-decoration: none;
}
.lib-app svg {
  flex-shrink: 0;
}
.lib-topbar {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--lib-line);
  z-index: 2;
}
.lib-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 166px;
  flex-shrink: 0;
  text-align: left;
}
.lib-brand > span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -1px;
  background: var(--lib-blue);
  color: white;
  border-radius: 11px;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
}
.lib-brand b {
  font-size: 20px;
  letter-spacing: -.6px;
  font-weight: 650;
}
.lib-search {
  max-width: 620px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f2f5fa;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 14px;
  color: #7b8da7;
  min-width: 150px;
}
.lib-search:focus-within {
  background: #fff;
  border-color: #a8bcdd;
}
.lib-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  outline: 0;
  color: var(--lib-ink);
  font-size: 12px;
}
.lib-search input::placeholder {
  color: #8d9aad;
}
.lib-search button {
  display: flex;
}
.lib-classroom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
  margin-left: auto;
  color: #556b89;
}
.lib-role {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #93a0b2;
  font-size: 9px;
  flex-shrink: 0;
}
.lib-role select {
  border: 0;
  background: #fff;
  font-size: 12px;
  color: #334e73;
  min-width: 68px;
  cursor: pointer;
}
.lib-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8edf7;
  color: #5371a0;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.lib-sidebar {
  border-right: 1px solid var(--lib-line);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 27px 15px 20px;
  gap: 12px;
}
.lib-side-label {
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: 650;
  color: #99a4b5;
  margin: 0 11px 2px;
}
.lib-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 23px;
}
.lib-sidebar nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  text-align: left;
  border-radius: 7px;
  color: #75849a;
  font-size: 12px;
  min-width: 0;
}
.lib-sidebar nav button span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-sidebar nav button small {
  font-size: 10px;
  color: #8d9bb0;
}
.lib-sidebar nav button.active {
  background: #eaf0fc;
  color: #285199;
  font-weight: 600;
}
.lib-sidebar nav button.active small {
  background: #dfe8fa;
  border-radius: 4px;
  padding: 1px 5px;
  color: #456eaf;
}
.lib-sidebar nav button:hover {
  background: #f2f5fa;
}
.lib-sidebar .star-active {
  color: #b38742 !important;
  background: #fff8e8;
}
.lib-sidebar .lib-folder-nav {
  gap: 2px;
}
.lib-sidebar .lib-folder-nav button {
  font-size: 10px;
  padding: 8px 11px;
  gap: 9px;
}
.lib-folder-nav .chosen {
  color: #315b9e;
  background: #f3f6fb;
}
.lib-sidebar-bottom {
  margin-top: auto;
  padding: 18px 10px 0;
  border-top: 1px solid var(--lib-line);
}
.lib-collection-icon {
  color: #8ea4c8;
  margin-bottom: 11px;
}
.lib-sidebar-bottom strong {
  font-size: 11px;
  font-weight: 600;
}
.lib-sidebar-bottom p {
  font-size: 10px;
  line-height: 1.8;
  color: #96a1b1;
  margin: 5px 0 20px;
}
.lib-sidebar-bottom small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #8b9b91;
}
.lib-sidebar-bottom small span {
  width: 5px;
  height: 5px;
  background: #64a285;
  border-radius: 50%;
}
.lib-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fbfcfe;
}
.lib-heading {
  padding: 22px 28px 0;
  flex-shrink: 0;
}
.lib-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #97a3b5;
  font-size: 10px;
  overflow: auto;
  white-space: nowrap;
  margin-bottom: 20px;
}
.lib-breadcrumb button {
  color: #7688a2;
  padding: 0;
}
.lib-breadcrumb button:last-child {
  color: #4c6382;
}
.lib-heading-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.lib-eyebrow {
  color: #8b9cb4;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 1.5px;
}
.lib-heading h1 {
  font-size: 28px;
  letter-spacing: -1px;
  line-height: 1.3;
  margin: 5px 0 7px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.lib-heading p {
  color: #8a97aa;
  font-size: 11px;
  line-height: 1.7;
}
.lib-create-actions {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.lib-btn {
  border: 1px solid #dce4ef;
  border-radius: 6px;
  padding: 8px 12px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: #4a648a;
  min-height: 34px;
  font-size: 11px !important;
  font-weight: 550 !important;
  white-space: nowrap;
}
.lib-btn.primary {
  background: var(--lib-blue);
  border-color: var(--lib-blue);
  color: white;
  box-shadow: 0 2px 4px #2d559c14;
}
.lib-btn.full {
  width: 100%;
  margin-top: 9px;
}
.lib-btn:hover {
  border-color: #adc0db;
  background: #f5f8fd;
}
.lib-btn.primary:hover {
  background: #23488b;
  color: white;
}
.lib-collection-stats {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10px;
  color: #8292a9;
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid #ecf0f5;
}
.lib-collection-stats > span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lib-collection-stats .lib-readonly {
  margin-left: auto;
  font-size: 9px;
  color: #9aa7b9;
}
.lib-scroll {
  overflow: auto;
  min-height: 0;
  padding: 22px 28px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5d0df transparent;
}
.lib-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.lib-section-title h2,
.lib-file-toolbar h2 {
  font-size: 12px;
  font-weight: 600;
}
.lib-section-title > span {
  color: #96a4b6;
  font-size: 9px;
}
.lib-featured {
  margin-bottom: 27px;
}
.lib-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lib-featured-card {
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  background: white;
  padding: 0;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 4px #1f3b6210;
}
.lib-featured-card:hover,
.lib-featured-card.selected {
  border-color: #9eb7dc;
  box-shadow: 0 0 0 2px #eaf0fb;
}
.lib-featured-image {
  height: 140px;
  background: #eef2f8;
  padding: 12px 22px 0;
  overflow: hidden;
  position: relative;
}
.lib-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 2px 8px #29436b1c;
  min-height: 90px;
  object-fit: cover;
  object-position: top;
}
.lib-featured-image > span {
  position: absolute;
  bottom: 7px;
  right: 7px;
  font-size: 8px;
  background: #ffffffed;
  color: #7186a4;
  padding: 3px 6px;
  border-radius: 4px;
}
.lib-featured-card > div:last-child {
  padding: 12px;
}
.lib-featured-card small {
  display: block;
  color: #8c9cb3;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
}
.lib-featured-card strong {
  font-size: 11px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 33px;
  line-height: 1.5;
}
.lib-featured-card > div:last-child > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  color: #8b9cb3;
  margin-top: 10px;
}
.lib-featured-card > div:last-child > span > svg:last-child {
  margin-left: auto;
}
.lib-folders {
  margin-bottom: 26px;
}
.lib-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 9px;
}
.lib-folder-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  background: white;
  padding: 12px;
  text-align: left;
  min-width: 0;
}
.lib-folder-card:hover {
  border-color: #a6bfdf;
  background: #f8faff;
}
.lib-folder-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.lib-folder-card strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-folder-card small {
  display: block;
  font-size: 9px;
  color: #9aa6b8;
  margin-top: 3px;
}
.lib-folder-card > svg {
  color: #a1b0c3;
}
.lib-folder-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #f0f4fb;
  color: #7896c3;
}
.lib-folder-icon.tone-1 {
  color: #9b96c2;
  background: #f4f1fb;
}
.lib-folder-icon.tone-2 {
  color: #b49c70;
  background: #fcf8ef;
}
.lib-folder-icon.tone-3 {
  color: #7fa497;
  background: #eef7f2;
}
.lib-file-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}
.lib-file-toolbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lib-file-toolbar > div:first-child > span {
  font-size: 10px;
  color: #9aa7b7;
}
.lib-file-toolbar > div:first-child > button {
  display: flex;
  color: #8b9bb0;
}
.lib-file-filters {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lib-file-filters select {
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  background: white;
  padding: 5px 6px;
  font-size: 9px;
  color: #7b8ba2;
  max-width: 120px;
}
.lib-view-toggle {
  display: flex;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  padding: 2px;
  background: #fff;
}
.lib-view-toggle button {
  width: 27px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #a3afbf;
  border-radius: 3px;
}
.lib-view-toggle button[aria-pressed=true] {
  background: #edf2fb;
  color: #4974ac;
}
.lib-file-list {
  border: 1px solid #e4eaf2;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.lib-list-labels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 92px 34px;
  background: #f8fafe;
  padding: 9px 14px;
  font-size: 9px;
  color: #94a1b4;
  gap: 8px;
}
.lib-file-row {
  display: flex;
  border-top: 1px solid #eef1f6;
  align-items: center;
  padding: 0 9px 0 13px;
  min-width: 0;
}
.lib-file-row:hover {
  background: #f7faff;
}
.lib-file-row.selected {
  background: #edf3fe;
  box-shadow: inset 3px 0 #5983bf;
}
.lib-file-select {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 100px 92px;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 13px 0;
}
.lib-file-icon {
  width: 28px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #f9f1ef;
  color: #c1897c;
}
.lib-file-icon.tex {
  background: #eef3fc;
  color: #8d9fc2;
}
.lib-file-icon.image {
  background: #eff6f1;
  color: #78a28a;
}
.lib-file-name {
  min-width: 0;
}
.lib-file-name strong {
  font-size: 10px;
  font-weight: 550;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #415777;
}
.lib-file-name small {
  font-size: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9aa7b9;
  margin-top: 3px;
}
.lib-row-kind {
  font-size: 9px;
  color: #8495ae;
}
.lib-row-detail {
  font-size: 9px;
  color: #8f9eb2;
  display: flex;
  gap: 7px;
  align-items: center;
}
.lib-row-detail svg {
  color: #89a494;
}
.lib-star {
  width: 31px;
  height: 32px;
  color: #c4cedb;
  display: grid;
  place-items: center;
}
.lib-star.on {
  color: #c3a15b;
}
.lib-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}
.lib-material-card {
  text-align: left;
  border: 1px solid #e0e7f0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 0 13px;
  min-width: 0;
}
.lib-material-card > div {
  height: 165px;
  background: #f0f3f9;
  overflow: hidden;
  padding: 14px 22px;
  margin-bottom: 10px;
}
.lib-material-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lib-material-card > strong {
  font-size: 10px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 12px;
  height: 30px;
}
.lib-material-card > small {
  font-size: 9px;
  color: #8a9ab1;
  margin: 7px 12px 0;
  display: block;
}
.lib-material-card.selected {
  border-color: #86a5d2;
  box-shadow: 0 0 0 2px #e4edfb;
}
.lib-code-thumb {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  justify-content: center;
  color: #8a9cbc;
  font-size: 9px;
}
.lib-load-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px auto;
  font-size: 11px;
  color: #6884ab;
  padding: 8px 14px;
  border: 1px solid #dbe4f1;
  border-radius: 6px;
}
.lib-main-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 25px 0 18px;
  color: #a1adbd;
  font-size: 8px;
}
.lib-main-foot > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.lib-empty {
  padding: 65px 25px;
  text-align: center;
  color: #a4b1c4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px dashed #dce5f2;
  border-radius: 8px;
  background: #fff;
}
.lib-empty h3 {
  font-size: 16px;
  color: #5e789d;
}
.lib-empty p {
  font-size: 11px;
  max-width: 320px;
  line-height: 1.7;
}
.lib-preview {
  min-height: 0;
  border-left: 1px solid var(--lib-line);
  display: flex;
  flex-direction: column;
  background: #fff;
}
.lib-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 21px;
  border-bottom: 1px solid #eaf0f6;
  flex-shrink: 0;
}
.lib-preview > header span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #7c8faa;
}
.lib-preview > header button {
  display: flex;
  color: #94a5bb;
}
.lib-preview-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c4d0df transparent;
}
.lib-preview-document {
  background: #f0f3f9;
  padding: 0 20px 20px;
}
.lib-preview-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 12px 0;
  color: #8c9db6;
  font-size: 9px;
}
.lib-preview-tools > div {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lib-preview-tools label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lib-preview-tools input {
  width: 28px;
  padding: 2px 0;
  text-align: center;
  background: white;
  border: 1px solid #dce4f0;
  border-radius: 3px;
  font-size: 9px;
  appearance: textfield;
  color: #6782a9;
}
.lib-preview-tools input::-webkit-inner-spin-button {
  display: none;
}
.lib-preview-tools button,
.lib-preview-tools a {
  display: flex;
  color: #7592b8;
}
.lib-preview-page {
  position: relative;
  min-height: 240px;
  background: white;
  box-shadow: 0 3px 11px #243c6220;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.lib-preview-page > img {
  width: 100%;
  height: auto;
  display: block;
}
.lib-preview-page.code {
  min-height: 320px;
  max-height: 340px;
  overflow: auto;
  background: #24364f;
  justify-content: flex-start;
}
.lib-preview-page pre {
  font:
    8px/1.8 ui-monospace,
    Menlo,
    monospace;
  padding: 14px;
  margin: 0;
  color: #d2e0f4;
  white-space: pre;
  tab-size: 2;
}
.lib-preview-loading {
  position: absolute;
  inset: 0;
  background: #fdfefe;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  color: #8b9bb3;
}
.lib-preview-page > p {
  padding: 40px;
  font-size: 11px;
  color: #9ba4b4;
}
.lib-preview-copy {
  padding: 21px;
}
.lib-preview-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lib-preview-badges span {
  background: #edf3fc;
  color: #6d8cb8;
  font-size: 8px;
  border-radius: 4px;
  padding: 3px 6px;
}
.lib-preview-badges span.answer {
  background: #fff1e7;
  color: #b58b62;
}
.lib-preview h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.lib-preview-filename {
  font-size: 9px;
  color: #99a5b7;
  overflow-wrap: anywhere;
  margin: 6px 0 15px !important;
}
.lib-preview .lib-btn.primary {
  justify-content: flex-start;
  padding: 9px 12px;
  font-size: 10px !important;
}
.lib-preview .lib-btn.primary svg:last-child {
  margin-left: auto;
}
.lib-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}
.lib-preview-actions .lib-btn {
  flex: 1;
  font-size: 10px !important;
}
.lib-download {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin: 14px 0 23px;
  color: #7f95b2 !important;
}
.lib-details {
  border-top: 1px solid #e9eef5;
  padding: 17px 0;
}
.lib-details h3,
.lib-details-form h3 {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 13px;
}
.lib-details dl {
  margin: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px 13px;
  font-size: 9px;
}
.lib-details dt {
  color: #9aa8ba;
}
.lib-details dd {
  margin: 0;
  color: #697e9c;
  overflow-wrap: anywhere;
}
.lib-details dd a {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lib-source-status,
.lib-ocr-status {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  background: #f0f7f3;
  color: #6b9c80;
  font-size: 10px;
  margin: 5px 0 20px;
  align-items: flex-start;
}
.lib-source-status strong,
.lib-ocr-status strong {
  font-size: 9px;
  font-weight: 600;
  display: block;
}
.lib-source-status p,
.lib-ocr-status p {
  font-size: 8px;
  line-height: 1.7;
  margin-top: 3px;
  color: #8ba293;
}
.lib-source-status button {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 9px;
  color: #5d8a70;
  padding: 0;
}
.lib-ocr-status {
  background: #f6f7fb;
  color: #8c9bb3;
}
.lib-ocr-status p {
  color: #a1aabb;
}
.lib-details-form {
  padding: 16px 0;
  border-top: 1px solid #ebeff6;
}
.lib-details-form label {
  display: block;
  font-size: 9px;
  color: #8b9bb1;
  margin-bottom: 12px;
}
.lib-details-form input,
.lib-details-form textarea {
  display: block;
  width: 100%;
  font-size: 10px;
  border: 1px solid #e1e7f0;
  border-radius: 5px;
  margin-top: 5px;
  padding: 8px;
  color: #506987;
  background: #fcfdff;
}
.lib-details-form textarea {
  min-height: 70px;
  resize: vertical;
}
.lib-details-form p,
.lib-tags small {
  font-size: 9px;
  color: #99a6b9;
  line-height: 1.8;
}
.lib-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.lib-tags span {
  font-size: 9px;
  background: #edf2fb;
  color: #7290b8;
  border-radius: 4px;
  padding: 3px 6px;
}
.lib-originals {
  border-top: 1px solid #e6edf6;
  padding: 14px 0;
}
.lib-originals > button {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #7791b2;
}
.lib-originals > div {
  border: 1px solid #e3eaf3;
  border-radius: 6px;
  margin-top: 12px;
  overflow: hidden;
  padding: 8px;
}
.lib-originals img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  display: block;
  background: #f5f7fa;
}
.lib-originals strong,
.lib-originals small,
.lib-originals a {
  display: block;
  font-size: 9px;
  margin-top: 6px;
}
.lib-originals small {
  font-size: 8px;
  color: #99a6b9;
}
.lib-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff1ee;
  color: #a86657;
  border: 1px solid #f2d8d0;
  border-radius: 6px;
  padding: 11px;
  font-size: 11px;
  margin-bottom: 16px !important;
}
.lib-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #243e61;
  color: #fff;
  padding: 13px 20px;
  display: flex;
  gap: 9px;
  align-items: center;
  box-shadow: 0 6px 28px #243e6130;
  border-radius: 8px;
  font-size: 12px;
  z-index: 350;
}
.lib-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: #172e4d55;
  backdrop-filter: blur(4px);
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
}
.lib-dialog {
  position: relative;
  background: white;
  border-radius: 14px;
  width: 430px;
  max-width: 100%;
  padding: 30px;
  box-shadow: 0 20px 70px #1c345d30;
}
.lib-dialog-close {
  position: absolute;
  right: 17px;
  top: 17px;
  color: #91a2b8;
}
.lib-dialog-icon {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  background: #edf3fc;
  color: #6e93c4;
  border-radius: 11px;
  margin-bottom: 18px;
}
.lib-dialog h2 {
  font-size: 22px;
  letter-spacing: -.6px;
  margin-bottom: 7px;
}
.lib-dialog > p {
  font-size: 11px;
  color: #8a9bb3;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.lib-dialog > label {
  display: block;
  color: #7f91ac;
  font-size: 10px;
}
.lib-dialog input,
.lib-dialog select {
  width: 100%;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  padding: 10px;
  margin: 6px 0 12px;
  font-size: 12px;
  background: #fff;
  color: #48638a;
}
.lib-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e6edf6;
  margin-top: 12px;
  padding-top: 17px;
}
.lib-spin {
  animation: spin 1.2s linear infinite;
}
@media (min-width: 1600px) {
  .lib-app {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .lib-app.has-preview {
    grid-template-columns: 240px minmax(0, 1fr) 400px;
  }
  .lib-brand {
    width: 192px;
  }
  .lib-heading,
  .lib-scroll {
    padding-left: 36px;
    padding-right: 36px;
  }
  .lib-featured-image {
    height: 170px;
  }
  .lib-preview-copy {
    padding: 25px;
  }
  .lib-preview-document {
    padding: 0 25px 25px;
  }
  .lib-folder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lib-file-name strong {
    font-size: 12px;
  }
  .lib-file-name small {
    font-size: 10px;
  }
  .lib-row-kind,
  .lib-row-detail {
    font-size: 10px;
  }
}
@media (max-width: 1250px) {
  .lib-app,
  .lib-app.has-preview {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .lib-app.has-preview {
    grid-template-columns: 180px minmax(0, 1fr) 300px;
  }
  .lib-brand {
    width: 132px;
  }
  .lib-brand b {
    font-size: 18px;
  }
  .lib-topbar {
    gap: 16px;
  }
  .lib-heading,
  .lib-scroll {
    padding-left: 20px;
    padding-right: 20px;
  }
  .lib-create-actions .lib-btn span {
    display: none;
  }
  .lib-heading h1 {
    font-size: 24px;
  }
  .lib-list-labels {
    grid-template-columns: minmax(0, 1fr) 70px 34px;
  }
  .lib-list-labels span:nth-child(3) {
    display: none;
  }
  .lib-file-select {
    grid-template-columns: 30px minmax(0, 1fr) 70px;
  }
  .lib-row-detail {
    display: none;
  }
  .lib-featured-image {
    height: 110px;
    padding: 10px 15px 0;
  }
  .lib-featured-card > div:last-child {
    padding: 9px;
  }
  .lib-featured-card strong {
    font-size: 10px;
  }
  .lib-featured-card > div:last-child > span {
    font-size: 7px;
  }
  .lib-folder-grid {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  }
  .lib-collection-stats {
    gap: 10px;
  }
  .lib-collection-stats .lib-readonly {
    margin-left: 0;
  }
  .lib-preview-copy {
    padding: 17px;
  }
  .lib-sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 1050px) {
  .lib-app,
  .lib-app.has-preview {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .lib-preview {
    position: fixed;
    right: 0;
    top: 76px;
    bottom: 0;
    width: 348px;
    z-index: 50;
    box-shadow: -12px 0 35px #223b6126;
  }
  .lib-classroom span {
    display: none;
  }
  .lib-avatar {
    display: none;
  }
  .lib-featured-image {
    height: 140px;
  }
}
@media (max-width: 700px) {
  .lib-app,
  .lib-app.has-preview {
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-rows: 66px minmax(0, 1fr);
  }
  .lib-topbar {
    padding: 0 14px;
    gap: 12px;
  }
  .lib-brand {
    width: 38px;
  }
  .lib-brand > span {
    width: 35px;
    height: 35px;
    font-size: 11px;
    border-radius: 8px;
  }
  .lib-brand b {
    display: none;
  }
  .lib-search {
    padding: 9px;
    min-width: 100px;
  }
  .lib-classroom {
    margin-left: 0;
    gap: 0;
  }
  .lib-classroom svg:last-child {
    display: none;
  }
  .lib-role {
    font-size: 8px;
  }
  .lib-role select {
    font-size: 11px;
    min-width: 58px;
  }
  .lib-sidebar {
    padding: 25px 7px;
  }
  .lib-side-label,
  .lib-sidebar nav button span,
  .lib-sidebar nav button small,
  .lib-folder-nav,
  .lib-sidebar-bottom {
    display: none !important;
  }
  .lib-sidebar nav button {
    justify-content: center;
    padding: 13px 0;
  }
  .lib-sidebar nav {
    gap: 8px;
  }
  .lib-heading,
  .lib-scroll {
    padding-left: 17px;
    padding-right: 17px;
  }
  .lib-heading {
    padding-top: 15px;
  }
  .lib-breadcrumb {
    margin-bottom: 15px;
    font-size: 9px;
  }
  .lib-heading-row {
    align-items: flex-start;
  }
  .lib-heading h1 {
    font-size: 23px;
  }
  .lib-heading p {
    font-size: 10px;
  }
  .lib-eyebrow {
    font-size: 8px;
  }
  .lib-create-actions {
    gap: 5px;
  }
  .lib-create-actions .lib-btn {
    padding: 8px;
  }
  .lib-collection-stats {
    font-size: 9px;
    gap: 10px;
  }
  .lib-collection-stats .lib-readonly {
    display: none;
  }
  .lib-featured-grid {
    gap: 8px;
  }
  .lib-featured-image {
    height: 110px;
    padding: 9px 10px 0;
  }
  .lib-featured-card > div:last-child {
    padding: 8px;
  }
  .lib-featured-card > div:last-child > span {
    font-size: 7px;
  }
  .lib-featured-card strong {
    font-size: 9px;
    height: 30px;
  }
  .lib-featured-card small {
    font-size: 7px;
  }
  .lib-folder-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .lib-preview {
    top: 66px;
    width: min(355px, calc(100vw - 62px));
  }
  .lib-file-filters {
    gap: 5px;
  }
  .lib-file-filters select {
    max-width: 100px;
    font-size: 8px;
  }
  .lib-main-foot {
    flex-direction: column;
  }
  .lib-toast {
    font-size: 10px;
    padding: 11px;
    max-width: 90vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lib-spin {
    animation: none;
  }
}
.lib-short-label {
  display: none;
  font-style: normal;
}
@media (max-width: 700px) {
  .lib-sidebar nav button {
    flex-direction: column;
    gap: 5px;
    padding: 8px 0;
  }
  .lib-short-label {
    display: block;
    font-size: 8px;
    line-height: 1.1;
  }
}
.lib-app input[type=checkbox],
.lib-app input[type=radio] {
  accent-color: var(--lib-blue);
  cursor: pointer;
  flex-shrink: 0;
}
.lib-app [data-drop-active=true] {
  outline: 2px solid #5486d3 !important;
  outline-offset: 2px;
  background: #e5efff !important;
  box-shadow: 0 0 0 5px #d8e6fb !important;
}
.lib-drag-badge {
  position: fixed;
  top: -100px;
  left: 0;
  padding: 14px 22px;
  background: #2c54a0;
  color: white;
  border-radius: 9px;
  font: 600 14px system-ui;
  box-shadow: 0 5px 18px #243e6130;
  z-index: 9999;
}
.lib-selection-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  background: #edf3ff;
  border: 1px solid #cddcf3;
  border-radius: 9px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px #3156820a;
  flex-wrap: wrap;
}
.lib-selection-bar > div {
  flex: 1;
  min-width: 125px;
}
.lib-selection-bar strong {
  display: block;
  font-size: 12px;
}
.lib-selection-bar span {
  display: block;
  font-size: 9px;
  color: #6d88ac;
  margin-top: 2px;
}
.lib-clear-selection {
  color: #7691b7;
  display: flex;
  padding: 6px;
}
.lib-select-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  color: #8495ad;
  font-size: 9px;
  flex-wrap: wrap;
}
.lib-select-all label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.lib-select-all input {
  width: 14px;
  height: 14px;
  margin: 0;
}
.lib-select-all > span {
  font-size: 8px;
  color: #9aa7ba;
}
.lib-file-checkbox {
  width: 15px;
  height: 15px;
  margin: 0 12px 0 0;
}
.lib-list-labels {
  padding-left: 41px;
}
.lib-file-row.checked {
  background: #eaf1ff;
  box-shadow: inset 3px 0 #497bc3;
}
.lib-file-row[draggable=true],
.lib-material-card[draggable=true] {
  cursor: grab;
}
.lib-file-row[draggable=true]:active,
.lib-material-card[draggable=true]:active {
  cursor: grabbing;
}
.lib-material-card {
  position: relative;
  padding: 0;
}
.lib-material-card.checked {
  background: #eaf1ff;
  border-color: #7c9fce;
  box-shadow: 0 0 0 2px #dfeafb;
}
.lib-material-card > button {
  padding: 0 0 13px;
  width: 100%;
  text-align: left;
}
.lib-material-card > button > div {
  height: 165px;
  background: #f0f3f9;
  overflow: hidden;
  padding: 14px 22px;
  margin-bottom: 10px;
}
.lib-material-card > button > strong {
  font-size: 10px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 12px;
  height: 30px;
}
.lib-material-card > button > small {
  font-size: 9px;
  color: #8a9ab1;
  margin: 7px 12px 0;
  display: block;
}
.lib-grid-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 17px;
  height: 17px;
  z-index: 1;
  box-shadow: 0 1px 5px #0002;
}
.lib-packet-sources {
  border-top: 1px solid #e4eaf2;
  padding: 16px 0;
}
.lib-packet-sources h3 {
  font-size: 11px;
  margin-bottom: 12px;
}
.lib-packet-sources > div {
  margin: 9px 0;
}
.lib-packet-sources strong {
  display: block;
  font-size: 10px;
  font-weight: 550;
}
.lib-packet-sources small,
.lib-packet-sources p {
  display: block;
  font-size: 9px;
  color: #8b9bb1;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.lib-packet-sources p {
  margin-top: 14px;
  line-height: 1.8;
}
.lib-packet-backdrop {
  z-index: 320;
}
.lib-packet-dialog {
  width: 790px;
  max-width: 100%;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 25px 90px #172e4d44;
  overflow: hidden;
}
.lib-packet-dialog > header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 23px 26px;
  border-bottom: 1px solid #e6edf6;
}
.lib-packet-symbol {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #edf3fc;
  color: #5d81b7;
  flex-shrink: 0;
}
.lib-packet-dialog h2 {
  font-size: 23px;
  letter-spacing: -.6px;
  line-height: 1.4;
}
.lib-packet-dialog > header p {
  font-size: 11px;
  color: #8b9ab0;
  margin-top: 3px;
}
.lib-packet-dialog > header > button {
  margin-left: auto;
  align-self: flex-start;
  color: #8a9db8;
  padding: 5px;
}
.lib-packet-body {
  overflow: auto;
  padding: 22px 26px;
  overscroll-behavior: contain;
}
.lib-packet-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.lib-packet-fields label {
  font-size: 10px;
  color: #8293ab;
}
.lib-packet-fields input,
.lib-packet-fields select {
  display: block;
  width: 100%;
  border: 1px solid #d9e3f0;
  border-radius: 6px;
  padding: 10px;
  margin-top: 7px;
  background: white;
  color: #415b82;
  font-size: 12px;
}
.lib-packet-section h3 {
  font-size: 12px;
}
.lib-packet-section h3 span {
  font-size: 10px;
  font-weight: 400;
  color: #98a5b7;
  margin-left: 8px;
}
.lib-packet-section p {
  font-size: 10px;
  color: #8b9db5;
  margin-top: 5px;
}
.lib-packet-items {
  list-style: none;
  margin: 14px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lib-packet-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e1e8f2;
  border-radius: 8px;
  padding: 12px;
  background: #fcfdff;
}
.lib-packet-number {
  font-size: 11px;
  color: #8d9db4;
  min-width: 14px;
  text-align: center;
}
.lib-packet-items img {
  width: 48px;
  height: 62px;
  object-fit: contain;
  background: #eef2f9;
  border: 1px solid #e3e9f2;
  border-radius: 4px;
}
.lib-packet-item-info {
  flex: 1;
  min-width: 0;
}
.lib-packet-item-info strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.lib-packet-item-info small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #8e9db3;
  margin: 4px 0;
}
.lib-packet-item-info label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #8b9db5;
  margin-top: 8px;
}
.lib-packet-item-info input {
  width: 130px;
  max-width: 100%;
  border: 1px solid #dbe4f1;
  border-radius: 4px;
  background: white;
  padding: 4px 7px;
  font-size: 10px;
  color: #48648c;
}
.lib-packet-item-info input[aria-invalid=true] {
  border-color: #d7907b;
}
.lib-packet-invalid {
  font-size: 9px;
  color: #b16a58;
  font-style: normal;
}
.lib-packet-item-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}
.lib-packet-item-actions button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 28px;
  border-radius: 5px;
  color: #8a9db8;
}
.lib-packet-item-actions button:hover {
  background: #edf2fa;
  color: #345f9c;
}
.lib-packet-layout {
  border: 0;
  margin: 0;
  padding: 0;
}
.lib-packet-layout legend {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}
.lib-packet-layout > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lib-packet-layout label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  padding: 15px 8px 12px;
  cursor: pointer;
  background: #fff;
}
.lib-packet-layout label.chosen {
  border-color: #7ca1d5;
  box-shadow: 0 0 0 2px #e6eefb;
  background: #f7faff;
}
.lib-packet-layout input {
  position: absolute;
  top: 10px;
  left: 10px;
  margin: 0;
}
.lib-packet-layout strong {
  font-size: 10px;
  margin-top: 10px;
}
.lib-packet-layout small {
  font-size: 8px;
  color: #92a0b4;
  margin-top: 3px;
}
.lib-layout-sample {
  width: 42px;
  height: 52px;
  border: 1px solid #b5c7e2;
  border-radius: 2px;
  background: #fff;
  padding: 5px;
  display: grid;
  gap: 3px;
}
.lib-layout-sample i {
  display: block;
  background: #d7e4f6;
  border-radius: 1px;
}
.lib-layout-sample.columns {
  grid-template-columns: 1fr 1fr;
}
.lib-layout-sample.pages i:not(:first-child) {
  display: none;
}
.lib-packet-note {
  font-size: 10px;
  color: #899bb4;
  line-height: 1.8;
  margin-top: 18px !important;
}
.lib-packet-dialog > footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 26px;
  border-top: 1px solid #e4ebf4;
  background: #f9fbfe;
}
.lib-packet-dialog > footer > div {
  flex: 1;
}
.lib-packet-dialog > footer strong {
  font-size: 11px;
  display: block;
}
.lib-packet-dialog > footer small {
  font-size: 9px;
  color: #8d9fb7;
  display: block;
  margin-top: 3px;
}
@media (max-width: 700px) {
  .lib-selection-bar {
    padding: 10px;
    gap: 7px;
  }
  .lib-selection-bar > div {
    flex-basis: 100%;
    padding-right: 25px;
  }
  .lib-clear-selection {
    position: absolute;
    top: 10px;
    right: 7px;
  }
  .lib-selection-bar .lib-btn {
    flex: 1;
  }
  .lib-select-all > span {
    display: none;
  }
  .lib-file-checkbox {
    margin-right: 8px;
  }
  .lib-file-select {
    grid-template-columns: 26px minmax(0, 1fr) 63px;
    gap: 6px;
  }
  .lib-packet-backdrop {
    padding: 12px;
  }
  .lib-packet-dialog {
    max-height: calc(100dvh - 24px);
  }
  .lib-packet-dialog > header {
    padding: 18px;
    gap: 10px;
  }
  .lib-packet-dialog h2 {
    font-size: 20px;
  }
  .lib-packet-body {
    padding: 18px;
  }
  .lib-packet-fields {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  .lib-packet-items li {
    gap: 8px;
    padding: 9px;
  }
  .lib-packet-items img {
    width: 37px;
    height: 50px;
  }
  .lib-packet-item-actions {
    flex-direction: column;
  }
  .lib-packet-dialog > footer {
    padding: 13px 18px;
    flex-wrap: wrap;
  }
  .lib-packet-dialog > footer > div {
    flex-basis: 100%;
    margin-bottom: 5px;
  }
  .lib-packet-dialog > footer > .lib-btn {
    flex: 1;
  }
  .lib-packet-layout small {
    font-size: 7px;
  }
  .lib-packet-layout strong {
    font-size: 9px;
  }
}
.lib-file-row[data-file-draggable=true],
.lib-material-card[data-file-draggable=true] {
  cursor: grab;
  user-select: none;
}
.lib-file-row[data-file-draggable=true] .lib-file-select {
  cursor: grab;
}
.lib-is-dragging,
.lib-is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}
.lib-pointer-drag {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: #2c54a0;
  color: white;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 12px;
  box-shadow: 0 5px 20px #223b6144;
}
.lib-pointer-drag small {
  display: block;
  font-size: 9px;
  opacity: .75;
  margin-top: 3px;
}
.lib-packet-dialog {
  width: min(790px, calc(100vw - 40px));
  min-width: 0;
}
.lib-packet-body {
  min-width: 0;
}
.lib-packet-fields > * {
  min-width: 0;
}
@media (max-width: 700px) {
  .lib-packet-dialog {
    width: calc(100vw - 24px);
  }
}
.lib-packet-live {
  width: min(1240px, calc(100vw - 32px));
  height: min(940px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
}
.lib-packet-live > header {
  padding: 16px 22px;
  flex-shrink: 0;
}
.lib-packet-live > header h2 {
  font-size: 22px;
}
.lib-packet-live > header .lib-packet-symbol {
  width: 42px;
  height: 42px;
}
.lib-packet-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 13px 22px 16px;
  border-bottom: 1px solid #e3eaf4;
  flex-shrink: 0;
  background: #fbfcff;
}
.lib-packet-settings label {
  font-size: 9px;
  color: #8395ae;
  min-width: 0;
}
.lib-packet-settings input,
.lib-packet-settings select {
  display: block;
  width: 100%;
  margin-top: 5px;
  border: 1px solid #dce5f1;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  background: #fff;
  color: #48648b;
}
.lib-packet-workspace {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}
.lib-packet-materials {
  padding: 18px 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border-right: 1px solid #e1e8f3;
  scrollbar-width: thin;
  background: #fff;
}
.lib-packet-live .lib-packet-items {
  gap: 9px;
  margin: 14px 0 20px;
}
.lib-packet-live .lib-packet-items li {
  display: block;
  padding: 11px;
  position: relative;
}
.lib-packet-live .lib-packet-items li.active {
  border-color: #7fa2d4;
  background: #f6f9ff;
}
.lib-packet-item-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.lib-packet-grip {
  display: grid;
  place-items: center;
  color: #a0afc3;
  cursor: grab !important;
  padding: 0;
  touch-action: none;
}
.lib-packet-live .lib-packet-items img {
  width: 30px;
  height: 36px;
  cursor: grab;
  touch-action: none;
}
.lib-packet-live .lib-packet-number {
  font-size: 9px;
  min-width: 12px;
}
.lib-packet-live .lib-packet-item-actions {
  margin-left: auto;
  flex-direction: row;
  gap: 1px;
}
.lib-packet-live .lib-packet-item-actions button {
  width: 23px;
  height: 26px;
}
.lib-packet-live .lib-packet-item-info strong {
  font-size: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.lib-packet-live .lib-packet-item-info small {
  font-size: 8px;
}
.lib-packet-live .lib-packet-item-info label {
  justify-content: space-between;
  font-size: 9px;
}
.lib-packet-live .lib-packet-item-info input,
.lib-packet-live .lib-packet-item-info select {
  width: 140px;
  min-width: 0;
  font-size: 9px;
  padding: 5px 6px;
  border: 1px solid #dce5f1;
  background: #fff;
  border-radius: 4px;
  color: #54729b;
}
.lib-packet-live .lib-packet-note {
  font-size: 9px;
  line-height: 1.8;
}
.lib-packet-preview-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #edf1f7;
}
.lib-packet-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: #f9fbff;
  border-bottom: 1px solid #dfe7f2;
  flex-shrink: 0;
}
.lib-packet-preview-toolbar > div {
  flex: 1;
  min-width: 0;
}
.lib-packet-preview-toolbar strong {
  display: block;
  font-size: 12px;
  color: #456386;
}
.lib-packet-preview-toolbar span {
  display: block;
  font-size: 9px;
  color: #8a9db8;
  margin-top: 2px;
}
.lib-packet-preview-toolbar > button {
  display: flex;
  padding: 5px;
  color: #6e8db7;
}
.lib-packet-layout-select {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #7893b6;
}
.lib-packet-layout-select select {
  font-size: 10px;
  color: #4d6e9b;
  padding: 6px 4px;
  background: #fff;
  border: 1px solid #dbe4f2;
  border-radius: 5px;
  max-width: 150px;
}
.lib-packet-page-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 18px;
  border-bottom: 1px solid #e0e7f1;
  background: #f7f9fd;
  overflow-x: auto;
  flex-shrink: 0;
}
.lib-packet-page-strip button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid #dce6f3;
  border-radius: 4px;
  color: #7a91b1;
  font-size: 9px;
  padding: 4px 7px;
}
.lib-packet-page-strip a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 9px;
}
.lib-packet-preview-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 24px 22px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  position: relative;
}
.lib-packet-preview-sheet {
  max-width: 640px;
  margin: 0 auto 22px;
  scroll-margin-top: 14px;
}
.lib-packet-page-caption {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.lib-packet-page-caption strong {
  font-size: 10px;
  color: #647e9f;
  white-space: nowrap;
}
.lib-packet-page-caption span {
  font-size: 8px;
  color: #93a1b5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-packet-paper {
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 12px #344f7420;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.lib-packet-page-render {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.lib-packet-preview-scroll.updating .lib-packet-paper {
  opacity: .4;
}
.lib-packet-column-target {
  position: absolute;
  z-index: 1;
  border: 1px dashed transparent;
  border-radius: 3px;
  pointer-events: auto;
}
.lib-packet-column-target > span {
  display: none;
}
.is-arranging .lib-packet-column-target {
  border-color: #9bb7dd;
  background: #edf4ff55;
}
.is-arranging .lib-packet-column-target > span {
  display: block;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: #5276ab;
}
.lib-packet-image-overlay {
  position: absolute;
  z-index: 2;
  border: 1.5px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: grab !important;
  touch-action: none;
  padding: 0;
  user-select: none;
}
.lib-packet-image-overlay:hover,
.lib-packet-image-overlay.active {
  border-color: #77a1da;
  background: #80a9e915;
}
.lib-packet-image-overlay > span {
  position: absolute;
  top: -1px;
  right: -1px;
  display: none;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  border-radius: 0 3px 0 4px;
  background: #3d6ab0;
  color: #fff;
  font-size: 8px;
  white-space: nowrap;
  pointer-events: none;
}
.lib-packet-image-overlay:hover > span,
.lib-packet-image-overlay.active > span {
  display: flex;
}
.lib-packet-new-page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  margin-top: 8px;
  border: 1px dashed #cad5e4;
  border-radius: 5px;
  color: #94a4ba;
  font-size: 9px;
}
.is-arranging .lib-packet-new-page {
  height: 43px;
  color: #6487b8;
  border-color: #91b0d9;
  background: #e6effc;
}
.lib-packet-live [data-drop-edge=inside] {
  background: #d3e5ffbb !important;
  border: 2px dashed #4b7fc7 !important;
}
.lib-packet-live [data-drop-edge=before] {
  box-shadow: 0 -4px 0 #3f78ca !important;
}
.lib-packet-live [data-drop-edge=after] {
  box-shadow: 0 4px 0 #3f78ca !important;
}
.lib-packet-preview-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  color: #8c9fba;
}
.lib-packet-preview-loading strong {
  font-size: 13px;
  font-weight: 550;
}
.lib-packet-preview-loading span {
  font-size: 10px;
}
.lib-preview-problem {
  padding: 16px;
  border: 1px solid #edd7c8;
  background: #fff7ee;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 10px;
  color: #aa7a55;
  line-height: 1.7;
}
.lib-preview-problem button {
  margin-top: 10px;
}
.lib-packet-live > footer {
  flex-shrink: 0;
  padding: 13px 22px;
}
.lib-packet-save-error {
  margin: 0 16px 10px !important;
  flex-shrink: 0;
}
.lib-packet-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #315b9b;
  color: #fff;
  padding: 11px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 25px #203a6044;
  font-size: 10px;
}
.lib-packet-drag-ghost span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-packet-drag-ghost small {
  display: block;
  font-size: 8px;
  margin-top: 3px;
  opacity: .8;
}
.lib-packet-live.preview-expanded .lib-packet-workspace {
  grid-template-columns: 1fr;
}
.lib-packet-live.preview-expanded .lib-packet-materials {
  display: none;
}
.lib-packet-mobile-tabs {
  display: none;
}
@media (max-width: 900px) {
  .lib-packet-live {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .lib-packet-workspace {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .lib-packet-materials {
    padding: 14px 10px;
  }
  .lib-packet-live .lib-packet-item-info input,
  .lib-packet-live .lib-packet-item-info select {
    width: 115px;
  }
  .lib-packet-preview-toolbar {
    gap: 7px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .lib-packet-preview-toolbar > div {
    flex-basis: calc(100% - 40px);
  }
  .lib-packet-preview-toolbar > button {
    position: absolute;
    right: 26px;
    align-self: flex-start;
  }
  .lib-packet-layout-select {
    width: 100%;
  }
  .lib-packet-layout-select select {
    max-width: none;
    flex: 1;
  }
  .lib-packet-page-strip {
    padding: 8px 12px;
  }
  .lib-packet-preview-scroll {
    padding: 12px 14px;
  }
  .lib-packet-page-caption span {
    max-width: 150px;
  }
  .lib-packet-live > footer > div {
    flex-basis: auto;
  }
  .lib-packet-live > footer > .lib-btn {
    flex: 0;
  }
  .lib-packet-live > footer strong {
    font-size: 10px;
  }
  .lib-packet-live > footer small {
    font-size: 8px;
  }
  .lib-packet-live > header {
    padding: 15px 18px;
  }
  .lib-packet-settings {
    padding: 11px 18px;
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .lib-packet-settings {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .lib-packet-settings label {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .lib-packet-settings label input,
  .lib-packet-settings label select {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  .lib-packet-settings label:first-child {
    font-size: 0;
  }
  .lib-packet-settings label:first-child input {
    font-size: 11px;
  }
  .lib-packet-settings label:last-child {
    font-size: 9px;
  }
  .lib-packet-mobile-tabs {
    display: flex;
    border-bottom: 1px solid #e0e7f1;
    padding: 0 18px;
    gap: 15px;
    background: #fff;
  }
  .lib-packet-mobile-tabs button {
    padding: 11px 0;
    font-size: 10px;
    color: #91a0b5;
    border-bottom: 2px solid transparent;
  }
  .lib-packet-mobile-tabs button[aria-pressed=true] {
    color: #3866a7;
    border-color: #4d7ec3;
  }
  .lib-packet-workspace {
    display: block;
    overflow: hidden;
  }
  .lib-packet-materials,
  .lib-packet-preview-pane {
    height: 100%;
  }
  .lib-packet-live.mobile-preview .lib-packet-materials {
    display: none;
  }
  .lib-packet-live.mobile-materials .lib-packet-preview-pane {
    display: none;
  }
  .lib-packet-live.mobile-materials .lib-packet-materials {
    display: block;
  }
  .lib-packet-preview-toolbar {
    flex-wrap: nowrap;
  }
  .lib-packet-preview-toolbar > div {
    flex-basis: auto;
  }
  .lib-packet-preview-toolbar > button {
    display: none;
  }
  .lib-packet-layout-select {
    width: auto;
  }
  .lib-packet-preview-toolbar span {
    font-size: 8px;
  }
  .lib-packet-preview-scroll {
    padding: 14px 24px;
  }
  .lib-packet-live > header p {
    font-size: 10px;
  }
  .lib-packet-live > footer {
    padding: 11px 15px;
    gap: 7px;
  }
  .lib-packet-live > footer > div {
    flex-basis: 100%;
  }
  .lib-packet-live > footer > .lib-btn {
    flex: 1;
  }
  .lib-packet-live .lib-packet-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .lib-packet-live.preview-expanded .lib-packet-materials {
    display: block;
  }
}
.lib-packet-image-tools {
  padding: 10px 16px;
  border-bottom: 1px solid #dce6f2;
  background: #edf4ff;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.lib-packet-selected-image {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 100%;
  min-width: 0;
  color: #5278ab;
}
.lib-packet-selected-image strong {
  font-size: 10px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.lib-packet-selected-image small {
  font-size: 8px;
  color: #839bbd;
}
.lib-packet-size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 145px;
  font-size: 9px;
  color: #6e86a9;
}
.lib-packet-size-control input {
  min-width: 45px;
  flex: 1;
  width: 85px;
  accent-color: #416fb3;
  cursor: ew-resize;
}
.lib-packet-size-control output {
  font-size: 10px;
  min-width: 31px;
  text-align: right;
  color: #40669e;
  font-variant-numeric: tabular-nums;
}
.lib-packet-image-buttons {
  display: flex;
  gap: 6px;
}
.lib-packet-image-buttons .lib-btn {
  font-size: 9px;
  padding: 6px 8px;
  gap: 4px;
  background: white;
}
.lib-packet-image-tools > p {
  font-size: 8px;
  color: #8a9cb6;
  flex-basis: 100%;
  margin: 0;
}
.lib-packet-edit-image {
  display: flex;
  gap: 5px;
  align-items: center;
  width: 100%;
  font-size: 9px;
  color: #6083b1;
  margin-top: 8px;
  padding: 6px 0 0;
  border-top: 1px solid #e1e9f4;
}
.lib-packet-edit-image span {
  margin-left: auto;
  font-size: 8px;
  color: #8a9eb8;
}
.lib-packet-resize-frame {
  position: absolute;
  z-index: 3;
  border: 1.5px solid #4e82cb;
  pointer-events: none;
  border-radius: 1px;
}
.lib-packet-resize-frame.resizing {
  border-style: dashed;
  background: #e1edff88;
  z-index: 5;
}
.lib-packet-resize-frame > span {
  position: absolute;
  bottom: 7px;
  right: 7px;
  padding: 4px 7px;
  background: #365f9b;
  color: white;
  font-size: 10px;
  border-radius: 4px;
}
.lib-packet-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  right: -7px;
  bottom: -7px;
  border: 2px solid white;
  background: #497dc5;
  border-radius: 3px;
  box-shadow: 0 1px 5px #274a7755;
  pointer-events: auto;
  touch-action: none;
  cursor: nwse-resize !important;
  padding: 0;
}
.lib-packet-resize-handle:focus-visible {
  outline: 2px solid #244e89;
  outline-offset: 3px;
}
.lib-packet-image-overlay:focus-visible {
  outline: 2px solid #244e89;
  outline-offset: 2px;
}
.lib-crop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: #1d304d80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(3px);
}
.lib-crop-editor {
  width: min(900px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: #f8faff;
  border: 1px solid #dce5f2;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 25px 90px #0f254d44;
}
.lib-crop-editor > header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 18px 22px;
  background: white;
  border-bottom: 1px solid #e1e8f4;
  flex-shrink: 0;
}
.lib-crop-editor > header > div {
  flex: 1;
  min-width: 0;
}
.lib-crop-editor > header strong {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 17px;
  color: #34557f;
}
.lib-crop-editor > header p {
  font-size: 10px;
  color: #8398b5;
  margin-top: 5px;
}
.lib-crop-editor > header > button {
  color: #8a9bb4;
  padding: 4px;
  display: flex;
}
.lib-crop-tools {
  display: flex;
  gap: 7px;
  padding: 12px 20px 0;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.lib-crop-tools button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid #dce5f3;
  border-radius: 6px;
  background: white;
  font-size: 10px;
  color: #8097b6;
}
.lib-crop-tools button[aria-pressed=true] {
  background: #e5efff;
  border-color: #8dacd5;
  color: #3b639d;
}
.lib-crop-tools button:last-child {
  margin-left: auto;
}
.lib-crop-hint {
  font-size: 10px;
  color: #6e89ac;
  padding: 9px 20px 0;
  margin: 0;
  flex-shrink: 0;
}
.lib-crop-stage {
  padding: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  overflow: auto;
  flex: 1;
  background: #eef2f8;
  margin-top: 10px;
}
.lib-crop-stage > p {
  font-size: 12px;
  color: #ae694d;
}
.lib-crop-surface {
  position: relative;
  max-width: 100%;
  width: fit-content;
  line-height: 0;
  touch-action: none;
  user-select: none;
  box-shadow: 0 1px 10px #344c7925;
  cursor: crosshair;
}
.lib-crop-surface > img {
  display: block;
  max-width: 100%;
  max-height: max(120px, min(500px, calc(100dvh - 390px)));
  width: auto;
  height: auto;
  pointer-events: none;
}
.lib-crop-selection {
  position: absolute;
  box-shadow: 0 0 0 2000px #13274680;
  border: 1.5px solid #4d91ee;
  touch-action: none;
  isolation: isolate;
}
.lib-crop-stage {
  isolation: isolate;
}
.lib-crop-surface.move .lib-crop-selection {
  cursor: move;
}
.lib-crop-selection > i {
  position: absolute;
  pointer-events: none;
  background: #fff9;
}
.lib-crop-selection > i:nth-child(1),
.lib-crop-selection > i:nth-child(2) {
  width: 1px;
  top: 0;
  bottom: 0;
  left: 33.333%;
}
.lib-crop-selection > i:nth-child(2) {
  left: 66.666%;
}
.lib-crop-selection > i:nth-child(3),
.lib-crop-selection > i:nth-child(4) {
  height: 1px;
  left: 0;
  right: 0;
  top: 33.333%;
}
.lib-crop-selection > i:nth-child(4) {
  top: 66.666%;
}
.lib-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid white;
  border-radius: 2px;
  background: #5088d3;
  box-shadow: 0 1px 5px #172e4955;
  touch-action: none;
  z-index: 2;
}
.lib-crop-handle.nw {
  left: -7px;
  top: -7px;
  cursor: nwse-resize;
}
.lib-crop-handle.ne {
  right: -7px;
  top: -7px;
  cursor: nesw-resize;
}
.lib-crop-handle.sw {
  left: -7px;
  bottom: -7px;
  cursor: nesw-resize;
}
.lib-crop-handle.se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}
.lib-crop-handle.n {
  left: calc(50% - 6px);
  top: -7px;
  cursor: ns-resize;
}
.lib-crop-handle.s {
  left: calc(50% - 6px);
  bottom: -7px;
  cursor: ns-resize;
}
.lib-crop-handle.w {
  top: calc(50% - 6px);
  left: -7px;
  cursor: ew-resize;
}
.lib-crop-handle.e {
  top: calc(50% - 6px);
  right: -7px;
  cursor: ew-resize;
}
.lib-crop-details {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: white;
  border-top: 1px solid #e1e8f2;
  flex-shrink: 0;
}
.lib-crop-details > div {
  flex: 1;
  min-width: 100px;
}
.lib-crop-details strong {
  font-size: 10px;
  display: block;
  color: #49688e;
}
.lib-crop-details small {
  font-size: 8px;
  color: #94a3b9;
  display: block;
  margin-top: 3px;
}
.lib-crop-details label {
  font-size: 9px;
  text-transform: capitalize;
  color: #8a9bb4;
}
.lib-crop-details label > span {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  margin-top: 5px;
}
.lib-crop-details input {
  width: 53px;
  padding: 5px 3px 5px 6px;
  border: 1px solid #dbe4f2;
  background: #fbfcff;
  border-radius: 4px;
  font-size: 10px;
  color: #52719c;
}
.lib-crop-editor > footer {
  padding: 14px 20px;
  border-top: 1px solid #e1e8f4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #f8faff;
}
.lib-crop-editor > footer > div {
  flex: 1;
  min-width: 0;
}
.lib-crop-editor > footer strong {
  font-size: 10px;
  display: block;
  color: #5b7598;
}
.lib-crop-editor > footer small {
  font-size: 9px;
  display: block;
  margin-top: 4px;
  color: #8e9fb6;
}
.lib-crop-editor > footer .lib-btn {
  font-size: 11px;
  padding: 9px 12px;
}
@media (max-width: 900px) {
  .lib-packet-image-tools {
    padding: 9px 12px;
    gap: 7px;
  }
  .lib-packet-size-control {
    flex: 1 1 100%;
  }
  .lib-packet-image-buttons {
    flex: 1;
  }
  .lib-packet-image-buttons .lib-btn {
    flex: 1;
    justify-content: center;
  }
  .lib-packet-image-tools > p {
    font-size: 7.5px;
  }
}
@media (max-width: 600px) {
  .lib-crop-backdrop {
    padding: 12px;
  }
  .lib-crop-editor {
    max-height: calc(100dvh - 24px);
  }
  .lib-crop-editor > header {
    padding: 14px;
  }
  .lib-crop-editor > header p {
    font-size: 9px;
  }
  .lib-crop-tools {
    padding: 10px 14px 0;
    gap: 4px;
  }
  .lib-crop-tools button {
    padding: 7px;
    font-size: 9px;
  }
  .lib-crop-hint {
    padding: 9px 14px 0;
    font-size: 9px;
  }
  .lib-crop-stage {
    padding: 18px;
  }
  .lib-crop-details {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .lib-crop-details > div {
    flex-basis: 100%;
  }
  .lib-crop-details label {
    flex: 1;
  }
  .lib-crop-details input {
    width: 100%;
    min-width: 0;
  }
  .lib-crop-editor > footer {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .lib-crop-editor > footer > div {
    flex-basis: 100%;
  }
  .lib-crop-editor > footer .lib-btn {
    flex: 1;
    justify-content: center;
  }
}
.lib-app .lib-topbar {
  position: relative;
  z-index: 55;
  gap: 16px;
}
.lib-app .lib-topbar .lib-search {
  max-width: none;
  min-width: 80px;
}
.lib-topbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  flex-shrink: 0;
}
.lib-app .lib-header-icon {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 8px;
}
.lib-alerts {
  position: relative;
}
.lib-app .lib-alert-bell {
  position: relative;
  border-color: transparent;
  background: transparent;
}
.lib-app .lib-alert-bell:hover,
.lib-app .lib-alert-bell[aria-expanded=true] {
  background: #edf3fd;
  border-color: #d7e3f4;
}
.lib-app .lib-alert-bell.has-issues {
  color: #b64b36;
  background: #fff5ef;
}
.lib-alert-count {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 2px solid white;
  border-radius: 12px;
  background: #c64d3b;
  color: white;
  font-size: 9px;
  line-height: 12px;
  font-weight: 700;
  text-align: center;
}
.lib-notification-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 330px;
  max-width: calc(100vw - 112px);
  max-height: calc(100dvh - 120px);
  overflow: auto;
  background: white;
  border: 1px solid #dce5f1;
  border-radius: 14px;
  box-shadow: 0 14px 40px #20395426;
  color: var(--lib-ink);
  text-align: left;
}
.lib-notification-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--lib-line);
}
.lib-notification-panel > header strong {
  font-size: 13px;
  font-weight: 650;
}
.lib-notification-panel > header button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  color: #7c8da6;
}
.lib-notification-panel > header button:hover {
  background: #f1f5fb;
}
.lib-notification-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
}
.lib-notification-empty > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #edf7f1;
  border-radius: 50%;
  color: #4e9679;
  flex-shrink: 0;
}
.lib-notification-empty strong,
.lib-notification-issues strong {
  font-size: 12px;
  font-weight: 600;
}
.lib-notification-empty p,
.lib-notification-issues p {
  font-size: 11px;
  line-height: 1.65;
  color: #7a8ba2;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.lib-notification-issues article {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 17px 18px;
  background: #fffbf7;
  border-bottom: 1px solid #f3e7dc;
}
.lib-notification-issues article > svg {
  color: #be7040;
  margin-top: 2px;
}
.lib-notification-lesson {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--lib-line);
  background: #f8faff;
}
.lib-notification-lesson > span {
  display: block;
  color: #7a8ba2;
  font-size: 10px;
  margin-bottom: 4px;
}
.lib-notification-lesson > strong {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.lib-app .lib-notification-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  color: var(--lib-blue);
  padding: 5px 0;
  margin-top: 9px;
}
.lib-app .lib-notification-link:hover {
  text-decoration: underline;
}
.lib-app .lib-folder-path {
  margin: 0 0 18px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--lib-line);
  font-size: 11px;
}
@media (max-width: 900px) {
  .lib-app .lib-topbar {
    gap: 12px;
  }
  .lib-app .library-context {
    width: auto;
  }
  .lib-app .library-context strong {
    font-size: 10px;
  }
}
@media (max-width: 700px) {
  .lib-app .lib-topbar {
    gap: 8px;
  }
  .lib-topbar-actions {
    gap: 4px;
  }
  .lib-app .lib-header-icon {
    width: 30px;
    height: 32px;
    min-height: 32px;
  }
  .lib-app .lib-search {
    padding: 8px;
  }
  .lib-topbar-actions .lib-header-icon[aria-label="Open classroom Sharebox"] {
    display: none;
  }
}

/* src/curriculum-library.css */
.cl-app {
  display: grid;
  grid-template-columns: 240px minmax(260px, 1fr) minmax(320px, 1.2fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  background: #f6f8fb;
  color: #223349;
  font-size: 13px;
}
.cl-app > * {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}
.cl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid #dfe6ef;
  background: #fff;
}
.cl-list h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 18px;
  color: #1b2f4c;
}
.cl-back {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  font-size: 12px;
  color: #4f6789;
}
.cl-curriculum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e3e9f2;
  border-radius: 9px;
  background: #fbfcfe;
  text-align: left;
  color: #223349;
}
.cl-curriculum.is-selected,
.cl-lesson.is-selected {
  border-color: #3d69a8;
  background: #edf3fc;
}
.cl-curriculum small,
.cl-lesson small {
  font-size: 11px;
  color: #6b80a0;
}
.cl-units {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cl-units > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cl-units h3 {
  margin: 0;
  font-size: 18px;
  color: #1b2f4c;
}
.cl-unit {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #fff;
}
.cl-unit h4,
.cl-files h4,
.cl-history h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4f6789;
}
.cl-files h4 small {
  font-weight: 400;
  text-transform: none;
}
.cl-lesson {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e3e9f2;
  border-radius: 9px;
  background: #fbfcfe;
}
.cl-lesson-open {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  background: none;
  text-align: left;
  color: #223349;
}
.cl-lesson > span,
.cl-file {
  display: flex;
  gap: 2px;
}
.cl-lesson > span button,
.cl-file button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #6b80a0;
}
.cl-lesson > span button:hover:not(:disabled),
.cl-file button:hover:not(:disabled) {
  background: #eef2f7;
}
.cl-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid #dfe6ef;
  background: #fff;
}
.cl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-field > span {
  font-size: 11px;
  font-weight: 600;
  color: #4f6789;
}
.cl-field input,
.cl-field textarea,
.cl-publish input,
.cl-add input,
.cl-name input {
  padding: 7px 9px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  font: inherit;
  color: #223349;
}
.cl-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cl-skills span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #edf3fc;
  font-size: 11px;
  color: #2e568d;
}
.cl-skills button {
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: #6b80a0;
}
.cl-skill-results,
.cl-add {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cl-skill-results button,
.cl-add > button:not(.cl-link) {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid #e3e9f2;
  border-radius: 7px;
  background: #fbfcfe;
  text-align: left;
  font-size: 12px;
  color: #223349;
}
.cl-add > button small {
  margin-left: auto;
  color: #7a8ca5;
}
.cl-add label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6b80a0;
}
.cl-add label input {
  flex: 1;
}
.cl-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
}
.cl-file {
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #f8fafd;
  color: #3e6699;
}
.cl-file > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  color: #223349;
}
.cl-file small {
  font-size: 11px;
  color: #6b80a0;
}
.cl-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 3px 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: #2e5a95;
}
.cl-name {
  display: flex;
  gap: 4px;
}
.cl-name input {
  flex: 1;
  min-width: 0;
  padding: 4px 7px;
}
.cl-name button {
  border: 1px solid #cdd9e9;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: #2e568d;
}
.cl-publish {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #edf1f6;
}
.cl-publish input {
  flex: 1;
}
.cl-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-history > div {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f3f7;
}
.cl-history small {
  grid-column: 2;
  font-size: 11px;
  color: #7a8ca5;
}
.cl-empty,
.cl-hint {
  margin: 0;
  font-size: 12px;
  color: #7a8ca5;
}
.cl-message {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: #eef6f2;
  color: #1d6a48;
}
@media (max-width: 1000px) {
  .cl-app {
    grid-template-columns: 1fr;
  }
  .cl-list,
  .cl-editor {
    border: 0;
  }
}
.cl-unit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cl-unit-actions select {
  padding: 4px 6px;
  border: 1px solid #d8e2ef;
  border-radius: 7px;
  font-size: 12px;
  color: #2e568d;
}
.cl-results,
.cl-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
}
.cl-results h4 small,
.cl-notes h4 small {
  font-weight: 400;
  text-transform: none;
}
.cl-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cl-result > span,
.cl-note > span:first-child {
  font-size: 12.5px;
  color: #223349;
}
.cl-result small,
.cl-note small {
  font-size: 11px;
  color: #6b80a0;
}
.cl-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: #eef2f7;
}
.cl-bar b {
  background: #dfe6ef;
}
.cl-bar .is-mastered {
  background: #1f9d6b;
}
.cl-bar .is-ready {
  background: #7cc4a2;
}
.cl-bar .is-practising {
  background: #e0a458;
}
.cl-bar .is-revisit {
  background: #c2410c;
}
.cl-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-left: 3px solid #e0a458;
  border-radius: 0 8px 8px 0;
  background: #fffaf3;
}
.cl-note.is-worked {
  border-color: #1f9d6b;
  background: #f1faf5;
}
.cl-note.is-resolved {
  opacity: .6;
}
.cl-note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #4f6789;
}
.cl-note-actions label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cl-note-add {
  display: flex;
  gap: 6px;
}
.cl-note-add input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #d8e2ef;
  border-radius: 7px;
  font: inherit;
}
.cl-note-add select {
  padding: 4px;
  border: 1px solid #d8e2ef;
  border-radius: 7px;
  font-size: 12px;
}

/* src/workspace-layout.css */
.app {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.shell {
  min-height: 0;
  overflow: hidden;
}
.rail {
  height: 100dvh;
}
.compact-topbar {
  height: auto;
  min-height: 72px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
  padding: 12px 20px;
}
.lesson-identity {
  min-width: 0;
}
.compact-topbar .breadcrumb {
  font-size: 9px;
  gap: 7px;
  margin-bottom: 4px;
}
.lesson-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.lesson-title h1 {
  font-size: 18px;
  letter-spacing: -.55px;
  line-height: 1.3;
  font-weight: 650;
  white-space: nowrap;
}
.lesson-title > span {
  color: #8592a5;
  font-size: 10px;
  white-space: nowrap;
}
.compact-topbar .lesson-actions {
  width: auto;
  gap: 7px;
  flex-wrap: nowrap;
}
.compact-topbar .lesson-actions .button {
  flex: none;
  font-size: 11px;
  padding: 8px 11px;
}
.compact-topbar .count-select {
  margin: 0;
  min-height: 34px;
  padding: 6px 8px;
}
.compact-topbar .top-actions {
  gap: 8px;
}
.compact-topbar .view-label {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-size: 9px;
}
.compact-topbar .view-label select {
  width: 112px;
  max-width: 112px;
}
.lesson-navigation-slot {
  flex-shrink: 0;
  min-width: 0;
  background: white;
}
.lesson-navigation-slot:empty {
  display: none;
}
.lesson-navigation-slot .board-switcher {
  padding: 10px 16px 8px;
}
.lesson-navigation-slot .board-switcher-meta {
  margin-bottom: 7px;
  align-items: center;
}
.lesson-navigation-slot .board-switcher.is-collapsed .board-switcher-meta {
  margin-bottom: 0;
}
.lesson-navigation-slot .board-switcher-meta > div:first-child {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.lesson-navigation-slot .board-tab {
  min-width: 142px;
  padding: 9px 12px;
}
.lesson-navigation-slot .board-tab-list {
  padding-bottom: 5px;
}
.lesson-navigation-slot .board-legend {
  margin-top: 2px;
}
.workspace-layout,
.workspace-layout.split-view {
  min-height: 0;
  flex: 1 1 0;
  grid-template-rows: minmax(0, 1fr);
  border-top: 0;
  overflow: hidden;
}
.workspace-layout.tutor-layout,
.workspace-layout.tutor-layout.split-view {
  grid-template-columns: 220px minmax(0, 1fr);
}
.workspace-layout .materials,
.workspace-layout .tower {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.workspace-layout .materials {
  display: flex;
}
.workspace-layout .stage,
.workspace-layout.split-view .stage {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
.boards-workspace {
  min-height: 0;
  overflow: hidden;
}
.board-panel-host {
  flex: 1 1 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.two-panels .board-panel-host {
  display: grid;
  grid-template-columns: minmax(0, var(--left-share)) 10px minmax(0, var(--right-share));
}
.two-panels .board-pane,
.one-panel .board-pane {
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.two-panels .panel-divider {
  display: flex;
}
.pane-heading,
.pane-document-heading,
.pane-tools,
.pane-follow,
.pane-footer {
  flex-shrink: 0;
}
.pane-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 16px 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: #9cacc4 #e6ebf2;
}
.pane-scroll:focus-visible {
  outline: 2px solid #6e93c5;
  outline-offset: -2px;
}
.pane-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pane-scroll::-webkit-scrollbar-track {
  background: #e6ebf2;
}
.pane-scroll::-webkit-scrollbar-thumb {
  background: #a6b5ca;
  border: 2px solid #e6ebf2;
  border-radius: 8px;
}
.pane-scroll::-webkit-scrollbar-thumb:hover {
  background: #6f8daf;
}
.pane-pages {
  overscroll-behavior: contain;
}
.app-footer {
  flex-shrink: 0;
  padding: 7px 18px;
}
.floating-tower {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #cbd7e7;
  border-radius: 12px;
  box-shadow: 0 14px 48px #243c5d26, 0 2px 9px #243c5d12;
  isolation: isolate;
}
.floating-tower.is-dragging {
  box-shadow: 0 20px 60px #243c5d38;
  user-select: none;
}
.floating-tower-heading {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 9px 8px 9px 4px;
  border-bottom: 1px solid #e3e9f2;
  background: #f8faff;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
  min-height: 55px;
}
.tower-drag-handle {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  text-align: left;
  cursor: grab;
  touch-action: none;
  padding: 0 4px;
  color: #7c91ac;
}
.tower-drag-handle:active {
  cursor: grabbing;
}
.tower-drag-handle > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tower-drag-handle strong {
  font-size: 13px;
  color: #263d5d;
  font-weight: 650;
}
.tower-drag-handle small {
  font-size: 9px;
  color: #8495ab;
  white-space: nowrap;
}
.floating-tower-heading .icon-button {
  width: 25px;
  height: 27px;
  flex-shrink: 0;
}
.floating-tower.is-collapsed .floating-tower-heading {
  border-bottom: 0;
  border-radius: 12px;
}
.floating-tower-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
.floating-tower .tower-summary {
  margin: 0;
  padding: 12px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid #edf1f7;
  background: #fff;
  font-size: 10px;
}
.floating-tower .roster {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  overscroll-behavior: contain;
  padding: 11px;
  gap: 9px;
  scrollbar-width: thin;
  scrollbar-color: #bdcadb transparent;
}
.floating-tower .student-card {
  flex-shrink: 0;
  padding: 11px;
  background: #fff;
}
.floating-tower .student-avatar {
  display: grid;
}
.floating-tower .student-card.pinned {
  background: #f7faff;
  border-color: #acc2e3;
}
.floating-tower .student-info > span {
  font-size: 9px;
}
.floating-tower .tower-note {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 13px;
  background: #fafbfd;
  border-top: 1px solid #e9eef5;
  font-size: 9px;
  line-height: 1.5;
}
.floating-preview.student-popover {
  display: block !important;
  right: auto;
  z-index: 80;
  padding: 12px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px #243c5d38;
}
.floating-preview .mini-large {
  width: auto;
  max-width: 100%;
  height: min(350px, calc(100dvh - 125px));
  max-height: none;
  aspect-ratio: auto !important;
  background: white;
}
.floating-preview .mini-large img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.floating-preview header {
  font-size: 10px;
}
.floating-preview p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (min-width: 1600px) {
  .workspace-layout.tutor-layout,
  .workspace-layout.tutor-layout.split-view {
    grid-template-columns: 245px minmax(0, 1fr);
  }
  .compact-topbar {
    min-height: 78px;
  }
}
@media (max-width: 1250px) {
  .lesson-title > span {
    display: none;
  }
  .compact-topbar {
    gap: 12px;
  }
  .workspace-layout.tutor-layout,
  .workspace-layout.tutor-layout.split-view {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}
@media (max-width: 950px) {
  .compact-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 14px;
  }
  .compact-topbar .lesson-identity {
    grid-column: 1;
    grid-row: 1;
  }
  .compact-topbar .top-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .compact-topbar .lesson-actions {
    grid-column: 1/-1;
    grid-row: 2;
    justify-content: flex-end;
  }
  .compact-topbar .breadcrumb {
    font-size: 8px;
  }
  .compact-topbar .view-label {
    font-size: 8px;
  }
  .lesson-title h1 {
    font-size: 17px;
  }
  .workspace-layout.tutor-layout,
  .workspace-layout.tutor-layout.split-view {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-layout .materials {
    display: none;
  }
  .workspace-layout.student-layout:has(.tower) {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
  .lesson-navigation-slot .board-switcher-meta > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
@media (max-width: 700px) {
  .lesson-navigation-slot .board-switcher {
    padding: 8px;
  }
  .lesson-navigation-slot .board-tab {
    min-width: 128px;
    padding: 8px;
  }
  .pane-tools .tool-set {
    flex-wrap: wrap;
  }
  .pane-scroll {
    padding: 12px 10px 20px;
  }
  .workspace-layout.student-layout:has(.tower) {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-layout.student-layout .tower.student-sidebar {
    display: block;
    position: fixed;
    right: 12px;
    bottom: 40px;
    width: min(260px, calc(100vw - 80px));
    max-height: 60dvh;
    min-height: 0;
    border: 1px solid #cbd7e7;
    border-radius: 10px;
    z-index: 50;
    box-shadow: 0 14px 40px #243c5d26;
  }
  .source-panel textarea {
    min-height: 0;
  }
}
@media (max-width: 540px) {
  .compact-topbar {
    padding: 9px 10px;
  }
  .lesson-title h1 {
    font-size: 14px;
    white-space: normal;
  }
  .compact-topbar .view-label select {
    width: 86px;
  }
  .compact-topbar .lesson-actions {
    gap: 4px;
  }
  .compact-topbar .lesson-actions .button {
    padding: 7px;
    font-size: 10px;
    min-height: 32px;
    gap: 5px;
  }
  .compact-topbar .count-select {
    padding: 5px;
    gap: 4px;
    min-height: 32px;
    font-size: 10px;
  }
  .compact-topbar .count-select input {
    width: 25px;
  }
  .two-panels .pane-position,
  .two-panels .pane-presence {
    display: none;
  }
  .pane-heading {
    padding: 8px 5px;
  }
  .pane-document-heading,
  .pane-tools {
    padding: 6px 4px;
  }
  .pane-footer {
    font-size: 7px;
    padding: 6px 4px;
  }
  .pane-footer > span:first-child {
    display: none;
  }
}

/* src/resources.css */
.resource-nav-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid #dce5f0;
  border-radius: 6px;
  color: #42638e;
  background: #fff;
  font-size: 10px;
  white-space: nowrap;
}
.resource-nav-button:hover {
  background: #eff5ff;
}
.live-writing-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #a37b43;
  white-space: nowrap;
}
.live-writing-status i,
.live-badge i,
.resource-ribbon i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
}
.live-writing-status.connected {
  color: #3b8b67;
}
.resource-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #f2f7ff;
  border-bottom: 1px solid #dce7f5;
  flex-shrink: 0;
  font-size: 9px;
  color: #6884a5;
}
.resource-ribbon > span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.resource-ribbon i {
  color: #4eaa7a;
}
.resource-ribbon a {
  color: #3964a0;
  text-decoration: underline;
}
.resource-ribbon button {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: #3a639b;
  font-size: 9px;
  padding: 0;
}
.pane-footer button {
  color: #a3444d;
  text-decoration: underline;
  font-size: 9px;
  padding: 0 5px;
}
.live-lesson {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  line-height: 1.2;
  color: #243957;
  user-select: text;
}
.live-lesson-page {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  font-family: Arial, sans-serif;
  background: #fff;
  text-align: left;
}
.lesson-answer {
  position: absolute;
  left: 48px;
  top: 714px;
  width: 624px;
  height: 140px;
  padding: 18px 20px;
  background: #f3f7fc;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  line-height: 1.2;
}
.lesson-answer > strong {
  font-size: 16px;
  color: #315e9c;
}
.lesson-answer > span {
  font-size: 13px;
  color: #7286a2;
}
.lesson-answer > div {
  display: flex;
  gap: 14px;
  align-items: center;
}
.lesson-answer label {
  font-size: 17px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lesson-answer input {
  width: 62px;
  border: 1px solid #c5d6ee;
  border-radius: 5px;
  padding: 5px 8px;
  background: #fff;
  font-size: 17px;
}
.lesson-answer button {
  font-size: 13px;
  background: #2a589d;
  color: #fff;
  padding: 8px 13px;
  border-radius: 5px;
}
.lesson-answer small {
  font-size: 11px;
  color: #8a9bb2;
}
.lesson-answer p {
  font-size: 11px;
  min-height: 15px;
  color: #496b95;
}
.standalone-lesson {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 30px;
  background: #edf2f8;
  min-height: 100vh;
}
.standalone-lesson nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  color: #4b668c;
  font-size: 13px;
}
.standalone-lesson nav a {
  font-weight: 700;
  margin-right: auto;
  color: #254e86;
}
.standalone-lesson nav button {
  padding: 7px 10px;
  background: white;
  border-radius: 5px;
  font-size: 12px;
}
.standalone-lesson .live-lesson {
  box-shadow: 0 8px 35px #21395215;
}
.resource-tabs {
  display: flex;
  gap: 5px;
  border-bottom: 1px solid #e0e7f1;
  margin-bottom: 18px;
}
.resource-tabs button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  border-bottom: 2px solid transparent;
  color: #8593a8;
  font-size: 12px;
}
.resource-tabs button[aria-selected=true] {
  color: #275aa0;
  border-color: #3e71b7;
  background: #f7faff;
}
.resource-tabs button > span {
  font-size: 10px;
  background: #e9eff8;
  padding: 1px 5px;
  border-radius: 4px;
}
.resource-destination {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid #e0e7f1;
  background: #f8faff;
  border-radius: 8px;
  margin-bottom: 23px;
  color: #6b819f;
  font-size: 11px;
}
.resource-destination label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #496387;
  font-weight: 500;
}
.resource-destination select {
  border: 1px solid #d5e0ee;
  background: #fff;
  border-radius: 5px;
  padding: 6px;
  max-width: 260px;
  font-size: 11px;
}
.resource-destination > span {
  margin-left: auto;
  font-size: 10px;
  color: #93a0b2;
}
.resource-intro {
  margin: 0 0 23px;
}
.resource-intro h3,
.capture-workflow h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.4px;
  margin: 8px 0;
}
.resource-intro p,
.capture-workflow p {
  color: #8493a8;
  font-size: 12px;
  line-height: 1.7;
  max-width: 600px;
}
.live-lesson-cards article {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  background: #f6f9fd;
  border: 1px solid #dce6f3;
  border-radius: 11px;
  padding: 22px;
  gap: 28px;
  max-width: 820px;
  align-items: center;
}
.live-lesson-cards article > img {
  width: 100%;
  height: 270px;
  object-fit: contain;
  box-shadow: 0 5px 20px #29496f12;
}
.live-lesson-cards article > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #3e8c68;
  background: #e5f3eb;
  border-radius: 20px;
  padding: 4px 9px;
}
.live-lesson-cards h3 {
  font-size: 25px;
  letter-spacing: -.6px;
}
.live-lesson-cards p {
  font-size: 12px;
  color: #758ba6;
  line-height: 1.7;
  max-width: 320px;
}
.live-lesson-cards small {
  font-size: 10px;
  color: #92a1b3;
}
.live-lesson-cards a {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #6080aa;
}
.capture-workflow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.capture-workflow .field {
  font-size: 11px;
  margin: 15px 0 8px;
}
.capture-workflow .field input {
  font-size: 12px;
}
.capture-source-link {
  font-size: 10px;
  color: #4670a9;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0;
}
.capture-buttons {
  display: flex;
  gap: 8px;
  margin-top: 17px;
  flex-wrap: wrap;
}
.capture-buttons .button {
  font-size: 11px;
  padding: 9px 10px;
}
.capture-workflow small {
  font-size: 10px;
  color: #899ab0;
  display: block;
  line-height: 1.6;
  margin-top: 10px;
}
.capture-preview {
  min-height: 320px;
  border: 1px dashed #c6d4e7;
  background: #f6f9fe;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  color: #90a4be;
}
.capture-preview strong {
  font-size: 13px;
  color: #6681a5;
}
.capture-preview > span {
  font-size: 11px;
  max-width: 230px;
  text-align: center;
}
.capture-preview.has-image {
  padding: 12px;
  background: #eaf0f8;
  border-style: solid;
}
.capture-preview img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.capture-preview > div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #518367;
  font-size: 10px;
}
.capture-footer {
  grid-column: 1/-1;
  border-top: 1px solid #e4eaf2;
  padding-top: 18px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.capture-footer > span {
  font-size: 10px;
  line-height: 1.7;
  color: #8c9bb0;
  max-width: 450px;
}
.resource-error {
  padding: 11px 14px;
  background: #fff2f0;
  border: 1px solid #f2d4cf;
  color: #a75b51;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 6px;
  margin-top: 18px;
}
.saved-work-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 52vh;
  overflow: auto;
  padding: 2px;
}
.saved-work-list article {
  display: flex;
  gap: 16px;
  align-items: center;
  border: 1px solid #e0e7f0;
  border-radius: 9px;
  padding: 14px;
}
.saved-work-list article > img {
  width: 52px;
  height: 68px;
  object-fit: contain;
  background: #f1f5fa;
  border: 1px solid #e4eaf3;
}
.saved-work-list article > div:not(.saved-work-actions) {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.saved-work-list strong {
  font-size: 12px;
  color: #344d70;
}
.saved-work-list span {
  font-size: 10px;
  color: #7b8ea8;
}
.saved-work-list small {
  font-size: 9px;
  color: #95a3b5;
}
.saved-work-list a {
  font-size: 10px;
  color: #5278ac;
  display: flex;
  gap: 4px;
  align-items: center;
}
.saved-work-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.saved-work-actions .button {
  font-size: 11px;
  padding: 7px 10px;
}
.saved-empty {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  color: #8b9db5;
  padding: 40px 25px;
  border: 1px dashed #d4dfed;
  border-radius: 9px;
}
.saved-empty p {
  font-size: 11px;
}
@media (max-width: 1150px) {
  .live-writing-status {
    display: none;
  }
  .board-layout-actions {
    gap: 5px;
  }
}
@media (max-width: 700px) {
  .board-switcher-meta {
    flex-wrap: wrap;
  }
  .resource-nav-button {
    font-size: 9px;
    padding: 5px;
  }
  .resource-nav-button svg {
    width: 12px;
  }
  .resource-ribbon {
    padding: 6px;
    font-size: 8px;
  }
  .resource-destination {
    flex-wrap: wrap;
  }
  .resource-destination > span {
    margin: 0;
  }
  .resource-tabs button {
    padding: 9px 8px;
    font-size: 10px;
    gap: 5px;
  }
  .resource-tabs button svg {
    width: 13px;
  }
  .live-lesson-cards article {
    grid-template-columns: 115px minmax(0, 1fr);
    padding: 15px;
    gap: 17px;
  }
  .live-lesson-cards article > img {
    height: 175px;
  }
  .live-lesson-cards h3 {
    font-size: 20px;
  }
  .capture-workflow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .capture-preview {
    min-height: 170px;
  }
  .capture-preview img {
    height: 200px;
  }
  .capture-footer {
    align-items: flex-end;
  }
  .resource-intro h3,
  .capture-workflow h3 {
    font-size: 19px;
  }
  .saved-work-list article {
    gap: 9px;
    padding: 10px;
  }
  .saved-work-list article > img {
    width: 35px;
    height: 48px;
  }
  .saved-work-actions a {
    font-size: 8px;
  }
  .saved-work-list {
    max-height: 50vh;
  }
  .standalone-lesson {
    padding: 12px;
  }
  .standalone-lesson nav > span {
    display: none;
  }
}

/* src/lesson-page-work.css */
.page-work-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1700;
  background: #15253b66;
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  padding: 24px;
}
.page-work-dialog {
  width: min(1060px, 100%);
  max-height: 92dvh;
  overflow: auto;
  background: #fff;
  border: 1px solid #e0e7ee;
  border-radius: 20px;
  box-shadow: 0 24px 90px #14233a33;
  color: #26364c;
  outline: none;
}
.page-work-dialog > header {
  display: flex;
  justify-content: space-between;
  padding: 26px 28px 18px;
  gap: 20px;
}
.page-work-dialog h2 {
  font-size: 25px;
  margin: 8px 0;
}
.page-work-dialog p {
  color: #667890;
  line-height: 1.5;
}
.page-work-dialog header p {
  margin: 0;
  font-size: 13px;
}
.page-work-dialog > nav {
  display: flex;
  gap: 8px;
  padding: 0 28px 18px;
  border-bottom: 1px solid #e7ecf2;
  overflow: auto;
}
.page-work-dialog > nav > button {
  display: flex;
  gap: 9px;
  align-items: center;
  text-align: left;
  border: 1px solid #e1e8f1;
  padding: 9px 14px;
  border-radius: 11px;
  white-space: nowrap;
  background: #fff;
}
.page-work-dialog > nav > button[aria-pressed=true] {
  border-color: #557dbf;
  background: #edf3ff;
  color: #264d91;
}
.page-work-dialog nav small {
  display: block;
  font-size: 11px;
  color: #6b7b91;
  margin-top: 4px;
}
.page-work-avatar {
  border-radius: 50%;
  background: #e6edf7;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
}
.page-work-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}
.page-work-layout.read-only {
  grid-template-columns: 1fr;
}
.page-work-checklist {
  padding: 24px 28px;
  min-width: 0;
}
.page-work-section-title {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.page-work-dialog h3 {
  margin: 0;
  font-size: 17px;
}
.page-work-section-title p {
  font-size: 12px;
  margin: 7px 0 0;
}
.page-work-checklist progress {
  width: 100%;
  height: 6px;
  accent-color: #3b8c71;
  margin: 16px 0 20px;
}
.page-work-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.page-work-list article {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid #e2e8ef;
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}
.page-work-list article.completed {
  background: #f3f9f6;
  border-color: #d9e9e0;
}
.page-work-thumb {
  height: 62px;
  width: 45px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid #dce3ec;
  border-radius: 4px;
  background: white;
}
.page-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.page-work-page {
  flex: 1;
  min-width: 0;
}
.page-work-page button {
  text-align: left;
  font-weight: 600;
  line-height: 1.35;
  font-size: 13px;
  color: #2e4463;
  background: none;
  border: 0;
  padding: 0;
}
.page-work-page span,
.page-work-page small {
  display: block;
  color: #6d7c91;
  font-size: 11px;
  margin-top: 5px;
}
.page-work-page small {
  color: #43758c;
}
.page-work-dialog input[type=checkbox],
.board-page-progress input {
  width: 15px;
  height: 15px;
  accent-color: #2d795d;
  flex-shrink: 0;
  cursor: pointer;
}
.page-work-done {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  white-space: nowrap;
  color: #426451;
}
.page-work-next {
  background: #f5f8fc;
  border-left: 1px solid #e4eaf2;
  padding: 24px;
}
.page-work-next h3 {
  margin-top: 9px;
}
.page-work-next p {
  font-size: 12px;
}
.page-work-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}
.page-work-options > button {
  display: flex;
  gap: 10px;
  align-items: center;
  background: white;
  border: 1px solid #dce5f1;
  border-radius: 10px;
  padding: 13px;
  text-align: left;
}
.page-work-options > button[aria-pressed=true] {
  background: #eaf1ff;
  border-color: #5680bf;
  color: #284e8d;
}
.page-work-options small {
  display: block;
  margin-top: 4px;
  color: #75849a;
  font-size: 11px;
}
.page-work-next label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  margin: 18px 0;
}
.page-work-next label small {
  font-weight: 400;
  color: #7b8ca3;
}
.page-work-next input,
.page-work-next textarea,
.page-work-next select {
  padding: 10px;
  border: 1px solid #d5deeb;
  border-radius: 8px;
  background: white;
  color: #314462;
  width: 100%;
  min-width: 0;
  font: inherit;
}
.page-work-next textarea {
  resize: vertical;
  font-weight: 400;
}
.page-work-next .page-work-footnote {
  margin-top: 24px;
  font-size: 11px;
  color: #8390a3;
}
.page-work-error,
.page-work-notice {
  margin: 0 28px 16px;
  padding: 12px;
  border-radius: 9px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.page-work-error {
  background: #fff0ed;
  color: #923e33;
}
.page-work-notice {
  background: #edf7f1;
  color: #286347 !important;
}
.page-work-error button {
  margin-left: auto;
}
.page-work-empty {
  text-align: center;
  padding: 32px 12px;
  color: #7c8aa0;
}
.page-work-empty h3 {
  margin-top: 12px;
}
.page-work-empty p {
  font-size: 13px;
}
.page-work-homework {
  background: #f6f8fc;
  border-radius: 12px;
  padding: 18px;
  margin-top: 20px;
}
.page-work-homework h3 {
  font-size: 14px;
  margin-top: 9px;
}
.page-work-homework p {
  font-size: 13px;
  white-space: pre-wrap;
}
.page-work-homework small {
  font-size: 11px;
  color: #74849c;
}
.page-work-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #dce6f0;
  border-radius: 10px;
  padding: 12px;
  background: #f8faff;
  margin: 12px 0;
}
.page-work-summary > span {
  flex: 1;
  font-size: 12px;
}
.page-work-summary small {
  display: block;
  font-size: 11px;
  color: #7a89a0;
  margin-top: 4px;
}
.page-work-summary .button {
  font-size: 11px;
}
.board-page-progress {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #f1f7f3;
  border-bottom: 1px solid #e1e8e4;
  flex-shrink: 0;
  font-size: 11px;
  color: #3b6955;
}
.board-page-progress label {
  display: flex;
  gap: 7px;
  align-items: center;
}
.board-page-progress button {
  border: 0;
  background: none;
  color: #315b96;
  font-size: 11px;
}
.board-page-progress small {
  color: #759082;
}
.student-page-work {
  margin: 12px 0;
  padding: 12px;
  background: #eef5fc;
  border-radius: 10px;
  font-size: 12px;
}
.student-page-work p {
  white-space: pre-wrap;
}
.student-page-work button {
  margin-top: 8px;
}
@media (max-width: 740px) {
  .page-work-backdrop {
    padding: 8px;
  }
  .page-work-dialog {
    max-height: 96dvh;
  }
  .page-work-layout {
    grid-template-columns: 1fr;
  }
  .page-work-dialog > header,
  .page-work-checklist {
    padding: 18px;
  }
  .page-work-dialog > nav {
    padding: 0 18px 14px;
  }
  .page-work-next {
    border-left: 0;
    border-top: 1px solid #e4eaf2;
    padding: 20px;
  }
  .page-work-dialog h2 {
    font-size: 21px;
  }
  .page-work-list article {
    flex-wrap: wrap;
  }
  .page-work-done {
    margin-left: auto;
  }
  .page-work-summary {
    flex-wrap: wrap;
  }
}
@media (min-width: 741px) {
  .page-work-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .page-work-dialog > header,
  .page-work-dialog > nav,
  .page-work-dialog > .page-work-notice,
  .page-work-dialog > .page-work-error {
    flex-shrink: 0;
  }
  .page-work-layout {
    min-height: 0;
    overflow: auto;
  }
  .page-work-next {
    align-self: start;
  }
  .page-work-dialog > header {
    padding-top: 20px;
    padding-bottom: 15px;
  }
  .page-work-dialog > nav {
    padding-bottom: 14px;
  }
  .page-work-next label {
    gap: 6px;
    margin: 14px 0;
  }
  .page-work-next .page-work-footnote {
    margin-top: 14px;
  }
}

/* src/homework.css */
.homework-submissions {
  padding: 22px 28px;
  overflow: auto;
  min-height: 0;
}
.homework-submission-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
}
.homework-submission-heading > span {
  font-size: 12px;
  color: #7a89a0;
}
.homework-upload {
  background: #f6f9fd;
  border: 1px solid #e0e8f1;
  border-radius: 14px;
  padding: 20px;
}
.homework-upload h3 {
  margin-top: 8px;
}
.homework-upload p {
  font-size: 13px;
}
.homework-upload fieldset {
  padding: 0;
  border: 0;
  margin: 18px 0;
}
.homework-upload legend {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.homework-page-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
}
.homework-page-choices label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
}
.homework-drop {
  border: 1px dashed #a8bcd8;
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 9px;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #45658e;
}
.homework-drop strong {
  font-size: 13px;
}
.homework-drop span {
  font-size: 11px;
  color: #7a8ba2;
}
.homework-note {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  align-items: stretch !important;
  font-size: 12px;
  font-weight: 600;
  margin: 16px 0;
}
.homework-note small {
  font-weight: 400;
  color: #7b8aa0;
}
.homework-note textarea {
  padding: 10px;
  border: 1px solid #d6dfeb;
  border-radius: 8px;
  resize: vertical;
  font: inherit;
  font-weight: 400;
  width: 100%;
  background: white;
  color: #30415b;
}
.homework-chosen-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.homework-chosen-files > div {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce5f0;
  padding: 8px;
  border-radius: 8px;
  background: white;
  font-size: 12px;
}
.homework-chosen-files span {
  max-width: 210px;
  overflow-wrap: anywhere;
}
.homework-chosen-files small {
  display: block;
  color: #8895a8;
  font-size: 10px;
}
.homework-chosen-files button {
  border: 0;
  background: none;
}
.homework-attempts {
  display: flex;
  gap: 8px;
  overflow: auto;
  margin-bottom: 16px;
}
.homework-attempts button {
  border: 1px solid #dee5ef;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: white;
}
.homework-attempts button[aria-pressed=true] {
  border-color: #6686ba;
  background: #f0f5ff;
}
.homework-attempts strong {
  font-size: 12px;
}
.homework-attempts small {
  font-size: 11px;
  color: #7f8ba0;
}
.homework-attempts em,
.homework-status {
  font-style: normal;
  font-size: 11px;
  color: #8d692b;
}
.homework-attempts .approved,
.homework-status.approved {
  color: #267352;
}
.homework-attempts .changes,
.homework-status.changes {
  color: #b1593b;
}
.homework-review > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.homework-review header p {
  font-size: 12px;
  margin: 8px 0 14px;
}
.homework-status {
  display: inline-block;
  padding: 5px 8px;
  background: #fbf4df;
  border-radius: 6px;
  font-weight: 600;
}
.homework-status.approved {
  background: #eaf5ed;
}
.homework-status.changes {
  background: #fff0e8;
}
.homework-student-note {
  border-left: 3px solid #a6bcde;
  background: #f5f8fd;
  padding: 12px 16px;
  margin: 0 0 15px;
  font-size: 12px;
}
.homework-student-note p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}
.homework-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
}
.homework-file-view {
  min-width: 0;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  overflow: hidden;
}
.homework-file-view nav {
  display: flex;
  gap: 6px;
  overflow: auto;
  padding: 10px;
  background: #f7f9fc;
}
.homework-file-view nav button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #e0e6ef;
  border-radius: 7px;
  background: white;
  font-size: 11px;
  min-width: 120px;
}
.homework-file-view nav button[aria-pressed=true] {
  border-color: #7895c3;
  color: #315998;
}
.homework-file-view nav span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 210px;
}
.homework-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid #e2e8f1;
  border-bottom: 1px solid #e2e8f1;
  font-size: 11px;
  color: #677b96;
}
.homework-preview-toolbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.homework-preview-toolbar button,
.homework-preview-toolbar a {
  padding: 3px;
  border: 0;
  background: none;
  color: #5273a1;
}
.homework-file-scroll {
  max-height: 500px;
  overflow: auto;
  background: #edf1f7;
  min-height: 180px;
}
.homework-file-scroll img {
  display: block;
  width: 100%;
  height: auto;
}
.homework-review-actions {
  background: #f5f8fc;
  border-radius: 12px;
  padding: 16px;
  align-self: start;
}
.homework-review-actions > label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 13px;
}
.homework-review-actions > label input {
  margin-top: 3px;
}
.homework-review-actions p {
  font-size: 12px;
}
.homework-review-actions .button {
  margin-top: 9px;
  font-size: 12px;
}
.homework-review-actions small {
  display: block;
  font-size: 11px;
  color: #79899e;
  line-height: 1.5;
  margin-top: 12px;
}
.homework-feedback {
  font-size: 13px;
  margin-top: 20px;
}
.homework-feedback p {
  white-space: pre-wrap;
}
.homework-empty {
  padding: 24px;
  text-align: center;
  color: #7a8da8;
}
.homework-empty h3 {
  margin: 12px 0 0;
}
.homework-empty p {
  font-size: 13px;
}
.homework-error,
.homework-success,
.homework-info {
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
}
.homework-error {
  background: #fff0ed;
  color: #9e4836 !important;
}
.homework-success {
  background: #edf7f1;
  color: #286b51 !important;
}
.homework-info {
  background: #edf3fc;
}
.homework-inbox {
  border: 1px solid #dce5ef;
  background: white;
  border-radius: 14px;
  padding: 18px;
  margin: 15px 0;
}
.homework-inbox > header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.homework-inbox h3 {
  font-size: 15px;
  margin: 0;
}
.homework-inbox p {
  font-size: 12px;
  color: #7a8a9f;
  margin: 5px 0 0;
}
.homework-inbox header > span {
  margin-left: auto;
  font-size: 11px;
  background: #fff3d8;
  padding: 6px 9px;
  border-radius: 8px;
  color: #8f6c2e;
}
.homework-inbox-items {
  display: flex;
  gap: 10px;
  overflow: auto;
  max-height: 190px;
}
.homework-inbox-items > button {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  background: #f8faff;
  padding: 12px;
  min-width: 240px;
  max-width: 300px;
}
.homework-inbox-items strong {
  font-size: 12px;
}
.homework-inbox-items span,
.homework-inbox-items em {
  font-size: 11px;
  color: #7185a2;
  font-style: normal;
}
.homework-inbox-items em {
  color: #315b93;
}
.homework-prep-queue {
  background: #fffbef;
  border: 1px solid #ecdfbc;
  border-radius: 10px;
  margin: 14px;
  padding: 12px;
}
.homework-prep-queue header {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  color: #896c30;
  margin-bottom: 8px;
}
.homework-prep-queue > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid #eee5ce;
  background: none;
}
.homework-prep-queue strong {
  font-size: 12px;
}
.homework-prep-queue small {
  display: block;
  font-size: 10px;
  color: #8c8d89;
  margin-top: 4px;
}
.homework-prep-queue em {
  font-size: 11px;
  font-style: normal;
  color: #956c23;
  white-space: nowrap;
}
.page-work-dialog > nav.page-work-sections {
  padding: 12px 28px;
  flex-shrink: 0;
  background: #f8faff;
  gap: 12px;
}
.page-work-dialog > nav.page-work-sections > button {
  padding: 8px 12px;
  font-size: 12px;
}
.page-work-sections .review-count {
  background: #f5d899;
  color: #6d511e;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
}
.page-work-summary small.pending {
  color: #916423;
  font-weight: 600;
}
@media (max-width: 740px) {
  .homework-submissions {
    padding: 18px;
  }
  .homework-review-layout {
    grid-template-columns: 1fr;
  }
  .homework-file-scroll {
    max-height: 400px;
  }
  .homework-review-actions {
    padding: 16px;
  }
  .homework-inbox header {
    flex-wrap: wrap;
  }
  .page-work-dialog > nav.page-work-sections {
    padding: 12px 18px;
  }
  .homework-inbox header > span {
    margin-left: 0;
  }
}
.homework-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.homework-body[hidden] {
  display: none;
}
.page-work-dialog > nav.page-work-sections button:last-child {
  margin-left: auto;
}
.homework-returned-note {
  border-left: 3px solid #d89b65;
  border-radius: 6px;
  background: #fff4e7;
  padding: 12px 15px;
  margin: 14px 0;
  font-size: 12px;
  color: #865a30;
}
.homework-returned-note p {
  white-space: pre-wrap;
  margin: 6px 0 0;
}
.homework-ink-tools {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px;
  background: #fff;
  border-bottom: 1px solid #e0e7f0;
}
.homework-ink-tools > div {
  display: flex;
  gap: 3px;
  padding-right: 8px;
  border-right: 1px solid #e2e7ef;
}
.homework-ink-tools button {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px;
  color: #73859d;
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.homework-ink-tools button[aria-pressed=true] {
  background: #eaf0fb;
  border-color: #b4c7e5;
  color: #315d9d;
}
.homework-ink-tools button.homework-ink-color {
  width: 23px;
  height: 23px;
  margin: 3px;
  background: var(--ink);
  border: 3px solid white;
  outline: 1px solid transparent;
  border-radius: 50%;
}
.homework-ink-tools button.homework-ink-color[aria-pressed=true] {
  outline-color: var(--ink);
}
.homework-ink-tools label {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 10px;
  color: #7d8ba0;
  margin-left: auto;
}
.homework-ink-tools select {
  font-size: 11px;
  background: white;
  border: 1px solid #dce4ef;
  border-radius: 5px;
  padding: 4px;
}
.homework-ink-hint {
  font-size: 10px !important;
  color: #73849b;
  background: #f8fafd;
  padding: 7px 12px;
  margin: 0 !important;
}
.homework-ink-paper {
  position: relative;
  min-width: 100%;
  background: white;
  line-height: 0;
}
.homework-ink-paper img {
  width: 100%;
  height: auto;
  user-select: none;
}
.homework-ink-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.homework-ink-layer.drawing {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
.homework-ink-note {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  max-width: 32%;
  padding: 8px;
  border: 1px solid #b8c9e1;
  box-shadow: 0 4px 20px #30446724;
  border-radius: 8px;
  background: #fff;
  line-height: 1.4;
}
.homework-ink-note textarea {
  font: 13px Arial, sans-serif;
  width: 100%;
  resize: vertical;
  border: 1px solid #dbe4ef;
  border-radius: 4px;
  padding: 6px;
  color: #a23042;
}
.homework-ink-note > div {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.homework-ink-note button {
  font-size: 11px;
  border: 1px solid #dce4ef;
  background: #f2f6fc;
  border-radius: 4px;
  padding: 5px 8px;
}
.homework-draft-status {
  font-size: 11px;
  line-height: 1.5;
  color: #7b6746;
  background: #faf3e6;
  padding: 9px;
  border-radius: 7px;
  margin: 10px 0;
}
.homework-returned-badge {
  font-size: 10px;
  color: #3a7a61;
  display: flex;
  gap: 6px;
  align-items: center;
  max-width: 230px;
  line-height: 1.4;
}
.homework-returned-download {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  font-size: 12px;
  color: #315d9d;
  text-decoration: none;
  border-top: 1px solid #dce4ef;
  background: #f4f8ff;
}
.homework-file-dot {
  color: #b7364a;
  font-size: 9px;
}
.homework-review > header {
  gap: 12px;
}
.homework-review-actions {
  position: sticky;
  top: 0;
}
.homework-annotation-editor .homework-file-scroll {
  max-height: 550px;
}
.homework-annotation-editor button:disabled {
  opacity: .4;
}
.homework-review-actions .button {
  white-space: normal;
  min-height: 36px;
}
@media (max-width: 740px) {
  .homework-review-actions {
    position: static;
  }
  .homework-ink-tools {
    gap: 5px;
  }
  .homework-ink-tools button {
    padding: 6px;
  }
  .homework-ink-note {
    max-width: 55%;
  }
}
.homework-discard {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #7c6b61;
  text-decoration: underline;
  font-size: 11px;
  padding: 5px;
}
.homework-focused {
  width: min(1160px, 100%);
}
.homework-focused > header {
  padding: 14px 26px 10px;
}
.homework-focused > header .eyebrow {
  display: none;
}
.homework-focused > header h2 {
  font-size: 21px;
  margin: 0 0 4px;
}
.homework-focused > nav[aria-label="Student page progress"] {
  padding-bottom: 10px;
}
.homework-focused > nav[aria-label="Student page progress"] > button {
  padding: 7px 11px;
}
.homework-focused > nav[aria-label="Student page progress"] small {
  display: inline;
  margin-left: 9px;
}
.homework-focused .page-work-avatar {
  height: 24px;
  width: 24px;
  font-size: 11px;
}
.homework-focused > nav.page-work-sections {
  padding-top: 8px;
  padding-bottom: 8px;
}
.homework-focused .homework-file-scroll {
  max-height: max(260px, calc(100dvh - 350px));
}

/* src/schedule.css */
.schedule-page {
  height: 100%;
  overflow: auto;
  padding: 26px 30px 40px;
  scrollbar-width: thin;
  color: #293d5b;
  background: #f6f8fc;
}
.schedule-heading {
  max-width: 1540px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.schedule-heading h1 {
  font-size: 28px;
  letter-spacing: -.8px;
  margin: 5px 0 7px;
}
.schedule-heading p {
  font-size: 12px;
  color: #798aa3;
  margin: 0;
}
.schedule-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.schedule-view-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  background: #f0f3f8;
}
.schedule-view-toggle button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 9px 14px;
  color: #75859d;
  font-size: 12px;
}
.schedule-view-toggle button[aria-pressed=true] {
  background: white;
  color: #2c55a0;
  box-shadow: 0 1px 5px #233d6010;
}
.schedule-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #75859d;
  font-size: 11px;
}
.schedule-demo {
  max-width: 1540px;
  margin: 17px auto 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #8491a6;
}
.schedule-demo span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-demo i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #799d84;
}
.schedule-layout {
  max-width: 1540px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(270px, 36fr) minmax(0, 64fr);
  gap: 22px;
  align-items: start;
}
.schedule-layout.weekly {
  grid-template-columns: minmax(0, 65fr) minmax(340px, 35fr);
  gap: 18px;
}
.schedule-overview {
  min-width: 0;
}
.schedule-checklist {
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.schedule-checklist h2 {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 550;
  color: #75859d;
  margin: 0 0 10px;
}
.schedule-checklist h2 > span {
  background: white;
  border: 1px solid #e0e7f0;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
}
.schedule-lesson {
  width: 100%;
  display: flex;
  gap: 12px;
  padding: 17px;
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 9px;
  text-align: left;
  color: #293d5b;
  margin-bottom: 9px;
}
.schedule-lesson.selected {
  background: #edf3fe;
  border-color: #6184c0;
  box-shadow: inset 3px 0 #2c55a0;
}
.schedule-check {
  border: 1px solid #d6dfeb;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #487b61;
  margin-top: 2px;
}
.schedule-lesson strong {
  font-size: 13px;
  font-weight: 600;
  display: block;
}
.schedule-lesson small {
  display: block;
  font-size: 11px;
  color: #7688a2;
  margin: 5px 0 8px;
}
.schedule-badge {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 5px;
  background: #f1f4f8;
  color: #75859d;
  font-size: 10px;
  line-height: 1.35;
}
.schedule-badge.needed,
.schedule-badge.returned {
  color: #95651f;
  background: #fff3de;
}
.schedule-badge.review {
  color: #2c55a0;
  background: #eaf0fc;
}
.schedule-badge.approved {
  color: #3e725c;
  background: #eaf5ed;
}
.schedule-detail {
  min-width: 0;
  border: 1px solid #dfe6f0;
  border-radius: 11px;
  background: white;
  overflow: hidden;
  scroll-margin-top: 18px;
}
.schedule-detail > header {
  padding: 23px;
  border-bottom: 1px solid #e4eaf2;
}
.schedule-detail h2 {
  font-size: 22px;
  letter-spacing: -.4px;
  margin: 8px 0;
}
.schedule-detail > header p {
  font-size: 12px;
  color: #75859d;
  margin: 10px 0 5px;
  line-height: 1.6;
}
.schedule-detail > header small {
  font-size: 11px;
  color: #8b99ae;
}
.schedule-record-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 17px;
}
.schedule-record-tabs {
  display: flex;
  gap: 23px;
  padding: 0 23px;
  border-bottom: 1px solid #e4eaf2;
}
.schedule-record-tabs button {
  display: flex;
  gap: 6px;
  align-items: center;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 14px 0;
  color: #8391a5;
  font-size: 12px;
}
.schedule-record-tabs button[aria-pressed=true] {
  border-bottom-color: #2c55a0;
  color: #2c55a0;
}
.schedule-record-tabs span {
  font-size: 10px;
  background: #f1f4f8;
  padding: 2px 5px;
  border-radius: 4px;
}
.schedule-record-tabs i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c7933c;
}
.schedule-log fieldset {
  margin: 0;
  padding: 22px 23px 12px;
  border: 0;
  min-width: 0;
}
.schedule-log label,
.schedule-review label {
  display: block;
  font-size: 12px;
  color: #4c607d;
  margin: 0 0 15px;
}
.schedule-log label > small {
  color: #91a0b5;
  margin-left: 5px;
}
.schedule-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.schedule-log input,
.schedule-log select,
.schedule-log textarea,
.schedule-review textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #dfe6f0;
  background: #fafbfd;
  border-radius: 6px;
  padding: 10px 11px;
  color: #344c6d;
  font: inherit;
  min-width: 0;
  line-height: 1.5;
}
.schedule-log textarea {
  min-height: 88px;
  resize: vertical;
}
.schedule-log input::placeholder,
.schedule-log textarea::placeholder {
  color: #9ba7b7;
}
.schedule-log fieldset:disabled {
  opacity: .8;
}
.schedule-log footer {
  padding: 16px 23px;
  background: #f7f9fc;
  border-top: 1px solid #e4eaf2;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.schedule-log footer > span {
  font-size: 11px;
  color: #7e8fa9;
  flex: 1;
}
.schedule-log footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.schedule-files-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 23px 18px;
  border: 0;
  background: transparent;
  padding: 0;
  color: #6282b3;
  font-size: 11px;
  text-align: left;
}
.schedule-manager-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px 23px;
  border-top: 1px solid #e4eaf2;
  font-size: 10px;
  color: #8b99ad;
  line-height: 1.6;
}
.schedule-manager-note svg {
  flex-shrink: 0;
}
.schedule-error,
.schedule-notice {
  padding: 14px 23px;
  font-size: 12px;
  line-height: 1.5;
}
.schedule-error {
  color: #9b423c;
  background: #fff4f1;
}
.schedule-error .button {
  margin-top: 8px;
}
.schedule-notice {
  color: #426c55;
  background: #eff8f1;
}
.schedule-empty {
  padding: 70px 20px;
  text-align: center;
  color: #7f90a8;
}
.schedule-empty h2 {
  font-size: 18px;
}
.schedule-empty .button {
  margin: 16px auto;
}
.schedule-empty-row {
  font-size: 12px;
  color: #8b99ad;
  line-height: 1.7;
  margin: 0;
  padding: 16px 0;
}
.schedule-calendar {
  background: white;
  border: 1px solid #dfe6f0;
  border-radius: 11px;
  overflow: hidden;
}
.schedule-calendar > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 19px;
}
.schedule-calendar h2 {
  font-size: 17px;
  letter-spacing: -.3px;
  margin: 0 0 5px;
}
.schedule-calendar header p {
  font-size: 11px;
  color: #8b99ad;
  margin: 0;
}
.schedule-week-nav {
  display: flex;
  gap: 4px;
}
.schedule-week-nav .button {
  padding: 8px 9px;
}
.schedule-week-grid {
  display: grid;
  grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  border-top: 1px solid #e4eaf2;
}
.schedule-time-axis {
  position: relative;
  margin-top: 64px;
  height: var(--calendar-height);
  font-size: 10px;
  color: #93a1b5;
}
.schedule-time-axis span {
  position: absolute;
  right: 6px;
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
}
.schedule-time-axis span:last-child {
  transform: translateY(-100%);
}
.schedule-day {
  min-width: 0;
  border-left: 1px solid #e4eaf2;
}
.schedule-day.weekend {
  background: #f9fafc;
}
.schedule-day h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin: 0;
  border-bottom: 1px solid #e4eaf2;
  font-size: 11px;
  font-weight: 400;
  color: #8190a7;
  gap: 3px;
}
.schedule-day h3 strong {
  font-size: 20px;
  font-weight: 500;
  color: #344c6d;
}
.schedule-day.today h3 {
  background: #eef3fd;
  color: #2c55a0;
}
.schedule-day.today h3 strong {
  color: #2c55a0;
  font-weight: 600;
}
.schedule-day-events {
  position: relative;
  height: var(--calendar-height);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--hour-height) - 1px),
      #e4eaf2 calc(var(--hour-height) - 1px),
      #e4eaf2 var(--hour-height));
}
.schedule-event {
  position: absolute;
  left: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 6px;
  border: 0;
  border-left: 3px solid #6c8cc4;
  border-radius: 5px;
  background: #edf3fe;
  color: #355e9f;
  text-align: left;
  line-height: 1.25;
  overflow-wrap: anywhere;
  font-size: 11px;
}
.schedule-event strong {
  font-size: 12px;
  font-weight: 600;
}
.schedule-event small {
  margin-top: auto;
  font-size: 10px;
}
.schedule-event[aria-pressed=true] {
  outline: 2px solid #456fae;
  outline-offset: 1px;
}
.schedule-event.needed,
.schedule-event.returned {
  background: #fff4e2;
  border-left-color: #c9984c;
  color: #946521;
}
.schedule-event.approved {
  background: #eaf5ed;
  border-left-color: #75a98b;
  color: #45775d;
}
.schedule-day-empty {
  display: none;
}
.schedule-calendar footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #e4eaf2;
  padding: 13px 19px;
  font-size: 11px;
  color: #8b99ad;
}
.schedule-calendar footer button {
  border: 0;
  border-radius: 5px;
  color: #95651f;
  background: #fff3de;
  font-size: 11px;
  padding: 6px 9px;
}
.empty-week .schedule-time-axis {
  height: 0;
}
.empty-week .schedule-time-axis span,
.empty-week .schedule-day-events {
  display: none;
}
.schedule-empty-week {
  text-align: center;
  padding: 45px 20px;
  color: #91a0b5;
}
.schedule-empty-week h3 {
  font-size: 14px;
  color: #657c9c;
}
.schedule-empty-week p {
  font-size: 12px;
}
.weekly .schedule-detail > header,
.weekly .schedule-log fieldset {
  padding: 20px;
}
.weekly .schedule-detail h2 {
  font-size: 20px;
}
.weekly .schedule-log footer > span {
  flex-basis: 100%;
}
.schedule-materials {
  padding: 21px 23px;
}
.schedule-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.schedule-section-title h3 {
  font-size: 13px;
  margin: 0;
}
.schedule-section-title.saved {
  padding-top: 23px;
  border-top: 1px solid #e4eaf2;
  margin-top: 22px;
}
.schedule-section-title > span {
  color: #8b99ad;
  font-size: 11px;
}
.schedule-material {
  display: flex;
  gap: 12px;
  margin: 14px 0;
  align-items: center;
}
.schedule-material-thumb {
  border: 1px solid #dfe6f0;
  padding: 3px;
  border-radius: 5px;
  background: #f8faff;
  width: 55px;
  flex-shrink: 0;
}
.schedule-material-thumb img {
  display: block;
  width: 100%;
  height: 66px;
  object-fit: contain;
}
.schedule-material > div {
  min-width: 0;
}
.schedule-material strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.schedule-material small {
  font-size: 10px;
  color: #91a0b5;
  display: block;
  margin: 5px 0;
}
.schedule-material > div > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.schedule-material > div button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #6282b3;
  font-size: 10px;
  padding: 3px 0;
}
.schedule-saved-work {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid #dfe6f0;
  border-radius: 7px;
  background: #f8faff;
  color: #5575a6;
  text-align: left;
  margin-top: 9px;
}
.schedule-saved-work > span {
  flex: 1;
  min-width: 0;
}
.schedule-saved-work strong {
  display: block;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.schedule-saved-work small {
  display: block;
  font-size: 10px;
  color: #8798af;
  margin-top: 5px;
}
.schedule-review {
  padding: 20px 23px;
  background: #f3f7fe;
  border-top: 1px solid #e4eaf2;
}
.schedule-review h3 {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 13px;
  margin: 0 0 15px;
}
.schedule-review > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.schedule-review-note {
  margin: 0 23px 18px;
  padding: 12px;
  border-radius: 6px;
  background: #fff5e4;
  color: #946521;
  font-size: 12px;
  line-height: 1.6;
}
.schedule-review-note p {
  margin: 5px 0 0;
  white-space: pre-wrap;
}
.lesson-context-bar {
  padding: 9px 24px;
  background: #edf3fe;
  border-bottom: 1px solid #dce6f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #5b79a6;
}
.lesson-context-bar button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #2c55a0;
  padding: 3px;
  font-size: 11px;
}
.lesson-context-bar > span {
  display: flex;
  gap: 12px;
  align-items: center;
}
.classroom-surface .shell {
  min-height: 0;
}
.lesson-attached-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  background: #edf3fe;
  border: 1px solid #dce6f7;
  border-radius: 7px;
  color: #5b79a6;
  font-size: 12px;
  margin-bottom: 16px;
}
.lesson-attach-button {
  margin-top: 9px !important;
}
@media (max-width: 1150px) {
  .schedule-layout.weekly {
    grid-template-columns: 1fr;
  }
  .weekly .schedule-log fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .weekly .schedule-form-row,
  .weekly .schedule-log fieldset > label:last-child {
    grid-column: 1/-1;
  }
  .weekly .schedule-log footer > span {
    flex-basis: auto;
  }
  .schedule-page {
    padding: 22px;
  }
  .schedule-layout {
    grid-template-columns: minmax(245px, 38fr) minmax(0, 62fr);
  }
}
@media (max-width: 700px) {
  .schedule-page {
    padding: 20px 14px 35px;
  }
  .schedule-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .schedule-overview,
  .schedule-detail {
    width: 100%;
  }
  .schedule-heading-actions {
    gap: 10px;
  }
  .schedule-demo {
    line-height: 1.6;
  }
  .schedule-heading h1 {
    font-size: 25px;
  }
  .schedule-detail > header,
  .schedule-materials {
    padding: 18px;
  }
  .schedule-record-tabs {
    padding: 0 18px;
    gap: 16px;
  }
  .schedule-record-tabs button {
    font-size: 11px;
  }
  .schedule-week-grid {
    display: block;
  }
  .schedule-time-axis {
    display: none;
  }
  .schedule-day {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    border-left: 0;
    border-bottom: 1px solid #e4eaf2;
  }
  .schedule-day h3 {
    height: auto;
    min-height: 65px;
    border-bottom: 0;
    border-right: 1px solid #e4eaf2;
  }
  .schedule-day-events {
    height: auto;
    min-height: 65px;
    background: none;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  .schedule-event {
    position: static;
    height: auto !important;
    min-height: 80px;
    padding: 10px;
    gap: 4px;
  }
  .schedule-day-empty {
    display: block;
    padding: 10px;
    font-size: 11px;
    color: #91a0b5;
  }
  .schedule-event small {
    margin-top: 3px;
  }
  .empty-week .schedule-day {
    display: none;
  }
  .schedule-calendar header {
    padding: 15px;
  }
  .schedule-week-nav .button {
    min-width: 40px;
    min-height: 40px;
  }
  .schedule-log input,
  .schedule-log select,
  .schedule-log textarea,
  .schedule-review textarea {
    font-size: 16px;
  }
  .weekly .schedule-log fieldset {
    display: block;
  }
  .schedule-log footer {
    padding: 16px;
  }
  .schedule-log footer > span {
    flex-basis: 100%;
  }
  .schedule-form-row {
    gap: 10px;
  }
  .schedule-lock {
    font-size: 10px;
  }
  .lesson-context-bar {
    padding: 9px 14px;
    flex-wrap: wrap;
  }
  .lesson-context-bar > span {
    flex-wrap: wrap;
  }
  .schedule-record-actions .button {
    min-height: 40px;
  }
}

/* src/lesson-mastery.css */
.lesson-mastery-fields {
  margin: 0 23px 22px;
  padding: 20px;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #3d5773;
}
.lesson-mastery-fields > header {
  display: flex;
  align-items: center;
  gap: 11px;
}
.lesson-mastery-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #dbe6f0;
  background: #edf3fa;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #6e91b6;
  flex-shrink: 0;
}
.lesson-mastery-fields h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.lesson-mastery-fields header p {
  font-size: 10px;
  color: #8da0b5;
  margin: 5px 0 0;
}
.lesson-mastery-count {
  margin-left: auto;
  font-size: 10px;
  white-space: nowrap;
  color: #89a0b8;
}
.lesson-mastery-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0;
  padding: 11px;
  background: #edf4f0;
  color: #759181;
  font-size: 9px;
  line-height: 1.8;
  border-radius: 6px;
}
.lesson-mastery-rule svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.lesson-mastery-rule b {
  font-weight: 600;
}
.lesson-skill-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: white;
  color: #5a7fa9;
  border: 1px solid #d7e2ef;
  border-radius: 6px;
  padding: 9px 11px;
  width: 100%;
  font: inherit;
  font-size: 10px;
  text-align: left;
}
.lesson-skill-toggle > svg:last-child {
  margin-left: auto;
}
.lesson-mastery-empty {
  font-size: 11px;
  line-height: 1.8;
  color: #8ca0b5;
  margin: 15px 0 0;
}
.lesson-skill-picker {
  margin: 13px 0 0;
}
.lesson-picker-controls {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lesson-picker-controls select,
.lesson-picker-controls input {
  background: white;
  border: 1px solid #d9e3ed;
  border-radius: 5px;
  padding: 8px;
  color: #526e8d;
  font: inherit;
  font-size: 10px;
  width: 100%;
  min-width: 0;
}
.lesson-picker-controls label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: #94a6b9;
}
.lesson-picker-results {
  max-height: 250px;
  overflow: auto;
  border: 1px solid #e1e8f0;
  border-radius: 6px;
  background: white;
  margin-top: 10px;
}
.lesson-picker-results > label {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid #edf1f6;
}
.lesson-picker-results input {
  width: 14px !important;
  height: 14px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: #4776aa;
}
.lesson-picker-results label > span {
  flex: 1;
  min-width: 0;
}
.lesson-picker-results strong {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #4d6987;
  line-height: 1.6;
}
.lesson-picker-results small {
  font-size: 8px;
  color: #91a3b7;
  display: block;
  margin-top: 4px;
  line-height: 1.6;
}
.lesson-picker-results p,
.lesson-picker-count {
  font-size: 9px;
  color: #8fa2b7;
  line-height: 1.7;
  padding: 8px 0;
  margin: 0;
}
.lesson-picker-results p {
  padding: 12px;
}
.lesson-mastery-students {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 17px 0 10px;
}
.lesson-mastery-students button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid #dfe7ef;
  border-radius: 6px;
  background: #fff;
  color: #8196ac;
  padding: 8px;
  font-size: 10px;
}
.lesson-mastery-students button[aria-pressed=true] {
  background: #eaf1f9;
  border-color: #acc4df;
  color: #446f9f;
}
.lesson-mastery-students button > span {
  display: grid;
  place-items: center;
  background: #e9eff5;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: 9px;
}
.lesson-mastery-students small {
  font-size: 8px;
  color: #93a7bd;
}
.lesson-assessment-target {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 9px;
  color: #8da1b7;
  margin: 3px 0 12px;
}
.lesson-assessment-target strong {
  font-weight: 500;
  color: #6784a3;
}
.lesson-assessment-cards {
  display: grid;
  gap: 12px;
}
.lesson-assessment-card {
  padding: 15px;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  background: white;
  min-width: 0;
}
.lesson-assessment-card > header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lesson-assessment-card h4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  margin: 4px 0 0;
  color: #42607f;
}
.lesson-assessment-card header small {
  font-size: 8px;
  color: #99adc2;
}
.lesson-assessment-card header button {
  margin-left: auto;
  background: none;
  border: 0;
  color: #9baabd;
  padding: 2px;
}
.lesson-assessment-state {
  display: flex;
  gap: 9px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 16px;
}
.lesson-assessment-state > span {
  font-size: 8px;
  line-height: 1.7;
  color: #93a4b6;
  background: #f2f5f9;
  border-radius: 4px;
  padding: 4px 6px;
}
.lesson-assessment-state .approved {
  background: #edf6f0;
  color: #5f9275;
}
.lesson-assessment-state .scored {
  background: #eaf2fb;
  color: #6486af;
}
.lesson-assessment-state button {
  font-size: 8px;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7a98b7;
  padding: 0;
}
.lesson-result-fields {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
}
.lesson-assessment-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 9px;
  color: #839bb3;
}
.lesson-assessment-card input:not([type=checkbox]),
.lesson-assessment-card textarea,
.lesson-saved-reference {
  width: 100%;
  min-width: 0;
  border: 1px solid #dce5ee;
  border-radius: 5px;
  padding: 8px;
  color: #536f8a;
  font: inherit;
  font-size: 10px;
  background: #fbfcfe;
}
.lesson-assessment-card input:disabled,
.lesson-assessment-card textarea:disabled {
  opacity: 1;
  background: #f7f9fb;
  color: #8194a8;
}
.lesson-assessment-card .lesson-result-note {
  margin-top: 12px;
}
.lesson-assessment-card textarea {
  resize: vertical;
  min-height: 58px;
  line-height: 1.7;
}
.lesson-saved-reference {
  margin-top: 9px;
  color: #829bb4;
  font-size: 9px;
}
.lesson-result-decisions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e8edf2;
}
.lesson-result-decisions label {
  flex-direction: row;
  align-items: center;
  font-size: 9px;
  gap: 7px;
  color: #698c7a;
  line-height: 1.7;
}
.lesson-result-decisions input {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
  accent-color: #548a72;
}
.lesson-result-decisions label:has(input:disabled) {
  color: #9eacb8;
}
.lesson-published-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  line-height: 1.6;
  margin-top: 12px;
  color: #92a6b8;
}
.lesson-mastery-publish-note {
  font-size: 9px;
  color: #7e94ac;
  line-height: 1.9;
  margin: 14px 0 0;
}
.lesson-mastery-error {
  font-size: 10px;
  background: #fff0eb;
  color: #a46450;
  border-radius: 5px;
  padding: 10px;
  line-height: 1.8;
}
.lesson-mastery-error button {
  display: block;
  margin-top: 8px;
  border: 1px solid #d8b6ab;
  border-radius: 4px;
  background: white;
  padding: 6px 8px;
  color: inherit;
}
.lesson-mastery-fields button:disabled {
  opacity: .5;
  cursor: default;
}
.classroom-lesson-skills {
  border-bottom: 1px solid #e0e7ef;
  background: #f8fafc;
  padding: 10px 20px;
  flex-shrink: 0;
}
.classroom-skills-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.classroom-skills-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6b86a3;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.classroom-skills-main > select {
  color: #67819f;
  background: white;
  border: 1px solid #dde5ee;
  border-radius: 5px;
  padding: 7px;
  font-size: 9px;
  max-width: 220px;
  min-width: 140px;
}
.classroom-skill-chips {
  display: flex;
  gap: 5px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.classroom-skill-chips > span {
  border: 1px solid #dfe8f1;
  border-radius: 5px;
  color: #7e98b4;
  background: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8px;
  padding: 6px 8px;
  max-width: 210px;
  flex-shrink: 1;
}
.classroom-skill-chips small {
  font-size: 9px;
  color: #9aabba;
  white-space: nowrap;
}
.classroom-skills-actions {
  display: flex;
  gap: 7px;
  margin-left: auto;
  white-space: nowrap;
}
.classroom-skills-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dce5ef;
  background: white;
  border-radius: 5px;
  color: #7b95b1;
  padding: 7px 9px;
  font-size: 9px;
}
.classroom-skills-actions .classroom-worklog-link {
  background: #eaf1f9;
  border-color: #d1e0ef;
  color: #5a7fa9;
}
.classroom-skills-actions button:disabled {
  opacity: .4;
}
.classroom-lesson-skills > p {
  font-size: 10px;
  color: #a66d59;
}
.classroom-lesson-skills > p > button {
  margin-left: 10px;
  border: 0;
  background: none;
  color: #577da6;
}
.classroom-skills-dialog {
  width: min(620px, calc(100vw - 30px));
  max-height: 90dvh;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 25px;
  color: #45627f;
  box-shadow: 0 20px 100px #243f6540;
}
.classroom-skills-dialog::backdrop {
  background: #263d5b55;
  backdrop-filter: blur(3px);
}
.classroom-skills-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}
.classroom-skills-dialog h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.4px;
  margin: 8px 0;
}
.classroom-skills-dialog header small {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #8fa4ba;
}
.classroom-skills-dialog p {
  font-size: 10px;
  color: #89a0b6;
  line-height: 1.8;
}
.classroom-skills-dialog header button {
  background: none;
  border: 0;
  color: #92a7bc;
}
.classroom-skills-dialog .lesson-picker-results {
  max-height: 360px;
}
.classroom-skills-dialog .lesson-picker-controls {
  flex-direction: row;
}
.classroom-skills-dialog .lesson-picker-controls > * {
  flex: 1;
  min-width: 0;
}
.classroom-skills-dialog footer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e1e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.classroom-skills-dialog footer > button:first-child {
  border: 0;
  background: none;
  color: #8aa0b6;
  font-size: 11px;
}
.mastery-lesson-source {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #e1e8ee;
  margin-top: 18px;
  padding-top: 17px;
  color: #8299af;
  font-size: 9px;
  line-height: 1.7;
}
.mastery-lesson-source strong {
  font-weight: 500;
  color: #6483a1;
}
.mastery-lesson-source button {
  display: flex;
  gap: 6px;
  align-items: center;
  align-self: flex-start;
  border: 1px solid #dce6f0;
  color: #6f8fab;
  background: #f5f8fc;
  border-radius: 5px;
  padding: 7px 10px;
  font-size: 9px;
}
@media (max-width: 1200px) {
  .classroom-skills-main {
    flex-wrap: wrap;
    gap: 9px;
  }
  .classroom-skill-chips {
    order: 3;
    flex-basis: 100%;
  }
  .classroom-skills-main > select {
    max-width: 200px;
  }
  .classroom-skills-actions {
    margin-left: auto;
  }
}
@media (max-width: 700px) {
  .lesson-mastery-fields {
    margin: 0 16px 18px;
    padding: 15px;
  }
  .lesson-result-fields {
    grid-template-columns: 1fr;
  }
  .lesson-assessment-card input:not([type=checkbox]),
  .lesson-assessment-card textarea,
  .lesson-saved-reference {
    font-size: 16px;
  }
  .lesson-assessment-card {
    padding: 13px;
  }
  .lesson-mastery-fields h3 {
    font-size: 13px;
  }
  .lesson-mastery-count {
    font-size: 9px;
  }
  .lesson-assessment-target {
    flex-direction: column;
  }
  .classroom-lesson-skills {
    padding: 9px 14px;
  }
  .classroom-skills-main > select {
    flex: 1;
    max-width: 100%;
    min-width: 100px;
  }
  .classroom-skills-actions {
    order: 4;
    width: 100%;
    justify-content: flex-end;
  }
  .classroom-skill-chips > span {
    max-width: 180px;
  }
  .classroom-skills-dialog {
    padding: 19px;
  }
  .classroom-skills-dialog .lesson-picker-controls {
    flex-direction: column;
  }
  .classroom-skills-dialog .lesson-picker-results {
    max-height: 260px;
  }
  .lesson-picker-controls input,
  .lesson-picker-controls select {
    font-size: 14px;
  }
}

/* src/classrooms.css */
.classrooms-page {
  height: 100%;
  overflow: auto;
  padding: 32px 30px 100px;
  background: #f5f7fb;
  color: #293e5b;
}
.hub-heading,
.hub-overview,
.hub-layout,
.classrooms-page > .hub-error,
.classrooms-page > .hub-notice {
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
}
.hub-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.hub-heading h1 {
  font-size: 28px;
  letter-spacing: -.8px;
  margin: 5px 0 8px;
}
.hub-heading p {
  font-size: 12px;
  color: #8593a8;
  margin: 0;
  line-height: 1.6;
}
.hub-overview {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  padding: 25px 0 24px;
  color: #8b9bb0;
  font-size: 11px;
}
.hub-overview > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hub-overview b {
  color: #536b8c;
  font-weight: 600;
}
.hub-online i,
.hub-ready i,
.hub-card-members em i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #76a591;
  display: inline-block;
}
.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px;
  align-items: start;
}
.hub-main {
  min-width: 0;
}
.hub-toolbar {
  display: flex;
  gap: 13px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.hub-search {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: white;
  color: #91a0b5;
  min-width: 0;
  max-width: 235px;
}
.hub-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: 11px;
  color: #526b8e;
}
.hub-calendar {
  background: white;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  overflow: hidden;
}
.hub-calendar > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  flex-wrap: wrap;
}
.hub-calendar > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6f85a5;
}
.hub-calendar > header strong {
  font-weight: 600;
  color: #4b6588;
}
.hub-calendar > header span {
  font-size: 10px;
  color: #94a0b2;
}
.hub-calendar > header button {
  border: 0;
  background: #f7f9fc;
  border-radius: 5px;
  color: #7a8eaa;
  min-height: 26px;
  padding: 5px;
  font-size: 10px;
  display: flex;
  align-items: center;
}
.hub-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid #e7edf4;
  overflow: auto;
}
.hub-calendar-days > section {
  padding: 10px 5px;
  min-height: 127px;
  border-right: 1px solid #edf1f7;
  min-width: 0;
}
.hub-calendar-days > section:last-child {
  border: 0;
}
.hub-calendar h3 {
  margin: 0 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  font-size: 9px;
  color: #9aa5b7;
  font-weight: 400;
}
.hub-calendar h3 b {
  font-size: 14px;
  color: #50698d;
  font-weight: 500;
}
.hub-calendar .today {
  background: #f2f6fd;
}
.hub-calendar .today h3 b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin: -4px 0 -3px;
  background: #315c9c;
  border-radius: 50%;
  color: white;
}
.hub-calendar-days button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 2px solid #9ab5db;
  border-radius: 4px;
  background: #eef3fb;
  color: #5575a3;
  padding: 7px 5px;
  font-size: 9px;
  margin-top: 5px;
  min-width: 0;
}
.hub-calendar-days button.selected {
  background: #e1eafa;
  border-color: #3f6dae;
}
.hub-calendar-days button strong {
  font-size: 10px;
  font-weight: 550;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}
.hub-calendar-days button small {
  font-size: 9px;
  line-height: 1.5;
}
.hub-no-lesson {
  display: block;
  text-align: center;
  color: #d2dae7;
  margin-top: 15px;
}
.hub-calendar footer {
  padding: 12px 16px;
  border-top: 1px solid #edf1f6;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: #98a5b8;
  font-size: 9px;
}
.hub-calendar footer span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.hub-calendar.full .hub-calendar-days > section {
  min-height: 300px;
}
.hub-calendar.full .hub-calendar-days button {
  min-height: 85px;
  justify-content: center;
}
.hub-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 28px 0 13px;
}
.hub-list-heading h2 {
  font-size: 13px;
  color: #5f7696;
  margin: 0;
  font-weight: 550;
}
.hub-list-heading > div {
  display: flex;
  gap: 4px;
}
.hub-list-heading button {
  font-size: 10px;
  color: #91a1b7;
  background: none;
  border: 0;
  padding: 6px 9px;
  border-radius: 5px;
}
.hub-list-heading button[aria-pressed=true] {
  background: #e8eef8;
  color: #5376a8;
}
.hub-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hub-class-card {
  min-width: 0;
  border: 1px solid #dfe6f0;
  background: white;
  border-radius: 11px;
  overflow: hidden;
  transition: border-color .15s;
}
.hub-class-card.selected {
  border-color: #9bb4d9;
  box-shadow: 0 2px 10px #2b4d7810;
}
.hub-card-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 17px 13px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: #2e4567;
}
.hub-class-symbol {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 11px;
  background: #eaf0fb;
  color: #6b8aba;
  flex-shrink: 0;
}
.hub-class-symbol.tone-1 {
  background: #edf4f1;
  color: #83a28e;
}
.hub-class-symbol.tone-2 {
  background: #f4eff9;
  color: #a18ab6;
}
.hub-card-preview > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.hub-card-preview > svg {
  flex-shrink: 0;
  color: #a6b5c8;
}
.hub-card-preview small {
  font-size: 9px;
  color: #91a1b7;
  display: block;
  margin-bottom: 5px;
}
.hub-card-preview strong {
  font-size: 13px;
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.hub-class-time {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: #8b9db6;
  margin-top: 8px;
  line-height: 1.5;
}
.hub-class-time svg {
  flex-shrink: 0;
}
.hub-card-members {
  padding: 6px 17px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #8194af;
  min-width: 0;
}
.hub-avatars {
  display: flex;
  padding-right: 4px;
  flex-shrink: 0;
}
.hub-avatars span {
  width: 25px;
  height: 25px;
  background: #eef2f8;
  border: 2px solid white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-right: -5px;
  font-size: 9px;
  color: #7c94b8;
}
.hub-card-members > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-card-members em {
  font-size: 9px;
  white-space: nowrap;
  margin-left: auto;
  color: #79a28d;
  font-style: normal;
}
.hub-class-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 15px;
  background: #fafbfd;
  border-top: 1px solid #edf1f7;
  font-size: 9px;
  color: #96a6bc;
  flex-wrap: wrap;
}
.hub-class-card footer > span,
.hub-class-card footer > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hub-join,
.hub-window {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  border: 1px solid #dce5f2;
  padding: 7px 10px;
  color: #6081b1;
  background: white;
  font-size: 10px;
}
.hub-window {
  padding: 6px;
}
.hub-join:hover {
  background: #edf3fd;
}
.hub-preview {
  border: 1px solid #dfe6f0;
  border-radius: 13px;
  background: white;
  padding: 20px;
  position: sticky;
  top: 0;
  min-width: 0;
}
.hub-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.hub-preview-heading .eyebrow {
  font-size: 8px;
  letter-spacing: 1.6px;
}
.hub-ready {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 9px;
  color: #80a392;
}
.hub-preview-cover {
  height: 130px;
  margin: 19px 0;
  background:
    linear-gradient(
      120deg,
      #e8effa,
      #f7f9fd);
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #86a2c7;
  overflow: hidden;
}
.hub-preview-cover > span {
  display: grid;
  place-items: center;
  border: 1px solid #ffffffd1;
  background: #ffffffa6;
  width: 64px;
  height: 75px;
  transform: rotate(-8deg);
  border-radius: 7px;
  box-shadow: 0 6px 20px #43698c09;
}
.hub-paper-lines {
  width: 66px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: rotate(6deg);
}
.hub-paper-lines i {
  height: 2px;
  background: #d1dded;
  display: block;
}
.hub-paper-lines i:last-child {
  width: 65%;
}
.hub-preview-cover b {
  position: absolute;
  left: 13px;
  bottom: 11px;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: .5px;
  color: #89a0bf;
}
.hub-preview h2 {
  font-size: 20px;
  line-height: 1.35;
  margin: 12px 0;
  color: #2e4669;
  letter-spacing: -.35px;
  overflow-wrap: anywhere;
}
.hub-preview-time {
  font-size: 10px;
  color: #7d92ae;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.hub-routine {
  font-size: 10px;
  line-height: 1.6;
  color: #9aa8bb;
  margin: 8px 0;
}
.hub-preview-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 19px 0 23px;
}
.hub-preview-actions .button {
  font-size: 10px;
  padding: 10px 11px;
}
.hub-preview > section {
  border-top: 1px solid #e8eef5;
  padding: 18px 0 0;
  margin-top: 15px;
}
.hub-preview section > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}
.hub-preview h3 {
  font-size: 11px;
  font-weight: 600;
  margin: 0;
  color: #607896;
}
.hub-preview section > header > span {
  font-size: 9px;
  color: #9ba9bc;
}
.hub-person {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
}
.hub-person-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf2f9;
  font-size: 10px;
  color: #8ca0bc;
}
.hub-person-avatar.tutor {
  background: #e7edf9;
  color: #6d89b3;
}
.hub-person strong {
  font-size: 10px;
  font-weight: 550;
  display: block;
  color: #607894;
}
.hub-person small {
  font-size: 8px;
  display: block;
  color: #9cabbf;
  margin-top: 4px;
}
.hub-person em {
  margin-left: auto;
  font-style: normal;
  font-size: 8px;
  color: #a9b3c1;
  text-align: right;
}
.hub-person em.online {
  color: #6f9b86;
}
.hub-material {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 12px 0;
  color: #8da3c2;
}
.hub-material > div {
  min-width: 0;
}
.hub-material > svg {
  flex-shrink: 0;
}
.hub-material strong {
  font-size: 10px;
  display: block;
  color: #7389a6;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.hub-material small {
  font-size: 9px;
  color: #a5b1c2;
  display: block;
  margin-top: 4px;
}
.hub-saved {
  font-size: 9px;
  color: #87a18e;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 15px 0 0;
}
.hub-record-link {
  width: 100%;
  border: 1px solid #e1e9f4;
  background: #f8faff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6a89b5;
  border-radius: 6px;
  padding: 11px;
  font-size: 10px;
  margin-top: 20px;
}
.hub-manager-note {
  font-size: 9px;
  color: #9cabc0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.7;
  margin: 18px 0 0;
}
.hub-manager-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.hub-general {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #96a9c4;
  border: 0;
  background: none;
  font-size: 10px;
  padding: 24px 0;
}
.hub-empty {
  text-align: center;
  padding: 45px 15px;
  color: #92a4be;
}
.hub-empty h3 {
  font-size: 14px;
  font-weight: 500;
}
.hub-empty p {
  font-size: 11px;
  line-height: 1.6;
}
.hub-error,
.hub-notice {
  font-size: 11px;
  padding: 13px 16px;
  border-radius: 7px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.hub-error {
  background: #fff2ef;
  color: #a4655c;
}
.hub-error button {
  margin-left: 12px;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
}
.hub-notice {
  background: #edf5ef;
  color: #739780;
}
.hub-create {
  width: 540px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  border: 1px solid #d9e3ef;
  border-radius: 15px;
  padding: 0;
  color: #425c80;
  box-shadow: 0 24px 80px #1c314b25;
}
.hub-create::backdrop {
  background: #293e5c4d;
  backdrop-filter: blur(5px);
}
.hub-create form {
  padding: 27px;
}
.hub-create header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hub-create h2 {
  font-size: 23px;
  margin: 6px 0 0;
  letter-spacing: -.5px;
}
.hub-create header button {
  background: none;
  border: 0;
  color: #8d9fb6;
}
.hub-create .hub-create-content > p {
  font-size: 11px;
  color: #94a5bc;
  line-height: 1.7;
  margin: 16px 0 20px;
}
.hub-create .hub-create-content > label {
  display: block;
  margin-top: 16px;
  font-size: 11px;
  color: #6d83a3;
}
.hub-create .hub-create-content > label input,
.hub-create select {
  margin-top: 8px;
  padding: 11px;
  border: 1px solid #dce5f0;
  border-radius: 7px;
  width: 100%;
  background: #fafbfd;
  font: inherit;
  color: #536c90;
}
.hub-create label > small {
  display: block;
  font-size: 9px;
  margin-top: 7px;
  color: #a4b1c4;
}
.hub-create fieldset {
  margin: 21px 0 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.hub-create legend {
  font-size: 11px;
  margin-bottom: 12px;
  color: #6d83a3;
}
.hub-create legend span {
  font-size: 9px;
  margin-left: 12px;
  color: #9caec7;
}
.hub-student-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 190px;
  overflow: auto;
}
.hub-student-picker label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
}
.hub-student-picker label:has(:checked) {
  background: #f0f5ff;
  border-color: #b6c9e5;
}
.hub-student-picker input {
  accent-color: #416caa;
}
.hub-student-picker span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #edf2fa;
  font-size: 9px;
  color: #8ea2c0;
}
.hub-student-picker strong {
  font-size: 11px;
  font-weight: 500;
}
.hub-create-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #f5f8fc;
  border-radius: 7px;
  font-size: 10px !important;
}
.hub-create-note svg {
  flex-shrink: 0;
  margin-top: 3px;
}
.hub-create footer {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  border-top: 1px solid #e6edf5;
  padding-top: 18px;
}
.student-hub .hub-cards {
  grid-template-columns: 1fr;
}
.student-hub .hub-class-card {
  border-radius: 9px;
}
.student-hub .hub-card-preview {
  padding-bottom: 10px;
}
@media (max-width: 1300px) {
  .hub-cards {
    grid-template-columns: 1fr;
  }
  .hub-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .hub-search {
    max-width: none;
    flex: 1;
    min-width: 180px;
  }
  .hub-layout {
    gap: 18px;
  }
}
@media (max-width: 1050px) {
  .classrooms-page {
    padding: 26px 22px 90px;
  }
  .hub-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
  }
  .hub-preview {
    padding: 17px;
  }
  .hub-calendar-days {
    grid-template-columns: repeat(7, minmax(54px, 1fr));
  }
  .hub-calendar.full .hub-calendar-days {
    grid-template-columns: repeat(7, minmax(80px, 1fr));
  }
  .hub-calendar > header {
    padding: 12px;
  }
  .hub-calendar > header span {
    display: none;
  }
  .hub-overview {
    gap: 15px;
  }
  .hub-preview-actions .button {
    padding: 9px;
  }
  .hub-person em {
    font-size: 7px;
  }
}
@media (max-width: 780px) {
  .classrooms-page {
    padding: 24px 14px 90px;
  }
  .hub-layout {
    grid-template-columns: 1fr;
  }
  .hub-preview {
    position: static;
  }
  .hub-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .hub-heading h1 {
    font-size: 25px;
  }
  .hub-heading p {
    font-size: 11px;
  }
  .hub-overview {
    gap: 12px;
    font-size: 10px;
  }
  .hub-overview > span {
    gap: 4px;
  }
  .hub-preview-cover {
    height: 100px;
  }
  .hub-create form {
    padding: 20px;
  }
  .hub-student-picker {
    grid-template-columns: 1fr;
  }
  .hub-create input,
  .hub-create select {
    font-size: 16px !important;
  }
  .hub-create footer {
    flex-wrap: wrap;
  }
  .hub-person em {
    font-size: 9px;
  }
  .hub-list-heading > div {
    gap: 0;
  }
  .hub-list-heading button {
    padding: 6px;
  }
  .hub-card-preview {
    padding: 16px 12px;
  }
  .hub-card-members {
    padding-left: 12px;
    padding-right: 12px;
  }
  .hub-class-card footer {
    padding: 10px 12px;
  }
  .hub-class-time {
    font-size: 8px;
  }
  .hub-class-symbol {
    width: 35px;
    height: 35px;
  }
  .hub-class-card footer > span {
    font-size: 8px;
  }
}

/* src/classroom-student-picker.css */
.hub-directory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -3px 0 11px;
  font-size: 10px;
  color: #8195af;
}
.hub-directory-heading button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  background: none;
  border: 0;
  color: #416aa0;
  font-size: 10px;
}
.hub-directory-search {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d6e1ee;
  background: #fafcfe;
  border-radius: 8px;
  padding: 11px 12px;
  color: #829bb9;
  margin-bottom: 10px;
}
.hub-directory-search:focus-within {
  border-color: #567fb8;
  box-shadow: 0 0 0 2px #e8effb;
}
.hub-directory-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: #344e70;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 12px;
}
.hub-selected-students {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.hub-selected-students button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d9e4f0;
  border-radius: 20px;
  padding: 5px 8px;
  background: #f2f6fc;
  font-size: 10px;
  color: #44648c;
}
.hub-selected-students i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.hub-directory-empty {
  grid-column: 1/-1;
  margin: 0;
  padding: 14px;
  text-align: center;
  font-size: 11px;
  color: #8a9bb0;
}
.hub-directory-settings {
  border: 1px solid #d9e4f2;
  background: #f6f9fd;
  border-radius: 9px;
  padding: 14px;
  margin-bottom: 13px;
}
.hub-directory-settings > label {
  display: block;
  font-size: 11px;
  color: #5c7699;
}
.hub-directory-settings select {
  background: white;
}
.hub-directory-settings p {
  font-size: 10px;
  color: #8295b0;
  line-height: 1.6;
  margin: 11px 0;
}
.hub-directory-settings > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.hub-directory-settings .button {
  font-size: 10px;
  padding: 7px 10px;
}
.hub-exposure-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 130px;
  overflow: auto;
  margin-top: 12px;
}
.hub-exposure-picker label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.hub-exposure-picker small {
  font-size: 9px;
  color: #879ab1;
}
.hub-directory-saved {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #318067;
  margin-bottom: 10px;
}
.hub-create form {
  padding: 0;
  max-height: calc(100dvh - 42px);
  display: flex;
  flex-direction: column;
}
.hub-create-content {
  min-height: 0;
  overflow: auto;
  padding: 27px;
}
.hub-create footer {
  margin: 0;
  flex-shrink: 0;
  padding: 14px 27px;
  background: white;
}
@media (max-width: 780px) {
  .hub-create-content {
    padding: 20px;
  }
  .hub-create footer {
    padding: 14px 20px;
  }
}
.hub-create .hub-student-picker {
  max-height: 140px;
}
.hub-create .hub-student-picker label {
  min-width: 0;
  cursor: pointer;
}
.hub-create .hub-student-picker strong {
  overflow-wrap: anywhere;
}
@media (max-height: 800px) {
  .hub-create-content {
    padding: 20px 27px;
  }
  .hub-create .hub-create-content > p {
    margin: 10px 0 12px;
  }
  .hub-create .hub-create-content > label {
    margin-top: 12px;
  }
  .hub-create fieldset {
    margin-top: 16px;
  }
  .hub-create .hub-student-picker {
    max-height: 108px;
  }
}

/* src/student-dashboard.css */
.student-dashboard {
  height: 100%;
  overflow-y: auto;
  background: #f5f7fb;
  color: #233653;
  padding: 32px clamp(20px, 3.4vw, 58px) 110px;
  scroll-behavior: smooth;
}
.sd-inner {
  max-width: 1390px;
  margin: auto;
}
.student-dashboard button {
  font: inherit;
}
.student-dashboard button:focus-visible,
.student-dashboard select:focus-visible {
  outline: 3px solid #6393df;
  outline-offset: 3px;
}
.sd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 26px;
}
.sd-eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.8px;
  color: #6a82a5;
}
.sd-header h1 {
  font-size: 34px;
  letter-spacing: -1.2px;
  margin: 8px 0;
}
.sd-header p,
.sd-section-header p {
  margin: 0;
  color: #74839b;
  font-size: 13px;
  line-height: 1.6;
}
.sd-header-date {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  color: #6c7f9b;
}
.sd-preview {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid #d3e1f4;
  border-radius: 10px;
  background: #eaf1fc;
  color: #3c6092;
  font-size: 12px;
  margin-bottom: 24px;
}
.sd-preview > span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.sd-preview small {
  color: #657d9d;
}
.sd-preview label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.sd-preview select {
  padding: 5px 28px 5px 9px;
  border: 1px solid #cbd8ed;
  border-radius: 6px;
  background: #fff;
  color: #2a4671;
}
.sd-hero {
  border: 1px solid #d3e1f7;
  border-radius: 19px;
  background:
    linear-gradient(
      110deg,
      #e5eefa,
      #edf3ff 70%,
      #e6eefb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 210px;
  overflow: hidden;
  padding: 30px 36px;
  position: relative;
}
.sd-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 75%;
}
.sd-hero h2 {
  font-size: 27px;
  letter-spacing: -.8px;
  margin: 13px 0 10px;
}
.sd-hero p {
  font-size: 13px;
  color: #5e779a;
  margin: 0 0 23px;
  line-height: 1.7;
}
.sd-hero .button {
  border-radius: 9px;
  gap: 16px;
  font-size: 13px;
}
.sd-hero-art {
  width: 165px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #476aa5;
  transform: rotate(-8deg);
  margin-right: 23px;
  flex-shrink: 0;
}
.sd-art-orbit {
  position: absolute;
  inset: 4px;
  border: 1px dashed #afc4e5;
  border-radius: 50%;
  transform: scale(1.2);
}
.sd-hero-art > svg {
  background: #fff9;
  padding: 23px;
  box-sizing: content-box;
  border: 1px solid white;
  border-radius: 24px;
  box-shadow: 0 12px 30px #5272a018;
}
.sd-art-check {
  position: absolute;
  bottom: 17px;
  right: 4px;
  border: 5px solid #ebf3ff;
  display: flex;
  padding: 8px;
  background: #c9e9db;
  border-radius: 50%;
  color: #398164;
}
.sd-art-star {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 36px;
  color: #d5b572;
}
.sd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin: 20px 0 30px;
}
.sd-stats > button {
  border: 1px solid #e0e6ef;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  text-align: left;
  align-items: center;
  color: #304668;
  cursor: pointer;
}
.sd-stats > button:hover {
  border-color: #8aa9d6;
  box-shadow: 0 4px 15px #24457508;
}
.sd-stats strong {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 650;
}
.sd-stats > button > span:last-child {
  grid-column: 2;
  font-size: 11px;
  color: #74839b;
  margin-top: 4px;
}
.sd-stat-icon {
  grid-row: 1/3;
  background: #edf2fb;
  border-radius: 11px;
  width: 39px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #5476ad;
}
.sd-stat-icon.todo {
  background: #fcf2df;
  color: #ab8745;
}
.sd-stat-icon.submitted {
  background: #eeeafa;
  color: #8a75af;
}
.sd-stat-icon.complete {
  background: #e5f3eb;
  color: #579071;
}
.sd-week {
  background: white;
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 30px;
}
.sd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 17px;
}
.student-dashboard h2 {
  font-weight: 650;
}
.sd-section-header h2,
.sd-side-card > h2 {
  font-size: 18px;
  letter-spacing: -.3px;
  margin: 0 0 4px;
}
.sd-week-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sd-text-button {
  border: 0;
  background: none;
  color: #3f68a5;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
}
.sd-text-button:hover {
  text-decoration: underline;
}
.sd-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid #e6ebf3;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.sd-days > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 5px;
  border-right: 1px solid #e9edf5;
}
.sd-days > div:last-child {
  border: 0;
}
.sd-days span {
  font-size: 10px;
  color: #8a96aa;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sd-days strong {
  font-size: 20px;
  font-weight: 550;
  color: #536984;
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
}
.sd-days small {
  font-size: 10px;
  color: #7f91ac;
}
.sd-days .is-today {
  background: #f2f6ff;
}
.sd-days .is-today strong {
  background: #315fa6;
  border-radius: 50%;
  color: white;
}
.sd-days .is-today span {
  color: #315fa6;
}
.sd-lesson-list article {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid #edf0f5;
}
.sd-lesson-list article:first-child {
  border-top: 0;
}
.sd-lesson-day {
  font-size: 11px;
  color: #7e8ea4;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 78px;
}
.sd-lesson-day strong {
  font-weight: 550;
  font-size: 12px;
  color: #37527b;
}
.sd-lesson-info {
  flex: 1;
}
.sd-lesson-info h3 {
  font-size: 13px;
  margin: 0 0 5px;
}
.sd-lesson-info p {
  font-size: 11px;
  color: #8491a7;
  margin: 0;
}
.sd-lesson-list .button {
  font-size: 11px;
  padding: 8px 11px;
  gap: 8px;
}
.sd-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr);
  gap: 26px;
  align-items: start;
}
.sd-homework {
  scroll-margin-top: 22px;
}
.sd-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sd-filters button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11px;
  padding: 7px 10px;
  color: #8190a6;
  cursor: pointer;
}
.sd-filters button[aria-pressed=true] {
  background: #fff;
  color: #305b9a;
  border-color: #d6e0ef;
  box-shadow: 0 2px 5px #18335d06;
}
.sd-homework-card {
  background: #fff;
  border: 1px solid #dfe6f1;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px #263f6503;
}
.sd-homework-card.changes {
  border-color: #e3cfb1;
}
.sd-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  margin-bottom: 14px;
}
.sd-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 10px;
  background: #f6edda;
  color: #96763c;
}
.sd-badge.changes {
  background: #fff0e0;
  color: #a56725;
}
.sd-badge.submitted {
  background: #eeeafb;
  color: #8064a5;
}
.sd-badge.complete {
  background: #e6f3ea;
  color: #46805f;
}
.sd-homework-card h3 {
  font-size: 16px;
  margin: 0 0 7px;
  line-height: 1.4;
}
.sd-muted {
  font-size: 11px;
  color: #8391a7;
  line-height: 1.6;
}
.sd-overdue {
  color: #ae7642;
}
.sd-instructions {
  font-size: 12px;
  line-height: 1.7;
  color: #61758f;
  white-space: pre-line;
  margin: 15px 0;
}
.sd-page-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sd-page-chips button {
  border: 1px solid #e0e7f2;
  border-radius: 6px;
  background: #f7f9fc;
  color: #637d9f;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sd-page-chips b {
  flex-shrink: 0;
  font-weight: 550;
}
.sd-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 10px;
  color: #8290a6;
}
.sd-progress progress {
  height: 5px;
  width: 90px;
  max-width: 30%;
  border: 0;
  border-radius: 9px;
  appearance: none;
}
.sd-progress progress::-webkit-progress-bar {
  background: #ebeff6;
  border-radius: 9px;
}
.sd-progress progress::-webkit-progress-value {
  background: #709b86;
  border-radius: 9px;
}
.sd-progress progress::-moz-progress-bar {
  background: #709b86;
}
.sd-card-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  border-top: 1px solid #eef1f6;
  padding-top: 14px;
}
.sd-card-actions .button {
  font-size: 11px;
  padding: 9px 12px;
}
.sd-card-actions .sd-text-button {
  font-size: 11px;
}
.sd-feedback {
  background: #fff7eb;
  border-left: 2px solid #ddba82;
  border-radius: 4px;
  padding: 12px;
  color: #8d7352;
  line-height: 1.6;
  font-size: 12px;
  white-space: pre-line;
}
.sd-feedback strong {
  display: block;
  font-size: 10px;
  margin-bottom: 4px;
}
.sd-carry > h3 {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #a17b47;
  font-size: 12px;
  margin: 0 0 13px;
}
.sd-carry > h3 span {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: #95a0b2;
}
.sd-subheading {
  font-size: 11px;
  color: #8795ab;
  font-weight: 500;
  margin: 23px 0 13px;
}
.sd-side {
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.sd-side-card {
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 12px;
  padding: 22px;
  scroll-margin-top: 22px;
}
.sd-count {
  font-size: 11px;
  color: #7b8eab;
  background: #f2f5fa;
  border-radius: 5px;
  padding: 4px 7px;
}
.sd-room {
  display: flex;
  gap: 12px;
  padding: 17px 0;
  border-top: 1px solid #edf0f6;
}
.sd-room:last-child {
  padding-bottom: 0;
}
.sd-room h3 {
  font-size: 13px;
  margin: 0 0 6px;
  line-height: 1.45;
}
.sd-room p {
  font-size: 10px;
  color: #8b98ab;
  line-height: 1.6;
  margin: 0 0 8px;
}
.sd-room p span {
  display: block;
  color: #a1865b;
}
.sd-room-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #eaf1fc;
  color: #5575a4;
}
.sd-room-icon.tone-1 {
  background: #eaf1eb;
  color: #769784;
}
.sd-room-icon.tone-2 {
  background: #f3edf7;
  color: #9c83ae;
}
.sd-room .sd-text-button {
  font-size: 11px;
}
.sd-recent,
.sd-finished {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid #edf0f5;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: #5375a4;
}
.sd-recent img {
  width: 32px;
  height: 42px;
  object-fit: contain;
  border: 1px solid #e1e8f3;
  border-radius: 3px;
}
.sd-recent > span,
.sd-finished > span {
  flex: 1;
  min-width: 0;
}
.sd-recent strong,
.sd-finished strong {
  display: block;
  font-size: 11px;
  font-weight: 550;
  color: #435c7e;
  line-height: 1.5;
}
.sd-recent small,
.sd-finished small {
  display: block;
  font-size: 10px;
  color: #91a0b4;
  line-height: 1.6;
}
.sd-finished {
  color: #719782;
}
.sd-mastery {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid #cddfdb;
  background: #eaf2f0;
  border-radius: 12px;
  padding: 19px;
  text-align: left;
  color: #4c7e70;
  cursor: pointer;
}
.sd-mastery > span {
  flex: 1;
}
.sd-mastery strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.sd-mastery small {
  font-size: 10px;
  color: #7a9a91;
}
.sd-empty {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #8194af;
  font-size: 12px;
  padding: 14px 3px;
  line-height: 1.6;
}
.sd-empty p {
  margin: 0;
}
.sd-empty-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #fff;
  border: 1px dashed #d6dfed;
  border-radius: 12px;
  min-height: 170px;
  padding: 30px;
}
.sd-empty h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 550;
  color: #526d93;
}
.sd-loading {
  padding: 100px 20px;
  text-align: center;
  color: #8396b2;
}
.sd-loading h2 {
  font-size: 18px;
  font-weight: 500;
}
.sd-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #fff3ee;
  border: 1px solid #efd5c6;
  border-radius: 10px;
  color: #9b6247;
  font-size: 13px;
  padding: 15px;
  margin: 15px 0;
}
.student-dashboard button:disabled {
  opacity: .5;
  cursor: wait;
}
.student-dashboard [hidden] {
  display: none !important;
}
@media (min-width: 1400px) {
  .sd-homework-card {
    padding: 24px;
  }
  .sd-hero {
    min-height: 225px;
  }
  .sd-main-grid {
    gap: 32px;
  }
}
@media (max-width: 1000px) {
  .sd-main-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr);
    gap: 18px;
  }
  .sd-stats {
    gap: 9px;
  }
  .sd-stats > button {
    padding: 14px;
    grid-template-columns: 30px 1fr;
    gap: 7px;
  }
  .sd-stat-icon {
    width: 30px;
    height: 36px;
  }
  .sd-hero-art {
    margin-right: 0;
    width: 130px;
    height: 130px;
  }
  .sd-hero {
    padding: 26px;
  }
  .sd-card-actions {
    flex-wrap: wrap;
    gap: 5px;
  }
  .sd-side-card {
    padding: 18px;
  }
}
@media (max-width: 760px) {
  .student-dashboard {
    padding: 22px 16px 115px;
  }
  .sd-header {
    align-items: flex-start;
  }
  .sd-header-date {
    font-size: 10px;
    max-width: 160px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .sd-header h1 {
    font-size: 29px;
  }
  .sd-hero-copy {
    max-width: 100%;
  }
  .sd-hero h2 {
    font-size: 23px;
  }
  .sd-hero-art {
    display: none;
  }
  .sd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sd-main-grid {
    grid-template-columns: 1fr;
  }
  .sd-lesson-list article {
    gap: 10px;
    flex-wrap: wrap;
  }
  .sd-lesson-info {
    min-width: 130px;
  }
  .sd-lesson-list .button {
    margin-left: auto;
  }
  .sd-days > div {
    padding: 9px 2px;
  }
  .sd-days span {
    font-size: 9px;
  }
  .sd-days small {
    font-size: 9px;
  }
  .sd-week {
    padding: 16px;
  }
  .sd-preview small {
    display: none;
  }
}
.sd-page-chips button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sd-page-chips button > svg {
  flex-shrink: 0;
}

/* src/family-dashboard.css */
.learning-mastery {
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 16px;
  padding: 25px;
  margin: 0 0 28px;
  color: #263d5d;
}
.lm-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}
.lm-heading h2 {
  font-size: 22px;
  letter-spacing: -.5px;
  margin: 9px 0;
}
.lm-heading p {
  font-size: 12px;
  color: #75869d;
  margin: 0;
  line-height: 1.6;
}
.lm-heading > button {
  flex-shrink: 0;
}
.lm-overview {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  margin-top: 24px;
  align-items: center;
}
.lm-focus {
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: 13px;
  align-items: center;
}
.lm-focus-icon {
  background: #edf2fa;
  color: #5877a2;
  width: 44px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
}
.lm-focus small {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #8495ac;
}
.lm-focus h3 {
  font-size: 17px;
  margin: 4px 0;
}
.lm-focus p {
  font-size: 11px;
  color: #8a98aa;
  margin: 0;
}
.lm-focus p strong {
  color: #365f4f;
}
.learning-mastery progress {
  appearance: none;
  height: 6px;
  border: 0;
  border-radius: 9px;
  background: #edf1f6;
  overflow: hidden;
}
.learning-mastery progress::-webkit-progress-bar {
  background: #edf1f6;
}
.learning-mastery progress::-webkit-progress-value {
  background: #6ba78a;
  border-radius: 9px;
}
.lm-focus > progress {
  width: 100%;
  grid-column: 1/-1;
  margin-top: 16px;
}
.lm-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-left: 1px solid #e9edf3;
  padding-left: 28px;
}
.lm-totals > span {
  font-size: 10px;
  color: #7d8ea4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.lm-totals strong {
  font-size: 29px;
  color: #304a6b;
  font-weight: 600;
  display: block;
  width: 100%;
  margin-bottom: 5px;
}
.lm-totals > span:first-child strong {
  color: #41816a;
}
.lm-rule {
  font-size: 10px;
  line-height: 1.6;
  color: #7b8da4;
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 19px 0 24px;
}
.lm-rule svg {
  flex-shrink: 0;
  color: #6c9381;
}
.lm-checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-top: 1px solid #edf0f5;
  padding-top: 17px;
}
.lm-checklist-header h3 {
  font-size: 13px;
  margin: 0;
}
.lm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.lm-filters button {
  background: none;
  border: 0;
  padding: 6px 9px;
  border-radius: 6px;
  font: inherit;
  font-size: 10px;
  color: #8492a7;
  cursor: pointer;
}
.lm-filters button[aria-pressed=true] {
  background: #edf3fc;
  color: #466fa6;
}
.lm-skill {
  width: 100%;
  display: flex;
  gap: 11px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  padding: 14px 0;
  color: #587393;
  text-align: left;
  cursor: pointer;
}
.lm-skill:hover {
  background: #f8faff;
}
.lm-check {
  width: 29px;
  height: 29px;
  border: 1px solid #d3deeb;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #788dad;
  background: #f8faff;
}
.lm-check.mastered {
  background: #e7f3ec;
  border-color: #c6e0d3;
  color: #448667;
}
.lm-check.ready {
  background: #f2edfb;
  color: #8a6aae;
}
.lm-check.revisit {
  background: #fff4e8;
  border-color: #edddc4;
}
.lm-check > span {
  width: 7px;
  height: 7px;
  border: 1px solid #a8b8cd;
  border-radius: 50%;
}
.lm-skill-copy {
  flex: 1;
  min-width: 0;
}
.lm-skill-copy strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 550;
  color: #2c4566;
}
.lm-skill-copy small {
  display: block;
  font-size: 10px;
  color: #8a98ad;
  line-height: 1.5;
  margin-top: 3px;
}
.lm-status {
  font-size: 10px;
  flex-shrink: 0;
  color: #7c90aa;
}
.lm-status.mastered {
  color: #498368;
}
.lm-status.ready {
  color: #8a6aac;
}
.lm-status.revisit {
  color: #a37e45;
}
.lm-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #7d91ad;
  padding: 30px 12px;
  font-size: 12px;
  border-radius: 8px;
  margin: 10px 0;
  background: #f8fafd;
}
.lm-empty small {
  display: block;
  font-size: 11px;
  color: #93a1b5;
  margin-top: 6px;
  line-height: 1.6;
  max-width: 470px;
}
.lm-courses {
  margin-top: 15px;
}
.lm-courses summary {
  font-size: 11px;
  cursor: pointer;
  color: #58779f;
  padding: 7px 0;
}
.lm-courses summary > span {
  float: right;
  color: #98a5b7;
  font-size: 10px;
}
.lm-courses > button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  border: 0;
  border-top: 1px solid #edf1f6;
  background: none;
  text-align: left;
  padding: 12px 0;
  color: #4d688c;
  cursor: pointer;
}
.lm-courses > button > span {
  flex: 1;
  font-size: 12px;
}
.lm-courses small {
  display: block;
  color: #9aa8ba;
  font-size: 10px;
  margin-top: 4px;
}
.lm-courses progress {
  width: 20%;
  min-width: 35px;
}
.lm-courses strong {
  font-size: 10px;
  font-weight: 500;
  min-width: 45px;
  text-align: right;
}
.learning-mastery button:focus-visible,
.learning-mastery summary:focus-visible {
  outline: 3px solid #8cadd9;
  outline-offset: 3px;
}
.parent-dashboard {
  background: #f6f8fb;
}
.parent-dashboard .sd-header {
  margin-bottom: 24px;
}
.parent-dashboard .sd-header h1 {
  font-size: 30px;
}
.family-children {
  display: flex;
  gap: 9px;
  overflow: auto;
  padding: 2px 2px 5px;
  margin-bottom: 23px;
}
.family-children button {
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  min-width: 176px;
  flex-shrink: 0;
  border: 1px solid #dee5f0;
  border-radius: 12px;
  background: #fff;
  padding: 11px 15px;
  color: #5c7496;
  cursor: pointer;
}
.family-children button[aria-pressed=true] {
  border-color: #92acd2;
  background: #edf3fc;
  box-shadow: 0 2px 7px #234a7610;
}
.family-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dae6f9;
  color: #5678a9;
  font-size: 14px;
}
.family-avatar.tone-1 {
  background: #e3e0f2;
  color: #8878ac;
}
.family-avatar.tone-2 {
  background: #dceddf;
  color: #6f9278;
}
.family-children strong {
  font-size: 13px;
  display: block;
  color: #2c4568;
}
.family-children small {
  display: block;
  font-size: 10px;
  color: #8999b1;
  margin-top: 3px;
}
.family-children svg {
  margin-left: 9px;
}
.family-intro {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 26px;
  padding: 0 0 22px;
}
.family-intro h2 {
  font-size: 20px;
  letter-spacing: -.4px;
  margin: 8px 0;
}
.family-intro p {
  font-size: 12px;
  line-height: 1.6;
  color: #7a8ba4;
  margin: 6px 0 0;
}
.family-next {
  display: flex;
  gap: 13px;
  align-items: center;
  background: #eef2f9;
  border-radius: 11px;
  padding: 15px;
  color: #6683ab;
}
.family-next small {
  font-size: 9px;
  letter-spacing: 1.3px;
  display: block;
  color: #8b9bb1;
  margin-bottom: 6px;
}
.family-next strong {
  font-size: 13px;
  color: #38587f;
}
.family-next p {
  font-size: 11px;
}
.family-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
  gap: 23px;
  align-items: start;
}
.family-room-filter {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  color: #8396ad;
  margin-bottom: 10px;
}
.family-room-filter select {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #dce5f0;
  border-radius: 6px;
  background: #fbfcff;
  color: #54729b;
}
.family-lesson-skills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.family-lesson-skills button {
  border: 1px solid #dce8e1;
  background: #f5faf7;
  padding: 4px 6px;
  border-radius: 5px;
  color: #658c77;
  font-size: 9px;
  display: inline-flex;
  gap: 3px;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.family-homework-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #e4eaf3;
  padding-top: 12px;
  margin-top: 15px;
}
.family-homework-heading h3 {
  font-size: 13px;
}
.family-homework-heading span {
  font-size: 10px;
  color: #98a5b8;
}
.family-homework {
  border: 1px solid #e0e7f0;
  border-radius: 9px;
  margin: 10px 0;
}
.family-homework summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  cursor: pointer;
}
.family-homework summary strong {
  font-size: 12px;
  display: block;
  line-height: 1.6;
}
.family-homework summary small {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  margin-top: 3px;
  color: #8a9bb2;
}
.family-homework > div {
  padding: 0 13px 15px;
  font-size: 12px;
  color: #6c819e;
  line-height: 1.7;
  white-space: pre-line;
}
.family-homework > div > small {
  color: #95a4b9;
  font-size: 10px;
}
.family-assigned-page {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #7c91aa;
}
.family-facts {
  margin: 14px 0;
}
.family-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f6;
}
.family-facts dt {
  font-size: 11px;
  color: #7a8fa9;
}
.family-facts dd {
  margin: 0;
  font-size: 14px;
  color: #436484;
  font-weight: 600;
}
.family-room {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  padding: 14px 0;
  text-align: left;
  color: #59779d;
  cursor: pointer;
}
.family-room > span {
  flex: 1;
  line-height: 1.5;
  font-size: 12px;
  font-weight: 550;
}
.family-room small {
  font-size: 10px;
  color: #97a6bb;
  display: block;
  font-weight: 400;
  margin-top: 4px;
}
.family-support {
  background: #edf3f0;
  border: 1px solid #dce8e2;
  padding: 22px;
  border-radius: 13px;
  color: #719584;
}
.family-support h3 {
  font-size: 14px;
  color: #476b59;
  margin: 13px 0 10px;
}
.family-support p {
  font-size: 11px;
  line-height: 1.8;
  color: #779385;
}
.family-support small {
  font-size: 10px;
  line-height: 1.8;
  display: block;
  color: #8ca097;
  border-top: 1px solid #d9e5dd;
  margin-top: 15px;
  padding-top: 15px;
}
.family-mastery-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.family-mastery-page > .mastery-page {
  flex: 1;
  min-height: 0;
}
.family-back {
  padding: 12px 32px;
  background: #f5f8fd;
  border-bottom: 1px solid #e1e9f2;
  flex-shrink: 0;
}
@media (max-width: 1050px) {
  .lm-overview {
    gap: 16px;
  }
  .lm-totals {
    padding-left: 18px;
  }
  .family-bottom-grid {
    grid-template-columns: minmax(0, 1fr) 245px;
  }
  .family-intro {
    gap: 18px;
  }
  .parent-dashboard {
    padding-left: 24px;
    padding-right: 24px;
  }
  .family-bottom-grid .sd-week {
    padding: 18px;
  }
  .lm-status {
    max-width: 98px;
    font-size: 9px;
  }
}
@media (max-width: 760px) {
  .family-bottom-grid,
  .family-intro {
    grid-template-columns: 1fr;
  }
  .lm-overview {
    grid-template-columns: 1fr;
  }
  .lm-totals {
    border-left: 0;
    padding: 16px 0 0;
    border-top: 1px solid #e8edf3;
  }
  .learning-mastery {
    padding: 20px;
  }
  .lm-heading {
    align-items: flex-start;
  }
  .lm-heading h2 {
    font-size: 19px;
  }
  .lm-checklist-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .lm-heading > button {
    font-size: 10px;
  }
  .parent-dashboard .sd-header h1 {
    font-size: 26px;
  }
  .lm-skill {
    gap: 8px;
  }
  .lm-status {
    max-width: 65px;
  }
  .lm-rule {
    align-items: flex-start;
  }
  .family-children button {
    min-width: 160px;
  }
  .family-homework summary {
    align-items: flex-start;
  }
}
.parent-dashboard {
  padding-top: 22px;
}
.parent-dashboard .sd-header {
  margin-bottom: 18px;
}
.parent-dashboard .family-children {
  margin-bottom: 16px;
}
.parent-dashboard .family-intro {
  padding-bottom: 18px;
}
.parent-dashboard .learning-mastery {
  padding: 21px;
}
.parent-dashboard .lm-heading h2 {
  font-size: 20px;
}
.parent-dashboard .lm-overview {
  margin-top: 18px;
}
.parent-dashboard .lm-rule {
  margin: 15px 0 16px;
}
.parent-dashboard .lm-checklist-header {
  padding-top: 12px;
}

/* src/mastery.css */
@font-face {
  font-family: Mastery Poppins;
  src: url(/mastery/fonts/poppins-latin-400-normal.woff2);
}
@font-face {
  font-family: Mastery Poppins;
  src: url(/mastery/fonts/poppins-latin-500-normal.woff2);
  font-weight: 500;
}
@font-face {
  font-family: Mastery Poppins;
  src: url(/mastery/fonts/poppins-latin-600-normal.woff2);
  font-weight: 600;
}
@font-face {
  font-family: Mastery Poppins;
  src: url(/mastery/fonts/poppins-latin-800-normal.woff2);
  font-weight: 800;
}
.mastery-page {
  --m-ink:#283e55;
  --m-muted:#7e8d9d;
  --m-blue:#315f9a;
  --m-line:#e3e8ee;
  --m-green:#397d6c;
  height: 100%;
  overflow: auto;
  padding: 32px 38px 48px;
  color: var(--m-ink);
  font-family: Mastery Poppins, sans-serif;
  font-size: 12px;
  background: #fafbfD;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.mastery-page * {
  box-sizing: border-box;
}
.mastery-page button,
.mastery-page input,
.mastery-page textarea,
.mastery-page select {
  font: inherit;
}
.mastery-page button {
  cursor: pointer;
}
.mastery-page button:disabled {
  opacity: .5;
  cursor: default;
}
.mastery-page a {
  text-decoration: none;
  color: var(--m-blue);
}
.mastery-page h1,
.mastery-page h2,
.mastery-page h3,
.mastery-page p {
  margin: 0;
}
.mastery-page .eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: #8999ac;
}
.mastery-page input,
.mastery-page textarea,
.mastery-page select {
  color: var(--m-ink);
  border: 1px solid var(--m-line);
  border-radius: 7px;
  background: #fff;
  padding: 9px 11px;
  min-width: 0;
}
.mastery-page input:focus,
.mastery-page textarea:focus,
.mastery-page select:focus {
  outline: 2px solid #7599c6;
  outline-offset: 2px;
}
.mastery-page select {
  max-width: 100%;
}
.mastery-page .full {
  width: 100%;
  justify-content: center;
}
.mastery-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin: 0 auto 23px;
  max-width: 1500px;
}
.mastery-heading h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.4;
  margin-top: 8px;
}
.mastery-heading h1 > span {
  color: #4c977f;
}
.mastery-heading p {
  font-size: 11px;
  color: var(--m-muted);
  margin-top: 3px;
}
.mastery-view-controls {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.mastery-view-controls label {
  font-size: 9px;
  color: #8996a6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mastery-view-controls select {
  font-size: 10px;
  min-height: 36px;
  max-width: 220px;
}
.mastery-demo,
.mastery-notice,
.mastery-error {
  max-width: 1500px;
  margin: 0 auto 16px;
  border-radius: 7px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  line-height: 1.7;
}
.mastery-demo {
  background: #edf2f8;
  color: #687e99;
}
.mastery-demo > svg {
  flex-shrink: 0;
}
.mastery-demo strong {
  font-weight: 600;
}
.mastery-readonly {
  margin-left: auto;
  font-size: 9px;
  white-space: nowrap;
}
.mastery-notice {
  background: #e9f3ef;
  color: #397d6c;
}
.mastery-error {
  background: #fbede9;
  color: #975b4b;
}
.mastery-error button {
  margin-left: auto;
  color: inherit;
  background: #fff;
  border: 1px solid #ddbbb1;
  padding: 5px 9px;
  border-radius: 4px;
}
.mastery-hero {
  max-width: 1500px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 35px;
  padding: 32px 36px;
  background:
    linear-gradient(
      110deg,
      #eff4f8 0%,
      #edf3f8 50%,
      #e8f0f5 100%);
  border: 1px solid #e4ebf1;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.mastery-hero:after {
  content: "";
  position: absolute;
  right: 15%;
  top: -100px;
  width: 360px;
  height: 360px;
  border: 1px solid #d1dee87a;
  border-radius: 50%;
  pointer-events: none;
}
.mastery-hero-copy,
.mastery-focus {
  position: relative;
  z-index: 1;
}
.mastery-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #77928d;
  font-weight: 500;
}
.mastery-kicker > span {
  width: 5px;
  height: 5px;
  background: #6e9b88;
  border-radius: 50%;
}
.mastery-hero h2 {
  font-weight: 500;
  font-size: clamp(24px, 2.1vw, 34px);
  letter-spacing: -1px;
  line-height: 1.35;
  margin: 14px 0 12px;
  color: #304d69;
}
.mastery-hero-copy > p {
  font-size: 11px;
  line-height: 1.8;
  color: #788da1;
  max-width: 450px;
}
.mastery-hero-actions {
  display: flex;
  gap: 19px;
  flex-wrap: wrap;
  margin-top: 22px;
  align-items: center;
}
.mastery-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #315f9a;
  border: 1px solid #315f9a;
  border-radius: 6px;
  color: white;
  padding: 11px 15px;
  font-size: 10px;
  font-weight: 500;
  box-shadow: 0 2px 3px #214a7610;
}
.mastery-primary:hover {
  background: #264e84;
}
.mastery-quiet {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  color: #5d7998;
  font-size: 10px;
  padding: 7px 0;
}
.mastery-focus {
  background: #ffffffc4;
  border: 1px solid #ffffff;
  border-radius: 11px;
  padding: 23px;
  align-self: center;
  box-shadow: 0 4px 18px #31465c04;
}
.mastery-focus-top {
  display: flex;
  align-items: center;
  gap: 13px;
}
.mastery-focus-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid #dce6ef;
  border-radius: 12px;
  color: #5783ab;
  background: #f1f6fa;
  flex-shrink: 0;
}
.mastery-focus-top small {
  font-size: 8px;
  letter-spacing: 1.2px;
  display: block;
  color: #8498ac;
}
.mastery-focus-top strong {
  font-size: 17px;
  display: block;
  font-weight: 500;
  margin-top: 5px;
  letter-spacing: -.3px;
}
.mastery-focus-top button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #8295a8;
}
.mastery-focus-rule {
  border-top: 1px solid #e8edf3;
  margin-top: 22px;
  padding: 17px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: #6d837d;
  line-height: 1.8;
}
.mastery-focus-rule b {
  font-weight: 500;
}
.mastery-focus-rule small {
  display: block;
  color: #9aa6ae;
  font-size: 9px;
}
.mastery-focus-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #92a0ae;
  font-size: 9px;
  padding-top: 12px;
  border-top: 1px solid #e8edf3;
}
.mastery-tabs {
  display: flex;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid var(--m-line);
  max-width: 1500px;
  margin: 22px auto 27px;
}
.mastery-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: #8997a8;
  font-size: 11px;
  padding: 16px 0;
}
.mastery-tabs button[aria-current=page] {
  color: var(--m-blue);
  border-color: var(--m-blue);
}
.mastery-tabs > span {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: 1.6px;
  color: #a6b0bb;
}
.mastery-progress-layout {
  max-width: 1500px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 28px;
  align-items: start;
}
.mastery-progress-layout.is-loading {
  opacity: .55;
  pointer-events: none;
}
.mastery-refresh {
  color: #7f95ac;
  margin-bottom: 12px;
}
.mastery-main {
  min-width: 0;
}
.mastery-course-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.mastery-course-heading > div {
  min-width: 0;
  flex: 1;
}
.mastery-course-heading h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.5px;
  margin-top: 5px;
}
.mastery-course-heading select {
  font-size: 9px;
  width: 165px;
  max-width: 45%;
  flex-shrink: 0;
  background: #fff;
}
.mastery-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 22px 0 17px;
  gap: 18px;
}
.mastery-metrics > div {
  border-right: 1px solid var(--m-line);
}
.mastery-metrics > div:last-child {
  border: 0;
}
.mastery-metrics strong {
  display: block;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
}
.mastery-metrics strong small {
  color: #acb7c3;
  font-size: 15px;
  letter-spacing: 0;
  font-weight: 400;
}
.mastery-metrics > div:first-child strong {
  color: #508e7b;
}
.mastery-metrics > div:nth-child(2) strong {
  color: #5f80ac;
}
.mastery-metrics span {
  display: block;
  margin-top: 8px;
  color: #9aa6b4;
  font-size: 9px;
}
.mastery-course-bar {
  height: 5px;
  width: 100%;
  display: flex;
  background: #e9edf2;
  border-radius: 8px;
  overflow: hidden;
}
.mastery-course-bar i {
  background: #80b09c;
}
.mastery-course-bar span {
  background: #bacbdf;
}
.mastery-empty {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px;
  margin: 18px 0;
  background: #f0f4f8;
  border-radius: 7px;
  color: #7991aa;
  line-height: 1.8;
  font-size: 10px;
}
.mastery-empty svg {
  flex-shrink: 0;
}
.mastery-empty strong {
  display: block;
  font-size: 11px;
  color: #58728c;
}
.mastery-empty p {
  margin-top: 4px;
  font-size: 10px;
}
.mastery-skill-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 13px;
}
.mastery-skill-toolbar h3 {
  font-size: 12px;
  font-weight: 500;
}
.mastery-skill-toolbar label,
.mastery-standard-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a2adba;
}
.mastery-skill-toolbar input {
  border: 0;
  background: none;
  padding: 7px 3px;
  font-size: 10px;
  max-width: 120px;
}
.mastery-chapters {
  display: grid;
  gap: 9px;
}
.mastery-chapter {
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: 9px;
  overflow: hidden;
}
.mastery-chapter-toggle {
  display: flex;
  align-items: center;
  text-align: left;
  width: 100%;
  padding: 15px;
  gap: 13px;
  background: none;
  border: 0;
  color: #536b83;
}
.mastery-chapter-number {
  width: 32px;
  height: 33px;
  display: grid;
  place-items: center;
  color: #8b9eb2;
  font-size: 10px;
  border: 1px solid #e9edf1;
  border-radius: 8px;
  background: #fbfcfe;
  flex-shrink: 0;
}
.mastery-chapter-toggle strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}
.mastery-chapter-toggle small {
  display: block;
  font-size: 9px;
  color: #9ca9b7;
  margin-top: 3px;
}
.mastery-chapter-count {
  margin-left: auto;
  color: #a0adbc;
  white-space: nowrap;
  font-size: 9px;
}
.mastery-chapter-toggle > svg {
  flex-shrink: 0;
  color: #98a7b7;
  transition: transform .15s;
}
.mastery-chapter.is-open {
  border-color: #c9d9e9;
  box-shadow: 0 2px 6px #223f5a04;
}
.mastery-chapter.is-open .mastery-chapter-toggle > svg {
  transform: rotate(180deg);
}
.mastery-chapter.is-open .mastery-chapter-number {
  background: #eaf1f8;
  color: #5a80a6;
  border-color: #dce6f0;
}
.mastery-lesson-list {
  border-top: 1px solid #edf1f5;
  padding: 5px 0;
}
.mastery-lesson-list > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 0;
  background: #fff;
  text-align: left;
  color: #6f8399;
}
.mastery-lesson-list > button:hover {
  background: #f7f9fc;
}
.mastery-lesson-list > button.is-selected {
  background: #eff4fa;
  box-shadow: inset 3px 0 #6f98bf;
}
.mastery-lesson-dot {
  width: 17px;
  height: 17px;
  border: 1px solid #dae2eb;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mastery-lesson-dot.mastered {
  border-color: #d8e9e0;
  background: #eaf4ee;
  color: #659b85;
}
.mastery-lesson-dot.ready {
  border: 4px solid #d8e4f1;
  background: #7297c4;
}
.mastery-lesson-dot.practising,
.mastery-lesson-dot.revisit {
  background: #f2e8d6;
  border-color: #e6d8bd;
}
.mastery-lesson-list > button > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.mastery-lesson-list strong {
  display: block;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
}
.mastery-lesson-list small {
  display: block;
  font-size: 8px;
  color: #9aabbd;
  margin-bottom: 2px;
}
.mastery-lesson-list > button > svg {
  flex-shrink: 0;
  color: #a6b4c3;
}
.mastery-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 8px;
  padding: 4px 7px;
  border-radius: 5px;
  background: #f0f3f7;
  color: #9ba7b4;
  font-weight: 400;
}
.mastery-badge > i {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
}
.mastery-badge.mastered {
  color: #5c957b;
  background: #edf5f0;
}
.mastery-badge.ready {
  color: #6387b1;
  background: #eaf1f9;
}
.mastery-badge.practising,
.mastery-badge.revisit {
  color: #aa8a54;
  background: #faf3e7;
}
.mastery-detail {
  position: sticky;
  top: 0;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  background: #fff;
  padding: 23px;
  min-width: 0;
}
.mastery-detail-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #9aaec1;
}
.mastery-skill-id {
  display: block;
  font-size: 9px;
  color: #8aa0b5;
  margin-top: 23px;
}
.mastery-detail h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.5px;
  line-height: 1.5;
  margin: 7px 0 12px;
}
.mastery-evidence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--m-line);
  padding-top: 22px;
  margin-top: 23px;
  margin-bottom: 17px;
}
.mastery-evidence-heading h3 {
  font-size: 11px;
  font-weight: 500;
}
.mastery-evidence-heading > span {
  font-size: 8px;
  color: #a2b0bd;
}
.mastery-checkpoint {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-bottom: 17px;
}
.mastery-checkpoint > span {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  border: 1px solid #e2e8ef;
  color: #a0afbf;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mastery-checkpoint strong {
  font-size: 10px;
  font-weight: 500;
  color: #60778e;
}
.mastery-checkpoint p {
  font-size: 9px;
  color: #a1adbb;
  margin-top: 3px;
  line-height: 1.7;
}
.mastery-checkpoint.is-done > span {
  color: #689983;
  background: #eff6f2;
  border-color: #daebe1;
}
.mastery-evidence {
  background: #f7f9fb;
  border-radius: 7px;
  padding: 14px;
  margin: 20px 0;
}
.mastery-evidence strong {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #66809a;
  line-height: 1.7;
  margin-top: 4px;
}
.mastery-evidence p {
  font-size: 10px;
  color: #8698aa;
  line-height: 1.9;
  margin: 6px 0 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mastery-evidence small {
  font-size: 8px;
  color: #acb7c2;
}
.mastery-alignment {
  border-top: 1px solid var(--m-line);
  padding-top: 18px;
  margin-top: 20px;
}
.mastery-alignment > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.mastery-alignment button {
  font-size: 8px;
  border: 1px solid #e3eaf1;
  background: white;
  border-radius: 4px;
  padding: 4px 5px;
  color: #8da1b6;
}
.mastery-alignment p {
  font-size: 8px;
  color: #a1adba;
  line-height: 1.9;
}
.mastery-home-support {
  display: flex;
  gap: 10px;
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid var(--m-line);
  color: #809d8f;
}
.mastery-home-support > svg {
  flex-shrink: 0;
}
.mastery-home-support strong {
  font-size: 10px;
  font-weight: 500;
}
.mastery-home-support p {
  font-size: 9px;
  color: #8fa39b;
  line-height: 1.9;
  margin-top: 7px;
}
.mastery-next {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #f0f5fa;
  border: 1px solid #e0eaf3;
  border-radius: 7px;
  color: #7896b5;
  margin-top: 22px;
  padding: 13px;
}
.mastery-next small {
  display: block;
  font-size: 8px;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.mastery-next strong {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
}
.mastery-next > svg {
  flex-shrink: 0;
}
.mastery-history {
  margin-top: 19px;
  font-size: 9px;
  color: #8596a9;
}
.mastery-history summary {
  cursor: pointer;
}
.mastery-history p {
  padding: 10px 0;
  line-height: 1.7;
}
.mastery-history p > span {
  display: block;
}
.mastery-history b {
  font-weight: 500;
}
.mastery-outline {
  padding: 16px;
  line-height: 1.9;
  color: #8598ac;
  font-size: 11px;
}
.mastery-outline p {
  margin-bottom: 9px;
}
.mastery-outline small {
  font-size: 9px;
}
.mastery-pathway,
.mastery-standards {
  max-width: 1500px;
  margin: auto;
}
.mastery-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  margin-bottom: 25px;
}
.mastery-section-heading h2 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.6px;
  margin-top: 7px;
}
.mastery-section-heading p {
  font-size: 11px;
  color: #8e9eae;
  line-height: 1.8;
  margin-top: 8px;
}
.mastery-pathway-count {
  font-size: 10px;
  color: #94a2b1;
  text-align: right;
  line-height: 1.8;
  white-space: nowrap;
}
.mastery-pathway-count b {
  font-weight: 500;
  color: #6d859f;
}
.mastery-stage {
  padding: 25px 0;
  border-top: 1px solid var(--m-line);
}
.mastery-stage > header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.mastery-stage > header > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #dce5ee;
  color: #8da3ba;
  font-size: 11px;
}
.mastery-stage h3 {
  font-size: 14px;
  font-weight: 500;
}
.mastery-stage header p {
  font-size: 10px;
  color: #96a4b2;
  margin-top: 5px;
  line-height: 1.8;
}
.mastery-course-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mastery-course-cards.compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.mastery-path-card {
  text-align: left;
  min-width: 0;
  position: relative;
  border: 1px solid var(--m-line);
  border-radius: 10px;
  background: #fff;
  padding: 20px 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--m-ink);
  transition: transform .15s, box-shadow .15s;
}
.mastery-path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px #2143650d;
}
.mastery-path-card.current {
  border-color: #91b1ce;
  background: #f3f7fb;
}
.mastery-path-icon {
  width: 32px;
  height: 32px;
  background: #f0f4f8;
  border: 1px solid #e7edf4;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #88a2bd;
  margin-bottom: 17px;
  font-size: 13px;
}
.mastery-path-card.current .mastery-path-icon {
  background: #e5eef7;
  color: #668cb3;
}
.mastery-path-card > strong {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}
.mastery-path-card > small {
  font-size: 9px;
  color: #94a5b7;
  margin-top: 5px;
}
.mastery-path-card > p {
  font-size: 9px;
  color: #9cabb9;
  line-height: 1.8;
  margin: 13px 0 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mastery-path-card > em {
  position: absolute;
  top: 16px;
  right: 12px;
  font-size: 7px;
  font-style: normal;
  color: #668fb8;
}
.mastery-path-progress {
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 13px;
  margin-top: auto;
  color: #9bafbf;
  gap: 5px;
}
.compact .mastery-path-card {
  padding: 14px 12px;
}
.compact .mastery-path-card strong {
  font-size: 11px;
}
.compact .mastery-path-card small {
  font-size: 8px;
}
.compact .mastery-path-icon {
  margin-bottom: 11px;
}
.compact .mastery-path-progress {
  font-size: 7px;
}
.mastery-coverage-note {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid #e7e3da;
  background: #f9f7f2;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 18px 0;
  color: #a29170;
}
.mastery-coverage-note > svg {
  flex-shrink: 0;
}
.mastery-coverage-note p {
  font-size: 9px;
  line-height: 1.9;
  color: #a0957e;
  flex: 1;
}
.mastery-coverage-note b {
  font-weight: 500;
  color: #958468;
}
.mastery-coverage-note button {
  border: 0;
  background: none;
  color: #9b8b70;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  white-space: nowrap;
}
.mastery-stretch {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px;
  border: 1px solid #dee9e3;
  border-radius: 12px;
  background: #f0f6f2;
  color: #7c9e8b;
  margin-top: 12px;
}
.mastery-stretch > svg {
  flex-shrink: 0;
}
.mastery-stretch .eyebrow {
  color: #8ca594;
}
.mastery-stretch h3 {
  font-size: 19px;
  color: #557b67;
  font-weight: 500;
  letter-spacing: -.5px;
  margin: 6px 0;
}
.mastery-stretch p {
  font-size: 10px;
  line-height: 1.9;
  color: #87a090;
  max-width: 650px;
}
.mastery-stretch button {
  white-space: nowrap;
  border: 1px solid #d0dfd5;
  background: #fff9;
  border-radius: 6px;
  color: #7c9c89;
  font-size: 10px;
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.mastery-section-heading a {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mastery-standard-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0 18px;
}
.mastery-standard-toolbar select,
.mastery-standard-toolbar input {
  font-size: 10px;
}
.mastery-standard-toolbar label {
  flex: 1;
}
.mastery-standard-toolbar input {
  width: 100%;
}
.mastery-standard-toolbar > span {
  font-size: 9px;
  color: #9aa8b8;
  white-space: nowrap;
}
.mastery-standard-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mastery-standard-list article {
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: 9px;
  padding: 20px;
}
.mastery-standard-list article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.mastery-standard-list strong {
  font-size: 12px;
  font-weight: 500;
  color: #6482a1;
}
.mastery-standard-list article > div:first-child > span {
  font-size: 8px;
  color: #a8b2bc;
}
.mastery-standard-list p {
  font-size: 10px;
  line-height: 1.9;
  margin: 10px 0 16px;
  color: #8b9db0;
}
.mastery-standard-placements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mastery-standard-placements button {
  font-size: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #e4eaf0;
  background: #f8fafc;
  color: #8da2b8;
  border-radius: 4px;
  padding: 5px 7px;
}
.mastery-footer {
  max-width: 1500px;
  margin: 35px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--m-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #aab6c3;
}
.mastery-footer > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
}
.mastery-footer > small {
  font-size: 8px;
}
.mastery-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: 90dvh;
  border: 1px solid #e0e7f0;
  border-radius: 13px;
  padding: 27px;
  color: var(--m-ink);
  box-shadow: 0 20px 100px #233c5c33;
}
.mastery-dialog::backdrop {
  background: #243c5a55;
  backdrop-filter: blur(3px);
}
.mastery-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.mastery-dialog h2 {
  font-size: 22px;
  font-weight: 500;
  margin-top: 7px;
  letter-spacing: -.5px;
}
.mastery-dialog header button {
  border: 0;
  background: none;
  color: #90a1b4;
}
.mastery-dialog form > p {
  font-size: 11px;
  color: #8396aa;
  margin-bottom: 18px;
}
.mastery-dialog label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 15px 0;
  font-size: 10px;
  color: #738ca5;
}
.mastery-dialog input,
.mastery-dialog textarea,
.mastery-dialog select {
  width: 100%;
  font-size: 12px;
}
.mastery-dialog textarea {
  min-height: 85px;
  resize: vertical;
}
.mastery-dialog label.mastery-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.8;
}
.mastery-checkbox input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #397d6c;
}
.mastery-checkbox small {
  font-size: 9px;
  display: block;
  font-weight: 400;
  color: #8c9eae;
  margin-top: 4px;
}
.mastery-checkbox.approval {
  padding: 14px;
  border: 1px solid #dce9e2;
  background: #f1f7f3;
  border-radius: 7px;
  color: #668575;
}
.mastery-checkbox b {
  font-weight: 500;
}
.mastery-dialog form > p.mastery-editor-help {
  font-size: 9px;
  line-height: 1.9;
  color: #95a5b5;
}
.mastery-dialog footer {
  border-top: 1px solid var(--m-line);
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 25px;
  margin-top: 20px;
}
@media (min-width: 1500px) {
  .mastery-page {
    padding: 38px 52px;
  }
  .mastery-progress-layout {
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 35px;
  }
  .mastery-hero {
    padding: 40px 45px;
  }
  .mastery-hero-copy > p {
    max-width: 600px;
  }
  .mastery-chapter-toggle strong {
    font-size: 12px;
  }
  .mastery-lesson-list strong {
    font-size: 11px;
  }
}
@media (max-width: 1150px) {
  .mastery-page {
    padding: 26px 25px 40px;
  }
  .mastery-hero {
    gap: 22px;
    padding: 26px;
    grid-template-columns: 1.2fr 1fr;
  }
  .mastery-hero h2 {
    font-size: 26px;
  }
  .mastery-focus {
    padding: 18px;
  }
  .mastery-progress-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
  }
  .mastery-detail {
    padding: 19px;
  }
  .mastery-course-cards.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mastery-course-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mastery-stretch {
    flex-wrap: wrap;
  }
  .mastery-stretch button {
    margin-left: 47px;
  }
  .mastery-readonly {
    display: none;
  }
  .mastery-heading {
    gap: 15px;
  }
  .mastery-heading h1 {
    font-size: 26px;
  }
}
@media (max-width: 900px) {
  .mastery-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .mastery-view-controls {
    width: 100%;
    justify-content: flex-start;
  }
  .mastery-view-controls select {
    max-width: 100%;
  }
  .mastery-hero {
    grid-template-columns: 1fr;
  }
  .mastery-focus {
    display: none;
  }
  .mastery-progress-layout {
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 15px;
  }
  .mastery-course-heading {
    align-items: flex-end;
    flex-direction: row;
    gap: 12px;
  }
  .mastery-skill-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .mastery-lesson-list .mastery-badge {
    font-size: 0;
    padding: 4px;
  }
  .mastery-lesson-list .mastery-badge > i {
    width: 5px;
    height: 5px;
  }
  .mastery-section-heading h2 {
    font-size: 20px;
  }
  .mastery-tabs {
    gap: 20px;
  }
  .mastery-tabs > span {
    display: none;
  }
  .mastery-coverage-note {
    flex-wrap: wrap;
  }
  .mastery-coverage-note button {
    margin-left: 30px;
  }
  .mastery-standard-toolbar {
    flex-wrap: wrap;
  }
  .mastery-standard-toolbar select {
    width: 100%;
  }
  .mastery-standard-list {
    grid-template-columns: 1fr;
  }
  .mastery-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .mastery-metrics {
    gap: 10px;
  }
  .mastery-metrics strong {
    font-size: 23px;
  }
  .mastery-metrics span {
    font-size: 8px;
  }
}
@media (max-width: 700px) {
  .mastery-page {
    padding: 22px 17px 35px;
  }
  .mastery-heading h1 {
    font-size: 26px;
  }
  .mastery-view-controls {
    gap: 9px;
  }
  .mastery-view-controls label {
    min-width: 0;
    flex: 1;
  }
  .mastery-view-controls select {
    width: 100%;
    font-size: 9px;
    padding: 8px;
  }
  .mastery-demo {
    align-items: flex-start;
    font-size: 9px;
  }
  .mastery-demo svg {
    margin-top: 3px;
  }
  .mastery-hero {
    padding: 23px;
    border-radius: 12px;
  }
  .mastery-hero h2 {
    font-size: 25px;
  }
  .mastery-hero-copy > p {
    font-size: 10px;
  }
  .mastery-hero-actions {
    gap: 13px;
  }
  .mastery-hero-actions button {
    font-size: 9px;
  }
  .mastery-kicker {
    font-size: 8px;
    letter-spacing: .8px;
  }
  .mastery-tabs {
    gap: 16px;
    overflow: auto;
    white-space: nowrap;
    margin-bottom: 22px;
  }
  .mastery-tabs button {
    font-size: 9px;
    gap: 6px;
    flex-shrink: 0;
  }
  .mastery-progress-layout {
    grid-template-columns: 1fr;
  }
  .mastery-detail {
    position: static;
    grid-row: 1;
  }
  .mastery-detail .mastery-evidence-heading {
    margin-top: 17px;
    padding-top: 17px;
  }
  .mastery-course-heading {
    flex-direction: row;
    align-items: flex-end;
  }
  .mastery-course-heading select {
    max-width: 115px;
    font-size: 8px;
  }
  .mastery-course-heading h2 {
    font-size: 19px;
  }
  .mastery-course-heading .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .mastery-metrics span {
    font-size: 8px;
  }
  .mastery-skill-toolbar {
    flex-direction: row;
    align-items: center;
  }
  .mastery-skill-toolbar h3 {
    font-size: 10px;
  }
  .mastery-skill-toolbar input {
    max-width: 85px;
    font-size: 9px;
  }
  .mastery-lesson-list .mastery-badge {
    font-size: 8px;
  }
  .mastery-chapter-toggle {
    gap: 10px;
    padding: 12px;
  }
  .mastery-chapter-toggle strong {
    font-size: 10px;
  }
  .mastery-lesson-list > button {
    padding: 12px;
  }
  .mastery-pathway-count {
    display: none;
  }
  .mastery-section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .mastery-section-heading h2 {
    font-size: 20px;
  }
  .mastery-section-heading p {
    font-size: 10px;
  }
  .mastery-course-cards.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mastery-course-cards {
    grid-template-columns: 1fr;
  }
  .mastery-path-card > em {
    font-size: 8px;
  }
  .mastery-path-card > p {
    margin-bottom: 14px;
  }
  .mastery-coverage-note {
    padding: 14px;
  }
  .mastery-coverage-note p {
    flex-basis: calc(100% - 40px);
  }
  .mastery-coverage-note button {
    margin-left: 0;
  }
  .mastery-stretch {
    padding: 20px;
  }
  .mastery-stretch button {
    margin-left: 0;
  }
  .mastery-stage header p {
    font-size: 9px;
  }
  .mastery-stage > header > span {
    flex-shrink: 0;
  }
  .mastery-stretch h3 {
    font-size: 18px;
  }
  .mastery-lesson-list .mastery-badge {
    font-size: 0;
  }
  .mastery-standard-toolbar > span {
    display: none;
  }
  .mastery-detail h2 {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mastery-page * {
    transition: none !important;
  }
}
.mastery-compact-focus {
  display: none;
}
.mastery-page .mastery-course-heading .eyebrow,
.mastery-page .mastery-heading .eyebrow {
  color: #74869b;
}
.mastery-metrics span,
.mastery-detail .mastery-alignment p {
  color: #7e90a3;
}
.mastery-standard-list p {
  color: #6e839a;
}
.mastery-badge.unassessed {
  color: #7b8b9c;
}
.mastery-badge.mastered {
  color: #377b5c;
}
.mastery-badge.ready {
  color: #4a72a3;
}
.mastery-badge.practising,
.mastery-badge.revisit {
  color: #8a6d36;
}
@media (max-width: 900px) {
  .mastery-compact-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #dbe4ee;
    margin-top: 17px;
    padding-top: 13px;
    font-size: 10px;
    color: #7890a7;
  }
  .mastery-compact-focus b {
    font-weight: 500;
  }
  .mastery-compact-focus small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    color: #849b94;
  }
  .mastery-compact-focus button {
    padding: 8px;
    background: #ffffffa6;
    color: #6c89a7;
    border: 1px solid #dce5ed;
    border-radius: 5px;
  }
}

/* src/mastery-navigation.css */
.mastery-page .mastery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.mastery-page .mastery-view-controls {
  width: auto;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  max-width: 290px;
}
.mastery-page .mastery-view-controls label {
  flex: 0 1 auto;
}
.mastery-page .mastery-view-controls select {
  width: auto;
  min-width: 85px;
  max-width: 175px;
}
.mastery-pathway-menu {
  max-width: 1500px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: 14px;
  overflow: hidden;
}
.mastery-subject-menu {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: #f1f5fa;
  border-bottom: 1px solid var(--m-line);
  overflow: auto;
}
.mastery-subject-menu button {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: #74879e;
  white-space: nowrap;
  font-size: 11px;
}
.mastery-subject-menu button:hover {
  background: #ffffff9e;
  color: var(--m-blue);
}
.mastery-subject-menu button[aria-pressed=true] {
  background: #fff;
  border-color: #cbd9eb;
  color: var(--m-blue);
  box-shadow: 0 2px 5px #22456a08;
  font-weight: 500;
}
.mastery-pathway-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 18px 8px;
}
.mastery-pathway-strip[hidden] {
  display: none;
}
.mastery-pathway-step {
  padding: 0 16px;
  border-right: 1px solid var(--m-line);
  min-width: 0;
}
.mastery-pathway-step:last-child {
  border: 0;
}
.mastery-pathway-step h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #526d8b;
}
.mastery-pathway-step h2 > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: #edf3f9;
  color: #7792ae;
  border-radius: 50%;
  font-size: 9px;
}
.mastery-pathway-step > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
.mastery-pathway-step button {
  position: relative;
  border: 1px solid #e1e8f0;
  border-radius: 5px;
  background: #fafbfd;
  color: #71849c;
  padding: 5px 7px;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mastery-pathway-step button:hover {
  border-color: #aebfd5;
  color: var(--m-blue);
}
.mastery-pathway-step button[aria-pressed=true] {
  background: #eaf1fc;
  color: #315f9a;
  border-color: #a6bfe0;
  box-shadow: 0 0 0 1px #a6bfe020;
}
.mastery-pathway-step button i {
  width: 5px;
  height: 5px;
  background: #488a73;
  border-radius: 50%;
  display: inline-block;
}
.mastery-pathway-context {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-top: 1px solid #e9eef4;
  color: #627d98;
  background: #fcfdff;
  font-size: 10px;
}
.mastery-pathway-context > span {
  flex: 1;
  min-width: 0;
}
.mastery-pathway-context b {
  font-weight: 500;
}
.mastery-pathway-context small {
  font-size: 9px;
  display: block;
  color: #8b9aaa;
  margin-top: 3px;
}
.mastery-pathway-context button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--m-blue);
  background: none;
  border: 0;
  padding: 6px;
  white-space: nowrap;
}
.mastery-course-fold[aria-expanded=true] svg {
  transform: rotate(180deg);
}
.mastery-page .has-child-portraits .mastery-view-controls {
  max-width: none;
  flex-direction: row;
  gap: 12px;
}
.mastery-child-switcher {
  display: grid;
  grid-template-columns: repeat(var(--child-count), minmax(0, 1fr));
  width: calc(var(--child-count)*64px);
  max-width: 280px;
  gap: 5px;
}
.mastery-child-choice {
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 7px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: transparent;
  color: #74869c;
  transition: background .15s, border-color .15s;
}
.mastery-child-choice:hover {
  background: #eff3f9;
}
.mastery-child-choice[aria-pressed=true] {
  background: color-mix(in srgb, var(--child-color) 7%, white);
  border-color: color-mix(in srgb, var(--child-color) 25%, white);
  color: var(--child-color);
}
.mastery-child-choice:focus-visible {
  outline: 2px solid var(--child-color);
  outline-offset: 3px;
}
.mastery-child-ring {
  position: relative;
  display: block;
  border: 2px solid var(--child-color);
  border-radius: 50%;
  padding: 3px;
}
.mastery-child-portrait {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--child-color) 10%, white);
  color: var(--child-color);
  font-size: 13px;
  font-weight: 500;
}
.mastery-child-portrait img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.mastery-child-check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--child-color);
  color: white;
}
.mastery-child-name {
  font-size: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.mastery-subject-empty {
  max-width: 1500px;
  margin: 24px auto;
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 35px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 15px;
  background: #fff;
  color: #6e839a;
}
.mastery-subject-empty h2 {
  font-size: 23px;
  font-weight: 500;
  color: var(--m-ink);
}
.mastery-subject-empty p {
  max-width: 550px;
  line-height: 1.9;
}
.mastery-coverage-heading {
  align-items: center;
  gap: 18px;
}
.mastery-coverage-heading h2 {
  font-size: 23px;
}
.mastery-coverage-switch {
  display: flex;
  flex-shrink: 0;
  background: #eaf0f7;
  border-radius: 7px;
  padding: 3px;
  gap: 3px;
}
.mastery-coverage-switch button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  background: transparent;
  color: #7a8da5;
  white-space: nowrap;
}
.mastery-coverage-switch button[aria-pressed=true] {
  background: #fff;
  color: var(--m-blue);
  box-shadow: 0 1px 4px #26496c0c;
}
.mastery-coverage-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 18px 0 13px;
}
.mastery-coverage-controls select {
  font-size: 10px;
  max-width: 350px;
}
.mastery-coverage-controls a {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  flex-shrink: 0;
}
.mastery-coverage-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: #8091a4;
  font-size: 10px;
  padding: 12px 0 16px;
}
.mastery-coverage-summary > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mastery-coverage-summary b {
  font-weight: 500;
  color: #405e7c;
}
.mastery-coverage-summary i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.mastery-coverage-chart .mapped,
.mastery-coverage-summary .mapped {
  background: #668db9;
}
.mastery-coverage-chart .unmapped,
.mastery-coverage-summary .unmapped {
  background:
    repeating-linear-gradient(
      135deg,
      #f1dbaa 0 4px,
      #e7c587 4px 6px);
}
.mastery-coverage-chart {
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: 11px;
  padding: 4px 18px;
  overflow: hidden;
}
.mastery-coverage-row {
  display: grid;
  grid-template-columns: 155px minmax(50px, 1fr) 100px 15px;
  gap: 18px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: transparent;
  padding: 13px 0;
  text-align: left;
  color: #4d6a88;
}
.mastery-coverage-row:last-child {
  border: 0;
}
.mastery-coverage-row:hover {
  background: #f8faff;
}
.mastery-coverage-topic {
  font-size: 11px;
  font-weight: 500;
}
.mastery-coverage-topic small {
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: #8d9daf;
  margin-top: 3px;
}
.mastery-coverage-track {
  height: 14px;
  background: #f4f7fb;
  border-radius: 4px;
  overflow: hidden;
}
.mastery-coverage-track > span {
  height: 100%;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}
.mastery-coverage-track i {
  display: block;
  height: 100%;
}
.mastery-coverage-count {
  font-size: 10px;
  text-align: right;
  color: #6682a1;
}
.mastery-coverage-count small {
  display: block;
  color: #9b7940;
  font-size: 9px;
  margin-top: 3px;
}
.mastery-coverage-footnote {
  font-size: 9px;
  color: #8b9bab;
  line-height: 1.8;
  margin-top: 13px !important;
  max-width: 800px;
}
.mastery-topic-reset {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #edf3fa;
  color: #577da7;
  border: 1px solid #d9e5f2;
  border-radius: 5px;
  font-size: 10px;
  padding: 7px 9px;
}
@media (max-width: 900px) {
  .mastery-page .mastery-view-controls {
    max-width: 230px;
    gap: 7px;
  }
  .mastery-pathway-step {
    padding: 0 12px;
  }
  .mastery-subject-menu {
    gap: 4px;
    padding: 8px;
  }
  .mastery-subject-menu button {
    padding: 9px 7px;
    font-size: 10px;
  }
  .mastery-coverage-row {
    grid-template-columns: 140px minmax(45px, 1fr) 90px 12px;
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .mastery-page .mastery-heading {
    gap: 10px;
    align-items: center;
  }
  .mastery-page .mastery-heading h1 {
    font-size: 23px;
    letter-spacing: -.8px;
  }
  .mastery-page .mastery-heading .eyebrow {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .mastery-page .mastery-heading p {
    font-size: 9px;
  }
  .mastery-page .mastery-view-controls {
    max-width: 115px;
    flex-direction: column;
    align-items: flex-end;
  }
  .mastery-page .mastery-view-controls label {
    max-width: 100%;
    font-size: 8px;
  }
  .mastery-page .mastery-view-controls select {
    max-width: 110px;
    min-width: 80px;
  }
  .mastery-page .mastery-heading.has-child-portraits {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .mastery-page .has-child-portraits .mastery-view-controls {
    justify-content: flex-start;
    width: 100%;
  }
  .mastery-child-switcher {
    width: 100%;
    max-width: 100%;
  }
  .mastery-subject-menu button {
    flex-direction: column;
    gap: 5px;
    font-size: 9px;
    padding: 8px;
  }
  .mastery-pathway-strip {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
  .mastery-pathway-step {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--m-line);
  }
  .mastery-pathway-step > div {
    margin-top: 8px;
  }
  .mastery-pathway-context {
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  .mastery-coverage-heading {
    align-items: flex-start;
  }
  .mastery-coverage-controls {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .mastery-coverage-controls select {
    max-width: 100%;
  }
  .mastery-coverage-summary {
    gap: 10px;
    font-size: 9px;
  }
  .mastery-coverage-chart {
    padding: 4px 12px;
  }
  .mastery-coverage-row {
    grid-template-columns: 100px minmax(30px, 1fr) 68px 10px;
    gap: 8px;
  }
  .mastery-coverage-topic {
    font-size: 10px;
  }
  .mastery-coverage-count {
    font-size: 9px;
  }
  .mastery-coverage-count small {
    font-size: 8px;
  }
  .mastery-subject-empty {
    padding: 24px;
  }
}

/* src/preparation.css */
.prep-page {
  height: 100%;
  overflow: auto;
  background: #f6f8fc;
  padding: 30px 30px 90px;
  color: #29364d;
  font-size: 13px;
}
.prep-page * {
  box-sizing: border-box;
}
.prep-page button {
  font: inherit;
  cursor: pointer;
}
.prep-page button:disabled {
  cursor: default;
  opacity: .5;
}
.prep-page h1,
.prep-page h2,
.prep-page h3,
.prep-page h4,
.prep-page p {
  margin: 0;
}
.prep-page button:focus-visible,
.prep-page textarea:focus-visible {
  outline: 2px solid #376bd2;
  outline-offset: 3px;
}
.prep-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 27px;
}
.prep-heading h1 {
  font-size: 30px;
  letter-spacing: -1.1px;
  margin: 6px 0;
}
.prep-heading h1 span {
  color: #4877c8;
}
.prep-heading p {
  color: #7b899e;
}
.prep-heading > .button {
  background: #fff;
}
.prep-layout {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr) 290px;
  gap: 20px;
  align-items: start;
  max-width: 1750px;
  margin: auto;
}
.prep-heading {
  max-width: 1750px;
  margin-left: auto;
  margin-right: auto;
}
.prep-lesson-list {
  background: #f0f3f9;
  border: 1px solid #e2e7f0;
  border-radius: 15px;
  padding: 15px 12px;
}
.prep-lesson-list > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 16px;
}
.prep-lesson-list h2 {
  font-size: 14px;
}
.prep-lesson-list small {
  font-size: 10px;
  color: #8793a6;
}
.prep-section-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #e2eaf8;
  display: grid;
  place-items: center;
  color: #4870ad;
}
.prep-list-filter {
  display: flex;
  border-bottom: 1px solid #dee4ee;
  margin-bottom: 8px;
}
.prep-list-filter button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  flex: 1;
  padding: 9px 2px;
  color: #8290a5;
  font-size: 11px;
  font-weight: 600;
}
.prep-list-filter button[aria-pressed=true] {
  color: #2d5ba3;
  border-color: #3867af;
}
.prep-lesson {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 13px 12px;
  margin: 5px 0;
  color: #697990;
}
.prep-lesson:hover {
  background: #fff9;
}
.prep-lesson.selected {
  background: #fff;
  border-color: #a8bfdf;
  box-shadow: 0 3px 9px #2f4c7510;
}
.prep-lesson > strong {
  color: #33435d;
  font-size: 12px;
  line-height: 1.6;
}
.prep-lesson > span {
  font-size: 11px;
}
.prep-lesson .prep-lesson-date {
  color: #5476a9;
  font-size: 10px;
  letter-spacing: .45px;
  text-transform: uppercase;
  font-weight: 600;
}
.prep-lesson small {
  display: flex;
  align-items: center;
  gap: 5px;
}
.prep-lesson em {
  font-size: 9px;
  font-style: normal;
  color: #8a98ac;
  margin-top: 2px;
}
.prep-lesson em.saved {
  color: #3b866a;
}
.prep-lesson em.draft {
  color: #a66f2e;
}
.prep-detail {
  min-width: 0;
  border: 1px solid #e1e7f0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 20px #3f537007;
}
.prep-lesson-heading {
  padding: 24px 26px 20px;
}
.prep-detail-kicker {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.prep-detail-kicker > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8592a5;
  font-size: 11px;
}
.prep-lesson-heading h2 {
  font-size: 22px;
  letter-spacing: -.65px;
  margin: 10px 0 6px;
  line-height: 1.4;
}
.prep-lesson-heading > p {
  color: #7e8da3;
  font-size: 12px;
}
.prep-students {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.prep-students button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f9fd;
  border: 1px solid #e0e7f2;
  border-radius: 22px;
  padding: 5px 10px 5px 5px;
  color: #536c91;
}
.prep-students button strong {
  font-size: 11px;
}
.prep-students button[aria-pressed=true] {
  background: #edf4ff;
  border-color: #8caedb;
  color: #234e92;
}
.prep-students button > span,
.prep-profile-placeholder button > span {
  width: 27px;
  height: 27px;
  background: #e5edf9;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #577ab0;
}
.prep-student-hint {
  display: block;
  color: #94a0b2;
  font-size: 10px;
  margin: 9px 0 17px;
}
.prep-lesson-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.prep-page .button {
  font-size: 11px;
  min-height: 35px;
  border-radius: 7px;
  padding: 8px 11px;
  gap: 6px;
  justify-content: center;
}
.prep-tabs {
  display: flex;
  border-top: 1px solid #edf0f5;
  border-bottom: 1px solid #e6ebf3;
  padding: 0 24px;
  background: #fbfcfe;
  gap: 24px;
}
.prep-tabs button {
  border: 0;
  background: none;
  border-bottom: 2px solid transparent;
  padding: 14px 0;
  color: #8592a6;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prep-tabs button[aria-current] {
  border-color: #406bb1;
  color: #315b9c;
}
.prep-tabs button span {
  background: #ebf0f8;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 9px;
}
.prep-tab-content {
  padding: 24px 26px;
}
.prep-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
}
.prep-page h3 {
  font-size: 13px;
  font-weight: 600;
}
.prep-section-heading p {
  font-size: 10px;
  color: #8d9aaf;
  margin-top: 5px;
}
.prep-plan-state {
  font-size: 9px;
  background: #f0f5f7;
  color: #6f8b86;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.prep-plan-state.draft {
  color: #a17031;
  background: #fff6e9;
}
.prep-field {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 20px;
}
.prep-field textarea {
  font-family: inherit;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  color: #334762;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid #dde5ef;
  border-radius: 8px;
  background: #fcfdff;
  width: 100%;
  min-height: 75px;
}
.prep-field textarea::placeholder {
  color: #a2aec1;
  font-size: 11px;
  font-weight: 400;
}
.prep-field textarea:disabled {
  background: #f5f7fa;
  color: #7c8a9e;
}
.prep-selected-skills > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #e5ebf4;
  border-radius: 8px;
  margin: 8px 0;
  color: #5b7eaf;
}
.prep-selected-skills > div > span {
  flex: 1;
  min-width: 0;
}
.prep-selected-skills strong {
  font-size: 11px;
  color: #3e526e;
  display: block;
  font-weight: 500;
}
.prep-selected-skills small {
  color: #909eb1;
  font-size: 9px;
}
.prep-selected-skills button {
  border: 0;
  background: none;
  color: #91a0b5;
  padding: 5px;
}
.prep-soft-empty {
  padding: 15px;
  background: #f7f9fc;
  border: 1px dashed #e0e7f2;
  border-radius: 8px;
  color: #8d9aaf;
  font-size: 11px;
  line-height: 1.8;
  margin: 12px 0 !important;
}
.prep-save-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #edf0f5;
  margin-top: 22px;
  padding-top: 17px;
}
.prep-save-row > span {
  font-size: 9px;
  color: #8a99ac;
  max-width: 55%;
}
.prep-readonly {
  background: #eff4fb;
  border-radius: 7px;
  padding: 12px;
  font-size: 11px;
  color: #6380aa;
  margin-bottom: 16px !important;
}
.prep-page .lesson-picker-results {
  max-height: 250px;
}
.prep-page .lesson-picker-controls {
  flex-wrap: wrap;
}
.prep-page .lesson-picker-controls > * {
  min-width: 0;
}
.prep-page .lesson-picker-controls select {
  max-width: 100%;
}
.prep-profile-placeholder {
  border: 1px dashed #d6e1ef;
  background: #f1f5fb;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
}
.prep-profile-placeholder > span {
  width: 53px;
  height: 53px;
  margin: 0 auto 18px;
  border-radius: 17px;
  background: #e4edf9;
  color: #7393bf;
  display: grid;
  place-items: center;
}
.prep-profile-placeholder h3 {
  line-height: 1.7;
}
.prep-profile-placeholder p {
  font-size: 11px;
  color: #8a9bb3;
  line-height: 1.9;
  margin: 10px 0 20px;
}
.prep-profile-placeholder button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #e3eaf5;
  color: #54719b;
  border-radius: 8px;
  padding: 8px;
  margin-top: 7px;
  text-align: left;
  font-size: 11px;
}
.prep-profile-placeholder button > svg {
  margin-left: auto;
}
.prep-student-panel {
  min-height: 470px;
  min-width: 0;
  background: #fff;
  border: 1px solid #dbe4f1;
  border-radius: 15px;
  overflow: hidden;
  scroll-margin-top: 18px;
}
.prep-student-panel > header {
  padding: 20px;
  display: flex;
  gap: 11px;
  align-items: center;
  background: #f5f8fd;
}
.prep-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #e4ecf9;
  border-radius: 13px;
  color: #5075a9;
  font-size: 18px;
}
.prep-student-panel > header h2 {
  font-size: 18px;
  margin-top: 3px;
}
.prep-student-panel .eyebrow {
  font-size: 8px;
  letter-spacing: 1.3px;
}
.prep-student-panel > header > button {
  margin-left: auto;
  border: 0;
  background: none;
  color: #8da0ba;
  padding: 4px;
}
.prep-student-panel > nav {
  display: flex;
  border-bottom: 1px solid #e6ecf4;
  padding: 0 17px;
  gap: 16px;
}
.prep-student-panel > nav > button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 12px 0;
  font-size: 10px;
  color: #8a9bb1;
}
.prep-student-panel > nav > button[aria-current] {
  color: #355d9a;
  border-color: #5077b6;
}
.prep-profile-body {
  padding: 19px;
}
.prep-profile-focus h3 {
  margin: 7px 0;
}
.prep-profile-focus p {
  font-size: 11px;
  line-height: 1.8;
  color: #8798b0;
}
.prep-profile-focus > div {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0 12px;
}
.prep-profile-focus > div > strong {
  font-size: 33px;
  font-weight: 500;
  color: #3463a8;
}
.prep-profile-focus > div > span {
  font-size: 11px;
  color: #5d7597;
  line-height: 1.7;
}
.prep-profile-focus small {
  font-size: 9px;
  color: #98a5b8;
}
.prep-profile-focus > small {
  display: block;
  border-top: 1px solid #edf1f7;
  padding-top: 13px;
  margin-bottom: 17px;
  line-height: 1.8;
}
.prep-subheading {
  margin: 22px 0 10px !important;
}
.prep-subheading > span {
  color: #93a5bd;
  font-size: 10px;
}
.prep-profile-skill {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid #edf1f6;
}
.prep-profile-skill strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #435b7d;
  line-height: 1.7;
}
.prep-profile-skill > span {
  display: inline-block;
  font-size: 9px;
  color: #8595ad;
  margin-top: 5px;
}
.prep-profile-skill .mastered {
  color: #3a8a67;
}
.prep-profile-note {
  font-size: 9px;
  line-height: 1.8;
  color: #9aa8bc;
  padding-top: 20px;
}
.prep-person-link {
  border: 0;
  background: none;
  color: #416ca8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.prep-person-link:hover {
  text-decoration: underline;
}
.prep-person-link:focus-visible {
  outline: 2px solid #477fca;
}
.prep-history-row {
  border-bottom: 1px solid #e9eef5;
  padding: 16px 0;
}
.prep-history-row > small {
  color: #99a7b9;
  font-size: 9px;
}
.prep-history-row h4 {
  font-size: 12px;
  line-height: 1.7;
  margin: 5px 0;
}
.prep-history-row p {
  font-size: 11px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #7b8ca5;
  margin: 8px 0;
}
.prep-history-status {
  font-size: 9px;
  color: #8c9db5;
}
.prep-history-row button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px 0;
  color: #4e76af;
  font-size: 10px;
}
.prep-previous {
  border: 1px solid #e1e9f4;
  border-radius: 9px;
  padding: 16px;
  margin-top: 12px;
}
.prep-previous > p {
  font-size: 11px;
  color: #94a2b6;
  margin-top: 12px;
}
.prep-previous .prep-history-row {
  border: 0;
  padding-bottom: 0;
}
.prep-muted {
  font-size: 10px;
  line-height: 1.8;
  color: #91a1b7;
  margin: 8px 0 !important;
}
.prep-material-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.prep-materials article {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #e8edf5;
}
.prep-materials img {
  width: 46px;
  height: 62px;
  object-fit: contain;
  border: 1px solid #e1e7ef;
  border-radius: 4px;
  background: #f7f9fc;
}
.prep-materials article > div {
  min-width: 0;
  flex: 1;
}
.prep-materials strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.prep-materials small {
  display: block;
  font-size: 10px;
  color: #93a3b9;
  margin: 5px 0;
}
.prep-materials article > div > div {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.prep-materials button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #507ab7;
  font-size: 10px;
}
.prep-saved-work {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  background: none;
  text-align: left;
  color: #6e89af;
}
.prep-saved-work > span {
  flex: 1;
}
.prep-saved-work strong {
  display: block;
  color: #536984;
  font-size: 11px;
}
.prep-saved-work small {
  color: #9ca9bc;
  font-size: 9px;
}
.prep-error,
.prep-notice {
  max-width: 1750px;
  margin: 0 auto 18px;
  border: 1px solid #e9c6bd;
  border-radius: 8px;
  background: #fff2ee;
  padding: 12px 15px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #a15a46;
  font-size: 12px;
}
.prep-error button {
  margin-left: auto;
  background: #fff;
  border: 1px solid #e9c6bd;
  border-radius: 5px;
  padding: 7px;
  color: inherit;
}
.prep-notice {
  color: #4f7e6d;
  border-color: #d3e6dd;
  background: #f0f8f3;
}
.prep-empty {
  padding: 30px 12px;
  color: #8a9bb0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  font-size: 11px;
  line-height: 1.8;
}
.prep-profile-breadcrumb {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.prep-profile-breadcrumb > span {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #8192ab;
}
.prep-profile-breadcrumb strong {
  color: #43628e;
}
.prep-profile-breadcrumb > small {
  margin-left: auto;
  color: #a17a3c;
}
.prep-page > .mastery-page {
  height: auto;
  overflow: visible;
  padding: 24px;
  border: 1px solid #e0e7f0;
  border-radius: 16px;
  background: white;
}
.prep-add-pathway-skill {
  margin-bottom: 12px;
}
.classroom-prep-links {
  display: flex;
  gap: 15px;
}
@media (min-width: 1600px) {
  .prep-layout {
    grid-template-columns: 260px minmax(0, 1fr) 320px;
    gap: 24px;
  }
  .prep-page {
    padding: 36px 40px 90px;
  }
}
@media (max-width: 1199px) {
  .prep-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 17px;
  }
  .prep-student-panel,
  .prep-profile-placeholder {
    grid-column: 2;
  }
  .prep-page {
    padding: 24px 22px 100px;
  }
  .prep-lesson-list {
    grid-row: 1 / span 2;
  }
  .prep-profile-placeholder {
    display: none;
  }
}
@media (max-width: 849px) {
  .prep-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .prep-lesson-list {
    grid-row: auto;
    display: flex;
    gap: 8px;
    overflow: auto;
    align-items: stretch;
    padding: 12px;
  }
  .prep-lesson-list > header {
    display: none;
  }
  .prep-list-filter {
    min-width: 90px;
    flex-direction: column;
    border: 0;
    margin: 0;
  }
  .prep-list-filter button {
    white-space: nowrap;
    padding: 8px 5px;
  }
  .prep-lesson {
    min-width: 185px;
    max-width: 210px;
    margin: 0;
    padding: 11px;
    flex-shrink: 0;
  }
  .prep-student-panel {
    grid-column: 1;
  }
  .prep-heading h1 {
    font-size: 26px;
  }
  .prep-heading p {
    font-size: 11px;
  }
  .prep-detail {
    scroll-margin-top: 16px;
  }
  .prep-lesson-heading h2 {
    font-size: 21px;
  }
  .prep-page > .mastery-page {
    padding: 16px;
  }
}
@media (max-width: 500px) {
  .prep-page {
    padding: 20px 12px 100px;
  }
  .prep-heading {
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
  }
  .prep-heading h1 {
    font-size: 24px;
    line-height: 1.35;
  }
  .prep-heading .eyebrow {
    font-size: 8px;
  }
  .prep-heading > .button {
    font-size: 0;
    min-width: 34px;
    padding: 9px;
  }
  .prep-heading > .button svg {
    width: 16px;
  }
  .prep-lesson-heading {
    padding: 19px 16px;
  }
  .prep-tab-content {
    padding: 20px 16px;
  }
  .prep-tabs {
    gap: 17px;
    padding: 0 16px;
  }
  .prep-tabs button {
    font-size: 10px;
    gap: 4px;
  }
  .prep-tabs button svg {
    width: 13px;
  }
  .prep-detail-kicker .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .prep-section-heading {
    gap: 8px;
    flex-wrap: wrap;
  }
  .prep-section-heading h3 {
    font-size: 12px;
  }
  .prep-save-row {
    flex-direction: column;
    align-items: stretch;
  }
  .prep-save-row > span {
    max-width: none;
  }
  .prep-profile-breadcrumb > span {
    display: none;
  }
  .prep-page .lesson-picker-controls {
    display: flex;
    flex-direction: column;
  }
  .prep-page .lesson-picker-controls select,
  .prep-page .lesson-picker-controls label {
    width: 100%;
  }
  .prep-error {
    align-items: stretch;
    flex-direction: column;
  }
  .prep-error button {
    margin: 0;
  }
}
.prep-individual {
  border-top: 1px solid #e7edf5;
  margin-top: 24px;
  padding-top: 22px;
}
.prep-individual > header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6282ad;
  margin-bottom: 16px;
}
.prep-individual > header h3 {
  color: #334762;
}
.prep-individual > header p {
  color: #8b9cb2;
  font-size: 10px;
  margin-top: 5px;
}
.prep-individual-tabs {
  display: flex;
  gap: 7px;
  overflow: auto;
  margin-bottom: 16px;
  padding: 2px;
}
.prep-individual-tabs button {
  display: flex;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
  background: #f6f8fc;
  border: 1px solid #e3eaf5;
  border-radius: 8px;
  padding: 8px;
  color: #6d82a1;
}
.prep-individual-tabs button[aria-pressed=true] {
  background: #edf4ff;
  border-color: #97b5dd;
  color: #355e9c;
}
.prep-individual-tabs strong {
  font-size: 11px;
}
.prep-individual-tabs small {
  font-size: 9px;
  font-weight: 400;
  opacity: .8;
}
.prep-individual-tabs button > span {
  background: #e3ecfa;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.prep-custom-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: #5b7191;
  margin-bottom: 15px;
}
.prep-custom-toggle input,
.prep-copy-choice input,
.prep-copy-materials input {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: #3867ad;
}
.prep-individual-skills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.prep-individual-skills > span {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  background: #eff4fb;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  color: #5e7da8;
}
.prep-individual-skills svg {
  flex-shrink: 0;
}
.prep-copy-origin {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #7a8ca6;
  font-size: 10px;
  line-height: 1.7;
  padding: 14px 0 0;
}
.prep-copy-origin svg {
  flex-shrink: 0;
}
.prep-copy-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #dbe5f3;
  border-radius: 17px;
  background: #fff;
  color: #344962;
  box-shadow: 0 25px 80px #1e365333;
  font-family: inherit;
}
.prep-copy-dialog::backdrop {
  background: #22344c66;
  backdrop-filter: blur(4px);
}
.prep-copy-dialog > header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 23px;
  border-bottom: 1px solid #e6ecf5;
  position: sticky;
  top: 0;
  background: white;
  z-index: 2;
}
.prep-copy-dialog h2 {
  font-size: 21px;
  margin: 5px 0 0;
  letter-spacing: -.4px;
}
.prep-copy-dialog .eyebrow {
  font-size: 8px;
  letter-spacing: 1.3px;
}
.prep-copy-symbol {
  color: #557eb8;
  background: #edf3fc;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.prep-copy-dialog > header > button {
  border: 0;
  background: none;
  color: #8496ae;
  margin-left: auto;
  padding: 5px;
}
.prep-copy-body {
  padding: 22px 25px;
}
.prep-copy-dialog select {
  font: inherit;
  font-size: 12px;
  padding: 11px;
  border: 1px solid #dce5f2;
  border-radius: 8px;
  color: #49668c;
  background: #f9fbfe;
  min-width: 0;
  width: 100%;
}
.prep-copy-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: #f2f6fc;
  border-radius: 9px;
  margin: 0 0 20px;
  color: #6487b6;
}
.prep-copy-target strong {
  display: block;
  font-size: 11px;
  color: #4d6a90;
  line-height: 1.8;
}
.prep-copy-target small {
  font-size: 8px;
  letter-spacing: 1px;
}
.prep-copy-choice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 18px 0 12px;
}
.prep-copy-choice strong {
  display: block;
  font-size: 12px;
}
.prep-copy-choice small {
  display: block;
  font-size: 10px;
  line-height: 1.7;
  color: #8b9bb1;
  margin-top: 4px;
}
.prep-copy-plan {
  margin: 0 0 18px 27px;
  padding: 14px;
  background: #fafbfd;
  border: 1px solid #e7edf6;
  border-radius: 8px;
}
.prep-copy-plan strong {
  font-size: 12px;
}
.prep-copy-plan p {
  font-size: 11px;
  line-height: 1.8;
  white-space: pre-wrap;
  margin: 8px 0;
  color: #7b8da6;
}
.prep-copy-plan small {
  font-size: 10px;
  color: #6685b0;
}
.prep-copy-help {
  font-size: 10px;
  line-height: 1.9;
  color: #8597af;
  background: #f5f8fc;
  padding: 12px 14px;
  border-radius: 7px;
  margin-top: 15px !important;
}
.prep-copy-materials {
  margin-left: 27px;
}
.prep-copy-materials > label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #ecf0f6;
}
.prep-copy-materials svg {
  flex-shrink: 0;
  color: #7396c2;
}
.prep-copy-materials strong {
  font-size: 11px;
  display: block;
}
.prep-copy-materials small {
  font-size: 9px;
  display: block;
  margin-top: 4px;
  color: #94a4b9;
}
.prep-copy-skipped {
  font-size: 10px;
  color: #97774d;
  line-height: 1.8;
  padding: 13px;
  background: #fffaef;
  border-radius: 7px;
  margin-top: 13px;
}
.prep-copy-dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 24px;
  border-top: 1px solid #e6ecf5;
  background: #fff;
  position: sticky;
  bottom: 0;
}
.prep-copy-dialog .button {
  font-size: 11px;
}
.prep-copy-dialog input:focus-visible,
.prep-copy-dialog select:focus-visible {
  outline: 2px solid #618bc5;
  outline-offset: 3px;
}
@media (max-width: 500px) {
  .prep-copy-dialog > header {
    padding: 17px;
    gap: 9px;
  }
  .prep-copy-dialog h2 {
    font-size: 18px;
  }
  .prep-copy-dialog .eyebrow {
    font-size: 7px;
    letter-spacing: .7px;
  }
  .prep-copy-body {
    padding: 17px;
  }
  .prep-copy-materials,
  .prep-copy-plan {
    margin-left: 0;
  }
  .prep-copy-dialog > footer {
    padding: 13px 17px;
  }
}
.prep-student-materials {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #e4e9f0;
  min-width: 0;
}
.prep-student-materials .prep-section-heading {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.prep-assigned-material {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #f7f9fc;
  border: 1px solid #e2e7ef;
  border-radius: 12px;
  margin: 12px 0;
  min-width: 0;
}
.prep-assigned-material > img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  object-position: top;
  border: 1px solid #dce2eb;
  border-radius: 4px;
  background: white;
}
.prep-assigned-material > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.prep-assigned-material strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.prep-assigned-material small {
  display: block;
  font-size: 10px;
  color: #7a879b;
  margin: 4px 0 10px;
}
.prep-assigned-material .prep-field {
  font-size: 10px;
  margin: 0;
  gap: 5px;
}
.prep-assigned-material input {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d9e1ed;
  border-radius: 7px;
  background: white;
  color: #23334b;
  font: inherit;
  font-size: 12px;
}
.prep-assigned-material input[aria-invalid=true] {
  border-color: #b44351;
}
.prep-assigned-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prep-assigned-actions button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  background: white;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  color: #687b98;
}
.prep-assigned-actions button:disabled {
  opacity: .3;
}
.prep-assign-picker {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 12px 0;
}
.prep-assign-picker select {
  min-width: 0;
  width: 100%;
  flex: 1;
  border: 1px solid #dce3ef;
  background: white;
  color: #3e506d;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
}
.prep-assignment-help {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  line-height: 1.5;
  color: #7d8ba1;
}
.prep-assignment-help button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #315b9b;
  font-size: 11px;
}
.prep-page-error {
  display: block;
  font-size: 11px;
  color: #ad394c;
  margin-top: 5px;
}
@media (max-width: 600px) {
  .prep-assign-picker {
    flex-wrap: wrap;
  }
  .prep-assign-picker select {
    flex-basis: 100%;
  }
  .prep-assigned-material {
    padding: 10px;
    gap: 8px;
  }
  .prep-assigned-material > img {
    width: 35px;
    height: 48px;
  }
}
.prep-tab-content > .prep-student-materials:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* src/manager-schedule.css */
.manager-schedule {
  width: 890px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  border: 1px solid #dbe4f1;
  border-radius: 16px;
  padding: 0;
  color: #334f74;
  box-shadow: 0 25px 100px #16325b30;
  background: #fff;
  overflow: auto;
}
.manager-schedule::backdrop {
  background: #293e5c55;
  backdrop-filter: blur(6px);
}
.manager-schedule > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 25px 28px;
  border-bottom: 1px solid #e4ebf5;
}
.manager-schedule .eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
}
.manager-schedule h2 {
  font-size: 25px;
  letter-spacing: -.6px;
  margin: 9px 0;
}
.manager-schedule header p {
  font-size: 11px;
  line-height: 1.6;
  color: #8697ae;
  margin: 0;
  max-width: 600px;
}
.manager-schedule header > button {
  background: none;
  border: 0;
  color: #8c9db6;
  padding: 2px;
}
.manager-schedule form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.planner-fields {
  border: 0;
  margin: 0;
  padding: 23px 28px;
  min-width: 0;
}
.planner-fields > label,
.planner-row label {
  display: block;
  font-size: 11px;
  color: #5c7596;
  margin-bottom: 16px;
}
.planner-fields input,
.planner-fields select {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 7px;
  padding: 10px 11px;
  border: 1px solid #dce5f1;
  background: #fbfcfe;
  border-radius: 7px;
  font: inherit;
  color: #3b577b;
  min-height: 38px;
}
.planner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.planner-zone {
  font-size: 9px;
  color: #8d9eb5;
  margin: -6px 0 19px;
}
.planner-days {
  margin: 2px 0 18px;
  font-size: 11px;
  color: #5c7596;
}
.planner-days > div {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.planner-days button {
  flex: 1;
  min-width: 0;
  border: 1px solid #dfe7f3;
  background: #fafbfd;
  color: #8a9ebc;
  border-radius: 6px;
  padding: 10px 3px;
  font-size: 10px;
}
.planner-days button[aria-pressed=true] {
  background: #eaf1ff;
  border-color: #6d90c4;
  color: #315e9e;
}
.planner-note {
  font-size: 10px;
  line-height: 1.7;
  background: #f3f7fd;
  color: #7e93af;
  padding: 12px;
  border-radius: 7px;
  margin: 3px 0 0;
}
.planner-preview {
  background: #f6f8fc;
  border-left: 1px solid #e4ebf5;
  padding: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.planner-preview-title {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #6381a9;
}
.planner-preview h3 {
  font-size: 13px;
  margin: 0;
  font-weight: 550;
}
.planner-preview-title > span {
  margin-left: auto;
  background: white;
  border: 1px solid #dce6f4;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
}
.planner-summary {
  padding: 18px 0;
}
.planner-summary strong {
  font-size: 12px;
  display: block;
}
.planner-summary span {
  font-size: 10px;
  color: #7c93b1;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}
.planner-preview ol {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 390px;
  overflow: auto;
}
.planner-preview li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid #e3eaf4;
  font-size: 11px;
}
.planner-number {
  color: #8da1bd;
  background: #edf1f8;
  border-radius: 6px;
  width: 25px;
  height: 29px;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.planner-preview li > div {
  flex: 1;
}
.planner-preview li strong {
  font-size: 11px;
  font-weight: 500;
}
.planner-preview li > div > span {
  display: block;
  font-size: 10px;
  color: #8296b2;
  margin-top: 5px;
}
.planner-preview li > svg {
  color: #8fae9c;
}
.planner-preview > p {
  font-size: 10px;
  color: #8397b2;
  line-height: 1.6;
}
.planner-ready {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #70937b !important;
}
.planner-preview-empty {
  margin: auto;
  text-align: center;
  color: #95a9c5;
  padding: 45px 5px;
}
.planner-preview-empty h4 {
  font-size: 13px;
  font-weight: 500;
  color: #7891b4;
}
.planner-preview-empty p {
  font-size: 11px;
  line-height: 1.6;
}
.planner-preview-empty span {
  font-size: 10px;
  line-height: 1.8;
  display: block;
  padding-top: 22px;
  color: #9baac0;
}
.manager-schedule footer {
  grid-column: 1/-1;
  border-top: 1px solid #e4ebf5;
  padding: 18px 28px;
  position: sticky;
  bottom: 0;
  background: white;
}
.manager-schedule footer > div {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.manager-schedule footer > div > span {
  color: #92a2b9;
  font-size: 10px;
}
.manager-schedule footer > div > div {
  display: flex;
  gap: 9px;
}
.planner-error {
  font-size: 11px;
  line-height: 1.6;
  background: #fff2ef;
  color: #a16459;
  padding: 10px 12px;
  border-radius: 7px;
  margin: 0 0 12px;
}
.hub-scheduling {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: 1px solid #b9cdeb;
  background: #edf3ff;
  color: #466da6;
  border-radius: 7px;
  padding: 11px;
  margin: 13px 0;
  font-size: 11px;
}
.hub-upcoming button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: #f5f8fd;
  color: #5c7ba7;
  font-size: 10px;
  padding: 10px;
  margin: 6px 0;
  line-height: 1.7;
}
.hub-upcoming button[aria-pressed=true] {
  background: #e7effd;
  box-shadow: inset 2px 0 #5e82b6;
}
.hub-upcoming button span {
  display: block;
  color: #91a3bc;
  font-size: 9px;
}
.schedule-event {
  overflow: hidden;
}
.schedule-event.compact {
  padding: 3px 5px;
  gap: 1px;
}
.schedule-event.compact strong {
  font-size: 10px;
}
.schedule-event.compact span {
  font-size: 9px;
}
.schedule-event.compact small {
  display: none;
}
.schedule-edit-time {
  margin-top: 11px !important;
  font-size: 10px !important;
}
.hub-event-time {
  font-size: 10px;
  color: #7d92ae;
  line-height: 1.8;
  padding: 9px 0;
}
@media (max-width: 640px) {
  .manager-schedule {
    max-width: calc(100vw - 18px);
    max-height: calc(100dvh - 20px);
  }
  .manager-schedule form {
    grid-template-columns: 1fr;
  }
  .manager-schedule > header {
    padding: 20px;
  }
  .manager-schedule h2 {
    font-size: 21px;
  }
  .planner-fields {
    padding: 20px;
  }
  .planner-fields input,
  .planner-fields select {
    font-size: 16px;
  }
  .planner-preview {
    border-left: 0;
    border-top: 1px solid #e4ebf5;
    padding: 20px;
  }
  .planner-preview-empty {
    padding: 15px;
  }
  .planner-preview-empty span {
    display: none;
  }
  .manager-schedule footer {
    padding: 14px;
  }
  .manager-schedule footer > div {
    flex-wrap: wrap;
  }
  .manager-schedule footer > div > span {
    display: none;
  }
  .manager-schedule footer > div > div {
    width: 100%;
    justify-content: flex-end;
  }
  .planner-days button {
    font-size: 9px;
    min-height: 38px;
  }
  .planner-row {
    gap: 9px;
  }
}
.hub-preview {
  max-height: calc(100dvh - 30px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.hub-preview .hub-record-link {
  margin-top: 0;
}
.hub-upcoming {
  margin-bottom: 18px;
}
@media (max-width: 780px) {
  .hub-preview {
    max-height: none;
    overflow: visible;
  }
}
.schedule-event.compact strong,
.schedule-event.compact span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-event.micro {
  padding: 0 3px;
}
.schedule-event.micro span {
  display: none;
}
@media (max-width: 700px) {
  .schedule-event {
    width: auto !important;
    left: auto !important;
  }
  .schedule-event.micro {
    padding: 10px;
  }
  .schedule-event.micro span {
    display: block;
  }
}

/* src/lesson-call.css */
.lesson-call-panel,
.lesson-call-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 354px;
  color: #2b405d;
  font-size: 11px;
}
.lesson-call-panel {
  background: #fff;
  border: 1px solid #ccd9e7;
  border-radius: 14px;
  box-shadow: 0 16px 55px #22354e2b, 0 3px 12px #22354e16;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 94px);
  width: min(354px, calc(100vw - 24px));
}
.lesson-call-panel.is-wide {
  width: min(568px, calc(100vw - 24px));
}
.call-heading {
  display: flex;
  align-items: center;
  padding: 13px;
  gap: 10px;
  border-radius: 14px 14px 0 0;
  background: #fafcff;
  border-bottom: 1px solid #e4eaf2;
  flex-shrink: 0;
}
.call-heading-icon,
.call-launch-icon {
  display: grid;
  place-items: center;
  background: #e8f0fb;
  color: #305b95;
  border-radius: 9px;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}
.call-heading > div {
  flex: 1;
  min-width: 0;
}
.call-heading h2 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.1px;
  margin: 0;
}
.call-heading p {
  font-size: 10px;
  color: #8391a4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 0 0;
}
.call-heading > button {
  width: 26px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #788aa1;
  padding: 0;
}
.call-heading > button:hover {
  background: #eaf0f8;
  color: #2a548e;
}
.call-service-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  background: #f8f5ed;
  color: #8a754d;
  font-size: 9px;
  flex-shrink: 0;
}
.call-service-status > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.call-service-status i {
  width: 5px;
  height: 5px;
  background: #bfa36d;
  border-radius: 50%;
}
.call-service-status small {
  font-size: 9px;
}
.call-panel-body {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 0 13px;
}
.call-people-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 9px;
  font-size: 10px;
}
.call-people-heading strong,
.call-chat-heading strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.call-people-heading > span {
  color: #8a99aa;
  font-size: 9px;
}
.call-camera-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 208px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 2px;
}
.is-wide .call-camera-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 230px;
}
.call-person {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  display: block;
  padding: 0;
  text-align: left;
  border: 2px solid transparent;
  background: #f2f5f9;
  min-width: 0;
}
.call-person[aria-pressed=true] {
  border-color: #618aca;
}
.call-person:hover {
  border-color: #9db7da;
}
.call-camera {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #edf2f8;
  gap: 7px;
  color: #8491a3;
  min-width: 0;
}
.call-avatar {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  margin-top: -12px;
}
.tone-0 {
  background: #dce7f6;
  color: #45699b;
}
.tone-1 {
  background: #e8e4f4;
  color: #8472a5;
}
.tone-2 {
  background: #e0eeeb;
  color: #5b9287;
}
.tone-3 {
  background: #f4e7dc;
  color: #b18a66;
}
.tone-4 {
  background: #f0e3e9;
  color: #a17b8b;
}
.call-camera-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
}
.call-camera-name {
  position: absolute;
  bottom: 7px;
  left: 8px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: #51657f;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.call-camera-name i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b7c1cf;
  flex-shrink: 0;
}
.call-camera-name i.online {
  background: #64a587;
}
.call-pin {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  color: #456c9e;
}
.call-person:hover .call-pin,
.call-person:focus-visible .call-pin,
.call-person[aria-pressed=true] .call-pin {
  opacity: 1;
}
.call-camera video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transform: scaleX(-1);
}
.call-camera.local-camera .call-camera-name {
  background: #16243a99;
  color: white;
  padding: 4px;
  border-radius: 5px;
  right: auto;
  bottom: 5px;
  left: 5px;
}
.call-private-label {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 8px;
  color: white;
  background: #223951aa;
  border-radius: 4px;
  padding: 3px 5px;
}
.call-media-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 0 12px;
}
.call-media-controls button {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dce4ed;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 10px;
  color: #567292;
}
.call-media-controls button:hover {
  background: #f2f6fc;
}
.call-media-controls button.camera-enabled {
  color: #396c53;
  background: #edf7f1;
  border-color: #bbd9c8;
}
.call-media-controls > span {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 8px;
  color: #9ba5b3;
}
.call-private-note {
  font-size: 9px;
  color: #5d7b6c;
  margin: 0 0 10px;
  line-height: 1.5;
}
.call-chat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5ebf2;
  padding: 12px 0 7px;
  font-size: 10px;
}
.call-chat-heading > span {
  font-size: 8px;
  color: #92a0b1;
}
.call-messages {
  height: 148px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 4px 0 8px;
}
.is-wide .call-messages {
  height: 182px;
}
.call-chat-empty {
  text-align: center;
  color: #94a3b6;
  padding: 17px 15px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.call-chat-empty strong {
  font-size: 11px;
  color: #71849d;
  font-weight: 500;
}
.call-chat-empty p {
  font-size: 10px;
  line-height: 1.6;
  margin: 0;
}
.call-message {
  padding: 8px 10px;
  margin: 3px 20px 8px 0;
  background: #f2f5f9;
  border-radius: 3px 9px 9px 9px;
  overflow-wrap: anywhere;
}
.call-message.own {
  margin-left: 20px;
  margin-right: 0;
  background: #eaf1fc;
  border-radius: 9px 3px 9px 9px;
}
.call-message header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  margin-bottom: 4px;
}
.call-message strong {
  font-weight: 600;
  color: #5a759b;
}
.call-message time {
  color: #98a4b6;
  font-size: 8px;
  white-space: nowrap;
}
.call-message p {
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  color: #3a516e;
}
.call-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 13px 0;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  background: #f9fbfe;
  padding: 8px;
  flex-shrink: 0;
}
.call-composer:focus-within {
  border-color: #7d9dcc;
  box-shadow: 0 0 0 2px #dbe7fa;
}
.call-composer textarea {
  font: inherit;
  line-height: 1.5;
  width: 100%;
  resize: vertical;
  min-height: 20px;
  max-height: 76px;
  border: 0;
  background: transparent;
  outline: none;
  color: #344d70;
}
.call-composer textarea::placeholder {
  color: #9aa9bd;
}
.call-composer button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  flex-shrink: 0;
  background: #2e5899;
  color: white;
}
.call-composer button:disabled {
  background: #e9eef6;
  color: #a7b4c7;
  cursor: default;
}
.call-footer {
  font-size: 8px;
  color: #99a5b5;
  padding: 8px 13px 11px;
  text-align: center;
  flex-shrink: 0;
}
.call-error {
  font-size: 10px;
  line-height: 1.5;
  color: #aa554b;
  background: #fff3ef;
  padding: 8px 10px;
  margin: 0 13px 8px;
  border-radius: 6px;
}
.call-pinned {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 8px;
}
.call-pinned .call-camera {
  width: 100%;
  height: 200px;
  aspect-ratio: auto;
}
.call-camera.large .call-avatar {
  width: 52px;
  height: 52px;
  font-size: 23px;
}
.call-camera.large .call-camera-status {
  font-size: 10px;
}
.call-pinned > button {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: white;
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 9px;
  color: #557194;
}
.call-camera-hover {
  position: fixed;
  z-index: 82;
  width: 290px;
  border: 1px solid #d3dfed;
  box-shadow: 0 14px 40px #20375130;
  border-radius: 10px;
  background: white;
  padding: 7px;
  pointer-events: none;
}
.call-camera-hover > .call-camera {
  border-radius: 6px;
  aspect-ratio: 16/10;
}
.call-camera-hover p {
  font-size: 9px;
  color: #91a0b3;
  margin: 7px 2px 2px;
}
.lesson-call-launcher {
  width: min(330px, calc(100vw - 24px));
}
.call-launch-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid #ccd9e7;
  border-radius: 12px;
  background: white;
  box-shadow: 0 8px 28px #22354e26;
  padding: 11px 12px;
  text-align: left;
}
.call-launch-button > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.call-launch-button strong {
  font-size: 11px;
  display: block;
  color: #3b5678;
  font-weight: 600;
}
.call-launch-button small {
  display: block;
  font-size: 9px;
  color: #92a0b3;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.call-avatar-stack i {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid white;
  border-radius: 50%;
  margin-left: -6px;
  font-style: normal;
  font-size: 9px;
}
.call-avatar-stack b {
  font-size: 9px;
  color: #8193ac;
  font-weight: 500;
  margin-left: 3px;
}
.call-unread {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #315fa5;
  color: white;
  font-size: 9px;
}
.call-launch-button > svg {
  color: #98a6ba;
}
.call-preview-stop {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 9px;
  background: #ecf7f0;
  color: #47735b;
  padding: 8px;
  border-radius: 0 0 8px 8px;
}
.call-launch-peek {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d5dfeb;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 24px #243b5e20;
  pointer-events: none;
}
.lesson-call-launcher:hover .call-launch-peek,
.lesson-call-launcher:focus-within .call-launch-peek {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.call-launch-peek strong {
  font-size: 10px;
}
.call-launch-peek span {
  font-size: 10px;
  color: #8192a8;
  line-height: 1.5;
}
.call-launch-peek small {
  font-size: 9px;
  color: #a18c65;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 760px) {
  .lesson-call-panel,
  .lesson-call-launcher {
    right: 12px;
    bottom: 12px;
  }
  .call-camera-hover {
    display: none;
  }
  .lesson-call-panel {
    max-height: calc(100dvh - 80px);
  }
  .lesson-call-launcher .call-launch-peek {
    display: none;
  }
}
@media (max-height: 700px) {
  .call-messages,
  .is-wide .call-messages {
    height: 110px;
  }
  .call-camera-grid {
    max-height: 118px;
  }
  .call-pinned .call-camera {
    max-height: 150px;
  }
}
.app-footer {
  min-height: 42px;
  align-items: center;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .lesson-call-launcher {
  bottom: 6px;
  width: auto;
  max-width: min(330px, calc(100vw - 260px));
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-launch-button {
  padding: 3px 8px 3px 4px;
  border-radius: 8px;
  box-shadow: none;
  gap: 7px;
  height: 30px;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-launch-button:hover {
  border-color: #8da9d0;
  background: #f1f6fe;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-launch-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-launch-icon svg {
  width: 13px;
  height: 13px;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-launch-button > span:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-launch-button small {
  margin-top: 0;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .call-avatar-stack {
  transform: scale(.8);
  transform-origin: right center;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .lesson-call-panel {
  bottom: 0;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  max-height: calc(100dvh - 70px);
  box-shadow: 0 -12px 40px #22354e24, 0 -2px 10px #22354e12;
}

/* src/messenger-live.css */
.call-live-badge {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  background: #e0443e;
  color: #fff;
  font-style: normal;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1;
  padding: 3px 4px 2px;
  border-radius: 3px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px #b0302a40;
}
.call-live-badge.is-inline {
  position: static;
  transform: none;
  border: 0;
  margin-left: 2px;
}
.messenger-live {
  padding: 10px 13px 8px;
  border-bottom: 1px solid #e9eef5;
  flex-shrink: 0;
}
.messenger-live-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8d9bb0;
}
.messenger-live-title i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0443e;
  box-shadow: 0 0 0 3px #e0443e26;
  animation: live-pulse 1.8s ease-in-out infinite;
}
.messenger-live-empty {
  font-size: 10px;
  color: #a0acbd;
  margin: 8px 0 2px;
}
.messenger-live-row {
  display: flex;
  gap: 12px;
  margin-top: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.live-circle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 52px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  color: #4a6185;
}
.live-ring {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  padding: 2px;
  background: #dfe6f0;
}
.live-ring b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 13px;
  font-weight: 650;
  background: inherit;
}
.live-circle.is-room .live-ring {
  background:
    conic-gradient(
      #e0443e,
      #f39b4b,
      #e0443e);
}
.live-circle.is-room .live-ring b {
  background: #edf3fc;
  color: #34588e;
  font-size: 12px;
}
.live-circle.is-current .live-ring b {
  background: #34588e;
  color: #fff;
}
.live-circle.is-person .live-ring {
  background: #7cc79a;
}
.live-circle.is-person.is-on-camera .live-ring {
  background:
    conic-gradient(
      #e0443e,
      #f39b4b,
      #e0443e);
}
.live-circle.is-person .live-ring b {
  background: inherit;
}
.live-circle.tone-0 .live-ring b {
  background: #dce7f6;
  color: #45699b;
}
.live-circle.tone-1 .live-ring b {
  background: #e8e4f4;
  color: #8472a5;
}
.live-circle.tone-2 .live-ring b {
  background: #e0eeeb;
  color: #5b9287;
}
.live-circle.tone-3 .live-ring b {
  background: #f4e7dc;
  color: #b18a66;
}
.live-circle.tone-4 .live-ring b {
  background: #f0e3e9;
  color: #a17b8b;
}
.live-circle.tone-0,
.live-circle.tone-1,
.live-circle.tone-2,
.live-circle.tone-3,
.live-circle.tone-4 {
  background: none;
}
.live-circle small {
  font-size: 9px;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5c7192;
}
.live-dot {
  position: absolute;
  top: 34px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3fae6a;
  border: 2px solid #fff;
}
.live-circle.is-more .live-ring {
  background: #e6ecf4;
}
.live-circle.is-more .live-ring b {
  background: #f6f8fb;
  color: #5f7698;
  font-size: 11px;
}
button.live-circle:hover .live-ring {
  transform: scale(1.05);
}
.live-ring {
  transition: transform .15s ease;
}
.lesson-call-panel > .call-error {
  flex-shrink: 0;
}
.call-pinned {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #162236;
  aspect-ratio: 4/3;
  flex-shrink: 0;
}
.call-pinned video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.call-pinned > span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: #0f1a2bb3;
  color: #fff;
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 5px;
}
.call-bubbles {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px 12px;
  border-top: 1px solid #e9eef5;
  margin-top: 8px;
  flex-shrink: 0;
  background: linear-gradient(#fbfcfe, #f4f7fb);
  border-radius: 0 0 14px 14px;
}
.call-bubble-row {
  display: flex;
  gap: 9px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 2px;
}
.call-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0;
  background: none !important;
  border: 0;
  opacity: .55;
}
.call-bubble.is-here,
.call-bubble.has-video {
  opacity: 1;
}
.call-bubble:disabled {
  cursor: default;
  opacity: .55;
}
.call-bubble.is-here:disabled {
  opacity: 1;
}
.call-bubble-face {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #d6dfeb, 0 4px 10px #22354e1f;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.call-bubble.tone-0 .call-bubble-face {
  background: #dce7f6;
  color: #45699b;
}
.call-bubble.tone-1 .call-bubble-face {
  background: #e8e4f4;
  color: #8472a5;
}
.call-bubble.tone-2 .call-bubble-face {
  background: #e0eeeb;
  color: #5b9287;
}
.call-bubble.tone-3 .call-bubble-face {
  background: #f4e7dc;
  color: #b18a66;
}
.call-bubble.tone-4 .call-bubble-face {
  background: #f0e3e9;
  color: #a17b8b;
}
.call-bubble.is-here .call-bubble-face {
  box-shadow: 0 0 0 2px #7cc79a, 0 4px 10px #22354e1f;
}
.call-bubble.has-video .call-bubble-face {
  box-shadow: 0 0 0 2px #e0443e, 0 6px 14px #22354e2e;
  animation: bobble 3.2s ease-in-out infinite;
}
.call-bubble.has-video:nth-child(2n) .call-bubble-face {
  animation-delay: -1.1s;
}
.call-bubble.has-video:nth-child(3n) .call-bubble-face {
  animation-delay: -2.2s;
}
.call-bubble.has-video:hover .call-bubble-face {
  transform: scale(1.18);
  animation-play-state: paused;
}
.call-bubble.is-pinned .call-bubble-face {
  box-shadow: 0 0 0 3px #34588e, 0 6px 14px #22354e2e;
}
.call-bubble-face b {
  font-size: 16px;
  font-weight: 650;
}
.call-bubble-face video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.call-bubble-face video.is-mirrored,
.call-pinned video.is-mirrored {
  transform: scaleX(-1);
}
.call-bubble .call-live-badge {
  top: 42px;
}
.call-bubble small {
  font-size: 9px;
  color: #5c7192;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-camera-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 64px;
  padding: 7px 4px;
  border-radius: 9px;
  border: 1px solid #d7e1ee;
  background: #fff;
  color: #34588e;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.call-camera-toggle:hover {
  border-color: #8da9d0;
  background: #f1f6fe;
}
.call-camera-toggle.is-on {
  background: #fdeceb;
  border-color: #f3c3c0;
  color: #b9372f;
}
.call-camera-note {
  margin: 0;
  padding: 0 13px 10px;
  font-size: 9px;
  color: #8d6b4a;
  background: #f4f7fb;
  flex-shrink: 0;
  border-radius: 0 0 14px 14px;
}
.call-bubbles:has(+ .call-camera-note) {
  border-radius: 0;
}
@keyframes bobble {
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-3px) rotate(2deg);
  }
}
@keyframes live-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px #e0443e30;
  }
  50% {
    box-shadow: 0 0 0 5px #e0443e10;
  }
}
@media (prefers-reduced-motion: reduce) {
  .call-bubble.has-video .call-bubble-face,
  .messenger-live-title i {
    animation: none;
  }
}
.live-circle.is-room .live-ring,
.live-circle.is-room .live-ring b {
  border-radius: 14px;
}
.live-circle.is-room .live-ring b {
  border-radius: 12px;
}
.footer-camera-dock {
  flex: 1;
  align-self: stretch;
  position: relative;
  min-width: 0;
}
body:has(.classroom-surface:not([hidden]) .app-footer) .app-footer {
  position: relative;
  overflow: visible;
  padding-right: min(340px, 36vw);
}
.dock-bubbles {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  z-index: 60;
}
.dock-bubble {
  position: relative;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none !important;
  transform-origin: 50% 100%;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.dock-bubble-face {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px #d6dfeb, 0 6px 16px #1b2c4530;
}
.dock-bubble.tone-0 .dock-bubble-face {
  background: #dce7f6;
  color: #45699b;
}
.dock-bubble.tone-1 .dock-bubble-face {
  background: #e8e4f4;
  color: #8472a5;
}
.dock-bubble.tone-2 .dock-bubble-face {
  background: #e0eeeb;
  color: #5b9287;
}
.dock-bubble.tone-3 .dock-bubble-face {
  background: #f4e7dc;
  color: #b18a66;
}
.dock-bubble.tone-4 .dock-bubble-face {
  background: #f0e3e9;
  color: #a17b8b;
}
.dock-bubble-face b {
  font-size: 18px;
  font-weight: 650;
}
.dock-bubble-face video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dock-bubble-face video.is-mirrored {
  transform: scaleX(-1);
}
.dock-bubble.is-here .dock-bubble-face {
  box-shadow: 0 0 0 2px #7cc79a, 0 6px 16px #1b2c4530;
}
.dock-bubble.has-video .dock-bubble-face {
  box-shadow: 0 0 0 2.5px #e0443e, 0 8px 20px #1b2c4538;
  animation: bobble 3.2s ease-in-out infinite;
}
.dock-bubble.has-video:nth-child(2n) .dock-bubble-face {
  animation-delay: -1.1s;
}
.dock-bubble.has-video:nth-child(3n) .dock-bubble-face {
  animation-delay: -2.2s;
}
.dock-bubble.has-video:hover {
  transform: scale(1.8);
  z-index: 2;
}
.dock-bubble.has-video:hover .dock-bubble-face {
  animation-play-state: paused;
}
.dock-bubble.is-pinned,
.dock-bubble.is-pinned:hover {
  transform: scale(2.6);
  z-index: 3;
}
.dock-bubble:disabled {
  cursor: default;
  opacity: .6;
}
.dock-bubble.is-here:disabled {
  opacity: 1;
}
.dock-bubble .call-live-badge {
  top: -5px;
}
.dock-bubble small {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 8.5px;
  font-weight: 600;
  color: #4a6185;
  white-space: nowrap;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-camera-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #d7e1ee;
  background: #fff;
  color: #34588e;
  box-shadow: 0 4px 12px #1b2c4520;
}
.dock-camera-toggle:hover {
  border-color: #8da9d0;
  background: #f1f6fe;
}
.dock-camera-toggle.is-on {
  background: #e0443e;
  border-color: #e0443e;
  color: #fff;
}
.dock-camera-error {
  position: absolute;
  bottom: calc(100% + 30px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  margin: 0;
  background: #fff4f2;
  border: 1px solid #f3c3c0;
  color: #a8382f;
  font-size: 10px;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 7px;
  box-shadow: 0 6px 18px #1b2c4520;
}
@media (prefers-reduced-motion: reduce) {
  .dock-bubble.has-video .dock-bubble-face {
    animation: none;
  }
  .dock-bubble {
    transition: none;
  }
}
.bobble-view {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bobble-view.is-me {
  transform: scaleX(-1);
}
.bobble-view.is-camera .bobble-camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.bobble-view.is-cutout,
.bobble-view.is-3d {
  overflow: visible;
}
.bobble-view .bobble-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.bobble-view.is-initial {
  display: grid;
  place-items: center;
}
.dock-bubble-row,
.call-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.dock-bubble.is-figure .dock-bubble-face,
.call-bubble.is-figure .call-bubble-face {
  width: 66px;
  height: 77px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: none !important;
  animation: none;
}
.call-bubble.is-figure .call-bubble-face {
  width: 54px;
  height: 63px;
}
.dock-bubble.is-figure .call-live-badge {
  top: -1px;
}
.dock-bubble.is-figure:hover {
  transform: scale(1.6);
}
.dock-bubble.is-figure.is-pinned,
.dock-bubble.is-figure.is-pinned:hover {
  transform: scale(2.2);
}
.call-pinned {
  width: min(100%, 260px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
}
.call-pinned .bobble-view.is-cutout,
.call-pinned .bobble-view.is-3d {
  background: linear-gradient(#eef3fa, #dfe8f4);
}
.camera-menu-anchor {
  position: relative;
  flex-shrink: 0;
}
.call-bubbles .camera-menu-anchor {
  align-self: center;
}
.call-camera-toggle {
  flex-direction: row;
  width: auto;
  gap: 6px;
  padding: 8px 10px;
}
.camera-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: 276px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  box-shadow: 0 16px 44px #17243733;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  color: #293a52;
  font-size: 11px;
  line-height: 1.4;
}
.call-bubbles .camera-menu {
  left: auto;
  right: 0;
  transform: none;
}
.camera-menu > strong {
  font-size: 12px;
}
.camera-menu-renders {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.camera-menu-renders button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f1;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: #2f4566;
}
.camera-menu-renders button.is-selected {
  border-color: #7f9fcd;
  background: #f1f6fe;
  color: #284f88;
}
.camera-menu-renders button > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  font-size: 11.5px;
}
.camera-menu-renders small {
  font-weight: 400;
  font-size: 10px;
  color: #8594a8;
}
.camera-menu-characters {
  display: flex;
  gap: 6px;
}
.camera-menu-characters button {
  flex: 1;
  border: 1px solid #e2e8f1;
  border-radius: 7px;
  padding: 6px;
  font-size: 11px;
  color: #4a6185;
  background: #fff;
}
.camera-menu-characters button.is-selected {
  border-color: #7f9fcd;
  background: #f1f6fe;
  color: #284f88;
  font-weight: 600;
}
.camera-menu-video {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: #2f4566;
}
.camera-menu-video input {
  margin-top: 2px;
}
.camera-menu-video > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.camera-menu-video small {
  font-weight: 400;
  font-size: 10px;
  color: #8594a8;
}
.camera-menu-status {
  margin: 0;
  font-size: 10px;
  color: #6c7f99;
  background: #f4f7fb;
  border-radius: 6px;
  padding: 6px 8px;
}
.camera-menu-error {
  margin: 0;
  font-size: 10px;
  color: #a8382f;
  background: #fff4f2;
  border-radius: 6px;
  padding: 6px 8px;
}
.camera-menu > .button {
  justify-content: center;
}
.camera-menu-note {
  font-size: 9.5px;
  color: #8594a8;
}
.footer-camera-dock {
  position: static;
}
.dock-bubble-row {
  gap: 0;
}
.dock-bubble-row > .dock-bubble + .dock-bubble {
  margin-left: -10px;
}
.dock-bubble-row > .dock-bubble.is-figure + .dock-bubble,
.dock-bubble-row > .dock-bubble + .dock-bubble.is-figure {
  margin-left: -2px;
}
.dock-bubble:hover {
  z-index: 4;
}
.dock-bubble.is-offline,
.dock-bubble.is-offline:disabled {
  opacity: 1;
}
.dock-bubble.is-offline .dock-bubble-face {
  background: #e3e7ec !important;
  color: #a3acb8 !important;
  box-shadow: 0 0 0 1.5px #cfd5dd, 0 4px 10px #1b2c4518;
  filter: grayscale(1);
}
.dock-bubble.is-offline small {
  color: #9aa4b1;
}
.camera-menu-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}
.camera-menu-filters > span {
  font-weight: 600;
  color: #3a4f6e;
  margin-right: 2px;
}
.camera-menu-filters button {
  flex: 1;
  border: 1px solid #e2e8f1;
  border-radius: 7px;
  padding: 6px;
  font-size: 11px;
  color: #4a6185;
  background: #fff;
}
.camera-menu-filters button.is-selected {
  border-color: #7f9fcd;
  background: #f1f6fe;
  color: #284f88;
  font-weight: 600;
}
.dock-bubble-row {
  gap: 12px;
}
.dock-bubble-row > .dock-bubble + .dock-bubble,
.dock-bubble-row > .dock-bubble.is-figure + .dock-bubble,
.dock-bubble-row > .dock-bubble + .dock-bubble.is-figure {
  margin-left: 0;
}
.dock-bubble-face {
  width: 64px;
  height: 64px;
  transition:
    width .3s cubic-bezier(.34, 1.4, .64, 1),
    height .3s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .2s;
}
.dock-bubble-face b {
  font-size: 21px;
}
.dock-bubble.is-figure .dock-bubble-face {
  width: 82px;
  height: 96px;
}
.dock-bubble.is-speaking .dock-bubble-face {
  width: 98px;
  height: 98px;
}
.dock-bubble.is-figure.is-speaking .dock-bubble-face {
  width: 124px;
  height: 145px;
}
.dock-bubble.is-speaking .dock-bubble-face {
  box-shadow:
    0 0 0 3px #3fae6a,
    0 0 0 8px #3fae6a33,
    0 10px 24px #1b2c4540;
  animation: speaking-ring 1.1s ease-in-out infinite;
}
.dock-bubble.is-figure.is-speaking .dock-bubble-face {
  box-shadow: none;
  animation: none;
  filter: drop-shadow(0 0 8px #3fae6acc);
}
.dock-bubble.is-speaking small {
  background: #3fae6a;
  border-color: #3fae6a;
  color: #fff;
}
.dock-bubble.has-video:hover {
  transform: scale(1.4);
}
.dock-bubble.is-figure:hover {
  transform: scale(1.3);
}
.dock-bubble.is-speaking:hover {
  transform: none;
}
.dock-bubble.is-pinned,
.dock-bubble.is-pinned:hover,
.dock-bubble.is-figure.is-pinned,
.dock-bubble.is-figure.is-pinned:hover {
  transform: scale(1.9);
}
.dock-mic-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #d7e1ee;
  background: #fff;
  color: #7a8ca5;
  box-shadow: 0 4px 12px #1b2c4520;
}
.dock-mic-toggle:hover {
  border-color: #8da9d0;
  background: #f1f6fe;
}
.dock-mic-toggle.is-on {
  color: #2f7d4f;
  border-color: #9fd3b2;
  background: #effaf3;
}
.dock-mic-toggle.is-speaking {
  background: #3fae6a;
  border-color: #3fae6a;
  color: #fff;
}
.dock-bubbles {
  gap: 8px;
}
.call-bubble.is-speaking .call-bubble-face {
  width: 64px;
  height: 64px;
  box-shadow: 0 0 0 3px #3fae6a, 0 0 0 7px #3fae6a33;
}
.call-bubble-face {
  transition: width .3s, height .3s;
}
.call-mic-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #d7e1ee;
  background: #fff;
  color: #4a6185;
  font-size: 9px;
  font-weight: 600;
}
.call-mic-toggle.is-on {
  color: #2f7d4f;
  border-color: #9fd3b2;
  background: #effaf3;
}
.call-mic-toggle.is-speaking {
  background: #3fae6a;
  border-color: #3fae6a;
  color: #fff;
}
@keyframes speaking-ring {
  0%, 100% {
    box-shadow:
      0 0 0 3px #3fae6a,
      0 0 0 6px #3fae6a40,
      0 10px 24px #1b2c4540;
  }
  50% {
    box-shadow:
      0 0 0 3px #3fae6a,
      0 0 0 12px #3fae6a14,
      0 10px 24px #1b2c4540;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dock-bubble.is-speaking .dock-bubble-face {
    animation: none;
  }
  .dock-bubble-face {
    transition: none;
  }
}
.dock-bubble.is-pinned.is-speaking,
.dock-bubble.is-pinned.is-speaking:hover {
  transform: scale(1.4);
}

/* src/messenger.css */
.mmt-signin {
  min-height: 100dvh;
  background: #f4f7fb;
  color: #293e5a;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 80px;
  align-items: center;
  padding: 70px max(6vw, 30px);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.signin-story {
  max-width: 580px;
}
.signin-brand {
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 750;
  color: #345f9b;
  margin-bottom: 70px;
}
.signin-brand b {
  letter-spacing: 0;
  color: #2d405c;
  margin-left: 7px;
}
.signin-story .eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: #8a99ad;
}
.signin-story h1 {
  font-size: clamp(32px, 4.1vw, 56px);
  letter-spacing: -2px;
  font-weight: 650;
  line-height: 1.13;
  margin: 18px 0 24px;
}
.signin-story > p {
  font-size: 15px;
  color: #8593a7;
  line-height: 1.8;
  max-width: 410px;
}
.signin-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 38px;
  color: #6581a5;
  font-size: 13px;
}
.signin-features > span {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signin-card {
  padding: 38px;
  background: white;
  border: 1px solid #dfe7f1;
  border-radius: 18px;
  box-shadow: 0 12px 45px #263e6108;
}
.signin-monogram {
  height: 46px;
  width: 48px;
  border-radius: 12px;
  background: #315b97;
  color: white;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 25px;
}
.signin-card h2 {
  font-size: 23px;
  letter-spacing: -.6px;
  margin: 0 0 14px;
}
.signin-card > p {
  font-size: 13px;
  line-height: 1.7;
  color: #8291a7;
  margin: 0 0 27px;
}
.signin-google,
.signin-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  padding: 13px;
  font-size: 12px;
  background: #fff;
  color: #3f5675;
  text-decoration: none;
}
.signin-google b {
  font-size: 19px;
  color: #4285f4;
  font-weight: 650;
}
.signin-google:disabled {
  background: #f8fafd;
  color: #99a7b9;
  cursor: default;
}
.signin-google:disabled b {
  color: #aab7c9;
}
.signin-note {
  display: block;
  font-size: 10px;
  line-height: 1.6;
  color: #9aa6b7;
  margin-top: 10px;
}
.signin-divider {
  border-top: 1px solid #e8edf4;
  margin: 27px 0 22px;
  text-align: center;
  height: 0;
}
.signin-divider span {
  display: inline-block;
  transform: translateY(-50%);
  background: white;
  padding: 0 12px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #a2adbd;
}
.signin-preview {
  background: #315b97;
  border-color: #315b97;
  color: white;
  justify-content: space-between;
  font-size: 12px;
}
.signin-card footer {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #edf0f5;
  padding-top: 22px;
  margin-top: 26px;
  font-size: 9px;
  color: #9aa7b8;
  line-height: 1.5;
}
.signin-card footer svg {
  flex-shrink: 0;
}
.signin-error {
  background: #fff4f0;
  color: #a85e4c !important;
  font-size: 11px !important;
  padding: 10px;
  border-radius: 7px;
  margin-top: 18px !important;
}
.workspace-signout {
  display: grid;
  place-items: center;
  padding: 5px;
  color: #8292a7;
  border-radius: 6px;
}
.workspace-signout:hover {
  background: #edf3fb;
  color: #315d99;
}
.workspace-user {
  font-size: 11px;
  color: #607996;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messenger-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid #e6ecf4;
  flex-shrink: 0;
}
.messenger-tabs > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  border-radius: 7px;
  color: #8a9aaf;
  font-size: 10px;
  padding: 8px 5px;
}
.messenger-tabs > button[aria-pressed=true] {
  color: #38609b;
  background: #edf3fc;
}
.messenger-tabs b {
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  background: #38619d;
  color: white;
  border-radius: 8px;
  font-size: 8px;
}
.messenger-context {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 13px;
  border-bottom: 1px solid #e6edf7;
  background: #f1f6ff;
  color: #6381ab;
  font-size: 9px;
  text-align: left;
  flex-shrink: 0;
}
.messenger-context svg {
  margin-left: auto;
  flex-shrink: 0;
}
.messenger-roombar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid #edf1f6;
  flex-shrink: 0;
}
.messenger-roombar > span {
  font-size: 10px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.messenger-roombar > button {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 9px;
  color: #5f80ab;
  flex-shrink: 0;
}
.messenger-inbox,
.messenger-google {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  max-height: 520px;
}
.messenger-intro {
  padding: 18px 15px 14px;
}
.messenger-intro h3 {
  font-size: 14px;
  letter-spacing: -.2px;
  margin: 0 0 7px;
}
.messenger-intro p {
  font-size: 10px;
  color: #98a5b7;
  line-height: 1.6;
  margin: 0;
}
.messenger-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 14px 14px;
  background: #f5f8fc;
  border: 1px solid #e7edf5;
  border-radius: 7px;
  padding: 9px;
  color: #94a7be;
}
.messenger-search input {
  background: none;
  border: 0;
  outline: none;
  min-width: 0;
  flex: 1;
  font-size: 10px;
  color: #526e94;
}
.messenger-search input::placeholder {
  color: #a3afbf;
}
.messenger-room-list {
  padding: 0 7px 12px;
}
.messenger-room {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 12px 9px;
  border-radius: 9px;
  text-align: left;
  align-items: center;
  margin: 2px 0;
}
.messenger-room:hover,
.messenger-room.selected {
  background: #f0f5fd;
}
.messenger-room-avatar {
  width: 34px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #e8eff9;
  color: #6c89ae;
  flex-shrink: 0;
}
.messenger-room > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}
.messenger-room strong {
  display: block;
  font-size: 11px;
  color: #486485;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.messenger-room small {
  display: block;
  font-size: 9px;
  color: #8c9cb2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.messenger-room em {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: #a6b2c3;
  margin-top: 5px;
}
.messenger-room > b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 9px;
  border-radius: 10px;
  color: white;
  background: #3d66a1;
}
.messenger-room > svg {
  color: #a3b0c2;
}
.messenger-empty {
  padding: 30px 16px;
  color: #91a1b8;
  text-align: center;
  font-size: 11px;
}
.messenger-scope {
  margin: 0 14px 16px;
  display: flex;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e6ecf5;
  background: #fafbfd;
  border-radius: 8px;
  color: #8e9fb6;
}
.messenger-scope svg {
  flex-shrink: 0;
}
.messenger-scope p {
  font-size: 9px;
  line-height: 1.6;
  margin: 0;
}
.messenger-account-card {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f6f8fc;
  border: 1px solid #e3eaf4;
  border-radius: 8px;
  margin: 0 14px 15px;
  padding: 12px;
}
.messenger-google-letter {
  font-weight: 700;
  font-size: 19px;
  color: #4285f4;
}
.messenger-account-card > div {
  flex: 1;
  min-width: 0;
}
.messenger-account-card strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
}
.messenger-account-card small {
  display: block;
  color: #91a2b7;
  font-size: 9px;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
.messenger-account-card > span:last-child {
  font-size: 8px;
  color: #a3aec0;
  background: #e9eef5;
  border-radius: 4px;
  padding: 3px 5px;
}
.messenger-google > article {
  display: flex;
  gap: 12px;
  margin: 0 14px;
  padding: 15px 2px;
  border-top: 1px solid #e6edf5;
}
.messenger-google > article > svg {
  flex-shrink: 0;
  color: #7b97bd;
}
.messenger-google h4 {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 6px;
}
.messenger-google article p {
  font-size: 10px;
  color: #8c9fb5;
  line-height: 1.6;
  margin: 0 0 8px;
}
.messenger-google article a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #396399;
  font-size: 10px;
  background: #edf3fc;
  border: 1px solid #dde8f7;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
}
.messenger-google article small {
  display: block;
  font-size: 8px;
  color: #a0adbf;
  line-height: 1.6;
  margin-top: 9px;
}
.messenger-link-settings {
  margin: 5px 14px 16px;
  border: 1px solid #e1e9f4;
  border-radius: 8px;
  padding: 12px;
}
.messenger-link-settings header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.messenger-link-settings header strong {
  display: block;
  font-size: 10px;
}
.messenger-link-settings header small {
  display: block;
  font-size: 9px;
  color: #8b9eb7;
  margin-top: 5px;
}
.messenger-link-settings header button {
  color: #7390b5;
  display: grid;
  place-items: center;
  padding: 4px;
}
.messenger-link-settings > p {
  font-size: 9px;
  color: #a0adbf;
  line-height: 1.6;
  margin: 10px 0 0;
}
.messenger-link-settings form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.messenger-link-settings label {
  display: block;
  font-size: 9px;
  color: #8598b0;
}
.messenger-link-settings input {
  display: block;
  width: 100%;
  border: 1px solid #dae4f1;
  border-radius: 5px;
  padding: 8px;
  font-size: 10px;
  margin-top: 6px;
  color: #4c6b92;
  background: #fafcff;
}
.messenger-link-settings form > button {
  align-self: flex-end;
}
@media (max-width: 900px) {
  .mmt-signin {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 36px 24px;
  }
  .signin-story {
    max-width: 440px;
    margin: auto;
    width: 100%;
  }
  .signin-story h1 {
    font-size: 35px;
    letter-spacing: -1px;
  }
  .signin-brand {
    margin-bottom: 30px;
  }
  .signin-story > p,
  .signin-features {
    display: none;
  }
  .signin-card {
    max-width: 440px;
    width: 100%;
    margin: auto;
    padding: 28px;
  }
  .workspace-account {
    gap: 10px;
  }
}
@media (max-width: 450px) {
  .workspace-header {
    padding: 0 8px;
    gap: 4px;
  }
  .workspace-account {
    gap: 4px;
  }
  .workspace-navigation button {
    padding: 7px 3px;
    font-size: 8px;
  }
  .workspace-account select {
    max-width: 54px;
  }
  .workspace-signout {
    padding: 3px;
  }
  .workspace-signout svg {
    width: 14px;
  }
  .workspace-user {
    max-width: 50px;
    font-size: 9px;
  }
  .messenger-tabs > button {
    font-size: 9px;
  }
  .mmt-signin {
    padding: 25px 16px;
  }
  .signin-card {
    padding: 23px;
  }
}

/* src/unified-workspace.css */
.mmt-workspace {
  --workspace-blue:#2c55a0;
  --workspace-ink:#263a58;
  --workspace-muted:#70819a;
  --workspace-line:#e0e7f0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6f8fc;
  color: var(--workspace-ink);
}
.mmt-workspace [hidden] {
  display: none !important;
}
.workspace-header {
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
  border-bottom: 1px solid var(--workspace-line);
  background: white;
  position: relative;
  z-index: 60;
}
.workspace-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  color: var(--workspace-ink);
  padding: 0;
  text-align: left;
  flex-shrink: 0;
}
.workspace-monogram {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--workspace-blue);
  color: white;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -.5px;
}
.workspace-brand > span:last-child {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}
.workspace-brand small {
  display: block;
  font-size: 9px;
  font-weight: 450;
  color: var(--workspace-muted);
  margin-top: 5px;
  letter-spacing: .15px;
}
.workspace-navigation {
  display: flex;
  gap: 5px;
  align-self: stretch;
  align-items: center;
}
.workspace-navigation button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #73829a;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.workspace-navigation button:hover {
  background: #f3f6fb;
  color: var(--workspace-blue);
}
.workspace-navigation button[aria-current=page] {
  background: #eaf0fc;
  color: var(--workspace-blue);
}
.workspace-account {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  min-width: 0;
}
.workspace-account > label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--workspace-muted);
  font-size: 10px;
}
.workspace-account select {
  max-width: 155px;
  border: 1px solid var(--workspace-line);
  background: #fff;
  border-radius: 7px;
  padding: 7px 9px;
  color: var(--workspace-ink);
  font-size: 11px;
}
.workspace-connection {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8b96a5;
  font-size: 10px;
  white-space: nowrap;
}
.workspace-connection i {
  height: 6px;
  width: 6px;
  background: #c59b54;
  border-radius: 50%;
}
.workspace-connection.connected i {
  background: #6c9f82;
}
.workspace-content {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.workspace-surface {
  height: 100%;
  min-height: 0;
}
.mmt-workspace .app {
  height: 100%;
  min-height: 0;
}
.mmt-workspace .shell {
  width: 100%;
  min-width: 0;
}
.mmt-workspace .compact-topbar {
  padding: 17px 24px;
  gap: 20px;
  grid-template-columns: minmax(200px, 1fr) auto auto;
}
.mmt-workspace .breadcrumb {
  display: none;
}
.mmt-workspace .lesson-title h1 {
  font-size: 20px;
}
.mmt-workspace .lesson-title > span {
  font-size: 10px;
}
.workspace-source {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: #8593a9;
  font-size: 10px;
  padding: 7px;
}
.mmt-workspace .button,
.mmt-workspace .lib-btn {
  border-radius: 7px;
  min-height: 34px;
  font-size: 11px;
  gap: 7px;
}
.mmt-workspace .button.primary,
.mmt-workspace .lib-btn.primary {
  background: var(--workspace-blue);
  border-color: var(--workspace-blue);
  color: white;
}
.mmt-workspace button:focus-visible,
.mmt-workspace a:focus-visible {
  outline: 2px solid #6e95d4;
  outline-offset: 3px;
}
.mmt-workspace .lib-app {
  height: 100%;
  grid-template-rows: 58px minmax(0, 1fr);
  --lib-blue:var(--workspace-blue);
  --lib-line:var(--workspace-line);
}
.mmt-workspace .lib-topbar {
  height: 58px;
  padding: 0 24px;
  gap: 24px;
  background: #fff;
}
.library-context {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  width: 166px;
  color: #637b9e;
}
.library-context strong {
  font-size: 11px;
  font-weight: 550;
}
.mmt-workspace .lib-search {
  flex: 1;
  max-width: 620px;
  min-width: 140px;
  border-radius: 7px;
  background: #f5f7fb;
  padding: 9px 12px;
}
.mmt-workspace .lib-classroom {
  white-space: nowrap;
  margin-left: auto;
  font-size: 10px;
}
.library-teach-panel {
  background: #f1f5fd;
  border: 1px solid #dde7f5;
  border-radius: 9px;
  padding: 12px;
  margin: 14px 0;
}
.library-teach-panel > strong {
  display: block;
  font-size: 11px;
  color: #4c6b98;
  margin-bottom: 10px;
}
.library-teach-panel label {
  display: block;
  font-size: 10px;
  color: #7184a0;
  margin-bottom: 10px;
}
.library-teach-panel select {
  width: 100%;
  display: block;
  margin-top: 5px;
  background: white;
  border: 1px solid #d5dfed;
  border-radius: 6px;
  padding: 8px;
  color: #3d5d89;
  font-size: 11px;
}
.library-handoff-error {
  color: #a34e40;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 10px;
}
.captures-surface {
  overflow: auto;
  padding: 28px 32px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.capture-workspace-heading {
  max-width: 1250px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.capture-workspace-heading h1 {
  font-size: 27px;
  letter-spacing: -.7px;
  margin: 7px 0;
  color: #334d72;
}
.capture-workspace-heading p {
  font-size: 12px;
  color: #8797ae;
  margin: 0;
  line-height: 1.6;
}
.captures-surface .sharebox {
  max-width: 1250px;
  margin: auto;
}
.captures-surface .sharebox-tabs {
  padding: 8px;
  background: white;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  gap: 6px;
  margin-bottom: 22px;
}
.captures-surface .sharebox-tabs > button {
  border: 0;
  border-radius: 7px;
  padding: 10px 14px;
}
.captures-surface .sharebox-tabs > button[aria-selected=true] {
  background: #eaf0fc;
  color: var(--workspace-blue);
}
.captures-surface .sharebox-intro {
  padding: 21px 24px;
  background: #fff;
  border: 1px solid var(--workspace-line);
  border-radius: 10px;
  margin-bottom: 22px;
}
.captures-surface .sharebox-intro h3 {
  font-size: 20px;
  color: #37547b;
}
.captures-surface .sharebox-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.captures-surface .stored-image {
  border-radius: 10px;
  box-shadow: 0 3px 10px #223b6105;
}
.captures-surface .sharebox-bottom {
  gap: 15px;
  flex-wrap: wrap;
}
.capture-library-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dbe4f0 !important;
  border-radius: 7px;
  background: #f7f9fd !important;
  color: #5578a7 !important;
  padding: 9px !important;
  font-size: 11px !important;
}
.mmt-workspace .lib-packet-dialog > header {
  background: #f8faff;
}
.mmt-workspace .lib-packet-backdrop {
  background: #182e4d80;
}
@media (max-width: 1100px) {
  .workspace-header {
    gap: 18px;
    padding: 0 18px;
  }
  .workspace-account > label > span,
  .workspace-connection {
    display: none;
  }
  .workspace-brand small {
    font-size: 8px;
  }
  .workspace-navigation button {
    padding: 10px 12px;
  }
  .mmt-workspace .lib-topbar {
    gap: 16px;
    padding: 0 20px;
  }
  .library-context {
    width: 140px;
  }
}
@media (max-width: 1050px) {
  .mmt-workspace .lib-preview {
    top: 126px;
  }
  .mmt-workspace .compact-topbar {
    display: flex;
    flex-wrap: wrap;
  }
  .mmt-workspace .lesson-identity {
    flex: 1;
  }
  .mmt-workspace .lesson-actions {
    margin: 0;
  }
  .mmt-workspace .workspace-source {
    margin-left: auto;
  }
  .captures-surface {
    padding: 24px;
  }
  .capture-workspace-heading h1 {
    font-size: 25px;
  }
}
@media (max-width: 700px) {
  .workspace-header {
    height: 62px;
    gap: 12px;
    padding: 0 12px;
  }
  .workspace-brand > span:last-child {
    display: none;
  }
  .workspace-monogram {
    width: 34px;
    height: 34px;
    font-size: 10px;
    border-radius: 8px;
  }
  .workspace-navigation {
    flex: 1;
    justify-content: center;
    gap: 2px;
  }
  .workspace-navigation button {
    padding: 8px 10px;
    font-size: 11px;
    gap: 6px;
  }
  .workspace-account select {
    max-width: 80px;
    padding: 6px;
    font-size: 10px;
  }
  .workspace-account {
    margin-left: 0;
  }
  .mmt-workspace .lib-app {
    grid-template-rows: 54px minmax(0, 1fr);
  }
  .mmt-workspace .lib-topbar {
    height: 54px;
    padding: 0 15px;
    gap: 12px;
  }
  .library-context {
    display: none;
  }
  .mmt-workspace .lib-preview {
    top: 116px;
  }
  .mmt-workspace .lib-classroom span {
    display: none;
  }
  .mmt-workspace .compact-topbar {
    padding: 13px 16px;
    gap: 12px;
  }
  .mmt-workspace .lesson-title h1 {
    font-size: 17px;
  }
  .mmt-workspace .workspace-source {
    display: none;
  }
  .mmt-workspace .lesson-actions {
    gap: 6px;
  }
  .captures-surface {
    padding: 20px 16px;
  }
  .capture-workspace-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .captures-surface .sharebox-intro {
    padding: 18px;
  }
  .captures-surface .sharebox-tabs {
    gap: 0;
    padding: 5px;
  }
  .captures-surface .sharebox-tabs > button {
    padding: 9px 8px;
    font-size: 10px;
  }
}
@media (max-width: 450px) {
  .workspace-navigation button {
    flex-direction: column;
    gap: 3px;
    padding: 7px 10px;
    font-size: 9px;
  }
  .workspace-account select {
    max-width: 64px;
  }
  .workspace-header {
    gap: 7px;
  }
  .mmt-workspace .lesson-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.mmt-workspace .floating-tower {
  z-index: 55;
}
.lesson-context-bar {
  flex-shrink: 0;
}
@media (max-width: 450px) {
  .workspace-navigation button {
    padding: 7px 5px;
  }
  .workspace-header {
    gap: 5px;
  }
  .workspace-navigation {
    gap: 0;
  }
  .workspace-account select {
    max-width: 60px;
  }
  .workspace-monogram {
    width: 29px;
  }
  .workspace-navigation button svg {
    width: 15px;
    height: 15px;
  }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .mmt-workspace .lib-app,
  .mmt-workspace .lib-app.has-preview {
    grid-template-columns: 196px minmax(0, 1fr);
  }
  .library-context {
    width: 152px;
  }
  .mmt-workspace .lib-sidebar nav button {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* src/workspace-rail.css */
.mmt-workspace {
  --rail-gutter:80px;
  padding-left: var(--rail-gutter);
}
.workspace-rail {
  position: fixed;
  z-index: 90;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 56px;
  display: flex;
  flex-direction: column;
  padding: 12px 6px 8px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: transparent;
  overflow: hidden;
  color: #425b7b;
  transition:
    width .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
  isolation: isolate;
}
.workspace-rail.is-expanded {
  width: 246px;
  border-color: #ffffffd9;
  background:
    linear-gradient(
      145deg,
      #ffffffc9,
      #f1f6ffd1);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    0 18px 60px #243e6824,
    0 3px 12px #314f6f0d,
    inset 0 0 0 1px #d6e3f354;
}
.workspace-rail button {
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.rail-label {
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .13s ease;
  min-width: 0;
}
.is-expanded .rail-label {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .06s;
}
.rail-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 48px;
  flex-shrink: 0;
  padding: 0 2px;
  width: 230px;
  text-align: left;
}
.rail-monogram {
  display: grid;
  place-items: center;
  width: 38px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background:
    linear-gradient(
      145deg,
      #315da3,
      #25467e);
  color: white;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: -.4px;
  box-shadow: 0 3px 8px #2e568125;
}
.rail-brand strong {
  font-size: 16px;
  color: #293e5b;
  font-weight: 680;
  letter-spacing: -.4px;
  display: block;
}
.rail-brand small {
  display: block;
  font-size: 9px;
  margin-top: 5px;
  color: #8295ad;
  letter-spacing: .1px;
}
.rail-caption {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.6px;
  padding: 30px 14px 13px;
  height: 55px;
  flex-shrink: 0;
}
.rail-navigation {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rail-navigation > button,
.rail-signout {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 0 2px;
  text-align: left;
  border-radius: 12px;
  width: 100%;
  flex-shrink: 0;
}
.rail-icon {
  width: 38px;
  min-width: 38px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #8193ac;
  transition: color .18s ease;
}
.rail-navigation .rail-label,
.rail-signout .rail-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05px;
}
.rail-navigation > button:hover,
.rail-signout:hover {
  background: #ffffffa6;
  color: #2c55a0;
}
.rail-navigation > button:hover .rail-icon {
  color: #426aa1;
}
.rail-navigation > button[aria-current=page] {
  background: #e5edfa;
  color: #2e579a;
  box-shadow: inset 0 0 0 1px #ccdbf344;
}
.rail-navigation > button[aria-current=page] .rail-icon {
  color: #2d589f;
}
.rail-navigation > button[aria-current=page] .rail-label {
  font-weight: 600;
}
.rail-active-mark {
  position: absolute;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4775b6;
  opacity: 0;
}
.is-expanded [aria-current=page] .rail-active-mark {
  opacity: 1;
}
.workspace-rail .rail-bottom {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.rail-connection {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 2px;
  min-height: 28px;
}
.rail-connection .rail-icon {
  height: 28px;
}
.rail-connection i {
  width: 6px;
  height: 6px;
  background: #b99b67;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #b99b6710;
}
.rail-connection.connected i {
  background: #72a28c;
  box-shadow: 0 0 0 4px #72a28c10;
}
.rail-connection .rail-label {
  font-size: 9px;
  color: #8a9bb0;
}
.rail-rule {
  height: 1px;
  background: #cfdaea96;
  margin: 3px 10px 10px;
  opacity: 0;
  flex-shrink: 0;
}
.is-expanded .rail-rule {
  opacity: 1;
}
.rail-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 3px;
  min-height: 42px;
}
.rail-avatar {
  min-width: 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e4eaf4;
  color: #6380a5;
  font-size: 11px;
  font-weight: 600;
}
.rail-account .rail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rail-account strong {
  font-size: 11px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-account small {
  font-size: 9px;
  color: #91a0b5;
  display: block;
  margin-top: 5px;
}
.rail-signout .rail-label {
  font-size: 11px;
  color: #8b9bb0;
}
.rail-preview {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 9px;
  color: #8a9bb0;
  margin: 0 10px;
  transition: opacity .15s;
}
.is-expanded .rail-preview {
  opacity: 1;
  height: auto;
  pointer-events: auto;
  margin-top: 4px;
}
.rail-preview select {
  border: 1px solid #dce5f0;
  background: #ffffffa6;
  border-radius: 7px;
  padding: 8px;
  color: #425b7b;
  font-size: 11px;
  max-width: 100%;
}
.workspace-rail .rail-touch-toggle {
  display: none;
}
.mmt-workspace .schedule-page {
  padding-top: 32px;
}
.mmt-workspace .workspace-content {
  height: 100%;
  flex: 1;
}
@media (max-width: 1050px) {
  .mmt-workspace .lib-preview {
    top: 58px;
  }
}
@media (max-width: 700px) {
  .mmt-workspace {
    --rail-gutter:64px;
  }
  .workspace-rail {
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 50px;
    padding: 10px 3px 6px;
    border-radius: 18px;
  }
  .workspace-rail.is-expanded {
    width: 236px;
  }
  .rail-brand {
    gap: 12px;
  }
  .rail-caption {
    padding-top: 23px;
    height: 48px;
  }
  .rail-navigation {
    gap: 7px;
  }
  .mmt-workspace .schedule-page {
    padding-top: 24px;
  }
  .mmt-workspace .lib-preview {
    top: 54px;
    max-width: calc(100vw - var(--rail-gutter));
  }
  .mmt-workspace .lesson-call-panel,
  .mmt-workspace .lesson-call-launcher {
    max-width: calc(100vw - var(--rail-gutter) - 12px);
  }
}
@media (hover: none), (pointer: coarse) {
  .workspace-rail .rail-touch-toggle {
    display: flex;
    align-items: center;
    gap: 23px;
    min-height: 40px;
    padding: 8px 12px;
    margin-top: 12px;
    text-align: left;
    color: #7a90af;
    flex-shrink: 0;
  }
  .rail-touch-toggle .rail-label {
    font-size: 11px;
  }
  .rail-caption {
    padding-top: 16px;
    height: 40px;
  }
}
@media (max-height: 600px) {
  .workspace-rail {
    overflow-y: auto;
    scrollbar-width: none;
  }
  .rail-caption {
    padding-top: 14px;
    height: 35px;
  }
  .rail-bottom {
    padding-top: 20px;
  }
  .rail-navigation {
    gap: 3px;
  }
  .rail-navigation > button,
  .rail-signout {
    min-height: 38px;
    height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-rail,
  .rail-label,
  .rail-icon {
    transition: none !important;
  }
}
.rail-connection i {
  width: 9px;
  height: 9px;
  background: #1d2533;
  box-shadow: 0 0 0 3px #1d253314;
}
.rail-connection.connected i {
  background: #1d2533;
  box-shadow: 0 0 0 3px #1d253314;
}
.rail-connection:not(.connected) i {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #1d2533;
}
.rail-connection.is-live i {
  background: #e0302a;
  box-shadow: 0 0 0 3px #e0302a33;
  animation: live-light 1.6s ease-in-out infinite;
}
.rail-connection.is-live .rail-label {
  color: #c0332c;
  font-weight: 600;
}
@keyframes live-light {
  0%, 100% {
    box-shadow: 0 0 0 3px #e0302a40;
  }
  50% {
    box-shadow: 0 0 0 7px #e0302a10;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail-connection.is-live i {
    animation: none;
  }
}

/* src/classroom-materials.css */
.mmt-workspace .classroom-surface .workspace-layout.full-width-boards {
  grid-template-columns: minmax(0, 1fr);
}
.full-width-boards > .stage {
  min-width: 0;
  width: 100%;
}
.materials-toggle {
  color: #315b91;
}
.materials-toggle[aria-expanded=true] {
  background: #edf4ff;
  border-color: #8baad5;
}
.lesson-materials-drawer {
  position: fixed;
  inset: 0 auto 0 80px;
  margin: 0;
  padding: 0;
  width: min(360px, calc(100vw - 80px));
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-right: 1px solid #dce4ef;
  background: #fafbfd;
  color: #293a52;
  box-shadow: 12px 0 48px #1f355426;
  overflow: hidden;
}
.lesson-materials-drawer[open] {
  display: flex;
  flex-direction: column;
}
.lesson-materials-drawer::backdrop {
  background: #233b581c;
}
.lesson-materials-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
  padding: 20px;
  border-bottom: 1px solid #e0e7f0;
  background: #fff;
}
.lesson-materials-heading > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #315b91;
}
.lesson-materials-heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: #263c5b;
}
.lesson-materials-heading .icon-button {
  width: 32px;
  height: 32px;
}
.lesson-materials-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lesson-materials-content .material-list {
  flex: none;
}
.lesson-materials-content .dropzone {
  flex-shrink: 0;
  margin-top: 20px;
}
.lesson-materials-content .packet-section {
  margin-top: 20px;
}
.lesson-materials-content .section-heading {
  margin-bottom: 12px;
}
.lesson-materials-drawer :focus-visible {
  outline: 2px solid #4c7ab8;
  outline-offset: 3px;
}
.mmt-workspace .full-width-boards > .student-sidebar {
  display: block;
  position: fixed;
  z-index: 50;
  right: 16px;
  bottom: 76px;
  width: min(280px, calc(100vw - 96px));
  height: auto;
  max-height: 65dvh;
  border: 1px solid #cbd7e7;
  border-radius: 12px;
  box-shadow: 0 14px 40px #243c5d26;
}
@media (max-width: 680px) {
  .lesson-materials-drawer {
    left: 64px;
    width: min(360px, calc(100vw - 64px));
  }
  .lesson-materials-heading,
  .lesson-materials-content {
    padding: 16px;
  }
}
.classroom-surface .compact-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
}
.board-file-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  color: #57739a;
}
.board-file-picker > svg {
  flex: none;
}
.board-file-picker select {
  flex: 1;
  width: 0;
  min-width: 0;
  max-width: 640px;
  padding: 7px 6px;
  background: #fff;
  border: 1px solid #d8e2ef;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  color: #2a4264;
  text-overflow: ellipsis;
}
.board-file-count {
  flex: none;
  white-space: nowrap;
  font-size: 10px;
  color: #7185a0;
}
.board-file-picker button {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 28px;
  border: 1px solid #dce4ef;
  background: white;
  border-radius: 5px;
  color: #456993;
}
.board-file-picker button:disabled {
  opacity: .3;
  cursor: default;
}
.board-file-picker button:not(:disabled):hover {
  background: #edf4ff;
}
.pane-document-heading {
  gap: 10px;
}
.pane-document-heading .pane-view-buttons {
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .two-panels .board-file-count > span {
    display: none;
  }
  .two-panels .board-file-picker {
    gap: 3px;
  }
  .two-panels .pane-document-heading {
    gap: 5px;
  }
}
@media (max-width: 540px) {
  .two-panels .board-file-picker > svg,
  .two-panels .board-file-count {
    display: none;
  }
  .two-panels .board-file-picker button {
    width: 20px;
  }
}
.lesson-materials-drawer {
  width: min(420px, calc(100vw - 80px));
}
.materials-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
}
.materials-picker .section-heading span {
  font-size: 11px;
  color: #6b80a0;
}
.materials-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: #eef2f7;
}
.materials-picker-tabs button {
  flex: 1;
  padding: 5px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 11px;
  color: #4f6789;
}
.materials-picker-tabs button[aria-selected=true] {
  background: #fff;
  box-shadow: 0 1px 3px #1d304d1f;
  font-weight: 600;
  color: #24426b;
}
.materials-picker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  color: #6b80a0;
}
.materials-picker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font-size: 12px;
}
.materials-picker > select {
  padding: 5px 6px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  font-size: 12px;
  color: #355577;
}
.materials-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.materials-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  text-align: left;
  color: #223349;
}
.materials-picker-item:hover {
  background: #f3f6fb;
}
.materials-picker-item.is-selected {
  border-color: #3d69a8;
  background: #edf3fc;
}
.materials-picker-item img {
  flex: none;
  width: 34px;
  height: 44px;
  object-fit: cover;
  border: 1px solid #e3e9f2;
  border-radius: 4px;
  background: #fff;
}
.materials-picker-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid #b9cbe2;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #3e6699;
}
.is-selected .materials-picker-check {
  border-color: #3d69a8;
  background: #3d69a8;
  color: #fff;
}
.materials-picker-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.materials-picker-text strong {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.materials-picker-text small {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  font-size: 10.5px;
  color: #6b80a0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.materials-picker-star {
  flex: none;
  color: #d9a21b;
}
.materials-picker-onboard {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #e4f6ee;
  font-size: 10px;
  color: #16794f;
}
.materials-picker-empty {
  margin: 8px 4px;
  font-size: 12px;
  color: #7a8ca5;
}
.materials-picker-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #edf1f6;
}
.materials-picker-footer > span {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #4f6789;
}
.materials-picker-clear {
  border: 0;
  background: none;
  font-size: 11px;
  color: #6b80a0;
  text-decoration: underline;
}
.materials-picker-footer .button {
  padding: 6px 10px;
  font-size: 12px;
}
.curriculum-loader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
}
.curriculum-loader .section-heading strong {
  display: flex;
  align-items: center;
  gap: 5px;
}
.curriculum-loader > select,
.curriculum-save select,
.curriculum-save input {
  padding: 6px 8px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  font-size: 12px;
  color: #2a4264;
}
.curriculum-lessons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(34vh, 300px);
  overflow-y: auto;
}
.curriculum-lessons > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.curriculum-unit {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a8ca5;
}
.curriculum-lesson {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  background: #fbfcfe;
  text-align: left;
  color: #223349;
}
.curriculum-lesson strong {
  font-size: 12px;
}
.curriculum-lesson small {
  font-size: 10.5px;
  color: #6b80a0;
}
.curriculum-lesson.is-selected {
  border-color: #3d69a8;
  background: #edf3fc;
}
.curriculum-parts,
.curriculum-save {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #edf1f6;
}
.curriculum-parts label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #2a4264;
}
.curriculum-parts label.is-off {
  color: #9aabc2;
}
.curriculum-save small {
  font-size: 11px;
  color: #6b80a0;
}
.curriculum-parts .button,
.curriculum-save .button {
  align-self: flex-start;
  padding: 6px 10px;
  font-size: 12px;
}
.curriculum-message {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: #eef6f2;
  font-size: 12px;
  color: #1d6a48;
}
.curriculum-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #dce4ef;
}
.curriculum-note > span {
  font-size: 11px;
  font-weight: 600;
  color: #4f6789;
}
.curriculum-note select,
.curriculum-note textarea {
  padding: 6px 8px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
}
.curriculum-note .button {
  align-self: flex-start;
  padding: 5px 10px;
  font-size: 12px;
}

/* src/classroom-menu.css */
.classroom-surface .compact-topbar {
  min-height: 68px;
  padding: 12px 20px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.classroom-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.classroom-menu .button {
  min-height: 36px;
  color: #365d91;
  background: #fff;
}
.classroom-menu .button:hover {
  background: #f1f6ff;
  border-color: #a6bcdc;
}
.lesson-navigation-slot .board-switcher-meta {
  gap: 10px;
}
.lesson-navigation-slot .board-switcher-meta > div:first-child {
  flex: 1 1 0;
}
.lesson-navigation-slot .board-switcher-title {
  width: 100%;
}
.board-layout-actions > .classroom-menu {
  gap: 5px;
  margin: 0;
  width: auto;
}
.board-layout-actions > .classroom-menu .button {
  min-height: 31px;
  padding: 6px 9px;
  font-size: 11px;
  gap: 5px;
  white-space: nowrap;
}
.board-layout-actions > .classroom-menu .button svg {
  width: 15px;
  height: 15px;
}
@media (max-width: 1000px) {
  .lesson-navigation-slot .board-layout-actions {
    gap: 5px;
  }
  .board-layout-actions > .classroom-menu {
    gap: 4px;
  }
  .board-layout-actions > .classroom-menu .button {
    padding: 6px 7px;
  }
}
@media (max-width: 700px) {
  .lesson-navigation-slot .board-switcher-meta {
    flex-wrap: wrap;
  }
  .lesson-navigation-slot .board-switcher-meta > div:first-child {
    flex-basis: 100%;
  }
  .lesson-navigation-slot .board-layout-actions {
    flex: 1;
    flex-wrap: wrap;
  }
  .board-layout-actions > .classroom-menu .button {
    min-height: 30px;
    padding: 6px !important;
  }
}
.materials-quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.materials-quick-actions .button {
  flex: 1;
}
.classroom-window {
  width: min(980px, calc(100vw - 64px));
  max-width: none;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #fff;
  color: #2b405d;
  box-shadow: 0 24px 90px #17375438;
  overflow: hidden;
}
.classroom-window[open] {
  display: flex;
  flex-direction: column;
}
.classroom-window.narrow {
  width: min(520px, calc(100vw - 40px));
}
.classroom-window::backdrop {
  background: #203b5a42;
}
.classroom-window > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #e4eaf3;
  flex-shrink: 0;
}
.classroom-window > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #355f96;
}
.classroom-window h2 {
  margin: 0;
  color: #263d5e;
  font-size: 20px;
  letter-spacing: -.4px;
}
.classroom-window-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
}
.classroom-window .icon-button {
  height: 32px;
  width: 32px;
}
.class-sharebox-intro h3 {
  margin: 0 0 5px;
  font-size: 18px;
  letter-spacing: -.4px;
}
.class-sharebox-intro p {
  margin: 0 0 20px;
  color: #7688a0;
  font-size: 12px;
  line-height: 1.6;
}
.class-sharebox-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.class-sharebox-search {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 10px 12px;
  color: #8295af;
}
.class-sharebox-search input {
  flex: 1;
  width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: #304969;
}
.class-sharebox-controls > select,
.class-sharebox-destination select {
  font: inherit;
  font-size: 12px;
  border: 1px solid #d6e0ed;
  border-radius: 7px;
  padding: 9px 12px;
  color: #355678;
  background: white;
}
.class-sharebox-destination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #f1f6ff;
  border: 1px solid #dce7f7;
  border-radius: 9px;
  margin-bottom: 20px;
}
.class-sharebox-destination label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
}
.class-sharebox-destination > span {
  font-size: 11px;
  color: #7186a2;
}
.class-shared-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.class-shared-card {
  border: 1px solid #dde5ef;
  border-radius: 11px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.class-shared-preview {
  position: relative;
  height: 150px;
  padding: 12px;
  background: #f2f5fa;
  border-bottom: 1px solid #e4eaf2;
}
.class-shared-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.class-shared-preview > span {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  bottom: 9px;
  left: 9px;
  right: 9px;
  width: fit-content;
  max-width: calc(100% - 18px);
  padding: 5px 7px;
  background: #ffffffef;
  color: #507199;
  border: 1px solid #dfe6ef;
  border-radius: 5px;
  font-size: 9px;
}
.class-shared-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
}
.class-shared-copy h4 {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.class-shared-copy p {
  color: #8797ae;
  font-size: 10px;
  margin: 6px 0 15px;
}
.class-shared-copy .button {
  margin-top: auto;
  font-size: 11px;
  justify-content: space-between;
}
.class-shared-loaded {
  display: flex;
  gap: 5px;
  align-items: center;
  color: #3e8a6d;
  font-size: 10px;
  margin-bottom: 9px;
}
.classroom-window-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #edf8f1;
  border: 1px solid #cce7d7;
  color: #387255;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
.classroom-window-error {
  color: #a03c4a;
  background: #fff2f3;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 12px;
}
.class-sharebox-empty {
  padding: 42px 24px;
  color: #8499b5;
  text-align: center;
}
.class-sharebox-empty svg {
  margin: auto;
}
.class-sharebox-empty h3 {
  font-size: 16px;
  color: #46617f;
}
.class-sharebox-empty p {
  font-size: 12px;
}
.class-invite-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.class-invite-link > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.class-invite-link input {
  border: 1px solid #d7e1ee;
  border-radius: 7px;
  padding: 12px;
  width: 100%;
  background: #f7f9fc;
  color: #5d7596;
  font-size: 11px;
}
.class-invite-note {
  color: #8b9aaf;
  font-size: 11px;
  line-height: 1.6;
  margin: 12px 0 24px;
}
.class-invite-members h4 {
  font-size: 12px;
  margin: 0 0 10px;
}
.class-invite-members h4 span {
  margin-left: 6px;
  color: #8096b5;
}
.class-invite-members > div {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #edf1f6;
  padding: 12px 0;
  font-size: 12px;
}
.class-invite-members b {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #edf2f9;
  color: #6f88aa;
}
.class-invite-members strong {
  flex: 1;
  font-weight: 500;
}
.class-invite-members div > span {
  font-size: 10px;
  color: #8a9ab0;
}
.invite-roster-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: 14px;
}
.invite-roster-count input {
  width: 60px;
  padding: 6px;
  border: 1px solid #d4dfeb;
  border-radius: 5px;
}
.classroom-window :focus-visible {
  outline: 2px solid #739aca;
  outline-offset: 2px;
}
.classroom-window-footer {
  flex-shrink: 0;
  border-top: 1px solid #e0e7f0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f8fafd;
}
.class-sharebox-summary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
}
.class-sharebox-summary span {
  color: #7589a3;
  font-size: 11px;
  line-height: 1.5;
  max-height: 34px;
  overflow-y: auto;
}
.classroom-window-footer > .button {
  white-space: nowrap;
  flex-shrink: 0;
}
.class-sharebox-delivery {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  min-width: 0;
}
.class-sharebox-delivery legend {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.class-sharebox-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.class-sharebox-modes > label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  padding: 13px;
  cursor: pointer;
}
.class-sharebox-modes > label.selected {
  background: #f0f5ff;
  border-color: #7195cd;
  color: #295591;
}
.class-sharebox-modes span,
.class-sharebox-student-list label > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.class-sharebox-modes strong {
  font-size: 12px;
  font-weight: 600;
}
.class-sharebox-modes small {
  font-size: 10px;
  color: #778ba6;
  line-height: 1.4;
}
.class-sharebox-delivery input,
.class-sharebox-selection input,
.class-shared-card > input {
  accent-color: #2c58a1;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
}
.class-sharebox-recipient-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #647e9f;
  margin: 16px 0 10px;
}
.class-sharebox-recipient-heading label,
.class-sharebox-selection label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.class-sharebox-student-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 2px;
}
.class-sharebox-student-list > label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  cursor: pointer;
}
.class-sharebox-student-list > label.selected {
  background: #f5f8ff;
  border-color: #8da9d0;
}
.class-sharebox-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf0f9;
  color: #6381a9;
  font-size: 12px;
}
.class-sharebox-student-list strong {
  font-size: 12px;
  font-weight: 500;
}
.class-sharebox-student-list small {
  font-size: 9px;
  color: #8092a9;
  line-height: 1.4;
}
.class-sharebox-help {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: #7387a2;
  margin: 14px 0 0;
  line-height: 1.6;
}
.class-sharebox-help svg {
  flex-shrink: 0;
}
.class-sharebox-selection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  margin: 16px 0 12px;
}
.class-sharebox-selection label > span {
  color: #8698ae;
}
.class-sharebox-selection > button {
  border: 0;
  padding: 5px 0;
  background: none;
  color: #4269a0;
  font: inherit;
  cursor: pointer;
}
.class-sharebox-selection > button:disabled {
  color: #9caabc;
  cursor: default;
}
.class-shared-card.selectable {
  position: relative;
  cursor: pointer;
}
.class-shared-card.selectable > input {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  width: 19px;
  height: 19px;
  box-shadow: 0 0 0 4px #fff;
  border-radius: 3px;
}
.class-shared-card.selectable:hover {
  border-color: #9eb7d7;
}
.class-shared-card.selectable.selected {
  border-color: #4c78b8;
  box-shadow: 0 0 0 1px #4c78b8;
  background: #f5f8ff;
}
.class-shared-card.selectable .class-shared-copy p {
  margin-bottom: 0;
}
.class-sharebox-sent {
  margin-bottom: 18px;
}
.class-sharebox-sent > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.class-sharebox-sent .button {
  font-size: 11px;
  padding: 7px 10px;
}
@media (max-width: 950px) {
  .class-sharebox-student-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .class-sharebox-modes {
    grid-template-columns: 1fr;
  }
  .classroom-window-footer {
    padding: 14px 16px;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .class-sharebox-avatar {
    display: none;
  }
  .classroom-window-footer > .button {
    justify-content: center;
  }
}
@media (max-width: 950px) {
  .classroom-surface .compact-topbar .lesson-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .classroom-surface .compact-topbar .lesson-identity {
    grid-column: 1;
    grid-row: 1;
  }
  .class-sharebox-destination {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
@media (max-width: 700px) {
  .class-shared-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .classroom-window {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  .classroom-window-content {
    padding: 16px;
  }
  .classroom-surface .compact-topbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .classroom-menu .button {
    padding: 8px !important;
    gap: 5px;
  }
}
@media (max-width: 480px) {
  .classroom-surface .compact-topbar {
    grid-template-columns: 1fr;
  }
  .classroom-surface .compact-topbar .lesson-actions {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
  }
  .class-shared-grid {
    grid-template-columns: 1fr;
  }
  .class-sharebox-destination select {
    max-width: 220px;
  }
}
/*# sourceMappingURL=app.css.map */