:root {
  --duo-green: #58cc02;
  --duo-green-dark: #46a302;
  --duo-blue: #1cb0f6;
  --duo-yellow: #ffc800;
  --duo-ink: #4b4b4b;
  --duo-muted: #a8a8a8;
  --duo-bg: #ffffff;
  --duo-card: #ffffff;
  --duo-line: #e1e1e1;
  --ndd-red: #b3232c;
  --ndd-red-dark: #8e1a21;
  --motif-bg: url("./motif.webp");
  --motif-wash: rgba(255, 255, 255, 0.5);
  --duo-shadow: 0 12px 24px rgba(28, 48, 74, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Nunito", sans-serif;
  color: var(--duo-ink);
  background: #fff;
}

.app-shell {
  width: min(1080px, 94vw);
  margin: 0 auto;
  padding: 14px 0 36px;
}

.auth-mode .app-shell {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #ececec;
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.04);
}

.topbar-content {
  width: 100%;
}

.summary-hero {
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.summary-text h3 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  color: #304d69;
}

.summary-text p {
  margin: 1px 0 6px;
  font-size: 13px;
  color: #8694a2;
}

.summary-progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #e8eef4;
  overflow: hidden;
}

.summary-progress span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  min-width: 8px;
  background: linear-gradient(90deg, #d4494f 0%, #b3232c 100%);
}

.summary-medal {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #ecd5d6;
  background: linear-gradient(180deg, #fff 0%, #fdf4f4 100%);
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  color: var(--ndd-red);
  white-space: nowrap;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.stat-chip {
  border: 1px solid #ecd5d6;
  border-radius: 12px;
  padding: 10px 11px 9px;
  background: linear-gradient(180deg, #fff 0%, #fcf9f9 100%);
}

.stat-chip span {
  display: block;
  font-size: 11px;
  color: #9a8e90;
  margin-bottom: 2px;
}

.stat-chip strong {
  display: block;
  color: var(--ndd-red);
  font-family: "Fredoka", sans-serif;
  font-size: 19px;
}

.stat-chip.done {
  border-color: #ebd5d6;
}

.stat-chip.wait {
  border-color: #efe2c8;
  background: linear-gradient(180deg, #fff 0%, #fff9ee 100%);
}

.stat-chip.wait strong {
  color: #8a5d16;
}

.stat-chip.active {
  border-color: #d8e4ef;
  background: linear-gradient(180deg, #fff 0%, #f5f9fd 100%);
}

.stat-chip.active strong {
  color: #2f577e;
}

.brand {
  display: grid;
  gap: 1px;
}

.brand-tag {
  width: fit-content;
  border-radius: 999px;
  background: var(--duo-blue);
  color: #fff;
  font-family: "Fredoka", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
}

.brand h1 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(24px, 4.2vw, 34px);
  letter-spacing: 0.01em;
  color: var(--duo-green);
  line-height: 1;
}

.brand p {
  margin: 0;
  color: #8b8b8b;
  font-size: 14px;
}

.view {
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 8px 16px rgba(20, 20, 20, 0.04);
  padding: 18px;
  animation: rise-in 0.35s ease;
}

.view.path-layout {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.view.teacher-ref-view {
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  padding: 0;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-screen {
  position: relative;
  width: min(460px, 92vw);
  margin: 0 auto;
  padding: 8px 6px 10px;
  background: #fff;
}

.auth-screen h2 {
  margin: 10px 0 4px;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(32px, 7vw, 46px);
  color: var(--ndd-red);
}

.auth-subtitle {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  color: #9a9a9a;
}

.auth-screen .login-form {
  display: grid;
  gap: 10px;
}

.auth-screen input {
  width: 100%;
  border: 3px solid #e2e2e2;
  border-radius: 24px;
  font-size: clamp(18px, 4vw, 28px);
  line-height: 1.1;
  padding: 13px 20px;
  background: #fff;
  color: #4b4b4b;
}

.auth-screen input::placeholder {
  color: #b4b4b4;
}

.password-row {
  position: relative;
}

.password-row input {
  padding-right: 160px;
}

.forgot-label {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Fredoka", sans-serif;
  font-size: 11px;
  color: #acacac;
  letter-spacing: 0.03em;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
  border-radius: 0;
  transition: color 0.14s ease;
}

.forgot-label:hover {
  color: var(--ndd-red);
}

input,
textarea,
select {
  width: 100%;
  border: 2px solid #cfdfed;
  border-radius: 14px;
  font: inherit;
  font-size: 18px;
  padding: 11px 12px;
  background: #fff;
  color: #2c3a49;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #d08f94;
  box-shadow: 0 0 0 3px rgba(179, 35, 44, 0.1);
}

textarea {
  min-height: 68px;
  resize: vertical;
}

button {
  font-family: "Fredoka", sans-serif;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 16px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none !important;
}

.primary-btn {
  background: var(--duo-green);
  color: #fff;
  box-shadow: 0 5px 0 var(--duo-green-dark);
}

.auth-screen .primary-btn {
  margin-top: 4px;
  width: 100%;
  background: linear-gradient(180deg, #c7333c 0%, var(--ndd-red) 100%);
  color: #fff;
  border-radius: 24px;
  font-size: clamp(20px, 4.2vw, 28px);
  letter-spacing: 0.08em;
  padding: 14px 10px;
  box-shadow: 0 6px 0 var(--ndd-red-dark);
  border-bottom: 2px solid rgba(120, 18, 24, 0.45);
}

.primary-btn:hover {
  transform: translateY(-1px);
}

.primary-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--duo-green-dark);
}

.auth-screen .primary-btn:active {
  box-shadow: 0 3px 0 var(--ndd-red-dark);
}

.auth-footer {
  margin: 14px 4px 0;
  text-align: center;
  color: #9a9a9a;
  font-size: 12px;
}

.login-transition {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.88) 74%);
}

.login-transition.play {
  animation: transition-fade 980ms cubic-bezier(0.22, 0.8, 0.24, 1) forwards;
}

.transition-bubble {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #df4a53 0%, #bb2832 55%, #8f1a21 100%);
  box-shadow:
    0 8px 20px rgba(141, 28, 37, 0.3),
    inset 0 1px 8px rgba(255, 255, 255, 0.22);
  transform: scale(0.25);
  opacity: 0;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.transition-bubble.play {
  animation: bubble-core 980ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.transition-bubble::before,
.transition-bubble::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(179, 35, 44, 0.28);
  transform: scale(0.55);
  opacity: 0;
}

.transition-bubble.play::before {
  animation: ring-wave 860ms ease-out 70ms forwards;
}

.transition-bubble.play::after {
  animation: ring-wave 900ms ease-out 150ms forwards;
}

@keyframes transition-fade {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bubble-core {
  0% {
    transform: scale(0.25);
    opacity: 0;
  }
  22% {
    transform: scale(1);
    opacity: 1;
  }
  34% {
    transform: scale(0.92);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(24);
    opacity: 0.98;
  }
}

@keyframes ring-wave {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  20% {
    opacity: 0.42;
  }
  100% {
    transform: scale(9.8);
    opacity: 0;
  }
}

.secondary-btn {
  background: #fff;
  color: #436078;
  border: 2px solid #cfe0ef;
}

.accent-btn {
  background: var(--duo-blue);
  color: #fff;
  box-shadow: 0 5px 0 #1495d1;
}

.accent-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #1495d1;
}

.ghost-btn {
  background: #eff8ff;
  border: 2px solid #d3e8f6;
  color: #2677a2;
}

.hidden {
  display: none !important;
}

.duo-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.duo-hero-main {
  border-radius: 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #e8fbe5, #f7fff1);
  border: 2px solid #d0edc2;
}

.duo-hero-main h2 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 30px;
  color: #33890a;
}

.duo-hero-main p {
  margin: 2px 0 10px;
  color: #3f5a4f;
  font-size: 19px;
}

.duo-hero-main p strong {
  color: #216e84;
}

.progress-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #d9edd0;
  overflow: hidden;
}

.progress-track span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--duo-green) 0%, #7fd22d 100%);
  transition: width 0.35s ease;
}

.duo-hero-stats {
  display: grid;
  gap: 8px;
}

.hero-stat {
  border-radius: 16px;
  padding: 10px;
  background: #fff;
  border: 2px solid #dce9f4;
  text-align: center;
}

.hero-stat strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  color: #1a80b3;
}

.hero-stat span {
  font-size: 15px;
  color: #607387;
}

.screen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.screen-head h2 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
  color: #2d4f67;
}

.chipline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border-radius: 999px;
  padding: 7px 12px;
  background: #edf7ff;
  color: #3c607b;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
}

.chip.good {
  background: #e4f7d8;
  color: #347f12;
}

.student-path-head h2 {
  color: var(--ndd-red);
}

.student-path-head .chip.good {
  border: 1px solid #e4b6b9;
  background: #f8e3e4;
  color: #902a31;
}

.path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 8px 0;
}

.path::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  width: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: repeating-linear-gradient(
    to bottom,
    #e7bfc2 0,
    #e7bfc2 16px,
    #f8e8ea 16px,
    #f8e8ea 30px
  );
}

.path-step {
  position: relative;
  z-index: 1;
  width: min(250px, 92%);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 5px;
}

button.path-step {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.path-step:not(:disabled) {
  cursor: pointer;
}

.path-step:disabled {
  cursor: not-allowed;
}

.path-step:nth-child(odd) {
  transform: translateX(-120px);
}

.path-step:nth-child(even) {
  transform: translateX(120px);
}

.path-step .order {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
  color: #fff;
  background: #d9c4c6;
  border: 5px solid #fff;
  box-shadow: 0 7px 0 #b7a0a3;
  transition: transform 0.16s ease;
}

.path-step:not(:disabled):hover .order {
  transform: translateY(-2px);
}

.path-step strong {
  display: inline-block;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #e6c2c5;
  padding: 6px 11px;
  font-size: 15px;
  color: #7d3239;
}

.step-pill {
  font-size: 13px;
  font-family: "Fredoka", sans-serif;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f6e5e7;
  color: #8f4249;
}

.path-step.current .order {
  background: var(--ndd-red);
  box-shadow: 0 7px 0 var(--ndd-red-dark);
  color: #fff;
  animation: pulse-node 1.4s ease infinite;
}

.path-step.current .step-pill {
  background: #f1d4d6;
  color: #8b2027;
}

.path-step.current strong {
  border-color: #dca1a6;
}

.path-step.done .order {
  background: #cc4850;
  box-shadow: 0 7px 0 #a3343b;
}

.path-step.done .step-pill {
  background: #f3d8da;
  color: #91242c;
}

.path-step.done strong {
  border-color: #ddb2b5;
}

.path-step.locked .order {
  background: #cbc6c7;
  box-shadow: 0 7px 0 #a9a2a3;
}

.path-step.locked .step-pill {
  background: #efe8e9;
  color: #8a7d7f;
}

@keyframes pulse-node {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.dua-list {
  display: grid;
  gap: 12px;
}

.dua-card {
  border-radius: 20px;
  padding: 16px;
  background: #fff;
  border: 2px solid #deebf6;
  box-shadow: 0 8px 14px rgba(21, 54, 89, 0.05);
}

.dua-card.locked {
  background: #f2f6fa;
  color: #7e8a97;
}

.dua-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dua-title {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 27px;
  color: #205070;
}

.status-badge {
  border-radius: 999px;
  padding: 5px 10px;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
}

.status-not_started {
  background: #e9edf2;
  color: #5d6b78;
}

.status-pending {
  background: #fff2cd;
  color: #8e6500;
}

.status-approved {
  background: #d9f2ca;
  color: #2d7d11;
}

.status-rejected {
  background: #ffe1e1;
  color: #9f3333;
}

.dua-meta {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.dua-meta .label {
  color: #317aa0;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
}

.arabic {
  font-size: clamp(24px, 3.2vw, 33px);
  line-height: 1.62;
  direction: rtl;
  text-align: right;
  color: #254763;
}

.latin {
  color: #2f536f;
  font-size: 20px;
}

.meaning {
  color: #607b93;
  font-size: 19px;
}

.player-row,
.record-row,
.review-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

audio {
  width: min(420px, 100%);
}

.hint {
  margin: 8px 0 0;
  color: #6a7f94;
  font-size: 17px;
}

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

.teacher-ref-shell {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100dvh - 42px);
}

.teacher-ref-sidebar {
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #7d424a 0%, #651f29 42%, #41141b 100%);
  color: #fff;
  padding: 0 0 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  box-shadow: 0 20px 36px rgba(58, 15, 23, 0.26);
}

.teacher-ref-logo-wrap {
  height: 248px;
  border-radius: 34px 34px 34px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  text-align: center;
}

.teacher-ref-logo-icon-box {
  width: 150px;
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  transform: translateX(-10px);
}

.teacher-ref-logo-image {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  object-position: 40% 50%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 9px 16px rgba(20, 5, 8, 0.3));
  transform: none;
}

.teacher-ref-logo-caption {
  display: grid;
  justify-items: center;
  line-height: 1;
  width: 150px;
}

.teacher-ref-logo-caption strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 34px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.teacher-ref-logo-caption span {
  display: block;
  margin-top: 4px;
  font-family: "Fredoka", sans-serif;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.teacher-ref-nav {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 0 14px;
}

.teacher-ref-nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  color: #efe7ea;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  letter-spacing: 0.01em;
  background: transparent;
  box-shadow: none;
}

.teacher-ref-nav-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.teacher-ref-nav-btn:hover,
.teacher-ref-nav-btn:active,
.teacher-ref-years button:hover,
.teacher-ref-years button:active,
.teacher-ref-months button:hover,
.teacher-ref-months button:active {
  transform: none;
}

.teacher-ref-nav-btn.active {
  background: #fff;
  color: #6e1f2a;
  box-shadow: 0 8px 14px rgba(31, 6, 9, 0.2);
}

.teacher-ref-main {
  border-radius: 28px;
  background: rgba(247, 244, 245, 0.95);
  background-image:
    linear-gradient(rgba(247, 244, 245, 0.9), rgba(247, 244, 245, 0.9)),
    var(--motif-bg);
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-position: top left, top left;
  border: 1px solid #dacfd2;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
  box-shadow: 0 18px 36px rgba(92, 24, 33, 0.1);
}

.teacher-ref-main-content {
  display: grid;
  gap: 14px;
}

.teacher-ref-top {
  border-radius: 16px;
  border: 1px solid #e2d8db;
  background: rgba(255, 255, 255, 0.84);
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.teacher-ref-top p {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(24px, 1.8vw, 32px);
  color: #5d2730;
  line-height: 1.02;
}

.teacher-ref-year {
  display: grid;
  justify-items: end;
  min-width: 220px;
  border-radius: 12px;
  border: 1px solid #e2d8db;
  background: rgba(255, 255, 255, 0.88);
  padding: 8px 12px;
}

.teacher-ref-year span {
  font-size: 12px;
  color: #8d767b;
}

.teacher-ref-year strong {
  font-family: "Fredoka", sans-serif;
  font-size: clamp(30px, 2vw, 38px);
  color: #642730;
  line-height: 1;
}

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

.teacher-ref-stat {
  border-radius: 16px;
  border: 1px solid #e0d5d7;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 247, 248, 0.92));
  padding: 14px 14px 14px 18px;
  min-height: 122px;
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 10px;
  position: relative;
}

.teacher-ref-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 9px;
  border-radius: 16px 0 0 16px;
  background: #beb6d5;
}

.teacher-ref-stat .icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: #f1ecef;
  border: 1px solid #e3d6d8;
  color: #7a313d;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 23px;
  line-height: 1;
}

.teacher-ref-stat .meta span {
  color: #8b7b7d;
  font-size: 13px;
  display: block;
}

.teacher-ref-stat .meta strong {
  font-family: "Fredoka", sans-serif;
  font-size: clamp(30px, 2.2vw, 40px);
  line-height: 1;
  color: #6a2831;
  display: block;
  margin-top: 1px;
}

.teacher-ref-stat.stat-rose .icon {
  color: #b24f58;
}

.teacher-ref-stat.stat-purple .icon {
  color: #95374d;
}

.teacher-ref-stat.stat-yellow .icon {
  color: #9f7217;
}

.teacher-ref-stat.stat-green .icon {
  color: #4e8f60;
}

.teacher-ref-stat.stat-rose::before {
  background: #d56067;
}

.teacher-ref-stat.stat-purple::before {
  background: #8f3650;
}

.teacher-ref-stat.stat-yellow::before {
  background: #e8b11d;
}

.teacher-ref-stat.stat-green::before {
  background: #4a9a62;
}

.teacher-ref-mid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}

.teacher-ref-mid.single {
  grid-template-columns: 1fr;
}

.teacher-ref-card {
  border-radius: 18px;
  border: 1px solid #dfd3d6;
  background: rgba(254, 252, 253, 0.95);
  padding: 14px;
  box-shadow: 0 10px 18px rgba(101, 35, 44, 0.05);
}

.teacher-ref-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.teacher-ref-card-head h3 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(25px, 1.7vw, 34px);
  color: #6d2730;
  line-height: 1.06;
}

.teacher-ref-card-head span {
  font-size: 14px;
  color: #8a777b;
}

.teacher-ref-years {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 10px;
}

.teacher-ref-years button {
  border: 0;
  border-radius: 0;
  padding: 0 0 4px;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  color: #8f7f81;
  border-bottom: 4px solid #d3d3d8;
}

.teacher-ref-years button.active {
  border-bottom-color: #8f3650;
  color: #6f2730;
}

.teacher-ref-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.teacher-ref-months button {
  border: 0;
  box-shadow: none;
  background: #f2f2f6;
  border-radius: 8px;
  padding: 7px 10px;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  color: #906f21;
}

.teacher-ref-months button.active {
  background: #8f3650;
  color: #fff;
}

.teacher-ref-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  min-height: 256px;
}

.teacher-ref-legend {
  display: grid;
  align-content: center;
  gap: 12px;
}

.legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.legend-row i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #60589f;
}

.legend-row span {
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  color: #4c3a3d;
}

.legend-row strong {
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  color: #6f2730;
}

.legend-row.tone-purple i {
  background: #8f3650;
}

.legend-row.tone-yellow i {
  background: #e8b11d;
}

.legend-row.tone-green i {
  background: #4a9a62;
}

.teacher-ref-bars {
  height: 100%;
  border-top: 1px solid #d2d0db;
  border-right: 1px solid #d2d0db;
  border-left: 1px solid #d2d0db;
  border-radius: 12px 12px 0 0;
  padding: 12px 12px 0;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 10px;
}

.teacher-ref-bars .bar-col {
  width: 24%;
  display: flex;
  align-items: end;
  justify-content: center;
}

.teacher-ref-bars .bar {
  width: 100%;
  max-width: 54px;
  border-radius: 10px 10px 0 0;
  background: #8f3650;
}

.teacher-ref-bars .bar-col.tone-purple .bar {
  background: #8f3650;
}

.teacher-ref-bars .bar-col.tone-yellow .bar {
  background: #e8b11d;
}

.teacher-ref-bars .bar-col.tone-green .bar {
  background: #4a9a62;
}

.teacher-ref-bottom {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}

.teacher-ref-activity-list {
  display: grid;
  gap: 7px;
}

.teacher-ref-activity-list p {
  margin: 0;
  padding: 10px 8px;
  border-bottom: 1px solid #d7d4df;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  color: #6f2730;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.teacher-ref-activity-list p span {
  font-size: 14px;
  color: #8f7f83;
}

.teacher-ref-view-btn {
  border-radius: 999px;
  font-size: 16px;
  padding: 7px 16px;
  border: 2px solid #8f3650;
  color: #8f3650;
  background: #fff;
}

.teacher-event-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 0.7fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.teacher-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #d7d4df;
  padding: 2px 0;
}

.teacher-event-row p {
  margin: 0;
  padding: 8px 8px;
  border-bottom: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  color: #6f2730;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.teacher-event-row p span {
  font-size: 13px;
  color: #8f7f83;
}

.teacher-event-delete {
  padding: 6px 10px;
  font-size: 14px;
}

.teacher-ref-ranks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.rank-card {
  border-radius: 16px;
  color: #fff;
  padding: 14px 12px;
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 258px;
}

.rank-card .avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #5a1e26;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  margin-bottom: 8px;
}

.rank-card h4 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  line-height: 1.15;
}

.rank-card strong {
  font-family: "Fredoka", sans-serif;
  font-size: 33px;
}

.rank-card span {
  margin-top: auto;
  justify-self: center;
  min-width: 72px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
}

.rank-card.rank-green {
  background: linear-gradient(180deg, #cf5b63 0%, #a43039 100%);
}

.rank-card.rank-purple {
  background: linear-gradient(180deg, #b24757 0%, #8f2f46 100%);
}

.rank-card.rank-yellow {
  background: linear-gradient(180deg, #e97e53 0%, #c84e35 100%);
}

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

.teacher-student-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: start;
}

.teacher-student-cards {
  display: grid;
  gap: 8px;
}

.teacher-student-card {
  width: 100%;
  text-align: left;
  border: 1px solid #e4d7d9;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f9f4f5 100%);
  box-shadow: 0 7px 12px rgba(95, 27, 37, 0.05);
}

.teacher-student-card:hover {
  border-color: #d19ba2;
  transform: translateY(-1px);
}

.teacher-student-card.active {
  border-color: #a03c4d;
  background: linear-gradient(180deg, #fffaf9 0%, #f7e7e9 100%);
  box-shadow: 0 10px 20px rgba(95, 27, 37, 0.12);
}

.teacher-student-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.teacher-student-card-head strong {
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  color: #642731;
}

.teacher-student-card-head span {
  font-size: 13px;
  color: #8c787c;
}

.teacher-student-card .teacher-mini-bar {
  width: 100%;
  margin-top: 7px;
}

.teacher-student-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 7px;
}

.teacher-student-card-meta small {
  color: #886e72;
  font-size: 12px;
}

.teacher-student-card-meta em {
  font-style: normal;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  color: #7e2f39;
}

.teacher-student-detail {
  border: 1px solid #e3d4d6;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 12px;
}

.teacher-student-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.teacher-student-detail-head h4 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 25px;
  color: #652731;
}

.teacher-student-detail-head p {
  margin: 2px 0 0;
  color: #8b767a;
  font-size: 13px;
}

.teacher-student-detail-head strong {
  font-family: "Fredoka", sans-serif;
  font-size: 33px;
  color: #7b2d39;
}

.teacher-student-kpis {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.teacher-student-kpis span {
  border-radius: 10px;
  border: 1px solid #e6dadd;
  background: #fcf8f9;
  padding: 7px 9px;
  font-size: 12px;
  color: #7d6a6e;
}

.teacher-student-kpis b {
  margin-left: 4px;
  font-family: "Fredoka", sans-serif;
  color: #672632;
}

.teacher-student-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.teacher-student-actions .secondary-btn {
  border-color: #dcc5ca;
  color: #6c2a35;
}

.teacher-dua-track-list {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}

.teacher-dua-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid #ecdee0;
  border-radius: 11px;
  padding: 8px 10px;
  background: #fff;
}

.teacher-dua-track strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  color: #6e2b35;
}

.teacher-dua-track p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #8c777b;
}

.teacher-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.teacher-filter-row input {
  flex: 1;
  min-width: 220px;
}

.filter-chip {
  border-radius: 999px;
  border: 1px solid #d7c5c8;
  background: #fff;
  color: #744a50;
  box-shadow: none;
  padding: 8px 12px;
}

.filter-chip.active {
  border-color: #8f3650;
  background: #f7e7ec;
  color: #6c2535;
}

.teacher-list-item {
  border: 1px solid #e4d7d9;
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: #fff;
}

.teacher-list-item strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 19px;
  color: #6f2730;
}

.teacher-list-item p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #8a777a;
}

.teacher-list-item em {
  font-style: normal;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  color: #7d2f39;
}

.teacher-mini-bar {
  width: min(210px, 32vw);
  height: 11px;
  border-radius: 999px;
  border: 1px solid #e5d0d3;
  background: #f4eaec;
  overflow: hidden;
}

.teacher-mini-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d04b54 0%, #a92e37 100%);
}

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

.teacher-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 18px;
  border: 1px solid #e6b9bc;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff4f5 0%, #fffcfc 58%, #fdecef 100%);
}

.teacher-banner-copy h2 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ndd-red);
}

.teacher-banner-copy p {
  margin: 4px 0 0;
  color: #85595d;
  font-size: 15px;
}

.teacher-banner-tag {
  min-width: 172px;
  border-radius: 14px;
  border: 1px solid #e7c4c7;
  background: #fff;
  padding: 10px 12px;
  text-align: right;
}

.teacher-banner-tag span {
  display: block;
  font-size: 12px;
  color: #9f7c7f;
}

.teacher-banner-tag strong {
  display: block;
  margin-top: 2px;
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  color: #6b2a30;
}

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

.teacher-metric-card {
  border-radius: 16px;
  border: 1px solid #ecd0d2;
  background: #fff;
  padding: 10px 12px;
}

.teacher-metric-card span {
  display: block;
  font-size: 12px;
  color: #8e6c6f;
}

.teacher-metric-card strong {
  display: block;
  margin-top: 2px;
  font-family: "Fredoka", sans-serif;
  font-size: 29px;
  color: #7f2a31;
}

.teacher-metric-card.tone-rose {
  border-color: #e6b9bc;
  background: linear-gradient(180deg, #fffafa 0%, #fff4f5 100%);
}

.teacher-metric-card.tone-ink {
  border-color: #d9c2c4;
  background: linear-gradient(180deg, #fffafa 0%, #f8eff0 100%);
}

.teacher-metric-card.tone-amber {
  border-color: #f1dfb7;
  background: linear-gradient(180deg, #fffdf7 0%, #fff8ea 100%);
}

.teacher-metric-card.tone-green {
  border-color: #cde6ce;
  background: linear-gradient(180deg, #f8fdf8 0%, #edf8ee 100%);
}

.teacher-main-grid,
.teacher-bottom-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 12px;
}

.teacher-panel {
  border-radius: 18px;
  border: 1px solid #e8c4c7;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 16px rgba(129, 43, 49, 0.04);
}

.teacher-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.teacher-panel-head h3 {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  color: #6f2730;
}

.teacher-panel-head span {
  font-size: 13px;
  color: #8f7073;
}

.teacher-panel-head.subhead {
  margin-top: 16px;
}

.teacher-progress-list {
  display: grid;
  gap: 9px;
}

.teacher-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 1.8fr) auto;
  gap: 9px;
  align-items: center;
}

.teacher-progress-meta strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  color: #6f2b32;
}

.teacher-progress-meta span {
  font-size: 12px;
  color: #917377;
}

.teacher-progress-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #eccfd1;
  background: #f6e7e9;
}

.teacher-progress-track span {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #d24b53 0%, #b3232c 100%);
  border-radius: 999px;
}

.teacher-progress-percent {
  min-width: 42px;
  text-align: right;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  color: #7c2f37;
}

.teacher-status-chart {
  min-height: 230px;
  border-radius: 16px;
  border: 1px solid #efd7d9;
  background: linear-gradient(180deg, #fffefe 0%, #fff9f9 100%);
  padding: 12px 9px;
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 8px;
}

.teacher-status-col {
  flex: 1;
  min-width: 60px;
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 5px;
}

.teacher-status-stick {
  width: min(60px, 100%);
  border-radius: 12px 12px 4px 4px;
  background: #d8b5b8;
  border: 1px solid #c98f95;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5);
}

.teacher-status-col strong {
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  color: #6f2930;
}

.teacher-status-col span {
  font-size: 12px;
  color: #8f7276;
}

.teacher-status-col.tone-approved .teacher-status-stick {
  background: linear-gradient(180deg, #d24d55 0%, #b92b34 100%);
  border-color: #9f2a32;
}

.teacher-status-col.tone-pending .teacher-status-stick {
  background: linear-gradient(180deg, #ffe28f 0%, #f2bf30 100%);
  border-color: #d5a623;
}

.teacher-status-col.tone-rejected .teacher-status-stick {
  background: linear-gradient(180deg, #f9b6bc 0%, #ea7e87 100%);
  border-color: #d56a72;
}

.teacher-status-col.tone-not-started .teacher-status-stick {
  background: linear-gradient(180deg, #ded7d8 0%, #c7bdbe 100%);
  border-color: #aa9ea0;
}

.teacher-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 6px;
}

.teacher-rank-card {
  border-radius: 16px;
  padding: 10px 10px 12px;
  color: #fff;
  background: linear-gradient(135deg, #b93d46 0%, #a1262e 100%);
}

.teacher-rank-card .rank-label {
  display: inline-block;
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.2);
}

.teacher-rank-card h4 {
  margin: 8px 0 2px;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
}

.teacher-rank-card p {
  margin: 0;
  font-size: 12px;
  opacity: 0.9;
}

.teacher-rank-card strong {
  display: block;
  margin-top: 5px;
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
}

.teacher-rank-card.rank-2 {
  background: linear-gradient(135deg, #c44f57 0%, #b43740 100%);
}

.teacher-rank-card.rank-3 {
  background: linear-gradient(135deg, #d5636b 0%, #be404a 100%);
}

section h3 {
  margin: 4px 0 8px;
  font-family: "Fredoka", sans-serif;
  font-size: 21px;
  color: #2f556f;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.summary-card {
  border-radius: 16px;
  padding: 12px;
  border: 2px solid #dce8f4;
  background: #fff;
}

.summary-card strong {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  color: #2777a2;
}

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

.submission {
  border-radius: 16px;
  padding: 12px;
  border: 1px solid #e8c8ca;
  background: #fff9fa;
}

.submission h4 {
  margin: 0 0 6px;
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  color: #7b2f37;
}

.sub-meta {
  margin: 0;
  font-size: 17px;
  color: #7d6468;
}

.audio-url-grid {
  display: grid;
  gap: 8px;
}

.audio-url-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 8px;
  align-items: center;
}

.audio-url-row strong {
  color: #7a3038;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  border-radius: 12px;
  padding: 10px 14px;
  background: #253446;
  color: #fff;
  font-size: 17px;
}

body,
.topbar,
.view,
.auth-screen,
.duo-hero-main,
.hero-stat,
.dua-card,
.summary-card,
.submission {
  background-image:
    linear-gradient(var(--motif-wash), var(--motif-wash)),
    var(--motif-bg);
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-position: top left, top left;
  background-attachment: fixed, fixed;
}

body.teacher-mode {
  background-image:
    linear-gradient(rgba(241, 234, 237, 0.82), rgba(241, 234, 237, 0.82)),
    var(--motif-bg);
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  background-position: top left, top left;
  background-attachment: fixed, fixed;
}

.teacher-mode .app-shell {
  width: min(1680px, 98vw);
}

@media (max-width: 900px) {
  .duo-hero {
    grid-template-columns: 1fr;
  }

  .duo-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .teacher-main-grid,
  .teacher-bottom-grid {
    grid-template-columns: 1fr;
  }

  .teacher-ref-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .teacher-ref-sidebar {
    border-radius: 18px;
    padding: 12px;
    grid-template-rows: auto;
  }

  .teacher-ref-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .teacher-ref-nav-btn {
    font-size: 16px;
    text-align: center;
    padding: 8px 6px;
  }

  .teacher-ref-main {
    border-radius: 18px;
  }

  .teacher-ref-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-ref-mid,
  .teacher-ref-bottom {
    grid-template-columns: 1fr;
  }

  .teacher-student-layout {
    grid-template-columns: 1fr;
  }

  .teacher-event-form {
    grid-template-columns: 1fr;
  }

  .teacher-ref-card-head h3 {
    font-size: 28px;
  }

  .teacher-ref-ranks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: 96vw;
    padding-top: 12px;
  }

  .auth-mode .app-shell {
    width: 96vw;
  }

  .topbar {
    position: static;
    border-radius: 15px;
    padding: 12px;
  }

  .stats-strip {
    grid-template-columns: 1fr;
  }

  .summary-hero {
    grid-template-columns: 1fr;
  }

  .summary-medal {
    justify-self: start;
  }

  .brand p {
    font-size: 15px;
  }

  .view {
    padding: 14px;
    border-radius: 19px;
  }

  .teacher-ref-top {
    gap: 8px;
  }

  .teacher-ref-top p {
    font-size: 18px;
  }

  .teacher-ref-year strong {
    font-size: 18px;
  }

  .teacher-ref-years {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .teacher-ref-stage {
    grid-template-columns: 1fr;
  }

  .teacher-ref-bars {
    min-height: 180px;
  }

  .teacher-ref-stat strong {
    font-size: 40px;
  }

  .teacher-list-item {
    grid-template-columns: 1fr;
  }

  .teacher-mini-bar {
    width: 100%;
  }

  .teacher-student-kpis {
    grid-template-columns: 1fr;
  }

  .teacher-student-actions .secondary-btn {
    width: 100%;
  }

  .teacher-event-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .teacher-banner-copy h2 {
    font-size: 24px;
  }

  .teacher-banner-tag {
    text-align: left;
    width: 100%;
  }

  .teacher-metric-grid {
    grid-template-columns: 1fr;
  }

  .teacher-progress-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .teacher-progress-percent {
    text-align: left;
    min-width: 0;
  }

  .teacher-status-chart {
    min-height: 200px;
    gap: 6px;
  }

  .teacher-status-col {
    min-width: 0;
  }

  .teacher-status-stick {
    width: 100%;
  }

  .teacher-rank-grid {
    grid-template-columns: 1fr;
  }

  .auth-screen {
    width: 96vw;
    padding-top: 8px;
  }

  .auth-screen h2 {
    margin-top: 16px;
    font-size: clamp(30px, 10vw, 38px);
  }

  .auth-screen input {
    font-size: 18px;
    padding: 12px 16px;
  }

  .password-row input {
    padding-right: 148px;
  }

  .forgot-label {
    font-size: 10px;
    right: 12px;
  }

  .auth-screen .primary-btn {
    font-size: 22px;
    padding: 12px 10px;
  }

  .path::before {
    left: 50%;
  }

  .path-step:nth-child(odd),
  .path-step:nth-child(even) {
    transform: none;
  }

  .path-step {
    width: min(240px, 96%);
  }

  .audio-url-row {
    grid-template-columns: 1fr;
  }
}