@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-002F, U+003A-065F, U+066D-06EF, U+06FA-10FFFF;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0030-0039, U+0660-066C, U+06F0-06F9;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-002F, U+003A-065F, U+066D-06EF, U+06FA-10FFFF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0030-0039, U+0660-066C, U+06F0-06F9;
}
:root {
  --brand: #5c35cc;
  --brand-light: #7b55e0;
  --brand-dark: #3d1fa8;
  --brand-surface: #f0ebff;
  --orange: #ff7d2e;
  --orange-light: #ffeed9;
  --green: #00c48c;
  --green-light: #dcfff5;
  --red: #ff4757;
  --gold: #ffb800;
  --sky: #38bdf8;
  --void: #0f0826;
  --ink: #1c1033;
  --muted: #6b5e8a;
  --surface: #fafafe;
  --border: #e8e0f8;
  --white: #fff;
  --shadow: 0 2px 16px rgba(92, 53, 204, 0.07);
  /* Shared application header tokens */
  --app-header-top: 14px;
  --app-header-inline: 20px;
  --app-header-bottom: 30px;
  --app-header-bg: linear-gradient(145deg, #0f0826 0%, #25104f 62%, #351375 100%);
  --app-header-muted: rgba(255, 255, 255, 0.58);
  --app-header-control: rgba(255, 255, 255, 0.1);
  --app-header-border: rgba(255, 255, 255, 0.14);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--surface);
  color: var(--ink);
  font-family: "Vazirmatn", sans-serif;
}
body {
  overflow-x: hidden;
  overscroll-behavior-y: none;
  font-variant-numeric: tabular-nums;
}
.latin-text {
  display: inline;
  font-family: "Outfit", sans-serif !important;
  font-size: max(1em, 0.72rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
  unicode-bidi: isolate;
}
input[dir="ltr"],
textarea[dir="ltr"] {
  font-family: "Outfit", sans-serif !important;
  font-size: max(1em, 0.82rem);
}
button,
input {
  font: inherit;
}
button,
a {
  cursor: pointer;
}
a {
  text-decoration: none;
  color: inherit;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app {
  min-height: 100dvh;
}
.app-screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding-bottom: 0;
  background: var(--surface);
  overflow: hidden;
}
.app-screen.has-bottom-nav {
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
.content {
  width: min(100%, 760px);
  margin: auto;
  padding: 0 20px;
}
.app-screen:not(.has-bottom-nav) > .content {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.panel {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.bottom-nav {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(92, 53, 204, 0.08);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
}
.bottom-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #9b8ec0;
  font-size: 0.66rem;
  font-weight: 600;
}
.bottom-nav a.active {
  color: var(--brand);
}
.bottom-nav a.active:before {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
}
.bottom-nav svg {
  width: 21px;
  height: 21px;
}
.home-hero,
.dark-header {
  color: #fff;
  background: linear-gradient(
    180deg,
    var(--void) 0%,
    #2a1060 80%,
    var(--surface) 100%
  );
}
.home-hero {
  padding: 48px 20px 40px;
}
.status-row {
  display: flex;
  align-items: center;
  direction: ltr;
  gap: 17px;
}
.status-row > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 700 1.05rem "Outfit";
}
.status-row > span:nth-child(1) {
  color: var(--orange);
}
.status-row > span:nth-child(2) {
  color: var(--red);
}
.status-row > span:nth-child(3) {
  color: var(--sky);
}
.status-row b {
  color: #fff;
}
.status-row button {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.status-row button i {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--void);
  border-radius: 50%;
  background: var(--orange);
}
.greeting {
  margin-top: 17px;
}
.greeting small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
}
.greeting h1 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.3;
}
.xp-card {
  margin-top: 19px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}
.xp-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}
.xp-orb {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(
    circle at 35% 35%,
    #ffd166,
    var(--gold) 60%,
    #e68900
  );
  font: 800 0.75rem "Outfit";
}
.xp-card p {
  display: grid;
  flex: 1;
  margin: 0;
}
.xp-card p strong {
  font-size: 0.92rem;
}
.xp-card p small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.67rem;
}
.xp-card > div > b {
  color: var(--gold);
  font: 800 1.35rem "Outfit";
}
.track,
.level-progress i,
.profile-xp i,
.skill-progress i,
.results-page article i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.track i,
.level-progress i b,
.profile-xp i b,
.results-page article i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--orange));
}
.xp-card footer {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.66rem;
}
.overlap {
  margin-top: -20px;
}
.continue-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  box-shadow: 0 8px 32px rgba(92, 53, 204, 0.3);
}
.continue-card > span,
.continue-card > em {
  display: grid;
  place-items: center;
  flex: none;
}
.continue-card > span {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
}
.continue-card > p {
  display: grid;
  flex: 1;
  margin: 0;
}
.continue-card p strong {
  font-size: 0.93rem;
}
.continue-card p small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7rem;
}
.continue-card p i {
  height: 4px;
  margin-top: 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.continue-card p i b {
  display: block;
  height: 100%;
  background: #fff;
}
.continue-card > em {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--brand);
  background: #fff;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 23px 0 12px;
}
.section-title h2 {
  margin: 0;
  font-size: 1.02rem;
}
.section-title a {
  display: flex;
  align-items: center;
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 700;
}
.section-title svg {
  width: 15px;
  transform: rotate(180deg);
}
.quick-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-inline: 0 -20px;
  padding: 0 20px 3px;
  scrollbar-width: none;
}
.quick-card {
  width: 142px;
  flex: none;
  display: grid;
  padding: 15px;
  border: 2px solid var(--brand-surface);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.quick-card > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 14px;
  color: var(--brand);
  background: var(--brand-surface);
  font-weight: 900;
}
.quick-card > strong {
  font-size: 0.8rem;
}
.quick-card > small {
  color: #9b8ec0;
  font: 500 0.65rem "Plus Jakarta Sans";
}
.quick-card footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.66rem;
}
.quick-card footer b {
  color: var(--brand);
}
.quick-card footer time {
  color: #9b8ec0;
}
.quick-card.orange {
  border-color: var(--orange-light);
}
.quick-card.orange > span {
  color: var(--orange);
  background: var(--orange-light);
}
.quick-card.orange footer b {
  color: var(--orange);
}
.quick-card.green {
  border-color: var(--green-light);
}
.quick-card.green > span {
  color: #00a876;
  background: var(--green-light);
}
.quick-card.green footer b {
  color: #00a876;
}
.weekly {
  margin-top: 23px;
  padding: 18px;
}
.weekly header,
.chart header {
  display: flex;
  justify-content: space-between;
}
.weekly header span {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
}
.bars,
.chart-bars {
  height: 74px;
  display: flex;
  align-items: flex-end;
  margin-top: 12px;
}
.bars i,
.chart-bars i {
  height: 72px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-style: normal;
}
.bars b {
  width: 27px;
  border-radius: 8px;
  background: var(--brand-surface);
}
.bars b.active {
  background: linear-gradient(180deg, var(--brand), var(--brand-light));
  box-shadow: 0 4px 12px rgba(92, 53, 204, 0.3);
}
.bars small,
.chart-bars small {
  color: #9b8ec0;
  font-size: 0.62rem;
}
.leaderboard {
  overflow: hidden;
  margin-bottom: 16px;
}
.leaderboard > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #f5f2ff;
}
.leaderboard > div:last-child {
  border: 0;
}
.leaderboard .me {
  color: var(--brand);
  background: #f8f4ff;
}
.leaderboard > div > b {
  width: 24px;
  text-align: center;
}
.leaderboard .avatar {
  width: 36px;
  height: 36px;
}
.leaderboard > div > strong {
  flex: 1;
  font-size: 0.83rem;
}
.leaderboard em {
  color: var(--gold);
  font: 700 0.78rem "Outfit";
  font-style: normal;
}
.dark-header {
  padding: 50px 20px 48px;
}
.dark-header > small,
.simple-header small,
.auth-card > small,
.results-page > small {
  color: #ff9d61;
  font: 700 0.68rem "Plus Jakarta Sans";
  letter-spacing: 0.12em;
}
.dark-header h1 {
  margin: 4px 0;
  font-size: 1.55rem;
}
.dark-header > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}
.level-progress {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
}
.level-progress div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.75rem;
}
.level-progress div span {
  color: rgba(255, 255, 255, 0.55);
}
.path-list {
  margin-top: -18px;
}
.chapter {
  display: grid;
  margin-bottom: 12px;
  padding: 17px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}
.chapter > span {
  font-size: 0.68rem;
  opacity: 0.7;
}
.chapter small {
  font: 500 0.7rem "Plus Jakarta Sans";
  opacity: 0.7;
}
.path-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
}
.path-node > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 15px;
  color: var(--brand);
  background: var(--brand-surface);
  font-style: normal;
  font-weight: 900;
}
.path-node > p {
  display: grid;
  flex: 1;
  margin: 0;
}
.path-node p strong {
  font-size: 0.85rem;
}
.path-node p small {
  color: #9b8ec0;
  font: 500 0.68rem "Plus Jakarta Sans";
}
.path-node > em {
  padding: 5px 8px;
  border-radius: 20px;
  color: var(--brand);
  background: var(--brand-surface);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
}
.path-node.completed > i {
  color: #00895d;
  background: var(--green-light);
}
.path-node.locked {
  opacity: 0.5;
}
.path-node.current {
  border: 2px solid var(--brand);
  box-shadow: 0 8px 24px rgba(92, 53, 204, 0.12);
}
.figma-path-list {
  position: relative;
  margin-top: -18px;
  padding: 18px 20px 34px;
  background: #fafafe;
}
.path-unit {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 3px 0 13px;
  color: #5c35cc;
}
.path-unit i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #e8e0f8);
}
.path-unit i:last-child {
  background: linear-gradient(90deg, #e8e0f8, transparent);
}
.path-unit span {
  padding: 6px 12px;
  border: 1px solid #e8e0f8;
  border-radius: 999px;
  background: #f0ebff;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.figma-path-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  direction: rtl;
  gap: 7px;
  padding-bottom: 10px;
}
.path-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.path-rail:before,
.path-rail:after {
  content: "";
  position: absolute;
  left: 19px;
  width: 2px;
  background: #5c35cc;
}
.path-rail:before {
  top: -5px;
  height: 19px;
}
.path-rail:after {
  top: 48px;
  bottom: -10px;
}
.path-rail > span {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  margin-top: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #5c35cc;
}
.path-rail .figma-icon {
  width: 17px;
  height: 17px;
}
.figma-lesson-card {
  min-height: 101px;
  display: flex;
  align-items: center;
  direction: rtl;
  padding: 12px 13px;
  border: 1.5px solid #e8e0f8;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(92, 53, 204, 0.05);
}
.figma-lesson-card > div {
  min-width: 0;
  display: grid;
  justify-items: start;
  flex: 1;
}
.figma-lesson-card strong {
  color: #1c1033;
  font-size: 0.82rem;
}
.figma-lesson-card small {
  margin-top: 1px;
  color: #8b75bf;
  font: 500 0.67rem "Outfit";
}
.figma-lesson-card p {
  margin: 5px 0 4px;
  color: #b0a6cc;
  font-size: 0.64rem;
}
.figma-lesson-card footer {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
}
.figma-lesson-card footer em {
  color: #ff9d00;
  font: 700 0.65rem "Outfit";
  font-style: normal;
}
.path-stars {
  display: flex;
  gap: 2px;
}
.path-stars b {
  color: #e8e0f8;
  font-size: 0.72rem;
}
.path-stars b.on {
  color: #ffb800;
}
.figma-lesson-card > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  color: #00c48c;
  background: #dcfff5;
  font-style: normal;
}
.figma-lesson-card > i .figma-icon,
.figma-lesson-card > i svg {
  width: 16px;
  height: 16px;
}
.figma-path-row.current .figma-lesson-card {
  border: 2px solid #5c35cc;
  box-shadow: 0 4px 20px rgba(92, 53, 204, 0.12);
}
.figma-path-row.current .figma-lesson-card > i {
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #7b55e0);
}
.figma-path-row.locked {
  opacity: 0.55;
}
.figma-path-row.locked .path-rail:before,
.figma-path-row.locked .path-rail:after {
  background: #e8e0f8;
}
.figma-path-row.locked .path-rail > span {
  color: #c4b8e0;
  background: #f8f6ff;
  border: 2px dashed #e8e0f8;
}
.path-boss {
  display: flex;
  align-items: center;
  gap: 13px;
  direction: rtl;
  margin: 4px 0 10px;
  padding: 14px;
  border: 2px solid #3d1fa8;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #3d1fa8);
  box-shadow: 0 6px 20px rgba(92, 53, 204, 0.25);
}
.path-boss > span,
.path-boss > i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
}
.path-boss > span {
  color: #ffb800;
}
.path-boss > i {
  width: 34px;
  height: 34px;
  color: #ffb800;
  font-style: normal;
}
.path-boss svg {
  width: 20px;
  height: 20px;
}
.path-boss p {
  display: grid;
  flex: 1;
  margin: 0;
}
.path-boss strong {
  font-size: 0.86rem;
}
.path-boss small {
  color: rgba(255, 255, 255, 0.6);
  font: 500 0.66rem "Outfit";
}
.path-boss em {
  margin-top: 3px;
  color: #ffcb52;
  font: 700 0.65rem "Outfit";
  font-style: normal;
}
.path-boss.locked {
  color: #c4b8e0;
  background: #f5f2ff;
  border-color: #e8e0f8;
  box-shadow: none;
  opacity: 0.55;
}
.path-checkpoint {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
  margin: 2px auto 20px;
  padding: 10px 13px;
  max-width: 300px;
  border: 1.5px solid rgba(0, 196, 140, 0.27);
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(0, 196, 140, 0.08),
    rgba(92, 53, 204, 0.08)
  );
}
.path-checkpoint > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(0, 196, 140, 0.27);
  border-radius: 11px;
  color: #00a875;
  background: rgba(0, 196, 140, 0.09);
}
.path-checkpoint svg {
  width: 17px;
  height: 17px;
}
.path-checkpoint p {
  display: grid;
  flex: 1;
  margin: 0;
}
.path-checkpoint strong {
  color: #00895d;
  font-size: 0.72rem;
}
.path-checkpoint small {
  color: #9b8ec0;
  font: 500 0.61rem "Outfit";
}
.path-checkpoint > b {
  color: #ffb800;
  font: 700 0.65rem "Outfit";
}
.practice-head {
  padding-bottom: 38px;
}
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: -18px;
}
.category {
  display: grid;
  min-height: 156px;
  padding: 16px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  box-shadow: 0 8px 24px rgba(92, 53, 204, 0.15);
}
.category.orange {
  background: linear-gradient(135deg, var(--orange), var(--gold));
}
.category.green {
  background: linear-gradient(135deg, var(--green), #06b6d4);
}
.category.blue {
  background: linear-gradient(135deg, #3b82f6, #818cf8);
}
.category > span {
  font-size: 1.45rem;
}
.category > strong {
  align-self: end;
}
.category > small {
  font: 500 0.68rem "Plus Jakarta Sans";
  opacity: 0.75;
}
.category > em {
  font-size: 0.65rem;
  font-style: normal;
  opacity: 0.7;
}
.challenge-list {
  display: grid;
  gap: 10px;
}
.challenge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.challenge > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}
.challenge > span.orange {
  color: var(--orange);
  background: var(--orange-light);
}
.challenge > span.purple {
  color: var(--brand);
  background: var(--brand-surface);
}
.challenge p {
  display: grid;
  flex: 1;
  margin: 0;
}
.challenge p small {
  color: var(--muted);
  font-size: 0.7rem;
}
.challenge > b {
  color: var(--brand);
  font: 0.75rem "Outfit";
}
.figma-practice-content {
  margin-top: -18px;
  padding: 20px 20px 34px;
  background: #fafafe;
}
.practice-block {
  margin-bottom: 20px;
}
.practice-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  margin-bottom: 11px;
}
.practice-block h2 {
  margin: 0;
  color: #1c1033;
  font-size: 1rem;
}
.practice-block > header > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #9b8ec0;
  font: 500 0.68rem "Outfit";
}
.practice-block > header .figma-icon {
  width: 13px;
  height: 13px;
}
.figma-challenges {
  display: grid;
  gap: 11px;
}
.figma-challenge {
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  padding: 14px;
  border: 2px solid rgba(255, 125, 46, 0.13);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(255, 125, 46, 0.06);
}
.figma-challenge > i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 16px;
  color: #ff7d2e;
  background: #ffeed9;
  font-style: normal;
}
.figma-challenge > i .figma-icon {
  width: 24px;
  height: 24px;
}
.figma-challenge > p {
  display: grid;
  flex: 1;
  margin: 0;
}
.figma-challenge strong {
  color: #1c1033;
  font-size: 0.84rem;
}
.figma-challenge p > small {
  color: #9b8ec0;
  font-size: 0.7rem;
}
.figma-challenge p > span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #c4b8e0;
  font-size: 0.62rem;
}
.figma-challenge p > span b {
  margin-left: 7px;
  color: #ff7d2e;
  font: 700 0.65rem "Outfit";
}
.figma-challenge p > span .figma-icon {
  width: 11px;
  height: 11px;
}
.figma-challenge > em {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #ff7d2e, rgba(255, 125, 46, 0.55));
  font-style: normal;
}
.figma-challenge > em svg {
  width: 15px;
  height: 15px;
}
.figma-challenge.purple {
  border-color: rgba(92, 53, 204, 0.13);
  box-shadow: 0 4px 16px rgba(92, 53, 204, 0.06);
}
.figma-challenge.purple > i {
  color: #5c35cc;
  background: #f0ebff;
}
.figma-challenge.purple p > span b {
  color: #5c35cc;
}
.figma-challenge.purple > em {
  background: linear-gradient(135deg, #5c35cc, #8a71d4);
}
.figma-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.figma-category {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #7b55e0);
  box-shadow: 0 4px 20px rgba(92, 53, 204, 0.15);
}
.figma-category.orange {
  background: linear-gradient(135deg, #ff7d2e, #ffb800);
}
.figma-category.green {
  background: linear-gradient(135deg, #00c48c, #06b6d4);
}
.figma-category.blue {
  background: linear-gradient(135deg, #3b82f6, #818cf8);
}
.figma-category > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  direction: ltr;
}
.figma-category header i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  font-style: normal;
}
.figma-category header .figma-icon {
  width: 20px;
  height: 20px;
}
.figma-category header b {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font: 700 0.58rem "Outfit";
}
.figma-category > div {
  display: grid;
  direction: rtl;
}
.figma-category strong {
  font-size: 0.86rem;
}
.figma-category small {
  color: rgba(255, 255, 255, 0.72);
  font: 500 0.65rem "Outfit";
}
.figma-category span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.65rem;
}
.speaking-card {
  display: flex;
  align-items: center;
  gap: 13px;
  direction: rtl;
  padding: 18px;
  border-radius: 23px;
  color: #fff;
  background: linear-gradient(135deg, #0f0826, #2a1060);
  box-shadow: 0 8px 32px rgba(15, 8, 38, 0.3);
}
.speaking-card > i {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-style: normal;
}
.speaking-card > i:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: pulseRing 2s ease-out infinite;
}
.speaking-card > i .figma-icon {
  width: 27px;
  height: 27px;
}
.speaking-card p {
  display: grid;
  flex: 1;
  margin: 0;
}
.speaking-card strong {
  font-size: 0.88rem;
}
.speaking-card small {
  color: rgba(255, 255, 255, 0.62);
  font: 500 0.68rem "Outfit";
}
.speaking-card p span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
}
.speaking-card > b {
  padding: 8px 13px;
  border-radius: 13px;
  background: #5c35cc;
  font-size: 0.72rem;
}
@keyframes pulseRing {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}
.stat-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.stat-summary > div {
  display: grid;
  padding: 12px 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
}
.stat-summary b {
  color: var(--gold);
  font: 800 1.15rem "Outfit";
}
.stat-summary small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.58rem;
}
.chart {
  margin-top: -20px;
  padding: 18px;
}
.chart header span {
  color: var(--muted);
  font-size: 0.7rem;
}
.chart-bars {
  height: 105px;
}
.chart-bars i {
  height: 100px;
}
.chart-bars b {
  width: 25px;
  max-height: 75px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-light));
}
.skill-progress {
  padding: 5px 16px;
}
.skill-progress > div {
  display: grid;
  grid-template-columns: 105px 1fr 35px;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f2ff;
}
.skill-progress > div:last-child {
  border: 0;
}
.skill-progress p {
  display: grid;
  margin: 0;
}
.skill-progress p strong {
  font-size: 0.78rem;
}
.skill-progress p small {
  color: #9b8ec0;
  font: 0.58rem "Plus Jakarta Sans";
}
.skill-progress i {
  height: 7px;
  background: var(--brand-surface);
}
.skill-progress i b {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: var(--brand);
}
.skill-progress i b.orange {
  background: var(--orange);
}
.skill-progress i b.green {
  background: var(--green);
}
.skill-progress i b.gold {
  background: var(--gold);
}
.skill-progress i b.red {
  background: var(--red);
}
.skill-progress em {
  font: 0.7rem "Outfit";
  font-style: normal;
}
.profile-head {
  padding: 46px 20px 34px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, var(--void), #2a1060 58%, var(--brand));
}
.profile-actions {
  display: flex;
  justify-content: space-between;
}
.profile-actions a,
.profile-actions button,
.simple-header > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-surface);
}
.avatar svg {
  width: 55%;
  height: 55%;
}
.avatar.large {
  width: 88px;
  height: 88px;
  margin: 8px auto;
  border: 4px solid rgba(255, 255, 255, 0.22);
  background: #fff;
}
.profile-head h1 {
  margin: 8px 0 0;
  font-size: 1.3rem;
}
.profile-head p {
  margin: 2px 0;
  color: rgba(255, 255, 255, 0.55);
  font: 500 0.72rem "Plus Jakarta Sans";
}
.level-pill {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 12px;
  border-radius: 20px;
  color: var(--gold);
  background: rgba(255, 184, 0, 0.12);
  font-size: 0.7rem;
}
.profile-xp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font: 600 0.65rem "Outfit";
}
.profile-xp i {
  height: 6px;
}
.profile-body {
  margin-top: -14px;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}
.profile-stats > div {
  display: grid;
  text-align: center;
}
.profile-stats b {
  font: 800 1.2rem "Outfit";
}
.profile-stats small {
  color: var(--muted);
  font-size: 0.6rem;
}
.profile-links {
  display: grid;
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}
.profile-links > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid #f5f2ff;
}
.profile-links > a:last-child {
  border: 0;
}
.profile-links > a > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-surface);
}
.profile-links p {
  display: grid;
  flex: 1;
  margin: 0;
}
.profile-links small {
  color: var(--muted);
  font-size: 0.68rem;
}
.profile-links svg {
  width: 16px;
  color: var(--muted);
}
.figma-profile {
  min-height: 100%;
  padding-bottom: 8px;
  background: #fafafe;
}
.figma-profile-head {
  padding: 46px 20px 28px;
  color: #fff;
  background: linear-gradient(180deg, #0f0826, #2a1060);
}
.figma-profile-actions {
  display: flex;
  justify-content: space-between;
  direction: rtl;
  margin-bottom: 8px;
}
.figma-profile-actions a,
.figma-profile-actions button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.figma-profile-actions svg {
  width: 20px;
  height: 20px;
}
.profile-identity {
  display: grid;
  justify-items: center;
  text-align: center;
}
.figma-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #ff7d2e);
  box-shadow: 0 8px 24px rgba(92, 53, 204, 0.4);
}
.figma-avatar > .figma-icon {
  width: 40px;
  height: 40px;
}
.figma-avatar > b {
  position: absolute;
  bottom: -8px;
  left: 50%;
  padding: 3px 12px;
  border-radius: 999px;
  transform: translateX(-50%);
  color: #fff;
  background: linear-gradient(90deg, #ffb800, #ff7d2e);
  box-shadow: 0 2px 8px rgba(255, 184, 0, 0.4);
  font: 700 0.64rem "Outfit";
  white-space: nowrap;
}
.profile-identity h1 {
  margin: 0;
  font-size: 1.25rem;
}
.profile-identity p {
  margin: 2px 0;
  color: rgba(255, 255, 255, 0.5);
  font: 500 0.75rem "Outfit";
}
.profile-identity > strong {
  margin-top: 3px;
  color: #ffb800;
  font-size: 0.72rem;
}
.profile-level {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.1);
}
.profile-level header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.7rem;
  flex-direction: row-reverse;
}
.profile-level header span {
  color: rgba(255, 255, 255, 0.5);
}
.profile-level > i {
  height: 8px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}
.profile-level > i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb800, #ff7d2e);
}
.profile-level small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.62rem;
  text-align: right;
}
.figma-profile-body {
  padding: 16px 20px 28px;
}
.profile-tabs {
  display: flex;
  padding: 4px;
  border: 1px solid #e8e0f8;
  border-radius: 16px;
  background: #f0ebff;
}
.profile-tabs button {
  height: 36px;
  flex: 1;
  border: 0;
  border-radius: 12px;
  color: #9b8ec0;
  background: transparent;
  font-weight: 600;
}
.profile-tabs button.active {
  color: #5c35cc;
  background: #fff;
  box-shadow: 0 2px 8px rgba(92, 53, 204, 0.1);
}
.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 16px;
}
.profile-stat-grid article {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 12px 5px;
  border: 1px solid #f0ebff;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(92, 53, 204, 0.04);
  text-align: center;
}
.profile-stat-grid article > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-style: normal;
}
.profile-stat-grid article > i svg {
  width: 18px;
  height: 18px;
}
.profile-stat-grid i.orange {
  color: #ff7d2e;
  background: #ffeed9;
}
.profile-stat-grid i.purple {
  color: #5c35cc;
  background: #f0ebff;
}
.profile-stat-grid i.green {
  color: #00c48c;
  background: #dcfff5;
}
.profile-stat-grid i.gold {
  color: #ffb800;
  background: #fff8dc;
}
.profile-stat-grid i.blue {
  color: #3b82f6;
  background: #eff6ff;
}
.profile-stat-grid article > b {
  color: #1c1033;
  font: 800 1rem "Outfit";
  margin-top: 5px;
}
.profile-stat-grid article > strong {
  color: #6b5e8a;
  font-size: 0.6rem;
}
.profile-stat-grid article > small {
  color: #c4b8e0;
  font: 500 0.54rem "Outfit";
}
.profile-activity {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #f0ebff;
  border-radius: 22px;
  background: #fff;
}
.profile-activity h2 {
  margin: 0 0 12px;
  color: #1c1033;
  font-size: 0.82rem;
}
.profile-activity > div {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  direction: ltr;
}
.profile-activity i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #f0ebff;
}
.profile-activity i.level-1 {
  background: #c4b3f5;
}
.profile-activity i.level-2 {
  background: #8b5cf6;
}
.profile-activity i.level-3 {
  background: #5c35cc;
}
.profile-activity footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-top: 11px;
  color: #9b8ec0;
  font-size: 0.75rem;
}
.profile-activity footer i {
  width: 10px;
  height: 10px;
}
.figma-profile-menu {
  display: grid;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #f0ebff;
  border-radius: 22px;
  background: #fff;
}
.figma-profile-menu > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-bottom: 1px solid #f5f2ff;
}
.figma-profile-menu > a:last-child {
  border: 0;
}
.figma-profile-menu > a > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  font-style: normal;
}
.figma-profile-menu > a > i svg {
  width: 18px;
  height: 18px;
}
.figma-profile-menu i.purple {
  color: #5c35cc;
  background: #f0ebff;
}
.figma-profile-menu i.green {
  color: #00c48c;
  background: #dcfff5;
}
.figma-profile-menu i.neutral {
  color: #6b5e8a;
  background: #f5f2ff;
}
.figma-profile-menu i.blue {
  color: #3b82f6;
  background: #eff6ff;
}
.figma-profile-menu p {
  display: grid;
  flex: 1;
  margin: 0;
}
.figma-profile-menu p strong {
  color: #1c1033;
  font-size: 0.78rem;
}
.figma-profile-menu p small {
  color: #9b8ec0;
  font: 500 0.63rem "Outfit";
}
.figma-profile-menu > a > .figma-icon {
  width: 18px;
  height: 18px;
  color: #c4b8e0;
}
.lesson-page {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #fff;
}
.lesson-page > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 20px;
  flex-direction: row-reverse;
}
.lesson-page > header button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--brand-surface);
  font-size: 1.4rem;
}
.lesson-track {
  height: 9px;
  flex: 1;
  border-radius: 10px;
  background: var(--brand-surface);
  overflow: hidden;
}
.lesson-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  transition: 0.3s;
}
.lesson-page > header > span {
  color: var(--red);
  font: 700 0.9rem "Outfit";
}
.lesson-page main {
  width: min(100%, 600px);
  margin: auto;
  padding: 28px 20px;
}
.lesson-page main > small {
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 800;
}
.lesson-page main h1 {
  margin: 6px 0;
  font-size: 1.45rem;
}
.lesson-page main > p {
  margin: 25px 0;
  text-align: center;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
}
.options {
  display: grid;
  gap: 10px;
}
.options button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 13px;
  border: 2px solid var(--border);
  border-radius: 17px;
  color: var(--ink);
  background: #fff;
  text-align: right;
}
.options button b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: #f5f2ff;
  font: 700 0.75rem "Outfit";
}
.options button.selected {
  border-color: var(--brand);
  background: #f8f4ff;
}
.options button.correct {
  border-color: var(--green);
  background: var(--green-light);
}
.options button.wrong {
  border-color: var(--red);
  background: #ffebee;
}
.lesson-page > footer {
  padding: 16px 20px max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.main-btn,
.light-btn {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(92, 53, 204, 0.22);
}
.main-btn:disabled {
  opacity: 0.4;
}
.results-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 54px 20px 30px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(92, 53, 204, 0.18), transparent 35%),
    #fafafe;
}
.confetti {
  color: var(--gold);
  font-size: 1.4rem;
  letter-spacing: 12px;
}
.trophy {
  margin: 35px 0 10px;
  font-size: 5rem;
  filter: drop-shadow(0 12px 20px rgba(255, 184, 0, 0.3));
}
.results-page h1 {
  margin: 6px 0;
  font-size: 1.7rem;
}
.results-page > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.result-cards {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 25px 0;
}
.result-cards > div {
  display: grid;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--border);
}
.result-cards b {
  color: var(--brand);
  font: 800 1.7rem "Outfit";
}
.result-cards > div:nth-child(2) b {
  color: var(--green);
}
.result-cards small {
  color: var(--muted);
  font-size: 0.66rem;
}
.results-page article {
  width: 100%;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: #fff;
}
.results-page article p {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 0.75rem;
}
.results-page article i {
  background: var(--brand-surface);
}
.results-page article i b {
  background: var(--green);
}
.results-page > .main-btn {
  margin-top: auto;
}
.text-btn {
  min-height: 45px;
  border: 0;
  color: var(--brand);
  background: transparent;
  font-weight: 700;
}
.simple-header {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 40px 20px 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--void), #2a1060);
  flex-direction: row-reverse;
}
.simple-header > div {
  flex: 1;
  direction: rtl;
  text-align: right;
}
.simple-header h1 {
  margin: 2px 0;
  font-size: 1.3rem;
}
.simple-header > span {
  color: var(--gold);
  font: 700 0.8rem "Outfit";
}
.achievement-summary {
  display: grid;
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}
.achievement-summary b {
  font: 800 1.8rem "Outfit";
}
.achievement-summary span {
  font-size: 0.7rem;
}
.achievement-summary i {
  height: 6px;
  margin-top: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.achievement-summary i em {
  display: block;
  height: 100%;
  background: var(--gold);
}
.badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 16px;
}
.badges article {
  display: grid;
  justify-items: center;
  min-height: 174px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 22px;
  text-align: center;
  background: #fff;
}
.badges article > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--brand-surface);
  font-size: 1.65rem;
}
.badges strong {
  margin-top: 8px;
  font-size: 0.8rem;
}
.badges small {
  color: var(--muted);
  font-size: 0.62rem;
}
.badges em {
  align-self: end;
  padding: 3px 8px;
  border-radius: 14px;
  color: var(--brand);
  background: var(--brand-surface);
  font-size: 0.58rem;
  font-style: normal;
}
.badges .locked {
  filter: grayscale(1);
  opacity: 0.55;
}
.badges .earned {
  border-color: #c2f7e8;
}
.badges .earned em {
  color: #00895d;
  background: var(--green-light);
}
.figma-achievements {
  min-height: 100dvh;
  background: #fafafe;
}
.achievements-head {
  padding: 46px 16px 20px;
  color: #fff;
  background: linear-gradient(180deg, #0f0826, #2a1060);
}
.achievements-title {
  display: flex;
  align-items: center;
  direction: ltr;
  gap: 12px;
  margin-bottom: 16px;
}
.achievements-title > button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.achievements-title > button svg {
  width: 20px;
  height: 20px;
}
.achievements-title p {
  display: grid;
  direction: rtl;
  margin: 0;
}
.achievements-title strong {
  font-size: 1.14rem;
}
.achievements-title small {
  color: rgba(255, 255, 255, 0.5);
  font: 500 0.7rem "Outfit";
}
.achievements-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.1);
}
.achievements-summary > i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(255, 184, 0, 0.3);
  border-radius: 16px;
  color: #ffb800;
  background: rgba(255, 184, 0, 0.2);
  font-style: normal;
}
.achievements-summary > i svg {
  width: 28px;
  height: 28px;
}
.achievements-summary > div {
  min-width: 0;
  display: grid;
  flex: 1;
}
.achievements-summary strong {
  font-size: 1rem;
}
.achievements-summary small {
  color: rgba(255, 255, 255, 0.6);
  font: 500 0.68rem "Outfit";
}
.achievements-summary span {
  height: 6px;
  display: block;
  overflow: hidden;
  margin-top: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
}
.achievements-summary span b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb800, #ff7d2e);
}
.figma-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding: 16px 16px max(20px, env(safe-area-inset-bottom));
}
.figma-badge {
  min-width: 0;
  min-height: 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 6px;
  border: 2px solid #e8e0f8;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(92, 53, 204, 0.07);
  text-align: center;
}
.figma-badge.locked {
  background: #f8f6ff;
  box-shadow: none;
  opacity: 0.55;
}
.badge-icon {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 16px;
}
.badge-icon > .figma-icon {
  width: 24px;
  height: 24px;
}
.badge-icon.orange {
  color: #ff7d2e;
  background: #ffeed9;
}
.badge-icon.purple {
  color: #5c35cc;
  background: #f0ebff;
}
.badge-icon.gold {
  color: #ffb800;
  background: #fff8dc;
}
.badge-icon.blue {
  color: #38bdf8;
  background: #eff6ff;
}
.badge-icon.green {
  color: #00c48c;
  background: #dcfff5;
}
.badge-icon.neutral {
  color: #6b5e8a;
  background: #f5f2ff;
}
.badge-icon > i {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #00c48c;
  box-shadow: 0 2px 6px rgba(0, 196, 140, 0.4);
}
.badge-icon > i .figma-icon {
  width: 10px;
  height: 10px;
  stroke-width: 2.5;
}
.figma-badge > strong {
  overflow-wrap: anywhere;
  color: #1c1033;
  font-size: 0.69rem;
  line-height: 1.35;
}
.figma-badge > small {
  color: #9b8ec0;
  font: 500 0.6rem "Outfit";
  line-height: 1.2;
}
.figma-badge > .rarity {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 700;
}
.rarity.common {
  color: #6b5e8a;
  background: #f5f2ff;
}
.rarity.rare {
  color: #3b82f6;
  background: #eff6ff;
}
.rarity.epic {
  color: #8b5cf6;
  background: #f5f3ff;
}
.rarity.legendary {
  color: #f59e0b;
  background: #fffbeb;
}
.figma-badge > time {
  margin-top: auto;
  color: #9b8ec0;
  font-size: 0.55rem;
}
.badge-progress {
  width: 100%;
  display: grid;
  gap: 3px;
  margin-top: auto;
}
.badge-progress > i {
  height: 4px;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: #f0ebff;
}
.badge-progress > i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #5c35cc, #7b55e0);
}
.badge-progress > span {
  color: #9b8ec0;
  font-size: 0.52rem;
}
@media (max-width: 350px) {
  .figma-badge-grid {
    gap: 8px;
    padding-inline: 12px;
  }
  .figma-badge {
    padding-inline: 4px;
  }
  .figma-badge > strong {
    font-size: 0.64rem;
  }
}
.settings {
  padding-top: 18px;
}
.achievements-title > button svg {
  transform: none;
}
.achievements-summary {
  direction: ltr;
}
.achievements-summary > div {
  direction: rtl;
  text-align: right;
}
.achievement-count {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
}
.achievement-count > b {
  color: #fff;
  font-size: 1.15rem;
}
.achievement-count > span {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.achievements-summary .achievement-summary-track {
  width: min(180px, 100%);
  justify-self: end;
}
.badge-icon.asset {
  overflow: visible;
  background: transparent;
}
.achievement-fire-asset {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 16px;
}
.achievements-title {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  direction: ltr;
}
.achievements-title > button {
  grid-column: 1;
  justify-self: start;
  transform: rotate(180deg);
}
.achievements-title > p {
  grid-column: 2;
  justify-self: end;
  direction: rtl;
  text-align: right;
}
.achievement-count > span {
  display: inline;
  height: auto;
  margin: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
}
.achievements-summary .achievement-summary-track {
  height: 7px;
  display: block;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  direction: ltr;
}
.achievements-summary .achievement-summary-track > b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb800, #ff7d2e);
  box-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
}
.figma-badge-grid {
  grid-auto-rows: 1fr;
  gap: 12px;
  padding-top: 18px;
}
.figma-badge {
  min-height: 176px;
  padding: 12px 7px;
  border-radius: 20px;
  box-shadow: 0 5px 18px rgba(92, 53, 204, 0.08);
}
.figma-badge.rarity-common {
  border-color: #e8e0f8;
}
.figma-badge.rarity-rare {
  border-color: #bfdbfe;
}
.figma-badge.rarity-epic {
  border-color: #ddd6fe;
}
.figma-badge.rarity-legendary {
  border-color: #fde68a;
}
.badge-progress {
  gap: 5px;
}
.badge-progress > i {
  height: 6px;
  border: 1px solid #e8e0f8;
  background: #f5f2ff;
}
.badge-progress > i > b {
  background: linear-gradient(90deg, #5c35cc, #8b5cf6);
  box-shadow: 0 0 8px rgba(92, 53, 204, 0.2);
}
.badge-progress > span {
  font-size: 0.58rem;
  font-weight: 600;
}
.account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}
.account-card .avatar {
  width: 48px;
  height: 48px;
  background: #fff;
}
.account-card p {
  display: grid;
  flex: 1;
  margin: 0;
}
.account-card small {
  color: rgba(255, 255, 255, 0.65);
  font: 500 0.65rem "Plus Jakarta Sans";
}
.account-card button {
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 0.7rem;
}
.settings-group h2 {
  margin: 19px 3px 8px;
  color: var(--muted);
  font-size: 0.7rem;
}
.settings-group .panel {
  overflow: hidden;
}
.settings-group button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid #f5f2ff;
  background: #fff;
  text-align: right;
}
.settings-group button:last-child {
  border: 0;
}
.settings-group button > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-surface);
}
.settings-group button > .setting-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  color: #5c35cc;
  background: #f0ebff;
}
.settings-group .setting-icon .figma-icon {
  width: 18px;
  height: 18px;
}
.settings-group .setting-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: #c4b8e0;
}
.account-card > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.account-card > button .figma-icon {
  width: 15px;
  height: 15px;
}
.logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.logout .figma-icon {
  width: 18px;
  height: 18px;
}
.settings-group button p {
  display: grid;
  flex: 1;
  margin: 0;
}
.settings-group button strong {
  font-size: 0.78rem;
}
.settings-group button small {
  color: var(--muted);
  font-size: 0.63rem;
}
.settings-group button svg {
  width: 15px;
  color: var(--muted);
}
.toggle {
  position: relative;
  width: 47px;
  height: 27px;
  border-radius: 20px;
  background: var(--border);
}
.toggle b {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s;
}
.toggle.on {
  background: var(--brand);
}
.toggle.on b {
  left: 23px;
}
.logout {
  width: 100%;
  min-height: 50px;
  margin: 20px 0 max(8px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 16px;
  color: var(--red);
  background: #ffebee;
  font-weight: 700;
}
.onboarding {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  color: #fff;
  background: linear-gradient(
    160deg,
    var(--void) 0%,
    #2a1060 52%,
    var(--brand) 100%
  );
}
.brand,
.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand > span,
.auth-brand > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--orange));
}
.brand strong,
.auth-brand strong {
  font: 800 1.2rem "Outfit";
}
.brand small,
.auth-brand small {
  font-size: 0.68rem;
  text-align: center;
}
.onboard-art {
  position: relative;
  width: 260px;
  height: 260px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.15),
    transparent 65%
  );
}
.onboard-art span {
  width: 86px;
  height: 100px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.1);
  font: 800 3.2rem "Outfit";
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.onboard-art span:nth-child(2) {
  font-family: "Vazirmatn";
  transform: rotate(8deg);
  color: var(--gold);
}
.onboard-art i {
  position: absolute;
  top: 35px;
  color: var(--orange);
}
.onboarding > small {
  color: var(--gold);
  font: 700 0.65rem "Plus Jakarta Sans";
  letter-spacing: 0.15em;
}
.onboarding h1 {
  margin: 7px 0;
  font-size: 1.8rem;
}
.onboarding > p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8rem;
}
.dots {
  display: flex;
  gap: 6px;
  margin: 22px;
}
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.3);
}
.dots i.active {
  width: 24px;
  background: var(--orange);
}
.light-btn {
  margin-top: auto;
  color: var(--brand);
  background: #fff;
  box-shadow: none;
}
.skip {
  min-height: 40px;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
.auth-page {
  min-height: 100dvh;
  padding: 36px 20px;
  background: linear-gradient(
    160deg,
    var(--void) 0%,
    #2a1060 35%,
    var(--surface) 35%
  );
}
.auth-brand {
  justify-content: center;
  color: #fff;
}
.auth-card {
  width: min(100%, 440px);
  margin: 28px auto 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(28, 16, 51, 0.18);
}
.auth-card h1 {
  margin: 4px 0;
  font-size: 1.55rem;
}
.auth-card > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.75rem;
}
.auth-card form {
  display: grid;
  gap: 13px;
}
.auth-card label {
  display: grid;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
}
.auth-card input {
  min-height: 50px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 12px;
  outline: none;
  background: #f8f6fd;
}
.auth-card input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(92, 53, 204, 0.1);
}
.separator {
  position: relative;
  margin: 17px 0;
  text-align: center;
}
.separator:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
.separator span {
  position: relative;
  padding: 0 10px;
  color: var(--muted);
  background: #fff;
  font-size: 0.65rem;
}
.social {
  width: 100%;
  min-height: 49px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
}
.login-hint {
  text-align: center !important;
  margin: 17px 0 0 !important;
}
.login-hint a {
  color: var(--brand);
  font-weight: 800;
}
.toast {
  position: fixed;
  z-index: 100;
  right: 50%;
  bottom: 96px;
  transform: translate(50%, 16px);
  max-width: calc(100% - 30px);
  padding: 10px 17px;
  border-radius: 30px;
  color: #fff;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(50%, 0);
}
@media (min-width: 760px) {
  .bottom-nav {
    left: 50%;
    width: 520px;
    transform: translateX(-50%);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
  }
  .home-hero,
  .dark-header,
  .profile-head {
    padding-inline: max(20px, calc((100% - 720px) / 2));
  }
  .category-grid,
  .badges {
    grid-template-columns: repeat(4, 1fr);
  }
  .quick-scroll {
    margin-inline: 0;
    padding-inline: 0;
  }
  .result-cards,
  .results-page article,
  .results-page > .main-btn,
  .results-page > .text-btn {
    max-width: 520px;
  }
  .path-list {
    max-width: 680px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Figma-authentic onboarding and authentication flow. */
body[data-page="onboarding"],
body[data-page="auth"] {
  height: 100dvh;
  overflow: hidden;
}
body[data-page="onboarding"] .app-screen,
body[data-page="auth"] .app-screen {
  height: 100dvh;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.onboarding {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  padding: 0;
  color: #fff;
  background: var(--slide-bg);
  overflow: hidden;
  transition: background 0.6s ease;
}
.onboarding:before,
.onboarding:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.onboarding:before {
  width: 55vmax;
  height: 55vmax;
  right: -28vmax;
  top: -30vmax;
  background: var(--accent);
  opacity: 0.1;
}
.onboarding:after {
  width: 42vmax;
  height: 42vmax;
  left: -24vmax;
  bottom: -25vmax;
  background: #5c35cc;
  opacity: 0.08;
}
.onboarding > header {
  position: relative;
  z-index: 2;
  min-height: clamp(52px, 10dvh, 86px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: calc(clamp(4px, 2dvh, 14px) + env(safe-area-inset-top)) 24px 6px;
}
.onboarding .skip {
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  color: rgba(255, 255, 255, 0.52);
  background: transparent;
  font-size: 0.82rem;
}
.onboarding > main {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.4dvh, 28px);
  padding: 0 28px;
  justify-content: safe center;
}
.onboard-visual {
  height: clamp(150px, 28vh, 230px);
  display: grid;
  place-items: center;
  animation: onboard-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.onboard-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: onboard-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.onboard-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 6.5vw, 1.65rem);
  line-height: 1.35;
}
.onboard-copy > small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.5);
  font: 500 0.85rem "Outfit";
  letter-spacing: 0.05em;
}
.onboard-copy p {
  max-width: 280px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.72rem, 3.4vw, 0.86rem);
  line-height: 1.9;
  text-align: center;
}
.onboarding > footer {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(7px, 1.8dvh, 18px);
  padding: clamp(5px, 1.2dvh, 10px) 24px max(10px, env(safe-area-inset-bottom));
}
.onboarding .dots {
  display: flex;
  direction: ltr;
  gap: 8px;
  margin: 0;
}
.onboarding .dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.3);
  transition:
    width 0.25s ease,
    background 0.25s ease;
}
.onboarding .dots button.active {
  width: 24px;
  background: var(--accent);
}
.onboard-next {
  width: min(100%, 430px);
  height: clamp(48px, 7dvh, 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 80%, transparent)
  );
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 34%, transparent);
  font-size: 1rem;
  font-weight: 700;
}
.onboard-next svg {
  width: 20px;
  transform: rotate(180deg);
}
.lang-visual {
  position: relative;
  width: 280px;
  height: 260px;
}
.lang-visual .globe {
  position: absolute;
  left: 85px;
  top: 55px;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(92, 53, 204, 0.5);
  border-radius: 50%;
  background: rgba(92, 53, 204, 0.3);
  box-shadow: 0 0 60px rgba(92, 53, 204, 0.4);
  color: #fff;
  font-size: 3.2rem;
}
.lang-visual .orbit {
  position: absolute;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
  animation: visual-float 3s ease-in-out infinite;
}
.lang-visual .one {
  left: 194px;
  top: 26px;
}
.lang-visual .two {
  left: 34px;
  top: 145px;
  animation-delay: 0.4s;
}
.lang-visual .three {
  left: 24px;
  top: 42px;
  animation-delay: 0.8s;
}
.hello-fa,
.hello-en {
  position: absolute;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 700;
}
.hello-fa {
  left: 10px;
  top: 13px;
}
.hello-en {
  right: 3px;
  bottom: 0px;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-family: "Outfit";
}
.streak-visual {
  width: 280px;
  display: grid;
  gap: 24px;
  padding-bottom: 15px;
}
.streak-visual > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex-direction: row-reverse;
}
.streak-visual .flame {
  width: 56px;
  height: 65px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 1.8rem;
}
.streak-visual p {
  display: grid;
  margin: 0;
}
.streak-visual p b {
  color: var(--accent);
  font: 900 3.3rem/1 "Outfit";
}
.streak-visual p small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}
.streak-visual section {
  display: flex;
  justify-content: center;
  gap: 7px;
}
.streak-visual section i {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
  font-size: 0.72rem;
}
.streak-visual section i.done {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 54%, transparent)
  );
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.streak-visual section small {
  position: absolute;
  top: 39px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.58rem;
}
.trophy-visual {
  width: 280px;
  display: grid;
  justify-items: center;
  gap: 15px;
}
.hero-trophy {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 2.7rem;
}
.hero-trophy b {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font: 800 0.72rem "Outfit";
}
.trophy-visual section {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: 10px;
}
.trophy-visual section i {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 17px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-style: normal;
  font-size: 1.55rem;
}
.trophy-visual section i.muted {
  filter: grayscale(1);
  opacity: 0.35;
}
@keyframes onboard-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes visual-float {
  50% {
    transform: translateY(-8px);
  }
}

.auth-page {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  background: #fafafe;
  overflow: hidden;
}
.auth-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(24px + env(safe-area-inset-top)) 20px 22px;
  background: linear-gradient(180deg, #0f0826 0%, #2a1060 100%);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.auth-brand > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #5c35cc, #ff7d2e);
  box-shadow: 0 8px 24px rgba(92, 53, 204, 0.5);
  font-size: 1.55rem;
}
.auth-brand p {
  display: grid;
  margin: 0;
  text-align: right;
}
.auth-brand strong {
  font: 800 1.5rem "Outfit";
  letter-spacing: -0.02em;
}
.auth-brand small {
  margin-top: -3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
}
.auth-tabs {
  display: flex;
  margin-top: 18px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  flex-direction: row-reverse;
}
.auth-tabs button {
  min-width: 94px;
  padding: 8px 24px;
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  transition: 0.2s;
}
.auth-tabs button.active {
  color: #5c35cc;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.auth-body {
  min-height: 0;
  width: min(100%, 480px);
  padding: 24px 24px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  scrollbar-width: none;
}
.auth-body::-webkit-scrollbar {
  display: none;
}
.auth-body form {
  display: grid;
  gap: 14px;
}
.auth-body label {
  display: grid;
  gap: 6px;
  color: #6b5e8a;
  font-size: 0.78rem;
  font-weight: 600;
}
.field {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 2px solid #e8e0f8;
  border-radius: 16px;
  background: #fff;
}
.field:focus-within {
  border-color: #5c35cc;
  box-shadow: 0 0 0 4px rgba(92, 53, 204, 0.08);
}
.field > span {
  width: 20px;
  color: #9b8ec0;
  text-align: center;
}
.field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #1c1033;
  background: transparent;
  font-size: 0.86rem;
}
.field > button {
  width: 30px;
  height: 30px;
  border: 0;
  color: #9b8ec0;
  background: transparent;
}
.forgot {
  justify-self: start;
  margin-top: -4px;
  border: 0;
  color: #5c35cc;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 600;
}
.auth-submit {
  margin-top: 2px;
}
.loading-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: auth-bounce 0.8s ease-in-out infinite alternate;
}
.loading-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.loading-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.social {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 2px solid #e8e0f8;
  border-radius: 16px;
  color: #1c1033;
  background: #fff;
  font: 600 0.82rem "Plus Jakarta Sans";
}
.social svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.apple-icon {
  color: #1c1033;
}
.auth-terms {
  margin: 14px 0 0;
  color: #9b8ec0;
  font-size: 0.66rem;
  line-height: 1.8;
  text-align: center;
}
.auth-terms b {
  color: #5c35cc;
  font-weight: 500;
}
.auth-body .separator {
  margin: 16px 0;
}
.auth-body .separator span {
  color: #9b8ec0;
  background: #fafafe;
}
@keyframes auth-bounce {
  to {
    transform: translateY(-7px);
  }
}
@media (max-height: 680px) {
  .auth-top {
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: 14px;
  }
  .auth-brand > span {
    width: 42px;
    height: 42px;
  }
  .auth-tabs {
    margin-top: 10px;
  }
  .auth-body {
    padding-top: 14px;
  }
  .auth-body form {
    gap: 9px;
  }
  .field {
    height: 46px;
  }
  .auth-body .separator {
    margin: 10px 0;
  }
  .auth-terms {
    margin-top: 8px;
  }
}

/* Icon and spacing polish from the Figma source. */
.figma-icon {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onboarding .skip {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 650;
}
.onboarding > main {
  gap: clamp(8px, 2.4dvh, 28px);
  width: 100%;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.onboarding > main::-webkit-scrollbar {
  display: none;
}
.onboard-visual {
  --visual-zoom: 1;
  width: 100%;
  height: auto;
  overflow: visible;
}
.onboard-visual > * {
  zoom: var(--visual-zoom);
}
.onboard-copy {
  width: 100%;
  min-height: 0;
  justify-content: flex-start;
}
.onboard-copy p {
  min-height: 0;
}
.onboard-next {
  direction: rtl;
}
.onboard-next .figma-icon {
  width: 20px;
  height: 20px;
  flex: none;
  transform: none;
}
.onboard-next span {
  display: block;
}
.lang-visual {
  position: relative;
  width: 280px;
  height: 220px;
}
.bilingual-orb {
  position: absolute;
  left: 85px;
  top: 55px;
  width: 110px;
  height: 110px;
  border: 2px solid rgba(92, 53, 204, 0.5);
  border-radius: 50%;
  background: rgba(92, 53, 204, 0.28);
  box-shadow:
    0 0 60px rgba(92, 53, 204, 0.42),
    inset 0 0 25px rgba(255, 255, 255, 0.06);
}
.bilingual-orb > span {
  position: absolute;
  width: 66px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9px);
}
.bilingual-orb .latin {
  left: 6px;
  top: 16px;
  transform: rotate(-10deg);
  font: 800 2.6rem "Outfit";
}
.bilingual-orb .persian {
  right: 4px;
  top: 16px;
  transform: rotate(10deg);
  color: var(--accent);
  font: 800 2.35rem "Vazirmatn";
}
.lang-visual .orbit {
  color: var(--accent);
}
.lang-visual .orbit.two {
  color: #7b55e0;
}
.lang-visual .orbit.three {
  color: #ff7d2e;
}
.lang-visual .orbit .figma-icon {
  width: 22px;
  height: 22px;
}
.streak-visual .flame {
  color: var(--accent);
}
.streak-visual .flame .figma-icon {
  width: 30px;
  height: 30px;
  fill: var(--accent);
}
.streak-visual .flame.flame-asset {
  overflow: hidden;
  border: 0;
  box-shadow: 0 0px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.streak-visual .fire-asset {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.streak-visual section .figma-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.hero-trophy {
  color: var(--accent);
}
.hero-trophy > .figma-icon {
  width: 48px;
  height: 48px;
}
.trophy-visual section i {
  color: var(--accent);
}
.trophy-visual section .figma-icon {
  width: 28px;
  height: 28px;
}
.trophy-visual section .thin-fire-icon {
  width: 30px;
  height: 30px;
  stroke-width: 1px;
}
.trophy-visual section i.muted {
  color: rgba(255, 255, 255, 0.4);
}
.auth-top {
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: 30px;
}
.auth-brand {
  gap: 12px;
  flex-direction: row-reverse;
  margin-top: 10px;
}
.auth-brand > span {
  width: 48px;
  height: 48px;
  flex: none;
}
.auth-brand > span .figma-icon {
  width: 26px;
  height: 26px;
  margin: auto;
  stroke-width: 2;
}
.auth-brand p {
  align-content: center;
  line-height: 1.15;
}
.auth-brand strong {
  line-height: 1.1;
}
.auth-brand small {
  margin-top: 3px;
}
.auth-tabs {
  margin-top: 20px;
}
.auth-body {
  padding-top: 40px;
}
.field-icon {
  width: 24px !important;
  height: 24px;
  display: grid;
  place-items: center;
  flex: none;
}
.field-icon .figma-icon {
  width: 18px;
  height: 18px;
}
.field > button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
}
.field > button .figma-icon {
  width: 19px;
  height: 19px;
}
@media (max-height: 760px) {
  .auth-top {
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: 18px;
  }
  .auth-tabs {
    margin-top: 14px;
  }
  .auth-body {
    padding-top: 22px;
  }
}
@media (max-height: 620px) {
  .auth-top {
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 12px;
  }
  .auth-brand > span {
    width: 44px;
    height: 44px;
  }
  .auth-brand > span .figma-icon {
    width: 24px;
    height: 24px;
  }
  .auth-tabs {
    margin-top: 10px;
  }
  .auth-body {
    padding-top: 16px;
  }
  .auth-body form {
    gap: 9px;
  }
  .field {
    height: 46px;
  }
}

/* First onboarding illustration: one coordinate system keeps every piece aligned. */

.lang-visual .persian-card {
  color: var(--accent);
  font: 800 3rem/1 "Vazirmatn";
  transform: rotate(7deg);
}

.lang-visual .art-star {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 35px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 12px;
  color: var(--accent);
  background: rgba(31, 15, 67, 0.86);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%) rotate(8deg);
}
.lang-visual .art-star .figma-icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke-width: 1.6;
}

.lang-visual .orbit.one {
  left: auto;
  right: 8px;
  top: 38px;
}
.lang-visual .orbit.two {
  left: 7px;
  top: auto;
  bottom: -5px;
}

/* Immersive lesson experience */
body[data-page="lesson"],
body[data-page="results"] {
  overflow: hidden;
  background: #fafafe;
}
.lesson-page-v2 {
  --lesson-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #1c1033;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 125, 46, 0.08), transparent 23%),
    radial-gradient(
      circle at 92% 28%,
      rgba(92, 53, 204, 0.09),
      transparent 28%
    ),
    #fafafe;
  overflow: hidden;
}
.lesson-header {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 4;
  direction: ltr;
  min-height: 86px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 13px;
  background: rgba(250, 250, 254, 0.86);
  backdrop-filter: blur(18px) saturate(160%);
}
.lesson-exit,
.lesson-hearts {
  height: 44px;
  border: 1px solid #e8e0f8;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 18px rgba(48, 27, 93, 0.07);
}
.lesson-exit {
  display: grid;
  place-items: center;
  color: #6b5e8a;
  transition:
    transform 140ms ease-out,
    background-color 180ms ease-out;
}
.lesson-exit:active {
  transform: scale(0.94);
}
.lesson-exit .figma-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.3;
}
.lesson-progress {
  direction: rtl;
  display: grid;
  gap: 7px;
}
.lesson-progress > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #9b8ec0;
}
.lesson-progress > span b {
  color: #4b3c6d;
  font-size: 0.76rem;
}
.lesson-progress > span small {
  font-size: 0.67rem;
}
.lesson-progress > i {
  height: 9px;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: #eee9fa;
  box-shadow: inset 0 1px 2px rgba(61, 31, 168, 0.08);
}
.lesson-progress > i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b55e0, #5c35cc);
  box-shadow: 0 0 12px rgba(92, 53, 204, 0.32);
  transition: width 260ms var(--lesson-ease);
}
.lesson-hearts {
  direction: ltr;
  min-width: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: #ff4757;
}
.lesson-hearts .figma-icon {
  width: 20px;
  height: 20px;
  fill: #ff4757;
  stroke-width: 1.8;
}
.lesson-hearts b {
  font:
    800 0.94rem "Outfit",
    "Vazirmatn",
    sans-serif;
}
.lesson-content {
  width: 100%;
  max-width: 640px;
  min-height: 0;
  margin: 0 auto;
  padding: 14px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.lesson-content::-webkit-scrollbar {
  display: none;
}
.lesson-prompt {
  margin-bottom: 15px;
}
.lesson-prompt h1 {
  margin: 0 0 1px;
  font-size: clamp(1.16rem, 4.8vw, 1.42rem);
  line-height: 1.55;
}
.lesson-prompt p {
  margin: 0;
  color: #9b8ec0;
  font:
    600 0.75rem "Outfit",
    sans-serif;
}
.lesson-question-card,
.lesson-audio-card {
  position: relative;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
  padding: 20px;
  overflow: hidden;
  border-radius: 25px;
  color: #fff;
  background:
    radial-gradient(
      circle at 90% 0,
      rgba(255, 255, 255, 0.16),
      transparent 28%
    ),
    linear-gradient(135deg, #4e27bd, #7953dc);
  box-shadow: 0 13px 30px rgba(71, 38, 157, 0.22);
}
.lesson-question-card > span {
  position: absolute;
  top: 14px;
  inset-inline-start: 15px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.13);
}
.lesson-question-card > span .figma-icon {
  width: 17px;
  height: 17px;
}
.lesson-question-card p {
  margin: 16px 0 0;
  text-align: center;
  font-size: clamp(1.17rem, 5vw, 1.4rem);
  font-weight: 750;
  line-height: 1.55;
}
.lesson-question-card p .latin-text {
  font-size: 1em;
}
.lesson-question-card mark {
  padding: 0 7px 3px;
  border-bottom: 2px solid #ffcb40;
  color: #ffda70;
  background: transparent;
}
.lesson-question-card > small {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.67rem;
}
.lesson-options {
  display: grid;
  gap: 10px;
  padding-bottom: 3px;
}
.lesson-option {
  direction: ltr;
  position: relative;
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 2px solid #e8e0f8;
  border-radius: 17px;
  color: #2a1948;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 15px rgba(48, 27, 93, 0.045);
  transition:
    transform 140ms ease-out,
    border-color 190ms ease-out,
    background-color 190ms ease-out,
    box-shadow 190ms ease-out,
    opacity 190ms ease-out;
}
.lesson-option:active:not(:disabled) {
  transform: scale(0.975);
}
.lesson-option .option-index {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #8f80b0;
  background: #f5f2ff;
  font:
    750 0.75rem "Vazirmatn",
    sans-serif;
}
.lesson-option .option-label {
  direction: auto;
  text-align: start;
  font-size: 0.87rem;
  font-weight: 680;
  line-height: 1.45;
}
.lesson-option .option-state {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
}
.lesson-option .option-state .figma-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.lesson-option.selected {
  border-color: #5c35cc;
  background: #f5f1ff;
  box-shadow: 0 7px 20px rgba(92, 53, 204, 0.12);
}
.lesson-option.selected .option-index {
  color: #fff;
  background: #5c35cc;
}
.lesson-option.selected .option-state {
  color: #fff;
  background: #5c35cc;
}
.lesson-option.correct {
  border-color: #00c48c;
  color: #007a59;
  background: #e3fff7;
}
.lesson-option.correct .option-index,
.lesson-option.correct .option-state {
  color: #fff;
  background: #00c48c;
}
.lesson-option.wrong {
  border-color: #ff4757;
  color: #b71d31;
  background: #fff0f2;
}
.lesson-option.wrong .option-index,
.lesson-option.wrong .option-state {
  color: #fff;
  background: #ff4757;
}
.lesson-option.faded {
  opacity: 0.48;
}
.match-board {
  direction: ltr;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.match-column {
  display: grid;
  gap: 10px;
}
.match-card {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border: 2px solid #e8e0f8;
  border-radius: 16px;
  color: #39275d;
  background: #fff;
  font-size: 0.81rem;
  font-weight: 700;
  transition:
    transform 140ms ease-out,
    border-color 180ms ease-out,
    background-color 180ms ease-out;
}
.match-card:active:not(:disabled) {
  transform: scale(0.97);
}
.match-card.selected {
  border-color: #5c35cc;
  color: #5c35cc;
  background: #f0ebff;
}
.match-card.matched {
  border-color: #00c48c;
  color: #00865f;
  background: #dcfff5;
}
.match-card.mismatch {
  border-color: #ff4757;
  color: #c51f33;
  background: #ffebee;
  transform: translateX(3px);
}
.match-card .figma-icon {
  width: 15px;
  height: 15px;
}
.match-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #8b7ba9;
  font-size: 0.69rem;
}
.match-progress .figma-icon {
  width: 15px;
  height: 15px;
  color: #00c48c;
}
.lesson-audio-card {
  min-height: 174px;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(122, 85, 224, 0.7),
      transparent 39%
    ),
    linear-gradient(145deg, #180b36, #351374);
}
.audio-orb {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 0 0 9px rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.2);
  transition:
    transform 150ms ease-out,
    background-color 180ms ease-out;
}
.audio-orb:active {
  transform: scale(0.95);
}
.audio-orb .figma-icon {
  width: 29px;
  height: 29px;
}
.audio-orb i {
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: inherit;
  opacity: 0;
}
.audio-orb.playing i {
  animation: lesson-audio-pulse 1s ease-out infinite;
}
.lesson-audio-card > strong {
  font-size: 0.82rem;
}
.lesson-audio-card > small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.65rem;
}
.audio-fallback {
  width: 100%;
  margin: 11px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 125, 46, 0.19);
  font-size: 0.65rem;
  text-align: center;
}
.audio-fallback span {
  display: block;
  margin-top: 3px;
  color: #ffcfb0;
  font-family: "Outfit", sans-serif;
}
.lesson-action {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 5;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(232, 224, 248, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(170%);
}
.lesson-action > * {
  width: 100%;
  max-width: 604px;
  margin-inline: auto;
}
.lesson-main-button {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #7b55e0);
  box-shadow: 0 8px 22px rgba(92, 53, 204, 0.28);
  font-weight: 800;
  transition:
    transform 140ms ease-out,
    opacity 180ms ease-out,
    background-color 180ms ease-out,
    box-shadow 180ms ease-out;
}
.lesson-main-button:active:not(:disabled) {
  transform: scale(0.975);
}
.lesson-main-button:disabled {
  color: #bdb2d4;
  background: #f0ecf8;
  box-shadow: none;
  opacity: 1;
}
.lesson-main-button.success {
  background: #00b982;
  box-shadow: 0 8px 22px rgba(0, 196, 140, 0.22);
}
.lesson-main-button.error {
  background: #ff4757;
  box-shadow: 0 8px 22px rgba(255, 71, 87, 0.2);
}
.lesson-main-button .figma-icon {
  width: 19px;
  height: 19px;
}
.lesson-feedback {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 14px;
  text-align: right;
}
.lesson-feedback > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.lesson-feedback > i .figma-icon {
  width: 18px;
  height: 18px;
}
.lesson-feedback strong {
  display: block;
  font-size: 0.75rem;
}
.lesson-feedback p {
  margin: 2px 0 0;
  color: #6b5e8a;
  font-size: 0.66rem;
  line-height: 1.55;
}
.lesson-feedback small {
  display: block;
  margin-top: 3px;
  color: #6b5e8a;
  font-size: 0.65rem;
}
.lesson-feedback.success {
  border-color: rgba(0, 196, 140, 0.25);
  background: #ecfff9;
}
.lesson-feedback.success > i {
  color: #008d64;
  background: #d7fff3;
}
.lesson-feedback.success strong {
  color: #007b58;
}
.lesson-feedback.error {
  border-color: rgba(255, 71, 87, 0.22);
  background: #fff4f5;
}
.lesson-feedback.error > i {
  color: #d7253a;
  background: #ffe2e6;
}
.lesson-feedback.error strong {
  color: #c51f33;
}
.lesson-sheet {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(15, 8, 38, 0.55);
  backdrop-filter: blur(4px);
}
.lesson-sheet > section {
  position: relative;
  width: min(100%, 520px);
  padding: 22px 20px max(20px, env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -18px 50px rgba(15, 8, 38, 0.22);
  text-align: center;
  animation: lesson-sheet-in 240ms var(--lesson-ease) both;
}
.lesson-sheet > section > i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  border-radius: 16px;
  color: #5c35cc;
  background: #f0ebff;
}
.lesson-sheet h2 {
  margin: 0;
  font-size: 1.07rem;
}
.lesson-sheet p {
  margin: 7px auto 16px;
  max-width: 360px;
  color: #6b5e8a;
  font-size: 0.72rem;
  line-height: 1.75;
}
.lesson-sheet section > button {
  width: 100%;
  min-height: 50px;
  border-radius: 15px;
  font-weight: 750;
}
.sheet-primary {
  border: 0;
  color: #fff;
  background: #ff4757;
}
.sheet-secondary {
  margin-top: 8px;
  border: 1px solid #e8e0f8;
  color: #5c35cc;
  background: #fff;
}
.lesson-sheet section > button:active {
  transform: scale(0.98);
}
@keyframes lesson-sheet-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lesson-audio-pulse {
  from {
    opacity: 0.8;
    transform: scale(0.82);
  }
  to {
    opacity: 0;
    transform: scale(1.25);
  }
}
@keyframes lesson-wrong-shake {
  20% {
    transform: translateX(-4px);
  }
  45% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-2px);
  }
}
.answer-shake .lesson-question-card {
  animation: lesson-wrong-shake 280ms ease-out;
}

/* Figma-accurate results screen */
.results-page-v2 {
  --result-width: 560px;
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  color: #fff;
  background: #fafafe;
  overflow: hidden;
}
.results-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0f0826 0%, #2a1060 45%, #fafafe 100%);
}
.result-confetti {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.result-confetti i {
  position: absolute;
  top: -18px;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border-radius: 2px;
  background: var(--color);
  opacity: 0;
  animation: result-confetti-fall 2.8s var(--delay)
    cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
.result-confetti i:nth-child(even) {
  border-radius: 50%;
}
.result-hero {
  position: relative;
  z-index: 3;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.result-grade-icon {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border: 2px solid color-mix(in srgb, var(--grade) 27%, transparent);
  border-radius: 24px;
  color: var(--grade);
  background: color-mix(in srgb, var(--grade) 13%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--grade) 20%, transparent);
  animation: result-bounce-in 420ms cubic-bezier(0.2, 0.85, 0.35, 1.2) both;
}
.result-grade-icon .figma-icon {
  width: 40px;
  height: 40px;
  stroke-width: 1.8;
}
.result-title {
  text-align: center;
  animation: result-bounce-in 420ms 0.08s cubic-bezier(0.2, 0.85, 0.35, 1.2)
    both;
}
.result-title h1 {
  margin: 5px;
  color: #fff;
  font-size: 1.87rem;
  line-height: 1.35;
}
.result-title p {
  margin: -1px 0 0;
  color: var(--grade);
  font:
    750 1rem "Outfit",
    sans-serif;
  letter-spacing: 0.04em;
}
.result-stars {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  animation: result-bounce-in 420ms 0.16s cubic-bezier(0.2, 0.85, 0.35, 1.2)
    both;
  scale: 1.4;
  margin-top: 20px;
}
.result-stars i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.2);
}
.result-stars i.large {
  width: 40px;
  height: 40px;
}
.result-stars i .figma-icon {
  width: 100%;
  height: 100%;
}
.result-stars i.earned {
  color: #ffb800;
}
.result-stars i.earned .figma-icon {
  fill: #ffb800;
}
.result-ring {
  position: relative;
  width: 130px;
  height: 130px;
  margin-top: 25px;
  animation: result-bounce-in 420ms 0.24s cubic-bezier(0.2, 0.85, 0.35, 1.2)
    both;
}
.result-ring svg {
  width: 130px;
  height: 130px;
  transform: rotate(-90deg);
  overflow: visible;
}
.result-ring circle {
  fill: none;
  stroke: #f0ebff;
  stroke-width: 10;
}
.result-ring circle.value {
  stroke: var(--grade);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-length);
  stroke-dashoffset: var(--ring-offset);
  animation: result-ring-draw 1.2s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.result-ring > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.result-ring b {
  font:
    800 1.72rem/1 "Outfit",
    "Vazirmatn",
    sans-serif;
}
.result-ring small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.67rem;
}
.result-xp {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.result-xp > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #ff7d2e);
  font:
    800 0.63rem "Outfit",
    sans-serif;
}
.result-xp > b {
  color: #ffb800;
  font:
    800 1.55rem "Outfit",
    "Vazirmatn",
    sans-serif;
}
.result-xp > small {
  direction: rtl;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
}
.result-summary {
  position: relative;
  z-index: 3;
  width: calc(100% - 40px);
  max-width: var(--result-width);
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: center;
  margin: 0 auto 13px;
  padding: 13px 8px;
  border: 1px solid #e8e0f8;
  border-radius: 24px;
  color: #1c1033;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 32px rgba(92, 53, 204, 0.1);
}
.result-summary > i {
  width: 1px;
  height: 42px;
  background: #eee9f8;
}
.result-summary > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.result-summary b {
  font:
    800 1.28rem "Outfit",
    "Vazirmatn",
    sans-serif;
}
.result-summary b.gold {
  color: #ffb800;
}
.result-summary b.orange {
  color: #ff7d2e;
}
.result-summary span {
  color: #9b8ec0;
  font-size: 0.65rem;
}
.result-summary small {
  color: #c4b8e0;
  font:
    500 0.6rem "Outfit",
    sans-serif;
}
.result-actions {
  position: relative;
  z-index: 3;
  width: calc(100% - 40px);
  max-width: var(--result-width);
  display: grid;
  gap: 9px;
  margin: 0 auto;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}
.result-actions button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  font-weight: 750;
  transition:
    transform 140ms ease-out,
    box-shadow 180ms ease-out;
}
.result-actions button:active {
  transform: scale(0.975);
}
.result-actions button:first-child {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #5c35cc, #7b55e0);
  box-shadow: 0 8px 24px rgba(92, 53, 204, 0.35);
}
.result-actions button:last-child {
  min-height: 48px;
  border: 2px solid #e8e0f8;
  color: #6b5e8a;
  background: #fff;
}
.result-actions .figma-icon {
  width: 18px;
  height: 18px;
}
@keyframes result-bounce-in {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes result-ring-draw {
  from {
    stroke-dashoffset: var(--ring-length);
  }
  to {
    stroke-dashoffset: var(--ring-offset);
  }
}
@keyframes result-confetti-fall {
  0% {
    opacity: 0;
    transform: translateY(-10px) rotate(0);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(76vh) rotate(var(--turn));
  }
}

@media (max-height: 700px) {
  .lesson-header {
    min-height: 72px;
    padding-top: calc(9px + env(safe-area-inset-top));
    padding-bottom: 8px;
  }
  .lesson-content {
    padding-top: 8px;
    padding-bottom: 12px;
  }
  .lesson-prompt {
    margin-bottom: 9px;
  }
  .lesson-prompt h1 {
    margin-top: 0;
    font-size: 1.08rem;
  }
  .lesson-question-card {
    min-height: 96px;
    margin-bottom: 11px;
    padding: 14px;
    border-radius: 20px;
  }
  .lesson-question-card p {
    margin-top: 11px;
    font-size: 1.08rem;
  }
  .lesson-audio-card {
    min-height: 132px;
    margin-bottom: 11px;
    padding: 12px;
    border-radius: 20px;
  }
  .audio-orb {
    width: 58px;
    height: 58px;
    margin-bottom: 8px;
  }
  .audio-orb .figma-icon {
    width: 24px;
    height: 24px;
  }
  .lesson-option,
  .match-card {
    min-height: 51px;
  }
  .lesson-options,
  .match-column {
    gap: 7px;
  }
  .lesson-action {
    padding-top: 9px;
  }
  .lesson-main-button {
    min-height: 50px;
  }
  .lesson-feedback {
    padding-block: 7px;
  }
  .lesson-feedback p {
    line-height: 1.4;
  }
  .result-hero {
    /* padding-top: calc(19px + env(safe-area-inset-top));
    transform: none; */
  }
  .result-grade-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 6px;
    border-radius: 19px;
  }
  .result-grade-icon .figma-icon {
    width: 31px;
    height: 31px;
  }
  .result-title h1 {
    font-size: 1.45rem;
  }
  .result-title p {
    font-size: 0.82rem;
  }
  .result-stars {
    margin-top: 5px;
  }
  .result-stars i {
    width: 25px;
    height: 25px;
  }
  .result-stars i.large {
    width: 31px;
    height: 31px;
  }
  .result-ring {
    width: 104px;
    height: 104px;
    margin-top: 5px;
  }
  .result-ring svg {
    width: 104px;
    height: 104px;
  }
  .result-ring b {
    font-size: 1.35rem;
  }
  .result-xp {
    margin-top: 1px;
  }
  .result-xp > b {
    font-size: 1.25rem;
  }
  .result-summary {
    margin-bottom: 8px;
    padding-block: 9px;
  }
  .result-actions {
    gap: 7px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .result-actions button {
    min-height: 48px;
  }
  .result-actions button:last-child {
    min-height: 44px;
  }
}
@media (max-width: 350px) {
  .lesson-header {
    gap: 9px;
    padding-inline: 12px;
  }
  .lesson-content,
  .lesson-action {
    padding-inline: 13px;
  }
  .lesson-option {
    grid-template-columns: 31px minmax(0, 1fr) 24px;
    gap: 8px;
    padding-inline: 9px;
  }
  .match-card {
    padding-inline: 5px;
    font-size: 0.74rem;
  }
  .result-summary,
  .result-actions {
    width: calc(100% - 24px);
  }
  .result-summary {
    padding-inline: 3px;
  }
  .result-summary b {
    font-size: 1.13rem;
  }
  .result-summary span {
    font-size: 0.59rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .lesson-option:hover:not(:disabled),
  .match-card:hover:not(:disabled) {
    border-color: #bba8eb;
    transform: translateY(-1px);
  }
  .lesson-exit:hover {
    color: #5c35cc;
    background: #f5f2ff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .answer-shake .lesson-question-card,
  .audio-orb.playing i,
  .result-confetti i,
  .result-grade-icon,
  .result-title,
  .result-stars,
  .result-ring {
    animation: none !important;
  }
  .result-ring circle.value {
    animation: none !important;
    stroke-dashoffset: var(--ring-offset);
  }
  .lesson-sheet > section {
    animation: none !important;
  }
}

/* Achievements v2 */
.achievement-page-v2 {
  min-height: 100dvh;
  color: #1c1033;
  background:
    radial-gradient(
      circle at 90% 30%,
      rgba(92, 53, 204, 0.06),
      transparent 24%
    ),
    #fafafe;
}
.achievement-hero-v2 {
  position: relative;
  padding: calc(18px + env(safe-area-inset-top)) 16px 28px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(123, 85, 224, 0.34),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 74%,
      rgba(255, 125, 46, 0.13),
      transparent 26%
    ),
    linear-gradient(145deg, #0f0826 0%, #25104f 58%, #351375 100%);
}
.achievement-hero-v2:after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -75px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(255, 255, 255, 0.025),
    0 0 0 58px rgba(255, 255, 255, 0.018);
  pointer-events: none;
}
.achievement-nav-v2 {
  position: relative;
  z-index: 2;
  width: min(100%, 728px);
  min-height: 50px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  direction: ltr;
  margin: 0 auto 17px;
}
.achievement-nav-v2 > button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 140ms ease-out,
    background-color 180ms ease-out;
}
.achievement-nav-v2 > button:active {
  transform: scale(0.95);
}
.achievement-nav-v2 > button svg {
  width: 20px;
  height: 20px;
  transform: none;
  transform: rotate(180deg);
}
.achievement-nav-v2 > div {
  direction: rtl;
  justify-self: end;
  text-align: right;
}
.achievement-nav-v2 h1 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.35;
}
.achievement-nav-v2 p {
  margin: 1px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font:
    600 0.72rem "Outfit",
    sans-serif;
  letter-spacing: 0.03em;
}
.achievement-overview-v2 {
  position: relative;
  z-index: 2;
  width: min(100%, 728px);
  margin: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.07)
  );
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 35px rgba(8, 3, 25, 0.18);
}
.achievement-overview-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.achievement-overview-main > i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 184, 0, 0.36);
  border-radius: 17px;
  color: #ffbf1f;
  background: linear-gradient(
    145deg,
    rgba(255, 184, 0, 0.22),
    rgba(255, 125, 46, 0.12)
  );
  box-shadow: 0 8px 24px rgba(255, 184, 0, 0.1);
}
.achievement-overview-main > i .figma-icon {
  width: 29px;
  height: 29px;
}
.achievement-overview-main > div {
  display: grid;
  min-width: 0;
}
.achievement-overview-main > div small {
  color: rgba(255, 255, 255, 0.57);
  font-size: 0.67rem;
}
.achievement-overview-main > div strong {
  margin-top: 2px;
  color: #fff;
  font-size: 0.88rem;
}
.achievement-overview-main > b {
  min-width: 48px;
  display: grid;
  justify-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(15, 8, 38, 0.22);
}
.achievement-overview-main > b span {
  color: #ffbd18;
  font:
    850 1.15rem/1 "Vazirmatn",
    sans-serif;
}
.achievement-overview-main > b small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.58rem;
}
.achievement-overview-progress {
  margin-top: 14px;
}
.achievement-overview-progress > i {
  height: 8px;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}
.achievement-overview-progress > i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb800, #ff7d2e);
  box-shadow: 0 0 13px rgba(255, 184, 0, 0.34);
}
.achievement-overview-progress > div {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
}
.achievement-overview-progress span {
  color: rgba(255, 255, 255, 0.83);
  font-size: 0.64rem;
  font-weight: 700;
}
.achievement-overview-progress small {
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.61rem;
}
.achievement-grid-v2 {
  width: min(100%, 760px);
  margin: auto;
  padding: 21px 16px max(24px, env(safe-area-inset-bottom));
}
.achievement-grid-v2 > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 14px;
}
.achievement-grid-v2 > header h2 {
  margin: 0;
  font-size: 1rem;
}
.achievement-grid-v2 > header p {
  margin: 2px 0 0;
  color: #8c7da9;
  font-size: 0.65rem;
}
.achievement-grid-v2 > header > span {
  padding: 5px 10px;
  border: 1px solid #e8e0f8;
  border-radius: 999px;
  color: #5c35cc;
  background: #f0ebff;
  font-size: 0.67rem;
  font-weight: 800;
}
.achievement-grid-v2 > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.achievement-card-v2 {
  min-width: 0;
  min-height: 218px;
  display: flex;
  flex-direction: column;
  padding: 13px;
  border: 1.5px solid #e8e0f8;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 7px 22px rgba(70, 39, 145, 0.07);
}
.achievement-card-v2 > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}
.achievement-icon-v2 {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 17px;
}
.achievement-icon-v2 > .figma-icon {
  width: 25px;
  height: 25px;
}
.achievement-icon-v2.asset {
  background: transparent;
}
.achievement-icon-v2.orange {
  color: #ff7d2e;
  background: #ffeed9;
}
.achievement-icon-v2.purple {
  color: #5c35cc;
  background: #f0ebff;
}
.achievement-icon-v2.gold {
  color: #ffb800;
  background: #fff8dc;
}
.achievement-icon-v2.blue {
  color: #38bdf8;
  background: #eff6ff;
}
.achievement-icon-v2.green {
  color: #00b982;
  background: #dcfff5;
}
.achievement-icon-v2.neutral {
  color: #6b5e8a;
  background: #f5f2ff;
}
.achievement-icon-v2 > i {
  position: absolute;
  left: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #00c48c;
  box-shadow: 0 3px 8px rgba(0, 196, 140, 0.3);
}
.achievement-icon-v2 > i .figma-icon {
  width: 10px;
  height: 10px;
  stroke-width: 2.7;
}
.achievement-rarity-v2 {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 750;
}
.achievement-rarity-v2.common {
  color: #6b5e8a;
  background: #f5f2ff;
}
.achievement-rarity-v2.rare {
  color: #2774d8;
  background: #eff6ff;
}
.achievement-rarity-v2.epic {
  color: #7951d4;
  background: #f3efff;
}
.achievement-rarity-v2.legendary {
  color: #d48700;
  background: #fff7da;
}
.achievement-copy-v2 {
  display: grid;
  margin-top: 11px;
}
.achievement-copy-v2 strong {
  font-size: 0.82rem;
  line-height: 1.45;
}
.achievement-copy-v2 small {
  color: #8b75bf;
  font:
    600 0.67rem "Outfit",
    sans-serif;
}
.achievement-copy-v2 p {
  min-height: 34px;
  margin: 6px 0 0;
  color: #9185a9;
  font-size: 0.63rem;
  line-height: 1.65;
}
.achievement-progress-v2,
.achievement-earned-v2,
.achievement-locked-v2 {
  margin-top: auto;
}
.achievement-progress-v2 > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #8c7da9;
  font-size: 0.58rem;
}
.achievement-progress-v2 > div b {
  color: #5c35cc;
}
.achievement-progress-v2 > i {
  height: 6px;
  display: block;
  overflow: hidden;
  border-radius: 99px;
  background: #eee9fa;
}
.achievement-progress-v2 > i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #5c35cc, #8b5cf6);
}
.achievement-earned-v2,
.achievement-locked-v2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid #f0ebf8;
  color: #00a875;
  font-size: 0.58rem;
}
.achievement-earned-v2 .figma-icon,
.achievement-locked-v2 .figma-icon {
  width: 14px;
  height: 14px;
}
.achievement-locked-v2 {
  color: #a99fc0;
}
.achievement-card-v2.locked {
  border-color: #ebe6f5;
  background: #f8f6fc;
  box-shadow: none;
}
.achievement-card-v2.locked .achievement-icon-v2,
.achievement-card-v2.locked .achievement-copy-v2 {
  filter: grayscale(0.45);
  opacity: 0.58;
}
.achievement-card-v2.rarity-rare:not(.locked) {
  border-color: #cce1ff;
}
.achievement-card-v2.rarity-epic:not(.locked) {
  border-color: #ddd3fb;
}
.achievement-card-v2.rarity-legendary:not(.locked) {
  border-color: #f5d978;
}
@media (min-width: 600px) {
  .achievement-grid-v2 > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 350px) {
  .achievement-hero-v2,
  .achievement-grid-v2 {
    padding-inline: 12px;
  }
  .achievement-overview-main {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 9px;
  }
  .achievement-overview-main > i {
    width: 48px;
    height: 48px;
  }
  .achievement-overview-main > div strong {
    font-size: 0.76rem;
  }
  .achievement-card-v2 {
    min-height: 210px;
    padding: 10px;
    border-radius: 19px;
  }
  .achievement-icon-v2 {
    width: 48px;
    height: 48px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .achievement-card-v2:not(.locked) {
    transition:
      transform 180ms ease-out,
      box-shadow 180ms ease-out;
  }
  .achievement-card-v2:not(.locked):hover {
    transform: translateY(-2px);
    box-shadow: 0 11px 28px rgba(70, 39, 145, 0.11);
  }
  .achievement-nav-v2 > button:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* Unified headers: Home, Path, Practice, Stats, Profile, Settings, Achievements */
.home-hero,
.dark-header,
.figma-profile-head,
.simple-header,
.achievement-hero-v2 {
  color: #fff;
  background: var(--app-header-bg);
}
.home-hero {
  padding: calc(var(--app-header-top) + env(safe-area-inset-top)) var(--app-header-inline) 32px;
}
.dark-header {
  padding: calc(var(--app-header-top) + env(safe-area-inset-top)) var(--app-header-inline) 38px;
}
.practice-head {
  padding-bottom: 34px;
}
.figma-profile-head {
  padding: calc(var(--app-header-top) + env(safe-area-inset-top)) var(--app-header-inline) 24px;
}
.simple-header {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  direction: ltr;
  padding: calc(var(--app-header-top) + env(safe-area-inset-top)) var(--app-header-inline) 14px;
}
.simple-header > button {
  grid-column: 1;
  width: 40px;
  height: 40px;
  border: 1px solid var(--app-header-border);
  border-radius: 13px;
  background: var(--app-header-control);
  transform: none;
  transform: rotate(180deg);
}
.simple-header > div {
  grid-column: 2;
  justify-self: end;
  direction: rtl;
  text-align: right;
}
.simple-header h1 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.35;
}
.simple-header small,
.dark-header > small {
  color: rgba(255, 255, 255, 0.48);
}
.achievement-hero-v2 {
  padding: calc(var(--app-header-top) + env(safe-area-inset-top)) 16px 26px;
}
.achievement-nav-v2 {
  min-height: 44px;
  margin-bottom: 14px;
}
.achievement-nav-v2 > button,
.figma-profile-actions a,
.figma-profile-actions button,
.status-row button {
  border: 1px solid var(--app-header-border);
  background: var(--app-header-control);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
}
.status-row {
  min-height: 40px;
}
.greeting {
  margin-top: 13px;
}
.dark-header h1 {
  margin: 3px 0;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1.4;
}
.dark-header > p {
  color: var(--app-header-muted);
}
.level-progress,
.stat-summary,
.profile-level,
.achievement-overview-v2 {
  border-color: var(--app-header-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(140%);
}
.figma-profile-actions {
  min-height: 40px;
  margin-bottom: 6px;
}
.figma-profile-actions a,
.figma-profile-actions button {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}
.figma-avatar {
  margin-top: 2px;
}
@media (max-height: 620px) {
  :root {
    --app-header-top: 9px;
  }
  .home-hero {
    padding-bottom: 27px;
  }
  .dark-header {
    padding-bottom: 31px;
  }
  .figma-profile-head {
    padding-bottom: 20px;
  }
  .achievement-hero-v2 {
    padding-bottom: 22px;
  }
}

/* Achievements uses the exact compact header pattern from Settings. */
.achievement-overview-band-v2 {
  padding: 16px 16px 0;
  background: #fafafe;
}
.achievement-overview-band-v2 .achievement-overview-v2 {
  max-width: 728px;
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--app-header-bg);
  box-shadow: 0 12px 30px rgba(37, 16, 79, 0.16);
}
.achievement-overview-band-v2 + .achievement-grid-v2 {
  padding-top: 18px;
}

/* === THEME TOKENS === */
:root.dark {
  --brand: #8b6cf0;
  --brand-light: #a78bfa;
  --brand-dark: #6d4ed6;
  --brand-surface: #251b3f;
  --orange-light: #3b241d;
  --green-light: #12372f;
  --void: #08040f;
  --ink: #f4f0ff;
  --muted: #aaa0c0;
  --surface: #0c0718;
  --border: #302542;
  --white: #171025;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  --theme-card: #171025;
  --theme-card-raised: #1d1530;
  --theme-soft: #211833;
  --theme-soft-strong: #2a1f3f;
  --theme-subtle: #8f84a8;
  --theme-divider: #2b213b;
  --app-header-bg: linear-gradient(145deg, #08040f 0%, #1a0d35 62%, #2c1261 100%);
}

:root.dark body,
:root.dark .app-screen,
:root.dark .figma-path-list,
:root.dark .figma-practice-content,
:root.dark .figma-profile,
:root.dark .figma-achievements,
:root.dark .auth-page,
:root.dark body[data-page="lesson"],
:root.dark body[data-page="results"],
:root.dark .achievement-overview-band-v2 {
  background-color: var(--surface);
}

:root.dark .lesson-page-v2,
:root.dark .achievement-page-v2 {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(139, 108, 240, 0.13), transparent 25%),
    radial-gradient(circle at 92% 72%, rgba(255, 125, 46, 0.07), transparent 27%),
    var(--surface);
}

:root.dark .results-page-v2 {
  background: var(--surface);
}

:root.dark .panel,
:root.dark .quick-card,
:root.dark .path-node,
:root.dark .figma-lesson-card,
:root.dark .figma-challenge,
:root.dark .profile-stats,
:root.dark .profile-links,
:root.dark .profile-stat-grid article,
:root.dark .profile-activity,
:root.dark .figma-profile-menu,
:root.dark .lesson-page,
:root.dark .options button,
:root.dark .result-cards > div,
:root.dark .results-page article,
:root.dark .badges article,
:root.dark .figma-badge,
:root.dark .settings-group button,
:root.dark .auth-card,
:root.dark .field,
:root.dark .social,
:root.dark .lesson-option,
:root.dark .match-card,
:root.dark .lesson-sheet > section,
:root.dark .result-summary,
:root.dark .result-actions button:last-child,
:root.dark .achievement-card-v2 {
  color: var(--ink);
  border-color: var(--border);
  background: var(--theme-card);
  box-shadow: var(--shadow);
}

:root.dark .bottom-nav {
  border-color: var(--border);
  background: rgba(18, 12, 30, 0.94);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(130%);
}

:root.dark .bottom-nav a,
:root.dark .quick-card > small,
:root.dark .quick-card footer time,
:root.dark .bars small,
:root.dark .chart-bars small,
:root.dark .path-node p small,
:root.dark .path-checkpoint small,
:root.dark .practice-block > header > span,
:root.dark .figma-challenge p > small,
:root.dark .skill-progress p small,
:root.dark .profile-stat-grid article > small,
:root.dark .profile-activity footer,
:root.dark .figma-profile-menu p small,
:root.dark .figma-badge > small,
:root.dark .figma-badge > time,
:root.dark .badge-progress > span,
:root.dark .auth-terms,
:root.dark .lesson-progress > span,
:root.dark .lesson-prompt p,
:root.dark .result-summary span {
  color: var(--theme-subtle);
}

:root.dark .figma-lesson-card strong,
:root.dark .practice-block h2,
:root.dark .figma-challenge strong,
:root.dark .profile-stat-grid article > b,
:root.dark .profile-activity h2,
:root.dark .figma-profile-menu p strong,
:root.dark .figma-badge > strong,
:root.dark .field input,
:root.dark .apple-icon,
:root.dark .achievement-page-v2,
:root.dark .achievement-copy-v2 strong {
  color: var(--ink);
}

:root.dark .path-unit span,
:root.dark .profile-tabs,
:root.dark .options button b,
:root.dark .lesson-option .option-index,
:root.dark .achievement-grid-v2 > header > span,
:root.dark .badge-progress > i,
:root.dark .achievement-card-v2.locked {
  border-color: var(--border);
  background: var(--theme-soft);
}

:root.dark .profile-tabs button.active,
:root.dark .continue-card > em,
:root.dark .account-card .avatar,
:root.dark .sheet-secondary {
  color: var(--brand-light);
  border-color: var(--border);
  background: var(--theme-card-raised);
}

:root.dark .settings-group button {
  border-bottom-color: var(--theme-divider);
}

:root.dark .settings-group button:active,
:root.dark .figma-profile-menu > a:active {
  background: var(--theme-soft);
}

:root.dark .settings-group button > .setting-icon,
:root.dark .figma-challenge.purple > i,
:root.dark .profile-stat-grid i.purple,
:root.dark .figma-profile-menu i.purple,
:root.dark .badge-icon.purple,
:root.dark .achievement-icon-v2.purple,
:root.dark .lesson-sheet > section > i {
  color: var(--brand-light);
  background: rgba(139, 108, 240, 0.15);
}

:root.dark .profile-stat-grid i.green,
:root.dark .figma-profile-menu i.green,
:root.dark .badge-icon.green,
:root.dark .achievement-icon-v2.green {
  background: rgba(0, 196, 140, 0.13);
}

:root.dark .profile-stat-grid i.gold,
:root.dark .badge-icon.gold,
:root.dark .achievement-icon-v2.gold {
  background: rgba(255, 184, 0, 0.13);
}

:root.dark .profile-stat-grid i.blue,
:root.dark .figma-profile-menu i.blue,
:root.dark .badge-icon.blue,
:root.dark .achievement-icon-v2.blue {
  background: rgba(56, 189, 248, 0.13);
}

:root.dark .figma-profile-menu i.neutral,
:root.dark .badge-icon.neutral,
:root.dark .achievement-icon-v2.neutral,
:root.dark .achievement-rarity-v2.common {
  color: var(--muted);
  background: var(--theme-soft-strong);
}

:root.dark .profile-activity > div i,
:root.dark .badge-progress > i,
:root.dark .toggle {
  background-color: var(--theme-soft-strong);
}

:root.dark .toggle.on {
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 108, 240, 0.12);
}

:root.dark .toggle b {
  background: #f8f6ff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}

:root.dark .field,
:root.dark .lesson-exit,
:root.dark .lesson-hearts {
  border-color: var(--border);
  background: rgba(29, 21, 48, 0.9);
}

:root.dark .auth-body label,
:root.dark .lesson-exit,
:root.dark .lesson-feedback p,
:root.dark .lesson-feedback small,
:root.dark .result-actions button:last-child {
  color: var(--muted);
}

:root.dark .auth-body .separator span {
  color: var(--theme-subtle);
  background: var(--surface);
}

:root.dark .lesson-option.selected,
:root.dark .match-card.selected {
  color: #bba8ff;
  border-color: var(--brand-light);
  background: rgba(139, 108, 240, 0.14);
}

:root.dark .lesson-option.correct,
:root.dark .lesson-feedback.success,
:root.dark .match-card.matched {
  color: #5ce8bd;
  background: rgba(0, 196, 140, 0.12);
}

:root.dark .lesson-option.wrong,
:root.dark .lesson-feedback.error,
:root.dark .match-card.mismatch,
:root.dark .logout {
  color: #ff8792;
  background: rgba(255, 71, 87, 0.12);
}

:root.dark .figma-path-row.locked .path-rail > span,
:root.dark .path-boss.locked,
:root.dark .figma-badge.locked {
  border-color: var(--border);
  background: var(--theme-soft);
}

/* Dark-mode fixes for surfaces that still use legacy literal colors. */
:root.dark .leaderboard > div,
:root.dark .skill-progress > div,
:root.dark .figma-profile-menu > a {
  border-bottom-color: var(--theme-divider);
}

:root.dark .leaderboard .me {
  color: #bba8ff;
  background: rgba(139, 108, 240, 0.13);
}

:root.dark .lesson-header {
  background: rgba(12, 7, 24, 0.88);
  box-shadow: 0 1px 0 var(--theme-divider);
}

:root.dark .lesson-action {
  border-top-color: var(--theme-divider);
  background: rgba(12, 7, 24, 0.94);
}

:root.dark .lesson-main-button:disabled {
  color: #80768f;
  border: 1px solid #302642;
  background: linear-gradient(135deg, #21182f, #251b36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

:root.dark .figma-challenge > i,
:root.dark .profile-stat-grid i.orange,
:root.dark .achievement-icon-v2.orange {
  color: #ff9d61;
  background: rgba(255, 125, 46, 0.14);
}

:root.dark .stat-summary {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

:root.dark .achievement-rarity-v2.rare {
  color: #7db8ff;
  background: rgba(59, 130, 246, 0.15);
}

:root.dark .achievement-rarity-v2.epic {
  color: #bba8ff;
  background: rgba(139, 108, 240, 0.16);
}

:root.dark .achievement-rarity-v2.legendary {
  color: #ffd166;
  background: rgba(255, 184, 0, 0.14);
}

/* Full dark-mode audit: secondary states, progress tracks and legacy views. */
:root.dark .results-gradient {
  background: linear-gradient(180deg, #08040f 0%, #24104d 44%, var(--surface) 100%);
}

:root.dark .lesson-progress > i,
:root.dark .result-ring circle,
:root.dark .achievement-progress-v2 > i,
:root.dark .badge-progress > i {
  background: var(--theme-soft-strong);
}

:root.dark .result-ring circle {
  fill: none;
  stroke: var(--theme-soft-strong);
}

:root.dark .result-ring circle.value {
  stroke: var(--grade);
}

:root.dark .result-summary > i {
  background: var(--theme-divider);
}

:root.dark .result-summary small,
:root.dark .lesson-progress > span b,
:root.dark .match-progress,
:root.dark .achievement-grid-v2 > header p,
:root.dark .achievement-copy-v2 small,
:root.dark .achievement-copy-v2 p,
:root.dark .achievement-progress-v2 > div,
:root.dark .achievement-locked-v2 {
  color: var(--theme-subtle);
}

:root.dark .achievement-earned-v2,
:root.dark .achievement-locked-v2 {
  border-top-color: var(--theme-divider);
}

:root.dark .auth-tabs button.active {
  color: #c7b8ff;
  background: rgba(29, 21, 48, 0.96);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

:root.dark .field input::placeholder {
  color: #716780;
}

:root.dark .field:focus-within {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(139, 108, 240, 0.12);
}

:root.dark input:-webkit-autofill,
:root.dark input:-webkit-autofill:hover,
:root.dark input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--theme-card) inset;
  transition: background-color 9999s ease-out;
}

:root.dark .lesson-exit:hover {
  color: var(--brand-light);
  background: var(--theme-soft-strong);
}

:root.dark .profile-links > a {
  border-bottom-color: var(--theme-divider);
}

:root.dark .path-rail > span,
:root.dark .figma-lesson-card > i {
  color: var(--brand-light);
  border-color: rgba(139, 108, 240, 0.28);
  background: rgba(139, 108, 240, 0.15);
}

:root.dark .figma-path-row.current .figma-lesson-card > i {
  color: #5ce8bd;
  border-color: rgba(0, 196, 140, 0.3);
  background: rgba(0, 196, 140, 0.14);
}

/* A1 curriculum lesson blocks — Path styles intentionally untouched */
.a1-lesson .lesson-content { max-width: 720px; }
.a1-duration {
  min-width: 62px; height: 42px; display:flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid #e8e0f8; border-radius:14px; color:#6b5e8a; background:rgba(255,255,255,.88);
  font-size:.66rem; font-weight:800;
}
.a1-duration svg { width:16px; height:16px; }
.a1-stage-intro { display:flex; align-items:center; gap:13px; margin-bottom:18px; padding:6px 2px; }
.a1-stage-intro > span { width:46px; height:46px; display:grid; place-items:center; flex:none; border-radius:15px; color:#fff; background:linear-gradient(135deg,#5c35cc,#7b55e0); box-shadow:0 8px 20px rgba(92,53,204,.2); }
.a1-stage-intro svg { width:22px; height:22px; }
.a1-stage-intro div { min-width:0; }
.a1-stage-intro small { color:#8b75bf; font:700 .63rem "Outfit","Vazirmatn"; }
.a1-stage-intro h1 { margin:2px 0 3px; color:#1c1033; font-size:1.25rem; }
.a1-stage-intro p { margin:0; color:#8b80a6; font-size:.67rem; }
.a1-teaching-card,.a1-word-section { margin-bottom:14px; padding:16px; border:1px solid #e8e0f8; border-radius:20px; background:#fff; box-shadow:0 5px 20px rgba(48,27,93,.055); }
.a1-teaching-card > header { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.a1-teaching-card > header > svg { width:20px; height:20px; color:#5c35cc; }
.a1-teaching-card h2,.a1-word-section h2 { margin:0; color:#29194a; font-size:.9rem; }
.a1-teaching-card > p { margin:0; color:#75688f; font-size:.72rem; line-height:1.9; }
.a1-teaching-card.explanation { border-inline-start:4px solid #5c35cc; }
.a1-teaching-card.grammar { background:linear-gradient(145deg,#fff,#faf8ff); }
.a1-formula { margin:4px 0 11px; padding:12px; border-radius:13px; color:#4b28b0; background:#f0ebff; font:800 .82rem "Outfit"; text-align:center; }
.a1-examples { display:grid; gap:7px; margin-top:12px; }
.a1-examples > span { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border:1px solid #eee8fb; border-radius:12px; color:#352452; background:#fbfaff; font:650 .72rem "Outfit","Vazirmatn"; }
.a1-speak { min-height:29px; display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:none; padding:0 8px; border-radius:9px; color:#5c35cc; background:#eee8ff; font-size:.55rem; font-weight:800; }
.a1-speak svg { width:14px; height:14px; }
.a1-speak,
.a1-sound-examples button,
.lesson-audio-card .audio-orb {
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.a1-speak.is-slow-playback,
.a1-sound-examples button.is-slow-playback {
  color:#a64b00;
  background:#fff0d8;
  box-shadow:0 0 0 2px rgba(245,158,11,.2);
}
.lesson-audio-card .audio-orb.is-slow-playback {
  box-shadow:0 0 0 5px rgba(245,158,11,.2), 0 10px 24px rgba(80,48,0,.14);
}
.a1-word-section > h2 { margin-bottom:11px; }
.a1-word-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.a1-word-grid > article { position:relative; min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-height:74px; padding:9px; border:1px solid #eee9f8; border-radius:15px; background:#fcfbff; }
.a1-word-grid article > div { min-width:0; display:grid; }
.a1-word-grid strong { color:#251641; font:800 .82rem "Outfit"; }
.a1-word-grid em { color:#5c35cc; font:700 .63rem "Outfit"; font-style:normal; }
.a1-word-grid small { color:#75688f; font-size:.6rem; }
.a1-word-grid code { overflow:hidden; color:#a094b7; font:.56rem "Outfit"; text-overflow:ellipsis; white-space:nowrap; }
.a1-word-photo { position:relative; width:54px; height:54px; overflow:hidden; flex:none; border-radius:12px; background:#f0ebff; }
.a1-word-photo img { width:100%; height:100%; object-fit:cover; }
.a1-word-photo.is-loading > span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#f1edfa,#faf8ff,#f1edfa); background-size:200% 100%; animation:a1-shimmer 1.2s linear infinite; }
.a1-word-photo.is-unavailable { display:grid; place-items:center; color:#5c35cc; font:800 .55rem "Outfit"; }
.a1-alphabet-section {
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.a1-alphabet-section > h2 { margin-bottom:12px; padding-inline:2px; }
.a1-alphabet-photo {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:12px;
}
.a1-alphabet-photo img {
  width:100%;
  height:100%;
  border-radius:12px;
  object-fit:contain;
  filter:drop-shadow(0 5px 7px rgba(44,30,80,.12));
}
.a1-alphabet-photo.is-loading > span {
  display:block;
  width:100%;
  height:100%;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),rgba(255,255,255,.8),rgba(255,255,255,.35));
  background-size:200% 100%;
  animation:a1-shimmer 1.2s linear infinite;
}
.a1-alphabet-photo.is-unavailable {
  display:grid;
  place-items:center;
  color:#7658ca;
  background:rgba(255,255,255,.44);
}
.a1-alphabet-photo .photo-wordmark {
  max-width:100%;
  overflow:hidden;
  padding:8px;
  font-size:.72rem;
  font-weight:800;
  text-overflow:ellipsis;
}
.a1-alphabet-section .a1-speak {
  width:40px;
  height:40px;
  min-height:40px;
  margin-top:8px;
  padding:0;
  border-radius:999px;
  color:#5c35cc;
  background:#eef2ff;
}
.a1-alphabet-section .a1-speak:hover { background:#e0e7ff; }
.a1-alphabet-section .a1-speak.is-slow-playback {
  color:#a64b00;
  background:#fff0d8;
  box-shadow:0 0 0 2px rgba(245,158,11,.2);
}
.a1-alphabet-section .a1-speak:active { transform:scale(.9); }
.a1-alphabet-section .a1-speak:focus-visible {
  outline:2px solid #a5b4fc;
  outline-offset:2px;
}
.a1-alphabet-section .a1-speak svg { width:20px; height:20px; }
.a1-alphabet-section .a1-speak span { display:none; }
@keyframes a1-shimmer { to { background-position:-200% 0; } }
.a1-teaching-card.dialogue > header { justify-content:space-between; }
.a1-teaching-card.dialogue > header h2 { margin-inline-end:auto; }
.a1-teaching-card.dialogue > div { display:grid; gap:8px; }
.a1-teaching-card.dialogue p { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:8px; margin:0; padding:9px; border-radius:13px; background:#f8f6ff; }
.a1-teaching-card.dialogue p b { color:#5c35cc; font-size:.59rem; }
.a1-teaching-card.dialogue p span { color:#2e2048; font:650 .72rem "Outfit"; }
.a1-teaching-card.pronunciation > header > b { min-width:72px; padding:8px 10px; border-radius:11px; color:#fff; background:#5c35cc; font:800 .83rem "Outfit"; text-align:center; }
.a1-sound-examples { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.a1-sound-examples button { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #ddd2fa; border-radius:11px; color:#4b2aa0; background:#f5f1ff; font:700 .65rem "Outfit"; }
.a1-sound-examples svg { width:14px; height:14px; }
.a1-order { display:grid; gap:14px; }
.a1-order-target,.a1-order-bank { min-height:76px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:8px; padding:12px; border-radius:18px; }
.a1-order-target { border:2px dashed #cfc2ee; background:#faf8ff; }
.a1-order-target > span { color:#a69bbd; font-size:.7rem; }
.a1-order-bank { border:1px solid #e8e0f8; background:#fff; }
.a1-order button { padding:9px 12px; border:1px solid #d9cef3; border-radius:11px; color:#39245f; background:#fff; box-shadow:0 3px 8px rgba(48,27,93,.06); font:750 .76rem "Outfit"; }
.a1-order-target button { color:#fff; border-color:#5c35cc; background:#5c35cc; }
.a1-spell { padding:18px; border:1px solid #e8e0f8; border-radius:20px; background:#fff; }
.a1-spell label { display:grid; gap:7px; color:#2a1948; font-size:.8rem; font-weight:800; }
.a1-spell label small { color:#8f80aa; font:600 .63rem "Outfit"; }
.a1-spell input { width:100%; height:58px; padding:0 15px; border:2px solid #ddd3f5; border-radius:15px; outline:none; color:#251641; background:#faf8ff; font:800 1.05rem "Outfit"; text-align:center; transition:border-color 160ms ease,box-shadow 160ms ease; }
.a1-spell input:focus { border-color:#5c35cc; box-shadow:0 0 0 4px rgba(92,53,204,.1); }
.result-mastery-note { width:min(560px,calc(100% - 36px)); display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 10px; padding:10px 13px; border:1px solid rgba(255,125,46,.28); border-radius:14px; color:#a84912; background:#fff2e9; font-size:.66rem; line-height:1.7; text-align:center; }
.result-mastery-note svg { width:17px; height:17px; flex:none; }

:root.dark .a1-stage-intro h1,:root.dark .a1-teaching-card h2,:root.dark .a1-word-section h2,:root.dark .a1-word-grid strong { color:var(--ink); }
:root.dark .a1-duration,:root.dark .a1-teaching-card,:root.dark .a1-word-section,:root.dark .a1-order-bank,:root.dark .a1-spell { border-color:var(--border); background:var(--theme-card); }
:root.dark .a1-teaching-card.grammar { background:linear-gradient(145deg,var(--theme-card),var(--theme-card-raised)); }
:root.dark .a1-formula,:root.dark .a1-speak,:root.dark .a1-sound-examples button { color:#c9bcff; background:rgba(139,108,240,.14); }
:root.dark .a1-speak.is-slow-playback,
:root.dark .a1-sound-examples button.is-slow-playback {
  color:#ffd58a;
  background:rgba(245,158,11,.16);
  box-shadow:0 0 0 2px rgba(245,158,11,.24);
}
:root.dark .lesson-audio-card .audio-orb.is-slow-playback {
  box-shadow:0 0 0 5px rgba(245,158,11,.24), 0 10px 24px rgba(0,0,0,.28);
}
:root.dark .a1-examples > span,:root.dark .a1-word-grid > article,:root.dark .a1-teaching-card.dialogue p { color:var(--ink); border-color:var(--border); background:var(--theme-card-raised); }
:root.dark .a1-alphabet-section { background:transparent; }
:root.dark .a1-alphabet-photo.is-unavailable { color:#c9bcff; background:rgba(139,108,240,.1); }
:root.dark .a1-alphabet-section .a1-speak { color:#c9bcff; background:rgba(139,108,240,.16); }
:root.dark .a1-alphabet-section .a1-speak:hover { background:rgba(139,108,240,.24); }
:root.dark .a1-alphabet-section .a1-speak.is-slow-playback {
  color:#ffd58a;
  background:rgba(245,158,11,.16);
  box-shadow:0 0 0 2px rgba(245,158,11,.24);
}
:root.dark .a1-teaching-card.dialogue p span,:root.dark .a1-order button,:root.dark .a1-spell input { color:var(--ink); }
:root.dark .a1-order-target { border-color:var(--border-strong); background:rgba(139,108,240,.06); }
:root.dark .a1-order-bank,:root.dark .a1-order button,:root.dark .a1-spell input { border-color:var(--border); background:var(--theme-card-raised); }
:root.dark .result-mastery-note { color:#ffb486; border-color:rgba(255,125,46,.25); background:rgba(255,125,46,.1); }

@media (max-width:520px) {
  .a1-word-grid { grid-template-columns:1fr; }
  .a1-teaching-card,.a1-word-section { padding:13px; }
  .a1-teaching-card.dialogue p { grid-template-columns:42px minmax(0,1fr) 30px; }
  .a1-speak span:empty { display:none; }
}

/* Focused audio and pronunciation settings */
.setting-audio-summary { direction:ltr; text-align:right; font-family:"Outfit",sans-serif; }
.audio-settings-page { min-height:100dvh; color:var(--ink); background:var(--surface); }
.audio-settings-content { width:min(100%,620px); display:grid; gap:16px; margin:0 auto; padding:20px 20px calc(36px + env(safe-area-inset-bottom)); }
.audio-rate-card,.audio-voice-picker { border:1px solid var(--border); background:var(--white); box-shadow:var(--shadow); }
.audio-rate-card { display:grid; gap:16px; padding:16px; border-radius:18px; }
.audio-rate-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.audio-rate-card header > div { display:grid; }
.audio-rate-card strong { color:var(--ink); font-size:.78rem; }
.audio-rate-card small { margin-top:3px; color:var(--muted); font-size:.61rem; }
.audio-rate-card output { min-width:58px; padding:8px 9px; border-radius:10px; color:var(--brand); background:var(--brand-surface); font:800 .7rem "Outfit",sans-serif; text-align:center; }
.audio-rate-card input { width:100%; height:5px; accent-color:var(--brand); cursor:pointer; }
.audio-rate-card > div { display:flex; justify-content:space-between; color:var(--muted); font:500 .54rem "Outfit",sans-serif; }
.audio-voice-picker { padding:16px; border-radius:20px; }
.audio-voice-picker h2 { margin:0; color:var(--ink); font-size:.82rem; }
.audio-voice-picker header p { margin:4px 0 0; color:var(--muted); font-size:.62rem; line-height:1.7; }
.audio-select-field { display:grid; gap:7px; margin-top:16px; }
.audio-select-field > span { color:var(--muted); font-size:.61rem; font-weight:700; }
.audio-select-field > div { position:relative; }
.audio-select-field select { width:100%; height:48px; padding:0 40px 0 14px; border:1px solid var(--border); border-radius:13px; outline:none; color:var(--ink); background:var(--surface-soft,#faf9fc); font-size:.7rem; font-weight:700; text-align:left; appearance:none; }
.audio-select-field select:focus { border-color:color-mix(in srgb,var(--brand) 60%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 9%,transparent); }
.audio-select-field svg { position:absolute; top:50%; right:14px; width:14px; height:14px; color:var(--muted); pointer-events:none; transform:translateY(-50%) rotate(-90deg); }
.audio-preview-panel { display:grid; grid-template-columns:auto minmax(0,1fr) 36px; align-items:center; gap:11px; margin-top:10px; padding:9px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft,#faf9fc); }
.audio-preview-panel > button:first-child { min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 13px; border-radius:10px; color:#fff; background:var(--brand); font-size:.63rem; font-weight:800; }
.audio-preview-panel > button:first-child svg { width:13px; height:13px; }
.audio-preview-panel > div { min-width:0; display:grid; text-align:left; }
.audio-preview-panel strong { color:var(--ink); font:800 .68rem "Outfit",sans-serif; }
.audio-preview-panel small { overflow:hidden; color:var(--muted); font-size:.55rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.audio-preview-panel > button:last-child { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; color:var(--muted); background:var(--white); }
.audio-preview-panel > button:last-child svg { width:13px; height:13px; }
.audio-inline-status { min-height:34px; display:flex; align-items:center; margin:12px 0 10px; padding:7px 10px; border-radius:10px; color:var(--muted); background:var(--surface-soft,#f7f5fb); font-size:.6rem; line-height:1.6; }
.audio-inline-status.loading,.audio-inline-status.generating { color:var(--brand); background:var(--brand-surface); }
.audio-inline-status.playing { color:#00865f; background:var(--green-light,#e1fbf2); }
.audio-inline-status.warning,.audio-inline-status.error { color:#b45b00; background:#fff3df; }
.audio-save-voice { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; border-radius:12px; color:#fff; background:var(--brand); font-size:.66rem; font-weight:800; }
.audio-save-voice svg { width:14px; height:14px; }
.audio-save-voice:disabled { color:var(--muted); background:var(--theme-card-raised,#f3f0f7); cursor:default; }
.audio-privacy-note { display:flex; align-items:flex-start; gap:8px; margin:0 3px; color:var(--muted); font-size:.58rem; line-height:1.8; }
.audio-privacy-note svg { width:14px; height:14px; flex:none; margin-top:2px; color:var(--brand); }
:root.dark .audio-settings-page { background:var(--surface); }
:root.dark .audio-rate-card,:root.dark .audio-voice-picker { color:var(--ink); border-color:var(--border); background:var(--theme-card); box-shadow:var(--shadow); }
:root.dark .audio-select-field select,:root.dark .audio-preview-panel,:root.dark .audio-inline-status,:root.dark .audio-save-voice:disabled { color:var(--ink); border-color:var(--border); background:var(--theme-card-raised); }
:root.dark .audio-preview-panel > button:last-child { border-color:var(--border); background:var(--theme-card); }
:root.dark .audio-inline-status.playing { color:#58dfb7; background:rgba(0,196,140,.12); }
:root.dark .audio-inline-status.warning,:root.dark .audio-inline-status.error { color:#ffbd76; background:rgba(255,143,45,.12); }
@media (max-width:420px) {
  .audio-settings-content { gap:13px; padding:15px 12px calc(28px + env(safe-area-inset-bottom)); }
  .audio-preview-panel { grid-template-columns:auto minmax(0,1fr) 34px; gap:8px; }
  .audio-preview-panel > button:first-child { padding-inline:10px; }
}

:root.dark .badge-icon.orange {
  color: #ff9d61;
  background: rgba(255, 125, 46, 0.14);
}

:root.dark .rarity.rare {
  color: #7db8ff;
  background: rgba(59, 130, 246, 0.15);
}

:root.dark .rarity.epic {
  color: #bba8ff;
  background: rgba(139, 108, 240, 0.16);
}

:root.dark .rarity.legendary {
  color: #ffd166;
  background: rgba(255, 184, 0, 0.14);
}

:root.dark .rarity.common,
:root.dark .figma-badge.locked {
  color: var(--muted);
  background: var(--theme-soft);
}

:root.dark .badge-progress > i,
:root.dark .figma-badge.rarity-common {
  border-color: var(--border);
}

:root.dark .profile-stat-grid article > strong,
:root.dark .profile-stat-grid article > small,
:root.dark .figma-profile-menu > a > .figma-icon,
:root.dark .settings-group .setting-chevron {
  color: var(--theme-subtle);
}

:root.dark .chapter,
:root.dark .category {
  border-color: var(--border);
  background: var(--theme-card);
  box-shadow: var(--shadow);
}

:root.dark .options button.selected {
  color: #bba8ff;
  border-color: var(--brand-light);
  background: rgba(139, 108, 240, 0.14);
}

:root.dark .toast {
  color: var(--ink);
  border: 1px solid var(--border);
  background: var(--theme-card-raised);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}

:root.dark ::selection {
  color: #fff;
  background: var(--brand);
}

@media (prefers-reduced-motion: no-preference) {
  :root.dark body,
  :root.dark .app-screen,
  :root.dark .bottom-nav,
  :root.dark .panel,
  :root.dark .settings-group button {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
}