/* ============================================================
   PITCH DOJO — premium dark "game" theme
   Design tokens
   ============================================================ */
:root {
  /* canvas */
  --bg: #0a0d1c;
  --bg-glow-1: rgba(124, 107, 255, 0.14);
  --bg-glow-2: rgba(52, 217, 123, 0.07);

  /* surfaces */
  --surface: #151a31;
  --surface-2: #1c2342;
  --surface-3: #242c55;
  --line: rgba(148, 163, 255, 0.14);
  --line-strong: rgba(148, 163, 255, 0.26);

  /* text */
  --text: #f2f4ff;
  --muted: #98a1c7;
  --muted-2: #6f7aa6;

  /* brand + semantics */
  --brand: #7c6bff;
  --brand-hi: #9385ff;
  --brand-deep: #4b3ad1;
  --brand-ink: #ffffff;
  --blue: #4f8dff;
  --success: #34d97b;
  --success-hi: #52f29a;
  --success-deep: #1b9e56;
  --gold: #ffc95c;
  --gold-deep: #b8862a;
  --danger: #ff5c7a;
  --danger-deep: #c22f4c;

  /* shape + motion */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --shadow-card: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(900px 500px at 15% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(700px 420px at 95% 8%, var(--bg-glow-2), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

#app {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* desktop: frame the app like a phone canvas */
@media (min-width: 720px) {
  #app {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: rgba(15, 19, 38, 0.45);
    box-shadow: 0 0 80px -20px rgba(0, 0, 0, 0.6);
  }
}

.screen {
  padding: 22px 20px 32px;
  animation: screenIn 0.32s var(--ease-pop) both;
}
.hidden { display: none !important; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* accessibility: focus + motion */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-hi);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Brand header
   ============================================================ */
.brand { text-align: center; margin: 14px 0 26px; }
.logo {
  font-size: 44px;
  line-height: 1;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background:
    linear-gradient(160deg, rgba(147, 133, 255, 0.22), rgba(79, 141, 255, 0.08)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px -14px rgba(124, 107, 255, 0.55);
}
/* Sensei Pi as the brand mark: image fills the rounded logo box, keeps the framed shadow. */
.logo--img { overflow: hidden; background: none; padding: 0; }
.logo--img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.brand h1 {
  margin: 14px 0 4px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.6px;
  background: linear-gradient(92deg, #ffffff 20%, #b9b0ff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}
.tag { color: var(--muted); margin: 0 auto; max-width: 40ch; font-size: 15px; }

/* ============================================================
   Fields, inputs, selects
   ============================================================ */
.field { display: block; margin: 20px 0; }
.field > span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.field .sub {
  color: var(--muted-2);
  font-style: normal;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* interview questions are full sentences, not eyebrow labels */
#interview .field > span {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
}

input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input[type="text"]::placeholder { color: var(--muted-2); font-weight: 500; }
input[type="text"]:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(124, 107, 255, 0.22);
}

select {
  width: 100%;
  min-height: 50px;
  padding: 13px 44px 13px 16px;
  border-radius: var(--r-md);
  font-size: 16px;
  font-family: inherit;
  font-weight: 700;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a1c7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 107, 255, 0.22);
}

.custom-obj { margin-top: 12px; }

/* ============================================================
   Chips
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s var(--ease-pop), background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  text-align: left;
}
.chip .sub { pointer-events: none; }
.chip:hover { border-color: var(--line-strong); background: var(--surface-2); }
.chip:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); }
.chip.active {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-color: transparent;
  color: var(--brand-ink);
  font-weight: 800;
  box-shadow:
    0 3px 0 var(--brand-deep),
    0 10px 22px -8px rgba(124, 107, 255, 0.55);
  animation: chipPop 0.22s var(--ease-pop);
}
.chip.active .sub { color: rgba(255, 255, 255, 0.75); }
@keyframes chipPop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* interview answer chips: full-width tappable rows */
.chips.q { flex-direction: column; align-items: stretch; }
.chips.q .chip { border-radius: var(--r-md); padding: 13px 16px; line-height: 1.35; }

/* ============================================================
   Interview stepper (one question per card)
   ============================================================ */
.stepbar { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.stepback {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  padding: 0 0 3px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
    transform 0.12s var(--ease-pop), box-shadow 0.15s ease;
}
.stepback:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
.stepback:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); }
.stepprog {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.stepprog-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-hi));
  box-shadow: 0 0 12px rgba(124, 107, 255, 0.55);
  transition: width 0.3s var(--ease-pop);
}
.stepcount {
  flex: none;
  min-width: 44px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* current question slides in; prefers-reduced-motion kills these globally (0.01ms) */
.qstep.step-in { animation: stepIn 0.26s var(--ease-pop) both; }
.qstep.step-in-back { animation: stepInBack 0.26s var(--ease-pop) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stepInBack {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Buttons
   ============================================================ */
.primary {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-top: 14px;
  box-shadow:
    0 5px 0 var(--brand-deep),
    0 16px 30px -12px rgba(124, 107, 255, 0.6);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.primary:hover { filter: brightness(1.06); }
.primary:active {
  transform: translateY(4px) scale(0.985);
  box-shadow: 0 1px 0 var(--brand-deep), 0 6px 14px -8px rgba(124, 107, 255, 0.5);
}
.primary:disabled {
  background: var(--surface-2);
  color: var(--muted-2);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  cursor: default;
  transform: none;
  filter: none;
}

.ghost {
  background: none;
  border: none;
  color: var(--brand-hi);
  font-size: 15px;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 10px 6px;
  min-height: 44px;
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ghost:hover { color: #fff; background: rgba(124, 107, 255, 0.12); }
.ghost:active { transform: translateY(1px); }
.ghost.center { display: block; margin: 16px auto 0; text-align: center; }

/* ============================================================
   Helper text / badges
   ============================================================ */
.hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }
.hint-left { text-align: left; margin-top: 8px; }

.stylebadge {
  position: relative;
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.1), rgba(52, 217, 123, 0.02)), var(--surface);
  border: 1px solid rgba(52, 217, 123, 0.28);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.stylebadge strong {
  display: block;
  color: var(--success-hi);
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 900;
}
.stylebadge span { color: var(--muted); font-size: 13px; line-height: 1.45; display: block; }

.focusline {
  background: linear-gradient(160deg, rgba(255, 201, 92, 0.1), rgba(255, 201, 92, 0.02)), var(--surface);
  border: 1px solid rgba(255, 201, 92, 0.3);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow-card);
}

.spendline {
  text-align: center;
  color: var(--muted-2);
  font-size: 12px;
  margin-top: 18px;
  opacity: 0.85;
}

/* ============================================================
   LANGUAGE screen
   ============================================================ */
.langgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 12px; }
.langbtn {
  min-height: 56px;
  padding: 14px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  font-weight: 800;
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.12s var(--ease-pop), background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.langbtn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.langbtn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.28); }
.langbtn.active {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 0 var(--brand-deep), 0 12px 24px -10px rgba(124, 107, 255, 0.6);
}

/* ============================================================
   HOME — game HUD
   ============================================================ */
.beltcard {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(147, 133, 255, 0.14), rgba(79, 141, 255, 0.04)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 6px 0 16px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.belt-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.belt-emoji {
  font-size: 34px;
  line-height: 1;
  width: 62px;
  height: 62px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  animation: beltFloat 3.4s ease-in-out infinite;
}
@keyframes beltFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.belt-name { font-size: 21px; font-weight: 900; letter-spacing: -0.3px; }
.belt-next { color: var(--muted); font-size: 13px; font-weight: 700; margin-top: 2px; }

.bar {
  position: relative;
  height: 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}
.bar-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--blue) 55%, var(--success));
  width: 0%;
  transition: width 0.7s var(--ease-pop);
  box-shadow: 0 0 14px rgba(124, 107, 255, 0.6);
}
.bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: barShine 2.6s linear infinite;
}
@keyframes barShine {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* stat tiles */
.tiles { display: flex; gap: 10px; margin-bottom: 20px; }
.tile {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 8px 12px;
  text-align: center;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.15s var(--ease-pop), border-color 0.15s ease;
}
.tile:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.tile-num {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.tile:nth-child(1) .tile-num { color: #ff9d5c; text-shadow: 0 0 18px rgba(255, 138, 76, 0.4); }
.tile:nth-child(2) .tile-num { color: var(--gold); text-shadow: 0 0 18px rgba(255, 201, 92, 0.35); }
.tile:nth-child(3) .tile-num { color: var(--success-hi); text-shadow: 0 0 18px rgba(52, 217, 123, 0.35); }
.tile-goal { font-size: 14px; color: var(--muted-2); font-weight: 800; }
.tile-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 700; }

/* achievements */
.ach-wrap { margin-top: 26px; }
.ach-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.ach-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ach {
  text-align: center;
  padding: 14px 6px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.15s var(--ease-pop), box-shadow 0.15s ease;
}
.ach.off { opacity: 0.4; filter: grayscale(1); }
.ach.on {
  border-color: rgba(255, 201, 92, 0.45);
  background: linear-gradient(160deg, rgba(255, 201, 92, 0.1), rgba(255, 201, 92, 0.02)), var(--surface);
  box-shadow: 0 8px 20px -10px rgba(255, 201, 92, 0.35);
}
.ach.on:hover { transform: translateY(-2px) scale(1.03); }
.ach-emoji { font-size: 27px; line-height: 1.2; }
.ach-name { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.25; font-weight: 700; }
.ach.on .ach-name { color: var(--gold); }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 24px) scale(0.95);
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.16), rgba(52, 217, 123, 0.04)), var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(52, 217, 123, 0.45);
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-pop);
  z-index: 50;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 24px -6px rgba(52, 217, 123, 0.35);
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.in { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ============================================================
   Loading overlay
   ============================================================ */
.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 28, 0.8);
  backdrop-filter: blur(4px);
  font-size: 30px;
}
.spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   DRILL screen — app-like fixed chat layout
   ============================================================ */
#drill {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-bottom: 14px;
}

.drillbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drillbar .ghost { padding: 8px 4px; white-space: nowrap; }
.meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drillbar #endBtn { white-space: nowrap; font-size: 13px; }

.convo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 2px 14px;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.convo::-webkit-scrollbar { width: 6px; }
.convo::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
.convo::-webkit-scrollbar-track { background: transparent; }

/* message bubbles */
.msg {
  padding: 13px 16px;
  border-radius: 18px;
  max-width: 86%;
  line-height: 1.5;
  white-space: pre-wrap;
  font-size: 15px;
  font-weight: 600;
  animation: msgIn 0.28s var(--ease-pop) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.msg .who {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
  opacity: 0.9;
}

.buyer {
  background: var(--surface-2);
  border: 1px solid var(--line);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.6);
}
.buyer .who { color: #aeb8ff; }

.seller {
  background: linear-gradient(160deg, var(--brand-hi), var(--brand) 70%);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  box-shadow: 0 6px 18px -8px rgba(124, 107, 255, 0.55);
}
.seller .who { color: rgba(255, 255, 255, 0.8); }

.coach {
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.12), rgba(52, 217, 123, 0.03)), var(--surface);
  border: 1px solid rgba(52, 217, 123, 0.3);
  border-left: 3px solid var(--success);
  align-self: stretch;
  max-width: 100%;
  font-size: 14.5px;
  border-radius: var(--r-md);
}
.coach .who { color: var(--success-hi); }

.msg.hint, .convo .hint {
  background: linear-gradient(160deg, rgba(255, 201, 92, 0.12), rgba(255, 201, 92, 0.03)), var(--surface);
  border: 1px solid rgba(255, 201, 92, 0.35);
  border-left: 3px solid var(--gold);
  align-self: stretch;
  max-width: 100%;
  font-style: italic;
  color: var(--text);
  text-align: left;
  font-size: 14.5px;
  margin-top: 0;
  border-radius: var(--r-md);
  padding: 13px 16px;
}
.msg.hint .who, .convo .hint .who { color: var(--gold); font-style: normal; }

.system {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  max-width: 100%;
  padding: 4px 12px;
}
.typing { color: var(--muted); font-style: italic; }
.typing::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

/* ============================================================
   Score card — results screen
   ============================================================ */
.scorecard {
  align-self: stretch;
  text-align: center;
  padding: 26px 20px 20px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(170deg, rgba(147, 133, 255, 0.1), rgba(79, 141, 255, 0.02)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  margin-top: 8px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: cardIn 0.45s var(--ease-pop) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.scorecard.won {
  border-color: rgba(52, 217, 123, 0.5);
  background:
    linear-gradient(170deg, rgba(52, 217, 123, 0.14), rgba(52, 217, 123, 0.02)),
    var(--surface-2);
  box-shadow: var(--shadow-card), 0 0 40px -12px rgba(52, 217, 123, 0.45);
}
.scorecard.lost {
  border-color: rgba(255, 92, 122, 0.45);
  background:
    linear-gradient(170deg, rgba(255, 92, 122, 0.1), rgba(255, 92, 122, 0.02)),
    var(--surface-2);
  box-shadow: var(--shadow-card), 0 0 40px -14px rgba(255, 92, 122, 0.35);
}
.scorecard .score {
  font-size: 58px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, #b9b0ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}
.scorecard.won .score { background: linear-gradient(180deg, #fff 30%, var(--success-hi)); -webkit-background-clip: text; background-clip: text; }
.scorecard.lost .score { background: linear-gradient(180deg, #fff 30%, #ffa1b4); -webkit-background-clip: text; background-clip: text; }
.scorecard .score span {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--muted);
}
.scorecard .grade {
  font-size: 19px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--success-hi);
  margin: 6px 0 14px;
}
.scorecard.lost .grade { color: #ffa1b4; }
.scorecard .lesson {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  margin: 0 auto 12px;
  max-width: 46ch;
}
.scorecard .lesson.focus {
  color: var(--gold);
  font-size: 14px;
  background: rgba(255, 201, 92, 0.08);
  border: 1px solid rgba(255, 201, 92, 0.25);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.scorecard .xpgain {
  display: inline-block;
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  font-weight: 900;
  font-size: 15px;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 3px 0 var(--brand-deep), 0 10px 20px -8px rgba(124, 107, 255, 0.5);
  animation: xpPop 0.5s var(--ease-pop) 0.15s both;
}
@keyframes xpPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.scorecard .best { color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.scorecard .best em { color: var(--gold); font-style: normal; font-weight: 900; }

/* trend block: this score vs your own history on this objection (avg delta + best + recent bars) */
.scorecard .trend {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px 10px;
  margin: 0 auto 14px;
  max-width: 340px;
}
.trend-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.trend-first { color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.45; }
.trend-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}
.trend-chip.up   { color: var(--success-hi); border-color: rgba(52, 217, 123, 0.4); background: rgba(52, 217, 123, 0.08); }
.trend-chip.down { color: #ffa1b4; border-color: rgba(255, 92, 122, 0.35); background: rgba(255, 92, 122, 0.07); }
.trend-chip.gold { color: var(--gold); border-color: rgba(255, 201, 92, 0.3); background: rgba(255, 201, 92, 0.06); }
/* recent-scores mini bars (last one = this drill, highlighted) */
.spark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 42px;
  margin-top: 10px;
}
.spark-bar {
  width: 12px;
  min-height: 3px;
  border-radius: 4px 4px 2px 2px;
  background: rgba(147, 133, 255, 0.35);
  transition: height 0.5s var(--ease-pop);
}
.spark-bar.cur {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  box-shadow: 0 0 10px rgba(124, 107, 255, 0.55);
}
.scorecard.won .spark-bar.cur {
  background: linear-gradient(180deg, var(--success-hi), var(--success-deep));
  box-shadow: 0 0 10px rgba(52, 217, 123, 0.5);
}
.scorecard .cardbtns { display: flex; gap: 10px; margin-top: 16px; }
.scorecard .cardbtns .primary,
.scorecard .cardbtns .ghost { margin: 0; flex: 1; min-height: 48px; font-size: 15px; }
.scorecard .cardbtns .ghost {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
}
.scorecard .cardbtns .ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }

/* ============================================================
   Reply bar + voice
   ============================================================ */
.replybar {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: transparent;
  flex: none;
  align-items: stretch;
}
.replybar input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  padding: 12px 18px;
}
.replybar input:disabled, .send:disabled { opacity: 0.5; }
.send {
  width: auto;
  margin: 0;
  padding: 12px 22px;
  min-height: 50px;
  border-radius: 999px;
  font-size: 16px;
}

.mic {
  flex: none;
  width: 50px;
  min-height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text);
  border: 1.5px solid var(--line);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.12s var(--ease-pop), background 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.mic:hover { border-color: var(--line-strong); background: var(--surface-3); }
.mic:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.28); }
.mic.listening {
  background: linear-gradient(180deg, #ff7a92, var(--danger));
  border-color: transparent;
  box-shadow: 0 3px 0 var(--danger-deep);
  animation: micPulse 1.4s ease-out infinite;
}
@keyframes micPulse {
  0% { box-shadow: 0 3px 0 var(--danger-deep), 0 0 0 0 rgba(255, 92, 122, 0.55); }
  70% { box-shadow: 0 3px 0 var(--danger-deep), 0 0 0 14px rgba(255, 92, 122, 0); }
  100% { box-shadow: 0 3px 0 var(--danger-deep), 0 0 0 0 rgba(255, 92, 122, 0); }
}
.hintbtn { font-size: 18px; }
.hintbtn:disabled { opacity: 0.4; transform: none; }

.voicestatus {
  text-align: center;
  padding: 8px 10px 2px;
  color: var(--success-hi);
  font-weight: 800;
  font-size: 14px;
  flex: none;
  animation: msgIn 0.25s ease both;
}

/* ============================================================
   LEARN — home "Today's lesson" card
   ============================================================ */
.learncard {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 201, 92, 0.12), rgba(124, 107, 255, 0.06)),
    var(--surface-2);
  border: 1px solid rgba(255, 201, 92, 0.35);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.learncard-top { display: flex; align-items: center; gap: 13px; }
.learncard-emoji {
  font-size: 28px;
  line-height: 1;
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(255, 201, 92, 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 16px -8px rgba(255, 201, 92, 0.35);
}
.learncard-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.learncard-title { font-size: 18px; font-weight: 900; letter-spacing: -0.3px; margin-top: 2px; }
.learncard-sub { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.learncard-btns { display: flex; gap: 10px; align-items: center; margin-top: 13px; }
.learncard-go { margin-top: 0; flex: 1; min-height: 48px; font-size: 15px; }
.learncard-all { flex: none; white-space: nowrap; }

/* REVIEW — home "Review" card (spaced repetition) + learn-screen entry button */
.reviewcard {
  background:
    linear-gradient(160deg, rgba(79, 141, 255, 0.14), rgba(124, 107, 255, 0.06)),
    var(--surface-2);
  border-color: rgba(79, 141, 255, 0.35);
}
.reviewcard .reviewcard-emoji {
  border-color: rgba(79, 141, 255, 0.35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 16px -8px rgba(79, 141, 255, 0.35);
}
.reviewcard .reviewcard-kicker { color: var(--blue); }
.reviewbtn { display: block; width: 100%; margin: 0 0 14px; min-height: 48px; font-size: 15px; }

/* ============================================================
   LEARN — lesson path
   ============================================================ */
.path { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.unit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(147, 133, 255, 0.16), rgba(79, 141, 255, 0.05)), var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
  width: 100%;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.unit-head:active { transform: translateY(1px); }
.unit-head-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.unit-head-meta { display: flex; align-items: center; gap: 10px; flex: none; }
.unit-chev { font-size: 12px; color: var(--muted); transition: transform 0.2s var(--ease-pop); }
.unit.open .unit-chev { transform: rotate(180deg); }
.unit-complete .unit-head { opacity: 0.9; }
.unit-lessons { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
.unit.open .unit-lessons { display: flex; }
.unit-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-hi);
}
.unit-name { font-size: 17px; font-weight: 900; letter-spacing: -0.3px; margin-top: 1px; }
.unit-count {
  flex: none;
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}

.lnode {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s var(--ease-pop), border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.lnode:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
.lnode:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); }
.lnode-dot {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--line-strong);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}
.lnode-txt { flex: 1; min-width: 0; }
.lnode-title { display: block; font-size: 15px; font-weight: 900; letter-spacing: -0.2px; }
.lnode-state {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-2);
  margin-top: 1px;
}
.lnode-action {
  flex: none;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--muted);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
  background: var(--surface-2);
}
.lnode-action.go {
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-color: transparent;
  box-shadow: 0 2px 0 var(--brand-deep);
}
.lnode-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #062512;
  background: linear-gradient(180deg, var(--success-hi), var(--success));
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.lnode.done { border-color: rgba(52, 217, 123, 0.35); }
.lnode.done .lnode-dot { border-color: rgba(52, 217, 123, 0.5); }
.lnode.done .lnode-state { color: var(--success-hi); }
.lnode.current {
  border-color: rgba(124, 107, 255, 0.65);
  background: linear-gradient(160deg, rgba(147, 133, 255, 0.12), rgba(79, 141, 255, 0.03)), var(--surface);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 0 26px -8px rgba(124, 107, 255, 0.55);
}
.lnode.current .lnode-dot {
  border-color: var(--brand-hi);
  animation: nodePulse 2s ease-out infinite;
}
@keyframes nodePulse {
  0% { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(124, 107, 255, 0.5); }
  70% { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 0 11px rgba(124, 107, 255, 0); }
  100% { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(124, 107, 255, 0); }
}
.lnode.current .lnode-state { color: var(--brand-hi); }
.lnode.locked { opacity: 0.45; cursor: default; }
.lnode.locked .lnode-dot { filter: grayscale(1); font-size: 17px; }

/* ============================================================
   LEARN — lesson player
   ============================================================ */
.lessonbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
}
.lessonexit { flex: none; font-size: 18px; padding: 8px 12px; }
.lessonprog {
  flex: 1;
  height: 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}
.lessonprog-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--success));
  transition: width 0.45s var(--ease-pop);
  box-shadow: 0 0 14px rgba(255, 201, 92, 0.5);
}

.lessonbody { display: flex; flex-direction: column; animation: screenIn 0.3s var(--ease-pop) both; }
.teachcard {
  background:
    linear-gradient(170deg, rgba(147, 133, 255, 0.08), rgba(79, 141, 255, 0.02)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: cardIn 0.4s var(--ease-pop) both;
}
.teach-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 10px;
}
.teach-emoji { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.teach-title { margin: 0 0 12px; font-size: 23px; font-weight: 900; letter-spacing: -0.4px; }
.teach-p { margin: 0 0 12px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.6; }
.teach-p:last-child { margin-bottom: 0; }

.ex-setup { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; font-weight: 800; font-style: italic; }
.ex {
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin-bottom: 11px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ex-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}
.ex-bad {
  background: linear-gradient(160deg, rgba(255, 92, 122, 0.1), rgba(255, 92, 122, 0.02)), var(--surface);
  border: 1px solid rgba(255, 92, 122, 0.35);
  border-left: 3px solid var(--danger);
}
.ex-bad .ex-lbl { color: #ffa1b4; }
.ex-good {
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.1), rgba(52, 217, 123, 0.02)), var(--surface);
  border: 1px solid rgba(52, 217, 123, 0.35);
  border-left: 3px solid var(--success);
}
.ex-good .ex-lbl { color: var(--success-hi); }
.ex-note { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.5; }

.q-text { margin: 0 0 14px; font-size: 16.5px; font-weight: 800; line-height: 1.5; }
.qopts { display: flex; flex-direction: column; gap: 9px; }
.qopt {
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s var(--ease-pop), border-color 0.15s ease, background 0.15s ease;
}
.qopt:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
.qopt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); }
.qopt:disabled { cursor: default; opacity: 0.6; }
.qopt.correct {
  opacity: 1;
  border-color: rgba(52, 217, 123, 0.65);
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.16), rgba(52, 217, 123, 0.04)), var(--surface);
  color: var(--success-hi);
  animation: chipPop 0.25s var(--ease-pop);
}
.qopt.wrong {
  opacity: 1;
  border-color: rgba(255, 92, 122, 0.6);
  background: linear-gradient(160deg, rgba(255, 92, 122, 0.14), rgba(255, 92, 122, 0.03)), var(--surface);
  color: #ffa1b4;
  animation: qShake 0.3s ease;
}
@keyframes qShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.q-why {
  margin-top: 13px;
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  animation: msgIn 0.28s var(--ease-pop) both;
}
.q-why strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 900; }
.q-why.right {
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.12), rgba(52, 217, 123, 0.03)), var(--surface);
  border: 1px solid rgba(52, 217, 123, 0.35);
}
.q-why.right strong { color: var(--success-hi); }
.q-why.missed {
  background: linear-gradient(160deg, rgba(255, 201, 92, 0.12), rgba(255, 201, 92, 0.03)), var(--surface);
  border: 1px solid rgba(255, 201, 92, 0.35);
}
.q-why.missed strong { color: var(--gold); }

.lesson-done {
  text-align: center;
  padding: 34px 20px 24px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(170deg, rgba(52, 217, 123, 0.14), rgba(52, 217, 123, 0.02)),
    var(--surface-2);
  border: 1px solid rgba(52, 217, 123, 0.5);
  box-shadow: var(--shadow-card), 0 0 40px -12px rgba(52, 217, 123, 0.45);
  animation: cardIn 0.45s var(--ease-pop) both;
}
.lesson-done-emoji { font-size: 52px; line-height: 1; animation: xpPop 0.5s var(--ease-pop) 0.1s both; }
.lesson-done-title { margin: 12px 0 14px; font-size: 25px; font-weight: 900; letter-spacing: -0.4px; }
.lesson-done .xpgain {
  display: inline-block;
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  font-weight: 900;
  font-size: 15px;
  padding: 7px 18px;
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--brand-deep), 0 10px 20px -8px rgba(124, 107, 255, 0.5);
  animation: xpPop 0.5s var(--ease-pop) 0.2s both;
}
.lesson-done-streak { color: var(--muted); font-size: 13.5px; font-weight: 800; margin-top: 12px; }
.lesson-done-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.lesson-done-btns .primary { margin-top: 0; }
.ghost.boxed {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  min-height: 50px;
}
.ghost.boxed:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }

/* ============================================================
   PITCH BUILDER — home entry card
   ============================================================ */
.pitchcard {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(147, 133, 255, 0.18), rgba(79, 141, 255, 0.05)),
    var(--surface-2);
  border: 1px solid rgba(124, 107, 255, 0.5);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.15s var(--ease-pop), border-color 0.15s ease;
}
.pitchcard:hover { transform: translateY(-2px); border-color: var(--brand-hi); }
.pitchcard-top { display: flex; align-items: center; gap: 13px; }
.pitchcard-emoji {
  font-size: 28px;
  line-height: 1;
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(124, 107, 255, 0.5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 16px -8px rgba(124, 107, 255, 0.5);
}
.pitchcard-txt { min-width: 0; }
.pitchcard-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-hi);
}
.pitchcard-title { font-size: 18px; font-weight: 900; letter-spacing: -0.3px; margin-top: 2px; }
.pitchcard-sub { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.pitchcard-go { margin-top: 13px; min-height: 48px; font-size: 15px; }

.probadge {
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #3a2c00;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 7px;
  box-shadow: 0 2px 0 var(--gold-deep), 0 6px 14px -6px rgba(255, 201, 92, 0.5);
  vertical-align: middle;
  -webkit-text-fill-color: #3a2c00; /* readable inside gradient-clipped h1 */
}

/* ============================================================
   PITCH BUILDER — playbook view
   ============================================================ */
.pbview { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pbcard {
  background:
    linear-gradient(170deg, rgba(147, 133, 255, 0.1), rgba(79, 141, 255, 0.02)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: cardIn 0.4s var(--ease-pop) both;
}
.pbcard.pb-strategy {
  background: linear-gradient(170deg, rgba(255, 201, 92, 0.1), rgba(255, 201, 92, 0.02)), var(--surface-2);
  border-color: rgba(255, 201, 92, 0.35);
}
.pb-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-hi);
  margin-bottom: 8px;
}
.pb-strategy .pb-kicker { color: var(--gold); }
.pb-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.6; white-space: pre-wrap; }
.pb-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 10px 0 0;
}
.pb-hint { margin: 0 0 2px; }

.pb-objs { display: flex; flex-direction: column; gap: 9px; }
.pb-obj {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pb-obj:hover { border-color: var(--line-strong); }
.pb-obj[open] {
  border-color: rgba(124, 107, 255, 0.55);
  background: linear-gradient(160deg, rgba(147, 133, 255, 0.08), rgba(79, 141, 255, 0.02)), var(--surface);
}
.pb-obj summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  min-height: 50px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.4;
}
.pb-obj summary::-webkit-details-marker { display: none; }
.pb-obj-num {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--brand-deep);
}
.pb-obj-phrase { flex: 1; min-width: 0; }
.pb-obj-chev {
  flex: none;
  color: var(--muted-2);
  font-size: 14px;
  transition: transform 0.2s var(--ease-pop);
}
.pb-obj[open] .pb-obj-chev { transform: rotate(180deg); color: var(--brand-hi); }
.pb-obj-body { padding: 2px 15px 15px; animation: msgIn 0.25s var(--ease-pop) both; }
.pb-lbl {
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 12px 0 4px;
}
.pb-obj-body .pb-text { font-size: 14px; }
.pb-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}
.pb-steps li { margin-bottom: 5px; }
.pb-steps li::marker { color: var(--brand-hi); font-weight: 900; }
.pb-say {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(52, 217, 123, 0.12), rgba(52, 217, 123, 0.03)), var(--surface);
  border: 1px solid rgba(52, 217, 123, 0.35);
  border-left: 3px solid var(--success);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--success-hi);
  line-height: 1.55;
}
.pb-btnrow { display: flex; gap: 10px; }
.pb-btnrow .ghost.boxed { flex: 1; margin: 0; font-size: 14px; }
.pbview .primary { margin-top: 4px; }

/* ============================================================
   SMART LOOP — daily challenge card (home)
   ============================================================ */
.chalcard {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 157, 92, 0.14), rgba(255, 92, 122, 0.05)),
    var(--surface-2);
  border: 1px solid rgba(255, 157, 92, 0.4);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.chalcard-top { display: flex; align-items: center; gap: 13px; }
.chalcard-emoji {
  font-size: 28px;
  line-height: 1;
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(255, 157, 92, 0.4);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 16px -8px rgba(255, 157, 92, 0.4);
}
.chalcard-txt { min-width: 0; }
.chalcard-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff9d5c;
}
.chalcard-title { font-size: 18px; font-weight: 900; letter-spacing: -0.3px; margin-top: 2px; }
.chalcard-sub { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.chalcard-go { margin-top: 13px; min-height: 48px; font-size: 15px; }

/* ============================================================
   SMART LOOP — weak spots panel (home)
   ============================================================ */
.weakcard { margin-top: 18px; }
.weak-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}
.weak-list { display: flex; flex-direction: column; gap: 9px; }
.weak-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--surface);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 14px 16px;
  text-align: center;
}
.weak-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid rgba(255, 92, 122, 0.3);
  border-radius: var(--r-md);
  padding: 11px 14px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.weak-txt { flex: 1; min-width: 0; }
.weak-obj { font-size: 14.5px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.35; }
.weak-avg {
  font-size: 12px;
  font-weight: 700;
  color: #ffa1b4;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.weak-go {
  flex: none;
  min-height: 44px;
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 900;
  white-space: nowrap;
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  box-shadow: 0 3px 0 var(--brand-deep);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.weak-go:hover { filter: brightness(1.06); }
.weak-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brand-deep); }

/* ============================================================
   SMART LOOP — coach turn XP + "use this line" (drill)
   ============================================================ */
.turnxp {
  display: inline-block;
  margin: 9px 8px 0 0;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 2px 0 var(--brand-deep);
  white-space: nowrap;
  animation: xpPop 0.4s var(--ease-pop) both;
}
.uselinebtn {
  display: inline-block;
  margin-top: 9px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--success-hi);
  background: rgba(52, 217, 123, 0.1);
  border: 1.5px solid rgba(52, 217, 123, 0.4);
  transition: background 0.15s ease, transform 0.1s ease;
}
.uselinebtn:hover { background: rgba(52, 217, 123, 0.2); }
.uselinebtn:active { transform: translateY(1px); }

/* ============================================================
   Seller Type — interview result reveal
   ============================================================ */
.typecard {
  text-align: center;
  padding: 30px 22px 22px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(170deg, rgba(147, 133, 255, 0.14), rgba(255, 201, 92, 0.04) 55%, rgba(79, 141, 255, 0.03)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  margin-top: 10px;
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 60px -18px rgba(124, 107, 255, 0.55);
  animation: cardIn 0.45s var(--ease-pop) both;
}
.typecard-kicker {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 14px;
}
.typecard-emoji {
  font-size: 58px;
  line-height: 1;
  width: 104px;
  height: 104px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 34px;
  background:
    linear-gradient(160deg, rgba(147, 133, 255, 0.26), rgba(255, 201, 92, 0.1)),
    var(--surface-3);
  border: 1px solid var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px -14px rgba(124, 107, 255, 0.65);
  animation: xpPop 0.5s var(--ease-pop) 0.12s both;
}
.typecard-name {
  margin: 10px 0 6px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.6px;
  background: linear-gradient(92deg, #ffffff 25%, var(--gold) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  animation: xpPop 0.5s var(--ease-pop) 0.2s both;
}
.typecard-desc {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  margin: 0 auto 16px;
  max-width: 44ch;
}
.typecard-mix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.mixchip {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px solid var(--line);
}
.mixchip.main {
  color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-color: transparent;
  box-shadow: 0 2px 0 var(--brand-deep);
}
.typecard-block {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-top: 10px;
}
.typecard-block.grow {
  background: linear-gradient(160deg, rgba(255, 201, 92, 0.09), rgba(255, 201, 92, 0.02)), var(--surface);
  border-color: rgba(255, 201, 92, 0.3);
}
.typecard-lbl {
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 7px;
}
.typecard-block.grow .typecard-lbl { color: var(--gold); }
.typecard-str {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}
.typecard-str:last-child { margin-bottom: 0; }
.typecard-ec {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin: 14px auto 4px;
  max-width: 42ch;
}
.typecard .primary { margin-top: 16px; }

/* ============================================================
   PROGRESS dashboard
   ============================================================ */
/* Home entry card */
.progcard {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 13px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background:
    linear-gradient(160deg, rgba(79, 141, 255, 0.12), rgba(124, 107, 255, 0.04)),
    var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.15s var(--ease-pop), border-color 0.15s ease;
}
.progcard:hover { transform: translateY(-2px); border-color: var(--blue); }
.progcard:active { transform: translateY(0); }
.progcard-emoji {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}
.progcard-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.progcard-title { font-size: 16.5px; font-weight: 900; letter-spacing: -0.3px; }
.progcard-sub { color: var(--muted); font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.progcard-chev { flex: none; color: var(--muted-2); font-size: 24px; font-weight: 800; line-height: 1; }

/* section spacing on the dashboard */
.prog-sect { margin-top: 26px; }

/* totals grid */
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 6px 11px;
  text-align: center;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.15s var(--ease-pop), border-color 0.15s ease;
}
.stat:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.stat-num {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}
.stat:nth-child(1) .stat-num { color: var(--brand-hi); }
.stat:nth-child(2) .stat-num { color: var(--success-hi); }
.stat:nth-child(3) .stat-num { color: var(--blue); }
.stat:nth-child(4) .stat-num { color: var(--gold); }
.stat:nth-child(5) .stat-num { color: #ff9d5c; }
.stat:nth-child(6) .stat-num { color: #ffa1b4; }
.stat-lbl { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-weight: 700; line-height: 1.3; }

/* seller type on the dashboard */
.ptypebadge { margin-bottom: 0; }
.ptype { display: flex; align-items: center; gap: 13px; }
.ptype-emoji {
  flex: none;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.ptype-txt { flex: 1; min-width: 0; }
.ptype-txt strong { display: block; color: var(--success-hi); font-size: 15px; font-weight: 900; margin-bottom: 3px; }
.ptype-txt span { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ptype-go { display: block; margin: 12px 0 2px auto; }

/* last-7-days XP bars */
.weekbars {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 12px 10px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.wday { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.wxp {
  height: 15px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--success-hi);
  font-variant-numeric: tabular-nums;
  line-height: 15px;
}
.wbar {
  width: 100%;
  max-width: 26px;
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.wbar-fill {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--success-hi), var(--success-deep));
  box-shadow: 0 0 10px rgba(52, 217, 123, 0.45);
  transition: height 0.5s var(--ease-pop);
}
.wlbl { font-size: 11px; font-weight: 800; color: var(--muted-2); text-transform: uppercase; }
.wday.today .wlbl { color: var(--brand-hi); }
.wday.today .wbar { outline: 1.5px solid rgba(147, 133, 255, 0.5); outline-offset: 1px; }
.weekbars + .weak-empty { margin-top: 10px; }

/* achievements counter next to the dashboard title */
.ach-count { color: var(--gold); font-weight: 900; letter-spacing: 0; text-transform: none; }

/* ============================================================
   SENSEI PITCH — mascot (rendered by senseiHTML in app.js)
   ============================================================ */
.sensei {
  --sensei-size: 48px;
  width: var(--sensei-size);
  height: var(--sensei-size);
  display: inline-flex;
  flex: none;
}
.sensei img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* FRAMED modifier: the current PNGs sit on a violet background, so this one rule clips them
   into a circular avatar bubble with a brand glow ring. When transparent cutout PNGs arrive,
   remove "sensei--framed" in senseiHTML (or empty this rule) and the mascot floats free. */
.sensei--framed {
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 2px solid rgba(124, 107, 255, 0.55);
  box-shadow:
    0 0 0 3px rgba(124, 107, 255, 0.16),
    0 10px 24px -10px rgba(124, 107, 255, 0.55);
}
.sensei--inline { vertical-align: middle; }
.sensei--missing { display: none !important; } /* broken/missing image: hide, never break layout */
.sensei--pop { animation: senseiPop 0.45s var(--ease-pop) both; } /* reduced-motion rule above zeroes this */
@keyframes senseiPop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Home welcome card */
.senseicard {
  display: flex;
  align-items: center;
  gap: 13px;
  background:
    linear-gradient(160deg, rgba(147, 133, 255, 0.14), rgba(79, 141, 255, 0.04)),
    var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.senseicard-txt { flex: 1; min-width: 0; }
.senseicard-name { font-size: 15px; font-weight: 900; letter-spacing: -0.2px; }
.senseicard-role {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-hi);
  margin-left: 6px;
}
.senseicard-tip { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.45; margin-top: 2px; }

/* coach bubble identity row (avatar + "Sensei Pi · Coach");
   .msg .who sets display:block, so match specificity + later position to win with flex */
.msg .who-sensei { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }

/* score-card reaction */
.sensei-hero { display: flex; justify-content: center; margin-bottom: 10px; }
.sensei-line {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 auto 12px;
  max-width: 40ch;
}
.sensei-line strong { color: var(--brand-hi); font-weight: 900; }

/* interview result welcome note */
.sensei-note {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-top: 14px;
}
.sensei-note span { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.sensei-note strong { display: block; color: var(--text); font-size: 13.5px; font-weight: 900; }

/* mascot toast (belt-up, streak, strong line) */
.sensei-toast { display: flex; align-items: center; gap: 10px; text-align: left; }

/* ============================================================
   UNIT MILESTONES — celebration + learn->practice->review nudges
   ============================================================ */
/* unit-complete card: the lesson-done look, dialed up (gold milestone accents) */
.unit-done {
  background:
    linear-gradient(170deg, rgba(255, 201, 92, 0.16), rgba(124, 107, 255, 0.06) 55%, rgba(52, 217, 123, 0.03)),
    var(--surface-2);
  border: 1px solid rgba(255, 201, 92, 0.5);
  box-shadow: var(--shadow-card), 0 0 46px -12px rgba(255, 201, 92, 0.45);
}
.unit-done-kicker {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 8px 0 2px;
}
.unit-done-name { margin: 6px 0 10px; }
.unit-done .sensei-line { margin-bottom: 16px; }
.unit-done .xpgain { margin: 0 3px; }
.xpgain-bonus {
  color: #201503;
  background: linear-gradient(180deg, var(--gold), #e0a83c);
  box-shadow: 0 3px 0 var(--gold-deep), 0 10px 20px -8px rgba(255, 201, 92, 0.5);
}

/* one-time "drill it before you move on" interstitial (soft, dismiss = start the lesson) */
.unit-nudge { text-align: center; padding-top: 22px; }
.unit-nudge .sensei-note { margin: 0 0 18px; }
.unit-nudge .lesson-done-btns { margin-top: 0; }

/* Sensei review nudge on Home (dismissible once per day, complements the Review card) */
.sensei-nudge {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  background:
    linear-gradient(160deg, rgba(52, 217, 123, 0.12), rgba(147, 133, 255, 0.05)),
    var(--surface-2);
  border: 1px solid rgba(52, 217, 123, 0.35);
  border-radius: var(--r-lg);
  padding: 12px 48px 12px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sensei-nudge-txt {
  flex: 1;
  min-width: 160px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.sensei-nudge-txt strong { display: block; color: var(--text); font-size: 13.5px; font-weight: 900; }
.sensei-nudge-go {
  width: 100%;
  margin: 2px 0 0;
  min-height: 46px;
  font-size: 15px;
}
.sensei-nudge-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted-2);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 50%;
}
.sensei-nudge-x:active { color: var(--text); }

/* win-back variant: warm gold instead of the review nudge's green (zero-shame comeback card) */
.sensei-nudge.winback {
  background:
    linear-gradient(160deg, rgba(255, 201, 92, 0.12), rgba(147, 133, 255, 0.05)),
    var(--surface-2);
  border-color: rgba(255, 201, 92, 0.35);
}

/* ============================================================
   ONBOARDING — first-run Sensei Pi welcome (screen #onboard)
   ============================================================ */
#onboard { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ob-dots { display: flex; gap: 7px; padding-left: 4px; }
.ob-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  transition: background 0.2s ease, transform 0.2s var(--ease-pop), box-shadow 0.2s ease;
}
.ob-dot.on {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  border-color: transparent;
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(124, 107, 255, 0.6);
}
.ob-skip { flex: none; color: var(--muted); font-size: 14px; padding: 10px 14px; }
.ob-skip:hover { color: var(--text); }
.ob-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12vh; }
.ob-card { text-align: center; padding: 30px 22px 26px; }
.ob-hero { display: flex; justify-content: center; margin-bottom: 12px; }
.ob-name {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-hi);
  margin-bottom: 6px;
}
.ob-title { margin: 0 0 12px; font-size: 26px; font-weight: 900; letter-spacing: -0.5px; }
.ob-txt {
  margin: 0 auto;
  max-width: 40ch;
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.6;
}
.ob-alt { width: 100%; margin-top: 10px; font-size: 15px; }

/* ============================================================
   SOUND toggle (Profile settings row) + win celebration pulse
   ============================================================ */
.soundtoggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-family: inherit;
  background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.12s var(--ease-pop), border-color 0.15s ease,
    background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.soundtoggle:hover { border-color: var(--line-strong); background: var(--surface-2); }
.soundtoggle:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.25); }
.soundtoggle.off { opacity: 0.55; filter: grayscale(1); }

/* celebratory glow sweep on a won drill (gated by the global reduced-motion rule above) */
.scorecard.won {
  animation: cardIn 0.45s var(--ease-pop) both, winGlow 1.5s ease-out 0.35s 1;
}
@keyframes winGlow {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 40px -12px rgba(52, 217, 123, 0.45); }
  40% { box-shadow: var(--shadow-card), 0 0 72px -6px rgba(52, 217, 123, 0.8); }
}
.scorecard.won .sensei--pop { animation: senseiPop 0.45s var(--ease-pop) both, winBounce 0.9s var(--ease-pop) 0.55s 1; }
@keyframes winBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-8px) scale(1.06); }
  70% { transform: translateY(0) scale(0.99); }
}

/* ============================================================
   OBJECTION GAUNTLET (home card + run interstitial / end screens)
   ============================================================ */
/* home entry card: reuses the chalcard layout with a crimson boss-rush accent */
.gauntcard {
  background:
    linear-gradient(160deg, rgba(255, 92, 122, 0.14), rgba(124, 107, 255, 0.06)),
    var(--surface-2);
  border-color: rgba(255, 92, 122, 0.4);
}
.gauntcard-emoji {
  border-color: rgba(255, 92, 122, 0.4);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 16px -8px rgba(255, 92, 122, 0.4);
}
.gauntcard-kicker { color: #ffa1b4; }

/* run progress dots (one per round: closed / walked / still ahead) */
.gaunt-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.gdot {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
}
.gdot.win { border-color: rgba(52, 217, 123, 0.55); }
.gdot.loss { border-color: rgba(255, 92, 122, 0.55); }

/* end-screen chrome */
.gaunt-end-kicker {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffa1b4;
  margin-bottom: 4px;
}
.gr-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 14px 0 8px;
}
.gr-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.gr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 700;
}
.gr-num {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
}
.gr-obj { flex: 1; min-width: 0; line-height: 1.3; }
.gr-score { flex: none; font-variant-numeric: tabular-nums; font-weight: 900; }
.gr-out { flex: none; font-size: 14px; }

/* ============================================================
   QUICK SCENARIOS (setup: one-tap preset cards)
   ============================================================ */
.qs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.qs-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
}
.qs-card:hover { border-color: var(--brand-hi); background: var(--surface-2); }
.qs-card:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.qs-emoji { flex: none; font-size: 22px; line-height: 1; }
.qs-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qs-name { font-size: 13.5px; font-weight: 900; letter-spacing: -0.2px; }
.qs-obj {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   TAB SHELL: bottom tab bar + persistent top header strip
   (visible on the 4 main tabs only; body.tabs is toggled by show())
   ============================================================ */
/* room for the fixed shell so tab content never hides behind it */
body.tabs #app {
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
/* toasts float above the tab bar instead of behind it */
body.tabs .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 620px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px;
  background: rgba(13, 17, 36, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}
.tb-chip b { font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.tb-streak b { color: #ff9d5c; }
.tb-today b { color: var(--success-hi); }
.tb-today em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted-2); }
.tb-belt { overflow: hidden; }
.tb-belt b { overflow: hidden; text-overflow: ellipsis; max-width: 13ch; }

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 620px;
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 17, 36, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-strong);
}
.tabbar .tab {
  flex: 1;
  min-height: 52px; /* comfortable 44px+ touch target */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--muted-2);
  transition: color 0.15s ease, background 0.15s ease;
}
.tab-ic {
  font-size: 21px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.15s ease, opacity 0.15s ease, transform 0.15s var(--ease-pop);
}
.tab-lbl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.tabbar .tab.active {
  color: var(--brand-hi);
  background: rgba(124, 107, 255, 0.13);
}
.tabbar .tab.active .tab-ic {
  filter: none;
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
}
.tabbar .tab:active .tab-ic { transform: scale(0.94); }

/* Profile settings row (sound toggle etc.) */
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 10px 9px 16px;
  margin: 14px 0;
}
.setrow > span { font-size: 14.5px; font-weight: 700; color: var(--text); }

/* ============================================================
   MONETIZATION — locked chips, coached meter, paywall, plan cards
   ============================================================ */
/* free-tier locked chips (Hard/Expert difficulty + Voice call type) */
.chip.locked { opacity: 0.6; }
.chip.locked::after { content: "🔒"; margin-left: 6px; font-size: 12px; }

/* persistent "N coached drills left" pill on the Practice tab */
.coachmeter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(124, 107, 255, 0.16), rgba(124, 107, 255, 0.04)), var(--surface);
  border: 1px solid rgba(124, 107, 255, 0.4);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 800;
}
.coachmeter.zero {
  border-color: rgba(255, 92, 122, 0.55);
  background: linear-gradient(160deg, rgba(255, 92, 122, 0.16), rgba(255, 92, 122, 0.04)), var(--surface);
}

/* upgrade / paywall modal (bottom sheet on phones, centered card on wider screens) */
.paywall {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 13, 28, 0.8);
  backdrop-filter: blur(4px);
}
@media (min-width: 520px) { .paywall { align-items: center; } }
.paywall-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background:
    linear-gradient(160deg, rgba(147, 133, 255, 0.16), rgba(79, 141, 255, 0.04)),
    var(--surface-2);
  border: 1px solid rgba(124, 107, 255, 0.55);
  border-radius: var(--r-lg);
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: var(--shadow-card);
  animation: screenIn 0.32s var(--ease-pop) both;
}
.pw-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 50%;
}
.pw-x:hover { color: var(--text); background: rgba(124, 107, 255, 0.12); }
.pw-hero { margin-bottom: 6px; }
.pw-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.pw-title { margin: 4px 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -0.4px; }
.pw-reason { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.pw-reason strong { color: var(--text); }
.pw-benefits { text-align: left; margin: 0 auto 14px; max-width: 320px; display: grid; gap: 8px; }
.pw-benefit { display: flex; gap: 9px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.pw-price { font-size: 15px; font-weight: 900; color: var(--gold); }
.pw-go { margin-top: 10px; }
.pw-topup { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pw-topup-lbl { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.pw-topup-btn, .pw-alt { width: 100%; margin: 0; }
.pw-alt { margin-top: 10px; }
.pw-close { display: block; margin: 8px auto 0; }

/* Profile: plan card (Free/Pro) + For Teams interest card */
.plancard, .teamscard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.plancard.is-pro {
  background: linear-gradient(160deg, rgba(255, 201, 92, 0.12), rgba(255, 201, 92, 0.02)), var(--surface);
  border-color: rgba(255, 201, 92, 0.45);
}
.plan-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.plan-name { font-size: 17px; font-weight: 900; letter-spacing: -0.2px; }
.plan-sub { color: var(--muted); font-size: 13px; font-weight: 700; margin: 6px 0 0; line-height: 1.5; }
.plan-go { min-height: 48px; font-size: 15px; }
.plan-manage { width: 100%; margin-top: 12px; }
.plan-btns { display: flex; gap: 10px; margin-top: 12px; }
.plan-btns .ghost.boxed,
.plan-btns .primary { flex: 1; margin: 0; min-height: 48px; font-size: 14px; }
.teams-done { color: var(--success); font-size: 13.5px; font-weight: 800; margin: 10px 0 0; }

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 380px) {
  .screen { padding: 18px 14px 26px; }
  .brand h1 { font-size: 26px; }
  .logo { width: 74px; height: 74px; font-size: 38px; }
  .tile-num { font-size: 23px; }
  .stat-num { font-size: 19px; }
  .scorecard .score { font-size: 48px; }
  .send { padding: 12px 16px; font-size: 15px; }
  .typecard-name { font-size: 27px; }
  .typecard-emoji { width: 92px; height: 92px; font-size: 50px; }
  .qs-grid { grid-template-columns: 1fr; }
  .tb-chip { padding: 5px 9px; font-size: 12px; gap: 4px; }
  .tb-belt b { max-width: 9ch; }
}

/* ============================================================
   SETTINGS + HELP screens (settings gear entry, help rows, reset)
   ============================================================ */
/* tappable settings/help row entry (Profile gear + Settings help row) */
.setlink {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 56px;
  margin: 14px 0;
  padding: 11px 12px 11px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.setlink:hover { border-color: var(--line-strong); background: var(--surface-2); }
.setlink:active { transform: translateY(1px); }
.setlink-ic { font-size: 22px; flex: none; }
.setlink-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.setlink-txt strong { font-size: 15px; font-weight: 900; letter-spacing: -0.2px; }
.setlink-txt span { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.setlink-chev { color: var(--muted); font-size: 20px; font-weight: 800; flex: none; }

/* compact ghost buttons inside a .setrow (style redo, plan action) */
.setrow-btn { margin: 0; width: auto; min-height: 44px; font-size: 13.5px; padding: 9px 14px; }
.setplan { display: flex; align-items: center; gap: 10px; min-width: 0; }
.setplan > span { font-size: 13.5px; font-weight: 800; white-space: nowrap; }

/* RESET PROGRESS: neutral until armed, then clearly destructive */
.resetbtn { display: block; width: 100%; margin: 4px 0 0; min-height: 48px; }
.resetbtn.armed {
  color: #ff5c7a;
  border-color: rgba(255, 92, 122, 0.65);
  background: linear-gradient(160deg, rgba(255, 92, 122, 0.16), rgba(255, 92, 122, 0.04)), var(--surface);
}

/* about block */
.about-txt { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; margin: 8px 0 0; }
.about-version {
  display: block;
  margin: 10px 0 0;
  padding: 10px 0;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the small "?" beside the Practice mode label (44px effective hit area via ::after) */
.modehelp {
  position: relative;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.modehelp::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.modehelp:hover { color: var(--text); border-color: var(--brand-hi); }
.modehelp:active { transform: translateY(1px); }

/* help rows (pillars / modes / xp explainers) */
.helprow { display: flex; gap: 12px; align-items: flex-start; margin: 13px 0; }
.helprow-ic { font-size: 20px; flex: none; width: 28px; text-align: center; }
.helprow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.helprow-txt strong { font-size: 14.5px; font-weight: 900; letter-spacing: -0.2px; }
.helprow-txt span { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }

/* help lists (free vs Pro) */
.helplist { margin: 10px 0 0; padding: 0 0 0 2px; list-style: none; }
.helplist li {
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.helplist li::before { content: "✅"; position: absolute; left: 0; top: 0; font-size: 13px; }
.helplist.pro li::before { content: "🥋"; }
.help-price { margin: 12px 0 0; color: var(--gold); font-size: 14px; font-weight: 900; }
.help-p { color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.55; margin: 8px 0 0; }
.help-mail { color: var(--brand-hi); font-weight: 800; text-decoration: none; }
.help-mail:hover { text-decoration: underline; }

/* paywall "how it works" link */
.pw-help { display: block; margin: 12px auto 0; font-size: 13px; }

/* ==================== RTL (Arabic) ==================== */
/* Pragmatic right-to-left pass. document.documentElement.dir="rtl" (set in applyUILang)
   turns this on for Arabic only. Right-align text and flip the rows that assume a
   left-to-right reading order. Emoji, numbers and prices are intentionally left as-is.
   Left for a later polish: the literal "‹" chevron glyphs on back buttons still point left. */
[dir="rtl"] body,
[dir="rtl"] .card,
[dir="rtl"] .msg,
[dir="rtl"] .lesson,
[dir="rtl"] .lessonbody,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] p,
[dir="rtl"] .tag,
[dir="rtl"] .field > span,
[dir="rtl"] .hint,
[dir="rtl"] .hint-left,
[dir="rtl"] .msg.hint,
[dir="rtl"] .convo .hint { text-align: right; }

/* chat bubbles mirror sides: buyer to the right, seller to the left */
[dir="rtl"] .buyer { align-self: flex-end; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
[dir="rtl"] .seller { align-self: flex-start; border-bottom-right-radius: 18px; border-bottom-left-radius: 6px; }

/* rows that read left-to-right flip direction (chip rows, meta bars, list + coach/who rows).
   .chips.q keeps its column layout via its higher specificity, so the interview is unaffected. */
[dir="rtl"] .chips,
[dir="rtl"] .drillbar,
[dir="rtl"] .stepbar,
[dir="rtl"] .meta-row,
[dir="rtl"] .plan-row,
[dir="rtl"] .plan-btns,
[dir="rtl"] .pw-benefit,
[dir="rtl"] .pw-topup,
[dir="rtl"] .weak-row,
[dir="rtl"] .who-sensei,
[dir="rtl"] .sensei-note,
[dir="rtl"] .sensei-toast { flex-direction: row-reverse; }

/* progress fills grow from the right edge */
[dir="rtl"] .stepprog-fill,
[dir="rtl"] .bar-fill,
[dir="rtl"] .lessonprog-fill,
[dir="rtl"] .wbar-fill { margin-left: auto; margin-right: 0; }

/* left-assuming padding/margins flip to the right */
[dir="rtl"] .ob-dots { padding-left: 0; padding-right: 4px; }
[dir="rtl"] .chip.locked::after { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .stepcount { text-align: left; }