.account-security-panel {
  display: grid;
  gap: 24px;
}

.account-security-section {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface, #fff);
}

.account-security-section h3 {
  margin: 0;
  color: var(--ink, #0f172a);
  font:
    800 20px/1.25 Manrope,
    sans-serif;
}

.account-security-intro,
.account-security-danger-zone > p {
  margin: 8px 0 20px;
  color: var(--muted, #64748b);
  font-size: 14px;
  line-height: 1.55;
}

.account-security-password-form {
  display: grid;
  gap: 16px;
}

.account-security-password-form label {
  display: grid;
  gap: 7px;
}

.account-security-password-control {
  display: grid;
  gap: 7px;
}

.account-security-password-form label > span {
  color: var(--ink, #0f172a);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-security-password-form input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line, #dddce5);
  border-radius: 14px;
  outline: none;
  color: var(--ink, #0f172a);
  background: #f8fafc;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.account-security-password-form input:focus {
  border-color: var(--purple, #5b4bff);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 75, 255, 0.12);
}

.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 52px !important;
}

/* Keep Novixa's right-side toggle and hide Edge's duplicate native eye. */
.password-field input::-ms-reveal,
.password-field input::-ms-clear {
  display: none;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--muted, #64748b);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--purple, #5b4bff);
  background: rgba(91, 75, 255, 0.08);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--purple, #5b4bff);
  outline-offset: 1px;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-eye-slash {
  display: none;
}

.password-toggle.is-visible .password-eye-slash {
  display: block;
}

.account-security-password-form .auth-password-help {
  margin: -2px 0 0;
  color: var(--muted, #64748b);
  font-size: 12px;
  line-height: 1.5;
}

.account-security-password-form .auth-submit {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
}

.account-security-danger-zone {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(254, 242, 242, 0.72);
}

.account-security-danger-zone h3 {
  color: #991b1b;
}

@media (max-width: 520px) {
  .account-security-section {
    padding: 18px;
    border-radius: 16px;
  }
}

/* Dashboard shared components */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

.page-title small {
  color: #9b99a7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.page-title h1 {
  margin: 4px 0 6px;
  font: 800 25px Manrope;
  letter-spacing: -0.7px;
}

.page-title p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.page-actions {
  display: flex;
  gap: 9px;
}

.dash-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: #595869;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.dash-button.primary {
  border-color: var(--purple);
  color: #fff;
  background: var(--purple);
  box-shadow: 0 6px 15px rgba(108, 80, 232, 0.17);
}

.dash-button:hover {
  transform: translateY(-1px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.stat-card {
  position: relative;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-top > span:first-child {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 16px;
}

.stat-top > span.cyan {
  background: #e2f7f8;
  color: #2d9ba6;
}

.stat-top > span.orange {
  background: #fff0e6;
  color: #df7e45;
}

.stat-top > span.green {
  background: #e5f7ed;
  color: #2d9667;
}

.stat-trend {
  padding: 3px 6px;
  border-radius: 7px;
  color: #25885e;
  background: #e8f7ef;
  font-size: 8px;
  font-weight: 700;
}

.stat-card h3 {
  margin: 16px 0 2px;
  font: 800 25px Manrope;
}

.stat-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: 18px;
}

.content-grid.equal {
  grid-template-columns: 1fr 1fr;
}

.student-course-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 18px;
}

.student-course-detail-main,
.student-course-detail-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
}

.student-course-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.student-course-detail-heading h2 {
  margin: 0;
  color: #172033;
  font-size: 21px;
}

.student-course-detail-heading p {
  margin: 5px 0 0;
  color: #7a8391;
  font-size: 12px;
}

.student-course-detail-description {
  margin: 0;
  color: #626c7b;
  font-size: 13px;
  line-height: 1.75;
}

.student-course-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-course-detail-sidebar h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
}

.student-course-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.student-course-detail-list > div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #eceff2;
}

.student-course-detail-list dt {
  color: #77808e;
  font-size: 11px;
}

.student-course-detail-list dd {
  margin: 0;
  color: #303949;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.card {
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
}

.card-pad {
  padding: 19px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}

.card-header h2 {
  margin: 0;
  font: 700 14px Manrope;
}

.card-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.card-link {
  border: 0;
  background: none;
  color: var(--purple);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.chart-wrap {
  height: 220px;
  display: flex;
  align-items: end;
  gap: 9px;
  padding-top: 18px;
}

.chart-column {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: 7px;
}

.chart-bars {
  height: calc(100% - 22px);
  width: 100%;
  display: flex;
  gap: 3px;
  align-items: end;
}

.chart-bar {
  flex: 1;
  min-height: 4px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(#8872ed, #6850dd);
}

.chart-bar.secondary {
  background: #dcd7f6;
}

.chart-column > small {
  font-size: 8px;
  color: var(--muted);
}

.donut-wrap {
  display: grid;
  place-items: center;
  padding: 12px;
}

.donut {
  --value: 72;
  width: 145px;
  height: 145px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--purple) calc(var(--value) * 1%), #eceaf2 0);
  position: relative;
}

.donut:before {
  content: "";
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff;
}

.donut-center {
  z-index: 1;
  text-align: center;
}

.donut-center strong,
.donut-center small {
  display: block;
}

.donut-center strong {
  font: 800 26px Manrope;
}

.donut-center small {
  font-size: 9px;
  color: var(--muted);
}

.enrollment-filters {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.enrollment-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.enrollment-filter-grid label {
  display: grid;
  gap: 6px;
}

.enrollment-filter-grid label > span {
  color: #596273;
  font-size: 11px;
  font-weight: 700;
}

.enrollment-filter-grid input,
.enrollment-filter-grid select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #dfe3e8;
  border-radius: 9px;
  background: #fff;
}

.enrollment-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.enrollment-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.enrollment-page-summary {
  color: #687181;
  font-size: 12px;
  font-weight: 700;
}

.enrollment-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.enrollment-form-note {
  padding: 13px 14px;
  border: 1px solid #d9d6ff;
  border-radius: 11px;
  background: #f6f5ff;
}

.teacher-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.teacher-student-card {
  display: grid;
  gap: 14px;
}

.teacher-student-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.teacher-student-card-header h3 {
  margin: 0;
  font-size: 15px;
}

.teacher-student-card-header p {
  margin: 4px 0 0;
  color: #7a8391;
  font-size: 11px;
}

.teacher-student-course {
  display: grid;
  gap: 4px;
}

.teacher-student-course span {
  color: #687181;
  font-size: 11px;
}

.teacher-student-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.teacher-student-meta span {
  padding: 6px 8px;
  border-radius: 8px;
  background: #f1f3f5;
  color: #596273;
  font-size: 10px;
  font-weight: 700;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 17px;
}

.legend span {
  font-size: 9px;
  color: var(--muted);
}

.legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--purple);
}

.legend span:nth-child(2) i {
  background: #dcd7f6;
}

.table-card {
  margin-top: 18px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 11px 17px;
  background: #fafafd;
  color: #92909e;
  font-size: 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.data-table td {
  padding: 13px 17px;
  border-top: 1px solid #f0eff4;
  font-size: 10px;
}

.table-person {
  display: flex;
  align-items: center;
  gap: 9px;
}

.table-person .avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.table-person strong,
.table-person small {
  display: block;
}

.table-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 9px;
  background: #e8f7ef;
  color: #25885e;
  font-size: 8px;
  font-weight: 700;
}

.status.pending {
  color: #ca753e;
  background: #fff0e5;
}

.status.draft {
  color: #777584;
  background: #eeeef2;
}

.status.live {
  color: #d44b52;
  background: #ffe8e8;
}

.progress-line {
  width: 100px;
  height: 5px;
  border-radius: 5px;
  background: #eceaf1;
  overflow: hidden;
}

.progress-line i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--purple);
}

.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid #f0eff4;
}

.activity-item:first-child {
  border: 0;
}

.activity-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 13px;
}

.activity-item strong {
  display: block;
  font-size: 10px;
}

.activity-item p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.activity-item time {
  color: #aaa8b5;
  font-size: 8px;
}

.welcome-card {
  position: relative;
  min-height: 170px;
  margin-bottom: 18px;
  padding: 26px 28px;
  border-radius: 21px;
  color: #fff;
  background: linear-gradient(125deg, #6750db, #967ff0);
  overflow: hidden;
}

.welcome-card:after {
  content: "✦";
  position: absolute;
  right: 5%;
  top: -30px;
  color: rgba(255, 255, 255, 0.17);
  font-size: 180px;
}

.welcome-card small {
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.8;
}

.welcome-card h2 {
  margin: 8px 0;
  font: 700 23px Manrope;
}

.welcome-card p {
  max-width: 470px;
  color: #e3dffa;
  font-size: 11px;
}

.welcome-card .dash-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  margin-top: 9px;
  border: 0;
  color: var(--purple);
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.course-card {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.course-thumb {
  height: 115px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font: 800 32px Manrope;
}

.course-thumb.purple {
  background: #eae4ff;
  color: #6b4de0;
}

.course-thumb.blue {
  background: #dcf1f5;
  color: #3196a6;
}

.course-thumb.orange {
  background: #ffe4d8;
  color: #d87551;
}

.course-thumb.green {
  background: #e0f3e9;
  color: #359265;
}

.course-thumb.yellow {
  background: #fff1c9;
  color: #c4912f;
}

.course-card-body {
  padding: 10px 4px 4px;
}

.course-card small {
  font-size: 8px;
  color: var(--muted);
}

.course-card h3 {
  margin: 4px 0 11px;
  font: 700 12px Manrope;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--muted);
}

.course-card .progress-line {
  width: 100%;
  margin: 8px 0 6px;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.schedule-item {
  display: grid;
  grid-template-columns: 45px 5px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 11px;
  background: #fafafd;
}

.schedule-item > time {
  font-size: 9px;
  font-weight: 700;
}

.schedule-color {
  width: 4px;
  height: 33px;
  border-radius: 4px;
  background: var(--purple);
}

.schedule-color.cyan {
  background: var(--cyan);
}

.schedule-color.orange {
  background: #f3a168;
}

.schedule-item strong,
.schedule-item small {
  display: block;
  font-size: 9px;
}

.schedule-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.grade-ring {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-donut {
  --value: 85;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--purple) calc(var(--value) * 1%), #eceaf2 0);
  font-size: 9px;
  font-weight: 800;
}

.mini-donut:after {
  content: attr(data-label);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.info-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}

.info-card .large-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 18px;
}

.info-card h3 {
  margin: 14px 0 5px;
  font: 700 13px Manrope;
}

.info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.info-card footer {
  display: flex;
  justify-content: space-between;
  padding: 13px 0 0;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 9px;
}

.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.filter-input {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #6d6b79;
  font-size: 10px;
  outline: 0;
}

.empty-state {
  padding: 70px 20px;
  text-align: center;
}

.empty-state span {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: auto;
  border-radius: 18px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 25px;
}

.empty-state h3 {
  margin: 17px 0 7px;
  font: 700 16px Manrope;
}

.empty-state p {
  margin: 0 auto 18px;
  max-width: 350px;
  color: var(--muted);
  font-size: 11px;
}

.insight-card {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #292258, #5141a8);
  color: #fff;
  overflow: hidden;
}

.insight-card:after {
  content: "✦";
  position: absolute;
  right: 15px;
  top: 6px;
  font-size: 65px;
  color: rgba(255, 255, 255, 0.08);
}

.insight-card h3 {
  font: 700 14px Manrope;
}

.insight-card p {
  color: #d8d3f1;
  font-size: 10px;
  line-height: 1.6;
}

.insight-card .dash-button {
  border: 0;
  color: #4736aa;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.setting-row:first-child {
  border: 0;
}

.setting-row strong,
.setting-row small {
  display: block;
}

.setting-row strong {
  font-size: 11px;
}

.setting-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.switch {
  width: 37px;
  height: 21px;
  padding: 3px;
  border: 0;
  border-radius: 15px;
  background: #d9d8df;
  cursor: pointer;
}

.switch:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}

.switch.on {
  background: var(--purple);
}

.switch.on:after {
  transform: translateX(16px);
}
.api-record-list {
  display: grid;
  gap: 10px;
}

.api-record {
  align-items: center;
  border: 1px solid var(--border, #e8e8ef);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 14px 16px;
}

.api-record > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.api-record strong,
.api-record small,
.api-record span {
  overflow-wrap: anywhere;
}

.api-record small {
  color: var(--muted, #6f7280);
}

/* Teacher assessment action row — keeps all quiz/exam buttons on one line. */
.teacher-assessment-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Teacher quiz/exam cards become full-width rectangle rows. */
[data-teacher-assessment-list] .api-record {
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: 16px;
  padding: 16px 18px;
  border-color: #dfe4ea;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 7px 22px rgb(31 39 56 / 4%);
}

[data-teacher-assessment-list] .api-record > .teacher-assessment-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

[data-teacher-assessment-list]
  .api-record
  > .teacher-assessment-actions
  .teacher-assessment-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

[data-teacher-assessment-list] .teacher-assessment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #dfe3ee;
  border-radius: 999px;
  color: #525b70;
  background: #f7f8fb;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-teacher-assessment-list] .teacher-assessment-course-identity {
  display: block;
  margin-top: 6px;
  color: #667085;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 1050px) {
  [data-teacher-assessment-list] .api-record {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-teacher-assessment-list] .api-record > .teacher-assessment-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 700px) {
  [data-teacher-assessment-list] .api-record {
    grid-template-columns: 1fr;
  }

  [data-teacher-assessment-list] .teacher-assessment-status {
    justify-self: start;
  }

[data-teacher-assessment-list] .api-record > .teacher-assessment-actions {
    grid-column: auto;
    width: 100%;
  }
}

/* Teacher homework cards become full-width rectangle rows. */
[data-teacher-homework-list] .api-record {
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: 16px;
  padding: 16px 18px;
  border-color: #dfe4ea;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 7px 22px rgb(31 39 56 / 4%);
}

[data-teacher-homework-list] .api-record > .teacher-assessment-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

[data-teacher-homework-list]
  .api-record
  > .teacher-assessment-actions
  .teacher-assessment-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

[data-teacher-homework-list] .teacher-assessment-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #dfe3ee;
  border-radius: 999px;
  color: #525b70;
  background: #f7f8fb;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-teacher-homework-list] .teacher-assessment-course-identity {
  display: block;
  margin-top: 6px;
  color: #667085;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 1050px) {
  [data-teacher-homework-list] .api-record {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [data-teacher-homework-list] .api-record > .teacher-assessment-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 700px) {
  [data-teacher-homework-list] .api-record {
    grid-template-columns: 1fr;
  }

  [data-teacher-homework-list] .teacher-assessment-status {
    justify-self: start;
  }

  [data-teacher-homework-list] .api-record > .teacher-assessment-actions {
    grid-column: auto;
    width: 100%;
  }
}

/* Homework toolbar with stats + status filters. */
.teacher-homework-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e6e9f1;
  border-radius: 16px;
  background: #fff;
}

.teacher-homework-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.teacher-homework-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #667085;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
}

.teacher-homework-stat strong {
  color: #1c2333;
  font-size: 1.05rem;
  font-weight: 800;
}

.teacher-homework-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.teacher-homework-filter {
  padding: 7px 13px;
  border: 1px solid #e0e4ee;
  border-radius: 999px;
  color: #525b70;
  background: #f7f8fb;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.teacher-homework-filter span {
  margin-left: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  opacity: 0.75;
}

.teacher-homework-filter:hover {
  border-color: #c9cfe0;
  color: #1c2333;
}

.teacher-homework-filter.is-active {
  border-color: #5a45e0;
  color: #fff;
  background: #5a45e0;
}

/* Homework submission status pills. */
.homework-submission-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #dfe3ee;
  border-radius: 999px;
  color: #525b70;
  background: #f7f8fb;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.homework-submission-status.is-submitted {
  color: #2563eb;
  background: #eef4ff;
  border-color: #d3e2ff;
}

.homework-submission-status.is-late {
  color: #b45309;
  background: #fdf4e6;
  border-color: #f3ddb3;
}

.homework-submission-status.is-graded {
  color: #15803d;
  background: #ecfdf1;
  border-color: #c8efd6;
}

.homework-submission-status.is-returned {
  color: #7c3aed;
  background: #f5efff;
  border-color: #e2d3ff;
}

.homework-submission-status.is-in_progress,
.homework-submission-status.is-in-progress {
  color: #64748b;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* Homework assignment detail modal. */
.homework-detail-summary {
  display: grid;
  gap: 14px;
}

.homework-detail-block > strong {
  display: block;
  margin: 14px 0 6px;
  color: #1c2333;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.homework-detail-block > p {
  margin: 0;
  color: #525b70;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.homework-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.homework-question-list {
  display: grid;
  gap: 8px;
}

.homework-question-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e8ebf3;
  border-radius: 12px;
  background: #fbfcfe;
}

.homework-question-item > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.homework-question-item strong {
  color: #1c2333;
  font-size: 0.9rem;
  line-height: 1.45;
}

.homework-question-item small {
  color: #667085;
  font-size: 0.74rem;
  text-transform: capitalize;
}

/* Grading modal student strip. */
.homework-grade-student-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e6e9f1;
  border-radius: 12px;
  background: #fbfcfe;
}

.homework-grade-student-strip strong {
  color: #1c2333;
  font-size: 0.95rem;
}

.homework-grade-student-strip small {
  color: #667085;
  font-size: 0.78rem;
}

.homework-grade-student-strip .homework-submission-status {
  margin-left: auto;
}

.homework-model-answer {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #c7b9ff;
  border-radius: 8px;
  background: #f6f4ff;
}

.homework-model-answer strong {
  display: block;
  margin-bottom: 4px;
  color: #5749ed;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.homework-model-answer p {
  margin: 0;
  color: #4a4458;
  font-size: 0.85rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.homework-answer-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

/* Submissions roster modal. */
.homework-roster {
  display: grid;
  gap: 12px;
}

.homework-roster-toolbar {
  display: flex;
  justify-content: flex-end;
}

.homework-roster-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.api-record .private-session-badge {
  display: inline-block;
  align-self: flex-start;
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  color: #5749ed;
  background: #efedff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.api-record a,
.button-link {
  color: var(--primary, #5a45e0);
  font-weight: 700;
  text-decoration: none;
}

.feature-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.toast-region {
  bottom: 20px;
  display: grid;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  position: fixed;
  right: 20px;
  z-index: 1000;
}

.toast {
  background: #1d1d29;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(20, 20, 35, 0.2);
  color: #fff;
  opacity: 0;
  padding: 13px 16px;
  transform: translateY(8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-error {
  background: #9d2430;
}

.toast-success {
  background: #19714b;
}

@media (max-width: 700px) {
  .api-record,
  .feature-metrics {
    grid-template-columns: 1fr;
  }

  .toast-region {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* Action menu */
.action-menu {
  position: relative;
  display: inline-block;
}

.action-menu-trigger {
  justify-self: start;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  color: var(--muted, #666);
}
.action-menu-trigger:hover {
  background: var(--surface-hover, #f0f0f0);
}
.action-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 160px;
  padding: 4px 0;
}
.action-menu-dropdown.open {
  display: block;
}
.action-menu-dropdown button,
.action-menu-dropdown .dropdown-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.action-menu-dropdown button:hover,
.action-menu-dropdown .dropdown-link:hover {
  background: #f5f5fa;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  padding: 20px;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.modal-dialog {
  background: #fff;
  border-radius: 12px;
  max-height: 85vh;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.modal-small {
  max-width: 400px;
}
.modal-medium {
  max-width: 560px;
}
.modal-large {
  max-width: 720px;
}
.modal-preview {
  display: flex;
  flex-direction: column;
  width: min(1120px, 96vw);
  max-width: 1120px;
  height: min(860px, 92vh);
  overflow: hidden;
}
.modal-preview .modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.modal-preview .modal-footer {
  display: flex;
  justify-content: flex-end;
}
.protected-file-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 240px;
  height: 100%;
  border-radius: 10px;
  overflow: auto;
  background: #f4f5f9;
}

.assessment-grading-workspace {
  display: grid;
  gap: 18px;
}

.assessment-grading-workspace .builder-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.assessment-grading-workspace .builder-roster-table-wrap {
  overflow-x: auto;
}

.assessment-grading-workspace .builder-roster-table {
  width: 100%;
  border-collapse: collapse;
}

.assessment-grading-workspace .builder-roster-table th,
.assessment-grading-workspace .builder-roster-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #e3e6ef;
  text-align: left;
  vertical-align: top;
}

.assessment-grading-workspace .builder-roster-grade-form {
  display: grid;
  grid-template-columns: minmax(90px, 0.35fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.assessment-grading-workspace .builder-roster-grade-form label {
  display: grid;
  gap: 5px;
  color: #657084;
  font-size: 0.78rem;
  font-weight: 700;
}

.assessment-grading-workspace .builder-roster-grade-form input {
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #d9deea;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .assessment-grading-workspace .builder-roster-grade-form {
    grid-template-columns: 1fr;
  }
}

.protected-file-preview.is-view-only {
  user-select: none;
  -webkit-user-select: none;
}

.protected-file-preview.is-view-only img {
  pointer-events: none;
}
.protected-file-preview-pdf {
  min-height: 65vh;
}
.protected-file-frame {
  width: 100%;
  height: 100%;
  min-height: 65vh;
  border: 0;
  background: #fff;
}
.protected-file-image {
  display: block;
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
}
.protected-file-video {
  display: block;
  width: 100%;
  max-height: 68vh;
  background: #111;
}
.protected-file-audio {
  width: min(680px, calc(100% - 32px));
  margin: 60px 16px;
}
.protected-file-text {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 22px;
  overflow: auto;
  color: #202636;
  background: #fff;
  font:
    13px/1.65 Consolas,
    "Courier New",
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.protected-file-message {
  max-width: 560px;
  padding: 50px 24px;
  text-align: center;
}
.protected-file-message strong {
  display: block;
  margin-bottom: 8px;
  color: #252a38;
  font:
    700 18px Manrope,
    sans-serif;
}
.protected-file-message p {
  margin: 0;
  color: #687180;
  line-height: 1.65;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}
.modal-header h2 {
  margin: 0;
  font:
    700 18px Manrope,
    sans-serif;
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  color: #999;
  line-height: 1;
}
.modal-close:hover {
  color: #333;
}
.modal-body {
  padding: 20px 24px;
}
.modal-footer {
  padding: 0 24px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.announcement-editor-grid,
.poll-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.announcement-editor-grid .form-span-2,
.poll-editor-grid .form-span-2 {
  grid-column: 1 / -1;
}

.announcement-editor-grid .modal-field,
.poll-editor-grid .modal-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.announcement-editor-grid .modal-field > span,
.poll-editor-grid .modal-field > span,
.poll-editor-options legend {
  color: #46515f;
  font-size: 12px;
  font-weight: 800;
}

.announcement-editor-grid input,
.announcement-editor-grid select,
.announcement-editor-grid textarea,
.poll-editor-grid input:not([type="checkbox"]),
.poll-editor-grid select,
.poll-editor-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #d8dee4;
  border-radius: 11px;
  color: #172033;
  background: #fff;
  font: inherit;
  outline: none;
}

.announcement-editor-grid textarea,
.poll-editor-grid textarea {
  min-height: 120px;
  resize: vertical;
}

.announcement-editor-grid input:focus,
.announcement-editor-grid select:focus,
.announcement-editor-grid textarea:focus,
.poll-editor-grid input:focus,
.poll-editor-grid select:focus,
.poll-editor-grid textarea:focus {
  border-color: #5749ed;
  box-shadow: 0 0 0 3px rgb(87 73 237 / 10%);
}

.announcement-file-field {
  padding: 15px;
  border: 1px dashed #c9c4f7;
  border-radius: 13px;
  background: #faf9ff;
}

.announcement-file-field input[type="file"] {
  padding: 6px;
  background: #fff;
}

.announcement-file-field input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 12px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #5749ed;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.announcement-file-field small {
  color: #737b88;
}

.poll-editor-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.poll-editor-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #dfe3e7;
  border-radius: 11px;
  background: #f8fafb;
  font-weight: 700;
  cursor: pointer;
}

.poll-editor-switch input {
  width: 18px;
  height: 18px;
  accent-color: #5749ed;
}

.poll-editor-options {
  margin: 0;
  padding: 16px;
  border: 1px solid #e0e3e8;
  border-radius: 13px;
  background: #fbfcfd;
}

.poll-editor-options legend {
  padding: 0 7px;
}

.poll-editor-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.confirm-message {
  margin: 0 0 16px;
  font-size: 14px;
  color: #555;
}
.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* User detail grid */
.user-detail-grid p {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f5;
  margin: 0;
  font-size: 13px;
}
.user-detail-grid p:last-child {
  border-bottom: none;
}
.user-detail-grid strong {
  font-weight: 600;
  color: #333;
}

/* Curriculum grid */
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.curriculum-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.curriculum-card-header h2 {
  margin: 0;
  font:
    700 16px Manrope,
    sans-serif;
}
.curriculum-card-header small {
  color: var(--muted, #888);
  font-size: 12px;
}
.curriculum-card-stats {
  display: flex;
  gap: 12px;
}
.curriculum-card-stats div {
  flex: 1;
  text-align: center;
}
.curriculum-card-stats span {
  display: block;
  font-size: 10px;
  color: var(--muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.curriculum-card-stats strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
}
.curriculum-card-status {
  margin-top: 4px;
}
.curriculum-card-actions {
  margin-top: 4px;
}
.curriculum-children {
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 4px;
}
.curriculum-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hierarchy-grade {
  padding: 8px;
  background: #fafafa;
  border-radius: 6px;
}
.hierarchy-grade strong {
  font-size: 13px;
  font-weight: 600;
}
.hierarchy-subjects {
  margin: 6px 0 0;
  padding: 0 0 0 16px;
  list-style: none;
}
.hierarchy-subjects li {
  font-size: 12px;
  padding: 2px 0;
  color: #555;
}
.hierarchy-subjects li small {
  color: #999;
}

/* Schedule filter area */
.admin-schedule-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.admin-schedule-filters label {
  min-width: 0;
  color: #687180;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.admin-schedule-filters label span {
  display: block;
  margin: 0 0 6px 4px;
}
.admin-schedule-filters select {
  width: 100%;
  height: 39px;
  padding: 0 32px 0 12px;
  border: 1px solid #dfe3e7;
  border-radius: 15px;
  background: #fff;
  color: #232a38;
  font: 600 11px Manrope;
}
.admin-schedule-filters select:disabled {
  color: #9ca3af;
  background: #f6f7f9;
  cursor: not-allowed;
}

@media (max-width: 980px) {
  .admin-schedule-filters {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-schedule-filters {
    grid-template-columns: 1fr;
  }
}

/* Form helpers */
.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 4px;
}
.form-group select,
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d0d0dd;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.form-group input[type="file"] {
  min-height: 48px;
  padding: 6px;
  color: #5f6877;
  line-height: 34px;
  cursor: pointer;
}
.form-group input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 12px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--purple, #5749ed);
  font: inherit;
  font-weight: 700;
  line-height: 20px;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}
.form-group input[type="file"]:hover::file-selector-button {
  background: #493bdc;
}
.form-group input[type="file"]:active::file-selector-button {
  transform: translateY(1px);
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary, #6c5ce7);
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}
.form-row {
  display: flex;
  gap: 12px;
}
.form-row .form-group {
  flex: 1;
}

/* Badge helpers */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.badge-warning {
  background: #fff3cd;
  color: #856404;
}
.badge-success {
  background: #d4edda;
  color: #155724;
}
.badge-error {
  background: #f8d7da;
  color: #721c24;
}

/* Button helpers */
.button-small {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
}
.button-danger {
  background: #e74c3c;
  color: #fff;
}
.button-secondary {
  background: #f0f0f5;
  color: #333;
}

/* Connected management views */
.seven-row {
  grid-template-columns: 1fr 1.35fr 0.85fr 1fr 0.9fr 0.8fr 0.35fr;
}
.schedule-row {
  grid-template-columns: 0.6fr 0.95fr 1.5fr 1.15fr 0.85fr 0.7fr 0.3fr;
}
.certificate-row {
  grid-template-columns: 1.25fr 1.35fr 1fr 0.85fr 0.75fr 0.3fr;
}
.recent-users-title {
  padding-left: 25px;
  /* margin-bottom: 14px; */
}
.recent-user-action {
  justify-self: start;
  text-decoration: none;
  color: #5548ed;
  background: #eeecff;
  font-weight: 700;
}
[data-admin-list="recent-payments"] .six-row {
  grid-template-columns: 0.78fr 1.45fr 0.9fr 1fr 0.9fr 0.78fr;
  column-gap: 12px;
}

.week-timetable {
  margin: 0 0 24px;
  overflow: hidden;
  text-align: left;
}
.week-timetable-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid #e3e6ea;
}
.week-timetable-head strong,
.week-timetable-head small {
  display: block;
}
.week-timetable-head strong {
  font: 800 16px Manrope;
}
.week-timetable-head small,
.week-timetable-head > span {
  margin-top: 4px;
  color: #687180;
  font-size: 11px;
}
.week-timetable-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(125px, 1fr));
  min-width: 875px;
}
.week-day {
  min-height: 220px;
  padding: 12px 8px;
  border-right: 1px solid #e3e6ea;
  background: #fff;
}
.week-day:last-child {
  border-right: 0;
}
.week-day h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 3px 12px;
  color: #687180;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.week-day h3 small {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #5548ed;
  background: #eeecff;
}
.week-event {
  display: block;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid #d9d6ff;
  border-radius: 12px;
  background: #f3f1ff;
}
.week-event time,
.week-event strong,
.week-event small,
.week-event span {
  display: block;
}
.week-event time {
  color: #5548ed;
  font-size: 9px;
  font-weight: 800;
}
.week-event strong {
  margin: 4px 0;
  font-size: 11px;
  line-height: 1.25;
}
.week-event small {
  color: #687180;
  font-size: 9px;
}
.week-event span {
  margin-top: 6px;
  color: #5548ed;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.week-event.is-cancelled {
  border-color: #ffd2d5;
  background: #fff0f1;
  opacity: 0.8;
}
.week-event.is-rescheduled {
  border-color: #aee5c3;
  background: #effaf3;
}
.week-empty {
  margin: 28px 0;
  color: #a0a6b0;
  font-size: 10px;
  text-align: center;
}

.professional-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.form-span-2 {
  grid-column: 1/-1;
}
.check-field {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #454c59;
  font-size: 13px;
}
.check-field input {
  width: auto;
}
.choice-input {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.choice-input input[type="radio"] {
  width: auto;
}
.teacher-assignment-list {
  width: 100%;
}
.teacher-assignment-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) 0.55fr auto;
  align-items: center;
  gap: 18px;
  min-height: 90px;
  padding: 16px 20px;
  border-bottom: 1px solid #e3e6ea;
}
.teacher-assignment-row:last-child {
  border-bottom: 0;
}
.assignment-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.assignment-main > span {
  padding: 5px 8px;
  border-radius: 6px;
  background: #f0f2f5;
  font-size: 8px;
  font-weight: 800;
}
.assignment-main strong,
.assignment-main small {
  display: block;
}
.assignment-main small {
  margin-top: 5px;
  color: #687180;
  font-size: 10px;
}
.assignment-meta {
  display: flex;
  gap: 14px;
  color: #687180;
  font-size: 10px;
}
.assignment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.button-small.primary {
  color: #fff;
  background: #5749ed;
}
.button-small.danger {
  color: #d53743;
  background: #ffebed;
}
.feature-empty {
  padding: 38px;
  text-align: center;
}
.feature-empty p {
  margin: 8px 0 0;
  color: #687180;
}

.report-modal {
  min-height: 250px;
}
.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}
.report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.report-metric {
  padding: 16px;
  border: 1px solid #e3e6ea;
  border-radius: 16px;
  background: #fafafd;
}
.report-metric span,
.report-metric strong,
.report-metric small {
  display: block;
}
.report-metric span {
  color: #687180;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.report-metric strong {
  margin: 7px 0;
  font: 800 20px Manrope;
}
.report-metric small {
  color: #687180;
  font-size: 9px;
}
.report-table {
  overflow: auto;
  border: 1px solid #e3e6ea;
  border-radius: 15px;
}
.report-table-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(105px, 1fr);
  min-width: 620px;
  padding: 11px 12px;
  border-bottom: 1px solid #e3e6ea;
  font-size: 10px;
}
.report-table-row:last-child {
  border-bottom: 0;
}
.report-table-head {
  color: #687180;
  background: #fafafd;
  font-size: 8px;
  letter-spacing: 0.7px;
}

.curriculum-reference {
  grid-column: 1/-1;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #e3e6ea;
}
.curriculum-reference-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 20px;
}
.curriculum-reference-head span {
  color: #5749ed;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
.curriculum-reference-head h2 {
  margin: 5px 0 0;
  font: 800 21px Manrope;
}
.curriculum-reference-head p {
  max-width: 500px;
  margin: 0;
  color: #687180;
  font-size: 11px;
  line-height: 1.5;
}
.curriculum-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.curriculum-directory-card {
  padding: 18px;
  border: 1px solid #dfe3e7;
  border-radius: 18px;
  background: #fff;
}
.curriculum-directory-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}
.curriculum-number {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #5548ed;
  background: #eeecff;
  font-size: 10px;
  font-weight: 800;
}
.curriculum-directory-card h3 {
  margin: 0;
  font: 800 14px Manrope;
}
.curriculum-directory-card > div p {
  margin: 3px 0;
  color: #687180;
  font-size: 10px;
}
.curriculum-directory-card > button {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  color: #5548ed;
  background: none;
  font-size: 10px;
  font-weight: 800;
}
.catalog-groups {
  margin-top: 14px;
  border-top: 1px solid #e3e6ea;
}
.catalog-groups section {
  padding: 12px 0;
  border-bottom: 1px solid #eef0f3;
}
.catalog-groups section:last-child {
  border-bottom: 0;
}
.catalog-groups strong {
  font-size: 11px;
}
.catalog-groups p {
  margin: 5px 0 0 !important;
  line-height: 1.45;
}

.parent-header select {
  min-width: 210px;
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid #dfe3e7;
  border-radius: 16px;
  background: #fff;
}
[data-admin-courses-list] {
  display: block !important;
  min-height: 0 !important;
  padding: 20px !important;
}
@media (max-width: 900px) {
  .week-timetable {
    overflow-x: auto;
  }
  .curriculum-directory-grid {
    grid-template-columns: 1fr;
  }
  .report-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .teacher-assignment-row {
    grid-template-columns: 1fr;
  }
  .assignment-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 600px) {
  .professional-form,
  .report-metrics {
    grid-template-columns: 1fr;
  }
  .form-span-2 {
    grid-column: auto;
  }
  .curriculum-reference-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .seven-row,
  .schedule-row,
  .certificate-row {
    min-width: 820px;
  }
}

/* Section tools and connected collaboration views */
.dashboard-topbar > .topbar-search {
  display: none;
}
.dashboard-topbar {
  justify-content: flex-end;
}
.mobile-sidebar-toggle {
  margin-right: auto;
}
.section-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(340px, 42vw);
  height: 42px;
  padding: 0 14px;
  border: 1px solid #dfe3e7;
  border-radius: 16px;
  background: #fff;
}
.section-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #202637;
}
.section-search span {
  color: #7468ed;
}
.notification-count {
  position: absolute;
  right: -5px;
  top: -5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  background: #ef3f50;
  font-size: 9px;
  font-weight: 800;
}
.icon-button {
  position: relative;
}
.recent-payments-title {
  padding-left: 25px;
}
.payment-row {
  grid-template-columns:
    minmax(125px, 0.9fr)
    minmax(175px, 1.35fr)
    minmax(105px, 0.8fr)
    minmax(120px, 0.9fr)
    minmax(115px, 0.85fr)
    minmax(95px, 0.7fr)
    minmax(65px, 0.45fr);
  column-gap: 14px;
}

.payment-row > * {
  min-width: 0;
}

.payment-row .action-menu {
  justify-self: start;
}

.payment-row .action-menu-dropdown {
  top: auto;
  bottom: calc(100% + 7px);
}

@media (max-width: 1000px) {
  .payment-row {
    min-width: 970px;
  }
}
.admin-overview-lists {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.admin-overview-lists .admin-table-head {
  column-gap: 12px;
}
.timetable-toolbar small {
  display: block;
  margin-top: 4px;
}
.timetable-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.timetable-actions button {
  height: 32px;
  padding: 0 11px;
  border: 1px solid #dfe3e7;
  border-radius: 11px;
  color: #454c59;
  background: #fff;
  font-weight: 700;
}
.timetable-actions button.active {
  color: #fff;
  border-color: #5749ed;
  background: #5749ed;
}
.month-grid {
  grid-template-columns: repeat(7, minmax(125px, 1fr));
  grid-auto-rows: minmax(150px, auto);
}
.month-grid .week-day {
  min-height: 150px;
}
.notification-list {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.notification-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 18px;
  border: 1px solid #e3e6ea;
  border-radius: 16px;
  background: #fff;
}
.notification-row.is-unread {
  border-color: #c9c4ff;
  background: #f7f6ff;
}
.notification-row strong,
.notification-row small {
  display: block;
}
.notification-row p {
  margin: 6px 0;
  color: #5f6877;
}
.notification-row small {
  color: #8a919d;
}
.notification-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notification-actions button {
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  color: #5548ed;
  background: #eeecff;
  font-weight: 700;
}
.notification-actions .danger-link {
  color: #d53743;
  background: #ffebed;
}
.section-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}
.section-page-head h1 {
  margin: 0;
}
.section-page-head p {
  margin: 5px 0;
  color: #687180;
}
.section-page-head > button {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #5749ed;
  font-weight: 700;
}
[data-ask-teacher-root],
[data-ask-me] {
  padding: 20px !important;
  border: 1px solid #e1e4ee;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(40, 41, 80, 0.06);
}
.ask-room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ask-room-grid.is-empty {
  grid-template-columns: minmax(0, 1fr);
  min-height: 180px;
  place-items: center;
}
.ask-room-grid.is-admin-hierarchy {
  grid-template-columns: minmax(0, 1fr);
}
.ask-room-grid > .ask-empty-state:only-child {
  grid-column: 1 / -1;
}
.ask-room-card,
.ask-thread-card {
  border: 1px solid #e1e4e9;
  border-radius: 17px;
  background: #fff;
  text-align: left;
}
.ask-room-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
}
.ask-room-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 5px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #5749ed, #08b9c2);
  font-weight: 800;
}
.ask-room-card small,
.ask-room-card > span:last-child {
  color: #687180;
}
.ask-room-card > span:last-child {
  margin-top: 5px;
  color: #5749ed;
  font-weight: 700;
}
.ask-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.ask-toolbar > div {
  flex: 1;
}
.ask-toolbar h2,
.ask-toolbar p {
  margin: 0;
}
.ask-toolbar p {
  margin-top: 4px;
  color: #687180;
}
.ask-toolbar button,
.ask-reply button {
  padding: 9px 13px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: #5749ed;
  font-weight: 700;
}
.ask-thread-list,
.ask-posts {
  display: grid;
  gap: 10px;
}
.ask-thread-card {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px;
}
.ask-thread-card p {
  margin: 5px 0;
  color: #687180;
}
.ask-thread-card > span {
  color: #5749ed;
  font-size: 10px;
  font-weight: 800;
}
.ask-post {
  padding: 15px;
  border: 1px solid #e3e6ea;
  border-radius: 14px;
}
.ask-post p {
  margin: 7px 0;
}
.ask-post small {
  color: #687180;
}
.ask-reply {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.ask-reply textarea {
  flex: 1;
  min-height: 75px;
  padding: 12px;
  border: 1px solid #dfe3e7;
  border-radius: 13px;
}
.ask-teacher-root {
  display: grid;
  min-height: 0;
  align-content: start;
  padding: 20px !important;
  text-align: left;
}

.ask-loading-state,
.ask-error-state,
.ask-empty-state {
  display: grid;
  width: 100%;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
}

.ask-room-grid.is-empty .ask-empty-state {
  max-width: 560px;
  min-height: 0;
  padding: 30px 24px;
  border: 1px dashed #d9d6f6;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfaff, #f7f8fc);
}

.ask-empty-state strong {
  font:
    800 18px/1.3 Manrope,
    sans-serif;
}

.ask-loading-state p,
.ask-error-state p,
.ask-empty-state p {
  margin: 8px 0 0;
  color: #687180;
}

.ask-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e4e5fb;
  border-top-color: #5749ed;
  border-radius: 50%;
  animation: ask-spin 0.8s linear infinite;
}

@keyframes ask-spin {
  to {
    transform: rotate(360deg);
  }
}

.ask-error-state button,
.ask-filter-bar button,
.ask-back-button,
.ask-primary-button {
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ask-error-state button,
.ask-primary-button {
  color: #fff;
  background: #5749ed;
}

.ask-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.ask-page-heading h2,
.ask-page-heading p {
  margin: 0;
}

.ask-page-heading p {
  margin-top: 5px;
  color: #687180;
}

.ask-socket-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.ask-socket-status.is-connected {
  color: #18794e;
  background: #e8f8ef;
}

.ask-socket-status.is-disconnected {
  color: #9a6700;
  background: #fff5d6;
}

.ask-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.ask-room-card {
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.ask-room-card:hover,
.ask-room-card:focus-visible {
  transform: translateY(-2px);
  border-color: #c8c3ff;
  box-shadow: 0 12px 30px rgba(40, 41, 80, 0.08);
}

.ask-room-card.is-loading,
.ask-room-card[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.ask-room-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
}

.ask-room-filter-bar {
  align-items: end;
  padding: 14px;
  border: 1px solid #e1e4ee;
  border-radius: 16px;
  background: #fbfbff;
}

.ask-room-filter-field {
  display: grid;
  gap: 6px;
}

.ask-room-filter-field > span {
  color: #596274;
  font-size: 11px;
  font-weight: 800;
}

.ask-grade-card {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 1px solid #dfe3ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(40, 41, 80, 0.06);
  overflow: hidden;
}

.ask-grade-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.ask-grade-summary::-webkit-details-marker {
  display: none;
}

.ask-grade-summary::before {
  content: "▸";
  color: #5749ed;
  font-weight: 900;
  transition: transform 160ms ease;
}

.ask-grade-card[open] .ask-grade-summary::before {
  transform: rotate(90deg);
}

.ask-grade-summary > span:first-child {
  display: grid;
  gap: 4px;
  flex: 1;
}

.ask-grade-summary strong {
  color: #23263a;
  font-size: 17px;
}

.ask-grade-summary small {
  color: #687180;
}

.ask-grade-subjects {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.ask-grade-subjects .ask-room-card {
  box-shadow: none;
}

.ask-room-card-main {
  display: grid;
  gap: 5px;
  width: 100%;
}

.ask-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: #e23d65;
  font-size: 11px;
  font-weight: 900;
}

.ask-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ask-search-field {
  flex: 1 1 260px;
  min-width: min(260px, 100%);
}

.ask-filter-field {
  flex: 0 1 180px;
}

.ask-search-field input,
.ask-filter-field select {
  width: 100%;
  min-height: 42px;
  padding: 11px 13px;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  color: #3f4250;
  background: #fff;
  font: inherit;
}

.ask-filter-bar button,
.ask-back-button {
  color: #3f4250;
  background: #f1f2f6;
}

.ask-thread-card {
  gap: 20px;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.ask-thread-card:hover,
.ask-thread-card:focus-visible {
  border-color: #c8c3ff;
  box-shadow: 0 8px 24px rgba(40, 41, 80, 0.07);
}

.ask-thread-card.is-pinned {
  border-color: #b8b0ff;
  background: #faf9ff;
}

.ask-thread-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ask-pin-badge {
  padding: 3px 7px;
  border-radius: 999px;
  color: #5749ed;
  background: #eeecff;
  font-size: 10px;
  font-weight: 800;
}

.ask-thread-meta {
  color: #7a8290;
}

.ask-thread-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.ask-thread-status.status-open {
  color: #3159b7;
  background: #edf3ff;
}

.ask-thread-status.status-answered {
  color: #18794e;
  background: #e8f8ef;
}

.ask-thread-status.status-closed {
  color: #687180;
  background: #eef0f3;
}

.ask-thread-status.status-hidden {
  color: #9f2d38;
  background: #fff0f1;
}

.ask-thread-toolbar {
  align-items: flex-start;
}

.ask-thread-heading {
  min-width: 0;
}

.ask-thread-heading h2 {
  overflow-wrap: anywhere;
}

.ask-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ask-thread-actions button {
  padding: 8px 10px;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  color: #3f4250;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.ask-original-question {
  margin-bottom: 15px;
  padding: 18px;
  border: 1px solid #d8d4ff;
  border-radius: 16px;
  background: #faf9ff;
}

.ask-original-question p {
  margin: 9px 0;
  white-space: pre-wrap;
}

.ask-post {
  position: relative;
  background: #fff;
}

.ask-post-teacher {
  border-left: 4px solid #5749ed;
}

.ask-post-admin {
  border-left: 4px solid #08a1a9;
}

.ask-post-student {
  border-left: 4px solid #b8bec8;
}

.ask-post-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ask-post-heading span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #5749ed;
  background: #eeecff;
  font-size: 10px;
  font-weight: 800;
}

.ask-post-heading .ask-moderation-button {
  margin-left: auto;
  padding: 6px 9px;
  border: 1px solid #efc3c7;
  border-radius: 9px;
  color: #a52a32;
  background: #fff7f7;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.ask-post.is-hidden,
.ask-original-question.is-hidden {
  border-style: dashed;
  opacity: 0.72;
}

.ask-post p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ask-empty-replies,
.ask-reply-disabled {
  padding: 18px;
  border: 1px dashed #d9dde3;
  border-radius: 14px;
  color: #687180;
  text-align: center;
}

.ask-typing-indicator {
  min-height: 22px;
  margin-top: 8px;
  color: #687180;
  font-size: 13px;
  font-style: italic;
}

.ask-reply textarea:focus,
.ask-search-field input:focus,
.ask-filter-field select:focus {
  border-color: #5749ed;
  outline: 3px solid rgba(87, 73, 237, 0.12);
}

.ask-reply button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.ask-attachments {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.ask-file-attachment,
.ask-image-attachment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  color: inherit;
  background: #f8f9fb;
  text-decoration: none;
}

.ask-file-attachment:hover,
.ask-image-attachment:hover {
  border-color: #b9b2ff;
  background: #faf9ff;
}

.ask-file-attachment span:last-child {
  display: grid;
  gap: 3px;
}

.ask-file-attachment small {
  color: #687180;
}

.ask-file-icon {
  font-size: 22px;
}

.ask-image-attachment {
  align-items: flex-start;
  flex-direction: column;
}

.ask-image-attachment img {
  width: min(100%, 420px);
  max-height: 320px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
}

.voice-message {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(210px, 420px) auto;
  align-items: center;
  gap: 12px;
  width: min(100%, 720px);
  padding: 12px 14px;
  border: 1px solid #d8d4ff;
  border-radius: 16px;
  color: #24263a;
  background: linear-gradient(135deg, #fbfaff, #f5f8ff);
}

.voice-message-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #5749ed, #08aeb7);
  font-size: 20px;
  font-weight: 900;
}

.voice-message-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.voice-message-title,
.voice-message-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-message-title {
  font-size: 13px;
}

.voice-message-meta {
  color: #687180;
  font-size: 11px;
}

.voice-message-player {
  width: 100%;
  min-width: 0;
  height: 38px;
}

.voice-message-open {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #cbc6ff;
  border-radius: 10px;
  color: #4d40d0;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.voice-message-open:hover,
.voice-message-open:focus-visible {
  border-color: #5749ed;
  background: #f0eeff;
}

.chat-voice {
  --voice-progress: 0%;
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: min(100%, 520px);
  padding: 11px 13px;
  border: 1px solid #d8d4ff;
  border-radius: 18px;
  background: linear-gradient(135deg, #fbfaff, #f3f8ff);
}
.chat-voice-play,
.chat-voice-speed {
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
}
.chat-voice-play {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5749ed, #08aeb7);
  box-shadow: 0 7px 17px rgb(87 73 237 / 20%);
}
.chat-voice-play [data-voice-icon] { display: grid; width: 100%; height: 100%; place-items: center; }
.chat-voice-play svg { display: block; width: 20px; height: 20px; margin: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.chat-voice.is-loading .chat-voice-play { cursor: wait; opacity: .65; }
.chat-voice.has-error { border-color: #efbfc5; background: #fff7f8; }
.chat-voice-main { display: grid; gap: 5px; min-width: 0; }
.chat-voice-slider {
  appearance: none;
  width: 100%;
  height: 5px;
  margin: 8px 0;
  border-radius: 999px;
  background: linear-gradient(to right, #6753df 0 var(--voice-progress), #d8d9e3 var(--voice-progress) 100%);
  cursor: pointer;
}
.chat-voice-slider::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #6753df;
  box-shadow: 0 2px 7px rgb(87 73 237 / 28%);
}
.chat-voice-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 999px;
  background: #6753df;
  box-shadow: 0 2px 7px rgb(87 73 237 / 28%);
}
.chat-voice-time { display: flex; justify-content: space-between; color: #73798a; font-size: 10px; font-weight: 700; }
.chat-voice-speed { min-width: 39px; height: 32px; border-radius: 10px; color: #5144cf; background: #ebe8ff; font-size: 11px; font-weight: 900; }
.chat-voice button:focus-visible,
.chat-inline-image:focus-visible,
.chat-file-card:focus-visible { outline: 3px solid rgb(87 73 237 / 22%); outline-offset: 2px; }
.chat-inline-image {
  display: grid;
  width: min(100%, 440px);
  min-height: 120px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe2eb;
  border-radius: 16px;
  background: #f4f5f8;
  cursor: zoom-in;
}
.chat-inline-image img { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #fff; }
.chat-media-loading { display: grid; min-height: 120px; place-items: center; padding: 18px; color: #747b8a; font-size: 12px; }
.chat-inline-image.has-error { cursor: default; border-style: dashed; }
.chat-file-card {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(100%, 440px);
  padding: 11px 13px;
  border: 1px solid #dddff0;
  border-radius: 14px;
  color: #272c3a;
  background: #f8f8fc;
  text-align: left;
  cursor: pointer;
}
.chat-file-card:hover { border-color: #bdb7ef; background: #f3f1ff; }
.chat-file-icon { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #6554e7, #4d8fd9); font-weight: 900; }
.chat-file-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
.chat-file-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.chat-file-card small { color: #73798a; font-size: 10px; }

@media (max-width: 560px) {
  .chat-voice { grid-template-columns: auto minmax(120px, 1fr) auto; gap: 8px; padding: 9px; }
}

.ask-question-form {
  display: grid;
  gap: 16px;
}

.ask-question-context {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #dedaff;
  border-radius: 12px;
  color: #50586a;
  background: #f8f7ff;
  font-size: 13px;
  line-height: 1.55;
}

.ask-question-field {
  display: grid;
  gap: 7px;
}

.ask-question-field > span {
  color: #34394a;
  font-size: 12px;
  font-weight: 800;
}

.ask-question-field > span small {
  color: #7a8290;
  font-weight: 600;
}

.ask-question-field input,
.ask-question-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #d9dee7;
  border-radius: 12px;
  outline: none;
  color: #252939;
  background: #fff;
  font: inherit;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.ask-question-field textarea {
  min-height: 140px;
  resize: vertical;
}

.ask-question-field input:focus,
.ask-question-field textarea:focus {
  border-color: #5749ed;
  box-shadow: 0 0 0 3px rgba(87, 73, 237, 0.12);
}

.ask-question-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.ask-question-actions .button {
  min-height: 42px;
  padding: 9px 16px;
  border: 0;
  border-radius: 11px;
  font-weight: 800;
}

.ask-question-actions .button-primary {
  color: #fff;
  background: #5749ed;
}

.ask-question-actions .button-secondary {
  color: #3f4250;
  background: #eff1f5;
}

.ask-reply-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ask-upload-button,
.ask-reply-tools button {
  padding: 9px 12px;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  color: #3f4250;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ask-reply-tools button[type="submit"] {
  border-color: #5749ed;
  color: #fff;
  background: #5749ed;
}

.ask-selected-file {
  padding: 8px 10px;
  border-radius: 9px;
  color: #3f4250;
  background: #f1f2f6;
  font-size: 13px;
}

.notifications-root {
  min-height: 320px;
  padding: 20px;
}

.notifications-loading,
.notifications-error,
.notifications-empty {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 30px;
  text-align: center;
}

.notifications-loading p,
.notifications-error p,
.notifications-empty p {
  margin: 8px 0 0;
  color: #687180;
}

.notifications-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #e3e5ea;
  border-top-color: #5749ed;
  border-radius: 50%;
  animation: notifications-spin 0.8s linear infinite;
}

@keyframes notifications-spin {
  to {
    transform: rotate(360deg);
  }
}

.notifications-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.notifications-toolbar h2,
.notifications-toolbar p {
  margin: 0;
}

.notifications-toolbar p {
  margin-top: 4px;
  color: #687180;
}

.notifications-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.notifications-toolbar-actions button,
.notifications-error button,
.notifications-pagination button {
  padding: 9px 12px;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  color: #3f4250;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.notifications-toolbar-actions button:hover,
.notifications-error button:hover,
.notifications-pagination button:hover:not(:disabled) {
  border-color: #b9b2ff;
  background: #faf9ff;
}

.notifications-live-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.notifications-live-status.is-connected {
  color: #18794e;
  background: #e8f8ef;
}

.notifications-live-status.is-disconnected {
  color: #9a6700;
  background: #fff5d6;
}

.notifications-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.notifications-list {
  display: grid;
  gap: 10px;
}

.notification-item {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e1e4e9;
  border-radius: 14px;
  background: #fff;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.notification-item.is-unread {
  border-color: #c9c3ff;
  background: #faf9ff;
}

.notification-item:hover {
  border-color: #b9b2ff;
  box-shadow: 0 8px 24px rgba(40, 41, 80, 0.07);
}

.notification-main {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-type-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #5749ed;
  background: #eeecff;
  font-weight: 800;
}

.notification-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.notification-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-heading-row strong {
  overflow-wrap: anywhere;
}

.notification-unread-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #5749ed;
}

.notification-content p {
  margin: 0;
  color: #596270;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #808795;
  font-size: 12px;
}

.notification-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.notification-actions button {
  padding: 7px 9px;
  border: 1px solid #dfe3e7;
  border-radius: 9px;
  color: #4d5561;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.notification-delete-button {
  color: #b42318 !important;
}

.notification-email {
  display: grid;
  gap: 22px;
}

.notification-email-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e5e7eb;
}

.notification-email-header h3 {
  margin: 3px 0 5px;
  color: #172033;
  font-size: 1.2rem;
  line-height: 1.35;
}

.notification-email-header time,
.notification-email-label {
  color: #77808d;
  font-size: 12px;
}

.notification-email-label {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.notification-email-body {
  min-height: 120px;
  padding: 18px;
  border-radius: 12px;
  color: #333d4b;
  background: #f8f9fb;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.notification-email-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.notification-email-attachments {
  display: grid;
  gap: 12px;
}

.notification-email-attachments h4 {
  margin: 0;
  color: #172033;
  font-size: 14px;
}

.notification-email-attachments > div {
  display: grid;
  gap: 12px;
}

.notification-email-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e0e4e9;
  border-radius: 13px;
  background: #fff;
}

.notification-email-image-frame {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 12px;
  background: #f5f6f8;
}

.notification-email-image img {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  object-fit: contain;
}

.notification-email-image-loading {
  color: #77808d;
  font-size: 13px;
}

.notification-email-image figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: #3e4856;
  font-size: 13px;
}

.notification-email-image figcaption span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notification-email-image button,
.notification-email-file {
  border: 1px solid #d7dcf7;
  color: #5146cf;
  background: #f8f7ff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.notification-email-image button {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 8px;
}

.notification-email-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  text-align: left;
}

.notification-email-image button:hover,
.notification-email-file:hover {
  border-color: #a9a1ef;
  background: #f0eeff;
}

.notification-email-file-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #fff;
  background: #5749ed;
  font-size: 18px;
}

.notification-email-file-meta {
  min-width: 0;
}

.notification-email-file-meta strong,
.notification-email-file-meta small {
  display: block;
  overflow-wrap: anywhere;
}

.notification-email-file-meta small {
  margin-top: 3px;
  color: #77808d;
  font-weight: 600;
}

.notifications-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.notifications-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #e5484d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.notification-badge[hidden] {
  display: none !important;
}

[data-notification-button] {
  position: relative;
}

[data-notification-button].has-unread-notifications {
  color: #5749ed;
}

.announcements-root {
  padding: 24px;
}

.announcements-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin-bottom: 22px;
}

.announcements-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.announcements-search {
  flex: 1;
}

.announcements-toolbar input,
.announcements-toolbar select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border-color, #d9e0e6);
  border-radius: 10px;
  background: #fff;
}

.announcements-list {
  display: grid;
  gap: 16px;
}

.announcement-card {
  padding: 20px;
  border: 1px solid #dfe5ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(31 39 56 / 4%);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.announcement-card:hover {
  border-color: #cbc7ff;
  box-shadow: 0 12px 30px rgb(48 42 115 / 8%);
  transform: translateY(-1px);
}

.announcement-card.is-unread {
  border-inline-start: 4px solid #314450;
}

.announcement-card-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.announcement-card-header h3 {
  margin: 0 0 10px;
}

.announcement-card-header time {
  color: #6b7780;
  font-size: 0.85rem;
  white-space: nowrap;
}

.announcement-badges,
.announcement-meta,
.announcement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.announcement-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef2f4;
  font-size: 0.78rem;
  text-transform: capitalize;
}

.announcement-unread {
  background: #dfeef6;
  font-weight: 700;
}

.announcement-meta {
  margin-top: 14px;
  color: #66727a;
  font-size: 0.9rem;
}

.announcement-actions {
  margin-top: 16px;
}

.announcement-actions button,
.announcements-toolbar button,
.announcements-pagination button,
.announcement-attachment button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #cad3d9;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.announcement-actions button:hover,
.announcements-toolbar button:hover,
.announcements-pagination button:hover,
.announcement-attachment button:hover {
  background: #f2f5f6;
}

.announcements-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.announcements-loading,
.announcements-empty,
.announcements-error {
  display: grid;
  min-height: 180px;
  place-content: center;
  padding: 40px 20px;
  text-align: center;
}

.announcement-detail-body {
  margin: 20px 0;
  line-height: 1.7;
}

.announcement-detail-meta {
  padding: 14px;
  border-radius: 12px;
  background: #f6f8f9;
}

.announcement-attachments {
  margin-top: 22px;
}

.announcement-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #e6eaed;
}

.announcement-attachment span {
  flex: 1;
  overflow-wrap: anywhere;
}

.live-session-root {
  padding: 24px;
}

.live-session-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.live-session-toolbar input {
  flex: 1;
}

.live-session-toolbar input,
.live-session-toolbar select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d8e0e5;
  border-radius: 10px;
  background: #fff;
}

.live-session-course-picker {
  display: grid;
  gap: 7px;
}

.live-session-course-picker > span {
  font-weight: 800;
}

.live-session-course-picker input,
.live-session-course-picker select {
  width: 100%;
  border: 1px solid #d8e0e5;
  border-radius: 11px;
  color: #27313d;
  background: #fff;
  font: inherit;
}

.live-session-course-picker input {
  min-height: 44px;
  padding: 9px 12px;
}

.live-session-course-picker select {
  min-height: 210px;
  padding: 6px;
}

.live-session-course-picker option {
  padding: 9px 10px;
  border-radius: 7px;
}

.live-session-course-picker input:focus,
.live-session-course-picker select:focus {
  border-color: #5749ed;
  outline: 3px solid rgba(87, 73, 237, 0.12);
}

.live-session-course-picker small {
  color: #687180;
  font-size: 12px;
}

@media (max-width: 900px) {
  .voice-message {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .voice-message-player,
  .voice-message-open {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .ask-question-actions {
    flex-direction: column-reverse;
  }

  .ask-question-actions .button {
    width: 100%;
  }
}

.live-session-list {
  display: grid;
  gap: 16px;
}

.live-session-card {
  padding: 20px;
  border: 1px solid #dfe5e9;
  border-radius: 14px;
  background: #fff;
}

.live-session-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.live-session-heading h3 {
  margin: 0 0 6px;
}

.live-session-heading p,
.live-session-heading small {
  display: block;
  margin: 0;
  color: #66737b;
}

.live-session-status {
  padding: 5px 10px;
  border-radius: 999px;
  background: #edf1f3;
  text-transform: capitalize;
  white-space: nowrap;
}

.recording-summary {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  background: #f5f7f8;
}

.recording-summary small {
  color: #a53030;
}

.recording-summary progress,
.recording-workflow progress {
  width: 100%;
}

.live-session-actions,
.recording-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.live-session-actions button,
.recording-workflow-actions button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #ccd5da;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.live-session-actions button:hover,
.recording-workflow-actions button:hover {
  background: #f0f4f5;
}

.recording-workflow-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #dfe5e9;
  border-radius: 12px;
}

.certificate-header-actions,
.certificate-tabs,
.certificate-panel-header,
.certificate-feed-actions,
.certificate-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.certificate-header-actions button,
.certificate-panel-header button,
.certificate-feed-actions button,
.certificate-detail-actions button,
[data-certificate-candidates-list]
  button:not(.action-menu-trigger):not([data-cert-action]),
[data-certificate-templates-list]
  button:not(.action-menu-trigger):not([data-cert-action]) {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid #cfd8de;
  border-radius: 10px;
  color: #314450;
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.certificate-header-actions button,
.certificate-panel-header [data-certificate-template-create],
[data-candidate-action="approve"] {
  border-color: #5749ed;
  color: #fff;
  background: #5749ed;
}

[data-candidate-action="reject"] {
  border-color: #efc3c7;
  color: #b4232c;
  background: #fff7f7;
}

.certificate-header-actions button:hover,
.certificate-panel-header button:hover,
.certificate-feed-actions button:hover,
.certificate-detail-actions button:hover,
[data-certificate-candidates-list]
  button:not(.action-menu-trigger):not([data-cert-action]):hover,
[data-certificate-templates-list]
  button:not(.action-menu-trigger):not([data-cert-action]):hover {
  transform: translateY(-1px);
  border-color: #8f86ef;
  background: #f5f3ff;
}

.certificate-header-actions button:hover,
.certificate-panel-header [data-certificate-template-create]:hover,
[data-candidate-action="approve"]:hover {
  color: #fff;
  background: #493bd9;
}

.certificate-tabs {
  margin-bottom: 18px;
}

.certificate-tabs button {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid #d5dde2;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.certificate-tabs button.is-active {
  background: #314450;
  border-color: #314450;
  color: #fff;
}

.certificate-panel {
  padding: 22px;
}

.certificate-panel-header {
  justify-content: space-between;
  margin-bottom: 20px;
}

.certificate-panel-header input,
.certificate-panel-header select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d5dde2;
  border-radius: 10px;
}

.certificate-feed-root {
  padding: 22px;
}

.certificate-feed-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.certificate-child-control {
  display: grid;
  gap: 7px;
  min-width: min(100%, 380px);
}

.certificate-child-control p {
  margin: 0;
  color: #687386;
  font-size: 0.84rem;
}

.certificate-feed-toolbar label {
  display: grid;
  gap: 6px;
  max-width: 340px;
}

.certificate-feed-toolbar select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d5dde2;
  border-radius: 10px;
  background: #fff;
}

.certificate-feed-grid {
  display: grid;
  gap: 16px;
}

.certificate-feed-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
  margin-bottom: 20px;
}

.certificate-feed-summary > div {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid #e1e5ef;
  border-radius: 13px;
  background: #f8f9fd;
}

.certificate-feed-summary span {
  color: #6b7485;
  font-size: 0.76rem;
  font-weight: 700;
}

.certificate-feed-summary strong {
  color: #161d2f;
  font-size: 1.3rem;
}

.certificate-feed-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid #dfe5e9;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 8px 28px rgb(31 39 56 / 5%);
}

.certificate-feed-content {
  min-width: 0;
}

.certificate-feed-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.certificate-type-badge,
.certificate-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.certificate-type-badge {
  color: #5042d5;
  background: #efedff;
}

.certificate-status-badge {
  color: #16724d;
  background: #e9f7f0;
}

.certificate-status-badge.is-revoked {
  color: #a72b35;
  background: #fff0f1;
}

.certificate-feed-card h3 {
  margin: 0 0 6px;
}

.certificate-feed-card p,
.certificate-feed-card small {
  display: block;
  margin: 0 0 4px;
  color: #647179;
}

.certificate-course-name {
  margin-bottom: 12px !important;
}

.certificate-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px 18px;
}

.certificate-meta > span {
  display: grid;
  min-width: 0;
}

.certificate-meta small {
  margin: 0 !important;
  font-size: 0.7rem;
}

.certificate-meta strong {
  overflow-wrap: anywhere;
  color: #283044;
  font-size: 0.82rem;
}

.certificate-feed-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5749ed, #7669f4);
  box-shadow: 0 8px 18px rgb(87 73 237 / 22%);
  font-size: 1.4rem;
  font-weight: 700;
}

.certificate-feed-actions {
  justify-content: flex-end;
}

.certificate-feed-actions .certificate-primary-action {
  border-color: #5749ed;
  color: #fff;
  background: #5749ed;
}

.certificate-feed-actions .certificate-primary-action:hover {
  color: #fff;
  background: #493bd9;
}

.certificate-detail {
  display: grid;
  gap: 20px;
}

.certificate-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e1e5ef;
  border-radius: 15px;
  background: linear-gradient(145deg, #fbfaff, #f6f8ff);
}

.certificate-detail-header p {
  margin: 7px 0 0;
  color: #687386;
  font-size: 0.86rem;
}

.certificate-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.certificate-detail-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #e5e8f0;
  border-radius: 12px;
  background: #fff;
}

.certificate-detail-grid dt {
  color: #737d90;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.certificate-detail-grid dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: #20283a;
  font-size: 0.9rem;
  font-weight: 750;
}

.certificate-detail-description {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid #5749ed;
  border-radius: 8px;
  color: #4f596c;
  background: #f8f8fd;
  line-height: 1.6;
}

.certificate-detail-actions {
  justify-content: flex-end;
}

.certificate-detail-actions .certificate-primary-action {
  border-color: #5749ed;
  color: #fff;
  background: #5749ed;
}

.certificate-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 230px;
  padding: 32px;
  border: 1px dashed #d8ddea;
  border-radius: 16px;
  color: #5e687b;
  background: #fbfcff;
  text-align: center;
}

.certificate-empty-state > div {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #efedff;
  font-size: 1.55rem;
}

.certificate-empty-state strong {
  color: #20283a;
  font-size: 1rem;
}

.certificate-empty-state p {
  max-width: 520px;
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .certificate-feed-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .certificate-feed-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .certificate-meta {
    grid-template-columns: 1fr;
  }

  .certificate-detail-grid {
    grid-template-columns: 1fr;
  }
}

.certificate-eligibility-result {
  margin-top: 18px;
}

.eligibility-rule {
  margin-top: 8px;
  padding: 12px;
  border-inline-start: 4px solid #aab4ba;
  border-radius: 8px;
  background: #f5f7f8;
}

.eligibility-rule.is-passed {
  border-inline-start-color: #2f7d55;
}

.eligibility-rule.is-failed {
  border-inline-start-color: #b54848;
}

.certificate-verification-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: #f2f5f6;
}

.certificate-verification-card {
  width: min(680px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 60px rgb(21 37 46 / 10%);
}

.certificate-verification-logo {
  width: 150px;
  height: auto;
  margin-bottom: 24px;
}

.verification-result {
  margin-top: 24px;
  padding: 22px;
  border-radius: 14px;
}

.verification-result.is-valid {
  border: 1px solid #98c7ad;
  background: #eff8f3;
}

.verification-result.is-invalid {
  border: 1px solid #d8abab;
  background: #fff1f1;
}

.verification-result dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 18px;
  margin-top: 20px;
}

.verification-result dt {
  font-weight: 700;
}

.verification-result dd {
  margin: 0;
}

.teacher-feedback-root {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #e1e3ee;
  background: linear-gradient(180deg, #fff 0%, #fbfbfe 100%);
}

.teacher-feedback-list {
  display: grid;
  gap: 18px;
}

.teacher-feedback-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid #e0e3ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgb(43 40 77 / 6%);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.teacher-feedback-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #6c50e8, #54c7d8);
  content: "";
}

.teacher-feedback-card:hover {
  border-color: #cbc7ee;
  box-shadow: 0 18px 46px rgb(57 49 118 / 10%);
  transform: translateY(-2px);
}

.teacher-feedback-card h3,
.teacher-feedback-card p {
  margin-top: 0;
}

.teacher-feedback-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.teacher-feedback-author {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.teacher-feedback-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, #6552e6, #3e9fd3);
  font:
    800 1rem Manrope,
    sans-serif;
  text-transform: uppercase;
}

.teacher-feedback-author strong,
.teacher-feedback-author p,
.teacher-feedback-label {
  display: block;
}

.teacher-feedback-author strong {
  color: #252538;
  font:
    800 1rem Manrope,
    sans-serif;
}

.teacher-feedback-author p {
  margin: 3px 0 0;
  color: #77798a;
  font-size: 0.88rem;
}

.teacher-feedback-label {
  margin-bottom: 3px;
  color: #6c50e8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.teacher-feedback-stars {
  padding: 7px 10px;
  border-radius: 999px;
  color: #a97600;
  background: #fff7dc;
  font-size: 1.05rem;
  letter-spacing: 2px;
  white-space: nowrap;
}

.teacher-feedback-comment {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 15px;
  color: #3d3e50;
  background: #f7f7fb;
}

.teacher-feedback-comment p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.teacher-feedback-comment .teacher-feedback-no-comment {
  color: #858696;
  font-style: italic;
}

.teacher-feedback-status {
  display: inline-flex;
  margin: 8px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f4;
  text-transform: capitalize;
}

.teacher-feedback-status.status-approved {
  background: #e8f5ed;
}

.teacher-feedback-status.status-rejected,
.teacher-feedback-status.status-hidden {
  background: #faeaea;
}

.teacher-feedback-status.status-pending {
  background: #fff4d9;
}

.teacher-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.teacher-feedback-actions button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  cursor: pointer;
}
.approve-button {
  color: #fff;
  background: #00c85399;
  /* background: #00c853; */
}
.reject-button {
  color: #fff;
  background: #d5000099;
  /* background: #d50000; */
}
.approve-button:hover {
  background: #00c853;
}
.reject-button:hover {
  background: #d50000;
}

.teacher-feedback-response {
  margin: 18px 0 0;
  padding: 17px 19px;
  border: 1px solid #dce7e6;
  border-inline-start: 4px solid #258b83;
  border-radius: 12px;
  background: #f1f8f7;
}

.teacher-feedback-response-label {
  display: block;
  margin-bottom: 7px;
  color: #26746e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-moderation-reason {
  padding: 12px;
  border-radius: 8px;
  background: #fff1f1;
}

.teacher-rating-summary,
.feedback-moderation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.teacher-rating-overview {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(300px, 1.25fr);
  gap: 18px;
  margin-bottom: 26px;
}

.teacher-rating-hero,
.teacher-rating-overview .rating-distribution {
  padding: 24px;
  border: 1px solid #e0e2ee;
  border-radius: 20px;
}

.teacher-rating-hero {
  color: #fff;
  background: linear-gradient(145deg, #4d3ec9, #6554e7 56%, #3298c9);
  box-shadow: 0 18px 42px rgb(77 62 201 / 18%);
}

.teacher-rating-kicker {
  display: block;
  margin-bottom: 16px;
  color: rgb(255 255 255 / 76%);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.teacher-rating-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.teacher-rating-score strong {
  font:
    800 clamp(2.8rem, 5vw, 4rem) / 1 Manrope,
    sans-serif;
}

.teacher-rating-score span,
.teacher-rating-hero p {
  color: rgb(255 255 255 / 76%);
}

.teacher-rating-hero-stars {
  margin-top: 12px;
  color: #ffe48c;
  font-size: 1.22rem;
  letter-spacing: 3px;
}

.teacher-rating-hero p {
  margin: 14px 0 0;
  line-height: 1.55;
}

.teacher-rating-summary > div,
.feedback-moderation-summary > div {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid #dce3e7;
  border-radius: 12px;
  background: #f8fafb;
}

.teacher-rating-summary strong,
.feedback-moderation-summary strong {
  font-size: 1.55rem;
}

.rating-distribution {
  display: grid;
  align-content: center;
  gap: 11px;
  background: #fff;
}

.rating-distribution-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.rating-distribution-heading strong {
  color: #29293d;
  font:
    800 1rem Manrope,
    sans-serif;
}

.rating-distribution-heading span {
  color: #858696;
  font-size: 0.76rem;
}

.rating-distribution-row {
  display: grid;
  grid-template-columns: 42px minmax(100px, 1fr) 28px;
  align-items: center;
  gap: 10px;
  color: #676879;
  font-size: 0.83rem;
}

.rating-distribution-row b {
  color: #d7a526;
}

.rating-distribution-track {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #edeef4;
}

.rating-distribution-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6c50e8, #54c7d8);
}

@media (max-width: 760px) {
  .teacher-rating-overview {
    grid-template-columns: 1fr;
  }

  .teacher-feedback-card-header,
  .rating-distribution-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.teacher-feedback-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.teacher-feedback-toolbar input {
  flex: 1;
}

.teacher-feedback-toolbar input,
.teacher-feedback-toolbar select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d5dde2;
  border-radius: 10px;
  background: #fff;
}

.poll-tabs,
.poll-toolbar,
.poll-actions,
.poll-option-actions,
.reschedule-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.poll-tabs {
  margin-bottom: 18px;
}

.poll-tabs button {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid #d3dce1;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.poll-tabs button.is-active {
  border-color: #314450;
  background: #314450;
  color: #fff;
}

.poll-panel {
  padding: 24px;
}

.poll-list {
  display: grid;
  gap: 16px;
}

.poll-card {
  padding: 20px;
  border: 1px solid #dce3e7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgb(35 47 55 / 5%);
}

.poll-card > p {
  color: #626d79;
  line-height: 1.6;
}

.poll-meta {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
  gap: 0;
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid #e2e7ea;
  border-radius: 11px;
}

.poll-meta dt,
.poll-meta dd {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f2;
}

.poll-meta dt {
  color: #626d79;
  background: #f7f9fa;
  font-size: 12px;
  font-weight: 800;
}

.poll-meta dd {
  overflow-wrap: anywhere;
}

.poll-meta > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

.poll-options-summary,
.poll-option-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.poll-options-summary span {
  padding: 10px 12px;
  border: 1px solid #e0e5e8;
  border-radius: 10px;
  color: #46515f;
  background: #fafbfc;
}

.poll-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.poll-card h3 {
  margin: 0 0 8px;
}

.poll-status,
.poll-audience,
.poll-lock-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf1f3;
  font-size: 0.8rem;
  text-transform: capitalize;
}

.poll-options {
  display: grid;
  gap: 9px;
  margin: 16px 0;
}

.poll-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #e0e5e8;
  border-radius: 10px;
}

.poll-option input {
  flex: 0 0 auto;
}

.poll-option label {
  flex: 1;
}

.poll-result-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecef;
}

.poll-result-bar > span {
  display: block;
  height: 100%;
  background: #314450;
}

.poll-results {
  display: grid;
  gap: 20px;
}

.poll-results-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.poll-results-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e1e4ea;
  border-radius: 12px;
  background: #f8fafc;
}

.poll-results-summary span {
  color: #737d8c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.poll-results-summary strong {
  overflow-wrap: anywhere;
  color: #172033;
  font-size: 16px;
  text-transform: capitalize;
}

.poll-results-options {
  display: grid;
  gap: 12px;
}

.poll-result-option {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid #e0e4e9;
  border-radius: 13px;
  background: #fff;
}

.poll-result-option.is-leading {
  border-color: #c9c4f7;
  background: #faf9ff;
}

.poll-result-option-heading,
.poll-result-option-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.poll-result-option-heading strong {
  color: #172033;
  font-size: 14px;
}

.poll-result-option-heading em {
  padding: 4px 8px;
  border-radius: 999px;
  color: #5146cf;
  background: #eeecff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.poll-result-option-stats {
  color: #737d8c;
  font-size: 12px;
}

.poll-result-option-stats strong {
  color: #313b4c;
}

.poll-result-option .poll-result-bar {
  height: 10px;
  background: #e9eaf2;
}

.poll-result-option .poll-result-bar > span {
  border-radius: inherit;
  background: linear-gradient(90deg, #5749ed, #7770f4);
  transition: width 240ms ease;
}

.poll-results-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 18px;
  border: 1px dashed #d9dce4;
  border-radius: 13px;
  color: #737d8c;
  text-align: center;
}

.poll-results-empty strong {
  color: #313b4c;
}

@media (max-width: 620px) {
  .poll-results-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reschedule-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.reschedule-option {
  padding: 16px;
  border: 1px solid #dbe2e6;
  border-radius: 12px;
}

.reschedule-option.is-selected {
  border-color: #314450;
  background: #f2f6f7;
}

.reschedule-option.is-winner {
  border-color: #377c58;
  background: #eef8f2;
}

.reschedule-option.is-confirmed {
  border-width: 2px;
  border-color: #314450;
}

.poll-actions {
  margin-top: 16px;
}

.poll-actions button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #d7dcf7;
  border-radius: 10px;
  color: #5146cf;
  background: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.poll-actions button:hover {
  transform: translateY(-1px);
  border-color: #a9a1ef;
  background: #f5f3ff;
}

.poll-actions [data-poll-publish],
.poll-actions [data-poll-vote] {
  border-color: #5749ed;
  color: #fff;
  background: #5749ed;
}

.poll-actions [data-poll-publish]:hover,
.poll-actions [data-poll-vote]:hover {
  color: #fff;
  background: #493bd9;
}

.poll-actions [data-poll-delete],
.poll-actions [data-poll-close] {
  border-color: #efc3c7;
  color: #b4232c;
  background: #fff7f7;
}

.poll-actions [data-poll-delete]:hover,
.poll-actions [data-poll-close]:hover {
  border-color: #dd929a;
  background: #ffeded;
}

.class-report-manager,
.session-report-feed,
.parent-progress-report {
  padding: 24px;
}

.class-report-manager > .api-record-list {
  gap: 14px;
}

.class-report-session {
  grid-template-columns:
    minmax(14rem, 1.7fr) repeat(4, minmax(7.5rem, auto))
    auto;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border-color: #dfe4ea;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 7px 22px rgb(31 39 56 / 4%);
}

.class-report-session > div strong {
  color: #182033;
  font:
    800 14px/1.4 Manrope,
    sans-serif;
}

.class-report-session > span {
  padding: 7px 9px;
  border-radius: 9px;
  color: #596273;
  background: #f1f4f7;
  font-size: 11px;
  font-weight: 700;
}

/* Redesigned session-report action buttons — all in one row. */
.class-report-session .class-report-session-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.class-report-session .class-report-session-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 9px 14px;
  border: 1px solid #5749ed;
  border-radius: 11px;
  color: #fff;
  background: #5749ed;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.class-report-session .class-report-session-actions button:hover {
  background: #493bd9;
  border-color: #493bd9;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgb(87 73 237 / 22%);
}

.class-report-session .class-report-session-actions button:focus-visible {
  outline: 3px solid rgb(87 73 237 / 22%);
  outline-offset: 2px;
}

.class-report-session .class-report-session-actions button[data-class-report-open] {
  border-color: #5749ed;
  color: #fff;
  background: #5749ed;
}

.class-report-session .class-report-session-actions button[data-class-attendance-report] {
  border-color: #d8dcef;
  color: #5143d9;
  background: #f3f1ff;
}

.class-report-session .class-report-session-actions button[data-class-attendance-report]:hover {
  border-color: #bdb7ff;
  background: #ebe8ff;
}

.class-report-form {
  display: grid;
  gap: 16px;
}

.class-report-form > label,
.attendance-student-row label {
  display: grid;
  gap: 7px;
}

.class-report-form label > span,
.attendance-student-row label > span {
  color: #4e5868;
  font-size: 11px;
  font-weight: 800;
}

.class-report-form textarea,
.class-report-form input,
.class-report-form select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d9dfe6;
  border-radius: 10px;
  color: #182033;
  background: #fff;
  font: inherit;
}

.class-report-form textarea {
  min-height: 96px;
  resize: vertical;
}

.class-report-form textarea:focus,
.class-report-form input:focus,
.class-report-form select:focus {
  border-color: #8d84f7;
  box-shadow: 0 0 0 3px rgb(87 73 237 / 10%);
  outline: none;
}

.attendance-roster-list {
  gap: 14px;
}

.attendance-student-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  padding: 18px;
  border-radius: 14px;
  background: #fbfcfe;
}

.attendance-student-row legend {
  padding: 0 7px;
  color: #182033;
  font-weight: 800;
}

.attendance-student-row .attendance-evidence {
  grid-column: 1 / -1;
}

@media (max-width: 1080px) {
  .class-report-session {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .class-report-session > div,
  .class-report-session .class-report-session-actions {
    grid-column: 1 / -1;
  }

  .class-report-session .class-report-session-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .class-report-manager {
    padding: 16px;
  }

  .class-report-session,
  .attendance-student-row {
    grid-template-columns: 1fr;
  }

  .class-report-session > div,
  .class-report-session .class-report-session-actions,
  .attendance-student-row .attendance-evidence {
    grid-column: auto;
  }
}

.class-report-list,
.session-report-list {
  display: grid;
  gap: 16px;
}

.class-report-card,
.session-report-card {
  padding: 20px;
  border: 1px solid #dce3e7;
  border-radius: 14px;
  background: #fff;
}

.class-report-card-header,
.session-report-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.class-report-card h3,
.session-report-card h3 {
  margin: 0 0 6px;
}

.attendance-summary-grid,
.session-report-metrics,
.progress-report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.attendance-summary-grid > div,
.session-report-metrics > span,
.progress-report-metrics > div {
  padding: 12px;
  border-radius: 10px;
  background: #f4f7f8;
}

.attendance-roster-table {
  width: 100%;
  border-collapse: collapse;
}

.attendance-roster-table th,
.attendance-roster-table td {
  padding: 10px;
  border-bottom: 1px solid #e1e6e9;
  text-align: start;
  vertical-align: top;
}

.attendance-roster-table select,
.attendance-roster-table input,
.attendance-roster-table textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border: 1px solid #d4dde2;
  border-radius: 8px;
}

.report-publication-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf1f3;
}

.report-publication-status.is-published {
  background: #e8f5ed;
}

.report-private-note {
  padding: 12px;
  border-inline-start: 4px solid #7a657e;
  border-radius: 8px;
  background: #f7f2f8;
}

/* Shared library workspace */
.library-root {
  min-height: 0;
  padding: 22px;
}

.library-empty-state {
  display: grid;
  justify-items: center;
  max-width: 600px;
  min-height: 180px;
  margin: 0 auto;
  padding: 28px 24px;
  align-content: center;
  border: 1px dashed #d9d6f6;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfaff, #f7f8fc);
  text-align: center;
}

.library-empty-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 14px;
  color: #5749ed;
  background: #eceaff;
  font-size: 23px;
  font-weight: 800;
}

.library-empty-state strong {
  color: #182033;
  font:
    800 18px/1.35 Manrope,
    sans-serif;
}

.library-empty-state p {
  max-width: 52ch;
  margin: 8px 0 0;
  color: #687180;
  line-height: 1.65;
}

.library-admin-toolbar {
  margin-bottom: 18px;
  padding: 20px;
}

.library-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.library-filter-grid .form-group {
  min-width: 0;
  margin: 0;
}

.library-filter-grid .form-group > span {
  display: block;
  margin-bottom: 7px;
  color: #4f596b;
  font-size: 11px;
  font-weight: 800;
}

.library-filter-grid select,
.library-filter-grid input {
  width: 100%;
  min-height: 43px;
}

.library-filter-search {
  grid-column: span 2;
}

.library-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e7e9ef;
}

.library-filter-actions p {
  margin: 0;
  color: #697386;
  font-size: 12px;
}

.library-error-state {
  display: grid;
  justify-items: center;
  min-height: 230px;
  padding: 30px 24px;
  align-content: center;
  border: 1px solid #f0c8cc;
  border-radius: 16px;
  color: #7f2931;
  background: linear-gradient(180deg, #fffafa, #fff5f6);
  text-align: center;
}

.library-error-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 13px;
  place-items: center;
  border-radius: 14px;
  color: #a42631;
  background: #ffe4e7;
  font-size: 20px;
  font-weight: 900;
}

.library-error-state strong {
  color: #842029;
  font: 800 18px/1.35 Manrope, sans-serif;
}

.library-error-state p {
  max-width: 55ch;
  margin: 8px 0 16px;
  color: #87535a;
  line-height: 1.6;
}

.library-list {
  gap: 14px;
}

.library-item {
  align-items: flex-start;
  padding: 20px;
  border-color: #dfe4ea;
  background: linear-gradient(180deg, #fff, #fcfcfe);
  box-shadow: 0 8px 24px rgb(31 39 56 / 4%);
}

.library-item > div:first-child {
  min-width: 0;
  flex: 1 1 18rem;
}

.library-item strong {
  color: #182033;
  font:
    800 15px/1.4 Manrope,
    sans-serif;
  overflow-wrap: anywhere;
}

.library-item small {
  color: #6559d9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.library-item p {
  max-width: 62ch;
  margin-top: 9px;
  line-height: 1.6;
}

.library-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.library-actions button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #d9dfe6;
  border-radius: 10px;
  color: #3d4655;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
  white-space: nowrap;
}

.library-actions button:hover {
  border-color: #c7c2ff;
  color: #4d40d4;
  background: #f6f5ff;
}

.library-actions .library-play-video {
  border-color: #6559d9;
  color: #fff;
  background: #6559d9;
}

.library-actions .library-play-video:hover {
  border-color: #4d40d4;
  color: #fff;
  background: #4d40d4;
}

.library-actions .library-delete-resource,
.library-actions .library-delete-resource:hover {
  border-color: #d92d20;
  color: #fff;
  background: #d92d20;
}

.library-actions .library-delete-resource:hover {
  border-color: #b42318;
  background: #b42318;
}

.library-actions button:focus-visible {
  outline: 3px solid rgb(87 73 237 / 20%);
  outline-offset: 2px;
}

.library-item .library-resource-identity {
  max-width: none;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: #4f596b;
  background: #f4f5f9;
  font-size: 11px;
  font-weight: 650;
}

.library-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #e0e4eb;
  border-radius: 13px;
  color: #687284;
  background: #f9fafc;
  font-size: 12px;
}

.library-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 1180px) {
  .library-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .library-filter-grid {
    grid-template-columns: 1fr;
  }

  .library-filter-search {
    grid-column: auto;
  }

  .library-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .library-root {
    padding: 16px;
  }

  .library-item {
    align-items: stretch;
    flex-direction: column;
  }

  .library-actions {
    flex-basis: auto;
    justify-content: flex-start;
  }

  .library-pagination {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }
}

/* Admin enrollment workspace — intentionally scoped to Enrollment only. */
.enrollment-page .enrollment-page-header {
  align-items: center;
  gap: 18px;
}

.enrollment-page .enrollment-page-header h1 {
  margin: 0;
  color: #161a28;
  font:
    800 26px/1.2 Manrope,
    sans-serif;
  letter-spacing: -0.6px;
}

.enrollment-page .enrollment-page-header p {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.55;
}

.enrollment-create-button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #6658f4, #493bd3);
  box-shadow: 0 10px 22px rgb(87 73 237 / 22%);
  font:
    700 13px/1 Manrope,
    sans-serif;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.enrollment-create-button:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgb(87 73 237 / 28%);
  transform: translateY(-1px);
}

.enrollment-filters-card {
  padding: 22px;
  border: 1px solid #e7e9f3;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 10px 30px rgb(31 35 48 / 5%);
}

.enrollment-filter-label {
  display: grid;
  gap: 7px;
}

.enrollment-filter-label > span {
  color: #4b5160;
  font:
    700 11px/1 Manrope,
    sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.enrollment-filter-input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d9dce4;
  border-radius: 12px;
  color: #1f2533;
  background: #f8fafc;
  font:
    500 13px/1 "DM Sans",
    sans-serif;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.enrollment-filter-input:focus {
  border-color: #5749ed;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(87 73 237 / 12%);
}

.enrollment-page .enrollment-filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.enrollment-table-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e9f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgb(31 35 48 / 5%);
}

.enrollment-table {
  width: 100%;
  border-collapse: collapse;
  font:
    500 13px/1.4 "DM Sans",
    sans-serif;
}

.enrollment-table thead th {
  padding: 14px 16px;
  border-bottom: 1px solid #e7e9f3;
  color: #6b7280;
  background: #f7f8fc;
  font:
    700 11px/1 Manrope,
    sans-serif;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.enrollment-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f1f6;
  color: #1f2533;
  vertical-align: middle;
}

.enrollment-table tbody tr:last-child td {
  border-bottom: 0;
}

.enrollment-table tbody tr {
  transition: background-color 160ms ease;
}

.enrollment-table tbody tr:hover {
  background: #f9faff;
}

.enrollment-table .table-primary-text {
  display: block;
  color: #161a28;
  font:
    700 13px/1.3 Manrope,
    sans-serif;
}

.enrollment-table .table-secondary-text {
  display: block;
  margin-top: 3px;
  color: #8a8f9c;
  font-size: 12px;
}

.enrollment-table .table-badge,
.enrollment-table .table-status,
.enrollment-certificate-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.enrollment-table .table-badge {
  color: #4b5160;
  background: #eef2f4;
  text-transform: capitalize;
}

.enrollment-table .table-status.is-active,
.enrollment-certificate-status.is-issued {
  color: #08783f;
  background: #e8f5ed;
}

.enrollment-table .table-status.is-inactive,
.enrollment-certificate-status.is-pending {
  color: #6b7280;
  background: #f1f3f6;
}

.enrollment-certificate-status.is-failed {
  color: #a82d35;
  background: #fff0f1;
}

.enrollment-table .table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.enrollment-table .icon-action-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d9dce4;
  border-radius: 10px;
  color: #4b5160;
  background: #fff;
  font:
    700 11px/1 Manrope,
    sans-serif;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.enrollment-table .icon-action-button:hover {
  border-color: #bab4f5;
  color: #493bd3;
  background: #f4f2ff;
  transform: translateY(-1px);
}

.enrollment-table .icon-action-button.is-success {
  border-color: #b6e2c6;
  color: #08783f;
  background: #eafaf0;
}

.enrollment-table .icon-action-button.is-danger {
  border-color: #f1c4c7;
  color: #a82d35;
  background: #fff0f1;
}

.enrollment-table .icon-action-button.is-certificate {
  border-color: #c9c3fa;
  color: #493bd3;
  background: #f2f0ff;
}

.enrollment-page .enrollment-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #f0f1f6;
}

.enrollment-page .enrollment-page-summary {
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .enrollment-table-card {
    overflow-x: auto;
  }

  .enrollment-table {
    min-width: 920px;
  }
}

@media (max-width: 600px) {
  .enrollment-filters-card,
  .enrollment-table-card {
    border-radius: 16px;
  }

  .enrollment-page .enrollment-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .enrollment-page .enrollment-filter-actions {
    justify-content: stretch;
  }

  .enrollment-page .enrollment-filter-actions .button,
  .enrollment-page .enrollment-create-button {
    width: 100%;
  }

  .enrollment-page .enrollment-pagination {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ============================================================
   Academic hierarchy (Curriculum → Grade → Subject → Course)
   Shared five-tab content interface used by Student, Teacher,
   and Admin dashboards. Scoped to .academic-hierarchy-* only.
   ============================================================ */
.academic-hierarchy-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.academic-hierarchy-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 18px;
  background: var(--surface, #fff);
}

.academic-hierarchy-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.academic-hierarchy-card-identity {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.academic-hierarchy-card-identity h3 {
  margin: 0;
  color: var(--ink, #0f172a);
  font:
    700 16px/1.3 Manrope,
    sans-serif;
}

.academic-hierarchy-card-identity p {
  margin: 4px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.45;
}

.academic-hierarchy-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

.academic-hierarchy-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted, #94a3b8);
}

.academic-hierarchy-status.is-active::before {
  background: #22c55e;
}

.academic-hierarchy-status.is-inactive::before {
  background: #ef4444;
}

.academic-hierarchy-card-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted, #64748b);
  font-size: 13px;
}

.academic-hierarchy-card-path b {
  color: var(--line-strong, #cbd5e1);
  font-weight: 600;
}

.academic-hierarchy-card-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.academic-hierarchy-card-counts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-soft, #f1f5f9);
  color: var(--muted, #475569);
  font-size: 12px;
}

.academic-hierarchy-card-counts b {
  color: var(--ink, #0f172a);
  font-weight: 700;
}

.academic-hierarchy-expander {
  align-self: flex-start;
}

.academic-hierarchy-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.academic-hierarchy-add-material,
.academic-hierarchy-expander {
  white-space: nowrap;
}

.academic-hierarchy-detail {
  border-top: 1px solid var(--line, #e2e8f0);
  padding-top: 14px;
}

.teacher-dashboard .teacher-course-grid > .academic-hierarchy-dashboard,
.student-dashboard .progress-course-grid > .academic-hierarchy-dashboard {
  grid-column: 1 / -1;
  width: 100%;
}

.teacher-dashboard .academic-hierarchy-dashboard,
.student-dashboard .academic-hierarchy-dashboard {
  grid-template-columns: 1fr;
  gap: 12px;
}

.teacher-dashboard .academic-hierarchy-card,
.student-dashboard .academic-hierarchy-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 16px;
  border-radius: 14px;
}

.teacher-dashboard .academic-hierarchy-card-header,
.student-dashboard .academic-hierarchy-card-header {
  align-items: center;
  min-width: 0;
}

.teacher-dashboard .academic-hierarchy-card-identity h3,
.student-dashboard .academic-hierarchy-card-identity h3 {
  font-size: 15px;
}

.teacher-dashboard .academic-hierarchy-card-path,
.student-dashboard .academic-hierarchy-card-path {
  font-size: 12px;
}

.teacher-dashboard .academic-hierarchy-card-actions,
.student-dashboard .academic-hierarchy-card-actions {
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 1 / span 3;
}

.teacher-dashboard .academic-hierarchy-expander,
.student-dashboard .academic-hierarchy-expander {
  align-self: center;
}

.teacher-dashboard .academic-hierarchy-detail,
.student-dashboard .academic-hierarchy-detail {
  grid-column: 1 / -1;
}

.academic-hierarchy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.academic-hierarchy-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--muted, #475569);
  font:
    600 13px/1 Manrope,
    sans-serif;
  cursor: pointer;
}

.academic-hierarchy-tab:hover {
  border-color: var(--line-strong, #cbd5e1);
}

.academic-hierarchy-tab.is-active {
  border-color: var(--accent, #2563eb);
  background: var(--accent-soft, #eff6ff);
  color: var(--accent, #2563eb);
}

.academic-hierarchy-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-soft, #f1f5f9);
  font-size: 12px;
}

.academic-hierarchy-tab.is-active .academic-hierarchy-tab-count {
  background: var(--accent, #2563eb);
  color: #fff;
}

.academic-hierarchy-panels {
  display: grid;
  gap: 10px;
}

.academic-hierarchy-panel {
  min-width: 0;
}

/* Admin Recorded materials */
.recorded-material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.recorded-material-card {
  display: grid;
  align-content: start;
  gap: 15px;
  min-width: 0;
  padding: 0 0 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.recorded-material-card:hover,
.recorded-material-card:focus-visible {
  border-color: #c9c4ff;
  box-shadow: 0 14px 34px rgba(56, 48, 139, 0.1);
  transform: translateY(-2px);
}

.recorded-material-image,
.recorded-material-placeholder-image {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(76, 201, 240, 0.34), rgba(67, 170, 139, 0.2));
}

.recorded-material-placeholder-image {
  display: grid;
  place-items: center;
  color: #526273;
  font-weight: 700;
}

.recorded-material-copy,
.recorded-material-actions {
  margin-inline: 18px;
}

.modal-field input[type="file"] {
  height: 52px;
  padding: 7px;
  border: 1px solid #d9dce7;
  border-radius: 10px;
  background: #fafbfc;
  color: #667080;
  line-height: 36px;
  cursor: pointer;
}

.modal-field input[type="file"]::file-selector-button {
  box-sizing: border-box;
  height: 36px;
  margin-top: 7px;
  margin-right: 10px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--purple, #5749ed);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.modal-field input[type="file"]:hover::file-selector-button {
  background: #493bdc;
}

.modal-field input[type="file"]:active::file-selector-button {
  transform: translateY(1px);
}

.recorded-material-copy h2 {
  margin: 0;
  font: 800 18px/1.35 Manrope, sans-serif;
}

.recorded-material-copy p {
  margin: 7px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
}

.recorded-material-count {
  display: inline-flex;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f1f3f7;
  color: #4f5968;
  font-size: 11px;
  font-weight: 700;
}

.recorded-material-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.recorded-material-state {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
}

.recorded-material-detail-shell {
  width: min(1320px, calc(100% - 56px));
  margin: 48px auto;
}

.recorded-search-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 22px;
  padding: 10px 12px;
  border: 1px solid rgba(117, 87, 237, .14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(246, 243, 255, .94), rgba(246, 252, 251, .94));
  box-shadow: 0 10px 30px rgba(47, 38, 82, .05);
}

.recorded-search-box {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid #ddd8ec;
  border-radius: 13px;
  background: #fff;
}

.recorded-search-box:focus-within {
  border-color: #7557ed;
  box-shadow: 0 0 0 3px rgba(117, 87, 237, .12);
}

.recorded-search-box svg {
  width: 19px;
  fill: none;
  stroke: #766d8d;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.recorded-search-box input {
  width: 100%;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
}

.recorded-search-count {
  color: #6b647a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.recorded-search-clear {
  border: 0;
  background: transparent;
  color: #6547db;
  font-weight: 800;
  cursor: pointer;
}

.recorded-material-detail-card {
  display: grid;
  gap: 32px;
  padding: 36px;
  margin-top: 18px;
  border-radius: 22px;
}

.recorded-material-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 4px 2px 8px;
}

.recorded-material-detail-header h1 {
  margin: 8px 0;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.2;
}
.recorded-material-detail-header p {
  margin: 0 0 14px;
  color: var(--muted, #64748b);
  font-size: 15px;
}
.recorded-material-detail-header > div > strong {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: #f0ecff;
  color: #5b42d6;
  font-size: 12px;
}
.recorded-material-detail-header > .button {
  min-height: 48px;
  padding-inline: 22px;
}

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

.recorded-session-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 160ms ease, transform 160ms ease;
}

.recorded-session-card.is-closed { opacity: .62; }
.recorded-session-card.is-dragging { opacity: .35; transform: scale(.98); }
.recorded-session-card.is-uploading {
  border-color: #cfc3ff;
  box-shadow: 0 12px 30px rgba(91, 66, 214, .12);
}
.recorded-session-card.is-uploading .recorded-session-status {
  background: #f0ecff;
  color: #5b42d6;
}

.recorded-session-thumbnail,
.recorded-session-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.recorded-session-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e9ddff, #d7f4ef);
  color: #59506c;
  font-weight: 800;
}

.recorded-session-copy { padding: 22px 22px 12px; }
.recorded-session-title-row { display: flex; align-items: flex-start; gap: 8px; }
.recorded-session-title-row h2 { flex: 1; margin: 0; font: 800 19px/1.35 Manrope, sans-serif; }
.recorded-session-copy p { margin: 12px 0 0; color: var(--muted, #64748b); font-size: 14px; line-height: 1.55; }
.recorded-session-drag { cursor: grab; color: #8a94a3; font-weight: 800; user-select: none; }
.recorded-session-status { padding: 4px 7px; border-radius: 999px; background: #e9f8ef; color: #177245; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.recorded-session-card.is-closed .recorded-session-status { background: #eef0f4; color: #687386; }
.recorded-session-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding: 14px 22px 22px; }
.recorded-session-actions .button { min-height: 40px; padding: 10px 15px; }
.recorded-session-progress {
  height: 9px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceaf3;
}
.recorded-session-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7657ed, #9c71ef);
  transition: width 180ms ease;
}
.recorded-session-progress-label {
  display: block;
  margin-top: 8px;
  color: #5b42d6;
  font-size: 12px;
}
.recorded-session-form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff0f0;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
}

.recorded-session-upload-progress {
  margin: 0;
  color: #5940d7;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1050px) {
  .recorded-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recorded-session-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .recorded-material-grid { grid-template-columns: 1fr; }
  .recorded-search-toolbar { align-items: stretch; flex-wrap: wrap; }
  .recorded-search-box { flex-basis: 100%; }
  .recorded-search-count { flex: 1; }
  .recorded-session-grid { grid-template-columns: 1fr; }
  .recorded-material-detail-header { align-items: stretch; flex-direction: column; }
  .recorded-material-detail-shell {
    width: min(100% - 24px, 1320px);
    margin-block: 20px;
  }
  .recorded-material-detail-card { gap: 24px; padding: 22px; }
}

.academic-hierarchy-record-list {
  display: grid;
  gap: 10px;
}

.academic-hierarchy-content-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: var(--surface, #fff);
}

.academic-hierarchy-content-item > div {
  flex: 1;
  min-width: 0;
}

.academic-hierarchy-content-item strong {
  display: block;
  color: var(--ink, #0f172a);
  font:
    600 14px/1.3 Manrope,
    sans-serif;
}

.academic-hierarchy-content-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted, #64748b);
  font-size: 12px;
}

.academic-hierarchy-content-item p {
  margin: 4px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
  line-height: 1.4;
}

.academic-hierarchy-empty {
  padding: 20px;
  border: 1px dashed var(--line, #e2e8f0);
  border-radius: 12px;
  color: var(--muted, #64748b);
  text-align: center;
  font-size: 14px;
}

.academic-hierarchy-empty.is-error {
  border-color: #fecaca;
  color: #b91c1c;
}

.academic-hierarchy-loading {
  padding: 20px;
  color: var(--muted, #64748b);
  text-align: center;
  font-size: 14px;
}

.academic-hierarchy-detail-grid {
  display: grid;
  gap: 10px;
}

.academic-hierarchy-detail-grid p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line, #e2e8f0);
  font-size: 14px;
}

.academic-hierarchy-detail-grid strong {
  color: var(--muted, #64748b);
  font-weight: 600;
}

.academic-hierarchy-detail-grid span {
  color: var(--ink, #0f172a);
  text-align: right;
}

.academic-hierarchy-attachments {
  margin-top: 16px;
}

.academic-hierarchy-attachments h4 {
  margin: 0 0 10px;
  color: var(--ink, #0f172a);
  font:
    700 15px/1.3 Manrope,
    sans-serif;
}

.academic-hierarchy-video {
  width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  background: #000;
}

.admin-my-courses-section {
  margin-top: 24px;
}

.admin-my-courses-list {
  margin-top: 16px;
}

[dir="rtl"] .academic-hierarchy-detail-grid span {
  text-align: left;
}

[dir="rtl"] .academic-hierarchy-card-path b {
  transform: scaleX(-1);
}

/* =========================================================
   Assessment integrity audit viewer
   ========================================================= */

.assessment-integrity-viewer {
  display: grid;
  gap: 18px;
}

.assessment-integrity-viewer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px;
  border: 1px solid #e2e3f2;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfbff, #f7f8ff);
}

.assessment-integrity-viewer-eyebrow {
  color: #5749ed;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.assessment-integrity-viewer-header h3 {
  margin: 3px 0;
  color: #262a39;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
}

.assessment-integrity-viewer-header p {
  margin: 0;
  color: #7d8290;
  font-size: 0.76rem;
}

.assessment-integrity-status {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
}

.assessment-integrity-status.is-safe {
  color: #087443;
  background: #eaf8f1;
}

.assessment-integrity-status.is-warning {
  color: #8a5b00;
  background: #fff0c3;
}

.assessment-integrity-status.is-danger {
  color: #b42318;
  background: #fff0ef;
}

.assessment-integrity-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.assessment-integrity-metrics article {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid #e5e7ef;
  border-radius: 13px;
  background: #ffffff;
}

.assessment-integrity-metrics span {
  color: #868b98;
  font-size: 0.67rem;
}

.assessment-integrity-metrics strong {
  color: #303443;
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
}

.assessment-integrity-disqualification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #efbeb9;
  border-radius: 14px;
  background: #fff4f3;
}

.assessment-integrity-disqualification > span {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: #d92d20;
  font-weight: 900;
}

.assessment-integrity-disqualification strong {
  color: #a8271e;
  font-size: 0.78rem;
}

.assessment-integrity-disqualification p {
  margin: 3px 0;
  color: #a95b54;
  font-size: 0.73rem;
  line-height: 1.5;
}

.assessment-integrity-disqualification small {
  color: #aa6d67;
  font-size: 0.65rem;
}

.assessment-integrity-section-heading strong {
  color: #333747;
  font-size: 0.84rem;
}

.assessment-integrity-section-heading p {
  margin: 2px 0 0;
  color: #858a98;
  font-size: 0.7rem;
}

.assessment-integrity-timeline {
  display: grid;
}

.assessment-integrity-event {
  display: grid;
  grid-template-columns: 18px 38px minmax(0, 1fr);
  gap: 10px;
  min-height: 78px;
}

.assessment-integrity-event-line {
  position: relative;
  display: flex;
  justify-content: center;
}

.assessment-integrity-event-dot {
  position: relative;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin-top: 15px;
  border-radius: 50%;
  background: #aeb3c0;
}

.assessment-integrity-event-connector {
  position: absolute;
  top: 23px;
  bottom: -15px;
  width: 1px;
  background: #e0e2e9;
}

.assessment-integrity-event.is-warning .assessment-integrity-event-dot {
  background: #dda119;
}

.assessment-integrity-event.is-danger .assessment-integrity-event-dot {
  background: #d92d20;
}

.assessment-integrity-event.is-info .assessment-integrity-event-dot {
  background: #5749ed;
}

.assessment-integrity-event-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-top: 2px;
  border-radius: 11px;
  color: #5e6475;
  background: #f0f1f5;
  font-size: 0.8rem;
  font-weight: 900;
}

.assessment-integrity-event.is-warning .assessment-integrity-event-icon {
  color: #8d5f00;
  background: #fff0c5;
}

.assessment-integrity-event.is-danger .assessment-integrity-event-icon {
  color: #b42318;
  background: #fff0ef;
}

.assessment-integrity-event.is-info .assessment-integrity-event-icon {
  color: #5142e8;
  background: #eeecff;
}

.assessment-integrity-event-copy {
  min-width: 0;
  padding-bottom: 18px;
}

.assessment-integrity-event-copy > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.assessment-integrity-event-copy strong {
  color: #363a49;
  font-size: 0.77rem;
}

.assessment-integrity-event-copy time {
  flex: 0 0 auto;
  color: #969aa6;
  font-size: 0.64rem;
}

.assessment-integrity-event-copy > p {
  margin: 3px 0 5px;
  color: #777d8b;
  font-size: 0.72rem;
  line-height: 1.45;
}

.assessment-integrity-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}

.assessment-integrity-event-meta span {
  color: #969aa6;
  font-size: 0.62rem;
}

.assessment-integrity-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 36px 16px;
  border: 1px dashed #dbdde7;
  border-radius: 14px;
  text-align: center;
  background: #fafbfc;
}

.assessment-integrity-empty strong {
  color: #444958;
  font-size: 0.8rem;
}

.assessment-integrity-empty p {
  margin: 0;
  color: #8b909d;
  font-size: 0.7rem;
}

.assessment-integrity-empty.is-error {
  border-color: #efc2be;
  background: #fff5f4;
}

.assessment-integrity-loading {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 55px 20px;
  color: #696f80;
}

.assessment-integrity-loading > span {
  width: 32px;
  height: 32px;
  border: 3px solid #e3e4f1;
  border-top-color: #5749ed;
  border-radius: 50%;
  animation: assessmentIntegritySpin 700ms linear infinite;
}

@keyframes assessmentIntegritySpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .assessment-integrity-viewer-header {
    display: grid;
  }

  .assessment-integrity-status {
    width: max-content;
  }

  .assessment-integrity-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assessment-integrity-event-copy > div:first-child {
    display: grid;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .assessment-integrity-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .academic-hierarchy-dashboard {
    grid-template-columns: 1fr;
  }

  .teacher-dashboard .academic-hierarchy-card,
  .student-dashboard .academic-hierarchy-card {
    grid-template-columns: 1fr;
  }

  .teacher-dashboard .academic-hierarchy-card-actions,
  .student-dashboard .academic-hierarchy-card-actions {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-start;
  }

  .teacher-dashboard .academic-hierarchy-card-actions .button,
  .student-dashboard .academic-hierarchy-card-actions .button {
    flex: 1 1 auto;
  }

  .academic-hierarchy-content-item {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Exam Essay Grading Redesign
   ========================================================================== */

.assessment-grading-form {
  display: grid;
  gap: 24px;
  padding: 4px 0;
}

.assessment-grading-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  padding: 20px;
  display: grid;
  gap: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.assessment-grading-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.essay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.essay-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.essay-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.essay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.essay-badge-type {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.essay-badge-points {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.essay-prompt-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #4f46e5;
  border-radius: 8px;
  padding: 14px 16px;
}

.essay-prompt-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 6px;
}

.essay-prompt-text {
  font-size: 0.98rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.essay-student-response {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.essay-response-header {
  background: #f1f5f9;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}

.essay-response-body {
  padding: 14px 16px;
  margin: 0;
  font-size: 0.95rem;
  color: #0f172a;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fafafa;
  min-height: 50px;
}

.essay-response-empty {
  color: #94a3b8;
  font-style: italic;
}

.essay-grading-controls {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 16px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

@media (max-width: 680px) {
  .essay-grading-controls {
    grid-template-columns: 1fr;
  }
}

.essay-field-group {
  display: grid;
  gap: 6px;
}

.essay-field-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.essay-points-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.essay-points-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.essay-points-input-wrap input {
  width: 100%;
  padding: 9px 42px 9px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.essay-points-input-wrap input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.essay-points-unit {
  position: absolute;
  right: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  pointer-events: none;
}

.essay-quick-scores {
  display: flex;
  gap: 4px;
}

.essay-quick-btn {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.essay-quick-btn:hover {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
}

.essay-feedback-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #0f172a;
  background: #ffffff;
  resize: vertical;
  min-height: 52px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.essay-feedback-wrap textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.assessment-overall-feedback-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.assessment-overall-feedback-section label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  display: block;
}

.assessment-overall-feedback-section textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #0f172a;
  background: #ffffff;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.assessment-overall-feedback-section textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.assessment-grading-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 10px;
}