:root {
  --bg: #160022;
  --bg2: #160022;
  --surface: #210032;
  --icon: #d6deea;
  --streak: #ffb020;
  --surface2: #25003a;
  --surface3: #2b0142;
  --text: #f4f0ff;
  --muted: rgba(236, 231, 248, 0.68);

  --accent: #7b2cff;
  --accent2: #7b2cff;
  --accent3: #f5f2ff;
  --danger: #ef4444;
  --success: #b794f4;

  --stroke: rgba(255, 255, 255, 0.06);
  --shadow: 0 18px 36px rgba(8, 0, 14, 0.22);
  --shadow2: 0 10px 22px rgba(8, 0, 14, 0.16);
  --chip-bg: rgba(255, 255, 255, 0.05);
  --tag-bg: #7b2cff;
  --progress-bg: rgba(255, 255, 255, 0.08);
  --overlay-bg: rgba(22, 0, 34, 0.82);
  --bot-link: rgba(236, 231, 248, 0.58);
  --nav-icon-filter: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(310%) hue-rotate(182deg) brightness(95%) contrast(95%);
  --bg-glow-1: rgba(0, 0, 0, 0);
  --bg-glow-2: rgba(0, 0, 0, 0);
  --radius: 22px;
  --nav-h: 66px;
  --app-max: 640px;
  --app-pad: clamp(10px, 2.5vw, 16px);

  --font-body: "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --font-head: "Nunito", "Montserrat", ui-rounded, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}



* { box-sizing: border-box; }
html, body { height: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  min-height: 100dvh;
  overflow-x: hidden;
}
body::before,
body::after {
  display: none;
}
html, body {
  touch-action: manipulation;
  overscroll-behavior: none;
}
img, svg, video, canvas { max-width: 100%; height: auto; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 240ms cubic-bezier(.2,.8,.2,1), transform 240ms cubic-bezier(.2,.8,.2,1);
}
.splashInner { display: grid; justify-items: center; gap: 16px; }
.splashLogo {
  font-family: "Montserrat", var(--font-head);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: 0.6px;
  color: #f2f7fb;
  text-shadow: none;
}
.splashDots { display: inline-flex; gap: 8px; }
.splashDots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(123, 44, 255, 0.9);
  animation: splashDot 900ms ease-in-out infinite;
}
.splashDots span:nth-child(2) { animation-delay: 120ms; opacity: 0.9; }
.splashDots span:nth-child(3) { animation-delay: 240ms; opacity: 0.8; }
@keyframes splashDot {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(-8px); opacity: 1; }
}
body[data-splash="off"] .splash {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.app {
  min-height: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(18px + env(safe-area-inset-top)) var(--app-pad) calc(var(--app-pad) + env(safe-area-inset-bottom) + var(--nav-h));
  gap: 14px;
  max-width: var(--app-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
body[data-screen="lesson"] .app {
  padding-bottom: calc(var(--app-pad) + env(safe-area-inset-bottom));
}

/* Desktop/Mac pop-out: make inner app scrollable reliably */
@media (pointer: fine) {
  body { overflow: hidden; }
  .app {
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  backdrop-filter: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.logoDot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b2634 0%, #121924 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.brandText { min-width: 0; }
.brandName { font-weight: 900; letter-spacing: 0.2px; line-height: 1.05; }
.brandName { font-family: var(--font-head); }
.brandSub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topStats {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.topStats::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: none;
  background: var(--chip-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}
.chip.muted { color: var(--muted); font-weight: 700; }
.chip.good { border-color: rgba(167, 139, 250, 0.35); }
.chip.blue { border-color: rgba(167, 139, 250, 0.35); }
.botLink {
  font-family: "Montserrat", var(--font-head);
  font-size: 12px;
  color: var(--bot-link);
  text-decoration: none;
  margin-left: 6px;
  white-space: nowrap;
}

.main { display: grid; gap: 18px; }

.card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms cubic-bezier(.2,.8,.2,1);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow2); }
.card:active { transform: translateY(0); }
.card h1, .card h2 { margin: 0 0 10px 0; }
.muted { color: var(--muted); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--tag-bg);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.progress {
  height: 12px;
  background: var(--progress-bg);
  border: none;
  border-radius: 999px;
  overflow: hidden;
}
.progress > div {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 320ms cubic-bezier(.2,.8,.2,1);
}

.qTitle {
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 1.15;
  margin: 0 0 10px 0;
  font-weight: 900;
  letter-spacing: 0.1px;
}
.qText { font-size: 16px; line-height: 1.35; margin: 0; }
.lessonPromptRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.lessonRichWrap {
  flex: 1 1 auto;
  min-width: 0;
}
.lessonRichText {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.lessonRichTitle {
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.28;
  font-weight: 900;
  color: #ffffff;
  overflow-wrap: anywhere;
}
.lessonRichParagraph {
  display: grid;
  gap: 8px;
}
.lessonRichBullet {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  overflow-wrap: anywhere;
}
.lessonRichBullet b,
.lessonRichBullet strong,
.lessonRichTitle b,
.lessonRichTitle strong {
  color: #ffffff;
}
.lessonPromptTitle {
  font-size: 18px !important;
  flex: 1 1 auto;
  margin: 0 !important;
}
.lessonSpeakBtn {
  width: 42px;
  height: 42px;
  border-radius: 14px !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.lessonSpeakBtn svg {
  width: 22px;
  height: 22px;
  color: var(--text);
}
.lessonHintBtn {
  min-width: 120px;
}
.lessonHintCard {
  border-color: rgba(168, 85, 247, 0.28);
  background: rgba(168, 85, 247, 0.10);
}
.lessonHintTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 8px;
}

.material { margin-top: 8px; }
.materialP {
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.5;
}
.materialList {
  margin: 0 0 10px 0;
  padding-left: 18px;
}
.materialList li {
  margin: 6px 0;
  line-height: 1.45;
}

.obBlock { margin: 14px 0; }
.obTitle { font-weight: 900; margin-bottom: 8px; }
.pillRow { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}
.pill.active {
  background: rgba(167, 139, 250, 0.20);
  border-color: rgba(167, 139, 250, 0.45);
}
.obProgress { display: flex; gap: 6px; justify-content: center; margin: 6px 0 2px; }
.obDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(31, 36, 48, 0.18);
}
.obDot.active { background: rgba(167, 139, 250, 0.75); }

.completeWrap {
  position: relative;
  padding-top: 8px;
}
.completeCard {
  text-align: center;
}
.completeBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.16);
  border: 2px solid rgba(167, 139, 250, 0.28);
  font-weight: 900;
}
.completeTitle {
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
  font-weight: 900;
}
.completeSub {
  margin: 8px 0 0 0;
}
.completeStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.completeStat {
  background: var(--surface2);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
}
.completeStatLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.completeStatVal {
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
}
.completeNote {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}
.completeBonus {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(167, 139, 250, 0.14);
  border: 2px solid rgba(167, 139, 250, 0.35);
  font-weight: 900;
  text-align: center;
}

.confetti {
  position: absolute;
  inset: -10px 0 auto 0;
  height: 0;
  pointer-events: none;
}
.confetti span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 14px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.9);
  transform: translateX(-50%);
  opacity: 0;
  animation: confettiPop 900ms ease-out both;
  animation-delay: calc(var(--i) * 14ms);
}
.confetti span:nth-child(3n) { background: rgba(196, 181, 253, 0.95); }
.confetti span:nth-child(4n) { background: rgba(139, 92, 246, 0.9); }
.confetti span:nth-child(5n) { background: rgba(255, 77, 109, 0.75); }
@keyframes confettiPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(0) rotate(0deg) scale(0.8); }
  10% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translateX(calc(-50% + (var(--i) - 7) * 18px))
      translateY(220px)
      rotate(calc((var(--i) - 7) * 22deg))
      scale(1);
  }
}

.btnrow { display: grid; gap: 10px; margin-top: 12px; }
.btn {
  border: 1px solid var(--stroke);
  background: var(--surface2);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  pointer-events: none;
}
.btn.primary::after {
  animation: buttonShimmer 3.8s ease-in-out infinite;
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.primary {
  background: linear-gradient(180deg, #9d4dff 0%, #7b2cff 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: none;
}
.btn.primary:active { box-shadow: none; }
.btn.ghost {
  background: var(--surface2);
  border: none;
  box-shadow: none;
}
.btn.danger { background: rgba(255,77,109,0.16); }
@keyframes buttonShimmer {
  0%, 70%, 100% { transform: translateX(-120%); }
  82% { transform: translateX(120%); }
}

.option {
  text-align: left;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
}
.option.correct {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.10);
  animation: optionPop 220ms ease;
}
.option.wrong {
  border-color: rgba(255, 77, 109, 0.65);
  background: rgba(255, 77, 109, 0.10);
  animation: optionPop 220ms ease;
}
.option:active { transform: translateY(1px); }
.optionKey {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--text);
  border: none;
  background: rgba(37, 99, 235, 0.10);
}
.option.correct .optionKey {
  background: rgba(34, 197, 94, 0.20);
  color: #0f172a;
}
.option.wrong .optionKey {
  background: rgba(255, 77, 109, 0.18);
  color: #0f172a;
}
.optionText { font-size: 16px; font-weight: 850; line-height: 1.25; }
@keyframes optionPop {
  0% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.input {
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  outline: none;
  box-shadow: none;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}
.input::placeholder { color: rgba(236, 231, 248, 0.42); }
.input:focus { border-color: rgba(167, 139, 250, 0.34); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.10); }

.nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 8px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--stroke);
  box-shadow: 0 24px 44px rgba(2, 8, 18, 0.44);
  backdrop-filter: blur(20px);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--app-max), calc(100% - (var(--app-pad) * 2)));
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 60;
}

/* Hide bottom nav during lesson flow */
body[data-screen="lesson"] .nav { display: none; }
body[data-screen="complete"] .nav { display: none; }
body[data-screen="complete"] .app { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
body[data-overlay="1"] .nav { display: none; }
body[data-screen="onboarding"] .nav { display: none; }
body[data-call="1"] .nav { display: none; }
body .top { display: none; }
body[data-screen="onboarding"] .app { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
body[data-call="1"] .app {
  padding-top: calc(env(safe-area-inset-top) + 12px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
}

.navbtn {
  border-radius: 18px;
  padding: 11px 6px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  box-shadow: none;
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.navIcon { font-size: 22px; line-height: 1; }
.navIconImg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: var(--nav-icon-filter);
}
.navEmoji {
  font-size: 22px;
  line-height: 1;
}
.navLabel { display: none; }
.navbtn.active {
  color: var(--text);
  background: rgba(125, 220, 114, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(125, 220, 114, 0.10);
}
.navbtn.active::after {
  display: none;
}

.overlay {
  position: fixed;
  inset: 0;
  padding: var(--app-pad);
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: var(--overlay-bg);
  backdrop-filter: none;
  z-index: 50;
}
.overlay.show { display: flex; }
.sheet {
  width: min(520px, 100%);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.callsPage { display: grid; gap: 12px; }
.callsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.callsTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.callsTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 24px;
}
.callsEdit {
  border: none;
  background: transparent;
  color: #007aff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.callsSeg {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface2);
}
.callsSegBtn {
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
  font-size: 14px;
}
.callsSegBtn.active {
  background: var(--surface);
  color: var(--text);
}
.callsList { display: grid; gap: 8px; }
.callRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  cursor: pointer;
}
.callName { font-weight: 900; font-size: 18px; }
.callSub { color: var(--muted); font-size: 13px; }
.callRight { display: flex; align-items: center; gap: 8px; }
.callTime { color: var(--muted); font-size: 13px; font-weight: 800; }
.callInfo {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface2);
  color: var(--text);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}
.callsEmpty { color: var(--muted); font-size: 13px; text-align: center; padding: 16px 0; }
body[data-screen="calls"] .callsSeg {
  background: var(--surface2);
  border-color: var(--stroke);
}
body[data-screen="calls"] .callsSegBtn { color: var(--muted); }
body[data-screen="calls"] .callsSegBtn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15,23,42,0.10);
}
body[data-screen="calls"] .callsList {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  display: block;
  gap: 0;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow2);
}
body[data-screen="calls"] .callRow {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--stroke);
  border-radius: 0;
  padding: 14px 14px;
}
body[data-screen="calls"] .callRow:last-child { border-bottom: none; }
body[data-screen="calls"] .callRow.missed .callName { color: #ff4d6d; }
body[data-screen="calls"] .callRow.noMissedColor .callName { color: var(--text); }
body[data-screen="calls"] .callInfo {
  border-color: rgba(37, 99, 235, 0.24);
  color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
}
body[data-screen="calls"] .callTime { color: var(--muted); }

.callScreen {
  min-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.callCenter {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
}
.callVisualWrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.callVisual {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  border-radius: 28px;
  transform: scale(1);
  transition: transform 160ms ease;
}
.callVisual.recording {
  transform: scale(1.02);
}
.callActions {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 4;
}
.callReplayBtn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: rgba(123, 44, 255, 0.22);
  color: #fff;
  font-size: 24px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.callReplayBtn:disabled {
  opacity: 0.42;
  cursor: default;
}
.callMic {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background: rgba(123, 44, 255, 0.92);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(123, 44, 255, 0.3);
}
.callMic.active {
  background: #a855f7;
  box-shadow: 0 18px 34px rgba(168, 85, 247, 0.34);
}
.callMic:disabled {
  opacity: 0.62;
  cursor: default;
}
.callEndCircle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: none;
  background: #ff2d55;
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 22px 44px rgba(255, 45, 85, 0.4);
}
.callEndCircle:active,
.callMic:active {
  transform: translateY(1px) scale(0.985);
}
.lessonOverlay { align-items: center; }
.lessonSheet { display: grid; gap: 10px; }
.lessonSheetHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lessonClose { font-size: 18px; line-height: 1; }
.lessonSheetTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
}
.lessonSheetDesc { margin: 0; color: var(--muted); }
.lessonSheetMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lessonSheetBadge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  font-size: 11px;
  font-weight: 900;
}
.lessonSheetButtons {
  display: grid;
  gap: 8px;
}
.lessonSheetButtons .btn { width: 100%; }
.sheetTitle { font-weight: 950; font-size: 18px; margin: 0 0 8px 0; }
.sheetTitle { font-family: var(--font-head); }
.sheetText { margin: 0; color: var(--muted); line-height: 1.35; }
.sheet.good { box-shadow: var(--shadow), 0 0 0 2px rgba(167, 139, 250, 0.20) inset; }
.sheet.bad { box-shadow: var(--shadow), 0 0 0 2px rgba(255,77,109,0.18) inset; }
.sheet.neutral { box-shadow: var(--shadow), 0 0 0 2px rgba(167, 139, 250, 0.16) inset; }

.overlay.show .sheet {
  animation: sheetPop 180ms ease-out both;
}
@keyframes sheetPop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.rowBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seg {
  display: inline-flex;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  padding: 4px;
  border-radius: 999px;
}
.segBtn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 12px;
}
.segBtn.active {
  color: var(--text);
  background: rgba(167, 139, 250, 0.16);
}

.profileTop {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
}
.avatarRing {
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  position: relative;
  box-sizing: border-box;
}
.avatarRing > .avatar {
  position: relative;
  z-index: 1;
}
.avatarRing.plusGlow {
  border-radius: 999px;
  background: none;
  box-shadow: none;
}
.avatarRing.plusGlow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #a78bfa, #38bdf8, #7c3aed, #a78bfa);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: ringSpin 7s linear infinite;
  opacity: 0.95;
  z-index: 0;
}
.avatarRing.plusGlow::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  box-shadow:
    0 0 18px rgba(124, 58, 237, 0.55),
    0 0 38px rgba(56, 189, 248, 0.35);
  opacity: 0.7;
  animation: ringPulse 2.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
.avatarRing.plusGlow > .avatar { z-index: 1; }

@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 0.9; transform: scale(1.02); }
}
.avatar {
  width: 142px;
  height: 142px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: 0.3px;
  background: rgba(167, 139, 250, 0.2);
  border: none;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.35);
}
.avatar.hasImg { padding: 0; overflow: hidden; }
.avatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profileCard { position: relative; }
.profileCard.plusActive {
  background: var(--surface);
  border: none;
}
.profileCard.plusActive::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(59, 130, 246, 0.08);
  pointer-events: none;
  z-index: 0;
}
.profileCard.plusActive > * {
  position: relative;
  z-index: 1;
}
.profilePlus {
  position: absolute;
  top: 12px;
  right: 14px;
  font-weight: 900;
  font-size: 14px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 160ms ease;
  display: none;
}
.profileCard.plusActive .profilePlus {
  color: #c4b5fd;
  text-shadow: 0 0 14px rgba(124, 58, 237, 0.7);
}
.profilePlus.show { opacity: 1; }
.profileProgressWrap { margin-top: 12px; margin-bottom: 2px; }
.profileProgress {
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
}


.xpCard { display: grid; gap: 10px; }
.xpSummary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.xpSummaryItem {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
}
.xpSummaryLabel { font-size: 12px; color: var(--muted); font-weight: 800; }
.xpSummaryVal { font-size: 14px; font-weight: 900; margin-top: 2px; }
.xpChart { display: none; }
.xpGoal {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  display: grid;
  gap: 8px;
}
.xpGoalTop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.xpGoalLabel { font-size: 12px; color: var(--muted); font-weight: 800; }
.xpGoalValue { font-size: 14px; font-weight: 900; }
.xpGoalBar {
  margin-top: 4px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.xpGoalFill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.xpGoalHint { font-size: 12px; color: var(--muted); font-weight: 700; }
.xpLineWrap {
  position: relative;
  padding: 8px 10px 22px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.xpLineSvg {
  width: 100%;
  height: 170px;
}
.xpLine {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 10px rgba(139, 92, 246, 0.35));
}
.xpDot {
  fill: var(--accent3);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
}
.xpLineLabels {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 12px;
}
.xpLineLabel {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--muted);
}

.miniGamesCard { display: grid; gap: 10px; }
.miniGamesTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
}
.miniGameRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.miniGameInfo { display: grid; gap: 2px; min-width: 0; }
.miniGameName { font-weight: 900; font-size: 16px; }
.miniGameSub { color: var(--muted); font-size: 12px; }
.miniGameBtn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
}

.pronPhrase {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  font-weight: 900;
  font-family: var(--font-head);
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
}
.pronBtns {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.pronRecBtn {
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 15px;
}
.pronRecBtn.recording {
  background: #ff4d6d;
  border-color: rgba(255, 77, 109, 0.6);
  box-shadow: 0 6px 0 rgba(255, 77, 109, 0.35);
}
.pronStatus {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.pronResult {
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  display: grid;
  gap: 6px;
}
.pronScore {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 22px;
}
.pronColored {
  white-space: pre-wrap;
  font-weight: 900;
  font-family: var(--font-head);
  line-height: 1.35;
  font-size: 22px;
  text-transform: none;
  letter-spacing: 0;
}
.pronChar { padding: 1px 2px; border-radius: 6px; }
.pronChar.space { padding: 1px 2px; }
.pronChar.green { background: rgba(34, 197, 94, 0.25); color: #86efac; }
.pronChar.yellow { background: rgba(234, 179, 8, 0.2); color: #fde68a; }
.pronChar.red { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
.pronFeedback {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--text);
}
.pronTranscript {
  font-size: 12px;
  color: var(--muted);
}

.badgesCard { display: grid; gap: 10px; }
.badgesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.badgeItem {
  padding: 10px;
  border-radius: 22px;
  background: var(--surface2);
  border: none;
  display: grid;
  gap: 4px;
  text-align: left;
}
.badgeItem.off {
  opacity: 0.5;
}
.badgeIcon {
  font-size: 18px;
}
.badgeTitle {
  font-weight: 900;
  font-size: 12px;
}
.badgeDesc {
  font-size: 10px;
  color: var(--muted);
}
.profileMeta { min-width: 0; }
.profileEditBtn {
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 999px;
}
.profileEdit {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.profileName {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.profileNameText {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(100%, 16ch);
}
.profileSub {
  font-size: 12px;
  margin-top: 0;
  color: rgba(236, 231, 248, 0.72);
  font-weight: 800;
  line-height: 1.35;
}
.profileGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.miniStat {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 14px;
  padding: 10px;
}
.miniStatLabel { color: var(--muted); font-size: 10px; }
.miniStatVal { font-family: var(--font-head); font-weight: 900; font-size: 14px; margin-top: 3px; }

.lbList { display: grid; gap: 8px; }
.lbRow {
  display: grid;
  grid-template-columns: 48px 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 14px;
  background: var(--surface2);
  border: none;
}
.lbAvatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-family: var(--font-head);
  background: rgba(167, 139, 250, 0.16);
  border: none;
  color: var(--text);
  overflow: hidden;
}
.lbAvatar.hasImg { padding: 0; }
.lbAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lbRow.me { background: rgba(167,139,250,0.12); }
.lbRank { color: var(--muted); font-family: var(--font-head); font-weight: 900; font-size: 12px; }
.lbName {
  font-weight: 900;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lbNameText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbScore { color: var(--muted); font-weight: 900; font-size: 11px; }

.plusBadgeIcon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  display: inline-block;
  background: none;
  box-shadow: none;
  text-shadow: none;
  flex: 0 0 auto;
  vertical-align: middle;
}
.plusBadgeIcon.small {
  width: 12px;
  height: 12px;
  box-shadow: none;
}

.menuHero {
  width: 100%;
  margin-bottom: 12px;
}
.menuHeroImg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1643 / 957;
  object-fit: cover;
  border-radius: 14px;
  background: #0b1220;
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.22);
}

.plusCard .qTitle { margin-bottom: 8px; }
.plusList {
  margin: 0 0 8px 0;
  padding-left: 18px;
}
.plusList li { margin: 6px 0; line-height: 1.4; }
.plusPrice {
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
}
.plusHero {
  background: #101722;
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.34);
  position: relative;
  overflow: hidden;
  color: #f8fafc;
}
.plusHero::before {
  display: none;
}
.plusHero::after {
  display: none;
}
.plusHero > * { position: relative; z-index: 1; }
.plusBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plusHeroHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.plusPill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #e9e7ff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.plusHeroTitle {
  font-family: var(--font-head);
  font-size: 24px;
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.plusHeroSub { margin: 0 0 12px 0; color: rgba(248, 250, 252, 0.78); font-size: 14px; line-height: 1.5; }
.plusFocus {
  margin: 0 0 14px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(6px);
}
.plusHeroRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.plusPriceBox {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 4px;
}
.plusPriceValue { font-size: 32px; font-weight: 900; letter-spacing: 0.02em; }
.plusPriceHint { font-size: 12px; color: rgba(226, 232, 240, 0.8); }
.plusFeatureList {
  display: grid;
  gap: 8px;
}
.plusFeatureItem {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  font-size: 12px;
  font-weight: 800;
}
.plusHeroCta {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.plusCtaBtn {
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 12px;
  background: #2563eb;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.22);
}
.plusCtaNote {
  font-size: 12px;
  color: rgba(248, 250, 252, 0.7);
  text-align: center;
}
.plusHeroFoot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: rgba(248, 250, 252, 0.7);
}
.plusActive {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.18);
  border: 2px solid rgba(16, 185, 129, 0.45);
  font-weight: 900;
  text-align: center;
}

.spicyHero {
  background: #15100d;
  border: 1px solid rgba(255, 170, 90, 0.25);
  box-shadow: 0 22px 46px rgba(12, 6, 2, 0.5);
  position: relative;
  overflow: hidden;
  color: #fff4ec;
}
.spicyHero::before {
  display: none;
}
.spicyHero::after {
  display: none;
}
.spicyHero > * { position: relative; z-index: 1; }
.spicyHeroTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.spicyBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 205, 170, 0.25);
  color: #ffe6d3;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spicyPriceValue {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffd7b3;
}
.spicyHeroTitle {
  font-family: var(--font-head);
  font-size: 24px;
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.spicyHeroSub {
  margin: 0 0 12px 0;
  color: rgba(255, 239, 224, 0.78);
  font-size: 14px;
  line-height: 1.5;
}
.spicyStructure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px 0;
}
.spicyChip {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 239, 224, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 205, 170, 0.18);
}
.spicyCta {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.spicyCtaBtn {
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 999px;
  background: #ea580c;
  border: none;
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(239, 68, 68, 0.3);
}
.spicyOpenBtn {
  padding: 14px 16px;
  font-size: 15px;
  border-radius: 999px;
  background: #fb923c;
  border: none;
  color: #3a1d10;
  font-weight: 900;
}
.spicyCtaNote {
  font-size: 12px;
  color: rgba(255, 239, 224, 0.7);
  text-align: center;
}
.spicyActive {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(251, 146, 60, 0.2);
  border: 2px solid rgba(251, 146, 60, 0.5);
  font-weight: 900;
  text-align: center;
}
.spicyHeroFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 239, 224, 0.75);
}
.spicyCount {
  font-weight: 800;
  letter-spacing: 0.02em;
}
.spicyLessonGrid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.spicyLessonCard {
  text-align: left;
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 205, 170, 0.16);
  color: #fff6ef;
  display: grid;
  gap: 8px;
  cursor: pointer;
}
.spicyLessonCard.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.3);
}
.spicyLessonTitle {
  font-weight: 900;
  letter-spacing: 0.02em;
}
.spicyLessonMeta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 239, 224, 0.7);
}
.spicyProgress {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.spicyProgress div {
  height: 100%;
  background: #f97316;
}
.spicyShop .spicyHeroTitle { font-size: 26px; line-height: 1.15; }
.spicyShop .spicyPriceValue { font-size: 30px; }
.spicyShopCta { margin-top: 16px; }
.spicyShop {
  background: #58aaf7;
  border: none;
  box-shadow: none;
  color: #ffffff;
  padding: 22px;
  min-height: 310px;
}
.spicyShop::before,
.spicyShop::after {
  display: none;
}
.spicyShop .spicyBadge {
  background: rgba(255, 255, 255, 0.22);
  border: none;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 13px;
}
.spicyShop .spicyPriceValue {
  color: #ffffff;
}
.spicyShop .spicyHeroSub {
  color: rgba(255, 255, 255, 0.94);
  font-size: 16px;
  line-height: 1.55;
}
.spicyShop .spicyCtaBtn,
.spicyShop .spicyOpenBtn {
  background: #1f4f78;
  border: none;
  box-shadow: none;
  color: #ffffff;
  padding: 16px 18px;
  font-size: 17px;
}
@media (max-width: 520px) {
  .plusHeroRow { grid-template-columns: 1fr; }
}
.plusPlans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.planCard {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border-radius: 14px;
  display: grid;
  gap: 8px;
}
.planYear {
  background: #101d1b;
  border-color: rgba(34, 197, 94, 0.45);
}
.planBadge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9effc8;
  background: rgba(16, 185, 129, 0.16);
  border: 2px solid rgba(16, 185, 129, 0.5);
}
.planHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.planTitle {
  font-weight: 900;
  font-size: 14px;
}
.planPrice {
  font-weight: 900;
  font-size: 20px;
  white-space: nowrap;
}
.planSub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.planBtn {
  padding: 12px 14px;
  border-radius: 999px;
  font-size: 14px;
}
.planActive {
  font-weight: 800;
  color: var(--muted);
}
.plusPriceNote { color: var(--muted); font-size: 12px; }
.plusSocial { margin-top: 8px; color: var(--muted); font-size: 12px; }
.plusHighlight {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(167, 139, 250, 0.12);
  border: 2px solid rgba(167, 139, 250, 0.30);
  font-weight: 800;
}
.plusGuarantee .qText { margin: 0; }
.plusGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.plusGridItem {
  padding: 10px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  font-weight: 800;
  font-size: 12px;
}
.compareCard .tag { margin-bottom: 6px; }
.compareHead {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.compareRow {
  display: grid;
  grid-template-columns: 1fr 64px 72px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
}
.compareRow:last-child { border-bottom: none; }
.compareLabel { font-weight: 800; font-size: 13px; }
.compareCell {
  text-align: center;
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
}
.compareCell.ok {
  color: #0f172a;
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid rgba(34, 197, 94, 0.45);
  border-radius: 999px;
  padding: 4px 8px;
}
.compareCell.bad {
  color: #991b1b;
  background: rgba(255, 77, 109, 0.12);
  border: 2px solid rgba(255, 77, 109, 0.35);
  border-radius: 999px;
  padding: 4px 8px;
}

.helloCard { display: grid; gap: 6px; }
.helloRow { display: flex; gap: 10px; align-items: center; }
.helloAvatar {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-family: var(--font-head);
  color: var(--accent2);
  background: rgba(167, 139, 250, 0.18);
  border: 2px solid rgba(167, 139, 250, 0.35);
  overflow: hidden;
}
.helloAvatarImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.helloText { display: grid; gap: 2px; min-width: 0; }
.helloTitle {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
}
.helloFact { color: var(--muted); font-size: 12px; }
.helloProg { display: grid; gap: 6px; margin-top: 6px; }
.helloProgRow { display: flex; gap: 8px; align-items: center; }
.helloProgBar {
  height: 10px;
  background: rgba(31, 36, 48, 0.10);
  border-radius: 999px;
  overflow: hidden;
  flex: 1;
}
.helloProgBar > div {
  height: 100%;
  background: var(--accent2);
  width: 0%;
  transition: width 320ms cubic-bezier(.2,.8,.2,1);
}
.helloWeekChip {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.18);
  border: 2px solid rgba(167, 139, 250, 0.35);
  font-size: 10px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}
.helloProgText { color: var(--muted); font-size: 11px; font-weight: 800; }

.heroCard { padding: 16px; }
.heroTitle { font-size: 22px; line-height: 1.1; margin: 0 0 8px 0; }
.heroBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.miniBadge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  font-size: 11px;
  font-weight: 900;
}
.heroBtn { padding: 12px 16px; font-size: 15px; }

.pathHeader {
  display: grid;
  gap: 12px;
  margin-bottom: 0;
  padding: 4px 0 2px;
}
.pathAppTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
}
.pathTopRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pathLangWrap { position: relative; }
.pathLangPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow2);
  animation: floatIn 420ms cubic-bezier(.16,1,.3,1) both;
}
.pathLangBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}
.pathLangBtn:active { transform: translateY(1px); }
.pathLangFlag {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 6px 14px rgba(8, 0, 14, 0.18);
}
.pathLangName { font-weight: 900; font-size: 15px; display: block; }
.pathLangCaret { font-size: 14px; color: var(--muted); }

.pathLangMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 40;
}
.pathLangMenu.show { display: grid; gap: 4px; }
.pathLangOption {
  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-weight: 900;
  cursor: pointer;
  color: var(--text);
}
.pathLangOption:hover { background: var(--surface2); }
.pathLangOption.active {
  background: rgba(125, 220, 114, 0.12);
  color: #eaf8e7;
}
.pathTopRight {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pathLevelRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 4px;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  box-shadow: var(--shadow2);
}
.pathLevelBtn {
  min-height: 36px;
  padding: 8px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pathLevelBtn.active {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.28), rgba(139, 92, 246, 0.22));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.20);
}
.pathStreak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 17px;
}
.pathStreakIcon { width: 20px; height: 20px; display: block; }
.pathStreakIcon { filter: brightness(0) saturate(100%) invert(55%) sepia(74%) saturate(1200%) hue-rotate(3deg) brightness(102%) contrast(101%); }
.pathAvatarBtn {
  border: none;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pathTopAvatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.6);
  animation: floatIn 520ms cubic-bezier(.16,1,.3,1) both;
}
.pathBell.iconBtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.pathBell svg { width: 22px; height: 22px; color: var(--text); }
.pathBell {
  cursor: default;
}
.pathBell:active {
  transform: none !important;
}
.pathProgressWrap { position: relative; }
.pathProgress { height: 20px; }
.pathProgressText {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.pathWarmupHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pathWarmupPct,
.pathWarmupInner,
.pathCurrentLesson,
.pathMeta,
.practiceGameCard,
.lbRow,
.badgeItem,
.miniStat {
  animation: floatIn 480ms cubic-bezier(.16,1,.3,1) both;
}
.pathWarmupDone {
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
}
.pathWarmupPct {
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(167, 139, 250, 0.18);
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
}
.pathWarmupCard {
  margin-top: 2px;
}
.pathWarmupProgress {
  margin-top: 14px;
  margin-bottom: 16px;
}
.pathWarmupInner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}
.pathWarmupNum {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(167, 139, 250, 0.22);
  font-weight: 900;
  color: #ffffff;
  flex: 0 0 auto;
}
.pathWarmupBody {
  display: grid;
  gap: 4px;
}
.pathWarmupTitle {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
}
.pathWarmupSub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.pathWarmupQuestion {
  margin-top: 14px;
}
.pathWarmupBtn {
  border-radius: 14px;
  background: linear-gradient(180deg, #a855f7 0%, #7b2cff 100%);
  border: none;
  color: #ffffff;
}
.pathLessonsCard {
  padding-top: 16px;
}
.pathBlockTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 23px;
  line-height: 1.15;
  margin-bottom: 14px;
}
.pathCurrentLesson {
  width: 100%;
  text-align: left;
  padding: 20px 18px;
  margin-bottom: 14px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.24) 0%, rgba(123, 44, 255, 0.18) 100%);
  color: var(--text);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 14px 28px rgba(63, 12, 121, 0.22);
}
.pathCurrentLesson:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(63, 12, 121, 0.28);
}
.pathCurrentTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pathCurrentTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
}
.pathCurrentCta {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
}
.pathCurrentArrow {
  font-size: 22px;
  color: rgba(255,255,255,0.82);
}
.pathCurrentSub {
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.pathHero { padding: 16px; }
.pathContinueRow { margin-bottom: 8px; }
.pathContinueBtn { padding: 8px 14px; font-size: 13px; }
.pathLessonTitle { font-size: 20px; line-height: 1.1; margin: 0 0 8px 0; }
.pathBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pathBadge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(46, 8, 80, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 900;
}

.owlHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.owlTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
}
.owlChatWindow {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  min-height: 220px;
  max-height: 320px;
  overflow: auto;
}
.owlEmpty {
  color: var(--muted);
  font-size: 12px;
}
.owlBubble {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--stroke);
  font-weight: 700;
  line-height: 1.35;
}
.owlBubble.user {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.35);
  align-self: flex-end;
}
.owlBubble.bot {
  align-self: flex-start;
}
.owlStatus {
  min-height: 18px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.owlNotice {
  margin: 8px 0 6px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: rgba(248, 250, 252, 0.9);
  font-size: 12px;
  font-weight: 700;
}
.owlComposer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.owlMic, .owlStop {
  width: 44px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
}
.owlInputText { min-width: 0; }

.view {
  display: grid;
  gap: 18px;
  animation: viewIn 340ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  .overlay.show .sheet { animation: none; }
}

@media (max-width: 420px) {
  .card { padding: 16px; }
  .qTitle { font-size: 21px; }
  .heroTitle { font-size: 23px; }
  .btn { padding: 12px 14px; font-size: 15px; }
  .heroBtn { padding: 13px 16px; font-size: 16px; }
  .chip { padding: 8px 12px; font-size: 13px; }
  .helloAvatar { width: 44px; height: 44px; }
  .pathTitle { font-size: 15px; }
  .pathSub { font-size: 12px; }
}

@media (min-width: 720px) {
  :root { --app-max: 680px; }
  body { font-size: 16px; }
}

.btn, .option, .pathDot, .navbtn {
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms cubic-bezier(.2,.8,.2,1), color 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms cubic-bezier(.2,.8,.2,1);
}
.btn:active, .option:active, .navbtn:active {
  transform: translateY(1px);
}

.path {
  display: grid;
  gap: 14px;
}
.clusterCard {
  padding: 16px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(25,35,47,0.98), rgba(18,26,37,0.94)),
    radial-gradient(220px 120px at 0% 0%, rgba(114, 198, 255, 0.10), transparent 62%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  margin-bottom: 4px;
  animation: floatIn 480ms cubic-bezier(.16,1,.3,1) both;
}
.clusterTitle {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
  margin: 0 0 5px 0;
}
.clusterDesc { margin: 0 0 12px 0; color: var(--muted); font-size: 14px; }
.clusterProgress {
  position: relative;
  margin: 0 0 12px 0;
}
.topicCard {
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(114, 198, 255, 0.16), transparent 60%),
    linear-gradient(135deg, rgba(24,34,46,0.98), rgba(18,25,35,0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 14px 0;
}
.topicTitle { font-weight: 900; font-size: 16px; }
.topicTime { font-size: 13px; opacity: 0.9; margin-top: 3px; }
.topicBtn {
  background: linear-gradient(180deg, #b794f4 0%, #8b5cf6 100%);
  color: #f8f5ff;
  border: none;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.22);
}
.todayPlanCard,
.weeklyQuestCard {
  overflow: hidden;
}

.comebackCard {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(196, 181, 253, 0.16), transparent 60%),
    radial-gradient(240px 180px at 0% 0%, rgba(139, 92, 246, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(31,25,55,0.99), rgba(21,17,38,0.98));
  animation: floatIn 420ms cubic-bezier(.16,1,.3,1) both;
}
.comebackGlow {
  position: absolute;
  inset: auto -20px -30px auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  filter: blur(18px);
  pointer-events: none;
}
.comebackTop {
  display: grid;
  gap: 8px;
}
.comebackTitle {
  margin: 8px 0 0 0;
}
.comebackText {
  margin: 0;
}
.comebackMeta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: none;
  font-size: 12px;
  font-weight: 900;
}
.comebackList {
  margin: 12px 0 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}
.comebackList li {
  line-height: 1.4;
}

.todayPlanTop {
  align-items: flex-start;
  margin-bottom: 10px;
}

.todayPlanTitle,
.weeklyQuestTitle {
  margin-top: 8px;
  margin-bottom: 0;
}

.todayPlanBadge {
  min-width: 58px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.26), rgba(196, 181, 253, 0.18));
  border: none;
  font-weight: 900;
  font-family: var(--font-head);
}

.todayPlanProgress,
.questProgress {
  height: 10px;
}

.todayPlanGrid,
.questGrid {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.todayTask,
.questCard {
  padding: 15px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(32,26,58,0.98), rgba(22,18,41,0.96)),
    radial-gradient(220px 120px at 0% 0%, rgba(196, 181, 253, 0.12), transparent 65%);
  box-shadow: 0 16px 34px rgba(10, 6, 24, 0.28);
  animation: floatIn 500ms cubic-bezier(.16,1,.3,1) both;
}
.todayPlanCard .todayTask {
  background:
    linear-gradient(180deg, rgba(92, 28, 176, 0.34), rgba(52, 12, 108, 0.24)),
    radial-gradient(220px 120px at 0% 0%, rgba(196, 181, 253, 0.16), transparent 65%);
  box-shadow: 0 18px 36px rgba(64, 18, 125, 0.28);
}

.todayTask.done,
.questCard.done {
  background:
    linear-gradient(180deg, rgba(39,31,69,0.99), rgba(26,21,47,0.96)),
    radial-gradient(200px 120px at 0% 0%, rgba(167, 139, 250, 0.16), transparent 65%);
}

.todayTaskHead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.todayTaskKick {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(183, 148, 244, 0.24), rgba(139, 92, 246, 0.16));
  border: none;
  font-weight: 900;
  font-family: var(--font-head);
}
.todayPlanCard .todayTaskKick {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.todayTaskTitle,
.questTitle {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}
.todayPlanCard .todayTaskTitle {
  font-size: 17px;
}

.todayTaskSub,
.questMeta,
.questHint {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.todayTaskText {
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.todayPlanCard .todayTaskText {
  font-size: 17px;
  line-height: 1.5;
  color: #ffffff;
}

.todayTaskButtons {
  display: grid;
  gap: 8px;
}

.todayTaskDone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.18);
  color: #eadfff;
  font-size: 13px;
  font-weight: 800;
}

.todayTaskInput,
.todayReveal {
  margin-bottom: 10px;
}

.todayReveal {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  font-weight: 800;
}

.card {
  border: none;
  background:
    linear-gradient(180deg, rgba(28, 22, 49, 0.96), rgba(20, 16, 36, 0.94)),
    radial-gradient(260px 160px at 0% 0%, rgba(167, 139, 250, 0.10), transparent 68%);
}

.input {
  border: none;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.pathLevelRow,
.topicCard,
.clusterCard,
.pathBadge,
.comebackMeta,
.miniGameRow,
.pronPhrase,
.pronResult {
  border: none;
}

.topicCard,
.clusterCard,
.pathLevelRow {
  background:
    linear-gradient(180deg, rgba(31, 25, 55, 0.94), rgba(21, 17, 38, 0.92));
  box-shadow: 0 14px 30px rgba(10, 6, 24, 0.22);
}

.pathTopAvatar {
  border: none;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.20);
}

.pathTopRow {
  align-items: center !important;
  gap: 12px !important;
}

.pathLangWrap {
  min-width: 0;
  flex: 1 1 auto;
}

.pathLangPill {
  width: 100%;
  max-width: 236px;
}

.pathLangBtn {
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
}

.pathLangName {
  font-size: 14px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pathTopRight {
  flex: 0 0 auto;
  gap: 12px !important;
}

.pathStreak {
  font-size: 15px !important;
}

.pathLevelRow {
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.pathLevelBtn {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.pathWarmupDone {
  font-size: 22px !important;
}

.pathWarmupQuestion {
  max-width: 28ch;
  line-height: 1.48 !important;
  overflow-wrap: anywhere;
}

.pathBlockTitle {
  font-size: 20px !important;
  line-height: 1.24 !important;
  max-width: 15ch;
  overflow-wrap: anywhere;
}

.pathCurrentLesson {
  padding: 16px !important;
}

.pathCurrentTop {
  align-items: flex-start !important;
}

.pathCurrentTitle {
  font-size: 15px !important;
  line-height: 1.35 !important;
  max-width: 18ch;
  overflow-wrap: anywhere;
}

.pathCurrentCta {
  font-size: 26px !important;
  line-height: 1.05 !important;
}

.pathCurrentSub {
  font-size: 11px !important;
  line-height: 1.48 !important;
  max-width: 30ch;
  overflow-wrap: anywhere;
}

.pathBell.iconBtn,
.iconBtn {
  border: none;
  background: rgba(255,255,255,0.04);
}

.tabbar,
.bottomNav,
.navBar {
  border: none;
  background:
    linear-gradient(180deg, rgba(24, 19, 43, 0.96), rgba(17, 13, 31, 0.98));
  box-shadow: 0 -16px 34px rgba(10, 6, 24, 0.22);
}

.nav {
  padding: 7px !important;
  border-radius: 24px !important;
}

.navbtn {
  padding: 10px 4px 9px !important;
  min-height: 48px;
}

.practiceHub {
  display: grid;
  gap: 14px;
}

.practiceHubTop {
  align-items: flex-start;
}

.practiceHubLead {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  max-width: 34ch;
}

.practiceHero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(196, 181, 253, 0.18), transparent 60%),
    radial-gradient(220px 180px at 0% 100%, rgba(139, 92, 246, 0.16), transparent 64%),
    linear-gradient(180deg, rgba(36, 29, 63, 0.98), rgba(22, 18, 41, 0.96));
  box-shadow: 0 18px 38px rgba(10, 6, 24, 0.28);
  cursor: pointer;
  animation: floatIn 420ms cubic-bezier(.16,1,.3,1) both;
}

.practiceHeroGlow {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.22);
  filter: blur(24px);
  pointer-events: none;
}

.practiceHeroText {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.practiceHeroKick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #f3ecff;
  font-size: 12px;
  font-weight: 900;
}

.practiceHeroTitle {
  font-family: var(--font-head);
  font-size: 23px;
  line-height: 1.05;
  font-weight: 900;
}

.practiceHeroSub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  max-width: 32ch;
}

.practiceHeroBtn {
  width: fit-content;
  position: relative;
  z-index: 1;
}

.practiceQuickList {
  background: transparent;
  display: grid;
  gap: 10px;
  border: none;
  box-shadow: none;
}

.practiceQuickRow {
  border: none;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(30, 24, 53, 0.96), rgba(21, 17, 38, 0.94));
}

.practiceGames {
  display: grid;
  gap: 12px;
}

.practiceGamesTitle {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
}

.practiceGameGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.callGamesGrid {
  display: grid;
  gap: 14px;
}
.callGameCard {
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
}
.callGameCard .practiceGameIcon {
  width: 42px;
  height: 42px;
  margin: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.callGameCard .practiceGameName,
.callGameCard .practiceGameSub {
  grid-column: 2;
}
.callGameCard .practiceGameName {
  grid-row: 1;
  margin: 0;
}
.callGameCard .practiceGameSub {
  grid-row: 2;
  margin: 0;
}
.practiceCallCard {
  margin-top: 12px;
  background: linear-gradient(180deg, #a855f7 0%, #7b2cff 100%);
  box-shadow: 0 18px 34px rgba(123, 44, 255, 0.32);
}
.practiceCallCard .practiceGameIcon {
  background: rgba(63, 15, 116, 0.26);
}
.practiceCallCard .practiceGameSub {
  color: rgba(255, 255, 255, 0.92);
}

.practiceGameCard {
  text-align: left;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: none;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(31, 25, 55, 0.98), rgba(21, 17, 38, 0.96)),
    radial-gradient(220px 120px at 0% 0%, rgba(196, 181, 253, 0.12), transparent 65%);
  color: var(--text);
  box-shadow: 0 14px 30px rgba(10, 6, 24, 0.24);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1), background 180ms cubic-bezier(.2,.8,.2,1);
}

.practiceGameCard:active {
  transform: translateY(1px) scale(0.99);
}

.practiceGameCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(10, 6, 24, 0.28);
}

.practiceGameIcon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: linear-gradient(180deg, rgba(183, 148, 244, 0.28), rgba(139, 92, 246, 0.18));
}

.practiceGameName {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.2;
}

.practiceGameSub {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.owlTelegramCard {
  display: grid;
  gap: 16px;
  min-height: calc(100dvh - 180px);
}

.owlTelegramHead {
  display: flex;
  justify-content: center;
  text-align: center;
}

.owlHeadMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: center;
}

.owlHeadName {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.owlHeadSub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  max-width: 24ch;
  line-height: 1.4;
}

.owlTelegramWindow {
  min-height: 360px;
  max-height: calc(100dvh - 330px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 10px 6px 10px 6px;
}

.owlRow {
  display: flex;
  width: 100%;
}

.owlRow.bot {
  justify-content: flex-start;
  padding-inline: 2px;
}

.owlRow.user {
  justify-content: flex-end;
  padding-inline: 2px;
}

.owlBubble {
  max-width: min(78%, 290px);
  padding: 12px 15px;
  border-radius: 22px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  border: none;
  box-shadow: 0 8px 20px rgba(8, 0, 14, 0.12);
}

.owlBubble.bot {
  border-top-left-radius: 10px;
  background: #d9c4ff;
  color: #2a1146;
}

.owlBubble.user {
  border-top-right-radius: 10px;
  background: linear-gradient(180deg, rgba(71, 16, 116, 0.98), rgba(53, 8, 93, 0.98));
  color: #ffffff;
}

.owlTyping {
  justify-self: start;
  padding: 9px 12px;
  border-radius: 18px;
  background: #d9c4ff;
  color: #5d3d87;
  font-size: 12px;
  font-weight: 800;
}

.owlTelegramComposer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 4px;
}

.owlTelegramInput {
  min-height: 52px;
  max-height: 140px;
  resize: none;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  color: var(--text) !important;
}
.owlTelegramInput::placeholder {
  color: rgba(236, 231, 248, 0.42);
}
.owlTelegramInput:focus {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.16) !important;
}

.owlSendBtn {
  min-width: 104px;
  height: 52px;
  border-radius: 18px !important;
}

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

.pathLevelRow {
  margin-top: 8px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.pathLevelBtn {
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(236, 231, 248, 0.72);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  overflow-wrap: anywhere;
  line-height: 1.15;
  opacity: 0.8;
  transition: color 140ms ease, font-size 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.pathLevelBtn.active {
  color: #ffffff;
  font-size: 19px;
  opacity: 1;
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

body,
.splash,
.tabbar,
.bottomNav,
.navBar {
  background: var(--bg) !important;
}

.card,
.clusterCard,
.topicCard,
.todayTask,
.practiceHero,
.practiceQuickRow,
.practiceGameCard,
.callRow,
.pathMeta,
.owlChatWindow,
.owlBubble,
.pronPhrase,
.pronResult,
.input,
.iconBtn,
.pathBadge,
.chip,
.btn.ghost {
  background: var(--surface) !important;
  box-shadow: none !important;
  border: none !important;
}

.practiceHero,
.practiceGameCard,
.todayTask,
.clusterCard,
.topicCard {
  background: var(--surface2) !important;
}

.btn.primary,
.tag {
  background: linear-gradient(180deg, #9d4dff 0%, #7b2cff 100%) !important;
  color: #fff !important;
}

.topicBtn,
.todayPlanBadge,
.practiceGameIcon,
.todayTaskKick {
  background: var(--surface3) !important;
  box-shadow: none !important;
  border: none !important;
}

.progress {
  background: rgba(255,255,255,0.08) !important;
}

.progress > div {
  background: #ffffff !important;
}

.pathDot {
  background: transparent !important;
  border: 4px solid #ffffff !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

.pathDot.current,
.pathDot.done:not(.photo),
.pathDot.photo.done {
  background: transparent !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

.pathLine,
.pathLine.done {
  background: rgba(255,255,255,0.28) !important;
  box-shadow: none !important;
}

.pathTitle,
.callsTitle,
.practiceGamesTitle,
.practiceHeroTitle,
.todayTaskTitle,
.practiceGameName,
.callName {
  color: #ffffff !important;
}

.practiceHubLead,
.practiceHeroSub,
.practiceGameSub,
.callSub,
.pathSub,
.muted {
  color: rgba(236, 231, 248, 0.72) !important;
}

:root {
  --radius: 28px;
}

.card,
.clusterCard,
.topicCard,
.todayTask,
.practiceHero,
.practiceQuickRow,
.practiceGameCard,
.callRow,
.pathMeta,
.owlChatWindow,
.owlBubble,
.pronPhrase,
.pronResult,
.input {
  border-radius: 28px !important;
}

.btn,
.btn.primary,
.btn.ghost,
.chip,
.tag,
.topicBtn,
.todayPlanBadge,
.practiceHeroKick,
.practiceHeroBtn,
.practiceGameIcon,
.todayTaskDone,
.todayTaskKick,
.iconBtn,
.pathBadge {
  border-radius: 999px !important;
}

.pathDot,
.pathDot.boss {
  border-radius: 999px !important;
}

.pathTopAvatar,
.avatarRing,
.avatar,
.profileAvatar {
  border-radius: 999px !important;
}

.pathTopAvatar {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

/* Final locked chat styles for Orlenok screen */
.owlTelegramCard {
  background: #25003a !important;
  padding: 18px !important;
  gap: 16px !important;
}

.owlTelegramHead {
  justify-content: center !important;
  text-align: center !important;
}

.owlHeadMeta {
  justify-items: center !important;
}

.owlHeadName {
  font-size: 18px !important;
  color: #ffffff !important;
}

.owlHeadSub {
  font-size: 12px !important;
  color: rgba(236, 231, 248, 0.78) !important;
  max-width: 26ch !important;
}

.owlTelegramWindow {
  min-height: 360px !important;
  max-height: calc(100dvh - 330px) !important;
  padding: 14px 8px 10px 8px !important;
  gap: 12px !important;
  background: transparent !important;
}

.owlRow {
  display: flex !important;
  width: 100% !important;
}

.owlRow.bot {
  justify-content: flex-start !important;
}

.owlRow.user {
  justify-content: flex-end !important;
}

.owlTelegramWindow .owlBubble {
  display: inline-block !important;
  max-width: min(80%, 292px) !important;
  padding: 12px 15px !important;
  border-radius: 22px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(8, 0, 14, 0.12) !important;
  border: none !important;
}

.owlTelegramWindow .owlBubble.bot {
  background: #d9c4ff !important;
  color: #2f1450 !important;
  border-top-left-radius: 10px !important;
}

.owlTelegramWindow .owlBubble.user {
  background: linear-gradient(180deg, #5f179d 0%, #471074 100%) !important;
  color: #ffffff !important;
  border-top-right-radius: 10px !important;
}

.owlTyping {
  background: #d9c4ff !important;
  color: #5d3d87 !important;
  border-radius: 18px !important;
}

.owlTelegramComposer {
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: auto !important;
}

.owlTelegramInput {
  min-height: 52px !important;
  max-height: 120px !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

.owlTelegramInput::placeholder {
  color: rgba(236, 231, 248, 0.46) !important;
}

.owlSendBtn {
  min-width: 112px !important;
  height: 52px !important;
  border-radius: 18px !important;
  align-self: center !important;
}

.practiceGameGrid {
  gap: 14px;
}

.app {
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom) + var(--nav-h)) !important;
  gap: 16px !important;
}

.main {
  gap: 18px !important;
}

.card,
.clusterCard,
.topicCard,
.practiceHero,
.practiceGameCard,
.todayTask,
.pathMeta {
  padding: 18px !important;
}

.qTitle,
.callsTitle,
.practiceHeroTitle,
.practiceGamesTitle {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.pathTitle,
.todayTaskTitle,
.practiceGameName,
.callName,
.topicTitle {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.pathSub,
.practiceGameSub,
.practiceHeroSub,
.callSub,
.muted,
.qText {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.pathList {
  gap: 10px !important;
}

.pathItem {
  grid-template-columns: 58px 1fr !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  align-items: center !important;
}

.pathRail {
  width: 58px !important;
}

.pathDot {
  width: 52px !important;
  height: 52px !important;
  border-width: 3px !important;
}

.pathDot.boss {
  width: 58px !important;
  height: 58px !important;
}

.pathLine {
  top: 52px !important;
  bottom: -10px !important;
}

.pathMeta {
  padding: 14px 14px !important;
}

.pathTitle {
  font-size: 15px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.pathSub {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

body {
  font-size: 16px !important;
}

.qTitle,
.callsTitle,
.practiceHeroTitle {
  font-size: 22px !important;
}

.qText,
.practiceHubLead,
.practiceHeroSub,
.practiceGameSub,
.callSub,
.muted {
  font-size: 15px !important;
}

.callName,
.practiceGameName,
.todayTaskTitle,
.pathTitle {
  font-size: 17px !important;
}

.pathLevelBtn {
  font-size: 15px !important;
}

.pathLevelBtn.active {
  font-size: 20px !important;
}

.chip,
.tag,
.callTime {
  font-size: 12px !important;
}

.pathLangFlag {
  border-radius: 999px !important;
  overflow: hidden !important;
}

.questCard {
  display: grid;
  gap: 10px;
}

.questState {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-family: var(--font-head);
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 640px) {
  .todayPlanGrid,
  .questGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pathList { display: grid; gap: 6px; }
.pathItem {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.pathRail {
  position: relative;
  width: 46px;
  display: grid;
  justify-items: center;
}
.pathLine {
  position: absolute;
  top: 46px;
  bottom: -10px;
  width: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}
.pathLine.done {
  background: rgba(20, 184, 166, 0.68);
  box-shadow: none;
}
.pathDot {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #f4faeb 100%);
  color: var(--text);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-family: var(--font-head);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}
.pathDot.photo {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.pathDot.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
  pointer-events: none;
}
.pathDot.photo > * { position: relative; z-index: 1; }
.pathDot:active { transform: scale(0.97); }
.pathDot.current {
  background: linear-gradient(180deg, #7be12c 0%, #58cc02 100%);
  color: #ffffff;
  border-color: rgba(88, 204, 2, 0.24);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(88, 204, 2, 0.24);
  animation: currentBob 2.8s ease-in-out infinite, pathPulse 2.2s ease-in-out infinite;
}
.pathDot.current::after {
  display: none;
}
.pathDot.boss { width: 50px; height: 50px; }
.pathDot.done:not(.photo) {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.24);
  color: #0f766e;
}
.pathDot.photo.done {
  border-color: rgba(20, 184, 166, 0.42);
}
.pathDot.locked { opacity: 0.35; cursor: not-allowed; }
@keyframes pathPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0.0); }
}
@keyframes pathPulseGreen {
  0% { transform: scale(0.96); opacity: 0.65; }
  70% { transform: scale(1.08); opacity: 0.0; }
  100% { transform: scale(1.08); opacity: 0.0; }
}
.pathDotIcon { width: 22px; height: 22px; display: block; }
.pathDotIcon { filter: brightness(0) invert(1); }
.pathCheck {
  color: #16a34a;
  font-size: 22px;
  font-weight: 900;
}
.pathMeta {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 20px rgba(1, 7, 18, 0.18);
}
.pathItem.isCurrent .pathMeta {
  border-color: rgba(125, 220, 114, 0.22);
  box-shadow: 0 16px 30px rgba(125, 220, 114, 0.10);
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes currentBob {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(-5px); }
}
.pathTitle { margin: 0; font-weight: 900; font-family: var(--font-head); font-size: 14px; }
.pathTopicIcon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  opacity: 0.8;
}
.pathSub { margin: 3px 0 0 0; color: var(--muted); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .progress > div { transition: none; }
}
.chipIcon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.iconBtn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--surface2);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(1, 7, 18, 0.18);
}
.iconBtn:active { transform: translateY(2px); box-shadow: 0 2px 8px rgba(1, 7, 18, 0.16); }
.iconBtn img { width: 20px; height: 20px; display: block; }
.iconBtn img { filter: brightness(0) invert(1); }

/* Serboteka visual refresh */
:root {
  --bg: #08080a;
  --bg2: #0d0d11;
  --surface: #151518;
  --surface2: #1b1b20;
  --surface3: #23232a;
  --text: #f7f7fb;
  --muted: rgba(247, 247, 251, 0.64);
  --accent: #6d3df2;
  --accent2: #2f6bff;
  --accent3: #c9bbff;
  --danger: #ef4444;
  --success: #22c55e;
  --streak: #ffb02e;
  --stroke: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow2: 0 12px 28px rgba(0, 0, 0, 0.28);
  --chip-bg: rgba(255, 255, 255, 0.06);
  --tag-bg: #6d3df2;
  --progress-bg: rgba(255, 255, 255, 0.10);
  --overlay-bg: rgba(8, 8, 10, 0.82);
  --bot-link: rgba(247, 247, 251, 0.58);
  --nav-icon-filter: brightness(0) saturate(100%) invert(96%) sepia(7%) saturate(173%) hue-rotate(201deg) brightness(103%) contrast(96%);
  --radius: 20px;
}

body,
.splash,
.tabbar,
.bottomNav,
.navBar {
  background: var(--bg) !important;
}

.app,
.main {
  gap: 16px;
}

.card,
.clusterCard,
.topicCard,
.todayTask,
.practiceHero,
.practiceQuickRow,
.practiceGameCard,
.callRow,
.pathMeta,
.owlChatWindow,
.pronPhrase,
.pronResult,
.input,
.sheet {
  background: linear-gradient(180deg, #18181d 0%, #111115 100%) !important;
  border: none !important;
  box-shadow: var(--shadow2) !important;
}

.card {
  padding: 18px !important;
}

.pathHeader {
  display: grid;
  gap: 14px;
}

.pathLangPill,
.pathLangBtn,
.chip,
.iconBtn,
.btn.ghost,
.pathBadge,
.comebackMeta,
.todayPlanBadge,
.practiceHeroKick {
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
}

.btn.primary,
.tag,
.practiceCallCard {
  background: linear-gradient(90deg, #793df2 0%, #2f6bff 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(91, 74, 255, 0.25) !important;
}

.nav {
  background: rgba(16, 16, 20, 0.92) !important;
  border: none !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42) !important;
}

.navbtn.active {
  background: linear-gradient(90deg, #793df2 0%, #2f6bff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(91, 74, 255, 0.24) !important;
}

.progress {
  background: rgba(255, 255, 255, 0.12) !important;
}

.progress > div {
  background: linear-gradient(90deg, #ffffff 0%, #c9bbff 100%) !important;
}

.pathDot {
  border-color: rgba(255, 255, 255, 0.62) !important;
  color: #ffffff !important;
}

.pathDot.current,
.pathDot.done:not(.photo),
.pathDot.photo.done {
  background: linear-gradient(135deg, #793df2 0%, #2f6bff 100%) !important;
  border-color: transparent !important;
}

.pathLine,
.pathLine.done {
  background: rgba(255, 255, 255, 0.18) !important;
}

.pathLine.done {
  background: linear-gradient(180deg, #793df2 0%, #2f6bff 100%) !important;
}

.topicBtn,
.practiceGameIcon,
.todayTaskKick {
  background: rgba(109, 61, 242, 0.16) !important;
  border: none !important;
}

.owlBubble.bot,
.owlTyping {
  background: #24242c !important;
  color: #f7f7fb !important;
}

.owlBubble.user {
  background: linear-gradient(90deg, #793df2 0%, #2f6bff 100%) !important;
}

.menuHero {
  display: none !important;
}

.navIconImg,
.chipIcon,
.pathTopicIcon,
.practiceGameIcon img,
.iconBtn img {
  color: currentColor;
  filter: none !important;
}

.navIconImg {
  opacity: 0.78;
}

.navbtn.active .navIconImg {
  opacity: 1;
}

.practiceGameIcon {
  color: #d8d8e2;
}

.practiceGameIcon img {
  width: 22px;
  height: 22px;
  display: block;
}

.practiceCallCard .practiceGameIcon {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff;
}

.profileShell {
  display: grid;
  gap: 0;
}

.profileCover {
  position: relative;
  min-height: 172px;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(135deg, rgba(128, 0, 255, 0.20), rgba(47, 107, 255, 0.16)),
    #12141c;
}

.profileCover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at 80% 12%, rgba(121, 61, 242, 0.32), transparent 34%);
}

.profileCoverGlow {
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(47, 107, 255, 0.22);
  filter: blur(8px);
}

.profileCoverLine {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.profileCoverMeta {
  position: absolute;
  left: 22px;
  top: 20px;
  display: grid;
  gap: 2px;
}

.profileCoverKicker {
  color: rgba(247, 247, 251, 0.62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.profileCoverTitle {
  color: #ffffff;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.profileShell .profileCard {
  margin-top: -38px;
  border-radius: 0 0 28px 28px !important;
  padding-top: 0 !important;
  overflow: visible;
}

.profileShell .profileTop {
  margin-top: -38px;
  position: relative;
  z-index: 2;
}

.profileShell .avatarRing {
  width: 122px;
  height: 122px;
}

.profileShell .avatar {
  width: 112px;
  height: 112px;
  border: 4px solid var(--bg);
  background: linear-gradient(135deg, #793df2, #2f6bff);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.profileShell .profileName {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1.02;
}

.profileShell .profileSub {
  max-width: 32ch;
  color: rgba(247, 247, 251, 0.62);
  font-size: 12px;
}

.profilePlanBadge {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(247, 247, 251, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.profilePlanBadge.active {
  background: linear-gradient(90deg, #793df2 0%, #2f6bff 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.28);
}

.profileShell .profileGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.profileShell .miniStat {
  min-height: 72px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055) !important;
  padding: 12px 8px;
  text-align: left;
}

.profileShell .miniStatLabel {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.profileShell .miniStatVal {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.08;
}

.profileShell .xpGoal,
.profileShell .xpCard,
.profileShell .badgesCard {
  margin-top: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.profileShell .xpGoalBar {
  border: none;
  background: rgba(255, 255, 255, 0.10);
}

.profileShell .xpGoalFill {
  background: linear-gradient(90deg, #793df2 0%, #2f6bff 100%);
}

.profileShell .xpLine {
  stroke: #7b61ff;
}

.profileShell .xpLineWrap {
  background: rgba(255, 255, 255, 0.035);
  border-radius: 18px;
}

.profileShell .badgeItem {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

@media (max-width: 420px) {
  .profileShell .profileGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}