/* Widget-specific styles live here. */

/* Lernwerk: learning paths, distribution and teacher review */
.accent-strip--lernwerk {
  background:
    radial-gradient(circle at 88% 18%, rgba(208, 166, 79, 0.55), transparent 24%),
    linear-gradient(135deg, #1f2747 0%, #565083 70%, #a65f6b 100%);
}

.accent-strip--lernwerk .accent-title p {
  margin: var(--space-4) 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--fs-body-s);
}

.accent-avatar--lernwerk img {
  width: 2.1rem;
  height: 2.1rem;
  filter: brightness(0) invert(1);
}

.lernwerk-content { display: grid; gap: var(--space-18); min-height: 0; }
.lernwerk-view-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.lernwerk-view-toggle {
  min-height: 76px; padding: var(--space-14) var(--space-16); display: flex; align-items: center; justify-content: space-between; gap: var(--space-14);
  border: 1px solid rgba(47,29,31,.14); border-radius: var(--radius-sm); background: rgba(255,255,255,.78); color: var(--color-base-800); text-align: left; cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.lernwerk-view-toggle:hover, .lernwerk-view-toggle:focus-visible { border-color: rgba(63,57,95,.42); background: #fff; box-shadow: 0 .5rem 1.4rem rgba(31,39,71,.08); outline: none; transform: translateY(-1px); }
.lernwerk-view-toggle.is-active { border-color: #565083; background: #eceaf5; box-shadow: inset 0 0 0 1px #565083; }
.lernwerk-view-toggle > span:first-child { display: grid; gap: var(--space-4); }
.lernwerk-view-toggle strong { color: var(--color-base-900); font-size: var(--fs-body-l); }
.lernwerk-view-toggle small { color: var(--color-base-600); font-size: var(--fs-body-s); }
.lernwerk-view-toggle > span:last-child { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #f5f1f2; color: #565083; font-size: 1.4rem; line-height: 1; }
.lernwerk-view-panel { display: grid; gap: var(--space-18); padding-top: var(--space-4); }
.lernwerk-view-panel[hidden] { display: none !important; }
.lernwerk-product { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-18); }
.lernwerk-owned-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.lernwerk-owned-head h4 { margin: var(--space-4) 0 0; color: var(--color-base-850); }
.lernwerk-product h3 { margin: var(--space-8) 0 var(--space-4); color: var(--color-base-850); font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.lernwerk-product p, .lernwerk-status,
.lernwerk-assignment p, .lernwerk-assignment__qr p, .lernwerk-answer p { margin: 0; }
.lernwerk-tags { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.lernwerk-tags span, .lernwerk-submission-badge {
  border-radius: var(--radius-pill); padding: var(--space-6) var(--space-10);
  background: #eceaf5; color: #3f395f; font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.lernwerk-submission-badge { flex: 0 0 auto; background: #f7efd9; color: #76591f; }
.lernwerk-library-toolbar { display: grid; grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(9rem, 1fr)); gap: var(--space-10); align-items: end; padding: var(--space-14); border: 1px solid rgba(47,29,31,.12); border-radius: var(--radius-sm); background: rgba(255,255,255,.62); }
.lernwerk-library-search { grid-column: span 2; }
.lernwerk-library-results { display: grid; gap: var(--space-12); }
.lernwerk-library-card { display: grid; gap: var(--space-10); padding: var(--space-18); border: 1px solid rgba(47,29,31,.14); border-left: .4rem solid #a65f6b; border-radius: var(--radius-sm); background: rgba(255,255,255,.78); box-shadow: 0 .4rem 1.4rem rgba(31,39,71,.06); }
.lernwerk-library-card.is-unlocked { border-left-color: #3f7185; }
.lernwerk-library-card.is-owned-view { gap: var(--space-12); border-left-width: .5rem; background: #fff; }
.lernwerk-library-card__head, .lernwerk-assignment-history__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-10); }
.lernwerk-preview-links { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.lernwerk-preview-link { flex: 0 0 auto; }
.lernwerk-library-card h4 { margin: 0; color: var(--color-base-900); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.35; text-transform: none; }
.lernwerk-library-card__creative, .lernwerk-library-card__official, .lernwerk-library-card__subtitle, .lernwerk-library-meta, .lernwerk-library-empty { margin: 0; color: var(--color-base-600); }
.lernwerk-library-card__subtitle { font-size: var(--fs-body-m); }
.lernwerk-library-card__official { font-weight: var(--fw-semibold); line-height: 1.5; }
.lernwerk-owned-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.lernwerk-owned-stat { padding: var(--space-10) var(--space-12); display: grid; gap: 2px; border-radius: var(--radius-sm); background: #f5f1f2; }
.lernwerk-owned-stat strong { color: var(--color-base-850); font-size: var(--fs-body-l); }
.lernwerk-owned-stat small { color: var(--color-base-600); font-size: var(--fs-caption); }
.lernwerk-library-details { border: 1px solid rgba(47,29,31,.11); border-radius: var(--radius-sm); background: rgba(245,241,242,.72); overflow: hidden; }
.lernwerk-library-details summary { padding: var(--space-10) var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); color: var(--color-base-750); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.lernwerk-library-details summary::-webkit-details-marker { display: none; }
.lernwerk-library-details summary::after { content: '+'; flex: 0 0 auto; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #fff; color: #565083; font-size: 1.2rem; line-height: 1; }
.lernwerk-library-details[open] summary { border-bottom: 1px solid rgba(47,29,31,.1); background: #eceaf5; }
.lernwerk-library-details[open] summary::after { content: '−'; }
.lernwerk-library-details__content { padding: var(--space-14); display: grid; gap: var(--space-12); }
.lernwerk-library-licence { flex: 0 0 auto; border-radius: var(--radius-pill); padding: var(--space-6) var(--space-10); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.lernwerk-library-licence.is-unlocked { background: #e5f1ec; color: #245b43; }
.lernwerk-library-licence.is-locked { background: #f5e8e9; color: #7d3540; }
.lernwerk-library-curriculum { padding: var(--space-12); border-radius: var(--radius-sm); background: #f5f1f2; color: var(--color-base-750); }
.lernwerk-library-curriculum ul { margin: var(--space-8) 0 0; padding-left: 1.25rem; }
.lernwerk-library-curriculum li + li { margin-top: var(--space-4); }
.lernwerk-library-sources { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.lernwerk-library-sources a { color: var(--color-base-750); font-size: var(--fs-body-s); text-underline-offset: .2em; }
.lernwerk-library-card > .btn { justify-self: start; }
.lernwerk-assignment-history h4 { margin: var(--space-4) 0 0; color: var(--color-base-850); }
.lernwerk-owned-library, .lernwerk-assignment-history { display: grid; gap: var(--space-12); padding: var(--space-16); border: 1px solid rgba(47,29,31,.12); border-radius: var(--radius-sm); background: rgba(255,255,255,.62); }
.lernwerk-assignment-history--completed { background: rgba(245,241,242,.68); }
.lernwerk-assign { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); align-items: end; }
.lernwerk-assign .select { min-height: 46px; }
.lernwerk-assign--embedded { padding: var(--space-4) 0; }
.lernwerk-status { min-height: 1.3rem; color: var(--color-base-600); font-size: var(--fs-body-s); }
.lernwerk-status:empty { display: none; }
.lernwerk-status.is-error { color: var(--color-danger); }
.lernwerk-status.is-success { color: var(--color-success); }
.lernwerk-assignment__qr img { background: white; border-radius: 12px; }
.lernwerk-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-8); }
.lernwerk-code { display: flex; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) var(--space-10); border: 1px solid rgba(47,29,31,.1); border-radius: 10px; background: white; }
.lernwerk-code code { color: var(--color-base-850); font-weight: var(--fw-bold); letter-spacing: .08em; }
.lernwerk-assignments { display: grid; gap: var(--space-10); }
.lernwerk-assignment { padding: var(--space-14); border: 1px solid rgba(47,29,31,.11); border-radius: var(--radius-sm); background: rgba(255,255,255,.52); }
.lernwerk-assignment__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }
.lernwerk-assignment__date { margin-top: var(--space-4) !important; color: var(--color-base-600); font-size: var(--fs-body-s); }
.lernwerk-assignment__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.lernwerk-assignment-progress { display: grid; gap: var(--space-8); margin-top: var(--space-12); }
.lernwerk-assignment-progress__text { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); color: var(--color-base-650); font-size: var(--fs-body-s); }
.lernwerk-assignment-progress__track { height: .55rem; overflow: hidden; border-radius: var(--radius-pill); background: #e7dfe1; }
.lernwerk-assignment-progress__track span { display: block; height: 100%; border-radius: inherit; background: #3f7185; transition: width var(--transition-base); }
.lernwerk-assignment__qr { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: var(--space-14); align-items: center; margin-top: var(--space-12); padding: var(--space-12); background: #f7efd9; border-radius: var(--radius-sm); }
.lernwerk-assignment__qr p { overflow-wrap: anywhere; }
.lernwerk-assignment__share-content { display: grid; gap: var(--space-8); min-width: 0; }
.lernwerk-assignment__share-content a { overflow-wrap: anywhere; color: var(--color-base-800); text-underline-offset: .2em; }
.lernwerk-assignment__share-content .btn { justify-self: start; }
.lernwerk-assignment__codes { margin-top: var(--space-12); padding: var(--space-12); border-radius: var(--radius-sm); background: #f7efd9; }
.lernwerk-assignment__qr[hidden], .lernwerk-assignment__codes[hidden] { display: none !important; }
.lernwerk-results { display: grid; gap: var(--space-8); margin-top: var(--space-12); }
.lernwerk-result { padding-top: var(--space-10); border-top: 1px solid rgba(47,29,31,.1); }
.lernwerk-result summary { cursor: pointer; color: var(--color-base-850); font-weight: var(--fw-semibold); }
.lernwerk-answers { display: grid; gap: var(--space-8); margin: var(--space-10) 0; }
.lernwerk-progress { margin: var(--space-8) 0; color: var(--color-base-600); font-size: var(--fs-body-s); }
.lernwerk-upload { display: grid; gap: var(--space-8); margin: var(--space-10) 0; padding: var(--space-10); border: 1px solid rgba(47,29,31,.12); border-radius: var(--radius-sm); background: rgba(255,255,255,.66); }
.lernwerk-upload img { display: block; width: min(100%, 38rem); max-height: 32rem; object-fit: contain; border-radius: var(--radius-sm); background: white; }
.lernwerk-upload a { justify-self: start; color: var(--color-base-800); font-weight: var(--fw-semibold); text-underline-offset: .2em; }
.lernwerk-answer { padding: var(--space-10); border-radius: 10px; background: #f5f1f2; }
.lernwerk-answer p { margin-top: var(--space-4); white-space: pre-wrap; }
.lernwerk-review { display: grid; grid-template-columns: 170px minmax(0,1fr) auto; gap: var(--space-10); align-items: end; }
.lernwerk-review textarea { min-height: 76px; resize: vertical; }
.lernwerk-score-form { grid-template-columns: minmax(10rem, 14rem) auto; justify-content: start; margin-top: var(--space-12); }
.lernwerk-feedback-editor, .lernwerk-solution-release { display: grid; gap: var(--space-8); margin-top: var(--space-12); padding: var(--space-12); border: 1px solid rgba(47,29,31,.12); border-radius: var(--radius-sm); background: rgba(255,255,255,.7); }
.lernwerk-feedback-editor h4, .lernwerk-solution-release h4 { margin: 0; color: var(--color-base-850); }
.lernwerk-recipient { margin: 0; color: #7d3540; font-weight: var(--fw-bold); }
.lernwerk-feedback-composer { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(18rem, 1.6fr) auto; gap: var(--space-10); align-items: end; }
.lernwerk-feedback-text textarea { min-height: 7rem; resize: vertical; }
.lernwerk-feedback-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.lernwerk-feedback-history { margin-top: var(--space-6); }
.lernwerk-feedback-history summary { cursor: pointer; font-weight: var(--fw-semibold); }
.lernwerk-solution-release .btn { justify-self: start; }

@media (max-width: 720px) {
  .lernwerk-view-actions { grid-template-columns: 1fr; }
  .lernwerk-owned-usage { grid-template-columns: 1fr; }
  .lernwerk-owned-head { align-items: flex-start; flex-direction: column; }
  .lernwerk-assignment-progress__text { align-items: flex-start; flex-direction: column; }
  .lernwerk-product, .lernwerk-assignment__head { align-items: stretch; flex-direction: column; }
  .lernwerk-assign, .lernwerk-assignment__qr, .lernwerk-review, .lernwerk-feedback-composer { grid-template-columns: 1fr; }
  .lernwerk-library-toolbar { grid-template-columns: 1fr; }
  .lernwerk-library-search { grid-column: auto; }
  .lernwerk-library-card__head, .lernwerk-assignment-history__head { align-items: stretch; flex-direction: column; }
}

/* Shared learning groups from edfy checklisten and edfy namigo */
.accent-strip--learning-groups {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(135deg, #5c4b4b 0%, #7c6465 100%);
}

.accent-strip--learning-groups .accent-title p {
  margin: var(--space-4) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body-s);
}

.accent-avatar--learning-groups img {
  width: 2rem;
  height: 2rem;
  filter: brightness(0) invert(1);
}

.learning-groups-content {
  display: grid;
  gap: var(--space-14);
  min-height: 0;
}

.learning-groups-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.learning-groups-toolbar__actions,
.learning-group-item__actions,
.learning-group-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.learning-groups-summary,
.learning-groups-status,
.learning-groups-empty p,
.learning-groups-login p {
  margin: 0;
}

.learning-groups-summary {
  color: var(--color-base-850);
  font-weight: var(--fw-semibold);
}

.learning-groups-status {
  min-height: 1.25rem;
  color: var(--color-base-600);
  font-size: var(--fs-body-s);
}

.learning-groups-status.is-error { color: var(--color-danger); }

.learning-groups-card .btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: var(--space-8); min-height: 44px; width: fit-content !important; max-width: 100%; white-space: normal; flex: 0 1 auto; }
.learning-groups-card .btn img { width: 20px; height: 20px; flex: 0 0 20px; }
.learning-groups-card .form-field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.learning-groups-card input { min-width: 0; max-width: 100%; text-transform: none; }
.learning-groups-card .learning-group-item { display: grid; gap: var(--space-12); }
.learning-groups-card .learning-group-item > p { margin: 0; }
.learning-groups-card .learning-groups-status { font-size: 16px; }

.learning-groups-list {
  display: grid;
  gap: var(--space-10);
  max-height: none;
  overflow: visible;
}

.learning-group-item {
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-12);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
}

.learning-group-item__header,
.learning-group-item__identity {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.learning-group-item__header { justify-content: space-between; }
.learning-group-item__identity { min-width: 0; }

.learning-group-item__color {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--learning-group-color, var(--color-base-200));
  box-shadow: 0 0 0 3px rgba(47, 29, 31, 0.06);
}

.learning-group-item__title { min-width: 0; display: grid; gap: 0.15rem; }
.learning-group-item__title strong { overflow-wrap: anywhere; }
.learning-group-item__title span { color: var(--color-base-600); font-size: var(--fs-body-s); }

.learning-group-source {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6rem;
  background: var(--color-base-150);
  color: var(--color-base-700);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.learning-group-item__actions { margin-top: var(--space-10); }

.learning-group-item__delete {
  border: 0;
  background: transparent;
  color: var(--color-danger);
  font: inherit;
  font-size: var(--fs-body-s);
  cursor: pointer;
}

.learning-group-editor {
  display: grid;
  gap: var(--space-10);
  border: 1px solid rgba(47, 29, 31, 0.14);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  background: rgba(255, 255, 255, 0.62);
}

.learning-group-editor h3 { margin: 0; }
.learning-group-color-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.learning-group-color-picker legend { margin-bottom: var(--space-8); font-weight: var(--fw-semibold); }
.learning-group-color-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-10); }
.learning-group-color-choice { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-8); min-height: 52px; padding: var(--space-8) var(--space-10); border: 1px solid var(--color-base-200); border-radius: var(--radius-sm); background: var(--color-base-0); cursor: pointer; }
.learning-group-color-choice:hover { border-color: var(--color-base-500); background: var(--color-base-50); }
.learning-group-color-choice:has(input:checked) { border-color: var(--color-base-700); box-shadow: 0 0 0 2px var(--color-base-700); }
.learning-group-color-choice:has(input:checked)::after { content: '✓'; position: absolute; top: 4px; right: 7px; color: var(--color-base-850); font-weight: var(--fw-bold); }
.learning-group-color-choice:has(input:focus-visible) { outline: 3px solid var(--color-base-700); outline-offset: 3px; }
.learning-group-color-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.learning-group-color-swatch { width: 32px; height: 32px; border: 1px solid rgba(47, 29, 31, 0.22); border-radius: 50%; background: var(--choice-color); }
.learning-group-color-choice > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.learning-group-color-choice.is-legacy { grid-column: 1 / -1; }
.learning-group-color-note { margin: var(--space-8) 0 0; color: var(--color-base-700); font-size: var(--fs-body-s); }
.learning-group-color-options.is-compact { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.learning-group-color-choice.is-compact {
  display: grid;
  grid-template-columns: 1fr;
  width: 3rem;
  min-height: 3rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.learning-group-color-choice.is-compact:hover { background: var(--color-base-50); }
.learning-group-color-choice.is-compact:has(input:checked) { border-color: transparent; box-shadow: none; }
.learning-group-color-choice.is-compact:has(input:checked)::after { content: none; }
.learning-group-color-choice.is-compact:has(input:checked) .learning-group-color-swatch { border: 3px solid var(--color-base-850); transform: scale(1.08); }
.learning-group-color-choice.is-compact.is-legacy { width: 3rem; }
.learning-group-color-choice.is-compact .learning-group-color-swatch { width: 2.25rem; height: 2.25rem; }
.learning-group-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.learning-group-creation__subject { width: min(100%, 44rem); min-width: 0; margin: 0; padding: 0; border: 0; }
.learning-group-creation__subject > legend { margin-bottom: var(--space-8); font-weight: var(--fw-semibold); }
.learning-group-subject-picker { position: relative; width: min(100%, 28rem); }
.learning-group-subject-picker > summary {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-20);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-pill);
  background: var(--color-base-0);
  color: var(--color-base-850);
  cursor: pointer;
  list-style: none;
}
.learning-group-subject-picker > summary::-webkit-details-marker { display: none; }
.learning-group-subject-picker > summary::after { content: '⌄'; margin-left: var(--space-12); color: var(--color-base-600); }
.learning-group-subject-picker[open] > summary { border-color: var(--color-base-700); }
.learning-group-subject-picker__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--space-6));
  left: 0;
  right: 0;
  display: grid;
  gap: var(--space-8);
  padding: var(--space-10);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-md);
  background: var(--color-base-0);
  box-shadow: 0 14px 30px rgba(47, 29, 31, 0.14);
}
.learning-group-subject-picker__options { display: grid; max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; }
.learning-group-subject-picker__option {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-10);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-base-850);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learning-group-subject-picker__option:hover,
.learning-group-subject-picker__option:focus-visible,
.learning-group-subject-picker__option[aria-selected='true'] { background: var(--color-base-100); }
.learning-group-subject-picker__option > img { width: 2rem; height: 2rem; object-fit: contain; }
.learning-group-creation__count { width: min(100%, 8rem); }
.learning-group-person-options {
  display: grid;
  gap: var(--space-8);
  width: min(100%, 42rem);
  margin: 0;
  padding: var(--space-14);
  border: 1px solid var(--color-base-150);
  border-radius: var(--radius-sm);
  background: var(--color-base-25);
}
.learning-group-person-options > legend { padding-inline: var(--space-4); font-weight: var(--fw-semibold); }
.learning-group-person-options > p { margin: 0; color: var(--color-base-700); font-size: var(--fs-body-s); }
.learning-group-person-options__choices { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.learning-group-person-options__choices .form-field {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  min-height: 44px;
}
.learning-group-editor__roster { display: grid; gap: 0; }
.learning-group-editor__roster.has-people {
  overflow: hidden;
  border: 1px solid var(--color-base-150);
  border-radius: var(--radius-sm);
  background: var(--color-base-25);
}
.learning-group-editor__roster-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: end;
  gap: var(--space-8);
  padding: var(--space-14) var(--space-12) var(--space-10);
  background: var(--color-base-50);
  color: var(--color-base-700);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
}
.learning-group-editor__roster-headings { align-items: center; }
.learning-group-editor__roster-headings > span { text-align: center; }
.learning-group-editor__person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 0;
  border-top: 1px solid var(--color-base-150);
  border-radius: 0;
  background: transparent;
}
.learning-group-editor__person-fields {
  display: grid;
  grid-template-columns: var(--person-columns, minmax(8.5rem, 1fr) minmax(8.5rem, 1fr));
  align-items: end;
  gap: var(--space-8);
  min-width: 0;
}
.learning-group-editor .learning-group-editor__gender {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.learning-group-editor .learning-group-editor__gender > legend { padding: 0; font: inherit; }
.learning-group-editor__gender-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.learning-group-editor__gender-choice { position: relative; display: grid; min-height: 44px; place-items: center; cursor: pointer; }
.learning-group-editor__gender-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.learning-group-editor__gender-box {
  display: grid;
  width: 100%;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--color-base-300);
  border-radius: var(--radius-sm);
  background: var(--color-base-0);
  color: var(--color-base-600);
  font-weight: var(--fw-normal);
}
.learning-group-editor__gender-choice > input:checked ~ .learning-group-editor__gender-box { border-color: var(--color-base-700); background: var(--color-base-150); color: var(--color-base-850); font-weight: var(--fw-semibold); }
.learning-group-editor__gender-choice > input:focus-visible ~ .learning-group-editor__gender-box { outline: 3px solid var(--color-base-700); outline-offset: 3px; }
.learning-group-editor__email-input {
  padding-left: 2.75rem;
  background-image: url('/public/assets/icons/edfy/mail.svg');
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.05rem 1.05rem;
}
.lehrwerk-module .learning-group-editor__remove-person {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: var(--space-10);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lehrwerk-module .learning-group-editor__remove-person:hover { background: transparent; transform: none; }
.learning-group-editor__remove-person > span { display: none; }

.learning-group-creation {
  width: min(100%, 78rem);
  margin-inline: auto;
  gap: var(--space-24);
  padding: clamp(var(--space-20), 4vw, var(--space-32));
  background: var(--color-base-0);
}

.learning-group-creation > h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.learning-group-creation__intro { max-width: 62ch; color: var(--color-base-700); }
.learning-group-creation__progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.learning-group-creation__progress li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: var(--space-8); color: var(--color-base-600); }
.learning-group-creation__progress li::after { content: ''; grid-column: 1 / -1; height: 2px; border-radius: var(--radius-pill); background: var(--color-base-150); }
.learning-group-creation__progress li.is-current, .learning-group-creation__progress li.is-complete { color: var(--color-base-850); }
.learning-group-creation__progress li.is-current::after, .learning-group-creation__progress li.is-complete::after { background: var(--color-base-500); }
.learning-group-creation__progress li > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--color-base-300); border-radius: 50%; background: var(--color-base-50); font-weight: var(--fw-semibold); }
.learning-group-creation__progress li.is-current > span { border-color: var(--color-base-700); background: var(--color-base-700); color: var(--color-base-0); }
.learning-group-creation__progress li.is-complete > span { border-color: var(--color-base-500); }
.learning-group-creation__progress strong { font-size: var(--fs-body-s); }

.learning-group-creation__methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.learning-group-creation__method {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: start;
  gap: var(--space-10);
  min-height: 13rem;
  padding: var(--space-20);
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-sm);
  background: var(--color-base-25);
  color: var(--color-base-850);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.learning-group-creation__method:hover { border-color: var(--color-base-500); background: var(--color-base-50); }
.learning-group-creation__method:focus-visible { outline: 3px solid var(--color-base-700); outline-offset: 3px; }
.learning-group-creation__method img { width: 2rem; height: 2rem; }
.learning-group-creation__method strong { font-size: 1.08rem; }
.learning-group-creation__method span { color: var(--color-base-700); }

.learning-group-creation__choice { display: grid; gap: var(--space-4); max-width: 62ch; padding-bottom: var(--space-12); border-bottom: 1px solid var(--color-base-150); }
.learning-group-creation__choice span { color: var(--color-base-700); }
.learning-group-creation__section { display: grid; gap: var(--space-14); }
.learning-group-creation__section > h3, .learning-group-creation__section > p { margin: 0; }
.learning-group-creation__section > p { max-width: 62ch; color: var(--color-base-700); }
.learning-group-import-dropzone {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-10);
  width: min(100%, 44rem);
  min-height: 13rem;
  padding: var(--space-24);
  border: 1px dashed var(--color-base-300);
  border-radius: var(--radius-sm);
  background: var(--color-base-50);
  text-align: center;
  transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}
.learning-group-import-dropzone:hover,
.learning-group-import-dropzone:focus-within {
  border-color: var(--color-base-500);
  background: var(--color-base-75);
}
.learning-group-import-dropzone.is-dragging {
  border-color: var(--color-base-700);
  background: var(--color-base-100);
  box-shadow: 0 8px 20px rgba(124, 100, 101, 0.14);
}
.learning-group-import-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.learning-group-import-dropzone__title,
.learning-group-import-dropzone__formats { margin: 0; }
.learning-group-import-dropzone__title { color: var(--color-base-850); font-weight: var(--fw-semibold); }
.learning-group-import-dropzone__alternative,
.learning-group-import-dropzone__formats { color: var(--color-base-600); font-size: var(--fs-body-s); }
.learning-groups-card .learning-group-import-dropzone .btn { justify-self: center !important; align-self: center; margin-inline: auto; }
.learning-group-ai-panel,
.learning-group-ai-legacy { display: grid; gap: var(--space-14); width: min(100%, 44rem); }
.learning-group-ai-panel > p,
.learning-group-ai-balance,
.learning-group-ai-status { margin: 0; }
.learning-group-ai-panel > p,
.learning-group-ai-status { color: var(--color-base-700); }
.learning-group-ai-balance { font-weight: var(--fw-semibold); }
.learning-group-ai-dropzone__file { margin: 0; color: var(--color-base-850); font-size: var(--fs-body-s); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.learning-group-creation__empty { padding: var(--space-12); border-radius: var(--radius-sm); background: var(--color-base-50); color: var(--color-base-700); }
.learning-group-creation__warnings { margin: 0; padding: var(--space-12) var(--space-12) var(--space-12) 2rem; border-radius: var(--radius-sm); background: var(--color-base-100); }
.learning-group-creation__review { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: var(--space-10) var(--space-20); margin: 0; padding: var(--space-16) 0; border-block: 1px solid var(--color-base-150); }
.learning-group-creation__review dt { color: var(--color-base-600); font-weight: var(--fw-semibold); }
.learning-group-creation__review dd { margin: 0; overflow-wrap: anywhere; }
.learning-group-creation__review-color { display: block; width: 1.75rem; height: 1.75rem; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 50%; }
.learning-group-creation__preview { columns: 2 14rem; margin: 0; padding-left: 1.5rem; }
.learning-group-creation__preview li { break-inside: avoid; padding-block: var(--space-4); }
.learning-group-creation__preview li > span { display: block; color: var(--color-base-700); font-size: var(--fs-body-s); overflow-wrap: anywhere; }

/* Central groups: the page itself scrolls, not a second framed list. */
.learning-groups-page { display: grid; gap: var(--space-16); min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.learning-groups-page:not(.is-creating):not(.work-selected-group) { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.learning-groups-page > :is([data-learning-groups-list], [data-learning-groups-editor], [data-learning-groups-status], [data-learning-groups-empty]) { grid-column: 1 / -1; }
.learning-groups-page > .learning-group-editor__actions:empty { display: none; }
.learning-groups-page .learning-group-editor { width: min(100%, 72rem); }
.learning-groups-workspace:not(.work-selected-group) .learning-groups-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; }
.learning-groups-workspace .learning-group-card-link { align-content: center; min-height: 108px; color: var(--color-text-strong); text-decoration: none; background: var(--color-base-0, white); box-shadow: none; }
.learning-group-card-link .work-group-title { margin: 0; font-size: var(--fs-h4, 1.25rem); overflow-wrap: anywhere; }
.learning-group-card-link:hover { border-color: var(--color-base-500); background: var(--color-base-50); }
.learning-group-card-link:focus-visible { outline: 3px solid var(--color-base-700); outline-offset: 4px; }
.learning-groups-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.learning-groups-context > p { margin: 0; }
.learning-groups-workspace .learning-group-search-status:empty { display: none; }
.learning-groups-workspace .learning-group-search-status { margin: 0; font-size: var(--fs-body-s); }
.learning-group-roster-undo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); }
.learning-group-roster-undo:empty { display: none; }
.learning-group-editor .learning-group-editor__actionbar {
  position: sticky; bottom: 0; z-index: 6; align-self: end;
  padding: var(--space-12) 0 calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  background: var(--color-base-0, white); border-top: 1px solid var(--color-base-200);
}
.learning-group-editor input { scroll-margin-block: calc(var(--work-header-height, 100px) + 24px) 110px; }
.learning-group-editor [aria-invalid="true"] { border-color: var(--color-danger, #922e30); }
.learning-groups-workspace.work-selected-group .learning-group-item { background: transparent; box-shadow: none; }
.learning-groups-workspace .learning-group-roster { padding: var(--space-16) var(--space-16) var(--space-16) 2.5rem; background: var(--color-base-0, white); border-radius: var(--radius-sm); }
.learning-group-editor [data-person-id][hidden], .learning-group-roster > li[hidden] { display: none; }

.learning-group-item__toggle {
  min-height: 2.25rem;
  margin-top: var(--space-8);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-base-700);
  font: inherit;
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.learning-group-roster {
  margin: var(--space-6) 0 0;
  padding: var(--space-10) var(--space-10) var(--space-10) 2rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.58);
  columns: 2 12rem;
  color: var(--color-base-700);
  font-size: var(--fs-body-s);
}

.learning-group-roster li { break-inside: avoid; padding: 0.15rem 0; }

.learning-groups-empty,
.learning-groups-login {
  display: grid;
  gap: var(--space-8);
  justify-items: start;
  border: 1px dashed rgba(47, 29, 31, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  background: rgba(255, 255, 255, 0.48);
  color: var(--color-base-600);
}

.learning-groups-empty strong,
.learning-groups-login strong { color: var(--color-base-850); }

@media (max-width: 620px) {
  .learning-group-color-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-groups-toolbar,
  .learning-group-item__header { align-items: flex-start; }
  .learning-groups-toolbar { flex-direction: column; }
  .learning-group-editor__roster-header { display: none; }
  .learning-group-editor__person { grid-template-columns: 1fr; align-items: stretch; }
  .learning-group-editor__person-fields { grid-template-columns: 1fr; }
  .learning-group-editor__person > .btn { justify-self: start; }
  .learning-group-source { margin-top: 0.1rem; }
  .learning-group-roster { columns: 1; }
  .learning-group-creation { padding: var(--space-16); }
  .learning-group-creation__methods { grid-template-columns: 1fr; }
  .learning-group-creation__method { min-height: 0; }
  .learning-group-creation__progress li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .learning-group-creation__progress li > span { width: 1.8rem; height: 1.8rem; }
  .learning-group-creation__progress strong { font-size: var(--fs-caption); }
  .learning-group-creation__review { grid-template-columns: 1fr; gap: var(--space-4); }
  .learning-group-creation__review dd + dt { margin-top: var(--space-8); }
  .learning-group-creation__preview { columns: 1; }
  .learning-group-editor__person-fields :is(label, legend).learning-group-visually-hidden { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: var(--fs-caption); }
  .learning-group-editor .learning-group-editor__actionbar { gap: var(--space-8); }
  .learning-groups-card .learning-group-editor__actionbar .btn { padding: 10px 12px; font-size: 14px; }
  .learning-groups-card .learning-group-editor__actionbar .btn img { width: 18px; height: 18px; flex-basis: 18px; }
  .learning-groups-page:not(.is-creating):not(.work-selected-group) { grid-template-columns: minmax(0, 1fr); }
}

[data-profile-heading] {
  text-align: center;
  margin-bottom: var(--space-12);
  font-size: clamp(var(--fs-h2), 3vw, var(--fs-h1));
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.profile-additional {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}

.profile-actions {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: center;
}

.profile-add-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-body-s);
  color: var(--color-text-strong);
}

.select-with-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.custom-category-row {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.custom-category-row.hidden {
  display: none;
}

.profile-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
}

.profile-add-form--inline {
  margin: var(--space-12) 0;
}

.profile-add-form__title {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-body-l);
  color: var(--color-text-strong);
}

.profile-add-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.profile-add-preview__title {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-body-m);
  color: var(--color-text);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* KorrekturPilot */
.korrekurpilot-card {
  display: flex;
  flex-direction: column;
}

.korrekurpilot-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.kp-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-12);
}

.kp-points {
  background: var(--color-surface-alt, #f5efea);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.kp-points-value {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

.kp-points-label {
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  text-transform: lowercase;
}

.kp-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
}

.kp-title-label {
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  text-transform: lowercase;
}

.kp-title-value {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
}

.kp-title-progress {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.kp-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-16);
  align-items: center;
}

.kp-progress-ring {
  position: relative;
  width: 120px;
  height: 120px;
  justify-self: center;
}

.kp-ring {
  width: 100%;
  height: 100%;
}

.kp-ring-bg {
  fill: none;
  stroke: var(--color-border-light);
  stroke-width: 3;
}

.kp-ring-fg {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.kp-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.kp-ring-value {
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
}

.kp-ring-label {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.kp-week {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.kp-week-label {
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  text-transform: lowercase;
}

.kp-week-bar {
  width: 100%;
  height: 12px;
  background: var(--color-surface-alt, #f5efea);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.kp-week-fill {
  height: 100%;
  background: var(--color-primary);
  width: 0;
  transition: width 0.3s ease;
}

.kp-week-meta {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.kp-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.kp-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-12);
}

.kp-goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-12);
}

.kp-actions {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.kp-feedback {
  min-height: 20px;
  font-size: var(--fs-body-s);
  color: var(--color-text-strong);
}

.kp-history h4 {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-body-m);
  text-transform: lowercase;
}

.profile-add-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.profile-add-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
}

.profile-add-step__title {
  margin: 0;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}

.profile-add-step__hint {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-loose);
  color: var(--color-muted);
}

.profile-add-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

.profile-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.profile-extra-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.profile-extra-group + .profile-extra-group {
  margin-top: var(--space-10);
}

.profile-extra-group__heading {
  margin: 0;
  padding: 0 var(--space-4);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: lowercase;
  color: var(--color-text-strong);
}

.profile-extra-group__heading[hidden],
.profile-social-group__heading[hidden],
.profile-extra-heading[hidden],
.profile-field-label[hidden] {
  display: none !important;
}

.profile-extra-group__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.profile-social-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.profile-social-group__heading {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--color-muted);
}

.profile-social-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: #f3ece8;
  box-shadow: 0 6px 16px rgba(201, 152, 167, 0.14);
}

.profile-social-icon-item {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.profile-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(54, 37, 37, 0.12);
  background: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.profile-social-icon:hover,
.profile-social-icon:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(54, 37, 37, 0.15);
}

.profile-social-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.profile-social-icon--dark-badge {
  border: none;
  background: #111;
  box-shadow: none;
  color: #fff;
}

.profile-social-icon--dark-badge svg {
  width: 20px;
  height: 20px;
  display: block;
}

.profile-extra-item {
  position: relative;
  padding: var(--space-8) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: transparent;
  font-size: var(--fs-body-m);
  color: var(--color-text-strong);
}

.profile-extra-item strong {
  display: block;
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--color-text-strong);
}

.profile-extra-heading-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(54, 37, 37, 0.12);
  background: #fff;
  text-decoration: none;
  margin-left: var(--space-8);
  vertical-align: middle;
  color: var(--color-text-strong);
  font-size: 16px;
  line-height: 1;
}

.profile-extra-heading-action img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  opacity: 0.9;
}

.profile-extra-item span {
  color: var(--color-text-strong);
}

.profile-extra-icon {
  margin-right: var(--space-6);
}

.profile-extra-remove {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: transparent;
  border: none;
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
  cursor: pointer;
  line-height: 1;
  padding: var(--space-2);
}

.profile-extra-remove img {
  width: 20px;
  height: 20px;
  display: block;
}

.profile-extra-item a {
  color: var(--color-primary);
  text-decoration: underline;
}

.profile-extra-value {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border: 3px solid var(--color-border-strong, #362525);
  border-radius: 999px;
  background: var(--color-surface);
  min-height: 52px;
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
}

.profile-extra-value--plain {
  justify-content: flex-start;
  text-align: left;
  border-width: 2px;
}

.profile-extra-value .profile-extra-icon {
  margin-left: auto;
  color: var(--color-text-muted, #7a5f68);
}

/* In profile widget + profile modal preview, extra rows should use the same visual language. */
.profile-card-fields .profile-extra,
.profile-modal-inner .profile-extra {
  margin-top: 0;
}

.profile-card-fields .profile-extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: 0;
}

.profile-card-fields .profile-extra .profile-extra-group,
.profile-modal-inner .profile-extra .profile-extra-group {
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: rgba(243, 236, 232, 0.72);
  box-shadow: 0 8px 22px rgba(201, 152, 167, 0.14);
}

.profile-card-fields .profile-extra .profile-extra-group + .profile-extra-group,
.profile-modal-inner .profile-extra .profile-extra-group + .profile-extra-group {
  margin-top: var(--space-12);
}

.profile-card-fields .profile-extra .profile-extra-group + .profile-extra-group {
  margin-top: 0;
}

.profile-card-fields .profile-extra .profile-extra-group__heading,
.profile-modal-inner .profile-extra .profile-extra-group__heading {
  padding: 0;
  margin-bottom: var(--space-4);
}

.profile-card-fields .profile-extra .profile-extra-item,
.profile-modal-inner .profile-extra .profile-extra-item {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-card-fields .profile-extra .profile-extra-group .profile-extra-item,
.profile-modal-inner .profile-extra .profile-extra-group .profile-extra-item {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-card-fields .profile-extra .profile-extra-group .profile-social-icon-row,
.profile-modal-inner .profile-extra .profile-extra-group .profile-social-icon-row {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-card-fields .profile-extra .profile-extra-item strong,
.profile-modal-inner .profile-extra .profile-extra-item strong {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.profile-card-fields .profile-extra .profile-social-group__heading,
.profile-modal-inner .profile-extra .profile-social-group__heading {
  margin-bottom: var(--space-4);
}

.profile-card-fields .profile-extra .profile-extra-item .profile-extra-heading,
.profile-modal-inner .profile-extra .profile-extra-item .profile-extra-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.profile-card-fields .profile-extra .profile-extra-value,
.profile-modal-inner .profile-extra .profile-extra-value {
  display: flex;
  font-size: var(--fs-body-m);
  color: var(--color-text-strong);
  justify-content: flex-start;
  align-items: center;
}

.profile-card-fields .profile-extra .profile-extra-value .profile-extra-icon,
.profile-modal-inner .profile-extra .profile-extra-value .profile-extra-icon {
  margin-left: 0;
  margin-right: var(--space-6);
}

.profile-card-fields .profile-extra .profile-extra-item a,
.profile-modal-inner .profile-extra .profile-extra-item a {
  color: var(--color-text-strong);
  text-decoration: none;
}

.profile-modal-inner .profile-extra .profile-extra-group {
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.profile-modal-inner .profile-extra .profile-extra-item {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.profile-modal-inner .profile-extra .profile-extra-item strong {
  margin: 0 0 var(--space-8);
}

.profile-modal-inner .profile-extra .profile-extra-value {
  min-height: 52px;
  padding: var(--space-12) var(--space-20);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: none;
  align-items: center;
}

.profile-modal-inner .profile-extra .profile-extra-value {
  justify-content: flex-start;
}

.profile-modal-inner .profile-extra .profile-extra-value--plain {
  gap: var(--space-8);
}

.profile-card-fields .profile-extra .profile-extra-value--plain {
  gap: var(--space-8);
}

.profile-card-fields .profile-extra .profile-extra-value {
  display: block;
  min-height: 0;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 1px 0 rgba(54, 37, 37, 0.06);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-card-fields .profile-extra .profile-extra-value a,
.profile-card-fields .profile-extra .profile-extra-value span {
  overflow-wrap: anywhere;
}

.profile-card-fields .profile-extra .profile-extra-value--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.profile-card-fields .profile-extra .profile-extra-value__text-link {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-card-fields .profile-extra .profile-extra-value__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(54, 37, 37, 0.12);
  background: #fff;
  text-decoration: none;
}

.profile-card-fields .profile-extra .profile-extra-value__action img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.9;
}

.profile-card-fields .profile-extra .profile-social-icon-row {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-modal-inner .profile-extra .profile-extra-remove {
  position: static;
  margin-left: auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

.profile-modal-inner .profile-extra .profile-social-icon-row {
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: var(--space-8);
}

.profile-modal-inner .profile-extra .profile-social-icon-item {
  width: 32px;
  height: 32px;
}

.profile-modal-inner .profile-extra .profile-social-icon-item .profile-extra-remove {
  position: absolute;
  right: -6px;
  bottom: -6px;
  margin-left: 0;
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  border: 1px solid rgba(54, 37, 37, 0.18);
  background: #fff;
  box-shadow: 0 1px 4px rgba(54, 37, 37, 0.18);
}

.classroom-widget__select {
  margin: var(--space-12) 0;
}

.notenkompass-card {
  min-height: 100%;
}

.notenkompass-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  margin: var(--space-12) 0;
}

.notenkompass-summary {
  margin: var(--space-12) 0;
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
}

.notenkompass-privacy-note {
  margin: var(--space-10) 0 0;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #f7f3ef;
  color: var(--color-text);
  font-size: var(--fs-body-s);
  line-height: 1.45;
}

.notenkompass-summary__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  align-items: flex-start;
}

.notenkompass-summary__header .school-section-title,
.notenkompass-panel__header .school-section-title {
  margin-bottom: var(--space-4);
}

.notenkompass-stats {
  margin-top: var(--space-12);
}

.notenkompass-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: var(--space-16);
  align-items: start;
}

.notenkompass-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #fff;
  min-height: 100%;
}

.notenkompass-panel__header p {
  margin: 0;
}

.notenkompass-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.notenkompass-entry {
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #faf7f5);
}

.notenkompass-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.notenkompass-entry__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #ebe2de;
  color: var(--color-text-strong);
  font-size: var(--fs-body-xs);
  text-transform: lowercase;
}

.notenkompass-entry__title {
  display: block;
  margin-bottom: var(--space-6);
}

.notenkompass-entry__detail {
  margin: 0;
  color: var(--color-text);
  white-space: pre-wrap;
}

.notenkompass-categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
}

.notenkompass-categories__label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
}

.notenkompass-categories label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-transform: lowercase;
}

.notenkompass-recommendation-output {
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #faf7f5);
  white-space: pre-wrap;
  line-height: 1.55;
  min-height: 180px;
}

.notenkompass-recommendation-output[data-empty='true'] {
  color: var(--color-text-muted);
}

@media (max-width: 980px) {
  .notenkompass-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .notenkompass-toolbar {
    grid-template-columns: 1fr;
  }
}

.classroom-widget__totals {
  margin: var(--space-8) 0 var(--space-16);
}

.classroom-widget__actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  position: static;
  margin-top: var(--space-10);
  gap: var(--space-8);
}

.classroom-widget__actions[hidden] {
  display: none !important;
}

.classroom-widget__actions--below {
  margin: var(--space-10) 0 0;
}

.classroom-widget__actions .btn img,
.classroom-widget__section-actions .btn img,
.classroom-widget__student-detail-header .btn img,
.classroom-widget__archive-controls .btn img,
.classroom-entries-summary__actions .btn img,
[data-entries-summary-toggle] img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classroom-entry-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: fit-content;
}

.classroom-entry-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.classroom-entry-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: var(--fw-semibold);
}

.classroom-entry-label img {
  width: 16px;
  height: 16px;
}

[data-classroom-edit] img {
  width: 20px;
  height: 20px;
}

[data-open-matrix] img {
  width: 20px;
  height: 20px;
}

.classroom-entry-icon {
  font-size: var(--fs-body-m);
  opacity: 0.8;
}

.classroom-journal {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.classroom-journal__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f7f1ee);
  box-shadow: 0 8px 20px rgba(186, 150, 160, 0.12);
}

.classroom-journal__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.classroom-journal__header h4 {
  margin: 0;
  text-transform: lowercase;
  font-weight: var(--fw-semibold);
}

.classroom-journal__actions {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.classroom-journal__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.classroom-journal__actions img {
  width: 16px;
  height: 16px;
}

.classroom-entry-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-4);
}

.classroom-entry-status img {
  width: 16px;
  height: 16px;
}

.classroom-journal[hidden] {
  display: none !important;
}

.classroom-widget__entry [hidden] {
  display: none !important;
}

.classroom-journal-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.classroom-journal-field--stack textarea {
  min-height: 72px;
}

.classroom-journal__panel [data-student-save],
.classroom-widget__entry [data-student-save-bottom] {
  align-self: flex-start;
  width: auto !important;
}

.classroom-journal__panel > .btn:not(.btn-icon):not(.btn-block),
.classroom-attendance-body > .btn:not(.btn-icon):not(.btn-block),
.classroom-checklist-body > .btn:not(.btn-icon):not(.btn-block),
.classroom-substitute-body > .btn:not(.btn-icon):not(.btn-block),
.classroom-feedback-body > .btn:not(.btn-icon):not(.btn-block),
.classroom-widget__entry > .btn:not(.btn-icon):not(.btn-block) {
  align-self: flex-start;
  width: auto !important;
}

.classroom-widget__details {
  margin: var(--space-12) 0;
  padding: calc(var(--space-12) + 72px) var(--space-12) var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-class-badge {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(201, 152, 167, 0.12);
}

.classroom-class-badge__text {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: center;
  max-width: 64px;
  max-height: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.classroom-widget__detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--fs-body-m);
}

.classroom-widget__detail-row--stack {
  flex-direction: column;
  align-items: flex-start;
}

.classroom-widget__detail-row [data-classroom-schedule] {
  white-space: normal;
  overflow-wrap: anywhere;
}

.classroom-widget__detail-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8);
}

.classroom-widget__detail-grid .stat-card {
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(201, 152, 167, 0.08);
  padding: var(--space-8);
}

.classroom-widget__detail-grid .stat-label {
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
}

.classroom-widget__detail-grid .stat-value {
  font-size: var(--fs-body-l);
}

.classroom-widget__entry {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-widget__section--journal .classroom-widget__entry {
  margin-top: 0;
}

.classroom-widget__students-overview {
  min-height: 0;
}

.classroom-widget__students-summary {
  margin: 0;
}

.classroom-widget__students-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-6);
}

.classroom-widget__students-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: var(--space-8);
  align-items: end;
}

.classroom-widget__archive {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
}

.classroom-widget__archive-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
}

.classroom-widget__archive-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-8);
  align-items: end;
}

.classroom-widget__archive-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  padding-top: var(--space-10);
}

.classroom-widget__archive-select,
.classroom-widget__archive-filter {
  margin: 0;
}

[data-classroom-archive-restore],
[data-classroom-archive-preview] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  align-self: end;
}

[data-classroom-archive-restore] img,
[data-classroom-archive-preview] img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.classroom-widget__archive-empty {
  margin: var(--space-8) 0 0;
}

.classroom-widget__archive-preview {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding: var(--space-10);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-md);
  background: var(--widget-control-bg);
}

.classroom-widget__archive-preview[hidden] {
  display: none !important;
}

.classroom-widget__archive-preview-head {
  display: grid;
  gap: 2px;
}

.classroom-widget__archive-preview-head span {
  color: var(--widget-meta-color);
  font-size: var(--fs-caption);
}

.classroom-widget__archive-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.classroom-widget__archive-preview-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--widget-surface-color);
  color: var(--widget-meta-color);
  font-size: var(--fs-caption);
}

.classroom-widget__archive-preview-grid strong {
  color: var(--widget-text-color);
  font-size: var(--fs-body-m);
}

.classroom-widget__students-sort {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.classroom-widget__students-health-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
}

.classroom-widget__students-health-value {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
}

.classroom-widget__students-health-label {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.classroom-widget__students-empty {
  margin: 0;
}

.classroom-widget__student-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(248, 240, 233, 0.92));
}

.classroom-widget__student-detail-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: flex-start;
}

.classroom-widget__student-detail-kicker {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.classroom-widget__student-detail-name {
  margin: 0;
}

.classroom-widget__student-detail-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.classroom-widget__student-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-8);
}

.classroom-widget__student-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.65);
}

.classroom-widget__student-detail-label {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.classroom-journal__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.classroom-journal__heading h4 {
  margin: 0;
}

.classroom-journal__mode {
  margin: 0;
}

.classroom-entries-summary {
  margin-top: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f5efea);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-entries-summary[hidden],
.classroom-entries-summary__grid[hidden],
.classroom-entries-summary__actions[hidden] {
  display: none !important;
}

.classroom-entries-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.classroom-entries-summary__title {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
}

.classroom-entries-summary__header h4 {
  margin: 0;
}

.classroom-entries-summary__date {
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
}

.classroom-entries-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
}

.classroom-entries-summary__grid .stat-card {
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(201, 152, 167, 0.08);
  padding: var(--space-8);
}

.classroom-entries-summary__grid .stat-card .stat-value {
  font-size: var(--fs-body-m);
  font-weight: 500;
  line-height: 1.35;
}

.classroom-entries-summary__grid .stat-card .stat-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: baseline;
}

.classroom-entries-summary__grid .stat-card .stat-tag {
  color: var(--color-text-muted);
  font-weight: 600;
}

.classroom-entries-summary__actions {
  display: flex;
  justify-content: flex-end;
}

.classbook-widget__toolbar,
.classbook-widget__history {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.classbook-widget {
  --cb-shell-inset: var(--ui-card-inset);
  --cb-section-inset: var(--ui-card-inset);
  --cb-section-gap: var(--ui-stack-gap);
  --cb-panel-inset: var(--ui-group-inset);
  --cb-panel-gap: var(--ui-group-gap);
  --cb-item-gap: var(--ui-null-contact-gap);
  --cb-stack-gap: var(--ui-stack-gap);
  --cb-touch-gap: var(--ui-group-gap);
  --cb-layer-gap: var(--ui-stack-gap);
  position: relative;
  overflow: visible;
  container-type: inline-size;
  container-name: classbook-widget;
  background: var(--widget-shell-bg);
  border: 1px solid var(--widget-shell-border-color);
  box-shadow: var(--widget-shell-shadow);
}

.classbook-widget .accent-strip {
  background: var(--widget-strip-bg);
  border-bottom: 1px solid var(--widget-strip-divider-color);
  overflow: visible;
}

.classbook-widget .accent-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--widget-strip-highlight);
  pointer-events: none;
}

.classbook-widget .accent-title,
.classbook-widget .accent-title h2 {
  color: var(--widget-strip-text);
}

.classbook-widget .accent-title .muted {
  color: var(--widget-strip-meta);
}

.classbook-widget .accent-avatar {
  z-index: 80;
  background: var(--widget-avatar-bg);
  border: 1px solid var(--widget-avatar-border-color);
  box-shadow: var(--widget-avatar-shadow);
  backdrop-filter: var(--widget-avatar-filter);
  -webkit-backdrop-filter: var(--widget-avatar-filter);
}

.classbook-widget .accent-avatar--classroom::before {
  background-color: var(--widget-icon-color);
}

.classbook-widget .accent-intro {
  gap: var(--space-8);
}

.classbook-widget .accent-headline {
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 0.98;
  max-width: none;
  color: var(--widget-title-color);
}

.classbook-widget .accent-subtitle {
  max-width: 30ch;
  font-size: var(--fs-body-s);
  color: var(--widget-meta-color);
}

.classbook-widget .accent-content {
  padding: var(--cb-shell-inset);
  padding-top: calc(var(--cb-shell-inset) + var(--space-10));
  gap: var(--cb-shell-inset);
  background: var(--widget-content-bg);
}

.classbook-widget__select,
.classbook-widget__history-select {
  margin: 0;
}

.classbook-widget__toolbar > * + *,
.classbook-widget__history > * + *,
.classbook-widget .classroom-widget__details > * + *,
.classbook-widget .classroom-journal__panel > * + *,
.classbook-widget .classroom-entries-summary > * + * {
  margin-top: var(--cb-stack-gap);
}

.classbook-widget :is(.form-field, .classroom-journal-field, .classroom-modal-search) {
  box-sizing: border-box;
}

.classbook-widget :is(.form-field, .classroom-journal-field, .classroom-modal-search) > * + * {
  margin-top: var(--cb-item-gap);
}

.classbook-widget :is(.input, .select, .textarea) {
  min-height: var(--ui-control-min-block-size);
  padding: var(--ui-control-inset-y) var(--ui-control-inset-x);
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-copy-color);
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
}

.classbook-widget .classroom-journal-field :is(.input, .textarea) {
  border: 2px solid rgba(47, 29, 31, 0.34);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(92, 75, 75, 0.1);
}

.classbook-widget .select {
  border: 2px solid rgba(47, 29, 31, 0.28);
  background-color: rgba(255, 255, 255, 0.96);
  background-image:
    linear-gradient(var(--ui-select-adornment-divider-color), var(--ui-select-adornment-divider-color)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%232F1D1F' stroke-opacity='0.58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:
    right var(--ui-select-adornment-divider-offset-inline) center,
    right var(--ui-select-adornment-chevron-offset-inline) center;
  background-size:
    1px 1.2rem,
    0.82rem 0.56rem;
  background-repeat: no-repeat;
  padding-right: 3.65rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(92, 75, 75, 0.1);
}

.classbook-widget :is(.input, .select, .textarea):focus {
  border-color: var(--color-primary);
  box-shadow:
    var(--widget-control-shadow),
    0 0 0 3px rgba(201, 152, 167, 0.24);
}

.classbook-widget .btn:not(.btn-icon) > img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classbook-widget .btn:not(.btn-icon) {
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding-inline: var(--space-12);
  white-space: nowrap;
}

.classbook-widget .classroom-widget__workspace {
  display: flex;
  flex-direction: column;
  gap: var(--cb-shell-inset);
}

.classbook-widget .classroom-widget__workspace > .classroom-widget__section,
.classbook-widget .classroom-widget__section {
  gap: var(--cb-section-gap);
}

.classbook-widget .classroom-widget__workspace > .classroom-widget__section,
.classbook-widget .classroom-widget__section--overview,
.classbook-widget__section--history,
.classbook-widget__section--checklists,
.classbook-widget .classroom-widget__section--journal {
  padding: var(--cb-section-inset);
  border: 1px solid var(--widget-card-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-card-bg);
  box-shadow: var(--widget-card-shadow);
  backdrop-filter: var(--widget-card-filter);
  -webkit-backdrop-filter: var(--widget-card-filter);
}

.classbook-widget .classroom-widget__section-header {
  gap: var(--cb-item-gap);
  padding-bottom: var(--space-4);
}

.classbook-widget .classroom-widget__section-title {
  letter-spacing: 0.01em;
  color: var(--widget-title-color);
}

.classbook-widget .classroom-widget__section-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--cb-item-gap);
}

.classbook-widget__checklist-panel {
  display: grid;
  grid-template-columns: max-content minmax(220px, 320px);
  align-items: center;
  justify-content: start;
  gap: var(--cb-stack-gap);
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget__checklist-panel .btn {
  width: auto;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding-inline: var(--space-10);
  white-space: nowrap;
  text-align: center;
}

.classbook-widget__checklist-select {
  display: flex;
  flex-direction: column;
  gap: var(--cb-item-gap);
  margin: 0;
  min-width: 0;
}

.classbook-widget__checklist-select .select {
  width: 100%;
  min-width: 220px;
  max-width: 320px;
}

.classbook-widget .classroom-widget__section-header > div:first-child > * + * {
  margin-top: var(--cb-item-gap);
}

.classbook-widget .classroom-widget__section-copy {
  max-width: 42ch;
}

.classroom-widget__section-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.classroom-widget__section-info-wrap {
  position: relative;
  display: inline-flex;
  overflow: visible;
  z-index: 5;
}

.classroom-widget .classroom-widget__section-info-wrap .btn-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.classroom-widget .classroom-widget__section-info-wrap .btn-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.classroom-widget .classroom-management-widget__students-panel-toggle,
.classroom-widget [data-entries-summary-toggle] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
}

.classroom-widget .classroom-management-widget__students-panel-toggle img,
.classroom-widget [data-entries-summary-toggle] img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.classroom-widget__section-info-panel {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  width: min(320px, 80vw);
  padding: var(--space-10);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.98);
  border: 1px dashed var(--color-border-light);
  box-shadow: 0 18px 40px rgba(56, 35, 36, 0.18);
  z-index: 20;
}

.classroom-widget__section-info-panel.is-floating {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: min(320px, calc(100vw - 24px));
}

.classroom-widget__section-info-panel p,
.classroom-widget__section-info-panel > span {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.45;
}

.classbook-widget .form-field {
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget .classroom-widget__details {
  margin: 0;
  padding: var(--cb-panel-inset) var(--cb-panel-inset) var(--space-16);
  background: var(--widget-group-bg);
  border-color: var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
  gap: var(--cb-item-gap);
  border-radius: var(--radius-lg);
}

.classbook-widget__details-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--cb-item-gap);
}

.classbook-widget .classroom-class-badge {
  position: static;
  width: 64px;
  height: 64px;
}

.classbook-widget .classroom-class-badge__text {
  max-width: 52px;
  max-height: 52px;
  font-size: var(--fs-body-m);
}

.classbook-widget .classroom-widget__actions--below {
  margin: 0;
  padding: var(--cb-panel-inset);
}

.classbook-widget .classroom-widget__detail-row {
  align-items: center;
  min-height: 44px;
  padding: 0 var(--cb-panel-inset);
  border: 1px solid var(--widget-control-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-copy-color);
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
}

.classbook-widget .classroom-widget__details .classroom-widget__detail-grid {
  margin-top: 0;
  gap: var(--space-6);
}

.classbook-widget .classroom-widget__details .classbook-widget__details-count {
  grid-template-columns: minmax(0, 1fr);
}

.classbook-widget .classroom-widget__details .classroom-widget__detail-grid .stat-card {
  padding: var(--space-10);
}

.classbook-widget .classroom-widget__actions {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  gap: var(--cb-stack-gap);
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget .classroom-widget__actions .btn {
  width: auto !important;
  min-width: 0;
  justify-content: center;
  min-height: 44px;
  border-color: var(--widget-control-button-border-color);
  box-shadow: var(--widget-control-button-shadow);
  backdrop-filter: var(--widget-control-button-filter);
  -webkit-backdrop-filter: var(--widget-control-button-filter);
}

.classbook-widget .classroom-widget__actions .button-role__button--navigation {
  position: relative;
  overflow: hidden;
  background: var(--widget-strip-bg);
  border: 1px solid rgba(47, 29, 31, 0.18);
  color: var(--widget-strip-text);
}

.classbook-widget .classroom-widget__actions .button-role__button--navigation::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--widget-strip-highlight);
  pointer-events: none;
}

.classbook-widget .classroom-widget__actions .button-role__button--navigation > * {
  position: relative;
  z-index: 1;
}

.classbook-widget .classroom-widget__actions .button-role__button--navigation img {
  filter: brightness(0) invert(1);
}

.classbook-widget .classroom-widget__actions > * + * {
  margin-left: 0;
}

.classbook-widget .classroom-entries-select {
  margin: 0;
}

.classbook-widget .classroom-entries-summary {
  margin-top: 0;
  padding: var(--cb-panel-inset);
  background: var(--widget-group-bg);
  border-color: var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
  border-radius: var(--radius-lg);
}

.classbook-widget .classroom-entries-summary__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--cb-item-gap);
  margin: calc(var(--cb-panel-inset) * -1) calc(var(--cb-panel-inset) * -1) 0;
  padding: var(--space-12) var(--cb-panel-inset);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--widget-strip-divider-color);
  background: var(--widget-strip-bg);
  color: var(--widget-strip-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.classbook-widget .classroom-entries-summary__header .classbook-widget__history-date-wrap,
.classbook-widget .classroom-entries-summary__header .classbook-widget__history-separator {
  color: rgba(255, 255, 255, 0.78);
}

.classbook-widget .classroom-entries-summary__header [data-entries-summary-toggle] {
  color: var(--widget-strip-text);
}

.classbook-widget .classroom-entries-summary__header [data-entries-summary-toggle] img {
  filter: brightness(0) invert(1);
}

.classbook-widget .classroom-entries-summary__header .select {
  border-color: rgba(47, 29, 31, 0.32);
  background-color: var(--color-surface);
  color: var(--color-text-strong);
}

.classbook-widget .classroom-entries-summary:has([data-entries-summary-body][hidden]),
.classbook-widget .classroom-entries-summary:has([data-entries-summary-toggle][aria-expanded="false"]) {
  padding-bottom: 0;
}

.classbook-widget .classroom-entries-summary:has([data-entries-summary-body][hidden]) .classroom-entries-summary__header,
.classbook-widget .classroom-entries-summary:has([data-entries-summary-toggle][aria-expanded="false"]) .classroom-entries-summary__header {
  border-radius: var(--radius-lg);
  border-bottom-color: transparent;
}

.classbook-widget__history-title-text {
  margin: 0;
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  white-space: nowrap;
}

.classbook-widget__history-title-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.classbook-widget__history-date-wrap {
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
  white-space: nowrap;
}

.classbook-widget__history-date {
  white-space: nowrap;
}

.classbook-widget__history-separator {
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
  white-space: nowrap;
}

.classbook-widget .classroom-entries-summary__grid {
  gap: var(--cb-stack-gap);
}

.classbook-widget .classroom-entries-summary__grid .stat-card {
  padding: var(--space-12);
  border-radius: var(--radius-md);
}

.classbook-widget .classroom-entries-summary__actions {
  padding-top: var(--cb-stack-gap);
}

.classbook-widget__history-header-main {
  display: grid;
  grid-template-columns: auto auto minmax(180px, 220px);
  align-items: center;
  gap: var(--space-10);
  flex: 1 1 auto;
  min-width: 0;
}

.classbook-widget__history-select {
  max-width: 280px;
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget__history-inline-select {
  margin: 0;
  min-width: 180px;
  width: 100%;
}

.classbook-widget__history-inline-select .classroom-entries-select {
  width: 100%;
}

.classbook-widget .classroom-journal {
  margin-top: 0;
}

.classbook-widget .classroom-journal__panel {
  gap: var(--cb-panel-gap);
  padding: var(--cb-panel-inset);
  background: var(--widget-group-bg);
  border-color: var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
  border-radius: var(--radius-lg);
}

.classbook-widget .classroom-journal__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cb-item-gap);
  margin: calc(var(--cb-panel-inset) * -1) calc(var(--cb-panel-inset) * -1) 0;
  padding: var(--space-12) var(--cb-panel-inset);
  min-height: 76px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--widget-strip-divider-color);
  background: var(--widget-strip-bg);
  color: var(--widget-strip-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.classbook-widget .classroom-journal__heading {
  display: flex;
  flex-direction: column;
  gap: var(--cb-item-gap);
  width: 100%;
  min-width: 0;
}

.classbook-widget .classroom-journal__header h4 {
  margin: 0;
  color: var(--widget-strip-text);
  font-size: var(--fs-body-l);
  line-height: 1.1;
}

.classbook-widget .classroom-journal__header .btn-icon {
  color: var(--widget-strip-text);
}

.classbook-widget .classroom-journal__header .btn-icon img {
  filter: brightness(0) invert(1);
}

.classbook-widget__flow-status {
  margin: 0;
  min-block-size: var(--ui-control-min-block-size);
  padding: var(--space-10) var(--space-14);
  border: 1px solid var(--widget-control-border-color);
  border-radius: var(--radius-md);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
  line-height: 1.4;
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
}

.classbook-widget__journal-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.classbook-widget .classroom-journal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cb-item-gap);
}

.classbook-widget__flow-actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cb-stack-gap);
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget__flow-actions-group--primary {
  grid-template-columns: none;
}

.classbook-widget__flow-actions-group--secondary {
  grid-template-columns: none;
}

.classbook-widget__flow-actions-group--secondary:empty,
.classbook-widget__flow-actions-group--secondary:not(:has(.btn:not([hidden]))) {
  display: none;
}

.classbook-widget__flow-actions-group--feedback {
  grid-template-columns: none;
}

.classbook-widget .classroom-journal__actions .btn {
  width: auto;
  justify-content: center;
  min-height: 44px;
  border-color: var(--widget-control-button-border-color);
  box-shadow: var(--widget-control-button-shadow);
  backdrop-filter: var(--widget-control-button-filter);
  -webkit-backdrop-filter: var(--widget-control-button-filter);
}

.classbook-widget__save-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--cb-stack-gap);
}

.classbook-widget__save-actions .btn {
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding-inline: var(--space-14);
  justify-content: center;
}

.classbook-widget__save-actions .btn[hidden] {
  display: none;
}

.classbook-widget .btn.button-role__button--edit {
  background: var(--widget-control-bg);
  border-color: var(--widget-control-button-border-color);
  color: var(--widget-copy-color);
  box-shadow: var(--widget-control-button-shadow);
}

.classbook-widget .btn.button-role__button--cancel {
  background: transparent;
  border-color: var(--color-base-500);
  color: var(--color-base-700);
  box-shadow: none;
}

.classbook-widget .btn.button-role__button--utility {
  background: var(--color-base-100);
  border-color: var(--color-base-500);
  color: var(--color-base-800);
  box-shadow: 3px 3px 0 var(--color-base-500);
}

.classbook-widget .btn.button-role__button--save {
  background: var(--color-base-750);
  border-color: #5f4b4e;
  box-shadow: 3px 3px 0 #5f4b4e;
  color: var(--color-base-0);
}

.classbook-widget .btn.button-role__button--save img,
.classbook-widget .btn.button-role__button--add img {
  filter: brightness(0) invert(1);
}

.classbook-widget .btn.button-role__button--add {
  background: var(--color-base-400);
  border-color: var(--color-base-700);
  color: var(--color-base-0);
  box-shadow: 3px 3px 0 var(--color-base-700);
}

.classbook-widget .btn.button-role__button--danger {
  background: #fff2f0;
  border-color: #9f3930;
  color: #7f3128;
  box-shadow: 3px 3px 0 #9f3930;
}

.classbook-widget .btn.button-role__button--assist {
  background: var(--color-base-200);
  border-color: var(--color-base-600);
  color: var(--color-base-850);
  box-shadow: 3px 3px 0 var(--color-base-600);
}

.classbook-widget .btn.button-role__button--choice {
  background: #fff8ea;
  border-color: #b98227;
  color: #6f4710;
  box-shadow: 3px 3px 0 #b98227;
}

.classbook-widget .btn.button-role__button--visibility {
  background: transparent;
  border-color: transparent;
  color: var(--color-base-700);
  box-shadow: none;
}

.classbook-widget .classroom-journal__actions .btn[data-classroom-feedback-toggle][disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.classbook-widget__review-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  gap: var(--cb-stack-gap);
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget__review-actions .classbook-widget__flow-actions-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.classbook-widget__review-actions .classbook-widget__flow-actions--entry-setup,
.classbook-widget__review-actions .classbook-widget__flow-actions--feedback {
  min-width: max-content;
}

.classbook-widget__review-actions .classbook-widget__flow-actions-group--secondary {
  grid-column: 1 / -1;
}

.classbook-widget__journal-form-group {
  display: grid;
  gap: var(--cb-panel-gap);
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget__journal-grid {
  display: grid;
  gap: var(--cb-panel-gap);
}

.classbook-widget__journal-grid--compact {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.classbook-widget__journal-grid--topic {
  grid-template-columns: minmax(0, 1fr);
}

.classbook-widget__journal-grid--notes {
  grid-template-columns: minmax(0, 1fr);
}

.classbook-widget__journal-grid .classroom-journal-field {
  margin: 0;
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget__journal-form-group .classroom-journal-field {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.classbook-widget .student-field-toggle__inner,
.classbook-widget .student-card {
  box-shadow: var(--widget-group-shadow);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  border-color: var(--widget-group-border-color);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget .student-card {
  padding: var(--cb-panel-inset);
}

.classbook-widget .student-field-toggle__inner {
  padding: var(--cb-panel-inset);
  gap: var(--cb-item-gap);
}

.classbook-widget .classroom-widget__detail-grid {
  gap: var(--cb-stack-gap);
}

.classbook-widget .classroom-widget__detail-grid .stat-card,
.classbook-widget .classroom-entries-summary__grid .stat-card {
  padding: var(--cb-panel-inset);
  border-radius: var(--radius-lg);
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-copy-color);
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
}

.classbook-widget .classroom-modal-search {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--cb-item-gap);
  padding: var(--cb-panel-inset);
  border: 1px solid var(--widget-group-border-color);
  border-radius: calc(var(--radius-pill) + 4px);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classbook-widget .classroom-modal-search .input {
  width: 100%;
  border-radius: var(--radius-pill);
}

.classbook-widget .classroom-widget__entry {
  gap: var(--cb-section-gap);
}

.assistant-widget {
  background: var(--widget-shell-bg);
  border: 1px solid var(--widget-shell-border-color);
  box-shadow: var(--widget-shell-shadow);
}

.assistant-widget .accent-strip {
  background: var(--widget-strip-bg);
  border-bottom: 1px solid var(--widget-strip-divider-color);
  overflow: visible;
}

.assistant-widget .accent-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--widget-strip-highlight);
  pointer-events: none;
}

.assistant-widget .accent-title,
.assistant-widget .accent-title h2 {
  color: var(--widget-strip-text);
}

.assistant-widget .accent-title .muted {
  color: var(--widget-strip-meta);
}

.assistant-widget .accent-avatar {
  background: var(--widget-avatar-bg);
  border: 1px solid var(--widget-avatar-border-color);
  box-shadow: var(--widget-avatar-shadow);
  backdrop-filter: var(--widget-avatar-filter);
  -webkit-backdrop-filter: var(--widget-avatar-filter);
}

.assistant-widget .accent-avatar--assistant::before {
  content: '';
  width: 32px;
  height: 32px;
  background-color: var(--widget-icon-color);
  mask: url('/public/assets/icons/edfy/robot.svg') no-repeat center / contain;
  -webkit-mask: url('/public/assets/icons/edfy/robot.svg') no-repeat center / contain;
}

.assistant-widget .accent-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  background: var(--widget-content-bg);
}

.assistant-widget .accent-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.assistant-widget .accent-headline {
  color: var(--widget-title-color);
}

.assistant-widget .accent-subtitle {
  color: var(--widget-meta-color);
  max-width: 44ch;
}

.assistant-widget__summary,
.assistant-widget__chat,
.assistant-widget__memory {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-16);
  border: 1px solid var(--widget-card-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-card-bg);
  box-shadow: var(--widget-card-shadow);
  backdrop-filter: var(--widget-card-filter);
  -webkit-backdrop-filter: var(--widget-card-filter);
}

.assistant-widget__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.assistant-widget .stat-card {
  min-height: 0;
  padding: var(--space-12);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.assistant-widget__panel-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.assistant-widget__panel-head .school-section-title,
.assistant-widget__panel-head .muted {
  margin: 0;
}

.assistant-widget__panel-head .muted {
  color: var(--widget-meta-color);
}

.assistant-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-height: 220px;
  max-height: 280px;
  overflow: auto;
  padding: var(--space-16);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.assistant-chat__message {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 92%;
}

.assistant-chat__message--user {
  align-self: flex-end;
}

.assistant-chat__message--assistant {
  align-self: flex-start;
}

.assistant-chat__meta {
  font-size: var(--fs-caption);
  color: var(--widget-meta-color);
}

.assistant-chat__bubble {
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-lg);
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-copy-color);
  white-space: pre-wrap;
}

.assistant-chat__message--assistant .assistant-chat__bubble {
  background: var(--widget-group-bg);
  border-color: var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
}

.assistant-chat__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.assistant-chat__source-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-12);
  border-radius: 999px;
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-meta-color);
  font-size: var(--fs-caption);
}

.assistant-chat__suggestions {
  margin: 0;
  padding-left: 18px;
  color: var(--widget-meta-color);
  font-size: var(--fs-caption);
}

.assistant-widget__composer,
.assistant-widget__memory-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.assistant-widget__field {
  width: 100%;
  gap: var(--space-8);
}

.assistant-widget .btn:not(.btn-icon),
.assistant-widget .input {
  box-sizing: border-box;
  background: var(--widget-control-bg);
  color: var(--widget-copy-color);
  border: 1px solid var(--widget-control-border-color);
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
}

.assistant-widget .btn:not(.btn-icon) {
  border-color: var(--widget-control-button-border-color);
  box-shadow: var(--widget-control-button-shadow);
  backdrop-filter: var(--widget-control-button-filter);
  -webkit-backdrop-filter: var(--widget-control-button-filter);
}

.assistant-widget .input {
  width: 100%;
  box-shadow: var(--widget-control-shadow);
}

.assistant-memory__empty,
.assistant-widget [data-assistant-status] {
  margin: 0;
}

.assistant-memory__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.assistant-memory__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-14);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.assistant-memory__item-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  align-items: flex-start;
}

.assistant-memory__item-title-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.assistant-memory__item-title {
  color: var(--widget-title-color);
}

.assistant-memory__item-date {
  color: var(--widget-meta-color);
  font-size: var(--fs-caption);
}

.assistant-memory__item-copy {
  margin: 0;
  color: var(--widget-copy-color);
}

.assistant-memory__delete {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .assistant-widget__stats {
    grid-template-columns: 1fr;
  }

  .assistant-chat__message {
    max-width: 100%;
  }

  .assistant-memory__item-head {
    flex-direction: column;
  }
}

.classroom-management-widget {
  background: var(--widget-shell-bg);
  border: 1px solid var(--widget-shell-border-color);
  box-shadow: var(--widget-shell-shadow);
}

.classroom-management-widget .accent-strip {
  background: var(--widget-strip-bg);
  border-bottom: 1px solid var(--widget-strip-divider-color);
  overflow: visible;
}

.classroom-management-widget .accent-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--widget-strip-highlight);
  pointer-events: none;
}

.classroom-management-widget .accent-title,
.classroom-management-widget .accent-title h2 {
  color: var(--widget-strip-text);
}

.classroom-management-widget .accent-title .muted {
  color: var(--widget-strip-meta);
}

.classroom-management-widget .accent-avatar {
  background: var(--widget-avatar-bg);
  border: 1px solid var(--widget-avatar-border-color);
  box-shadow: var(--widget-avatar-shadow);
  backdrop-filter: var(--widget-avatar-filter);
  -webkit-backdrop-filter: var(--widget-avatar-filter);
}

.classroom-management-widget .accent-avatar--classroom::before {
  background-color: var(--widget-icon-color);
}

.classroom-management-widget .accent-headline {
  font-size: clamp(24px, 1.9vw, 34px);
  line-height: 0.98;
  max-width: 14ch;
  color: var(--widget-title-color);
}

.classroom-management-widget .accent-content {
  gap: var(--space-20);
  background: var(--widget-content-bg);
}

.classroom-management-widget .accent-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-management-widget .accent-subtitle {
  max-width: 40ch;
  font-size: var(--fs-body-s);
  color: var(--widget-meta-color);
}

.classroom-management-widget--has-selection .accent-content {
  gap: var(--space-16);
}

.classroom-management-widget--has-selection .accent-intro {
  gap: var(--space-6);
}

.classroom-management-widget--has-selection .accent-headline {
  font-size: clamp(22px, 1.6vw, 28px);
  max-width: 16ch;
}

.classroom-management-widget--has-selection .accent-subtitle {
  max-width: 42ch;
  font-size: var(--fs-caption);
}

.classroom-management-widget__overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border: 1px solid var(--widget-card-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-card-bg);
  box-shadow: var(--widget-card-shadow);
  backdrop-filter: var(--widget-card-filter);
  -webkit-backdrop-filter: var(--widget-card-filter);
}

.classroom-management-widget--has-selection .classroom-management-widget__overview {
  gap: var(--space-12);
  padding: var(--space-14) var(--space-16);
}

.classroom-management-widget__overview-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.classroom-management-widget__overview-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.classroom-management-widget__overview-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
}

.classroom-management-widget .school-section-title {
  margin: 0;
}

.classroom-management-widget .classroom-widget__totals {
  margin: 0;
}

.classroom-management-widget .stat-card {
  min-height: 0;
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classroom-management-widget .classroom-widget__totals .stat-card {
  min-height: 96px;
  padding: var(--space-12);
}

.classroom-management-widget--has-selection .classroom-widget__totals .stat-card {
  min-height: 82px;
  padding: var(--space-10) var(--space-12);
}

.classroom-management-widget__toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: end;
}

.classroom-management-widget--has-selection .classroom-management-widget__toolbar {
  gap: var(--space-10);
}

.classroom-management-widget .btn:not(.btn-icon),
.classroom-management-widget .select,
.classroom-management-widget .input {
  min-height: 44px;
  box-sizing: border-box;
  background: var(--widget-control-bg);
  border: 1px solid var(--widget-control-border-color);
  color: var(--widget-copy-color);
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
}

.classroom-management-widget .btn:not(.btn-icon) {
  padding: 12px 18px !important;
  border-color: var(--widget-control-button-border-color);
  box-shadow: var(--widget-control-button-shadow);
  backdrop-filter: var(--widget-control-button-filter);
  -webkit-backdrop-filter: var(--widget-control-button-filter);
}

.classroom-management-widget .btn:not(.btn-icon) > img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classroom-management-widget .button-role__button--edit {
  background: var(--widget-control-bg);
  border: 1px solid var(--widget-control-button-border-color);
  box-shadow: var(--widget-control-button-shadow);
  color: var(--widget-copy-color);
}

.classroom-management-widget .button-role__button--save {
  background: var(--color-base-750);
  border: 1px solid #5f4b4e;
  box-shadow: 3px 3px 0 #5f4b4e;
  color: var(--color-base-0);
}

.classroom-management-widget .button-role__button--save img,
.classroom-management-widget .button-role__button--add img,
.classroom-management-widget .button-role__button--navigation img,
.classroom-management-widget .button-role__button--assist img {
  filter: brightness(0) invert(1);
}

.classroom-management-widget .button-role__button--navigation {
  position: relative;
  overflow: hidden;
  background: var(--widget-strip-bg);
  border: 1px solid rgba(47, 29, 31, 0.18);
  box-shadow: var(--widget-control-button-shadow);
  color: var(--widget-strip-text);
}

.classroom-management-widget .button-role__button--navigation::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--widget-strip-highlight);
  pointer-events: none;
}

.classroom-management-widget .button-role__button--navigation > * {
  position: relative;
  z-index: 1;
}

.classroom-management-widget .button-role__button--add {
  background: var(--color-base-400);
  border: 1px solid var(--color-base-700);
  color: #fff;
  box-shadow: 3px 3px 0 var(--color-base-700);
}

.classroom-management-widget .button-role__button--remove {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-base-400);
  color: var(--color-base-700);
  box-shadow: 3px 3px 0 var(--color-base-400);
}

.classroom-management-widget .button-role__button--cancel {
  background: transparent;
  border: 1px solid var(--color-base-500);
  color: var(--color-base-700);
  box-shadow: none;
}

.classroom-management-widget .button-role__button--danger {
  background: #fff2f0;
  border: 1px solid #9f3930;
  color: #7f3128;
  box-shadow: 3px 3px 0 #9f3930;
}

.classroom-management-widget .button-role__button--import {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-base-600);
  color: var(--color-base-850);
  box-shadow: 3px 3px 0 var(--color-base-600);
}

.classroom-management-widget .button-role__button--assist {
  background: var(--color-base-850);
  border: 1px solid var(--color-base-950);
  color: var(--color-base-0);
  box-shadow: 3px 3px 0 var(--color-base-950);
}

.classroom-management-widget .button-role__button--choice {
  background: #fff8ea;
  border: 1px solid #b98227;
  color: #6f4710;
  box-shadow: 3px 3px 0 #b98227;
}

.classroom-management-widget .button-role__button--visibility:not(.btn-icon) {
  background: transparent;
  border: 1px solid var(--color-base-500);
  color: var(--color-base-700);
  box-shadow: none;
}

.classroom-management-widget .button-role__button--pager-prev,
.classroom-management-widget .button-role__button--pager-next {
  border: 1px solid #5f4b4e;
  box-shadow: 3px 3px 0 #5f4b4e;
}

.classroom-management-widget .button-role__button--pager-prev {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-strong);
}

.classroom-management-widget .button-role__button--pager-next {
  background: var(--color-base-700);
  color: var(--color-base-0);
}

.classroom-management-widget .button-role__pager-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.classroom-management-widget .button-role__pager-icon img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.classroom-management-widget .button-role__button--pager-prev .button-role__pager-icon img {
  transform: rotate(180deg);
}

.classroom-management-widget .button-role__button--pager-next .button-role__pager-icon img {
  filter: brightness(0) invert(1);
}

.classroom-management-widget .btn.button-role__button--edit {
  background: var(--widget-control-bg);
  border-color: var(--widget-control-button-border-color);
  color: var(--widget-copy-color);
}

.classroom-management-widget .btn.button-role__button--save {
  background: var(--color-base-750);
  border-color: #5f4b4e;
  color: var(--color-base-0);
  box-shadow: 3px 3px 0 #5f4b4e;
}

.classroom-management-widget .btn.button-role__button--navigation {
  background: var(--widget-strip-bg);
  border-color: rgba(47, 29, 31, 0.18);
  color: var(--widget-strip-text);
}

.classroom-management-widget .btn.button-role__button--add {
  background: var(--color-base-400);
  border-color: var(--color-base-700);
  color: #fff;
  box-shadow: 3px 3px 0 var(--color-base-700);
}

.classroom-management-widget .btn.button-role__button--remove {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--color-base-400);
  color: var(--color-base-700);
  box-shadow: 3px 3px 0 var(--color-base-400);
}

.classroom-management-widget .btn.button-role__button--cancel {
  background: transparent;
  border-color: var(--color-base-500);
  color: var(--color-base-700);
  box-shadow: none;
}

.classroom-management-widget .btn.button-role__button--danger {
  background: #fff2f0;
  border-color: #9f3930;
  color: #7f3128;
  box-shadow: 3px 3px 0 #9f3930;
}

.classroom-management-widget .btn.button-role__button--import {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--color-base-600);
  color: var(--color-base-850);
  box-shadow: 3px 3px 0 var(--color-base-600);
}

.classroom-management-widget .btn.button-role__button--assist {
  background: var(--color-base-850);
  border-color: var(--color-base-950);
  color: var(--color-base-0);
  box-shadow: 3px 3px 0 var(--color-base-950);
}

.classroom-management-widget .btn.button-role__button--choice {
  background: #fff8ea;
  border-color: #b98227;
  color: #6f4710;
  box-shadow: 3px 3px 0 #b98227;
}

.classroom-management-widget .select {
  border: 2px solid rgba(47, 29, 31, 0.28);
  background-color: rgba(255, 255, 255, 0.96);
  background-image:
    linear-gradient(var(--ui-select-adornment-divider-color), var(--ui-select-adornment-divider-color)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%232F1D1F' stroke-opacity='0.58' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:
    right var(--ui-select-adornment-divider-offset-inline) center,
    right var(--ui-select-adornment-chevron-offset-inline) center;
  background-size:
    1px 1.2rem,
    0.82rem 0.56rem;
  background-repeat: no-repeat;
  padding: 12px 52px 12px 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(92, 75, 75, 0.1);
}

.classroom-management-widget .input {
  padding: 12px 18px !important;
  box-shadow: var(--widget-control-shadow);
}

.classroom-management-widget .stats-grid {
  gap: 14px !important;
  padding: 18px !important;
}

.classroom-management-widget .stat-card,
.classroom-management-widget .classroom-widget__detail-row,
.classroom-management-widget .classroom-widget__students-health-item,
.classroom-management-widget .classroom-widget__student-detail-item,
.classroom-management-widget .classroom-student-row,
.classroom-management-widget__archive-summary,
.classroom-management-widget .classroom-edit-context__chip,
.classroom-management-widget .badge {
  box-sizing: border-box;
}

.classroom-management-widget .classroom-widget__create-trigger,
.classroom-management-widget .classroom-widget__select,
.classroom-management-widget .classroom-widget__archive {
  margin: 0;
}

.classroom-management-widget .classroom-widget__totals,
.classroom-management-widget .classroom-widget__create-trigger,
.classroom-management-widget .classroom-widget__actions,
.classroom-management-widget .classroom-widget__section-actions,
.classroom-management-widget .classroom-widget__detail-grid,
.classroom-management-widget .classroom-widget__students-health,
.classroom-management-widget .classroom-widget__students-tools,
.classroom-management-widget .classroom-widget__students-overview,
.classroom-management-widget .classroom-widget__student-detail-grid,
.classroom-management-widget .classroom-widget__student-detail-status,
.classroom-management-widget .classroom-widget__archive-controls,
.classroom-management-widget .classroom-edit-context__chips {
  gap: max(var(--space-10), 10px);
}

.classroom-management-widget .classroom-widget__workspace {
  gap: var(--space-20);
}

.classroom-management-widget .classroom-widget__create-trigger .btn {
  flex: 1 1 180px;
  justify-content: center;
  padding-inline: var(--space-16);
}

.classroom-management-widget .classroom-widget__section {
  gap: var(--space-16);
  padding: var(--space-24);
  border: 1px solid var(--widget-card-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-card-bg);
  box-shadow: var(--widget-card-shadow);
  backdrop-filter: var(--widget-card-filter);
  -webkit-backdrop-filter: var(--widget-card-filter);
}

.classroom-management-widget .classroom-widget__section-header {
  gap: var(--space-12);
}

.classroom-management-widget .classroom-widget__section--overview {
  gap: var(--space-16);
}

.classroom-management-widget__section-select {
  width: 100%;
  max-width: none;
  align-self: stretch;
  padding: var(--space-16);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classroom-management-widget__section-select span {
  display: block;
  padding-inline: 2px;
  font-size: var(--fs-caption);
  color: var(--widget-meta-color);
  text-transform: lowercase;
}

.classroom-management-widget__section-select .select {
  width: 100%;
  margin-top: var(--space-8);
}

.classroom-management-widget__global-student-search {
  position: relative;
  width: 100%;
  max-width: none;
  align-self: stretch;
  padding: var(--space-16);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classroom-management-widget__global-student-search span {
  display: block;
  padding-inline: 2px;
  font-size: var(--fs-caption);
  color: var(--widget-meta-color);
  text-transform: lowercase;
}

.classroom-management-widget__global-student-search .input {
  width: 100%;
  margin-top: var(--space-8);
}

.classroom-management-widget__global-student-results {
  position: fixed;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: auto;
  padding: var(--space-8);
  border: 1px solid var(--widget-control-border-color);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(47, 29, 31, 0.16);
}

.classroom-management-widget__global-student-results[hidden] {
  display: none !important;
}

.classroom-management-widget__global-student-result,
.classroom-management-widget__global-student-empty {
  width: 100%;
  min-height: 44px;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--widget-copy-color);
  text-align: left;
}

.classroom-management-widget__global-student-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: pointer;
}

.classroom-management-widget__global-student-result:hover,
.classroom-management-widget__global-student-result:focus-visible {
  background: var(--widget-control-bg);
  border-color: var(--widget-control-border-color);
}

.classroom-management-widget__global-student-result strong,
.classroom-management-widget__global-student-result span,
.classroom-management-widget__global-student-empty {
  font-size: var(--fs-body-s);
}

.classroom-management-widget__global-student-result span,
.classroom-management-widget__global-student-empty {
  color: var(--widget-meta-color);
}

.classroom-management-widget .classroom-widget__section--students {
  --cm-students-inset: var(--space-24);
  --cm-students-gap: var(--space-20);
  --cm-students-group-gap: var(--space-16);
  --cm-students-item-gap: var(--space-12);
  --cm-students-pill-y: var(--space-16);
  --cm-students-pill-x: var(--space-20);
  padding: var(--space-24);
  gap: var(--cm-students-gap);
}

.classroom-management-widget .classroom-widget__section--students > .classroom-widget__section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--cm-students-group-gap) var(--cm-students-gap);
  align-items: start;
}

.classroom-management-widget .classroom-widget__section--students > .classroom-widget__section-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--cm-students-item-gap);
  max-width: 34ch;
}

.classroom-management-widget__students-title-block {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  max-width: none;
}

.classroom-management-widget__students-panel-toggle {
  margin-left: var(--space-2);
}

.classroom-management-widget__students-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--cm-students-gap);
}

.classroom-management-widget__students-panel-body[hidden] {
  display: none !important;
}

.classroom-management-widget .classroom-widget__section--students .classroom-widget__section-copy {
  margin: 0;
  max-width: 34ch;
}

.classroom-management-widget .classroom-widget__section-actions {
  gap: var(--space-12);
}

.classroom-management-widget .classroom-widget__section--students .classroom-widget__section-actions {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--cm-students-group-gap);
  width: min(320px, 100%);
}

.classroom-management-widget .classroom-widget__section-actions .btn,
.classroom-management-widget .classroom-widget__student-detail-header .btn {
  min-height: 44px;
  padding-inline: var(--space-18);
}

.classroom-management-widget .classroom-widget__section--students .classroom-widget__section-actions .btn {
  width: 100%;
  justify-content: center;
}

.classroom-management-widget .classroom-widget__details {
  --cm-card-inset: var(--space-24);
  --cm-card-gap: var(--space-20);
  --cm-group-gap: var(--space-16);
  --cm-item-gap: var(--space-12);
  --cm-pill-pad-y: var(--space-16);
  --cm-pill-pad-x: var(--space-20);
  margin: 0;
  padding: var(--cm-card-inset);
  background: var(--widget-group-bg);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
  display: flex;
  flex-direction: column;
  gap: var(--cm-card-gap);
}

.classroom-management-widget__details-intro {
  display: flex;
  flex-direction: column;
  gap: var(--cm-item-gap);
}

.classroom-management-widget__details-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.classroom-management-widget__details-intro .classroom-widget__section-copy {
  margin: 0;
  max-width: 42ch;
}

.classroom-management-widget__details-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--cm-card-gap);
  align-items: start;
}

.classroom-management-widget__details-fields {
  display: flex;
  flex-direction: column;
  gap: var(--cm-group-gap);
}

.classroom-management-widget .classroom-class-badge {
  position: static;
  width: 64px;
  height: 64px;
  margin: var(--space-2) 0 0;
  background: var(--widget-avatar-bg);
  border: 1px solid var(--widget-avatar-border-color);
  box-shadow: var(--widget-avatar-shadow);
  backdrop-filter: var(--widget-avatar-filter);
  -webkit-backdrop-filter: var(--widget-avatar-filter);
}

.classroom-management-widget .classroom-class-badge__text {
  max-width: 48px;
  max-height: 48px;
  font-size: var(--fs-body-m);
  color: var(--widget-accent-color);
}

.classroom-management-widget .classroom-widget__detail-row {
  align-items: center;
  min-height: 58px;
  padding: var(--cm-pill-pad-y) var(--cm-pill-pad-x) !important;
  border-radius: var(--radius-pill);
  background: var(--widget-control-bg);
  border: 1px solid var(--widget-control-border-color);
  box-shadow: var(--widget-control-shadow);
  color: var(--widget-copy-color);
}

.classroom-management-widget .classroom-widget__detail-row > .muted {
  flex: 0 0 auto;
  padding-right: var(--space-16);
}

.classroom-management-widget .classroom-widget__detail-row > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.classroom-management-widget .classroom-widget__detail-row .muted {
  font-size: var(--fs-caption);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--widget-meta-color);
}

.classroom-management-widget .classroom-widget__detail-row--stack {
  align-items: flex-start;
  gap: var(--cm-item-gap);
}

.classroom-management-widget__detail-grid {
  margin-top: 0;
  gap: var(--cm-group-gap) !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.classroom-management-widget .classroom-widget__detail-grid .stat-card {
  min-height: 92px;
  padding: var(--cm-pill-pad-y) var(--cm-pill-pad-x) !important;
  background: var(--widget-control-bg);
  border: 1px solid var(--widget-control-border-color);
  box-shadow: var(--widget-control-shadow);
}

.classroom-management-widget .classroom-widget__actions--below {
  margin: 0;
}

.classroom-management-widget .classroom-widget__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.classroom-management-widget .classroom-widget__mail-all[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}

.classroom-management-widget .classroom-widget__actions .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px !important;
  backdrop-filter: var(--widget-control-button-filter);
  -webkit-backdrop-filter: var(--widget-control-button-filter);
}

.classroom-management-widget__archive-disclosure {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--widget-group-border-color);
  box-shadow: none;
}

.classroom-management-widget__archive-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  width: fit-content;
  min-height: 30px;
  margin: 10px 0 0;
  padding: 0 !important;
  cursor: pointer;
}

.classroom-management-widget--has-selection .classroom-management-widget__archive-summary {
  margin-top: var(--space-10);
}

.classroom-management-widget__archive-summary::-webkit-details-marker {
  display: none;
}

.classroom-management-widget .classroom-management-widget__archive-button.btn:not(.btn-icon) {
  --btn-min-height: 32px;
  --btn-pad-y: 5px;
  --btn-pad-x: 12px;
  min-height: 32px;
  height: 32px;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  gap: var(--space-4);
  font-size: var(--fs-caption);
}

.classroom-management-widget .classroom-management-widget__archive-button.btn:not(.btn-icon) img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classroom-management-widget__archive-info {
  margin-left: 2px;
}

.classroom-management-widget__archive-disclosure .classroom-widget__archive-controls {
  padding: var(--space-10) 0 0;
}

.classroom-management-widget__archive-disclosure .classroom-widget__archive-filters,
.classroom-management-widget__archive-disclosure .classroom-widget__archive-empty,
.classroom-management-widget__archive-disclosure .classroom-widget__archive-preview {
  margin-left: 0;
  margin-right: 0;
}

.classroom-management-widget__students-meta {
  display: flex;
  flex-direction: column;
  gap: var(--cm-students-item-gap);
}

.classroom-management-widget .classroom-widget__students-summary {
  font-size: var(--fs-body-s);
  padding-inline: var(--space-2);
}

.classroom-management-widget .classroom-widget__students-health {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--cm-students-group-gap);
}

.classroom-management-widget .classroom-widget__students-health-item,
.classroom-management-widget .classroom-widget__student-detail {
  background: var(--widget-group-bg);
  border: 1px solid var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classroom-management-widget .classroom-widget__students-health-item {
  padding: var(--cm-students-pill-y) var(--cm-students-pill-x) !important;
}

.classroom-management-widget .classroom-widget__students-tools {
  padding: var(--cm-students-inset) !important;
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  border: 1px solid var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--cm-students-group-gap) !important;
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classroom-management-widget .classroom-widget__students-overview {
  display: flex;
  flex-direction: column;
  gap: var(--cm-students-group-gap);
}

.classroom-management-widget .classroom-widget__students-search,
.classroom-management-widget .classroom-widget__students-sort {
  min-width: 0;
  padding: var(--cm-students-group-gap);
  border-radius: var(--radius-lg);
  background: var(--widget-control-bg);
  border: 1px solid var(--widget-control-border-color);
  box-shadow: var(--widget-control-shadow);
}

.classroom-management-widget .classroom-modal-search {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--cm-students-item-gap);
}

.classroom-management-widget .classroom-modal-search span,
.classroom-management-widget .classroom-widget__students-sort span {
  display: block;
  padding-inline: 2px;
}

.classroom-management-widget .classroom-modal-search .input,
.classroom-management-widget .classroom-widget__students-sort .select {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-pill);
}

.classroom-widget__archive[hidden] {
  display: none !important;
}

.classroom-management-widget .classroom-student-row {
  gap: var(--cm-students-group-gap);
  padding: var(--cm-students-pill-y) var(--cm-students-pill-x) !important;
  border: 1px solid var(--widget-control-border-color);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: none;
  backdrop-filter: var(--widget-control-filter);
  -webkit-backdrop-filter: var(--widget-control-filter);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.classroom-management-widget .classroom-student-photo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--widget-control-border-color);
  background: rgba(255, 255, 255, 0.86);
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  text-transform: lowercase;
}

.classroom-management-widget .classroom-student-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.classroom-management-widget .classroom-student-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.classroom-management-widget .classroom-student-row__actions--notenkompass {
  flex: 0 0 auto;
  align-self: flex-start;
  flex-wrap: nowrap;
}

.classroom-management-widget .classroom-student-notenkompass,
.classroom-management-widget .classroom-student-mail {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(47, 29, 31, 0.12);
  box-shadow: var(--widget-control-shadow);
  transition: none;
}

.classroom-management-widget .classroom-student-notenkompass img,
.classroom-management-widget .classroom-student-mail img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  transition: transform 140ms ease;
}

.classroom-management-widget .classroom-student-notenkompass:hover img,
.classroom-management-widget .classroom-student-notenkompass:focus-visible img,
.classroom-management-widget .classroom-student-mail:hover img,
.classroom-management-widget .classroom-student-mail:focus-visible img {
  transform: scale(1.12);
}

.classroom-management-widget .classroom-student-mail[disabled],
.classroom-management-widget .classroom-student-mail[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.classroom-management-widget .classroom-student-row:hover,
.classroom-management-widget .classroom-student-row:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--widget-control-button-shadow);
}

.classroom-management-widget__students-hint {
  margin: 0;
  padding: var(--cm-students-inset) !important;
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg);
  border: 1px solid var(--widget-group-border-color);
  box-shadow: var(--widget-group-shadow);
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
  backdrop-filter: var(--widget-group-filter);
  -webkit-backdrop-filter: var(--widget-group-filter);
}

.classroom-management-widget .classroom-widget__student-detail {
  padding: var(--cm-students-inset) !important;
  border-radius: var(--radius-lg);
  gap: var(--cm-students-group-gap);
}

.classroom-management-widget .classroom-widget__student-detail-item {
  background: var(--widget-control-bg);
  border: 1px solid var(--widget-control-border-color);
  border-radius: var(--radius-pill);
  padding: var(--cm-students-pill-y) var(--cm-students-pill-x) !important;
  box-shadow: var(--widget-control-shadow);
}

.classroom-management-widget .classroom-student-info {
  gap: var(--cm-students-item-gap);
}

.classroom-management-widget .classroom-student-status-list {
  gap: var(--cm-students-item-gap) !important;
}

.classroom-management-widget .classroom-student-status {
  padding: 6px 12px !important;
}

.classroom-management-widget .classroom-widget__create-trigger,
.classroom-management-widget .classroom-widget__actions,
.classroom-management-widget .classroom-widget__section-actions,
.classroom-management-widget .classroom-widget__detail-grid,
.classroom-management-widget .classroom-widget__students-health,
.classroom-management-widget .classroom-widget__students-tools,
.classroom-management-widget .classroom-widget__students-overview,
.classroom-management-widget .classroom-widget__student-detail-grid,
.classroom-management-widget .classroom-widget__student-detail-status,
.classroom-management-widget .classroom-widget__archive-controls,
.classroom-management-widget .classroom-edit-context__chips {
  gap: 12px !important;
}

.classroom-management-widget .classroom-widget__section--students .classroom-widget__student-detail-header,
.classroom-management-widget .classroom-widget__section--students .classroom-widget__student-detail-grid {
  gap: var(--cm-students-group-gap);
}

.classroom-entry-warning-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-entry-warning-text {
  margin: 0;
}

.classroom-entry-warning-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
}

.classroom-entry-warning-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-6);
}

.classroom-widget__create .classroom-student-detail-modal {
  width: min(680px, calc(100vw - 32px));
  min-height: 0;
  background: var(--modal-shell-bg);
}

.classroom-student-detail-modal .modal-header {
  align-items: flex-start;
}

.classroom-student-detail-modal .modal-header h3 {
  max-width: min(460px, calc(100% - 56px));
  overflow-wrap: anywhere;
}

.classroom-management-widget .modal-content.classroom-student-detail-modal .close-modal {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 29, 31, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(47, 29, 31, 0.12);
  color: var(--modal-copy-color);
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.classroom-management-widget .modal-content.classroom-student-detail-modal .close-modal img {
  width: 24px;
  height: 24px;
}

.classroom-student-detail-modal__body {
  gap: var(--space-18);
}

.classroom-student-detail-modal .classroom-widget__student-detail-status:empty,
.classroom-student-detail-modal [data-classroom-student-detail-status-text]:empty {
  display: none;
}

.classroom-student-detail-modal .classroom-widget__student-detail-status {
  gap: var(--space-8);
}

.classroom-student-detail-modal .classroom-student-status {
  padding: 7px 14px !important;
}

.classroom-student-detail-modal__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--space-16);
  min-width: 0;
  max-width: 100%;
}

.classroom-student-detail-modal__name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  min-width: 0;
  max-width: 100%;
}

.classroom-student-detail-modal__name-grid .classroom-field-row {
  grid-template-columns: 1fr;
  row-gap: var(--space-6);
}

.classroom-student-detail-modal__photo {
  width: 132px;
  height: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--widget-control-border-color);
  border-radius: 50%;
  background: var(--widget-control-bg);
  color: var(--widget-meta-color);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: lowercase;
}

.classroom-student-detail-modal__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.classroom-student-detail-modal__grid.classroom-create-grid--general {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.classroom-student-detail-modal__grid .classroom-field-row {
  grid-template-columns: 1fr;
  row-gap: var(--space-6);
}

.classroom-student-detail-modal__grid .classroom-field-row:has([data-classroom-student-detail-contact]) {
  grid-column: 1 / -1;
}

.classroom-student-detail-modal__grid .classroom-field-row__label {
  padding-inline: var(--space-4);
  letter-spacing: 0;
}

.classroom-student-detail-modal :is(.classroom-student-detail-modal__grid, .classroom-student-detail-modal__name-grid) :is(.input, .select) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border-radius: var(--radius-pill);
}

.classroom-student-detail-modal__actions {
  margin-top: var(--space-2);
  gap: var(--space-12);
  flex-wrap: wrap;
}

.classroom-student-detail-modal__actions .btn {
  min-height: 44px;
}

.classroom-widget__create .classroom-photo-session-modal {
  width: min(860px, calc(100vw - 32px));
  min-height: 0;
  background: var(--modal-shell-bg);
}

.classroom-photo-session-modal .modal-header {
  align-items: flex-start;
}

.classroom-photo-session-modal__body {
  gap: var(--space-16);
}

.classroom-photo-session__topline,
.classroom-photo-session__attempts-head,
.classroom-photo-session__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
  max-width: 100%;
}

.classroom-photo-session__topline h4,
.classroom-photo-session__topline p {
  margin: 0;
}

.classroom-photo-session__topline h4 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--modal-title-color);
}

.classroom-photo-session__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: var(--space-16);
  align-items: start;
}

.classroom-photo-session__camera,
.classroom-photo-session__current,
.classroom-photo-session__attempts,
.classroom-photo-session__search,
.classroom-photo-session__preview {
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--widget-group-shadow);
}

.classroom-photo-session__camera {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 280px;
  min-width: 0;
  width: 100%;
  cursor: pointer;
}

.classroom-photo-session__camera:focus-visible {
  outline: 2px solid rgba(47, 29, 31, 0.42);
  outline-offset: 3px;
}

.classroom-photo-session__camera video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scaleX(-1);
  background: rgba(255, 255, 255, 0.7);
}

.classroom-photo-session__face-guide {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.classroom-photo-session__face-guide::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      transparent 0,
      transparent min(32vw, 180px),
      rgba(47, 29, 31, 0.32) calc(min(32vw, 180px) + 2px),
      rgba(47, 29, 31, 0.46) 100%
    );
}

.classroom-photo-session__face-guide-ring {
  position: relative;
  z-index: 1;
  width: min(76%, 360px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(47, 29, 31, 0.16),
    0 18px 40px rgba(47, 29, 31, 0.12);
}

.classroom-photo-session__face-guide-line {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
}

.classroom-photo-session__face-guide-line--horizontal {
  width: min(44%, 210px);
  height: 1px;
}

.classroom-photo-session__face-guide-line--vertical {
  width: 1px;
  height: min(44%, 210px);
}

.classroom-photo-session__capture-hint {
  position: absolute;
  left: var(--space-12);
  right: var(--space-12);
  bottom: var(--space-12);
  z-index: 3;
  width: fit-content;
  max-width: calc(100% - var(--space-24));
  margin: 0 auto;
  padding: var(--space-8) var(--space-12);
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.88);
  color: var(--widget-copy-color);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(47, 29, 31, 0.14);
}

.classroom-photo-session__camera-empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: var(--space-8);
  text-align: center;
  color: var(--widget-meta-color);
  background: rgba(255, 255, 255, 0.78);
}

.classroom-photo-session__camera-empty[hidden] {
  display: none !important;
}

.classroom-photo-session__camera-empty img {
  width: 42px;
  height: 42px;
  justify-self: center;
}

.classroom-photo-session__side {
  display: grid;
  gap: var(--space-12);
  align-content: start;
  min-width: 0;
}

.classroom-photo-session__current,
.classroom-photo-session__attempts,
.classroom-photo-session__search,
.classroom-photo-session__preview {
  padding: var(--space-12);
  display: grid;
  gap: var(--space-10);
}

.classroom-photo-session__current > span,
.classroom-photo-session__attempts-head span,
.classroom-photo-session__preview > span {
  font-size: var(--fs-body-s);
  color: var(--widget-meta-color);
}

.classroom-photo-session__search .form-field {
  margin: 0;
  gap: var(--space-6);
}

.classroom-photo-session__search-results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  min-width: 0;
}

.classroom-photo-session__search-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--widget-control-button-border-color);
  border-radius: var(--radius-pill);
  background: var(--widget-control-bg);
  color: var(--widget-copy-color);
  box-shadow: var(--widget-control-button-shadow);
  font: inherit;
  font-size: var(--fs-body-s);
  line-height: var(--lh-tight);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.classroom-photo-session__search-result--current {
  cursor: default;
}

.classroom-photo-session__search-result img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.classroom-photo-session__search-result span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.classroom-photo-session__search-result.is-active {
  background: var(--widget-strip-bg);
  border-color: rgba(47, 29, 31, 0.18);
  color: var(--widget-strip-text);
}

.classroom-photo-session__search-empty {
  margin: 0;
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
}

.classroom-photo-session__avatar {
  width: 112px;
  height: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
  color: var(--widget-meta-color);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.classroom-photo-session__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.classroom-photo-session__attempt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.classroom-photo-session__attempt {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

.classroom-photo-session__attempt.is-selected {
  border-color: var(--color-base-700);
}

.classroom-photo-session__attempt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.classroom-photo-session__attempt span {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--widget-copy-color);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

.classroom-photo-session__preview[hidden] {
  display: none !important;
}

.classroom-photo-session__preview img {
  width: 100%;
  height: clamp(140px, 20vh, 220px);
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
}

.classroom-photo-session__attempt--empty {
  display: grid;
  place-content: center;
  border: 1px dashed var(--widget-control-border-color);
  color: var(--widget-meta-color);
  cursor: default;
}

.classroom-photo-session__consents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  min-width: 0;
  max-width: 100%;
}

.classroom-photo-session__consent {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-pill);
  border: 1px solid var(--widget-control-border-color);
  background: var(--widget-control-bg);
  box-shadow: var(--widget-control-shadow);
  font-size: var(--fs-body-s);
}

.classroom-photo-session__actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.classroom-photo-session__actions .btn {
  min-height: 44px;
}

.classroom-photo-session__actions [data-classroom-photo-session-prev] img {
  transform: rotate(180deg);
}

.modal-content.classroom-name-learning-modal {
  width: min(600px, calc(100vw - 32px));
  max-width: min(600px, calc(100vw - 32px));
  min-height: 0;
  background: var(--modal-shell-bg);
}

.classroom-name-learning-modal__body {
  gap: var(--space-12);
}

.classroom-name-learning__topline,
.classroom-name-learning__controls,
.classroom-name-learning__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  max-width: 100%;
}

.classroom-name-learning__topline {
  justify-content: space-between;
}

.classroom-name-learning__topline h4,
.classroom-name-learning__topline p {
  margin: 0;
}

.classroom-name-learning__topline h4 {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--modal-title-color);
}

.classroom-name-learning__controls,
.classroom-name-learning__actions {
  flex-wrap: wrap;
}

.classroom-name-learning__controls .btn {
  color: var(--widget-copy-color);
  background: var(--widget-control-bg);
}

.classroom-name-learning__controls .btn.is-active {
  border-color: rgba(47, 29, 31, 0.28);
  background: var(--widget-strip-bg);
  color: var(--widget-strip-text);
}

.classroom-name-learning__actions [hidden] {
  display: none !important;
}

.classroom-name-learning__stage,
.classroom-name-learning__summary {
  min-width: 0;
  max-width: 100%;
  padding: var(--space-16);
  border: 1px solid var(--widget-group-border-color);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--widget-group-shadow);
}

.classroom-name-learning__stage {
  display: grid;
  place-items: center;
  min-height: 180px;
}

.classroom-name-learning__stage--photo,
.classroom-name-learning__stage--name,
.classroom-name-learning__stage:has(.classroom-name-learning__name-card),
.classroom-name-learning__stage:has(.classroom-name-learning__photo) {
  padding: var(--space-8);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.classroom-name-learning__stage--name {
  min-height: 80px;
}

.classroom-name-learning__photo {
  width: min(208px, 62vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(47, 29, 31, 0.18);
  background: transparent;
}

.classroom-name-learning__photo img,
.classroom-name-learning__option--photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.classroom-name-learning__name-card {
  min-width: 0;
  max-width: 100%;
  padding: var(--space-12) var(--space-20);
  border: 1px solid rgba(47, 29, 31, 0.08);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--widget-copy-color);
  text-align: center;
  box-shadow: var(--widget-control-shadow);
}

.classroom-name-learning__name-card span {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

.classroom-name-learning__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
  min-width: 0;
  max-width: 100%;
}

.classroom-name-learning__options--photo {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.classroom-name-learning__option {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--widget-control-button-border-color);
  border-radius: var(--radius-lg);
  background: var(--widget-control-bg);
  color: var(--widget-copy-color);
  box-shadow: var(--widget-control-button-shadow);
  cursor: pointer;
  overflow: hidden;
}

.classroom-name-learning__option:disabled {
  cursor: default;
  opacity: 1;
}

.classroom-name-learning__option--name {
  min-height: 60px;
  padding: var(--space-12) var(--space-14);
  font: inherit;
  font-size: var(--fs-body-m);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  overflow-wrap: anywhere;
}

.classroom-name-learning__option--photo {
  display: grid;
  place-items: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.classroom-name-learning__option--photo img {
  width: min(104px, 26vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(47, 29, 31, 0.18);
  background: transparent;
}

.classroom-name-learning__option.is-correct {
  border-color: rgba(34, 122, 75, 0.42);
  background: rgba(211, 255, 224, 0.9);
}

.classroom-name-learning__option.is-wrong {
  border-color: rgba(158, 55, 55, 0.36);
  background: rgba(255, 226, 226, 0.9);
}

.classroom-name-learning__option--photo.is-correct,
.classroom-name-learning__option--photo.is-wrong {
  background: transparent;
}

.classroom-name-learning__option--photo.is-correct img {
  border-color: rgba(34, 122, 75, 0.58);
  box-shadow: 0 0 0 3px rgba(34, 122, 75, 0.16);
}

.classroom-name-learning__option--photo.is-wrong img {
  border-color: rgba(158, 55, 55, 0.52);
  box-shadow: 0 0 0 3px rgba(158, 55, 55, 0.14);
}

.classroom-name-learning__summary[hidden] {
  display: none !important;
}

.classroom-name-learning__summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.classroom-name-learning__summary p {
  margin: 0;
  color: var(--widget-meta-color);
  font-size: var(--fs-body-s);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .classroom-photo-session__stage {
    grid-template-columns: 1fr;
  }

  .classroom-photo-session__camera {
    min-height: 220px;
  }

  .classroom-photo-session__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .classroom-name-learning__topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .classroom-name-learning__options {
    grid-template-columns: 1fr;
  }

  .classroom-name-learning__options--photo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classroom-name-learning__option--photo img {
    width: min(132px, 48vw);
  }
}

@media (max-width: 560px) {
  .classroom-widget__create .classroom-student-detail-modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .classroom-student-detail-modal .modal-header,
  .classroom-student-detail-modal__body {
    padding-inline: var(--space-20);
  }

  .classroom-student-detail-modal__identity {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-12);
  }

  .classroom-student-detail-modal__photo {
    width: 96px;
    height: 96px;
  }

  .classroom-student-detail-modal__name-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .classroom-student-detail-modal__grid.classroom-create-grid--general {
    grid-template-columns: 1fr;
    gap: var(--space-14);
  }

  .classroom-student-detail-modal__actions {
    justify-content: stretch;
  }

  .classroom-student-detail-modal__actions .btn {
    width: 100%;
  }
}

.modal[data-classroom-delete-warning-modal] .modal-content.help-modal-template {
  --help-modal-width: 520px;
  --help-modal-content-width: 38ch;
}

.modal[data-classroom-delete-warning-modal] .classroom-entry-warning-actions {
  gap: var(--space-12);
}

.student-card {
  padding: var(--space-12);
  border: 1px solid var(--widget-card-border-color, var(--color-border-light));
  border-radius: var(--radius-lg);
  background: var(--widget-card-bg, #fff);
  box-shadow: var(--widget-card-shadow, 0 6px 18px rgba(201, 152, 167, 0.1));
}

.student-card__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.student-card__title strong {
  display: inline-flex;
  align-items: center;
  padding: 8px var(--space-12) 8px 0;
  border-radius: var(--radius-pill);
  background: #fff;
  border: none;
  font-size: calc(var(--fs-body-m) + 8px);
  gap: var(--space-8);
  line-height: 1.2;
}

.student-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  flex: 0 0 auto;
  margin: 0;
}

.student-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: none;
}

.student-card__body {
  margin-top: var(--space-12);
}

.student-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.student-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--widget-group-border-color, var(--color-border-light));
  border-radius: var(--radius-lg);
  background: var(--widget-group-bg, var(--color-surface));
  box-shadow: var(--widget-group-shadow, 0 4px 10px rgba(201, 152, 167, 0.06));
}

.student-card .student-section {
  background: var(--widget-group-bg, var(--color-surface-alt, #f5efea));
  border-color: var(--widget-group-border-color, var(--color-border));
}

.student-section__title {
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.student-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.student-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-body-m);
  width: 100%;
}

.student-field--checkbox {
  border: none;
  padding: var(--space-6) 0;
  gap: var(--space-12);
}

.student-section--attendance .student-section__body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.student-section--attendance .student-field {
  flex: 0 0 auto;
  width: auto;
}

.student-section--attendance .excuse-container,
.student-section--attendance .late-minutes-container {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  align-items: center;
}
.classroom-widget input[type='checkbox'] + span {
  color: var(--color-text);
}

.student-field--stack {
  flex-direction: column;
  align-items: flex-start;
}

.student-field--stack textarea {
  width: 100%;
}

.student-field textarea,
.student-field select,
.student-field input[type='number'],
.student-field input[type='text'] {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: inherit;
  background: #fff;
  width: 100%;
}

.material-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-left: auto;
  align-items: flex-start;
}

.social-picker {
  display: inline-flex;
  gap: var(--space-8);
  margin-left: auto;
}

.social-option {
  border: 1px solid var(--color-border);
  background: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(201, 152, 167, 0.08);
}

.social-option[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(220, 86, 124, 0.18);
}

.social-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.student-field select,
.student-field input[type='number'],
.student-field input[type='text'] {
  min-height: 42px;
}

.student-field textarea {
  min-height: 88px;
}

.student-field--marks {
  align-items: center;
}

.student-field--marks .marks-select {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-align: center;
  font-weight: var(--fw-semibold);
  padding: 0;
  margin-left: auto;
}

.student-field--marks .marks-select.is-active {
  box-shadow: 0 0 0 3px rgba(220, 86, 124, 0.25);
  border-color: var(--color-primary);
}

.student-field--marks .marks-select[data-grade-level="1"],
.student-field--marks .marks-select[data-grade-level="2"] {
  background: #b3ffc7;
}

.student-field--marks .marks-select[data-grade-level="3"] {
  background: #ffe780;
}

.student-field--marks .marks-select[data-grade-level="4"],
.student-field--marks .marks-select[data-grade-level="5"],
.student-field--marks .marks-select[data-grade-level="6"] {
  background: #ffc897;
}

.student-field textarea {
  min-width: 180px;
  min-height: 64px;
  border-radius: var(--radius-md);
}

.partial-comment-container label {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.partial-comment-container .partial-comment-input {
  width: 100%;
}

.student-field-toggle {
  display: block;
  margin-top: var(--space-8);
}

.student-field-toggle[hidden] {
  display: none;
}

.student-field-toggle__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(201, 152, 167, 0.08);
  font-size: var(--fs-caption);
}

.student-field-toggle label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.student-card-nav {
  display: none;
  justify-content: center;
  gap: var(--space-8);
}

.classroom-widget__entry.is-open .student-card-nav {
  display: flex;
}

[data-student-fields-toggle][hidden] {
  display: none !important;
}

.classroom-widget__create {
  margin-top: var(--space-12);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt, #f7f1ee) 100%);
  box-shadow: 0 10px 30px rgba(201, 152, 167, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-widget__create-trigger {
  margin: 0 0 var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.classroom-widget__workspace {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.classroom-widget__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-widget__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.classroom-widget__section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
}

.classroom-widget__section-title {
  margin: 0;
  font-size: var(--fs-body-l);
}

.classroom-widget__section-copy {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
}

.classroom-widget__create--modal-host {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.classroom-create-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
  box-sizing: border-box;
}

.classroom-widget__create .modal-content--fit {
  width: min(1080px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-height: 220px;
  max-height: 90vh;
  overflow: hidden;
  box-sizing: border-box;
}

.classroom-create-form .select {
  width: 100%;
  min-width: 0;
}

.classroom-term-pickers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  width: 100%;
}

.classroom-term-pickers .select {
  min-width: 0;
  width: 100%;
}

.classroom-create-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.classroom-create-fields[hidden] {
  display: none !important;
}

.classroom-create-section {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt, #f7f1ee);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.classroom-create-section--students {
  --cm-modal-section-inset: 28px;
  --cm-modal-section-gap: 20px;
  --cm-modal-group-gap: 16px;
  --cm-modal-item-gap: 12px;
  --cm-modal-pill-y: 12px;
  --cm-modal-pill-x: 16px;
  padding: var(--cm-modal-section-inset);
  gap: var(--cm-modal-section-gap);
}

.classroom-create-section--students > * {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.classroom-create-section--students > * + * {
  margin-top: 20px;
}

.classroom-create-section__title {
  margin: 0;
  font-size: calc(var(--fs-body-s) + 2pt);
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--color-muted);
}

.classroom-create-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 12px;
}

.classroom-create-section--students .classroom-create-section__header {
  padding: var(--space-16) var(--space-18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.82);
  gap: var(--cm-modal-group-gap);
  margin-bottom: 0;
}

.classroom-create-section--students .classroom-create-section__title {
  color: var(--color-text);
}

.classroom-create-section__title + * {
  margin-top: 12px;
}

.classroom-students-toggle {
  width: 2.2rem;
  height: 2.2rem;
  margin-top: -4px;
}

.classroom-students-toggle img {
  width: 16px;
  height: 16px;
}

.classroom-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.classroom-create-grid .modal-toggle,
.classroom-create-grid .btn {
  width: 100%;
}

.classroom-create-grid--general {
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: flex-start;
  column-gap: var(--space-24);
  row-gap: var(--space-8);
  align-items: start;
}

.classroom-general-column {
  display: grid;
  grid-auto-rows: min-content;
  row-gap: var(--space-8);
}

.classroom-general-column:nth-child(1) {
  --label-col-width: 5ch;
}

.classroom-general-column:nth-child(2) {
  --label-col-width: 10ch;
}

.classroom-general-column:nth-child(3) {
  --label-col-width: 11ch;
}

.classroom-field-row {
  display: grid;
  grid-template-columns: minmax(0, var(--label-col-width, 10ch)) minmax(0, 1fr);
  column-gap: 2px;
  align-items: center;
}

.classroom-field-row--compact {
  --label-col-width: 7ch;
}

.classroom-field-row__label {
  display: block;
  width: 100%;
  font-size: var(--fs-caption);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  text-align: left;
  white-space: nowrap;
}

.classroom-field-row .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.classroom-edit-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.classroom-edit-context[hidden] {
  display: none !important;
}

.classroom-edit-context__title {
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-muted);
}

.classroom-edit-context__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.classroom-edit-context__chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-8);
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.classroom-sek2-series {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.classroom-sek2-series[hidden] {
  display: none !important;
}

[data-classroom-sek2-hint][hidden],
[data-classroom-sek2-series-name-wrap][hidden],
[data-classroom-sek2-source-wrap][hidden],
[data-classroom-sek2-carry-wrap][hidden] {
  display: none !important;
}

[data-classroom-delete][hidden] {
  display: none !important;
}

.classroom-sek2-series__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.classroom-sek2-series .select {
  min-width: 260px;
}

.classroom-sek2-series .modal-toggle {
  margin-left: 2px;
}

.classroom-student-actions {
  display: flex;
  gap: var(--space-6);
}

.classroom-create-section--students .classroom-student-actions {
  align-self: flex-start;
  width: fit-content;
  gap: var(--cm-modal-group-gap);
  padding: var(--cm-modal-group-gap);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
}

.classroom-create-section--students .classroom-student-actions .btn + .btn {
  margin-left: 16px;
}

.classroom-create-section--students .classroom-student-actions .btn {
  padding: var(--cm-modal-pill-y) var(--cm-modal-pill-x);
}

.classroom-management-widget .classroom-widget__create-trigger .btn img,
.classroom-management-widget .classroom-student-actions .btn img,
.classroom-management-widget [data-classroom-schedule-add] img,
.classroom-management-widget [data-classroom-student-close] img,
.classroom-management-widget [data-classroom-submit] img,
.classroom-management-widget .classroom-entry-warning-actions .btn img,
.classroom-management-widget .modal-actions .btn img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classroom-create-section--students .classroom-students-toggle {
  margin-top: 0;
  flex: 0 0 auto;
}

.classroom-create-section--students .classroom-student-controls,
.classroom-create-section--students .classroom-students {
  border: 1px solid rgba(137, 103, 76, 0.08);
}

.classroom-create-section--students .classroom-student-controls,
.classroom-create-section--students .classroom-students,
.classroom-create-section--students .classroom-student-table {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.classroom-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px dashed var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.classroom-schedule__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.classroom-schedule__hint {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-body-s);
}

.classroom-schedule__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-schedule__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
}

.classroom-schedule__remove {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.classroom-schedule__remove img,
.student-row-remove img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.classroom-assessments {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px dashed var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.classroom-assessments__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-8);
}

.classroom-assessments__list[hidden] {
  display: none !important;
}

.classroom-assessment-row {
  display: grid;
  grid-template-columns: 8ch minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

.classroom-assessment-row__label {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  text-transform: lowercase;
  letter-spacing: 0.03em;
}

.classroom-student-actions .btn {
  flex: 0 0 auto;
  width: fit-content;
  padding: 6px 12px;
}

.classroom-create-grid .input {
  width: 100%;
}

.classroom-create-grid--general [data-classroom-name-input] {
  width: 8ch;
  min-width: 8ch;
  justify-self: start;
}

.classroom-create-grid--general [data-classroom-name-input][data-class-level='sek2'] {
  width: 6ch;
  min-width: 6ch;
}

.classroom-create-grid--general [data-classroom-student-count] {
  width: 9ch;
  min-width: 9ch;
}

.classroom-create-grid--general [data-classroom-subject-input] {
  width: 14ch;
  min-width: 14ch;
}

.classroom-subject-contexts,
.classroom-subject-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.classroom-subject-context,
.classroom-subject-chip {
  border: 1px solid rgba(74, 49, 52, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #2f1f23;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  padding: 8px 14px;
  max-width: 100%;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.classroom-subject-context.is-active,
.classroom-subject-chip.is-primary {
  background: #73575a;
  border-color: #73575a;
  color: #fff;
}

.classroom-subject-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

.classroom-subject-chip__remove {
  display: inline-flex;
  margin-left: 8px;
  font-weight: 700;
}

.classroom-create-grid--general [data-classroom-teacher-input],
.classroom-create-grid--general [data-classroom-deputy-input] {
  width: 18ch;
  min-width: 18ch;
}

.classroom-create-grid--general [data-classroom-room-input] {
  width: 10ch;
  min-width: 10ch;
}

@media (max-width: 760px) {
  .classroom-widget__create .modal-content--fit {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .classroom-create-form {
    padding: var(--space-4) var(--space-4) var(--space-8);
  }

  .classroom-create-grid {
    grid-template-columns: 1fr;
  }

  .classroom-create-grid--general {
    grid-template-columns: 1fr;
    row-gap: var(--space-10);
  }

  .classroom-field-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }

  .classroom-schedule__row {
    grid-template-columns: 1fr;
  }

  .classroom-assessment-row {
    grid-template-columns: 1fr;
  }

  .classroom-schedule__remove {
    justify-self: end;
  }

  .classroom-modal-search {
    grid-template-columns: 1fr;
  }

  .classroom-modal-search .input {
    width: 100%;
  }

  .classroom-create-grid--general [data-classroom-name-input],
  .classroom-create-grid--general [data-classroom-student-count],
  .classroom-create-grid--general [data-classroom-subject-input],
  .classroom-create-grid--general [data-classroom-teacher-input],
  .classroom-create-grid--general [data-classroom-deputy-input],
  .classroom-create-grid--general [data-classroom-room-input] {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .classroom-widget__create-trigger,
  .classroom-widget__actions,
  .classroom-widget__section-actions,
  .classroom-create-mode {
    flex-direction: column;
    align-items: stretch;
  }

  .classroom-widget__create-trigger .btn,
  .classroom-widget__actions .btn,
  .classroom-widget__section-actions .btn,
  .classroom-create-mode .btn {
    width: 100%;
    justify-content: center;
  }

  .classroom-widget__section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .classroom-widget__students-tools,
  .classroom-widget__archive-controls,
  .classroom-widget__archive-filters,
  .classroom-widget__archive-preview-grid {
    grid-template-columns: 1fr;
  }

  .classroom-management-widget__toolbar,
  .classroom-management-widget .classroom-widget__actions {
    grid-template-columns: 1fr;
  }

  .classbook-widget .classroom-widget__actions .btn {
    flex: 0 1 auto;
    width: fit-content !important;
    max-width: 100%;
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .classbook-widget__history-select,
  .classbook-widget__history-inline-select {
    max-width: none;
  }

  .classroom-student-actions {
    flex-wrap: wrap;
  }

  .classroom-ai-import-dropzone {
    width: 100%;
  }

  .classroom-edit-context__chips {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .classroom-management-widget__overview,
  .classroom-management-widget .classroom-widget__section,
  .classbook-widget .classroom-widget__actions,
  .classbook-widget .classroom-journal__actions {
    grid-template-columns: 1fr;
  }

  .classbook-widget__select {
    width: 100%;
    max-width: none;
  }

  .classbook-widget__select .select {
    width: 100%;
    min-width: 0;
  }

  .classroom-management-widget__overview,
  .classroom-management-widget .classroom-widget__section,
  .classbook-widget .classroom-widget__section--overview,
  .classbook-widget__section--history,
  .classbook-widget__section--checklists,
  .classbook-widget .classroom-widget__section--journal {
    padding: var(--space-12);
  }

  .classbook-widget__flow-actions-group--primary,
  .classbook-widget__flow-actions-group--secondary,
  .classbook-widget__checklist-panel,
  .classbook-widget__journal-grid--compact,
  .classbook-widget__journal-grid--notes {
    grid-template-columns: 1fr;
  }

  .classroom-management-widget__details-main {
    grid-template-columns: 1fr;
  }

  .classroom-management-widget .classroom-class-badge {
    width: 52px;
    height: 52px;
  }

  .classroom-management-widget .classroom-widget__detail-row {
    padding: 12px 16px;
  }

  .classroom-management-widget .classroom-widget__detail-grid .stat-card,
  .classroom-management-widget .classroom-widget__students-health-item,
  .classroom-management-widget .classroom-student-row,
  .classroom-management-widget .classroom-widget__student-detail-item {
    padding-inline: var(--space-16);
  }
}

.classroom-ai-import {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 0;
  border: none;
  background: transparent;
}

.classroom-ai-import[hidden] {
  display: none !important;
}

.classroom-ai-import-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  width: fit-content;
}

.classroom-ai-import-toggle img {
  width: 18px;
  height: 18px;
}

.classroom-ai-import-panel[hidden] {
  display: none !important;
}

.classroom-ai-import-panel {
  padding: var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 10px 24px rgba(174, 137, 148, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-ai-import-panel [hidden] {
  display: none !important;
}

.classroom-create-mode {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.classroom-create-mode__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.classroom-create-mode__btn img {
  width: 18px;
  height: 18px;
}

.classroom-ai-import-title {
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.classroom-ai-import-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: flex-start;
}

.classroom-ai-import-actions > [data-classroom-ai-import-upload] {
  margin-top: 0;
}

.classroom-create-form.is-mode-selected [data-classroom-level],
.classroom-create-form.is-mode-selected [data-classroom-schoolyear],
.classroom-create-form.is-mode-selected [data-classroom-term],
.classroom-create-form.is-mode-selected [data-classroom-create-mode] {
  display: none !important;
}

.classroom-ai-import-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.classroom-ai-import-actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.classroom-ai-import-actions .btn.is-ready {
  border-color: var(--color-accent, #c79aa3);
  box-shadow: 0 6px 14px rgba(177, 130, 142, 0.18);
}

.classroom-ai-import-dropzone {
  width: 400px;
  max-width: 100%;
  padding: var(--space-16) var(--space-16);
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-border);
  background: var(--color-surface-alt, #f9f5f3);
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.classroom-ai-import-file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--fs-body-s);
  color: var(--color-text);
}

.classroom-ai-import-file img {
  width: 20px;
  height: 20px;
}

.classroom-ai-import-dropzone__title {
  font-weight: var(--fw-semibold);
}

.classroom-ai-import-dropzone__hint {
  color: var(--color-muted);
  font-size: var(--fs-body-s);
}

.classroom-ai-import-panel .status {
  margin-top: var(--space-2);
}

.classroom-ai-import-panel .btn {
  margin-top: var(--space-2);
}

.classroom-ai-import-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--color-surface-alt, #f0e9e6);
  overflow: hidden;
}

.classroom-ai-import-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent, #c79aa3);
  transition: width 200ms ease;
}

.classroom-ai-import-preview {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt, #f7f1ee);
}

.classroom-ai-import-preview__row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr 1fr 1.6fr;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
}

.classroom-ai-import-preview__head {
  font-weight: var(--fw-semibold);
}
.classroom-create-heading {
  grid-column: 1 / -1;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-top: var(--space-4);
}

.classroom-student-controls {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
}

.classroom-create-section--students .classroom-student-controls {
  gap: var(--cm-modal-item-gap);
  padding: var(--cm-modal-group-gap);
}

.classroom-student-actions[hidden],
.classroom-student-controls[hidden],
.classroom-students[hidden],
.modal-actions[hidden] {
  display: none !important;
}

.classroom-create-form .status:empty {
  display: none;
}

.classroom-students {
  --cm-modal-students-inset: var(--space-16);
  --cm-modal-students-group-gap: var(--space-14);
  --cm-modal-students-item-gap: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--cm-modal-students-group-gap);
  padding: var(--cm-modal-students-inset);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
}

.classroom-create-section--students .classroom-students {
  --cm-modal-students-inset: var(--cm-modal-group-gap);
  --cm-modal-students-group-gap: var(--cm-modal-group-gap);
  --cm-modal-students-item-gap: var(--cm-modal-item-gap);
  padding: 18px;
}

.classroom-student-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 4px 10px rgba(201, 152, 167, 0.06);
}

.classroom-student-row.is-active {
  border-color: rgba(137, 103, 76, 0.35);
  box-shadow: 0 0 0 1px rgba(137, 103, 76, 0.16), 0 8px 18px rgba(137, 103, 76, 0.12);
}

.classroom-delete-entry-btn {
  color: #7f3128;
}

.classroom-student-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.classroom-student-info strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.classroom-student-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.classroom-student-status {
  font-size: 11px;
}

.classroom-student-status--warning {
  background: #fff2e2;
  color: #8d4b16;
}

.classroom-student-status--muted {
  background: #f1ece6;
  color: #6f6255;
}

.classroom-student-status--ok {
  background: #e8f5ec;
  color: #2f6b41;
}

.classroom-student-row__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-6);
}

.classroom-create-form[hidden] {
  display: none !important;
}

.classroom-student-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}

.classroom-student-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: var(--space-8);
  justify-content: flex-end;
}

.classroom-delete-class-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--widget-control-bg, #fff);
  border-color: var(--widget-control-button-border-color, #000);
  color: var(--widget-copy-color, #000);
}

.classroom-delete-class-btn:hover,
.classroom-delete-class-btn:focus-visible,
.classroom-delete-class-btn:active {
  border-color: var(--widget-control-button-border-color, #000);
  color: var(--widget-copy-color, #000);
}

.classroom-delete-class-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: none;
}

.classroom-modal-search {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

.classroom-modal-search span {
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  text-transform: lowercase;
  white-space: nowrap;
}

.classroom-modal-search .input {
  width: min(340px, 100%);
  max-width: 100%;
}

.classroom-modal-search--template,
.classroom-checklist-search {
  display: grid;
  grid-template-columns: max-content minmax(0, 360px);
  align-items: center;
  justify-content: start;
  gap: var(--space-10);
}

.classroom-modal-search--template .input,
.classroom-checklist-search .input {
  width: min(360px, 100%);
  border: 2px solid rgba(47, 29, 31, 0.34);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(92, 75, 75, 0.1);
}

.classroom-modal-search__label,
.classroom-checklist-search__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.classroom-modal-search__label img,
.classroom-checklist-search__label img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classbook-widget .classroom-modal-search--template,
.classbook-widget .classroom-checklist-search {
  grid-template-columns: max-content minmax(0, 360px);
  align-items: center;
  gap: var(--space-10);
}

.classbook-widget .classroom-feedback-search {
  grid-template-columns: max-content minmax(0, 300px);
}

.classbook-widget .classroom-feedback-search .input {
  width: min(300px, 100%);
}

.classbook-widget .classroom-modal-search--template > * + *,
.classbook-widget .classroom-checklist-search > * + * {
  margin-top: 0;
}

.classroom-modal-search--students {
  max-width: min(420px, 100%);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
}

.classroom-create-section--students .classroom-modal-search--students {
  max-width: min(480px, 100%);
  padding: var(--cm-modal-group-gap);
  margin-bottom: 2px;
}

.classroom-widget__create .modal-content--fit,
.classroom-attendance-modal,
.classroom-checklist-modal,
.classroom-substitute-modal,
.classroom-feedback-modal,
.classroom-feedback-assign-modal .modal-content--fit {
  background: var(--modal-shell-bg);
}

.classroom-duplicate-modal {
  width: min(640px, 100%);
  background: var(--modal-shell-bg);
}

.classroom-duplicate-form {
  padding: 0;
  gap: 0;
}

.classroom-duplicate-modal__body {
  display: grid;
  gap: var(--space-16);
}

.classroom-duplicate-modal__source {
  margin: 0;
}

.classroom-duplicate-modal__terms {
  margin: 0;
}

.classroom-duplicate-options {
  display: grid;
  gap: var(--space-10);
}

.classroom-duplicate-options .modal-toggle {
  justify-content: flex-start;
}

.classroom-duplicate-modal__actions {
  margin: 0;
}

.classroom-create-form {
  padding: 0;
  gap: 0;
}

.classroom-create-form .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.classroom-create-form .modal-actions {
  margin: 0;
}

.classroom-widget__create [data-classroom-create-actions] {
  margin: 0 var(--space-6) var(--space-6);
  padding: var(--space-14) var(--space-16) var(--space-16);
  border-top: 1px solid rgba(47, 29, 31, 0.08);
}

.classroom-widget__create [data-classroom-status] {
  margin: 0;
  min-height: 20px;
}

.classroom-widget__create :is(
  .classroom-create-section,
  .classroom-schedule,
  .classroom-assessments,
  .classroom-edit-context,
  .classroom-student-actions,
  .classroom-student-controls,
  .classroom-students,
  .classroom-student-table,
  .classroom-ai-import-panel,
  .classroom-modal-search--students,
  .classroom-create-section__header
),
:is(
  .classbook-modal__intro,
  .classbook-modal__panel,
  .classbook-modal__footer,
  .classbook-feedback-modal__intro,
  .classroom-feedback-toggles,
  .classroom-feedback-assign,
  .classroom-feedback-tools,
  .classbook-feedback-modal__summary,
  .classbook-feedback-modal__footer,
  .classroom-attendance-row,
  .classroom-checklist-row,
  .classroom-feedback-row
) {
  border: 1px solid var(--modal-group-border-color);
  background: var(--modal-group-bg);
  box-shadow: var(--modal-group-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:is(
  .classroom-attendance-body > .classroom-modal-search,
  .classroom-checklist-body > .classroom-modal-search,
  .classroom-checklist-body > .classroom-journal-field
) {
  border: 1px solid var(--modal-group-border-color);
  background: var(--modal-group-bg);
  box-shadow: var(--modal-group-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:is(
  .classroom-entry-warning-checkbox,
  .attendance-icon,
  .attendance-excused,
  .attendance-minutes,
  .attendance-comment,
  .classroom-checklist-option,
  .classroom-feedback-chip,
  .attendance-inline__field,
  .classroom-edit-context__chip
) {
  border: 1px solid var(--modal-control-border-color);
  background: var(--modal-control-bg);
  box-shadow: var(--modal-control-shadow);
}

.classroom-attendance-list,
.classroom-checklist-list,
.classroom-feedback-list {
  border: 1px solid rgba(47, 29, 31, 0.08);
  border-radius: calc(var(--radius-lg) + 2px);
  background: rgba(255, 255, 255, 0.34);
}

.classroom-attendance-modal {
  min-width: min(1040px, 95vw);
}

.classroom-attendance-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.classbook-widget .classroom-attendance-body,
.classbook-widget .classroom-checklist-body {
  gap: var(--cb-stack-gap);
}

.classbook-modal__intro {
  padding: var(--space-12);
  border-radius: var(--radius-md);
}

.classbook-widget :is(.classbook-modal__intro, .classbook-modal__panel, .classbook-feedback-modal__intro, .classbook-feedback-modal__controls, .classbook-feedback-modal__summary, .classbook-feedback-modal__footer) > * + * {
  margin-top: var(--cb-item-gap);
}

.classbook-modal__copy {
  margin: 0;
  max-width: 68ch;
}

.classbook-modal__panel {
  display: flex;
  flex-direction: column;
  gap: var(--cb-panel-gap);
  padding: var(--cb-panel-inset);
  border-radius: var(--radius-lg);
}

.classbook-modal__panel--stack {
  background: rgba(255, 255, 255, 0.4);
}

.classbook-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-12);
  padding: var(--space-14);
  border-radius: var(--radius-lg);
}

.classbook-modal__footer .btn,
.classbook-feedback-modal__footer .btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  padding-inline: var(--space-14);
  white-space: nowrap;
}

.classbook-modal__footer .status {
  margin: 0;
  min-height: 20px;
  flex: 1 1 auto;
  text-align: right;
}

.classroom-attendance-body > .classroom-modal-search,
.classroom-checklist-body > .classroom-modal-search,
.classroom-checklist-body > .classroom-journal-field {
  padding: var(--space-12);
  border-radius: calc(var(--radius-pill) + 4px);
}

.classroom-attendance-list {
  display: flex;
  flex-direction: column;
  gap: var(--cb-stack-gap);
  max-height: 60vh;
  overflow: auto;
  padding: var(--space-4);
}

.classroom-attendance-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  padding: var(--cb-panel-inset);
  border-radius: var(--radius-lg);
}

.classroom-attendance-name {
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
}

.classroom-attendance-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.attendance-control {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: nowrap;
  min-width: 0;
}

.classroom-attendance-controls:has(.attendance-comment.is-visible) .attendance-control--presence {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr);
  align-items: center;
  width: 100%;
  flex: 1 1 100%;
}

.attendance-toggle,
.attendance-late {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-pill);
  text-transform: lowercase;
}

.attendance-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.attendance-icon img {
  width: 14px;
  height: 14px;
}

.attendance-toggle.is-absent .attendance-icon {
  background: #f3d3cf;
}

.attendance-late.is-active .attendance-icon {
  background: #d97f7f;
  border-color: #d97f7f;
}

.attendance-late.is-active .attendance-icon img {
  filter: brightness(0) invert(1);
}

.attendance-excused,
.attendance-minutes,
.attendance-comment {
  display: none;
  align-items: center;
  gap: var(--space-4);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.attendance-excused.is-visible,
.attendance-minutes.is-visible,
.attendance-comment.is-visible {
  display: flex;
}

.attendance-comment textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--modal-control-border-color);
  background: var(--color-surface);
  box-shadow: var(--modal-control-shadow);
  resize: none;
}

.attendance-minutes input,
.attendance-comment textarea {
  width: 100%;
}

.attendance-comment {
  min-width: 0;
  width: 100%;
}

.attendance-minutes input {
  width: 72px;
  min-width: 72px;
  max-width: 80px;
  border: 2px solid var(--modal-control-border-color);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.classroom-checklist-modal {
  min-width: min(860px, 95vw);
}

.classroom-checklist-modal.is-readonly .classroom-checklist-name {
  opacity: 0.95;
}

.classroom-checklist-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.classroom-checklist-meta-row {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(150px, 190px) minmax(220px, 260px);
  justify-content: start;
  gap: var(--space-12);
  align-items: end;
}

.classroom-substitute-modal {
  width: min(520px, 95vw);
  min-width: 0;
}

.classroom-substitute-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.classroom-substitute-body :is(.input, .textarea, select) {
  width: 100%;
  min-width: 0;
  border: 2px solid rgba(47, 29, 31, 0.34);
  background: rgba(255, 255, 255, 0.96);
}

.classroom-substitute-body [data-classroom-substitute-content] {
  min-height: 0;
  height: 46px;
  resize: none;
}

.classroom-substitute-body [data-classroom-substitute-save] {
  margin-top: var(--space-8);
}

.classroom-checklist-list {
  display: flex;
  flex-direction: column;
  gap: var(--cb-stack-gap);
  max-height: 58vh;
  overflow: auto;
  padding: var(--space-4);
}

.classroom-checklist-items {
  display: grid;
  gap: var(--space-10);
}

.classroom-checklist-items__add {
  display: grid;
  grid-template-columns: minmax(260px, 420px) max-content;
  justify-content: start;
  gap: var(--space-10);
  align-items: center;
}

.classroom-checklist-items__add .input {
  width: 100%;
}

.classroom-checklist-items__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.classroom-checklist-item-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--modal-control-border-color);
  border-radius: var(--radius-pill);
  background: var(--modal-control-bg);
  box-shadow: var(--modal-control-shadow);
  color: var(--color-text-strong);
  font-size: var(--fs-body-s);
}

.classroom-checklist-item-pill__remove {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.classroom-checklist-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr);
  gap: var(--cb-item-gap);
  align-items: center;
  padding: var(--cb-panel-inset);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 6px 14px rgba(201, 152, 167, 0.05);
}

.classroom-checklist-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
}

.classroom-checklist-omissions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--modal-control-border-color);
  border-radius: var(--radius-pill);
  background: var(--modal-control-bg);
  box-shadow: var(--modal-control-shadow);
  color: var(--color-text-muted);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
}

.classroom-checklist-omissions img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
}

.classroom-checklist-omissions.is-medium {
  border-color: rgba(226, 197, 97, 0.62);
  background: rgba(226, 197, 97, 0.22);
  color: var(--color-text-strong);
}

.classroom-checklist-omissions.is-high {
  border-color: rgba(190, 88, 104, 0.52);
  background: rgba(190, 88, 104, 0.18);
  color: var(--color-text-strong);
}

.classroom-checklist-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-checklist-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.classroom-checklist-item-statuses {
  display: grid;
  gap: var(--space-8);
}

.classroom-checklist-item-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 190px) minmax(96px, auto);
  gap: var(--space-10);
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.classroom-checklist-item-row .select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.classroom-checklist-item-row.is-completion-first {
  background: rgba(116, 176, 128, 0.18);
  border-color: rgba(116, 176, 128, 0.38);
}

.classroom-checklist-item-row.is-completion-second {
  background: rgba(226, 197, 97, 0.24);
  border-color: rgba(226, 197, 97, 0.45);
}

.classroom-checklist-item-row.is-completion-third {
  background: rgba(218, 137, 174, 0.22);
  border-color: rgba(218, 137, 174, 0.45);
}

.classroom-checklist-item-row.is-completion-late,
.classroom-checklist-item-row.is-status-missing {
  background: rgba(190, 88, 104, 0.18);
  border-color: rgba(190, 88, 104, 0.42);
}

.classroom-checklist-item-row.is-status-partial {
  background: rgba(226, 197, 97, 0.16);
  border-color: rgba(226, 197, 97, 0.38);
}

.classroom-checklist-item-row__label {
  font-size: var(--fs-body-s);
  color: var(--color-text-strong);
  text-transform: lowercase;
}

.classroom-checklist-item-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-body-xs);
  line-height: 1.2;
  text-align: right;
  text-transform: lowercase;
}

.classroom-checklist-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
}

.classroom-checklist-missing {
  display: none;
  align-items: center;
  gap: var(--space-8);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
}

.classroom-checklist-missing.is-visible {
  display: flex;
}

.classroom-checklist-missing span {
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  text-transform: lowercase;
}

.classroom-checklist-missing .input {
  min-width: 220px;
  max-width: 300px;
  border: 2px solid rgba(47, 29, 31, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.96);
}

@media (max-width: 760px) {
  .classroom-attendance-modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .classroom-attendance-body {
    padding: var(--space-12);
    gap: var(--space-10);
    padding-bottom: calc(var(--space-12) + 64px);
  }

  .classroom-attendance-list {
    max-height: none;
    overflow: visible;
  }

  .classroom-attendance-row {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    scroll-margin-top: 96px;
    scroll-margin-bottom: 96px;
  }

  .classroom-attendance-controls {
    position: relative;
    z-index: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .classroom-attendance-controls :is(button, input, label) {
    scroll-margin-top: 96px;
    scroll-margin-bottom: 96px;
  }

  .attendance-control {
    flex-direction: column;
    align-items: stretch;
  }

  .attendance-toggle,
  .attendance-late,
  .attendance-excused,
  .attendance-minutes,
  .attendance-comment {
    width: 100%;
    justify-content: center;
  }

  .classroom-checklist-row {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    scroll-margin-top: 96px;
    scroll-margin-bottom: 112px;
  }

  .classroom-checklist-modal {
    width: calc(100vw - 20px);
    min-width: 0;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .classroom-checklist-body {
    padding: var(--space-12);
    gap: var(--space-10);
    padding-bottom: calc(var(--space-12) + 72px);
  }

  .classroom-checklist-meta-row {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .classroom-checklist-items__add {
    grid-template-columns: minmax(0, 1fr);
  }

  .classroom-checklist-items__add .input {
    min-width: 0;
    width: 100%;
  }

  .classroom-checklist-items__add .btn {
    justify-self: start;
    width: auto;
  }

  .classbook-widget .classroom-modal-search--template,
  .classbook-widget .classroom-checklist-search {
    grid-template-columns: max-content minmax(150px, 1fr);
  }

  .classroom-checklist-list {
    max-height: none;
    overflow: visible;
  }

  .classroom-checklist-options {
    flex-direction: column;
    gap: var(--space-8);
  }

  .classroom-checklist-item-row {
    grid-template-columns: 1fr;
  }

  .classroom-checklist-item-meta {
    text-align: left;
  }

  .classroom-checklist-option {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
  }

  .classroom-checklist-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
  }

  .classroom-checklist-missing {
    flex-direction: column;
    align-items: flex-start;
  }

  .classroom-checklist-missing .input {
    min-width: 0;
    width: 100%;
  }

  .classbook-modal__footer {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    pointer-events: none;
  }

  .classbook-modal__footer .btn {
    width: auto;
    min-width: 0;
    justify-content: center;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    scroll-margin-top: 96px;
    scroll-margin-bottom: 96px;
  }

  .classbook-modal__footer .status {
    text-align: left;
  }
}

.classroom-feedback-modal {
  min-width: min(1180px, 96vw);
}

.classbook-widget .classroom-feedback-modal {
  min-width: min(1120px, 96vw);
}

.classroom-feedback-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.classbook-widget .classroom-feedback-body {
  gap: var(--cb-stack-gap);
}

.classbook-feedback-modal__intro {
  padding: var(--space-12);
  border-radius: var(--radius-md);
}

.classbook-feedback-modal__copy {
  margin: 0;
  max-width: 68ch;
}

.classbook-feedback-modal__controls {
  display: grid;
  gap: var(--space-12);
}

.classroom-feedback-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-md);
}

.classroom-feedback-toggles label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--modal-control-border-color);
  border-radius: var(--radius-pill);
  background: var(--modal-control-bg);
  box-shadow: var(--modal-control-shadow);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.classroom-feedback-assign {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: calc(var(--radius-pill) + 4px);
}

.classroom-feedback-toggles + .classroom-feedback-assign {
  margin-top: 0;
}

.classroom-feedback-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: 0;
  max-height: 65vh;
  overflow: auto;
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
}

.classroom-feedback-tools + .classroom-feedback-list {
  margin-top: 0;
  padding-top: var(--space-4);
}

.classroom-feedback-tools {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: var(--space-10);
  row-gap: var(--space-10);
  justify-content: start;
  align-items: center;
  padding: var(--space-12);
  border-radius: calc(var(--radius-pill) + 4px);
}

.classbook-widget .classroom-feedback-toggles,
.classbook-widget .classroom-feedback-assign,
.classbook-widget .classroom-feedback-tools {
  padding: var(--cb-panel-inset);
  border-radius: calc(var(--radius-pill) + 4px);
}

.classbook-widget .classroom-feedback-tools {
  grid-template-columns: minmax(0, 410px) max-content;
  justify-content: start;
}

.classbook-widget :is(.classroom-feedback-assign, .classroom-feedback-tools) > * + * {
  margin-top: 0;
}

.classbook-widget .classroom-feedback-random {
  grid-template-columns: max-content minmax(220px, 300px);
}

.classroom-feedback-random {
  display: grid;
  grid-template-columns: max-content minmax(220px, 320px);
  gap: var(--space-8);
  align-items: center;
}

.classroom-feedback-random .input {
  width: min(320px, 100%);
  border: 2px solid rgba(47, 29, 31, 0.34);
  background: rgba(255, 255, 255, 0.96);
}

.classroom-feedback-random .btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.classroom-feedback-body [data-classroom-feedback-save] {
  align-self: flex-start;
  width: fit-content;
  color: #fff;
}

.classbook-feedback-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-12);
  padding: var(--space-14);
  border-radius: var(--radius-lg);
}

.classbook-feedback-modal__footer .status {
  margin: 0;
  min-height: 20px;
  flex: 1 1 auto;
  text-align: right;
}

.classbook-feedback-modal__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-14);
  border-radius: var(--radius-lg);
}

.classbook-feedback-modal__progress {
  margin: 0;
}

.classbook-widget .classroom-feedback-list {
  padding: var(--space-4);
}

.classroom-feedback-body [data-classroom-feedback-save] img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.classroom-management-widget .modal-content .close-modal,
.classroom-management-widget .modal-content .close-modal--minimize {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.classroom-management-widget .modal-content .close-modal img,
.classroom-management-widget .modal-content .close-modal--minimize img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.close-modal--minimize {
  font-size: 20px;
  line-height: 1;
}

.classroom-feedback-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-highlight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  z-index: 45;
}

.classroom-feedback-fab[hidden] {
  display: none !important;
}

.classroom-feedback-fab img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.classroom-feedback-fab:hover {
  background: var(--color-surface);
}

@media (max-width: 760px) {
  .classroom-feedback-fab {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 760px) {
  .classroom-feedback-tools {
    grid-template-columns: 1fr;
  }

  .classroom-feedback-modal {
    width: calc(100vw - 20px);
    min-width: 0;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .classroom-feedback-body {
    padding: var(--space-12);
    gap: var(--space-10);
    padding-bottom: calc(var(--space-12) + 72px);
  }

  .classroom-feedback-list {
    max-height: none;
    overflow: visible;
    padding: var(--space-4);
  }

  .classroom-feedback-row {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    scroll-margin-top: 96px;
    scroll-margin-bottom: 112px;
  }

  .classroom-feedback-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .classroom-feedback-grid .student-section,
  .classroom-feedback-grid .student-field,
  .classroom-feedback-fields :is(.marks-select, .partial-comment-input, .feedback-comment-input) {
    width: 100%;
    min-width: 0;
  }

  .attendance-inline,
  .learning-inline,
  .material-inline,
  .feedback-comment {
    width: 100%;
    justify-content: space-between;
  }

  .classbook-feedback-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.96);
    pointer-events: none;
  }

  .classbook-feedback-modal__footer .btn {
    width: auto;
    min-width: 0;
    justify-content: center;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    scroll-margin-top: 96px;
    scroll-margin-bottom: 112px;
  }
}

.classroom-feedback-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-12);
  border-radius: var(--radius-md);
}

.classbook-widget .classroom-feedback-row {
  grid-template-columns: 220px 1fr;
  gap: var(--cb-panel-gap);
  padding: var(--cb-panel-inset);
  border-radius: var(--radius-lg);
}

.classbook-widget .classroom-feedback-row.is-active {
  border-color: rgba(186, 150, 160, 0.55);
  box-shadow: 0 0 0 2px rgba(186, 150, 160, 0.16), 0 10px 20px rgba(186, 150, 160, 0.08);
}

.classroom-feedback-row.is-absent {
  background: #e9e1e4;
}

.classbook-widget .classroom-feedback-row.is-absent {
  background: rgba(233, 225, 228, 0.9);
}

.classroom-feedback-row + .classroom-feedback-row {
  margin-top: var(--space-12);
}
.classroom-feedback-row .student-section,
.classroom-feedback-row .feedback-comment-toggle,
.classroom-feedback-row .feedback-comment-field {
  background: #fff;
}

.classroom-feedback-name {
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
}

.classbook-widget .classroom-feedback-name {
  font-size: var(--fs-body-m);
}

.classroom-feedback-nameblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.classroom-feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.classroom-feedback-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  text-transform: lowercase;
}

.classroom-feedback-chip--focus {
  border-color: rgba(186, 150, 160, 0.42);
  background: rgba(226, 210, 216, 0.92);
  color: var(--color-text);
}

.classroom-feedback-chip--present {
  background: rgba(247, 240, 234, 0.78);
}

.classroom-feedback-chip--absent {
  background: rgba(233, 225, 228, 0.95);
}

.classroom-feedback-row.is-absent .classroom-feedback-name {
  color: #7f6e74;
}

.classroom-feedback-row.is-absent .classroom-feedback-fields :is(button, input, select, textarea) {
  opacity: 0.55;
}

.classroom-feedback-absent-note {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-body-xs);
  color: #7f6e74;
  text-transform: lowercase;
}

.classroom-feedback-grid {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: nowrap;
  overflow-x: auto;
}

.classbook-widget .classroom-feedback-grid {
  gap: var(--space-10);
  padding-bottom: var(--space-2);
}

.feedback-section--attendance {
  flex: 0 0 auto;
}

.feedback-section--learning {
  flex: 0 0 auto;
}

.feedback-section--material {
  flex: 0 0 auto;
}

.feedback-section--comment {
  flex: 0 0 auto;
}

.feedback-section--marks {
  flex: 0 0 auto;
}

.feedback-section--marks .student-section__title {
  margin-bottom: var(--space-4);
}

.feedback-section--marks .student-section__body {
  padding: var(--space-6) var(--space-8);
}

.feedback-section--marks .student-field--marks .marks-select {
  width: 72px;
  min-width: 72px;
  height: 42px;
  border-radius: var(--radius-pill);
  font-size: 0.9em;
  padding: 8px 30px 8px 12px;
  text-align: left;
}

.classroom-feedback-grid .student-section {
  width: auto;
  padding: var(--space-8) var(--space-10);
}

.classroom-feedback-grid .student-section__body {
  gap: var(--space-6);
}

.classroom-feedback-grid .student-field {
  width: auto;
  padding: var(--space-6) var(--space-8);
}

.feedback-comment-toggle {
  padding: 6px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feedback-comment-toggle img {
  width: 20px;
  height: 20px;
}

.feedback-attendance-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feedback-attendance-toggle img {
  width: 20px;
  height: 20px;
}

.feedback-late-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.feedback-late-toggle img {
  width: 16px;
  height: 16px;
}

.attendance-inline {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap;
}

.attendance-inline__label {
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
}

.attendance-inline__field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

.attendance-inline__field input[type="number"] {
  width: 60px;
}

.learning-inline {
  display: flex;
  align-items: center;
  gap: 0;
}

.learning-inline__label {
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  margin-right: 0;
}

.learning-inline .social-picker {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: 2px;
}

.classroom-feedback-modal .learning-inline,
.classroom-feedback-modal .learning-inline .social-picker {
  gap: 4px;
}

.classroom-feedback-modal .learning-inline .social-picker .social-option {
  margin-right: 0;
}

.classroom-feedback-modal .learning-inline .social-picker .social-option:last-child {
  margin-right: 0;
}

.classroom-feedback-modal .learning-inline__label {
  margin-right: 0;
}

.learning-inline .social-option {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.learning-inline .social-option img {
  width: 18px;
  height: 18px;
}

.learning-inline .social-option[aria-pressed="true"] {
  border-color: transparent;
  box-shadow: none;
}

.material-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.material-inline__label {
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
}

.material-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.material-toggle img {
  width: 18px;
  height: 18px;
}

.classroom-feedback-fields .student-section {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-surface-alt, #f7f1ee);
}

.classbook-widget .classroom-feedback-fields .student-section {
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-12);
  background: rgba(247, 240, 234, 0.7);
}

@media (max-width: 900px) {
  .classbook-widget .classroom-feedback-tools {
    grid-template-columns: 1fr;
  }

  .classbook-widget .classroom-feedback-row {
    grid-template-columns: 1fr;
  }

  .classbook-feedback-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .classbook-feedback-modal__footer .status {
    text-align: left;
  }

  .classbook-feedback-modal__summary {
    flex-direction: column;
    align-items: stretch;
  }
}

.feedback-comment {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.feedback-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.feedback-comment-toggle img {
  width: 16px;
  height: 16px;
}

.feedback-comment-field textarea {
  min-width: 220px;
  max-width: 320px;
  border-radius: var(--radius-full);
  padding: 8px 12px;
  border: 2px solid rgba(47, 29, 31, 0.34);
  background: rgba(255, 255, 255, 0.96);
}

.classroom-feedback-assign-modal .modal-content--fit {
  width: min(560px, 95vw);
}

.classroom-feedback-assign-modal .modal-body {
  display: grid;
  gap: var(--space-12);
}

.classroom-feedback-assign-modal :is(.input, .select) {
  width: min(360px, 100%);
  min-width: 0;
  border: 2px solid rgba(47, 29, 31, 0.34);
  background-color: rgba(255, 255, 255, 0.96);
}

.classroom-feedback-assign-modal .modal-actions .btn {
  width: auto;
  min-width: 0;
  padding-inline: var(--space-14);
  white-space: nowrap;
}

.modal.open {
  display: flex;
}

.modal[hidden] {
  display: none !important;
}

.classroom-feedback-assign-modal [hidden] {
  display: none !important;
}

.classroom-feedback-assign-modal [data-feedback-assign-name-wrap] {
  position: relative;
  z-index: 1;
}

.classroom-feedback-assign-modal .modal-actions {
  position: relative;
  z-index: 2;
}

.classroom-feedback-assign-modal .input-icon-btn img {
  pointer-events: none;
}

.classroom-student-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable both-edges;
  padding: var(--space-12);
  background: rgba(247, 241, 238, 0.88);
}

.classroom-create-section--students .classroom-student-table {
  padding: 18px;
}

.classroom-student-table__mobile-hint {
  display: none;
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.classroom-student-table__head {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 140px 1fr 1.2fr 32px;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  min-width: 760px;
}

.classroom-create-section--students .classroom-student-table__head {
  min-width: 760px;
  margin-bottom: 2px;
}

.classroom-student-table__head .hidden {
  display: none;
}

.classroom-student-table__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-2) var(--space-4);
  background: transparent;
}

.classroom-create-section--students .classroom-student-table__body {
  padding: 18px 0 0;
}

.classroom-student-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 140px 1fr 1.2fr 32px;
  gap: var(--space-10);
  align-items: center;
  min-width: 760px;
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
}

.classroom-create-section--students .classroom-student-table__row {
  min-width: 760px;
  padding: 16px;
}

.classroom-student-table__row + .classroom-student-table__row {
  margin-top: 0;
}

.classroom-student-table__row .hidden {
  display: none;
}

.classroom-student-table__row.hide-gender {
  grid-template-columns: 1fr 1fr 140px 1fr 32px;
}

.classroom-student-table__row.hide-contact {
  grid-template-columns: 1fr 1fr 140px 140px 32px;
}

.classroom-student-table__row.hide-birth {
  grid-template-columns: 1fr 1fr 140px 1fr 32px;
}

.classroom-student-table__head.hide-gender {
  grid-template-columns: 1fr 1fr 140px 1fr 32px;
}

.classroom-student-table__head.hide-contact {
  grid-template-columns: 1fr 1fr 140px 140px 32px;
}

.classroom-student-table__head.hide-birth {
  grid-template-columns: 1fr 1fr 140px 1fr 32px;
}

.classroom-student-table__head.hide-gender.hide-contact,
.classroom-student-table__row.hide-gender.hide-contact {
  grid-template-columns: 1fr 1fr 140px 32px;
}

.classroom-student-table__head.hide-birth.hide-contact,
.classroom-student-table__row.hide-birth.hide-contact {
  grid-template-columns: 1fr 1fr 140px 32px;
}

.classroom-student-table__head.hide-birth.hide-gender,
.classroom-student-table__row.hide-birth.hide-gender {
  grid-template-columns: 1fr 1fr 1fr 32px;
}

.classroom-student-table__head.hide-gender.hide-contact.hide-birth,
.classroom-student-table__row.hide-gender.hide-contact.hide-birth {
  grid-template-columns: 1fr 1fr 32px;
}

.student-row-remove {
  justify-self: end;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: var(--space-6);
}

.student-row-remove {
  visibility: hidden;
}

.classroom-student-table__body.is-removal .student-row-remove {
  visibility: visible;
}

@media (max-width: 760px) {
  .classroom-create-section--students .classroom-student-table__mobile-hint {
    display: block;
  }
}

.modal-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.86);
}

.modal-header-actions {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.referendar-card .accent-content {
  padding: var(--space-16);
}

.referendar-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-16);
}

.referendar-list,
.referendar-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.referendar-list header,
.referendar-evaluations header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
}

.referendar-form,
.referendar-eval-form {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  background: var(--color-surface);
}

.referendar-evaluations {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  min-height: 140px;
}

.referendar-evaluations .simple-list,
.referendar-evaluations .status {
  margin-top: var(--space-8);
}

.referendar-evaluation {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-transform: lowercase;
}

.matrix-card {
  --matrix-icon-size: 16px;
  --matrix-icon-size-dot: 10px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.matrix-modal {
  --matrix-icon-size: 16px;
  --matrix-icon-size-dot: 10px;
}

.matrix-card .accent-content {
  padding: var(--space-14) var(--space-18) var(--space-16);
  padding-top: calc(var(--space-12) + var(--space-10));
  gap: var(--space-12);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.matrix-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.matrix-topbar {
  display: grid;
  grid-template-columns: minmax(390px, 440px) minmax(170px, 1fr) minmax(330px, auto) max-content;
  grid-template-areas: "class title search actions";
  align-items: center;
  gap: var(--space-8) var(--space-14);
  padding: 0 0 var(--space-10);
  border: 0;
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0;
  background: transparent;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.matrix-topbar > *,
.matrix-toolbar__select > *,
.matrix-toolbar__student-tools > *,
.matrix-header__actions > * {
  min-width: 0;
}

.matrix-topbar[hidden] {
  display: none !important;
}

.matrix-topbar__group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.matrix-topbar__group--class {
  grid-area: class;
  justify-self: start;
  width: 100%;
  max-width: none;
}

.matrix-topbar__group--search {
  grid-area: search;
  justify-self: stretch;
  max-width: none;
}

.matrix-topbar__label {
  flex: 0 0 auto;
  font-size: var(--fs-body-s);
  color: var(--color-text-muted, #7a5f68);
  text-transform: lowercase;
  white-space: nowrap;
}

.matrix-group-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 240px;
  padding: var(--space-12) var(--space-16);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #f8f3f1;
  box-shadow: 0 10px 20px rgba(145, 129, 129, 0.08);
}

.matrix-group__title {
  font-size: var(--fs-body-s);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #7a5f68);
}

.matrix-group__controls {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.select.select--compact {
  min-width: 160px;
  height: auto;
  min-height: 44px;
  padding: var(--space-8) var(--space-16);
  line-height: 1.2;
}

.matrix-toolbar__select {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap;
}

.matrix-toolbar__class-picker {
  margin: 0;
  min-width: 0;
  flex: 1 1 168px;
}

.matrix-toolbar__class-picker[hidden],
[data-matrix-subject-wrap][hidden] {
  display: none !important;
}

.matrix-toolbar__class-picker .select {
  width: 100%;
  min-height: 40px;
  padding: var(--space-8) calc(var(--space-24) + var(--space-10)) var(--space-8) var(--space-14);
  border-color: var(--widget-control-button-border-color);
}

.matrix-toolbar__select-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.matrix-icon-btn--soft {
  background: var(--widget-control-bg);
  border-color: var(--widget-control-button-border-color);
  box-shadow: var(--widget-control-button-shadow);
}

.matrix-toolbar__select .status {
  margin: 0;
  min-height: 1rem;
  font-size: var(--fs-body-s);
  white-space: nowrap;
  overflow-wrap: anywhere;
  line-height: 1.35;
  flex: 0 1 auto;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-toolbar__select .status[data-tone="ok"] {
  width: 8px;
  max-width: 8px;
  min-height: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a6a4a;
  color: transparent;
  font-size: 0;
  line-height: 0;
  white-space: normal;
  overflow: hidden;
  flex: 0 0 8px;
}

.matrix-toolbar__select .status[data-tone="warning"] {
  color: #b14a43;
  flex: 0 1 120px;
  max-width: 120px;
  text-indent: 0;
}

.matrix-toolbar__search {
  margin: 0;
  min-width: 0;
  max-width: none;
  flex: 1 1 170px;
}

.matrix-toolbar__search .input {
  min-height: 40px;
  border-color: var(--widget-control-button-border-color);
}

.matrix-toolbar__student-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  min-width: 0;
  width: 100%;
  flex-wrap: nowrap;
}

.matrix-toolbar__student-tools[hidden] {
  display: none !important;
}

.matrix-toolbar__random {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.matrix-toolbar__random .btn img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  object-fit: contain;
}

.matrix-toolbar__random .input {
  min-height: 40px;
  width: clamp(104px, 9vw, 136px);
  min-width: 0;
  border-color: var(--widget-control-button-border-color);
}

.matrix-toolbar__search[hidden] {
  display: none !important;
}

@media (max-width: 1500px) {
  .matrix-topbar {
    grid-template-columns: minmax(390px, 440px) minmax(180px, 1fr) max-content;
    grid-template-areas:
      "class title actions"
      "search search search";
  }

  .matrix-topbar__group--class {
    grid-area: class;
  }

  .matrix-header__title {
    grid-area: title;
  }

  .matrix-topbar__group--search {
    grid-area: search;
  }

  .matrix-header__actions {
    grid-area: actions;
  }

  .matrix-topbar__group--search {
    justify-self: stretch;
  }

  .matrix-toolbar__student-tools {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .matrix-card .accent-content {
    padding: var(--space-16);
    padding-top: calc(var(--space-12) + var(--space-8));
    overflow-y: auto;
  }

  .matrix-topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "class"
      "title"
      "search"
      "actions";
    padding: 0 0 var(--space-10);
    gap: var(--space-10);
  }

  .matrix-topbar__group--class {
    grid-area: class;
  }

  .matrix-header__title {
    grid-area: title;
  }

  .matrix-topbar__group--search {
    grid-area: search;
  }

  .matrix-header__actions {
    grid-area: actions;
  }

  .matrix-topbar__group--class,
  .matrix-topbar__group--search {
    max-width: none;
    width: 100%;
    justify-self: stretch;
  }

  .matrix-topbar__group {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .matrix-toolbar__select,
  .matrix-toolbar__student-tools,
  .matrix-header__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .matrix-toolbar__class-picker {
    flex: 1 1 190px;
  }

  .matrix-toolbar__select-actions {
    flex: 0 0 auto;
  }

  .matrix-header__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .matrix-header__actions .matrix-btn:not(.icon) {
    flex: 1 1 128px;
  }

  .matrix-toolbar__student-tools {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .matrix-toolbar__search {
    flex: 1 1 220px;
  }

  .matrix-toolbar__random {
    flex-wrap: wrap;
  }

  .matrix-toolbar__random .input {
    width: 100%;
  }
}

.matrix-weighting {
  margin-top: var(--space-8);
}

.matrix-weight {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-s);
  color: var(--color-text-muted, #7a5f68);
}

.matrix-weight__label {
  text-transform: lowercase;
}

.weight-toggle {
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  color: inherit;
  font-size: var(--fs-body-s);
}

.weight-toggle img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.weight-toggle__value {
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}

.weight-slider {
  width: 160px;
  display: none;
}

.matrix-weight.is-open .weight-slider,
.matrix-category-weight.is-open .weight-slider {
  display: block;
}

.matrix-weight__value {
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}

.matrix-weight__sep {
  opacity: 0.5;
}

.matrix-category-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.matrix-category-header__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.matrix-category-weight {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
  color: var(--color-text-muted, #7a5f68);
}

.matrix-category-weight img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-category-weight .weight-slider {
  width: 90px;
}

.matrix-category-weight__value {
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}

.category-col {
  background: var(--pill-bg);
}

.matrix-header__title h2 {
  margin: 0;
  font-size: 1.05rem;
  text-transform: lowercase;
  color: var(--color-text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.matrix-header__title {
  grid-area: title;
  min-width: 0;
}

.matrix-header__class,
.matrix-header__count {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-10);
  font-size: var(--fs-body-s);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  min-width: 0;
  white-space: nowrap;
}

.matrix-header__meta {
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--color-muted);
  width: 100%;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-header__actions {
  grid-area: actions;
  display: flex;
  gap: var(--space-6);
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.matrix-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 36px;
  padding: var(--space-8) var(--space-10);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  color: var(--color-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  box-shadow: 0 1px 0 rgba(120, 97, 98, 0.08);
}

.matrix-btn.icon {
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 auto;
}

.matrix-btn.icon img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
}

.matrix-btn--primary {
  border-color: var(--color-text-strong);
}

.matrix-btn.small {
  padding: var(--space-4) var(--space-12);
}

.matrix-btn:hover:not(:disabled) {
  background: var(--color-highlight);
  border-color: var(--color-accent);
}

.matrix-btn:focus-visible,
.matrix-icon-btn:focus-visible,
.matrix-node__add:focus-visible,
.matrix-node__view:focus-visible,
.delete-col:focus-visible,
.matrix-cell-detail-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.matrix-btn:disabled,
.matrix-icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.matrix-btn__icon {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
}

.grading-table-shell {
  --matrix-col-index-width: 56px;
  --matrix-col-last-width: 150px;
  --matrix-col-first-width: 150px;
  --matrix-col-total-width: 112px;
  --matrix-leaf-col-min-width: 124px;
  --matrix-leaf-col-width: var(--matrix-leaf-col-min-width);
  --matrix-fill-col-width: 0px;
  --matrix-sticky-left-1: 0px;
  --matrix-sticky-left-2: var(--matrix-col-index-width);
  --matrix-sticky-left-3: calc(var(--matrix-col-index-width) + var(--matrix-col-last-width));
  --matrix-sticky-left-4: calc(var(--matrix-col-index-width) + var(--matrix-col-last-width) + var(--matrix-col-first-width));
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
  max-height: min(58vh, 620px);
}
.grading-table-shell[hidden] {
  display: none !important;
}

.grading-table-scroll {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  max-height: 100%;
  width: 100%;
  background: var(--color-surface);
  padding: 0;
  border-radius: 0;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior-inline: contain;
}
.grading-table-scroll[hidden] {
  display: none !important;
}

.grading-table {
  width: 100%;
  max-width: none;
  min-width: var(--matrix-table-min-width, 100%);
  border-collapse: collapse;
  table-layout: fixed;
}

.grading-table thead {
  position: sticky;
  top: 0;
  z-index: 8;
}

.grading-table th,
.grading-table td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-6) var(--space-8);
  font-size: var(--fs-body-s);
  background: var(--color-surface);
  color: var(--color-text);
  vertical-align: middle;
}

.category-total .value {
  font-weight: var(--fw-semibold);
}

.grading-table th {
  background: var(--color-highlight);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  white-space: nowrap;
  position: sticky;
  top: var(--matrix-sticky-top, 0);
  z-index: 9;
  background-clip: padding-box;
  box-shadow: 0 1px 0 rgba(120, 97, 98, 0.16);
}

.grading-table th.matrix-node {
  background: var(--color-highlight);
  vertical-align: bottom;
  white-space: normal;
  text-align: center;
  position: relative;
  position: sticky;
  width: 92px;
  min-width: 92px;
  max-width: 124px;
}

.grading-table th.matrix-node:focus-within {
  z-index: 32;
}

.matrix-node__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  text-transform: lowercase;
  max-width: 112px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.matrix-node__dot {
  width: var(--matrix-icon-size-dot);
  height: var(--matrix-icon-size-dot);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.grading-table th.matrix-node.has-color {
  background: var(--matrix-node-color);
}

.grading-table th.overall-total.has-color {
  background: var(--matrix-node-color);
}

.matrix-node.has-color .matrix-node__label,
.matrix-node.has-color .matrix-node__controls {
  color: var(--color-text-strong);
}

.matrix-node__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

.matrix-node__weight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.matrix-node__weight .weight-slider {
  width: 130px;
  display: none;
}

.matrix-node__weight.is-open .weight-slider {
  display: block;
}

.matrix-node__add {
  border: 1px dashed var(--color-border);
  background: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.matrix-node__add:hover {
  background: #f2e7ea;
}

.matrix-node__view {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--fs-body-s);
  color: var(--color-text);
}

.matrix-node__view[aria-pressed="true"] {
  background: var(--color-highlight);
  border-color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

.grading-table col.matrix-col-index {
  width: var(--matrix-col-index-width);
}

.grading-table col.matrix-col-lastname,
.grading-table col.matrix-col-firstname {
  width: var(--matrix-col-last-width);
}

.grading-table col.matrix-col-total {
  width: var(--matrix-col-total-width);
}

.grading-table col.matrix-col-leaf {
  width: var(--matrix-leaf-col-width);
}

.grading-table col.matrix-col-add {
  width: 56px;
}

.grading-table col.matrix-col-fill {
  width: var(--matrix-fill-col-width);
}

.grading-table th:first-child,
.grading-table td:first-child {
  text-align: center;
}

.grading-table th.matrix-fixed-col,
.grading-table td:nth-child(1),
.grading-table td:nth-child(2),
.grading-table td:nth-child(3),
.grading-table td:nth-child(4) {
  position: sticky;
  background: var(--color-surface);
  background-clip: padding-box;
}

.grading-table th.matrix-fixed-index,
.grading-table td:nth-child(1) {
  left: var(--matrix-sticky-left-1);
  min-width: var(--matrix-col-index-width);
  max-width: var(--matrix-col-index-width);
}

.grading-table th.matrix-fixed-lastname,
.grading-table td:nth-child(2) {
  left: var(--matrix-sticky-left-2);
  min-width: var(--matrix-col-last-width);
  max-width: var(--matrix-col-last-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grading-table th.matrix-fixed-firstname,
.grading-table td:nth-child(3) {
  left: var(--matrix-sticky-left-3);
  min-width: var(--matrix-col-first-width);
  max-width: var(--matrix-col-first-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grading-table th.matrix-fixed-total,
.grading-table td:nth-child(4) {
  left: var(--matrix-sticky-left-4);
  min-width: var(--matrix-col-total-width);
  max-width: var(--matrix-col-total-width);
  box-shadow: 8px 0 12px -12px rgba(51, 42, 45, 0.55);
}

.grading-table td:nth-child(1),
.grading-table td:nth-child(2),
.grading-table td:nth-child(3),
.grading-table td:nth-child(4) {
  z-index: 4;
}

.grading-table th.matrix-fixed-col {
  z-index: 16;
  background: var(--color-highlight);
}

.grading-table th.section-title {
  display: table-cell;
  border-radius: 0;
  padding: var(--space-8) var(--space-12);
  background: var(--color-highlight);
}

.grading-table .matrix-fill-header,
.grading-table .matrix-fill-cell {
  min-width: 0;
  width: var(--matrix-fill-col-width);
  padding: 0;
  background: var(--color-surface);
  border-left: 0;
  border-right: 0;
  pointer-events: none;
}

.grading-table .matrix-fill-header {
  box-shadow: none;
}

.grading-table th.matrix-fixed-lastname,
.grading-table td:nth-child(2),
.grading-table th.matrix-fixed-firstname,
.grading-table td:nth-child(3) {
  text-align: left;
}

.section-title--stacked {
  vertical-align: middle;
}

.section-controls {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap;
  margin-top: var(--space-6);
}

.section-controls__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.matrix-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.matrix-icon-btn.active {
  background: var(--color-highlight);
}

.section-control[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.add-col {
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--color-accent);
  text-align: center;
  width: 56px;
  min-width: 56px;
}

.add-col-placeholder {
  width: 56px;
  min-width: 56px;
  padding: 0;
  border: none !important;
  background: transparent;
}

.grading-table td {
  text-align: center;
  height: 40px;
}

.grading-table td:nth-child(2),
.grading-table td:nth-child(3) {
  text-align: left;
}

.grading-table td.cell .value {
  min-width: 50px;
  min-height: 28px;
  display: block;
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-8);
  cursor: text;
  user-select: text;
  line-height: 1.25;
}

.grading-table td.cell .value:focus {
  outline: 2px solid var(--color-accent);
}

.grading-table td.cell {
  position: relative;
}

.grading-table td.cell.is-excluded .value {
  color: var(--color-text-muted);
  text-decoration: line-through;
  background: rgba(120, 97, 98, 0.08);
}

.matrix-cell-detail-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.42;
  transition: opacity var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.grading-table td.cell:hover .matrix-cell-detail-btn,
.grading-table td.cell:focus-within .matrix-cell-detail-btn,
.grading-table td.cell.has-comment .matrix-cell-detail-btn,
.grading-table td.cell.is-excluded .matrix-cell-detail-btn {
  opacity: 1;
}

.grading-table td.cell.has-comment .matrix-cell-detail-btn,
.grading-table td.cell.is-excluded .matrix-cell-detail-btn {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: var(--color-highlight);
}

.grading-table td.cell--computed .value {
  font-weight: var(--fw-semibold);
}

.grading-table td.cell--placeholder .value {
  color: var(--color-text-muted);
  cursor: default;
  user-select: none;
}

.grading-table td.hidden,
.grading-table th.hidden {
  display: none;
}

.col-hover {
  background: var(--color-highlight);
}

.matrix-legend {
  position: relative;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-10);
  background: color-mix(in srgb, var(--color-highlight) 42%, #fff);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8) var(--space-10);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.matrix-legend h4 {
  margin: 0;
  font-size: var(--fs-body-s);
  white-space: nowrap;
}

.matrix-legend ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.matrix-legend li {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-body-s);
  line-height: 1.2;
  white-space: nowrap;
  min-height: 22px;
  pointer-events: none;
}

.legend-swatch,
.legend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  margin-right: var(--space-6);
  font-weight: var(--fw-semibold);
  background: #fff;
}

.delete-col,
.matrix-node__settings-btn,
.matrix-node-settings__stats,
.matrix-node-settings__print,
.matrix-node-settings__export {
  opacity: 0.72;
}

.matrix-node:hover .delete-col,
.matrix-node:hover .matrix-node__settings-btn,
.matrix-node:focus-within .delete-col,
.matrix-node:focus-within .matrix-node__settings-btn {
  opacity: 1;
}

.legend-icon img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

@media (max-width: 1080px) {
  .matrix-header__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }

  .matrix-legend {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .grading-table-shell {
    --matrix-col-index-width: 38px;
    --matrix-col-last-width: 86px;
    --matrix-col-first-width: 82px;
    --matrix-col-total-width: 72px;
    --matrix-leaf-col-min-width: 92px;
  }

  .matrix-legend {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .matrix-legend ul {
    flex-wrap: nowrap;
  }

  .matrix-legend li {
    flex: 0 0 auto;
  }

  .grading-table th,
  .grading-table td {
    padding: var(--space-6) var(--space-8);
  }

  .matrix-cell-detail-btn {
    opacity: 0.8;
  }

  .grading-table th.matrix-fixed-total,
  .grading-table td:nth-child(4) {
    position: static;
    min-width: var(--matrix-col-total-width);
    max-width: none;
    box-shadow: none;
  }

  .grading-table th.matrix-fixed-total {
    z-index: 9;
  }

  .grading-table td:nth-child(4) {
    z-index: auto;
  }

  .matrix-modal {
    align-items: flex-start;
    padding: var(--space-12);
  }

  .matrix-modal-content {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    padding: var(--space-18);
  }

  .matrix-export-menu {
    left: 0;
    right: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .matrix-category-children {
    width: 100%;
  }
}

.delete-col {
  border: none;
  background: transparent;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  margin-left: 6px;
}

.delete-col:hover {
  background: #f2e7ea;
}

.delete-col img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.delete-group {
  border: none;
  background: transparent;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.delete-group img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.stats-btn {
  border: none;
  background: transparent;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  margin-left: 6px;
}

.stats-btn:hover {
  background: #f2e7ea;
}

.stats-btn img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  z-index: 1200;
  overflow: auto;
}

.matrix-modal[data-matrix-stats-modal] {
  z-index: 1210;
}

.matrix-choice-modal,
.matrix-details-modal,
.matrix-create-category-modal,
.matrix-add-item-modal,
.matrix-cell-modal,
.matrix-detail-export-modal {
  z-index: 1220;
}

.matrix-modal[hidden] {
  display: none;
}

.matrix-modal-content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  width: min(420px, 90vw);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.matrix-modal-close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.matrix-modal-close img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
}

.matrix-stats-scope {
  margin: var(--space-8) 0 var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.matrix-stats-summary {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.matrix-stats-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-body-m);
}

.matrix-stats-detail {
  margin: 0 0 var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
}

.matrix-stats-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  position: relative;
}

.matrix-stats-actions .matrix-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.matrix-stats-actions .matrix-icon-btn img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
}

.matrix-stats-actions img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
}

.matrix-stats-export-menu {
  display: flex;
  gap: var(--space-8);
}

.matrix-export-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.matrix-header__actions .matrix-btn:not(.icon) {
  flex: 0 1 auto;
  white-space: nowrap;
}

.matrix-header__actions .matrix-btn.icon {
  flex: 0 0 36px;
}

.matrix-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 35;
  display: flex;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  max-width: min(320px, calc(100vw - 32px));
}

.matrix-export-menu[hidden] {
  display: none;
}

.matrix-cell-modal__meta {
  margin: 0 0 var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.matrix-cell-modal__form {
  display: grid;
  gap: var(--space-12);
}

.matrix-cell-modal__textarea {
  min-height: 92px;
  resize: vertical;
}

.matrix-cell-modal__check {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-s);
}

.matrix-cell-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

.matrix-detail-export-form {
  display: grid;
  gap: var(--space-12);
}

.matrix-detail-export-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matrix-detail-export-grid--simple {
  grid-template-columns: 1fr;
}

.matrix-detail-export-grid fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-10);
  margin: 0;
  display: grid;
  gap: var(--space-8);
}

.matrix-detail-export-grid legend {
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.matrix-detail-export-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-s);
  line-height: 1.25;
}

.matrix-detail-export-option input {
  flex: 0 0 auto;
}

.matrix-detail-export-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.matrix-detail-export-error {
  margin: 0;
  color: var(--color-danger, #a33);
  font-size: var(--fs-body-s);
}

@media (max-width: 640px) {
  .matrix-detail-export-grid {
    grid-template-columns: 1fr;
  }
}

.matrix-categories-list {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-highlight) 24%, #fff);
  max-height: min(52vh, 560px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.matrix-modal-scope {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.matrix-scope-students[hidden] {
  display: none;
}

.matrix-categories-modal-content {
  width: min(920px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.matrix-categories-modal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-12);
  padding-right: var(--space-32);
}

.matrix-categories-modal__head h3 {
  margin-bottom: var(--space-4);
}

.matrix-categories-modal__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.matrix-scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.matrix-scope-toggle .matrix-type-option {
  min-height: 32px;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-sm);
}

.matrix-scope-toggle .matrix-type-option:has(input:checked) {
  background: var(--color-highlight);
  color: var(--color-text-strong);
}

.matrix-scope-toggle input {
  margin: 0;
}

.matrix-category-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: var(--fs-body-m);
  width: 100%;
  min-width: 0;
}

.matrix-category-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px auto;
  align-items: center;
  column-gap: var(--space-6);
  width: 100%;
  min-height: 40px;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid transparent;
}

.matrix-category-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  min-width: 0;
}

.matrix-category-item[data-node-type="root"] > .matrix-category-header-row {
  background: color-mix(in srgb, var(--color-highlight) 42%, #fff);
  border-color: var(--color-border-light);
}

.matrix-category-item[data-node-type="category"]:not([data-node-type="root"]) > .matrix-category-header-row {
  background: color-mix(in srgb, var(--color-highlight) 28%, #fff);
}

.matrix-category-label-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  width: 100%;
  justify-self: stretch;
  padding-left: calc(var(--matrix-category-depth, 0) * 20px);
}

.matrix-category-label {
  justify-self: start;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--fw-semibold);
}

.matrix-category-label-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.matrix-category-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
  line-height: 1.1;
  text-transform: lowercase;
}

.matrix-category-grade {
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  min-width: 38px;
  text-align: right;
  justify-self: end;
}

.matrix-category-dot {
  width: var(--matrix-icon-size-dot);
  height: var(--matrix-icon-size-dot);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--color-border);
}

.matrix-category-spacer {
  width: 30px;
  height: 30px;
}

.matrix-category-settings-btn,
.matrix-category-export-btn,
.matrix-category-toggle-btn,
.matrix-category-stats-btn,
.matrix-category-add-btn,
.matrix-category-edit-btn,
.matrix-category-delete-btn {
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.matrix-category-settings-btn:hover,
.matrix-category-export-btn:hover,
.matrix-category-toggle-btn:hover,
.matrix-category-stats-btn:hover,
.matrix-category-add-btn:hover,
.matrix-category-edit-btn:hover,
.matrix-category-delete-btn:hover,
.matrix-category-settings-btn:focus-visible,
.matrix-category-export-btn:focus-visible,
.matrix-category-toggle-btn:focus-visible,
.matrix-category-stats-btn:focus-visible,
.matrix-category-add-btn:focus-visible,
.matrix-category-edit-btn:focus-visible,
.matrix-category-delete-btn:focus-visible {
  background: var(--color-highlight);
  border-color: var(--color-border);
  outline: none;
}

.matrix-category-settings-btn img,
.matrix-category-export-btn img,
.matrix-category-toggle-btn img,
.matrix-category-stats-btn img,
.matrix-category-add-btn img,
.matrix-category-edit-btn img,
.matrix-category-delete-btn img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-category-children[hidden] {
  display: none;
}

.matrix-form-checkbox {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.matrix-type-toggle {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.matrix-type-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-m);
  text-transform: lowercase;
}

.matrix-weight-header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-m);
  text-transform: lowercase;
  color: var(--color-text-strong);
}

.matrix-weight-options {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.matrix-weight-row[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .matrix-categories-modal-content {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .matrix-categories-modal__head {
    grid-template-columns: 1fr;
    padding-right: var(--space-32);
  }

  .matrix-modal-scope {
    align-items: stretch;
  }

  .matrix-scope-toggle {
    width: 100%;
    justify-content: stretch;
  }

  .matrix-scope-toggle .matrix-type-option {
    flex: 1 1 0;
    justify-content: center;
  }

  .matrix-category-header-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-6);
  }

  .matrix-category-label-wrap {
    grid-column: 1 / 2;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    padding-left: min(calc(var(--matrix-category-depth, 0) * 14px), 42px);
  }

  .matrix-category-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.25;
  }

  .matrix-category-grade {
    grid-column: 2 / 3;
    min-width: 40px;
  }

  .matrix-category-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: min(calc(var(--matrix-category-depth, 0) * 14px + 20px), 62px);
  }

  .matrix-category-children {
    width: 100%;
  }
}

.matrix-category-item[data-settings-open="false"] .matrix-category-delete-btn {
  display: none;
}
.matrix-category-item[data-settings-open="false"] .matrix-category-edit-btn {
  display: none;
}

.matrix-category-picker__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
  color: var(--color-text-strong);
}

.matrix-category-color-input {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

.matrix-category-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.matrix-category-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.matrix-category-color-input::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.matrix-node__settings-btn {
  border: none;
  background: transparent;
  padding: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.matrix-node__settings-btn img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-node-settings {
  position: absolute;
  top: auto;
  bottom: calc(100% + var(--space-4));
  right: 0;
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  width: min(320px, 90vw);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  z-index: 40;
  box-sizing: border-box;
}

.matrix-node-settings[hidden] {
  display: none;
}

.matrix-node-settings__section {
  display: grid;
  gap: var(--space-6);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
  color: var(--color-text-strong);
}

.matrix-node-settings__color-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.matrix-node-settings__pipette {
  border: none;
  background: transparent;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.matrix-node-settings__pipette img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-node-settings .input {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-s);
}

.matrix-node-settings__weight {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.matrix-node-settings__icon {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-node-settings__slider {
  flex: 1;
}

.matrix-node-settings__stats,
.matrix-node-settings__print {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-12);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  justify-content: center;
  width: 100%;
}

.matrix-node-settings__stats img,
.matrix-node-settings__print img,
.matrix-node-settings__export img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-choice-modal__content h3 {
  margin: 0 0 var(--space-8);
}

.matrix-choice-modal__content p {
  margin: 0 0 var(--space-16);
  color: var(--color-text-muted);
}

.matrix-choice-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.matrix-details-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.matrix-details-modal__content {
  width: min(460px, calc(100vw - 32px));
  padding-right: var(--space-24);
}

.matrix-details-modal__head {
  display: grid;
  gap: var(--space-4);
  padding-right: var(--space-32);
  margin-bottom: var(--space-16);
}

.matrix-details-modal__head h3 {
  margin: 0;
  text-transform: lowercase;
}

.matrix-details-modal__head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
  text-transform: lowercase;
}

.matrix-color-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  font-size: var(--fs-body-m);
  color: var(--color-text-strong);
  text-transform: lowercase;
}

.matrix-color-picker__toggle {
  border: none;
  background: transparent;
  padding: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.matrix-color-picker__toggle img {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  display: block;
}

.matrix-card img[src*="/public/assets/icons/edfy/"],
.matrix-modal img[src*="/public/assets/icons/edfy/"] {
  width: var(--matrix-icon-size);
  height: var(--matrix-icon-size);
  min-width: var(--matrix-icon-size);
  min-height: var(--matrix-icon-size);
  max-width: var(--matrix-icon-size);
  max-height: var(--matrix-icon-size);
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.matrix-node__dot,
.matrix-category-dot {
  width: var(--matrix-icon-size-dot);
  height: var(--matrix-icon-size-dot);
}

.matrix-color-picker__panel {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  width: min(280px, 90%);
}

.matrix-color-palette {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: var(--space-8);
}

.matrix-color-pill {
  border: 2px solid transparent;
}

.matrix-color-pill.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(201, 152, 167, 0.35);
}

.matrix-details-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.stats-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.stats-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.stats-bar-track {
  flex: 1;
  background: var(--color-highlight);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 8px;
}

.stats-bar-fill {
  height: 100%;
  background: var(--color-accent);
}

.stats-bar-label {
  min-width: 48px;
  text-align: center;
}

.stats-svg-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.stats-svg {
  width: 100%;
  height: auto;
  display: block;
}

.stats-bars--columns {
  flex-direction: row;
  align-items: flex-end;
  gap: 30px;
  padding: 10px 0 0 0;
  border-radius: 18px;
  background: transparent;
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.stats-chart {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  width: 100%;
}

.stats-chart--columns {
  row-gap: var(--space-6);
}

.stats-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260px;
  position: absolute;
  inset: 20px 24px;
  pointer-events: none;
}

.stats-y-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stats-y-tick {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #8f7f7f;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-m);
}

.stats-y-line {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0, 0, 0, 0.25) 0,
    rgba(0, 0, 0, 0.25) 6px,
    transparent 6px,
    transparent 12px
  );
}

.stats-chart-shell {
  background: #f3e9e7;
  border-radius: 26px;
  padding: 20px 24px 26px 70px;
  position: relative;
  min-height: 300px;
}

.stats-x-axis {
  text-align: center;
  font-size: var(--fs-body-s);
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.stats-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  min-width: 120px;
  width: 120px;
  flex: 0 0 120px;
}

.stats-column-value {
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  background: #f7efee;
  border-radius: 999px;
  padding: 8px 16px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  font-size: var(--fs-body-m);
}

.stats-column-bar {
  width: 120px;
  height: 260px;
  border-radius: 70px 70px 20px 20px;
  background: #fff;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}

.stats-column-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}

.stats-column-fill {
  width: 100%;
  background: #8f7f7f;
  border-radius: 70px 70px 20px 20px;
  position: relative;
  z-index: 1;
}

.stats-column-label {
  font-size: var(--fs-body-m);
  color: var(--color-text-strong);
  text-align: center;
  font-weight: var(--fw-semibold);
}

.stats-line-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.stats-line-svg {
  width: 100%;
  height: 120px;
}

.stats-line-path {
  stroke: var(--color-accent);
}

.stats-line-point {
  fill: var(--color-accent);
}

.stats-line-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: var(--space-8);
  font-size: var(--fs-body-s);
  color: var(--color-text-muted);
  text-align: center;
}

.matrix-empty {
  text-align: center;
}

.referendar-eval-form h4 {
  margin: 0;
}

.ratings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-12);
}

.referendar-handlungsfelder {
  flex-wrap: wrap;
}

.referendar-pill {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-12);
  text-align: center;
  cursor: pointer;
  text-transform: lowercase;
}

.referendar-pill.is-active {
  background: var(--color-highlight);
  border-color: var(--color-border);
}
.learning-groups-page .learning-groups-filters { grid-column:1 / -1; display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.learning-groups-filters > .form-field:first-child { width:24rem; max-width:100%; }
.learning-groups-filters > .form-field:last-child { width:14rem; max-width:100%; }
.learning-groups-filters .input,.learning-groups-filters .select { width:100%; min-height:44px; }
.learning-groups-filters + .learning-groups-list + p { grid-column:1 / -1; }
.learning-groups-filters > .form-field { min-width:0; flex:0 1 13rem; }
.learning-groups-filters > .form-field:first-child { flex-basis:24rem; }
.learning-group-subject-marks { display:flex; flex-wrap:wrap; gap:var(--space-8); min-width:0; }
.learning-group-subject-mark { display:inline-flex; align-items:center; min-width:0; max-width:100%; gap:var(--space-8); padding:var(--space-4) var(--space-8); border:1px solid var(--color-base-200); border-radius:var(--radius-sm); background:var(--color-surface); background:color-mix(in srgb,var(--teaching-subject-color, var(--color-surface)) 35%,var(--color-surface)); color:var(--color-text-strong); font-size:var(--fs-body-s); overflow-wrap:anywhere; }
.teaching-subject-dot { display:inline-block; flex:0 0 .85rem; width:.85rem; height:.85rem; border:1px solid var(--color-base-600); border-radius:50%; }
.teaching-subject-dot[hidden] { display:none; }
.learning-group-creation__subject > p { margin:var(--space-12) 0 0; }
.learning-group-subject-rows { display:grid; gap:var(--space-12); width:100%; min-width:0; max-width:100%; }
.learning-group-subject-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .85fr) auto; align-items:end; gap:var(--space-8); width:100%; min-width:0; max-width:100%; }
.learning-groups-card .learning-group-subject-row > .form-field { width:100%; min-width:0; max-width:100%; margin:0; }
.learning-groups-card .learning-group-subject-row > .form-field > .select { width:100%; min-width:0; max-width:100%; min-height:44px; }
.learning-group-subject-remove { min-width:44px; min-height:44px; align-self:start; margin-top:1.8rem; padding:var(--space-8); }
.learning-group-subject-add { margin-top:var(--space-12); }
@media (max-width:600px) {
  .learning-group-subject-row { grid-template-columns:minmax(0, 1fr) auto; }
  .learning-group-subject-row > .form-field:nth-child(2) { grid-column:1; grid-row:2; }
  .learning-group-subject-remove { grid-column:2; grid-row:1; }
}
@media (max-width:600px) {
  .learning-groups-page:not(.is-creating):not(.work-selected-group) { gap:var(--space-12); }
  .learning-groups-page .learning-groups-filters { gap:var(--space-8); }
  .learning-groups-filters > .form-field:first-child { flex-basis:100%; width:100%; }
  .learning-groups-filters > .form-field:not(:first-child) { width:auto; flex-basis:calc(50% - 8px); }
  .learning-groups-page .learning-groups-context { gap:var(--space-8); }
  .learning-groups-page .learning-groups-context > div:empty { display:none; }
  .learning-groups-page .learning-groups-context > p { font-size:var(--fs-body-s); }
  .learning-groups-page .learning-groups-context > .btn { min-height:44px; padding:var(--space-8) var(--space-12); font-size:var(--fs-body-s); }
  .learning-groups-filters .select { padding-inline:var(--space-12) var(--space-32); font-size:var(--fs-body-s); }
}