:root {
  --bg: #0f1117;
  --card: #1a1d29;
  --card-2: #21253440;
  --accent: #ff4f81;
  --accent-2: #7c5cff;
  --accent-3: #ffb648;
  --good: #2ecc71;
  --bad: #ff5c5c;
  --text: #f5f6fa;
  --text-dim: #9aa0b4;
  --radius: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
  user-select: none;
  /* Belt-and-suspenders: make sure content taller than one screen (e.g.
     the home screen with all settings expanded on a smaller phone) can
     always be scrolled to reveal what's below the fold, and scrolls
     smoothly on iOS. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(16px + var(--safe-top)) 16px calc(40px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
}

.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.topbar h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.topbar-tagline {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  margin-top: 1px;
}
.pill {
  background: var(--card);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.pill.streak { color: #ffb454; }

/* ---------- Home screen ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 16px;
}
.stat-box {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
}
.stat-box .num { font-size: 24px; font-weight: 800; }
.stat-box .label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.progress-bar-track {
  background: var(--card);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 22px;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 999px;
  transition: width .4s ease;
}

.mode-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

/* Session length chips — enough options now (25 up to ALL) that they need
   to wrap across rows instead of squeezing into one. */
.batch-size-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.batch-size-grid .btn { flex: 1 1 27%; padding: 12px 6px; font-size: 14px; }

.mode-check {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
}
.mode-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.mode-check .desc { font-weight: 400; color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.mode-level {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: var(--card-2);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: middle;
}

.btn {
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  width: 100%;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn.secondary {
  background: var(--card);
  color: var(--text);
}
.btn.ghost {
  background: transparent;
  border: 1px solid var(--card-2);
  color: var(--text-dim);
}

.spacer { flex: 1; }

/* ---------- Session screen ---------- */
.session-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.exit-btn {
  background: var(--card);
  border: none;
  color: var(--text-dim);
  border-radius: 999px;
  width: 34px; height: 34px;
  font-size: 16px;
}
.session-progress-track {
  flex: 1;
  height: 8px;
  background: var(--card);
  border-radius: 999px;
  overflow: hidden;
}
.session-progress-fill {
  height: 100%;
  background: var(--good);
  transition: width .3s ease;
}

.card-photo-wrap {
  margin: 8px 0 18px;
  perspective: 600px; /* lets the tap-to-cycle rotateY flip render in 3D */
}
/* Tappable when extra reference photos exist (see wirePhotoCycle) — a
   small counter is the only hint that there's more than one photo. */
.card-photo-wrap.cyclable { position: relative; cursor: pointer; }
.photo-cycle-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 17, 23, 0.75);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.card-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  object-fit: cover;
  /* Default crop bias for photos with no detected face (see photoFocus/
     focus in data.js) -- faces usually land in the upper half, not dead
     center, so this is a safer fallback than 50% 50%. */
  object-position: center 25%;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.avatar-fallback {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 800;
  color: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.prompt-name {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 4px;
}
.prompt-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 18px;
}
.guesses-left {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 auto 16px;
  width: fit-content;
}
.pronoun-pill {
  display: inline-block;
  background: var(--card);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-right: 6px;
  text-transform: lowercase;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.social-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The two video clips have no text label, so color is what tells them
   apart — reuses the app's own two brand accents. */
.video-icon-btn.video-icon-1 { background: var(--accent-2); color: #fff; }
.video-icon-btn.video-icon-2 { background: var(--accent); color: #fff; }
.video-icon-btn.video-icon-3 { background: var(--accent-3); color: #1a1200; }

.bio-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 18px;
  text-align: center;
}

/* Styles / Experience — one compact card per style they answered. */
.styles-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.style-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.style-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.style-name { font-weight: 800; font-size: 15px; flex: 1; }
.style-years {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--card-2);
  border-radius: 999px;
  padding: 3px 10px;
}
.style-level {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.style-level.advanced { background: rgba(46,204,113,0.18); color: var(--good); }
.style-level.intermediate { background: rgba(124,92,255,0.18); color: var(--accent-2); }
.style-level.beginner { background: rgba(154,160,180,0.18); color: var(--text-dim); }
.style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.style-chip {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 5px 9px;
}
/* One color per style so a name's discipline is obvious at a glance. */
.style-chip-ballet { background: rgba(255,79,129,0.16); color: var(--accent); }
.style-chip-jazz { background: rgba(124,92,255,0.18); color: var(--accent-2); }
.style-chip-contemporary { background: rgba(79,195,255,0.16); color: #4fc3ff; }
.style-chip-hiphop { background: rgba(255,180,84,0.18); color: #ffb454; }
.style-chip-default { color: var(--text); background: var(--card-2); }

/* Shared notes on a dancer's Learn Mode card */
.notes-header { font-size: 12px; color: var(--text-dim); font-weight: 700; margin: 8px 0 6px; }
.notes-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.note-item { background: var(--card); border-radius: var(--radius); padding: 12px 14px; }
.note-text { font-size: 14px; line-height: 1.4; margin-bottom: 4px; }
.note-meta { font-size: 11px; color: var(--text-dim); }
.notes-empty { font-size: 13px; color: var(--text-dim); padding: 4px 2px; }

/* Letter reveal / typed input mode — the boxes themselves are the typing
   surface (tap anywhere in the row or the hint label to bring up the
   keyboard); a real input still exists for focus/keystrokes but is
   visually hidden (see .type-input-hidden). Up to three stacked lines:
   first name / quoted nickname / last name (see quizRows in app.js). */
.hint-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  cursor: text;
}
.hint-row-line {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px 14px;
  flex-wrap: wrap;
}
.hint-row-line.quoted { gap: 10px 8px; }
.hint-quote {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-dim);
  line-height: 34px;
  flex-shrink: 0;
}
/* The "or" between two nicknames — a label, not something you type, so no
   box and no letters to fill in; just small text between the two groups. */
.hint-or-label {
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: lowercase;
  flex-shrink: 0;
}
/* Each word's letters are grouped so a wrap only ever happens BETWEEN
   words (e.g. last name drops to its own line), never mid-word. */
.hint-word {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
}
.hint-letter {
  width: 26px;
  height: 34px;
  border-radius: 8px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Live feedback as you type, plus permanently-revealed hint letters —
   both share the "correct" (green) look; a letter typed in the wrong
   spot shows red until corrected. */
.hint-letter.correct { color: var(--good); border-bottom: 2px solid var(--good); }
.hint-letter.wrong { color: var(--bad); border-bottom: 2px solid var(--bad); }
.hint-letter.blank { color: transparent; border-bottom: 2px solid var(--card-2); }

/* Tap-to-type hint label + mic button, side by side */
.voice-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.type-hint {
  flex: 1;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  cursor: text;
}
.type-hint.focused { border-color: var(--accent-2); color: var(--text); }
.mic-btn {
  width: 52px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 20px;
}
.mic-btn.listening {
  background: var(--bad);
  animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.06); }
}

/* Real input kept in the DOM to own focus/keyboard/mic-transcript, but
   never shown — the hint-row boxes and .type-hint label are what the
   user actually sees and taps. */
.type-input-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* A normal, visible text input (name gate, etc.) — the letters-mode input
   above is the one special case that's intentionally invisible. */
.type-input-visible {
  width: 100%;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 16px;
  color: var(--text);
  text-align: center;
  margin-bottom: 12px;
}
.type-input-visible:focus { outline: none; border-color: var(--accent-2); }

/* Multiple choice grids */
.choice-grid-names {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choice-btn {
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.choice-btn.correct { border-color: var(--good); background: #1c3326; }
.choice-btn.wrong { border-color: var(--bad); background: #3a1c1c; }
.choice-btn:disabled { opacity: 0.6; }

.choice-grid-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.photo-choice {
  /* Portrait, not square — headshots are taller than wide, and this fills
     more of the screen per tile than a 1:1 grid would. */
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  border: 3px solid transparent;
  overflow: hidden;
  padding: 0;
  background: var(--card);
  perspective: 600px; /* lets the cycle-photos rotateY flip render in 3D */
}
.photo-choice img, .photo-choice .avatar-fallback {
  width: 100%; height: 100%;
  /* Crop to fill instead of the browser's default stretch-to-fit, which
     distorted every photo whose native aspect ratio wasn't a perfect
     square (i.e. almost all of them). */
  object-fit: cover;
  object-position: center 25%; /* fallback bias when no face was detected */
  border-radius: 0;
}
.photo-choice.correct { border-color: var(--good); }
.photo-choice.wrong { border-color: var(--bad); }

/* "Headshot" + "Cycle Photos" bar shown under a photo grid whenever at
   least one dancer in it has extra reference photos to flip through. */
.photo-toolbar {
  display: flex;
  gap: 10px;
  margin: 12px 0 16px;
}
.photo-toolbar .btn {
  flex: 1;
  width: auto;
}

/* Learn Mode's "See All Photos" grid — a plain scrollable grid of square
   thumbnails, dense enough to scan quickly for dancers with 50-150+ extra
   reference photos instead of tapping through them one at a time. */
.photo-grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.photo-grid-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  border: none;
  overflow: hidden;
  padding: 0;
  background: var(--card);
}
.photo-grid-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

/* Full-screen single-photo viewer opened from the grid above. */
.photo-viewer-screen { background: var(--bg); }
.photo-viewer-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.photo-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}
/* Instagram-style caption/hashtag scrim over the bottom of the photo —
   only the photos pulled from Instagram carry these (see data.js's
   `photos` field); the primary headshot never has a caption, so the
   overlay just stays hidden for it. */
.photo-viewer-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 45%;
  overflow-y: auto;
  padding: 34px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0.55) 65%, transparent);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: max-height 0.2s ease;
}
/* Expanded state (tapped "Show more") is allowed to grow taller, but still
   capped and scrollable -- collapsed is the default so a long caption never
   covers the whole photo unasked. */
.photo-viewer-overlay.expanded { max-height: 80%; }
.photo-viewer-caption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.photo-viewer-caption.expanded {
  display: block;
  overflow: visible;
}
/* Hashtags are highlighted in place within the caption rather than also
   listed separately -- they're already part of the text. */
.hashtag { color: var(--accent-2); font-weight: 600; }
.photo-viewer-more-btn {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.photo-viewer-counter {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  margin: 10px 0;
}
.photo-viewer-controls {
  display: flex;
  gap: 10px;
}
.photo-viewer-controls .btn { flex: 1; width: auto; }

/* Matching game — 3x4 grid of photo + name tiles, tap two to pair them.
   Each tile flips (a real 3D flip, not just a color swap) to a green
   check once solved; a wrong pair shakes and flashes red, then reverts. */
.match-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.match-tile {
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  perspective: 600px;
}
.match-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}
.match-tile.solved .match-tile-inner { transform: rotateY(180deg); }
.match-tile-front, .match-tile-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  backface-visibility: hidden;
  overflow: hidden;
  border: 3px solid transparent;
  background: var(--card);
}
/* Gradient border on selection, same pink-to-purple used everywhere else
   (buttons, progress bars) — padding-box/border-box layered backgrounds
   fake a gradient border since border-image + border-radius is unreliable. */
.match-tile.selected .match-tile-front {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(90deg, var(--accent-2), var(--accent)) border-box;
}
.match-tile.wrong .match-tile-front {
  border-color: var(--bad);
  background: #3a1c1c;
  animation: match-shake 0.5s ease;
}
.match-tile-back {
  background: var(--good);
  color: #06210f;
  font-size: 30px;
  font-weight: 800;
  transform: rotateY(180deg);
}
.match-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 0; }
.match-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 6px;
}
.match-name-line { font-size: 13px; font-weight: 700; line-height: 1.25; }
.match-name-nick { font-size: 11px; font-weight: 600; color: var(--text-dim); line-height: 1.2; }
@keyframes match-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* Feedback banner */
.feedback-banner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(16px + var(--safe-bottom));
  max-width: 448px;
  margin: 0 auto;
  padding: 16px;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
  transform: translateY(120%);
  transition: transform .25s ease;
  z-index: 20;
}
.feedback-banner.show { transform: translateY(0); }
.feedback-banner.correct { background: var(--good); color: #06210f; }
.feedback-banner.wrong { background: var(--bad); color: #2b0808; }

.new-card-badge {
  align-self: center;
  background: var(--accent-2);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Session complete screen */
.complete-emoji { font-size: 60px; text-align: center; margin: 20px 0; }
.complete-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.complete-sub { text-align: center; color: var(--text-dim); margin-bottom: 24px; }

@media (max-height: 700px) {
  /* Shorter phones get a wider (less tall) crop so the photo still spans
     full width without pushing the rest of the card below the fold. */
  .card-photo, .avatar-fallback { aspect-ratio: 3 / 2; }
}

/* Recruiting interview screen — a compact header (small photo, name,
   who/when interviewed) instead of the usual full-width hero photo, since
   this page is about the interview content, not the face. Styled to feel
   like a genuine endorsement rather than a plain admissions-notes dump:
   the app's signature pink-to-purple gradient shows up as a ring around
   the photo, a rule under section titles, and the frame around the
   interviewer's closing quote. */
.interview-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.interview-photo-wrap { flex-shrink: 0; }
/* Padding-box/border-box layering fakes a gradient ring (border-image +
   border-radius isn't reliably supported) -- same trick used for the
   matching game's selected-tile border. */
.interview-photo-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
/* Overrides .card-photo/.avatar-fallback's full-width hero sizing down to
   a small circle -- must come after those rules to win the cascade. */
.interview-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  font-size: 24px;
  box-shadow: none;
  border: 2px solid var(--bg);
}
.interview-header-info { flex: 1; min-width: 0; }
.interview-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.interview-byline {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}
.interview-section { margin-bottom: 24px; }
/* Serif italic headers with a short gradient rule underneath set the
   interview sections apart from the rest of the app's all-sans-serif
   type -- the one deliberately "elegant" flourish on this page. */
.interview-section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 19px;
  color: var(--accent-2);
  letter-spacing: 0.2px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--accent-2), var(--accent) 40%, transparent) 1;
  display: inline-block;
}
.interview-section-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}
/* The interviewer's closing thoughts get a pull-quote treatment -- a
   tinted gradient panel with an oversized quotation mark, since this is
   the one place the page is meant to read as an endorsement rather than
   a form field. */
.interview-quote {
  position: relative;
  margin-top: 28px;
  padding: 22px 20px 20px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(124,92,255,0.16), rgba(255,79,129,0.08));
  border: 1px solid rgba(124,92,255,0.25);
}
.interview-quote .interview-section-title { border-image: none; border-bottom: none; padding-bottom: 0; }
.interview-quote-mark {
  position: absolute;
  top: -6px;
  left: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.5;
}
.interview-quote-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  margin-top: 4px;
}

/* Session-complete screen — the row of faces met this session, so "0
   mastered" on an early session doesn't read as a blank result. */
.complete-new-dancers-title {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  margin: 22px 0 12px;
}
.met-dancers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.met-dancer-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
}
.met-dancer-photo {
  width: 52px;
  height: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  font-size: 18px;
  box-shadow: none;
}
.met-dancer-name {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  text-align: center;
  line-height: 1.25;
}