@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Manrope:wght@500;600;700;800&display=swap');

.learn-body {
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(231, 177, 58, .22), transparent 55%),
    radial-gradient(900px 420px at 110% 0%, rgba(37, 99, 235, .12), transparent 50%),
    radial-gradient(700px 380px at 50% 120%, rgba(34, 197, 94, .1), transparent 55%),
    #eef3f9;
  color: var(--ink);
  font-family: Manrope, Inter, Segoe UI, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
}
.learn-body .desktop-nav,
.learn-body .icon-nav,
.learn-body .nav-sentinel { display: none !important; }
.learn-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  animation: learn-fade-up .55s ease both;
  min-width: 0;
}
.learn-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 12px 32px rgba(12, 31, 73, .06);
  transition: transform .2s ease, box-shadow .2s ease;
  min-width: 0;
  overflow-wrap: break-word;
}
.learn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(12, 31, 73, .09);
}
.learn-card.is-static:hover,
.learn-hero:hover {
  transform: none;
  box-shadow: 0 12px 32px rgba(12, 31, 73, .06);
}
.learn-hero:hover { box-shadow: none; }
.learn-blobs {
  position: relative;
}
.learn-blobs::before,
.learn-blobs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.learn-blobs::before {
  width: 180px;
  height: 180px;
  background: rgba(231, 177, 58, .18);
  top: -40px;
  left: -50px;
  animation: learn-bob 6s ease-in-out infinite;
}
.learn-blobs::after {
  width: 140px;
  height: 140px;
  background: rgba(37, 99, 235, .12);
  right: -30px;
  bottom: -40px;
  animation: learn-bob 5s ease-in-out infinite reverse;
}
.learn-blobs > * { position: relative; z-index: 1; }
.cta-play {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 18px;
}
.cta-play > * { min-width: 0; }
.cta-play strong { display: block; font-size: 20px; overflow-wrap: break-word; }
.cta-play .btn { flex: 0 0 auto; }
.hearts { font-size: 22px; letter-spacing: 3px; }
.play-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.play-bar .roadmap-progress { flex: 1; margin: 0; }
.play-intro { text-align: left; padding: 8px 4px 4px; }
.play-intro .dash-kicker { margin-bottom: 10px; }
.play-intro h1 { margin: 0 0 10px; }
.module-kicker {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #5b6b88;
  margin: 18px 0 4px;
}
.cefr-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #5b6b88;
}
.learn-grid { display: grid; gap: 16px; }
.learn-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, #0c1f49 0%, #16356e 60%, #1d4ed8 100%);
  color: #fff;
  border: 0;
  margin-bottom: 8px;
}
.learn-hero:hover { transform: none; }
.learn-mascot {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe08a, #e7b13a 62%, #c4921e);
  display: grid;
  place-items: center;
  font-size: 42px;
  box-shadow: 0 8px 0 #b8860b, 0 14px 24px rgba(0,0,0,.2);
  animation: learn-bob 2.8s ease-in-out infinite;
}
.learn-hero h1 {
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing: -.6px;
}
.learn-hero p { margin: 0; color: rgba(255,255,255,.86); }
.learn-speech {
  display: inline-block;
  margin-top: 10px;
  background: #fff;
  color: #0c1f49;
  font-weight: 800;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 12px 12px 12px 4px;
  animation: learn-pop .45s .2s ease both;
  max-width: 100%;
  overflow-wrap: break-word;
}
.learn-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 26px;
}
.learn-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  animation: learn-fade-up .5s ease both;
}
.learn-stat:nth-child(2) { animation-delay: .05s; }
.learn-stat:nth-child(3) { animation-delay: .1s; }
.learn-stat:nth-child(4) { animation-delay: .15s; }
.learn-stat span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #5b6b88;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.learn-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  letter-spacing: -.5px;
}
.learn-stat.is-streak strong { color: #ea580c; }
.learn-stat.is-xp strong { color: #ca8a04; }
.learn-auth {
  max-width: 460px;
  margin: 48px auto;
  text-align: center;
}
.learn-auth h1 { margin: 0 0 8px; font-size: 30px; }
.learn-auth p { margin: 0 0 20px; color: #0c1f49; }
.learn-auth form { text-align: left; }
.learn-field { display: grid; gap: 6px; margin-bottom: 14px; }
.learn-field label { font-size: 13px; font-weight: 800; }
.learn-list { display: grid; gap: 12px; }
.learn-list a,
.learn-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.learn-list a:hover {
  border-color: var(--gold);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 22px rgba(12, 31, 73, .08);
}
.muted { color: #5b6b88; font-size: 14px; }
.learn-error, .learn-ok {
  display: none;
  margin-bottom: 14px;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
}
.learn-error { background: #fdecec; border: 1px solid #f5c2c2; color: #9b1c1c; }
.learn-ok { background: #effaf2; border: 1px solid #bde6c7; color: #0f5f23; }
.learn-error.show, .learn-ok.show { display: block; animation: learn-shake .35s ease; }
.option-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.option-btn:hover { border-color: var(--gold); transform: translateX(4px); }
.option-btn:active { transform: scale(.98); }
.option-btn.is-correct {
  border-color: #16a34a;
  background: #effaf2;
  animation: learn-pop .35s ease;
}
.option-btn.is-wrong {
  border-color: #dc2626;
  background: #fdecec;
  animation: learn-shake .4s ease;
}
.feedback {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: #f8fbff;
  border: 1px solid #d7e1ef;
  animation: learn-fade-up .3s ease;
}
.feedback h3 { margin: 0 0 8px; }
.feedback.wrong { background: #fff7f7; border-color: #f5c2c2; }
.feedback.right { background: #f3fbf6; border-color: #bde6c7; }
.cefr-path {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  margin: 22px 0 8px;
  padding: 8px 6px 0;
}
.cefr-path::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 36px;
  height: 8px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg, #d7e1ef 0 10px, transparent 10px 18px);
  z-index: 0;
}
.cefr-node {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 72px;
  text-decoration: none;
  color: inherit;
}
.cefr-orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #fff;
  border: 4px solid #d7e1ef;
  box-shadow: 0 8px 0 #c5d0de;
  transition: transform .2s ease;
}
.cefr-node:hover .cefr-orb { transform: translateY(-4px); }
.cefr-node.is-current .cefr-orb {
  border-color: #e7b13a;
  background: #fff4d6;
  box-shadow: 0 8px 0 #d4a017;
  animation: learn-pulse 1.6s ease-in-out infinite;
}
.cefr-node.is-review .cefr-orb {
  border-color: #22c55e;
  background: #ecfdf3;
  box-shadow: 0 8px 0 #16a34a;
}
.cefr-node.is-locked .cefr-orb {
  background: #eef2f7;
  color: #94a3b8;
  box-shadow: 0 8px 0 #cbd5e1;
}
.cefr-node small {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #5b6b88;
  text-align: center;
}
.lesson-path {
  display: grid;
  gap: 0;
  margin-top: 8px;
}
.lesson-node {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 8px 4px;
  position: relative;
}
.lesson-node::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 52px;
  bottom: -8px;
  width: 4px;
  background: #d7e1ef;
  border-radius: 99px;
}
.lesson-node:last-child::before { display: none; }
.lesson-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: #fff;
  border: 3px solid #d7e1ef;
  box-shadow: 0 6px 0 #c5d0de;
  z-index: 1;
  transition: transform .18s ease;
}
.lesson-node:hover .lesson-orb { transform: scale(1.08); }
.lesson-node.is-done .lesson-orb {
  background: #22c55e;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 6px 0 #15803d;
}
.lesson-node.is-next .lesson-orb {
  background: #fff4d6;
  border-color: #e7b13a;
  animation: learn-pulse 1.5s ease-in-out infinite;
}
.lesson-node.is-live .lesson-orb {
  background: #17345f;
  border-color: #e7b13a;
  color: #fff4d6;
  box-shadow: 0 6px 0 #102445;
}
.lesson-node.is-locked {
  opacity: .55;
  cursor: default;
  pointer-events: none;
}
.lesson-node.is-locked .lesson-orb {
  background: #e8eef6;
  border-color: #c5d0de;
  box-shadow: none;
}
.lesson-copy { min-width: 0; }
.lesson-copy strong { display: block; overflow-wrap: break-word; }
.roadmap-progress {
  height: 10px;
  background: #d7e1ef;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 16px;
}
.roadmap-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e7b13a, #facc15);
  transition: width .35s ease;
}
.play-shell { max-width: 640px; margin: 0 auto; }
.play-count {
  font-weight: 800;
  color: #5b6b88;
  margin-bottom: 8px;
}
.xp-float {
  position: absolute;
  right: 16px;
  top: 12px;
  font-weight: 900;
  color: #ca8a04;
  animation: learn-float .9s ease forwards;
}
.learn-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  background: #0c1f49;
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 999px;
  opacity: 0;
  z-index: 50;
  transition: .25s ease;
  box-shadow: 0 12px 30px rgba(12, 31, 73, .25);
  max-width: calc(100vw - 24px);
  text-align: center;
}
.learn-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.learn-toast.is-ok { background: #15803d; }
.learn-toast.is-bad { background: #b91c1c; }
.learn-confetti {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 60;
}
.learn-confetti span {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: learn-fall 1.2s linear forwards;
}
.learn-celebrate {
  position: fixed;
  inset: 0;
  background: rgba(12, 31, 73, .45);
  display: grid;
  place-items: center;
  z-index: 70;
  opacity: 0;
  transition: .25s ease;
}
.learn-celebrate.is-on { opacity: 1; }
.learn-celebrate-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  text-align: center;
  max-width: 420px;
  width: calc(100% - 32px);
  transform: scale(.9);
  animation: learn-pop .4s ease forwards;
}
.learn-celebrate-burst {
  font-size: 48px;
  animation: learn-spin 4s linear infinite;
}
.xp-pill {
  display: inline-block;
  margin: 8px 0 16px;
  background: #fff4d6;
  color: #92400e;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;
}
.continue-btn { margin-top: 14px; width: 100%; }
.topbar .lang-btn,
.topbar .logout-btn {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 9px;
  font-weight: 900;
  padding: 9px 15px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}
.option-editor { display: grid; gap: 10px; margin-bottom: 14px; }
.option-row {
  display: grid;
  grid-template-columns: 28px 1fr 1fr;
  gap: 8px;
  align-items: start;
}
@keyframes learn-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes learn-pop {
  0% { transform: scale(.86); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes learn-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes learn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes learn-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes learn-float {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-28px); }
}
@keyframes learn-fall {
  to { transform: translateY(110vh) rotate(220deg); opacity: .2; }
}
@keyframes learn-spin { to { transform: rotate(360deg); } }
@keyframes learn-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes learn-heart {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
#card.is-in { animation: learn-card-in .38s ease both; }
.chip, .match-btn, .sort-bucket {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.chip:active, .match-btn:active { transform: scale(.94); }
.hearts.is-hit { animation: learn-heart .35s ease; }
.account-wrap { position: relative; z-index: 200; }
.account-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid #e7b13a;
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 6px 0 #d4a017;
  max-width: 180px;
}
.account-chip:active { transform: translateY(2px); box-shadow: 0 4px 0 #d4a017; }
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0c1f49;
  color: #fff4d6;
  font-weight: 900;
  font-size: 13px;
  object-fit: cover;
  flex: 0 0 auto;
}
.account-avatar.is-lg { width: 52px; height: 52px; font-size: 16px; }
.account-chip-copy { text-align: left; line-height: 1.15; min-width: 0; }
.account-chip-copy strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chip-copy small { color: #5b6b88; font-weight: 800; }
.account-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(300px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(12, 31, 73, .16);
  padding: 10px;
  z-index: 210;
  animation: learn-card-in .22s ease;
  color: #0c1f49;
}
.account-sheet-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 8px 12px;
  border-bottom: 1px solid #eef3f9;
  margin-bottom: 6px;
}
.account-sheet-head .muted { margin: 2px 0 0; font-size: 12px; }
.account-role {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a16207;
}
.account-sheet-links { display: grid; gap: 2px; }
.account-sheet a, .account-sheet button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 800;
  padding: 11px 10px;
  border-radius: 12px;
  color: #0c1f49;
  text-decoration: none;
  cursor: pointer;
}
.account-sheet a:hover, .account-sheet button:hover { background: #fff8e7; }
.account-sheet a.is-active {
  background: #fff8e6;
  box-shadow: inset 0 0 0 2px #e7b13a;
}
.account-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff4d6;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.account-ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #0c1f49;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-logout { margin-top: 6px; border-top: 1px solid #eef3f9 !important; border-radius: 12px; color: #9b1c1c !important; }
.account-logout .account-ico { background: #fdecec; }
.account-logout .account-ico svg { stroke: #9b1c1c; }
.learn-body .account-wrap { margin-left: auto; pointer-events: auto; }
.learn-body .account-sheet { pointer-events: auto; }
.profile-preview { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; }
.roster-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line, #d9e0ea);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font: inherit;
}
.roster-row strong, .roster-row .muted { display: block; }
.roster-row.is-active {
  background: #fff8e6;
  border-color: #e7b13a;
  box-shadow: 0 0 0 2px rgba(231, 177, 58, .28);
}
.roster-meta { font-size: 12px; font-weight: 800; color: #5b6b88; min-width: 140px; }
.roster-meta .roadmap-progress { height: 8px; margin-bottom: 6px; }
.roster-items { margin: 0 0 16px; padding-left: 18px; }
.student-file h2 { margin: 0 0 4px; }
.student-file h3 { margin: 22px 0 8px; font-size: 15px; }
.student-file h4 { margin: 0 0 8px; font-size: 14px; }
.file-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 8px;
}
.file-kpis article {
  background: #f6f8fb;
  border-radius: 14px;
  padding: 12px;
}
.file-kpis span,
.file-kpis small {
  display: block;
  color: #5b6b88;
  font-size: 11px;
  font-weight: 800;
}
.file-kpis strong {
  display: block;
  margin: 6px 0 2px;
  font-size: 20px;
  line-height: 1;
}
.file-activity-list,
.file-module ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.file-activity,
.file-lesson {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid #eef3f9;
}
.file-activity span:first-child,
.file-lesson span:first-child {
  font-size: 12px;
  font-weight: 900;
}
.file-activity.is-ok span:first-child { color: #15803d; }
.file-activity.is-bad span:first-child { color: #9b1c1c; }
.file-activity small,
.file-lesson small {
  display: block;
  color: #5b6b88;
  font-weight: 700;
}
.file-lesson.is-done strong { color: #15803d; }
.file-lesson.is-openable { cursor: pointer; }
.file-lesson.is-openable:hover,
.file-lesson.is-open { background: #f6f8fb; }
.file-review-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.file-review-list.is-nested {
  margin: 0 0 16px 0;
  padding: 0 0 0 8px;
}
.file-review {
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #eef3f9;
  border-radius: 14px;
  background: #fff;
}
.file-review.is-ok { border-color: #cdead3; }
.file-review.is-bad { border-color: #f3cfcf; }
.file-review-flag {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #5b6b88;
}
.file-review.is-ok .file-review-flag { color: #15803d; }
.file-review.is-bad .file-review-flag { color: #9b1c1c; }
.file-review-prompt {
  margin: 0 0 8px;
  font-weight: 800;
}
.file-review p { margin: 0 0 6px; }
.file-options {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.file-option {
  padding: 4px 0;
  color: #24324a;
}
.file-option.is-ok { color: #15803d; font-weight: 800; }
.file-option.is-bad { color: #9b1c1c; font-weight: 800; }
.file-option small {
  display: inline;
  color: #5b6b88;
  font-weight: 700;
}
.file-module {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #eef3f9;
  border-radius: 14px;
  background: #fff;
}
@media (max-width: 700px) {
  .file-kpis { grid-template-columns: 1fr; }
  .file-activity,
  .file-lesson { grid-template-columns: 64px 1fr; }
}
@media (max-width: 800px) {
  .learn-body .account-chip-copy { display: none; }
  .learn-body .account-chip { padding: 3px; max-width: none; }
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.avatar-pick {
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 1;
  overflow: hidden;
}
.avatar-pick img, .avatar-pick .account-avatar { width: 100%; height: 100%; }
.avatar-pick.is-on { border-color: #e7b13a; box-shadow: 0 0 0 3px rgba(231,177,58,.25); }
@font-face {
  font-family: "Olha Sign";
  src: url("/assets/fonts/MrDeHaviland-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.cert-sheet {
  max-width: 980px;
  margin: 0 auto;
  background: #061a3f;
  padding: 11px;
  box-shadow: 0 22px 48px rgba(6, 26, 63, .2);
}
.cert-frame {
  background: linear-gradient(180deg, #e8c56a, #b8892c 55%, #d4af5a);
  padding: 5px;
}
.cert-paper {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196, 163, 90, .2), transparent 46%),
    linear-gradient(180deg, #fffdf6 0%, #f7eed6 100%);
  border: 2px solid #061a3f;
  padding: 28px 42px 22px;
  text-align: center;
  color: #0b1c3d;
  font-family: "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", Times, serif;
}
.cert-corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1.5px solid #c4a35a;
  pointer-events: none;
}
.cert-corner-tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.cert-corner-tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.cert-corner-bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.cert-corner-br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.cert-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin: 0 auto 6px;
  display: block;
}
.cert-school {
  margin: 0;
  letter-spacing: .28em;
  font-size: 13px;
  font-weight: 600;
  color: #8f6d2a;
  text-transform: uppercase;
}
.cert-school-sub {
  margin: 4px 0 10px;
  font-style: italic;
  color: #4a3d28;
  font-size: 15px;
}
.cert-title {
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: .16em;
  font-variant: small-caps;
  text-transform: lowercase;
  color: #061a3f;
  font-weight: 600;
}
.cert-lead {
  margin: 0;
  font-style: italic;
  color: #4a3d28;
  font-size: 15px;
}
.cert-name {
  margin: 8px auto 10px;
  max-width: 620px;
  padding-bottom: 8px;
  border-bottom: 1px solid #c4a35a;
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  color: #061a3f;
  line-height: 1.2;
}
.cert-body,
.cert-cando {
  max-width: 720px;
  margin: 12px auto 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #1b2c4d;
}
.cert-cando {
  font-style: italic;
  color: #4a3d28;
  font-size: 13.5px;
}
.cert-level-line {
  margin: 16px 0 0;
  font-weight: 700;
  letter-spacing: .04em;
  color: #061a3f;
}
.cert-result {
  margin: 6px 0 0;
  color: #8f6d2a;
}
.cert-signoff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  max-width: 720px;
  margin: 28px auto 0;
}
.cert-sign-block { min-width: 0; }
.cert-sign-value {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #8f6d2a;
  font-weight: 700;
  color: #061a3f;
}
.cert-sign-value.is-script {
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-size: 28px;
  font-weight: 400;
  border-bottom-color: #8f6d2a;
}
.cert-sign-block.is-signed {
  position: relative;
  padding-bottom: 2px;
}
.cert-sign-block.is-signed:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 20px;
  border-bottom: 1px solid #8f6d2a;
}
.cert-signature,
.cert-signature-img {
  position: relative;
  z-index: 1;
  display: block;
  height: 68px;
  width: auto;
  max-width: 220px;
  margin: 0 auto -14px;
  object-fit: contain;
  object-position: center bottom;
}
.cert-sign-label {
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4a3d28;
}
.cert-seal {
  width: 72px;
  height: 72px;
  border: 2px solid #c4a35a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  color: #8f6d2a;
  box-shadow: inset 0 0 0 1px #c4a35a;
}
.cert-seal span {
  display: block;
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 700;
}
.cert-seal strong {
  display: block;
  font-size: 18px;
  color: #061a3f;
  letter-spacing: .04em;
}
.cert-serial {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #061a3f;
}
.cert-verify {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: #4a3d28;
}
.cert-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
@media (max-width: 720px) {
  .cert-paper { padding: 22px 18px 18px; }
  .cert-title { font-size: 24px; letter-spacing: .08em; }
  .cert-name { font-size: 32px; }
  .cert-signature-img { height: 48px; }
  .cert-signoff { grid-template-columns: 1fr; justify-items: center; }
  .cert-sign-block { width: min(220px, 100%); }
}
.dash-certs {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.dash-cert {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid #e7b13a;
  border-radius: 16px;
  background: #fffdf6;
  text-decoration: none;
  color: inherit;
}
.dash-cert strong { display: block; }
@media print {
  .topbar, .cert-intro, .cert-actions, .example-note { display: none !important; }
  .learn-body { background: #fff; }
  .learn-wrap { padding: 0; max-width: none; }
  .cert-sheet { box-shadow: none; max-width: none; }
}
#prompt, .play-intro h1, .play-intro p { overflow-wrap: break-word; }
@media (hover: none) {
  .learn-card:hover,
  .learn-list a:hover,
  .option-btn:hover,
  .cefr-node:hover .cefr-orb,
  .lesson-node:hover .lesson-orb {
    transform: none;
    box-shadow: inherit;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learn-wrap, .learn-stat, .learn-mascot, .cefr-node.is-current .cefr-orb, .lesson-node.is-next .lesson-orb {
    animation: none !important;
  }
  .learn-card:hover, .option-btn:hover { transform: none; }
}
@media (max-width: 770px) {
  .learn-body .topbar {
    flex-wrap: nowrap;
    height: 64px;
    min-height: 64px;
    padding: 0 12px;
    gap: 8px;
  }
  .learn-body .desktop-nav {
    display: none !important;
  }
  .learn-body .brand {
    min-width: 0;
    gap: 8px;
  }
  .learn-body .brand span {
    font-size: 13px;
    line-height: 1.1;
  }
  .learn-body .brand-logo {
    width: 34px;
    height: 34px;
  }
  .learn-body .logout-btn {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .learn-wrap {
    padding: 14px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .learn-card {
    padding: 16px;
    border-radius: 16px;
  }
  .learn-blobs::before,
  .learn-blobs::after {
    display: none;
  }
  .learn-hero {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    align-items: start;
  }
  .learn-hero h1 { font-size: 22px; letter-spacing: -.3px; }
  .learn-hero p { font-size: 13px; line-height: 1.4; }
  .learn-mascot {
    width: 52px;
    height: 52px;
    font-size: 26px;
    box-shadow: 0 4px 0 #b8860b, 0 8px 16px rgba(0,0,0,.18);
  }
  .learn-speech { font-size: 12px; padding: 6px 10px; }
  .learn-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
  }
  .learn-stat { padding: 12px; border-radius: 14px; }
  .learn-stat span { font-size: 10px; }
  .learn-stat strong { font-size: 20px; }
  .cta-play {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cta-play .btn { width: 100%; }
  .cefr-path {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px;
    overflow: visible;
    margin: 14px 0 4px;
    padding: 0;
  }
  .cefr-path::before { display: none; }
  .cefr-node { width: auto; gap: 6px; }
  .cefr-orb {
    width: 44px;
    height: 44px;
    border-width: 3px;
    box-shadow: 0 4px 0 #c5d0de;
    font-size: 12px;
  }
  .cefr-node.is-current .cefr-orb,
  .cefr-node.is-review .cefr-orb,
  .cefr-node.is-locked .cefr-orb {
    box-shadow: 0 4px 0 #c5d0de;
  }
  .cefr-node.is-current .cefr-orb { box-shadow: 0 4px 0 #d4a017; }
  .cefr-node.is-review .cefr-orb { box-shadow: 0 4px 0 #16a34a; }
  .cefr-node small { font-size: 9px; line-height: 1.15; }
  .lesson-node {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0;
  }
  .lesson-node::before {
    left: 20px;
    top: 44px;
  }
  .lesson-orb {
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 0 #c5d0de;
    font-size: 13px;
  }
  .lesson-copy strong { font-size: 15px; }
  .learn-auth {
    margin: 12px auto;
    max-width: none;
  }
  .learn-auth h1 { font-size: 24px; }
  .option-btn {
    padding: 13px 14px;
    min-height: 48px;
  }
  .option-btn:hover { transform: none; }
  .play-intro h1 { font-size: 22px; }
  #prompt { font-size: 18px; line-height: 1.35; margin: 0 0 12px; }
  .learn-celebrate-card { padding: 24px 18px; }
  .option-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .learn-body .brand span { display: none; }
  .learn-stats { gap: 6px; }
  .learn-stat { padding: 10px 8px; }
  .cefr-orb { width: 40px; height: 40px; }
}
.listen-player {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.listen-player[hidden] { display: none; }
.listen-player .btn { min-height: 44px; }
.exam-timer {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 8px 0 12px;
  color: #0c1f49;
}
.exam-clip {
  margin: 0 0 18px;
}
.exam-clip audio {
  width: 100%;
  margin: 8px 0;
}
#writeBox textarea,
#writeInput {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
}
.placement-part {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a6a2a;
}
.placement-rubric {
  margin: 16px 0;
  padding-left: 20px;
  line-height: 1.55;
}
.test-brief {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f6f8fb;
  border: 1px solid #eef3f9;
}
.test-brief h2 {
  margin: 0 0 8px;
  font-size: 16px;
}
.test-brief ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.55;
}
.test-brief li { margin: 0 0 6px; }
.placement-instruction {
  background: #f4f7fb;
  border-left: 4px solid #e7b13a;
  padding: 10px 14px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.placement-points {
  margin: 0 0 12px;
  padding-left: 20px;
}
.placement-points li { margin: 0 0 4px; }
.placement-passage {
  background: #f4f7fb;
  border: 1px solid #d7e1ef;
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 16px;
  white-space: pre-wrap;
  line-height: 1.55;
}
.placement-write textarea {
  width: 100%;
  min-height: 160px;
  border: 1px solid #d7e1ef;
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  resize: vertical;
}
.placement-actions { margin-top: 14px; }
.paper-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a6a2a;
}
.paper-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5b6b88;
}
.paper-pair {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
@media (min-width: 860px) {
  .paper-pair { grid-template-columns: 1fr 1fr; }
}
.paper-sheet {
  position: relative;
  min-height: 320px;
  padding: 22px 20px 22px 28px;
  border: 1px solid #e4d7b5;
  background-color: #fffdf6;
  background-image:
    linear-gradient(#c9a24a 0 0),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(20, 36, 68, 0.08) 31px,
      rgba(20, 36, 68, 0.08) 32px
    );
  background-size: 2px 100%, 100% 32px;
  background-position: 12px 0, 0 8px;
  background-repeat: no-repeat, repeat;
  box-shadow: 0 10px 28px rgba(20, 36, 68, 0.08);
  color: #1c2a44;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 32px;
  white-space: pre-wrap;
}
.paper-sheet textarea {
  display: block;
  width: 100%;
  min-height: 320px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 32px;
  resize: vertical;
  outline: none;
}
.paper-sheet.is-marked {
  background-color: #f3f7f3;
  border-color: #b7cbb7;
}
.paper-sheet.is-read {
  min-height: 280px;
}
.teacher-note {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid #c9a24a;
  color: #1c2a44;
}
#writing .continue-btn { margin-top: 16px; }
#blankBox { margin-top: 4px; }
.play-hint {
  margin: -4px 0 14px;
  color: #5b6b88;
  font-weight: 600;
}
.tf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tf-row .option-btn {
  text-align: center;
  font-size: 18px;
  padding: 18px 12px;
}
.chip-bank, .chip-built {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
  margin-bottom: 12px;
  padding: 12px;
  border: 2px dashed #d7e1ef;
  border-radius: 18px;
  background: #f8fbff;
  align-content: flex-start;
}
.chip-built {
  border-style: solid;
  background: #fff;
  min-height: 64px;
}
.chip {
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 8px 14px;
  background: #fff;
  font: inherit;
  font-weight: 800;
  color: #1c2a44;
  cursor: pointer;
  white-space: normal;
  line-height: 1.3;
  text-align: left;
}
.chip.is-built { border-color: var(--gold); background: #fff8e8; }
.chip.is-used { opacity: .35; }
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.match-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.match-btn.is-picked {
  border-color: var(--gold);
  background: #fff8e8;
}
.match-btn.is-paired { opacity: .4; }
.match-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 28px;
}
.match-pair {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef4ff;
  font-weight: 700;
  font-size: 14px;
}
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-grid .option-btn {
  width: auto;
  min-width: 92px;
  text-align: center;
  border-radius: 999px;
  margin-bottom: 0;
}
.spot-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.talk-box { margin: 0 0 16px; }
.talk-line {
  display: inline-block;
  margin: 0 0 10px;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  background: #eef4ff;
  font-weight: 700;
}
.sort-buckets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.sort-bucket {
  min-height: 120px;
  padding: 12px;
  border: 2px dashed #d7e1ef;
  border-radius: 18px;
  background: #f8fbff;
  cursor: pointer;
}
.sort-bucket strong { display: block; margin-bottom: 8px; }
.sort-drop { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.is-correct {
  border-color: #16a34a;
  background: #effaf2;
}
.chip.is-wrong {
  border-color: #dc2626;
  background: #fdecec;
}
#blankInput {
  width: 100%;
  min-height: 48px;
  margin-bottom: 10px;
  font-size: 18px;
}
.skill-pill {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5b6b88;
}
.teach-stage { margin-bottom: 16px; }
.teach-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5b6b88;
}
.teach-item {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.teach-item:first-of-type { border-top: 0; }
.teach-options { margin: 8px 0; padding-left: 22px; }
.teach-options .is-correct { font-weight: 700; }
.teach-key { margin: 8px 0 0; font-weight: 700; }
.teach-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.teach-listen,
.teach-copy { margin-left: 8px; padding: 4px 10px; font-size: 12px; }
.teach-forms {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding-left: 18px;
}
.teach-steps { margin: 8px 0 16px; padding-left: 22px; }
.teach-steps li { margin: 0 0 8px; }
.teach-chat-line { margin: 6px 0; }
.teach-game {
  background: #fff9ef;
  border: 1px solid #ead8b8;
  border-radius: 16px;
  padding: 14px 16px;
}
.teach-match p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}
.teach-match span,
.teach-chips span {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #ead8b8;
  font-weight: 700;
}
.teach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.teach-chips .is-key,
.teach-match p span:last-child {
  border-color: #ffc20d;
  background: #fff8e8;
}
.teach-talk {
  display: inline-block;
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: #eef4ff;
  font-weight: 700;
}
.teach-slides {
  position: fixed;
  inset: 0;
  background: rgba(12, 31, 73, .55);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}
.teach-slides[hidden] { display: none; }
.teach-slides-card {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 820px;
  width: 100%;
  max-height: 70vh;
  overflow: auto;
}
.teach-slides-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
}
@media print {
  .topbar, .logout-btn, .no-print, .teach-toolbar, #teacherLocale, .teach-slides, .deck { display: none !important; }
  .learn-body { background: #fff; }
  .learn-card { break-inside: avoid; box-shadow: none; }
}

.learn-body {
  position: relative;
}
.learn-body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.learn-body > * { position: relative; z-index: 1; }
.learn-wrap h1,
.learn-hero h1,
.learn-auth h1 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -.03em;
}
.learn-card {
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 18px 40px rgba(7, 25, 72, .08),
    0 4px 0 rgba(255, 194, 13, .18);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.learn-card:hover {
  transform: translateY(-6px) rotateX(3deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 28px 50px rgba(7, 25, 72, .14),
    0 8px 0 rgba(255, 194, 13, .28);
}
.learn-card.is-static:hover,
.learn-hero:hover {
  transform: none;
}
.learn-hero {
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(6, 26, 63, .28);
}
.learn-hero::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -30%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,194,13,.35), transparent 70%);
  pointer-events: none;
}
.learn-mascot {
  font-size: 0 !important;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff4c4, #ffc20d 58%, #b8860b);
  box-shadow:
    0 16px 28px rgba(184, 134, 11, .35),
    inset 0 -10px 16px rgba(0,0,0,.16),
    inset 0 8px 10px rgba(255,255,255,.45);
  animation: luxBob 3.4s ease-in-out infinite;
}
.learn-stat {
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(7, 25, 72, .08), 0 3px 0 #ffc20d;
  transform: perspective(800px) rotateX(4deg);
}
.learn-body .btn-primary,
.learn-body .btn.btn-primary {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(#ffe36a, #ffc20d 55%, #e0a400);
  color: #071948;
  font-weight: 800;
  box-shadow: 0 8px 0 #c49208, 0 18px 28px rgba(255, 194, 13, .28);
  transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s;
}
.learn-body .btn-primary:hover,
.learn-body .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 #c49208, 0 22px 32px rgba(255, 194, 13, .34);
}
.learn-body .btn-primary:active,
.learn-body .btn.btn-primary:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #c49208;
}
.learn-body .field,
.learn-body input.field,
.learn-body select.field,
.learn-body textarea.field {
  border-radius: 14px;
  border: 1.5px solid #d7e1ef;
  box-shadow: inset 0 2px 6px rgba(7, 25, 72, .04);
  min-height: 48px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.learn-body .field:focus,
.learn-body input.field:focus {
  border-color: #ffc20d;
  box-shadow: 0 0 0 4px rgba(255, 194, 13, .22), inset 0 2px 6px rgba(7, 25, 72, .04);
  transform: translateY(-1px);
}
.option-btn {
  box-shadow: 0 6px 0 #ead8b8, 0 12px 20px rgba(7, 25, 72, .06);
}
.option-btn:hover { transform: translateY(-3px) rotateX(6deg); }
.cefr-orb, .lesson-orb {
  transform: perspective(600px) rotateX(8deg);
}
.lux-auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}
.lux-auth-visual {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 18% 88%, rgba(255,194,13,.28), transparent 58%),
    linear-gradient(165deg, #071948 0%, #0c2a6b 55%, #061a3f 100%);
  color: #fff;
  padding: 48px 46px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.lux-auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 20% 80%, rgba(255,194,13,.22), transparent 60%);
  pointer-events: none;
}
.lux-auth-visual .lux-mark {
  position: absolute;
  top: 36px;
  left: 46px;
  z-index: 1;
  margin: 0;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  color: #ffc20d;
}
.lux-auth-visual h2 {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.18;
  margin: 0 0 12px;
  max-width: 100%;
}
.lux-auth-visual p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 18px;
  max-width: 34ch;
}
.lux-auth-panel {
  display: grid;
  place-items: center;
  padding: 32px 28px;
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(255,194,13,.16), transparent 60%),
    #f6f3ea;
}
.lux-auth-panel .learn-card {
  width: min(460px, 100%);
  margin: 0;
}
@keyframes luxBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.learn-hero {
  background: linear-gradient(135deg, #071948 0%, #0c2a6b 70%, #16356e 100%);
  min-height: 0;
}
.learn-body .topbar {
  z-index: 200;
  overflow: visible;
  box-shadow: 0 18px 40px rgba(6, 26, 63, .28);
  border-bottom: 2px solid rgba(255, 194, 13, .55);
}
.learn-body .dash,
.learn-body .learn-wrap {
  z-index: 1;
}
.cefr-node.is-current .cefr-orb,
.lesson-node.is-next .lesson-orb {
  box-shadow: 0 10px 0 #d4a017, 0 18px 32px rgba(255, 194, 13, .35);
}
.learn-list a,
.learn-item {
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(7, 25, 72, .06), 0 3px 0 rgba(255, 194, 13, .22);
}
.learn-list a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(7, 25, 72, .12), 0 6px 0 #ffc20d;
}
.learn-list a:active,
.learn-list a.is-active {
  background: #fff8e6;
  border-color: #e7b13a;
  box-shadow: 0 0 0 2px #e7b13a, 0 10px 24px rgba(7, 25, 72, .08);
}
.learn-list a.is-topic {
  margin-left: 18px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.option-btn {
  border-radius: 16px;
  box-shadow: 0 7px 0 #ead8b8, 0 14px 22px rgba(7, 25, 72, .08);
}
.option-btn:hover {
  transform: translateY(-4px) rotateX(8deg);
  box-shadow: 0 11px 0 #ffc20d, 0 20px 26px rgba(7, 25, 72, .12);
}
.option-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #ead8b8;
}
.play-bar {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 12px 28px rgba(7, 25, 72, .08);
}
@media (max-width: 860px) {
  .lux-auth { grid-template-columns: 1fr; }
  .lux-auth-visual { min-height: 220px; padding: 28px 22px; }
  .lux-auth-visual .lux-mark { top: 18px; left: 22px; }
}

.dash {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px calc(40px + env(safe-area-inset-bottom, 0px));
}
.dash h1,
.dash h2,
.dash h3 {
  font-family: Manrope, Inter, Segoe UI, sans-serif;
  letter-spacing: -.03em;
}
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 6px 0 22px;
}
.dash-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a6a12;
}
.dash-head h1 {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
  color: #071948;
}
.dash-lead {
  margin: 8px 0 0;
  max-width: 54ch;
  color: #4b5d7a;
  font-size: 15px;
  line-height: 1.45;
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.dash.is-teacher .dash-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.dash-kpi {
  background: #fff;
  border: 1px solid #e4ebf4;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 10px 24px rgba(7, 25, 72, .04);
}
.dash-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7c96;
}
.dash-kpi strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1;
  color: #071948;
}
.dash-kpi.is-hot strong { color: #b45309; }
.dash-kpi.is-ok strong { color: #15803d; }
a.dash-kpi {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.dash-kpi:hover,
a.dash-kpi:focus-visible {
  border-color: #e7b13a;
  box-shadow: 0 0 0 2px rgba(231, 177, 58, .28);
}
a.dash-kpi:active {
  background: #fff8e6;
}
.dash-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 20px;
  padding: 20px 22px;
  background: #071948;
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(7, 25, 72, .16);
}
.dash-next .dash-kicker { color: #ffc20d; }
.dash-next h2 {
  margin: 0;
  font-size: 22px;
}
.dash-next p { margin: 6px 0 0; color: rgba(255,255,255,.72); }
.dash-next .btn { flex: 0 0 auto; }
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
}
.dash-grid.is-wide {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}
.dash-stack { display: grid; gap: 16px; }
.dash-panel {
  background: #fff;
  border: 1px solid #e4ebf4;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 12px 28px rgba(7, 25, 72, .04);
}
.dash-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.dash-panel-head h2 {
  margin: 0;
  font-size: 18px;
}
.dash-panel-head p { margin: 4px 0 0; }
.dash-progress {
  height: 8px;
  background: #e8eef6;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 14px;
}
.dash-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e7b13a, #facc15);
}
.dash .cefr-path { margin-top: 8px; }
.dash .lesson-node {
  padding: 10px 8px;
  border-radius: 14px;
  margin: 0 -8px;
}
.dash .lesson-node:hover { background: #f6f8fb; }
.dash .lesson-node.is-next { background: #fff8e6; }
.status-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3f9;
  color: #3d4f6b;
  font-size: 11px;
  font-weight: 800;
}
.status-pill.is-next { background: #fff4d6; color: #92400e; }
.status-pill.is-done { background: #ecfdf3; color: #15803d; }
.status-pill.is-live { background: #e8eef8; color: #16356e; }
.status-pill.is-wait { background: #fff1e8; color: #9a3412; }
.work-group + .work-group {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eef3f9;
}
.work-group h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.work-row,
.work-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eef3f9;
  text-decoration: none;
  color: inherit;
}
.work-row:last-child,
.work-link:last-child { border-bottom: 0; }
.work-row strong,
.work-link strong { display: block; }
.work-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.dash-empty {
  padding: 22px 8px;
  color: #5b6b88;
  text-align: center;
}
.teach-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 16px;
}
.teach-nav {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line, #d9e0ea);
  border-radius: 20px;
  padding: 12px 10px;
  box-shadow: 0 10px 24px rgba(7, 25, 72, .06);
}
.teach-nav-kicker {
  margin: 0 8px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7c96;
}
.teach-nav h3 {
  margin: 12px 8px 6px;
  font-size: 12px;
  color: #5b6b88;
}
.teach-nav section:first-of-type h3 { margin-top: 4px; }
.teach-nav a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  border-radius: 12px;
}
.teach-nav a span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #5b6b88;
}
.teach-nav a:hover,
.teach-nav a:focus-visible {
  background: #f6f8fb;
}
.teach-nav a.is-active {
  background: #fff8e6;
  box-shadow: inset 0 0 0 2px #e7b13a;
}
.teach-nav a.is-topic {
  padding-left: 18px;
  font-size: 13px;
  color: #3d4f6b;
}
.teach-stage.is-active {
  box-shadow: 0 0 0 2px #e7b13a, 0 12px 32px rgba(12, 31, 73, .08);
}
.roster-items {
  margin: 0;
  padding-left: 18px;
}
.roster-items a {
  color: inherit;
  font-weight: 800;
}
.roster-items a:hover,
.roster-items a:focus-visible { color: #a16207; }
@media (max-width: 960px) {
  .teach-layout { grid-template-columns: 1fr; }
  .teach-nav {
    position: static;
    max-height: 240px;
  }
}
.dash .play-intro .learn-mascot { display: none; }
@media (max-width: 960px) {
  .dash-kpis,
  .dash.is-teacher .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid,
  .dash-grid.is-wide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash { padding: 16px 14px 28px; }
  .dash-head { align-items: flex-start; }
  .dash-next,
  .work-row,
  .work-link {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-kpi strong { font-size: 24px; }
}